@nylas/web-elements 0.0.0-canary-20250120165013 → 0.0.0-canary-20250122221254
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.
- package/dist/cdn/checkbox-component/checkbox-component.es.js +14 -18
- package/dist/cdn/nylas-booking-form/nylas-booking-form.es.js +275 -278
- package/dist/cdn/nylas-cancel-booking-form/nylas-cancel-booking-form.es.js +2 -1
- package/dist/cdn/nylas-confirmation-email/nylas-confirmation-email.es.js +2 -1
- package/dist/cdn/nylas-customize-booking-settings/nylas-customize-booking-settings.es.js +3 -7
- package/dist/cdn/nylas-editor-tabs/nylas-editor-tabs.es.js +301 -296
- package/dist/cdn/nylas-feedback-form/nylas-feedback-form.es.js +2 -1
- package/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js +23 -18
- package/dist/cdn/nylas-scheduling/nylas-scheduling.es.js +18 -13
- package/dist/cdn/textarea-component/textarea-component.es.js +147 -146
- package/dist/cjs/checkbox-component_3.cjs.entry.js +2 -3
- package/dist/cjs/checkbox-component_3.cjs.entry.js.map +1 -1
- package/dist/cjs/google-logo-icon_4.cjs.entry.js +12 -4
- package/dist/cjs/google-logo-icon_4.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-scheduling.cjs.entry.js +10 -2
- package/dist/cjs/nylas-scheduling.cjs.entry.js.map +1 -1
- package/dist/cjs/textarea-component.cjs.entry.js +2 -1
- package/dist/cjs/textarea-component.cjs.entry.js.map +1 -1
- package/dist/collection/components/design-system/checkbox-component/checkbox-component.css +4 -0
- package/dist/collection/components/design-system/checkbox-component/checkbox-component.js +1 -2
- package/dist/collection/components/design-system/checkbox-component/checkbox-component.js.map +1 -1
- package/dist/collection/components/design-system/textarea-component/textarea-component.js +2 -1
- package/dist/collection/components/design-system/textarea-component/textarea-component.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-booking-form/test/nylas-booking-form.spec.js +25 -1
- package/dist/collection/components/scheduler/nylas-booking-form/test/nylas-booking-form.spec.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-scheduling/nylas-scheduling.js +10 -2
- package/dist/collection/components/scheduler/nylas-scheduling/nylas-scheduling.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.js +12 -4
- package/dist/collection/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.js.map +1 -1
- package/dist/components/checkbox-component2.js +2 -3
- package/dist/components/checkbox-component2.js.map +1 -1
- package/dist/components/nylas-editor-tabs2.js +12 -4
- package/dist/components/nylas-editor-tabs2.js.map +1 -1
- package/dist/components/nylas-scheduling.js +10 -2
- package/dist/components/nylas-scheduling.js.map +1 -1
- package/dist/components/textarea-component2.js +2 -1
- package/dist/components/textarea-component2.js.map +1 -1
- package/dist/esm/checkbox-component_3.entry.js +2 -3
- package/dist/esm/checkbox-component_3.entry.js.map +1 -1
- package/dist/esm/google-logo-icon_4.entry.js +12 -4
- package/dist/esm/google-logo-icon_4.entry.js.map +1 -1
- package/dist/esm/nylas-scheduling.entry.js +10 -2
- package/dist/esm/nylas-scheduling.entry.js.map +1 -1
- package/dist/esm/textarea-component.entry.js +2 -1
- package/dist/esm/textarea-component.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-web-elements.esm.js +1 -1
- package/dist/nylas-web-elements/{p-a4b25253.entry.js → p-1d12e7e7.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-a4b25253.entry.js.map → p-1d12e7e7.entry.js.map} +1 -1
- package/dist/nylas-web-elements/p-748f9af9.entry.js +2 -0
- package/dist/nylas-web-elements/p-748f9af9.entry.js.map +1 -0
- package/dist/nylas-web-elements/p-ea91e5b3.entry.js +2 -0
- package/dist/nylas-web-elements/p-ea91e5b3.entry.js.map +1 -0
- package/dist/nylas-web-elements/{p-dd830dcc.entry.js → p-f7bd80de.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-dd830dcc.entry.js.map → p-f7bd80de.entry.js.map} +1 -1
- package/package.json +3 -3
- package/dist/nylas-web-elements/p-02488442.entry.js +0 -2
- package/dist/nylas-web-elements/p-02488442.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-b61dfe09.entry.js +0 -2
- package/dist/nylas-web-elements/p-b61dfe09.entry.js.map +0 -1
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-7af03e3f.js');
|
|
6
6
|
const utils = require('./utils-32e40e71.js');
|
|
7
7
|
|
|
8
|
-
const checkboxComponentCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;width:100%}.checkbox-container{display:flex;flex-direction:column;gap:0.5rem}.checkbox-container p.error{color:var(--nylas-error);font-size:14px;font-weight:400;line-height:20px;font-family:var(--nylas-font-family);margin:0}label{display:flex;align-items:center;font-family:var(--nylas-font-family);cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label.readonly{cursor:not-allowed}label input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;border:1px solid var(--nylas-base-300)}label input[type=checkbox]:focus~.checkmark,label input[type=checkbox]:hover~.checkmark{border-color:var(--nylas-primary)}label input[type=checkbox]:checked~.checkmark{color:var(--nylas-base-0);background:var(--nylas-primary) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border:2px solid var(--nylas-primary)}label input[type=checkbox]:disabled{cursor:not-allowed;background:var(--nylas-base-100);border:1px solid var(--nylas-base-300)}label .checkmark{border-radius:var(--nylas-border-radius);border:2px solid var(--nylas-base-800);position:absolute;left:0;top:2px;width:18px;height:18px;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label .label{margin-left:32px;font-size:16px;font-weight:400;color:var(--nylas-base-800);line-height:24px}";
|
|
8
|
+
const checkboxComponentCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;width:100%}.checkbox-container{display:flex;flex-direction:column;gap:0.5rem}.checkbox-container p.error{color:var(--nylas-error);font-size:14px;font-weight:400;line-height:20px;font-family:var(--nylas-font-family);margin:0}label{display:flex;align-items:center;font-family:var(--nylas-font-family);cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label.readonly{cursor:not-allowed}label span.required{color:var(--nylas-error);padding:0 0.25rem}label input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;border:1px solid var(--nylas-base-300)}label input[type=checkbox]:focus~.checkmark,label input[type=checkbox]:hover~.checkmark{border-color:var(--nylas-primary)}label input[type=checkbox]:checked~.checkmark{color:var(--nylas-base-0);background:var(--nylas-primary) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border:2px solid var(--nylas-primary)}label input[type=checkbox]:disabled{cursor:not-allowed;background:var(--nylas-base-100);border:1px solid var(--nylas-base-300)}label .checkmark{border-radius:var(--nylas-border-radius);border:2px solid var(--nylas-base-800);position:absolute;left:0;top:2px;width:18px;height:18px;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}label .label{margin-left:32px;font-size:16px;font-weight:400;color:var(--nylas-base-800);line-height:24px}";
|
|
9
9
|
const CheckboxComponentStyle0 = checkboxComponentCss;
|
|
10
10
|
|
|
11
11
|
const CheckboxComponent = class {
|
|
@@ -35,7 +35,6 @@ const CheckboxComponent = class {
|
|
|
35
35
|
handleBookingFormSubmitted(event) {
|
|
36
36
|
if (this.required && !this.isChecked) {
|
|
37
37
|
this.error = `${this.label} is required.`;
|
|
38
|
-
return;
|
|
39
38
|
}
|
|
40
39
|
if (this.error) {
|
|
41
40
|
event.preventDefault();
|
|
@@ -51,7 +50,7 @@ const CheckboxComponent = class {
|
|
|
51
50
|
});
|
|
52
51
|
}
|
|
53
52
|
render() {
|
|
54
|
-
return (index.h("div", { key: '
|
|
53
|
+
return (index.h("div", { key: '595e161a792173db6af97d3d7ef13cdca534052a', class: "checkbox-container" }, index.h("label", { key: '625bd67ceec40d979d5f4f74ec576569866ff6ec', title: this.readOnly ? 'read-only field' : undefined, class: { readonly: this.readOnly } }, index.h("input", { key: 'dc099ed0899a91fe30b67bb0f2981b8bd5254bbb', type: "checkbox", disabled: this.readOnly, readOnly: this.readOnly, name: this.name, title: this.readOnly ? 'read-only field' : undefined, checked: this.isChecked, onChange: () => this.toggleCheck() }), index.h("span", { key: '032c931e0b256a9e948551c9d938e14339f4c45e', class: "checkmark" }), index.h("slot", { key: 'd932f4a7c5aa7e680827beff46f1ff86ce50b1d9', name: "label" }, index.h("span", { key: 'b5ce4490b7be93f936d3061145dcbe4489dd74c9', class: "label" }, this.label, this.required && index.h("span", { class: "required" }, "*")))), this.error && index.h("p", { class: "error" }, this.error)));
|
|
55
54
|
}
|
|
56
55
|
get el() { return index.getElement(this); }
|
|
57
56
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"checkbox-component.nylas-date-component.radio-button-group.entry.cjs.js","mappings":"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","names":["h","sanitize"],"sources":["src/components/design-system/checkbox-component/checkbox-component.scss?tag=checkbox-component&encapsulation=shadow","src/components/design-system/checkbox-component/checkbox-component.tsx","src/components/design-system/nylas-date-component/nylas-date-component.scss?tag=nylas-date-component&encapsulation=shadow","src/components/design-system/nylas-date-component/nylas-date-component.tsx","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\n:host {\n display: block;\n @include default-css-variables;\n width: 100%;\n}\n\n.checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n\n p.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 margin: 0;\n }\n}\n\nlabel {\n display: flex;\n align-items: center;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n &.readonly {\n cursor: not-allowed;\n }\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n border: 1px solid var(--nylas-base-300);\n\n &:focus ~ .checkmark,\n &:hover ~ .checkmark {\n border-color: var(--nylas-primary);\n }\n\n &:checked ~ .checkmark {\n color: var(--nylas-base-0);\n background: var(--nylas-primary)\n url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+)\n 50% 40% no-repeat;\n border: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n border: 1px solid var(--nylas-base-300);\n }\n }\n\n .checkmark {\n border-radius: var(--nylas-border-radius);\n border: 2px solid var(--nylas-base-800);\n position: absolute;\n left: 0;\n top: 2px;\n width: 18px;\n height: 18px;\n cursor: pointer;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .label {\n margin-left: 32px;\n font-size: 16px;\n font-weight: 400;\n color: var(--nylas-base-800);\n line-height: 24px;\n }\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Element, Watch } from '@stencil/core';\n\n/**\n * The `checkbox-component` component is a UI component that allows users to select a checkbox.\n * This component is used in the scheduling form to input checkbox type inputs.\n */\n@Component({\n tag: 'checkbox-component',\n styleUrl: 'checkbox-component.scss',\n shadow: true,\n})\nexport class CheckboxComponent {\n @Element() el!: HTMLElement;\n private readonly componentType: string = 'checkbox';\n\n /**\n * The name of the checkbox. This is used to identify the checkbox when submitting a form.\n */\n @Prop() name: string = 'checkbox';\n /**\n * The default value of the checkbox. This is the value that is displayed when the checkbox is rendered.\n */\n @Prop() checked?: boolean;\n /**\n * The label of the checkbox. This is displayed next to the checkbox.\n */\n @Prop() label: string = '';\n /**\n * The property to make the checkbox read-only. If true, the checkbox cannot be edited.\n */\n @Prop() readOnly: boolean = false;\n /**\n * Whether the checkbox is required. If true, the checkbox must be checked when submitting a form.\n * Default is false. If the checkbox is required and not checked, an error message is displayed.\n */\n @Prop() required: boolean = false;\n /**\n * The checked state of the checkbox.\n */\n @State() isChecked!: boolean;\n /**\n * The error message state.\n */\n @State() error: string = '';\n\n /**\n * This event is fired when the checkbox is toggled.\n */\n @Event() nylasFormCheckboxToggled!: EventEmitter<{\n checked: boolean;\n name: string;\n label: string;\n }>;\n\n @Watch('checked')\n checkedPropChangedHandler(newValue: boolean) {\n if (typeof newValue === 'boolean') {\n this.isChecked = newValue;\n }\n }\n\n // Lifecycle events\n componentWillLoad() {\n this.el.setAttribute('component-type', this.componentType);\n }\n\n componentDidLoad() {\n this.isChecked = this.checked || false;\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.isChecked) {\n this.error = `${this.label} is required.`;\n return;\n }\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n toggleCheck() {\n this.error = '';\n this.isChecked = !this.isChecked;\n this.nylasFormCheckboxToggled.emit({\n checked: this.isChecked,\n name: this.name,\n label: this.label,\n });\n }\n\n render() {\n return (\n <div class=\"checkbox-container\">\n <label title={this.readOnly ? 'read-only field' : undefined} class={{ readonly: this.readOnly }}>\n <input\n type=\"checkbox\"\n disabled={this.readOnly}\n readOnly={this.readOnly}\n name={this.name}\n title={this.readOnly ? 'read-only field' : undefined}\n checked={this.isChecked}\n onChange={() => this.toggleCheck()}\n />\n <span class=\"checkmark\"></span>\n <slot name=\"label\">\n <span class=\"label\">{this.label}</span>\n </slot>\n </label>\n {this.error && <p class=\"error\">{this.error}</p>}\n </div>\n );\n }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n display: block;\n height: auto;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.input_wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\ninput[type='date'] {\n @include textfield;\n width: 100%;\n width: -moz-available;\n width: -webkit-fill-available;\n}\n\ninput:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\n\nconst DefaultPlaceholder = {\n date: 'YYYY-MM-DD',\n};\n\n/**\n * The `nylas-date-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n */\n\n@Component({\n tag: 'nylas-date-component',\n styleUrl: 'nylas-date-component.scss',\n shadow: true,\n})\nexport class NylasDateComponent {\n /**\n * The host element\n */\n @Element() el!: HTMLElement;\n /**\n * The name of the input. This is used to identify the input when submitting a form.\n */\n @Prop() name: string = 'input';\n /**\n * The default value of the input. This is the value that is displayed when the input is rendered.\n */\n @Prop() defaultValue?: string;\n /**\n * The label of the input. This is displayed above the input.\n */\n @Prop() label: string = '';\n\n /**\n * The placeholder of the input. This is displayed when the input is empty.\n */\n @Prop() placeholder: string = DefaultPlaceholder['date'];\n /**\n * Whether the input is required. If true, the input must have a value when submitting a form.\n * Default is false. If the input is required and the value is empty, an error message is displayed.\n */\n @Prop() required: boolean = false;\n /**\n * Whether the input is read-only. If true, the input cannot be edited.\n * Default is false.\n */\n @Prop() readOnly: boolean = false;\n /**\n * Whether the input should be focused when rendered.\n * Default is false. If true, the input is focused when rendered.\n * Use this to set the focus on the first input in a form.\n */\n @Prop() autoFocus: boolean = false;\n /**\n * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n */\n @Prop() pattern?: RegExp;\n /**\n * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n * Default is 255.\n */\n @Prop() maxLength: number = 255;\n /**\n * The error message to display when the value does not match the pattern.\n * Default is 'Invalid <field> format.' where <field> is the input label.\n */\n @Prop() patternError: string = '';\n\n /**\n * This error message is displayed when the input value is empty and the input is required.\n */\n @Prop() requiredError: string = '';\n\n /**\n * The input value state.\n */\n @State() value!: string;\n /**\n * The error message state.\n */\n @State() error: string = '';\n\n /**\n * State to track the validity of the date input.\n */\n @State() isDateValid: boolean = true;\n\n /**\n * This event is fired when the input value is changed.\n * The scheduling form listens for this event to validate the input value and submit the form.\n * If using outside of the scheduling form, listen for this event to validate the input value\n * and handle the input value change.\n */\n @Event() nylasFormInputChanged!: EventEmitter<{\n value: string;\n name: string;\n label: string;\n type: string;\n error: string;\n }>;\n\n @Event() nylasFormInputFocused!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n @Event() nylasFormInputBlurred!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n @Watch('defaultValue')\n handleDefaultValueChange(newValue: string) {\n this.value = sanitize(newValue);\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n componentDidLoad() {\n this.value = sanitize(this.defaultValue || '');\n if (this.value) {\n this.validatePattern(this.value);\n }\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 this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n async handleFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n handleInput(e: Event) {\n this.error = '';\n const target = e.target as HTMLInputElement;\n this.value = sanitize(target.value);\n this.isDateValid = target.validity.valid;\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n label: this.label,\n error: this.error,\n type: 'date',\n });\n }\n\n handleBlur() {\n this.nylasFormInputBlurred.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n handleFocus() {\n this.nylasFormInputFocused.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n validatePattern(value: string) {\n // Reset error\n this.error = '';\n if (this.required && !this.isDateValid) {\n this.error = 'Please enter a valid date';\n return;\n }\n // Check if the field is required and value is empty\n if (this.required && !value) {\n this.error = this.requiredError || 'This field is required.';\n return;\n }\n // Check if value matches pattern\n if (!this.pattern || (!value && !this.required)) return;\n\n if (this.pattern.test(value)) {\n this.error = '';\n } else {\n this.error = this.patternError || 'Invalid format.';\n }\n }\n\n render() {\n return (\n <label part=\"ic__label\" class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n </p>\n )}\n <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n <input\n type=\"date\"\n name={this.name}\n part=\"ic__date\"\n title={this.readOnly ? 'read-only field' : undefined}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n placeholder={this.placeholder}\n class={{ error: !!this.error }}\n onInput={e => this.handleInput(e)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n <slot name=\"additional-input\"></slot>\n </div>\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: 100%;\n}\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\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, Element, Watch } 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 @Element() el!: HTMLElement;\n private readonly componentType: string = 'radio-group';\n\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({ attribute: 'default-selected-value' }) 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 property to make the radio group read-only. If true, the radio group cannot be edited.\n */\n @Prop() readOnly: boolean = false;\n /**\n * The selected value of the radio group.\n */\n @State() selectedValue!: string;\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 @Watch('defaultSelectedValue')\n handleDefaultSelectedValueChange(newValue: string) {\n this.selectedValue = newValue;\n }\n\n // Lifecycle methods\n componentDidLoad() {\n this.selectedValue = this.defaultSelectedValue;\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 componentWillLoad() {\n this.el.setAttribute('component-type', this.componentType);\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\n type=\"radio\"\n disabled={this.readOnly}\n readOnly={this.readOnly}\n title={this.readOnly ? 'read-only field' : undefined}\n name={this.name}\n value={option.value}\n checked={this.selectedValue === option.value}\n onChange={() => this.handleChange(option.value)}\n />\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}
|
|
1
|
+
{"file":"checkbox-component.nylas-date-component.radio-button-group.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,oBAAoB,GAAG,g8EAAg8E,CAAC;AAC99E,gCAAe,oBAAoB;;MCUtB,iBAAiB;;;;QAEX,kBAAa,GAAW,UAAU,CAAC;oBAK7B,UAAU;;qBAQT,EAAE;wBAIE,KAAK;wBAKL,KAAK;;qBAQR,EAAE;;IAY3B,yBAAyB,CAAC,QAAiB;QACzC,IAAI,OAAO,QAAQ,KAAK,SAAS,EAAE;YACjC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;SAC3B;KACF;IAGD,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,gBAAgB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC5D;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC;KACxC;IAOD,0BAA0B,CAAC,KAAkB;QAC3C,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACpC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,eAAe,CAAC;SAC3C;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAGD,WAAW;QACT,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;YACjC,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACEA,kEAAK,KAAK,EAAC,oBAAoB,IAC7BA,oEAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,iBAAiB,GAAG,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC7FA,oEACE,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,iBAAiB,GAAG,SAAS,EACpD,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,GAClC,EACFA,mEAAM,KAAK,EAAC,WAAW,GAAQ,EAC/BA,mEAAM,IAAI,EAAC,OAAO,IAChBA,mEAAM,KAAK,EAAC,OAAO,IAChB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,IAAIA,kBAAM,KAAK,EAAC,UAAU,QAAS,CAC5C,CACF,CACD,EACP,IAAI,CAAC,KAAK,IAAIA,eAAG,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5C,EACN;KACH;;;;;;;;ACvHH,MAAM,qBAAqB,GAAG,60DAA60D,CAAC;AAC52D,iCAAe,qBAAqB;;ACEpC,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,YAAY;CACnB,CAAC;MAYW,kBAAkB;;;;;;oBAQN,OAAO;;qBAQN,EAAE;2BAKI,kBAAkB,CAAC,MAAM,CAAC;wBAK5B,KAAK;wBAKL,KAAK;yBAMJ,KAAK;;yBAUN,GAAG;4BAKA,EAAE;6BAKD,EAAE;;qBAST,EAAE;2BAKK,IAAI;;IA4BpC,wBAAwB,CAAC,QAAgB;QACvC,IAAI,CAAC,KAAK,GAAGC,cAAQ,CAAC,QAAQ,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAClC;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,KAAK,GAAGA,cAAQ,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC;QAC/C,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAClC;KACF;IAOD,0BAA0B,CAAC,KAAkB;QAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAGD,MAAM,mBAAmB,CAAC,KAAkB;QAC1C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAGD,WAAW,CAAC,CAAQ;QAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,KAAK,GAAGA,cAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QACzC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,MAAM;SACb,CAAC,CAAC;KACJ;IAED,UAAU;QACR,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;KACJ;IAED,WAAW;QACT,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;KACJ;IAED,eAAe,CAAC,KAAa;QAE3B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACtC,IAAI,CAAC,KAAK,GAAG,2BAA2B,CAAC;YACzC,OAAO;SACR;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,EAAE;YAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,IAAI,yBAAyB,CAAC;YAC7D,OAAO;SACR;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;YAAE,OAAO;QAExD,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC5B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;SACjB;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,IAAI,iBAAiB,CAAC;SACrD;KACF;IAED,MAAM;QACJ,QACED,oEAAO,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,IACnD,IAAI,CAAC,KAAK,KACTA,mBACEA,kBAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,EACtC,IAAI,CAAC,QAAQ,IAAIA,kBAAM,KAAK,EAAC,UAAU,QAAS,CAC/C,CACL,EACDA,kEAAK,IAAI,EAAC,mBAAmB,EAAC,KAAK,EAAC,eAAe,IACjDA,oEACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,iBAAiB,GAAG,SAAS,EACpD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,EAC9B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,GAC/B,EACFA,mEAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,EACL,IAAI,CAAC,KAAK,IAAIA,kBAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1D,EACR;KACH;;;;;;;;ACvOH,MAAM,mBAAmB,GAAG,i7DAAi7D,CAAC;AAC98D,+BAAe,mBAAmB;;MCWrB,gBAAgB;;;;QAEV,kBAAa,GAAW,aAAa,CAAC;oBAKhC,aAAa;uBAKwC,EAAE;oCAIA,EAAE;;wBAUpD,KAAK;wBAIL,KAAK;;qBAQR,EAAE;;IAW3B,gCAAgC,CAAC,QAAgB;QAC/C,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;IAGD,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC;KAChD;IAOD,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,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,gBAAgB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC5D;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,QACEA,kEAAK,KAAK,EAAC,aAAa,IACtBA,mEAAM,IAAI,EAAC,OAAO,IACf,IAAI,CAAC,KAAK,KACTA,eAAG,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,IAC/BA,kBAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,EACtC,IAAI,CAAC,QAAQ,IAAIA,kBAAM,KAAK,EAAC,UAAU,QAAS,CAC/C,CACL,CACI,EACN,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtBA,uBACEA,iBAAK,KAAK,EAAC,cAAc,IACvBA,mBACE,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,iBAAiB,GAAG,SAAS,EACpD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAC/C,EACFA,mBACEA,kBAAM,KAAK,EAAC,OAAO,IAAE,MAAM,CAAC,KAAK,CAAQ,EACzCA,kBAAM,KAAK,EAAC,aAAa,IAAE,MAAM,CAAC,WAAW,CAAQ,CACnD,CACA,CACA,CACT,CAAC,EACD,IAAI,CAAC,KAAK,IAAIA,kBAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC5D,EACN;KACH;;;;;;;;;;;;","names":["h","sanitize"],"sources":["src/components/design-system/checkbox-component/checkbox-component.scss?tag=checkbox-component&encapsulation=shadow","src/components/design-system/checkbox-component/checkbox-component.tsx","src/components/design-system/nylas-date-component/nylas-date-component.scss?tag=nylas-date-component&encapsulation=shadow","src/components/design-system/nylas-date-component/nylas-date-component.tsx","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\n:host {\n display: block;\n @include default-css-variables;\n width: 100%;\n}\n\n.checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n\n p.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 margin: 0;\n }\n}\n\nlabel {\n display: flex;\n align-items: center;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n &.readonly {\n cursor: not-allowed;\n }\n\n span.required {\n color: var(--nylas-error);\n padding: 0 0.25rem;\n }\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n border: 1px solid var(--nylas-base-300);\n\n &:focus ~ .checkmark,\n &:hover ~ .checkmark {\n border-color: var(--nylas-primary);\n }\n\n &:checked ~ .checkmark {\n color: var(--nylas-base-0);\n background: var(--nylas-primary)\n url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+)\n 50% 40% no-repeat;\n border: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n border: 1px solid var(--nylas-base-300);\n }\n }\n\n .checkmark {\n border-radius: var(--nylas-border-radius);\n border: 2px solid var(--nylas-base-800);\n position: absolute;\n left: 0;\n top: 2px;\n width: 18px;\n height: 18px;\n cursor: pointer;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .label {\n margin-left: 32px;\n font-size: 16px;\n font-weight: 400;\n color: var(--nylas-base-800);\n line-height: 24px;\n }\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Element, Watch } from '@stencil/core';\n\n/**\n * The `checkbox-component` component is a UI component that allows users to select a checkbox.\n * This component is used in the scheduling form to input checkbox type inputs.\n */\n@Component({\n tag: 'checkbox-component',\n styleUrl: 'checkbox-component.scss',\n shadow: true,\n})\nexport class CheckboxComponent {\n @Element() el!: HTMLElement;\n private readonly componentType: string = 'checkbox';\n\n /**\n * The name of the checkbox. This is used to identify the checkbox when submitting a form.\n */\n @Prop() name: string = 'checkbox';\n /**\n * The default value of the checkbox. This is the value that is displayed when the checkbox is rendered.\n */\n @Prop() checked?: boolean;\n /**\n * The label of the checkbox. This is displayed next to the checkbox.\n */\n @Prop() label: string = '';\n /**\n * The property to make the checkbox read-only. If true, the checkbox cannot be edited.\n */\n @Prop() readOnly: boolean = false;\n /**\n * Whether the checkbox is required. If true, the checkbox must be checked when submitting a form.\n * Default is false. If the checkbox is required and not checked, an error message is displayed.\n */\n @Prop() required: boolean = false;\n /**\n * The checked state of the checkbox.\n */\n @State() isChecked!: boolean;\n /**\n * The error message state.\n */\n @State() error: string = '';\n\n /**\n * This event is fired when the checkbox is toggled.\n */\n @Event() nylasFormCheckboxToggled!: EventEmitter<{\n checked: boolean;\n name: string;\n label: string;\n }>;\n\n @Watch('checked')\n checkedPropChangedHandler(newValue: boolean) {\n if (typeof newValue === 'boolean') {\n this.isChecked = newValue;\n }\n }\n\n // Lifecycle events\n componentWillLoad() {\n this.el.setAttribute('component-type', this.componentType);\n }\n\n componentDidLoad() {\n this.isChecked = this.checked || false;\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.isChecked) {\n this.error = `${this.label} is required.`;\n }\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n toggleCheck() {\n this.error = '';\n this.isChecked = !this.isChecked;\n this.nylasFormCheckboxToggled.emit({\n checked: this.isChecked,\n name: this.name,\n label: this.label,\n });\n }\n\n render() {\n return (\n <div class=\"checkbox-container\">\n <label title={this.readOnly ? 'read-only field' : undefined} class={{ readonly: this.readOnly }}>\n <input\n type=\"checkbox\"\n disabled={this.readOnly}\n readOnly={this.readOnly}\n name={this.name}\n title={this.readOnly ? 'read-only field' : undefined}\n checked={this.isChecked}\n onChange={() => this.toggleCheck()}\n />\n <span class=\"checkmark\"></span>\n <slot name=\"label\">\n <span class=\"label\">\n {this.label}\n {this.required && <span class=\"required\">*</span>}\n </span>\n </slot>\n </label>\n {this.error && <p class=\"error\">{this.error}</p>}\n </div>\n );\n }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n display: block;\n height: auto;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.input_wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\ninput[type='date'] {\n @include textfield;\n width: 100%;\n width: -moz-available;\n width: -webkit-fill-available;\n}\n\ninput:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\n\nconst DefaultPlaceholder = {\n date: 'YYYY-MM-DD',\n};\n\n/**\n * The `nylas-date-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n */\n\n@Component({\n tag: 'nylas-date-component',\n styleUrl: 'nylas-date-component.scss',\n shadow: true,\n})\nexport class NylasDateComponent {\n /**\n * The host element\n */\n @Element() el!: HTMLElement;\n /**\n * The name of the input. This is used to identify the input when submitting a form.\n */\n @Prop() name: string = 'input';\n /**\n * The default value of the input. This is the value that is displayed when the input is rendered.\n */\n @Prop() defaultValue?: string;\n /**\n * The label of the input. This is displayed above the input.\n */\n @Prop() label: string = '';\n\n /**\n * The placeholder of the input. This is displayed when the input is empty.\n */\n @Prop() placeholder: string = DefaultPlaceholder['date'];\n /**\n * Whether the input is required. If true, the input must have a value when submitting a form.\n * Default is false. If the input is required and the value is empty, an error message is displayed.\n */\n @Prop() required: boolean = false;\n /**\n * Whether the input is read-only. If true, the input cannot be edited.\n * Default is false.\n */\n @Prop() readOnly: boolean = false;\n /**\n * Whether the input should be focused when rendered.\n * Default is false. If true, the input is focused when rendered.\n * Use this to set the focus on the first input in a form.\n */\n @Prop() autoFocus: boolean = false;\n /**\n * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n */\n @Prop() pattern?: RegExp;\n /**\n * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n * Default is 255.\n */\n @Prop() maxLength: number = 255;\n /**\n * The error message to display when the value does not match the pattern.\n * Default is 'Invalid <field> format.' where <field> is the input label.\n */\n @Prop() patternError: string = '';\n\n /**\n * This error message is displayed when the input value is empty and the input is required.\n */\n @Prop() requiredError: string = '';\n\n /**\n * The input value state.\n */\n @State() value!: string;\n /**\n * The error message state.\n */\n @State() error: string = '';\n\n /**\n * State to track the validity of the date input.\n */\n @State() isDateValid: boolean = true;\n\n /**\n * This event is fired when the input value is changed.\n * The scheduling form listens for this event to validate the input value and submit the form.\n * If using outside of the scheduling form, listen for this event to validate the input value\n * and handle the input value change.\n */\n @Event() nylasFormInputChanged!: EventEmitter<{\n value: string;\n name: string;\n label: string;\n type: string;\n error: string;\n }>;\n\n @Event() nylasFormInputFocused!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n @Event() nylasFormInputBlurred!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n @Watch('defaultValue')\n handleDefaultValueChange(newValue: string) {\n this.value = sanitize(newValue);\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n componentDidLoad() {\n this.value = sanitize(this.defaultValue || '');\n if (this.value) {\n this.validatePattern(this.value);\n }\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 this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n async handleFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n handleInput(e: Event) {\n this.error = '';\n const target = e.target as HTMLInputElement;\n this.value = sanitize(target.value);\n this.isDateValid = target.validity.valid;\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n label: this.label,\n error: this.error,\n type: 'date',\n });\n }\n\n handleBlur() {\n this.nylasFormInputBlurred.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n handleFocus() {\n this.nylasFormInputFocused.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n validatePattern(value: string) {\n // Reset error\n this.error = '';\n if (this.required && !this.isDateValid) {\n this.error = 'Please enter a valid date';\n return;\n }\n // Check if the field is required and value is empty\n if (this.required && !value) {\n this.error = this.requiredError || 'This field is required.';\n return;\n }\n // Check if value matches pattern\n if (!this.pattern || (!value && !this.required)) return;\n\n if (this.pattern.test(value)) {\n this.error = '';\n } else {\n this.error = this.patternError || 'Invalid format.';\n }\n }\n\n render() {\n return (\n <label part=\"ic__label\" class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n </p>\n )}\n <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n <input\n type=\"date\"\n name={this.name}\n part=\"ic__date\"\n title={this.readOnly ? 'read-only field' : undefined}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n placeholder={this.placeholder}\n class={{ error: !!this.error }}\n onInput={e => this.handleInput(e)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n <slot name=\"additional-input\"></slot>\n </div>\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n","@import '../../../common/styles/variables.scss';\n@import '../../../common/mixins/inputs.scss';\n\n:host {\n display: block;\n @include default-css-variables;\n width: 100%;\n}\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\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, Element, Watch } 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 @Element() el!: HTMLElement;\n private readonly componentType: string = 'radio-group';\n\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({ attribute: 'default-selected-value' }) 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 property to make the radio group read-only. If true, the radio group cannot be edited.\n */\n @Prop() readOnly: boolean = false;\n /**\n * The selected value of the radio group.\n */\n @State() selectedValue!: string;\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 @Watch('defaultSelectedValue')\n handleDefaultSelectedValueChange(newValue: string) {\n this.selectedValue = newValue;\n }\n\n // Lifecycle methods\n componentDidLoad() {\n this.selectedValue = this.defaultSelectedValue;\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 componentWillLoad() {\n this.el.setAttribute('component-type', this.componentType);\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\n type=\"radio\"\n disabled={this.readOnly}\n readOnly={this.readOnly}\n title={this.readOnly ? 'read-only field' : undefined}\n name={this.name}\n value={option.value}\n checked={this.selectedValue === option.value}\n onChange={() => this.handleChange(option.value)}\n />\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}
|
|
@@ -413,7 +413,12 @@ const NylasEditorTabs = class {
|
|
|
413
413
|
this.showFeedbackModal = false;
|
|
414
414
|
}
|
|
415
415
|
feedbackSubmittedHandler(event) {
|
|
416
|
-
const eventId = feedbackSync.captureMessage('Scheduler Editor User Feedback'
|
|
416
|
+
const eventId = feedbackSync.captureMessage('Scheduler Editor User Feedback', {
|
|
417
|
+
extra: {
|
|
418
|
+
configId: this.selectedConfiguration?.id,
|
|
419
|
+
slug: this.selectedConfiguration?.slug,
|
|
420
|
+
},
|
|
421
|
+
});
|
|
417
422
|
const feedback = {
|
|
418
423
|
eventId: eventId,
|
|
419
424
|
message: event.detail.feedback,
|
|
@@ -424,6 +429,9 @@ const NylasEditorTabs = class {
|
|
|
424
429
|
tags: {
|
|
425
430
|
'nylas-web-element': 'nylas-scheduler-editor',
|
|
426
431
|
'nylas-web-element-version': "1.3.5",
|
|
432
|
+
'nylas-config-id': this.selectedConfiguration?.id,
|
|
433
|
+
'nylas-slug': this.selectedConfiguration?.slug,
|
|
434
|
+
'host-url': window.location.href,
|
|
427
435
|
},
|
|
428
436
|
extra: {
|
|
429
437
|
configId: this.selectedConfiguration?.id,
|
|
@@ -611,7 +619,7 @@ const NylasEditorTabs = class {
|
|
|
611
619
|
}
|
|
612
620
|
render() {
|
|
613
621
|
utils.debug('[nylas-editor-tabs]', 'render', this.formState);
|
|
614
|
-
return (index.h(index.Host, { key: '
|
|
622
|
+
return (index.h(index.Host, { key: '6b41766e5e726c094aca62e18595796d43b2f298' }, index.h("form", { key: '24d68e11a81f94792218353822dd77fd7683c9f4', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (index.h("div", { class: "form-contents", part: "editor__form-contents net__form-contents" }, index.h("div", { class: "tabs", part: "editor__tabs net__tabs" }, index.h("button", { name: Tab.EventInfo, class: { tab: true, active: this.activeTab == Tab.EventInfo, hide: this.hideTab(Tab.EventInfo) }, part: "editortab__event-info net__tab-event-info", onClick: e => this.setActiveTab(e, Tab.EventInfo) }, index.h("calendar-info-icon", { width: "16", height: "16" }), utils.instance.t('eventInfoTab')), index.h("button", { name: Tab.Availability, class: { tab: true, active: this.activeTab == Tab.Availability, hide: this.hideTab(Tab.Availability) }, part: "editortab__availability net__tab-availability", onClick: e => this.setActiveTab(e, Tab.Availability) }, index.h("calendar-patterns-icon", { width: "16", height: "16" }), utils.instance.t('availabilityTab')), index.h("button", { name: Tab.Participants, class: { tab: true, active: this.activeTab == Tab.Participants, hide: this.hideTab(Tab.Participants) }, part: "editortab__participants net__tab-participants", onClick: e => this.setActiveTab(e, Tab.Participants) }, index.h("people-icon", { width: "16", height: "16" }), utils.instance.t('participantsTab')), index.h("button", { name: Tab.BookingOptions, class: { tab: true, active: this.activeTab == Tab.BookingOptions, hide: this.hideTab(Tab.BookingOptions) }, part: "editortab__booking-options net__tab-booking-options", onClick: e => this.setActiveTab(e, Tab.BookingOptions) }, index.h("flow-icon", { width: "16", height: "16" }), utils.instance.t('bookingOptionsTab')), index.h("button", { name: Tab.BookingForm, class: { tab: true, active: this.activeTab == 'bookingForm', hide: this.hideTab(Tab.BookingForm) }, part: "editortab__booking-form net__tab-booking-form", onClick: e => this.setActiveTab(e, Tab.BookingForm) }, this.activeTab == Tab.BookingForm ? index.h("calendar-agenda-fill-icon", { width: "16", height: "16" }) : index.h("calendar-agenda-icon", { width: "16", height: "16" }), utils.instance.t('bookingFormTab')), index.h("button", { name: Tab.Communications, class: { tab: true, active: this.activeTab == 'communications', hide: this.hideTab(Tab.Communications) }, onClick: e => this.setActiveTab(e, Tab.Communications), part: "editortab__communications net__tab-communications" }, this.activeTab == Tab.Communications ? index.h("envelope-fill-icon", { width: "16", height: "16" }) : index.h("envelope-icon", { width: "16", height: "16" }), utils.instance.t('communicationsTab')), index.h("button", { name: Tab.PageStyles, class: { tab: true, active: this.activeTab == 'pageStyles', hide: this.hideTab(Tab.PageStyles) }, onClick: e => this.setActiveTab(e, Tab.PageStyles), part: "editortab__page-styles net__tab-page-styles" }, this.activeTab == Tab.PageStyles ? index.h("paintbrush-fill-icon", { width: "16", height: "16" }) : index.h("paintbrush-icon", { width: "16", height: "16" }), utils.instance.t('pageStylesTab'))), index.h("div", { class: "tab-content", part: "editor__tab-content net__tab-content" }, index.h(TabContents, { formState: this.formState, activeTab: this.activeTab, currentUser: this.currentUser, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new', i18next: utils.instance })))) : (index.h("div", { class: "composable", key: this.selectedConfiguration?.id }, index.h("slot", null))), index.h("div", { key: 'ba0dd27bf4d718ad8a62df1f79774f97993a39b5', class: "footer", part: "editor__footer net__footer" }, index.h("div", { key: '0e2787186678d9fdf18654220bf9b8b2fc430b8f', class: "preview", part: "editor__footer-preview net__footer-preview" }, this.enableUserFeedback && (index.h("button-component", { title: "Share your feedback", id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, index.h("feedback-icon", null)))), index.h("div", { key: 'f731ed68b6375274254947df08eacc1c6cc4685a', class: "buttons", part: "editor__footer-buttons net__footer-buttons" }, index.h("p", { key: '9bcf711385ae6cfc4341c7169f44c7e5e484c6e3', class: {
|
|
615
623
|
'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,
|
|
616
624
|
'saved-changes': this.changesSaved,
|
|
617
625
|
'error': this.error !== '',
|
|
@@ -622,11 +630,11 @@ const NylasEditorTabs = class {
|
|
|
622
630
|
if (!previewEvent.defaultPrevented) {
|
|
623
631
|
window.open(utils.parsePreviewLink(this.schedulerPreviewLink, this.selectedConfiguration), '_blank');
|
|
624
632
|
}
|
|
625
|
-
}, variant: 'basic' }, index.h("eye-icon", null))), index.h("button-component", { key: '
|
|
633
|
+
}, variant: 'basic' }, index.h("eye-icon", null))), index.h("button-component", { key: '3e4bf8e88e3b7e9d0e9088520dc1c053b0599bc6', type: "button", disabled: this.isLoading, clickHandler: event => {
|
|
626
634
|
event.preventDefault();
|
|
627
635
|
this.cancelButtonClick.emit();
|
|
628
636
|
this.error = '';
|
|
629
|
-
}, variant: 'basic', part: "editor__footer-cancel net__footer-cancel" }, utils.instance.t('backButton')), index.h("button-component", { key: '
|
|
637
|
+
}, variant: 'basic', part: "editor__footer-cancel net__footer-cancel" }, utils.instance.t('backButton')), index.h("button-component", { key: '052505c068878815930d6ed19dda364a609212b8', type: "submit", disabled: this.isLoading, part: "editor__footer-cta, net__footer-cta" }, this.isLoading ? (index.h("span", null, utils.instance.t('savingButtonText'), index.h("loading-icon", null), ' ')) : this.action === 'create' ? (`${utils.instance.t('createButtonText')}`) : (`${utils.instance.t('saveChangesButtonText')}`))))), this.showFeedbackModal && index.h("nylas-feedback-form", null)));
|
|
630
638
|
}
|
|
631
639
|
get host() { return index.getElement(this); }
|
|
632
640
|
static get watchers() { return {
|