@nylas/web-elements 1.1.0-canary.16 → 1.1.0-canary.17

package/dist/components/google-logo.js

@@ -10,7 +10,7 @@ const GoogleLogoIcon = proxyCustomElement(class GoogleLogoIcon extends HTMLEleme
         this.height = '24';
     }
     render() {
-        return (h("svg", { key: '48ccae649f280d48621dfb214a08b980155680a1', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '10196951caa0fa0b94b57c57a62d8bcb31d92d91', "clip-path": "url(#clip0_959_12452)" }, h("path", { key: '0d2358cd1dcbd7f9ef2dfa17a5075a341210a43c', d: "M23.745 12.27C23.745 11.48 23.675 10.73 23.555 10H12.255V14.51H18.725C18.435 15.99 17.585 17.24 16.325 18.09V21.09H20.185C22.445 19 23.745 15.92 23.745 12.27Z", fill: "#4285F4" }), h("path", { key: '8540c5619b64996b6b158fe50609aa378dfd468f', d: "M12.255 24C15.495 24 18.205 22.92 20.185 21.09L16.325 18.09C15.245 18.81 13.875 19.25 12.255 19.25C9.12504 19.25 6.47505 17.14 5.52505 14.29H1.54504V17.38C3.51504 21.3 7.56504 24 12.255 24Z", fill: "#34A853" }), h("path", { key: 'b683a33b6068de0793ef4426e6404d438dbdf73e', d: "M5.52501 14.2901C5.27501 13.5701 5.145 12.8001 5.145 12.0001C5.145 11.2001 5.28501 10.4301 5.52501 9.71012V6.62012H1.545C0.725004 8.24012 0.255005 10.0601 0.255005 12.0001C0.255005 13.9401 0.725004 15.7601 1.545 17.3801L5.52501 14.2901Z", fill: "#FBBC05" }), h("path", { key: '916d663bbb04c8267e595adf9125068232414ed7', d: "M12.255 4.75C14.025 4.75 15.605 5.36 16.855 6.55L20.275 3.13C18.205 1.19 15.495 0 12.255 0C7.56504 0 3.51504 2.7 1.54504 6.62L5.52505 9.71C6.47505 6.86 9.12504 4.75 12.255 4.75Z", fill: "#EA4335" })), h("defs", { key: 'a941f8ccb1711f648dc3e2db750496a2491b4b55' }, h("clipPath", { key: 'caef3b6e814ed957bcee43a794130dce6760702d', id: "clip0_959_12452" }, h("rect", { key: 'df7c24b60402fd2e9d248f4e5ccfbaa640d549ae', width: 24, height: 24, fill: "white" })))));
+        return (h("svg", { key: '2b6d66fd099e97716cdb808f575b5aadf1503a06', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '2d02d3ca40389d13f189bddba578ae683c487d3e', "clip-path": "url(#clip0_959_12452)" }, h("path", { key: '41eeee9cdd77323ffee094ce688e222c2ae95461', d: "M23.745 12.27C23.745 11.48 23.675 10.73 23.555 10H12.255V14.51H18.725C18.435 15.99 17.585 17.24 16.325 18.09V21.09H20.185C22.445 19 23.745 15.92 23.745 12.27Z", fill: "#4285F4" }), h("path", { key: '7a8f1123dc6b8b29324eb255637f7b536982e112', d: "M12.255 24C15.495 24 18.205 22.92 20.185 21.09L16.325 18.09C15.245 18.81 13.875 19.25 12.255 19.25C9.12504 19.25 6.47505 17.14 5.52505 14.29H1.54504V17.38C3.51504 21.3 7.56504 24 12.255 24Z", fill: "#34A853" }), h("path", { key: 'e71780d270c31b20d6617deb912a0b74b3dc8004', d: "M5.52501 14.2901C5.27501 13.5701 5.145 12.8001 5.145 12.0001C5.145 11.2001 5.28501 10.4301 5.52501 9.71012V6.62012H1.545C0.725004 8.24012 0.255005 10.0601 0.255005 12.0001C0.255005 13.9401 0.725004 15.7601 1.545 17.3801L5.52501 14.2901Z", fill: "#FBBC05" }), h("path", { key: '4e8795414ed616287f7e315d9d4ae7882832c56c', d: "M12.255 4.75C14.025 4.75 15.605 5.36 16.855 6.55L20.275 3.13C18.205 1.19 15.495 0 12.255 0C7.56504 0 3.51504 2.7 1.54504 6.62L5.52505 9.71C6.47505 6.86 9.12504 4.75 12.255 4.75Z", fill: "#EA4335" })), h("defs", { key: '9ad522ed57a9d8c75d8515e0e0a1e64d1dcde3a0' }, h("clipPath", { key: 'da8c3ef1116cd32e06a73e30c5c4bc335f209d5b', id: "clip0_959_12452" }, h("rect", { key: '8936b3346ec26a6c0901073adca44b8021661be6', width: 24, height: 24, fill: "white" })))));
     }
     static get style() { return iconCss; }
 }, [2, "google-logo-icon", {

package/dist/components/inbox.js

@@ -10,7 +10,7 @@ const InboxIcon = proxyCustomElement(class InboxIcon extends HTMLElement {
         this.height = '15';
     }
     render() {
-        return (h("svg", { key: 'bcdb88fa2aa40f8bbf8f59859885380d43ed7789', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "auto", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd791a9f6af9aa117d63e1514163ed21436205ca9', d: "M20 3H4C2.89543 3 2 3.89543 2 5V19C2 20.1046 2.89543 21 4 21H20C21.1046 21 22 20.1046 22 19V5C22 3.89543 21.1046 3 20 3Z", stroke: "auto", "stroke-width": "1.5" }), h("path", { key: '4ad779f73d50c65b81b54e7aa090848710805621', d: "M2 5L12 12.5L22 5", stroke: "auto", "stroke-width": "1.5" })));
+        return (h("svg", { key: '3b029e8c7dd088a23a5f3c88fd65f5aeffcceadc', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "auto", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8f2a8e1685a461ed2691feaf7f7723226ae2aafe', d: "M20 3H4C2.89543 3 2 3.89543 2 5V19C2 20.1046 2.89543 21 4 21H20C21.1046 21 22 20.1046 22 19V5C22 3.89543 21.1046 3 20 3Z", stroke: "auto", "stroke-width": "1.5" }), h("path", { key: '8566f06f377eb7b3a84eb21c102c2cb6b3806b02', d: "M2 5L12 12.5L22 5", stroke: "auto", "stroke-width": "1.5" })));
     }
     static get style() { return iconCss; }
 }, [2, "inbox-icon", {

package/dist/components/info.js

@@ -10,7 +10,7 @@ const InfoIcon = proxyCustomElement(class InfoIcon extends HTMLElement {
         this.height = '14';
     }
     render() {
-        return (h("svg", { key: '8200b4afbec3bdbc9f5ed2b62d938dcee20b7e39', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8101a5ae2ab8f1f016bcfcb0e8961da8170fd692', fill: "currentColor", d: "M6.5 5.5C6.77614 5.5 7 5.72386 7 6V9C7 9.27614 6.77614 9.5 6.5 9.5C6.22386 9.5 6 9.27614 6 9V6C6 5.72386 6.22386 5.5 6.5 5.5ZM6.50001 4.74907C6.91369 4.74907 7.24905 4.41371 7.24905 4.00003C7.24905 3.58635 6.91369 3.251 6.50001 3.251C6.08633 3.251 5.75098 3.58635 5.75098 4.00003C5.75098 4.41371 6.08633 4.74907 6.50001 4.74907ZM0.5 6.5C0.5 3.18629 3.18629 0.5 6.5 0.5C9.81371 0.5 12.5 3.18629 12.5 6.5C12.5 9.81371 9.81371 12.5 6.5 12.5C3.18629 12.5 0.5 9.81371 0.5 6.5ZM6.5 1.5C3.73858 1.5 1.5 3.73858 1.5 6.5C1.5 9.26142 3.73858 11.5 6.5 11.5C9.26142 11.5 11.5 9.26142 11.5 6.5C11.5 3.73858 9.26142 1.5 6.5 1.5Z" })));
+        return (h("svg", { key: 'ce2f820ce9aacb96c4464a56676f1f136980caa2', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3ff43e8365a2d1aa6908f36f9c9eb9c90d91dba4', fill: "currentColor", d: "M6.5 5.5C6.77614 5.5 7 5.72386 7 6V9C7 9.27614 6.77614 9.5 6.5 9.5C6.22386 9.5 6 9.27614 6 9V6C6 5.72386 6.22386 5.5 6.5 5.5ZM6.50001 4.74907C6.91369 4.74907 7.24905 4.41371 7.24905 4.00003C7.24905 3.58635 6.91369 3.251 6.50001 3.251C6.08633 3.251 5.75098 3.58635 5.75098 4.00003C5.75098 4.41371 6.08633 4.74907 6.50001 4.74907ZM0.5 6.5C0.5 3.18629 3.18629 0.5 6.5 0.5C9.81371 0.5 12.5 3.18629 12.5 6.5C12.5 9.81371 9.81371 12.5 6.5 12.5C3.18629 12.5 0.5 9.81371 0.5 6.5ZM6.5 1.5C3.73858 1.5 1.5 3.73858 1.5 6.5C1.5 9.26142 3.73858 11.5 6.5 11.5C9.26142 11.5 11.5 9.26142 11.5 6.5C11.5 3.73858 9.26142 1.5 6.5 1.5Z" })));
     }
     static get style() { return iconCss; }
 }, [2, "info-icon", {

package/dist/components/input-component2.js

@@ -73,7 +73,7 @@ const InputComponent = proxyCustomElement(class InputComponent extends HTMLEleme
         }
     }
     render() {
-        return (h("label", { key: 'c6457e4509ab2ef08a2424e63e2b3733ad25775f', part: "ic__label", class: { error: !!this.error } }, h("p", { key: 'ea89771a3db615fa73b1e53f9dc9f0c12fabf9ba' }, h("span", { key: 'd38825ae45369b81bf1c64baa5a39e691f16d102', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")), h("input", { key: '5ac30172d8f4585b631540ea62af8842d0c84892', type: "text", name: this.name, part: "ic__input", readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, placeholder: this.placeholder, class: { error: !!this.error }, onInput: e => this.handleInput(e) }), this.error && (h("span", { class: "error help-text" }, this.error, " ", this.value && this.patternError !== '' ? ` ${this.patternError}` : ''))));
+        return (h("label", { key: 'bd7027de6ce8ee5e42ab21e7cf6edae93c4ba3c7', part: "ic__label", class: { error: !!this.error } }, h("p", { key: '60f7bacac3dc2219630db2749ff1dbbef06448d9' }, h("span", { key: '1ffec3cdf186ee84048ca0f9a64af199a44748d0', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")), h("input", { key: 'ca868128b3b83e8adffa87e596b0e68b58a925c1', type: "text", name: this.name, part: "ic__input", readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, placeholder: this.placeholder, class: { error: !!this.error }, onInput: e => this.handleInput(e) }), this.error && (h("span", { class: "error help-text" }, this.error, " ", this.value && this.patternError !== '' ? ` ${this.patternError}` : ''))));
     }
     static get style() { return inputComponentCss; }
 }, [1, "input-component", {

package/dist/components/input-dropdown2.js

@@ -13,6 +13,7 @@ const InputDropdown = proxyCustomElement(class InputDropdown extends HTMLElement
         this.defaultInputOption = undefined;
         this.inputValue = undefined;
         this.pluralizedLabel = '';
+        this.filterable = false;
         this.selectedOption = this.defaultInputOption || null;
         this.isOpen = false;
         this.filteredOptions = [...this.options];
@@ -23,7 +24,7 @@ const InputDropdown = proxyCustomElement(class InputDropdown extends HTMLElement
         if (newValue === oldValue) {
             return;
         }
-        this.filteredOptions = newValue;
+        this.filteredOptions = this.getFilteredOptions(newValue);
     }
     defaultSelectedOptionChangedHandler(newValue, oldValue) {
         if (newValue.label === oldValue.label) {
@@ -36,9 +37,10 @@ const InputDropdown = proxyCustomElement(class InputDropdown extends HTMLElement
             return;
         }
         this.inputValue = newValue;
+        this.filteredOptions = this.getFilteredOptions(this.options);
     }
     componentWillLoad() {
-        this.filteredOptions = this.options;
+        this.filteredOptions = this.getFilteredOptions(this.options);
         if (!this.selectedOption && !!this.defaultInputOption) {
             this.selectedOption = this.defaultInputOption;
         }
@@ -46,6 +48,12 @@ const InputDropdown = proxyCustomElement(class InputDropdown extends HTMLElement
             this.selectedOption = this.options[0];
         }
     }
+    getFilteredOptions(options) {
+        if (!this.filterable) {
+            return options;
+        }
+        return options.filter(option => option?.value?.toString().toLowerCase().includes(this.inputValue?.toLowerCase()) || option?.label?.toLowerCase().includes(this.inputValue?.toLowerCase()));
+    }
     toggleDropdown() {
         this.isOpen = !this.isOpen;
     }
@@ -73,6 +81,8 @@ const InputDropdown = proxyCustomElement(class InputDropdown extends HTMLElement
         const childElement = this.el.shadowRoot?.getElementById(option.value.toString());
         const parentElement = this.optionsRef;
         this.ariaActivedescendant = option.value.toString();
+        if (!childElement || !parentElement)
+            return;
         const childRect = childElement.getBoundingClientRect();
         const parentRect = parentElement.getBoundingClientRect();
         if (childRect.top < parentRect.top) {
@@ -182,7 +192,7 @@ const InputDropdown = proxyCustomElement(class InputDropdown extends HTMLElement
         }
     }
     render() {
-        return (h("div", { key: '24c46ff43e7ff2701790b5e7cd69833a4c0fa02f', class: "dropdown", part: "id_dropdown" }, h("input", { key: '86724f295c643d3edda0de987b17f85389a0a716', type: "text", name: this.name, id: this.name, part: "id_dropdown-input", class: { dropbtn: true, open: this.isOpen }, value: this.inputValue, onClick: (e) => {
+        return (h("div", { key: '46501632a9bcea1b4af6d5b4b073904e14d0cf50', class: "dropdown", part: "id_dropdown" }, h("input", { key: '67e4a24466b39b39161066bb9915ca67467043f3', type: "text", name: this.name, id: this.name, part: "id_dropdown-input", class: { dropbtn: true, open: this.isOpen }, value: this.inputValue, onClick: (e) => {
                 this.toggleDropdown();
                 this.shouldAutoScroll = true;
                 this.handleClick(e);
@@ -203,6 +213,7 @@ const InputDropdown = proxyCustomElement(class InputDropdown extends HTMLElement
         "defaultInputOption": [16],
         "inputValue": [1, "input-value"],
         "pluralizedLabel": [1, "pluralized-label"],
+        "filterable": [4],
         "selectedOption": [32],
         "isOpen": [32],
         "filteredOptions": [32],

package/dist/components/input-dropdown2.js.map

@@ -1 +1 @@
-{"file":"input-dropdown2.js","mappings":"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","names":[],"sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  position: relative;\n  @media #{$mobile} {\n    position: unset;\n  }\n  @include default-css-variables;\n}\n\n.dropdown {\n  display: inline-block;\n}\n\n.dropbtn {\n  color: var(--nylas-base-800);\n  padding: 10px;\n  font-size: 1rem;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  display: flex;\n  gap: 0.5rem;\n  background: transparent;\n  border: none;\n  border-radius: var(--nylas-border-radius-2x);\n  width: 50px;\n  padding: 14px 16px;\n  border-radius: var(--nylas-border-radius-2x);\n  &.focus {\n    background: transparent;\n  }\n  &:hover,\n  &:active {\n    outline: 1px solid var(--nylas-primary);\n  }\n  &:active {\n    outline: 2px solid var(--nylas-primary);\n  }\n  span {\n    &.chevron {\n      display: flex;\n      align-self: center;\n    }\n    &.open {\n      transform: rotate(90deg);\n    }\n    &.closed {\n      transform: rotate(270deg);\n    }\n    &.selected-option {\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      max-width: 144px;\n      font-size: 14px;\n      line-height: 20px;\n      @media #{$mobile} {\n        max-width: 124px;\n        font-size: 16px;\n      }\n    }\n  }\n}\n\n.dropdown-content {\n  display: block;\n  margin-top: 0.5rem;\n  background-color: var(--nylas-base-0);\n  max-width: 306px;\n  width: max-content;\n  max-height: 336px;\n  overflow: auto;\n  z-index: 1;\n  border-radius: 4px;\n  position: absolute;\n  @media #{$mobile} {\n    right: 0;\n    width: 325px;\n    max-width: unset;\n  }\n  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.search-box {\n  border-bottom: 1px solid var(--nylas-base-200);\n  padding: 10px;\n  position: sticky;\n  top: 0;\n  background: var(--nylas-base-0);\n  .icon {\n    position: absolute;\n    top: 1.25rem;\n    left: 1.25rem;\n    color: var(--nylas-base-300);\n  }\n}\n\n.dropdown-content ul {\n  padding: 0;\n  list-style-type: none;\n  color: var(--nylas-base-900);\n  max-height: 336px;\n  li {\n    padding: 16px, 12px, 16px, 12px;\n    color: black;\n    padding: 12px 16px;\n    text-decoration: none;\n    display: block;\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0px;\n    text-align: left;\n    cursor: pointer;\n    &:hover,\n    &:focus {\n      background-color: var(--nylas-base-100);\n    }\n  }\n}\n\n.dropdown-content .selected {\n  background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n  width: -webkit-fill-available;\n  padding: inherit;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  position: sticky;\n  background: no-repeat scroll 7px 7px;\n  padding-left: 30px;\n  background-size: 16px 16px;\n}\n","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 `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options.\n * @part id_dropdown - The dropdown container\n * @part id_dropdown-input - The dropdown button\n * @part id_dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'input-dropdown',\n  styleUrl: 'input-dropdown.scss',\n  shadow: true,\n})\nexport class InputDropdown {\n  @Element() el!: HTMLElement;\n\n  private inputRef?: HTMLInputElement;\n  private optionsRef!: HTMLElement;\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() defaultInputOption?: DropdownOption;\n  /**\n   * Should show search input\n   */\n  @Prop() inputValue!: string;\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.defaultInputOption || null;\n  /**\n   * The open state of the dropdown\n   */\n  @State() isOpen: boolean = false;\n\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   * This is used to scroll to the input value.\n   */\n  @State() shouldAutoScroll: boolean = false;\n\n  // Events\n  /**\n   * This event is fired when the selected option is changed\n   */\n  @Event({ bubbles: true, composed: true }) inputOptionChanged!: EventEmitter<{\n    value: DropdownOption['value'];\n    name: 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('defaultInputOption')\n  defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n    if (newValue.label === oldValue.label) {\n      return;\n    }\n    this.selectedOption = newValue;\n  }\n\n  @Watch('inputValue')\n  inputValueChangedHandler(newValue: string, oldValue: string) {\n    if (newValue === oldValue) {\n      return;\n    }\n    this.inputValue = 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.defaultInputOption) {\n      this.selectedOption = this.defaultInputOption;\n    }\n    if (!this.selectedOption && this.options.length > 0) {\n      this.selectedOption = this.options[0];\n    }\n  }\n\n  // Methods\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectOption(option: DropdownOption): void {\n    this.selectedOption = option;\n    this.toggleDropdown();\n    this.inputOptionChanged.emit({\n      value: option.value,\n      name: this.name,\n    });\n  }\n\n  handleOnInput(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n    if (optionIndex > -1) {\n      this.scrollToViewWithinParent(optionIndex);\n    }\n    this.inputOptionChanged.emit({\n      value,\n      name: this.name,\n    });\n  }\n\n  scrollToViewWithinParent(optionIndex: number) {\n    const option = this.options[optionIndex];\n    const childElement = this.el.shadowRoot?.getElementById(option.value.toString()) as HTMLLIElement;\n    const parentElement = this.optionsRef;\n\n    this.ariaActivedescendant = option.value.toString();\n\n    // Scroll child into view within parent\n    const childRect = childElement.getBoundingClientRect();\n    const parentRect = parentElement.getBoundingClientRect();\n\n    if (childRect.top < parentRect.top) {\n      // Child is above the visible area of the parent\n      parentElement.scrollTop -= parentRect.top - childRect.top;\n    } else if (childRect.bottom > parentRect.bottom) {\n      // Child is below the visible area of the parent\n      parentElement.scrollTop += childRect.bottom - parentRect.bottom;\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  handleClick(event: Event): void {\n    if (this.isOpen) {\n      const value = (event.target as HTMLInputElement).value;\n      const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n      if (optionIndex > -1) {\n        setTimeout(() => {\n          this.scrollToViewWithinParent(optionIndex);\n        }, 10);\n      }\n    }\n  }\n\n  handleListboxKeydown(e) {\n    const items = this.filteredOptions;\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      if (!this.isOpen) {\n        this.isOpen = true;\n        this.shouldAutoScroll = true;\n        return;\n      }\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=\"id_dropdown\">\n        <input\n          type=\"text\"\n          name={this.name}\n          id={this.name}\n          part=\"id_dropdown-input\"\n          class={{ dropbtn: true, open: this.isOpen }}\n          value={this.inputValue}\n          onClick={(e: Event) => {\n            this.toggleDropdown();\n            this.shouldAutoScroll = true;\n            this.handleClick(e);\n          }}\n          aria-haspopup=\"listbox\"\n          aria-label={this.name}\n          aria-expanded={this.isOpen ? 'true' : 'false'}\n          onKeyDown={e => this.handleComboboxKeyDown(e)}\n          onInput={event => this.handleOnInput(event)}\n        />\n        {this.isOpen ? (\n          <div class=\"dropdown-content\" part=\"id_dropdown-content\" ref={el => (this.optionsRef = el as HTMLElement)}>\n            <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n              {this.filteredOptions.map(option => (\n                <li\n                  tabindex=\"0\"\n                  key={option.value}\n                  id={option.value}\n                  onClick={() => this.selectOption(option)}\n                  role=\"option\"\n                  class={{\n                    focused: this.ariaActivedescendant === option.value.toString(),\n                  }}\n                >\n                  {option.labelHTML ? option.labelHTML : option.label}\n                </li>\n              ))}\n            </ul>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"input-dropdown2.js","mappings":"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","names":[],"sources":["src/components/design-system/input-dropdown/input-dropdown.scss?tag=input-dropdown&encapsulation=shadow","src/components/design-system/input-dropdown/input-dropdown.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  position: relative;\n  @media #{$mobile} {\n    position: unset;\n  }\n  @include default-css-variables;\n}\n\n.dropdown {\n  display: inline-block;\n}\n\n.dropbtn {\n  color: var(--nylas-base-800);\n  padding: 10px;\n  font-size: 1rem;\n  font-family: var(--nylas-font-family);\n  cursor: pointer;\n  display: flex;\n  gap: 0.5rem;\n  background: transparent;\n  border: none;\n  border-radius: var(--nylas-border-radius-2x);\n  width: 50px;\n  padding: 14px 16px;\n  border-radius: var(--nylas-border-radius-2x);\n  &.focus {\n    background: transparent;\n  }\n  &:hover,\n  &:active {\n    outline: 1px solid var(--nylas-primary);\n  }\n  &:active {\n    outline: 2px solid var(--nylas-primary);\n  }\n  span {\n    &.chevron {\n      display: flex;\n      align-self: center;\n    }\n    &.open {\n      transform: rotate(90deg);\n    }\n    &.closed {\n      transform: rotate(270deg);\n    }\n    &.selected-option {\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      max-width: 144px;\n      font-size: 14px;\n      line-height: 20px;\n      @media #{$mobile} {\n        max-width: 124px;\n        font-size: 16px;\n      }\n    }\n  }\n}\n\n.dropdown-content {\n  display: block;\n  margin-top: 0.5rem;\n  background-color: var(--nylas-base-0);\n  max-width: 306px;\n  width: max-content;\n  max-height: 336px;\n  overflow: auto;\n  z-index: 1;\n  border-radius: 4px;\n  position: absolute;\n  @media #{$mobile} {\n    right: 0;\n    width: 325px;\n    max-width: unset;\n  }\n  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.search-box {\n  border-bottom: 1px solid var(--nylas-base-200);\n  padding: 10px;\n  position: sticky;\n  top: 0;\n  background: var(--nylas-base-0);\n  .icon {\n    position: absolute;\n    top: 1.25rem;\n    left: 1.25rem;\n    color: var(--nylas-base-300);\n  }\n}\n\n.dropdown-content ul {\n  padding: 0;\n  list-style-type: none;\n  color: var(--nylas-base-900);\n  max-height: 336px;\n  li {\n    padding: 16px, 12px, 16px, 12px;\n    color: black;\n    padding: 12px 16px;\n    text-decoration: none;\n    display: block;\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0px;\n    text-align: left;\n    cursor: pointer;\n    &:hover,\n    &:focus {\n      background-color: var(--nylas-base-100);\n    }\n  }\n}\n\n.dropdown-content .selected {\n  background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n  width: -webkit-fill-available;\n  padding: inherit;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  position: sticky;\n  background: no-repeat scroll 7px 7px;\n  padding-left: 30px;\n  background-size: 16px 16px;\n}\n","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 `input-dropdown` component is a dropdown that allows users to input an option and/or select from a list of options.\n * @part id_dropdown - The dropdown container\n * @part id_dropdown-input - The dropdown button\n * @part id_dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'input-dropdown',\n  styleUrl: 'input-dropdown.scss',\n  shadow: true,\n})\nexport class InputDropdown {\n  @Element() el!: HTMLElement;\n\n  private inputRef?: HTMLInputElement;\n  private optionsRef!: HTMLElement;\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() defaultInputOption?: DropdownOption;\n  /**\n   * Should show search input\n   */\n  @Prop() inputValue!: string;\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  /**\n   * This is used to set if the dropdown should be filtered based on the input value.\n   * If set to true, the dropdown will be filtered based on the input value.\n   */\n  @Prop() filterable: boolean = false;\n\n  // States\n  /**\n   * The selected option\n   */\n  @State() selectedOption: DropdownOption | null = this.defaultInputOption || null;\n  /**\n   * The open state of the dropdown\n   */\n  @State() isOpen: boolean = false;\n\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   * This is used to scroll to the input value.\n   */\n  @State() shouldAutoScroll: boolean = false;\n\n  // Events\n  /**\n   * This event is fired when the selected option is changed\n   */\n  @Event({ bubbles: true, composed: true }) inputOptionChanged!: EventEmitter<{\n    value: DropdownOption['value'];\n    name: string;\n  }>;\n\n  @Watch('options')\n  optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n    if (newValue === oldValue) {\n      return;\n    }\n    this.filteredOptions = this.getFilteredOptions(newValue);\n  }\n\n  @Watch('defaultInputOption')\n  defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n    if (newValue.label === oldValue.label) {\n      return;\n    }\n    this.selectedOption = newValue;\n  }\n\n  @Watch('inputValue')\n  inputValueChangedHandler(newValue: string, oldValue: string) {\n    if (newValue === oldValue) {\n      return;\n    }\n    this.inputValue = newValue;\n    this.filteredOptions = this.getFilteredOptions(this.options);\n  }\n\n  // Lifecycle methods\n  componentWillLoad() {\n    this.filteredOptions = this.getFilteredOptions(this.options);\n    // Set the selected option to the first option if no option is selected\n    if (!this.selectedOption && !!this.defaultInputOption) {\n      this.selectedOption = this.defaultInputOption;\n    }\n    if (!this.selectedOption && this.options.length > 0) {\n      this.selectedOption = this.options[0];\n    }\n  }\n\n  // Methods\n  getFilteredOptions(options): DropdownOption[] {\n    if (!this.filterable) {\n      return options;\n    }\n    return options.filter(\n      option => option?.value?.toString().toLowerCase().includes(this.inputValue?.toLowerCase()) || option?.label?.toLowerCase().includes(this.inputValue?.toLowerCase()),\n    );\n  }\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  selectOption(option: DropdownOption): void {\n    this.selectedOption = option;\n    this.toggleDropdown();\n    this.inputOptionChanged.emit({\n      value: option.value,\n      name: this.name,\n    });\n  }\n\n  handleOnInput(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n    if (optionIndex > -1) {\n      this.scrollToViewWithinParent(optionIndex);\n    }\n    this.inputOptionChanged.emit({\n      value,\n      name: this.name,\n    });\n  }\n\n  scrollToViewWithinParent(optionIndex: number) {\n    const option = this.options[optionIndex];\n    const childElement = this.el.shadowRoot?.getElementById(option.value.toString()) as HTMLLIElement;\n    const parentElement = this.optionsRef;\n\n    this.ariaActivedescendant = option.value.toString();\n    if (!childElement || !parentElement) return;\n    // Scroll child into view within parent\n    const childRect = childElement.getBoundingClientRect();\n    const parentRect = parentElement.getBoundingClientRect();\n\n    if (childRect.top < parentRect.top) {\n      // Child is above the visible area of the parent\n      parentElement.scrollTop -= parentRect.top - childRect.top;\n    } else if (childRect.bottom > parentRect.bottom) {\n      // Child is below the visible area of the parent\n      parentElement.scrollTop += childRect.bottom - parentRect.bottom;\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  handleClick(event: Event): void {\n    if (this.isOpen) {\n      const value = (event.target as HTMLInputElement).value;\n      const optionIndex = this.options.findIndex(option => option.label.toLowerCase().includes(value.toLowerCase()));\n      if (optionIndex > -1) {\n        setTimeout(() => {\n          this.scrollToViewWithinParent(optionIndex);\n        }, 10);\n      }\n    }\n  }\n\n  handleListboxKeydown(e) {\n    const items = this.filteredOptions;\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      if (!this.isOpen) {\n        this.isOpen = true;\n        this.shouldAutoScroll = true;\n        return;\n      }\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=\"id_dropdown\">\n        <input\n          type=\"text\"\n          name={this.name}\n          id={this.name}\n          part=\"id_dropdown-input\"\n          class={{ dropbtn: true, open: this.isOpen }}\n          value={this.inputValue}\n          onClick={(e: Event) => {\n            this.toggleDropdown();\n            this.shouldAutoScroll = true;\n            this.handleClick(e);\n          }}\n          aria-haspopup=\"listbox\"\n          aria-label={this.name}\n          aria-expanded={this.isOpen ? 'true' : 'false'}\n          onKeyDown={e => this.handleComboboxKeyDown(e)}\n          onInput={event => this.handleOnInput(event)}\n        />\n        {this.isOpen ? (\n          <div class=\"dropdown-content\" part=\"id_dropdown-content\" ref={el => (this.optionsRef = el as HTMLElement)}>\n            <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n              {this.filteredOptions.map(option => (\n                <li\n                  tabindex=\"0\"\n                  key={option.value}\n                  id={option.value}\n                  onClick={() => this.selectOption(option)}\n                  role=\"option\"\n                  class={{\n                    focused: this.ariaActivedescendant === option.value.toString(),\n                  }}\n                >\n                  {option.labelHTML ? option.labelHTML : option.label}\n                </li>\n              ))}\n            </ul>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/italic.js

@@ -10,7 +10,7 @@ const ItalicIcon = proxyCustomElement(class ItalicIcon extends HTMLElement {
         this.height = '15';
     }
     render() {
-        return (h("svg", { key: 'bb0499310a378ef5d5eebe537429f4838de7b4b5', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '33a7eb61a19c8cef346bff960a4c377925ff0587', stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "m10 20 4-16m2 0h-4m0 16H8" })));
+        return (h("svg", { key: '54ad5322614609e0b1ebaef001e3e6b10f437f41', width: this.width, height: this.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'db9da09f3eb148bbd185df674f92424cc0e66359', stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "m10 20 4-16m2 0h-4m0 16H8" })));
     }
     static get style() { return iconCss; }
 }, [2, "italic-icon", {

package/dist/components/loading.js

@@ -11,7 +11,7 @@ const LoadingIcon = proxyCustomElement(class LoadingIcon extends HTMLElement {
         this.height = '15';
     }
     render() {
-        return (h("div", { key: '451777deed2c5b92613340e5c49f2b88f3149ddb', class: "wave" }, h("div", { key: '257478c933368a352a8e24e989f00f68157dc7f5', class: "dot" }), h("div", { key: 'ab49e532f4228f89de93b7486ff905762a7f1e95', class: "dot" }), h("div", { key: '61a94bdcc940aec78fc5f3379be7085ee003d96a', class: "dot" })));
+        return (h("div", { key: 'ee82dd9858d420cd6b6d42a4571281ac65b759f0', class: "wave" }, h("div", { key: '7a74e25e7bd8aa8f7f2d263148351ec67d587c2f', class: "dot" }), h("div", { key: '121eeeff24fa2bda6592b0b90567661fd3c25079', class: "dot" }), h("div", { key: 'd1c7ecc10377c2f62f20f0837d9d4ba5ccbdbb40', class: "dot" })));
     }
     static get style() { return loadingCss; }
 }, [1, "loading-icon", {

package/dist/components/location-off.js

@@ -10,7 +10,7 @@ const LocationOffIcon = proxyCustomElement(class LocationOffIcon extends HTMLEle
         this.height = '18';
     }
     render() {
-        return (h("svg", { key: '71b77626fd36927b30dd10b92175179cde4de388', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a37496113d32883d1dde6a7821b7a34dbbe2e705', d: "M0.146447 0.808556C0.341709 0.613294 0.658291 0.613294 0.853553 0.808556L15.8536 15.8086C16.0488 16.0038 16.0488 16.3204 15.8536 16.5157C15.6583 16.7109 15.3417 16.7109 15.1464 16.5157L12.0938 13.463L11.8223 13.7312L9.38611 16.1012C8.65623 16.8076 7.52168 16.8468 6.74691 16.2188L6.61408 16.101L4.57128 14.1159L3.05025 12.6171C0.607421 10.1732 0.347525 6.37239 2.27056 3.63976L0.146447 1.51566C-0.0488155 1.3204 -0.0488155 1.00382 0.146447 0.808556ZM9.07768 10.4469C8.74346 10.576 8.38024 10.6468 8.0005 10.6468C6.34839 10.6468 5.00909 9.30689 5.00909 7.65406C5.00909 7.27461 5.07967 6.91166 5.20843 6.57763L2.98793 4.35713C1.49206 6.62038 1.68917 9.67377 3.57927 11.7288L3.75499 11.912L4.3263 12.4791L7.30713 15.3845L7.40012 15.4642C7.7543 15.732 8.24594 15.732 8.60016 15.4642L8.69315 15.3846L10.9237 13.216L11.3883 12.7575L9.07768 10.4469ZM9.85409 8.39486L10.5983 9.13904C10.8487 8.70143 10.9919 8.19447 10.9919 7.65406C10.9919 6.00122 9.65261 4.66134 8.0005 4.66134C7.45986 4.66134 6.95271 4.80482 6.51504 5.05581L7.25921 5.79998C7.48839 5.70819 7.73855 5.6577 8.0005 5.6577C9.10258 5.6577 9.99599 6.5515 9.99599 7.65406C9.99599 7.91581 9.94564 8.16581 9.85409 8.39486ZM4.35291 2.89368C6.70671 1.08827 10.0908 1.26314 12.245 3.4183C14.3986 5.57283 14.5739 8.95702 12.771 11.3118L13.4812 12.022C15.6702 9.27273 15.493 5.25762 12.9497 2.71326C10.4058 0.168159 6.39081 -0.00843871 3.64269 2.18347L4.35291 2.89368Z", fill: "currentColor" })));
+        return (h("svg", { key: '7e8bb8dd37c043ab86b0a382fba2d8b8a850d035', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f99541cb8478894f2497354838fccc4930f54674', d: "M0.146447 0.808556C0.341709 0.613294 0.658291 0.613294 0.853553 0.808556L15.8536 15.8086C16.0488 16.0038 16.0488 16.3204 15.8536 16.5157C15.6583 16.7109 15.3417 16.7109 15.1464 16.5157L12.0938 13.463L11.8223 13.7312L9.38611 16.1012C8.65623 16.8076 7.52168 16.8468 6.74691 16.2188L6.61408 16.101L4.57128 14.1159L3.05025 12.6171C0.607421 10.1732 0.347525 6.37239 2.27056 3.63976L0.146447 1.51566C-0.0488155 1.3204 -0.0488155 1.00382 0.146447 0.808556ZM9.07768 10.4469C8.74346 10.576 8.38024 10.6468 8.0005 10.6468C6.34839 10.6468 5.00909 9.30689 5.00909 7.65406C5.00909 7.27461 5.07967 6.91166 5.20843 6.57763L2.98793 4.35713C1.49206 6.62038 1.68917 9.67377 3.57927 11.7288L3.75499 11.912L4.3263 12.4791L7.30713 15.3845L7.40012 15.4642C7.7543 15.732 8.24594 15.732 8.60016 15.4642L8.69315 15.3846L10.9237 13.216L11.3883 12.7575L9.07768 10.4469ZM9.85409 8.39486L10.5983 9.13904C10.8487 8.70143 10.9919 8.19447 10.9919 7.65406C10.9919 6.00122 9.65261 4.66134 8.0005 4.66134C7.45986 4.66134 6.95271 4.80482 6.51504 5.05581L7.25921 5.79998C7.48839 5.70819 7.73855 5.6577 8.0005 5.6577C9.10258 5.6577 9.99599 6.5515 9.99599 7.65406C9.99599 7.91581 9.94564 8.16581 9.85409 8.39486ZM4.35291 2.89368C6.70671 1.08827 10.0908 1.26314 12.245 3.4183C14.3986 5.57283 14.5739 8.95702 12.771 11.3118L13.4812 12.022C15.6702 9.27273 15.493 5.25762 12.9497 2.71326C10.4058 0.168159 6.39081 -0.00843871 3.64269 2.18347L4.35291 2.89368Z", fill: "currentColor" })));
     }
     static get style() { return iconCss; }
 }, [2, "location-off-icon", {

package/dist/components/location.js

@@ -10,7 +10,7 @@ const LocationIcon = proxyCustomElement(class LocationIcon extends HTMLElement {
         this.height = '18';
     }
     render() {
-        return (h("svg", { key: 'ac7261b5c4435c0ce081169de0cc9f9153a4c0fc', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '72f2ad6299564760a1586d975d15cbfb776b171f', d: "M10 7.66211C10 9.31896 8.65685 10.6621 7 10.6621C5.34315 10.6621 4 9.31896 4 7.66211C4 6.00526 5.34315 4.66211 7 4.66211C8.65685 4.66211 10 6.00526 10 7.66211ZM9 7.66211C9 6.55754 8.10457 5.66211 7 5.66211C5.89543 5.66211 5 6.55754 5 7.66211C5 8.76668 5.89543 9.66211 7 9.66211C8.10457 9.66211 9 8.76668 9 7.66211ZM11.9497 12.6171C14.6834 9.88221 14.6834 5.44812 11.9497 2.71326C9.21608 -0.0216067 4.78392 -0.0216067 2.05025 2.71326C-0.683418 5.44812 -0.683418 9.88221 2.05025 12.6171L3.57128 14.1159L5.61408 16.101L5.74691 16.2188C6.52168 16.8468 7.65623 16.8076 8.38611 16.1012L10.8223 13.7312L11.9497 12.6171ZM2.75499 3.4183C5.09944 1.07282 8.90055 1.07282 11.245 3.4183C13.5294 5.70364 13.5879 9.3725 11.4207 11.7288L11.245 11.912L9.92371 13.216L7.69315 15.3846L7.60016 15.4642C7.24594 15.732 6.7543 15.732 6.40012 15.4642L6.30713 15.3845L3.3263 12.4791L2.75499 11.912L2.57927 11.7288C0.412077 9.3725 0.47065 5.70364 2.75499 3.4183Z", fill: "currentColor" })));
+        return (h("svg", { key: '18863bae4b528331182b4f9f2d57ec427a7537ab', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b2450f8d8b35c9b0fcfe776b5517b7454e332255', d: "M10 7.66211C10 9.31896 8.65685 10.6621 7 10.6621C5.34315 10.6621 4 9.31896 4 7.66211C4 6.00526 5.34315 4.66211 7 4.66211C8.65685 4.66211 10 6.00526 10 7.66211ZM9 7.66211C9 6.55754 8.10457 5.66211 7 5.66211C5.89543 5.66211 5 6.55754 5 7.66211C5 8.76668 5.89543 9.66211 7 9.66211C8.10457 9.66211 9 8.76668 9 7.66211ZM11.9497 12.6171C14.6834 9.88221 14.6834 5.44812 11.9497 2.71326C9.21608 -0.0216067 4.78392 -0.0216067 2.05025 2.71326C-0.683418 5.44812 -0.683418 9.88221 2.05025 12.6171L3.57128 14.1159L5.61408 16.101L5.74691 16.2188C6.52168 16.8468 7.65623 16.8076 8.38611 16.1012L10.8223 13.7312L11.9497 12.6171ZM2.75499 3.4183C5.09944 1.07282 8.90055 1.07282 11.245 3.4183C13.5294 5.70364 13.5879 9.3725 11.4207 11.7288L11.245 11.912L9.92371 13.216L7.69315 15.3846L7.60016 15.4642C7.24594 15.732 6.7543 15.732 6.40012 15.4642L6.30713 15.3845L3.3263 12.4791L2.75499 11.912L2.57927 11.7288C0.412077 9.3725 0.47065 5.70364 2.75499 3.4183Z", fill: "currentColor" })));
     }
     static get style() { return iconCss; }
 }, [2, "location-icon", {

package/dist/components/microsoft-logo.js

@@ -10,7 +10,7 @@ const MicrosoftLogoIcon = proxyCustomElement(class MicrosoftLogoIcon extends HTM
         this.height = '22';
     }
     render() {
-        return (h("svg", { key: '4aa3482048f90ecbcb46d539716464bdf2c20e47', width: this.width, height: this.height, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '27924938927bdc57e665d91623f07684aea3a6ee', d: "M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z", fill: "#F35325" }), h("path", { key: '91decf0bfe7ef26f93ea724fa9738d1ffa1ae4a6', d: "M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z", fill: "#81BC06" }), h("path", { key: '0f455cec58fd99a755157ab9ca950242a634d541', d: "M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z", fill: "#05A6F0" }), h("path", { key: '80c930047e54c708d5f7cde3d88f33f2a0d0dbd5', d: "M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z", fill: "#FFBA08" })));
+        return (h("svg", { key: 'deae127512c4d2b6ef876ab1311fb6ab4d5cd368', width: this.width, height: this.height, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ea58fbe3dac4c5a6455acec95fe9677068999d53', d: "M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z", fill: "#F35325" }), h("path", { key: 'e8a2faf14e8a7cdf15808a1fac1b16fba79f6051', d: "M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z", fill: "#81BC06" }), h("path", { key: '56644908156e19d4ba9eedfec54a9ffa9b9744bd', d: "M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z", fill: "#05A6F0" }), h("path", { key: '24c76e1b54ed1cdbc97ec6e56888db403169d74f', d: "M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z", fill: "#FFBA08" })));
     }
     static get style() { return iconCss; }
 }, [2, "microsoft-logo-icon", {

package/dist/components/multi-select-dropdown2.js

@@ -127,9 +127,9 @@ const MultiSelectDropdown = proxyCustomElement(class MultiSelectDropdown extends
             }, class: { selected: !!option.selected } }, h("label", { htmlFor: option.value }, h("input", { "aria-hidden": "true", id: option.value, type: "checkbox", checked: option.selected }), h("span", null, option.label))));
     }
     render() {
-        return (h(Host, { key: '89819bc74cdae708fbdd60dc3f4160c0047d1414' }, h("div", { key: '2c3568247699101568790460b5d9ef6780cef096', class: "dropdown", part: "msd_dropdown" }, h("label", { key: 'd524fd75f9a8fcde85727904b6e2b21e5f6cbe0e', class: "dropdown-label" }, this.label, h("slot", { key: 'e4442acbc279840d6c3d815907fa79f6fd7a11d5', name: "label-icon", "aria-hidden": "true" })), h("button", { key: '8b66520137e83747c4e74237c74598fa2081275f', part: "msd_dropdown-button", class: { dropbtn: true, open: this.isOpen }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: 'e6ba4fd51fb6cf3dde63757f9eef8d1538a9a91d', name: "select-icon", "aria-hidden": "true" }), h("span", { key: 'bfc7c1bdc8046bb3a27f11a587619ecfe6d62d32', class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1
+        return (h(Host, { key: '68762c15e4d20e8d695807b7d4b401f95d1759a8' }, h("div", { key: 'f6b695da1ac813ce000f09442d79797cd57b5400', class: "dropdown", part: "msd_dropdown" }, h("label", { key: '375e7f825f8ca0962b12f5a35960a514535a0e4d', class: "dropdown-label" }, this.label, h("slot", { key: '4cb277f7424fc3a2906b6ca2bb25ab9af75f4b48', name: "label-icon", "aria-hidden": "true" })), h("button", { key: '76d5eec276f0aadb5f94de67a7c674d7506fec1b', part: "msd_dropdown-button", class: { dropbtn: true, open: this.isOpen }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: '229cae92d81294a1a8785ae95a265b156c4c571b', name: "select-icon", "aria-hidden": "true" }), h("span", { key: 'c2c030a9052bf733af0c9f5aabf665f9c50a612a', class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1
             ? `Multiple ${this.name}s selected`
-            : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label), h("span", { key: 'f93e18714865b54dee754d2764b0b3bec3a4dead', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, h("chevron-icon", { key: 'd91d60366c8503e84cb6e41e43ac77f911f9517c', width: "16", height: "16" }))), this.isOpen ? null : (h("div", { class: 'selected-options' }, this.getSelectedOptions().map(option => (h("span", { class: "selected-option" }, option.label, h("button", { key: option.label, onClick: () => this.selectOption(option) }, h("close-icon", null))))))), this.isOpen ? (h("div", { class: "dropdown-content", part: "msd_dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": true, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: e => this.handleListboxKeydown(e) }, this.availableOptions.map(option => this.renderOption(option))))) : null)));
+            : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label), h("span", { key: '0f18d14621e108bd6019ceea2e86ae19d1816d53', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, h("chevron-icon", { key: '1dba99f7491f72edeed66b567692b4aaf16be32d', width: "16", height: "16" }))), this.isOpen ? null : (h("div", { class: 'selected-options' }, this.getSelectedOptions().map(option => (h("span", { class: "selected-option" }, option.label, h("button", { key: option.label, onClick: () => this.selectOption(option) }, h("close-icon", null))))))), this.isOpen ? (h("div", { class: "dropdown-content", part: "msd_dropdown-content" }, h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": true, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: e => this.handleListboxKeydown(e) }, this.availableOptions.map(option => this.renderOption(option))))) : null)));
     }
     get el() { return this; }
     static get style() { return multiSelectDropdownCss; }

package/dist/components/nylas-additional-participants2.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
 import { a as debug } from './utils.js';
 import { d as defineCustomElement$4 } from './add-circle.js';
@@ -27,6 +27,7 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.valueChanged = createEvent(this, "valueChanged", 7);
         this.internals = this.attachInternals();
         this.name = 'participants';
         this.eventParticipants = undefined;
@@ -47,7 +48,7 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
     }
     componentDidLoad() {
         debug('nylas-additional-participants', 'componentDidLoad');
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
     disconnectedCallback() {
         debug('nylas-additional-participants', 'disconnectedCallback');
@@ -57,34 +58,37 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
         const index = event.detail.name;
         this.participants[index].email = event.detail.value;
         const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);
+        this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;
         this.participants[index].name = participant?.name || event.detail.value;
         this.participants = [...this.participants];
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
     onParticipantChange(event, index) {
         debug('nylas-additional-participants', 'onParticipantChange');
         this.participants[index].email = event.target.value;
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
     addParticipant() {
         debug('nylas-additional-participants', 'addParticipant');
-        this.participants = [...this.participants, { name: '', email: '', is_organizer: false, availability: { calendar_ids: ['primary'] } }];
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.participants = [...this.participants, { name: '', email: '', is_organizer: false }];
+        this.updateFormValue();
     }
     removeParticipant(index) {
         debug('nylas-additional-participants', 'removeParticipant');
         this.participants = this.participants.filter((_, i) => i !== index);
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
     validate(email, index) {
         debug('nylas-additional-participants', 'validate');
         const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         const valid = regex.test(String(email).toLowerCase());
         this.participants[index].is_valid = valid;
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
-    participantsWithouOrganizer() {
-        return this.participants.filter(participant => !participant.is_organizer);
+    updateFormValue() {
+        debug('nylas-additional-participants', 'updateFormValue');
+        this.internals.setFormValue(JSON.stringify(this.participants), this.name);
+        this.valueChanged.emit({ value: JSON.stringify(this.participants), name: this.name });
     }
     getArrayDifference(array1, array2) {
         const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));
@@ -93,11 +97,11 @@ const NylasAdditionalParticipants = proxyCustomElement(class NylasAdditionalPart
         });
     }
     render() {
-        return (h(Host, { key: '5f2ab58dd16c4052b17111fa260d676c908bcf58' }, h("nylas-form-card", { key: 'a636c3ef694cc333b15830c35eb13fb51ff69ca0' }, h("h3", { key: '13425f0338b7b88746844c79104f008323bdcbf1', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Additional participants"), h("p", { key: '7ebe90bb5ef933b7632c8b30aa9b1ccf8f08c6a6', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add anyone else who would be joining for this event."), h("div", { key: '3662713253e568cbf70b4d73e4eb883bb6c329a2', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: '577176dfd841875992a420e243be2905968452d5' }, this.participants.map((participant, index) => {
+        return (h(Host, { key: '67454437ca6e9771da4373e293b8b1d468c79680' }, h("nylas-form-card", { key: '844913ba1bca33b83b0d7c0a89323ca48f5ce1dd' }, h("h3", { key: 'bbdbf1e9addc3238a013697bff343a1065758928', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Additional participants"), h("p", { key: '37520f9fcc4996b9635821a52ed5d9c0350af88f', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add anyone else who would be joining for this event."), h("div", { key: '76a8d8118f9012cced55357e4243b897ec41e385', slot: "content", class: "nylas-additional-participants__content" }, h("div", { key: 'bb5d6f6e7ebf486eb4c8395ff3ab971335d19750' }, this.participants.map((participant, index) => {
             return (h("div", { class: 'nylas-additional-participants__input_group', part: "nap__input_group" }, h("label", null, participant.is_organizer ? 'Organizer' : `Participant ${index}`), h("div", { part: "nap__input_wrapper", class: `nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}` }, h("div", { class: { 'nylas-additional-participants__input': true, 'organizer': participant.is_organizer }, part: "nap__input" }, participant.is_organizer ? (h("input", { type: "text", value: participant.email, onInput: e => {
                     this.onParticipantChange(e, index);
-                }, readOnly: participant.is_organizer, onBlur: () => this.validate(participant.email, index) })) : (h("input-dropdown", { name: `${index}`, inputValue: participant.email, options: this.getArrayDifference(this.participantOptions || [], this.participants) })), !participant.is_organizer && (h("button", { onClick: () => this.removeParticipant(index), part: "nap__remove-participant" }, h("close-icon", null)))))));
-        })), h("button", { key: '74f99ea0eb6a5a5873a7b5dbed5caa4bf557fa4e', class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, h("add-circle-icon", { key: '9d139a5ba18bdec17acaa1dc9d9d773d0a7b1a5d' }), " ", h("span", { key: '89778f530c53d8ffa55c7e3bb67bdd5b19c4f881' }, "Add ", this.participants.length > 1 ? 'another' : 'a', " participant"))))));
+                }, readOnly: participant.is_organizer, onBlur: () => this.validate(participant.email, index) })) : (h("input-dropdown", { name: `${index}`, filterable: true, inputValue: participant.email, options: this.getArrayDifference(this.participantOptions || [], this.participants) })), !participant.is_organizer && (h("button", { onClick: () => this.removeParticipant(index), part: "nap__remove-participant" }, h("close-icon", null)))))));
+        })), h("button", { key: '14febbe15dc97b44304e98c14d7e084ea5126304', class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, h("add-circle-icon", { key: '8f60f39d5d3b3b4532a78eacb0d4bf907a8b7836' }), " ", h("span", { key: '8e2c9a49072d04ab571470c68c3277a76706e60e' }, "Add ", this.participants.length > 1 ? 'another' : 'a', " participant"))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

package/dist/components/nylas-additional-participants2.js.map

@@ -1 +1 @@
-{"file":"nylas-additional-participants2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.scss?tag=nylas-additional-participants&encapsulation=shadow","src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  margin: 1rem;\n  @include default-css-variables;\n}\n\n.nylas-additional-participants__title {\n  color: var(--nylas-base-nylas-base-900-aaa, #101323);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px; /* 125% */\n  margin: 0;\n  text-align: left;\n}\n.nylas-additional-participants__subtitle {\n  color: var(--nylas-base-600);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n  margin: 0.25rem 0px 0px;\n  text-align: left;\n}\n.nylas-additional-participants__content {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.nylas-additional-participants__input_group {\n  padding-top: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n  }\n}\n.nylas-additional-participants__input_wrapper {\n  display: flex;\n  border-width: 1;\n  border-radius: 8px;\n  border: 1px solid var(--nylas-base-300);\n  button {\n    padding: 12px;\n    border: none;\n    border-left: 1px solid var(--nylas-base-300);\n    background: none;\n    cursor: pointer;\n    &:hover,\n    &:active {\n      color: var(--nylas-primary);\n    }\n  }\n}\n.nylas-additional-participants__input_wrapper_organizer {\n  background: var(--nylas-base-50);\n}\n\n.nylas-additional-participants__input {\n  flex: 1;\n  display: flex;\n  justify-content: space-between;\n  &.organizer {\n    padding: 12px 16px;\n  }\n  input {\n    border: none;\n    outline: none;\n    background: none;\n    width: 100%;\n  }\n  input-dropdown {\n    width: 100%;\n  }\n  input-dropdown::part(id_dropdown) {\n    width: 100%;\n    height: 100%;\n  }\n  input-dropdown::part(id_dropdown-input) {\n    height: 100%;\n    border-radius: var(--nylas-border-radius-2x);\n    border: none;\n    border-top-right-radius: initial;\n    border-bottom-right-radius: initial;\n    padding-left: 16px;\n  }\n}\n\n.nylas-additional-participants__add {\n  padding: 12px;\n  display: flex;\n  align-items: center;\n  border: none;\n  background: none;\n  cursor: pointer;\n  span {\n    padding: 0 8px;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n  }\n  &:hover,\n  &:active {\n    color: var(--nylas-primary);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Prop, State, Watch, h, Element, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\ntype Participant = {\n  name?: string;\n  email: string;\n  is_valid?: boolean;\n  is_organizer: boolean;\n  availability?: Availability;\n  booking?: Booking;\n};\ntype Availability = {\n  calendar_ids: string[];\n};\ntype Booking = {\n  calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n *\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n *\n */\n@Component({\n  tag: 'nylas-additional-participants',\n  styleUrl: 'nylas-additional-participants.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n  @Element() host!: HTMLNylasAdditionalParticipantsElement;\n  @Prop() name: string = 'participants';\n  @Prop() eventParticipants?: Participant[];\n  @Prop() participantOptions?: Participant[];\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @State() participants: Participant[] = this.eventParticipants ?? [];\n  @State() participantsValid: boolean = true;\n  connectedCallback() {\n    debug('nylas-additional-participants', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-additional-participants', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-additional-participants', 'componentDidLoad');\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-additional-participants', 'disconnectedCallback');\n  }\n\n  @Listen('inputOptionChanged')\n  onInputOptionChanged(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-additional-participants', 'onInputOptionChanged');\n    const index = event.detail.name;\n    this.participants[index].email = event.detail.value;\n    const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);\n    this.participants[index].name = participant?.name || event.detail.value;\n    this.participants = [...this.participants];\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  onParticipantChange(event, index) {\n    debug('nylas-additional-participants', 'onParticipantChange');\n    this.participants[index].email = event.target.value;\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  addParticipant() {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = [...this.participants, { name: '', email: '', is_organizer: false, availability: { calendar_ids: ['primary'] } }];\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  removeParticipant(index: number) {\n    debug('nylas-additional-participants', 'removeParticipant');\n    this.participants = this.participants.filter((_, i) => i !== index);\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  validate(email, index) {\n    debug('nylas-additional-participants', 'validate');\n    const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n    const valid = regex.test(String(email).toLowerCase());\n    this.participants[index].is_valid = valid;\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n\n  participantsWithouOrganizer() {\n    return this.participants.filter(participant => !participant.is_organizer);\n  }\n\n  // Filter out the participants that are already added\n  getArrayDifference(array1: Participant[], array2: Participant[]) {\n    const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));\n    return filtered.map(participant => {\n      return { value: participant.email, label: participant.email };\n    });\n  }\n\n  @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-additional-participants',\n    stateToProps: new Map([['schedulerConfig.additionalParticipants', 'participantOptions']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n            Additional participants\n          </h3>\n          <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n            Add anyone else who would be joining for this event.\n          </p>\n          <div slot=\"content\" class=\"nylas-additional-participants__content\">\n            <div>\n              {this.participants.map((participant, index) => {\n                return (\n                  <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n                    <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n                    <div\n                      part=\"nap__input_wrapper\"\n                      class={`nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}`}\n                    >\n                      <div class={{ 'nylas-additional-participants__input': true, 'organizer': participant.is_organizer }} part=\"nap__input\">\n                        {participant.is_organizer ? (\n                          <input\n                            type=\"text\"\n                            value={participant.email}\n                            onInput={e => {\n                              this.onParticipantChange(e, index);\n                            }}\n                            readOnly={participant.is_organizer}\n                            onBlur={() => this.validate(participant.email, index)}\n                          />\n                        ) : (\n                          <input-dropdown name={`${index}`} inputValue={participant.email} options={this.getArrayDifference(this.participantOptions || [], this.participants)} />\n                        )}\n                        {!participant.is_organizer && (\n                          <button onClick={() => this.removeParticipant(index)} part=\"nap__remove-participant\">\n                            <close-icon />\n                          </button>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n            <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n              <add-circle-icon /> <span>Add {this.participants.length > 1 ? 'another' : 'a'} participant</span>\n            </button>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-additional-participants2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.scss?tag=nylas-additional-participants&encapsulation=shadow","src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  margin: 1rem;\n  @include default-css-variables;\n}\n\n.nylas-additional-participants__title {\n  color: var(--nylas-base-nylas-base-900-aaa, #101323);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px; /* 125% */\n  margin: 0;\n  text-align: left;\n}\n.nylas-additional-participants__subtitle {\n  color: var(--nylas-base-600);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n  margin: 0.25rem 0px 0px;\n  text-align: left;\n}\n.nylas-additional-participants__content {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.nylas-additional-participants__input_group {\n  padding-top: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n  }\n}\n.nylas-additional-participants__input_wrapper {\n  display: flex;\n  border-width: 1;\n  border-radius: 8px;\n  border: 1px solid var(--nylas-base-300);\n  button {\n    padding: 12px;\n    border: none;\n    border-left: 1px solid var(--nylas-base-300);\n    background: none;\n    cursor: pointer;\n    &:hover,\n    &:active {\n      color: var(--nylas-primary);\n    }\n  }\n}\n.nylas-additional-participants__input_wrapper_organizer {\n  background: var(--nylas-base-50);\n}\n\n.nylas-additional-participants__input {\n  flex: 1;\n  display: flex;\n  justify-content: space-between;\n  &.organizer {\n    padding: 12px 16px;\n  }\n  input {\n    border: none;\n    outline: none;\n    background: none;\n    width: 100%;\n  }\n  input-dropdown {\n    width: 100%;\n  }\n  input-dropdown::part(id_dropdown) {\n    width: 100%;\n    height: 100%;\n  }\n  input-dropdown::part(id_dropdown-input) {\n    height: 100%;\n    border-radius: var(--nylas-border-radius-2x);\n    border: none;\n    border-top-right-radius: initial;\n    border-bottom-right-radius: initial;\n    padding-left: 16px;\n  }\n}\n\n.nylas-additional-participants__add {\n  padding: 12px;\n  display: flex;\n  align-items: center;\n  border: none;\n  background: none;\n  cursor: pointer;\n  span {\n    padding: 0 8px;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n  }\n  &:hover,\n  &:active {\n    color: var(--nylas-primary);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Prop, State, Watch, h, Element, Listen, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Event } from '@stencil/core';\n\ntype Participant = {\n  name?: string;\n  email: string;\n  is_valid?: boolean;\n  is_organizer: boolean;\n  availability?: Availability;\n  booking?: Booking;\n};\ntype Availability = {\n  calendar_ids: string[];\n};\ntype Booking = {\n  calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n *\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n *\n */\n@Component({\n  tag: 'nylas-additional-participants',\n  styleUrl: 'nylas-additional-participants.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n  @Element() host!: HTMLNylasAdditionalParticipantsElement;\n  @Prop() name: string = 'participants';\n  @Prop() eventParticipants?: Participant[];\n  @Prop() participantOptions?: Participant[];\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * This event is fired when the selected participants change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-additional-participants', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @State() participants: Participant[] = this.eventParticipants ?? [];\n  @State() participantsValid: boolean = true;\n  connectedCallback() {\n    debug('nylas-additional-participants', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-additional-participants', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-additional-participants', 'componentDidLoad');\n    this.updateFormValue();\n  }\n\n  disconnectedCallback() {\n    debug('nylas-additional-participants', 'disconnectedCallback');\n  }\n\n  @Listen('inputOptionChanged')\n  onInputOptionChanged(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-additional-participants', 'onInputOptionChanged');\n    const index = event.detail.name;\n    this.participants[index].email = event.detail.value;\n    const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);\n    this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;\n    this.participants[index].name = participant?.name || event.detail.value;\n    this.participants = [...this.participants];\n    this.updateFormValue();\n  }\n  onParticipantChange(event, index) {\n    debug('nylas-additional-participants', 'onParticipantChange');\n    this.participants[index].email = event.target.value;\n    this.updateFormValue();\n  }\n  addParticipant() {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = [...this.participants, { name: '', email: '', is_organizer: false }];\n    this.updateFormValue();\n  }\n  removeParticipant(index: number) {\n    debug('nylas-additional-participants', 'removeParticipant');\n    this.participants = this.participants.filter((_, i) => i !== index);\n    this.updateFormValue();\n  }\n  validate(email, index) {\n    debug('nylas-additional-participants', 'validate');\n    const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n    const valid = regex.test(String(email).toLowerCase());\n    this.participants[index].is_valid = valid;\n    this.updateFormValue();\n  }\n\n  updateFormValue() {\n    debug('nylas-additional-participants', 'updateFormValue');\n    this.internals.setFormValue(JSON.stringify(this.participants), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.participants), name: this.name });\n  }\n\n  // Filter out the participants that are already added\n  getArrayDifference(array1: Participant[], array2: Participant[]) {\n    const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));\n    return filtered.map(participant => {\n      return { value: participant.email, label: participant.email };\n    });\n  }\n\n  @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-additional-participants',\n    stateToProps: new Map([['schedulerConfig.additionalParticipants', 'participantOptions']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n            Additional participants\n          </h3>\n          <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n            Add anyone else who would be joining for this event.\n          </p>\n          <div slot=\"content\" class=\"nylas-additional-participants__content\">\n            <div>\n              {this.participants.map((participant, index) => {\n                return (\n                  <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n                    <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n                    <div\n                      part=\"nap__input_wrapper\"\n                      class={`nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}`}\n                    >\n                      <div class={{ 'nylas-additional-participants__input': true, 'organizer': participant.is_organizer }} part=\"nap__input\">\n                        {participant.is_organizer ? (\n                          <input\n                            type=\"text\"\n                            value={participant.email}\n                            onInput={e => {\n                              this.onParticipantChange(e, index);\n                            }}\n                            readOnly={participant.is_organizer}\n                            onBlur={() => this.validate(participant.email, index)}\n                          />\n                        ) : (\n                          <input-dropdown\n                            name={`${index}`}\n                            filterable={true}\n                            inputValue={participant.email}\n                            options={this.getArrayDifference(this.participantOptions || [], this.participants)}\n                          />\n                        )}\n                        {!participant.is_organizer && (\n                          <button onClick={() => this.removeParticipant(index)} part=\"nap__remove-participant\">\n                            <close-icon />\n                          </button>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n            <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n              <add-circle-icon /> <span>Add {this.participants.length > 1 ? 'another' : 'a'} participant</span>\n            </button>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}