npm - @nylas/web-elements - Versions diffs - 1.1.0-canary.3 → 1.1.0-canary.5 - Mend

@nylas/web-elements 1.1.0-canary.3 → 1.1.0-canary.5

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 (831) hide show

package/dist/components/nylas-event-title2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-event-title2.js","mappings":"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","names":["eventTitleTokens"],"sources":["src/components/scheduler-editor/nylas-event-title/nylas-event-title.scss?tag=nylas-event-title&encapsulation=shadow","src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-event-title {\n display: flex;\n flex-direction: column;\n gap: 4px;\n position: relative;\n text-align: left;\n div.title {\n padding: 12px 16px;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n overflow: scroll;\n white-space: nowrap;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n }\n input {\n padding: 12px 16px;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-200);\n }\n span.help-text {\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 21px;\n }\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.required {\n color: var(--nylas-error, #cc4841);\n }\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n}\n\n.highlighted-tag {\n background-color: var(--nylas-base-200);\n border-radius: var(--nylas-border-radius);\n padding: 5px;\n margin-left: 4px;\n}\n\n.token-options {\n display: block;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px + 8px); // 48px is the height of the input, 24px is the height of the label, 8px is the gap between the label and the input\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n margin: 0;\n li {\n padding: 16px, 12px, 16px, 12px;\n color: black;\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 .token-label {\n display: flex;\n flex-direction: column;\n font-weight: 400;\n .token {\n color: var(--nylas-abse-900);\n font-size: 16px;\n line-height: 24px;\n }\n .description {\n color: var(--nylas-base-600);\n font-size: 14px;\n line-height: 21px;\n }\n }\n &:hover,\n &:focus,\n &:active,\n &.active {\n background-color: var(--nylas-base-100);\n .token-label {\n .token {\n color: var(--nylas-primary);\n }\n }\n }\n }\n }\n .selected {\n background-color: var(--nylas-base-100);\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, getBrowser } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { EVENT_TITLE_TOKENS as eventTitleTokens } from '@/common/constants';\n\ninterface CustomShadowRoot extends ShadowRoot {\n getSelection: () => Selection \| null;\n}\n\ntype Token = {\n token: string;\n value: string;\n description: string;\n};\n\n/\n The `nylas-event-title` component is a form input for the title of an event.\n * @part net - The event title container\n * @part net__title - The event title input\n * @part net__dropdown-content - The token options container\n /\n@Component({\n tag: 'nylas-event-title',\n styleUrl: 'nylas-event-title.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventTitle {\n @Element() host!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n // Properties\n /\n The title of the event from the cofiguration.\n /\n @Prop() eventTitle?: string;\n /\n The name attribute of this component.\n /\n @Prop() name: string = 'title';\n\n // State variables\n /\n Whether to show the tokens dropdown.\n /\n @State() showTokens: boolean = false;\n /\n The available token options for the dropdown.\n /\n @State() availableTokens: { label: string; value: string; labelHTML: Token }[] = eventTitleTokens.map(token => ({\n label: token.token,\n value: token.value,\n labelHTML: token,\n }));\n /\n The filtered token options for the dropdown based on the current query.\n /\n @State() filteredTokens: { label: string; value: string; labelHTML: Token }[] = this.availableTokens;\n /\n The aria-activedescendant attribute value. This is used to indicate the\n * currently active descendant in the tokens dropdown.\n /\n @State() ariaActivedescendant: string = '';\n /\n Stores the reference to the current word being typed.\n * This is used to update the event title with the selected token tag when\n * an option is selected from the dropdown by clicking on it.\n /\n @State() currentWord: {\n $value: string;\n fullText: string;\n index: number;\n focusOffset: number;\n } = { $value: '', fullText: '', index: -1, focusOffset: -1 };\n\n // Reference to the title div element\n private titleRef!: HTMLDivElement;\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-title', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('ariaActivedescendant')\n ariaActivedescendantChangedHandler(newValue: string) {\n debug('nylas-event-title', 'ariaActivedescendantChangedHandler', newValue);\n if (newValue !== '') {\n const activeOption = this.host.shadowRoot?.getElementById(newValue);\n activeOption?.classList.add('active');\n } else {\n const options = this.host.shadowRoot?.querySelectorAll('.token-options li.active');\n options?.forEach(option => option.classList.remove('active'));\n }\n }\n\n // Events\n /\n This event is fired when the value of the event title changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-event-title', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-title', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-title', 'componentDidLoad');\n this.updateEventTitleFromProp(this.eventTitle \|\| '');\n }\n\n disconnectedCallback() {\n debug('nylas-event-title', 'disconnectedCallback');\n }\n\n updateEventTitleFromProp(newValue: string) {\n debug('nylas-event-title', 'eventTitleChangedHandler', newValue);\n\n this.titleRef.innerHTML = this.highlightTokens();\n this.titleRef.focus();\n }\n\n highlightTokens() {\n let outputHtml = this.eventTitle \|\| '';\n\n eventTitleTokens.forEach(tokenObj => {\n const token = tokenObj.value;\n // Create a regular expression that matches the token as a whole word\n const regex = new RegExp(`(\\\\${token})(?!\\\\w)`, 'g');\n // Replace the token with a span element\n outputHtml = outputHtml.replace(regex, '<span class=\"highlighted-tag\">$1</span>');\n });\n return outputHtml;\n }\n\n getCurrentSelectionForBrowser() {\n const getSelectionTextData = (nodeValue, offset, node) => {\n // Remove zero-width space characters from the text, because they are not visible and cause issues with the selection\n const text = nodeValue.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n const dollarIndex = text.lastIndexOf('$');\n const lastWord = text.substring(dollarIndex).split(' ')[0];\n return {\n focusOffset: offset,\n dollarIndex,\n lastWord,\n currentText: text,\n node,\n };\n };\n\n const currentBrowser = getBrowser();\n console.log('currentBrowser', currentBrowser);\n switch (currentBrowser) {\n case 'Chrome':\n const shadowRootSelection = (this.host.shadowRoot as CustomShadowRoot)?.getSelection();\n const focusNode = shadowRootSelection?.focusNode;\n const focusNodeValue = focusNode?.nodeValue \|\| '';\n return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset \|\| -1, focusNode);\n case 'Firefox':\n const selection = document.getSelection();\n const anchorNodeValue = selection?.anchorNode?.nodeValue \|\| '';\n return getSelectionTextData(anchorNodeValue, selection?.focusOffset \|\| -1, selection?.anchorNode);\n case 'Safari':\n const windowSelection = window.getSelection();\n const anchorNode = (windowSelection as any)?.getComposedRanges(this.host.shadowRoot as CustomShadowRoot)[0];\n const currentText = anchorNode?.startContainer?.nodeValue \|\| '';\n return getSelectionTextData(currentText, anchorNode?.endOffset \|\| -1, anchorNode?.startContainer);\n default:\n console.warn('Browser not supported');\n return null;\n }\n }\n\n handleChange(event: Event) {\n const textContent = (event.target as HTMLDivElement).textContent \|\| '';\n // All browsers handle Selection within Shadow DOM differently, so get the current selection based on the browser\n const currentSelection = this.getCurrentSelectionForBrowser();\n if (!currentSelection) {\n this.updateEventTitle(textContent);\n this.resetDropdown();\n return;\n }\n const { focusOffset, dollarIndex, lastWord, currentText } = currentSelection;\n\n if (dollarIndex === -1 \|\| focusOffset < dollarIndex) {\n this.updateEventTitle(textContent);\n this.resetDropdown();\n return;\n }\n if (lastWord.startsWith('$')) {\n this.showTokens = true;\n // Update the current word being typed, we need this reference to update the event title with the selected token\n // because the user can select an option from the dropdown by clicking on it, which will not trigger the input event.\n this.currentWord = {\n $value: lastWord,\n fullText: currentText,\n index: dollarIndex,\n focusOffset,\n };\n this.populateSuggestionsDropdown(lastWord);\n } else {\n this.resetDropdown();\n }\n this.updateEventTitle(textContent);\n }\n\n handleInputKeyDown(event) {\n if (event.key === 'Enter') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n activeOption.click();\n this.ariaActivedescendant = '';\n }\n } else if (event.key === 'ArrowDown') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n const nextOption = activeOption.nextElementSibling;\n if (nextOption) {\n this.ariaActivedescendant = nextOption.id;\n } else {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n } else {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n const prevOption = activeOption.previousElementSibling;\n if (prevOption) {\n this.ariaActivedescendant = prevOption.id;\n } else {\n this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n }\n } else {\n this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n }\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.resetDropdown();\n } else if (event.key === 'Backspace' \|\| event.key === 'Delete') {\n const selection = this.getCurrentSelectionForBrowser();\n if (selection?.currentText.startsWith('${')) {\n selection?.node?.parentNode && selection.node.parentNode.removeChild(selection.node);\n }\n }\n }\n\n selectOption(e: Event, option: { label: string; value: string; labelHTML: Token }) {\n e.preventDefault();\n const word = this.currentWord.fullText;\n const dollarWord = this.currentWord.$value;\n\n // Traverse the DOM to find the text node that contains the current word fullText\n let currentNode = this.titleRef.firstChild;\n let textNode: ChildNode \| null = null;\n\n while (currentNode) {\n if (currentNode.nodeType === 3) {\n const currentNodeText = currentNode.textContent?.replace(/[\\u200B-\\u200D\\uFEFF]/g, '') \|\| '';\n const wordText = word.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n if (currentNodeText.includes(wordText)) {\n textNode = currentNode;\n break;\n }\n }\n currentNode = currentNode.nextSibling;\n }\n\n if (!textNode) {\n return;\n }\n // Split the text node into three parts: text before the token, the token, and text after the token\n const text = textNode.textContent \|\| '';\n const index = text.indexOf(dollarWord);\n const textBefore = text.substring(0, index);\n const textAfter = text.substring(index + dollarWord.length);\n const newTextNode = document.createTextNode(textBefore);\n const newRange = document.createRange();\n\n // Create a new span element to replace the text node\n const tagSpan = document.createElement('span');\n tagSpan.classList.add('highlighted-tag');\n tagSpan.textContent = `${option.value}`;\n const newTextNodeAfter = document.createTextNode(textAfter);\n\n if (textAfter !== '') {\n // If there is text after the token, add it to the new span element\n textNode.replaceWith(newTextNode, tagSpan, newTextNodeAfter);\n newRange.setStart(newTextNodeAfter, 0);\n } else {\n // If there is no text after the token, add a zero-width space character (Without this, the cursor will not move outside the highlighted span element)\n const afterNode = document.createTextNode('\\u200B');\n textNode.replaceWith(newTextNode, tagSpan, afterNode);\n newRange.setStart(afterNode, 0);\n }\n\n // Hide the dropdown\n this.resetDropdown();\n this.titleRef.focus();\n\n // Set the focus to the new span element\n const sel = window.getSelection();\n newRange.collapse(true);\n sel?.removeAllRanges();\n sel?.addRange(newRange);\n\n // Update the event title with the selected token\n this.updateEventTitle(this.titleRef.textContent \|\| '');\n }\n\n populateSuggestionsDropdown(query: string = '') {\n this.filteredTokens = this.availableTokens.filter(obj => {\n return obj.label.startsWith(query.toString()) \|\| obj.value.startsWith(query.toString());\n });\n\n // Set the first option as the active descendant\n if (this.filteredTokens.length > 0) {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n }\n\n updateEventTitle(text: string) {\n const value = text.replace(/ +/g, ' ');\n this.valueChanged.emit({ value: value, name: this.name });\n }\n\n resetDropdown() {\n this.showTokens = false;\n this.ariaActivedescendant = '';\n }\n\n getLabelHTML(token: { token: string; description: string }) {\n return (\n <div class=\"token-label\">\n <span class=\"token\">{token.token}</span>\n <span class=\"description\">{token.description}</span>\n </div>\n );\n }\n\n @RegisterComponent<NylasEventTitle, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-title',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-event-title\" part=\"net\">\n <label htmlFor=\"title\">\n Event title<span class=\"required\"></span>\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Enter a title for your event.</span>\n </tooltip-component>\n </span>\n </label>\n <div\n class=\"title\"\n part=\"net__title\"\n ref={el => (this.titleRef = el as HTMLDivElement)}\n contentEditable=\"true\"\n onInput={e => this.handleChange(e)}\n onKeyDown={event => this.handleInputKeyDown(event)}\n ></div>\n {this.showTokens && this.filteredTokens?.length > 0 && (\n <div class=\"token-options\" part=\"net__dropdown-content\">\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant}>\n {this.filteredTokens.map(option => (\n <li\n tabindex=\"0\"\n key={option.label}\n id={option.label}\n class={{ active: this.ariaActivedescendant === option.label }}\n onClick={e => this.selectOption(e, option)}\n role=\"option\"\n >\n {this.getLabelHTML(option.labelHTML)}\n </li>\n ))}\n </ul>\n </div>\n )}\n <span class=\"help-text\">Create a dynamic templated event title by typing $. Learn more</span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-event-title2.js","mappings":"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","names":["eventTitleTokens"],"sources":["src/components/scheduler-editor/nylas-event-title/nylas-event-title.scss?tag=nylas-event-title&encapsulation=shadow","src/components/scheduler-editor/nylas-event-title/nylas-event-title.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-event-title {\n display: flex;\n flex-direction: column;\n gap: 4px;\n position: relative;\n text-align: left;\n div.title {\n padding: 12px 16px;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n overflow: scroll;\n white-space: nowrap;\n scrollbar-width: thin;\n &::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n }\n input {\n padding: 12px 16px;\n border-width: 1;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-200);\n }\n span.help-text {\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 21px;\n }\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.required {\n color: var(--nylas-error, #cc4841);\n }\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n}\n\n.highlighted-tag {\n background-color: var(--nylas-base-200);\n border-radius: var(--nylas-border-radius);\n padding: 5px;\n margin-left: 4px;\n}\n\n.token-options {\n display: block;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n top: calc(48px + 24px + 8px); // 48px is the height of the input, 24px is the height of the label, 8px is the gap between the label and the input\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n margin: 0;\n li {\n padding: 16px, 12px, 16px, 12px;\n color: black;\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 .token-label {\n display: flex;\n flex-direction: column;\n font-weight: 400;\n .token {\n color: var(--nylas-abse-900);\n font-size: 16px;\n line-height: 24px;\n }\n .description {\n color: var(--nylas-base-600);\n font-size: 14px;\n line-height: 21px;\n }\n }\n &:hover,\n &:focus,\n &:active,\n &.active {\n background-color: var(--nylas-base-100);\n .token-label {\n .token {\n color: var(--nylas-primary);\n }\n }\n }\n }\n }\n .selected {\n background-color: var(--nylas-base-100);\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, getBrowser } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { EVENT_TITLE_TOKENS as eventTitleTokens } from '@/common/constants';\n\ninterface CustomShadowRoot extends ShadowRoot {\n getSelection: () => Selection \| null;\n}\n\ntype Token = {\n token: string;\n value: string;\n description: string;\n};\n\n/\n The `nylas-event-title` component is a form input for the title of an event.\n * @part net - The event title container\n * @part net__title - The event title input\n * @part net__dropdown-content - The token options container\n /\n@Component({\n tag: 'nylas-event-title',\n styleUrl: 'nylas-event-title.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasEventTitle {\n @Element() host!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n // Properties\n /\n The title of the event from the cofiguration.\n /\n @Prop() eventTitle?: string;\n /\n The name attribute of this component.\n /\n @Prop() name: string = 'title';\n\n // State variables\n /\n Whether to show the tokens dropdown.\n /\n @State() showTokens: boolean = false;\n /\n The available token options for the dropdown.\n /\n @State() availableTokens: { label: string; value: string; labelHTML: Token }[] = eventTitleTokens.map(token => ({\n label: token.token,\n value: token.value,\n labelHTML: token,\n }));\n /\n The filtered token options for the dropdown based on the current query.\n /\n @State() filteredTokens: { label: string; value: string; labelHTML: Token }[] = this.availableTokens;\n /\n The aria-activedescendant attribute value. This is used to indicate the\n * currently active descendant in the tokens dropdown.\n /\n @State() ariaActivedescendant: string = '';\n /\n Stores the reference to the current word being typed.\n * This is used to update the event title with the selected token tag when\n * an option is selected from the dropdown by clicking on it.\n /\n @State() currentWord: {\n $value: string;\n fullText: string;\n index: number;\n focusOffset: number;\n } = { $value: '', fullText: '', index: -1, focusOffset: -1 };\n\n // Reference to the title div element\n private titleRef!: HTMLDivElement;\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n /\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-event-title', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('ariaActivedescendant')\n ariaActivedescendantChangedHandler(newValue: string) {\n debug('nylas-event-title', 'ariaActivedescendantChangedHandler', newValue);\n if (newValue !== '') {\n const activeOption = this.host.shadowRoot?.getElementById(newValue);\n activeOption?.classList.add('active');\n } else {\n const options = this.host.shadowRoot?.querySelectorAll('.token-options li.active');\n options?.forEach(option => option.classList.remove('active'));\n }\n }\n\n // Events\n /\n This event is fired when the value of the event title changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-event-title', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-title', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-event-title', 'componentDidLoad');\n this.updateEventTitleFromProp(this.eventTitle \|\| '');\n }\n\n disconnectedCallback() {\n debug('nylas-event-title', 'disconnectedCallback');\n }\n\n updateEventTitleFromProp(newValue: string) {\n debug('nylas-event-title', 'eventTitleChangedHandler', newValue);\n\n this.titleRef.innerHTML = this.highlightTokens();\n this.titleRef.focus();\n }\n\n highlightTokens() {\n let outputHtml = this.eventTitle \|\| '';\n\n eventTitleTokens.forEach(tokenObj => {\n const token = tokenObj.value;\n // Create a regular expression that matches the token as a whole word\n const regex = new RegExp(`(\\\\${token})(?!\\\\w)`, 'g');\n // Replace the token with a span element\n outputHtml = outputHtml.replace(regex, '<span class=\"highlighted-tag\">$1</span>');\n });\n return outputHtml;\n }\n\n getCurrentSelectionForBrowser() {\n const getSelectionTextData = (nodeValue, offset, node) => {\n // Remove zero-width space characters from the text, because they are not visible and cause issues with the selection\n const text = nodeValue.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n const dollarIndex = text.lastIndexOf('$');\n const lastWord = text.substring(dollarIndex).split(' ')[0];\n return {\n focusOffset: offset,\n dollarIndex,\n lastWord,\n currentText: text,\n node,\n };\n };\n\n const currentBrowser = getBrowser();\n console.log('currentBrowser', currentBrowser);\n switch (currentBrowser) {\n case 'Chrome':\n const shadowRootSelection = (this.host.shadowRoot as CustomShadowRoot)?.getSelection();\n const focusNode = shadowRootSelection?.focusNode;\n const focusNodeValue = focusNode?.nodeValue \|\| '';\n return getSelectionTextData(focusNodeValue, shadowRootSelection?.focusOffset \|\| -1, focusNode);\n case 'Firefox':\n const selection = document.getSelection();\n const anchorNodeValue = selection?.anchorNode?.nodeValue \|\| '';\n return getSelectionTextData(anchorNodeValue, selection?.focusOffset \|\| -1, selection?.anchorNode);\n case 'Safari':\n const windowSelection = window.getSelection();\n const anchorNode = (windowSelection as any)?.getComposedRanges(this.host.shadowRoot as CustomShadowRoot)[0];\n const currentText = anchorNode?.startContainer?.nodeValue \|\| '';\n return getSelectionTextData(currentText, anchorNode?.endOffset \|\| -1, anchorNode?.startContainer);\n default:\n console.warn('Browser not supported');\n return null;\n }\n }\n\n handleChange(event: Event) {\n const textContent = (event.target as HTMLDivElement).textContent \|\| '';\n // All browsers handle Selection within Shadow DOM differently, so get the current selection based on the browser\n const currentSelection = this.getCurrentSelectionForBrowser();\n if (!currentSelection) {\n this.updateEventTitle(textContent);\n this.resetDropdown();\n return;\n }\n const { focusOffset, dollarIndex, lastWord, currentText } = currentSelection;\n\n if (dollarIndex === -1 \|\| focusOffset < dollarIndex) {\n this.updateEventTitle(textContent);\n this.resetDropdown();\n return;\n }\n if (lastWord.startsWith('$')) {\n this.showTokens = true;\n // Update the current word being typed, we need this reference to update the event title with the selected token\n // because the user can select an option from the dropdown by clicking on it, which will not trigger the input event.\n this.currentWord = {\n $value: lastWord,\n fullText: currentText,\n index: dollarIndex,\n focusOffset,\n };\n this.populateSuggestionsDropdown(lastWord);\n } else {\n this.resetDropdown();\n }\n this.updateEventTitle(textContent);\n }\n\n handleInputKeyDown(event) {\n if (event.key === 'Enter') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n activeOption.click();\n this.ariaActivedescendant = '';\n }\n } else if (event.key === 'ArrowDown') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n const nextOption = activeOption.nextElementSibling;\n if (nextOption) {\n this.ariaActivedescendant = nextOption.id;\n } else {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n } else {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n const activeOption = this.host.shadowRoot?.getElementById(this.ariaActivedescendant);\n if (activeOption) {\n const prevOption = activeOption.previousElementSibling;\n if (prevOption) {\n this.ariaActivedescendant = prevOption.id;\n } else {\n this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n }\n } else {\n this.ariaActivedescendant = this.filteredTokens[this.filteredTokens.length - 1].label;\n }\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.resetDropdown();\n } else if (event.key === 'Backspace' \|\| event.key === 'Delete') {\n const selection = this.getCurrentSelectionForBrowser();\n if (selection?.currentText.startsWith('${')) {\n selection?.node?.parentNode && selection.node.parentNode.removeChild(selection.node);\n }\n }\n }\n\n selectOption(e: Event, option: { label: string; value: string; labelHTML: Token }) {\n e.preventDefault();\n const word = this.currentWord.fullText;\n const dollarWord = this.currentWord.$value;\n\n // Traverse the DOM to find the text node that contains the current word fullText\n let currentNode = this.titleRef.firstChild;\n let textNode: ChildNode \| null = null;\n\n while (currentNode) {\n if (currentNode.nodeType === 3) {\n const currentNodeText = currentNode.textContent?.replace(/[\\u200B-\\u200D\\uFEFF]/g, '') \|\| '';\n const wordText = word.replace(/[\\u200B-\\u200D\\uFEFF]/g, '');\n if (currentNodeText.includes(wordText)) {\n textNode = currentNode;\n break;\n }\n }\n currentNode = currentNode.nextSibling;\n }\n\n if (!textNode) {\n return;\n }\n // Split the text node into three parts: text before the token, the token, and text after the token\n const text = textNode.textContent \|\| '';\n const index = text.indexOf(dollarWord);\n const textBefore = text.substring(0, index);\n const textAfter = text.substring(index + dollarWord.length);\n const newTextNode = document.createTextNode(textBefore);\n const newRange = document.createRange();\n\n // Create a new span element to replace the text node\n const tagSpan = document.createElement('span');\n tagSpan.classList.add('highlighted-tag');\n tagSpan.textContent = `${option.value}`;\n const newTextNodeAfter = document.createTextNode(textAfter);\n\n if (textAfter !== '') {\n // If there is text after the token, add it to the new span element\n textNode.replaceWith(newTextNode, tagSpan, newTextNodeAfter);\n newRange.setStart(newTextNodeAfter, 0);\n } else {\n // If there is no text after the token, add a zero-width space character (Without this, the cursor will not move outside the highlighted span element)\n const afterNode = document.createTextNode('\\u200B');\n textNode.replaceWith(newTextNode, tagSpan, afterNode);\n newRange.setStart(afterNode, 0);\n }\n\n // Hide the dropdown\n this.resetDropdown();\n this.titleRef.focus();\n\n // Set the focus to the new span element\n const sel = window.getSelection();\n newRange.collapse(true);\n sel?.removeAllRanges();\n sel?.addRange(newRange);\n\n // Update the event title with the selected token\n this.updateEventTitle(this.titleRef.textContent \|\| '');\n }\n\n populateSuggestionsDropdown(query: string = '') {\n this.filteredTokens = this.availableTokens.filter(obj => {\n return obj.label.startsWith(query.toString()) \|\| obj.value.startsWith(query.toString());\n });\n\n // Set the first option as the active descendant\n if (this.filteredTokens.length > 0) {\n this.ariaActivedescendant = this.filteredTokens[0].label;\n }\n }\n\n updateEventTitle(text: string) {\n const value = text.replace(/ +/g, ' ');\n this.valueChanged.emit({ value: value, name: this.name });\n }\n\n resetDropdown() {\n this.showTokens = false;\n this.ariaActivedescendant = '';\n }\n\n getLabelHTML(token: { token: string; description: string }) {\n return (\n <div class=\"token-label\">\n <span class=\"token\">{token.token}</span>\n <span class=\"description\">{token.description}</span>\n </div>\n );\n }\n\n @RegisterComponent<NylasEventTitle, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-event-title',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-event-title\" part=\"net\">\n <label htmlFor=\"title\">\n Event title<span class=\"required\"></span>\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Enter a title for your event.</span>\n </tooltip-component>\n </span>\n </label>\n <div\n class=\"title\"\n part=\"net__title\"\n ref={el => (this.titleRef = el as HTMLDivElement)}\n contentEditable=\"true\"\n onInput={e => this.handleChange(e)}\n onKeyDown={event => this.handleInputKeyDown(event)}\n ></div>\n {this.showTokens && this.filteredTokens?.length > 0 && (\n <div class=\"token-options\" part=\"net__dropdown-content\">\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant}>\n {this.filteredTokens.map(option => (\n <li\n tabindex=\"0\"\n key={option.label}\n id={option.label}\n class={{ active: this.ariaActivedescendant === option.label }}\n onClick={e => this.selectOption(e, option)}\n role=\"option\"\n >\n {this.getLabelHTML(option.labelHTML)}\n </li>\n ))}\n </ul>\n </div>\n )}\n <span class=\"help-text\">Create a dynamic templated event title by typing $. Learn more</span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-form-card2.js CHANGED Viewed

@@ -38,7 +38,7 @@ const NylasFormCard = proxyCustomElement(class NylasFormCard extends HTMLElement
         debug('nylas-event-card', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: 'a25e6cf278893d8152895bedc42fa83584b26ed1' }, h("div", { key: 'ca83bf28168fe3cfff4e910dc80536574c33e55b', class: "nylas-form-card" }, h("div", { key: '0bc4aa5cfc27ed26f301a29b45ab7bafd80f507f', class: "nylas-form-card__header" }, h("slot", { key: '1df96d905cf7c3e563eaf36f9825bb67f190795a', name: "header-title" }), h("slot", { key: 'd62a004ea3fb7a282a986b749a8b5998827cf498', name: "header-subtitle" })), h("div", { key: '6f2f1576516dee66795f3c423fd23725978891b0', class: "nylas-form-card__content" }, h("slot", { key: 'af397af820898e806cf64a7528563a31ce821fd3', name: "content" })))));
+        return (h(Host, { key: '81fa6a1951100e90fcf60cf4efaa8b8a3dc92729' }, h("div", { key: '9f813106becb938ea7ef27207c1e1f83e0743b53', class: "nylas-form-card" }, h("div", { key: '157e236b69a61cb4512a8a7affb5d552e0167623', class: "nylas-form-card__header" }, h("slot", { key: '9dd035b05c0e6d6b591b8077dde95586ff0361e8', name: "header-title" }), h("slot", { key: '4e6e6422388ddf05a2ad41f47a5547315ea21507', name: "header-subtitle" })), h("div", { key: '52b8baced8af16d5c2eb96ee038e798a8f7643a2', class: "nylas-form-card__content" }, h("slot", { key: 'af22784e0343f4bcb4dc3689e719162077890c91', name: "content" })))));
     }
     static get formAssociated() { return true; }
     static get style() { return nylasFormCardCss; }
