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

package/dist/esm/button-component_4.entry.js

@@ -0,0 +1,196 @@
+import { r as registerInstance, h, c as createEvent } from './index-7cb0dd3d.js';
+import { s as sanitizeHtml } from './index-6d9eeb53.js';
+import './_commonjsHelpers-57e89916.js';
+import './index-53420959.js';
+import './buffer-es6-aad332f1.js';
+
+const buttonComponentCss = "button.sc-button-component{display:flex;align-items:center;justify-content:center;gap:0.75rem;height:48px;border:none;border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;cursor:pointer;font-family:var(--nylas-font-family);font-weight:600}@media screen and (max-width: 768px){button.sc-button-component{width:100%}}button.button-primary.sc-button-component{background:var(--nylas-primary);color:var(--nylas-base-0);height:48px;border:none;border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;cursor:pointer}button.button-primary.sc-button-component:hover{background:var(--nylas-base-600)}button.button-primary.sc-button-component:active{background:var(--nylas-base-800)}button.button-primary.sc-button-component:disabled{background:var(--nylas-base-300);cursor:not-allowed}button.button-basic.sc-button-component{border:1px solid var(--nylas-base-300);color:var(--nylas-base-700);background:transparent}button.button-basic.sc-button-component:hover{background:transparent;border-color:var(--nylas-primary)}button.button-basic.sc-button-component:active{background:transparent;border-color:var(--nylas-base-600);border-width:2px}button.button-basic.sc-button-component:disabled{background:transparent;border-color:var(--nylas-base-300);color:var(--nylas-base-300);cursor:not-allowed}button.button-destructive.sc-button-component{border:1px solid var(--nylas-base-300);color:var(--nylas-error);background:transparent}button.button-destructive.sc-button-component:hover{background:transparent;border-color:var(--nylas-error)}button.button-destructive.sc-button-component:active{background:transparent;border-color:var(--nylas-error-pressed);border-width:2px;color:var(--nylas-error-pressed)}button.button-destructive.sc-button-component:disabled{background:transparent;border-color:var(--nylas-base-300);color:var(--nylas-base-300);cursor:not-allowed}button.button-invisible.sc-button-component{background:transparent;color:var(--nylas-base-800);border:none}button.button-invisible.sc-button-component:hover{background:var(--nylas-base-50);color:var(--nylas-primary)}button.button-invisible.sc-button-component:active{background:var(--nylas-base-50);color:var(--nylas-base-850)}button.button-invisible.sc-button-component:disabled{background:transparent;color:var(--nylas-base-300);cursor:not-allowed}";
+const ButtonComponentStyle0 = buttonComponentCss;
+
+const ButtonComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.variant = 'primary';
+        this.disabled = false;
+        this.type = 'button';
+        this.clickHandler = undefined;
+        this.mouseOverHandler = undefined;
+        this.mouseOutHandler = undefined;
+        this.focusHandler = undefined;
+        this.blurHandler = undefined;
+    }
+    render() {
+        const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');
+        return (h("button", { key: '77fcafa20043b9f599b1fa1239bf683969b05eaf', class: className, disabled: this.disabled, type: "type", onClick: this.clickHandler, onMouseOver: this.mouseOverHandler, onMouseOut: this.mouseOutHandler, onFocus: this.focusHandler, onBlur: this.blurHandler }, h("slot", { key: 'd061264ee544bb9f4ca7ec3aa03f54b84c8af1fd' })));
+    }
+};
+ButtonComponent.style = ButtonComponentStyle0;
+
+const checkboxComponentCss = ".checkbox-container{--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;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 input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}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 .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}";
+const CheckboxComponentStyle0 = checkboxComponentCss;
+
+const CheckboxComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.nylasFormCheckboxToggled = createEvent(this, "nylasFormCheckboxToggled", 7);
+        this.name = 'checkbox';
+        this.checked = false;
+        this.label = '';
+        this.required = false;
+        this.isChecked = this.checked;
+        this.error = '';
+    }
+    componentWillLoad() {
+        this.isChecked = this.checked;
+    }
+    handleBookingFormSubmitted(event) {
+        if (this.required && !this.isChecked) {
+            this.error = `${this.label} is required.`;
+            return;
+        }
+        if (this.error) {
+            event.preventDefault();
+        }
+    }
+    toggleCheck() {
+        this.error = '';
+        this.isChecked = !this.isChecked;
+        this.nylasFormCheckboxToggled.emit({
+            checked: this.isChecked,
+            name: this.name,
+            label: this.label,
+        });
+    }
+    render() {
+        return (h("div", { key: '2aa7451177c31e4dc5b6050b48c675eb44d0bb48', class: "checkbox-container" }, h("label", { key: '1bdcdf2c37eabf25091a38e3a2f97ea1bc75c41d' }, h("input", { key: 'e7538bf21e8171cb0696e6bddba8d2496ad6e653', type: "checkbox", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h("span", { key: '298c9fcb3e0b8d3446c69f5dd8fd5efef73bf5dd', class: "checkmark" }), h("slot", { key: 'd29afdf0831fc9be332060623eb99b2c51ea8be7', name: "label" }, h("span", { key: 'd9ecaa3ecba17d006c2830938cf0f343fded43a9', class: "label" }, this.label))), this.error && h("p", { class: "error" }, this.error)));
+    }
+};
+CheckboxComponent.style = CheckboxComponentStyle0;
+
+const inputComponentCss = ":host{display:block;height:auto;--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%}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;flex-direction:column;gap:4px;font-family:var(--nylas-font-family);font-size:16px;color:var(--nylas-base-800)}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}label p{margin:0}label .error{color:var(--nylas-error)}.input_wrapper{display:flex;align-items:center;gap:1rem}input[type=text],input[type=email]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%;width:-moz-available;width:-webkit-fill-available}input[type=text]:focus,input[type=email]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=email].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=email].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=email]::placeholder{color:var(--nylas-base-300)}";
+const InputComponentStyle0 = inputComponentCss;
+
+const DefaultPattern = {
+    email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
+    phone_number: /^[0-9]{10}$/,
+};
+const DefaultPlaceholder = {
+    email: 'name@example.com',
+    phone_number: '1234567890',
+};
+const InputComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.nylasFormInputChanged = createEvent(this, "nylasFormInputChanged", 7);
+        this.name = 'input';
+        this.defaultValue = '';
+        this.label = '';
+        this.type = 'text';
+        this.placeholder = DefaultPlaceholder[this.type];
+        this.required = false;
+        this.readOnly = false;
+        this.autoFocus = false;
+        this.pattern = undefined;
+        this.maxLength = 255;
+        this.patternError = '';
+        this.value = '';
+        this.error = '';
+    }
+    handleDefaultValueChange(newValue) {
+        this.value = sanitizeHtml(newValue);
+        if (this.value) {
+            this.validatePattern(this.value);
+        }
+    }
+    componentWillLoad() {
+        this.value = sanitizeHtml(this.defaultValue);
+        if (this.type !== 'text' && !this.pattern) {
+            this.pattern = DefaultPattern[this.type];
+        }
+        if (this.value) {
+            this.validatePattern(this.value);
+        }
+    }
+    handleBookingFormSubmitted(event) {
+        this.validatePattern(this.value);
+        if (this.error) {
+            event.preventDefault();
+        }
+    }
+    handleInput(e) {
+        this.error = '';
+        this.value = sanitizeHtml(e.target.value);
+        this.nylasFormInputChanged.emit({
+            value: this.value,
+            name: this.name,
+            label: this.label,
+            error: this.error,
+            type: this.type,
+        });
+    }
+    validatePattern(value) {
+        this.error = '';
+        if (this.required && !value) {
+            this.error = `${this.label} is required.`;
+            return;
+        }
+        if (!this.pattern || (!value && !this.required))
+            return;
+        if (this.pattern.test(value)) {
+            this.error = '';
+        }
+        else {
+            this.error = `Invalid ${this.label.toLowerCase()} format.`;
+        }
+    }
+    render() {
+        return (h("label", { key: '4a6deab471a6af7ced7959e9a051a717110a8a19', part: "ic__label", class: { error: !!this.error } }, h("p", { key: '9158a61ad4b9ea2521a39e45521372681fcb3423' }, h("span", { key: 'ed6247893d8c4fc903a26febf2341931c090053e', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")), h("div", { key: '3141c23d3136dfc069d1b1664dd6947a194da6c0', part: "ic__input_wrapper", class: "input_wrapper" }, h("input", { key: '52498c13b0632d632317951ad25d281025e58f91', type: "text", name: this.name, part: "ic__input", readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, placeholder: this.placeholder, class: { error: !!this.error }, onInput: e => this.handleInput(e) }), h("slot", { key: 'e4471ec1b410ac547cb047bcd11ea470b8fae8f2', name: "additional-input" })), this.error && (h("span", { class: "error help-text" }, this.error, " ", this.value && this.patternError !== '' ? ` ${this.patternError}` : ''))));
+    }
+    static get watchers() { return {
+        "defaultValue": ["handleDefaultValueChange"]
+    }; }
+};
+InputComponent.style = InputComponentStyle0;
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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.nylasFormRadioChanged.emit({
+            value,
+            name: this.name,
+            label: this.label,
+        });
+    }
+    render() {
+        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)));
+    }
+};
+RadioButtonGroup.style = RadioButtonGroupStyle0;
+
+export { ButtonComponent as button_component, CheckboxComponent as checkbox_component, InputComponent as input_component, RadioButtonGroup as radio_button_group };
+
+//# sourceMappingURL=button-component_4.entry.js.map

