@nylas/web-elements 0.0.0-canary-20241008193213 → 0.0.0-canary-20241017103834

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

@@ -1 +1 @@
-{"version":3,"file":"input-image-url.js","sourceRoot":"","sources":["../../../../src/components/design-system/input-image-url/input-image-url.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAc9H,MAAM,OAAO,aAAa;;QAEP,kBAAa,GAAW,WAAW,CAAC;wBAKA,EAAE;4BAIxB,EAAE;oBAIV,iBAAiB;+BASL,IAAI,CAAC,QAAQ;;IAYhD,iBAAiB;QACf,KAAK,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,CAAC;IAClD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,CAAC;IACrD,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,CAAC;QAEhD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC/D,CAAC;IAED,gBAAgB;QACd,KAAK,CAAC,mBAAmB,EAAE,kBAAkB,CAAC,CAAC;QAC/C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC;QACrC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;IAED,mBAAmB;QACjB,KAAK,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,CAAC;IACpD,CAAC;IAED,kBAAkB;QAChB,KAAK,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC;IACnD,CAAC;IAED,mBAAmB;QACjB,KAAK,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,CAAC;IACpD,CAAC;IAED,kBAAkB;QAChB,KAAK,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC;IACnD,CAAC;IAQD,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,mBAAmB,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QAClE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAGD,KAAK,CAAC,4BAA4B,CAAC,KAAmD;QACpF,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAErC,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,yBAAyB,CAAC,KAAmD;QACjF,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAErC,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,KAAa;QACpB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QAEvB,YAAY,CAAC,KAAK,CAAC;aAChB,IAAI,CAAC,GAAG,EAAE;YACT,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAE7B,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC7D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC3E,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,oBAAoB,CAAC,CAAC;YACxE,IAAI,CAAC,YAAY,GAAG,oBAAoB,CAAC;QAC3C,CAAC,CAAC,CAAC;IACP,CAAC;IAiBD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,wEAAiB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAC,qCAAqC,EAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAE,GAAI;oBACpK,IAAI,CAAC,YAAY,IAAI,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,YAAY,CAAQ,CACxE;gBAEL,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAC7C,WAAK,KAAK,EAAC,MAAM;oBACf,WAAK,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAC,MAAM,GAAG,CACzC,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAlBC;IAfC,iBAAiB,CAAmG;QACnH,IAAI,EAAE,mBAAmB;QACzB,YAAY,EAAE;YACZ,YAAY,EAAE,KAAK,EACjB,KAAiI,EACjI,8BAA6D,EAC7D,EAAE;gBACF,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBAEtC,IAAI,YAAY,EAAE,CAAC;oBACjB,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtB,CAAC;YACH,CAAC;SACF;KACF,CAAC;;;;2CAkBD","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, isValidImage } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../../scheduler-editor/nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-image-input` component is a UI component that allows users input an image URL and see a preview of the image.\n *\n * @part iiu__logo-input-textfield - The image input textfield\n */\n@Component({\n  tag: 'input-image-url',\n  styleUrl: 'input-image-url.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class InputImageUrl {\n  @Element() host!: HTMLInputImageUrlElement;\n  private readonly componentType: string = 'image-url';\n\n  /**\n   * Image\n   */\n  @Prop({ attribute: 'image-url' }) imageUrl: string = '';\n  /**\n   * Error message to display when the image URL is invalid.\n   */\n  @Prop() errorMessage: string = '';\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'input-image-url';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The current image URL state.\n   */\n  @State() currentImageUrl: string = this.imageUrl;\n\n  /**\n   * This event is fired when the image URL is changed\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-image-input', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-image-input', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-image-input', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n    this.host.setAttribute('component-type', this.componentType);\n  }\n\n  componentDidLoad() {\n    debug('nylas-image-input', 'componentDidLoad');\n    this.currentImageUrl = this.imageUrl;\n    this.setImage(this.imageUrl);\n  }\n\n  componentWillUpdate() {\n    debug('nylas-image-input', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-image-input', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-image-input', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-image-input', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-image-input', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n\n    if (name === this.name) {\n      this.setImage(value);\n    }\n  }\n\n  @Listen('nylasFormInputBlurred')\n  async nylasFormInputBlurHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n\n    if (name === this.name) {\n      this.setImage(value);\n    }\n  }\n\n  setImage(value: string) {\n    this.errorMessage = '';\n\n    isValidImage(value)\n      .then(() => {\n        this.currentImageUrl = value;\n\n        this.internals.setValidity({});\n        this.internals.setFormValue(this.currentImageUrl, this.name);\n        this.valueChanged.emit({ value: this.currentImageUrl, name: this.name });\n      })\n      .catch(() => {\n        this.internals.setValidity({ customError: true }, 'Invalid image URL.');\n        this.errorMessage = 'Invalid image URL.';\n      });\n  }\n\n  @RegisterComponent<InputImageUrl, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-image-input',\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"logo-container\">\n          <div class=\"input-container\">\n            <input-component name={this.name} id={this.name} type=\"text\" required={false} exportparts=\"ic_input: iiu__logo-input-textfield\" defaultValue={this.imageUrl ?? ''} />\n            {this.errorMessage && <span class=\"error-message\">{this.errorMessage}</span>}\n          </div>\n\n          {this.currentImageUrl && !this.errorMessage && (\n            <div class=\"logo\">\n              <img src={this.currentImageUrl} alt=\"Logo\" />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"input-image-url.js","sourceRoot":"","sources":["../../../../src/components/design-system/input-image-url/input-image-url.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, isValidImage } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../../scheduler-editor/nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-image-input` component is a UI component that allows users input an image URL and see a preview of the image.\n *\n * @part iiu__logo-input-textfield - The image input textfield\n */\n@Component({\n  tag: 'input-image-url',\n  styleUrl: 'input-image-url.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class InputImageUrl {\n  @Element() host!: HTMLInputImageUrlElement;\n  private readonly componentType: string = 'image-url';\n\n  /**\n   * Image\n   */\n  @Prop({ attribute: 'image-url' }) imageUrl: string = '';\n  /**\n   * Error message to display when the image URL is invalid.\n   */\n  @Prop() errorMessage: string = '';\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'input-image-url';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The current image URL state.\n   */\n  @State() currentImageUrl: string = this.imageUrl;\n\n  /**\n   * This event is fired when the image url is changed and the image is invalid.\n   */\n  @Event() readonly nylasFormInputImageUrlInvalid!: EventEmitter<{ value: string; name: string }>;\n  /**\n   * This event is fired when the image URL is changed\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-image-input', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-image-input', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-image-input', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n    this.host.setAttribute('component-type', this.componentType);\n  }\n\n  componentDidLoad() {\n    debug('nylas-image-input', 'componentDidLoad');\n    this.currentImageUrl = this.imageUrl;\n    this.setImage(this.imageUrl);\n  }\n\n  componentWillUpdate() {\n    debug('nylas-image-input', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-image-input', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-image-input', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-image-input', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-image-input', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n\n    if (name === this.name) {\n      this.setImage(value);\n    }\n  }\n\n  @Listen('nylasFormInputBlurred')\n  async nylasFormInputBlurHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n\n    if (name === this.name) {\n      this.setImage(value);\n    }\n  }\n\n  setImage(value: string) {\n    this.errorMessage = '';\n\n    isValidImage(value)\n      .then(() => {\n        this.currentImageUrl = value;\n\n        this.internals.setValidity({});\n        this.internals.setFormValue(this.currentImageUrl, this.name);\n        this.valueChanged.emit({ value: this.currentImageUrl, name: this.name });\n      })\n      .catch(() => {\n        this.errorMessage = 'Invalid image URL.';\n        this.nylasFormInputImageUrlInvalid.emit({ value: 'Invalid image URL.', name: this.name });\n        if (typeof this.internals.setValidity === 'function') {\n          this.internals.setValidity({ customError: true }, 'Invalid image URL.');\n        }\n      });\n  }\n\n  @RegisterComponent<InputImageUrl, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-image-input',\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"logo-container\">\n          <div class=\"input-container\">\n            <input-component name={this.name} id={this.name} type=\"text\" required={false} exportparts=\"ic_input: iiu__logo-input-textfield\" defaultValue={this.imageUrl ?? ''} />\n            {this.errorMessage && <span class=\"error-message\">{this.errorMessage}</span>}\n          </div>\n\n          {this.currentImageUrl && !this.errorMessage && (\n            <div class=\"logo\">\n              <img src={this.currentImageUrl} alt=\"Logo\" />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -125,7 +125,7 @@ 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: '9417bddaf55644bed09f9307e395493edff182f7' }, h("div", { key: '2c117b95885d3b5050fa430bdab613fefbe80c8e', class: "dropdown", part: "msd_dropdown" }, h("label", { key: '0068b39a03678248b2225d4c355403df20e4e157', class: "dropdown-label" }, this.label, h("slot", { key: '25f55fdf4da7980ba1c4af4ce0751c7e9b8c9ddd', name: "label-icon", "aria-hidden": "true" })), h("button", { key: 'a637c27dc2aa8b270115b42f70cb5b87a89f32dd', 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: '7fb4005ea067df4eec7dd9b167b440c685475f19', name: "select-icon", "aria-hidden": "true" }), h("span", { key: 'd21978886c1eb01961e01f12c837a638bd3d740b', class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1 ? `Multiple options selected` : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label), h("span", { key: '99b5343dc6f1bcd0488d8d7eebf3256780a89dd4', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, h("chevron-icon", { key: '3fc6cbe2b3e4dc995989affc69f50339a07e2338', 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)));
+        return (h(Host, { key: 'e1d4d14ecbb535efa9c01bbd472648b0a11f80f0' }, h("div", { key: '4fa54bb57eea3f45d49d0864e11ca20bb6b9b16c', class: "dropdown", part: "msd_dropdown" }, h("label", { key: 'dd418efe1b38427042f1f88b9fd615ee89c9f5d9', class: "dropdown-label" }, this.label, h("slot", { key: 'a8cd3f9fd40a3b77683c636b3b835e0cbd738981', name: "label-icon", "aria-hidden": "true" })), h("button", { key: 'd39f657c45ecd246018f4c5db904ad37d475634b', 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: '45f912fd627eb75e06446a782d91b27bf138677c', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '8271bafba127888d6646b31749292b049e190589', class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1 ? `Multiple options selected` : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label), h("span", { key: '75caecf1bffad204acab61b8d8809b03a9dbeb73', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, h("chevron-icon", { key: 'cc9faf08225b9c73481d27a9b3f6e7a43b379c25', 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"; }

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

@@ -38,7 +38,7 @@ export class RadioButtonGroup {
         });
     }
     render() {
-        return (h("div", { key: '6f0060f42904099fb5a9dd4fad67bb52a04daa73', class: "radio-group" }, h("slot", { key: '670730b884d45e19fb27ccb66fe5029c656ac8dd', name: "label" }, this.label && (h("p", { class: { error: !!this.error } }, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")))), this.options.map(option => (h("label", null, h("div", { class: "radio-option" }, h("input", { type: "radio", name: this.name, value: option.value, checked: this.selectedValue === option.value, onChange: () => this.handleChange(option.value) }), h("p", null, h("span", { class: "title" }, option.label), h("span", { class: "description" }, option.description)))))), this.error && h("span", { class: "error help-text" }, this.error)));
+        return (h("div", { key: '6848b97b9a503ab19ce43b405d86d6e98ca3caaa', class: "radio-group" }, h("slot", { key: 'be574ba6675264e5f616f55126a6a83f3706975f', name: "label" }, this.label && (h("p", { class: { error: !!this.error } }, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*")))), this.options.map(option => (h("label", null, h("div", { class: "radio-option" }, h("input", { type: "radio", name: this.name, value: option.value, checked: this.selectedValue === option.value, onChange: () => this.handleChange(option.value) }), h("p", null, h("span", { class: "title" }, option.label), h("span", { class: "description" }, option.description)))))), this.error && h("span", { class: "error help-text" }, this.error)));
     }
     static get is() { return "radio-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -176,7 +176,7 @@ export class SelectDropdown {
     }
     render() {
         const buttonText = this.generateButtonText(this.selectedOption, this.dropdownButtonText);
-        return (h("div", { key: 'c7b83d5ff4a62e9bfa3bd45eeee99a07ad544f4f', class: "dropdown", part: "sd_dropdown" }, h("label", { key: 'be35a7cad3d6bc797268f970c403b95587dcc942', part: "sd_dropdown_label", class: { error: !!this.errorMessage } }, this.label && (h("p", null, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*"))), h("button", { key: 'b718647bb19fb6a16a916617ffe6e5dd46022bba', part: "sd_dropdown-button", class: { dropbtn: true, open: this.isOpen, error: !!this.errorMessage }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: '590d08c9b4f0d39b5019ea6b457746b842c45ab2', name: "select-icon", "aria-hidden": "true" }), h("span", { key: 'e163fe537b51357c076adbec269665efa10c548d', class: "selected-option", part: "sd_dropdown-button-selected-label" }, buttonText), this.withChevron && (h("span", { class: {
+        return (h("div", { key: 'ada528ac19d43f03f7717c3fe3102d3c87b95305', class: "dropdown", part: "sd_dropdown" }, h("label", { key: 'cd088bcbfd74f506407597edad97730bc5fce96e', part: "sd_dropdown_label", class: { error: !!this.errorMessage } }, this.label && (h("p", null, h("span", { class: "label" }, this.label), this.required && h("span", { class: "required" }, "*"))), h("button", { key: '9f0e7d114b4978f37818c1d424b5f8c786ba8e87', part: "sd_dropdown-button", class: { dropbtn: true, open: this.isOpen, error: !!this.errorMessage }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, h("slot", { key: 'e834d848d72159fa808ee8b3a48c2f66c0aad7fc', name: "select-icon", "aria-hidden": "true" }), h("span", { key: '2cbf36487ff22baf541534d86d3d210d61a8fced', class: "selected-option", part: "sd_dropdown-button-selected-label" }, buttonText), this.withChevron && (h("span", { class: {
                 open: this.isOpen,
                 closed: !this.isOpen,
                 chevron: true,

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

@@ -53,7 +53,7 @@ export class TextareaComponent {
         }
     }
     render() {
-        return (h("label", { key: '64fd0ab44f5bf5bfe2211448c46b1d8a0e1ce738', part: "tc__label", class: { error: !!this.error } }, h("p", { key: '757c7a471006fb281793ff131e579d6e55a1ac19' }, h("span", { key: '66661b8ca6bbcec8f61c7001eca363398b7496f5', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*"), this.tooltip && (h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, this.tooltip)))), h("textarea", { key: 'bb1de6d8152e1f723b66c85cab6085cc6843dce8', name: this.name, placeholder: this.placeholder, readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, onInput: e => this.handleInput(e), class: { error: !!this.error }, part: "tc__textarea" }), this.error && h("span", { class: "error help-text" }, this.error)));
+        return (h("label", { key: '503a9e472a4dea351f13d8e430a0ee9ecc20e3fb', part: "tc__label", class: { error: !!this.error } }, h("p", { key: '7ce9a57c8e2dc9d0c3a88edf93ba09a3b49cf149' }, h("span", { key: '8feedbb7300d0eb20192b17a0482f9c981bba120', class: "label" }, this.label), this.required && h("span", { class: "required" }, "*"), this.tooltip && (h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, this.tooltip)))), h("textarea", { key: '79dd6889c5da4797b26504731583db5887c21bcb', name: this.name, placeholder: this.placeholder, readOnly: this.readOnly, autoFocus: this.autoFocus, value: this.value, maxLength: this.maxLength, onInput: e => this.handleInput(e), class: { error: !!this.error }, part: "tc__textarea" }), this.error && h("span", { class: "error help-text" }, this.error)));
     }
     static get is() { return "textarea-component"; }
     static get encapsulation() { return "shadow"; }

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

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

package/dist/collection/components/design-system/toggle-switch/toggle-switch.js

@@ -18,7 +18,7 @@ export class ToggleSwitchComponent {
         });
     }
     render() {
-        return (h("label", { key: '1439804b4d417fc2db52466c78382aab36d7ee1e', class: "switch", part: "ts_label" }, h("input", { key: '39d1b1eb59d8f1e6f8d9b89cf5c8e2421fb467c4', type: "checkbox", part: "ts_input", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h("div", { key: 'be815cb3172e6370d56db571d3f30580308236a7', class: "slider round", part: "ts_slider" })));
+        return (h("label", { key: '7d74c0f5a452c3261e1cdd897a5092697a6782bb', class: "switch", part: "ts_label" }, h("input", { key: '80f5740b7e4a7af96b95648dd556b50c0537b505', type: "checkbox", part: "ts_input", name: this.name, checked: this.isChecked, onChange: () => this.toggleCheck() }), h("div", { key: '5176ee85b2fd72586ae6faf41e84c2ef60598f32', class: "slider round", part: "ts_slider" })));
     }
     static get is() { return "toggle-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/design-system/tooltip-component/toolitp-component.js

@@ -12,7 +12,7 @@ export class TooltipComponent {
         event.target.nextElementSibling.style.opacity = '0';
     }
     render() {
-        return (h("div", { key: 'f7ed680c86f53928c284ced8d5a6c30cd6a8a158', class: "tooltip-container", part: "tc__container" }, h("span", { key: '07d396ac91688a025497e4ff9ea5ea4c9263e787', class: "info-icon", tabindex: "0", onFocus: this.showTooltip.bind(this), onBlur: this.hideTooltip.bind(this) }, h("slot", { key: 'f8ed2155292bdd8f6e7adc72e0e89ed16a6fa823', name: "tooltip-icon" }, "i")), h("span", { key: '69f9669f987897f46ede1c67f6001824e7d27553', class: `tooltip-content ${this.position}`, part: "tc__content" }, h("slot", { key: 'f7e46722aca747f4ec8022df2080d08e5200e256', name: "tooltip-content" }, "This is a help text."))));
+        return (h("div", { key: 'dbfd3d300f3f3d3e139991f1cb84a12161b61a73', class: "tooltip-container", part: "tc__container" }, h("span", { key: '8a03f9657c641680d4fa166f3fc680d35aa24281', class: "info-icon", tabindex: "0", onFocus: this.showTooltip.bind(this), onBlur: this.hideTooltip.bind(this) }, h("slot", { key: '0f8478af1526e2775907e17555a36db85f482ff4', name: "tooltip-icon" }, "i")), h("span", { key: '171ae65f59875214c68e80749f5a9c108fb365fb', class: `tooltip-content ${this.position}`, part: "tc__content" }, h("slot", { key: '888f7faaf29825faa27df7935e47526d6fa6f126', name: "tooltip-content" }, "This is a help text."))));
     }
     static get is() { return "tooltip-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nylas-if-state/nylas-if-state.js

@@ -97,7 +97,7 @@ export class NylasIfState {
         }
     }
     render() {
-        return (h(Host, { key: '8c7133e9d01ecb6d14db3a6f30321ecbb7047dcb' }, h("div", { key: '81ba387d18d24761a8f89da678161aaf5755c3f2', class: this.classes }, this.show && h("slot", null))));
+        return (h(Host, { key: '4ab162229644e4d5d9d571af164b417c3e503e2c' }, h("div", { key: 'f5b4dd56ac193ba63be4a7040bdb61d7a2e1da04', class: this.classes }, this.show && h("slot", null))));
     }
     static get is() { return "nylas-if-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nylas-login/nylas-login.js

@@ -69,7 +69,7 @@ export class NylasLogin {
     }
     render() {
         const splitProviders = this.providers?.split(',') || [];
-        return (h(Host, { key: 'c19348287c1ee1aac3efb379ff4c6e1f7b79601b' }, this.loginMethod === 'redirect' && (h("div", { class: "redirect-container" }, !this.isAuthenticated && (h("button", { part: "button", onClick: this._handleLoginRedirect }, this.buttonText)))), this.loginMethod === 'emebded' && (h("main", { class: "login-container" }, h("section", { class: "login-box" }, h("header", null, h("img", { src: this.logoUrl, alt: `${this.companyName} logo`, width: '100%', style: {
+        return (h(Host, { key: '0e8ae3287facdc3e67109cd57cb80a761897de76' }, this.loginMethod === 'redirect' && (h("div", { class: "redirect-container" }, !this.isAuthenticated && (h("button", { part: "button", onClick: this._handleLoginRedirect }, this.buttonText)))), this.loginMethod === 'emebded' && (h("main", { class: "login-container" }, h("section", { class: "login-box" }, h("header", null, h("img", { src: this.logoUrl, alt: `${this.companyName} logo`, width: '100%', style: {
                 minWidth: this.logoWidth,
             } }), h("h1", null, "Welcome")), h("p", null, "Log in to your account to continue to ", this.companyName), h("div", { class: "login-methods" }, splitProviders.includes('google') && (h("button", { class: "login-google", onClick: this._onGoogleButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 256 262" }, h("path", { fill: "#4285F4", d: "M255.6 131.6c0-8.2-.8-16.2-2.2-23.9H130v45.3h70.3c-3 16.1-12.4 29.7-26.3 38.9v32.4h42.6c25-23 39.4-56.7 39.4-97.7z" }), h("path", { fill: "#34A853", d: "M130 262c35.3 0 64.9-11.7 86.5-31.7l-42.6-32.4c-11.7 7.9-26.7 12.6-43.9 12.6-33.7 0-62.3-22.7-72.5-53.4H14.5v33.3A130.3 130.3 0 00130 262z" }), h("path", { fill: "#FBBC05", d: "M57.5 158.1a72.7 72.7 0 010-54.2V70.6H14.5a130.4 130.4 0 000 120.8l43-33.3z" }), h("path", { fill: "#EA4335", d: "M130 51.6c19 0 36 6.5 49.4 19.2l37-36C195 13.1 165.2 0 130 0A130.3 130.3 0 0014.5 70.6l43 33.3c10.2-30.7 38.8-53.3 72.5-53.3z" })), "Continue with Google")), splitProviders.includes('microsoft') && (h("button", { class: "login-microsoft", onClick: this._onMicrosoftButtonClick }, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 448 512" }, h("path", { fill: "#F3F3F3", d: "M0 32v192h192V32H0zm256 0v192h192V32H256zm192 256v192h-192V288h192zM0 224v192h192V224H0z" })), "Continue with Microsoft"))), h("form", { class: "login-form", method: "POST", onSubmit: this._onFormSubmit }, h("label", { htmlFor: "email" }, "Email"), h("input", { type: "email", id: "email", name: "email", required: true, value: this.email }), h("button", { type: "submit" }, "Next")))))));
     }

package/dist/collection/components/nylas-provider/nylas-provider.js

@@ -92,7 +92,7 @@ export class NylasProvider {
         return this.baseProvider?.getStore('schedulerConfig');
     }
     render() {
-        return (h(Host, { key: 'e4c9c9acb330cbbc466495c3153d54318b28d943' }, h("slot", { key: '7a5b931d0ca83c251074eba2aeb4f243f131ae05' })));
+        return (h(Host, { key: 'a07ace4fe61c7f7ee20b723d1858f7ebac56ff95' }, h("slot", { key: '7c10f2b5cf18450c28617b3f35215b720f1d8bd2' })));
     }
     static get is() { return "nylas-provider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.css

@@ -1,5 +1,28 @@
 :host {
   display: block;
+  --nylas-primary: #2563eb;
+  --nylas-error: #cc4841;
+  --nylas-error-pressed: #992222;
+  --nylas-wraning: #f06c00;
+  --nylas-success: #16a392;
+  --nylas-info: #2b8fc2;
+  --nylas-base-0: #ffffff;
+  --nylas-base-25: #fcfcfd;
+  --nylas-base-50: #f8f9fc;
+  --nylas-base-100: #eaecf5;
+  --nylas-base-200: #d5d9eb;
+  --nylas-base-300: #b3b8d8;
+  --nylas-base-400: #717bbc;
+  --nylas-base-500: #4e5ba6;
+  --nylas-base-600: #3e4784;
+  --nylas-base-700: #263f72;
+  --nylas-base-800: #293056;
+  --nylas-base-900: #101323;
+  --nylas-base-950: #0e101b;
+  --nylas-border-radius: 0.25rem;
+  --nylas-border-radius-2x: 0.5rem;
+  --nylas-border-radius-3x: 0.75rem;
+  --nylas-font-family: "Inter", sans-serif;
 }
 
 .nylas-booked-event-card {

package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.js

@@ -54,10 +54,10 @@ export class NylasBookedEventCard {
         this.eventInfo = undefined;
         this.rescheduleBookingId = undefined;
         this.bookingInfo = undefined;
-        this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-        this.selectedTimeslot = undefined;
         this.configSettings = undefined;
         this.isLoading = undefined;
+        this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        this.selectedTimeslot = undefined;
         this.selectedLanguage = navigator.language;
         this.startTime = '';
         this.endTime = '';
@@ -81,13 +81,13 @@ export class NylasBookedEventCard {
     render() {
         const bookingType = this.configSettings?.booking_type;
         const isManualConfirmation = bookingType && bookingType !== 'booking';
-        return (h(Host, { key: '3f0b76f9b5f26d05aaa2d31821a2efa255212b10', part: "nbec" }, h("div", { key: '64d6fcb473af121495dc22b5681ff13cc99cba93', class: "nylas-booked-event-card" }, h("div", { key: 'c0503453b6341171778619588452cf6b9be6034c', class: "booked-event-timezone" }, h("globe-icon", { key: '200569b371723f89d79361fa119c7c0668190c6c' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '09197fcc9429484c32c6030e7d76d94efc0b5e4e', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '8356550843fa7f6498db7a338cc494e0ab9e39f5', class: "calendar-icon" }, h("calendar-check-icon", { key: 'd04242aeb233d24a70ecc93fed80816545ec5adf' })), h("div", { key: 'ee7af6bc4207da846efe0e6cf550aeb7edc14806', class: "booked-event-header" }, h("h2", { key: '6d054e9429c7d3695725f4fb969b85f7e9f50f44', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
+        return (h(Host, { key: '4c047c53d7532b60d6d28be607b3e926e07f2e50', part: "nbec" }, h("div", { key: '154180aa38c82fc2e28d8b9ad753804fdfb837d7', class: "nylas-booked-event-card" }, h("div", { key: 'a6d046deffb82706bd609a2ac7f33f462578326a', class: "booked-event-timezone" }, h("globe-icon", { key: '22418924800ed88cdf685441561728ecac4594cd' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: 'f4f4ffb1ff084cba9f1032c1d5e394a9b65286e2', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '7440e6baed4f509594acf69166566a6546d9b2ae', class: "calendar-icon" }, h("calendar-check-icon", { key: '6a82cfb9ac8d89bb8151e86dcbb9d49422513b89' })), h("div", { key: 'c913c479384ecd4e5df96dea05a1305a12df76c8', class: "booked-event-header" }, h("h2", { key: 'c818d579e73751d6e83bf50f9dc34a3523e2b0f1', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
             ? `${i18next.t('bookingRescheduled')}`
             : isManualConfirmation && !this.isLoading
                 ? `${i18next.t('bookingSent')}`
-                : `${i18next.t('bookingConfirmed')}`, "!"), h("div", { key: '1ea44bacdc8f8013bbed3395bd4a601453765a6a', class: "card-description", part: "nbec__description" }, isManualConfirmation ? i18next.t('bookingSentDescription') : h("span", null, i18next.t('bookingConfirmedDescription')))), h("div", { key: '4d4cdf50ad8f80826d2c3e5d48db5dc7472e0b73', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'a3727ff8b06fd002f2126c6f587228ae482754dc' }), h("h3", { key: '4d3e6798e236c2da3e7ccc8b0c2982107fa93e61' }, i18next.t('bookingDateAndTimeHeader')), h("p", { key: '2669d3f2d99b7227c3781cf65e058ce47a8c6fe4' }, this.selectedTimeslot?.start_time
+                : `${i18next.t('bookingConfirmed')}`, "!"), h("div", { key: 'bb6cef397ebe5aec3ed49f455ac00430594c4c6f', class: "card-description", part: "nbec__description" }, isManualConfirmation ? i18next.t('bookingSentDescription') : h("span", null, i18next.t('bookingConfirmedDescription')))), h("div", { key: 'd4732fc9421c4d54062bdac74e69a476322f168a', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'caadcce299c4506d709a65bfbc3d10fec64ef6d6' }), h("h3", { key: '8a2dc813f1be6bab13a53328c4e9dbb5ec7d41df' }, i18next.t('bookingDateAndTimeHeader')), h("p", { key: 'fedc61f46ba1b96e424b23aff08c382296e4a6d3' }, this.selectedTimeslot?.start_time
             ? capitalizeFirstLetter(new Date(this.selectedTimeslot?.start_time).toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage], { dateStyle: 'full' }))
-            : '-', ' ', h("br", { key: '8f4f99417f8684678ff30d1300c655a5ab909da8' }), this.startTime, " - ", this.endTime)), h("div", { key: 'c37bfad518c9e0530755253706d39e0fdacf413b', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
+            : '-', ' ', h("br", { key: '6efc18bfd398bca545c359b5876ff9a16792485f' }), this.startTime, " - ", this.endTime)), h("div", { key: 'c972d3fc4f1541ec6a1fde958176de0adccf3bcd', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
                 'footer': true,
                 'no-footer': (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||
                     this.configSettings?.booking_type === 'organizer-confirmation',
@@ -125,8 +125,11 @@ export class NylasBookedEventCard {
                 "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The booked event."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The booked event."
+                        }],
+                    "text": ""
                 }
             },
             "rescheduleBookingId": {
@@ -140,8 +143,11 @@ export class NylasBookedEventCard {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Booking flow type."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "Booking flow type."
+                        }],
+                    "text": ""
                 },
                 "attribute": "reschedule-booking-id",
                 "reflect": false
@@ -163,12 +169,61 @@ export class NylasBookedEventCard {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The booking info used to book / reschedule the event."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The booking info used to book / reschedule the event."
+                        }],
+                    "text": ""
                 },
                 "attribute": "booking-info",
                 "reflect": false
             },
+            "configSettings": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConfigSettings",
+                    "resolved": "any",
+                    "references": {
+                        "ConfigSettings": {
+                            "location": "import",
+                            "path": "../../..",
+                            "id": "src/index.ts::unknown"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The config settings for the scheduler."
+                        }],
+                    "text": ""
+                },
+                "attribute": "config-settings",
+                "reflect": false
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The loading state prop. Used to display loading state when fetching availability."
+                        }],
+                    "text": ""
+                },
+                "attribute": "is-loading",
+                "reflect": false
+            },
             "selectedTimezone": {
                 "type": "string",
                 "mutable": false,
@@ -208,46 +263,6 @@ export class NylasBookedEventCard {
                     "text": "The selected timeslot."
                 }
             },
-            "configSettings": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "ConfigSettings",
-                    "resolved": "any",
-                    "references": {
-                        "ConfigSettings": {
-                            "location": "import",
-                            "path": "../../..",
-                            "id": "src/index.ts::unknown"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The config settings for the scheduler."
-                },
-                "attribute": "config-settings",
-                "reflect": false
-            },
-            "isLoading": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The loading state prop. Used to display loading state when fetching availability."
-                },
-                "attribute": "is-loading",
-                "reflect": false
-            },
             "selectedLanguage": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-booked-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug, formatTimezone } from '@/utils/utils';\nimport { LANGUAGE_CODE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n/**\n * The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n *\n * @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-booked-event-card',\n  styleUrl: 'nylas-booked-event-card.scss',\n  shadow: true,\n})\nexport class NylasBookedEventCard {\n  /**\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected timeslot.\n   */\n  @Prop() readonly selectedTimeslot!: Timeslot;\n\n  /**\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n  @State() startTime: string = '';\n  @State() endTime: string = '';\n\n  /**\n   * Cancel booking button clicked event.\n   */\n  @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  /**\n   * This event is fired when an error occurs while cancelling the booking.\n   */\n  @Event() readonly cancelBookedEventValidationError!: EventEmitter<{\n    error: {\n      title: string;\n      message: string;\n    };\n  }>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-booked-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-booked-event-card] Component did load`);\n    if (!this.eventInfo) {\n      console.warn('[nylas-booked-event-card] \"eventInfo\" prop missing. Please provide the event info to display the event details in the booked event card component.');\n    }\n    if (!this.bookingInfo) {\n      console.warn('[nylas-booked-event-card] \"bookingInfo\" prop missing. Please provide the booking info to display the guest details in the booked event card component.');\n    }\n\n    this.startTime = formatTimezone(this.selectedTimeslot?.start_time as Date, this.selectedTimezone);\n    this.endTime = formatTimezone(this.selectedTimeslot?.end_time as Date, this.selectedTimezone);\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    const startTime = new Date(this.selectedTimeslot.start_time);\n    const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n    const dateTillCancellation = startTime.getTime() - minCancellationNotice * 60 * 1000;\n    if (dateTillCancellation < new Date().getTime()) {\n      this.cancelBookedEventValidationError.emit({\n        error: {\n          title: 'Cancellation Error',\n          message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,\n        },\n      });\n    } else {\n      this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n    }\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.rescheduleBookedEventError.emit(error);\n    };\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n  };\n\n  getPaticipantType = (type: string) => {\n    switch (type) {\n      case 'host':\n        return 'Host';\n      case 'you':\n        return 'You';\n      default:\n        return '';\n    }\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.configSettings', 'configSettings'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n      rescheduleBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booked-event-card', 'rescheduleBookedEventError', event.detail);\n      },\n      cancelBookedEventValidationError: async (event: CustomEvent<{ error: { title: string; message: string } }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const bookingType = this.configSettings?.booking_type;\n    const isManualConfirmation = bookingType && bookingType !== 'booking';\n\n    return (\n      <Host part=\"nbec\">\n        <div class=\"nylas-booked-event-card\">\n          <div class=\"booked-event-timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n          <div class=\"event-card-wrapper\" part=\"nbec__card\">\n            <div class=\"calendar-icon\">\n              <calendar-check-icon />\n            </div>\n            <div class=\"booked-event-header\">\n              <h2 slot=\"card-title\" part=\"nbec__title\">\n                {!!this.rescheduleBookingId && !this.isLoading\n                  ? `${i18next.t('bookingRescheduled')}`\n                  : isManualConfirmation && !this.isLoading\n                    ? `${i18next.t('bookingSent')}`\n                    : `${i18next.t('bookingConfirmed')}`}\n                !\n              </h2>\n              <div class=\"card-description\" part=\"nbec__description\">\n                {isManualConfirmation ? i18next.t('bookingSentDescription') : <span>{i18next.t('bookingConfirmedDescription')}</span>}\n              </div>\n            </div>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>{i18next.t('bookingDateAndTimeHeader')}</h3>\n              <p>\n                {this.selectedTimeslot?.start_time\n                  ? capitalizeFirstLetter(new Date(this.selectedTimeslot?.start_time).toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage], { dateStyle: 'full' }))\n                  : '-'}{' '}\n                <br />\n                {this.startTime} - {this.endTime}\n              </p>\n            </div>\n            <div class=\"booking-participants\">\n              {/* <people-icon></people-icon>\n              <h3>All participants</h3>\n              {this.eventInfo?.participants && (\n                <p>\n                  {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n                      </span>\n                    );\n                  })}\n                </p>\n              )} */}\n            </div>\n\n            {!isManualConfirmation && (\n              <div class=\"button-container\">\n                <div\n                  class={{\n                    'footer': true,\n                    'no-footer':\n                      (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||\n                      this.configSettings?.booking_type === 'organizer-confirmation',\n                    'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,\n                  }}\n                >\n                  {!this.configSettings?.scheduler?.hide_cancellation_options && (\n                    <button-component variant={'destructive'} onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                      {`${i18next.t('cancelBookingButton')}`}\n                    </button-component>\n                  )}\n                  {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n                    <button-component variant={'basic'} onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n                      {`${i18next.t('rescheduleBookingButton')}`}\n                    </button-component>\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-booked-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug, formatTimezone } from '@/utils/utils';\nimport { LANGUAGE_CODE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n/**\n * The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n *\n * @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-booked-event-card',\n  styleUrl: 'nylas-booked-event-card.scss',\n  shadow: true,\n})\nexport class NylasBookedEventCard {\n  /**\n   * @standalone\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * @standalone\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * @standalone\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected timeslot.\n   */\n  @Prop() readonly selectedTimeslot!: Timeslot;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n  @State() startTime: string = '';\n  @State() endTime: string = '';\n\n  /**\n   * Cancel booking button clicked event.\n   */\n  @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  /**\n   * This event is fired when an error occurs while cancelling the booking.\n   */\n  @Event() readonly cancelBookedEventValidationError!: EventEmitter<{\n    error: {\n      title: string;\n      message: string;\n    };\n  }>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-booked-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-booked-event-card] Component did load`);\n    if (!this.eventInfo) {\n      console.warn('[nylas-booked-event-card] \"eventInfo\" prop missing. Please provide the event info to display the event details in the booked event card component.');\n    }\n    if (!this.bookingInfo) {\n      console.warn('[nylas-booked-event-card] \"bookingInfo\" prop missing. Please provide the booking info to display the guest details in the booked event card component.');\n    }\n\n    this.startTime = formatTimezone(this.selectedTimeslot?.start_time as Date, this.selectedTimezone);\n    this.endTime = formatTimezone(this.selectedTimeslot?.end_time as Date, this.selectedTimezone);\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    const startTime = new Date(this.selectedTimeslot.start_time);\n    const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n    const dateTillCancellation = startTime.getTime() - minCancellationNotice * 60 * 1000;\n    if (dateTillCancellation < new Date().getTime()) {\n      this.cancelBookedEventValidationError.emit({\n        error: {\n          title: 'Cancellation Error',\n          message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,\n        },\n      });\n    } else {\n      this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n    }\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.rescheduleBookedEventError.emit(error);\n    };\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n  };\n\n  getPaticipantType = (type: string) => {\n    switch (type) {\n      case 'host':\n        return 'Host';\n      case 'you':\n        return 'You';\n      default:\n        return '';\n    }\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.configSettings', 'configSettings'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n      rescheduleBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booked-event-card', 'rescheduleBookedEventError', event.detail);\n      },\n      cancelBookedEventValidationError: async (event: CustomEvent<{ error: { title: string; message: string } }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const bookingType = this.configSettings?.booking_type;\n    const isManualConfirmation = bookingType && bookingType !== 'booking';\n\n    return (\n      <Host part=\"nbec\">\n        <div class=\"nylas-booked-event-card\">\n          <div class=\"booked-event-timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n          <div class=\"event-card-wrapper\" part=\"nbec__card\">\n            <div class=\"calendar-icon\">\n              <calendar-check-icon />\n            </div>\n            <div class=\"booked-event-header\">\n              <h2 slot=\"card-title\" part=\"nbec__title\">\n                {!!this.rescheduleBookingId && !this.isLoading\n                  ? `${i18next.t('bookingRescheduled')}`\n                  : isManualConfirmation && !this.isLoading\n                    ? `${i18next.t('bookingSent')}`\n                    : `${i18next.t('bookingConfirmed')}`}\n                !\n              </h2>\n              <div class=\"card-description\" part=\"nbec__description\">\n                {isManualConfirmation ? i18next.t('bookingSentDescription') : <span>{i18next.t('bookingConfirmedDescription')}</span>}\n              </div>\n            </div>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>{i18next.t('bookingDateAndTimeHeader')}</h3>\n              <p>\n                {this.selectedTimeslot?.start_time\n                  ? capitalizeFirstLetter(new Date(this.selectedTimeslot?.start_time).toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage], { dateStyle: 'full' }))\n                  : '-'}{' '}\n                <br />\n                {this.startTime} - {this.endTime}\n              </p>\n            </div>\n            <div class=\"booking-participants\">\n              {/* <people-icon></people-icon>\n              <h3>All participants</h3>\n              {this.eventInfo?.participants && (\n                <p>\n                  {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n                      </span>\n                    );\n                  })}\n                </p>\n              )} */}\n            </div>\n\n            {!isManualConfirmation && (\n              <div class=\"button-container\">\n                <div\n                  class={{\n                    'footer': true,\n                    'no-footer':\n                      (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||\n                      this.configSettings?.booking_type === 'organizer-confirmation',\n                    'no-template-cols': this.configSettings?.scheduler?.hide_cancellation_options || this.configSettings?.scheduler?.hide_rescheduling_options,\n                  }}\n                >\n                  {!this.configSettings?.scheduler?.hide_cancellation_options && (\n                    <button-component variant={'destructive'} onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                      {`${i18next.t('cancelBookingButton')}`}\n                    </button-component>\n                  )}\n                  {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n                    <button-component variant={'basic'} onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n                      {`${i18next.t('rescheduleBookingButton')}`}\n                    </button-component>\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,6 +1,29 @@
 :host {
   display: block;
   height: 100%;
+  --nylas-primary: #2563eb;
+  --nylas-error: #cc4841;
+  --nylas-error-pressed: #992222;
+  --nylas-wraning: #f06c00;
+  --nylas-success: #16a392;
+  --nylas-info: #2b8fc2;
+  --nylas-base-0: #ffffff;
+  --nylas-base-25: #fcfcfd;
+  --nylas-base-50: #f8f9fc;
+  --nylas-base-100: #eaecf5;
+  --nylas-base-200: #d5d9eb;
+  --nylas-base-300: #b3b8d8;
+  --nylas-base-400: #717bbc;
+  --nylas-base-500: #4e5ba6;
+  --nylas-base-600: #3e4784;
+  --nylas-base-700: #263f72;
+  --nylas-base-800: #293056;
+  --nylas-base-900: #101323;
+  --nylas-base-950: #0e101b;
+  --nylas-border-radius: 0.25rem;
+  --nylas-border-radius-2x: 0.5rem;
+  --nylas-border-radius-3x: 0.75rem;
+  --nylas-font-family: "Inter", sans-serif;
 }
 
 .nylas-booking-form {