@nylas/web-elements 1.0.2-canary.2 → 1.1.0-canary.3

package/dist/collection/common/icons/warning.js

@@ -5,7 +5,7 @@ export class WarningIcon {
         this.height = '16';
     }
     render() {
-        return (h("svg", { key: '669d0fd1f29767fbb6045a3520e6364d6c614da6', width: "21", height: "21", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7eb9ee6c7caac7afea81ccf99f61b68126099a3c', d: "M10.149 7.054a.5.5 0 0 1 .5.5v4a.5.5 0 1 1-1 0v-4a.5.5 0 0 1 .5-.5Zm0 7.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM8.834 2.906a1.5 1.5 0 0 1 2.63 0l6.558 11.925a1.5 1.5 0 0 1-1.314 2.223H3.59a1.5 1.5 0 0 1-1.314-2.223L8.834 2.906Zm1.753.482a.5.5 0 0 0-.876 0L3.15 15.313a.5.5 0 0 0 .439.741h13.117a.5.5 0 0 0 .439-.741l-6.56-11.925Z", fill: "currentColor" })));
+        return (h("svg", { key: '17a6924f3361b1cfc5d64fb4c07e8ec769617bb3', width: "21", height: "21", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cc403a3f0c8ec9bdb7c497de7235d24cc5c5cae7', d: "M10.149 7.054a.5.5 0 0 1 .5.5v4a.5.5 0 1 1-1 0v-4a.5.5 0 0 1 .5-.5Zm0 7.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM8.834 2.906a1.5 1.5 0 0 1 2.63 0l6.558 11.925a1.5 1.5 0 0 1-1.314 2.223H3.59a1.5 1.5 0 0 1-1.314-2.223L8.834 2.906Zm1.753.482a.5.5 0 0 0-.876 0L3.15 15.313a.5.5 0 0 0 .439.741h13.117a.5.5 0 0 0 .439-.741l-6.56-11.925Z", fill: "currentColor" })));
     }
     static get is() { return "warning-icon"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/common/nylas-api-request.js

@@ -0,0 +1,34 @@
+export class NylasApiRequest {
+}
+export class NylasIdentityRequestWrapper {
+    constructor(session) {
+        this.session = session;
+    }
+    setActiveGrantId(grantId) {
+        this.activeGrantId = grantId;
+    }
+    async request({ method, path, body, headers }) {
+        return this.session.fetch(`grants/me/${path}`, {
+            method,
+            headers: headers ? new Headers(headers) : undefined,
+            body,
+            ...(this.session.isMultiAccount() && this.activeGrantId ? { grant_id: this.activeGrantId } : {}),
+        });
+    }
+    async currentUser() {
+        const grantId = this.session.isMultiAccount() ? this.activeGrantId : undefined;
+        const idToken = await this.session.getProfile(grantId);
+        if (!idToken) {
+            return null;
+        }
+        return {
+            id: idToken.sub,
+            email: idToken.email,
+            name: idToken.name,
+        };
+    }
+    async authenticationUrl(authArgs) {
+        return this.session.auth(authArgs || {});
+    }
+}
+//# sourceMappingURL=nylas-api-request.js.map

package/dist/collection/common/nylas-api-request.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-api-request.js","sourceRoot":"","sources":["../../src/common/nylas-api-request.ts"],"names":[],"mappings":"AAyCA,MAAM,OAAgB,eAAe;CAcpC;AAOD,MAAM,OAAO,2BAA2B;IAYtC,YAAY,OAAsB;QAChC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAQD,gBAAgB,CAAC,OAAe;QAC9B,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;IAC/B,CAAC;IAWD,KAAK,CAAC,OAAO,CAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAoB;QAChE,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,aAAa,IAAI,EAAE,EAAE;YAC7C,MAAM;YACN,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS;YACnD,IAAI;YACJ,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SACjG,CAAe,CAAC;IACnB,CAAC;IAOD,KAAK,CAAC,WAAW;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;QAC/E,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACvD,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO;YACL,EAAE,EAAE,OAAO,CAAC,GAAG;YACf,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,IAAI,EAAE,OAAO,CAAC,IAAI;SACnB,CAAC;IACJ,CAAC;IAOD,KAAK,CAAC,iBAAiB,CAAC,QAAmB;QACzC,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;IAC3C,CAAC;CACF","sourcesContent":["import type { NylasSessions } from '@nylas/identity';\n\n/**\n * Arguments for making a request to the Nylas API.\n */\nexport type NylasRequestArgs = {\n  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';\n  path: string;\n  body?: any;\n  headers?: Record<string, string>;\n};\n\n/**\n * A model representing a user in the Nylas Identity system.\n */\nexport type User = {\n  id: string;\n  email: string;\n  name?: string;\n};\n\n/**\n * Arguments for authenticating a user with the Nylas Identity system.\n */\nexport type AuthArgs = {\n  provider?: string;\n  scope?: Array<string>;\n  loginHint?: string;\n  includeGrantScopes?: boolean;\n  prompt?: string;\n  metadata?: string;\n  state?: string;\n};\n\n/**\n * Interface for making requests to the Nylas API.\n *\n * This is an abstract class that is meant to be implemented by customers to provide their own\n * implementation of making requests to the Nylas API. This allows customers to use their own\n * authentication mechanism, or to use a different HTTP client library.\n */\nexport abstract class NylasApiRequest {\n  /**\n   *  This method should make an authenticated request to the Nylas API.\n   * @param args NylasRequestArgs\n   */\n  abstract request<T>(args: NylasRequestArgs): Promise<T>;\n  /**\n   * This method should return the current user's information.\n   */\n  abstract currentUser(): Promise<User | null>;\n  /**\n   * This method should return the URL to redirect the user to for authentication.\n   */\n  abstract authenticationUrl(authArgs?: AuthArgs): Promise<string | undefined>;\n}\n\n/**\n * A wrapper around the Nylas Identity session that implements the NylasApiRequest interface.\n * This class is used by the Nylas Web Elements to make requests to the Nylas API if no custom\n * implementation of NylasApiRequest is provided.\n */\nexport class NylasIdentityRequestWrapper implements NylasApiRequest {\n  /**\n   * The Nylas Identity session instance.\n   */\n  private session: NylasSessions;\n\n  /**\n   * The grant_id to use for requests, if there is multi-account support\n   * enabled in the Nylas Identity settings.\n   */\n  private activeGrantId?: string;\n\n  constructor(session: NylasSessions) {\n    this.session = session;\n  }\n\n  /**\n   * This method sets the grant_id to use for requests.\n   * This is used when there is multi-account support enabled in the Nylas Identity settings.\n   *\n   * @param grantId\n   */\n  setActiveGrantId(grantId: string) {\n    this.activeGrantId = grantId;\n  }\n\n  /**\n   * This method makes a request to the Nylas API, using the Nylas Identity's fetch method.\n   *\n   * The `grants/me/` prefix is added because all requests made from the browser to the Nylas API\n   * must be made on behalf of the currently logged in user with a valid access token.\n   *\n   * @param NylasRequestArgs\n   * @returns Promise<T>\n   */\n  async request<T>({ method, path, body, headers }: NylasRequestArgs): Promise<T> {\n    return this.session.fetch(`grants/me/${path}`, {\n      method,\n      headers: headers ? new Headers(headers) : undefined,\n      body,\n      ...(this.session.isMultiAccount() && this.activeGrantId ? { grant_id: this.activeGrantId } : {}),\n    }) as Promise<T>;\n  }\n\n  /**\n   * This method returns the current (logged in) user's information.\n   * If the user is not logged in, it returns null.\n   * @returns Promise<User | null>\n   */\n  async currentUser(): Promise<User | null> {\n    const grantId = this.session.isMultiAccount() ? this.activeGrantId : undefined;\n    const idToken = await this.session.getProfile(grantId);\n    if (!idToken) {\n      return null;\n    }\n\n    return {\n      id: idToken.sub,\n      email: idToken.email,\n      name: idToken.name,\n    };\n  }\n\n  /**\n   * This method returns the URL to redirect the user to for authentication.\n   * @param authConfig authArgs\n   * @returns Promise<string | undefined>\n   */\n  async authenticationUrl(authArgs?: AuthArgs): Promise<string | undefined> {\n    return this.session.auth(authArgs || {});\n  }\n}\n"]}

package/dist/collection/components/design-system/button-component/button-component.css

@@ -0,0 +1,73 @@
+button {
+  height: 48px;
+  border: none;
+  border-radius: var(--nylas-border-radius-2x);
+  font-size: 1rem;
+  line-height: 24px;
+  padding: 0 1rem;
+  cursor: pointer;
+  font-family: var(--nylas-font-family);
+  font-weight: 600;
+}
+button.button-primary {
+  background: var(--nylas-primary);
+  color: var(--nylas-base-0);
+  height: 48px;
+  border: none;
+  border-radius: var(--nylas-border-radius-2x);
+  font-size: 1rem;
+  line-height: 24px;
+  padding: 0 1rem;
+  cursor: pointer;
+}
+button.button-primary:hover {
+  background: var(--nylas-base-600);
+}
+button.button-primary:active {
+  background: var(--nylas-base-800);
+}
+button.button-primary:disabled {
+  background: var(--nylas-base-300);
+  cursor: not-allowed;
+}
+button.button-basic {
+  border: 1px solid var(--nylas-base-300);
+  color: var(--nylas-base-700);
+  background: transparent;
+}
+button.button-basic:hover {
+  background: transparent;
+  border-color: var(--nylas-primary);
+}
+button.button-basic:active {
+  background: transparent;
+  border-color: var(--nylas-base-600);
+  border-width: 2px;
+}
+button.button-basic:disabled {
+  background: transparent;
+  border-color: var(--nylas-base-300);
+  color: var(--nylas-base-300);
+  cursor: not-allowed;
+}
+button.button-destructive {
+  border: 1px solid var(--nylas-base-300);
+  color: var(--nylas-error);
+  background: transparent;
+}
+button.button-destructive:hover {
+  background: transparent;
+  border-color: var(--nylas-error);
+}
+button.button-destructive:active {
+  background: transparent;
+  border-color: var(--nylas-error-pressed);
+  border-width: 2px;
+  color: var(--nylas-error-pressed);
+}
+button.button-destructive:disabled {
+  background: transparent;
+  border-color: var(--nylas-base-300);
+  color: var(--nylas-base-300);
+  cursor: not-allowed;
+}

package/dist/collection/components/design-system/button-component/button-component.js

@@ -0,0 +1,193 @@
+import { h } from "@stencil/core";
+export class ButtonComponent {
+    constructor() {
+        this.variant = 'primary';
+        this.disabled = false;
+        this.type = 'button';
+        this.clickHandler = undefined;
+        this.mouseOverHandler = undefined;
+        this.mouseOutHandler = undefined;
+        this.focusHandler = undefined;
+        this.blurHandler = undefined;
+    }
+    render() {
+        const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');
+        return (h("button", { key: 'cfd8e89f59f914245d2c8c8c78476a36d27da859', class: className, disabled: this.disabled, type: "type", onClick: this.clickHandler, onMouseOver: this.mouseOverHandler, onMouseOut: this.mouseOutHandler, onFocus: this.focusHandler, onBlur: this.blurHandler }, h("slot", { key: '4535ee0ad60500247597e0bc127634b04dbe560e' })));
+    }
+    static get is() { return "button-component"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["button-component.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["button-component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonType",
+                    "resolved": "\"basic\" | \"destructive\" | \"primary\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "global",
+                            "id": "global::ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
+            "clickHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: MouseEvent) => void",
+                    "resolved": "((event: MouseEvent) => void) | undefined",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "mouseOverHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: MouseEvent) => void",
+                    "resolved": "((event: MouseEvent) => void) | undefined",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "mouseOutHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: MouseEvent) => void",
+                    "resolved": "((event: MouseEvent) => void) | undefined",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "focusHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: FocusEvent) => void",
+                    "resolved": "((event: FocusEvent) => void) | undefined",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "blurHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: FocusEvent) => void",
+                    "resolved": "((event: FocusEvent) => void) | undefined",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=button-component.js.map

package/dist/collection/components/design-system/button-component/button-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-component.js","sourceRoot":"","sources":["../../../../src/components/design-system/button-component/button-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,eAAe;;uBAEI,SAAS;wBAGX,KAAK;oBAEV,QAAQ;;;;;;;IAO/B,MAAM;QACJ,MAAM,SAAS,GAAG,UAAU,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAEhF,OAAO,CACL,+DACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,UAAU,EAAE,IAAI,CAAC,eAAe,EAChC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,MAAM,EAAE,IAAI,CAAC,WAAW;YAExB,8DAAa,CACN,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\ntype ButtonType = 'primary' | 'basic' | 'destructive';\n\n@Component({\n  tag: 'button-component',\n  styleUrl: 'button-component.scss',\n  scoped: true,\n})\nexport class ButtonComponent {\n  // Define a prop to accept the button type\n  @Prop() variant: ButtonType = 'primary';\n\n  // Define a prop for disabled state\n  @Prop() disabled: boolean = false;\n\n  @Prop() type: string = 'button';\n  @Prop() clickHandler?: (event: MouseEvent) => void;\n  @Prop() mouseOverHandler?: (event: MouseEvent) => void;\n  @Prop() mouseOutHandler?: (event: MouseEvent) => void;\n  @Prop() focusHandler?: (event: FocusEvent) => void;\n  @Prop() blurHandler?: (event: FocusEvent) => void;\n\n  render() {\n    const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');\n\n    return (\n      <button\n        class={className}\n        disabled={this.disabled}\n        type=\"type\"\n        onClick={this.clickHandler}\n        onMouseOver={this.mouseOverHandler}\n        onMouseOut={this.mouseOutHandler}\n        onFocus={this.focusHandler}\n        onBlur={this.blurHandler}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"]}

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

@@ -118,9 +118,9 @@ export class MultiSelectDropdown {
             }, 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: 'ff71916f4c5b0904c1c88acc24092685bb1a8c56' }, h("div", { key: 'e9ff8065a2c85506b433bd5d9a58227f92486187', class: "dropdown", part: "msd_dropdown" }, h("label", { key: '10b60608219600df241af49b91ab63d1c70394a5', class: "dropdown-label" }, this.label, h("slot", { key: '9a9ceafb10875657f758a4f315dbe88c7184ef15', name: "label-icon", "aria-hidden": "true" })), h("button", { key: '4d004314767768524db8ab302e602e6a28929558', 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: '2556aed7a1ff5a5428d5a334d80aa408a26b836a', name: "select-icon", "aria-hidden": "true" }), h("span", { key: 'e237a06138def9e1279231715c933c0d27f7b5ea', class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1
+        return (h(Host, { key: '1cd6593ab9c3fba5bd85b4c6c3b72b5c02d56a06' }, h("div", { key: '4824791de73b31be01c7801569564c8444e14d25', class: "dropdown", part: "msd_dropdown" }, h("label", { key: '9cfb0b87aa5f514d2030ddb0b7f3a53d49ed623a', class: "dropdown-label" }, this.label, h("slot", { key: 'e3e3db4816a4599b82ad9802b50540e4d5029ffe', name: "label-icon", "aria-hidden": "true" })), h("button", { key: 'b00feb7b276c455987f5e9d957eecb88ba3bc65e', 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: 'e0abc205d785aaada5884a21e0b94f02828ba09c', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '9c69fcf904171f8cd7129dcf65d00e4ac2e72c4a', 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: '0ff8048547586614e1b14dca82e271c3e3bb49c7', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, h("chevron-icon", { key: 'aab301fdd0e369aede69e378649d2b294b049d88', 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: '71f33e2a554531bb2cb498f857157bdaa28facea', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, h("chevron-icon", { key: '0f418f723c61306bfa1efb8a5934957d211f3fce', 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)));
     }
     static get is() { return "multi-select-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,9 +36,10 @@
 }
 
 .dropbtn {
-  color: black;
-  padding: 0.5rem;
+  color: var(--nylas-base-800);
+  padding: 10px;
   font-size: 1rem;
+  font-family: var(--nylas-font-family);
   cursor: pointer;
   display: flex;
   gap: 0.5rem;
@@ -76,6 +77,7 @@
 @media screen and (max-width: 768px) {
   .dropbtn span.selected-option {
     max-width: 124px;
+    font-size: 16px;
   }
 }
 
@@ -90,8 +92,8 @@
   z-index: 1;
   border-radius: 4px;
   position: absolute;
-  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);
-  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843);
+  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 @media screen and (max-width: 768px) {
   .dropdown-content {

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

@@ -5,12 +5,25 @@ export class SelectDropdown {
         this.options = [];
         this.defaultSelectedOption = undefined;
         this.withSearch = true;
+        this.pluralizedLabel = '';
         this.selectedOption = this.defaultSelectedOption || null;
         this.isOpen = false;
         this.searchValue = '';
         this.filteredOptions = [...this.options];
         this.ariaActivedescendant = '';
     }
+    optionsChangedHandler(newValue, oldValue) {
+        if (newValue === oldValue) {
+            return;
+        }
+        this.filteredOptions = newValue;
+    }
+    defaultSelectedOptionChangedHandler(newValue, oldValue) {
+        if (newValue.label === oldValue.label) {
+            return;
+        }
+        this.selectedOption = newValue;
+    }
     componentWillLoad() {
         this.filteredOptions = this.options;
         if (!this.selectedOption && !!this.defaultSelectedOption) {
@@ -120,11 +133,11 @@ export class SelectDropdown {
         }
     }
     render() {
-        return (h("div", { key: '09bd57ac9208a30dea43c5c75c066fa9b1122ba7', class: "dropdown", part: "sd_dropdown" }, h("button", { key: 'b367b5a70f4144fde52cfde9586fe51bbc8637fb', part: "sd_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: '2c6f049954b4a027fba5ca996c34af18e5180454', name: "select-icon", "aria-hidden": "true" }), h("span", { key: 'b18e79aeb247f7d9d2947559dd10c46e4c3e06a5', class: "selected-option", part: "sd_dropdown-button-selected-label" }, this.selectedOption?.label), h("span", { key: '9ab323a74ee21923b9c2a66ad1a8c778bbd7605d', class: {
+        return (h("div", { key: '1dd936b2226461f88f99a0a60011fd1ad3fd0632', class: "dropdown", part: "sd_dropdown" }, h("button", { key: 'c0dca685b2ecc5aac29f4921c011db384bb3c7e2', part: "sd_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: 'caac266cfa1215b30faefee3c080a183d7ab1cc5', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '657aec56728e36d5ef45d1a699ec3d035a54199b', class: "selected-option", part: "sd_dropdown-button-selected-label" }, this.selectedOption?.label ? `${this.selectedOption?.label + this.pluralizedLabel}` : ''), h("span", { key: '19adb72063e9fd6c5e65bd83ea5d2dbcd6bf41f6', class: {
                 open: this.isOpen,
                 closed: !this.isOpen,
                 chevron: true,
-            }, "aria-hidden": "true" }, h("chevron-icon", { key: '39cc545fcdff45bc7e77b020586a2902e8c92a37', width: "16", height: "16" }))), 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 => (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", { key: 'ffffbdcb0d967e597fc609c5e3470f843594d81e', width: "16", height: "16" }))), 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 => (h("li", { tabindex: "0", key: option.value, id: option.value, onClick: () => this.selectOption(option), role: "option" }, option.labelHTML ? option.labelHTML : option.label)))))) : null));
     }
     static get is() { return "select-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -215,6 +228,24 @@ export class SelectDropdown {
                 "attribute": "with-search",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "pluralizedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix."
+                },
+                "attribute": "pluralized-label",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }
@@ -251,6 +282,15 @@ export class SelectDropdown {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "optionsChangedHandler"
+            }, {
+                "propName": "defaultSelectedOption",
+                "methodName": "defaultSelectedOptionChangedHandler"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",

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

@@ -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 } from '@stencil/core';\n\ninterface DropdownOption {\n  labelHTML?: HTMLElement;\n  label: string;\n  value: string;\n}\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  // 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  // Events\n  /**\n   * This event is fired when the selected option is changed\n   */\n  @Event({ bubbles: true, composed: true }) selectedOptionChanged!: EventEmitter<{\n    value: DropdownOption['value'];\n    name: string;\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  // Methods\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.selectedOption = option;\n    this.toggleDropdown();\n    this.selectedOptionChanged.emit({\n      value: option.value,\n      name: this.name,\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        <button\n          part=\"sd_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=\"sd_dropdown-button-selected-label\">\n            {this.selectedOption?.label}\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.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(option => (\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            </ul>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"select-dropdown.js","sourceRoot":"","sources":["../../../../src/components/design-system/select-dropdown/select-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAoBvG,MAAM,OAAO,cAAc;;;uBAaW,EAAE;;0BAQR,IAAI;+BAIA,EAAE;8BAMa,IAAI,CAAC,qBAAqB,IAAI,IAAI;sBAIxD,KAAK;2BAID,EAAE;+BAIY,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;oCAMtB,EAAE;;IAY1C,qBAAqB,CAAC,QAA0B,EAAE,QAA0B;QAC1E,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QACD,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;IAClC,CAAC;IAGD,mCAAmC,CAAC,QAAwB,EAAE,QAAwB;QACpF,IAAI,QAAQ,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;IACjC,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QAEpC,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACzD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,qBAAqB,CAAC;QACnD,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAGD,cAAc;QACZ,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC;IAED,aAAa,CAAC,KAAY;QACxB,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;QACvD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;IACjH,CAAC;IAED,YAAY,CAAC,MAAsB;QACjC,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;QAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAED,yBAAyB,CAAC,KAAoB;QAC5C,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,WAAW,CAAC;YACjB,KAAK,OAAO;gBACV,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;oBACjB,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,CAAC;gBACD,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;gBACvB,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACpB,MAAM;QACV,CAAC;IACH,CAAC;IAED,oBAAoB,CAAC,CAAC;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC;QACnC,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACvF,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9D,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,YAAY,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACtC,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;gBAC/B,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,MAAM,SAAS,GAAG,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACzE,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;YACnD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAC9B,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;YAClE,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,YAAY,KAAK,CAAC,EAAE,CAAC;gBACvB,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;gBAC/B,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,MAAM,SAAS,GAAG,YAAY,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAC9E,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;YACnD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAC9B,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC9B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC9B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAED,WAAW,CAAC,KAAK;QACf,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;QAC/B,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,CAAC,SAAS,CAAkB,CAAC;QAE/E,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;IAED,qBAAqB,CAAC,KAAoB;QACxC,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YACzE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAC1D,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9E,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;YACxF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACpD,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAClC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAID,kBAAkB,CAAC,KAAiB;QAElC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAGlC,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAE7C,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAClC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,aAAa;YACtC,+DACE,IAAI,EAAC,oBAAoB,EACzB,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,mBACtB,SAAS,mBACR,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACjC,IAAI,CAAC,IAAI,EACrB,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC;gBAEjD,6DAAM,IAAI,EAAC,aAAa,iBAAa,MAAM,GAAQ;gBACnD,6DAAM,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,mCAAmC,IACnE,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CACpF;gBACP,6DACE,KAAK,EAAE;wBACL,IAAI,EAAE,IAAI,CAAC,MAAM;wBACjB,MAAM,EAAE,CAAC,IAAI,CAAC,MAAM;wBACpB,OAAO,EAAE,IAAI;qBACd,iBACW,MAAM;oBAElB,qEAAc,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,CAClC,CACA;YACR,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CACb,WAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,qBAAqB;gBACrD,IAAI,CAAC,UAAU,IAAI,CAClB,WAAK,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;oBACrD,mBAAa,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAE,MAAM,GAAI;oBACrD,aACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,UAAU,EACf,WAAW,EAAC,QAAQ,EACpB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EAC/B,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAC3C,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAC7C,CACE,CACP;gBACD,UAAI,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,gBAAa,IAAI,CAAC,IAAI,2BAAyB,IAAI,CAAC,oBAAoB,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IACnJ,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAClC,UAAI,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,IAAI,EAAC,QAAQ,IAC1G,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAChD,CACN,CAAC,CACC,CACD,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 */\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   * 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  // Events\n  /**\n   * This event is fired when the selected option is changed\n   */\n  @Event({ bubbles: true, composed: true }) selectedOptionChanged!: 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('defaultSelectedOption')\n  defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n    if (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  // Methods\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.selectedOption = option;\n    this.toggleDropdown();\n    this.selectedOptionChanged.emit({\n      value: option.value,\n      name: this.name,\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        <button\n          part=\"sd_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=\"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.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(option => (\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            </ul>\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/design-system/time-period-selector/time-period-selector.css

@@ -0,0 +1,22 @@
+.time-period-selector {
+  display: flex;
+  gap: 0.5rem;
+}
+.time-period-selector select-dropdown {
+  border: 1px solid var(--nylas-base-200);
+  border-radius: var(--nylas-border-radius-2x);
+}
+.time-period-selector select-dropdown#time-period::part(sd_dropdown-button) {
+  min-width: 108px;
+}
+.time-period-selector select-dropdown#time-number::part(sd_dropdown-button) {
+  min-width: 84px;
+}
+.time-period-selector select-dropdown::part(sd_dropdown-button) {
+  padding: 1rem;
+  gap: 1rem;
+}
+.time-period-selector select-dropdown::part(sd_dropdown-content) {
+  width: 100%;
+  max-height: 200px;
+}