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

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

@@ -0,0 +1,63 @@
+import { h } from "@stencil/core";
+export class ZoomIcon {
+    constructor() {
+        this.width = '20';
+        this.height = '20';
+    }
+    render() {
+        return (h("svg", { key: 'db95d60b06f8da8febf3f37f84618f10b539417c', width: this.width, height: this.height, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '942288d352fca96585aa86d9c053ba8c485e91c9', d: "M19.7495 6.85792C19.2077 3.4745 16.5255 0.792345 13.1421 0.250451C12.1175 0.0865155 11.0702 0 10 0C8.92992 0 7.88256 0.0865155 6.85797 0.250451C3.47453 0.792345 0.792373 3.4745 0.250478 6.85792C0.0865433 7.87796 0 8.92987 0 10C0 11.0701 0.0865433 12.1175 0.250478 13.1421C0.792373 16.5255 3.47453 19.2077 6.85797 19.7495C7.88256 19.9135 8.92992 20 10 20C11.0702 20 12.1175 19.9135 13.1421 19.7495C16.5255 19.2077 19.2077 16.5255 19.7495 13.1421C19.9135 12.122 20 11.0701 20 10C20 8.92987 19.9135 7.88251 19.7495 6.85792Z", fill: "url(#paint0_linear_22_6272)" }), h("path", { key: '306cb69e79b801f83a8ea5756d6861fa1b8cc4c5', d: "M12.154 12.1676C12.154 12.7596 11.6759 13.2377 11.0839 13.2377H6.42995C5.24598 13.2377 4.28516 12.2769 4.28516 11.0929V7.87794C4.28516 7.28596 4.76328 6.80786 5.35527 6.80786H10.0092C11.1932 6.80786 12.154 7.7687 12.154 8.95267V12.1676ZM14.8589 7.09475L13.2879 8.27412C13.0193 8.47448 12.8598 8.79324 12.8598 9.13022V10.9153C12.8598 11.2523 13.0193 11.5711 13.2879 11.7714L14.8589 12.9508C15.2141 13.2149 15.715 12.9645 15.715 12.5228V7.5228C15.715 7.08109 15.2096 6.83063 14.8589 7.09475Z", fill: "white" }), h("defs", { key: 'a887f03bc96926b386498ae79ae939a407c2eac5' }, h("linearGradient", { key: '0f90d6106727a28ad71a1a9aa8927dc1d650bf91', id: "paint0_linear_22_6272", x1: "10", y1: "19.9954", x2: "10", y2: "-0.00455379", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '88c8863a3ef0379ce1140a43767758c5675cf0bf', "stop-color": "#003FAE" }), h("stop", { key: '6ac917031ed36c119aad680492af465134632684', offset: "0.02", "stop-color": "#0142B7" }), h("stop", { key: '89f24e45a2c0d5e0deb56e17c04e8718abb3e78e', offset: "0.09", "stop-color": "#044BD1" }), h("stop", { key: 'cc470aa0c5930a722006a6108b713f797316183c', offset: "0.16", "stop-color": "#0752E5" }), h("stop", { key: 'a8d6dc9ae9747e23b9438aa68a8df0fd937e8895', offset: "0.24", "stop-color": "#0958F4" }), h("stop", { key: 'b085a61b26e0e955ff3c44630a3526ae2b7d86cd', offset: "0.34", "stop-color": "#0A5BFC" }), h("stop", { key: '494487f616d46962b9211faf752f0baef50acf49', offset: "0.5", "stop-color": "#0B5CFF" })))));
+    }
+    static get is() { return "zoom-icon"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "width",
+                "reflect": false,
+                "defaultValue": "'20'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "height",
+                "reflect": false,
+                "defaultValue": "'20'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=zoom.js.map

package/dist/collection/common/icons/zoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom.js","sourceRoot":"","sources":["../../../src/common/icons/zoom.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;;qBACK,IAAI;sBACH,IAAI;;IAE7B,MAAM;QAEJ,OAAO,CACL,4DAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;YACzF,6DACE,CAAC,EAAC,0gBAA0gB,EAC5gB,IAAI,EAAC,6BAA6B,GAClC;YACF,6DACE,CAAC,EAAC,2eAA2e,EAC7e,IAAI,EAAC,OAAO,GACZ;YACF;gBACE,uEAAgB,EAAE,EAAC,uBAAuB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,aAAa,EAAC,aAAa,EAAC,gBAAgB;oBACrH,2EAAiB,SAAS,GAAG;oBAC7B,6DAAM,MAAM,EAAC,MAAM,gBAAY,SAAS,GAAG;oBAC3C,6DAAM,MAAM,EAAC,MAAM,gBAAY,SAAS,GAAG;oBAC3C,6DAAM,MAAM,EAAC,MAAM,gBAAY,SAAS,GAAG;oBAC3C,6DAAM,MAAM,EAAC,MAAM,gBAAY,SAAS,GAAG;oBAC3C,6DAAM,MAAM,EAAC,MAAM,gBAAY,SAAS,GAAG;oBAC3C,6DAAM,MAAM,EAAC,KAAK,gBAAY,SAAS,GAAG,CAC3B,CACZ,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'zoom-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class ZoomIcon {\n  @Prop() width: string = '20';\n  @Prop() height: string = '20';\n\n  render() {\n    // Spam icon svg\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M19.7495 6.85792C19.2077 3.4745 16.5255 0.792345 13.1421 0.250451C12.1175 0.0865155 11.0702 0 10 0C8.92992 0 7.88256 0.0865155 6.85797 0.250451C3.47453 0.792345 0.792373 3.4745 0.250478 6.85792C0.0865433 7.87796 0 8.92987 0 10C0 11.0701 0.0865433 12.1175 0.250478 13.1421C0.792373 16.5255 3.47453 19.2077 6.85797 19.7495C7.88256 19.9135 8.92992 20 10 20C11.0702 20 12.1175 19.9135 13.1421 19.7495C16.5255 19.2077 19.2077 16.5255 19.7495 13.1421C19.9135 12.122 20 11.0701 20 10C20 8.92987 19.9135 7.88251 19.7495 6.85792Z\"\n          fill=\"url(#paint0_linear_22_6272)\"\n        />\n        <path\n          d=\"M12.154 12.1676C12.154 12.7596 11.6759 13.2377 11.0839 13.2377H6.42995C5.24598 13.2377 4.28516 12.2769 4.28516 11.0929V7.87794C4.28516 7.28596 4.76328 6.80786 5.35527 6.80786H10.0092C11.1932 6.80786 12.154 7.7687 12.154 8.95267V12.1676ZM14.8589 7.09475L13.2879 8.27412C13.0193 8.47448 12.8598 8.79324 12.8598 9.13022V10.9153C12.8598 11.2523 13.0193 11.5711 13.2879 11.7714L14.8589 12.9508C15.2141 13.2149 15.715 12.9645 15.715 12.5228V7.5228C15.715 7.08109 15.2096 6.83063 14.8589 7.09475Z\"\n          fill=\"white\"\n        />\n        <defs>\n          <linearGradient id=\"paint0_linear_22_6272\" x1=\"10\" y1=\"19.9954\" x2=\"10\" y2=\"-0.00455379\" gradientUnits=\"userSpaceOnUse\">\n            <stop stop-color=\"#003FAE\" />\n            <stop offset=\"0.02\" stop-color=\"#0142B7\" />\n            <stop offset=\"0.09\" stop-color=\"#044BD1\" />\n            <stop offset=\"0.16\" stop-color=\"#0752E5\" />\n            <stop offset=\"0.24\" stop-color=\"#0958F4\" />\n            <stop offset=\"0.34\" stop-color=\"#0A5BFC\" />\n            <stop offset=\"0.5\" stop-color=\"#0B5CFF\" />\n          </linearGradient>\n        </defs>\n      </svg>\n    );\n  }\n}\n"]}

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

@@ -47,6 +47,7 @@ export class NylasIdentityRequestWrapper {
             id: idToken.sub,
             email: idToken.email,
             name: idToken.name,
+            provider: idToken.provider,
         };
     }
     async authenticationUrl(authArgs) {

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

@@ -1 +1 @@
-{"version":3,"file":"nylas-api-request.js","sourceRoot":"","sources":["../../src/common/nylas-api-request.ts"],"names":[],"mappings":"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","sourcesContent":["import { dataResponse } from '@/utils/utils';\nimport type { NylasSessions } from '@nylas/identity';\nimport { DataResponseReturnType } from './types';\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  /**\n   * The provider of the user's email address.\n   */\n  provider?: string;\n  /**\n   * A list of permission scopes for the provider.\n   */\n  scope?: Array<string>;\n  /**\n   * The login hint associated with the user.\n   */\n  loginHint?: string;\n  /**\n   * Whether to include grant scopes in the auth exchange.\n   */\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   * Note: It should not throw an error if the request fails, but should return an object with the error\n   * information as part of the tuple returned.\n   * @param args NylasRequestArgs\n   */\n  abstract request<T = any>(args: NylasRequestArgs): Promise<DataResponseReturnType<T>>;\n\n  /**\n   * This method should return the current user's information.\n   */\n\n  abstract currentUser(): Promise<User | null>;\n\n  /**\n   * This method should set the default authentication arguments to use when authenticating the user.\n   */\n  abstract setDefaultAuthArgs(authArgs: AuthArgs[]): void;\n\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  /**\n   * The default authentication arguments to use when authenticating the user.\n   */\n  private defaultAuthArgs: AuthArgs[] = [];\n\n  /**\n   * Constructor for the NylasIdentityRequestWrapper class.\n   * @param session The Nylas Identity session instance.\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 | null, NylasErrorResponse['error'] | null]>\n   */\n  async request<T>({ method, path, body, headers }: NylasRequestArgs): Promise<DataResponseReturnType<T>> {\n    try {\n      const response = await 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      });\n\n      // Sometimes the Nylas identity session fetch method returns undefined.\n      // Possibly due to CORS issues. In this case, we throw an error.\n      if (typeof response === 'undefined') {\n        throw new Error('Response is undefined');\n      }\n\n      return dataResponse(response as T);\n    } catch (error: any) {\n      let errorMessage = String(error);\n      if (String(error).includes('Access token not found')) {\n        errorMessage = 'Session expired, please log in again. Redirecting...';\n        setTimeout(() => {\n          localStorage.removeItem('grant');\n          localStorage.removeItem('user');\n          window.location.reload();\n        }, 1000);\n      }\n      return dataResponse(null as T, {\n        message: errorMessage,\n      });\n    }\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    const provider = authArgs?.provider || 'google';\n    const defaultArgs = this.defaultAuthArgs.find(args => args.provider === provider);\n    let args = defaultArgs || {};\n\n    if (authArgs) {\n      args = { ...args, ...authArgs };\n    }\n    return this.session.auth(args);\n  }\n\n  /**\n   * This method sets the default authentication arguments to use when authenticating the user.\n   * @param authArgs authArgs\n   */\n  setDefaultAuthArgs(authArgs: AuthArgs[]) {\n    this.defaultAuthArgs = authArgs;\n  }\n}\n"]}
+{"version":3,"file":"nylas-api-request.js","sourceRoot":"","sources":["../../src/common/nylas-api-request.ts"],"names":[],"mappings":"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","sourcesContent":["import { dataResponse } from '@/utils/utils';\nimport type { NylasSessions } from '@nylas/identity';\nimport { DataResponseReturnType } from './types';\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  provider?: string;\n};\n\n/**\n * Arguments for authenticating a user with the Nylas Identity system.\n */\nexport type AuthArgs = {\n  /**\n   * The provider of the user's email address.\n   */\n  provider?: string;\n  /**\n   * A list of permission scopes for the provider.\n   */\n  scope?: Array<string>;\n  /**\n   * The login hint associated with the user.\n   */\n  loginHint?: string;\n  /**\n   * Whether to include grant scopes in the auth exchange.\n   */\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   * Note: It should not throw an error if the request fails, but should return an object with the error\n   * information as part of the tuple returned.\n   * @param args NylasRequestArgs\n   */\n  abstract request<T = any>(args: NylasRequestArgs): Promise<DataResponseReturnType<T>>;\n\n  /**\n   * This method should return the current user's information.\n   */\n\n  abstract currentUser(): Promise<User | null>;\n\n  /**\n   * This method should set the default authentication arguments to use when authenticating the user.\n   */\n  abstract setDefaultAuthArgs(authArgs: AuthArgs[]): void;\n\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  /**\n   * The default authentication arguments to use when authenticating the user.\n   */\n  private defaultAuthArgs: AuthArgs[] = [];\n\n  /**\n   * Constructor for the NylasIdentityRequestWrapper class.\n   * @param session The Nylas Identity session instance.\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 | null, NylasErrorResponse['error'] | null]>\n   */\n  async request<T>({ method, path, body, headers }: NylasRequestArgs): Promise<DataResponseReturnType<T>> {\n    try {\n      const response = await 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      });\n\n      // Sometimes the Nylas identity session fetch method returns undefined.\n      // Possibly due to CORS issues. In this case, we throw an error.\n      if (typeof response === 'undefined') {\n        throw new Error('Response is undefined');\n      }\n\n      return dataResponse(response as T);\n    } catch (error: any) {\n      let errorMessage = String(error);\n      if (String(error).includes('Access token not found')) {\n        errorMessage = 'Session expired, please log in again. Redirecting...';\n        setTimeout(() => {\n          localStorage.removeItem('grant');\n          localStorage.removeItem('user');\n          window.location.reload();\n        }, 1000);\n      }\n      return dataResponse(null as T, {\n        message: errorMessage,\n      });\n    }\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      provider: idToken.provider,\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    const provider = authArgs?.provider || 'google';\n    const defaultArgs = this.defaultAuthArgs.find(args => args.provider === provider);\n    let args = defaultArgs || {};\n\n    if (authArgs) {\n      args = { ...args, ...authArgs };\n    }\n    return this.session.auth(args);\n  }\n\n  /**\n   * This method sets the default authentication arguments to use when authenticating the user.\n   * @param authArgs authArgs\n   */\n  setDefaultAuthArgs(authArgs: AuthArgs[]) {\n    this.defaultAuthArgs = authArgs;\n  }\n}\n"]}

package/dist/collection/common/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/common/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Message, NylasErrorResponse } from '@nylas/core';\nimport { EventEmitter } from '@stencil/core';\n\nexport type DataState = 'loading' | 'ready';\n\ntype StoresType = unknown;\ntype StoreInstances = {\n  [K in keyof StoresType]: StoresType[K];\n};\ntype StoreStateKeys<T> = T extends { state: infer S } ? keyof S : never;\n\n/**\n * This type is used to create a union of all possible store state keys.\n * Example:\n * type CombinedStoreStateKeys = \"nylas.messages\" | \"nylasTheme.colour\"\n */\nexport type CombinedStoreStateKeys<SK extends keyof S, S = StoreInstances> = {\n  [StoreKey in SK]: StoreStateKeys<S[StoreKey]> extends never | undefined ? never : `${StoreKey & string}.${StoreStateKeys<S[StoreKey]> & string}`;\n}[SK];\n\nexport type InternalMessage = {\n  id: string;\n  data: Message;\n  collapse: boolean;\n  showContactData: boolean;\n};\n\nexport type InternalAttachment = {\n  blob: Blob;\n  filename: string;\n  contentType: string;\n  size: number;\n  messageId: string;\n};\n\nexport type MethodKeys<T> = {\n  [K in keyof T]: T[K] extends Function ? K : never;\n}[keyof T];\n\n// TODO: Move this to @nylas/core\nexport type AvailabilityTimeslot = {\n  emails: string[];\n  start_time: number;\n  end_time: number;\n};\n\nexport type AvailabilityResponse = {\n  time_slots: AvailabilityTimeslot[];\n  participants: {\n    email: string;\n    name: string;\n  }[];\n  duration: number;\n};\n\nexport type UISettingsResponse = {\n  scheduler: {\n    available_days_in_future: number;\n    min_cancellation_notice: number;\n    min_booking_notice: number;\n    cancellation_policy: string;\n  };\n  organizer: {\n    name: string;\n    email: string;\n  };\n};\n\n// Extracts a mapped type with keys of T that are EventEmitters, and their corresponding types\nexport type ExtractEventEmitterKeys<T> = {\n  [K in keyof T]: T[K] extends EventEmitter<any> ? K : never;\n}[keyof T];\n\n// Extracts the event type from an EventEmitter\nexport type EventEmitterEventType<T> = T extends EventEmitter<infer U> ? U : never;\n\n// Extracts a mapped type with keys of T that are EventEmitters, and their corresponding types\nexport type ExtractEventEmitterProperties<T> = {\n  [K in keyof T]: T[K] extends EventEmitter<infer U> ? { key: K; eventType: U } : never;\n}[keyof T];\n\nexport type NylasEvent = {\n  booking_id: string;\n  organizer: {\n    email: string;\n    name: string;\n    is_organizer?: boolean;\n  };\n  title: string;\n  description: string;\n  status: string;\n};\n\nexport type DataResponseError = Exclude<NylasErrorResponse['error'], undefined>;\nexport type DataResponseReturnType<T = any> = [T, null] | [null, DataResponseError];\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/common/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Message, NylasErrorResponse } from '@nylas/core';\nimport { EventEmitter } from '@stencil/core';\n\nexport type DataState = 'loading' | 'ready';\n\ntype StoresType = unknown;\ntype StoreInstances = {\n  [K in keyof StoresType]: StoresType[K];\n};\ntype StoreStateKeys<T> = T extends { state: infer S } ? keyof S : never;\n\n/**\n * This type is used to create a union of all possible store state keys.\n * Example:\n * type CombinedStoreStateKeys = \"nylas.messages\" | \"nylasTheme.colour\"\n */\nexport type CombinedStoreStateKeys<SK extends keyof S, S = StoreInstances> = {\n  [StoreKey in SK]: StoreStateKeys<S[StoreKey]> extends never | undefined ? never : `${StoreKey & string}.${StoreStateKeys<S[StoreKey]> & string}`;\n}[SK];\n\nexport type InternalMessage = {\n  id: string;\n  data: Message;\n  collapse: boolean;\n  showContactData: boolean;\n};\n\nexport type InternalAttachment = {\n  blob: Blob;\n  filename: string;\n  contentType: string;\n  size: number;\n  messageId: string;\n};\n\nexport type MethodKeys<T> = {\n  [K in keyof T]: T[K] extends Function ? K : never;\n}[keyof T];\n\n// TODO: Move this to @nylas/core\nexport type AvailabilityTimeslot = {\n  emails: string[];\n  start_time: number;\n  end_time: number;\n};\n\nexport type AvailabilityResponse = {\n  order?: string[];\n  time_slots: AvailabilityTimeslot[];\n  participants: {\n    email: string;\n    name: string;\n  }[];\n  duration: number;\n};\n\nexport type UISettingsResponse = {\n  scheduler: {\n    available_days_in_future: number;\n    min_cancellation_notice: number;\n    min_booking_notice: number;\n    cancellation_policy: string;\n  };\n  organizer: {\n    name: string;\n    email: string;\n  };\n};\n\n// Extracts a mapped type with keys of T that are EventEmitters, and their corresponding types\nexport type ExtractEventEmitterKeys<T> = {\n  [K in keyof T]: T[K] extends EventEmitter<any> ? K : never;\n}[keyof T];\n\n// Extracts the event type from an EventEmitter\nexport type EventEmitterEventType<T> = T extends EventEmitter<infer U> ? U : never;\n\n// Extracts a mapped type with keys of T that are EventEmitters, and their corresponding types\nexport type ExtractEventEmitterProperties<T> = {\n  [K in keyof T]: T[K] extends EventEmitter<infer U> ? { key: K; eventType: U } : never;\n}[keyof T];\n\nexport type NylasEvent = {\n  booking_id: string;\n  organizer: {\n    email: string;\n    name: string;\n    is_organizer?: boolean;\n  };\n  title: string;\n  description: string;\n  status: string;\n};\n\nexport type DataResponseError = Exclude<NylasErrorResponse['error'], undefined>;\nexport type DataResponseReturnType<T = any> = [T, null] | [null, DataResponseError];\n"]}

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

