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

package/dist/collection/components/scheduler-editor/nylas-page-name/nylas-page-name.js

@@ -18,10 +18,10 @@ import { Host, h } from "@stencil/core";
 export class NylasPageName {
     constructor() {
         this.selectedConfiguration = undefined;
+        this.name = 'page-name';
         this.pageName = undefined;
         this.showToggle = true;
         this.isOpen = true;
-        this.name = 'page-name';
         this.currentPageName = undefined;
     }
     connectedCallback() {
@@ -76,7 +76,7 @@ export class NylasPageName {
     }
     render() {
         const isComponentReady = typeof this.currentPageName !== 'undefined';
-        return (h(Host, { key: '9059ab828471167a956da7e61487dc9cba97eac5' }, h("div", { key: '777d34ebe91615d24d9502144ca7c3325483ee50', class: "nylas-page-name", part: "nces" }, h("div", { key: '365ddb6e8ef7e878ab16b595e8b48363764836be', class: "header", part: "nces__header" }, h("div", { key: '5955b442d8019c5f847450640fc8442e174ae3b9' }, h("h3", { key: '79f9e1b7a9a164528d11c6c9b1766a49c29376d7' }, "Page name"), h("p", { key: 'dd653de5a4480ab3a76054f75fbc847fbd865c8a' }, "Set the Scheduling Page name.", h("tooltip-component", { key: 'd0e59a0d335237f68f679ffd9647e17aab9f3732' }, h("info-icon", { key: '49e5cebbd219cccc518a9868070bd7068e408cee', slot: "tooltip-icon" }), h("span", { key: '131bb249cc09b6e8db3637101b84e0afcbeccfab', slot: "tooltip-content" }, "By default, Scheduling Pages use your user name as the Page name. The Page name is displayed in the top-left corner of the calendar view.")))), this.showToggle && (h("div", { class: "drawer-toggle", part: "nces__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleDrawer() }, h("chevron-icon", { width: "24", height: "24" }))))), this.isOpen && (h("div", { class: "nylas-page-name__body", part: "nces__body" }, h("div", { class: "nylas-page-name__section" }, h("div", { class: "nylas-page-name__row" }, h("div", { class: "input-container" }, h("div", { class: "nylas-page-name__input-wrapper" }, isComponentReady && (h("input-component", { name: "page-name", id: "page-name", type: "text", required: false, exportparts: "ic_input: npn__input-textfield", defaultValue: this.currentPageName ?? '' })))))))))));
+        return (h(Host, { key: 'f0b405f57e2cb8c65b59c07bdca8ec3885a98a7d' }, h("div", { key: '4873ef6137393c0bd31b90fca33eee42e2feb449', class: "nylas-page-name", part: "nces" }, h("div", { key: 'bf9894bee632ed6debc5f401b1e3bb98d4561258', class: "header", part: "nces__header" }, h("div", { key: '631f080c4c2aba2597d6638ea4dfb20eedb0a1d6' }, h("h3", { key: '657b49c737bb46d96698cac0c39ba20f08dac34a' }, "Page name"), h("p", { key: '7a81b920c53b427529828476a2efed5c80c5ce56' }, "Set the Scheduling Page name.", h("tooltip-component", { key: 'a16a8a9e03310794cf4de5b0ab863d730723bf16' }, h("info-icon", { key: 'ffbfa4cfd591c4994a7ff51251ed92062e9cf42e', slot: "tooltip-icon" }), h("span", { key: '41a0ed919be3aa80fc5f1d03138157f46aaa8494', slot: "tooltip-content" }, "By default, Scheduling Pages use your user name as the Page name. The Page name is displayed in the top-left corner of the calendar view.")))), this.showToggle && (h("div", { class: "drawer-toggle", part: "nces__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleDrawer() }, h("chevron-icon", { width: "24", height: "24" }))))), this.isOpen && (h("div", { class: "nylas-page-name__body", part: "nces__body" }, h("div", { class: "nylas-page-name__section" }, h("div", { class: "nylas-page-name__row" }, h("div", { class: "input-container" }, h("div", { class: "nylas-page-name__input-wrapper" }, isComponentReady && (h("input-component", { name: "page-name", id: "page-name", type: "text", required: false, exportparts: "ic_input: npn__input-textfield", defaultValue: this.currentPageName ?? '' })))))))))));
     }
     static get is() { return "nylas-page-name"; }
     static get encapsulation() { return "shadow"; }
@@ -110,10 +110,34 @@ export class NylasPageName {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The selected config"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The selected config"
+                        }],
+                    "text": ""
                 }
             },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The name of the component"
+                        }],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'page-name'"
+            },
             "pageName": {
                 "type": "string",
                 "mutable": false,
@@ -125,8 +149,11 @@ export class NylasPageName {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The default page name"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The default page name"
+                        }],
+                    "text": ""
                 },
                 "attribute": "page-name",
                 "reflect": false
@@ -142,8 +169,11 @@ export class NylasPageName {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Show toggle button that allows users to expand or collapse the card"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "Show toggle button that allows users to expand or collapse the card"
+                        }],
+                    "text": ""
                 },
                 "attribute": "show-toggle",
                 "reflect": false,
@@ -160,30 +190,15 @@ export class NylasPageName {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Is the page name container card expanded"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "Is the page name container card expanded"
+                        }],
+                    "text": ""
                 },
                 "attribute": "is-open",
                 "reflect": false,
                 "defaultValue": "true"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the component"
-                },
-                "attribute": "name",
-                "reflect": false,
-                "defaultValue": "'page-name'"
             }
         };
     }

package/dist/collection/components/scheduler-editor/nylas-page-name/nylas-page-name.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-page-name.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-page-name/nylas-page-name.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-page-name` component is a UI component that allows users to add a custom page name which will appear in the top left corner of the date picker.\n *\n * @part npn - The nylas-page-name container\n * @part npn__body - The body of the event communication section\n * @part npn__header - The header of the event communication section\n * @part npn__drawer-toggle--container - The card's drawer toggle container\n * @part npn__input-textfield - The page name input textfield\n */\n@Component({\n  tag: 'nylas-page-name',\n  styleUrl: 'nylas-page-name.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasPageName {\n  @Element() host!: HTMLNylasPageNameElement;\n\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * The default page name\n   */\n  @Prop() pageName?: string;\n  /**\n   * Show toggle button that allows users to expand or collapse the card\n   */\n  @Prop() showToggle: boolean = true;\n  /**\n   * Is the page name container card expanded\n   */\n  @Prop() isOpen: boolean = true;\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'page-name';\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The current page name state\n   */\n  @State() currentPageName!: string;\n\n  /**\n   * This event is fired when the page name value changes\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-page-name', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-page-name', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-page-name', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-page-name', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.currentPageName = this.pageName ?? '';\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-page-name', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-page-name', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-page-name', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-page-name', '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-page-name', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n    this.currentPageName = newValue?.name ?? this.pageName ?? '';\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n\n    if (name === 'page-name') {\n      this.currentPageName = value;\n      this.internals.setFormValue(JSON.stringify(value), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(value), name: this.name });\n    }\n  }\n\n  toggleDrawer() {\n    this.isOpen = !this.isOpen;\n  }\n\n  @RegisterComponent<NylasPageName, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-page-name',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\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    fireRegisterEvent: true,\n  })\n  render() {\n    const isComponentReady = typeof this.currentPageName !== 'undefined';\n    return (\n      <Host>\n        <div class=\"nylas-page-name\" part=\"nces\">\n          <div class=\"header\" part=\"nces__header\">\n            <div>\n              <h3>Page name</h3>\n              <p>\n                Set the Scheduling Page name.\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">\n                    By default, Scheduling Pages use your user name as the Page name. The Page name is displayed in the top-left corner of the calendar view.\n                  </span>\n                </tooltip-component>\n              </p>\n            </div>\n\n            {this.showToggle && (\n              <div class=\"drawer-toggle\" part=\"nces__drawer-toggle--container\">\n                <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleDrawer()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            )}\n          </div>\n\n          {this.isOpen && (\n            <div class=\"nylas-page-name__body\" part=\"nces__body\">\n              <div class=\"nylas-page-name__section\">\n                <div class=\"nylas-page-name__row\">\n                  <div class=\"input-container\">\n                    <div class=\"nylas-page-name__input-wrapper\">\n                      {isComponentReady && (\n                        <input-component\n                          name=\"page-name\"\n                          id=\"page-name\"\n                          type=\"text\"\n                          required={false}\n                          exportparts=\"ic_input: npn__input-textfield\"\n                          defaultValue={this.currentPageName ?? ''}\n                        />\n                      )}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-page-name.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-page-name/nylas-page-name.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-page-name` component is a UI component that allows users to add a custom page name which will appear in the top left corner of the date picker.\n *\n * @part npn - The nylas-page-name container\n * @part npn__body - The body of the event communication section\n * @part npn__header - The header of the event communication section\n * @part npn__drawer-toggle--container - The card's drawer toggle container\n * @part npn__input-textfield - The page name input textfield\n */\n@Component({\n  tag: 'nylas-page-name',\n  styleUrl: 'nylas-page-name.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasPageName {\n  @Element() host!: HTMLNylasPageNameElement;\n\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The name of the component\n   */\n  @Prop() name: string = 'page-name';\n  /**\n   * @standalone\n   * The default page name\n   */\n  @Prop() pageName?: string;\n  /**\n   * @standalone\n   * Show toggle button that allows users to expand or collapse the card\n   */\n  @Prop() showToggle: boolean = true;\n  /**\n   * @standalone\n   * Is the page name container card expanded\n   */\n  @Prop() isOpen: boolean = true;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The current page name state\n   */\n  @State() currentPageName!: string;\n\n  /**\n   * This event is fired when the page name value changes\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-page-name', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-page-name', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-page-name', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-page-name', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.currentPageName = this.pageName ?? '';\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-page-name', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-page-name', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-page-name', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-page-name', '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-page-name', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue);\n    this.currentPageName = newValue?.name ?? this.pageName ?? '';\n  }\n\n  @Listen('nylasFormInputChanged')\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n\n    if (name === 'page-name') {\n      this.currentPageName = value;\n      this.internals.setFormValue(JSON.stringify(value), this.name);\n      this.valueChanged.emit({ value: JSON.stringify(value), name: this.name });\n    }\n  }\n\n  toggleDrawer() {\n    this.isOpen = !this.isOpen;\n  }\n\n  @RegisterComponent<NylasPageName, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-page-name',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\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    fireRegisterEvent: true,\n  })\n  render() {\n    const isComponentReady = typeof this.currentPageName !== 'undefined';\n    return (\n      <Host>\n        <div class=\"nylas-page-name\" part=\"nces\">\n          <div class=\"header\" part=\"nces__header\">\n            <div>\n              <h3>Page name</h3>\n              <p>\n                Set the Scheduling Page name.\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">\n                    By default, Scheduling Pages use your user name as the Page name. The Page name is displayed in the top-left corner of the calendar view.\n                  </span>\n                </tooltip-component>\n              </p>\n            </div>\n\n            {this.showToggle && (\n              <div class=\"drawer-toggle\" part=\"nces__drawer-toggle--container\">\n                <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleDrawer()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            )}\n          </div>\n\n          {this.isOpen && (\n            <div class=\"nylas-page-name__body\" part=\"nces__body\">\n              <div class=\"nylas-page-name__section\">\n                <div class=\"nylas-page-name__row\">\n                  <div class=\"input-container\">\n                    <div class=\"nylas-page-name__input-wrapper\">\n                      {isComponentReady && (\n                        <input-component\n                          name=\"page-name\"\n                          id=\"page-name\"\n                          type=\"text\"\n                          required={false}\n                          exportparts=\"ic_input: npn__input-textfield\"\n                          defaultValue={this.currentPageName ?? ''}\n                        />\n                      )}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-page-styling/nylas-page-styling.js

@@ -18,9 +18,9 @@ import { Host, h } from "@stencil/core";
 export class NylasPageStyling {
     constructor() {
         this.selectedConfiguration = undefined;
+        this.name = 'page-styling';
         this.appearance = undefined;
         this.isOpen = true;
-        this.name = 'page-styling';
         this.currentAppearance = undefined;
         this.customInputsSlot = null;
     }
@@ -239,7 +239,7 @@ export class NylasPageStyling {
         this.isOpen = !this.isOpen;
     }
     render() {
-        return (h(Host, { key: '7d0a6fffdec383f566caec6c2b6e780190dc1a7d' }, h("div", { key: '6f232a3f20e564490ffc96ef9ce2a8d2b348ac19', part: "nps", class: { 'nylas-page-styling': true, 'no-border': !this.customInputsSlot } }, this.customInputsSlot ? (h("div", { class: "header", part: "nps__header" }, h("div", null, h("h3", null, "Page styling and customization")), h("div", { class: "drawer-toggle", part: "nps__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" }))))) : null, h("div", { key: '1b918548eaddb6dc65a24fe0a8918f04a43edaed', id: "nylas-page-styling__body", class: "nylas-page-styling__body", part: "nps__body" }, h("div", { key: 'cafc8e8f98baa04aca2963dcf130240423df082a', class: { 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot } }, h("div", { key: 'cba6152c8a382828963870204937ce9b18a419d8', class: "nylas-page-styling__row" }, h("div", { key: '98eab9461e7ec97c8b48bfa13c112f50f3548b67', class: { subsection: true, hide: !this.isOpen } })))))));
+        return (h(Host, { key: 'be08b4dc45a6950b8bf9190fbb5bd450a63f24cb' }, h("div", { key: '37c4ef967ab1ccecc7752be8e13847c1ff67f2ad', part: "nps", class: { 'nylas-page-styling': true, 'no-border': !this.customInputsSlot } }, this.customInputsSlot ? (h("div", { class: "header", part: "nps__header" }, h("div", null, h("h3", null, "Page styling and customization")), h("div", { class: "drawer-toggle", part: "nps__drawer-toggle--container" }, h("span", { class: `chevron ${this.isOpen ? 'open' : 'closed'} `, onClick: () => this.toggleConfirmationEmail() }, h("chevron-icon", { width: "24", height: "24" }))))) : null, h("div", { key: '304a8a53cff0c854ce244435ff51abb2dc51b105', id: "nylas-page-styling__body", class: "nylas-page-styling__body", part: "nps__body" }, h("div", { key: '9de4abc9b92aab8d976b0fd2a568a5c60d7f0f6e', class: { 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot } }, h("div", { key: '490d7515e07679200e6a42138867088c7b6c4634', class: "nylas-page-styling__row" }, h("div", { key: 'dcf7dbe82d82b103f14e63dc519aab3245d869e8', class: { subsection: true, hide: !this.isOpen } })))))));
     }
     static get is() { return "nylas-page-styling"; }
     static get encapsulation() { return "shadow"; }
@@ -273,10 +273,34 @@ export class NylasPageStyling {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The selected configuration."
+                    "tags": [{
+                            "name": "internal",
+                            "text": "The selected configuration."
+                        }],
+                    "text": ""
                 }
             },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "The name of the component"
+                        }],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'page-styling'"
+            },
             "appearance": {
                 "type": "unknown",
                 "mutable": false,
@@ -294,8 +318,11 @@ export class NylasPageStyling {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The appearance data to display"
+                    "tags": [{
+                            "name": "internal",
+                            "text": "The appearance data to display"
+                        }],
+                    "text": ""
                 }
             },
             "isOpen": {
@@ -309,30 +336,15 @@ export class NylasPageStyling {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Is the page styling card open"
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Is the page styling card open"
+                        }],
+                    "text": ""
                 },
                 "attribute": "is-open",
                 "reflect": false,
                 "defaultValue": "true"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the component"
-                },
-                "attribute": "name",
-                "reflect": false,
-                "defaultValue": "'page-styling'"
             }
         };
     }

package/dist/collection/components/scheduler-editor/nylas-page-styling/nylas-page-styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-page-styling.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-page-styling/nylas-page-styling.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Appearance, Configuration } from '@nylas/core';\n\n/**\n * The `nylas-page-styling` component is a UI component that allows users to customize the styling of the scheduling page.\n * To use this component, pass a slot `custom-page-style-inputs` to the `nylas-scheduler-editor` component with the input\n * fields you want to display. The component will automatically update the appearance object when the input fields are changed.\n * Ensure that the input fields have the `name` attribute set to the key in the appearance object.\n *\n * If you want to style the Nylas hosted scheduler page, you can use this component to customize the appearance of the page.\n * The fields that can be customized in the Nylas hosted scheduler page are:\n * - Primary color: (name: color)\n * - Company logo: (name: company_logo_url)\n * - Submit button label: (name: submit_button_label)\n * - Thank you message: (name: thank_you_message)\n *\n * @slot custom-page-style-inputs - This slot is used to pass a custom page style form to the Nylas Scheduler Editor component.\n * @part nps - The nylas-page-styling container\n * @part nps__header - The header of the page styling section\n * @part nps__drawer-toggle--container - The page styling drawer toggle container\n * @part nps__body - The body of the page styling section\n * @part nps__title-input-textfield - The page styling page title input textfield\n * @part nps__company-name-input-textfield - The page styling company name input textfield\n * @part nps__input-image-url - The page styling company logo input textfield\n * @part nps__color-picker - The page styling color picker\n * @part nps__color-picker-button - The page styling color picker button\n * @part nps__color-picker-button-label - The page styling color input field label *\n * @part nps__color-picker-button-selected-label - The page styling color picker label denoting which color is selected\n * @part nps__submit-button-label-input-textfield - The page styling submut button label input textfield\n * @part nps__message-textarea - The page styling thank you message textarea\n */\n@Component({\n  tag: 'nylas-page-styling',\n  styleUrl: 'nylas-page-styling.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasPageStyling {\n  @Element() host!: HTMLNylasPageStylingElement;\n  /**\n   * The selected configuration.\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The appearance data to display\n   */\n  @Prop() appearance?: Appearance;\n  /**\n   * Is the page styling card open\n   */\n  @Prop() isOpen: boolean = true;\n  /**\n   * The name of the component\n   */\n  @Prop() name: string = 'page-styling';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The confirmation email template state.\n   */\n  @State() currentAppearance!: Appearance;\n  /**\n   * The confirmation email template state.\n   */\n  @State() customInputsSlot: Element | null = null;\n\n  /**\n   * This event is fired when the email reminders change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  /**\n   * This event is fired when the form is submitted in the parent component.\n   */\n  @Event() bookingFormSubmitted!: EventEmitter<void>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-page-styling', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-page-styling', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-page-styling', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-page-styling', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-page-styling', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-page-styling', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-page-styling', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-page-styling', '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-page-styling', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  customInputsSlotChangedHandler(newValue: Element | null) {\n    debug('nylas-page-styling', 'customInputsSlotChangedHandler', newValue);\n\n    const appearance = this.currentAppearance;\n\n    function updateInputDefaultValues(element: HTMLElement) {\n      // Process elements with a 'name' attribute\n      if (element.hasAttribute && element.hasAttribute('name')) {\n        const key = element.getAttribute('name');\n        if (appearance && key && key in appearance && appearance[key] !== undefined) {\n          // Update attributes based on component type\n          const componentType = element.getAttribute('component-type');\n\n          element.setAttribute('data-page-styling', 'true');\n\n          if (componentType === 'checkbox') {\n            element.setAttribute('checked', appearance[key]);\n          } else if (componentType === 'radio-group') {\n            element.setAttribute('default-selected-value', appearance[key]);\n          } else if (componentType === 'color-picker') {\n            element.setAttribute('default-selected-color', appearance[key]);\n          } else if (componentType === 'select-dropdown') {\n            const options = element.getAttribute('options');\n            const selectedOption = options ? JSON.parse(options).find((option: { value: string }) => option.value === appearance[key]) : null;\n            element.setAttribute('default-selected-option', JSON.stringify(selectedOption));\n          } else if (componentType === 'image-url') {\n            element.setAttribute('image-url', appearance[key]);\n          } else {\n            // Default case: set the default value\n            element.setAttribute('default-value', appearance[key]);\n          }\n        }\n      }\n\n      // Recursively process child elements (skip text nodes)\n      element.childNodes.forEach(child => {\n        if (child.nodeType === Node.ELEMENT_NODE) {\n          updateInputDefaultValues(child as HTMLElement); // Cast child to HTMLElement\n        }\n      });\n    }\n\n    // Start the recursive process with the cloned element (newValue)\n    if (newValue) {\n      updateInputDefaultValues(newValue as HTMLElement);\n    }\n  }\n\n  cloneAndCopyProps(element: HTMLElement): HTMLElement {\n    // Clone the current element\n    const clonedElement = element.cloneNode(false) as HTMLElement; // Do a shallow clone first\n    const componentType = element.getAttribute('component-type');\n    const key = element.getAttribute('name');\n\n    // Copy properties like 'options' and 'value' for custom elements\n    if ((element as any).options) {\n      const options = (element as any).getAttribute('options');\n      console.log('page-styling options', element, options);\n      if (typeof options === 'string') {\n        try {\n          const parsedOptions = JSON.parse(options);\n          (clonedElement as any).options = parsedOptions; // Parse the 'options' string\n          if (componentType === 'select-dropdown' && key && key in this.currentAppearance) {\n            const selectedOption = parsedOptions.find((option: { value: string }) => option.value === this.currentAppearance[key]);\n            (clonedElement as any).setAttribute('default-selected-option', JSON.stringify(selectedOption));\n          }\n        } catch (e) {\n          console.error('Error parsing options', e);\n        }\n      } else {\n        (clonedElement as any).options = (element as any).options; // Copy 'options' property\n      }\n    }\n\n    if ((element as any).value) {\n      (clonedElement as any).value = (element as any).value; // Copy 'value' property\n    }\n\n    // Recursively process child elements\n    element.childNodes.forEach(child => {\n      if (child.nodeType === Node.ELEMENT_NODE) {\n        // If the child is an element, recursively clone and process it\n        const clonedChild = this.cloneAndCopyProps(child as HTMLElement);\n        clonedElement.appendChild(clonedChild); // Append the cloned child to the parent clone\n      } else if (child.nodeType === Node.TEXT_NODE) {\n        // For text nodes, just clone and append the text content\n        clonedElement.appendChild(child.cloneNode(true));\n      }\n    });\n\n    return clonedElement; // Return the cloned element with its children\n  }\n\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-page-styling', 'selectedConfigurationChangedHandler', newValue);\n    this.currentAppearance = newValue?.appearance || {};\n    // Get the slot element\n    const editor = document.querySelector('nylas-scheduler-editor');\n    const slotElement = editor?.shadowRoot?.querySelector('slot[name=\"custom-page-style-inputs\"]') as HTMLSlotElement;\n    if (!slotElement) {\n      return;\n    }\n\n    const divElement = document.createElement('div');\n\n    // Get the slotted content (the nodes passed into the slot)\n    const slottedElements = slotElement?.assignedElements({ flatten: true });\n    // Clone each of the slotted nodes and append them to the cloned slot\n    slottedElements?.forEach(element => {\n      const clonedElement = this.cloneAndCopyProps(element as HTMLElement); // Clone recursively and copy properties\n\n      // Clone the slotted element (deep clone)\n      this.customInputsSlotChangedHandler(clonedElement);\n      // Append the cloned element to the document fragment\n      divElement.appendChild(clonedElement);\n    });\n\n    // Replace the original content with the new cloned and updated content\n    const bodyElement = this.host.shadowRoot?.querySelector('.nylas-page-styling');\n    const slotContainer = bodyElement?.querySelector('.nylas-page-styling__body .subsection');\n\n    if (slotContainer) {\n      // Remove existing children (if necessary) and append the new content\n      slotContainer.innerHTML = ''; // Clear existing content\n      divElement.childNodes.forEach(child => {\n        slotContainer.appendChild(child); // Append each child of divElement\n      });\n      this.customInputsSlot = divElement;\n    }\n  }\n\n  checkIfElementIsInSlot(name: string): boolean {\n    const findElement = document?.querySelector(`[slot=\"custom-page-style-inputs\"] [name=\"${name}\"]`);\n    return findElement ? true : false;\n  }\n\n  @Listen('nylasFormInputChanged', { target: 'document' })\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string; type?: string }>) {\n    const { name, value } = event.detail;\n    const type = event.detail?.type;\n\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    switch (name) {\n      case 'submit_button_label':\n        this.currentAppearance = { ...this.currentAppearance, submit_button_label: value };\n        break;\n      case 'thank_you_message':\n        if (type === 'multi_line_text') {\n          const value = sanitize(event.detail.value);\n          this.currentAppearance = { ...this.currentAppearance, thank_you_message: value };\n        }\n        break;\n      default:\n        this.currentAppearance = { ...this.currentAppearance, [name]: value };\n        break;\n    }\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('nylasFormDropdownChanged', { target: 'document' })\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-page-styling', 'nylasFormDropdownChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    if (name === 'color') {\n      this.currentAppearance = { ...this.currentAppearance, color: value };\n    } else {\n      this.currentAppearance = { ...this.currentAppearance, [name]: value };\n    }\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('valueChanged', { target: 'document' })\n  valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-page-styling', 'valueChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    if (name === 'company_logo_url') {\n      this.currentAppearance = { ...this.currentAppearance, company_logo_url: value };\n    } else {\n      this.currentAppearance = { ...this.currentAppearance, [name]: value };\n    }\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('nylasFormCheckboxToggled', { target: 'document' })\n  checkboxToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n    const { checked, name } = event.detail;\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    this.currentAppearance = { ...this.currentAppearance, [name]: checked };\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('nylasFormRadioChanged', { target: 'document' })\n  radioChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; type: string }>) {\n    const { value, name } = event.detail;\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    this.currentAppearance = { ...this.currentAppearance, [name]: value };\n    this.updateConfirmationFormValue();\n  }\n\n  updateConfirmationFormValue() {\n    debug('nylas-page-styling', 'updateConfirmationFormValue');\n    this.internals.setFormValue(JSON.stringify(this.currentAppearance), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.currentAppearance), name: this.name });\n  }\n\n  toggleConfirmationEmail() {\n    this.isOpen = !this.isOpen;\n  }\n\n  @RegisterComponent<NylasPageStyling, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-page-styling',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\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    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div part=\"nps\" class={{ 'nylas-page-styling': true, 'no-border': !this.customInputsSlot }}>\n          {this.customInputsSlot ? (\n            <div class=\"header\" part=\"nps__header\">\n              <div>\n                <h3>Page styling and customization</h3>\n              </div>\n              <div class=\"drawer-toggle\" part=\"nps__drawer-toggle--container\">\n                <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleConfirmationEmail()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            </div>\n          ) : null}\n\n          <div id=\"nylas-page-styling__body\" class=\"nylas-page-styling__body\" part=\"nps__body\">\n            <div class={{ 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot }}>\n              <div class=\"nylas-page-styling__row\">\n                <div class={{ subsection: true, hide: !this.isOpen }}></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-page-styling.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-page-styling/nylas-page-styling.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug, sanitize } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Appearance, Configuration } from '@nylas/core';\n\n/**\n * The `nylas-page-styling` component is a UI component that allows users to customize the styling of the scheduling page.\n * To use this component, pass a slot `custom-page-style-inputs` to the `nylas-scheduler-editor` component with the input\n * fields you want to display. The component will automatically update the appearance object when the input fields are changed.\n * Ensure that the input fields have the `name` attribute set to the key in the appearance object.\n *\n * If you want to style the Nylas hosted scheduler page, you can use this component to customize the appearance of the page.\n * The fields that can be customized in the Nylas hosted scheduler page are:\n * - Primary color: (name: color)\n * - Company logo: (name: company_logo_url)\n * - Submit button label: (name: submit_button_label)\n * - Thank you message: (name: thank_you_message)\n *\n * This component cannot be used as an independent component. It must be used within the `nylas-scheduler-editor` component.\n *\n * @slot custom-page-style-inputs - This slot is used to pass a custom page style form to the Nylas Scheduler Editor component.\n * @part nps - The nylas-page-styling container\n * @part nps__header - The header of the page styling section\n * @part nps__drawer-toggle--container - The page styling drawer toggle container\n * @part nps__body - The body of the page styling section\n * @part nps__title-input-textfield - The page styling page title input textfield\n * @part nps__company-name-input-textfield - The page styling company name input textfield\n * @part nps__input-image-url - The page styling company logo input textfield\n * @part nps__color-picker - The page styling color picker\n * @part nps__color-picker-button - The page styling color picker button\n * @part nps__color-picker-button-label - The page styling color input field label *\n * @part nps__color-picker-button-selected-label - The page styling color picker label denoting which color is selected\n * @part nps__submit-button-label-input-textfield - The page styling submut button label input textfield\n * @part nps__message-textarea - The page styling thank you message textarea\n */\n@Component({\n  tag: 'nylas-page-styling',\n  styleUrl: 'nylas-page-styling.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasPageStyling {\n  @Element() host!: HTMLNylasPageStylingElement;\n  /**\n   * @internal\n   * The selected configuration.\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @internal\n   * The name of the component\n   */\n  @Prop() name: string = 'page-styling';\n  /**\n   * @internal\n   * The appearance data to display\n   */\n  @Prop() appearance?: Appearance;\n  /**\n   * @internal\n   * Is the page styling card open\n   */\n  @Prop() isOpen: boolean = true;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The confirmation email template state.\n   */\n  @State() currentAppearance!: Appearance;\n  /**\n   * The confirmation email template state.\n   */\n  @State() customInputsSlot: Element | null = null;\n\n  /**\n   * This event is fired when the email reminders change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  /**\n   * This event is fired when the form is submitted in the parent component.\n   */\n  @Event() bookingFormSubmitted!: EventEmitter<void>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-page-styling', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-page-styling', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-page-styling', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-page-styling', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-page-styling', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-page-styling', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-page-styling', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-page-styling', '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-page-styling', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  customInputsSlotChangedHandler(newValue: Element | null) {\n    debug('nylas-page-styling', 'customInputsSlotChangedHandler', newValue);\n\n    const appearance = this.currentAppearance;\n\n    function updateInputDefaultValues(element: HTMLElement) {\n      // Process elements with a 'name' attribute\n      if (element.hasAttribute && element.hasAttribute('name')) {\n        const key = element.getAttribute('name');\n        if (appearance && key && key in appearance && appearance[key] !== undefined) {\n          // Update attributes based on component type\n          const componentType = element.getAttribute('component-type');\n\n          element.setAttribute('data-page-styling', 'true');\n\n          if (componentType === 'checkbox') {\n            element.setAttribute('checked', appearance[key]);\n          } else if (componentType === 'radio-group') {\n            element.setAttribute('default-selected-value', appearance[key]);\n          } else if (componentType === 'color-picker') {\n            element.setAttribute('default-selected-color', appearance[key]);\n          } else if (componentType === 'select-dropdown') {\n            const options = element.getAttribute('options');\n            const selectedOption = options ? JSON.parse(options).find((option: { value: string }) => option.value === appearance[key]) : null;\n            element.setAttribute('default-selected-option', JSON.stringify(selectedOption));\n          } else if (componentType === 'image-url') {\n            element.setAttribute('image-url', appearance[key]);\n          } else {\n            // Default case: set the default value\n            element.setAttribute('default-value', appearance[key]);\n          }\n        }\n      }\n\n      // Recursively process child elements (skip text nodes)\n      element.childNodes.forEach(child => {\n        if (child.nodeType === Node.ELEMENT_NODE) {\n          updateInputDefaultValues(child as HTMLElement); // Cast child to HTMLElement\n        }\n      });\n    }\n\n    // Start the recursive process with the cloned element (newValue)\n    if (newValue) {\n      updateInputDefaultValues(newValue as HTMLElement);\n    }\n  }\n\n  cloneAndCopyProps(element: HTMLElement): HTMLElement {\n    // Clone the current element\n    const clonedElement = element.cloneNode(false) as HTMLElement; // Do a shallow clone first\n    const componentType = element.getAttribute('component-type');\n    const key = element.getAttribute('name');\n\n    // Copy properties like 'options' and 'value' for custom elements\n    if ((element as any).options) {\n      const options = (element as any).getAttribute('options');\n      console.log('page-styling options', element, options);\n      if (typeof options === 'string') {\n        try {\n          const parsedOptions = JSON.parse(options);\n          (clonedElement as any).options = parsedOptions; // Parse the 'options' string\n          if (componentType === 'select-dropdown' && key && key in this.currentAppearance) {\n            const selectedOption = parsedOptions.find((option: { value: string }) => option.value === this.currentAppearance[key]);\n            (clonedElement as any).setAttribute('default-selected-option', JSON.stringify(selectedOption));\n          }\n        } catch (e) {\n          console.error('Error parsing options', e);\n        }\n      } else {\n        (clonedElement as any).options = (element as any).options; // Copy 'options' property\n      }\n    }\n\n    if ((element as any).value) {\n      (clonedElement as any).value = (element as any).value; // Copy 'value' property\n    }\n\n    // Recursively process child elements\n    element.childNodes.forEach(child => {\n      if (child.nodeType === Node.ELEMENT_NODE) {\n        // If the child is an element, recursively clone and process it\n        const clonedChild = this.cloneAndCopyProps(child as HTMLElement);\n        clonedElement.appendChild(clonedChild); // Append the cloned child to the parent clone\n      } else if (child.nodeType === Node.TEXT_NODE) {\n        // For text nodes, just clone and append the text content\n        clonedElement.appendChild(child.cloneNode(true));\n      }\n    });\n\n    return clonedElement; // Return the cloned element with its children\n  }\n\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-page-styling', 'selectedConfigurationChangedHandler', newValue);\n    this.currentAppearance = newValue?.appearance || {};\n    // Get the slot element\n    const editor = document.querySelector('nylas-scheduler-editor');\n    const slotElement = editor?.shadowRoot?.querySelector('slot[name=\"custom-page-style-inputs\"]') as HTMLSlotElement;\n    if (!slotElement) {\n      return;\n    }\n\n    const divElement = document.createElement('div');\n\n    // Get the slotted content (the nodes passed into the slot)\n    const slottedElements = slotElement?.assignedElements({ flatten: true });\n    // Clone each of the slotted nodes and append them to the cloned slot\n    slottedElements?.forEach(element => {\n      const clonedElement = this.cloneAndCopyProps(element as HTMLElement); // Clone recursively and copy properties\n\n      // Clone the slotted element (deep clone)\n      this.customInputsSlotChangedHandler(clonedElement);\n      // Append the cloned element to the document fragment\n      divElement.appendChild(clonedElement);\n    });\n\n    // Replace the original content with the new cloned and updated content\n    const bodyElement = this.host.shadowRoot?.querySelector('.nylas-page-styling');\n    const slotContainer = bodyElement?.querySelector('.nylas-page-styling__body .subsection');\n\n    if (slotContainer) {\n      // Remove existing children (if necessary) and append the new content\n      slotContainer.innerHTML = ''; // Clear existing content\n      divElement.childNodes.forEach(child => {\n        slotContainer.appendChild(child); // Append each child of divElement\n      });\n      this.customInputsSlot = divElement;\n    }\n  }\n\n  checkIfElementIsInSlot(name: string): boolean {\n    const findElement = document?.querySelector(`[slot=\"custom-page-style-inputs\"] [name=\"${name}\"]`);\n    return findElement ? true : false;\n  }\n\n  @Listen('nylasFormInputChanged', { target: 'document' })\n  async nylasFormInputChangeHandler(event: CustomEvent<{ value: string; name: string; type?: string }>) {\n    const { name, value } = event.detail;\n    const type = event.detail?.type;\n\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    switch (name) {\n      case 'submit_button_label':\n        this.currentAppearance = { ...this.currentAppearance, submit_button_label: value };\n        break;\n      case 'thank_you_message':\n        if (type === 'multi_line_text') {\n          const value = sanitize(event.detail.value);\n          this.currentAppearance = { ...this.currentAppearance, thank_you_message: value };\n        }\n        break;\n      default:\n        this.currentAppearance = { ...this.currentAppearance, [name]: value };\n        break;\n    }\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('nylasFormDropdownChanged', { target: 'document' })\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-page-styling', 'nylasFormDropdownChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    if (name === 'color') {\n      this.currentAppearance = { ...this.currentAppearance, color: value };\n    } else {\n      this.currentAppearance = { ...this.currentAppearance, [name]: value };\n    }\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('valueChanged', { target: 'document' })\n  valueChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-page-styling', 'valueChangedHandler', event.detail);\n    const { value, name } = event.detail;\n\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    if (name === 'company_logo_url') {\n      this.currentAppearance = { ...this.currentAppearance, company_logo_url: value };\n    } else {\n      this.currentAppearance = { ...this.currentAppearance, [name]: value };\n    }\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('nylasFormCheckboxToggled', { target: 'document' })\n  checkboxToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n    const { checked, name } = event.detail;\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    this.currentAppearance = { ...this.currentAppearance, [name]: checked };\n    this.updateConfirmationFormValue();\n  }\n\n  @Listen('nylasFormRadioChanged', { target: 'document' })\n  radioChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; type: string }>) {\n    const { value, name } = event.detail;\n    if (!this.checkIfElementIsInSlot(name)) {\n      return;\n    }\n    this.currentAppearance = { ...this.currentAppearance, [name]: value };\n    this.updateConfirmationFormValue();\n  }\n\n  updateConfirmationFormValue() {\n    debug('nylas-page-styling', 'updateConfirmationFormValue');\n    this.internals.setFormValue(JSON.stringify(this.currentAppearance), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.currentAppearance), name: this.name });\n  }\n\n  toggleConfirmationEmail() {\n    this.isOpen = !this.isOpen;\n  }\n\n  @RegisterComponent<NylasPageStyling, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-page-styling',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\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    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div part=\"nps\" class={{ 'nylas-page-styling': true, 'no-border': !this.customInputsSlot }}>\n          {this.customInputsSlot ? (\n            <div class=\"header\" part=\"nps__header\">\n              <div>\n                <h3>Page styling and customization</h3>\n              </div>\n              <div class=\"drawer-toggle\" part=\"nps__drawer-toggle--container\">\n                <span class={`chevron ${this.isOpen ? 'open' : 'closed'} `} onClick={() => this.toggleConfirmationEmail()}>\n                  <chevron-icon width=\"24\" height=\"24\" />\n                </span>\n              </div>\n            </div>\n          ) : null}\n\n          <div id=\"nylas-page-styling__body\" class=\"nylas-page-styling__body\" part=\"nps__body\">\n            <div class={{ 'nylas-page-styling__section': true, 'no-padding': !this.customInputsSlot }}>\n              <div class=\"nylas-page-styling__row\">\n                <div class={{ subsection: true, hide: !this.isOpen }}></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-participant-booking-calendars/nylas-participant-booking-calendars.js

@@ -94,6 +94,10 @@ export class NylasParticipantBookingCalendars {
             this.selectedCalendars = this.setParticipants(this.selectedConfiguration?.participants);
             this.participantCalendars = this.getParticipantCalendarOptions(this.selectedConfiguration?.participants, this.participantOptions);
         }
+        else {
+            this.selectedCalendars = this.setParticipants(this.participants);
+            this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);
+        }
     }
     handleValueChanged(event) {
         debug('[nylas-editor-tabs]', 'handleValueChanged', event);
@@ -135,13 +139,13 @@ export class NylasParticipantBookingCalendars {
         return selectedParticipants;
     }
     render() {
-        return (h(Host, { key: '771e6bf137e6e8565edfa38b018ebecbbd34391a' }, h("div", { key: 'de129ec1f11e06088c28445e6d3e12398fd26d4f', class: "nylas-participant-booking-calendars", part: "npbc" }, h("div", { key: '8cc19cc2004af110ccb7e95dc6a81bce4c5f8cad', class: "header", part: "npbc__header" }, h("h3", { key: '69a6b444ecb2d08b2cda29dc2ffc7613203d4052' }, "Book to this calendar"), h("p", { key: '580c521de914bb9ae9ebf5452b8cd519feee3043' }, "Select the calendar where you want to add event bookings.")), h("div", { key: '896ed1423c99e291572a17195af898a1225402e9', class: "content", part: "npbc__content" }, h("form", { key: '15f667fe9e21c29f64e8a6c79b3ec4c784b0eec4', ref: el => (this.bookingCalendarsFormRef = el) }, this.participantCalendars &&
+        return (h(Host, { key: 'b9e6684dcd0f1f65681af22cbfa0ee9f096aa3f2' }, h("div", { key: 'fae29a5cc07a0b8b46c36ec4763e3a220415d6d1', class: "nylas-participant-booking-calendars", part: "npbc" }, h("div", { key: 'b03cc0a390af4f2704a262fe8a6142df3db703f1', class: "header", part: "npbc__header" }, h("h3", { key: 'e2859aa78a9ad056290b3d567245d09dfbe4377c' }, "Book to this calendar"), h("p", { key: '0334ecd98e203d7625bef65ab1f5be413a67f2f5' }, "Select the calendar where you want to add event bookings.")), h("div", { key: '48c92054425564074e40d8e28e6cd98b77974083', class: "content", part: "npbc__content" }, h("form", { key: 'f4336a4077a262c45947b75630234806e99148d0', ref: el => (this.bookingCalendarsFormRef = el) }, this.participantCalendars &&
             Object.keys(this.participantCalendars).map((key, index) => {
                 const participant = this.selectedCalendars[key];
                 const participantCalendars = this.participantCalendars[key];
                 if (!participant || !participant.name)
                     return;
-                return (h("div", { class: "participant-container", part: "npbc__participant-container", key: `participant-conatiner-${index}` }, h("div", { class: "participant-title", part: "npbc__participant-title" }, h("p", null, participant.name, "'s booking calendar"), h("div", { class: "participant-toggle", part: "npbc__participant-toggle--container" }, h("span", { class: `chevron ${participant.isOpen ? 'open' : 'closed'}`, onClick: () => {
+                return (h("div", { class: "participant-container", part: "npbc__participant-container", key: `participant-conatiner-${index}` }, h("div", { class: "participant-title", part: "npbc__participant-title" }, h("p", null, participant.name, "'s booking calendar"), h("div", { class: "participant-toggle", part: "npbc__participant-toggle-container" }, h("span", { class: `chevron ${participant.isOpen ? 'open' : 'closed'}`, onClick: () => {
                         this.selectedCalendars[key].isOpen = !participant.isOpen;
                         this.selectedCalendars = { ...this.selectedCalendars };
                     } }, h("chevron-icon", { width: "24", height: "24" })))), participant.isOpen && (h("nylas-booking-calendar-picker", { key: key, name: `participant-booking-${key}`, calendars: participantCalendars, hideHeader: true, defaultBookingCalendar: this.participantDefaultSelectedCalendar[key] }))));
@@ -179,8 +183,11 @@ export class NylasParticipantBookingCalendars {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The selected config"
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The selected config"
+                        }],
+                    "text": ""
                 }
             },
             "name": {
@@ -194,8 +201,11 @@ export class NylasParticipantBookingCalendars {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The name of the participants custom availability."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The name of the participants custom availability."
+                        }],
+                    "text": ""
                 },
                 "attribute": "name",
                 "reflect": false,
@@ -218,8 +228,11 @@ export class NylasParticipantBookingCalendars {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The participants selected in the add participants section."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The participants selected in the add participants section."
+                        }],
+                    "text": ""
                 },
                 "defaultValue": "this.selectedConfiguration?.participants || []"
             },
@@ -240,8 +253,11 @@ export class NylasParticipantBookingCalendars {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The calendars to choose from for the organizer / logged in user."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The calendars to choose from for the organizer / logged in user."
+                        }],
+                    "text": ""
                 }
             },
             "participantOptions": {
@@ -261,8 +277,11 @@ export class NylasParticipantBookingCalendars {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The participant options passed in the additionalParticipants prop\nfrom the nylas-scheduler-editor component."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The participant options passed in the additionalParticipants prop\nfrom the nylas-scheduler-editor component."
+                        }],
+                    "text": ""
                 }
             }
         };