npm - @nylas/web-elements - Versions diffs - 1.1.0-canary.19.c → 1.1.0-canary.19.d - Mend

@nylas/web-elements 1.1.0-canary.19.c → 1.1.0-canary.19.d

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

package/dist/collection/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.js CHANGED Viewed

@@ -298,7 +298,7 @@ export class NylasAvailabilityPicker {
             label: TIMEZONE_MAP[key],
             value: key,
         }));
-        return (h(Host, { key: 'bb0a4148b2d9728d7a2a9fdab8359382dd1ae5d5' }, h("div", { key: '27c5e85931d318e6ec66a155faa78e021b570f70', class: "nylas-availability-picker", part: "nap" }, !this.hideHeader && (h("div", { class: "header", part: "nap__header" }, h("h3", null, "General availability"), h("p", null, "Set your availability for scheduling meetings."))), h("div", { key: 'f2b3434dc127fc19fe6fe915cdc5f4a9d12ba6e7', class: "content" }, h("div", { key: 'bd75cb0749168b32c6366aea6f4df5920d098ec7', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: '0c74924a291afaa07ff5b06781720a8cbadeea4d', class: "sub-header" }, "Select timezone", h("span", { key: '64933b3f6623f2d0b13559406db3d14afa99e0b6', class: "icon" }, h("tooltip-component", { key: '09c42633826e0ad358b4877f7d48bb70ce7ca518' }, h("info-icon", { key: '9ea9340b193710d759e71081e59ad6ccf762e4a8', slot: "tooltip-icon" }), h("span", { key: '83e596171dc8fb74543b21e957855f9cd32423b1', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: 'd65b32234b1669a5e7bef4b88024f50548011b98', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: '3387e2d39b7a052557d7668d5a7822fda1440da7', slot: "select-icon" }, h("globe-icon", { key: 'e92459b2ce063e199d8685f5a422a88e7a50fbd6', width: "20", height: "20" })))), h("div", { key: 'd510d9538189898f52e56388d661158e243fc8dd', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
+        return (h(Host, { key: 'd6ebb0ac834c059d38d5c3062315d0a6ff7e7606' }, h("div", { key: '0e8ec0786d293d3a1295021cdcc1a0966084cd74', class: "nylas-availability-picker", part: "nap" }, !this.hideHeader && (h("div", { class: "header", part: "nap__header" }, h("h3", null, "General availability"), h("p", null, "Set when you're regularly available for event bookings.", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "This is the default availability for participants who don\u2019t have availability set on the Participants tab."))))), h("div", { key: '20167bda51a9dc039bcef3a491a0433038af94f3', class: "content" }, h("div", { key: 'd33de054ff0b04614e34ad4b8bb0f15110f722f1', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: '35bad46d4e78e08c75acf41b95ab2809e59d3c5c', class: "sub-header" }, "Select timezone"), h("select-dropdown", { key: '63193f9d7c3479affe9a5c99b199b32678d4c8c7', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: 'ed8101d5acc86458413f771edbd3cc4c016d3d5f', slot: "select-icon" }, h("globe-icon", { key: '637d5652a53679bfd0052ec8348fb9c2ab9b4c89', width: "20", height: "20" })))), h("div", { key: '0023ea0d976234b85cf88a3c057dd2d3982d2f3d', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
             const day = key;
             const timeRanges = this.schedule[key];
             return (h("div", { class: "availability-day" }, h("div", { class: "day", part: "nap__day" }, h("input", { type: "checkbox", name: day, id: day, checked: timeRanges.length > 0, onClick: () => {
@@ -446,7 +446,7 @@ export class NylasAvailabilityPicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "This event is fired when the selected availability / open hours change.\nThe value is a stringified JSON object with the open hours and timezone.\nEx: {\n  openHours: OpenHours[];\n  timezone: string;\n};"
+                    "text": "This event is fired when the selected availability / open hours change.\nThe value is a stringified JSON object with the open hours and timezone.\n```\n{\n openHours: OpenHours[],\n timezone: string\n}\n```"
                 },
                 "complexType": {
                     "original": "{\n    value: string;\n    name: string;\n  }",

package/dist/collection/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.js.map CHANGED Viewed

package/dist/collection/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.css CHANGED Viewed

@@ -53,6 +53,9 @@
   line-height: 20px;
   color: var(--nylas-base-600);
   text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 .nylas-booking-calendar-picker .nylas-booking-calendar-picker__loading {
   padding-bottom: 1rem;

package/dist/collection/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.js CHANGED Viewed

@@ -21,6 +21,7 @@ export class NylasBookingCalendarPicker {
         this.currentUser = undefined;
         this.name = 'booking-calendar';
         this.defaultBookingCalendar = '';
+        this.hideHeader = false;
         this.selectedCalendar = '';
     }
     connectedCallback() {
@@ -40,6 +41,7 @@ export class NylasBookingCalendarPicker {
             this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');
         }
         this.selectedCalendar = this.defaultBookingCalendar || this.currentUser?.email || '';
+        this.valueChanged.emit({ value: this.selectedCalendar, name: this.name });
     }
     componentWillUpdate() {
         debug('nylas-booking-calendar-picker', 'componentWillUpdate');
@@ -73,7 +75,7 @@ export class NylasBookingCalendarPicker {
                 label: calendar.name,
             };
         }) ?? [];
-        return (h(Host, null, h("div", { class: "nylas-booking-calendar-picker", part: "nbcp" }, h("div", { class: "header", part: "nbcp__header" }, h("h3", null, "Calendar booking"), h("p", null, "Choose calendar where you\u2019d like the event bookings to show up.")), calendarOptions.length > 0 ? (h("div", { class: "nylas-booking-calendar-picker__dropdown" }, h("span", { class: "label", part: "nbcp__input-label" }, "Select a calendar to book meetings on", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available."))), h("select-dropdown", { name: "booking-calendar", options: calendarOptions, withSearch: false, exportparts: "sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content", defaultSelectedOption: calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0] }))) : (h("div", { class: "nylas-booking-calendar-picker__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
+        return (h(Host, null, h("div", { class: "nylas-booking-calendar-picker", part: "nbcp" }, !this.hideHeader && (h("div", { class: "header", part: "nbcp__header" }, h("h3", null, "Calendar booking"), h("p", null, "Select the calendar where you want to add event bookings.", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "The calendar will be used to create events."))))), calendarOptions.length > 0 ? (h("div", { class: "nylas-booking-calendar-picker__dropdown" }, h("select-dropdown", { name: "booking-calendar", options: calendarOptions, withSearch: false, exportparts: "sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content", defaultSelectedOption: calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0] }))) : (h("div", { class: "nylas-booking-calendar-picker__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
     }
     static get is() { return "nylas-booking-calendar-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -116,7 +118,7 @@ export class NylasBookingCalendarPicker {
                 "mutable": false,
                 "complexType": {
                     "original": "User",
-                    "resolved": "undefined | { id: string; email: string; name?: string | undefined; }",
+                    "resolved": "undefined | { id: string; email: string; name?: string | undefined; provider?: string | undefined; }",
                     "references": {
                         "User": {
                             "location": "import",
@@ -167,6 +169,24 @@ export class NylasBookingCalendarPicker {
                 "attribute": "default-booking-calendar",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "hideHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The prop to hide the header."
+                },
+                "attribute": "hide-header",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -219,10 +239,6 @@ export class NylasBookingCalendarPicker {
 __decorate([
     RegisterComponent({
         name: 'nylas-booking-calendar-picker',
-        stateToProps: new Map([
-            ['schedulerConfig.calendars', 'calendars'],
-            ['schedulerConfig.currentUser', 'currentUser'],
-        ]),
         eventToProps: {
             valueChanged: async (event, _nylasSchedulerConfigConnector) => {
                 const { valueChanged } = event.detail;

package/dist/collection/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nylas-booking-calendar-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { User } from '@/common/nylas-api-request';\n\n/*\n The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The current logged in user.\n /\n @Prop() currentUser?: User;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'booking-calendar';\n /\n The default selected calendar.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: string = '';\n\n /\n This event is fired when the selected booking calendar changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-calendar-picker', 'componentDidLoad');\n this.defaultBookingCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');\n }\n this.selectedCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-calendar-picker', 'componentDidRender');\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendar = value;\n this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n stateToProps: new Map([\n ['schedulerConfig.calendars', 'calendars'],\n ['schedulerConfig.currentUser', 'currentUser'],\n ]),\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n <div class=\"header\" part=\"nbcp__header\">\n <h3>Calendar booking</h3>\n <p>Choose calendar where you’d like the event bookings to show up.</p>\n </div>\n\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <span class=\"label\" part=\"nbcp__input-label\">\n Select a calendar to book meetings on\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available.\n </span>\n </tooltip-component>\n </span>\n <select-dropdown\n name=\"booking-calendar\"\n options={calendarOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__loading\">\n <span class=\"label\">\n Select a calendar to book meetings on <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"nylas-booking-calendar-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-booking-calendar-picker/nylas-booking-calendar-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { Calendar } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { User } from '@/common/nylas-api-request';\n\n/*\n The `nylas-booking-calendar-picker` component is a UI component that displays the booking calendar picker.\n * @part nbcp - The booking calendar picker container\n * @part nbcp__header - The header of the booking calendar picker\n * @part nbcp__input-label - The input label of the booking calendar picker\n * @part nbcp__dropdown - The dropdown container\n * @part nbcp__dropdown-button - The dropdown button\n * @part nbcp__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-booking-calendar-picker',\n styleUrl: 'nylas-booking-calendar-picker.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasBookingCalendarPicker {\n @Element() host!: HTMLNylasCalendarPickerElement;\n /\n The calendars to choose from.\n /\n @Prop() calendars?: Calendar[];\n /\n The current logged in user.\n /\n @Prop() currentUser?: User;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'booking-calendar';\n /\n The default selected calendar.\n /\n @Prop() defaultBookingCalendar: string = '';\n /\n The prop to hide the header.\n /\n @Prop() hideHeader: boolean = false;\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected calendars.\n /\n @State() selectedCalendar: string = '';\n\n /\n This event is fired when the selected booking calendar changes.\n /\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-booking-calendar-picker', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-booking-calendar-picker', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-booking-calendar-picker', 'componentWillLoad');\n // See comment in the @Watch('name') decorator for more information.\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-booking-calendar-picker', 'componentDidLoad');\n this.defaultBookingCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n\n // TODO: Remove this when the internals in tests are fixed.\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(this.defaultBookingCalendar.toString(), 'booking-calendar');\n }\n this.selectedCalendar = this.defaultBookingCalendar \|\| this.currentUser?.email \|\| '';\n this.valueChanged.emit({ value: this.selectedCalendar, name: this.name });\n }\n\n componentWillUpdate() {\n debug('nylas-booking-calendar-picker', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-booking-calendar-picker', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-booking-calendar-picker', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-booking-calendar-picker', 'componentDidRender');\n }\n\n /\n When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-booking-calendar-picker', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-booking-calendar-picker', 'nylasFormDropdownChangedHandler', event.detail);\n // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n const { value } = event.detail;\n this.selectedCalendar = value;\n this.internals.setFormValue(value.toString(), this.name);\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n }\n\n @RegisterComponent<NylasBookingCalendarPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-booking-calendar-picker',\n eventToProps: {\n valueChanged: async (\n event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n ) => {\n const { valueChanged } = event.detail;\n // If a handler is passed, call it.\n if (valueChanged) {\n valueChanged(event);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n const calendarOptions =\n this.calendars?.map(calendar => {\n return {\n value: calendar.id,\n label: calendar.name,\n };\n }) ?? [];\n\n return (\n <Host>\n <div class=\"nylas-booking-calendar-picker\" part=\"nbcp\">\n {!this.hideHeader && (\n <div class=\"header\" part=\"nbcp__header\">\n <h3>Calendar booking</h3>\n <p>\n Select the calendar where you want to add event bookings.\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">The calendar will be used to create events.</span>\n </tooltip-component>\n </p>\n </div>\n )}\n {calendarOptions.length > 0 ? (\n <div class=\"nylas-booking-calendar-picker__dropdown\">\n <select-dropdown\n name=\"booking-calendar\"\n options={calendarOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nbcp__dropdown, sd_dropdown-button: nbcp__dropdown-button, sd_dropdown-content: nbcp__dropdown-content\"\n defaultSelectedOption={calendarOptions.find(cal => cal.value == this.defaultBookingCalendar) ?? calendarOptions[0]}\n />\n </div>\n ) : (\n <div class=\"nylas-booking-calendar-picker__loading\">\n <span class=\"label\">\n Select a calendar to book meetings on <info-icon />\n </span>\n <div class=\"loading-button\">\n <span>Loading...</span>\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-booking-form-config/nylas-booking-form-config.css ADDED Viewed

@@ -0,0 +1,233 @@
+:host {
+  display: block;
+  --nylas-primary: #2563eb;
+  --nylas-error: #cc4841;
+  --nylas-error-pressed: #992222;
+  --nylas-wraning: #f06c00;
+  --nylas-success: #16a392;
+  --nylas-info: #2b8fc2;
+  --nylas-base-0: #ffffff;
+  --nylas-base-25: #fcfcfd;
+  --nylas-base-50: #f8f9fc;
+  --nylas-base-100: #eaecf5;
+  --nylas-base-200: #d5d9eb;
+  --nylas-base-300: #b3b8d8;
+  --nylas-base-400: #717bbc;
+  --nylas-base-500: #4e5ba6;
+  --nylas-base-600: #3e4784;
+  --nylas-base-700: #263f72;
+  --nylas-base-800: #293056;
+  --nylas-base-900: #101323;
+  --nylas-base-950: #0e101b;
+  --nylas-border-radius: 0.25rem;
+  --nylas-border-radius-2x: 0.5rem;
+  --nylas-border-radius-3x: 0.75rem;
+  --nylas-font-family: "Inter", sans-serif;
+  width: inherit;
+}
+.nylas-booking-form-config {
+  width: inherit;
+  display: flex;
+  flex-direction: column;
+  margin: 1rem;
+}
+.nylas-booking-form-config .header {
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+}
+.nylas-booking-form-config .header .header_text h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--nylas-base-900);
+  text-align: left;
+}
+.nylas-booking-form-config .header .header_text p {
+  margin: 0.25rem 0 0 0;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--nylas-base-600);
+  text-align: left;
+}
+.nylas-booking-form-config .header .header_action {
+  display: flex;
+}
+.nylas-booking-form-config .header .header_action select-dropdown::part(sd_dropdown-button) {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid var(--nylas-base-200);
+  border-radius: var(--nylas-border-radius-2x);
+  padding: 1rem;
+}
+.nylas-booking-form-config .content {
+  padding: 1rem;
+  color: var(--nylas-base-900);
+  font-size: 16px;
+  font-family: var(--nylas-font-family);
+}
+@media screen and (max-width: 504px) {
+  .nylas-booking-form-config .content {
+    font-size: 15px;
+  }
+}
+.nylas-booking-form-config .content .additional_fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 1rem 0;
+  position: relative;
+  overflow: auto;
+}
+@media screen and (max-width: 504px) {
+  .nylas-booking-form-config .content .additional_fields {
+    gap: 0.5rem;
+    padding: 0;
+  }
+}
+.nylas-booking-form-config .content .additional_fields .form-field {
+  border-radius: var(--nylas-border-radius-2x);
+  border: 1px solid var(--nylas-base-200);
+  padding: 1rem;
+  user-select: none;
+  background-color: white;
+  /* Prevent text selection */
+  position: relative;
+}
+.nylas-booking-form-config .content .additional_fields .form-field.highlight {
+  background-color: var(--nylas-base-200);
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_header .dragable {
+  cursor: move;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_text {
+  flex: 1;
+  text-align: left;
+  padding-left: 1rem;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_text h4 {
+  margin: 0;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--nylas-base-900);
+  text-align: left;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_text p {
+  margin: 0.25rem 0 0 0;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--nylas-base-600);
+  text-align: left;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_actions {
+  display: flex;
+  align-items: center;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_actions .is-required {
+  color: var(--nylas-base-500);
+  background-color: var(--nylas-base-50);
+  font-weight: 600;
+  padding: 4px 8px;
+  border-radius: var(--nylas-border-radius-2x);
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_actions button {
+  border: none;
+  background: transparent;
+  height: 40px;
+  margin: 0 1rem;
+  cursor: pointer;
+  color: var(--nylas-base-800);
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_actions button:hover, .nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_actions button:active {
+  color: var(--nylas-primary);
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_actions .chevron {
+  display: flex;
+  align-self: center;
+  cursor: pointer;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_actions .chevron:hover, .nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_actions .chevron:active {
+  color: var(--nylas-primary);
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_actions .chevron.open {
+  transform: rotate(90deg);
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_actions .chevron.closed {
+  transform: rotate(270deg);
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content {
+  padding: 1.5rem 0 0 2.7rem;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content.hidden {
+  display: none;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content .inputs {
+  display: flex;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content .inputs .label-input {
+  padding: 0 1rem 0 0;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content .inputs .required-input {
+  display: flex;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content .inputs .required-input label {
+  padding: 0.5rem;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content .inputs .required-input input[type=checkbox] {
+  transform: scale(1.3);
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content .options-container h4 {
+  margin: 0;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 500;
+  padding: 0.5rem 0;
+  color: var(--nylas-base-900);
+  text-align: left;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content .options-container button {
+  border: none;
+  background: transparent;
+  height: 40px;
+  margin: 1rem 0;
+  cursor: pointer;
+  color: var(--nylas-base-800);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content .options-container button:hover, .nylas-booking-form-config .content .additional_fields .form-field .form-field_content .options-container button:active {
+  color: var(--nylas-primary);
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content .options-container .options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content .options-container .options .option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content .options-container .options .option button {
+  border: none;
+  background: transparent;
+  height: 40px;
+  margin: 0 1rem;
+  cursor: pointer;
+  color: var(--nylas-base-800);
+}
+.nylas-booking-form-config .content .additional_fields .form-field .form-field_content .options-container .options .option button:hover, .nylas-booking-form-config .content .additional_fields .form-field .form-field_content .options-container .options .option button:active {
+  color: var(--nylas-primary);
+}