npm - @nylas/web-elements - Versions diffs - 1.1.0-canary.4 → 1.1.0-canary.7 - Mend

@nylas/web-elements 1.1.0-canary.4 → 1.1.0-canary.7

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

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

@@ -0,0 +1 @@

+ {"file":"nylas-list-configurations2.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,skFAAskF;;;;;;;;;;;;;;;;MCe5lF,uBAAuB;;;;;;;;;8BASQ,EAAE;oCAMkC,EAAE;qBA+BvB,SAAS;qBAKjC,EAAE;;IAEnC,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;IAGD,MAAM,QAAQ,CAAC,KAAa;QAC1B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KACpB;IAsCD,MAAM;QACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,QAAQ,IACjB,WAAK,KAAK,EAAC,aAAa,IACtB,qCAA6B,EAC7B,kEAAyD,CACrD,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,WAAK,KAAK,EAAC,gBAAgB,IACzB,iBACE,UACE,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,KAAK,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,CAAC;aAC5F,IAED,4CAAoC,EACpC,yBAAiB,EACjB,UAAI,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,+DAAsD,CAClD,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,0CAAkC,EAClC,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,EACN,WAAK,KAAK,EAAC,iBAAiB,IAC1B,SAAG,KAAK,EAAE,OAAO,IAAG,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,CAAK,CACzD,CACD,EACP;KACH;;;;;;;;;;;;AA/GD;IApCC,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,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,MAAM,SAAS,CAAC,eAAe,CAAC,iBAAiB,EAAE,CAAC;gBAC1E,IAAI,CAAC,IAAI,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,EAAE;oBACnC,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;oBAC7B,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;oBACnC,OAAO;iBACR;gBACD,MAAM,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;aAC/B;YACD,iBAAiB,EAAE,OAAO,CAAC,EAAE,SAAS;gBACpC,SAAS,CAAC,oBAAoB,CAAC,0BAA0B,EAAE,CAAC;gBAC5D,SAAS,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC;aACxD;YACD,iBAAiB,EAAE,OAAO,KAAK,EAAE,SAAS;gBACxC,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBAC7C,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,MAAM,SAAS,CAAC,eAAe,CAAC,mBAAmB,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;gBAC5F,IAAI,CAAC,IAAI,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,EAAE;oBACnC,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;oBAC7B,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;iBACpC;aACF;YACD,eAAe,EAAE,OAAO,KAAK,EAAE,SAAS;gBACtC,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBACvC,SAAS,CAAC,oBAAoB,CAAC,KAAK,CAAC,qBAAqB,GAAG,aAAa,CAAC;gBAC3E,SAAS,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;aACtD;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDAgHD;;;;;;;;;;;;;;;;;;;;;;;;;;;","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: grid;\n grid-auto-flow: row;\n width: 100%;\n font-family: inherit;\n font-optical-sizing: auto;\n @include default-css-variables;\n}\n\n.header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2rem;\n gap: 1rem;\n\n @media #{$mobile} {\n flex-direction: column;\n }\n\n h2 {\n margin: 0;\n font-size: 1.25rem;\n color: var(--nylas-base-900);\n font-weight: 600;\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 @media #{$mobile} {\n width: 100%;\n }\n }\n}\n\n.configurations {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n overflow-x: auto;\n\n table {\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n font-family: inherit;\n\n tr {\n color: var(--nylas-base-800);\n border-bottom: 1px solid var(--nylas-base-200);\n font-family: inherit;\n &:last-of-type {\n border-bottom: 0;\n }\n\n &.hide {\n display: none;\n }\n }\n\n th {\n font-weight: 600;\n text-transform: uppercase;\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 font-family: inherit;\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\n.error-container {\n margin-top: 1.5rem;\n .error {\n color: var(--nylas-error);\n padding: 0.5rem 0;\n margin: 1rem 0 0;\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 pages.\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 /**\n * The error message to display.\n */\n @State() private error: string = '';\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 @Method()\n async setError(error: string) {\n this.error = error;\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 const [data, error] = await connector.schedulerConfig.getConfigurations();\n if (!data && error && error.message) {\n await host.setState('error');\n await host.setError(error.message);\n return;\n }\n await host.setState('loaded');\n },\n createButtonClick: async (_, connector) => {\n connector.schedulerConfigStore.resetSelectedConfiguration();\n connector.schedulerConfigStore.state.action = 'create';\n },\n deleteButtonClick: async (event, connector) => {\n const { host, configuration } = event.detail;\n const [data, error] = await connector.schedulerConfig.deleteConfiguration(configuration.id);\n if (!data && error && error.message) {\n await host.setState('error');\n await host.setError(error.message);\n }\n },\n editButtonClick: async (event, connector) => {\n const { configuration } = event.detail;\n connector.schedulerConfigStore.state.selectedConfiguration = configuration;\n connector.schedulerConfigStore.state.action = 'edit';\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class=\"header\">\n <div class=\"description\">\n <h2>All scheduling pages</h2>\n <p>Create, edit and manage all your scheduling pages.</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 class={{\n hide: this.state === 'loading' || (this.configurations && this.configurations.length === 0),\n }}\n >\n <th>Scheduling page 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 the scheduling pages</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 scheduling pages 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 class=\"error-container\">\n <p class={'error'}>{this.state === 'error' && this.error}</p>\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 { a as debug, s as toTitleCase, u 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: '222ae81308d17cbdc7c3a44f0902fc683c88da1d' }, h("div", { key: '5ac1653c3b9ea1e3712e7597becc4d38435f3fa1', 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}

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { d as debug, p as formatParticipants, q as formatDateTime } from './utils.js';
+import { a as debug, w as formatParticipants, x as formatDateTime } from './utils.js';
 const nylasListThreadsCss = ":host{display:block;font-size:var(--nylas-font-size, inherit);font-family:var(--nylas-font-family, inherit)}.list-thread{display:grid;grid-auto-flow:row;color:var(--nylas-color-primary-800);width:100%}.thread{position:relative;width:100%;display:grid;padding:0.5rem 1rem;column-gap:0.25rem;grid-template-areas:\"........ from    count   ....... date actions\" \"checkbox subject subject subject subject actions\" \"........ snippet snippet snippet snippet actions\";grid-template-columns:auto auto auto auto auto auto;margin-bottom:0.75rem;border-radius:var(--nylas-border-radius-2x);color:var(--nylas-color-primary-00);background-color:var(--nylas-color-primary-50);border:0;box-sizing:border-box;text-align:left;cursor:pointer;box-shadow:1px 1px 3px 0px rgba(0, 0, 0, 0.3);font-size:inherit;font-family:inherit}.thread.loading{animation:pulsate 1.5s infinite ease-in-out;width:100%;height:90px}.thread:last-of-type{margin-bottom:0}.thread.selected{box-shadow:0 2px 0 0 var(--nylas-color-primary-200);background-color:var(--nylas-color-primary-100)}.thread:hover{box-shadow:0 2px 0 0 var(--nylas-color-primary-200);background-color:var(--nylas-color-primary-100)}.thread>div{align-self:center;pointer-events:all !important}.thread .actions{grid-area:actions}.thread .actions sp-action-menu{pointer-events:initial !important}.thread .actions sp-action-button{pointer-events:initial !important}.thread .actions sp-menu-item{pointer-events:initial !important}.thread .checkbox{grid-area:checkbox;margin-right:0.5rem;pointer-events:initial !important}.thread .checkbox sp-checkbox{pointer-events:initial !important}.thread .star{grid-area:star;justify-self:end}.thread .from{grid-area:from;color:var(--nylas-color-primary-600)}.thread .count{grid-area:count;color:var(--nylas-color-primary-600)}.thread .subject{grid-area:subject;color:var(--nylas-color-primary-600)}.thread .snippet{grid-area:snippet;color:var(--nylas-color-primary-500)}.thread .date{grid-area:date;align-self:center;color:var(--nylas-color-primary-500)}.thread.unread .from,.thread.unread .count,.thread.unread .subject,.thread.unread .date{font-weight:600;color:var(--nylas-color-primary-800)}.thread.unread .snippet{color:var(--nylas-color-primary-700)}.thread .from{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thread .snippet{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thread .subject{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media only screen and (min-width: 768px){.thread{column-gap:1rem;grid-template-areas:\"checkbox from count subject snippet date actions\";grid-template-columns:auto minmax(auto, 200px) auto auto 1fr auto auto;margin-bottom:0.5rem;border:1px solid var(--nylas-color-primary-100)}.thread.no-checkbox{grid-template-areas:\"from count subject snippet date actions\";grid-template-columns:minmax(auto, 200px) auto auto 1fr auto auto}.thread .checkbox{margin-right:0}}@keyframes pulsate{0%{background-color:var(--nylas-color-primary-50)}50%{background-color:var(--nylas-color-primary-100)}100%{background-color:var(--nylas-color-primary-50)}}";
@@ -50,7 +50,7 @@ const NylasListThreads$1 = proxyCustomElement(class NylasListThreads extends HTM
         debug(`[nylas-list-threads] Component did load`, { isAuthenticated: this.isAuthenticated });
     }
     render() {
-        return (h(Host, { key: '4cd99954b325347a5bcf2fdda5440224f188ca4d' }, h("div", { key: '876dd6bf8cd63ce8c8ca9894559b32b3c5885597', class: 'list-thread', part: "list-thread" }, this.state === 'loading' && new Array(10).fill(0).map((_, i) => h("div", { class: "thread loading", style: { animationDelay: `${i * 20}ms` } })), this.state === 'ready' &&
+        return (h(Host, { key: 'f943d924f47f9e1133bf87fcd32ee78e5b9bbf01' }, h("div", { key: '2159737dbb20305da9f966959d9da7a1830b9b2b', class: 'list-thread', part: "list-thread" }, this.state === 'loading' && new Array(10).fill(0).map((_, i) => h("div", { class: "thread loading", style: { animationDelay: `${i * 20}ms` } })), this.state === 'ready' &&
             this.threads.map(thread => (h("button", { key: thread?.id, class: {
                     'thread': true,
                     'unread': thread?.unread === true,
@@ -99,7 +99,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1(NylasListThreads$1);
 const NylasListThreads = NylasListThreads$1;
 const defineCustomElement = defineCustomElement$1;

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

	@@ -1 +1 @@
1	- {"file":"nylas-list-threads.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,2gGAA2gG;;;;;;;;;;;;;;;;MCc1hGA,kBAAgB;;;;;;QA0BnB,yBAAoB,GAAG,OAAO,MAAc;YAClD,KAAK,CAAC,sCAAsC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;YAC1D,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAC/C,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;gBAC3B,KAAK,CAAC,oEAAoE,CAAC,CAAC;aAC7E;SACF,CAAC;QAOM,wBAAmB,GAAG,OAAO,KAAY;YAC/C,KAAK,CAAC,uCAAuC,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;YAC1D,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB,CAAC;uBAzCmC,EAAE;+BACK,KAAK;;qBAEb,OAAO;4BACF,KAAK;;IAG9C,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,MAAM,iBAAiB;QACrB,KAAK,CAAC,0CAA0C,CAAC,CAAC;KACnD;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,yCAAyC,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;KAC7F;IA0CD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,aAAa,EAAE,IAAI,EAAC,aAAa,IAC1C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,WAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,GAAI,CAAC,EACzI,IAAI,CAAC,KAAK,KAAK,OAAO;YACrB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACrB,cACE,GAAG,EAAE,MAAM,EAAE,EAAE,EACf,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI;oBACd,QAAQ,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI;oBACjC,aAAa,EAAE,IAAI,CAAC,YAAY,KAAK,KAAK;iBAC3C,EACD,IAAI,EAAC,QAAQ,gBACD,uBAAuB,MAAM,EAAE,OAAO,EAAE,EACpD,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,IAE/C,IAAI,CAAC,YAAY,KAChB,WAAK,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,IACnC,mBAAa,IAAI,EAAC,GAAG,EAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,mBAAmB,GAAI,CAC1E,CACP,EACD,WAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IAC1B,kBAAkB,CAAC,MAAM,CAAC,YAAY,IAAI,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC,EAAE,CAAC,CAAC,CACtG,EACN,WAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,IAChC,MAAM,EAAE,OAAO,CACZ,EACN,WAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC5B,MAAM,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC,CAC7B,EACN,WAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,IAChC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CACpB,EACL,MAAM,CAAC,4BAA4B,KAClC,WACE,KAAK,EAAC,MAAM,gBACA,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,4BAA4B,GAAG,IAAI,CAAC,CAAC,EAAE,EACnI,IAAI,EAAC,MAAM,IAEV,cAAc,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAChD,CACP,CACM,CACV,CAAC,CACA,CACD,EACP;KACH;;;;;;;;;AAjDD;IAhBC,iBAAiB,CAAsF;QACtG,IAAI,EAAE,oBAAoB;QAC1B,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,sBAAsB,EAAE,iBAAiB,CAAC;YAC3C,CAAC,gBAAgB,EAAE,WAAW,CAAC;YAC/B,CAAC,iBAAiB,EAAE,SAAS,CAAC;YAC9B,CAAC,eAAe,EAAE,OAAO,CAAC;SAC3B,CAAC;QACF,YAAY,EAAE;YACZ,cAAc,EAAE,OAAO,KAA0B,EAAE,cAAqC;gBACtF,KAAK,CAAC,sCAAsC,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;gBACzD,MAAM,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aACzD;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;gDAkDD;;;;;;;;;;;;;;;;;;;;;","names":["NylasListThreads"],"sources":["src/components/mailbox/nylas-list-threads/nylas-list-threads.scss?tag=nylas-list-threads&encapsulation=shadow","src/components/mailbox/nylas-list-threads/nylas-list-threads.tsx"],"sourcesContent":[":host {\n display: block;\n font-size: var(--nylas-font-size, inherit);\n font-family: var(--nylas-font-family, inherit);\n}\n\n.list-thread {\n display: grid;\n grid-auto-flow: row;\n color: var(--nylas-color-primary-800);\n width: 100%;\n}\n\n.thread {\n position: relative;\n width: 100%;\n display: grid;\n padding: 0.5rem 1rem;\n column-gap: 0.25rem;\n grid-template-areas:\n '........ from count ....... date actions'\n 'checkbox subject subject subject subject actions'\n '........ snippet snippet snippet snippet actions';\n grid-template-columns: auto auto auto auto auto auto;\n margin-bottom: 0.75rem;\n border-radius: var(--nylas-border-radius-2x);\n color: var(--nylas-color-primary-00);\n background-color: var(--nylas-color-primary-50);\n border: 0;\n box-sizing: border-box;\n text-align: left;\n cursor: pointer;\n box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 30%);\n\n font-size: inherit;\n font-family: inherit;\n\n &.loading {\n animation: pulsate 1.5s infinite ease-in-out;\n width: 100%;\n height: 90px;\n }\n\n &:last-of-type {\n margin-bottom: 0;\n }\n\n &.selected {\n box-shadow: 0 2px 0 0 var(--nylas-color-primary-200);\n background-color: var(--nylas-color-primary-100);\n }\n\n &:hover {\n box-shadow: 0 2px 0 0 var(--nylas-color-primary-200);\n background-color: var(--nylas-color-primary-100);\n }\n\n > div {\n align-self: center;\n pointer-events: all !important;\n }\n\n .actions {\n grid-area: actions;\n }\n\n .actions sp-action-menu {\n pointer-events: initial !important;\n }\n\n .actions sp-action-button {\n pointer-events: initial !important;\n }\n\n .actions sp-menu-item {\n pointer-events: initial !important;\n }\n\n .checkbox {\n grid-area: checkbox;\n margin-right: 0.5rem;\n pointer-events: initial !important;\n sp-checkbox {\n pointer-events: initial !important;\n }\n }\n\n .star {\n grid-area: star;\n justify-self: end;\n }\n\n .from {\n grid-area: from;\n color: var(--nylas-color-primary-600);\n }\n\n .count {\n grid-area: count;\n color: var(--nylas-color-primary-600);\n }\n\n .subject {\n grid-area: subject;\n color: var(--nylas-color-primary-600);\n }\n\n .snippet {\n grid-area: snippet;\n color: var(--nylas-color-primary-500);\n }\n\n .date {\n grid-area: date;\n align-self: center;\n color: var(--nylas-color-primary-500);\n }\n\n &.unread {\n .from,\n .count,\n .subject,\n .date {\n font-weight: 600;\n color: var(--nylas-color-primary-800);\n }\n\n .snippet {\n color: var(--nylas-color-primary-700);\n }\n }\n\n .from {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .snippet {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .subject {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n/* Extra small devices (phones, 600px and down) /\n@media only screen and (max-width: 600px) {\n}\n\n/ Small devices (portrait tablets and large phones, 600px and up) /\n@media only screen and (min-width: 600px) {\n}\n\n/ Medium devices (landscape tablets, 768px and up) /\n@media only screen and (min-width: 768px) {\n .thread {\n column-gap: 1rem;\n grid-template-areas: 'checkbox from count subject snippet date actions';\n grid-template-columns: auto minmax(auto, 200px) auto auto 1fr auto auto;\n margin-bottom: 0.5rem;\n border: 1px solid var(--nylas-color-primary-100);\n\n &.no-checkbox {\n grid-template-areas: 'from count subject snippet date actions';\n grid-template-columns: minmax(auto, 200px) auto auto 1fr auto auto;\n }\n\n .checkbox {\n margin-right: 0;\n }\n }\n}\n\n@keyframes pulsate {\n 0% {\n background-color: var(--nylas-color-primary-50);\n }\n 50% {\n background-color: var(--nylas-color-primary-100);\n }\n 100% {\n background-color: var(--nylas-color-primary-50);\n }\n}\n\n/ Large devices (laptops/desktops, 992px and up) /\n@media only screen and (min-width: 992px) {\n}\n\n/ Extra large devices (large laptops and desktops, 1200px and up) /\n@media only screen and (min-width: 1200px) {\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { DataState } from '@/common/types';\nimport { debug, formatDateTime, formatParticipants } from '@/utils/utils';\nimport { Thread } from '@nylas/core';\nimport { TokenInfo } from '@nylas/core/dist/auth';\nimport { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../..';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\n\n@Component({\n tag: 'nylas-list-threads',\n styleUrl: 'nylas-list-threads.scss',\n shadow: true,\n})\nexport class NylasListThreads {\n @Prop() readonly threads: Thread[] = [];\n @Prop() readonly isAuthenticated: boolean = false;\n @Prop() readonly tokenInfo?: TokenInfo;\n @Prop() readonly state: DataState = 'ready';\n @Prop() readonly showCheckbox: boolean = false;\n @Event({ cancelable: true }) readonly threadSelected!: EventEmitter<Thread>;\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-list-threads] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-list-threads] Component did load`, { isAuthenticated: this.isAuthenticated });\n }\n\n /\n Handle thread selected\n * @param thread The thread that was selected\n * @returns void\n * @emits threadSelected\n /\n private handleThreadSelected = async (thread: Thread) => {\n debug(`[nylas-list-threads] Thread selected`, { thread });\n const event = this.threadSelected.emit(thread);\n if (!event.defaultPrevented) {\n debug(`[nylas-list-threads] Default event not prevented, selecting thread`);\n }\n };\n\n /\n Handle checkbox click\n * @param event The click event\n * @returns void\n /\n private handleCheckboxClick = async (event: Event) => {\n debug(`[nylas-list-threads] Checkbox clicked`, { event });\n event.stopPropagation();\n };\n\n @RegisterComponent<NylasListThreads, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n name: 'nylas-list-threads',\n stateToProps: new Map([\n ['auth.isAuthenticated', 'isAuthenticated'],\n ['auth.tokenInfo', 'tokenInfo'],\n ['mailbox.threads', 'threads'],\n ['mailbox.state', 'state'],\n ]),\n eventToProps: {\n threadSelected: async (event: CustomEvent<Thread>, nylasConnector: NylasMailboxConnector) => {\n debug(`[nylas-list-threads] Thread selected`, { event });\n await nylasConnector.threads.selectThread(event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class={'list-thread'} part=\"list-thread\">\n {this.state === 'loading' && new Array(10).fill(0).map((_, i) => <div class=\"thread loading\" style={{ animationDelay: `${i 20}ms` }} />)}\n {this.state === 'ready' &&\n this.threads.map(thread => (\n <button\n key={thread?.id}\n class={{\n 'thread': true,\n 'unread': thread?.unread === true,\n 'no-checkbox': this.showCheckbox === false,\n }}\n part=\"thread\"\n aria-label={`Thread with subject ${thread?.subject}`}\n onClick={() => this.handleThreadSelected(thread)}\n >\n {this.showCheckbox && (\n <div class=\"checkbox\" part=\"checkbox\">\n <sp-checkbox size=\"s\" value={thread?.id} onClick={this.handleCheckboxClick} />\n </div>\n )}\n <div class=\"from\" part=\"from\">\n {formatParticipants(thread.participants ?? [], this.tokenInfo?.email, thread?.message_ids?.length \|\| 1, 1)}\n </div>\n <div class=\"subject\" part=\"subject\">\n {thread?.subject}\n </div>\n <div class=\"count\" part=\"count\">\n {thread?.message_ids?.length \|\| 1}\n </div>\n <div class=\"snippet\" part=\"snippet\">\n {thread?.snippet?.trim()}\n </div>\n {thread.latest_message_received_date && (\n <div\n class=\"date\"\n aria-label={`${Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(new Date(thread.latest_message_received_date * 1000))}`}\n part=\"date\"\n >\n {formatDateTime(thread.latest_message_received_date)}\n </div>\n )}\n </button>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-list-threads.js","mappings":"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","names":["NylasListThreads"],"sources":["src/components/mailbox/nylas-list-threads/nylas-list-threads.scss?tag=nylas-list-threads&encapsulation=shadow","src/components/mailbox/nylas-list-threads/nylas-list-threads.tsx"],"sourcesContent":[":host {\n display: block;\n font-size: var(--nylas-font-size, inherit);\n font-family: var(--nylas-font-family, inherit);\n}\n\n.list-thread {\n display: grid;\n grid-auto-flow: row;\n color: var(--nylas-color-primary-800);\n width: 100%;\n}\n\n.thread {\n position: relative;\n width: 100%;\n display: grid;\n padding: 0.5rem 1rem;\n column-gap: 0.25rem;\n grid-template-areas:\n '........ from count ....... date actions'\n 'checkbox subject subject subject subject actions'\n '........ snippet snippet snippet snippet actions';\n grid-template-columns: auto auto auto auto auto auto;\n margin-bottom: 0.75rem;\n border-radius: var(--nylas-border-radius-2x);\n color: var(--nylas-color-primary-00);\n background-color: var(--nylas-color-primary-50);\n border: 0;\n box-sizing: border-box;\n text-align: left;\n cursor: pointer;\n box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 30%);\n\n font-size: inherit;\n font-family: inherit;\n\n &.loading {\n animation: pulsate 1.5s infinite ease-in-out;\n width: 100%;\n height: 90px;\n }\n\n &:last-of-type {\n margin-bottom: 0;\n }\n\n &.selected {\n box-shadow: 0 2px 0 0 var(--nylas-color-primary-200);\n background-color: var(--nylas-color-primary-100);\n }\n\n &:hover {\n box-shadow: 0 2px 0 0 var(--nylas-color-primary-200);\n background-color: var(--nylas-color-primary-100);\n }\n\n > div {\n align-self: center;\n pointer-events: all !important;\n }\n\n .actions {\n grid-area: actions;\n }\n\n .actions sp-action-menu {\n pointer-events: initial !important;\n }\n\n .actions sp-action-button {\n pointer-events: initial !important;\n }\n\n .actions sp-menu-item {\n pointer-events: initial !important;\n }\n\n .checkbox {\n grid-area: checkbox;\n margin-right: 0.5rem;\n pointer-events: initial !important;\n sp-checkbox {\n pointer-events: initial !important;\n }\n }\n\n .star {\n grid-area: star;\n justify-self: end;\n }\n\n .from {\n grid-area: from;\n color: var(--nylas-color-primary-600);\n }\n\n .count {\n grid-area: count;\n color: var(--nylas-color-primary-600);\n }\n\n .subject {\n grid-area: subject;\n color: var(--nylas-color-primary-600);\n }\n\n .snippet {\n grid-area: snippet;\n color: var(--nylas-color-primary-500);\n }\n\n .date {\n grid-area: date;\n align-self: center;\n color: var(--nylas-color-primary-500);\n }\n\n &.unread {\n .from,\n .count,\n .subject,\n .date {\n font-weight: 600;\n color: var(--nylas-color-primary-800);\n }\n\n .snippet {\n color: var(--nylas-color-primary-700);\n }\n }\n\n .from {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .snippet {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .subject {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n/* Extra small devices (phones, 600px and down) /\n@media only screen and (max-width: 600px) {\n}\n\n/ Small devices (portrait tablets and large phones, 600px and up) /\n@media only screen and (min-width: 600px) {\n}\n\n/ Medium devices (landscape tablets, 768px and up) /\n@media only screen and (min-width: 768px) {\n .thread {\n column-gap: 1rem;\n grid-template-areas: 'checkbox from count subject snippet date actions';\n grid-template-columns: auto minmax(auto, 200px) auto auto 1fr auto auto;\n margin-bottom: 0.5rem;\n border: 1px solid var(--nylas-color-primary-100);\n\n &.no-checkbox {\n grid-template-areas: 'from count subject snippet date actions';\n grid-template-columns: minmax(auto, 200px) auto auto 1fr auto auto;\n }\n\n .checkbox {\n margin-right: 0;\n }\n }\n}\n\n@keyframes pulsate {\n 0% {\n background-color: var(--nylas-color-primary-50);\n }\n 50% {\n background-color: var(--nylas-color-primary-100);\n }\n 100% {\n background-color: var(--nylas-color-primary-50);\n }\n}\n\n/ Large devices (laptops/desktops, 992px and up) /\n@media only screen and (min-width: 992px) {\n}\n\n/ Extra large devices (large laptops and desktops, 1200px and up) /\n@media only screen and (min-width: 1200px) {\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { DataState } from '@/common/types';\nimport { debug, formatDateTime, formatParticipants } from '@/utils/utils';\nimport { Thread } from '@nylas/core';\nimport { TokenInfo } from '@nylas/core/dist/auth';\nimport { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { NylasMailboxConnector } from '../../..';\nimport { NylasMailbox } from '../nylas-mailbox/nylas-mailbox';\n\n@Component({\n tag: 'nylas-list-threads',\n styleUrl: 'nylas-list-threads.scss',\n shadow: true,\n})\nexport class NylasListThreads {\n @Prop() readonly threads: Thread[] = [];\n @Prop() readonly isAuthenticated: boolean = false;\n @Prop() readonly tokenInfo?: TokenInfo;\n @Prop() readonly state: DataState = 'ready';\n @Prop() readonly showCheckbox: boolean = false;\n @Event({ cancelable: true }) readonly threadSelected!: EventEmitter<Thread>;\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-list-threads] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-list-threads] Component did load`, { isAuthenticated: this.isAuthenticated });\n }\n\n /\n Handle thread selected\n * @param thread The thread that was selected\n * @returns void\n * @emits threadSelected\n /\n private handleThreadSelected = async (thread: Thread) => {\n debug(`[nylas-list-threads] Thread selected`, { thread });\n const event = this.threadSelected.emit(thread);\n if (!event.defaultPrevented) {\n debug(`[nylas-list-threads] Default event not prevented, selecting thread`);\n }\n };\n\n /\n Handle checkbox click\n * @param event The click event\n * @returns void\n /\n private handleCheckboxClick = async (event: Event) => {\n debug(`[nylas-list-threads] Checkbox clicked`, { event });\n event.stopPropagation();\n };\n\n @RegisterComponent<NylasListThreads, NylasMailboxConnector, Exclude<NylasMailbox['stores'], undefined>>({\n name: 'nylas-list-threads',\n stateToProps: new Map([\n ['auth.isAuthenticated', 'isAuthenticated'],\n ['auth.tokenInfo', 'tokenInfo'],\n ['mailbox.threads', 'threads'],\n ['mailbox.state', 'state'],\n ]),\n eventToProps: {\n threadSelected: async (event: CustomEvent<Thread>, nylasConnector: NylasMailboxConnector) => {\n debug(`[nylas-list-threads] Thread selected`, { event });\n await nylasConnector.threads.selectThread(event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <div class={'list-thread'} part=\"list-thread\">\n {this.state === 'loading' && new Array(10).fill(0).map((_, i) => <div class=\"thread loading\" style={{ animationDelay: `${i 20}ms` }} />)}\n {this.state === 'ready' &&\n this.threads.map(thread => (\n <button\n key={thread?.id}\n class={{\n 'thread': true,\n 'unread': thread?.unread === true,\n 'no-checkbox': this.showCheckbox === false,\n }}\n part=\"thread\"\n aria-label={`Thread with subject ${thread?.subject}`}\n onClick={() => this.handleThreadSelected(thread)}\n >\n {this.showCheckbox && (\n <div class=\"checkbox\" part=\"checkbox\">\n <sp-checkbox size=\"s\" value={thread?.id} onClick={this.handleCheckboxClick} />\n </div>\n )}\n <div class=\"from\" part=\"from\">\n {formatParticipants(thread.participants ?? [], this.tokenInfo?.email, thread?.message_ids?.length \|\| 1, 1)}\n </div>\n <div class=\"subject\" part=\"subject\">\n {thread?.subject}\n </div>\n <div class=\"count\" part=\"count\">\n {thread?.message_ids?.length \|\| 1}\n </div>\n <div class=\"snippet\" part=\"snippet\">\n {thread?.snippet?.trim()}\n </div>\n {thread.latest_message_received_date && (\n <div\n class=\"date\"\n aria-label={`${Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(new Date(thread.latest_message_received_date * 1000))}`}\n part=\"date\"\n >\n {formatDateTime(thread.latest_message_received_date)}\n </div>\n )}\n </button>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-locale-switch2.js CHANGED Viewed

@@ -145,7 +145,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasLocaleSwitch);
 export { NylasLocaleSwitch as N, defineCustomElement as d };

package/dist/components/nylas-locale-switch2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-locale-switch2.js","mappings":"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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/scheduler/nylas-locale-switch/nylas-locale-switch.scss?tag=nylas-locale-switch&encapsulation=shadow","src/components/scheduler/nylas-locale-switch/nylas-locale-switch.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-locale-switch {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n height: 68px;\n border-left: none;\n border-right: none;\n color: var(--nylas-base-50);\n font-size: 14px;\n @media #{$mobile} {\n font-size: 16px;\n }\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n font-family: inherit;\n}\n\n.select-wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\nselect {\n border: none;\n background: transparent;\n cursor: pointer;\n outline: none;\n background-color: transparent;\n margin: 0 0 1px;\n padding: 4px;\n vertical-align: middle;\n &#timezone {\n width: 140px;\n }\n &#language {\n width: 80px;\n }\n}\n\nspan.timezone-label {\n display: flex;\n width: -webkit-fill-available;\n justify-content: space-between;\n}\n","import { LANGUAGE_MAP, TIMEZONE_MAP, getTimezoneOffset } from '@/common/constants';\nimport { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../../components';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\n\n/*\n The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language.\n /\n@Component({\n tag: 'nylas-locale-switch',\n styleUrl: 'nylas-locale-switch.scss',\n shadow: true,\n})\nexport class NylasLocaleSwitch {\n /\n The selected timezone.\n /\n @Prop({ mutable: true }) selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n The selected language.\n /\n @Prop({ mutable: true }) selectedLanguage: string = navigator.language;\n\n /\n This event is fired when the timezone is changed.\n /\n @Event() timezoneChanged!: EventEmitter<string>;\n\n /\n This event is fired when the language is changed.\n /\n @Event() languageChanged!: EventEmitter<string>;\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n componentWillLoad() {}\n\n /\n Change the timezone.\n * @param timezone The timezone to select.\n /\n private changeTimezone(timezone: string) {\n this.selectedTimezone = timezone;\n this.timezoneChanged.emit(timezone);\n }\n\n /\n Change the language.\n * @param language The language to select.\n */\n private changeLanguage(language: string) {\n this.selectedLanguage = language;\n this.languageChanged.emit(language);\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(\n event: CustomEvent<{\n value: string;\n name: string;\n }>,\n ) {\n const { name, value } = event.detail;\n if (name === 'timezone') {\n this.changeTimezone(value);\n } else if (name === 'language') {\n this.changeLanguage(value);\n }\n }\n\n getTimezoneLabelHTML(timezone: string) {\n const offset = getTimezoneOffset(timezone);\n return (\n <span\n class=\"timezone-label\"\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n width: '-webkit-fill-available',\n }}\n >\n {TIMEZONE_MAP[timezone]}{' '}\n <span\n class=\"timezone-offset\"\n style={{\n fontSize: '14px',\n fontWeight: '400',\n color: 'var(--nylas-base-500)',\n }}\n >\n {offset}\n </span>\n </span>\n );\n }\n\n @RegisterComponent<NylasLocaleSwitch, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-locale-switch',\n stateToProps: new Map([\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ]),\n eventToProps: {\n timezoneChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.selectTimezone(event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n labelHTML: this.getTimezoneLabelHTML(key),\n label: TIMEZONE_MAP[key],\n value: key,\n }));\n const languageOptions = Object.keys(LANGUAGE_MAP).map(key => ({\n label: LANGUAGE_MAP[key],\n value: key,\n }));\n\n return (\n <Host>\n <div class=\"nylas-locale-switch\">\n <div\n class={{\n 'select-wrapper': true,\n 'timezone': true,\n }}\n >\n <select-dropdown name=\"timezone\" options={timezoneOptions} defaultSelectedOption={timezoneOptions.find(op => op.value == this.selectedTimezone)}>\n <span slot=\"select-icon\">\n <globe-icon width=\"20\" height=\"20\" />\n </span>\n </select-dropdown>\n </div>\n <div\n class={{\n 'select-wrapper': true,\n 'language': true,\n }}\n >\n <select-dropdown name=\"language\" options={languageOptions} defaultSelectedOption={languageOptions.find(lang => lang.value == this.selectedLanguage)}>\n <span slot=\"select-icon\">\n <translate-icon width=\"20\" height=\"20\" />\n </span>\n </select-dropdown>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-locale-switch2.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-locale-switch/nylas-locale-switch.scss?tag=nylas-locale-switch&encapsulation=shadow","src/components/scheduler/nylas-locale-switch/nylas-locale-switch.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-locale-switch {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n height: 68px;\n border-left: none;\n border-right: none;\n color: var(--nylas-base-50);\n font-size: 14px;\n @media #{$mobile} {\n font-size: 16px;\n }\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n font-family: inherit;\n}\n\n.select-wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\nselect {\n border: none;\n background: transparent;\n cursor: pointer;\n outline: none;\n background-color: transparent;\n margin: 0 0 1px;\n padding: 4px;\n vertical-align: middle;\n &#timezone {\n width: 140px;\n }\n &#language {\n width: 80px;\n }\n}\n\nspan.timezone-label {\n display: flex;\n width: -webkit-fill-available;\n justify-content: space-between;\n}\n","import { LANGUAGE_MAP, TIMEZONE_MAP, getTimezoneOffset } from '@/common/constants';\nimport { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../../components';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\n\n/*\n The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language.\n /\n@Component({\n tag: 'nylas-locale-switch',\n styleUrl: 'nylas-locale-switch.scss',\n shadow: true,\n})\nexport class NylasLocaleSwitch {\n /\n The selected timezone.\n /\n @Prop({ mutable: true }) selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n The selected language.\n /\n @Prop({ mutable: true }) selectedLanguage: string = navigator.language;\n\n /\n This event is fired when the timezone is changed.\n /\n @Event() timezoneChanged!: EventEmitter<string>;\n\n /\n This event is fired when the language is changed.\n /\n @Event() languageChanged!: EventEmitter<string>;\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n componentWillLoad() {}\n\n /\n Change the timezone.\n * @param timezone The timezone to select.\n /\n private changeTimezone(timezone: string) {\n this.selectedTimezone = timezone;\n this.timezoneChanged.emit(timezone);\n }\n\n /\n Change the language.\n * @param language The language to select.\n */\n private changeLanguage(language: string) {\n this.selectedLanguage = language;\n this.languageChanged.emit(language);\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(\n event: CustomEvent<{\n value: string;\n name: string;\n }>,\n ) {\n const { name, value } = event.detail;\n if (name === 'timezone') {\n this.changeTimezone(value);\n } else if (name === 'language') {\n this.changeLanguage(value);\n }\n }\n\n getTimezoneLabelHTML(timezone: string) {\n const offset = getTimezoneOffset(timezone);\n return (\n <span\n class=\"timezone-label\"\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n width: '-webkit-fill-available',\n }}\n >\n {TIMEZONE_MAP[timezone]}{' '}\n <span\n class=\"timezone-offset\"\n style={{\n fontSize: '14px',\n fontWeight: '400',\n color: 'var(--nylas-base-500)',\n }}\n >\n {offset}\n </span>\n </span>\n );\n }\n\n @RegisterComponent<NylasLocaleSwitch, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-locale-switch',\n stateToProps: new Map([\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ]),\n eventToProps: {\n timezoneChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.selectTimezone(event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n labelHTML: this.getTimezoneLabelHTML(key),\n label: TIMEZONE_MAP[key],\n value: key,\n }));\n const languageOptions = Object.keys(LANGUAGE_MAP).map(key => ({\n label: LANGUAGE_MAP[key],\n value: key,\n }));\n\n return (\n <Host>\n <div class=\"nylas-locale-switch\">\n <div\n class={{\n 'select-wrapper': true,\n 'timezone': true,\n }}\n >\n <select-dropdown name=\"timezone\" options={timezoneOptions} defaultSelectedOption={timezoneOptions.find(op => op.value == this.selectedTimezone)}>\n <span slot=\"select-icon\">\n <globe-icon width=\"20\" height=\"20\" />\n </span>\n </select-dropdown>\n </div>\n <div\n class={{\n 'select-wrapper': true,\n 'language': true,\n }}\n >\n <select-dropdown name=\"language\" options={languageOptions} defaultSelectedOption={languageOptions.find(lang => lang.value == this.selectedLanguage)}>\n <span slot=\"select-icon\">\n <translate-icon width=\"20\" height=\"20\" />\n </span>\n </select-dropdown>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-location-component2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { d as debug } from './utils.js';
+import { a as debug } from './utils.js';
 import { d as defineCustomElement$7 } from './chevron.js';
 import { d as defineCustomElement$6 } from './info.js';
 import { d as defineCustomElement$5 } from './location.js';
@@ -9,7 +9,7 @@ import { d as defineCustomElement$3 } from './search.js';
 import { d as defineCustomElement$2 } from './select-dropdown2.js';
 import { d as defineCustomElement$1 } from './toolitp-component.js';
-const nylasLocationComponentCss = ":host{--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}.nylas-event-location{display:flex;flex-direction:column;gap:4px;font-family:var(--nylas-font-family)}.nylas-event-location label{display:flex;align-items:center;color:var(--nylas-base-nylas-base-800);font-size:14px;font-style:normal;font-weight:400;line-height:150%;}.nylas-event-location label span.label-icon{margin-left:4px}.nylas-event-location label span.label-icon tooltip-component{display:flex}.nylas-event-location span[slot=select-icon]{border-right:1px solid var(--nylas-base-200);padding:16px 0.75rem 16px 0.5rem;border-radius:var(--nylas-border-radius-2x);border-bottom-right-radius:0;border-top-right-radius:0;height:20px}.nylas-event-location div.location-input{display:grid;grid-template-columns:auto 1fr;width:100%;gap:0.5rem}.nylas-event-location div.location-input input{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:12px 16px;font-family:var(--nylas-font-family);font-size:16px;line-height:24px}.nylas-event-location select-dropdown{width:208px}@media screen and (max-width: 768px){.nylas-event-location select-dropdown{width:100%}}.nylas-event-location select-dropdown::part(sd_dropdown){width:100%}.nylas-event-location select-dropdown::part(sd_dropdown-content){left:calc(35px + 0.5rem)}.nylas-event-location select-dropdown::part(sd_dropdown-button){display:flex;justify-content:space-between;width:100%;border:1px solid var(--nylas-base-200);padding:0 0.5rem}.nylas-event-location select-dropdown::part(sd_dropdown-button-selected-label){display:inline-flex;align-self:center;padding:14px 0;font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
+const nylasLocationComponentCss = ":host{--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}.nylas-event-location{display:flex;flex-direction:column;gap:4px;font-family:var(--nylas-font-family)}.nylas-event-location label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:16px;font-style:normal;font-weight:400;line-height:150%;}.nylas-event-location label span.label-icon{margin-left:4px}.nylas-event-location label span.label-icon tooltip-component{display:flex}.nylas-event-location span[slot=select-icon]{border-right:1px solid var(--nylas-base-200);padding:16px 0.75rem 16px 0.5rem;border-radius:var(--nylas-border-radius-2x);border-bottom-right-radius:0;border-top-right-radius:0;height:20px}.nylas-event-location div.location-input{display:grid;grid-template-columns:auto 1fr;width:100%;gap:0.5rem}.nylas-event-location div.location-input input{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:12px 16px;font-family:var(--nylas-font-family);font-size:16px;line-height:24px}.nylas-event-location select-dropdown{width:208px}@media screen and (max-width: 768px){.nylas-event-location select-dropdown{width:100%}}.nylas-event-location select-dropdown::part(sd_dropdown){width:100%}.nylas-event-location select-dropdown::part(sd_dropdown-content){left:calc(35px + 0.5rem)}.nylas-event-location select-dropdown::part(sd_dropdown-button){display:flex;justify-content:space-between;width:100%;border:1px solid var(--nylas-base-200);padding:0 0.5rem}.nylas-event-location select-dropdown::part(sd_dropdown-button-selected-label){display:inline-flex;align-self:center;padding:14px 0;font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
 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;
@@ -32,6 +32,7 @@ const NylasLocationComponent = proxyCustomElement(class NylasLocationComponent e
         this.__attachShadow();
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.internals = this.attachInternals();
+        this.selectedConfiguration = undefined;
         this.eventLocation = undefined;
         this.location = this.eventLocation ?? '';
         this.selectedLocationOption = this.eventLocation ? 'custom' : 'none';
@@ -41,6 +42,14 @@ const NylasLocationComponent = proxyCustomElement(class NylasLocationComponent e
         debug('nylas-location-component', 'elementNameChangedHandler', newValue);
         this.host.setAttribute('name', newValue);
     }
+    selectedConfigurationChangedHandler(newValue, oldValue) {
+        debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);
+        const configLocation = newValue?.event_booking?.location;
+        if (configLocation) {
+            this.selectedLocationOption = configLocation ? 'custom' : 'none';
+            this.location = configLocation;
+        }
+    }
     eventLocationChangedHandler(newValue, oldValue) {
         debug('nylas-location-component', 'eventLocationChangedHandler', newValue);
         if (newValue === oldValue) {
@@ -85,30 +94,34 @@ const NylasLocationComponent = proxyCustomElement(class NylasLocationComponent e
             { value: 'custom', label: 'Custom location' },
         ];
         const icons = {
-            none: h("location-off-icon", { key: 'b6ed0f7da911d13fe204658d1dbfbc29d569a99a' }),
-            custom: h("location-icon", { key: '08a5c193876813578037ee6003ab03fd947fb87d' }),
+            none: h("location-off-icon", { key: '5344819790f0d245e78de8808b05005eaa610991' }),
+            custom: h("location-icon", { key: '6d931006f7ea79e3290bde60cbdd3c1ca8e827f8' }),
         };
-        return (h(Host, { key: 'e512133eb2a9213bfacc2edad0581b7a6ad41bbc' }, h("div", { key: '1f0e59707c41f7836805ff26efbd5cc119dfef11', class: "nylas-event-location", part: "nel" }, h("label", { key: '60e264aa383ae29342678ecf23b12631fff1bc98', htmlFor: "location" }, "Location type", h("span", { key: '64c34dbeafa4b5c033be3d1facede6e737b915e1', class: "label-icon" }, h("tooltip-component", { key: '0c569694141c72418e997a85328127968d05eac1' }, h("info-icon", { key: '411fe82e0b6296b34aae95459c9da8bc07bd8131', slot: "tooltip-icon" }), h("span", { key: '67b4582af4fe7085c748e842b5fda1a46a454edf', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: '3f7b59eaae37afcd7abc4af3c608c5e6dc3ebc30', class: "location-input" }, h("select-dropdown", { key: '424550ac2c3fd61e7c59d2e8c98cedfd156d5661', withSearch: false, name: "location", options: locationOptions, defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption), exportparts: "sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content" }, h("span", { key: '300fd4134259f97fcf3ba09d3d296c15ca18eec7', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
+        return (h(Host, { key: '2117e5636492cd1b3bc3b975fdc1398c030df9a4' }, h("div", { key: '093c3fdfaf0ad88955f8f785a5c589708d941e57', class: "nylas-event-location", part: "nel" }, h("label", { key: 'e2754216f675fc82cdc7813bacfe0e928e9ed50e', htmlFor: "location" }, "Location type", h("span", { key: 'e402fccc0065a4f6fd0cbd05af345b73b06c4464', class: "label-icon" }, h("tooltip-component", { key: 'c818dbca3cbbf29e34c56bbc9caea7fc3816d808' }, h("info-icon", { key: '5ea673e0d49efe7e0a4ac04c3ec64427a63b8843', slot: "tooltip-icon" }), h("span", { key: 'dac6ddf369aa6caf62a870ca349745f546ed3959', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: 'bf334b9e8e03b660f661d264c9ca52444ee859b6', class: "location-input" }, h("select-dropdown", { key: 'f216e1589bb3b72a9ed6b9cfbec5683795e1b08e', withSearch: false, name: "location", options: locationOptions, defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption), exportparts: "sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content" }, h("span", { key: '6ca96d9f95ac189195c1490e6872b2478cd0d270', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
     static get watchers() { return {
         "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"],
         "eventLocation": ["eventLocationChangedHandler"]
     }; }
     static get style() { return nylasLocationComponentCss; }
 }, [65, "nylas-location-component", {
+        "selectedConfiguration": [16],
         "eventLocation": [1, "event-location"],
         "name": [1],
         "location": [32],
         "selectedLocationOption": [32]
     }, [[0, "selectedOptionChanged", "selectedOptionChangedHandler"]], {
         "name": ["elementNameChangedHandler"],
+        "selectedConfiguration": ["selectedConfigurationChangedHandler"],
         "eventLocation": ["eventLocationChangedHandler"]
     }]);
 __decorate([
     RegisterComponent({
         name: 'nylas-location-component',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {},
         fireRegisterEvent: true,
     }),
@@ -164,7 +177,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasLocationComponent);
 export { NylasLocationComponent as N, defineCustomElement as d };

package/dist/components/nylas-location-component2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-location-component2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-location-component/nylas-location-component.scss?tag=nylas-location-component&encapsulation=shadow","src/components/scheduler-editor/nylas-location-component/nylas-location-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n @include default-css-variables;\n}\n\n.nylas-event-location {\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-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 span[slot='select-icon'] {\n border-right: 1px solid var(--nylas-base-200);\n padding: 16px 0.75rem 16px 0.5rem;\n border-radius: var(--nylas-border-radius-2x);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n height: 20px;\n }\n div.location-input {\n display: grid;\n grid-template-columns: auto 1fr;\n width: 100%;\n gap: 0.5rem;\n input {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 12px 16px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n select-dropdown {\n width: 208px;\n @media #{$mobile} {\n width: 100%;\n }\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-content) {\n left: calc(35px + 0.5rem);\n }\n select-dropdown::part(sd_dropdown-button) {\n display: flex;\n justify-content: space-between;\n width: 100%;\n border: 1px solid var(--nylas-base-200);\n padding: 0 0.5rem;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n display: inline-flex;\n align-self: center;\n padding: 14px 0;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\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-location-component` component is a form input for the description of an event.\n * @part nel - The event location container\n * @part nel__location - The event location input\n * @part nel__dropdown - The dropdown container\n * @part nel__dropdown-button - The dropdown button\n * @part nel__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-location-component',\n styleUrl: 'nylas-location-component.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasLocationComponent {\n @Prop() eventLocation?: string;\n @State() location: string = this.eventLocation ?? '';\n @State() selectedLocationOption: string = this.eventLocation ? 'custom' : 'none';\n @AttachInternals() internals!: ElementInternals;\n @Element() host!: HTMLElement;\n @Prop() name: string = 'location';\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-location-component', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n @Watch('eventLocation')\n eventLocationChangedHandler(newValue: string, oldValue: string) {\n debug('nylas-location-component', 'eventLocationChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n this.selectedLocationOption = newValue ? 'custom' : 'none';\n }\n\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-location-component', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-location-component', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-location-component', 'componentDidLoad');\n }\n\n disconnectedCallback() {\n debug('nylas-location-component', 'disconnectedCallback');\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string }>) {\n this.selectedLocationOption = event.detail.value;\n if (this.selectedLocationOption === 'none') {\n this.location = '';\n this.setFormValue('', 'location');\n this.valueChanged.emit({ value: '', name: this.name });\n }\n }\n\n setFormValue(value: string, name: string) {\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(value, name);\n }\n }\n\n handleChange(event) {\n this.location = event.target.value;\n this.setFormValue(event.target.value, 'location');\n this.valueChanged.emit({ value: event.target.value, name: this.name });\n }\n\n @RegisterComponent<NylasLocationComponent, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-location-component',\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const locationOptions = [\n { value: 'none', label: 'None' },\n { value: 'custom', label: 'Custom location' },\n ];\n const icons = {\n none: <location-off-icon />,\n custom: <location-icon />,\n };\n\n return (\n <Host>\n <div class=\"nylas-event-location\" part=\"nel\">\n <label htmlFor=\"location\">\n Location type\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Choose how you’ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.\n </span>\n </tooltip-component>\n </span>\n </label>\n <div class=\"location-input\">\n <select-dropdown\n withSearch={false}\n name=\"location\"\n options={locationOptions}\n defaultSelectedOption={locationOptions.find(i => i.value == this.selectedLocationOption)}\n exportparts=\"sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content\"\n >\n <span slot=\"select-icon\">{icons[this.selectedLocationOption]}</span>\n </select-dropdown>\n {this.selectedLocationOption === 'custom' && (\n <input type=\"text\" part=\"nel__location\" id=\"location\" name=\"location\" maxlength=\"1024\" value={this.location} onInput={e => this.handleChange(e)} />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-location-component2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-location-component/nylas-location-component.scss?tag=nylas-location-component&encapsulation=shadow","src/components/scheduler-editor/nylas-location-component/nylas-location-component.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n @include default-css-variables;\n}\n\n.nylas-event-location {\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 16px;\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 span[slot='select-icon'] {\n border-right: 1px solid var(--nylas-base-200);\n padding: 16px 0.75rem 16px 0.5rem;\n border-radius: var(--nylas-border-radius-2x);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n height: 20px;\n }\n div.location-input {\n display: grid;\n grid-template-columns: auto 1fr;\n width: 100%;\n gap: 0.5rem;\n input {\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 12px 16px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n select-dropdown {\n width: 208px;\n @media #{$mobile} {\n width: 100%;\n }\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-content) {\n left: calc(35px + 0.5rem);\n }\n select-dropdown::part(sd_dropdown-button) {\n display: flex;\n justify-content: space-between;\n width: 100%;\n border: 1px solid var(--nylas-base-200);\n padding: 0 0.5rem;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n display: inline-flex;\n align-self: center;\n padding: 14px 0;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\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';\nimport { Configuration } from '@nylas/core';\n\n/\n The `nylas-location-component` component is a form input for the description of an event.\n * @part nel - The event location container\n * @part nel__location - The event location input\n * @part nel__dropdown - The dropdown container\n * @part nel__dropdown-button - The dropdown button\n * @part nel__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-location-component',\n styleUrl: 'nylas-location-component.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasLocationComponent {\n /\n The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n\n @Prop() eventLocation?: string;\n @State() location: string = this.eventLocation ?? '';\n @State() selectedLocationOption: string = this.eventLocation ? 'custom' : 'none';\n @AttachInternals() internals!: ElementInternals;\n @Element() host!: HTMLElement;\n @Prop() name: string = 'location';\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-location-component', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration, oldValue: Configuration) {\n debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);\n const configLocation = newValue?.event_booking?.location;\n if (configLocation) {\n this.selectedLocationOption = configLocation ? 'custom' : 'none';\n this.location = configLocation;\n }\n }\n\n @Watch('eventLocation')\n eventLocationChangedHandler(newValue: string, oldValue: string) {\n debug('nylas-location-component', 'eventLocationChangedHandler', newValue);\n if (newValue === oldValue) {\n return;\n }\n this.selectedLocationOption = newValue ? 'custom' : 'none';\n }\n\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-location-component', 'connectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-location-component', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-location-component', 'componentDidLoad');\n }\n\n disconnectedCallback() {\n debug('nylas-location-component', 'disconnectedCallback');\n }\n\n @Listen('selectedOptionChanged')\n selectedOptionChangedHandler(event: CustomEvent<{ value: string }>) {\n this.selectedLocationOption = event.detail.value;\n if (this.selectedLocationOption === 'none') {\n this.location = '';\n this.setFormValue('', 'location');\n this.valueChanged.emit({ value: '', name: this.name });\n }\n }\n\n setFormValue(value: string, name: string) {\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(value, name);\n }\n }\n\n handleChange(event) {\n this.location = event.target.value;\n this.setFormValue(event.target.value, 'location');\n this.valueChanged.emit({ value: event.target.value, name: this.name });\n }\n\n @RegisterComponent<NylasLocationComponent, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-location-component',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const locationOptions = [\n { value: 'none', label: 'None' },\n { value: 'custom', label: 'Custom location' },\n ];\n const icons = {\n none: <location-off-icon />,\n custom: <location-icon />,\n };\n\n return (\n <Host>\n <div class=\"nylas-event-location\" part=\"nel\">\n <label htmlFor=\"location\">\n Location type\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Choose how you’ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.\n </span>\n </tooltip-component>\n </span>\n </label>\n <div class=\"location-input\">\n <select-dropdown\n withSearch={false}\n name=\"location\"\n options={locationOptions}\n defaultSelectedOption={locationOptions.find(i => i.value == this.selectedLocationOption)}\n exportparts=\"sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content\"\n >\n <span slot=\"select-icon\">{icons[this.selectedLocationOption]}</span>\n </select-dropdown>\n {this.selectedLocationOption === 'custom' && (\n <input type=\"text\" part=\"nel__location\" id=\"location\" name=\"location\" maxlength=\"1024\" value={this.location} onInput={e => this.handleChange(e)} />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-login.js CHANGED Viewed

@@ -76,7 +76,7 @@ const NylasLogin$1 = proxyCustomElement(class NylasLogin extends HTMLElement {
     }
     render() {
         const splitProviders = this.providers?.split(',') || [];
-        return (h(Host, { key: 'bff99d93c49f3a70e4e8f28ea97082853af37be0' }, this.loginMethod === 'redirect' && (h("div", { class: "redirect-container" }, !this.isAuthenticated && (h("sp-button", { part: "button", onClick: this._handleLoginRedirect }, this.buttonText)))), this.loginMethod === 'emebded' && (h("main", { class: "login-container" }, h("section", { class: "login-box" }, h("header", null, h("img", { src: this.logoUrl, alt: `${this.companyName} logo`, width: '100%', style: {
+        return (h(Host, { key: '124b2f41ebcd01e13b0c031a1240120835610fbb' }, this.loginMethod === 'redirect' && (h("div", { class: "redirect-container" }, !this.isAuthenticated && (h("sp-button", { part: "button", onClick: this._handleLoginRedirect }, this.buttonText)))), this.loginMethod === 'emebded' && (h("main", { class: "login-container" }, h("section", { class: "login-box" }, h("header", null, h("img", { src: this.logoUrl, alt: `${this.companyName} logo`, width: '100%', style: {
                 minWidth: this.logoWidth,
             } }), h("h1", null, "Welcome")), h("p", null, "Log in to your account to continue to ", this.companyName), h("div", { class: "login-methods" }, splitProviders.includes('google') && (h("button", { class: "login-google", onClick: this._onGoogleButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 256 262" }, h("path", { fill: "#4285F4", d: "M255.6 131.6c0-8.2-.8-16.2-2.2-23.9H130v45.3h70.3c-3 16.1-12.4 29.7-26.3 38.9v32.4h42.6c25-23 39.4-56.7 39.4-97.7z" }), h("path", { fill: "#34A853", d: "M130 262c35.3 0 64.9-11.7 86.5-31.7l-42.6-32.4c-11.7 7.9-26.7 12.6-43.9 12.6-33.7 0-62.3-22.7-72.5-53.4H14.5v33.3A130.3 130.3 0 00130 262z" }), h("path", { fill: "#FBBC05", d: "M57.5 158.1a72.7 72.7 0 010-54.2V70.6H14.5a130.4 130.4 0 000 120.8l43-33.3z" }), h("path", { fill: "#EA4335", d: "M130 51.6c19 0 36 6.5 49.4 19.2l37-36C195 13.1 165.2 0 130 0A130.3 130.3 0 0014.5 70.6l43 33.3c10.2-30.7 38.8-53.3 72.5-53.3z" })), "Continue with Google")), splitProviders.includes('microsoft') && (h("button", { class: "login-microsoft", onClick: this._onMicrosoftButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 448 512" }, h("path", { fill: "#F3F3F3", d: "M0 32v192h192V32H0zm256 0v192h192V32H256zm192 256v192h-192V288h192zM0 224v192h192V224H0z" })), "Continue with Microsoft"))), h("form", { class: "login-form", method: "POST", onSubmit: this._onFormSubmit }, h("label", { htmlFor: "email" }, "Email"), h("input", { type: "email", id: "email", name: "email", required: true, value: this.email }), h("button", { type: "submit" }, "Next")))))));
     }
@@ -117,7 +117,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1(NylasLogin$1);
 const NylasLogin = NylasLogin$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-login.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-login.js","mappings":"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","names":["NylasLogin"],"sources":["src/components/nylas-login/nylas-login.css?tag=nylas-login&encapsulation=shadow","src/components/nylas-login/nylas-login.tsx"],"sourcesContent":[":host {\n font-family: 'Arial', sans-serif;\n background: var(--nylas-color-primary-50); /* Closest to #f0f0f0 /\n color: var(--nylas-color-primary-800); / Closest to #333 /\n margin: 0;\n display: contents;\n}\n\ninput {\n box-sizing: border-box;\n}\n\n.login-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.login-box {\n width: 300px;\n padding: 20px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n border-radius: var(--nylas-border-radius-2x);\n background: var(--nylas-color-primary-50); / Assuming white background /\n text-align: center;\n}\n\n.login-box h1 {\n margin-top: 0;\n margin-bottom: 0.5em;\n}\n\n.login-box p {\n margin-bottom: 1em;\n}\n\n.login-methods button {\n display: block;\n width: 100%;\n padding: 10px 10px 10px 50px;\n margin-bottom: 10px;\n border: none;\n border-radius: var(--nylas-border-radius);\n border: 1px solid var(--nylas-color-primary-300); / Closest to #b1b1b1 /\n background: var(--nylas-color-primary-100); / Closest to #f1f1f1 /\n color: var(--nylas-color-primary-600); / Closest to #5f6368 /\n cursor: pointer;\n transition: background 0.3s ease;\n position: relative;\n text-align: left;\n}\n\n.login-methods button svg {\n position: absolute;\n left: 16px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.login-methods button:hover {\n background: var(--nylas-color-primary-200); / Closest to #e2e2e2 /\n}\n\n.login-form label {\n display: block;\n margin-bottom: 5px;\n text-align: left;\n}\n\n.login-form input {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n border: 1px solid var(--nylas-color-primary-200); / Closest to #ddd /\n border-radius: var(--nylas-border-radius);\n background: var(--nylas-color-primary-100); / Closest to #f1f1f1 /\n color: var(--nylas-color-primary-800); / Closest to #333 /\n}\n\n.login-form button {\n width: 100%;\n padding: 10px;\n border: none;\n border-radius: var(--nylas-border-radius);\n background: var(--nylas-color-primary-500); / Closest to #007bff /\n color: var(--nylas-color-primary-50); / Assuming white text /\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\n.login-form button:hover {\n background: var(--nylas-color-primary-600); / Closest to #0056b3 /\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasAuthConnectorInterface } from '@/connector/connector-interface';\nimport { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { ObservableMap } from '@stencil/store';\nimport { NylasAuthStoreState } from '../../components';\n\n@Component({\n tag: 'nylas-login',\n styleUrl: 'nylas-login.css',\n shadow: true,\n})\nexport class NylasLogin {\n @Prop() readonly isAuthenticated: boolean = false;\n @Prop() readonly nylasConnector?: NylasAuthConnectorInterface;\n @Prop() readonly scopes?: string[];\n @Prop() readonly loginMethod: 'redirect' \| 'emebded' = 'redirect';\n @Prop() readonly companyName: string = 'Nylas';\n @Prop() readonly logoUrl: string = 'https://www.nylas.com/wp-content/uploads/main-logo.svg';\n @Prop() readonly logoWidth?: string = 'min-content';\n @Prop() readonly providers?: string = 'google,microsoft';\n @Prop() readonly buttonText: string = 'Login';\n\n @Event() buttonClick!: EventEmitter<{ url?: string }>;\n\n @State() email: string = '';\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n componentWillLoad() {}\n\n async componentDidLoad() {\n const exchangedToken = await this.nylasConnector?.auth.manageHostedAuthCodeExchange(window.location.href);\n if (exchangedToken) {\n // Remove the code query param from the user's browser url\n window.history.replaceState({}, document.title, window.location.pathname);\n }\n }\n\n private _handleLoginRedirect = async () => {\n const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes);\n\n const event = this.buttonClick.emit({ url });\n if (event.defaultPrevented) {\n return;\n }\n\n if (url) {\n window.location.href = url;\n }\n };\n\n private _onGoogleButtonClick = async (event: Event) => {\n // Prevent the form from submitting\n event.preventDefault();\n\n const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes, undefined, 'google');\n if (url) {\n window.location.href = url;\n }\n };\n\n private _onMicrosoftButtonClick = async (event: Event) => {\n // Prevent the form from submitting\n event.preventDefault();\n\n const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes, undefined, 'microsoft');\n if (url) {\n window.location.href = url;\n }\n };\n\n private _onFormSubmit = async (event: Event) => {\n // Prevent the form from submitting\n event.preventDefault();\n\n const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes, this.email);\n if (url) {\n window.location.href = url;\n }\n };\n\n @RegisterComponent<\n NylasLogin,\n NylasAuthConnectorInterface,\n {\n auth: ObservableMap<NylasAuthStoreState>;\n }\n >({\n name: 'nylas-login',\n connectorToProp: 'nylasConnector',\n stateToProps: new Map([['auth.isAuthenticated', 'isAuthenticated']]),\n fireRegisterEvent: true,\n })\n render() {\n const splitProviders = this.providers?.split(',') \|\| [];\n return (\n <Host>\n {this.loginMethod === 'redirect' && (\n <div class=\"redirect-container\">\n {!this.isAuthenticated && (\n <sp-button part=\"button\" onClick={this._handleLoginRedirect}>\n {this.buttonText}\n </sp-button>\n )}\n </div>\n )}\n {this.loginMethod === 'emebded' && (\n <main class=\"login-container\">\n <section class=\"login-box\">\n <header>\n <img\n src={this.logoUrl}\n alt={`${this.companyName} logo`}\n width={'100%'}\n style={{\n minWidth: this.logoWidth,\n }}\n />\n <h1>Welcome</h1>\n </header>\n <p>Log in to your account to continue to {this.companyName}</p>\n <div class=\"login-methods\">\n {splitProviders.includes('google') && (\n <button class=\"login-google\" onClick={this._onGoogleButtonClick}>\n <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"18\" height=\"18\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 256 262\">\n <path fill=\"#4285F4\" d=\"M255.6 131.6c0-8.2-.8-16.2-2.2-23.9H130v45.3h70.3c-3 16.1-12.4 29.7-26.3 38.9v32.4h42.6c25-23 39.4-56.7 39.4-97.7z\" />\n <path\n fill=\"#34A853\"\n d=\"M130 262c35.3 0 64.9-11.7 86.5-31.7l-42.6-32.4c-11.7 7.9-26.7 12.6-43.9 12.6-33.7 0-62.3-22.7-72.5-53.4H14.5v33.3A130.3 130.3 0 00130 262z\"\n />\n <path fill=\"#FBBC05\" d=\"M57.5 158.1a72.7 72.7 0 010-54.2V70.6H14.5a130.4 130.4 0 000 120.8l43-33.3z\" />\n <path fill=\"#EA4335\" d=\"M130 51.6c19 0 36 6.5 49.4 19.2l37-36C195 13.1 165.2 0 130 0A130.3 130.3 0 0014.5 70.6l43 33.3c10.2-30.7 38.8-53.3 72.5-53.3z\" />\n </svg>\n Continue with Google\n </button>\n )}\n {splitProviders.includes('microsoft') && (\n <button class=\"login-microsoft\" onClick={this._onMicrosoftButtonClick}>\n <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"18\" height=\"18\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 448 512\">\n <path fill=\"#F3F3F3\" d=\"M0 32v192h192V32H0zm256 0v192h192V32H256zm192 256v192h-192V288h192zM0 224v192h192V224H0z\" />\n </svg>\n Continue with Microsoft\n </button>\n )}\n {/ <button class=\"login-all\">View all providers</button> */}\n </div>\n <form class=\"login-form\" method=\"POST\" onSubmit={this._onFormSubmit}>\n <label htmlFor=\"email\">Email</label>\n <input type=\"email\" id=\"email\" name=\"email\" required value={this.email} />\n <button type=\"submit\">Next</button>\n </form>\n </section>\n </main>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-login.js","mappings":"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","names":["NylasLogin"],"sources":["src/components/nylas-login/nylas-login.css?tag=nylas-login&encapsulation=shadow","src/components/nylas-login/nylas-login.tsx"],"sourcesContent":[":host {\n font-family: 'Arial', sans-serif;\n background: var(--nylas-color-primary-50); /* Closest to #f0f0f0 /\n color: var(--nylas-color-primary-800); / Closest to #333 /\n margin: 0;\n display: contents;\n}\n\ninput {\n box-sizing: border-box;\n}\n\n.login-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.login-box {\n width: 300px;\n padding: 20px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n border-radius: var(--nylas-border-radius-2x);\n background: var(--nylas-color-primary-50); / Assuming white background /\n text-align: center;\n}\n\n.login-box h1 {\n margin-top: 0;\n margin-bottom: 0.5em;\n}\n\n.login-box p {\n margin-bottom: 1em;\n}\n\n.login-methods button {\n display: block;\n width: 100%;\n padding: 10px 10px 10px 50px;\n margin-bottom: 10px;\n border: none;\n border-radius: var(--nylas-border-radius);\n border: 1px solid var(--nylas-color-primary-300); / Closest to #b1b1b1 /\n background: var(--nylas-color-primary-100); / Closest to #f1f1f1 /\n color: var(--nylas-color-primary-600); / Closest to #5f6368 /\n cursor: pointer;\n transition: background 0.3s ease;\n position: relative;\n text-align: left;\n}\n\n.login-methods button svg {\n position: absolute;\n left: 16px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.login-methods button:hover {\n background: var(--nylas-color-primary-200); / Closest to #e2e2e2 /\n}\n\n.login-form label {\n display: block;\n margin-bottom: 5px;\n text-align: left;\n}\n\n.login-form input {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n border: 1px solid var(--nylas-color-primary-200); / Closest to #ddd /\n border-radius: var(--nylas-border-radius);\n background: var(--nylas-color-primary-100); / Closest to #f1f1f1 /\n color: var(--nylas-color-primary-800); / Closest to #333 /\n}\n\n.login-form button {\n width: 100%;\n padding: 10px;\n border: none;\n border-radius: var(--nylas-border-radius);\n background: var(--nylas-color-primary-500); / Closest to #007bff /\n color: var(--nylas-color-primary-50); / Assuming white text /\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\n.login-form button:hover {\n background: var(--nylas-color-primary-600); / Closest to #0056b3 /\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasAuthConnectorInterface } from '@/connector/connector-interface';\nimport { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { ObservableMap } from '@stencil/store';\nimport { NylasAuthStoreState } from '../../components';\n\n@Component({\n tag: 'nylas-login',\n styleUrl: 'nylas-login.css',\n shadow: true,\n})\nexport class NylasLogin {\n @Prop() readonly isAuthenticated: boolean = false;\n @Prop() readonly nylasConnector?: NylasAuthConnectorInterface;\n @Prop() readonly scopes?: string[];\n @Prop() readonly loginMethod: 'redirect' \| 'emebded' = 'redirect';\n @Prop() readonly companyName: string = 'Nylas';\n @Prop() readonly logoUrl: string = 'https://www.nylas.com/wp-content/uploads/main-logo.svg';\n @Prop() readonly logoWidth?: string = 'min-content';\n @Prop() readonly providers?: string = 'google,microsoft';\n @Prop() readonly buttonText: string = 'Login';\n\n @Event() buttonClick!: EventEmitter<{ url?: string }>;\n\n @State() email: string = '';\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n componentWillLoad() {}\n\n async componentDidLoad() {\n const exchangedToken = await this.nylasConnector?.auth.manageHostedAuthCodeExchange(window.location.href);\n if (exchangedToken) {\n // Remove the code query param from the user's browser url\n window.history.replaceState({}, document.title, window.location.pathname);\n }\n }\n\n private _handleLoginRedirect = async () => {\n const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes);\n\n const event = this.buttonClick.emit({ url });\n if (event.defaultPrevented) {\n return;\n }\n\n if (url) {\n window.location.href = url;\n }\n };\n\n private _onGoogleButtonClick = async (event: Event) => {\n // Prevent the form from submitting\n event.preventDefault();\n\n const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes, undefined, 'google');\n if (url) {\n window.location.href = url;\n }\n };\n\n private _onMicrosoftButtonClick = async (event: Event) => {\n // Prevent the form from submitting\n event.preventDefault();\n\n const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes, undefined, 'microsoft');\n if (url) {\n window.location.href = url;\n }\n };\n\n private _onFormSubmit = async (event: Event) => {\n // Prevent the form from submitting\n event.preventDefault();\n\n const url = await this.nylasConnector?.auth.getHostedAuthRedirectURL(this.scopes, this.email);\n if (url) {\n window.location.href = url;\n }\n };\n\n @RegisterComponent<\n NylasLogin,\n NylasAuthConnectorInterface,\n {\n auth: ObservableMap<NylasAuthStoreState>;\n }\n >({\n name: 'nylas-login',\n connectorToProp: 'nylasConnector',\n stateToProps: new Map([['auth.isAuthenticated', 'isAuthenticated']]),\n fireRegisterEvent: true,\n })\n render() {\n const splitProviders = this.providers?.split(',') \|\| [];\n return (\n <Host>\n {this.loginMethod === 'redirect' && (\n <div class=\"redirect-container\">\n {!this.isAuthenticated && (\n <sp-button part=\"button\" onClick={this._handleLoginRedirect}>\n {this.buttonText}\n </sp-button>\n )}\n </div>\n )}\n {this.loginMethod === 'emebded' && (\n <main class=\"login-container\">\n <section class=\"login-box\">\n <header>\n <img\n src={this.logoUrl}\n alt={`${this.companyName} logo`}\n width={'100%'}\n style={{\n minWidth: this.logoWidth,\n }}\n />\n <h1>Welcome</h1>\n </header>\n <p>Log in to your account to continue to {this.companyName}</p>\n <div class=\"login-methods\">\n {splitProviders.includes('google') && (\n <button class=\"login-google\" onClick={this._onGoogleButtonClick}>\n <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"18\" height=\"18\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 256 262\">\n <path fill=\"#4285F4\" d=\"M255.6 131.6c0-8.2-.8-16.2-2.2-23.9H130v45.3h70.3c-3 16.1-12.4 29.7-26.3 38.9v32.4h42.6c25-23 39.4-56.7 39.4-97.7z\" />\n <path\n fill=\"#34A853\"\n d=\"M130 262c35.3 0 64.9-11.7 86.5-31.7l-42.6-32.4c-11.7 7.9-26.7 12.6-43.9 12.6-33.7 0-62.3-22.7-72.5-53.4H14.5v33.3A130.3 130.3 0 00130 262z\"\n />\n <path fill=\"#FBBC05\" d=\"M57.5 158.1a72.7 72.7 0 010-54.2V70.6H14.5a130.4 130.4 0 000 120.8l43-33.3z\" />\n <path fill=\"#EA4335\" d=\"M130 51.6c19 0 36 6.5 49.4 19.2l37-36C195 13.1 165.2 0 130 0A130.3 130.3 0 0014.5 70.6l43 33.3c10.2-30.7 38.8-53.3 72.5-53.3z\" />\n </svg>\n Continue with Google\n </button>\n )}\n {splitProviders.includes('microsoft') && (\n <button class=\"login-microsoft\" onClick={this._onMicrosoftButtonClick}>\n <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"18\" height=\"18\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 448 512\">\n <path fill=\"#F3F3F3\" d=\"M0 32v192h192V32H0zm256 0v192h192V32H256zm192 256v192h-192V288h192zM0 224v192h192V224H0z\" />\n </svg>\n Continue with Microsoft\n </button>\n )}\n {/ <button class=\"login-all\">View all providers</button> */}\n </div>\n <form class=\"login-form\" method=\"POST\" onSubmit={this._onFormSubmit}>\n <label htmlFor=\"email\">Email</label>\n <input type=\"email\" id=\"email\" name=\"email\" required value={this.email} />\n <button type=\"submit\">Next</button>\n </form>\n </section>\n </main>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-logo2.js CHANGED Viewed

@@ -10,7 +10,7 @@ const NylasLogo = proxyCustomElement(class NylasLogo extends HTMLElement {
         this.height = '24';
     }
     render() {
-        return (h("svg", { key: 'a305694aba91cff6d13167eab106e824536728cd', width: this.width, height: this.height, viewBox: "0 0 69 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '790edf0bee99fea0fe2cef131ed9a3340ff1ec70', "clip-path": "url(#clip0_455_3543)" }, h("path", { key: 'bd29c1fe02931e4a6dceee45711ef6c212164d77', d: "M15.8092 3.03248C14.6497 1.86996 13.1076 1.23047 11.4646 1.23047C9.82156 1.23047 8.27753 1.86996 7.11999 3.03248L0.835347 9.33381C0.686846 9.4827 0.60498 9.68123 0.60498 9.89312C0.60498 10.105 0.686846 10.3035 0.835347 10.4524C0.983848 10.6013 1.18185 10.6834 1.39318 10.6834C1.60451 10.6834 1.80251 10.6013 1.95101 10.4524L8.23374 4.15111C10.0139 2.36627 12.9134 2.36627 14.6935 4.15111C16.4736 5.93785 16.4756 8.84322 14.6935 10.6281L8.4108 16.9275C8.10428 17.2348 8.10428 17.7368 8.4108 18.0461C8.5593 18.195 8.75731 18.2771 8.96863 18.2771C9.17996 18.2771 9.37796 18.195 9.52646 18.0461L15.8092 11.7467C16.9687 10.5841 17.6064 9.03793 17.6064 7.39053C17.6064 5.74314 16.9687 4.19501 15.8092 3.03439V3.03248Z", fill: "currentColor" }), h("path", { key: '6ad33f3a2c1524777ef9f33d8fccdefa87c6c4de', d: "M14.9296 7.39038C14.9296 6.46074 14.5698 5.58837 13.9148 4.93361C12.5631 3.57828 10.3641 3.57828 9.01239 4.93361L0.663961 13.3023C0.51546 13.4512 0.433594 13.6497 0.433594 13.8616C0.433594 14.0735 0.51546 14.272 0.663961 14.4209C0.812462 14.5698 1.01046 14.6519 1.22179 14.6519C1.43312 14.6519 1.63112 14.5698 1.77962 14.4209L10.0367 6.1515L10.05 6.13623C10.0747 6.10759 10.1014 6.07705 10.128 6.05033C10.1585 6.01978 10.1928 5.99115 10.2251 5.96252L10.2442 5.94534C10.9886 5.31349 12.1119 5.3593 12.8011 6.05033C13.4903 6.74135 13.536 7.78171 12.9705 8.53192L12.9648 8.53955C12.9058 8.61591 12.8544 8.67699 12.8011 8.73044C12.7497 8.78198 12.6906 8.83352 12.6069 8.90033L4.45264 17.0991C4.30414 17.248 4.22227 17.4465 4.22227 17.6584C4.22227 17.8703 4.30414 18.0689 4.45264 18.2177C4.60114 18.3666 4.79914 18.4487 5.01047 18.4487C5.2218 18.4487 5.4198 18.3666 5.5683 18.2177L13.9167 9.84716C14.5698 9.1924 14.9315 8.31812 14.9315 7.39038H14.9296Z", fill: "currentColor" }), h("path", { key: 'cff70a4c9e84c0c16cbbc8f3a1e9432200e2f6c7', d: "M10.6821 9.11238C10.4727 9.01694 10.2861 8.88904 10.1281 8.7306C9.97008 8.57216 9.84252 8.38508 9.74733 8.1751L9.69021 8.05103L0.467916 17.2978C0.287049 17.4792 0.174721 17.7082 0.149971 17.9411C0.125221 18.1778 0.19376 18.3897 0.344165 18.5405C0.471724 18.6684 0.65259 18.739 0.850592 18.739C1.11142 18.739 1.37796 18.6207 1.58358 18.4145L10.8059 9.16774L10.6821 9.11047V9.11238Z", fill: "currentColor" }), h("path", { key: 'f8deff8d4ba7374b51cd83e2dd01d58b75cc751a', d: "M68.401 10.6185C68.2126 10.2692 67.9593 9.97334 67.6433 9.73854C67.3235 9.49993 66.956 9.31094 66.5486 9.17541C66.1316 9.03606 65.7033 8.91771 65.2749 8.81844C64.7951 8.70582 64.3039 8.57983 63.8165 8.44811C63.3196 8.31258 62.9065 8.14269 62.5905 7.94225C62.4743 7.88689 62.3391 7.76663 62.3391 7.50129C62.3391 7.39821 62.3639 7.29704 62.4153 7.19587L62.4248 7.18059C62.5352 7.02216 62.7142 6.8828 62.975 6.75109C63.234 6.62128 63.609 6.55829 64.1231 6.55829C64.5286 6.55829 64.877 6.61365 65.1569 6.72436C65.4348 6.83508 65.6652 6.96871 65.8442 7.12524C66.0212 7.27986 66.1659 7.45357 66.2782 7.63873C66.3563 7.76854 66.4267 7.89262 66.4858 8.00525L68.2754 6.84081C68.1669 6.59456 68.0146 6.33495 67.8204 6.0677C67.6033 5.768 67.3254 5.4893 66.9922 5.23732C66.659 4.98534 66.2516 4.77345 65.7813 4.60929C65.3111 4.44512 64.7532 4.36304 64.1231 4.36304C63.3844 4.36304 62.7599 4.46421 62.2706 4.66083C61.7813 4.85935 61.3815 5.09988 61.0845 5.37667C60.7875 5.65346 60.5628 5.95125 60.4143 6.2605C60.2639 6.57547 60.1611 6.85799 60.1078 7.10233C60.0945 7.18059 60.0812 7.27031 60.0678 7.36767C60.0545 7.4593 60.0469 7.5452 60.0469 7.62537C60.0469 8.13314 60.1745 8.56074 60.4239 8.89671C60.679 9.24222 61.0045 9.53429 61.391 9.76336C61.7813 9.99624 62.2116 10.1852 62.6704 10.3227C63.1388 10.462 63.5862 10.5823 64.0012 10.6796C64.4067 10.777 64.7932 10.8782 65.1531 10.9774C65.5224 11.0786 65.8289 11.2122 66.0631 11.3745C66.2801 11.5425 66.3887 11.7448 66.3887 11.9777C66.3887 12.2278 66.2916 12.4263 66.0993 12.5695C65.9279 12.6954 65.7261 12.7985 65.4958 12.8711C65.273 12.9436 65.0407 12.9913 64.8066 13.0142C64.58 13.0352 64.3915 13.0467 64.2468 13.0467C63.8032 13.0467 63.4224 13.0028 63.1197 12.915C62.8151 12.8272 62.5638 12.7241 62.3734 12.6057C62.1811 12.4874 62.0288 12.3614 61.9222 12.2316C61.8213 12.1094 61.747 12.0082 61.7014 11.9319L61.4957 11.6303L59.708 12.7928C59.8508 13.0161 60.0298 13.2643 60.2392 13.5296C60.4772 13.8293 60.7837 14.1138 61.153 14.3734C61.5224 14.633 61.966 14.8525 62.4724 15.0243C62.9788 15.1961 63.5748 15.282 64.2468 15.282C64.797 15.282 65.2901 15.2324 65.7166 15.137C66.1412 15.0396 66.5162 14.9117 66.8285 14.7552C67.1388 14.6005 67.4015 14.4192 67.6109 14.2149C67.8223 14.0107 67.9974 13.8026 68.1326 13.6003C68.4563 13.1135 68.6409 12.5504 68.6828 11.9262C68.6828 11.4069 68.5876 10.9641 68.401 10.6166V10.6185Z", fill: "currentColor" }), h("path", { key: '0cc0f9ff674f031b72ebff2b4b4642f678a74a08', d: "M26.3585 4.27905C23.7901 4.27905 21.6997 6.37504 21.6997 8.95017V15.0701H23.9291V8.95017C23.9291 7.6082 25.0181 6.5163 26.3565 6.5163C27.695 6.5163 28.784 7.6082 28.784 8.95017V15.0701H31.0134V8.95017C31.0134 6.37504 28.9229 4.27905 26.3546 4.27905H26.3585Z", fill: "currentColor" }), h("path", { key: 'fbc997ce655d72115a3f091a0c3df101d4311842', d: "M53.4522 4.27905C50.4251 4.27905 47.9634 6.74728 47.9634 9.78245C47.9634 12.8176 50.427 15.2859 53.4522 15.2859C54.5545 15.2859 55.6188 14.9594 56.5288 14.3409L56.7116 14.2169V15.0682H58.941V9.78245C58.941 6.74728 56.4793 4.27905 53.4522 4.27905ZM53.4522 13.0505C51.655 13.0505 50.1928 11.5845 50.1928 9.78245C50.1928 7.98044 51.655 6.51439 53.4522 6.51439C55.2494 6.51439 56.7116 7.98044 56.7116 9.78245C56.7116 11.5845 55.2494 13.0505 53.4522 13.0505Z", fill: "currentColor" }), h("path", { key: '1000a3c24e6495f474df5ffc6af307466f4c6fb6', d: "M45.5795 10.6166V0.356201H43.3501V10.6166C43.3501 13.1517 45.3758 15.2228 47.8908 15.2858V13.0486C46.6057 12.9875 45.5795 11.9204 45.5795 10.6166Z", fill: "currentColor" }), h("path", { key: '048a76e10c0489b5361747c3ff711e0c771071fc', d: "M39.5428 4.4967V10.63C39.5428 11.6761 38.8669 12.621 37.9016 12.9284C37.1249 13.1746 36.3157 13.0486 35.6817 12.5829C35.0592 12.1247 34.6879 11.3917 34.6879 10.6186V4.4967H32.4585V10.5995C32.4585 12.7165 33.8388 14.57 35.8131 15.1084C37.0354 15.4424 38.2995 15.2973 39.3695 14.7037L39.5428 14.6063V14.9747C39.5428 16.2766 38.5166 17.3437 37.2315 17.4067V19.6439C39.7465 19.5809 41.7722 17.5117 41.7722 14.9747V4.4967H39.5428Z", fill: "currentColor" })), h("defs", { key: '2ecd1149d28e4b4d5d5fce2e3775933ae12a1983' }, h("clipPath", { key: 'b0b608b033eafd9eb2ada24432d379f539f725e3', id: "clip0_455_3543" }, h("rect", { key: '0277917a58837afc24f997ef1a66f8f415b9072e', width: "68.7123", height: "19.2877", fill: "white", transform: "translate(0.144043 0.356201)" })))));
+        return (h("svg", { key: '5aea87a70e3fd0d4db9231f986662a0e51d5225e', width: this.width, height: this.height, viewBox: "0 0 69 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '635ee7b2cff95d3949dc8a7aba5d7897ac42bec8', "clip-path": "url(#clip0_455_3543)" }, h("path", { key: '818b4ab1d5087f3dbd4b65ec92c46da729b7b034', d: "M15.8092 3.03248C14.6497 1.86996 13.1076 1.23047 11.4646 1.23047C9.82156 1.23047 8.27753 1.86996 7.11999 3.03248L0.835347 9.33381C0.686846 9.4827 0.60498 9.68123 0.60498 9.89312C0.60498 10.105 0.686846 10.3035 0.835347 10.4524C0.983848 10.6013 1.18185 10.6834 1.39318 10.6834C1.60451 10.6834 1.80251 10.6013 1.95101 10.4524L8.23374 4.15111C10.0139 2.36627 12.9134 2.36627 14.6935 4.15111C16.4736 5.93785 16.4756 8.84322 14.6935 10.6281L8.4108 16.9275C8.10428 17.2348 8.10428 17.7368 8.4108 18.0461C8.5593 18.195 8.75731 18.2771 8.96863 18.2771C9.17996 18.2771 9.37796 18.195 9.52646 18.0461L15.8092 11.7467C16.9687 10.5841 17.6064 9.03793 17.6064 7.39053C17.6064 5.74314 16.9687 4.19501 15.8092 3.03439V3.03248Z", fill: "currentColor" }), h("path", { key: '0519037016d40d4c264b929f042bffde6fcb4095', d: "M14.9296 7.39038C14.9296 6.46074 14.5698 5.58837 13.9148 4.93361C12.5631 3.57828 10.3641 3.57828 9.01239 4.93361L0.663961 13.3023C0.51546 13.4512 0.433594 13.6497 0.433594 13.8616C0.433594 14.0735 0.51546 14.272 0.663961 14.4209C0.812462 14.5698 1.01046 14.6519 1.22179 14.6519C1.43312 14.6519 1.63112 14.5698 1.77962 14.4209L10.0367 6.1515L10.05 6.13623C10.0747 6.10759 10.1014 6.07705 10.128 6.05033C10.1585 6.01978 10.1928 5.99115 10.2251 5.96252L10.2442 5.94534C10.9886 5.31349 12.1119 5.3593 12.8011 6.05033C13.4903 6.74135 13.536 7.78171 12.9705 8.53192L12.9648 8.53955C12.9058 8.61591 12.8544 8.67699 12.8011 8.73044C12.7497 8.78198 12.6906 8.83352 12.6069 8.90033L4.45264 17.0991C4.30414 17.248 4.22227 17.4465 4.22227 17.6584C4.22227 17.8703 4.30414 18.0689 4.45264 18.2177C4.60114 18.3666 4.79914 18.4487 5.01047 18.4487C5.2218 18.4487 5.4198 18.3666 5.5683 18.2177L13.9167 9.84716C14.5698 9.1924 14.9315 8.31812 14.9315 7.39038H14.9296Z", fill: "currentColor" }), h("path", { key: '10efd16fe4864b407bed8c54611001c6a0f5098f', d: "M10.6821 9.11238C10.4727 9.01694 10.2861 8.88904 10.1281 8.7306C9.97008 8.57216 9.84252 8.38508 9.74733 8.1751L9.69021 8.05103L0.467916 17.2978C0.287049 17.4792 0.174721 17.7082 0.149971 17.9411C0.125221 18.1778 0.19376 18.3897 0.344165 18.5405C0.471724 18.6684 0.65259 18.739 0.850592 18.739C1.11142 18.739 1.37796 18.6207 1.58358 18.4145L10.8059 9.16774L10.6821 9.11047V9.11238Z", fill: "currentColor" }), h("path", { key: '0282ae1035c07bd0f8af5c3530ce7ce799dc2dc1', d: "M68.401 10.6185C68.2126 10.2692 67.9593 9.97334 67.6433 9.73854C67.3235 9.49993 66.956 9.31094 66.5486 9.17541C66.1316 9.03606 65.7033 8.91771 65.2749 8.81844C64.7951 8.70582 64.3039 8.57983 63.8165 8.44811C63.3196 8.31258 62.9065 8.14269 62.5905 7.94225C62.4743 7.88689 62.3391 7.76663 62.3391 7.50129C62.3391 7.39821 62.3639 7.29704 62.4153 7.19587L62.4248 7.18059C62.5352 7.02216 62.7142 6.8828 62.975 6.75109C63.234 6.62128 63.609 6.55829 64.1231 6.55829C64.5286 6.55829 64.877 6.61365 65.1569 6.72436C65.4348 6.83508 65.6652 6.96871 65.8442 7.12524C66.0212 7.27986 66.1659 7.45357 66.2782 7.63873C66.3563 7.76854 66.4267 7.89262 66.4858 8.00525L68.2754 6.84081C68.1669 6.59456 68.0146 6.33495 67.8204 6.0677C67.6033 5.768 67.3254 5.4893 66.9922 5.23732C66.659 4.98534 66.2516 4.77345 65.7813 4.60929C65.3111 4.44512 64.7532 4.36304 64.1231 4.36304C63.3844 4.36304 62.7599 4.46421 62.2706 4.66083C61.7813 4.85935 61.3815 5.09988 61.0845 5.37667C60.7875 5.65346 60.5628 5.95125 60.4143 6.2605C60.2639 6.57547 60.1611 6.85799 60.1078 7.10233C60.0945 7.18059 60.0812 7.27031 60.0678 7.36767C60.0545 7.4593 60.0469 7.5452 60.0469 7.62537C60.0469 8.13314 60.1745 8.56074 60.4239 8.89671C60.679 9.24222 61.0045 9.53429 61.391 9.76336C61.7813 9.99624 62.2116 10.1852 62.6704 10.3227C63.1388 10.462 63.5862 10.5823 64.0012 10.6796C64.4067 10.777 64.7932 10.8782 65.1531 10.9774C65.5224 11.0786 65.8289 11.2122 66.0631 11.3745C66.2801 11.5425 66.3887 11.7448 66.3887 11.9777C66.3887 12.2278 66.2916 12.4263 66.0993 12.5695C65.9279 12.6954 65.7261 12.7985 65.4958 12.8711C65.273 12.9436 65.0407 12.9913 64.8066 13.0142C64.58 13.0352 64.3915 13.0467 64.2468 13.0467C63.8032 13.0467 63.4224 13.0028 63.1197 12.915C62.8151 12.8272 62.5638 12.7241 62.3734 12.6057C62.1811 12.4874 62.0288 12.3614 61.9222 12.2316C61.8213 12.1094 61.747 12.0082 61.7014 11.9319L61.4957 11.6303L59.708 12.7928C59.8508 13.0161 60.0298 13.2643 60.2392 13.5296C60.4772 13.8293 60.7837 14.1138 61.153 14.3734C61.5224 14.633 61.966 14.8525 62.4724 15.0243C62.9788 15.1961 63.5748 15.282 64.2468 15.282C64.797 15.282 65.2901 15.2324 65.7166 15.137C66.1412 15.0396 66.5162 14.9117 66.8285 14.7552C67.1388 14.6005 67.4015 14.4192 67.6109 14.2149C67.8223 14.0107 67.9974 13.8026 68.1326 13.6003C68.4563 13.1135 68.6409 12.5504 68.6828 11.9262C68.6828 11.4069 68.5876 10.9641 68.401 10.6166V10.6185Z", fill: "currentColor" }), h("path", { key: '16e1d732c5e6eee5f772d45085103b099c3130bf', d: "M26.3585 4.27905C23.7901 4.27905 21.6997 6.37504 21.6997 8.95017V15.0701H23.9291V8.95017C23.9291 7.6082 25.0181 6.5163 26.3565 6.5163C27.695 6.5163 28.784 7.6082 28.784 8.95017V15.0701H31.0134V8.95017C31.0134 6.37504 28.9229 4.27905 26.3546 4.27905H26.3585Z", fill: "currentColor" }), h("path", { key: '495550fe08ebeba1c89726b7009112e89088472a', d: "M53.4522 4.27905C50.4251 4.27905 47.9634 6.74728 47.9634 9.78245C47.9634 12.8176 50.427 15.2859 53.4522 15.2859C54.5545 15.2859 55.6188 14.9594 56.5288 14.3409L56.7116 14.2169V15.0682H58.941V9.78245C58.941 6.74728 56.4793 4.27905 53.4522 4.27905ZM53.4522 13.0505C51.655 13.0505 50.1928 11.5845 50.1928 9.78245C50.1928 7.98044 51.655 6.51439 53.4522 6.51439C55.2494 6.51439 56.7116 7.98044 56.7116 9.78245C56.7116 11.5845 55.2494 13.0505 53.4522 13.0505Z", fill: "currentColor" }), h("path", { key: 'effe06423b66ff0a533bfb8ec6d9a0cbbf19f765', d: "M45.5795 10.6166V0.356201H43.3501V10.6166C43.3501 13.1517 45.3758 15.2228 47.8908 15.2858V13.0486C46.6057 12.9875 45.5795 11.9204 45.5795 10.6166Z", fill: "currentColor" }), h("path", { key: '785098f3a2ac3a19e79056e355365fd8ccc81cd9', d: "M39.5428 4.4967V10.63C39.5428 11.6761 38.8669 12.621 37.9016 12.9284C37.1249 13.1746 36.3157 13.0486 35.6817 12.5829C35.0592 12.1247 34.6879 11.3917 34.6879 10.6186V4.4967H32.4585V10.5995C32.4585 12.7165 33.8388 14.57 35.8131 15.1084C37.0354 15.4424 38.2995 15.2973 39.3695 14.7037L39.5428 14.6063V14.9747C39.5428 16.2766 38.5166 17.3437 37.2315 17.4067V19.6439C39.7465 19.5809 41.7722 17.5117 41.7722 14.9747V4.4967H39.5428Z", fill: "currentColor" })), h("defs", { key: '9466fc6ad025006936d16136c6f4be4b79282759' }, h("clipPath", { key: '901a3ef6048680de4ddbdd8e3fd8edfbb7afc0f3', id: "clip0_455_3543" }, h("rect", { key: 'aee5f90208b83c446e4ac3877ce788d0dcad0de3', width: "68.7123", height: "19.2877", fill: "white", transform: "translate(0.144043 0.356201)" })))));
     }
     static get style() { return iconCss; }
 }, [2, "nylas-logo", {
@@ -30,7 +30,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasLogo);
 export { NylasLogo as N, defineCustomElement as d };