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

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

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

Files changed (876) hide show

package/dist/collection/components/design-system/multi-select-dropdown/multi-select-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"multi-select-dropdown.js","sourceRoot":"","sources":["../../../../src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\n\ninterface DropdownOption {\n label: string;\n value: string;\n selected?: boolean; // Add a selected flag to each option\n}\n\n@Component({\n tag: 'multi-select-dropdown',\n styleUrl: 'multi-select-dropdown.scss',\n shadow: true,\n})\nexport class MultiSelectDropdown {\n @Element() el!: HTMLElement;\n\n // Props\n /*\n The name of the dropdown\n /\n @Prop() name!: string;\n\n /\n The label of the dropdown\n /\n @Prop() label?: string;\n\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n\n // States\n /\n The copy of the options to display in the dropdown\n /\n @State() availableOptions: DropdownOption[] = this.options;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n /\n @State() ariaActivedescendant: string = '';\n\n /\n This flag is used to focus the first option when the dropdown is opened\n * and reset after the first option is focused\n /\n @State() shouldFocusFirstOption: boolean = false;\n\n // Events\n /\n This event is fired when the selected options are changed\n */\n @Event({ bubbles: true, composed: true }) selectedOptionsChanged!: EventEmitter<{\n value: string[];\n name: string;\n }>;\n\n // Lifecycle methods\n componentDidRender() {\n debug('multi-select-dropdown', 'componentDidRender');\n if (this.isOpen && this.shouldFocusFirstOption) {\n // The dropdown is open and we should focus the first option\n this.ariaActivedescendant = this.availableOptions[0].value;\n this.focusOption(0);\n // Reset the flag\n this.shouldFocusFirstOption = false;\n }\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n // Methods\n\n selectOption(option: DropdownOption): void {\n this.availableOptions = this.availableOptions.map(o => {\n if (o.value === option.value) {\n o.selected = option.selected ? false : true;\n }\n return o;\n });\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n this.selectedOptionsChanged.emit({\n value: selectedOptions,\n name: this.name,\n });\n }\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.shouldFocusFirstOption = true;\n } else {\n this.ariaActivedescendant = '';\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e: KeyboardEvent) {\n const items = this.availableOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n\n switch (e.key) {\n case 'ArrowDown':\n case 'Tab':\n if (!e.shiftKey) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n break;\n case 'Enter':\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n focusOption(index: number) {\n const option = this.availableOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n getSelectedOptions() {\n return this.availableOptions.filter(option => option.selected);\n }\n\n renderOption(option: DropdownOption) {\n return (\n <li\n key={option.value}\n id={option.value}\n role=\"option\"\n tabindex=\"0\"\n aria-selected={option.selected ? 'true' : 'false'}\n onClick={e => {\n e.stopImmediatePropagation();\n this.selectOption(option);\n }}\n class={{ selected: !!option.selected }}\n >\n <label htmlFor={option.value}>\n <input aria-hidden=\"true\" id={option.value} type=\"checkbox\" checked={option.selected} />\n <span>{option.label}</span>\n </label>\n </li>\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\" part=\"msd_dropdown\">\n <label class=\"dropdown-label\">\n {this.label}\n <slot name=\"label-icon\" aria-hidden=\"true\"></slot>\n </label>\n <button\n part=\"msd_dropdown-button\"\n class={{ dropbtn: true, open: this.isOpen }}\n onClick={() => this.toggleDropdown()}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"msd_dropdown-button-selected-label\">\n {this.getSelectedOptions().length > 1\n ? `Multiple ${this.name}s selected`\n : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label}\n </span>\n <span class={this.isOpen ? 'open' : 'closed'} aria-hidden=\"true\">\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n </button>\n {this.isOpen ? null : (\n <div class={'selected-options'}>\n {this.getSelectedOptions().map(option => (\n <span class=\"selected-option\">\n {option.label}\n <button key={option.label} onClick={() => this.selectOption(option)}>\n <close-icon />\n </button>\n </span>\n ))}\n </div>\n )}\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"msd_dropdown-content\">\n <ul\n tabindex=\"-1\"\n role=\"listbox\"\n aria-label={this.name}\n aria-multiselectable={true}\n aria-activedescendant={this.ariaActivedescendant}\n onKeyDown={e => this.handleListboxKeydown(e)}\n >\n {this.availableOptions.map(option => this.renderOption(option))}\n </ul>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"multi-select-dropdown.js","sourceRoot":"","sources":["../../../../src/components/design-system/multi-select-dropdown/multi-select-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { debug } from '@/utils/utils';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\n\ninterface DropdownOption {\n label: string;\n value: string;\n selected?: boolean; // Add a selected flag to each option\n}\n\n@Component({\n tag: 'multi-select-dropdown',\n styleUrl: 'multi-select-dropdown.scss',\n shadow: true,\n})\nexport class MultiSelectDropdown {\n @Element() el!: HTMLElement;\n\n // Props\n /*\n The name of the dropdown\n /\n @Prop() name!: string;\n\n /\n The label of the dropdown\n /\n @Prop() label?: string;\n\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n\n /\n Error message to display\n /\n @Prop() error?: string = '';\n\n // States\n /\n The copy of the options to display in the dropdown\n /\n @State() availableOptions: DropdownOption[] = this.options;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n /\n @State() ariaActivedescendant: string = '';\n\n /\n This flag is used to focus the first option when the dropdown is opened\n * and reset after the first option is focused\n /\n @State() shouldFocusFirstOption: boolean = false;\n\n // Events\n /\n This event is fired when the selected options are changed\n */\n @Event({ bubbles: true, composed: true }) selectedOptionsChanged!: EventEmitter<{\n value: string[];\n name: string;\n }>;\n\n // Lifecycle methods\n componentDidRender() {\n debug('multi-select-dropdown', 'componentDidRender');\n if (this.isOpen && this.shouldFocusFirstOption) {\n // The dropdown is open and we should focus the first option\n this.ariaActivedescendant = this.availableOptions[0].value;\n this.focusOption(0);\n // Reset the flag\n this.shouldFocusFirstOption = false;\n }\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n // Methods\n\n selectOption(option: DropdownOption): void {\n this.availableOptions = this.availableOptions.map(o => {\n if (o.value === option.value) {\n o.selected = option.selected ? false : true;\n }\n return o;\n });\n const selectedOptions = this.availableOptions.filter(o => o.selected).map(o => o.value);\n this.selectedOptionsChanged.emit({\n value: selectedOptions,\n name: this.name,\n });\n }\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n if (this.isOpen) {\n this.shouldFocusFirstOption = true;\n } else {\n this.ariaActivedescendant = '';\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e: KeyboardEvent) {\n const items = this.availableOptions;\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n\n switch (e.key) {\n case 'ArrowDown':\n case 'Tab':\n if (!e.shiftKey) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n break;\n case 'Enter':\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n focusOption(index: number) {\n const option = this.availableOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n getSelectedOptions() {\n return this.availableOptions.filter(option => option.selected);\n }\n\n renderOption(option: DropdownOption) {\n return (\n <li\n key={option.value}\n id={option.value}\n role=\"option\"\n tabindex=\"0\"\n aria-selected={option.selected ? 'true' : 'false'}\n onClick={e => {\n e.stopImmediatePropagation();\n this.selectOption(option);\n }}\n class={{ selected: !!option.selected }}\n >\n <label htmlFor={option.value}>\n <input aria-hidden=\"true\" id={option.value} type=\"checkbox\" checked={option.selected} />\n <span>{option.label}</span>\n </label>\n </li>\n );\n }\n\n render() {\n return (\n <Host>\n <div class=\"dropdown\" part=\"msd_dropdown\">\n <label class=\"dropdown-label\">\n {this.label}\n <slot name=\"label-icon\" aria-hidden=\"true\"></slot>\n </label>\n <button\n name={this.name}\n part={`msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`}\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"msd_dropdown-button-selected-label\">\n {this.getSelectedOptions().length > 1\n ? `Multiple ${this.name}s selected`\n : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label}\n </span>\n <span class={this.isOpen ? 'open' : 'closed'} aria-hidden=\"true\">\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n </button>\n {this.error ? <span class=\"error\">{this.error}</span> : null}\n {this.isOpen ? null : (\n <div class={'selected-options'}>\n {this.getSelectedOptions().map(option => (\n <span class=\"selected-option\">\n {option.label}\n <button key={option.label} onClick={() => this.selectOption(option)}>\n <close-icon />\n </button>\n </span>\n ))}\n </div>\n )}\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"msd_dropdown-content\">\n <ul\n tabindex=\"-1\"\n role=\"listbox\"\n aria-label={this.name}\n aria-multiselectable={true}\n aria-activedescendant={this.ariaActivedescendant}\n onKeyDown={e => this.handleListboxKeydown(e)}\n >\n {this.availableOptions.map(option => this.renderOption(option))}\n </ul>\n </div>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -1,6 +1,62 @@
 .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;
@@ -19,12 +75,12 @@
   width: 20px;
   height: 20px;
   color: var(--nylas-primary);
-  margin-top: 16px;
 }
 .radio-group label .radio-option p {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  margin: 0;
 }
 .radio-group label .radio-option p .title {
   font-size: 16px;

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

@@ -4,17 +4,31 @@ export class RadioButtonGroup {
         this.name = 'radio-group';
         this.options = [];
         this.defaultSelectedValue = '';
+        this.label = undefined;
+        this.required = false;
         this.selectedValue = this.defaultSelectedValue;
+        this.error = '';
+    }
+    handleBookingFormSubmitted(event) {
+        if (this.required && !this.selectedValue) {
+            this.error = `${this.label} is required.`;
+            return;
+        }
+        if (this.error) {
+            event.preventDefault();
+        }
     }
     handleChange(value) {
+        this.error = '';
         this.selectedValue = value;
-        this.radioSelectionChanged.emit({
+        this.nylasFormRadioChanged.emit({
             value,
             name: this.name,
+            label: this.label,
         });
     }
     render() {
-        return (h("div", { key: '82c0a38507193f6e941c820c38f9e5c477dc14dc', class: "radio-group" }, this.options.map(option => (h("label", null, h("div", { class: "radio-option" }, h("input", { type: "radio", name: this.name, value: option.value, checked: this.selectedValue === option.value, onChange: () => this.handleChange(option.value) }), h("p", null, h("span", { class: "title" }, option.label), h("span", { class: "description" }, option.description))))))));
+        return (h("div", { key: '11cf3c389f44bd4758e4b649e7714c4b43eac706', class: "radio-group" }, h("slot", { key: 'fc49aed7f9f72234f78146c3cb32cafba1f5f8ea', name: "label" }, this.label && (h("p", { class: { error: !!this.error } }, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")))), this.options.map(option => (h("label", null, h("div", { class: "radio-option" }, h("input", { type: "radio", name: this.name, value: option.value, checked: this.selectedValue === option.value, onChange: () => this.handleChange(option.value) }), h("p", null, h("span", { class: "title" }, option.label), h("span", { class: "description" }, option.description)))))), this.error && h("span", { class: "error help-text" }, this.error)));
     }
     static get is() { return "radio-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -42,7 +56,7 @@ export class RadioButtonGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The name of the radio group. This is used to identify the radio group when submitting a form."
                 },
                 "attribute": "name",
                 "reflect": false,
@@ -60,7 +74,7 @@ export class RadioButtonGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The list of options in the radio group.\nEach option has a label and a value and an optional description."
                 },
                 "defaultValue": "[]"
             },
@@ -76,23 +90,59 @@ export class RadioButtonGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The default selected value of the radio group."
                 },
                 "attribute": "default-selected-value",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the radio group. This is displayed above the radio group.\nLabel is optional. You can also use the slot 'label' to add a label."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the radio group is required. If true, the radio group must have a value when submitting a form.\nDefault is false. If the radio group is required and the value is empty, an error message is displayed."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "selectedValue": {}
+            "selectedValue": {},
+            "error": {}
         };
     }
     static get events() {
         return [{
-                "method": "radioSelectionChanged",
-                "name": "radioSelectionChanged",
+                "method": "nylasFormRadioChanged",
+                "name": "nylasFormRadioChanged",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -101,11 +151,20 @@ export class RadioButtonGroup {
                     "text": "This event is fired when the selected value changes."
                 },
                 "complexType": {
-                    "original": "{\n    value: string;\n    name: string;\n  }",
-                    "resolved": "{ value: string; name: string; }",
+                    "original": "{\n    value: string;\n    name: string;\n    label?: string;\n  }",
+                    "resolved": "{ value: string; name: string; label?: string | undefined; }",
                     "references": {}
                 }
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "bookingFormSubmitted",
+                "method": "handleBookingFormSubmitted",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=radio-button-group.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-button-group.js","sourceRoot":"","sources":["../../../../src/components/design-system/radio-button-group/radio-button-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;~~AAO/E~~,MAAM,OAAO,gBAAgB;;~~oBACJ~~,aAAa;~~uBACwC~~,EAAE;~~oCACvC~~,EAAE;~~6BACR~~,IAAI,CAAC,oBAAoB;;~~IAU1D~~,YAAY,CAAC,KAAa;QACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,KAAK;YACL,IAAI,EAAE,IAAI,CAAC,IAAI;~~SAChB~~,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,aAAa,~~IACrB~~,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC1B;~~YACE~~,WAAK,KAAK,EAAC,cAAc;~~gBACvB~~,aAAO,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI;~~gBAC3J~~;~~oBACE~~,YAAM,KAAK,EAAC,OAAO,IAAE,MAAM,CAAC,KAAK,CAAQ;~~oBACzC~~,YAAM,KAAK,EAAC,aAAa,IAAE,MAAM,CAAC,WAAW,CAAQ,CACnD,CACA,CACA,CACT,CAAC,~~CACE~~,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["// src/components/radio-group/radio-group.tsx\nimport { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'radio-button-group',\n styleUrl: 'radio-button-group.scss',\n shadow: true,\n})\nexport class RadioButtonGroup {\n @Prop() name: string = 'radio-group';\n @Prop() options: { label: string; value: string; description?: string }[] = [];\n @Prop() defaultSelectedValue: string = '';\n @State() selectedValue: string = this.defaultSelectedValue;\n\n /*\n This event is fired when the selected value changes.\n */\n @Event() ~~radioSelectionChanged~~!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n handleChange(value: string) {\n this.selectedValue = value;\n this.~~radioSelectionChanged~~.emit({\n value,\n name: this.name,\n });\n }\n\n render() {\n return (\n <div class=\"radio-group\">\n {this.options.map(option => (\n <label>\n <div class=\"radio-option\">\n <input type=\"radio\" name={this.name} value={option.value} checked={this.selectedValue === option.value} onChange={() => this.handleChange(option.value)} />\n <p>\n <span class=\"title\">{option.label}</span>\n <span class=\"description\">{option.description}</span>\n </p>\n </div>\n </label>\n ))}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"radio-button-group.js","sourceRoot":"","sources":["../../../../src/components/design-system/radio-button-group/radio-button-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAWvF,MAAM,OAAO,gBAAgB;;oBAIJ,aAAa;uBAKwC,EAAE;oCAIvC,EAAE;;wBAUb,KAAK;6BAIA,IAAI,CAAC,oBAAoB;qBAIjC,EAAE;;IAe3B,0BAA0B,CAAC,KAAkB;QAC3C,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACzC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,eAAe,CAAC;YAC1C,OAAO;QACT,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED,YAAY,CAAC,KAAa;QACxB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,KAAK;YACL,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,aAAa;YACtB,6DAAM,IAAI,EAAC,OAAO,IACf,IAAI,CAAC,KAAK,IAAI,CACb,SAAG,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE;gBAC/B,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACtC,IAAI,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,UAAU,QAAS,CAC/C,CACL,CACI;YACN,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC1B;gBACE,WAAK,KAAK,EAAC,cAAc;oBACvB,aAAO,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI;oBAC3J;wBACE,YAAM,KAAK,EAAC,OAAO,IAAE,MAAM,CAAC,KAAK,CAAQ;wBACzC,YAAM,KAAK,EAAC,aAAa,IAAE,MAAM,CAAC,WAAW,CAAQ,CACnD,CACA,CACA,CACT,CAAC;YACD,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC5D,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// 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"]}

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

@@ -8,6 +8,8 @@ export class SelectDropdown {
         this.label = undefined;
         this.required = false;
         this.pluralizedLabel = '';
+        this.dropdownButtonText = undefined;
+        this.withChevron = true;
         this.selectedOption = this.defaultSelectedOption || null;
         this.isOpen = false;
         this.searchValue = '';
@@ -145,6 +147,12 @@ export class SelectDropdown {
             this.isOpen = false;
         }
     }
+    generateButtonText() {
+        if (this.dropdownButtonText) {
+            return this.dropdownButtonText;
+        }
+        return this.selectedOption?.label ? `${this.selectedOption?.label + this.pluralizedLabel}` : '';
+    }
     handleOutsideClick(event) {
         const path = event.composedPath();
         const isClickInside = path.includes(this.el);
@@ -153,11 +161,11 @@ export class SelectDropdown {
         }
     }
     render() {
-        return (h("div", { key: '8c4d201f5fa71b9707a1cb50adc62399f32e5aba', class: "dropdown", part: "sd_dropdown" }, h("label", { key: 'b2e4851e2925d7e44c36a538a28001a838124cba', part: "sd_dropdown_label", class: { error: !!this.errorMessage } }, this.label && (h("p", null, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*"))), h("button", { key: '66559916660643e8ed8ed67bf821fa2eb122ea6c', part: "sd_dropdown-button", class: { dropbtn: true, open: this.isOpen, error: !!this.errorMessage }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: '2916f44530f59d218171c54dfe7a6949b3f773c4', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '21653fb2f1225a0f9d64b6939da10b66eeeb8fcc', class: "selected-option", part: "sd_dropdown-button-selected-label" }, this.selectedOption?.label ? `${this.selectedOption?.label + this.pluralizedLabel}` : ''), h("span", { key: '900f31e8a1ca22a3be2f4ca965bdaa9099ef3fca', class: {
+        return (h("div", { key: 'f643753d922b05b52ab0b8fe0dbc15733a9c699b', class: "dropdown", part: "sd_dropdown" }, h("label", { key: '14478d5755183604ee9aa617ab9540be7c57604e', part: "sd_dropdown_label", class: { error: !!this.errorMessage } }, this.label && (h("p", null, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*"))), h("button", { key: '0a053de6ef29c2c8ca232f52d1a3e787f54e69cc', part: "sd_dropdown-button", class: { dropbtn: true, open: this.isOpen, error: !!this.errorMessage }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: '857627db765aafdcf8c5241c97959cab5e323c39', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '18d16c1a7edc6fed463de8c9739782dbd0839b7c', class: "selected-option", part: "sd_dropdown-button-selected-label" }, this.generateButtonText()), this.withChevron && (h("span", { class: {
                 open: this.isOpen,
                 closed: !this.isOpen,
                 chevron: true,
-            }, "aria-hidden": "true" }, h("chevron-icon", { key: 'd0a08c205df0a9258b699618cad25eff5085fe84', width: "16", height: "16" }))), this.errorMessage && h("span", { class: "error help-text" }, this.errorMessage)), this.isOpen ? (h("div", { class: "dropdown-content", part: "sd_dropdown-content" }, this.withSearch && (h("div", { class: { 'search-box': true, 'open': this.isOpen } }, h("search-icon", { width: "15", height: "15", class: 'icon' }), h("input", { type: "text", role: "combobox", placeholder: "Search", value: this.searchValue, ref: el => (this.inputRef = el), onInput: event => this.filterOptions(event), onKeyDown: e => this.handleComboboxKeyDown(e) }))), h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: e => this.handleListboxKeydown(e) }, this.filteredOptions.map(option => option.value && (h("li", { tabindex: "0", key: option.value, id: option.value, onClick: () => this.selectOption(option), role: "option" }, option.labelHTML ? option.labelHTML : option.label)))))) : null));
+            }, "aria-hidden": "true" }, h("chevron-icon", { width: "16", height: "16" })))), this.errorMessage && h("span", { class: "error help-text" }, this.errorMessage)), this.isOpen ? (h("div", { class: "dropdown-content", part: "sd_dropdown-content" }, this.withSearch && (h("div", { class: { 'search-box': true, 'open': this.isOpen } }, h("search-icon", { width: "15", height: "15", class: 'icon' }), h("input", { type: "text", role: "combobox", placeholder: "Search", value: this.searchValue, ref: el => (this.inputRef = el), onInput: event => this.filterOptions(event), onKeyDown: e => this.handleComboboxKeyDown(e) }))), h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: e => this.handleListboxKeydown(e) }, this.filteredOptions.map(option => option.value && (h("li", { tabindex: "0", key: option.value, id: option.value, onClick: () => this.selectOption(option), role: "option" }, option.labelHTML ? h("div", { part: "sd_dropdown-labelhtml" }, option.labelHTML) : option.label)))))) : null));
     }
     static get is() { return "select-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -301,6 +309,41 @@ export class SelectDropdown {
                 "attribute": "pluralized-label",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "dropdownButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the select dropdown to be used as a button with dropdownButtonText representing actions &  dropdownText name on the dropdown intead of selected value"
+                },
+                "attribute": "dropdown-button-text",
+                "reflect": false
+            },
+            "withChevron": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Should show chevron on button"
+                },
+                "attribute": "with-chevron",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"select-dropdown.js","sourceRoot":"","sources":["../../../../src/components/design-system/select-dropdown/select-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\n\ninterface DropdownOption {\n labelHTML?: HTMLElement;\n label: string;\n value: string;\n}\n\n/*\n The `select-dropdown` component is a dropdown that allows users to select an option from a list of options.\n * @part sd_dropdown - The dropdown container\n * @part sd_dropdown-button - The dropdown button\n * @part sd_dropdown-button-selected-label - The selected option label\n * @part sd_dropdown-content - The dropdown content\n * @part sd_dropdown_label - The dropdown label\n /\n@Component({\n tag: 'select-dropdown',\n styleUrl: 'select-dropdown.scss',\n shadow: true,\n})\nexport class SelectDropdown {\n @Element() el!: HTMLElement;\n\n private inputRef?: HTMLInputElement;\n\n // Props\n /\n The name of the dropdown\n /\n @Prop() name!: string;\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n /\n The default selected option\n /\n @Prop() defaultSelectedOption?: DropdownOption;\n /\n Should show search input\n /\n @Prop() withSearch: boolean = true;\n\n /\n The label for the dropdown, skipped if no label is provided\n /\n @Prop() label?: string;\n\n /\n If true, the dropdown is required for form submission\n /\n @Prop() required: boolean = false;\n\n /\n Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n /\n @Prop() pluralizedLabel: string = '';\n\n // States\n /\n The selected option\n /\n @State() selectedOption: DropdownOption \| null = this.defaultSelectedOption \|\| null;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n /\n The search value for the dropdown\n /\n @State() searchValue: string = '';\n /\n The filtered options based on the search value\n /\n @State() filteredOptions: DropdownOption[] = [...this.options];\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n * the active option.\n /\n @State() ariaActivedescendant: string = '';\n\n /\n The error message to display when the value is empty or null and the dropdown is required\n /\n @State() errorMessage: string = '';\n\n // Events\n /\n This event is fired when the selected option is changed\n /\n @Event({ bubbles: true, composed: true }) nylasFormDropdownChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = newValue;\n }\n\n @Watch('defaultSelectedOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (typeof newValue === 'undefined' \|\| newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n }\n\n // Lifecycle methods\n componentWillLoad() {\n this.filteredOptions = this.options;\n // Set the selected option to the first option if no option is selected\n if (!this.selectedOption && !!this.defaultSelectedOption) {\n this.selectedOption = this.defaultSelectedOption;\n }\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\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.selectedOption?.value \|\| '');\n if (this.errorMessage) {\n event.preventDefault();\n }\n }\n\n // Methods\n validate(value: string) {\n if (this.required && !value) {\n this.errorMessage = `${this.label} is required.`;\n } else {\n this.errorMessage = '';\n }\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n filterOptions(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.searchValue = value;\n this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(value.toLowerCase()));\n }\n\n selectOption(option: DropdownOption): void {\n this.errorMessage = '';\n this.selectedOption = option;\n this.toggleDropdown();\n this.nylasFormDropdownChanged.emit({\n value: option.value,\n name: this.name,\n error: this.errorMessage,\n label: this.label,\n });\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n this.inputRef?.focus();\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e) {\n const items = this.filteredOptions; // Assuming this is the array of your current filtered options\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n if (e.key === 'ArrowDown' \|\| (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === items.length - 1) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' \|\| (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === 0) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n } else if (e.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n focusOption(index) {\n const option = this.filteredOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' \|\| (event.key == 'Tab' && !event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[0].value;\n this.focusOption(0);\n } else if (event.key === 'ArrowUp' \|\| (event.key === 'Tab' && event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n this.focusOption(this.filteredOptions.length - 1);\n } else if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n render() {\n return (\n <div class=\"dropdown\" part=\"sd_dropdown\">\n <label part=\"sd_dropdown_label\" class={{ error: !!this.errorMessage }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n )}\n <button\n part=\"sd_dropdown-button\"\n class={{ dropbtn: true, open: this.isOpen, error: !!this.errorMessage }}\n onClick={() => this.toggleDropdown()}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"sd_dropdown-button-selected-label\">\n {this.selectedOption?.label ? `${this.selectedOption?.label + this.pluralizedLabel}` : ''}\n </span>\n <span\n class={{\n open: this.isOpen,\n closed: !this.isOpen,\n chevron: true,\n }}\n aria-hidden=\"true\"\n >\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n </button>\n {this.errorMessage && <span class=\"error help-text\">{this.errorMessage}</span>}\n </label>\n\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"sd_dropdown-content\">\n {this.withSearch && (\n <div class={{ 'search-box': true, 'open': this.isOpen }}>\n <search-icon width=\"15\" height=\"15\" class={'icon'} />\n <input\n type=\"text\"\n role=\"combobox\"\n placeholder=\"Search\"\n value={this.searchValue}\n ref={el => (this.inputRef = el)}\n onInput={event => this.filterOptions(event)}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n />\n </div>\n )}\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.filteredOptions.map(\n option =>\n option.value && (\n <li tabindex=\"0\" key={option.value} id={option.value} onClick={() => this.selectOption(option)} role=\"option\">\n {option.labelHTML ? option.labelHTML : option.label}\n </li>\n ),\n )}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"select-dropdown.js","sourceRoot":"","sources":["../../../../src/components/design-system/select-dropdown/select-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\n\ninterface DropdownOption {\n labelHTML?: HTMLElement;\n label: string;\n value: string;\n}\n\n/*\n The `select-dropdown` component is a dropdown that allows users to select an option from a list of options.\n * This component is used in the scheduling form to input dropdown type inputs.\n * @part sd_dropdown - The dropdown container\n * @part sd_dropdown-button - The dropdown button\n * @part sd_dropdown-button-selected-label - The selected option label\n * @part sd_dropdown-content - The dropdown content\n * @part sd_dropdown_label - The dropdown label\n /\n@Component({\n tag: 'select-dropdown',\n styleUrl: 'select-dropdown.scss',\n shadow: true,\n})\nexport class SelectDropdown {\n @Element() el!: HTMLElement;\n\n private inputRef?: HTMLInputElement;\n\n // Props\n /\n The name of the dropdown\n /\n @Prop() name!: string;\n /\n The options to display in the dropdown\n /\n @Prop() options: DropdownOption[] = [];\n /\n The default selected option\n /\n @Prop() defaultSelectedOption?: DropdownOption;\n /\n Should show search input\n /\n @Prop() withSearch: boolean = true;\n\n /\n The label for the dropdown, skipped if no label is provided\n /\n @Prop() label?: string;\n\n /\n If true, the dropdown is required for form submission\n /\n @Prop() required: boolean = false;\n\n /\n Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n /\n @Prop() pluralizedLabel: string = '';\n /\n Overrides the select dropdown to be used as a button with dropdownButtonText representing actions & dropdownText name on the dropdown intead of selected value\n /\n @Prop() dropdownButtonText?: string;\n /\n Should show chevron on button\n /\n @Prop() withChevron: boolean = true;\n // States\n /\n The selected option\n /\n @State() selectedOption: DropdownOption \| null = this.defaultSelectedOption \|\| null;\n /\n The open state of the dropdown\n /\n @State() isOpen: boolean = false;\n /\n The search value for the dropdown\n /\n @State() searchValue: string = '';\n /\n The filtered options based on the search value\n /\n @State() filteredOptions: DropdownOption[] = [...this.options];\n /\n The aria-activedescendant attribute for the listbox element to indicate the currently active\n * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n * the active option.\n /\n @State() ariaActivedescendant: string = '';\n\n /\n The error message to display when the value is empty or null and the dropdown is required\n /\n @State() errorMessage: string = '';\n\n // Events\n /\n This event is fired when the selected option is changed\n /\n @Event({ bubbles: true, composed: true }) nylasFormDropdownChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = newValue;\n }\n\n @Watch('defaultSelectedOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (typeof newValue === 'undefined' \|\| newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n }\n\n // Lifecycle methods\n componentWillLoad() {\n this.filteredOptions = this.options;\n // Set the selected option to the first option if no option is selected\n if (!this.selectedOption && !!this.defaultSelectedOption) {\n this.selectedOption = this.defaultSelectedOption;\n }\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\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.selectedOption?.value \|\| '');\n if (this.errorMessage) {\n event.preventDefault();\n }\n }\n\n // Methods\n validate(value: string) {\n if (this.required && !value) {\n this.errorMessage = `${this.label} is required.`;\n } else {\n this.errorMessage = '';\n }\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n filterOptions(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.searchValue = value;\n this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(value.toLowerCase()));\n }\n\n selectOption(option: DropdownOption): void {\n this.errorMessage = '';\n this.selectedOption = option;\n this.toggleDropdown();\n this.nylasFormDropdownChanged.emit({\n value: option.value,\n name: this.name,\n error: this.errorMessage,\n label: this.label,\n });\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n this.inputRef?.focus();\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e) {\n const items = this.filteredOptions; // Assuming this is the array of your current filtered options\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n if (e.key === 'ArrowDown' \|\| (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === items.length - 1) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' \|\| (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === 0) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n } else if (e.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n focusOption(index) {\n const option = this.filteredOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' \|\| (event.key == 'Tab' && !event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[0].value;\n this.focusOption(0);\n } else if (event.key === 'ArrowUp' \|\| (event.key === 'Tab' && event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n this.focusOption(this.filteredOptions.length - 1);\n } else if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n generateButtonText(): string {\n if (this.dropdownButtonText) {\n return this.dropdownButtonText;\n }\n return this.selectedOption?.label ? `${this.selectedOption?.label + this.pluralizedLabel}` : '';\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n render() {\n return (\n <div class=\"dropdown\" part=\"sd_dropdown\">\n <label part=\"sd_dropdown_label\" class={{ error: !!this.errorMessage }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\"></span>}\n </p>\n )}\n <button\n part=\"sd_dropdown-button\"\n class={{ dropbtn: true, open: this.isOpen, error: !!this.errorMessage }}\n onClick={() => this.toggleDropdown()}\n aria-haspopup=\"listbox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"sd_dropdown-button-selected-label\">\n {this.generateButtonText()}\n </span>\n {this.withChevron && (\n <span\n class={{\n open: this.isOpen,\n closed: !this.isOpen,\n chevron: true,\n }}\n aria-hidden=\"true\"\n >\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n )}\n </button>\n {this.errorMessage && <span class=\"error help-text\">{this.errorMessage}</span>}\n </label>\n\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"sd_dropdown-content\">\n {this.withSearch && (\n <div class={{ 'search-box': true, 'open': this.isOpen }}>\n <search-icon width=\"15\" height=\"15\" class={'icon'} />\n <input\n type=\"text\"\n role=\"combobox\"\n placeholder=\"Search\"\n value={this.searchValue}\n ref={el => (this.inputRef = el)}\n onInput={event => this.filterOptions(event)}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n />\n </div>\n )}\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.filteredOptions.map(\n option =>\n option.value && (\n <li tabindex=\"0\" key={option.value} id={option.value} onClick={() => this.selectOption(option)} role=\"option\">\n {option.labelHTML ? <div part=\"sd_dropdown-labelhtml\">{option.labelHTML}</div> : option.label}\n </li>\n ),\n )}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n"]}

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

@@ -10,6 +10,7 @@ export class TextareaComponent {
         this.readOnly = false;
         this.autoFocus = false;
         this.maxLength = 255;
+        this.type = 'multi_line_text';
         this.value = '';
         this.error = '';
     }
@@ -30,6 +31,7 @@ export class TextareaComponent {
             name: this.name,
             error: this.error,
             label: this.label,
+            type: this.type,
         });
     }
     validate(value) {
@@ -44,7 +46,7 @@ export class TextareaComponent {
         }
     }
     render() {
-        return (h("label", { key: 'c50781bd0a20ae976d5a8991f62a4491ad92cf26', part: "tc__label", class: { error: !!this.error } }, h("p", { key: '379135af9453a717675b92dd2a2bd9a7dcf0a201' }, h("span", { key: '03f6acdb661f443ada626d83a2d3bce76ce3b451', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")), h("textarea", { key: '93ad5be33536e6464021d594c3a30a8c251a9977', name: this.name, placeholder: this.placeholder, readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, onInput: e => this.handleInput(e), class: { error: !!this.error }, part: "tc__textarea" }), this.error && h("span", { class: "error help-text" }, this.error)));
+        return (h("label", { key: 'd3b47fecea63bd4674d4d9e67e7f74697004b03e', part: "tc__label", class: { error: !!this.error } }, h("p", { key: '81b682db7ded02d9111661e2ffe1cc0650546bfc' }, h("span", { key: '2e2120f1d32af6b5fffff7ee913f01c6d73155eb', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")), h("textarea", { key: 'bc7426f389b42a25a251a3b8b878e3b2ee8fd5a0', name: this.name, placeholder: this.placeholder, readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, onInput: e => this.handleInput(e), class: { error: !!this.error }, part: "tc__textarea" }), this.error && h("span", { class: "error help-text" }, this.error)));
     }
     static get is() { return "textarea-component"; }
     static get encapsulation() { return "shadow"; }
@@ -203,6 +205,24 @@ export class TextareaComponent {
                 "attribute": "max-length",
                 "reflect": false,
                 "defaultValue": "255"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type"
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'multi_line_text'"
             }
         };
     }
@@ -224,8 +244,8 @@ export class TextareaComponent {
                     "text": "Event emitted when the value of the textarea changes.\nUseful for parent components to capture user input."
                 },
                 "complexType": {
-                    "original": "{ value: string; name: string; error: string; label: string }",
-                    "resolved": "{ value: string; name: string; error: string; label: string; }",
+                    "original": "{ value: string; name: string; error: string; label: string; type: string }",
+                    "resolved": "{ value: string; name: string; error: string; label: string; type: string; }",
                     "references": {}
                 }
             }];

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

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea-component.js","sourceRoot":"","sources":["../../../../src/components/design-system/textarea-component/textarea-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,YAAY,MAAM,eAAe,CAAC;~~AAczC~~,MAAM,OAAO,iBAAiB;;oBAIL,UAAU;4BAKF,EAAE;qBAKT,EAAE;2BAKI,EAAE;wBAMJ,KAAK;wBAKL,KAAK;yBAKJ,KAAK;yBAKN,GAAG;~~qBAKN~~,EAAE;qBAKF,EAAE;;IAY3B,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC/C,CAAC;IAOD,0BAA0B,CAAC,KAAkB;QAC3C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAKD,WAAW,CAAC,CAAQ;QAClB,MAAM,YAAY,GAAG,CAAC,CAAC,MAA6B,CAAC;QACrD,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;~~SAClB~~,CAAC,CAAC;IACL,CAAC;IAMD,QAAQ,CAAC,KAAa;QACpB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,eAAe,CAAC;QAC5C,CAAC;aAAM,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YACzC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,kBAAkB,IAAI,CAAC,SAAS,cAAc,CAAC;QAC3E,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAClB,CAAC;IACH,CAAC;IAKD,MAAM;QACJ,OAAO,CACL,8DAAO,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE;YACpD;gBACE,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACtC,IAAI,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,UAAU,QAAS,CAC/C;YACJ,iEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,EAC9B,IAAI,EAAC,cAAc,GACnB;YACD,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1D,CACT,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport sanitizeHtml from 'sanitize-html'; // Importing sanitize-html to clean inputs and prevent XSS attacks.\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 \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 /\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 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 }>;\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 componentWillLoad() {\n this.value = sanitizeHtml(this.defaultValue);\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 /\n Handles user input in the textarea, updating the value and emitting an event.\n /\n handleInput(e: Event) {\n const inputElement = e.target as HTMLTextAreaElement;\n this.value = sanitizeHtml(inputElement.value);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n error: this.error,\n label: this.label,\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.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 </p>\n <textarea\n name={this.name}\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"]}
1	+ {"version":3,"file":"textarea-component.js","sourceRoot":"","sources":["../../../../src/components/design-system/textarea-component/textarea-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport sanitizeHtml from 'sanitize-html'; // Importing sanitize-html to clean inputs and prevent XSS attacks.\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 /\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 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 /\n Lifecycle method that runs before the component loads.\n * It sets the initial value and cleans it using sanitize-html.\n /\n componentWillLoad() {\n this.value = sanitizeHtml(this.defaultValue);\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 /\n Handles user input in the textarea, updating the value and emitting an event.\n /\n handleInput(e: Event) {\n const inputElement = e.target as HTMLTextAreaElement;\n this.value = sanitizeHtml(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.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 </p>\n <textarea\n name={this.name}\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"]}

package/dist/collection/components/design-system/time-period-selector/time-period-selector.js CHANGED Viewed

@@ -97,7 +97,7 @@ export class TimePeriodSelector {
         this.selectedNumber = parseInt(this.numberOptions[0].value);
     }
     render() {
-        return (h("div", { key: 'a4b421b31d77e41c8ef3c2a7533699a6cfaeb60c', class: "time-period-selector" }, h("input-dropdown", { key: 'b5f99b1d27195ad8fdc3617cf04e3fba3cfd49dd', id: "time-number", name: 'time-number', inputValue: this.selectedNumber.toString(), exportparts: "sd_dropdown: tps__number-dropdown, sd_dropdown-button: tps__number-dropdown-button, sd_dropdown-content: tps__number-dropdown-content", options: this.numberOptions, defaultInputOption: this.numberOptions.find(i => i.value == this.selectedNumber.toString()) ?? this.numberOptions[0] }), h("select-dropdown", { key: 'c06e213131979c07431ed1a6964bd0e0e2338b97', id: "time-period", name: 'time-period', options: this.timePeriodOptions, exportparts: "sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content", pluralizedLabel: this.selectedNumber > 1 ? 's' : '', defaultSelectedOption: this.timePeriodOptions.find(i => i.value == this.selectedPeriod) ?? this.timePeriodOptions[0], withSearch: false })));
+        return (h("div", { key: '00e1115959b6f838c0ec39a27edbfa0b2e24ac01', class: "time-period-selector" }, h("input-dropdown", { key: '1b669cbacab8c5d385c6a7edfe4a25044a6dddbe', id: "time-number", name: 'time-number', inputValue: this.selectedNumber.toString(), exportparts: "sd_dropdown: tps__number-dropdown, sd_dropdown-button: tps__number-dropdown-button, sd_dropdown-content: tps__number-dropdown-content", options: this.numberOptions, defaultInputOption: this.numberOptions.find(i => i.value == this.selectedNumber.toString()) ?? this.numberOptions[0] }), h("select-dropdown", { key: 'c68685b0d8e4ef284c09d40bf78e9c2d94f82fff', id: "time-period", name: 'time-period', options: this.timePeriodOptions, exportparts: "sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content", pluralizedLabel: this.selectedNumber > 1 ? 's' : '', defaultSelectedOption: this.timePeriodOptions.find(i => i.value == this.selectedPeriod) ?? this.timePeriodOptions[0], withSearch: false })));
     }
     static get is() { return "time-period-selector"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/design-system/toggle-switch/toggle-switch.css CHANGED Viewed

@@ -33,7 +33,7 @@
 }
 .slider {
-  background-color: var(--nylas-base-400);
+  background-color: var(--nylas-base-300);
   bottom: 0;
   cursor: pointer;
   left: 0;