@@ -66,7 +66,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasFormCard);
 export { NylasFormCard as N, defineCustomElement as d };

package/dist/components/nylas-form-card2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-form-card2.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,0xBAA0xB;;;;;;;;;;;;;;;;MCetyB,aAAa;;;;;;;IAGxB,iBAAiB;QACf,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;KAChD;IAED,iBAAiB;QACf,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;KAChD;IAED,gBAAgB;QACd,KAAK,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;KAC/C;IAED,oBAAoB;QAClB,KAAK,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAAC;KACnD;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,yBAAyB,IAClC,6DAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,EACN,4DAAK,KAAK,EAAC,0BAA0B,IACnC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,EACP;KACH;;;;AAdD;IALC,iBAAiB,CAAmG;QACnH,IAAI,EAAE,iBAAiB;QACvB,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;2CAeD~~;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/scheduler-editor/nylas-form-card/nylas-form-card.scss?tag=nylas-form-card&encapsulation=shadow","src/components/scheduler-editor/nylas-form-card/nylas-form-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-form-card {\n width: 100%;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-200);\n}\n.nylas-form-card__header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/*\n The `nylas-form-card` component is a card that can be used to display a form. It is a simple wrapper around a card with a header and content area.\n */\n@Component({\n tag: 'nylas-form-card',\n styleUrl: 'nylas-form-card.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasFormCard {\n @AttachInternals() internals!: ElementInternals;\n\n connectedCallback() {\n debug('nylas-event-card', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-card', 'componentWillLoad');\n }\n\n componentDidLoad() {\n debug('nylas-event-card', 'componentDidLoad');\n }\n\n disconnectedCallback() {\n debug('nylas-event-card', 'disconnectedCallback');\n }\n\n @RegisterComponent<NylasFormCard, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-form-card',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-form-card\">\n <div class=\"nylas-form-card__header\">\n <slot name=\"header-title\"></slot>\n <slot name=\"header-subtitle\"></slot>\n </div>\n <div class=\"nylas-form-card__content\">\n <slot name=\"content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-form-card2.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,0xBAA0xB;;;;;;;;;;;;;;;;MCetyB,aAAa;;;;;;;IAGxB,iBAAiB;QACf,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;KAChD;IAED,iBAAiB;QACf,KAAK,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;KAChD;IAED,gBAAgB;QACd,KAAK,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;KAC/C;IAED,oBAAoB;QAClB,KAAK,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAAC;KACnD;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,yBAAyB,IAClC,6DAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,EACN,4DAAK,KAAK,EAAC,0BAA0B,IACnC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,EACP;KACH;;;;AAdD;IALC,iBAAiB,CAAmG;QACnH,IAAI,EAAE,iBAAiB;QACvB,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;2CAeD;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-form-card/nylas-form-card.scss?tag=nylas-form-card&encapsulation=shadow","src/components/scheduler-editor/nylas-form-card/nylas-form-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-form-card {\n width: 100%;\n border-radius: 8px;\n border: 1px solid var(--nylas-base-200);\n}\n.nylas-form-card__header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/*\n The `nylas-form-card` component is a card that can be used to display a form. It is a simple wrapper around a card with a header and content area.\n */\n@Component({\n tag: 'nylas-form-card',\n styleUrl: 'nylas-form-card.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasFormCard {\n @AttachInternals() internals!: ElementInternals;\n\n connectedCallback() {\n debug('nylas-event-card', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-event-card', 'componentWillLoad');\n }\n\n componentDidLoad() {\n debug('nylas-event-card', 'componentDidLoad');\n }\n\n disconnectedCallback() {\n debug('nylas-event-card', 'disconnectedCallback');\n }\n\n @RegisterComponent<NylasFormCard, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-form-card',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-form-card\">\n <div class=\"nylas-form-card__header\">\n <slot name=\"header-title\"></slot>\n <slot name=\"header-subtitle\"></slot>\n </div>\n <div class=\"nylas-form-card__content\">\n <slot name=\"content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-if-state.js CHANGED Viewed

@@ -143,7 +143,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1(NylasIfState$1);
 const NylasIfState = NylasIfState$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-if-state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-if-state.js","mappings":"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~~;;;;;;;;;;;;;;;;;;;;;~~","names":["NylasIfState"],"sources":["src/components/nylas-if-state/nylas-if-state.css?tag=nylas-if-state&encapsulation=shadow","src/components/nylas-if-state/nylas-if-state.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndiv {\n height: inherit;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n.fade-in {\n animation: fadeIn 1.5s;\n}\n\n.fade-out {\n animation: fadeOut 1.5s;\n}\n\n@keyframes slideIn {\n 0% {\n transform: translateY(100%);\n }\n 100% {\n transform: translateY(0);\n }\n}\n\n@keyframes slideOut {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(100%);\n }\n}\n\n.slide-in {\n animation: slideIn 1.5s;\n}\n\n.slide-out {\n animation: slideOut 1.5s;\n}\n\n@keyframes swipeIn {\n 0% {\n transform: translateX(100%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes swipeOut {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n.swipe-in {\n animation: swipeIn 1.5s;\n}\n\n.swipe-out {\n animation: swipeOut 1.5s;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug } from '@/utils/utils';\nimport { Component, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { ObservableMap } from '@stencil/store';\n\nexport type Stores = Record<string, ObservableMap<any>>;\n\nexport type Transitions = 'none' \| 'fade' \| 'slide' \| 'swipe';\n\n@Component({\n tag: 'nylas-if-state',\n styleUrl: 'nylas-if-state.css',\n shadow: true,\n})\nexport class NylasIfState {\n /*\n The name of the state to watch.\n /\n @Prop() readonly state?: string;\n /\n If true, then the component will render if the state is set (empty or not set).\n * This prop is used with the `state` prop.\n /\n @Prop() readonly isStateSet?: boolean;\n /\n If true, then the component will render if the state is true.\n * This prop is used with the `state` prop.\n */\n @Prop() readonly isBoolean?: boolean;\n @Prop() readonly getStore?: <K extends keyof Stores>(name: K) => Stores[K];\n @Prop() readonly transition: Transitions = 'none';\n\n @State() show: boolean = false;\n @State() classes: Record<string, boolean> = {};\n\n constructor() {\n this.initTransition = this.initTransition.bind(this);\n }\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-if-state] Component will load`);\n this.watchStore(true);\n }\n\n async componentDidLoad() {\n debug(`[nylas-if-state] Component did load`);\n }\n\n private shouldRender() {\n // If a period exists in the state name, then we need to split the state name into the store name and the state name.\n // For example, if the state name is `nylas.scheduler.selectableDates`, then the store name is `nylas` and the state name is `scheduler.selectableDates`.\n const [storeName, stateName] = this.state ? this.state.split('.') : ['', ''];\n const getStore = this.getStore;\n if (typeof getStore === 'undefined') {\n debug(`[nylas-if-state] Store name: ${storeName} \| State name: ${stateName}`, { getStore });\n return false;\n }\n\n const store = getStore(storeName as keyof Stores);\n if (typeof store === 'undefined') {\n debug(`[nylas-if-state] Store name: ${storeName} \| State name: ${stateName}`, { store });\n return false;\n }\n\n const state = store.state[stateName as string];\n\n if (typeof this.isStateSet === 'boolean') {\n return (\n (this.isStateSet === false && (typeof state === 'undefined' \|\| state === null \|\| state.length === 0)) \|\|\n (this.isStateSet === true && typeof state !== 'undefined' && state !== null)\n );\n }\n\n if (typeof this.isBoolean === 'boolean') {\n return (this.isBoolean === true && typeof state !== 'undefined' && state === true) \|\| (this.isBoolean === false && typeof state !== 'undefined' && state === false);\n }\n\n return false;\n }\n\n @Watch('getStore')\n onGetStoreChange() {\n this.watchStore(true);\n }\n\n private watchStore(immediate: boolean = false) {\n // If a period exists in the state name, then we need to split the state name into the store name and the state name.\n // For example, if the state name is `nylas.scheduler.selectableDates`, then the store name is `nylas` and the state name is `scheduler.selectableDates`.\n const [storeName, stateName] = this.state ? this.state.split('.') : ['', ''];\n const getStore = this.getStore;\n if (typeof getStore === 'undefined') {\n debug(`[nylas-if-state] Store name: ${storeName} \| State name: ${stateName}`, { getStore });\n return null;\n }\n\n const store = getStore(storeName as keyof Stores);\n if (typeof store === 'undefined') {\n debug(`[nylas-if-state] Store name: ${storeName} \| State name: ${stateName}`, { store });\n return null;\n }\n\n if (immediate === true) {\n this.initTransition();\n }\n\n store.onChange(stateName as string, this.initTransition);\n }\n\n private initTransition() {\n const show = this.shouldRender();\n switch (this.transition) {\n case 'fade':\n case 'slide':\n case 'swipe':\n this.classes = {\n [`${this.transition}-in`]: show,\n [`${this.transition}-out`]: !show,\n };\n setTimeout(() => {\n this.show = show;\n }, 150);\n break;\n default:\n this.show = this.shouldRender();\n break;\n }\n }\n\n @RegisterComponent({\n name: 'nylas-if-state',\n getStoresToProp: 'getStore',\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class={this.classes}>{this.show && <slot></slot>}</div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-if-state.js","mappings":"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","names":["NylasIfState"],"sources":["src/components/nylas-if-state/nylas-if-state.css?tag=nylas-if-state&encapsulation=shadow","src/components/nylas-if-state/nylas-if-state.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndiv {\n height: inherit;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n.fade-in {\n animation: fadeIn 1.5s;\n}\n\n.fade-out {\n animation: fadeOut 1.5s;\n}\n\n@keyframes slideIn {\n 0% {\n transform: translateY(100%);\n }\n 100% {\n transform: translateY(0);\n }\n}\n\n@keyframes slideOut {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(100%);\n }\n}\n\n.slide-in {\n animation: slideIn 1.5s;\n}\n\n.slide-out {\n animation: slideOut 1.5s;\n}\n\n@keyframes swipeIn {\n 0% {\n transform: translateX(100%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes swipeOut {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n.swipe-in {\n animation: swipeIn 1.5s;\n}\n\n.swipe-out {\n animation: swipeOut 1.5s;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug } from '@/utils/utils';\nimport { Component, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { ObservableMap } from '@stencil/store';\n\nexport type Stores = Record<string, ObservableMap<any>>;\n\nexport type Transitions = 'none' \| 'fade' \| 'slide' \| 'swipe';\n\n@Component({\n tag: 'nylas-if-state',\n styleUrl: 'nylas-if-state.css',\n shadow: true,\n})\nexport class NylasIfState {\n /*\n The name of the state to watch.\n /\n @Prop() readonly state?: string;\n /\n If true, then the component will render if the state is set (empty or not set).\n * This prop is used with the `state` prop.\n /\n @Prop() readonly isStateSet?: boolean;\n /\n If true, then the component will render if the state is true.\n * This prop is used with the `state` prop.\n */\n @Prop() readonly isBoolean?: boolean;\n @Prop() readonly getStore?: <K extends keyof Stores>(name: K) => Stores[K];\n @Prop() readonly transition: Transitions = 'none';\n\n @State() show: boolean = false;\n @State() classes: Record<string, boolean> = {};\n\n constructor() {\n this.initTransition = this.initTransition.bind(this);\n }\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-if-state] Component will load`);\n this.watchStore(true);\n }\n\n async componentDidLoad() {\n debug(`[nylas-if-state] Component did load`);\n }\n\n private shouldRender() {\n // If a period exists in the state name, then we need to split the state name into the store name and the state name.\n // For example, if the state name is `nylas.scheduler.selectableDates`, then the store name is `nylas` and the state name is `scheduler.selectableDates`.\n const [storeName, stateName] = this.state ? this.state.split('.') : ['', ''];\n const getStore = this.getStore;\n if (typeof getStore === 'undefined') {\n debug(`[nylas-if-state] Store name: ${storeName} \| State name: ${stateName}`, { getStore });\n return false;\n }\n\n const store = getStore(storeName as keyof Stores);\n if (typeof store === 'undefined') {\n debug(`[nylas-if-state] Store name: ${storeName} \| State name: ${stateName}`, { store });\n return false;\n }\n\n const state = store.state[stateName as string];\n\n if (typeof this.isStateSet === 'boolean') {\n return (\n (this.isStateSet === false && (typeof state === 'undefined' \|\| state === null \|\| state.length === 0)) \|\|\n (this.isStateSet === true && typeof state !== 'undefined' && state !== null)\n );\n }\n\n if (typeof this.isBoolean === 'boolean') {\n return (this.isBoolean === true && typeof state !== 'undefined' && state === true) \|\| (this.isBoolean === false && typeof state !== 'undefined' && state === false);\n }\n\n return false;\n }\n\n @Watch('getStore')\n onGetStoreChange() {\n this.watchStore(true);\n }\n\n private watchStore(immediate: boolean = false) {\n // If a period exists in the state name, then we need to split the state name into the store name and the state name.\n // For example, if the state name is `nylas.scheduler.selectableDates`, then the store name is `nylas` and the state name is `scheduler.selectableDates`.\n const [storeName, stateName] = this.state ? this.state.split('.') : ['', ''];\n const getStore = this.getStore;\n if (typeof getStore === 'undefined') {\n debug(`[nylas-if-state] Store name: ${storeName} \| State name: ${stateName}`, { getStore });\n return null;\n }\n\n const store = getStore(storeName as keyof Stores);\n if (typeof store === 'undefined') {\n debug(`[nylas-if-state] Store name: ${storeName} \| State name: ${stateName}`, { store });\n return null;\n }\n\n if (immediate === true) {\n this.initTransition();\n }\n\n store.onChange(stateName as string, this.initTransition);\n }\n\n private initTransition() {\n const show = this.shouldRender();\n switch (this.transition) {\n case 'fade':\n case 'slide':\n case 'swipe':\n this.classes = {\n [`${this.transition}-in`]: show,\n [`${this.transition}-out`]: !show,\n };\n setTimeout(() => {\n this.show = show;\n }, 150);\n break;\n default:\n this.show = this.shouldRender();\n break;\n }\n }\n\n @RegisterComponent({\n name: 'nylas-if-state',\n getStoresToProp: 'getStore',\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class={this.classes}>{this.show && <slot></slot>}</div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-limit-future-bookings2.js CHANGED Viewed

@@ -93,7 +93,7 @@ const NylasLimitFutureBookings = proxyCustomElement(class NylasLimitFutureBookin
         }
     }
     render() {
-        return (h(Host, { key: '8057320077aad1ea65297b4cac79fe11f69ab161' }, h("div", { key: '991d810bee6817a1ec26482807fece9d884b7844', class: "nylas-limit-future-bookings", part: "nlfb" }, h("label", { key: 'caf0946d5a7cb202dc02cd596a7721e52278cb55' }, "Limit future bookings", h("span", { key: 'fff09830bc407f7ce1fecf7e6809f2a030ce9a3e', class: "label-icon" }, h("tooltip-component", { key: '8c9cd31ae211d1d3a7f017032d7c1abb3f1c7df6' }, h("info-icon", { key: '43f8b14a4b28effd21e9b5a87b20f63b6bf0061d', slot: "tooltip-icon" }), h("span", { key: 'bdfebd15750111829926da4dc0820f562c4fd9aa', slot: "tooltip-content" }, "Set a limit on how far in the future bookings can be made.")))), h("time-period-selector", { key: 'de949c9c3aa9234102159bdec61efc061ac49408', id: "limit-future-bookings", timePeriods: ['day', 'week', 'month'], exportparts: "tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content", defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
+        return (h(Host, { key: '51c0c8da5fd7f5dde898fd72e450f7d964c424c6' }, h("div", { key: '0cca0db28b809eec38f93bb25ad8e7ec281836f0', class: "nylas-limit-future-bookings", part: "nlfb" }, h("label", { key: 'feb8cd912af491a1f26a5e32ec2a7cf6d34309da' }, "Limit future bookings", h("span", { key: 'c1e61e9137428534f80db3222fa0c71b220fe333', class: "label-icon" }, h("tooltip-component", { key: 'b1f429be3c382dfe5b1cf6bfd98f71dd9a3d4b81' }, h("info-icon", { key: 'e52cdd714fa99b9e8ff1b995a15a44474bf7dbdd', slot: "tooltip-icon" }), h("span", { key: '8fc34d1fd12b92312d6e5c380a0aba8a2605285d', slot: "tooltip-content" }, "Set a limit on how far in the future bookings can be made.")))), h("time-period-selector", { key: '3edfddf9214f8729e6d36f4b5aca4fb771829cea', id: "limit-future-bookings", timePeriods: ['day', 'week', 'month'], exportparts: "tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content", defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
@@ -164,7 +164,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasLimitFutureBookings);
 export { NylasLimitFutureBookings as N, defineCustomElement as d };

package/dist/components/nylas-limit-future-bookings2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-limit-future-bookings2.js","mappings":"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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.scss?tag=nylas-limit-future-bookings&encapsulation=shadow","src/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n @include default-css-variables;\n}\n\n.nylas-limit-future-bookings {\n display: flex;\n justify-content: space-between;\n font-family: var(--nylas-font-family);\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/\n The `nylas-limit-future-bookings` component is a form input for the description of an event.\n * @part nlfb - The limit future bookings container\n * @part nlfb__number-dropdown - The number dropdown container\n * @part nlfb__number-dropdown-button - The number dropdown button\n * @part nlfb__number-dropdown-content - The number dropdown content\n * @part nlfb__period-dropdown - The period dropdown container\n * @part nlfb__period-dropdown-button - The period dropdown button\n * @part nlfb__period-dropdown-content - The period dropdown content\n /\n@Component({\n tag: 'nylas-limit-future-bookings',\n styleUrl: 'nylas-limit-future-bookings.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasLimitFutureBookings {\n @Prop() availableDaysInFuture?: number;\n @AttachInternals() internals!: ElementInternals;\n @Element() host!: HTMLElement;\n @Prop() name: string = 'limit-future-bookings';\n\n @State() selectedNumber: number = 1;\n @State() selectedPeriod: string = 'day';\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-limit-future-bookings', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('availableDaysInFuture')\n availableDaysInFutureChanged(newValue: number) {\n const { number, period } = this.calculateNumberAndPeriodFromDays(newValue);\n this.selectedNumber = number;\n this.selectedPeriod = period;\n }\n\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-limit-future-bookings', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-limit-future-bookings', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-limit-future-bookings', 'componentDidLoad');\n this.availableDaysInFutureChanged(this.availableDaysInFuture ?? 1);\n if (typeof this.internals.setFormValue !== 'function') {\n return;\n }\n this.internals.setFormValue(this.availableDaysInFuture?.toString() ?? '1', this.name);\n }\n\n disconnectedCallback() {\n debug('nylas-limit-future-bookings', 'disconnectedCallback');\n }\n\n @Listen('timePeriodChanged')\n timePeriodChangedHandler(\n event: CustomEvent<{\n number: number;\n period: string;\n }>,\n ) {\n const { number, period } = event.detail;\n let availableDaysInFuture;\n if (period === 'day') {\n availableDaysInFuture = number;\n } else if (period === 'week') {\n availableDaysInFuture = number 7;\n } else {\n availableDaysInFuture = number * 30;\n }\n this.valueChanged.emit({ value: availableDaysInFuture, name: this.name });\n if (typeof this.internals.setFormValue !== 'function') {\n return;\n }\n this.internals.setFormValue(availableDaysInFuture.toString(), this.name);\n }\n\n calculateNumberAndPeriodFromDays(days: number): { number: number; period: string } {\n if (days >= 30 && days % 30 === 0) {\n return { number: days / 30, period: 'month' };\n } else if (days >= 7 && days % 7 === 0) {\n return { number: days / 7, period: 'week' };\n } else {\n return { number: days, period: 'day' };\n }\n }\n\n @RegisterComponent<NylasLimitFutureBookings, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-limit-future-bookings',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-limit-future-bookings\" part=\"nlfb\">\n <label>\n Limit future bookings\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Set a limit on how far in the future bookings can be made.</span>\n </tooltip-component>\n </span>\n </label>\n <time-period-selector\n id=\"limit-future-bookings\"\n timePeriods={['day', 'week', 'month']}\n exportparts=\"tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content\"\n defaultSelectedNumber={this.selectedNumber}\n defaultSelectedPeriod={this.selectedPeriod}\n />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-limit-future-bookings2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.scss?tag=nylas-limit-future-bookings&encapsulation=shadow","src/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n @include default-css-variables;\n}\n\n.nylas-limit-future-bookings {\n display: flex;\n justify-content: space-between;\n font-family: var(--nylas-font-family);\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px /\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/\n The `nylas-limit-future-bookings` component is a form input for the description of an event.\n * @part nlfb - The limit future bookings container\n * @part nlfb__number-dropdown - The number dropdown container\n * @part nlfb__number-dropdown-button - The number dropdown button\n * @part nlfb__number-dropdown-content - The number dropdown content\n * @part nlfb__period-dropdown - The period dropdown container\n * @part nlfb__period-dropdown-button - The period dropdown button\n * @part nlfb__period-dropdown-content - The period dropdown content\n /\n@Component({\n tag: 'nylas-limit-future-bookings',\n styleUrl: 'nylas-limit-future-bookings.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasLimitFutureBookings {\n @Prop() availableDaysInFuture?: number;\n @AttachInternals() internals!: ElementInternals;\n @Element() host!: HTMLElement;\n @Prop() name: string = 'limit-future-bookings';\n\n @State() selectedNumber: number = 1;\n @State() selectedPeriod: string = 'day';\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-limit-future-bookings', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('availableDaysInFuture')\n availableDaysInFutureChanged(newValue: number) {\n const { number, period } = this.calculateNumberAndPeriodFromDays(newValue);\n this.selectedNumber = number;\n this.selectedPeriod = period;\n }\n\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-limit-future-bookings', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-limit-future-bookings', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-limit-future-bookings', 'componentDidLoad');\n this.availableDaysInFutureChanged(this.availableDaysInFuture ?? 1);\n if (typeof this.internals.setFormValue !== 'function') {\n return;\n }\n this.internals.setFormValue(this.availableDaysInFuture?.toString() ?? '1', this.name);\n }\n\n disconnectedCallback() {\n debug('nylas-limit-future-bookings', 'disconnectedCallback');\n }\n\n @Listen('timePeriodChanged')\n timePeriodChangedHandler(\n event: CustomEvent<{\n number: number;\n period: string;\n }>,\n ) {\n const { number, period } = event.detail;\n let availableDaysInFuture;\n if (period === 'day') {\n availableDaysInFuture = number;\n } else if (period === 'week') {\n availableDaysInFuture = number 7;\n } else {\n availableDaysInFuture = number * 30;\n }\n this.valueChanged.emit({ value: availableDaysInFuture, name: this.name });\n if (typeof this.internals.setFormValue !== 'function') {\n return;\n }\n this.internals.setFormValue(availableDaysInFuture.toString(), this.name);\n }\n\n calculateNumberAndPeriodFromDays(days: number): { number: number; period: string } {\n if (days >= 30 && days % 30 === 0) {\n return { number: days / 30, period: 'month' };\n } else if (days >= 7 && days % 7 === 0) {\n return { number: days / 7, period: 'week' };\n } else {\n return { number: days, period: 'day' };\n }\n }\n\n @RegisterComponent<NylasLimitFutureBookings, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-limit-future-bookings',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-limit-future-bookings\" part=\"nlfb\">\n <label>\n Limit future bookings\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Set a limit on how far in the future bookings can be made.</span>\n </tooltip-component>\n </span>\n </label>\n <time-period-selector\n id=\"limit-future-bookings\"\n timePeriods={['day', 'week', 'month']}\n exportparts=\"tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content\"\n defaultSelectedNumber={this.selectedNumber}\n defaultSelectedPeriod={this.selectedPeriod}\n />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-list-configurations.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface NylasListConfigurations extends Components.NylasListConfigurations, HTMLElement {}
+export const NylasListConfigurations: {
+    prototype: NylasListConfigurations;
+    new (): NylasListConfigurations;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nylas-list-configurations.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { N as NylasListConfigurations$1, d as defineCustomElement$1 } from './nylas-list-configurations2.js';
+const NylasListConfigurations = NylasListConfigurations$1;
+const defineCustomElement = defineCustomElement$1;
+export { NylasListConfigurations, defineCustomElement };
+//# sourceMappingURL=nylas-list-configurations.js.map

package/dist/components/nylas-list-configurations.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"nylas-list-configurations.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nylas-list-configurations2.js ADDED Viewed

@@ -0,0 +1,142 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { R as RegisterComponent } from './register-component.js';
+import { d as debug, q as parsePreviewLink } from './utils.js';
+import { d as defineCustomElement$2 } from './button-component2.js';
+import { d as defineCustomElement$1 } from './calendar.js';
+const nylasListConfigurationsCss = ":host{display:block;--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-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.header h2{margin:0;font-size:1.25rem;color:var(--nylas-base-900)}.header p{margin:0;font-size:1rem;color:var(--nylas-base-700)}.header .actions{justify-self:end}.configurations{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.configurations table{width:100%;border-spacing:0;border-collapse:collapse}.configurations table tr{border-bottom:1px solid var(--nylas-base-200)}.configurations table tr:last-of-type{border-bottom:0}.configurations table tr.no-configurations td>div{display:flex;height:100%;justify-content:center;align-items:center;flex-direction:column;padding:var(--nylas-border-radius-3x)}.configurations table tr.no-configurations td>div h3{margin:0 0 1rem 0;color:var(--nylas-base-700)}.configurations table tr.no-configurations td>div p{margin:0 0 1rem 0;color:var(--nylas-base-600)}.configurations table tr.no-configurations td>div calendar-icon{margin-bottom:1rem;color:var(--nylas-base-200)}.configurations table th,.configurations table td{text-align:left;padding:1rem}.configurations table .actions{text-align:right}.configurations table .actions{display:flex;justify-content:flex-end;gap:1rem}.configurations table .title{display:flex;flex-direction:column}.configurations table .title .config-event-title{font-weight:600}.configurations table .title .config-event-description{font-size:0.75rem}";
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+const NylasListConfigurations = proxyCustomElement(class NylasListConfigurations extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.initListConfigurations = createEvent(this, "initListConfigurations", 7);
+        this.createButtonClick = createEvent(this, "createButtonClick", 7);
+        this.editButtonClick = createEvent(this, "editButtonClick", 7);
+        this.deleteButtonClick = createEvent(this, "deleteButtonClick", 7);
+        this.configurations = [];
+        this.schedulerPreviewLink = '';
+        this.state = 'loading';
+    }
+    connectedCallback() {
+        debug('[nylas-list-configurations]', 'connectedCallback');
+    }
+    componentWillLoad() {
+        debug('[nylas-list-configurations]', 'componentWillLoad');
+        if (this.configurations && this.configurations.length > 0) {
+            this.state = 'loaded';
+        }
+    }
+    componentDidLoad() {
+        debug('[nylas-list-configurations]', 'componentDidLoad');
+        this.initListConfigurations.emit(this.host);
+    }
+    disconnectedCallback() {
+        debug('[nylas-list-configurations]', 'disconnectedCallback');
+    }
+    async getState() {
+        return this.state;
+    }
+    async setState(state) {
+        this.state = state;
+    }
+    render() {
+        return (h(Host, { key: 'c6579bd33e43be81caa460d87e99ed53f8123c6a' }, h("div", { key: 'd3ff4fc25e34a2dab3820b774f52a845c37bb282', class: "nylas-list-configurations" }, h("div", { key: 'fc6ff138be7cf63196217b7ef7524ae8f0a82c5c', class: "header" }, h("div", { key: 'a518d44c645bfc5d5e8449119ebc4be7c475a5f3', class: "description" }, h("h2", { key: 'a9d999a93c26ee3d9040dcae09306ecb7da43fb5' }, "All scheduling configurations"), h("p", { key: '6361799617ce1ccf7469cce6a0064d94d97701b0' }, "Create, edit and manage all your scheduling configurations.")), this.configurations && this.configurations.length > 0 && (h("div", { class: "actions" }, h("button-component", { clickHandler: () => {
+                this.createButtonClick.emit(this.host);
+            } }, "Create new")))), h("div", { key: '3f26491b35427c4364bcc1c5e1cbffdfabd52d37', class: "configurations" }, h("table", { key: 'ca8bf13b620b92cd4892b8dbf218988915ce4fc0' }, h("tr", { key: '09526ab48bbc988b0595f8060a184c340f1d43cc' }, h("th", { key: '7367e03d461f854eaf84e166d65471d356f44ee5' }, "Configuration event title"), h("th", { key: 'f983dcae11fdd33e21f0f202eb9b43a7d409b714' }, "Duration"), h("th", { key: '828c60e134498a1db8bd31ce0311bb8a771cb435', class: "actions" }, "Actions")), this.state === 'loading' && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("h3", null, "Loading..."), h("p", null, "Please wait while we fetch your configurations"))))), this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (h("tr", { class: "no-configurations" }, h("td", { colSpan: 3 }, h("div", null, h("calendar-icon", { width: "48", height: "48" }), h("h3", null, "No configurations found"), h("p", null, "Get started with creating your first scheduling page"), h("button-component", { clickHandler: () => {
+                this.createButtonClick.emit(this.host);
+            } }, "Create new"))))), this.state !== 'loading' &&
+            this.configurations.map(config => (h("tr", { key: config.id }, h("td", null, h("div", { class: "title" }, h("span", { class: 'config-event-title' }, config.event_booking.title), h("span", { class: 'config-event-description' }, config.event_booking.description))), h("td", null, h("div", null, config.availability.duration_minutes, " mins")), h("td", null, h("div", { class: "actions" }, h("button-component", { variant: 'basic', clickHandler: event => {
+                    event.preventDefault();
+                    window.open(parsePreviewLink(this.schedulerPreviewLink, config), '_blank');
+                } }, "Preview"), h("button-component", { variant: 'basic', clickHandler: event => {
+                    event.preventDefault();
+                    this.editButtonClick.emit({ host: this.host, configuration: config });
+                } }, "Edit"), h("button-component", { variant: 'basic', clickHandler: event => {
+                    event.preventDefault();
+                    this.deleteButtonClick.emit({ host: this.host, configuration: config });
+                } }, "Delete")))))))))));
+    }
+    get host() { return this; }
+    static get style() { return nylasListConfigurationsCss; }
+}, [1, "nylas-list-configurations", {
+        "configurations": [16],
+        "schedulerPreviewLink": [1, "scheduler-preview-link"],
+        "state": [32],
+        "getState": [64],
+        "setState": [64]
+    }]);
+__decorate([
+    RegisterComponent({
+        name: 'nylas-list-configurations',
+        stateToProps: new Map([['schedulerConfig.configurations', 'configurations']]),
+        localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),
+        eventToProps: {
+            initListConfigurations: async (event, connector) => {
+                const host = event.detail;
+                await host.setState('loading');
+                await connector.schedulerConfig.getConfigurations();
+                await host.setState('loaded');
+            },
+            createButtonClick: async (_, connector) => {
+                connector.schedulerConfigStore.state.config = {};
+                connector.schedulerConfigStore.state.action = 'create';
+            },
+            deleteButtonClick: async (event, connector) => {
+                const { configuration } = event.detail;
+                await connector.schedulerConfig.deleteConfiguration(configuration.id);
+            },
+            editButtonClick: async (event, connector) => {
+                const { configuration } = event.detail;
+                connector.schedulerConfigStore.state.config = configuration;
+                connector.schedulerConfigStore.state.action = 'edit';
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasListConfigurations.prototype, "render", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nylas-list-configurations", "button-component", "calendar-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nylas-list-configurations":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NylasListConfigurations);
+            }
+            break;
+        case "button-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "calendar-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+export { NylasListConfigurations as N, defineCustomElement as d };
+//# sourceMappingURL=nylas-list-configurations2.js.map

package/dist/components/nylas-list-configurations2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"nylas-list-configurations2.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,mhEAAmhE;;;;;;;;;;;;;;;;MCeziE,uBAAuB;;;;;;;;;8BASQ,EAAE;oCAMkC,EAAE;qBA+BvB,SAAS;;IAElE,iBAAiB;QACf,KAAK,CAAC,6BAA6B,EAAE,mBAAmB,CAAC,CAAC;KAC3D;IAED,iBAAiB;QACf,KAAK,CAAC,6BAA6B,EAAE,mBAAmB,CAAC,CAAC;QAG1D,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;YACzD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;KACF;IAED,gBAAgB;QACd,KAAK,CAAC,6BAA6B,EAAE,kBAAkB,CAAC,CAAC;QAIzD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7C;IAED,oBAAoB;QAClB,KAAK,CAAC,6BAA6B,EAAE,sBAAsB,CAAC,CAAC;KAC9D;IAGD,MAAM,QAAQ;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;KACnB;IAGD,MAAM,QAAQ,CAAC,KAAqC;QAClD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KACpB;IA6BD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,2BAA2B,IACpC,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,aAAa,IACtB,6FAAsC,EACtC,0HAAkE,CAC9D,EACL,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,KACpD,WAAK,KAAK,EAAC,SAAS,IAClB,wBACE,YAAY,EAAE;gBACZ,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aACxC,iBAGgB,CACf,CACP,CACG,EACN,4DAAK,KAAK,EAAC,gBAAgB,IACzB,gEACE,6DACE,yFAAkC,EAClC,wEAAiB,EACjB,2DAAI,KAAK,EAAC,SAAS,cAAa,CAC7B,EACJ,IAAI,CAAC,KAAK,KAAK,SAAS,KACvB,UAAI,KAAK,EAAC,mBAAmB,IAC3B,UAAI,OAAO,EAAE,CAAC,IACZ,eACE,2BAAmB,EACnB,8DAAqD,CACjD,CACH,CACF,CACN,EACA,IAAI,CAAC,KAAK,KAAK,SAAS,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,CAAC,KACrF,UAAI,KAAK,EAAC,mBAAmB,IAC3B,UAAI,OAAO,EAAE,CAAC,IACZ,eACE,qBAAe,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAiB,EACtD,wCAAgC,EAChC,oEAA2D,EAC3D,wBACE,YAAY,EAAE;gBACZ,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aACxC,iBAGgB,CACf,CACH,CACF,CACN,EACA,IAAI,CAAC,KAAK,KAAK,SAAS;YACvB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,KAC5B,UAAI,GAAG,EAAE,MAAM,CAAC,EAAE,IAChB,cACE,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,KAAK,EAAE,oBAAoB,IAAG,MAAM,CAAC,aAAa,CAAC,KAAK,CAAQ,EACtE,YAAM,KAAK,EAAE,0BAA0B,IAAG,MAAM,CAAC,aAAa,CAAC,WAAW,CAAQ,CAC9E,CACH,EACL,cACE,eAAM,MAAM,CAAC,YAAY,CAAC,gBAAgB,UAAY,CACnD,EACL,cACE,WAAK,KAAK,EAAC,SAAS,IAClB,wBACE,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,KAAK;oBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC;iBAC5E,cAGgB,EACnB,wBACE,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,KAAK;oBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;iBACvE,WAGgB,EACnB,wBACE,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,KAAK;oBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;iBACzE,aAGgB,CACf,CACH,CACF,CACN,CAAC,CACE,CACJ,CACF,CACD,EACP;KACH;;;;;;;;;;AA1GD;IA3BC,iBAAiB,CAA6G;QAC7H,IAAI,EAAE,2BAA2B;QACjC,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,gCAAgC,EAAE,gBAAgB,CAAC,CAAC,CAAC;QAC7E,gBAAgB,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,sBAAsB,EAAE,sBAAsB,CAAC,CAAC,CAAC;QAC7E,YAAY,EAAE;YACZ,sBAAsB,EAAE,OAAO,KAAK,EAAE,SAAS;gBAC7C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;gBAC1B,MAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;gBAC/B,MAAM,SAAS,CAAC,eAAe,CAAC,iBAAiB,EAAE,CAAC;gBACpD,MAAM,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;aAC/B;YACD,iBAAiB,EAAE,OAAO,CAAC,EAAE,SAAS;gBACpC,SAAS,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;gBACjD,SAAS,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC;aACxD;YACD,iBAAiB,EAAE,OAAO,KAAK,EAAE,SAAS;gBACxC,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBACvC,MAAM,SAAS,CAAC,eAAe,CAAC,mBAAmB,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;aACvE;YACD,eAAe,EAAE,OAAO,KAAK,EAAE,SAAS;gBACtC,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBACvC,SAAS,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC;gBAC5D,SAAS,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;aACtD;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDA2GD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.scss?tag=nylas-list-configurations&encapsulation=shadow","src/components/scheduler-editor/nylas-list-configurations/nylas-list-configurations.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/buttons.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1rem;\n\n h2 {\n margin: 0;\n font-size: 1.25rem;\n color: var(--nylas-base-900);\n }\n\n p {\n margin: 0;\n font-size: 1rem;\n color: var(--nylas-base-700);\n }\n\n .actions {\n justify-self: end;\n }\n}\n\n.configurations {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n table {\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n\n tr {\n border-bottom: 1px solid var(--nylas-base-200);\n &:last-of-type {\n border-bottom: 0;\n }\n }\n\n tr.no-configurations {\n td {\n > div {\n display: flex;\n height: 100%;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n\n padding: var(--nylas-border-radius-3x);\n\n h3 {\n margin: 0 0 1rem 0;\n color: var(--nylas-base-700);\n }\n\n p {\n margin: 0 0 1rem 0;\n color: var(--nylas-base-600);\n }\n\n calendar-icon {\n margin-bottom: 1rem;\n color: var(--nylas-base-200);\n }\n }\n }\n }\n\n th,\n td {\n text-align: left;\n padding: 1rem;\n }\n\n .actions {\n text-align: right;\n }\n\n .actions {\n display: flex;\n justify-content: flex-end;\n gap: 1rem;\n }\n\n .title {\n display: flex;\n flex-direction: column;\n\n .config-event-title {\n font-weight: 600;\n }\n\n .config-event-description {\n font-size: 0.75rem;\n }\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, parsePreviewLink } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Method, Prop, State, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-list-configurations` component displays a list of scheduling configurations.\n */\n@Component({\n tag: 'nylas-list-configurations',\n styleUrl: 'nylas-list-configurations.scss',\n shadow: true,\n})\nexport class NylasListConfigurations {\n /**\n * The host element.\n */\n @Element() host!: HTMLNylasListConfigurationsElement;\n\n /**\n * The list of configurations to display.\n */\n @Prop() configurations: Configuration[] = [];\n\n /**\n * The scheduler preview link to use when the user clicks on the preview button.\n * You can use a placeholder `{config.id}` to replace the configuration id anywhere in the link.\n */\n @Prop({ attribute: 'scheduler-preview-link' }) schedulerPreviewLink: string = '';\n\n /**\n * Event emitted when the component is initialized.\n */\n @Event() initListConfigurations!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n /**\n * Event emitted when the user clicks the create event button.\n */\n @Event() createButtonClick!: EventEmitter<HTMLNylasListConfigurationsElement>;\n\n /**\n * Event emitted when the user clicks the edit event button.\n */\n @Event() editButtonClick!: EventEmitter<{\n host: HTMLNylasListConfigurationsElement;\n configuration: Configuration;\n }>;\n\n /**\n * Event emitted when the user clicks the delete event button.\n */\n @Event() deleteButtonClick!: EventEmitter<{\n host: HTMLNylasListConfigurationsElement;\n configuration: Configuration;\n }>;\n\n /**\n * The current state of the component.\n */\n @State() private state: 'loading' | 'loaded' | 'error' = 'loading';\n\n connectedCallback() {\n debug('[nylas-list-configurations]', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('[nylas-list-configurations]', 'componentWillLoad');\n\n // If we have configurations, we will set the state to loaded.\n if (this.configurations && this.configurations.length > 0) {\n this.state = 'loaded';\n }\n }\n\n componentDidLoad() {\n debug('[nylas-list-configurations]', 'componentDidLoad');\n\n // Fire the init event. By default, we will fetch the configurations.\n // This is defined in the eventToProps object in the RegisterComponent decorator.\n this.initListConfigurations.emit(this.host);\n }\n\n disconnectedCallback() {\n debug('[nylas-list-configurations]', 'disconnectedCallback');\n }\n\n @Method()\n async getState() {\n return this.state;\n }\n\n @Method()\n async setState(state: 'loading' | 'loaded' | 'error') {\n this.state = state;\n }\n\n @RegisterComponent<NylasListConfigurations, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-list-configurations',\n stateToProps: new Map([['schedulerConfig.configurations', 'configurations']]),\n localPropsToProp: new Map([['schedulerPreviewLink', 'schedulerPreviewLink']]),\n eventToProps: {\n initListConfigurations: async (event, connector) => {\n const host = event.detail;\n await host.setState('loading');\n await connector.schedulerConfig.getConfigurations();\n await host.setState('loaded');\n },\n createButtonClick: async (_, connector) => {\n connector.schedulerConfigStore.state.config = {};\n connector.schedulerConfigStore.state.action = 'create';\n },\n deleteButtonClick: async (event, connector) => {\n const { configuration } = event.detail;\n await connector.schedulerConfig.deleteConfiguration(configuration.id);\n },\n editButtonClick: async (event, connector) => {\n const { configuration } = event.detail;\n connector.schedulerConfigStore.state.config = configuration;\n connector.schedulerConfigStore.state.action = 'edit';\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"nylas-list-configurations\">\n <div class=\"header\">\n <div class=\"description\">\n <h2>All scheduling configurations</h2>\n <p>Create, edit and manage all your scheduling configurations.</p>\n </div>\n {this.configurations && this.configurations.length > 0 && (\n <div class=\"actions\">\n <button-component\n clickHandler={() => {\n this.createButtonClick.emit(this.host);\n }}\n >\n Create new\n </button-component>\n </div>\n )}\n </div>\n <div class=\"configurations\">\n <table>\n <tr>\n <th>Configuration event title</th>\n <th>Duration</th>\n <th class=\"actions\">Actions</th>\n </tr>\n {this.state === 'loading' && (\n <tr class=\"no-configurations\">\n <td colSpan={3}>\n <div>\n <h3>Loading...</h3>\n <p>Please wait while we fetch your configurations</p>\n </div>\n </td>\n </tr>\n )}\n {this.state !== 'loading' && (!this.configurations || this.configurations.length === 0) && (\n <tr class=\"no-configurations\">\n <td colSpan={3}>\n <div>\n <calendar-icon width=\"48\" height=\"48\"></calendar-icon>\n <h3>No configurations found</h3>\n <p>Get started with creating your first scheduling page</p>\n <button-component\n clickHandler={() => {\n this.createButtonClick.emit(this.host);\n }}\n >\n Create new\n </button-component>\n </div>\n </td>\n </tr>\n )}\n {this.state !== 'loading' &&\n this.configurations.map(config => (\n <tr key={config.id}>\n <td>\n <div class=\"title\">\n <span class={'config-event-title'}>{config.event_booking.title}</span>\n <span class={'config-event-description'}>{config.event_booking.description}</span>\n </div>\n </td>\n <td>\n <div>{config.availability.duration_minutes} mins</div>\n </td>\n <td>\n <div class=\"actions\">\n <button-component\n variant={'basic'}\n clickHandler={event => {\n event.preventDefault();\n window.open(parsePreviewLink(this.schedulerPreviewLink, config), '_blank');\n }}\n >\n Preview\n </button-component>\n <button-component\n variant={'basic'}\n clickHandler={event => {\n event.preventDefault();\n this.editButtonClick.emit({ host: this.host, configuration: config });\n }}\n >\n Edit\n </button-component>\n <button-component\n variant={'basic'}\n clickHandler={event => {\n event.preventDefault();\n this.deleteButtonClick.emit({ host: this.host, configuration: config });\n }}\n >\n Delete\n </button-component>\n </div>\n </td>\n </tr>\n ))}\n </table>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-list-folders.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { d as debug, n as toTitleCase, o as formatFolderName } from './utils.js';
+import { d as debug, t as toTitleCase, f as formatFolderName } from './utils.js';
 import { d as defineCustomElement$8 } from './archive.js';
 import { d as defineCustomElement$7 } from './folder.js';
 import { d as defineCustomElement$6 } from './inbox.js';
@@ -83,7 +83,7 @@ const NylasListFolders$1 = proxyCustomElement(class NylasListFolders extends HTM
         }
     }
     render() {
-        return (h(Host, { key: '216a4856e0e4484bd21a13c8b52f60056838e355' }, h("div", { key: '3dfa827f612e13c3abec08c7e50a3f52ece2f677', class: "folders" }, this.defaultFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
+        return (h(Host, { key: 'f7658523537781559e3fa8dcef8930beb8ae786f' }, h("div", { key: 'e08916ae6b756aded1ab5efa01f3e897ee3d97e3', class: "folders" }, this.defaultFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
                 folder: true,
                 selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),
             } }, h("div", { slot: "icon", class: "icon" }, this.getFolderIcon(folder)), this.formatFolderName(folder))))), this.otherFolders && (h(Fragment, null, h("hr", null), h("div", { class: "folders" }, this.otherFolders?.map(folder => (h("sp-button", { onClick: () => this.folderSelectedHandler(folder), class: {
@@ -173,7 +173,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1(NylasListFolders$1);
 const NylasListFolders = NylasListFolders$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-list-folders.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-list-folders.js","mappings":";;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,wnBAAwnB;;;;;;;;;;;;;;;;MCYvoBA,kBAAgB;IAS3B;;;;;QAiCQ,0BAAqB,GAAG,CAAC,MAAc;YAC7C,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;SACnC,CAAC;;;;;KAnCc;IAEhB,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,MAAM,iBAAiB;QACrB,KAAK,CAAC,0CAA0C,CAAC,CAAC;KACnD;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,yCAAyC,CAAC,CAAC;KAClD;IAGD,YAAY,CAAC,UAAoB;QAC/B,KAAK,CAAC,mCAAmC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;QAE3D,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;QAG1F,IAAI,CAAC,cAAc,GAAG,cAAc;aACjC,MAAM,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;aACxG,GAAG,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;aACrG,MAAM,CAAC,MAAM,IAAI,OAAO,MAAM,KAAK,WAAW,CAAC;aAC/C,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,cAAc,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC,CAAa,CAAC;QAG7G,IAAI,CAAC,YAAY,GAAG,UAAU;aAC3B,MAAM,CAAC,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,IAAI,MAAM,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;aAC7G,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAa,CAAC;KAC3E;IAMO,gBAAgB,CAAC,MAAc;QACrC,OAAO,WAAW,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,IAAI,SAAS,CAAC,CAAC;KACxE;IAEO,aAAa,CAAC,MAAc;QAClC,QAAQ,MAAM,CAAC,IAAI,EAAE,WAAW,EAAE;YAChC,KAAK,OAAO;gBACV,OAAO,qBAAyB,CAAC;YACnC,KAAK,QAAQ;gBACX,OAAO,sBAA2B,CAAC;YACrC,KAAK,MAAM;gBACT,OAAO,oBAAuB,CAAC;YACjC,KAAK,SAAS;gBACZ,OAAO,oBAAuB,CAAC;YACjC,KAAK,MAAM;gBACT,OAAO,oBAAuB,CAAC;YACjC,KAAK,SAAS;gBACZ,OAAO,uBAA6B,CAAC;YACvC,KAAK,OAAO;gBACV,OAAO,qBAAyB,CAAC;YACnC;gBACE,OAAO,sBAA2B,CAAC;SACtC;KACF;IAmBD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,cAAc,EAAE,GAAG,CAAC,MAAM,KAC9B,iBACE,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EACjD,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,QAAQ,EAAE,gBAAgB,CAAC,MAAM,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,cAAc,EAAE,WAAW,EAAE;aACxG,IAED,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,IAC1B,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CACvB,EACL,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CACpB,CACb,CAAC,CACE,EACL,IAAI,CAAC,YAAY,KAChB,EAAC,QAAQ,QACP,aAAM,EACN,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,KAC5B,iBACE,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EACjD,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,QAAQ,EAAE,gBAAgB,CAAC,MAAM,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,cAAc,EAAE,WAAW,EAAE;aACxG,IAED,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,IAC1B,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CACvB,EACL,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CACpB,CACb,CAAC,CACE,CACG,CACZ,CACI,EACP;KACH;;;;;;;;;;;;;AA1CD;IAjBC,iBAAiB,CAAsF;QACtG,IAAI,EAAE,kBAAkB;QACxB,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,iBAAiB,EAAE,SAAS,CAAC;YAC9B,CAAC,wBAAwB,EAAE,gBAAgB,CAAC;SAC7C,CAAC;QACF,YAAY,EAAE;YACZ,cAAc,EAAE,OAAO,MAAM,EAAE,cAAc;gBAC3C,KAAK,CAAC,2CAA2C,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;gBAC/D,MAAM,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC;oBACtC,UAAU,EAAE,SAAS;oBACrB,EAAE,EAAE,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,OAAO,CAAC;iBAClD,CAAC,CAAC;aACJ;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;gDA2CD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["NylasListFolders"],"sources":["src/components/mailbox/nylas-list-folders/nylas-list-folders.scss?tag=nylas-list-folders&encapsulation=shadow","src/components/mailbox/nylas-list-folders/nylas-list-folders.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.folders {\n display: flex;\n flex-direction: column;\n align-items: self-start;\n\n .folder {\n border: 1px solid var(--nylas-color-primary-100);\n padding: 0.5rem 0.75rem;\n margin-bottom: 0.5rem;\n justify-content: left;\n width: 100%;\n\n min-width: 200px;\n border-radius: var(--nylas-border-radius);\n background-color: var(--nylas-color-primary-50);\n\n &:last-child {\n margin-bottom: 0;\n }\n\n &.selected {\n background-color: var(--nylas-color-primary-100);\n }\n\n .icon {\n margin-right: 0.5rem;\n stroke: var(--nylas-color-primary-900);\n fill: none;\n }\n }\n}\n\nhr {\n width: 100%;\n margin: 1rem 0;\n border: 0;\n border-top: 1px solid var(--nylas-color-primary-100);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug, formatFolderName, toTitleCase } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Fragment, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../..';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\nimport { Folder } from '@nylas/core';\n\n@Component({\n tag: 'nylas-list-folders',\n styleUrl: 'nylas-list-folders.scss',\n shadow: true,\n})\nexport class NylasListFolders {\n @Prop() readonly folders?: Folder[];\n @Prop() readonly selectedFolder?: string;\n\n @Event() readonly folderSelected!: EventEmitter<Folder>;\n\n @State() defaultFolders?: Folder[];\n @State() otherFolders?: Folder[];\n\n constructor() {}\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-list-folders] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-list-folders] Component did load`);\n }\n\n @Watch('folders')\n watchFolders(newFolders: Folder[]) {\n debug(`[nylas-list-folders] watchFolders`, { newFolders });\n // Expected default folders\n const defaultFolders = ['inbox', 'drafts', 'sent', 'starred', 'spam', 'archive', 'trash'];\n\n // Only include default folders that are in the list of folders, and sort them by the default order\n this.defaultFolders = defaultFolders\n .filter(folderName => newFolders.find(folder => folder.name?.toLowerCase() === folderName.toLowerCase()))\n .map(folderName => newFolders.find(folder => folder.name?.toLowerCase() === folderName.toLowerCase()))\n .filter(folder => typeof folder !== 'undefined')\n .sort((a, b) => defaultFolders.indexOf(a?.name ?? '') - defaultFolders.indexOf(b?.name ?? '')) as Folder[];\n\n // Only include folders that are not default folders, and sort them by name\n this.otherFolders = newFolders\n .filter(folder => !defaultFolders.find(folderName => folder.name?.toLowerCase() === folderName.toLowerCase()))\n .sort((a, b) => (a.name ?? '').localeCompare(b.name ?? '')) as Folder[];\n }\n\n private folderSelectedHandler = (folder: Folder) => {\n this.folderSelected?.emit(folder);\n };\n\n private formatFolderName(folder: Folder) {\n return toTitleCase(folder.name?.replace('CATEGORY_', '') ?? 'Unknown');\n }\n\n private getFolderIcon(folder: Folder) {\n switch (folder.name?.toLowerCase()) {\n case 'inbox':\n return <inbox-icon></inbox-icon>;\n case 'drafts':\n return <drafts-icon></drafts-icon>;\n case 'sent':\n return <sent-icon></sent-icon>;\n case 'starred':\n return <star-icon></star-icon>;\n case 'spam':\n return <spam-icon></spam-icon>;\n case 'archive':\n return <archive-icon></archive-icon>;\n case 'trash':\n return <trash-icon></trash-icon>;\n default:\n return <folder-icon></folder-icon>;\n }\n }\n\n @RegisterComponent<NylasListFolders, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n name: 'nylas-pagination',\n stateToProps: new Map([\n ['mailbox.folders', 'folders'],\n ['mailbox.selectedFolder', 'selectedFolder'],\n ]),\n eventToProps: {\n folderSelected: async (_event, nylasConnector) => {\n debug(`[nylas-list-folders] folderSelected event`, { _event });\n await nylasConnector.threads.getThreads({\n page_token: undefined,\n in: formatFolderName(_event.detail.id ?? 'inbox'),\n });\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"folders\">\n {this.defaultFolders?.map(folder => (\n <sp-button\n onClick={() => this.folderSelectedHandler(folder)}\n class={{\n folder: true,\n selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),\n }}\n >\n <div slot=\"icon\" class=\"icon\">\n {this.getFolderIcon(folder)}\n </div>\n {this.formatFolderName(folder)}\n </sp-button>\n ))}\n </div>\n {this.otherFolders && (\n <Fragment>\n <hr />\n <div class=\"folders\">\n {this.otherFolders?.map(folder => (\n <sp-button\n onClick={() => this.folderSelectedHandler(folder)}\n class={{\n folder: true,\n selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),\n }}\n >\n <div slot=\"icon\" class=\"icon\">\n {this.getFolderIcon(folder)}\n </div>\n {this.formatFolderName(folder)}\n </sp-button>\n ))}\n </div>\n </Fragment>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-list-folders.js","mappings":"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","names":["NylasListFolders"],"sources":["src/components/mailbox/nylas-list-folders/nylas-list-folders.scss?tag=nylas-list-folders&encapsulation=shadow","src/components/mailbox/nylas-list-folders/nylas-list-folders.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.folders {\n display: flex;\n flex-direction: column;\n align-items: self-start;\n\n .folder {\n border: 1px solid var(--nylas-color-primary-100);\n padding: 0.5rem 0.75rem;\n margin-bottom: 0.5rem;\n justify-content: left;\n width: 100%;\n\n min-width: 200px;\n border-radius: var(--nylas-border-radius);\n background-color: var(--nylas-color-primary-50);\n\n &:last-child {\n margin-bottom: 0;\n }\n\n &.selected {\n background-color: var(--nylas-color-primary-100);\n }\n\n .icon {\n margin-right: 0.5rem;\n stroke: var(--nylas-color-primary-900);\n fill: none;\n }\n }\n}\n\nhr {\n width: 100%;\n margin: 1rem 0;\n border: 0;\n border-top: 1px solid var(--nylas-color-primary-100);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug, formatFolderName, toTitleCase } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Fragment, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../..';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\nimport { Folder } from '@nylas/core';\n\n@Component({\n tag: 'nylas-list-folders',\n styleUrl: 'nylas-list-folders.scss',\n shadow: true,\n})\nexport class NylasListFolders {\n @Prop() readonly folders?: Folder[];\n @Prop() readonly selectedFolder?: string;\n\n @Event() readonly folderSelected!: EventEmitter<Folder>;\n\n @State() defaultFolders?: Folder[];\n @State() otherFolders?: Folder[];\n\n constructor() {}\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-list-folders] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-list-folders] Component did load`);\n }\n\n @Watch('folders')\n watchFolders(newFolders: Folder[]) {\n debug(`[nylas-list-folders] watchFolders`, { newFolders });\n // Expected default folders\n const defaultFolders = ['inbox', 'drafts', 'sent', 'starred', 'spam', 'archive', 'trash'];\n\n // Only include default folders that are in the list of folders, and sort them by the default order\n this.defaultFolders = defaultFolders\n .filter(folderName => newFolders.find(folder => folder.name?.toLowerCase() === folderName.toLowerCase()))\n .map(folderName => newFolders.find(folder => folder.name?.toLowerCase() === folderName.toLowerCase()))\n .filter(folder => typeof folder !== 'undefined')\n .sort((a, b) => defaultFolders.indexOf(a?.name ?? '') - defaultFolders.indexOf(b?.name ?? '')) as Folder[];\n\n // Only include folders that are not default folders, and sort them by name\n this.otherFolders = newFolders\n .filter(folder => !defaultFolders.find(folderName => folder.name?.toLowerCase() === folderName.toLowerCase()))\n .sort((a, b) => (a.name ?? '').localeCompare(b.name ?? '')) as Folder[];\n }\n\n private folderSelectedHandler = (folder: Folder) => {\n this.folderSelected?.emit(folder);\n };\n\n private formatFolderName(folder: Folder) {\n return toTitleCase(folder.name?.replace('CATEGORY_', '') ?? 'Unknown');\n }\n\n private getFolderIcon(folder: Folder) {\n switch (folder.name?.toLowerCase()) {\n case 'inbox':\n return <inbox-icon></inbox-icon>;\n case 'drafts':\n return <drafts-icon></drafts-icon>;\n case 'sent':\n return <sent-icon></sent-icon>;\n case 'starred':\n return <star-icon></star-icon>;\n case 'spam':\n return <spam-icon></spam-icon>;\n case 'archive':\n return <archive-icon></archive-icon>;\n case 'trash':\n return <trash-icon></trash-icon>;\n default:\n return <folder-icon></folder-icon>;\n }\n }\n\n @RegisterComponent<NylasListFolders, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n name: 'nylas-pagination',\n stateToProps: new Map([\n ['mailbox.folders', 'folders'],\n ['mailbox.selectedFolder', 'selectedFolder'],\n ]),\n eventToProps: {\n folderSelected: async (_event, nylasConnector) => {\n debug(`[nylas-list-folders] folderSelected event`, { _event });\n await nylasConnector.threads.getThreads({\n page_token: undefined,\n in: formatFolderName(_event.detail.id ?? 'inbox'),\n });\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"folders\">\n {this.defaultFolders?.map(folder => (\n <sp-button\n onClick={() => this.folderSelectedHandler(folder)}\n class={{\n folder: true,\n selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),\n }}\n >\n <div slot=\"icon\" class=\"icon\">\n {this.getFolderIcon(folder)}\n </div>\n {this.formatFolderName(folder)}\n </sp-button>\n ))}\n </div>\n {this.otherFolders && (\n <Fragment>\n <hr />\n <div class=\"folders\">\n {this.otherFolders?.map(folder => (\n <sp-button\n onClick={() => this.folderSelectedHandler(folder)}\n class={{\n folder: true,\n selected: formatFolderName(folder.name ?? 'inbox').toLowerCase() === this.selectedFolder?.toLowerCase(),\n }}\n >\n <div slot=\"icon\" class=\"icon\">\n {this.getFolderIcon(folder)}\n </div>\n {this.formatFolderName(folder)}\n </sp-button>\n ))}\n </div>\n </Fragment>\n )}\n </Host>\n );\n }\n}\n"],"version":3}