@@ -1,4 +1,8 @@
 button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
   height: 48px;
   border: none;
   border-radius: var(--nylas-border-radius-2x);

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

@@ -12,7 +12,7 @@ export class ButtonComponent {
     }
     render() {
         const className = `button-${this.variant}` + (this.disabled ? ' disabled' : '');
-        return (h("button", { key: 'bee09000c1e5c4fd748032ed56db6f36d307ce77', 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: 'bedb527775bf845d865d7abb47cc409fe1245a27' })));
+        return (h("button", { key: '77fcafa20043b9f599b1fa1239bf683969b05eaf', class: className, disabled: this.disabled, type: "type", onClick: this.clickHandler, onMouseOver: this.mouseOverHandler, onMouseOut: this.mouseOutHandler, onFocus: this.focusHandler, onBlur: this.blurHandler }, h("slot", { key: 'd061264ee544bb9f4ca7ec3aa03f54b84c8af1fd' })));
     }
     static get is() { return "button-component"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,4 +1,4 @@
-label {
+.checkbox-container {
   --nylas-primary: #2563eb;
   --nylas-error: #cc4841;
   --nylas-error-pressed: #992222;
@@ -22,6 +22,20 @@ label {
   --nylas-border-radius-2x: 0.5rem;
   --nylas-border-radius-3x: 0.75rem;
   --nylas-font-family: "Inter", sans-serif;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.checkbox-container p.error {
+  color: var(--nylas-error);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  font-family: var(--nylas-font-family);
+  margin: 0;
+}
+
+label {
   display: flex;
   align-items: center;
   font-family: var(--nylas-font-family);

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

@@ -4,12 +4,24 @@ export class CheckboxComponent {
         this.name = 'checkbox';
         this.checked = false;
         this.label = '';
+        this.required = false;
         this.isChecked = this.checked;
+        this.error = '';
     }
     componentWillLoad() {
         this.isChecked = this.checked;
     }
+    handleBookingFormSubmitted(event) {
+        if (this.required && !this.isChecked) {
+            this.error = `${this.label} is required.`;
+            return;
+        }
+        if (this.error) {
+            event.preventDefault();
+        }
+    }
     toggleCheck() {
+        this.error = '';
         this.isChecked = !this.isChecked;
         this.nylasFormCheckboxToggled.emit({
             checked: this.isChecked,
@@ -18,7 +30,7 @@ export class CheckboxComponent {
         });
     }
     render() {
-        return (h("label", { key: 'ff418217723b6044270dc691f7d0e11aea5fb204' }, h("input", { key: 'c45008c89d147534ba6b4a70120b7c5159a25ce6', type: "checkbox", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h("span", { key: 'a785e711233dab04bb19bcf1f1c6f665d7460015', class: "checkmark" }), h("slot", { key: '05e7f91a9e038bf9a467d63c9c004f7b90454b6f', name: "label" }, h("span", { key: '35a5c8bef4f998f993fbdcf2b752b83432218422', class: "label" }, this.label))));
+        return (h("div", { key: '2aa7451177c31e4dc5b6050b48c675eb44d0bb48', class: "checkbox-container" }, h("label", { key: '1bdcdf2c37eabf25091a38e3a2f97ea1bc75c41d' }, h("input", { key: 'e7538bf21e8171cb0696e6bddba8d2496ad6e653', type: "checkbox", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h("span", { key: '298c9fcb3e0b8d3446c69f5dd8fd5efef73bf5dd', class: "checkmark" }), h("slot", { key: 'd29afdf0831fc9be332060623eb99b2c51ea8be7', name: "label" }, h("span", { key: 'd9ecaa3ecba17d006c2830938cf0f343fded43a9', class: "label" }, this.label))), this.error && h("p", { class: "error" }, this.error)));
     }
     static get is() { return "checkbox-component"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +58,7 @@ export class CheckboxComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The name of the checkbox. This is used to identify the checkbox when submitting a form."
                 },
                 "attribute": "name",
                 "reflect": false,
@@ -64,7 +76,7 @@ export class CheckboxComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The default value of the checkbox. This is the value that is displayed when the checkbox is rendered."
                 },
                 "attribute": "checked",
                 "reflect": false,
@@ -82,17 +94,36 @@ export class CheckboxComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The label of the checkbox. This is displayed next to the checkbox."
                 },
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is required. If true, the checkbox must be checked when submitting a form.\nDefault is false. If the checkbox is required and not checked, an error message is displayed."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "isChecked": {}
+            "isChecked": {},
+            "error": {}
         };
     }
     static get events() {
@@ -104,7 +135,7 @@ export class CheckboxComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "This event is fired when the checkbox is toggled."
                 },
                 "complexType": {
                     "original": "{\n    checked: boolean;\n    name: string;\n    label: string;\n  }",
@@ -113,5 +144,14 @@ export class CheckboxComponent {
                 }
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "bookingFormSubmitted",
+                "method": "handleBookingFormSubmitted",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=checkbox-component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-component.js","sourceRoot":"","sources":["../../../../src/components/design-system/checkbox-component/checkbox-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO/E,MAAM,OAAO,iBAAiB;;oBACL,UAAU;uBACN,KAAK;qBACR,EAAE;yBAEI,IAAI,CAAC,OAAO;;IAQ1C,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAChC,CAAC;IAED,WAAW;QACT,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;YACjC,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,8DAAO,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAI;YACvG,6DAAM,KAAK,EAAC,WAAW,GAAQ;YAC/B,6DAAM,IAAI,EAAC,OAAO;gBAChB,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACD,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'checkbox-component',\n  styleUrl: 'checkbox-component.scss',\n  shadow: true,\n})\nexport class CheckboxComponent {\n  @Prop() name: string = 'checkbox';\n  @Prop() checked: boolean = false;\n  @Prop() label: string = '';\n\n  @State() isChecked: boolean = this.checked;\n\n  @Event() nylasFormCheckboxToggled!: EventEmitter<{\n    checked: boolean;\n    name: string;\n    label: string;\n  }>;\n\n  componentWillLoad() {\n    this.isChecked = this.checked;\n  }\n\n  toggleCheck() {\n    this.isChecked = !this.isChecked;\n    this.nylasFormCheckboxToggled.emit({\n      checked: this.isChecked,\n      name: this.name,\n      label: this.label,\n    });\n  }\n\n  render() {\n    return (\n      <label>\n        <input type=\"checkbox\" name={this.name} checked={this.isChecked} onChange={() => this.toggleCheck()} />\n        <span class=\"checkmark\"></span>\n        <slot name=\"label\">\n          <span class=\"label\">{this.label}</span>\n        </slot>\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"checkbox-component.js","sourceRoot":"","sources":["../../../../src/components/design-system/checkbox-component/checkbox-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAWvF,MAAM,OAAO,iBAAiB;;oBAIL,UAAU;uBAIN,KAAK;qBAIR,EAAE;wBAKE,KAAK;yBAIH,IAAI,CAAC,OAAO;qBAIjB,EAAE;;IAY3B,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAChC,CAAC;IAOD,0BAA0B,CAAC,KAAkB;QAC3C,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACrC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,eAAe,CAAC;YAC1C,OAAO;QACT,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAGD,WAAW;QACT,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;YACjC,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,oBAAoB;YAC7B;gBACE,8DAAO,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAI;gBACvG,6DAAM,KAAK,EAAC,WAAW,GAAQ;gBAC/B,6DAAM,IAAI,EAAC,OAAO;oBAChB,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACD;YACP,IAAI,CAAC,KAAK,IAAI,SAAG,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5C,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * The `checkbox-component` component is a UI component that allows users to select a checkbox.\n * This component is used in the scheduling form to input checkbox type inputs.\n */\n@Component({\n  tag: 'checkbox-component',\n  styleUrl: 'checkbox-component.scss',\n  shadow: true,\n})\nexport class CheckboxComponent {\n  /**\n   * The name of the checkbox. This is used to identify the checkbox when submitting a form.\n   */\n  @Prop() name: string = 'checkbox';\n  /**\n   * The default value of the checkbox. This is the value that is displayed when the checkbox is rendered.\n   */\n  @Prop() checked: boolean = false;\n  /**\n   * The label of the checkbox. This is displayed next to the checkbox.\n   */\n  @Prop() label: string = '';\n  /**\n   * Whether the checkbox is required. If true, the checkbox must be checked when submitting a form.\n   * Default is false. If the checkbox is required and not checked, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * The checked state of the checkbox.\n   */\n  @State() isChecked: boolean = this.checked;\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the checkbox is toggled.\n   */\n  @Event() nylasFormCheckboxToggled!: EventEmitter<{\n    checked: boolean;\n    name: string;\n    label: string;\n  }>;\n\n  // Lifecycle events\n  componentWillLoad() {\n    this.isChecked = this.checked;\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    if (this.required && !this.isChecked) {\n      this.error = `${this.label} is required.`;\n      return;\n    }\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  toggleCheck() {\n    this.error = '';\n    this.isChecked = !this.isChecked;\n    this.nylasFormCheckboxToggled.emit({\n      checked: this.isChecked,\n      name: this.name,\n      label: this.label,\n    });\n  }\n\n  render() {\n    return (\n      <div class=\"checkbox-container\">\n        <label>\n          <input type=\"checkbox\" name={this.name} checked={this.isChecked} onChange={() => this.toggleCheck()} />\n          <span class=\"checkmark\"></span>\n          <slot name=\"label\">\n            <span class=\"label\">{this.label}</span>\n          </slot>\n        </label>\n        {this.error && <p class=\"error\">{this.error}</p>}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,6 +1,6 @@
 :host {
   display: block;
-  height: 100%;
+  height: auto;
   --nylas-primary: #2563eb;
   --nylas-error: #cc4841;
   --nylas-error-pressed: #992222;
@@ -54,6 +54,12 @@ label .error {
   color: var(--nylas-error);
 }
 
+.input_wrapper {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
 input[type=text],
 input[type=email] {
   display: flex;
@@ -71,6 +77,8 @@ input[type=email] {
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
+  width: -moz-available;
+  width: -webkit-fill-available;
 }
 input[type=text]:focus,
 input[type=email]:focus {

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

@@ -2,11 +2,11 @@ import { h } from "@stencil/core";
 import sanitizeHtml from "sanitize-html";
 const DefaultPattern = {
     email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
-    tel: /^[0-9]{10}$/,
+    phone_number: /^[0-9]{10}$/,
 };
 const DefaultPlaceholder = {
     email: 'name@example.com',
-    tel: '1234567890',
+    phone_number: '1234567890',
 };
 export class InputComponent {
     constructor() {
@@ -24,6 +24,12 @@ export class InputComponent {
         this.value = '';
         this.error = '';
     }
+    handleDefaultValueChange(newValue) {
+        this.value = sanitizeHtml(newValue);
+        if (this.value) {
+            this.validatePattern(this.value);
+        }
+    }
     componentWillLoad() {
         this.value = sanitizeHtml(this.defaultValue);
         if (this.type !== 'text' && !this.pattern) {
@@ -56,7 +62,7 @@ export class InputComponent {
             this.error = `${this.label} is required.`;
             return;
         }
-        if (!this.pattern)
+        if (!this.pattern || (!value && !this.required))
             return;
         if (this.pattern.test(value)) {
             this.error = '';
@@ -66,7 +72,7 @@ export class InputComponent {
         }
     }
     render() {
-        return (h("label", { key: 'a28361a1be7a5afe38dfdc3eb375d51029af16d2', part: "ic__label", class: { error: !!this.error } }, h("p", { key: '950007f568b6c12231f40bedb1db8f62937e978a' }, h("span", { key: '106299e5bea57a16eec9734db501517d50549262', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")), h("input", { key: '5c00d0abff394b38de75d24af47610ff4e246e69', 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: '4a6deab471a6af7ced7959e9a051a717110a8a19', part: "ic__label", class: { error: !!this.error } }, h("p", { key: '9158a61ad4b9ea2521a39e45521372681fcb3423' }, h("span", { key: 'ed6247893d8c4fc903a26febf2341931c090053e', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")), h("div", { key: '3141c23d3136dfc069d1b1664dd6947a194da6c0', part: "ic__input_wrapper", class: "input_wrapper" }, h("input", { key: '52498c13b0632d632317951ad25d281025e58f91', type: "text", name: this.name, part: "ic__input", readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, placeholder: this.placeholder, class: { error: !!this.error }, onInput: e => this.handleInput(e) }), h("slot", { key: 'e4471ec1b410ac547cb047bcd11ea470b8fae8f2', name: "additional-input" })), this.error && (h("span", { class: "error help-text" }, this.error, " ", this.value && this.patternError !== '' ? ` ${this.patternError}` : ''))));
     }
     static get is() { return "input-component"; }
     static get encapsulation() { return "shadow"; }
@@ -140,15 +146,15 @@ export class InputComponent {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'text' | 'email' | 'tel'",
-                    "resolved": "\"email\" | \"tel\" | \"text\"",
+                    "original": "'text' | 'email' | 'phone_number'",
+                    "resolved": "\"email\" | \"phone_number\" | \"text\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The type of the input. This is used to determine the input's behavior.\nSupported types are 'text', 'email', and 'tel'."
+                    "text": "The type of the input. This is used to determine the input's behavior.\nSupported types are 'text', 'email', and 'phone_number'."
                 },
                 "attribute": "type",
                 "reflect": false,
@@ -243,7 +249,7 @@ export class InputComponent {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\nDefault is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'tel'."
+                    "text": "The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\nDefault is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'."
                 }
             },
             "maxLength": {
@@ -308,6 +314,12 @@ export class InputComponent {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "defaultValue",
+                "methodName": "handleDefaultValueChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "bookingFormSubmitted",

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

@@ -1 +1 @@
-{"version":3,"file":"input-component.js","sourceRoot":"","sources":["../../../../src/components/design-system/input-component/input-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,YAAY,MAAM,eAAe,CAAC;AAEzC,MAAM,cAAc,GAAG;IACrB,KAAK,EAAE,iDAAiD;IACxD,GAAG,EAAE,aAAa;CACnB,CAAC;AAEF,MAAM,kBAAkB,GAAG;IACzB,KAAK,EAAE,kBAAkB;IACzB,GAAG,EAAE,YAAY;CAClB,CAAC;AAYF,MAAM,OAAO,cAAc;;oBAIF,OAAO;4BAIC,EAAE;qBAIT,EAAE;oBAKe,MAAM;2BAIjB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;wBAK/B,KAAK;wBAKL,KAAK;yBAMJ,KAAK;;yBAUN,GAAG;4BAOA,EAAE;qBAKR,EAAE;qBAIF,EAAE;;IAiB3B,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7C,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAC1C,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAOD,0BAA0B,CAAC,KAAkB;QAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAGD,WAAW,CAAC,CAAQ;QAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;QAChE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAED,eAAe,CAAC,KAAa;QAE3B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAEhB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,eAAe,CAAC;YAC1C,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1B,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAClB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,WAAW,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,UAAU,CAAC;QAC7D,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,8DAAO,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE;YACpD;gBACE,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACtC,IAAI,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,UAAU,QAAS,CAC/C;YACJ,8DACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,WAAW,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,EAC9B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACjC;YACD,IAAI,CAAC,KAAK,IAAI,CACb,YAAM,KAAK,EAAC,iBAAiB;gBAC1B,IAAI,CAAC,KAAK;;gBAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAC9E,CACR,CACK,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport sanitizeHtml from 'sanitize-html';\n\nconst DefaultPattern = {\n  email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/,\n  tel: /^[0-9]{10}$/,\n};\n\nconst DefaultPlaceholder = {\n  email: 'name@example.com',\n  tel: '1234567890',\n};\n\n/**\n * The `input-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text values.\n */\n\n@Component({\n  tag: 'input-component',\n  styleUrl: 'input-component.scss',\n  shadow: true,\n})\nexport class InputComponent {\n  /**\n   * The name of the input. This is used to identify the input when submitting a form.\n   */\n  @Prop() name: string = 'input';\n  /**\n   * The default value of the input. This is the value that is displayed when the input is rendered.\n   */\n  @Prop() defaultValue: string = '';\n  /**\n   * The label of the input. This is displayed above the input.\n   */\n  @Prop() label: string = '';\n  /**\n   * The type of the input. This is used to determine the input's behavior.\n   * Supported types are 'text', 'email', and 'tel'.\n   */\n  @Prop() type: 'text' | 'email' | 'tel' = 'text';\n  /**\n   * The placeholder of the input. This is displayed when the input is empty.\n   */\n  @Prop() placeholder: string = DefaultPlaceholder[this.type];\n  /**\n   * Whether the input is required. If true, the input must have a value when submitting a form.\n   * Default is false. If the input is required and the value is empty, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * Whether the input is read-only. If true, the input cannot be edited.\n   * Default is false.\n   */\n  @Prop() readOnly: boolean = false;\n  /**\n   * Whether the input should be focused when rendered.\n   * Default is false. If true, the input is focused when rendered.\n   * Use this to set the focus on the first input in a form.\n   */\n  @Prop() autoFocus: boolean = false;\n  /**\n   * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n   * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'tel'.\n   */\n  @Prop() pattern?: RegExp;\n  /**\n   * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n   * Default is 255.\n   */\n  @Prop() maxLength: number = 255;\n  /**\n   * The error message to display when the value does not match the pattern.\n   * Default is an empty string. If the value does not match the pattern, the error message is appended to the default error message.\n   * For ex: patternError: \"Format: 123-456-7890\" , Default error message: \"Invalid phone number.\"\n   * - Error message displayed: \"Invalid phone number. Format: 123-456-7890\"\n   */\n  @Prop() patternError: string = '';\n\n  /**\n   * The input value state.\n   */\n  @State() value: string = '';\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the input value is changed.\n   * The scheduling form listens for this event to validate the input value and submit the form.\n   * If using outside of the scheduling form, listen for this event to validate the input value\n   * and handle the input value change.\n   */\n  @Event() nylasFormInputChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    label: string;\n    type: string;\n    error: string;\n  }>;\n\n  // Lifecycle methods\n  componentWillLoad() {\n    this.value = sanitizeHtml(this.defaultValue);\n    if (this.type !== 'text' && !this.pattern) {\n      this.pattern = DefaultPattern[this.type];\n    }\n\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    this.validatePattern(this.value);\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  handleInput(e: Event) {\n    this.error = '';\n    this.value = sanitizeHtml((e.target as HTMLInputElement).value);\n    this.nylasFormInputChanged.emit({\n      value: this.value,\n      name: this.name,\n      label: this.label,\n      error: this.error,\n      type: this.type,\n    });\n  }\n\n  validatePattern(value: string) {\n    // Reset error\n    this.error = '';\n    // Check if the field is required and value is empty\n    if (this.required && !value) {\n      this.error = `${this.label} is required.`;\n      return;\n    }\n    // Check if value matches pattern\n    if (!this.pattern) return;\n\n    if (this.pattern.test(value)) {\n      this.error = '';\n    } else {\n      this.error = `Invalid ${this.label.toLowerCase()} format.`;\n    }\n  }\n\n  render() {\n    return (\n      <label part=\"ic__label\" class={{ error: !!this.error }}>\n        <p>\n          <span class=\"label\">{this.label}</span>\n          {this.required && <span class=\"required\">*</span>}\n        </p>\n        <input\n          type=\"text\"\n          name={this.name}\n          part=\"ic__input\"\n          readOnly={this.readOnly}\n          autoFocus={this.autoFocus}\n          value={this.value}\n          maxLength={this.maxLength}\n          placeholder={this.placeholder}\n          class={{ error: !!this.error }}\n          onInput={e => this.handleInput(e)}\n        />\n        {this.error && (\n          <span class=\"error help-text\">\n            {this.error} {this.value && this.patternError !== '' ? ` ${this.patternError}` : ''}\n          </span>\n        )}\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"input-component.js","sourceRoot":"","sources":["../../../../src/components/design-system/input-component/input-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\nimport sanitizeHtml from 'sanitize-html';\n\nconst DefaultPattern = {\n  email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/,\n  phone_number: /^[0-9]{10}$/,\n};\n\nconst DefaultPlaceholder = {\n  email: 'name@example.com',\n  phone_number: '1234567890',\n};\n\n/**\n * The `input-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n */\n\n@Component({\n  tag: 'input-component',\n  styleUrl: 'input-component.scss',\n  shadow: true,\n})\nexport class InputComponent {\n  /**\n   * The name of the input. This is used to identify the input when submitting a form.\n   */\n  @Prop() name: string = 'input';\n  /**\n   * The default value of the input. This is the value that is displayed when the input is rendered.\n   */\n  @Prop() defaultValue: string = '';\n  /**\n   * The label of the input. This is displayed above the input.\n   */\n  @Prop() label: string = '';\n  /**\n   * The type of the input. This is used to determine the input's behavior.\n   * Supported types are 'text', 'email', and 'phone_number'.\n   */\n  @Prop() type: 'text' | 'email' | 'phone_number' = 'text';\n  /**\n   * The placeholder of the input. This is displayed when the input is empty.\n   */\n  @Prop() placeholder: string = DefaultPlaceholder[this.type];\n  /**\n   * Whether the input is required. If true, the input must have a value when submitting a form.\n   * Default is false. If the input is required and the value is empty, an error message is displayed.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * Whether the input is read-only. If true, the input cannot be edited.\n   * Default is false.\n   */\n  @Prop() readOnly: boolean = false;\n  /**\n   * Whether the input should be focused when rendered.\n   * Default is false. If true, the input is focused when rendered.\n   * Use this to set the focus on the first input in a form.\n   */\n  @Prop() autoFocus: boolean = false;\n  /**\n   * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n   * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n   */\n  @Prop() pattern?: RegExp;\n  /**\n   * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n   * Default is 255.\n   */\n  @Prop() maxLength: number = 255;\n  /**\n   * The error message to display when the value does not match the pattern.\n   * Default is an empty string. If the value does not match the pattern, the error message is appended to the default error message.\n   * For ex: patternError: \"Format: 123-456-7890\" , Default error message: \"Invalid phone number.\"\n   * - Error message displayed: \"Invalid phone number. Format: 123-456-7890\"\n   */\n  @Prop() patternError: string = '';\n\n  /**\n   * The input value state.\n   */\n  @State() value: string = '';\n  /**\n   * The error message state.\n   */\n  @State() error: string = '';\n\n  /**\n   * This event is fired when the input value is changed.\n   * The scheduling form listens for this event to validate the input value and submit the form.\n   * If using outside of the scheduling form, listen for this event to validate the input value\n   * and handle the input value change.\n   */\n  @Event() nylasFormInputChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    label: string;\n    type: string;\n    error: string;\n  }>;\n\n  // Lifecycle methods\n  @Watch('defaultValue')\n  handleDefaultValueChange(newValue: string) {\n    this.value = sanitizeHtml(newValue);\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  componentWillLoad() {\n    this.value = sanitizeHtml(this.defaultValue);\n    if (this.type !== 'text' && !this.pattern) {\n      this.pattern = DefaultPattern[this.type];\n    }\n\n    if (this.value) {\n      this.validatePattern(this.value);\n    }\n  }\n\n  // Event listeners\n  /**\n   * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n   */\n  @Listen('bookingFormSubmitted', { target: 'document' })\n  handleBookingFormSubmitted(event: CustomEvent) {\n    this.validatePattern(this.value);\n    if (this.error) {\n      event.preventDefault();\n    }\n  }\n\n  // Methods\n  handleInput(e: Event) {\n    this.error = '';\n    this.value = sanitizeHtml((e.target as HTMLInputElement).value);\n    this.nylasFormInputChanged.emit({\n      value: this.value,\n      name: this.name,\n      label: this.label,\n      error: this.error,\n      type: this.type,\n    });\n  }\n\n  validatePattern(value: string) {\n    // Reset error\n    this.error = '';\n    // Check if the field is required and value is empty\n    if (this.required && !value) {\n      this.error = `${this.label} is required.`;\n      return;\n    }\n    // Check if value matches pattern\n    if (!this.pattern || (!value && !this.required)) return;\n\n    if (this.pattern.test(value)) {\n      this.error = '';\n    } else {\n      this.error = `Invalid ${this.label.toLowerCase()} format.`;\n    }\n  }\n\n  render() {\n    return (\n      <label part=\"ic__label\" class={{ error: !!this.error }}>\n        <p>\n          <span class=\"label\">{this.label}</span>\n          {this.required && <span class=\"required\">*</span>}\n        </p>\n        <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n          <input\n            type=\"text\"\n            name={this.name}\n            part=\"ic__input\"\n            readOnly={this.readOnly}\n            autoFocus={this.autoFocus}\n            value={this.value}\n            maxLength={this.maxLength}\n            placeholder={this.placeholder}\n            class={{ error: !!this.error }}\n            onInput={e => this.handleInput(e)}\n          />\n          <slot name=\"additional-input\"></slot>\n        </div>\n        {this.error && (\n          <span class=\"error help-text\">\n            {this.error} {this.value && this.patternError !== '' ? ` ${this.patternError}` : ''}\n          </span>\n        )}\n      </label>\n    );\n  }\n}\n"]}

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

@@ -185,7 +185,7 @@ export class InputDropdown {
         }
     }
     render() {
-        return (h("div", { key: '271eb5442c9d5358ba755a4f4117c7cf74e6fcff', class: "dropdown", part: "id_dropdown" }, h("input", { key: 'bb95067c1c69691912193b04f76daf1603456722', 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: '9c59bf5935fe15c27f2ece008a59d245158e24e0', class: "dropdown", part: "id_dropdown" }, h("input", { key: 'bc16931dc1a6a1a3192cc440afe075b53e6419a6', 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);

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

@@ -37,6 +37,10 @@
   gap: 0.25rem;
   color: var(--nylas-base-800);
 }
+.dropdown span.error {
+  color: var(--nylas-error);
+  font-size: 14px;
+}
 
 .dropbtn {
   width: inherit;
@@ -56,6 +60,9 @@
 .dropbtn.focus {
   background: transparent;
 }
+.dropbtn.error {
+  border: 1px solid var(--nylas-error);
+}
 .dropbtn:hover, .dropbtn:active {
   border: 1px solid var(--nylas-primary);
 }
@@ -76,10 +83,10 @@
   width: 100%;
   max-height: 336px;
   overflow: auto;
-  border: 1px solid #ddd;
   z-index: 1;
   border-radius: 4px;
   position: absolute;
+  top: 72px;
   box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);
   box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843);
 }

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

@@ -5,6 +5,7 @@ export class MultiSelectDropdown {
         this.name = undefined;
         this.label = undefined;
         this.options = [];
+        this.error = '';
         this.availableOptions = this.options;
         this.isOpen = false;
         this.ariaActivedescendant = '';
@@ -118,9 +119,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: 'af0befb6c6c059e41a99ebe56c9632e6445e897b' }, h("div", { key: 'e93abae0184670a75caa02b4f687a374fce9a055', class: "dropdown", part: "msd_dropdown" }, h("label", { key: 'cb7ab81e0c7e23934dfc814a4c5281470e2ad510', class: "dropdown-label" }, this.label, h("slot", { key: '88fdcec62b47bf2b7da977c06b36300722789373', name: "label-icon", "aria-hidden": "true" })), h("button", { key: '17e03081353c32b5f571e7655fbe7b0c2ea87a35', 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: 'f1925d4d315c6be091a07f18261e574792883fd7', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '02c03946856eed3b6207ec84abbba0d16554af9f', class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1
+        return (h(Host, { key: 'a210f609992836c2f16b3c50d0dd41cf1803e45d' }, h("div", { key: 'f925ec1ca53bf285ea2e95fb9b0c7a61c214b9fb', class: "dropdown", part: "msd_dropdown" }, h("label", { key: 'c99cfe9abb34365369ed230f035275cb45851e18', class: "dropdown-label" }, this.label, h("slot", { key: '4c398d8e40b4f9a762c21a94198bcfe5383dfbac', name: "label-icon", "aria-hidden": "true" })), h("button", { key: '1b2a30027ab7d1177f1c01f82d20b34c63c070a1', name: this.name, part: `msd_dropdown-button ${this.error ? 'msd_dropdown-button--error' : ''}`, class: { dropbtn: true, open: this.isOpen, error: !!this.error }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: 'd8f2bd199c2a931a5e4380f6d1126df6abe894cd', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '54810e429302d3c990ac49c10386ec442950a37d', 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: 'bbd36a37a7ee28e299da6b22612206e4bbbcf8db', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, h("chevron-icon", { key: '4e6f9c3dfd33c8d87b9584648487783e417961c6', 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: '664a32573a64a7ae20fd36748050b399160ce032', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, h("chevron-icon", { key: '77ab403c2a1f80a7eb32a40109b57257e9d80c85', width: "16", height: "16" }))), this.error ? h("span", { class: "error" }, this.error) : null, 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"; }
@@ -190,6 +191,24 @@ export class MultiSelectDropdown {
                     "text": "The options to display in the dropdown"
                 },
                 "defaultValue": "[]"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message to display"
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }