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

package/dist/collection/components/scheduler-editor/nylas-connected-calendars/nylas-connected-calendars.css

@@ -0,0 +1,105 @@
+: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;
+  width: inherit;
+}
+
+.nylas-connected-calendars {
+  width: inherit;
+  display: flex;
+  flex-direction: column;
+  margin: 1rem;
+  border-radius: var(--nylas-border-radius-2x);
+  border: 1px solid var(--nylas-base-200);
+}
+.nylas-connected-calendars .header {
+  padding: 1rem;
+}
+.nylas-connected-calendars .header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--nylas-base-900);
+  text-align: left;
+}
+.nylas-connected-calendars .header p {
+  margin: 0.25rem 0 0 0;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--nylas-base-600);
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.nylas-connected-calendars .content .participant-container {
+  padding-top: 12px;
+  border-top: 1px solid var(--nylas-base-200);
+}
+.nylas-connected-calendars .content .participant-container .participant-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 16px 16px;
+}
+.nylas-connected-calendars .content .participant-container .participant-title p {
+  margin: 0;
+}
+.nylas-connected-calendars .content .participant-container .participant-title .participant-toggle {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+.nylas-connected-calendars .content .participant-container .participant-title .participant-toggle .chevron {
+  display: flex;
+  align-self: center;
+  cursor: pointer;
+}
+.nylas-connected-calendars .content .participant-container .participant-title .participant-toggle .chevron:hover, .nylas-connected-calendars .content .participant-container .participant-title .participant-toggle .chevron:active {
+  color: var(--nylas-primary);
+}
+.nylas-connected-calendars .content .participant-container .participant-title .participant-toggle .chevron.open {
+  transform: rotate(90deg);
+}
+.nylas-connected-calendars .content .participant-container .participant-title .participant-toggle .chevron.closed {
+  transform: rotate(270deg);
+}
+.nylas-connected-calendars .content .participant-container .participant-title .participant-toggle .chevron.disabled {
+  cursor: not-allowed;
+  color: var(--nylas-base-300);
+}
+.nylas-connected-calendars .content .participant-container .participant-title .participant-toggle .chevron.disabled:hover {
+  color: var(--nylas-base-300);
+}
+
+nylas-calendar-picker::part(ncp) {
+  margin: 0;
+  border: none;
+  border-top: 1px solid var(--nylas-base-200);
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}

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

@@ -0,0 +1,298 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { RegisterComponent } from "../../../common/register-component";
+import { debug } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+export class NylasConnectedCalendars {
+    constructor() {
+        this.name = 'connected-calendars';
+        this.participants = undefined;
+        this.calendars = undefined;
+        this.participantOptions = undefined;
+        this.selectedCalendars = this.setParticipants(this.participants);
+        this.participantCalendars = {};
+        this.participantDefaultSelectedCalendars = {};
+    }
+    elementNameChangedHandler(newValue) {
+        debug('nylas-connected-calendars', 'elementNameChangedHandler', newValue);
+        this.host.setAttribute('name', newValue);
+    }
+    calendarsChangedHandler(newValue) {
+        debug('nylas-connected-calendars', 'calendarsChangedHandler', newValue);
+        this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);
+    }
+    participantsChangedHandler(newValue) {
+        debug('nylas-connected-calendars', 'participantsChangedHandler', newValue);
+        this.selectedCalendars = this.setParticipants(newValue);
+        this.participantCalendars = this.getParticipantCalendarOptions(newValue, this.participantOptions);
+    }
+    participantOptionsChangedHandler(newValue) {
+        debug('nylas-calendar-picker', 'participantOptionsChangedHandler', newValue);
+        this.participantCalendars = this.getParticipantCalendarOptions(this.participants, newValue);
+    }
+    getParticipantCalendarOptions(addedParticipants, availableParticipantOptions) {
+        const organizer = this.participants.find(participant => participant.is_organizer);
+        const participantCalendars = {};
+        if (availableParticipantOptions) {
+            const participants = addedParticipants.filter(participant => availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email));
+            participants.forEach(participant => {
+                const participantOption = availableParticipantOptions.find(participantOption => participantOption.email === participant.email);
+                if (!participantOption)
+                    return;
+                this.participantDefaultSelectedCalendars[participant.email] = participant.availability?.calendar_ids || [];
+                const calendars = participantOption.calendars ?? [];
+                participant.availability?.calendar_ids?.forEach(calendarId => {
+                    if (!calendars.some(calendar => calendar.id === calendarId) && calendarId !== 'primary') {
+                        calendars.push({ id: calendarId, name: calendarId });
+                    }
+                });
+                participantCalendars[participant.email] = calendars;
+            });
+        }
+        if (organizer) {
+            participantCalendars[organizer.email] = this.calendars ?? [{ id: 'primary', name: organizer.email }];
+            this.participantDefaultSelectedCalendars[organizer.email] = organizer.availability?.calendar_ids || [];
+        }
+        return participantCalendars;
+    }
+    getUniqueCalendars(calendars) {
+        return calendars.filter((calendar, index, self) => self.findIndex(c => c.id === calendar.id) === index);
+    }
+    connectedCallback() {
+        debug('nylas-connected-calendars', 'connectedCallback');
+    }
+    disconnectedCallback() {
+        debug('nylas-connected-calendars', 'disconnectedCallback');
+    }
+    componentWillLoad() {
+        debug('nylas-connected-calendars', 'componentWillLoad');
+    }
+    componentDidLoad() {
+        debug('nylas-connected-calendars', 'componentDidLoad');
+    }
+    handleValueChanged(event) {
+        debug('[nylas-editor-tabs]', 'handleValueChanged', event);
+        const { name, value } = event.detail;
+        if (!name.startsWith('participant-')) {
+            return;
+        }
+        if (!this.connectedCalendarsFormRef.checkValidity()) {
+            this.internals.setValidity({ customError: true }, 'Please select at least one calendar for each participant.');
+            return;
+        }
+        else {
+            this.internals.setValidity({});
+        }
+        const key = name.split('participant-')[1];
+        if (!this.selectedCalendars[key])
+            return;
+        this.selectedCalendars[key]['calendars'] = value;
+        this.selectedCalendars = { ...this.selectedCalendars };
+        const participantsCalendars = {};
+        this.participants.forEach(participant => {
+            participantsCalendars[participant.email] = this.selectedCalendars[participant.email].calendars;
+        });
+        this.internals.setFormValue(JSON.stringify(participantsCalendars), this.name);
+        this.valueChanged.emit({ value: JSON.stringify(participantsCalendars), name: this.name });
+    }
+    setParticipants(participants) {
+        const selectedParticipants = {};
+        participants.forEach(participant => {
+            const isOpen = participant.is_organizer ? true : false;
+            selectedParticipants[participant.email] = {
+                isOpen: isOpen,
+                name: participant.name || participant.email,
+                availability: participant.availability,
+            };
+        });
+        return selectedParticipants;
+    }
+    render() {
+        return (h(Host, { key: 'bc04f273cf87427c70f2ce0d296eac3d6ac7b6de' }, h("div", { key: '995bb5a0b4be6ab0ea856394bb81d3b5fa487915', class: "nylas-connected-calendars", part: "npca" }, h("div", { key: 'd973e7b5e6c03b87835102a3409061cfb175fbbd', class: "header", part: "npca__header" }, h("h3", { key: 'e7fdc1c368e38857578b48a87b244b000901dd0b' }, "Connected Calendars"), h("p", { key: 'e2cb0d727e9d9dc11e58fb4299da5e335e020474' }, "Select the calendars to use for checking your availability.", h("tooltip-component", { key: 'e93f320b8075f979509fe8f2b81024a939333a00' }, h("info-icon", { key: '1d7c7a2fca87460e84d855b334af8b78ca0cc6e1', slot: "tooltip-icon" }), h("span", { key: 'f4246e370c18c35bcf20ef838ae6da4102234daa', slot: "tooltip-content" }, "Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available. The default is your primary calendar if none are selected.")))), h("div", { key: 'cf514c92149d927d7cf5d8f535826987d0d63fce', class: "content", part: "npca__content" }, h("form", { key: 'cbe2ffb59e474169079d2e3896dd1b12391d7487', ref: el => (this.connectedCalendarsFormRef = el) }, 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: "npca__participant-container", key: `participant-conatiner-${index}` }, h("div", { class: "participant-title", part: "npca__participant-title" }, h("p", null, "Set ", participant.name, "'s connected calendars"), h("div", { class: "participant-toggle", part: "npca__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-calendar-picker", { key: key, name: `participant-${key}`, calendars: participantCalendars, defaultSelectedCalendars: this.participantDefaultSelectedCalendars[key] }))));
+        }))))));
+    }
+    static get is() { return "nylas-connected-calendars"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-connected-calendars.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-connected-calendars.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the participants custom availability."
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'connected-calendars'"
+            },
+            "participants": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Participant[]",
+                    "resolved": "Participant[]",
+                    "references": {
+                        "Participant": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Participant"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The participants selected in the add participants section."
+                }
+            },
+            "calendars": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Calendar[]",
+                    "resolved": "Calendar[] | undefined",
+                    "references": {
+                        "Calendar": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Calendar"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The calendars to choose from for the organizer / logged in user."
+                }
+            },
+            "participantOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AdditionalParticipant[]",
+                    "resolved": "AdditionalParticipant[] | undefined",
+                    "references": {
+                        "AdditionalParticipant": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::AdditionalParticipant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The participant options passed in the additionalParticipants prop\nfrom the nylas-scheduler-editor component."
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedCalendars": {},
+            "participantCalendars": {},
+            "participantDefaultSelectedCalendars": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when the participants custom availability changes."
+                },
+                "complexType": {
+                    "original": "{\n    value: string;\n    name: string;\n  }",
+                    "resolved": "{ value: string; name: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "calendars",
+                "methodName": "calendarsChangedHandler"
+            }, {
+                "propName": "participants",
+                "methodName": "participantsChangedHandler"
+            }, {
+                "propName": "participantOptions",
+                "methodName": "participantOptionsChangedHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "valueChanged",
+                "method": "handleValueChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-connected-calendars',
+        stateToProps: new Map([
+            ['schedulerConfig.additionalParticipants', 'participantOptions'],
+            ['schedulerConfig.calendars', 'calendars'],
+        ]),
+        eventToProps: {},
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasConnectedCalendars.prototype, "render", null);
+//# sourceMappingURL=nylas-connected-calendars.js.map

