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

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

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/components/nylas-timeslot-interval2.js CHANGED Viewed

@@ -35,8 +35,8 @@ const NylasTimeslotInterval = proxyCustomElement(class NylasTimeslotInterval ext
         this.internals = this.attachInternals();
         this.selectedConfiguration = undefined;
         this.name = 'timeslot-picker';
-        this.eventDurationMinutes = this.selectedConfiguration?.availability?.duration_minutes ?? 5;
-        this.defaultIntervalMinutes = this.selectedConfiguration?.availability?.interval_minutes ?? this.eventDurationMinutes;
+        this.eventDurationMinutes = this.selectedConfiguration?.availability?.duration_minutes;
+        this.defaultIntervalMinutes = this.selectedConfiguration?.availability?.interval_minutes ?? this.eventDurationMinutes ?? 10;
         this.defaultRoundTo = this.selectedConfiguration?.availability?.round_to ?? undefined;
         this.selectedInterval = this.defaultIntervalMinutes;
         this.selectedRoundTo = this.defaultRoundTo && this.defaultRoundTo === this.defaultIntervalMinutes ? true : false;
@@ -47,7 +47,7 @@ const NylasTimeslotInterval = proxyCustomElement(class NylasTimeslotInterval ext
     }
     selectedConfigurationChangedHandler(newValue) {
         debug('nylas-timeslot-interval', 'selectedConfigurationChangedHandler', newValue);
-        this.defaultIntervalMinutes = newValue.availability?.interval_minutes ?? this.eventDurationMinutes;
+        this.defaultIntervalMinutes = newValue.availability?.interval_minutes ?? this.eventDurationMinutes ?? 10;
         this.defaultRoundTo = newValue.availability?.round_to ?? undefined;
         this.selectedInterval = this.defaultIntervalMinutes;
         this.selectedRoundTo = this.defaultRoundTo && this.defaultRoundTo === this.defaultIntervalMinutes ? true : false;
@@ -81,7 +81,7 @@ const NylasTimeslotInterval = proxyCustomElement(class NylasTimeslotInterval ext
         debug('nylas-timeslot-interval', 'nylasFormDropdownChangedHandler', event.detail);
         const value = event.detail.value;
         if (value === 'duration') {
-            this.selectedInterval = this.eventDurationMinutes;
+            this.selectedInterval = this.eventDurationMinutes ?? 10;
         }
         else {
             this.selectedInterval = parseInt(event.detail.value);
@@ -98,8 +98,8 @@ const NylasTimeslotInterval = proxyCustomElement(class NylasTimeslotInterval ext
             this.internals.setFormValue(JSON.stringify({ interval: this.selectedInterval, roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinustes }), this.name);
         }
     }
-    radioSelectionChangedHandler(event) {
-        debug('nylas-timeslot-interval', 'radioSelectionChangedHandler', event.detail);
+    nylasFormRadioChangedHandler(event) {
+        debug('nylas-timeslot-interval', 'nylasFormRadioChangedHandler', event.detail);
         const value = event.detail.value;
         if (value === 'no-rounding') {
             this.selectedRoundTo = false;
@@ -130,14 +130,14 @@ const NylasTimeslotInterval = proxyCustomElement(class NylasTimeslotInterval ext
             { value: '45', label: '45 mins' },
             { value: '60', label: '60 mins' },
         ];
-        return (h(Host, { key: 'ebad4dc8f82dc565f4608c262d54f06495a69144' }, h("div", { key: '46641f5cd23afc527d14c57fa62fe2627d1a92f5', class: "nylas-timeslot-interval", part: "nti" }, h("div", { key: '729c8356b955ba357bd00f3cdf28c51bb42b741d', class: "header", part: "nti__header" }, h("h3", { key: '348543e170e107ea65c74a6154739627e7c4a271' }, "Time-slot interval preferences"), h("p", { key: '1cf34b79990edef1950d6c970932e5e0805e6d0a' }, "Choose your interval preference for time-slots.")), h("div", { key: '965fe8f8e235f9696bc237bc7774ca6fdea2cd42', class: "nylas-timeslot-interval__dropdown" }, h("span", { key: '6346e2f31c9322cc3264885f362ce2b29c4a4c2e', class: "label", part: "nti__input-label" }, "Select interval preference", h("tooltip-component", { key: '27901960cae97d4809153aac5d427c8c2ff7bf1e' }, h("info-icon", { key: '94c81d2c169da3714d2a1955da0fbe542b688fb6', slot: "tooltip-icon" }), h("span", { key: '6e8660e7696c16d81214d97e5e2087579f9fa1bd', slot: "tooltip-content" }, "Set the interval preference for the time-slots."))), h("select-dropdown", { key: '49b886894bb4d405ed13578809609511830389f1', name: "booking-calendar", options: intervalPreferenceOptions, withSearch: false, exportparts: "sd_dropdown: nti__dropdown, sd_dropdown-button: nti__dropdown-button, sd_dropdown-content: nti__dropdown-content", defaultSelectedOption: this.defaultIntervalMinutes == this.eventDurationMinutes
+        return (h(Host, { key: '74ed43cccb282e8de5cff14d7966b79deee55daf' }, h("div", { key: '5b3bbf89048551b553aabf468ca475cdefdad341', class: "nylas-timeslot-interval", part: "nti" }, h("div", { key: '04aec403481c8870063b8704a9ac880c11e3071e', class: "header", part: "nti__header" }, h("h3", { key: '35a9bd6d07a4a89a8dde8be1f252e5210fc21f2e' }, "Time slot settings"), h("p", { key: 'b889b033a82475a832abb0b480a3c648a2f99172' }, "Manage time slot settings.")), h("div", { key: 'c37caaec6d8fd3326bef84024ab32e6e4ac5464f', class: "nylas-timeslot-interval__dropdown" }, h("span", { key: '723a6719aee58e8ed767c541fd45929024e348bf', class: "label", part: "nti__input-label" }, "Select a time slot interval."), h("select-dropdown", { key: 'b621f8df10b400e944c65da1dc7d18c63886edcc', name: "booking-calendar", options: intervalPreferenceOptions, withSearch: false, exportparts: "sd_dropdown: nti__dropdown, sd_dropdown-button: nti__dropdown-button, sd_dropdown-content: nti__dropdown-content", defaultSelectedOption: this.defaultIntervalMinutes == this.eventDurationMinutes
                 ? intervalPreferenceOptions[0]
-                : intervalPreferenceOptions.find(op => op.value == this.defaultIntervalMinutes.toString()) ?? intervalPreferenceOptions[0] }), h("span", { key: '40079758106c1e7075b247f81a3bc30e11eb1138', class: "label", part: "nti__input-label" }, "Select the type of time-slot rounding", h("tooltip-component", { key: 'c1a1b86a732439b5474be36a1eb67d0a1fabe52c' }, h("info-icon", { key: '9e185781f8def48475c5f65cff916e5be6423b72', slot: "tooltip-icon" }), h("span", { key: 'df108083daab268e8980194ebff8485c945aab1c', slot: "tooltip-content" }, "Select if you want to round the time slots to the nearest interval."))), h("radio-button-group", { key: 'eb4c58b028ac0e2dd0468c30c1839558ae57178a', name: "interval-preference", defaultSelectedValue: this.defaultRoundTo && this.defaultRoundTo === this.defaultIntervalMinutes ? 'rounding' : 'no-rounding', options: [
-                { value: 'no-rounding', label: 'Default', description: 'Time-slots will be rounded to the nearest quarter-hour.' },
+                : intervalPreferenceOptions.find(op => op.value == this.defaultIntervalMinutes.toString()) ?? intervalPreferenceOptions[0] }), h("span", { key: 'c98907d3660086deb3bb66aede6d3834190f9a69', slot: "label", class: "label", part: "nti__input-label" }, "Select the time slot rounding type", h("tooltip-component", { key: 'e4f6f0f75ab80a99612c622b111f4500d12cb05d' }, h("info-icon", { key: 'aa3e8de015f4c63511694f4cad1513615a87d738', slot: "tooltip-icon" }), h("span", { key: '9e0653df752fad754c51aa79438f75deab9bedb1', slot: "tooltip-content" }, "Select if you want to round the time slots to the nearest interval."))), h("radio-button-group", { key: 'b534ab334dd45491b7bfd287675fb67e24f82c99', name: "interval-preference", defaultSelectedValue: this.defaultRoundTo && this.defaultRoundTo === this.defaultIntervalMinutes ? 'rounding' : 'no-rounding', options: [
+                { value: 'no-rounding', label: 'Default', description: 'Time slots will be rounded to the nearest quarter-hour.' },
                 {
                     value: 'rounding',
                     label: 'Interval rounding',
-                    description: 'Time-slots will begin at times rounded to the interval value.',
+                    description: 'Time slots will begin at times rounded to the interval value.',
                 },
             ] })))));
     }
@@ -156,7 +156,7 @@ const NylasTimeslotInterval = proxyCustomElement(class NylasTimeslotInterval ext
         "defaultRoundTo": [2, "default-round-to"],
         "selectedInterval": [32],
         "selectedRoundTo": [32]
-    }, [[0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"], [0, "radioSelectionChanged", "radioSelectionChangedHandler"]], {
+    }, [[0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"], [0, "nylasFormRadioChanged", "nylasFormRadioChangedHandler"]], {
         "name": ["elementNameChangedHandler"],
         "selectedConfiguration": ["selectedConfigurationChangedHandler"]
     }]);

package/dist/components/nylas-timeslot-interval2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-timeslot-interval2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-timeslot-interval/nylas-timeslot-interval.scss?tag=nylas-timeslot-interval&encapsulation=shadow","src/components/scheduler-editor/nylas-timeslot-interval/nylas-timeslot-interval.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-timeslot-interval {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .nylas-timeslot-interval__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n tooltip-component {\n display: flex;\n }\n }\n select-dropdown {\n margin-bottom: 1.5rem;\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\nconst defaultRoundToMinustes = 15;\n/*\n The `nylas-timeslot-interval` component is a UI component that allows users to set their time-slot interval preferences.\n * This component provides an option to set both `interval_minutes` and `round_to` in the configuration.\n \n @part nti - The timeslot interval container\n * @part nti__header - The header of the timeslot interval picker\n * @part nti__input-label - The input label of the timeslot interval picker\n * @part nti__dropdown - The dropdown container\n * @part nti__dropdown-button - The dropdown button\n * @part nti__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-timeslot-interval',\n styleUrl: 'nylas-timeslot-interval.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasTimeslotInterval {\n @Element() host!: HTMLNylasTimeslotIntervalElement;\n /\n The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'timeslot-picker';\n\n /\n The event duration in minutes.\n /\n @Prop() eventDurationMinutes: number = this.selectedConfiguration?.availability?.duration_minutes ?? 5; /\n The default interval minutes.\n /\n @Prop() defaultIntervalMinutes: number = this.selectedConfiguration?.availability?.interval_minutes ?? this.eventDurationMinutes;\n /\n The round to option in minutes as set in the configuration.\n /\n @Prop() defaultRoundTo?: number = this.selectedConfiguration?.availability?.round_to ?? undefined;\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected interval minutes.\n /\n @State() selectedInterval: number = this.defaultIntervalMinutes;\n\n /\n The selected round to minutes.\n /\n @State() selectedRoundTo: boolean = this.defaultRoundTo && this.defaultRoundTo === this.defaultIntervalMinutes ? true : false;\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 }>;\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-timeslot-interval', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-timeslot-interval', 'selectedConfigurationChangedHandler', newValue);\n this.defaultIntervalMinutes = newValue.availability?.interval_minutes ?? this.eventDurationMinutes;\n this.defaultRoundTo = newValue.availability?.round_to ?? undefined;\n this.selectedInterval = this.defaultIntervalMinutes;\n this.selectedRoundTo = this.defaultRoundTo && this.defaultRoundTo === this.defaultIntervalMinutes ? true : false;\n }\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-timeslot-interval', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-timeslot-interval', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-timeslot-interval', '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-timeslot-interval', 'componentDidLoad');\n }\n\n componentWillUpdate() {\n debug('nylas-timeslot-interval', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-timeslot-interval', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-timeslot-interval', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-timeslot-interval', 'componentDidRender');\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-timeslot-interval', 'nylasFormDropdownChangedHandler', event.detail);\n const value = event.detail.value;\n if (value === 'duration') {\n this.selectedInterval = this.eventDurationMinutes;\n } else {\n this.selectedInterval = parseInt(event.detail.value);\n }\n console.log('nylasFormDropdownChanged selectedRoundTo', this.selectedRoundTo);\n\n this.valueChanged.emit({\n value: JSON.stringify({\n interval: this.selectedInterval,\n roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinustes,\n }),\n name: this.name,\n });\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(JSON.stringify({ interval: this.selectedInterval, roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinustes }), this.name);\n }\n }\n\n @Listen('radioSelectionChanged')\n radioSelectionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-timeslot-interval', 'radioSelectionChangedHandler', event.detail);\n const value = event.detail.value;\n if (value === 'no-rounding') {\n this.selectedRoundTo = false;\n } else {\n this.selectedRoundTo = true;\n }\n console.log('selectedRoundTo', this.selectedRoundTo);\n\n this.valueChanged.emit({\n value: JSON.stringify({\n interval: this.selectedInterval,\n roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinustes,\n }),\n name: this.name,\n });\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(JSON.stringify({ interval: this.selectedInterval, roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinustes }), this.name);\n }\n }\n\n @RegisterComponent<NylasTimeslotInterval, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-timeslot-interval',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n fireRegisterEvent: true,\n })\n render() {\n const intervalPreferenceOptions = [\n { value: 'duration', label: 'Length of the booking' },\n { value: '5', label: '5 mins' },\n { value: '10', label: '10 mins' },\n { value: '15', label: '15 mins' },\n { value: '20', label: '20 mins' },\n { value: '30', label: '30 mins' },\n { value: '45', label: '45 mins' },\n { value: '60', label: '60 mins' },\n ];\n\n return (\n <Host>\n <div class=\"nylas-timeslot-interval\" part=\"nti\">\n <div class=\"header\" part=\"nti__header\">\n <h3>Time-slot interval preferences</h3>\n <p>Choose your interval preference for time-slots.</p>\n </div>\n\n <div class=\"nylas-timeslot-interval__dropdown\">\n <span class=\"label\" part=\"nti__input-label\">\n Select interval preference\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Set the interval preference for the time-slots.</span>\n </tooltip-component>\n </span>\n <select-dropdown\n name=\"booking-calendar\"\n options={intervalPreferenceOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nti__dropdown, sd_dropdown-button: nti__dropdown-button, sd_dropdown-content: nti__dropdown-content\"\n defaultSelectedOption={\n this.defaultIntervalMinutes == this.eventDurationMinutes\n ? intervalPreferenceOptions[0]\n : intervalPreferenceOptions.find(op => op.value == this.defaultIntervalMinutes.toString()) ?? intervalPreferenceOptions[0]\n }\n />\n <span class=\"label\" part=\"nti__input-label\">\n Select the type of time-slot rounding\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Select if you want to round the time slots to the nearest interval.</span>\n </tooltip-component>\n </span>\n <radio-button-group\n name=\"interval-preference\"\n defaultSelectedValue={this.defaultRoundTo && this.defaultRoundTo === this.defaultIntervalMinutes ? 'rounding' : 'no-rounding'}\n options={[\n { value: 'no-rounding', label: 'Default', description: 'Time-slots will be rounded to the nearest quarter-hour.' },\n {\n value: 'rounding',\n label: 'Interval rounding',\n description: 'Time-slots will begin at times rounded to the interval value.',\n },\n ]}\n />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-timeslot-interval2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-timeslot-interval/nylas-timeslot-interval.scss?tag=nylas-timeslot-interval&encapsulation=shadow","src/components/scheduler-editor/nylas-timeslot-interval/nylas-timeslot-interval.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-timeslot-interval {\n width: inherit;\n display: flex;\n flex-direction: column;\n margin: 1rem;\n border-radius: var(--nylas-border-radius-2x);\n border: 1px solid var(--nylas-base-200);\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n h3 {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n .nylas-timeslot-interval__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n span.label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n tooltip-component {\n display: flex;\n }\n }\n select-dropdown {\n margin-bottom: 1.5rem;\n }\n select-dropdown::part(sd_dropdown) {\n width: 100%;\n }\n select-dropdown::part(sd_dropdown-content) {\n width: 100%;\n max-width: unset;\n }\n select-dropdown::part(sd_dropdown-button) {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1rem;\n }\n select-dropdown::part(sd_dropdown-button-selected-label) {\n max-width: calc(100% - 2rem);\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\nconst defaultRoundToMinustes = 15;\n/*\n The `nylas-timeslot-interval` component allows users to set their time slot interval preferences.\n * This component provides an option to set both `interval_minutes` and `round_to` in the configuration.\n \n @part nti - The timeslot interval container\n * @part nti__header - The header of the timeslot interval picker\n * @part nti__input-label - The input label of the timeslot interval picker\n * @part nti__dropdown - The dropdown container\n * @part nti__dropdown-button - The dropdown button\n * @part nti__dropdown-content - The dropdown content\n /\n@Component({\n tag: 'nylas-timeslot-interval',\n styleUrl: 'nylas-timeslot-interval.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasTimeslotInterval {\n @Element() host!: HTMLNylasTimeslotIntervalElement;\n /\n The selected config\n /\n @Prop() selectedConfiguration?: Configuration;\n /\n The name of the calendar picker.\n /\n @Prop() name: string = 'timeslot-picker';\n\n /\n The event duration in minutes.\n /\n @Prop() eventDurationMinutes?: number = this.selectedConfiguration?.availability?.duration_minutes; /\n The default interval minutes.\n /\n @Prop() defaultIntervalMinutes: number = this.selectedConfiguration?.availability?.interval_minutes ?? this.eventDurationMinutes ?? 10;\n /\n The round to option in minutes as set in the configuration.\n /\n @Prop() defaultRoundTo?: number = this.selectedConfiguration?.availability?.round_to ?? undefined;\n\n /\n The element internals.\n /\n @AttachInternals() internals!: ElementInternals;\n\n /\n The selected interval minutes.\n /\n @State() selectedInterval: number = this.defaultIntervalMinutes;\n\n /\n The selected round to minutes.\n /\n @State() selectedRoundTo: boolean = this.defaultRoundTo && this.defaultRoundTo === this.defaultIntervalMinutes ? true : false;\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 }>;\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-timeslot-interval', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-timeslot-interval', 'selectedConfigurationChangedHandler', newValue);\n this.defaultIntervalMinutes = newValue.availability?.interval_minutes ?? this.eventDurationMinutes ?? 10;\n this.defaultRoundTo = newValue.availability?.round_to ?? undefined;\n this.selectedInterval = this.defaultIntervalMinutes;\n this.selectedRoundTo = this.defaultRoundTo && this.defaultRoundTo === this.defaultIntervalMinutes ? true : false;\n }\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-timeslot-interval', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-timeslot-interval', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-timeslot-interval', '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-timeslot-interval', 'componentDidLoad');\n }\n\n componentWillUpdate() {\n debug('nylas-timeslot-interval', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-timeslot-interval', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-timeslot-interval', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-timeslot-interval', 'componentDidRender');\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-timeslot-interval', 'nylasFormDropdownChangedHandler', event.detail);\n const value = event.detail.value;\n if (value === 'duration') {\n this.selectedInterval = this.eventDurationMinutes ?? 10;\n } else {\n this.selectedInterval = parseInt(event.detail.value);\n }\n console.log('nylasFormDropdownChanged selectedRoundTo', this.selectedRoundTo);\n\n this.valueChanged.emit({\n value: JSON.stringify({\n interval: this.selectedInterval,\n roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinustes,\n }),\n name: this.name,\n });\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(JSON.stringify({ interval: this.selectedInterval, roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinustes }), this.name);\n }\n }\n\n @Listen('nylasFormRadioChanged')\n nylasFormRadioChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-timeslot-interval', 'nylasFormRadioChangedHandler', event.detail);\n const value = event.detail.value;\n if (value === 'no-rounding') {\n this.selectedRoundTo = false;\n } else {\n this.selectedRoundTo = true;\n }\n console.log('selectedRoundTo', this.selectedRoundTo);\n\n this.valueChanged.emit({\n value: JSON.stringify({\n interval: this.selectedInterval,\n roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinustes,\n }),\n name: this.name,\n });\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(JSON.stringify({ interval: this.selectedInterval, roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinustes }), this.name);\n }\n }\n\n @RegisterComponent<NylasTimeslotInterval, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-timeslot-interval',\n stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n fireRegisterEvent: true,\n })\n render() {\n const intervalPreferenceOptions = [\n { value: 'duration', label: 'Length of the booking' },\n { value: '5', label: '5 mins' },\n { value: '10', label: '10 mins' },\n { value: '15', label: '15 mins' },\n { value: '20', label: '20 mins' },\n { value: '30', label: '30 mins' },\n { value: '45', label: '45 mins' },\n { value: '60', label: '60 mins' },\n ];\n\n return (\n <Host>\n <div class=\"nylas-timeslot-interval\" part=\"nti\">\n <div class=\"header\" part=\"nti__header\">\n <h3>Time slot settings</h3>\n <p>Manage time slot settings.</p>\n </div>\n\n <div class=\"nylas-timeslot-interval__dropdown\">\n <span class=\"label\" part=\"nti__input-label\">\n Select a time slot interval.\n </span>\n <select-dropdown\n name=\"booking-calendar\"\n options={intervalPreferenceOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nti__dropdown, sd_dropdown-button: nti__dropdown-button, sd_dropdown-content: nti__dropdown-content\"\n defaultSelectedOption={\n this.defaultIntervalMinutes == this.eventDurationMinutes\n ? intervalPreferenceOptions[0]\n : intervalPreferenceOptions.find(op => op.value == this.defaultIntervalMinutes.toString()) ?? intervalPreferenceOptions[0]\n }\n />\n <span slot=\"label\" class=\"label\" part=\"nti__input-label\">\n Select the time slot rounding type\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">Select if you want to round the time slots to the nearest interval.</span>\n </tooltip-component>\n </span>\n <radio-button-group\n name=\"interval-preference\"\n defaultSelectedValue={this.defaultRoundTo && this.defaultRoundTo === this.defaultIntervalMinutes ? 'rounding' : 'no-rounding'}\n options={[\n { value: 'no-rounding', label: 'Default', description: 'Time slots will be rounded to the nearest quarter-hour.' },\n {\n value: 'rounding',\n label: 'Interval rounding',\n description: 'Time slots will begin at times rounded to the interval value.',\n },\n ]}\n />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-timeslot-picker2.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { R as RegisterComponent } from './register-component.js';
 import { a as debug, n as isSameDay } from './utils.js';
-const nylasTimeslotPickerCss = ":host{display:block;height:calc(100% - 48px)}.time-picker-wrapper{display:flex;flex-direction:column;height:100%}.time-slots{position:relative;display:flex;flex-direction:column;gap:0.75rem;align-items:center;overflow-y:scroll;padding:0.5rem 1.5rem 1.5rem;flex:1}.time{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4px 12px;gap:0.5rem;font-size:16px;font-weight:500;font-family:inherit;width:100%;height:48px;color:var(--nylas-base-800);background:var(--nylas-base-0);border:none;outline:1.5px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);flex:none;order:4;align-self:stretch;flex-grow:0;cursor:pointer}.time:hover,.time:focus{color:var(--nylas-primary);outline-color:var(--nylas-primary)}.time.selected{font-weight:600;color:var(--nylas-primary);outline:2px solid var(--nylas-primary);border-color:transparent;box-shadow:0 0 0 2px var(--nylas-primary)}.empty{text-align:center;padding:0 1.5rem;color:var(--nylas-base-600);font-size:min(max(12px, 2vw), 14px);height:450px;display:flex;align-items:center;justify-content:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.loading{padding:0 1.5rem}.loading .time-slot-skeleton{width:100%;height:4rem;background-color:var(--nylas-base-50);margin-bottom:0.5rem;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out}.footer{width:100%;padding:14px;box-sizing:border-box;border-top:1px solid var(--nylas-base-200)}.footer sp-button{padding:14px;color:var(--nylas-base-100);border-radius:var(--nylas-border-radius-2x);width:100%;height:48px;font-weight:600;font-size:16px;background-color:var(--nylas-primary);border:none}.footer sp-button:hover,.footer sp-button:focus{background-color:var(--nylas-base-600)}.footer sp-button:active{background-color:var(--nylas-base-800)}";
+const nylasTimeslotPickerCss = ":host{display:block;height:calc(100% - 48px)}.time-picker-wrapper{display:flex;flex-direction:column;height:100%}.timeslots{position:relative;display:flex;flex-direction:column;gap:0.75rem;align-items:center;overflow-y:scroll;padding:0.5rem 1.5rem 1.5rem;flex:1}.time{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4px 12px;gap:0.5rem;font-size:16px;font-weight:500;font-family:inherit;width:100%;height:48px;color:var(--nylas-base-800);background:var(--nylas-base-0);border:none;outline:1.5px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);flex:none;order:4;align-self:stretch;flex-grow:0;cursor:pointer}.time:hover,.time:focus{color:var(--nylas-primary);outline-color:var(--nylas-primary)}.time.selected{font-weight:600;color:var(--nylas-primary);outline:2px solid var(--nylas-primary);border-color:transparent;box-shadow:0 0 0 2px var(--nylas-primary)}.empty{text-align:center;padding:0 1.5rem;color:var(--nylas-base-600);font-size:min(max(12px, 2vw), 14px);height:450px;display:flex;align-items:center;justify-content:center}@keyframes pulsate{0%{background-color:var(--nylas-base-50)}50%{background-color:var(--nylas-base-100)}100%{background-color:var(--nylas-base-50)}}.loading{padding:0 1.5rem}.loading .timeslot-skeleton{width:100%;height:4rem;background-color:var(--nylas-base-50);margin-bottom:0.5rem;border-radius:var(--nylas-border-radius-2x);animation:pulsate 1.5s infinite ease-in-out}.footer{width:100%;padding:14px;box-sizing:border-box;border-top:1px solid var(--nylas-base-200)}.footer sp-button{padding:14px;color:var(--nylas-base-100);border-radius:var(--nylas-border-radius-2x);width:100%;height:48px;font-weight:600;font-size:16px;background-color:var(--nylas-primary);border:none}.footer sp-button:hover,.footer sp-button:focus{background-color:var(--nylas-base-600)}.footer sp-button:active{background-color:var(--nylas-base-800)}";
 const NylasTimeslotPickerStyle0 = nylasTimeslotPickerCss;
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -65,12 +65,13 @@ const NylasTimeslotPicker = proxyCustomElement(class NylasTimeslotPicker extends
         this.timeslotSelected.emit({
             start_time: timeslot.start_time,
             end_time: timeslot.end_time,
+            emails: timeslot.emails,
         });
     }
     getTimeSlotLabel(timeslot) {
         const timeFormat = new Intl.DateTimeFormat('en-US', {
-            hour: 'numeric',
-            minute: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
             timeZone: this.selectedTimezone,
         });
         return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;
@@ -94,7 +95,7 @@ const NylasTimeslotPicker = proxyCustomElement(class NylasTimeslotPicker extends
     }
     render() {
         if (this.isLoading) {
-            return (h(Host, null, h("div", { class: 'loading' }, new Array(6).fill(0).map((_, i) => (h("div", { class: 'time-slot-skeleton', style: { animationDelay: `${i * 20}ms` } }))))));
+            return (h(Host, null, h("div", { class: 'loading' }, new Array(6).fill(0).map((_, i) => (h("div", { class: 'timeslot-skeleton', style: { animationDelay: `${i * 20}ms` } }))))));
         }
         if (this.availability && this.availability.length === 0) {
             return (h(Host, null, h("div", { class: 'empty' }, h("span", null, "No dates available"))));
@@ -104,7 +105,7 @@ const NylasTimeslotPicker = proxyCustomElement(class NylasTimeslotPicker extends
         }
         if (!this.selectedDate)
             return h(Host, null);
-        return (h(Host, { part: "ntp" }, h("div", { class: 'time-picker-wrapper' }, h("div", { class: 'time-slots' }, this.times.map((timeslot, index) => (h("button", { part: `ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`, "aria-role": "button", class: {
+        return (h(Host, { part: "ntp" }, h("div", { class: 'time-picker-wrapper' }, h("div", { class: 'timeslots' }, this.times.map((timeslot, index) => (h("button", { part: `ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`, "aria-role": "button", class: {
                 time: true,
                 selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),
             }, onClick: () => this.onClickSelectTime(timeslot, index), onMouseEnter: () => this.handleMouseEnter(index), onMouseLeave: () => this.handleMouseLeave() }, this.hoveredTimeslotIndex == index || this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)

package/dist/components/nylas-timeslot-picker2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nylas-timeslot-picker2.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.scss?tag=nylas-timeslot-picker&encapsulation=shadow","src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"sourcesContent":[":host {\n display: block;\n height: calc(100% - 48px); //48px is the height of the header\n}\n\n.time-picker-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.time-slots {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n align-items: center;\n overflow-y: scroll;\n padding: 0.5rem 1.5rem 1.5rem;\n flex: 1;\n}\n\n.time {\n /* Frame 12 /\n box-sizing: border-box;\n\n / Auto layout /\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 4px 12px;\n gap: 0.5rem;\n font-size: 16px;\n font-weight: 500;\n font-family: inherit;\n\n width: 100%;\n height: 48px;\n\n color: var(--nylas-base-800);\n background: var(--nylas-base-0);\n border: none;\n outline: 1.5px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n flex: none;\n order: 4;\n align-self: stretch;\n flex-grow: 0;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: var(--nylas-primary);\n outline-color: var(--nylas-primary);\n }\n\n &.selected {\n font-weight: 600;\n color: var(--nylas-primary);\n outline: 2px solid var(--nylas-primary);\n border-color: transparent;\n box-shadow: 0 0 0 2px var(--nylas-primary);\n }\n}\n\n.empty {\n text-align: center;\n padding: 0 1.5rem;\n color: var(--nylas-base-600);\n font-size: min(max(12px, 2vw), 14px);\n height: 450px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n@keyframes pulsate {\n 0% {\n background-color: var(--nylas-base-50);\n }\n 50% {\n background-color: var(--nylas-base-100);\n }\n 100% {\n background-color: var(--nylas-base-50);\n }\n}\n\n.loading {\n padding: 0 1.5rem;\n\n .time-slot-skeleton {\n width: 100%;\n height: 4rem;\n background-color: var(--nylas-base-50);\n margin-bottom: 0.5rem;\n border-radius: var(--nylas-border-radius-2x);\n animation: pulsate 1.5s infinite ease-in-out;\n }\n}\n\n.footer {\n width: 100%;\n padding: 14px;\n box-sizing: border-box;\n border-top: 1px solid var(--nylas-base-200);\n\n sp-button {\n padding: 14px;\n color: var(--nylas-base-100);\n border-radius: var(--nylas-border-radius-2x);\n width: 100%;\n height: 48px;\n font-weight: 600;\n font-size: 16px;\n background-color: var(--nylas-primary);\n border: none;\n &:hover,\n &:focus {\n background-color: var(--nylas-base-600);\n }\n &:active {\n background-color: var(--nylas-base-800);\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { debug, isSameDay } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { Timeslot } from '@nylas/core';\n\n/\n The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n \n @slot timeslot-picker-cta-label - The label for the timeslot picker CTA. Default is \"Next\".\n * @part ntp - The timeslot picker component.\n * @part ntp__timeslot - The timeslot button.\n * @part ntp__timeslot--selected - The selected timeslot button.\n * @part ntp__button-primary - The timeslot picker CTA.\n /\n@Component({\n tag: 'nylas-timeslot-picker',\n styleUrl: 'nylas-timeslot-picker.scss',\n shadow: true,\n})\nexport class NylasTimeslotPicker {\n /\n The selected date.\n /\n @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n /\n The available timeslots.\n /\n @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n /\n The selected timeslot.\n /\n @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n /\n The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop({ attribute: 'loading-state' }) readonly isLoading?: boolean;\n /\n The selected timezone.\n /\n @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n This event is fired when a timeslot is selected.\n /\n @Event() readonly timeslotSelected!: EventEmitter<Timeslot>;\n /\n This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.\n /\n @Event() readonly timeslotConfirmed!: EventEmitter<Timeslot>;\n\n @State() times: AvailabilityTimeslot[] = [];\n @State() hoveredTimeslotIndex?: number;\n @State() selectedTimeslotIndex?: string;\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\n }\n\n async componentDidLoad() {\n debug(`[nylas-timeslot-picker] Component did load`);\n }\n\n private getTimeslotId(date: Date, index: number) {\n return `${date.toLocaleDateString()}-${index}`;\n }\n\n private onClickSelectTime(timeslot: Timeslot, index: number) {\n debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);\n this.selectedTimeslotIndex = this.getTimeslotId(timeslot.start_time, index);\n this.timeslotSelected.emit({\n start_time: timeslot.start_time,\n end_time: timeslot.end_time,\n });\n }\n\n private handleConfirmedTimeslot = async (event: Event, timeslot: Timeslot \| undefined) => {\n event.preventDefault();\n debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);\n this.timeslotConfirmed.emit(timeslot);\n };\n\n private handleMouseEnter = (index: number) => {\n this.hoveredTimeslotIndex = index;\n };\n\n private handleMouseLeave = () => {\n this.hoveredTimeslotIndex = -1;\n };\n\n private getTimeSlotLabel(timeslot: Timeslot) {\n const timeFormat = new Intl.DateTimeFormat('en-US', {\n hour: 'numeric',\n minute: 'numeric',\n timeZone: this.selectedTimezone,\n });\n return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n }\n\n @Watch('selectedDate')\n selectedDateChanged(newVal: Date \| null \| undefined) {\n debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });\n\n if (newVal) {\n this.selectedTimeslotIndex = '';\n if (typeof newVal !== 'undefined') {\n const availableTimes = this.availability?.filter(timeslot => isSameDay(timeslot.start_time, newVal)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n }\n }\n\n @Watch('availability')\n availabilityChanged(newVal: AvailabilityTimeslot[] \| undefined) {\n debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });\n\n if (typeof newVal !== 'undefined') {\n const availableTimes = newVal?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n }\n\n @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-timeslot-picker',\n stateToProps: new Map([\n ['scheduler.selectedDate', 'selectedDate'],\n ['scheduler.availability', 'availability'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ['scheduler.isLoading', 'isLoading'],\n ]),\n eventToProps: {\n timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.selectTime(event.detail);\n },\n timeslotConfirmed: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n if (event.detail) {\n nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n if (this.isLoading) {\n return (\n <Host>\n <div class={'loading'}>\n {new Array(6).fill(0).map((_, i) => (\n <div class={'time-slot-skeleton'} style={{ animationDelay: `${i 20}ms` }} />\n ))}\n </div>\n </Host>\n );\n }\n\n if (this.availability && this.availability.length === 0) {\n return (\n <Host>\n <div class={'empty'}>\n <span>No dates available</span>\n </div>\n </Host>\n );\n }\n\n if ((!this.times \|\| this.times.length === 0) && !!this.selectedDate) {\n return (\n <Host>\n <div class={'empty'}>\n <span>No time slots available for selected date</span>\n </div>\n </Host>\n );\n }\n\n if (!this.selectedDate) return <Host></Host>;\n\n return (\n <Host part=\"ntp\">\n <div class={'time-picker-wrapper'}>\n <div class={'time-slots'}>\n {this.times.map((timeslot, index) => (\n <button\n part={`ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`}\n aria-role=\"button\"\n class={{\n time: true,\n selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),\n }}\n onClick={() => this.onClickSelectTime(timeslot, index)}\n onMouseEnter={() => this.handleMouseEnter(index)}\n onMouseLeave={() => this.handleMouseLeave()}\n >\n {this.hoveredTimeslotIndex == index \|\| this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)\n ? this.getTimeSlotLabel(timeslot)\n : timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone })}\n </button>\n ))}\n </div>\n {this.selectedTimeslot && (\n <div class={'footer'}>\n <sp-button variant=\"primary\" onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n <slot name=\"timeslot-picker-cta-label\">Next</slot>\n </sp-button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nylas-timeslot-picker2.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.scss?tag=nylas-timeslot-picker&encapsulation=shadow","src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"sourcesContent":[":host {\n display: block;\n height: calc(100% - 48px); //48px is the height of the header\n}\n\n.time-picker-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.timeslots {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n align-items: center;\n overflow-y: scroll;\n padding: 0.5rem 1.5rem 1.5rem;\n flex: 1;\n}\n\n.time {\n /* Frame 12 /\n box-sizing: border-box;\n\n / Auto layout /\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 4px 12px;\n gap: 0.5rem;\n font-size: 16px;\n font-weight: 500;\n font-family: inherit;\n\n width: 100%;\n height: 48px;\n\n color: var(--nylas-base-800);\n background: var(--nylas-base-0);\n border: none;\n outline: 1.5px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n flex: none;\n order: 4;\n align-self: stretch;\n flex-grow: 0;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: var(--nylas-primary);\n outline-color: var(--nylas-primary);\n }\n\n &.selected {\n font-weight: 600;\n color: var(--nylas-primary);\n outline: 2px solid var(--nylas-primary);\n border-color: transparent;\n box-shadow: 0 0 0 2px var(--nylas-primary);\n }\n}\n\n.empty {\n text-align: center;\n padding: 0 1.5rem;\n color: var(--nylas-base-600);\n font-size: min(max(12px, 2vw), 14px);\n height: 450px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n@keyframes pulsate {\n 0% {\n background-color: var(--nylas-base-50);\n }\n\n 50% {\n background-color: var(--nylas-base-100);\n }\n\n 100% {\n background-color: var(--nylas-base-50);\n }\n}\n\n.loading {\n padding: 0 1.5rem;\n\n .timeslot-skeleton {\n width: 100%;\n height: 4rem;\n background-color: var(--nylas-base-50);\n margin-bottom: 0.5rem;\n border-radius: var(--nylas-border-radius-2x);\n animation: pulsate 1.5s infinite ease-in-out;\n }\n}\n\n.footer {\n width: 100%;\n padding: 14px;\n box-sizing: border-box;\n border-top: 1px solid var(--nylas-base-200);\n\n sp-button {\n padding: 14px;\n color: var(--nylas-base-100);\n border-radius: var(--nylas-border-radius-2x);\n width: 100%;\n height: 48px;\n font-weight: 600;\n font-size: 16px;\n background-color: var(--nylas-primary);\n border: none;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-600);\n }\n\n &:active {\n background-color: var(--nylas-base-800);\n }\n }\n}","import { RegisterComponent } from '@/common/register-component';\nimport { debug, isSameDay } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { Timeslot } from '@nylas/core';\n\n/\n The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n \n @slot timeslot-picker-cta-label - The label for the timeslot picker CTA. Default is \"Next\".\n * @part ntp - The timeslot picker component.\n * @part ntp__timeslot - The timeslot button.\n * @part ntp__timeslot--selected - The selected timeslot button.\n * @part ntp__button-primary - The timeslot picker CTA.\n /\n@Component({\n tag: 'nylas-timeslot-picker',\n styleUrl: 'nylas-timeslot-picker.scss',\n shadow: true,\n})\nexport class NylasTimeslotPicker {\n /\n The selected date.\n /\n @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n /\n The available timeslots.\n /\n @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n /\n The selected timeslot.\n /\n @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n /\n The loading state prop. Used to display loading state when fetching availability.\n /\n @Prop({ attribute: 'loading-state' }) readonly isLoading?: boolean;\n /\n The selected timezone.\n /\n @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n /\n This event is fired when a timeslot is selected.\n /\n @Event() readonly timeslotSelected!: EventEmitter<Timeslot>;\n /\n This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.\n /\n @Event() readonly timeslotConfirmed!: EventEmitter<Timeslot>;\n\n @State() times: AvailabilityTimeslot[] = [];\n @State() hoveredTimeslotIndex?: number;\n @State() selectedTimeslotIndex?: string;\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\n }\n\n async componentDidLoad() {\n debug(`[nylas-timeslot-picker] Component did load`);\n }\n\n private getTimeslotId(date: Date, index: number) {\n return `${date.toLocaleDateString()}-${index}`;\n }\n\n private onClickSelectTime(timeslot: Timeslot, index: number) {\n debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);\n this.selectedTimeslotIndex = this.getTimeslotId(timeslot.start_time, index);\n this.timeslotSelected.emit({\n start_time: timeslot.start_time,\n end_time: timeslot.end_time,\n emails: timeslot.emails,\n });\n }\n\n private handleConfirmedTimeslot = async (event: Event, timeslot: Timeslot \| undefined) => {\n event.preventDefault();\n debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);\n this.timeslotConfirmed.emit(timeslot);\n };\n\n private handleMouseEnter = (index: number) => {\n this.hoveredTimeslotIndex = index;\n };\n\n private handleMouseLeave = () => {\n this.hoveredTimeslotIndex = -1;\n };\n\n private getTimeSlotLabel(timeslot: Timeslot) {\n const timeFormat = new Intl.DateTimeFormat('en-US', {\n hour: '2-digit',\n minute: '2-digit',\n timeZone: this.selectedTimezone,\n });\n return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n }\n\n @Watch('selectedDate')\n selectedDateChanged(newVal: Date \| null \| undefined) {\n debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });\n\n if (newVal) {\n this.selectedTimeslotIndex = '';\n if (typeof newVal !== 'undefined') {\n const availableTimes = this.availability?.filter(timeslot => isSameDay(timeslot.start_time, newVal)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n }\n }\n\n @Watch('availability')\n availabilityChanged(newVal: AvailabilityTimeslot[] \| undefined) {\n debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });\n\n if (typeof newVal !== 'undefined') {\n const availableTimes = newVal?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n this.times = availableTimes \|\| [];\n }\n }\n\n @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-timeslot-picker',\n stateToProps: new Map([\n ['scheduler.selectedDate', 'selectedDate'],\n ['scheduler.availability', 'availability'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.selectedTimezone', 'selectedTimezone'],\n ['scheduler.isLoading', 'isLoading'],\n ]),\n eventToProps: {\n timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.selectTime(event.detail);\n },\n timeslotConfirmed: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n if (event.detail) {\n nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n }\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n if (this.isLoading) {\n return (\n <Host>\n <div class={'loading'}>\n {new Array(6).fill(0).map((_, i) => (\n <div class={'timeslot-skeleton'} style={{ animationDelay: `${i 20}ms` }} />\n ))}\n </div>\n </Host>\n );\n }\n\n if (this.availability && this.availability.length === 0) {\n return (\n <Host>\n <div class={'empty'}>\n <span>No dates available</span>\n </div>\n </Host>\n );\n }\n\n if ((!this.times \|\| this.times.length === 0) && !!this.selectedDate) {\n return (\n <Host>\n <div class={'empty'}>\n <span>No time slots available for selected date</span>\n </div>\n </Host>\n );\n }\n\n if (!this.selectedDate) return <Host></Host>;\n\n return (\n <Host part=\"ntp\">\n <div class={'time-picker-wrapper'}>\n <div class={'timeslots'}>\n {this.times.map((timeslot, index) => (\n <button\n part={`ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`}\n aria-role=\"button\"\n class={{\n time: true,\n selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),\n }}\n onClick={() => this.onClickSelectTime(timeslot, index)}\n onMouseEnter={() => this.handleMouseEnter(index)}\n onMouseLeave={() => this.handleMouseLeave()}\n >\n {this.hoveredTimeslotIndex == index \|\| this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)\n ? this.getTimeSlotLabel(timeslot)\n : timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone })}\n </button>\n ))}\n </div>\n {this.selectedTimeslot && (\n <div class={'footer'}>\n <sp-button variant=\"primary\" onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n <slot name=\"timeslot-picker-cta-label\">Next</slot>\n </sp-button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nylas-view-email2.js CHANGED Viewed

@@ -1818,7 +1818,7 @@ const NylasViewEmail = proxyCustomElement(class NylasViewEmail extends HTMLEleme
     }
     render() {
         console.debug(`[nylas-view-email] render`, { hoistedFontURLs: this.hoistedFontURLs });
-        return (h(Host, { key: '4f0a1e688ae465d65943adc7dabac9cad6c62fe8' }, this.state === 'loading' && h("div", null, "Loading..."), this.state === 'ready' && (h(Fragment, null, this.styles.map(style => (h("style", null, DOMPurify.sanitize(style.innerHTML)))), h("div", { class: 'view-email', part: "view-email", innerHTML: this.sanitizedBody, ref: el => (this.viewEmailElement = el) })))));
+        return (h(Host, { key: '285c8ae259a5c1de84aa7facdc2165f1f0383e31' }, this.state === 'loading' && h("div", null, "Loading..."), this.state === 'ready' && (h(Fragment, null, this.styles.map(style => (h("style", null, DOMPurify.sanitize(style.innerHTML)))), h("div", { class: 'view-email', part: "view-email", innerHTML: this.sanitizedBody, ref: el => (this.viewEmailElement = el) })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/nylas-view-thread.js CHANGED Viewed

@@ -201,7 +201,7 @@ const NylasViewThread$1 = proxyCustomElement(class NylasViewThread extends HTMLE
         const lastTwoMessages = this.internalMessages.slice(this.internalMessages.length - 2, this.internalMessages.length);
         const remainingMessages = this.internalMessages.slice(1, this.internalMessages.length - 2);
         const lastMessage = this.internalMessages[this.internalMessages.length - 1];
-        return (h(Host, { key: 'b9bcde80e7ee15061bfc217d99bb9422dfbe1d04' }, h("sp-theme", { key: '965e53796323e3e13983447abb4ac1b3a8651daa', scale: "medium", color: "dark" }, h("div", { key: '9efc644121efd09a2e837c23f9f8da80589f870b', class: "view-thread" }, h("div", { key: 'c1479929b6679a1b47f03dfe6d5cc1128484b703', class: "header" }, h("div", { key: '00c6788a461f9f6ca4532fb2acb2bf08e0f0c118', class: 'subject' }, this.thread?.subject), h("div", { key: '2e114754a9dd830e4a124cd9079ad4cf725908bd', class: 'folders' }, this.thread?.folders?.map(folder => h("sp-tag", { size: "s" }, toTitleCase(folder.replace('CATEGORY_', '').replace('_', ' ')))))), h("div", { key: '136d6a314c647991218dfe4090fa97c8d98b210d', class: "messages" }, fistMessage && (h(ViewThreadMessage, { message: fistMessage, attachments: this.attachments.filter(attachment => attachment.messageId === fistMessage.id), onMessageClick: this.onMessageClick, onShowContactDataClick: this.onShowContactDataClick, parent: this.host, viewEmailElement: this.nylasViewEmailElement, composerElement: this.nylasComposerElement })), remainingMessages.length > 0 && this.messages.length > 1 && !this.showAllEmails && lastTwoMessages.length > 0 && (h(Fragment, null, h("div", { class: 'show-more' }, h("button", { type: "button", onClick: this.onShowAllEmailsClick }, h("span", { class: 'avatar' }, remainingMessages.length), " ", h("span", { class: 'sr-only' }, "Show ", remainingMessages.length, " more emails"))), h("hr", null))), remainingMessages.length > 0 &&
+        return (h(Host, { key: '053c38f3da8b8535d0a71d51539660ce6eef6fb8' }, h("sp-theme", { key: 'dcb9a12a2577ed0cd183887355237e9a671f9cf9', scale: "medium", color: "dark" }, h("div", { key: 'b3d0f0d355cad065a790e6ad8f7f31692bd30b3f', class: "view-thread" }, h("div", { key: '47f588ecc5dbd6e9f680033c6784f9bfc3587dcb', class: "header" }, h("div", { key: 'cf102cc90b56d71d6fb2a98bc335189eb3e3b801', class: 'subject' }, this.thread?.subject), h("div", { key: '3bb42a18ce5b440c1bf76c491676a3570f4dd20b', class: 'folders' }, this.thread?.folders?.map(folder => h("sp-tag", { size: "s" }, toTitleCase(folder.replace('CATEGORY_', '').replace('_', ' ')))))), h("div", { key: 'a6a5a8bbebff5ee2fb0f101669614d7376f9da47', class: "messages" }, fistMessage && (h(ViewThreadMessage, { message: fistMessage, attachments: this.attachments.filter(attachment => attachment.messageId === fistMessage.id), onMessageClick: this.onMessageClick, onShowContactDataClick: this.onShowContactDataClick, parent: this.host, viewEmailElement: this.nylasViewEmailElement, composerElement: this.nylasComposerElement })), remainingMessages.length > 0 && this.messages.length > 1 && !this.showAllEmails && lastTwoMessages.length > 0 && (h(Fragment, null, h("div", { class: 'show-more' }, h("button", { type: "button", onClick: this.onShowAllEmailsClick }, h("span", { class: 'avatar' }, remainingMessages.length), " ", h("span", { class: 'sr-only' }, "Show ", remainingMessages.length, " more emails"))), h("hr", null))), remainingMessages.length > 0 &&
             this.showAllEmails &&
             this.messages.length > 2 &&
             remainingMessages.map(email => (h(ViewThreadMessage, { message: email, attachments: this.attachments.filter(attachment => attachment.messageId === fistMessage?.id), onMessageClick: this.onMessageClick, onShowContactDataClick: this.onShowContactDataClick, parent: this.host, viewEmailElement: this.nylasViewEmailElement, composerElement: this.nylasComposerElement }))), lastTwoMessages.length > 0 &&

package/dist/components/people.js CHANGED Viewed

@@ -11,7 +11,7 @@ const PeopleIcon = proxyCustomElement(class PeopleIcon extends HTMLElement {
         this.height = '20';
     }
     render() {
-        return (h("svg", { key: '4a54f616162baf613895348e27cafd2088f5fd16', xmlns: "http://www.w3.org/2000/svg", width: this.width, height: this.height, fill: "none", viewBox: "0 0 20 20" }, h("path", { key: '80e1ca7240235b635a08369ba836e727825b7be4', fill: "currentColor", d: "M11 10a2 2 0 0 1 2 2v1.5c0 2.054-2.088 3.5-5.5 3.5S2 15.554 2 13.5V12a2 2 0 0 1 2-2h7Zm0 1H4a1 1 0 0 0-1 1v1.5C3 14.907 4.579 16 7.5 16c2.921 0 4.5-1.093 4.5-2.5V12a1 1 0 0 0-1-1Zm5-1a2 2 0 0 1 2 2v.5c0 2.089-1.568 3.5-4.5 3.5-.141 0-.28-.003-.414-.01.208-.242.382-.502.522-.781l.097-.213h.039C15.976 14.931 17 13.96 17 12.5V12a1 1 0 0 0-1-1h-2.171a3 3 0 0 0-.594-1H16ZM7.5 2a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm7 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm-7-1a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm7 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" })));
+        return (h("svg", { key: '5988d6a752795c93676e48b9a3f3989ebe4e3a5f', xmlns: "http://www.w3.org/2000/svg", width: this.width, height: this.height, fill: "none", viewBox: "0 0 20 20" }, h("path", { key: '25b7fd2d045c637815cc8e76cd9406d2ae9bc127', fill: "currentColor", d: "M11 10a2 2 0 0 1 2 2v1.5c0 2.054-2.088 3.5-5.5 3.5S2 15.554 2 13.5V12a2 2 0 0 1 2-2h7Zm0 1H4a1 1 0 0 0-1 1v1.5C3 14.907 4.579 16 7.5 16c2.921 0 4.5-1.093 4.5-2.5V12a1 1 0 0 0-1-1Zm5-1a2 2 0 0 1 2 2v.5c0 2.089-1.568 3.5-4.5 3.5-.141 0-.28-.003-.414-.01.208-.242.382-.502.522-.781l.097-.213h.039C15.976 14.931 17 13.96 17 12.5V12a1 1 0 0 0-1-1h-2.171a3 3 0 0 0-.594-1H16ZM7.5 2a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm7 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm-7-1a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm7 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" })));
     }
     static get style() { return PeopleIconStyle0; }
 }, [2, "people-icon", {

package/dist/components/person.js CHANGED Viewed

@@ -11,7 +11,7 @@ const PersonIcon = proxyCustomElement(class PersonIcon extends HTMLElement {
         this.height = '16';
     }
     render() {
-        return (h("svg", { key: '55b014fefee568d32972a083bc2aad02b5150fa8', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8129a1e94d2c50afd5a3a375ffe98cf7e7b6374f', d: "M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z", fill: "currentColor" })));
+        return (h("svg", { key: '2fb0a78fae1d4ddf552207e44b9ce63e785ca8df', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3574c670090c1df5b950388211e0916903c50be8', d: "M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z", fill: "currentColor" })));
     }
     static get style() { return PersonIconStyle0; }
 }, [2, "person-icon", {

package/dist/components/play.js CHANGED Viewed

@@ -11,7 +11,7 @@ const PlayIcon = proxyCustomElement(class PlayIcon extends HTMLElement {
         this.height = '15';
     }
     render() {
-        return (h("svg", { key: '1b5bba2078843e9faf11f53d9bc851c66d1f7532', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "auto", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9729442ffb92522f0c035cf51ed4a0db56650e49', d: "M21 12L3 21V3L21 12Z", stroke: "auto", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+        return (h("svg", { key: '96ab1fb2b57c497d3d6b8ebbc0c2e5fa4206ea9b', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "auto", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1783e27f9fee56b62c8ebf0259b871c5879477b1', d: "M21 12L3 21V3L21 12Z", stroke: "auto", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
     }
     static get style() { return PlayIconStyle0; }
 }, [2, "play-icon", {

package/dist/components/plus-icon.d.ts ADDED Viewed

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

package/dist/components/plus-icon.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { P as PlusIcon$1, d as defineCustomElement$1 } from './plus.js';
+const PlusIcon = PlusIcon$1;
+const defineCustomElement = defineCustomElement$1;
+export { PlusIcon, defineCustomElement };
+//# sourceMappingURL=plus-icon.js.map

package/dist/components/plus-icon.js.map ADDED Viewed

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

package/dist/components/plus.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+const iconCss = ".sc-plus-icon-h{display:flex}";
+const PlusIconStyle0 = iconCss;
+const PlusIcon = proxyCustomElement(class PlusIcon extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.width = '20';
+        this.height = '20';
+    }
+    render() {
+        return (h("svg", { key: 'c58a1023ad8c0ccaf503be873804b12fcfc06961', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1512de7f63c2ee92e44711ec13b0c79ac2521c41', d: "M8.5 1C8.5 0.723858 8.27614 0.5 8 0.5C7.72386 0.5 7.5 0.723858 7.5 1V7.5H1C0.723858 7.5 0.5 7.72386 0.5 8C0.5 8.27614 0.723858 8.5 1 8.5H7.5V15C7.5 15.2761 7.72386 15.5 8 15.5C8.27614 15.5 8.5 15.2761 8.5 15V8.5H15C15.2761 8.5 15.5 8.27614 15.5 8C15.5 7.72386 15.2761 7.5 15 7.5H8.5V1Z", fill: "currentColor" })));
+    }
+    static get style() { return PlusIconStyle0; }
+}, [2, "plus-icon", {
+        "width": [1],
+        "height": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["plus-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "plus-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PlusIcon);
+            }
+            break;
+    } });
+}
+export { PlusIcon as P, defineCustomElement as d };
+//# sourceMappingURL=plus.js.map

package/dist/components/plus.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"plus.js","mappings":";;AAAA,MAAM,OAAO,GAAG,+BAA+B,CAAC;AAChD,uBAAe,OAAO;;MCMT,QAAQ;;;;qBACK,IAAI;sBACH,IAAI;;IAE7B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IACzF,6DACE,CAAC,EAAC,+RAA+R,EACjS,IAAI,EAAC,cAAc,GACnB,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/common/icons/icon.css?tag=plus-icon&encapsulation=scoped","src/common/icons/plus.tsx"],"sourcesContent":[":host {\n display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'plus-icon',\n styleUrl: 'icon.css',\n scoped: true,\n})\nexport class PlusIcon {\n @Prop() width: string = '20';\n @Prop() height: string = '20';\n\n render() {\n return (\n <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.5 1C8.5 0.723858 8.27614 0.5 8 0.5C7.72386 0.5 7.5 0.723858 7.5 1V7.5H1C0.723858 7.5 0.5 7.72386 0.5 8C0.5 8.27614 0.723858 8.5 1 8.5H7.5V15C7.5 15.2761 7.72386 15.5 8 15.5C8.27614 15.5 8.5 15.2761 8.5 15V8.5H15C15.2761 8.5 15.5 8.27614 15.5 8C15.5 7.72386 15.2761 7.5 15 7.5H8.5V1Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n }\n}\n"],"version":3}

package/dist/components/radio-button-group2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-const radioButtonGroupCss = ".radio-group{display:flex;flex-direction:column}.radio-group label{display:flex;font-family:var(--nylas-font-family);cursor:pointer}.radio-group label .radio-option{display:flex;align-items:flex-start;gap:0.5rem}.radio-group label .radio-option input[type=radio]{cursor:pointer}.radio-group label .radio-option input[type=radio i]{width:20px;height:20px;color:var(--nylas-primary);margin-top:16px}.radio-group label .radio-option p{display:flex;flex-direction:column;gap:0.5rem}.radio-group label .radio-option p .title{font-size:16px;font-weight:500;line-height:20px;color:var(--nylas-base-800)}.radio-group label .radio-option p .description{font-size:14px;font-weight:400;line-height:20px;color:var(--nylas-base-600)}";
+const radioButtonGroupCss = ".radio-group{display:flex;flex-direction:column;gap:0.5rem;--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}.radio-group slot[name=label]{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;font-size:16px}.radio-group slot[name=label].error{color:var(--nylas-error)}.radio-group slot[name=label] span.required{color:var(--nylas-error);padding:0 0.25rem}.radio-group slot[name=label] p{margin:0}.radio-group slot[name=label] p.error{color:var(--nylas-error)}.radio-group slot[name=label] .error{color:var(--nylas-error)}.radio-group span.error{color:var(--nylas-error);font-size:14px;font-weight:400;line-height:20px;font-family:var(--nylas-font-family)}.radio-group label{display:flex;font-family:var(--nylas-font-family);cursor:pointer}.radio-group label .radio-option{display:flex;align-items:flex-start;gap:0.5rem}.radio-group label .radio-option input[type=radio]{cursor:pointer}.radio-group label .radio-option input[type=radio i]{width:20px;height:20px;color:var(--nylas-primary)}.radio-group label .radio-option p{display:flex;flex-direction:column;gap:0.5rem;margin:0}.radio-group label .radio-option p .title{font-size:16px;font-weight:500;line-height:20px;color:var(--nylas-base-800)}.radio-group label .radio-option p .description{font-size:14px;font-weight:400;line-height:20px;color:var(--nylas-base-600)}";
 const RadioButtonGroupStyle0 = radioButtonGroupCss;
 const RadioButtonGroup = proxyCustomElement(class RadioButtonGroup extends HTMLElement {
@@ -8,29 +8,46 @@ const RadioButtonGroup = proxyCustomElement(class RadioButtonGroup extends HTMLE
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.radioSelectionChanged = createEvent(this, "radioSelectionChanged", 7);
+        this.nylasFormRadioChanged = createEvent(this, "nylasFormRadioChanged", 7);
         this.name = 'radio-group';
         this.options = [];
         this.defaultSelectedValue = '';
+        this.label = undefined;
+        this.required = false;
         this.selectedValue = this.defaultSelectedValue;
+        this.error = '';
+    }
+    handleBookingFormSubmitted(event) {
+        if (this.required && !this.selectedValue) {
+            this.error = `${this.label} is required.`;
+            return;
+        }
+        if (this.error) {
+            event.preventDefault();
+        }
     }
     handleChange(value) {
+        this.error = '';
         this.selectedValue = value;
-        this.radioSelectionChanged.emit({
+        this.nylasFormRadioChanged.emit({
             value,
             name: this.name,
+            label: this.label,
         });
     }
     render() {
-        return (h("div", { key: '82c0a38507193f6e941c820c38f9e5c477dc14dc', class: "radio-group" }, this.options.map(option => (h("label", null, h("div", { class: "radio-option" }, h("input", { type: "radio", name: this.name, value: option.value, checked: this.selectedValue === option.value, onChange: () => this.handleChange(option.value) }), h("p", null, h("span", { class: "title" }, option.label), h("span", { class: "description" }, option.description))))))));
+        return (h("div", { key: '11cf3c389f44bd4758e4b649e7714c4b43eac706', class: "radio-group" }, h("slot", { key: 'fc49aed7f9f72234f78146c3cb32cafba1f5f8ea', name: "label" }, this.label && (h("p", { class: { error: !!this.error } }, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")))), this.options.map(option => (h("label", null, h("div", { class: "radio-option" }, h("input", { type: "radio", name: this.name, value: option.value, checked: this.selectedValue === option.value, onChange: () => this.handleChange(option.value) }), h("p", null, h("span", { class: "title" }, option.label), h("span", { class: "description" }, option.description)))))), this.error && h("span", { class: "error help-text" }, this.error)));
     }
     static get style() { return RadioButtonGroupStyle0; }
 }, [1, "radio-button-group", {
         "name": [1],
         "options": [16],
         "defaultSelectedValue": [1, "default-selected-value"],
-        "selectedValue": [32]
-    }]);
+        "label": [1],
+        "required": [4],
+        "selectedValue": [32],
+        "error": [32]
+    }, [[4, "bookingFormSubmitted", "handleBookingFormSubmitted"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/radio-button-group2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"radio-button-group2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,~~ktBAAktB~~,CAAC;AAC/uB,+BAAe,mBAAmB;;~~MCOrB~~,gBAAgB;;;;;;~~oBACJ~~,aAAa;~~uBACwC~~,EAAE;~~oCACvC~~,EAAE;~~6BACR~~,IAAI,CAAC,oBAAoB;;~~IAU1D~~,YAAY,CAAC,KAAa;QACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,KAAK;YACL,IAAI,EAAE,IAAI,CAAC,IAAI;~~SAChB~~,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,aAAa,~~IACrB~~,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtB,iBACE,WAAK,KAAK,EAAC,cAAc,IACvB,aAAO,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,EAC3J,aACE,YAAM,KAAK,EAAC,OAAO,IAAE,MAAM,CAAC,KAAK,CAAQ,EACzC,YAAM,KAAK,EAAC,aAAa,IAAE,MAAM,CAAC,WAAW,CAAQ,CACnD,CACA,CACA,CACT,CAAC,~~CACE~~,EACN;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/design-system/radio-button-group/radio-button-group.scss?tag=radio-button-group&encapsulation=shadow","src/components/design-system/radio-button-group/radio-button-group.tsx"],"sourcesContent":[".radio-group {\n display: flex;\n flex-direction: column;\n label {\n display: flex;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n .radio-option {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n input[type='radio'] {\n cursor: pointer;\n }\n input[type='radio' i] {\n width: 20px;\n height: 20px;\n color: var(--nylas-primary);\n ~~margin-top: 16px;\n~~ }\n p {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n .title {\n font-size: 16px;\n font-weight: 500;\n line-height: 20px;\n color: var(--nylas-base-800);\n }\n .description {\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n }\n }\n }\n }\n}\n","// src/components/radio-group/radio-group.tsx\nimport { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'radio-button-group',\n styleUrl: 'radio-button-group.scss',\n shadow: true,\n})\nexport class RadioButtonGroup {\n @Prop() name: string = 'radio-group';\n @Prop() options: { label: string; value: string; description?: string }[] = [];\n @Prop() defaultSelectedValue: string = '';\n @State() selectedValue: string = this.defaultSelectedValue;\n\n /*\n This event is fired when the selected value changes.\n */\n @Event() ~~radioSelectionChanged~~!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n handleChange(value: string) {\n this.selectedValue = value;\n this.~~radioSelectionChanged~~.emit({\n value,\n name: this.name,\n });\n }\n\n render() {\n return (\n <div class=\"radio-group\">\n {this.options.map(option => (\n <label>\n <div class=\"radio-option\">\n <input type=\"radio\" name={this.name} value={option.value} checked={this.selectedValue === option.value} onChange={() => this.handleChange(option.value)} />\n <p>\n <span class=\"title\">{option.label}</span>\n <span class=\"description\">{option.description}</span>\n </p>\n </div>\n </label>\n ))}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"radio-button-group2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,k5DAAk5D,CAAC;AAC/6D,+BAAe,mBAAmB;;MCWrB,gBAAgB;;;;;;oBAIJ,aAAa;uBAKwC,EAAE;oCAIvC,EAAE;;wBAUb,KAAK;6BAIA,IAAI,CAAC,oBAAoB;qBAIjC,EAAE;;IAe3B,0BAA0B,CAAC,KAAkB;QAC3C,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACxC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,eAAe,CAAC;YAC1C,OAAO;SACR;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAED,YAAY,CAAC,KAAa;QACxB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,KAAK;YACL,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,OAAO,IACf,IAAI,CAAC,KAAK,KACT,SAAG,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,IAC/B,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,EACtC,IAAI,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,UAAU,QAAS,CAC/C,CACL,CACI,EACN,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtB,iBACE,WAAK,KAAK,EAAC,cAAc,IACvB,aAAO,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,EAC3J,aACE,YAAM,KAAK,EAAC,OAAO,IAAE,MAAM,CAAC,KAAK,CAAQ,EACzC,YAAM,KAAK,EAAC,aAAa,IAAE,MAAM,CAAC,WAAW,CAAQ,CACnD,CACA,CACA,CACT,CAAC,EACD,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC5D,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/design-system/radio-button-group/radio-button-group.scss?tag=radio-button-group&encapsulation=shadow","src/components/design-system/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n @include default-css-variables;\n\n slot[name='label'] {\n @include input-label;\n font-size: 16px;\n\n p {\n margin: 0;\n\n &.error {\n color: var(--nylas-error);\n }\n }\n\n .error {\n color: var(--nylas-error);\n }\n }\n\n span.error {\n color: var(--nylas-error);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n font-family: var(--nylas-font-family);\n }\n\n label {\n display: flex;\n\n font-family: var(--nylas-font-family);\n cursor: pointer;\n\n .radio-option {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n\n input[type='radio'] {\n cursor: pointer;\n }\n\n input[type='radio' i] {\n width: 20px;\n height: 20px;\n color: var(--nylas-primary);\n }\n\n p {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0;\n\n .title {\n font-size: 16px;\n font-weight: 500;\n line-height: 20px;\n color: var(--nylas-base-800);\n }\n\n .description {\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n }\n }\n }\n }\n}\n","// src/components/radio-group/radio-group.tsx\nimport { Component, h, Prop, State, Event, EventEmitter, Listen } from '@stencil/core';\n\n/*\n The `radio-button-group` component is a UI component that allows users to select a single option from a list of options.\n * This component is used in the scheduling form to input radio button type inputs.\n /\n@Component({\n tag: 'radio-button-group',\n styleUrl: 'radio-button-group.scss',\n shadow: true,\n})\nexport class RadioButtonGroup {\n /\n The name of the radio group. This is used to identify the radio group when submitting a form.\n /\n @Prop() name: string = 'radio-group';\n /\n The list of options in the radio group.\n * Each option has a label and a value and an optional description.\n /\n @Prop() options: { label: string; value: string; description?: string }[] = [];\n /\n The default selected value of the radio group.\n /\n @Prop() defaultSelectedValue: string = '';\n /\n The label of the radio group. This is displayed above the radio group.\n * Label is optional. You can also use the slot 'label' to add a label.\n /\n @Prop() label?: string;\n /\n Whether the radio group is required. If true, the radio group must have a value when submitting a form.\n * Default is false. If the radio group is required and the value is empty, an error message is displayed.\n /\n @Prop() required: boolean = false;\n /\n The selected value of the radio group.\n /\n @State() selectedValue: string = this.defaultSelectedValue;\n /\n The error message state.\n /\n @State() error: string = '';\n /\n This event is fired when the selected value changes.\n /\n @Event() nylasFormRadioChanged!: EventEmitter<{\n value: string;\n name: string;\n label?: string;\n }>;\n\n // Event listeners\n /\n Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n /\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n if (this.required && !this.selectedValue) {\n this.error = `${this.label} is required.`;\n return;\n }\n if (this.error) {\n event.preventDefault();\n }\n }\n\n handleChange(value: string) {\n this.error = '';\n this.selectedValue = value;\n this.nylasFormRadioChanged.emit({\n value,\n name: this.name,\n label: this.label,\n });\n }\n\n render() {\n return (\n <div class=\"radio-group\">\n <slot name=\"label\">\n {this.label && (\n <p class={{ error: !!this.error }}>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n )}\n </slot>\n {this.options.map(option => (\n <label>\n <div class=\"radio-option\">\n <input type=\"radio\" name={this.name} value={option.value} checked={this.selectedValue === option.value} onChange={() => this.handleChange(option.value)} />\n <p>\n <span class=\"title\">{option.label}</span>\n <span class=\"description\">{option.description}</span>\n </p>\n </div>\n </label>\n ))}\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/refresh.js CHANGED Viewed

@@ -11,7 +11,7 @@ const RefreshIcon = proxyCustomElement(class RefreshIcon extends HTMLElement {
         this.height = '15';
     }
     render() {
-        return (h("svg", { key: 'e3570d2edebf65b741e348cfbbc51060485e787f', fill: "auto", width: this.width, height: this.height, viewBox: "0 0 32 32", version: "1.1", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9084837664b3a5b5269fc0bb936732b785620f6c', d: "M15.544 28.080c-0.002-0.006-0.008-0.010-0.012-0.015l-2.873-4.489c-0.204-0.335-0.646-0.454-0.992-0.266l-0.256 0.157c-0.344 0.188-0.337 0.673-0.133 1.008l1.841 2.857c-0.157-0.035-0.316-0.063-0.471-0.103-3.224-0.843-5.953-3.026-7.485-5.988-1.448-2.797-1.72-5.99-0.766-8.992s3.118-5.452 5.915-6.899c0.476-0.247 0.662-0.832 0.416-1.308-0.246-0.477-0.832-0.663-1.308-0.416-3.258 1.686-5.763 4.54-6.874 8.036s-0.794 7.215 0.892 10.473c1.786 3.448 4.963 5.989 8.72 6.973 0.043 0.011 0.087 0.017 0.13 0.028l-2.541 1.288c-0.344 0.189-0.458 0.613-0.254 0.948l0.098 0.256c0.205 0.335 0.557 0.454 0.9 0.266l4.651-2.381c0.006-0.004 0.012-0.003 0.018-0.007l0.312-0.171c0.172-0.095 0.287-0.249 0.332-0.422 0.047-0.172 0.025-0.364-0.076-0.531zM28.559 10.025c-1.783-3.447-4.862-5.988-8.618-6.972-0.267-0.070-0.541-0.124-0.814-0.179l2.494-1.265c0.344-0.189 0.549-0.614 0.345-0.949l-0.099-0.255c-0.205-0.336-0.648-0.454-0.991-0.267l-4.651 2.381c-0.006 0.003-0.012 0.002-0.018 0.006l-0.312 0.171c-0.173 0.095-0.287 0.249-0.332 0.422-0.047 0.172-0.025 0.364 0.077 0.53l0.185 0.304c0.003 0.006 0.008 0.010 0.012 0.016l2.873 4.489c0.203 0.335 0.646 0.454 0.991 0.266l0.226-0.157c0.344-0.188 0.366-0.673 0.163-1.008l-1.85-2.87c0.407 0.063 0.811 0.138 1.207 0.242 3.226 0.845 5.856 3.027 7.387 5.986 1.448 2.797 1.72 5.99 0.765 8.991s-3.020 5.451-5.818 6.901c-0.476 0.247-0.662 0.831-0.415 1.308 0.172 0.332 0.511 0.524 0.863 0.524 0.15 0 0.302-0.035 0.446-0.109 3.259-1.686 5.664-4.54 6.776-8.035 1.111-3.497 0.794-7.217-0.893-10.473z" })));
+        return (h("svg", { key: 'b8e3ce375654d185239b5e565cd67dfe716be159', fill: "auto", width: this.width, height: this.height, viewBox: "0 0 32 32", version: "1.1", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ac2d663d785eb66715cc6f3e7af97ffda35ec883', d: "M15.544 28.080c-0.002-0.006-0.008-0.010-0.012-0.015l-2.873-4.489c-0.204-0.335-0.646-0.454-0.992-0.266l-0.256 0.157c-0.344 0.188-0.337 0.673-0.133 1.008l1.841 2.857c-0.157-0.035-0.316-0.063-0.471-0.103-3.224-0.843-5.953-3.026-7.485-5.988-1.448-2.797-1.72-5.99-0.766-8.992s3.118-5.452 5.915-6.899c0.476-0.247 0.662-0.832 0.416-1.308-0.246-0.477-0.832-0.663-1.308-0.416-3.258 1.686-5.763 4.54-6.874 8.036s-0.794 7.215 0.892 10.473c1.786 3.448 4.963 5.989 8.72 6.973 0.043 0.011 0.087 0.017 0.13 0.028l-2.541 1.288c-0.344 0.189-0.458 0.613-0.254 0.948l0.098 0.256c0.205 0.335 0.557 0.454 0.9 0.266l4.651-2.381c0.006-0.004 0.012-0.003 0.018-0.007l0.312-0.171c0.172-0.095 0.287-0.249 0.332-0.422 0.047-0.172 0.025-0.364-0.076-0.531zM28.559 10.025c-1.783-3.447-4.862-5.988-8.618-6.972-0.267-0.070-0.541-0.124-0.814-0.179l2.494-1.265c0.344-0.189 0.549-0.614 0.345-0.949l-0.099-0.255c-0.205-0.336-0.648-0.454-0.991-0.267l-4.651 2.381c-0.006 0.003-0.012 0.002-0.018 0.006l-0.312 0.171c-0.173 0.095-0.287 0.249-0.332 0.422-0.047 0.172-0.025 0.364 0.077 0.53l0.185 0.304c0.003 0.006 0.008 0.010 0.012 0.016l2.873 4.489c0.203 0.335 0.646 0.454 0.991 0.266l0.226-0.157c0.344-0.188 0.366-0.673 0.163-1.008l-1.85-2.87c0.407 0.063 0.811 0.138 1.207 0.242 3.226 0.845 5.856 3.027 7.387 5.986 1.448 2.797 1.72 5.99 0.765 8.991s-3.020 5.451-5.818 6.901c-0.476 0.247-0.662 0.831-0.415 1.308 0.172 0.332 0.511 0.524 0.863 0.524 0.15 0 0.302-0.035 0.446-0.109 3.259-1.686 5.664-4.54 6.776-8.035 1.111-3.497 0.794-7.217-0.893-10.473z" })));
     }
     static get style() { return RefreshIconStyle0; }
 }, [2, "refresh-icon", {

package/dist/components/reply-all.js CHANGED Viewed

@@ -11,7 +11,7 @@ const ReplyAllIcon = proxyCustomElement(class ReplyAllIcon extends HTMLElement {
         this.height = '15';
     }
     render() {
-        return (h("svg", { key: '27304a19b7ec5d4fb64051ba1edbd99699adc3c5', fill: "auto", width: this.width, height: this.height, viewBox: "0 0 1920 1920", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '185831a5360ae2e5b3559e22839c38fe8667e027', d: "m1030.975 188 81.249 81.249-429.228 429.228h300.747c516.223 0 936.257 420.034 936.257 936.257v98.028h-114.92v-98.028c0-452.901-368.436-821.337-821.337-821.337H682.996l429.228 429.229-81.25 81.248-567.936-567.937L1030.975 188Zm-463.038.011 81.249 81.25-486.688 486.688 486.688 486.688-81.249 81.249L0 755.949 567.937 188.01Z", "fill-rule": "evenodd" })));
+        return (h("svg", { key: 'c5eb888da15f3b1cd71273ac5ce16d364dc75c1a', fill: "auto", width: this.width, height: this.height, viewBox: "0 0 1920 1920", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '2b46aff2e7c0da2f0384485892fe9d3c1998363c', d: "m1030.975 188 81.249 81.249-429.228 429.228h300.747c516.223 0 936.257 420.034 936.257 936.257v98.028h-114.92v-98.028c0-452.901-368.436-821.337-821.337-821.337H682.996l429.228 429.229-81.25 81.248-567.936-567.937L1030.975 188Zm-463.038.011 81.249 81.25-486.688 486.688 486.688 486.688-81.249 81.249L0 755.949 567.937 188.01Z", "fill-rule": "evenodd" })));
     }
     static get style() { return ReplyAllIconStyle0; }
 }, [2, "reply-all-icon", {

package/dist/components/reply.js CHANGED Viewed

@@ -11,7 +11,7 @@ const ReplyIcon = proxyCustomElement(class ReplyIcon extends HTMLElement {
         this.height = '15';
     }
     render() {
-        return (h("svg", { key: '8f2d5daffb8ab92a42abacce15e2abd868f979a7', fill: "auto", width: this.width, height: this.height, viewBox: "0 0 1920 1920", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'fcad20369efbf76e019c7b433e380419c696e481', d: "M835.942 632.563H244.966l478.08-478.08-90.496-90.496L-.026 696.563 632.55 1329.14l90.496-90.496-478.08-478.08h590.976c504.448 0 914.816 410.368 914.816 914.816v109.184h128V1675.38c0-574.976-467.84-1042.816-1042.816-1042.816", "fill-rule": "evenodd" })));
+        return (h("svg", { key: 'b39732ec7ae51099897b58265e3107537e033038', fill: "auto", width: this.width, height: this.height, viewBox: "0 0 1920 1920", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c96f0bfb2877690a272883481c820bc06c8d04ce', d: "M835.942 632.563H244.966l478.08-478.08-90.496-90.496L-.026 696.563 632.55 1329.14l90.496-90.496-478.08-478.08h590.976c504.448 0 914.816 410.368 914.816 914.816v109.184h128V1675.38c0-574.976-467.84-1042.816-1042.816-1042.816", "fill-rule": "evenodd" })));
     }
     static get style() { return ReplyIconStyle0; }
 }, [2, "reply-icon", {

package/dist/components/scheduler-config-store.js CHANGED Viewed

@@ -4,10 +4,12 @@ function CreateNylasSchedulerConfigStore(defaultState = {}) {
     const defaultSchedulerConfigState = {
         selectedConfiguration: {},
         configurations: [],
+        listConfigurationsNextCursor: null,
         calendars: [],
         currentUser: null,
         action: null,
         additionalParticipants: [],
+        hideEditorTabs: [],
         ...defaultState,
     };
     const store = createStore(defaultSchedulerConfigState);