package/dist/esm/button-component_4.entry.js.map

@@ -0,0 +1 @@
+{"file":"button-component.checkbox-component.input-component.radio-button-group.entry.js","mappings":"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","names":[],"sources":["src/components/design-system/button-component/button-component.scss?tag=button-component&encapsulation=scoped","src/components/design-system/button-component/button-component.tsx","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/input-component/input-component.scss?tag=input-component&encapsulation=shadow","src/components/design-system/input-component/input-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/mixins/buttons.scss';\n@import '../../../common/styles/variables.scss';\n\nbutton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  height: 48px;\n  border: none;\n  border-radius: var(--nylas-border-radius-2x);\n  font-size: 1rem;\n  line-height: 24px;\n  padding: 0 1rem;\n  cursor: pointer;\n  font-family: var(--nylas-font-family);\n  font-weight: 600;\n\n  @media #{$mobile} {\n    width: 100%;\n  }\n\n  &.button-primary {\n    @include primary-button;\n  }\n\n  &.button-basic {\n    border: 1px solid var(--nylas-base-300);\n    color: var(--nylas-base-700);\n    background: transparent;\n\n    &:hover {\n      background: transparent;\n      border-color: var(--nylas-primary);\n    }\n\n    &:active {\n      background: transparent;\n      border-color: var(--nylas-base-600);\n      border-width: 2px;\n    }\n\n    &:disabled {\n      background: transparent;\n      border-color: var(--nylas-base-300);\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n\n  &.button-destructive {\n    border: 1px solid var(--nylas-base-300);\n    color: var(--nylas-error);\n    background: transparent;\n\n    &:hover {\n      background: transparent;\n      border-color: var(--nylas-error);\n    }\n\n    &:active {\n      background: transparent;\n      border-color: var(--nylas-error-pressed);\n      border-width: 2px;\n      color: var(--nylas-error-pressed);\n    }\n\n    &:disabled {\n      background: transparent;\n      border-color: var(--nylas-base-300);\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n\n  &.button-invisible {\n    background: transparent;\n    color: var(--nylas-base-800);\n    border: none;\n\n    &:hover {\n      background: var(--nylas-base-50);\n      color: var(--nylas-primary);\n    }\n\n    &:active {\n      background: var(--nylas-base-50);\n      color: var(--nylas-base-850);\n    }\n\n    &:disabled {\n      background: transparent;\n      color: var(--nylas-base-300);\n      cursor: not-allowed;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\ntype ButtonType = 'primary' | 'basic' | 'destructive' | 'invisible';\n\n@Component({\n  tag: 'button-component',\n  styleUrl: 'button-component.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  // Define a prop to accept the button type\n  @Prop() variant: ButtonType = 'primary';\n\n  // Define a prop for disabled state\n  @Prop() disabled: boolean = false;\n\n  @Prop() type: string = 'button';\n  @Prop() clickHandler?: (event: MouseEvent) => void;\n  @Prop() mouseOverHandler?: (event: MouseEvent) => void;\n  @Prop() mouseOutHandler?: (event: MouseEvent) => void;\n  @Prop() focusHandler?: (event: FocusEvent) => void;\n  @Prop() blurHandler?: (event: FocusEvent) => void;\n\n  render() {\n    const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');\n\n    return (\n      <button\n        class={className}\n        disabled={this.disabled}\n        type=\"type\"\n        onClick={this.clickHandler}\n        onMouseOver={this.mouseOverHandler}\n        onMouseOut={this.mouseOutHandler}\n        onFocus={this.focusHandler}\n        onBlur={this.blurHandler}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n","@import '../../../common/styles/variables.scss';\n\n.checkbox-container {\n  @include default-css-variables;\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  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\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\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 } 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  /**\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 = false;\n  /**\n   * The label of the checkbox. This is displayed next to the checkbox.\n   */\n  @Prop() label: string = '';\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 = this.checked;\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  // Lifecycle events\n  componentWillLoad() {\n    this.isChecked = this.checked;\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>\n          <input type=\"checkbox\" name={this.name} checked={this.isChecked} onChange={() => this.toggleCheck()} />\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='text'],\ninput[type='email'] {\n  @include textfield;\n  width: -moz-available;\n  width: -webkit-fill-available;\n}\n","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\nimport sanitizeHtml from 'sanitize-html';\n\nconst DefaultPattern = {\n  email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/,\n  phone_number: /^[0-9]{10}$/,\n};\n\nconst DefaultPlaceholder = {\n  email: 'name@example.com',\n  phone_number: '1234567890',\n};\n\n/**\n * The `input-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: 'input-component',\n  styleUrl: 'input-component.scss',\n  shadow: true,\n})\nexport class InputComponent {\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   * The type of the input. This is used to determine the input's behavior.\n   * Supported types are 'text', 'email', and 'phone_number'.\n   */\n  @Prop() type: 'text' | 'email' | 'phone_number' = 'text';\n  /**\n   * The placeholder of the input. This is displayed when the input is empty.\n   */\n  @Prop() placeholder: string = DefaultPlaceholder[this.type];\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 an empty string. If the value does not match the pattern, the error message is appended to the default error message.\n   * For ex: patternError: \"Format: 123-456-7890\" , Default error message: \"Invalid phone number.\"\n   * - Error message displayed: \"Invalid phone number. Format: 123-456-7890\"\n   */\n  @Prop() patternError: 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   * 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  // Lifecycle methods\n  @Watch('defaultValue')\n  handleDefaultValueChange(newValue: string) {\n    this.value = sanitizeHtml(newValue);\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  componentWillLoad() {\n    this.value = sanitizeHtml(this.defaultValue);\n    if (this.type !== 'text' && !this.pattern) {\n      this.pattern = DefaultPattern[this.type];\n    }\n\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  // Methods\n  handleInput(e: Event) {\n    this.error = '';\n    this.value = sanitizeHtml((e.target as HTMLInputElement).value);\n    this.nylasFormInputChanged.emit({\n      value: this.value,\n      name: this.name,\n      label: this.label,\n      error: this.error,\n      type: this.type,\n    });\n  }\n\n  validatePattern(value: string) {\n    // Reset error\n    this.error = '';\n    // Check if the field is required and value is empty\n    if (this.required && !value) {\n      this.error = `${this.label} 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 = `Invalid ${this.label.toLowerCase()} format.`;\n    }\n  }\n\n  render() {\n    return (\n      <label part=\"ic__label\" class={{ error: !!this.error }}>\n        <p>\n          <span class=\"label\">{this.label}</span>\n          {this.required && <span class=\"required\">*</span>}\n        </p>\n        <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n          <input\n            type=\"text\"\n            name={this.name}\n            part=\"ic__input\"\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          />\n          <slot name=\"additional-input\"></slot>\n        </div>\n        {this.error && (\n          <span class=\"error help-text\">\n            {this.error} {this.value && this.patternError !== '' ? ` ${this.patternError}` : ''}\n          </span>\n        )}\n      </label>\n    );\n  }\n}\n","@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}