package/dist/collection/components/scheduler-editor/nylas-connected-calendars/nylas-connected-calendars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-connected-calendars.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-connected-calendars/nylas-connected-calendars.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 { AdditionalParticipant, Calendar, Participant } from '@nylas/core';\n\n/**\n * The `nylas-connected-calendars` component is a form input for selecting calendars to check availability for participants.\n */\n@Component({\n  tag: 'nylas-connected-calendars',\n  styleUrl: 'nylas-connected-calendars.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasConnectedCalendars {\n  @Element() host!: HTMLNylasConnectedCalendarsElement;\n  private connectedCalendarsFormRef!: HTMLFormElement;\n\n  /**\n   * The name of the participants custom availability.\n   */\n  @Prop() name: string = 'connected-calendars';\n\n  /**\n   * The participants selected in the add participants section.\n   */\n  @Prop() participants!: Participant[];\n\n  /**\n   * The calendars to choose from for the organizer / logged in user.\n   */\n  @Prop() calendars?: Calendar[];\n\n  /**\n   * The participant options passed in the additionalParticipants prop\n   * from the nylas-scheduler-editor component.\n   */\n  @Prop() participantOptions?: AdditionalParticipant[];\n\n  /**\n   * This event is fired when the participants custom availability changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The state to store the custom availability setting for participants.\n   */\n  @State() selectedCalendars: {\n    [key: string]: {\n      isOpen: boolean;\n      name: string;\n      calendars?: Calendar[];\n    };\n  } = this.setParticipants(this.participants);\n\n  /**\n   * Participants calendar options.\n   */\n  @State() participantCalendars: {\n    [key: string]: Calendar[];\n  } = {};\n\n  /**\n   * The state to store the default selected calendars for each participant\n   */\n  @State() participantDefaultSelectedCalendars: {\n    [key: string]: string[];\n  } = {};\n\n  // Watchers\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-connected-calendars', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('calendars')\n  calendarsChangedHandler(newValue: Calendar[]) {\n    debug('nylas-connected-calendars', 'calendarsChangedHandler', newValue);\n    this.participantCalendars = this.getParticipantCalendarOptions(this.participants, this.participantOptions);\n  }\n\n  @Watch('participants')\n  participantsChangedHandler(newValue: Participant[]) {\n    debug('nylas-connected-calendars', 'participantsChangedHandler', newValue);\n    this.selectedCalendars = this.setParticipants(newValue);\n    this.participantCalendars = this.getParticipantCalendarOptions(newValue, this.participantOptions);\n  }\n\n  @Watch('participantOptions')\n  participantOptionsChangedHandler(newValue: AdditionalParticipant[]) {\n    debug('nylas-calendar-picker', 'participantOptionsChangedHandler', newValue);\n    this.participantCalendars = this.getParticipantCalendarOptions(this.participants, newValue);\n  }\n\n  getParticipantCalendarOptions(addedParticipants: Participant[], availableParticipantOptions: AdditionalParticipant[] | undefined) {\n    // Get the participants from the availableParticipantOptions prop that are in the addedParticipants prop\n    const organizer = this.participants.find(participant => participant.is_organizer);\n    const participantCalendars = {};\n\n    if (availableParticipantOptions) {\n      const participants = addedParticipants.filter(participant => availableParticipantOptions.some(availableParticipant => availableParticipant.email === participant.email));\n\n      // Get the calendar options for each participant with email as the key\n      participants.forEach(participant => {\n        const participantOption = availableParticipantOptions.find(participantOption => participantOption.email === participant.email);\n        if (!participantOption) return;\n        this.participantDefaultSelectedCalendars[participant.email] = participant.availability?.calendar_ids || [];\n        const calendars = participantOption.calendars ?? [];\n        participant.availability?.calendar_ids?.forEach(calendarId => {\n          if (!calendars.some(calendar => calendar.id === calendarId) && calendarId !== 'primary') {\n            calendars.push({ id: calendarId, name: calendarId });\n          }\n        });\n        participantCalendars[participant.email] = calendars;\n      });\n    }\n\n    // Add the organizer's calendars to the participantCalendars\n    if (organizer) {\n      participantCalendars[organizer.email] = this.calendars ?? [{ id: 'primary', name: organizer.email }];\n      this.participantDefaultSelectedCalendars[organizer.email] = organizer.availability?.calendar_ids || [];\n    }\n    return participantCalendars;\n  }\n\n  getUniqueCalendars(calendars: Calendar[]) {\n    return calendars.filter((calendar, index, self) => self.findIndex(c => c.id === calendar.id) === index);\n  }\n\n  // Lifecycle Methods\n  connectedCallback() {\n    debug('nylas-connected-calendars', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-connected-calendars', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-connected-calendars', 'componentWillLoad');\n  }\n\n  componentDidLoad() {\n    debug('nylas-connected-calendars', 'componentDidLoad');\n  }\n\n  @Listen('valueChanged')\n  handleValueChanged(event: CustomEvent) {\n    debug('[nylas-editor-tabs]', 'handleValueChanged', event);\n    const { name, value } = event.detail;\n    if (!name.startsWith('participant-')) {\n      return;\n    }\n    // Validate the form\n    if (!this.connectedCalendarsFormRef.checkValidity()) {\n      this.internals.setValidity({ customError: true }, 'Please select at least one calendar for each participant.');\n      return;\n    } else {\n      this.internals.setValidity({});\n    }\n\n    const key = name.split('participant-')[1];\n    if (!this.selectedCalendars[key]) return;\n    this.selectedCalendars[key]['calendars'] = value;\n    this.selectedCalendars = { ...this.selectedCalendars };\n\n    const participantsCalendars = {};\n    this.participants.forEach(participant => {\n      participantsCalendars[participant.email] = this.selectedCalendars[participant.email].calendars;\n    });\n    this.internals.setFormValue(JSON.stringify(participantsCalendars), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(participantsCalendars), name: this.name });\n  }\n\n  setParticipants(participants: Participant[]) {\n    const selectedParticipants = {};\n    participants.forEach(participant => {\n      const isOpen = participant.is_organizer ? true : false;\n      selectedParticipants[participant.email] = {\n        isOpen: isOpen,\n        name: participant.name || participant.email,\n        availability: participant.availability,\n      };\n    });\n    return selectedParticipants;\n  }\n  @RegisterComponent<NylasConnectedCalendars, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-connected-calendars',\n    stateToProps: new Map([\n      ['schedulerConfig.additionalParticipants', 'participantOptions'],\n      ['schedulerConfig.calendars', 'calendars'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-connected-calendars\" part=\"npca\">\n          <div class=\"header\" part=\"npca__header\">\n            <h3>Connected Calendars</h3>\n            <p>\n              Select the calendars to use for checking your availability.\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">\n                  Check availability across one or multiple calendars. If multiple calendars are selected, you must be available across all of them to be considered available. The\n                  default is your primary calendar if none are selected.\n                </span>\n              </tooltip-component>\n            </p>\n          </div>\n          <div class=\"content\" part=\"npca__content\">\n            <form ref={el => (this.connectedCalendarsFormRef = el as HTMLFormElement)}>\n              {Object.keys(this.participantCalendars).map((key, index) => {\n                const participant = this.selectedCalendars[key];\n                const participantCalendars = this.participantCalendars[key];\n                if (!participant || !participant.name) return;\n                return (\n                  <div class=\"participant-container\" part=\"npca__participant-container\" key={`participant-conatiner-${index}`}>\n                    <div class=\"participant-title\" part=\"npca__participant-title\">\n                      <p>Set {participant.name}'s connected calendars</p>\n                      <div class=\"participant-toggle\" part=\"npca__participant-toggle--container\">\n                        <span\n                          class={`chevron ${participant.isOpen ? 'open' : 'closed'}`}\n                          onClick={() => {\n                            this.selectedCalendars[key].isOpen = !participant.isOpen;\n                            this.selectedCalendars = { ...this.selectedCalendars };\n                          }}\n                        >\n                          <chevron-icon width=\"24\" height=\"24\" />\n                        </span>\n                      </div>\n                    </div>\n                    {participant.isOpen && (\n                      <nylas-calendar-picker\n                        key={key}\n                        name={`participant-${key}`}\n                        calendars={participantCalendars}\n                        defaultSelectedCalendars={this.participantDefaultSelectedCalendars[key]}\n                      />\n                    )}\n                  </div>\n                );\n              })}\n            </form>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.js

@@ -81,7 +81,7 @@ export class NylasCustomBookingFlow {
                 value: 'pre-booking',
             },
         ];
-        return (h(Host, { key: '2e2a26ab26a63e7855a8d3280be056ee0d9f58bf' }, h("div", { key: 'ae1a111bf526645d268e7fb5a01d755140b99e70', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: '1b8de2d86c1e6df2ac34b6cb27e01692829dca5e', class: "header", part: "ncbf__header" }, h("h3", { key: '166f032b49b2f6bc2f05271633ac9a64d246146f' }, "Customize booking flow"), h("p", { key: '23011ab13b85225b9042f8f84672cd688c93f16f' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
+        return (h(Host, { key: '886c0c6645e43c346db07c0d105be004697448e0' }, h("div", { key: 'f6c020725b462db9571606141538bcd92fa84f13', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: 'bf73937190883fa2781c7ede636926f559339a92', class: "header", part: "ncbf__header" }, h("h3", { key: 'b3e037e637c6976174f1eb054ea9257618687b9d' }, "Customize booking flow"), h("p", { key: '302d2c9bc6dbcb572031148500b0a80223cdfbb4' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
     }
     static get is() { return "nylas-custom-booking-flow"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-customize-booking-settings/nylas-customize-booking-settings.js

@@ -18,11 +18,11 @@ import { Host, h } from "@stencil/core";
 export class NylasCustomizeBookingSettings {
     constructor() {
         this.selectedConfiguration = undefined;
-        this.defaultAdditionalGuestsHidden = this.selectedConfiguration?.scheduler?.hide_additional_guests ?? false;
+        this.defaultHideAdditionalGuests = this.selectedConfiguration?.scheduler?.hide_additional_guests ?? false;
         this.defaultHideCancellationOptions = this.selectedConfiguration?.scheduler?.hide_cancellation_options ?? false;
         this.defaultHideReschedulingOptions = this.selectedConfiguration?.scheduler?.hide_rescheduling_options ?? false;
         this.name = 'customize-booking-settings';
-        this.allowGuestsToInvite = this.defaultAdditionalGuestsHidden;
+        this.allowGuestsToInvite = this.defaultHideAdditionalGuests;
         this.hideCancellationOptions = this.defaultHideCancellationOptions;
         this.hideReschedulingOptions = this.defaultHideReschedulingOptions;
     }
@@ -89,7 +89,7 @@ export class NylasCustomizeBookingSettings {
         }), this.name);
     }
     render() {
-        return (h(Host, { key: '543f4fc64d9dab03c528c5738cd4c1b1bb9cfd2a' }, h("div", { key: 'e3f153847ad5256327952d4be0aace03543b1d40', class: "nylas-customize-booking-settings", part: "ncbs" }, h("div", { key: '5b35f27785f6f6bc8e8848d94857869b73108df0', class: "header", part: "ncbs__header" }, h("h3", { key: 'd50a9614e3b0b5227a196356a43f12aab4acb158' }, "Additional settings"), h("p", { key: 'f29bbb165479e276cf87087582e9c60eb21c37d1' }, "Booking settings for the event.")), h("div", { key: 'd091485f983d0cc3ff86e7ca89df8d75526d3cef', class: "nylas-customize-booking-settings__settings", part: "ncbs__settings" }, h("div", { key: '7f7888a718a70a681795e599075c92cfbc16853a', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__additional_guests" }, h("checkbox-component", { key: 'e37474d77812d96fe264d26c329078502c074dbe', name: "hide_additional_guests", label: "Allow guests to invite additional guests.", checked: this.allowGuestsToInvite }, h("span", { key: '00b45833c0223e373edf0b42669e4a154938b1eb', slot: "label", class: "label" }, h("p", { key: 'e66de8b9f53230347417a8ec0a7ae7a19af9db31', class: "label-contents" }, "Allow guests to invite additional guests to the booking."), h("tooltip-component", { key: '1ba5558e1991235c21f57ca1968220ea7bf43fcb', id: "guests" }, h("info-icon", { key: '3e62cc64cc55eb3dd4d0a73cef80a64c8dc9c38f', slot: "tooltip-icon" }), h("span", { key: '3853d0d575be29420ea012c90b0a2c07913a86a7', slot: "tooltip-content" }, "Allow guests to invite additional guests to the event. If enabled, the guest will be able to add additional guests' email addresses."))))), h("div", { key: '92e209a924673d8b1dee03475ffabfea5d9bf09b', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__rescheduling_options" }, h("checkbox-component", { key: 'f7b522c07700938d25b17e14d236edb2aae12b21', name: "hide_rescheduling_options", label: "Hide 'Reschedule' option on booking page and emails.", checked: this.hideReschedulingOptions }, h("span", { key: '590cb5d983ff6eef95ebb370b845e1cc8e3080e4', slot: "label", class: "label" }, h("p", { key: '8f2d2742976e21a81268c793ae1c6c9dafdcecc3', class: "label-contents" }, "Hide the\u00A0", h("strong", { key: '4b01f75e4067d7c8d26ca785d5c6ad841633130c' }, "Reschedule"), "\u00A0button on the Scheduling Page and in the email notifications."), h("tooltip-component", { key: '8a157115569a4413143779c9e09c8389394973f9', id: "reschedule" }, h("info-icon", { key: 'b3a2c734d2d7a303d1d4d2622b51113aa7d3dfaf', slot: "tooltip-icon" }), h("span", { key: '2d08ceb49e744787da6863d72cf2c6df50f1a7cc', slot: "tooltip-content" }, "Hide the 'Reschedule' button on the Scheduling page and in the email notifications. If enabled, the guest will not be able to reschedule the booking."))))), h("div", { key: '6bc7f1a30a750ba85453d852f6f7e05c0513673d', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__cancellation_options" }, h("checkbox-component", { key: '089ca174d8aabb26d87f5bb8cb871b9e82b7c04f', name: "hide_cancellation_options", label: "Hide 'Cancel' option on booking page and emails.", checked: this.hideCancellationOptions }, h("span", { key: '9ec50185d728baddbe0805eaeff057686b153bea', slot: "label", class: "label" }, h("p", { key: '118c1c3cc06dba90f451711aba0dde3efeeec9f0', class: "label-contents" }, "Hide the\u00A0", h("strong", { key: 'c1a26aa5c832fba488d60fc3af5a3c000ada144d' }, "Cancel"), "\u00A0button on the Scheduling Page and in the email notifications."), h("tooltip-component", { key: 'b70473d1e93c11d9b05a9dcec67d77795638bbeb', id: "cancel" }, h("info-icon", { key: '2f0d812ac9fb7a52260b601c590b7a629036ea7c', slot: "tooltip-icon" }), h("span", { key: '4c5b3b51b57761a377ccfa7f66d6d69486d8cb11', slot: "tooltip-content" }, "Hide the 'Cancel' button on the Scheduling page and in the email notifications. If enabled, the guest will not be able to cancel the booking.")))))))));
+        return (h(Host, { key: 'e4b8a58d1b11c5a48d09bcf65fc1424c1bc8daf6' }, h("div", { key: '5e7b2a4cf3dbf3a3aefce2023ee884a491aeb1a1', class: "nylas-customize-booking-settings", part: "ncbs" }, h("div", { key: 'b00c2654d1e76cfd8bfd41970c233df638fbde58', class: "header", part: "ncbs__header" }, h("h3", { key: '73b3a57ed1156a07a9e50b7362116ae455bd0bde' }, "Additional settings"), h("p", { key: '1e3b02068249923ab49bbc9cb0dc0551e35cba41' }, "Booking settings for the event.")), h("div", { key: 'db140f831c461db9aa1127bc2cbead906928ca40', class: "nylas-customize-booking-settings__settings", part: "ncbs__settings" }, h("div", { key: '0d467d726d9799a912ba48c010905830e87d250b', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__additional_guests" }, h("checkbox-component", { key: '658c73f67a1edb4d2e2e5110fe8e1b8b9054c686', name: "hide_additional_guests", label: "Allow guests to invite additional guests.", checked: this.allowGuestsToInvite }, h("span", { key: '12924a967738ab95afa28d81a2ba69496a20c8fd', slot: "label", class: "label" }, h("p", { key: '700b4f9ffef5a1e9b138a394023379c8d8a59962', class: "label-contents" }, "Allow guests to invite additional guests to the booking."), h("tooltip-component", { key: '85459fa4975ffc814967a4b4ae568b8cf0563dca', id: "guests" }, h("info-icon", { key: '21a724b0a34d252350f2b4e76aa1785cf95fa022', slot: "tooltip-icon" }), h("span", { key: 'c3233a8ef448e68a5e36e682c48b0fbf527c226c', slot: "tooltip-content" }, "Allow guests to invite additional guests to the event. If enabled, the guest will be able to add additional guests' email addresses."))))), h("div", { key: '2ee5df5d0b689b832b9387d102a4b9cb44d020c1', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__rescheduling_options" }, h("checkbox-component", { key: 'ca74819cc2c08f3da7b80841169258f8786b8dc5', name: "hide_rescheduling_options", label: "Hide 'Reschedule' option on booking page and emails.", checked: this.hideReschedulingOptions }, h("span", { key: 'f0de48b03ff4873ac342dd4f4c1de38ce6053c8a', slot: "label", class: "label" }, h("p", { key: '4b950091bf6dad75f8501d2c2b31bc40e02c6dd2', class: "label-contents" }, "Hide the\u00A0", h("strong", { key: '1eea34c7676eff933a15d946cd38df9659497ad6' }, "Reschedule"), "\u00A0button on the Scheduling Page and in the email notifications."), h("tooltip-component", { key: '61335a5bc86df23bdad167f7fec9839047590491', id: "reschedule" }, h("info-icon", { key: '6885ed94a12a3ecde75e9c701d8fda056d187a52', slot: "tooltip-icon" }), h("span", { key: '49eae7dadcb8fffff94d319dbf39b11096a7b8cc', slot: "tooltip-content" }, "If enabled, the guest will not be able to reschedule the booking."))))), h("div", { key: '0bcbfbfc90e03d20a6021603eebe825433dca793', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__cancellation_options" }, h("checkbox-component", { key: '73cea5cfd2643d930fc45dbcecc7bf72b35d53bf', name: "hide_cancellation_options", label: "Hide 'Cancel' option on booking page and emails.", checked: this.hideCancellationOptions }, h("span", { key: '61224ee172a9a1a9e176e612ec549a69863c5cc6', slot: "label", class: "label" }, h("p", { key: 'd2e344036e3a51e434d83650d55030aec3590c72', class: "label-contents" }, "Hide the\u00A0", h("strong", { key: 'b3778bae9c6b4d7d3ebb9ba8af97099bc5d1e79d' }, "Cancel"), "\u00A0button on the Scheduling Page and in the email notifications."), h("tooltip-component", { key: '0f17015840a4037e078b5d3df6fd1283de9a210c', id: "cancel" }, h("info-icon", { key: 'aae84e684fedb05e632787f94b2b69fe0a18d989', slot: "tooltip-icon" }), h("span", { key: 'c0d38e54cc25a2a141f53d19f2ca40824995c068', slot: "tooltip-content" }, "If enabled, the guest will not be able to cancel the booking.")))))))));
     }
     static get is() { return "nylas-customize-booking-settings"; }
     static get encapsulation() { return "shadow"; }
@@ -127,7 +127,7 @@ export class NylasCustomizeBookingSettings {
                     "text": "The selected config"
                 }
             },
-            "defaultAdditionalGuestsHidden": {
+            "defaultHideAdditionalGuests": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -141,7 +141,7 @@ export class NylasCustomizeBookingSettings {
                     "tags": [],
                     "text": "The default additional guests hidden setting as set in the configuration."
                 },
-                "attribute": "default-additional-guests-hidden",
+                "attribute": "default-hide-additional-guests",
                 "reflect": false,
                 "defaultValue": "this.selectedConfiguration?.scheduler?.hide_additional_guests ?? false"
             },

package/dist/collection/components/scheduler-editor/nylas-customize-booking-settings/nylas-customize-booking-settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-customize-booking-settings.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-customize-booking-settings/nylas-customize-booking-settings.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-customize-booking-settings` component is a UI component that displays the booking calendar picker.\n * @part ncbs - The booking calendar picker container\n * @part ncbs__header - The header of the booking calendar picker\n * @part ncbs__settings - The settings container\n * @part ncbs__settings-div - The div inside the settings container that contains the checkbox and tooltip for each setting\n * @part ncbs__additional_guests - The additional guests setting\n * @part ncbs__cancellation_options - The cancellation options setting\n * @part ncbs__rescheduling_options - The rescheduling options setting\n */\n@Component({\n  tag: 'nylas-customize-booking-settings',\n  styleUrl: 'nylas-customize-booking-settings.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCustomizeBookingSettings {\n  @Element() host!: HTMLNylasCustomizeBookingSettingsElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * The default additional guests hidden setting as set in the configuration.\n   */\n  @Prop() defaultAdditionalGuestsHidden: boolean = this.selectedConfiguration?.scheduler?.hide_additional_guests ?? false;\n\n  /**\n   * The default hide cancellation options setting as set in the configuration.\n   */\n  @Prop() defaultHideCancellationOptions: boolean = this.selectedConfiguration?.scheduler?.hide_cancellation_options ?? false;\n\n  /**\n   * The default hide rescheduling options setting as set in the configuration.\n   */\n  @Prop() defaultHideReschedulingOptions: boolean = this.selectedConfiguration?.scheduler?.hide_rescheduling_options ?? false;\n\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'customize-booking-settings';\n\n  /**\n   * State to store the allowed additional guests setting.\n   */\n  @State() allowGuestsToInvite: boolean = this.defaultAdditionalGuestsHidden;\n\n  /**\n   * State to store the hide cancel booking setting.\n   */\n  @State() hideCancellationOptions: boolean = this.defaultHideCancellationOptions;\n\n  /**\n   * State to store the hide reschedule booking setting.\n   */\n  @State() hideReschedulingOptions: boolean = this.defaultHideReschedulingOptions;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * This event is fired when the selected booking calendar changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\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-customize-booking-settings', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-customize-booking-settings', 'selectedConfigurationChangedHandler', newValue);\n    this.allowGuestsToInvite = !newValue?.scheduler?.hide_additional_guests;\n    this.hideCancellationOptions = newValue?.scheduler?.hide_cancellation_options ?? false;\n    this.hideReschedulingOptions = newValue?.scheduler?.hide_rescheduling_options ?? false;\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-customize-booking-settings', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-customize-booking-settings', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-customize-booking-settings', '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-customize-booking-settings', 'componentDidLoad');\n  }\n\n  componentWillUpdate() {\n    debug('nylas-customize-booking-settings', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-customize-booking-settings', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-customize-booking-settings', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-customize-booking-settings', 'componentDidRender');\n  }\n\n  @Listen('nylasFormCheckboxToggled')\n  checkboxToggledHandler(event: CustomEvent<{ name: string; checked: boolean }>) {\n    const { name, checked } = event.detail;\n    switch (name) {\n      case 'hide_additional_guests':\n        this.allowGuestsToInvite = checked;\n        break;\n      case 'hide_cancellation_options':\n        this.hideCancellationOptions = checked;\n        break;\n      case 'hide_rescheduling_options':\n        this.hideReschedulingOptions = checked;\n        break;\n    }\n    this.valueChanged.emit({\n      value: JSON.stringify({\n        additionalGuestsHidden: !this.allowGuestsToInvite,\n        hideCancellationOptions: this.hideCancellationOptions,\n        hideReschedulingOptions: this.hideReschedulingOptions,\n      }),\n      name: this.name,\n    });\n    this.internals.setFormValue(\n      JSON.stringify({\n        additionalGuestsHidden: !this.allowGuestsToInvite,\n        hideCancellationOptions: this.hideCancellationOptions,\n        hideReschedulingOptions: this.hideReschedulingOptions,\n      }),\n      this.name,\n    );\n  }\n\n  @RegisterComponent<NylasCustomizeBookingSettings, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-customize-booking-settings',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-customize-booking-settings\" part=\"ncbs\">\n          <div class=\"header\" part=\"ncbs__header\">\n            <h3>Additional settings</h3>\n            <p>Booking settings for the event.</p>\n          </div>\n\n          <div class=\"nylas-customize-booking-settings__settings\" part=\"ncbs__settings\">\n            <div class=\"nylas-customize-booking-settings__settings-div\" part=\"ncbs__settings-div , ncbs__additional_guests\">\n              <checkbox-component name=\"hide_additional_guests\" label=\"Allow guests to invite additional guests.\" checked={this.allowGuestsToInvite}>\n                <span slot=\"label\" class=\"label\">\n                  <p class=\"label-contents\">Allow guests to invite additional guests to the booking.</p>\n                  <tooltip-component id=\"guests\">\n                    <info-icon slot=\"tooltip-icon\" />\n                    <span slot=\"tooltip-content\">\n                      Allow guests to invite additional guests to the event. If enabled, the guest will be able to add additional guests' email addresses.\n                    </span>\n                  </tooltip-component>\n                </span>\n              </checkbox-component>\n            </div>\n            <div class=\"nylas-customize-booking-settings__settings-div\" part=\"ncbs__settings-div , ncbs__rescheduling_options\">\n              <checkbox-component name=\"hide_rescheduling_options\" label=\"Hide 'Reschedule' option on booking page and emails.\" checked={this.hideReschedulingOptions}>\n                <span slot=\"label\" class=\"label\">\n                  <p class=\"label-contents\">\n                    Hide the&nbsp;<strong>Reschedule</strong>&nbsp;button on the Scheduling Page and in the email notifications.\n                  </p>\n                  <tooltip-component id=\"reschedule\">\n                    <info-icon slot=\"tooltip-icon\" />\n                    <span slot=\"tooltip-content\">\n                      Hide the 'Reschedule' button on the Scheduling page and in the email notifications. If enabled, the guest will not be able to reschedule the booking.\n                    </span>\n                  </tooltip-component>\n                </span>\n              </checkbox-component>\n            </div>\n            <div class=\"nylas-customize-booking-settings__settings-div\" part=\"ncbs__settings-div , ncbs__cancellation_options\">\n              <checkbox-component name=\"hide_cancellation_options\" label=\"Hide 'Cancel' option on booking page and emails.\" checked={this.hideCancellationOptions}>\n                <span slot=\"label\" class=\"label\">\n                  <p class=\"label-contents\">\n                    Hide the&nbsp;<strong>Cancel</strong>&nbsp;button on the Scheduling Page and in the email notifications.\n                  </p>\n                  <tooltip-component id=\"cancel\">\n                    <info-icon slot=\"tooltip-icon\" />\n                    <span slot=\"tooltip-content\">\n                      Hide the 'Cancel' button on the Scheduling page and in the email notifications. If enabled, the guest will not be able to cancel the booking.\n                    </span>\n                  </tooltip-component>\n                </span>\n              </checkbox-component>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-customize-booking-settings.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-customize-booking-settings/nylas-customize-booking-settings.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-customize-booking-settings` component is a UI component that displays the booking calendar picker.\n * @part ncbs - The booking calendar picker container\n * @part ncbs__header - The header of the booking calendar picker\n * @part ncbs__settings - The settings container\n * @part ncbs__settings-div - The div inside the settings container that contains the checkbox and tooltip for each setting\n * @part ncbs__additional_guests - The additional guests setting\n * @part ncbs__cancellation_options - The cancellation options setting\n * @part ncbs__rescheduling_options - The rescheduling options setting\n */\n@Component({\n  tag: 'nylas-customize-booking-settings',\n  styleUrl: 'nylas-customize-booking-settings.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCustomizeBookingSettings {\n  @Element() host!: HTMLNylasCustomizeBookingSettingsElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * The default additional guests hidden setting as set in the configuration.\n   */\n  @Prop() defaultHideAdditionalGuests: boolean = this.selectedConfiguration?.scheduler?.hide_additional_guests ?? false;\n\n  /**\n   * The default hide cancellation options setting as set in the configuration.\n   */\n  @Prop() defaultHideCancellationOptions: boolean = this.selectedConfiguration?.scheduler?.hide_cancellation_options ?? false;\n\n  /**\n   * The default hide rescheduling options setting as set in the configuration.\n   */\n  @Prop() defaultHideReschedulingOptions: boolean = this.selectedConfiguration?.scheduler?.hide_rescheduling_options ?? false;\n\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'customize-booking-settings';\n\n  /**\n   * State to store the allowed additional guests setting.\n   */\n  @State() allowGuestsToInvite: boolean = this.defaultHideAdditionalGuests;\n\n  /**\n   * State to store the hide cancel booking setting.\n   */\n  @State() hideCancellationOptions: boolean = this.defaultHideCancellationOptions;\n\n  /**\n   * State to store the hide reschedule booking setting.\n   */\n  @State() hideReschedulingOptions: boolean = this.defaultHideReschedulingOptions;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * This event is fired when the selected booking calendar changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\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-customize-booking-settings', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-customize-booking-settings', 'selectedConfigurationChangedHandler', newValue);\n    this.allowGuestsToInvite = !newValue?.scheduler?.hide_additional_guests;\n    this.hideCancellationOptions = newValue?.scheduler?.hide_cancellation_options ?? false;\n    this.hideReschedulingOptions = newValue?.scheduler?.hide_rescheduling_options ?? false;\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-customize-booking-settings', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-customize-booking-settings', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-customize-booking-settings', '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-customize-booking-settings', 'componentDidLoad');\n  }\n\n  componentWillUpdate() {\n    debug('nylas-customize-booking-settings', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-customize-booking-settings', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-customize-booking-settings', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-customize-booking-settings', 'componentDidRender');\n  }\n\n  @Listen('nylasFormCheckboxToggled')\n  checkboxToggledHandler(event: CustomEvent<{ name: string; checked: boolean }>) {\n    const { name, checked } = event.detail;\n    switch (name) {\n      case 'hide_additional_guests':\n        this.allowGuestsToInvite = checked;\n        break;\n      case 'hide_cancellation_options':\n        this.hideCancellationOptions = checked;\n        break;\n      case 'hide_rescheduling_options':\n        this.hideReschedulingOptions = checked;\n        break;\n    }\n    this.valueChanged.emit({\n      value: JSON.stringify({\n        additionalGuestsHidden: !this.allowGuestsToInvite,\n        hideCancellationOptions: this.hideCancellationOptions,\n        hideReschedulingOptions: this.hideReschedulingOptions,\n      }),\n      name: this.name,\n    });\n    this.internals.setFormValue(\n      JSON.stringify({\n        additionalGuestsHidden: !this.allowGuestsToInvite,\n        hideCancellationOptions: this.hideCancellationOptions,\n        hideReschedulingOptions: this.hideReschedulingOptions,\n      }),\n      this.name,\n    );\n  }\n\n  @RegisterComponent<NylasCustomizeBookingSettings, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-customize-booking-settings',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-customize-booking-settings\" part=\"ncbs\">\n          <div class=\"header\" part=\"ncbs__header\">\n            <h3>Additional settings</h3>\n            <p>Booking settings for the event.</p>\n          </div>\n\n          <div class=\"nylas-customize-booking-settings__settings\" part=\"ncbs__settings\">\n            <div class=\"nylas-customize-booking-settings__settings-div\" part=\"ncbs__settings-div , ncbs__additional_guests\">\n              <checkbox-component name=\"hide_additional_guests\" label=\"Allow guests to invite additional guests.\" checked={this.allowGuestsToInvite}>\n                <span slot=\"label\" class=\"label\">\n                  <p class=\"label-contents\">Allow guests to invite additional guests to the booking.</p>\n                  <tooltip-component id=\"guests\">\n                    <info-icon slot=\"tooltip-icon\" />\n                    <span slot=\"tooltip-content\">\n                      Allow guests to invite additional guests to the event. If enabled, the guest will be able to add additional guests' email addresses.\n                    </span>\n                  </tooltip-component>\n                </span>\n              </checkbox-component>\n            </div>\n            <div class=\"nylas-customize-booking-settings__settings-div\" part=\"ncbs__settings-div , ncbs__rescheduling_options\">\n              <checkbox-component name=\"hide_rescheduling_options\" label=\"Hide 'Reschedule' option on booking page and emails.\" checked={this.hideReschedulingOptions}>\n                <span slot=\"label\" class=\"label\">\n                  <p class=\"label-contents\">\n                    Hide the&nbsp;<strong>Reschedule</strong>&nbsp;button on the Scheduling Page and in the email notifications.\n                  </p>\n                  <tooltip-component id=\"reschedule\">\n                    <info-icon slot=\"tooltip-icon\" />\n                    <span slot=\"tooltip-content\">If enabled, the guest will not be able to reschedule the booking.</span>\n                  </tooltip-component>\n                </span>\n              </checkbox-component>\n            </div>\n            <div class=\"nylas-customize-booking-settings__settings-div\" part=\"ncbs__settings-div , ncbs__cancellation_options\">\n              <checkbox-component name=\"hide_cancellation_options\" label=\"Hide 'Cancel' option on booking page and emails.\" checked={this.hideCancellationOptions}>\n                <span slot=\"label\" class=\"label\">\n                  <p class=\"label-contents\">\n                    Hide the&nbsp;<strong>Cancel</strong>&nbsp;button on the Scheduling Page and in the email notifications.\n                  </p>\n                  <tooltip-component id=\"cancel\">\n                    <info-icon slot=\"tooltip-icon\" />\n                    <span slot=\"tooltip-content\">If enabled, the guest will not be able to cancel the booking.</span>\n                  </tooltip-component>\n                </span>\n              </checkbox-component>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.css

@@ -72,6 +72,9 @@
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.0588235294);
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1019607843);
 }
+.scheduler-editor .form-contents .tabs .tab.hide {
+  display: none;
+}
 .scheduler-editor .form-contents .tab-content {
   max-width: 692px;
   overflow-y: auto;