npm - @nylas/web-elements - Versions diffs - 2.3.2 → 2.3.3 - Mend

@nylas/web-elements 2.3.2 → 2.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (265) hide show

package/dist/cjs/nylas-scheduler-editor.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ var index$1 = require('./index-9TuL48qE.js');
 var abstractProvider = require('./abstract-provider-CxQ4Ha7_.js');
 var nylasApiRequest = require('./nylas-api-request-CW77BSTj.js');
 var utils = require('./utils-Bgkmok_H.js');
-var version = require('./version-DUyFnawM.js');
+var version = require('./version-Cwdh5z5t.js');
 var index = require('./index-CwlXqyvH.js');
 var constants = require('./constants-AbUWnRXW.js');

package/dist/cjs/nylas-scheduling.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ var index$1 = require('./index-9TuL48qE.js');
 var abstractProvider = require('./abstract-provider-CxQ4Ha7_.js');
 var utils = require('./utils-Bgkmok_H.js');
 var feedbackSync = require('./feedbackSync-CwO9ANWC.js');
-var version = require('./version-DUyFnawM.js');
+var version = require('./version-Cwdh5z5t.js');
 var index = require('./index-CwlXqyvH.js');
 var constants = require('./constants-AbUWnRXW.js');

package/dist/cjs/radio-button-group.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-9TuL48qE.js');
-const radioButtonGroupCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--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-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:100%}.radio-group{display:flex;flex-direction:column;gap:0.5rem}.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 radioButtonGroupCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--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-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:100%}.radio-group{display:flex;flex-direction:column;gap:0.5rem}.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%;word-break:break-word;overflow-wrap:break-word;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);word-break:break-word;overflow-wrap:break-word}.radio-group label .radio-option p .description{font-size:14px;font-weight:400;line-height:20px;color:var(--nylas-base-600)}";
 const RadioButtonGroup = class {
     constructor(hostRef) {

package/dist/cjs/radio-button-group.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"radio-button-group.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/design-system/radio-button-group/radio-button-group.scss?tag=radio-button-group&encapsulation=shadow","src/components/design-system/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\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 { ThemeConfig } from '@nylas/core';\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 theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n /\n Error message to display when the radio group is required and no value is selected.\n /\n @Prop() errorMessage: string = '';\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 @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n // Lifecycle methods\n connectedCallback() {\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.el.setAttribute('data-themed', '');\n }\n });\n }\n\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.errorMessage \|\| `${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":"radio-button-group.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/design-system/radio-button-group/radio-button-group.scss?tag=radio-button-group&encapsulation=shadow","src/components/design-system/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\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 word-break: break-word;\n overflow-wrap: break-word;\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 { ThemeConfig } from '@nylas/core';\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 theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n /\n Error message to display when the radio group is required and no value is selected.\n /\n @Prop() errorMessage: string = '';\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 @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n // Lifecycle methods\n connectedCallback() {\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.el.setAttribute('data-themed', '');\n }\n });\n }\n\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.errorMessage \|\| `${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}

package/dist/cjs/radio-button-group.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-button-group.entry.cjs.js","sources":["src/components/design-system/radio-button-group/radio-button-group.scss?tag=radio-button-group&encapsulation=shadow","src/components/design-system/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\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 { ThemeConfig } from '@nylas/core';\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 theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n /\n Error message to display when the radio group is required and no value is selected.\n /\n @Prop() errorMessage: string = '';\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 @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n // Lifecycle methods\n connectedCallback() {\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.el.setAttribute('data-themed', '');\n }\n });\n }\n\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.errorMessage \|\| `${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"],"names":["h"],"mappings":"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"}
1	+ {"version":3,"file":"radio-button-group.entry.cjs.js","sources":["src/components/design-system/radio-button-group/radio-button-group.scss?tag=radio-button-group&encapsulation=shadow","src/components/design-system/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\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 word-break: break-word;\n overflow-wrap: break-word;\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 { ThemeConfig } from '@nylas/core';\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 theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n /\n Error message to display when the radio group is required and no value is selected.\n /\n @Prop() errorMessage: string = '';\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 @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n // Lifecycle methods\n connectedCallback() {\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.el.setAttribute('data-themed', '');\n }\n });\n }\n\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.errorMessage \|\| `${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"],"names":["h"],"mappings":"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"}

package/dist/cjs/textarea-component.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 var index = require('./index-9TuL48qE.js');
 var utils = require('./utils-Bgkmok_H.js');
-const textareaComponentCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--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-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;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;display:flex;gap:4px;align-items:center}label .error{color:var(--nylas-error)}textarea{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%;padding:12px 16px;border-width:1;resize:vertical;border-radius:8px;font-family:var(--nylas-font-family);font-size:16px;line-height:24px}textarea:focus{outline-color:var(--nylas-primary)}textarea.error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}textarea.error::placeholder{font-weight:400}textarea::placeholder{color:var(--nylas-base-300)}textarea::-webkit-resizer{display:none}textarea:read-only{background-color:var(--nylas-base-100);cursor:not-allowed}";
+const textareaComponentCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--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-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:100%}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;word-break:break-word;overflow-wrap:break-word;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;display:flex;gap:4px;align-items:center}label .error{color:var(--nylas-error)}textarea{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%;padding:12px 16px;border-width:1;resize:vertical;border-radius:8px;font-family:var(--nylas-font-family);font-size:16px;line-height:24px}textarea:focus{outline-color:var(--nylas-primary)}textarea.error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}textarea.error::placeholder{font-weight:400}textarea::placeholder{color:var(--nylas-base-300)}textarea::-webkit-resizer{display:none}textarea:read-only{background-color:var(--nylas-base-100);cursor:not-allowed}";
 const TextareaComponent = class {
     constructor(hostRef) {

package/dist/cjs/textarea-component.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"textarea-component.entry.cjs.js","mappings":"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","names":["sanitize","h"],"sources":["src/components/design-system/textarea-component/textarea-component.scss?tag=textarea-component&encapsulation=shadow","src/components/design-system/textarea-component/textarea-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\n\n:host {\n display: block;\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 display: flex;\n gap: 4px;\n align-items: center;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\ntextarea {\n @include textfield;\n padding: 12px 16px;\n border-width: 1;\n resize: vertical;\n border-radius: 8px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n\n &::-webkit-resizer {\n display: none;\n }\n}\n\ntextarea:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\n\n/*\n `textarea-component` allows users to enter multiline text.\n * It is ideal for larger inputs like comments or messages in a form.\n * This component is used in the scheduling form to input multiline text.\n \n @part tc__label - The label for the textarea.\n * @part tc__textarea - The textarea element.\n /\n@Component({\n tag: 'textarea-component',\n styleUrl: 'textarea-component.scss',\n shadow: true,\n})\nexport class TextareaComponent {\n @Element() el!: HTMLElement;\n\n /\n The name of the textarea, important for form submissions.\n /\n @Prop() name: string = 'textarea';\n\n /\n The default value of the textarea, appearing when the component first renders.\n /\n @Prop() defaultValue?: string;\n\n /\n The label for the textarea, displayed above it.\n /\n @Prop() label: string = '';\n\n /\n Placeholder text shown in the textarea when it is empty.\n /\n @Prop() placeholder: string = '';\n\n /\n Specifies if the textarea is required for form submission.\n * If true, an error message shows if left empty.\n /\n @Prop() required: boolean = false;\n\n /\n If true, the textarea cannot be edited by the user.\n /\n @Prop() readOnly: boolean = false;\n\n /\n Automatically focus the textarea when the component loads.\n /\n @Prop() autoFocus: boolean = false;\n\n /\n The maximum number of characters allowed in the textarea.\n /\n @Prop() maxLength: number = 255;\n\n /\n The type\n /\n @Prop() type: string = 'multi_line_text';\n\n /\n The content of the label's tooltip\n /\n @Prop() tooltip: string = '';\n\n /\n Error message to display when the textarea is required and empty.\n /\n @Prop() errorMessage: string = '';\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n State for the current value of the textarea.\n /\n @State() value: string = '';\n\n /\n State for managing the display of any error messages.\n /\n @State() error: string = '';\n\n /\n Event emitted when the value of the textarea changes.\n * Useful for parent components to capture user input.\n /\n @Event() nylasFormInputChanged!: EventEmitter<{ value: string; name: string; error: string; label: string; type: string }>;\n\n connectedCallback() {\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.el.setAttribute('data-themed', '');\n }\n });\n }\n\n /\n Lifecycle method that runs before the component loads.\n * It sets the initial value and cleans it using sanitize-html.\n /\n componentDidLoad() {\n this.value = sanitize(this.defaultValue \|\| '');\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\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.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('triggerValidation', { target: 'document' })\n handletriggerValidation(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /\n Handles user input in the textarea, updating the value and emitting an event.\n /\n handleInput(e: Event) {\n this.error = '';\n const inputElement = e.target as HTMLTextAreaElement;\n this.value = sanitize(inputElement.value);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n error: this.error,\n label: this.label,\n type: this.type,\n });\n }\n\n /\n Validates the textarea value based on the required prop and maxLength.\n * If the value is invalid, an error message is displayed.\n /\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage \|\| `${this.label} is required.`;\n } else if (value.length > this.maxLength) {\n this.error = `${this.label} cannot exceed ${this.maxLength} characters.`;\n } else {\n this.error = '';\n }\n }\n\n /\n Renders the component UI including the label, textarea, and any error messages.\n /\n render() {\n return (\n <label part=\"tc__label\" class={{ error: !!this.error }}>\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n {this.tooltip && (\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{this.tooltip}</span>\n </tooltip-component>\n )}\n </p>\n <textarea\n name={this.name}\n title={this.readOnly ? 'read-only field' : undefined}\n placeholder={this.placeholder}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n onInput={e => this.handleInput(e)}\n class={{ error: !!this.error }}\n part=\"tc__textarea\"\n />\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"version":3}
1	+ {"file":"textarea-component.entry.cjs.js","mappings":"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","names":["sanitize","h"],"sources":["src/components/design-system/textarea-component/textarea-component.scss?tag=textarea-component&encapsulation=shadow","src/components/design-system/textarea-component/textarea-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\n\n:host {\n display: block;\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 display: flex;\n gap: 4px;\n align-items: center;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\ntextarea {\n @include textfield;\n padding: 12px 16px;\n border-width: 1;\n resize: vertical;\n border-radius: 8px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n\n &::-webkit-resizer {\n display: none;\n }\n}\n\ntextarea:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\n\n/*\n `textarea-component` allows users to enter multiline text.\n * It is ideal for larger inputs like comments or messages in a form.\n * This component is used in the scheduling form to input multiline text.\n \n @part tc__label - The label for the textarea.\n * @part tc__textarea - The textarea element.\n /\n@Component({\n tag: 'textarea-component',\n styleUrl: 'textarea-component.scss',\n shadow: true,\n})\nexport class TextareaComponent {\n @Element() el!: HTMLElement;\n\n /\n The name of the textarea, important for form submissions.\n /\n @Prop() name: string = 'textarea';\n\n /\n The default value of the textarea, appearing when the component first renders.\n /\n @Prop() defaultValue?: string;\n\n /\n The label for the textarea, displayed above it.\n /\n @Prop() label: string = '';\n\n /\n Placeholder text shown in the textarea when it is empty.\n /\n @Prop() placeholder: string = '';\n\n /\n Specifies if the textarea is required for form submission.\n * If true, an error message shows if left empty.\n /\n @Prop() required: boolean = false;\n\n /\n If true, the textarea cannot be edited by the user.\n /\n @Prop() readOnly: boolean = false;\n\n /\n Automatically focus the textarea when the component loads.\n /\n @Prop() autoFocus: boolean = false;\n\n /\n The maximum number of characters allowed in the textarea.\n /\n @Prop() maxLength: number = 255;\n\n /\n The type\n /\n @Prop() type: string = 'multi_line_text';\n\n /\n The content of the label's tooltip\n /\n @Prop() tooltip: string = '';\n\n /\n Error message to display when the textarea is required and empty.\n /\n @Prop() errorMessage: string = '';\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n State for the current value of the textarea.\n /\n @State() value: string = '';\n\n /\n State for managing the display of any error messages.\n /\n @State() error: string = '';\n\n /\n Event emitted when the value of the textarea changes.\n * Useful for parent components to capture user input.\n /\n @Event() nylasFormInputChanged!: EventEmitter<{ value: string; name: string; error: string; label: string; type: string }>;\n\n connectedCallback() {\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.el.setAttribute('data-themed', '');\n }\n });\n }\n\n /\n Lifecycle method that runs before the component loads.\n * It sets the initial value and cleans it using sanitize-html.\n /\n componentDidLoad() {\n this.value = sanitize(this.defaultValue \|\| '');\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\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.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('triggerValidation', { target: 'document' })\n handletriggerValidation(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /\n Handles user input in the textarea, updating the value and emitting an event.\n /\n handleInput(e: Event) {\n this.error = '';\n const inputElement = e.target as HTMLTextAreaElement;\n this.value = sanitize(inputElement.value);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n error: this.error,\n label: this.label,\n type: this.type,\n });\n }\n\n /\n Validates the textarea value based on the required prop and maxLength.\n * If the value is invalid, an error message is displayed.\n /\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage \|\| `${this.label} is required.`;\n } else if (value.length > this.maxLength) {\n this.error = `${this.label} cannot exceed ${this.maxLength} characters.`;\n } else {\n this.error = '';\n }\n }\n\n /\n Renders the component UI including the label, textarea, and any error messages.\n /\n render() {\n return (\n <label part=\"tc__label\" class={{ error: !!this.error }}>\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n {this.tooltip && (\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{this.tooltip}</span>\n </tooltip-component>\n )}\n </p>\n <textarea\n name={this.name}\n title={this.readOnly ? 'read-only field' : undefined}\n placeholder={this.placeholder}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n onInput={e => this.handleInput(e)}\n class={{ error: !!this.error }}\n part=\"tc__textarea\"\n />\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"version":3}

package/dist/cjs/textarea-component.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea-component.entry.cjs.js","sources":["src/components/design-system/textarea-component/textarea-component.scss?tag=textarea-component&encapsulation=shadow","src/components/design-system/textarea-component/textarea-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\n\n:host {\n display: block;\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 display: flex;\n gap: 4px;\n align-items: center;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\ntextarea {\n @include textfield;\n padding: 12px 16px;\n border-width: 1;\n resize: vertical;\n border-radius: 8px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n\n &::-webkit-resizer {\n display: none;\n }\n}\n\ntextarea:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\n\n/*\n `textarea-component` allows users to enter multiline text.\n * It is ideal for larger inputs like comments or messages in a form.\n * This component is used in the scheduling form to input multiline text.\n \n @part tc__label - The label for the textarea.\n * @part tc__textarea - The textarea element.\n /\n@Component({\n tag: 'textarea-component',\n styleUrl: 'textarea-component.scss',\n shadow: true,\n})\nexport class TextareaComponent {\n @Element() el!: HTMLElement;\n\n /\n The name of the textarea, important for form submissions.\n /\n @Prop() name: string = 'textarea';\n\n /\n The default value of the textarea, appearing when the component first renders.\n /\n @Prop() defaultValue?: string;\n\n /\n The label for the textarea, displayed above it.\n /\n @Prop() label: string = '';\n\n /\n Placeholder text shown in the textarea when it is empty.\n /\n @Prop() placeholder: string = '';\n\n /\n Specifies if the textarea is required for form submission.\n * If true, an error message shows if left empty.\n /\n @Prop() required: boolean = false;\n\n /\n If true, the textarea cannot be edited by the user.\n /\n @Prop() readOnly: boolean = false;\n\n /\n Automatically focus the textarea when the component loads.\n /\n @Prop() autoFocus: boolean = false;\n\n /\n The maximum number of characters allowed in the textarea.\n /\n @Prop() maxLength: number = 255;\n\n /\n The type\n /\n @Prop() type: string = 'multi_line_text';\n\n /\n The content of the label's tooltip\n /\n @Prop() tooltip: string = '';\n\n /\n Error message to display when the textarea is required and empty.\n /\n @Prop() errorMessage: string = '';\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n State for the current value of the textarea.\n /\n @State() value: string = '';\n\n /\n State for managing the display of any error messages.\n /\n @State() error: string = '';\n\n /\n Event emitted when the value of the textarea changes.\n * Useful for parent components to capture user input.\n /\n @Event() nylasFormInputChanged!: EventEmitter<{ value: string; name: string; error: string; label: string; type: string }>;\n\n connectedCallback() {\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.el.setAttribute('data-themed', '');\n }\n });\n }\n\n /\n Lifecycle method that runs before the component loads.\n * It sets the initial value and cleans it using sanitize-html.\n /\n componentDidLoad() {\n this.value = sanitize(this.defaultValue \|\| '');\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\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.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('triggerValidation', { target: 'document' })\n handletriggerValidation(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /\n Handles user input in the textarea, updating the value and emitting an event.\n /\n handleInput(e: Event) {\n this.error = '';\n const inputElement = e.target as HTMLTextAreaElement;\n this.value = sanitize(inputElement.value);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n error: this.error,\n label: this.label,\n type: this.type,\n });\n }\n\n /\n Validates the textarea value based on the required prop and maxLength.\n * If the value is invalid, an error message is displayed.\n /\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage \|\| `${this.label} is required.`;\n } else if (value.length > this.maxLength) {\n this.error = `${this.label} cannot exceed ${this.maxLength} characters.`;\n } else {\n this.error = '';\n }\n }\n\n /\n Renders the component UI including the label, textarea, and any error messages.\n /\n render() {\n return (\n <label part=\"tc__label\" class={{ error: !!this.error }}>\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n {this.tooltip && (\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{this.tooltip}</span>\n </tooltip-component>\n )}\n </p>\n <textarea\n name={this.name}\n title={this.readOnly ? 'read-only field' : undefined}\n placeholder={this.placeholder}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n onInput={e => this.handleInput(e)}\n class={{ error: !!this.error }}\n part=\"tc__textarea\"\n />\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"names":["sanitize","h"],"mappings":"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"}
1	+ {"version":3,"file":"textarea-component.entry.cjs.js","sources":["src/components/design-system/textarea-component/textarea-component.scss?tag=textarea-component&encapsulation=shadow","src/components/design-system/textarea-component/textarea-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as ;\n@use '../../../common/mixins/inputs' as ;\n\n:host {\n display: block;\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 display: flex;\n gap: 4px;\n align-items: center;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\ntextarea {\n @include textfield;\n padding: 12px 16px;\n border-width: 1;\n resize: vertical;\n border-radius: 8px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n\n &::-webkit-resizer {\n display: none;\n }\n}\n\ntextarea:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\n\n/*\n `textarea-component` allows users to enter multiline text.\n * It is ideal for larger inputs like comments or messages in a form.\n * This component is used in the scheduling form to input multiline text.\n \n @part tc__label - The label for the textarea.\n * @part tc__textarea - The textarea element.\n /\n@Component({\n tag: 'textarea-component',\n styleUrl: 'textarea-component.scss',\n shadow: true,\n})\nexport class TextareaComponent {\n @Element() el!: HTMLElement;\n\n /\n The name of the textarea, important for form submissions.\n /\n @Prop() name: string = 'textarea';\n\n /\n The default value of the textarea, appearing when the component first renders.\n /\n @Prop() defaultValue?: string;\n\n /\n The label for the textarea, displayed above it.\n /\n @Prop() label: string = '';\n\n /\n Placeholder text shown in the textarea when it is empty.\n /\n @Prop() placeholder: string = '';\n\n /\n Specifies if the textarea is required for form submission.\n * If true, an error message shows if left empty.\n /\n @Prop() required: boolean = false;\n\n /\n If true, the textarea cannot be edited by the user.\n /\n @Prop() readOnly: boolean = false;\n\n /\n Automatically focus the textarea when the component loads.\n /\n @Prop() autoFocus: boolean = false;\n\n /\n The maximum number of characters allowed in the textarea.\n /\n @Prop() maxLength: number = 255;\n\n /\n The type\n /\n @Prop() type: string = 'multi_line_text';\n\n /\n The content of the label's tooltip\n /\n @Prop() tooltip: string = '';\n\n /\n Error message to display when the textarea is required and empty.\n /\n @Prop() errorMessage: string = '';\n\n /\n The theme configuration.\n /\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /\n State for the current value of the textarea.\n /\n @State() value: string = '';\n\n /\n State for managing the display of any error messages.\n /\n @State() error: string = '';\n\n /\n Event emitted when the value of the textarea changes.\n * Useful for parent components to capture user input.\n /\n @Event() nylasFormInputChanged!: EventEmitter<{ value: string; name: string; error: string; label: string; type: string }>;\n\n connectedCallback() {\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.el.setAttribute('data-themed', '');\n }\n });\n }\n\n /\n Lifecycle method that runs before the component loads.\n * It sets the initial value and cleans it using sanitize-html.\n /\n componentDidLoad() {\n this.value = sanitize(this.defaultValue \|\| '');\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\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.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('triggerValidation', { target: 'document' })\n handletriggerValidation(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /\n Handles user input in the textarea, updating the value and emitting an event.\n /\n handleInput(e: Event) {\n this.error = '';\n const inputElement = e.target as HTMLTextAreaElement;\n this.value = sanitize(inputElement.value);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n error: this.error,\n label: this.label,\n type: this.type,\n });\n }\n\n /\n Validates the textarea value based on the required prop and maxLength.\n * If the value is invalid, an error message is displayed.\n /\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage \|\| `${this.label} is required.`;\n } else if (value.length > this.maxLength) {\n this.error = `${this.label} cannot exceed ${this.maxLength} characters.`;\n } else {\n this.error = '';\n }\n }\n\n /\n Renders the component UI including the label, textarea, and any error messages.\n /\n render() {\n return (\n <label part=\"tc__label\" class={{ error: !!this.error }}>\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n {this.tooltip && (\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{this.tooltip}</span>\n </tooltip-component>\n )}\n </p>\n <textarea\n name={this.name}\n title={this.readOnly ? 'read-only field' : undefined}\n placeholder={this.placeholder}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n onInput={e => this.handleInput(e)}\n class={{ error: !!this.error }}\n part=\"tc__textarea\"\n />\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"names":["sanitize","h"],"mappings":"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"}

package/dist/cjs/{version-DUyFnawM.js → version-Cwdh5z5t.js} RENAMED Viewed

@@ -3,11 +3,11 @@
 var u = /* @__PURE__ */ ((r) => (r.Error = "error", r.Warning = "warning", r.Info = "info", r.Success = "success", r))(u || {});
 const o = (r) => r !== null && typeof r == "object" && "error" in r;
-const version = '2.3.2';
+const version = '2.3.3';
 exports.o = o;
 exports.u = u;
 exports.version = version;
-//# sourceMappingURL=version-DUyFnawM.js.map
+//# sourceMappingURL=version-Cwdh5z5t.js.map
-//# sourceMappingURL=version-DUyFnawM.js.map
+//# sourceMappingURL=version-Cwdh5z5t.js.map

package/dist/cjs/{version-DUyFnawM.js.map → version-Cwdh5z5t.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"version-~~DUyFnawM~~.js","sources":["../nylas-js-core/dist/index.es.js","src/version.ts"],"sourcesContent":["var t = Object.defineProperty;\nvar c = (r, n, s) => n in r ? t(r, n, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[n] = s;\nvar a = (r, n, s) => (c(r, typeof n != \"symbol\" ? n + \"\" : n, s), s);\nvar u = /* @__PURE__ */ ((r) => (r.Error = \"error\", r.Warning = \"warning\", r.Info = \"info\", r.Success = \"success\", r))(u \|\| {});\nconst e = (r) => r !== null && typeof r == \"object\" && \"data\" in r, o = (r) => r !== null && typeof r == \"object\" && \"error\" in r;\nclass E extends Error {\n constructor(s) {\n super(s == null ? void 0 : s.message);\n a(this, \"apiError\");\n this.name = \"NylasAPIError\", this.stack = new Error().stack, this.apiError = s;\n }\n}\nexport {\n u as NotificationType,\n E as NylasAPIError,\n o as isNylasErrorResponse,\n e as isNylasSuccessResponse\n};\n","export const version = '2.3.2';\n"],"names":[],"mappings":";;AAGG,IAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,GAAG,OAAO,EAAE,CAAC,CAAC,OAAO,GAAG,SAAS,EAAE,CAAC,CAAC,IAAI,GAAG,MAAM,EAAE,CAAC,CAAC,OAAO,GAAG,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE;AACzH,MAA+D,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,OAAO,CAAC,IAAI,QAAQ,IAAI,OAAO,IAAI;;ACJzH,MAAM,OAAO,GAAG;;;;;;"}
1	+ {"version":3,"file":"version-Cwdh5z5t.js","sources":["../nylas-js-core/dist/index.es.js","src/version.ts"],"sourcesContent":["var t = Object.defineProperty;\nvar c = (r, n, s) => n in r ? t(r, n, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[n] = s;\nvar a = (r, n, s) => (c(r, typeof n != \"symbol\" ? n + \"\" : n, s), s);\nvar u = /* @__PURE__ */ ((r) => (r.Error = \"error\", r.Warning = \"warning\", r.Info = \"info\", r.Success = \"success\", r))(u \|\| {});\nconst e = (r) => r !== null && typeof r == \"object\" && \"data\" in r, o = (r) => r !== null && typeof r == \"object\" && \"error\" in r;\nclass E extends Error {\n constructor(s) {\n super(s == null ? void 0 : s.message);\n a(this, \"apiError\");\n this.name = \"NylasAPIError\", this.stack = new Error().stack, this.apiError = s;\n }\n}\nexport {\n u as NotificationType,\n E as NylasAPIError,\n o as isNylasErrorResponse,\n e as isNylasSuccessResponse\n};\n","export const version = '2.3.3';\n"],"names":[],"mappings":";;AAGG,IAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,GAAG,OAAO,EAAE,CAAC,CAAC,OAAO,GAAG,SAAS,EAAE,CAAC,CAAC,IAAI,GAAG,MAAM,EAAE,CAAC,CAAC,OAAO,GAAG,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE;AACzH,MAA+D,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,OAAO,CAAC,IAAI,QAAQ,IAAI,OAAO,IAAI;;ACJzH,MAAM,OAAO,GAAG;;;;;;"}

package/dist/collection/components/design-system/checkbox-component/checkbox-component.css CHANGED Viewed

@@ -158,4 +158,6 @@ label .label {
   font-weight: 400;
   color: var(--nylas-base-800);
   line-height: 24px;
+  word-break: break-word;
+  overflow-wrap: break-word;
 }

package/dist/collection/components/design-system/input-color-picker/input-color-picker.css CHANGED Viewed

@@ -98,6 +98,8 @@ label {
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
+  word-break: break-word;
+  overflow-wrap: break-word;
   flex-direction: column;
   gap: 4px;
   font-family: var(--nylas-font-family);

package/dist/collection/components/design-system/input-component/input-component.css CHANGED Viewed

@@ -93,6 +93,8 @@ label {
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
+  word-break: break-word;
+  overflow-wrap: break-word;
   flex-direction: column;
   gap: 4px;
   font-family: var(--nylas-font-family);

package/dist/collection/components/design-system/nylas-date-component/nylas-date-component.css CHANGED Viewed

@@ -93,6 +93,8 @@ label {
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
+  word-break: break-word;
+  overflow-wrap: break-word;
   flex-direction: column;
   gap: 4px;
   font-family: var(--nylas-font-family);

package/dist/collection/components/design-system/radio-button-group/radio-button-group.css CHANGED Viewed

@@ -97,6 +97,8 @@
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
+  word-break: break-word;
+  overflow-wrap: break-word;
   font-size: 16px;
 }
 .radio-group slot[name=label].error {
@@ -151,6 +153,8 @@
   font-weight: 500;
   line-height: 20px;
   color: var(--nylas-base-800);
+  word-break: break-word;
+  overflow-wrap: break-word;
 }
 .radio-group label .radio-option p .description {
   font-size: 14px;

package/dist/collection/components/design-system/select-dropdown/select-dropdown.css CHANGED Viewed

@@ -98,6 +98,8 @@ label {
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
+  word-break: break-word;
+  overflow-wrap: break-word;
   flex-direction: column;
   gap: 4px;
   font-family: var(--nylas-font-family);

package/dist/collection/components/design-system/textarea-component/textarea-component.css CHANGED Viewed

@@ -92,6 +92,8 @@ label {
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
+  word-break: break-word;
+  overflow-wrap: break-word;
   flex-direction: column;
   gap: 4px;
   font-family: var(--nylas-font-family);

package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.css CHANGED Viewed

@@ -216,6 +216,8 @@ label {
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
+  word-break: break-word;
+  overflow-wrap: break-word;
 }
 label.error {
   color: var(--nylas-error);

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

@@ -186,6 +186,8 @@
   line-height: 20px;
   color: var(--nylas-base-900);
   text-align: left;
+  word-break: break-word;
+  overflow-wrap: break-word;
 }
 .nylas-booking-form-config .content .additional_fields .form-field .form-field_header .form-field_header_text p {
   margin: 0.25rem 0 0 0;

package/dist/collection/components/scheduler-editor/nylas-event-description/nylas-event-description.css CHANGED Viewed

@@ -100,6 +100,8 @@
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
+  word-break: break-word;
+  overflow-wrap: break-word;
   flex-direction: column;
   gap: 4px;
   font-family: var(--nylas-font-family);

package/dist/collection/components/scheduler-editor/nylas-event-title/nylas-event-title.css CHANGED Viewed

@@ -177,6 +177,8 @@
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
+  word-break: break-word;
+  overflow-wrap: break-word;
   flex-direction: column;
   gap: 4px;
   font-family: var(--nylas-font-family);

package/dist/collection/version.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export const version = '2.3.2';
+export const version = '2.3.3';
 //# sourceMappingURL=version.js.map

package/dist/collection/version.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC","sourcesContent":["export const version = '2.3.2';\n"]}
1	+ {"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC","sourcesContent":["export const version = '2.3.3';\n"]}

package/dist/components/checkbox-component.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { C as CheckboxComponent$1, d as defineCustomElement$1 } from './p-FyWR7wsG.js';
+import { C as CheckboxComponent$1, d as defineCustomElement$1 } from './p-B4WU6Ddk.js';
 const CheckboxComponent = CheckboxComponent$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/checkbox-group.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { C as CheckboxGroup$1, d as defineCustomElement$1 } from './p-6i8K_2Bl.js';
+import { C as CheckboxGroup$1, d as defineCustomElement$1 } from './p-DVTv2Hp1.js';
 const CheckboxGroup = CheckboxGroup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/input-color-picker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { I as InputColorPicker$1, d as defineCustomElement$1 } from './p-P01mLKOx.js';
+import { I as InputColorPicker$1, d as defineCustomElement$1 } from './p-Dary9zXr.js';
 const InputColorPicker = InputColorPicker$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/input-component.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { I as InputComponent$1, d as defineCustomElement$1 } from './p-D2DM2um3.js';
+import { I as InputComponent$1, d as defineCustomElement$1 } from './p-UahFYa1w.js';
 const InputComponent = InputComponent$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/input-image-url.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { I as InputImageUrl$1, d as defineCustomElement$1 } from './p-lLGrGYYy.js';
+import { I as InputImageUrl$1, d as defineCustomElement$1 } from './p-C4s3qYGu.js';
 const InputImageUrl = InputImageUrl$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-additional-participants.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NylasAdditionalParticipants$1, d as defineCustomElement$1 } from './p-p2By8R7Z.js';
+import { N as NylasAdditionalParticipants$1, d as defineCustomElement$1 } from './p-B-xvNL5X.js';
 const NylasAdditionalParticipants = NylasAdditionalParticipants$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { N as NylasAvailabilityPicker$1, d as defineCustomElement$1 } from './p-DzNdcHoB.js';
+import { N as NylasAvailabilityPicker$1, d as defineCustomElement$1 } from './p-CZllU8ii.js';
 const NylasAvailabilityPicker = NylasAvailabilityPicker$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { N as NylasBookingCalendarPicker$1, d as defineCustomElement$1 } from './p-ybLp3dGv.js';
+import { N as NylasBookingCalendarPicker$1, d as defineCustomElement$1 } from './p-QKc1T_NS.js';
 const NylasBookingCalendarPicker = NylasBookingCalendarPicker$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-booking-confirmation-redirect.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NylasBookingConfirmationRedirect$1, d as defineCustomElement$1 } from './p-a4aWyy2J.js';
+import { N as NylasBookingConfirmationRedirect$1, d as defineCustomElement$1 } from './p-BCNq-vH8.js';
 const NylasBookingConfirmationRedirect = NylasBookingConfirmationRedirect$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-booking-confirmation-type.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NylasBookingConfirmationType$1, d as defineCustomElement$1 } from './p-DAAGx7-h.js';
+import { N as NylasBookingConfirmationType$1, d as defineCustomElement$1 } from './p-pLqfEMSB.js';
 const NylasBookingConfirmationType = NylasBookingConfirmationType$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-booking-form-config.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NylasBookingFormConfig$1, d as defineCustomElement$1 } from './p-BBkyE1MS.js';
+import { N as NylasBookingFormConfig$1, d as defineCustomElement$1 } from './p-BdQ9iWW4.js';
 const NylasBookingFormConfig = NylasBookingFormConfig$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-booking-form.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NylasBookingForm$1, d as defineCustomElement$1 } from './p-EBvHC_aS.js';
+import { N as NylasBookingForm$1, d as defineCustomElement$1 } from './p-Gyins0o7.js';
 const NylasBookingForm = NylasBookingForm$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-buffer-time.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NylasBufferTime$1, d as defineCustomElement$1 } from './p-BmXUSpFE.js';
+import { N as NylasBufferTime$1, d as defineCustomElement$1 } from './p-DgfDGATC.js';
 const NylasBufferTime = NylasBufferTime$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-cancel-booking-form.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NylasCancelBookingForm$1, d as defineCustomElement$1 } from './p-D0JQ_-Qx.js';
+import { N as NylasCancelBookingForm$1, d as defineCustomElement$1 } from './p-DDceIF1-.js';
 const NylasCancelBookingForm = NylasCancelBookingForm$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-confirmation-email.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NylasConfirmationEmail$1, d as defineCustomElement$1 } from './p-BdG2pZat.js';
+import { N as NylasConfirmationEmail$1, d as defineCustomElement$1 } from './p-BvCTseDu.js';
 const NylasConfirmationEmail = NylasConfirmationEmail$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-custom-event-slug.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NylasCustomEventSlug$1, d as defineCustomElement$1 } from './p-DDM3ZlW1.js';
+import { N as NylasCustomEventSlug$1, d as defineCustomElement$1 } from './p-BdQA_uHk.js';
 const NylasCustomEventSlug = NylasCustomEventSlug$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-customize-booking-settings.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NylasCustomizeBookingSettings$1, d as defineCustomElement$1 } from './p-DdroMDi7.js';
+import { N as NylasCustomizeBookingSettings$1, d as defineCustomElement$1 } from './p-DWCPI1lK.js';
 const NylasCustomizeBookingSettings = NylasCustomizeBookingSettings$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-date-component.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NylasDateComponent$1, d as defineCustomElement$1 } from './p-Di7xtAN8.js';
+import { N as NylasDateComponent$1, d as defineCustomElement$1 } from './p-BWgGjFXi.js';
 const NylasDateComponent = NylasDateComponent$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-disable-emails.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NylasDisableEmails$1, d as defineCustomElement$1 } from './p-Dkp7GkzI.js';
+import { N as NylasDisableEmails$1, d as defineCustomElement$1 } from './p-CEvUNENN.js';
 const NylasDisableEmails = NylasDisableEmails$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nylas-editor-tabs-group.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NylasEditorTabsGroup$1, d as defineCustomElement$1 } from './p-CdjkLYNh.js';
+import { N as NylasEditorTabsGroup$1, d as defineCustomElement$1 } from './p-BH0odz_K.js';
 const NylasEditorTabsGroup = NylasEditorTabsGroup$1;
 const defineCustomElement = defineCustomElement$1;