@nylas/web-elements 1.1.0-canary.16 → 1.1.0-canary.18

package/dist/cjs/microsoft-logo-icon.cjs.entry.js

@@ -13,7 +13,7 @@ const MicrosoftLogoIcon = class {
         this.height = '22';
     }
     render() {
-        return (index.h("svg", { key: '4aa3482048f90ecbcb46d539716464bdf2c20e47', width: this.width, height: this.height, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '27924938927bdc57e665d91623f07684aea3a6ee', d: "M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z", fill: "#F35325" }), index.h("path", { key: '91decf0bfe7ef26f93ea724fa9738d1ffa1ae4a6', d: "M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z", fill: "#81BC06" }), index.h("path", { key: '0f455cec58fd99a755157ab9ca950242a634d541', d: "M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z", fill: "#05A6F0" }), index.h("path", { key: '80c930047e54c708d5f7cde3d88f33f2a0d0dbd5', d: "M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z", fill: "#FFBA08" })));
+        return (index.h("svg", { key: '3dd5e1a94ca5889c14f7695c9077f9be0cbc4d00', width: this.width, height: this.height, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '381068331f74d7f1a06c0ca0cd9dfc2b58f72a10', d: "M0.043457 0.043457H10.4782V10.4782H0.043457V0.043457Z", fill: "#F35325" }), index.h("path", { key: '62c7be7371433602169a19fe2657e0a1635f516e', d: "M11.5217 0.043457H21.9565V10.4782H11.5217V0.043457Z", fill: "#81BC06" }), index.h("path", { key: '72464e489d4cfd78f016282a743a1000fb732368', d: "M0.043457 11.5217H10.4782V21.9565H0.043457V11.5217Z", fill: "#05A6F0" }), index.h("path", { key: 'd766c4d950ee3122cf4916b53ce5f630b52a30bb', d: "M11.5217 11.5217H21.9565V21.9565H11.5217V11.5217Z", fill: "#FFBA08" })));
     }
 };
 MicrosoftLogoIcon.style = iconCss;

package/dist/cjs/multi-select-dropdown.cjs.entry.js

@@ -129,9 +129,9 @@ const MultiSelectDropdown = class {
             }, class: { selected: !!option.selected } }, index.h("label", { htmlFor: option.value }, index.h("input", { "aria-hidden": "true", id: option.value, type: "checkbox", checked: option.selected }), index.h("span", null, option.label))));
     }
     render() {
-        return (index.h(index.Host, { key: '89819bc74cdae708fbdd60dc3f4160c0047d1414' }, index.h("div", { key: '2c3568247699101568790460b5d9ef6780cef096', class: "dropdown", part: "msd_dropdown" }, index.h("label", { key: 'd524fd75f9a8fcde85727904b6e2b21e5f6cbe0e', class: "dropdown-label" }, this.label, index.h("slot", { key: 'e4442acbc279840d6c3d815907fa79f6fd7a11d5', name: "label-icon", "aria-hidden": "true" })), index.h("button", { key: '8b66520137e83747c4e74237c74598fa2081275f', part: "msd_dropdown-button", class: { dropbtn: true, open: this.isOpen }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, index.h("slot", { key: 'e6ba4fd51fb6cf3dde63757f9eef8d1538a9a91d', name: "select-icon", "aria-hidden": "true" }), index.h("span", { key: 'bfc7c1bdc8046bb3a27f11a587619ecfe6d62d32', class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1
+        return (index.h(index.Host, { key: 'af0befb6c6c059e41a99ebe56c9632e6445e897b' }, index.h("div", { key: 'e93abae0184670a75caa02b4f687a374fce9a055', class: "dropdown", part: "msd_dropdown" }, index.h("label", { key: 'cb7ab81e0c7e23934dfc814a4c5281470e2ad510', class: "dropdown-label" }, this.label, index.h("slot", { key: '88fdcec62b47bf2b7da977c06b36300722789373', name: "label-icon", "aria-hidden": "true" })), index.h("button", { key: '17e03081353c32b5f571e7655fbe7b0c2ea87a35', part: "msd_dropdown-button", class: { dropbtn: true, open: this.isOpen }, onClick: () => this.toggleDropdown(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.name, onKeyDown: e => this.handleSelectButtonKeyDown(e) }, index.h("slot", { key: 'f1925d4d315c6be091a07f18261e574792883fd7', name: "select-icon", "aria-hidden": "true" }), index.h("span", { key: '02c03946856eed3b6207ec84abbba0d16554af9f', class: "selected-option", part: "msd_dropdown-button-selected-label" }, this.getSelectedOptions().length > 1
             ? `Multiple ${this.name}s selected`
-            : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label), index.h("span", { key: 'f93e18714865b54dee754d2764b0b3bec3a4dead', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, index.h("chevron-icon", { key: 'd91d60366c8503e84cb6e41e43ac77f911f9517c', width: "16", height: "16" }))), this.isOpen ? null : (index.h("div", { class: 'selected-options' }, this.getSelectedOptions().map(option => (index.h("span", { class: "selected-option" }, option.label, index.h("button", { key: option.label, onClick: () => this.selectOption(option) }, index.h("close-icon", null))))))), this.isOpen ? (index.h("div", { class: "dropdown-content", part: "msd_dropdown-content" }, index.h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": true, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: e => this.handleListboxKeydown(e) }, this.availableOptions.map(option => this.renderOption(option))))) : null)));
+            : this.availableOptions.filter(o => o.selected)[0]?.label ?? this.availableOptions[0]?.label), index.h("span", { key: 'bbd36a37a7ee28e299da6b22612206e4bbbcf8db', class: this.isOpen ? 'open' : 'closed', "aria-hidden": "true" }, index.h("chevron-icon", { key: '4e6f9c3dfd33c8d87b9584648487783e417961c6', width: "16", height: "16" }))), this.isOpen ? null : (index.h("div", { class: 'selected-options' }, this.getSelectedOptions().map(option => (index.h("span", { class: "selected-option" }, option.label, index.h("button", { key: option.label, onClick: () => this.selectOption(option) }, index.h("close-icon", null))))))), this.isOpen ? (index.h("div", { class: "dropdown-content", part: "msd_dropdown-content" }, index.h("ul", { tabindex: "-1", role: "listbox", "aria-label": this.name, "aria-multiselectable": true, "aria-activedescendant": this.ariaActivedescendant, onKeyDown: e => this.handleListboxKeydown(e) }, this.availableOptions.map(option => this.renderOption(option))))) : null)));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/nylas-additional-participants.cjs.entry.js

@@ -27,6 +27,7 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 const NylasAdditionalParticipants = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -53,7 +54,7 @@ const NylasAdditionalParticipants = class {
     }
     componentDidLoad() {
         utils.debug('nylas-additional-participants', 'componentDidLoad');
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
     disconnectedCallback() {
         utils.debug('nylas-additional-participants', 'disconnectedCallback');
@@ -63,34 +64,37 @@ const NylasAdditionalParticipants = class {
         const index = event.detail.name;
         this.participants[index].email = event.detail.value;
         const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);
+        this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;
         this.participants[index].name = participant?.name || event.detail.value;
         this.participants = [...this.participants];
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
     onParticipantChange(event, index) {
         utils.debug('nylas-additional-participants', 'onParticipantChange');
         this.participants[index].email = event.target.value;
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
     addParticipant() {
         utils.debug('nylas-additional-participants', 'addParticipant');
-        this.participants = [...this.participants, { name: '', email: '', is_organizer: false, availability: { calendar_ids: ['primary'] } }];
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.participants = [...this.participants, { name: '', email: '', is_organizer: false }];
+        this.updateFormValue();
     }
     removeParticipant(index) {
         utils.debug('nylas-additional-participants', 'removeParticipant');
         this.participants = this.participants.filter((_, i) => i !== index);
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
     validate(email, index) {
         utils.debug('nylas-additional-participants', 'validate');
         const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         const valid = regex.test(String(email).toLowerCase());
         this.participants[index].is_valid = valid;
-        this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');
+        this.updateFormValue();
     }
-    participantsWithouOrganizer() {
-        return this.participants.filter(participant => !participant.is_organizer);
+    updateFormValue() {
+        utils.debug('nylas-additional-participants', 'updateFormValue');
+        this.internals.setFormValue(JSON.stringify(this.participants), this.name);
+        this.valueChanged.emit({ value: JSON.stringify(this.participants), name: this.name });
     }
     getArrayDifference(array1, array2) {
         const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));
@@ -99,11 +103,11 @@ const NylasAdditionalParticipants = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '5f2ab58dd16c4052b17111fa260d676c908bcf58' }, index.h("nylas-form-card", { key: 'a636c3ef694cc333b15830c35eb13fb51ff69ca0' }, index.h("h3", { key: '13425f0338b7b88746844c79104f008323bdcbf1', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Additional participants"), index.h("p", { key: '7ebe90bb5ef933b7632c8b30aa9b1ccf8f08c6a6', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add anyone else who would be joining for this event."), index.h("div", { key: '3662713253e568cbf70b4d73e4eb883bb6c329a2', slot: "content", class: "nylas-additional-participants__content" }, index.h("div", { key: '577176dfd841875992a420e243be2905968452d5' }, this.participants.map((participant, index$1) => {
+        return (index.h(index.Host, { key: '30915e4727e68b0652fc265ced20a3fce93f94d7' }, index.h("nylas-form-card", { key: 'e652c77a0e382aeaab234593ad1cd8fa6cc1b858' }, index.h("h3", { key: 'ee6d3ac07461ef43976e32069cd978a2dc32ba96', slot: "header-title", class: "nylas-additional-participants__title", part: "nap__title" }, "Additional participants"), index.h("p", { key: '72d712c00b839ad8220ea23cce11cfc233cf14b5', slot: "header-subtitle", class: "nylas-additional-participants__subtitle", part: "nap__subtitle" }, "Add anyone else who would be joining for this event."), index.h("div", { key: '87b08e14dc5a16b2381728263e079c46545284f4', slot: "content", class: "nylas-additional-participants__content" }, index.h("div", { key: 'da67ac11f9c977007ce885531bcdcbf9c59aca0c' }, this.participants.map((participant, index$1) => {
             return (index.h("div", { class: 'nylas-additional-participants__input_group', part: "nap__input_group" }, index.h("label", null, participant.is_organizer ? 'Organizer' : `Participant ${index$1}`), index.h("div", { part: "nap__input_wrapper", class: `nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}` }, index.h("div", { class: { 'nylas-additional-participants__input': true, 'organizer': participant.is_organizer }, part: "nap__input" }, participant.is_organizer ? (index.h("input", { type: "text", value: participant.email, onInput: e => {
                     this.onParticipantChange(e, index$1);
-                }, readOnly: participant.is_organizer, onBlur: () => this.validate(participant.email, index$1) })) : (index.h("input-dropdown", { name: `${index$1}`, inputValue: participant.email, options: this.getArrayDifference(this.participantOptions || [], this.participants) })), !participant.is_organizer && (index.h("button", { onClick: () => this.removeParticipant(index$1), part: "nap__remove-participant" }, index.h("close-icon", null)))))));
-        })), index.h("button", { key: '74f99ea0eb6a5a5873a7b5dbed5caa4bf557fa4e', class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, index.h("add-circle-icon", { key: '9d139a5ba18bdec17acaa1dc9d9d773d0a7b1a5d' }), " ", index.h("span", { key: '89778f530c53d8ffa55c7e3bb67bdd5b19c4f881' }, "Add ", this.participants.length > 1 ? 'another' : 'a', " participant"))))));
+                }, readOnly: participant.is_organizer, onBlur: () => this.validate(participant.email, index$1) })) : (index.h("input-dropdown", { name: `${index$1}`, filterable: true, inputValue: participant.email, options: this.getArrayDifference(this.participantOptions || [], this.participants) })), !participant.is_organizer && (index.h("button", { onClick: () => this.removeParticipant(index$1), part: "nap__remove-participant" }, index.h("close-icon", null)))))));
+        })), index.h("button", { key: 'dd0f412f9affa5cf2b3ab5a331365d5b217e1ade', class: "nylas-additional-participants__add", part: "nap__add-participant", onClick: () => this.addParticipant() }, index.h("add-circle-icon", { key: '089167b221913ef3e0393efa23db2698a93b3e73' }), " ", index.h("span", { key: '70860b8258a871e714f2f33890d35ec46835f349' }, "Add ", this.participants.length > 1 ? 'another' : 'a', " participant"))))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }

package/dist/cjs/nylas-additional-participants.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nylas-additional-participants.entry.cjs.js","mappings":"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","names":["debug","h","Host","index","RegisterComponent"],"sources":["src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.scss?tag=nylas-additional-participants&encapsulation=shadow","src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  margin: 1rem;\n  @include default-css-variables;\n}\n\n.nylas-additional-participants__title {\n  color: var(--nylas-base-nylas-base-900-aaa, #101323);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px; /* 125% */\n  margin: 0;\n  text-align: left;\n}\n.nylas-additional-participants__subtitle {\n  color: var(--nylas-base-600);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n  margin: 0.25rem 0px 0px;\n  text-align: left;\n}\n.nylas-additional-participants__content {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.nylas-additional-participants__input_group {\n  padding-top: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n  }\n}\n.nylas-additional-participants__input_wrapper {\n  display: flex;\n  border-width: 1;\n  border-radius: 8px;\n  border: 1px solid var(--nylas-base-300);\n  button {\n    padding: 12px;\n    border: none;\n    border-left: 1px solid var(--nylas-base-300);\n    background: none;\n    cursor: pointer;\n    &:hover,\n    &:active {\n      color: var(--nylas-primary);\n    }\n  }\n}\n.nylas-additional-participants__input_wrapper_organizer {\n  background: var(--nylas-base-50);\n}\n\n.nylas-additional-participants__input {\n  flex: 1;\n  display: flex;\n  justify-content: space-between;\n  &.organizer {\n    padding: 12px 16px;\n  }\n  input {\n    border: none;\n    outline: none;\n    background: none;\n    width: 100%;\n  }\n  input-dropdown {\n    width: 100%;\n  }\n  input-dropdown::part(id_dropdown) {\n    width: 100%;\n    height: 100%;\n  }\n  input-dropdown::part(id_dropdown-input) {\n    height: 100%;\n    border-radius: var(--nylas-border-radius-2x);\n    border: none;\n    border-top-right-radius: initial;\n    border-bottom-right-radius: initial;\n    padding-left: 16px;\n  }\n}\n\n.nylas-additional-participants__add {\n  padding: 12px;\n  display: flex;\n  align-items: center;\n  border: none;\n  background: none;\n  cursor: pointer;\n  span {\n    padding: 0 8px;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n  }\n  &:hover,\n  &:active {\n    color: var(--nylas-primary);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Prop, State, Watch, h, Element, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\ntype Participant = {\n  name?: string;\n  email: string;\n  is_valid?: boolean;\n  is_organizer: boolean;\n  availability?: Availability;\n  booking?: Booking;\n};\ntype Availability = {\n  calendar_ids: string[];\n};\ntype Booking = {\n  calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n *\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n *\n */\n@Component({\n  tag: 'nylas-additional-participants',\n  styleUrl: 'nylas-additional-participants.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n  @Element() host!: HTMLNylasAdditionalParticipantsElement;\n  @Prop() name: string = 'participants';\n  @Prop() eventParticipants?: Participant[];\n  @Prop() participantOptions?: Participant[];\n  @AttachInternals() internals!: ElementInternals;\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-additional-participants', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @State() participants: Participant[] = this.eventParticipants ?? [];\n  @State() participantsValid: boolean = true;\n  connectedCallback() {\n    debug('nylas-additional-participants', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-additional-participants', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-additional-participants', 'componentDidLoad');\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-additional-participants', 'disconnectedCallback');\n  }\n\n  @Listen('inputOptionChanged')\n  onInputOptionChanged(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-additional-participants', 'onInputOptionChanged');\n    const index = event.detail.name;\n    this.participants[index].email = event.detail.value;\n    const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);\n    this.participants[index].name = participant?.name || event.detail.value;\n    this.participants = [...this.participants];\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  onParticipantChange(event, index) {\n    debug('nylas-additional-participants', 'onParticipantChange');\n    this.participants[index].email = event.target.value;\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  addParticipant() {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = [...this.participants, { name: '', email: '', is_organizer: false, availability: { calendar_ids: ['primary'] } }];\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  removeParticipant(index: number) {\n    debug('nylas-additional-participants', 'removeParticipant');\n    this.participants = this.participants.filter((_, i) => i !== index);\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n  validate(email, index) {\n    debug('nylas-additional-participants', 'validate');\n    const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n    const valid = regex.test(String(email).toLowerCase());\n    this.participants[index].is_valid = valid;\n    this.internals.setFormValue(JSON.stringify(this.participantsWithouOrganizer()), 'participants');\n  }\n\n  participantsWithouOrganizer() {\n    return this.participants.filter(participant => !participant.is_organizer);\n  }\n\n  // Filter out the participants that are already added\n  getArrayDifference(array1: Participant[], array2: Participant[]) {\n    const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));\n    return filtered.map(participant => {\n      return { value: participant.email, label: participant.email };\n    });\n  }\n\n  @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-additional-participants',\n    stateToProps: new Map([['schedulerConfig.additionalParticipants', 'participantOptions']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n            Additional participants\n          </h3>\n          <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n            Add anyone else who would be joining for this event.\n          </p>\n          <div slot=\"content\" class=\"nylas-additional-participants__content\">\n            <div>\n              {this.participants.map((participant, index) => {\n                return (\n                  <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n                    <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n                    <div\n                      part=\"nap__input_wrapper\"\n                      class={`nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}`}\n                    >\n                      <div class={{ 'nylas-additional-participants__input': true, 'organizer': participant.is_organizer }} part=\"nap__input\">\n                        {participant.is_organizer ? (\n                          <input\n                            type=\"text\"\n                            value={participant.email}\n                            onInput={e => {\n                              this.onParticipantChange(e, index);\n                            }}\n                            readOnly={participant.is_organizer}\n                            onBlur={() => this.validate(participant.email, index)}\n                          />\n                        ) : (\n                          <input-dropdown name={`${index}`} inputValue={participant.email} options={this.getArrayDifference(this.participantOptions || [], this.participants)} />\n                        )}\n                        {!participant.is_organizer && (\n                          <button onClick={() => this.removeParticipant(index)} part=\"nap__remove-participant\">\n                            <close-icon />\n                          </button>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n            <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n              <add-circle-icon /> <span>Add {this.participants.length > 1 ? 'another' : 'a'} participant</span>\n            </button>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-additional-participants.entry.cjs.js","mappings":"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","names":["debug","h","Host","index","RegisterComponent"],"sources":["src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.scss?tag=nylas-additional-participants&encapsulation=shadow","src/components/scheduler-editor/nylas-additional-participants/nylas-additional-participants.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  margin: 1rem;\n  @include default-css-variables;\n}\n\n.nylas-additional-participants__title {\n  color: var(--nylas-base-nylas-base-900-aaa, #101323);\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px; /* 125% */\n  margin: 0;\n  text-align: left;\n}\n.nylas-additional-participants__subtitle {\n  color: var(--nylas-base-600);\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n  margin: 0.25rem 0px 0px;\n  text-align: left;\n}\n.nylas-additional-participants__content {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.nylas-additional-participants__input_group {\n  padding-top: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  label {\n    display: flex;\n    align-items: center;\n    color: var(--nylas-base-800);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 150%;\n  }\n}\n.nylas-additional-participants__input_wrapper {\n  display: flex;\n  border-width: 1;\n  border-radius: 8px;\n  border: 1px solid var(--nylas-base-300);\n  button {\n    padding: 12px;\n    border: none;\n    border-left: 1px solid var(--nylas-base-300);\n    background: none;\n    cursor: pointer;\n    &:hover,\n    &:active {\n      color: var(--nylas-primary);\n    }\n  }\n}\n.nylas-additional-participants__input_wrapper_organizer {\n  background: var(--nylas-base-50);\n}\n\n.nylas-additional-participants__input {\n  flex: 1;\n  display: flex;\n  justify-content: space-between;\n  &.organizer {\n    padding: 12px 16px;\n  }\n  input {\n    border: none;\n    outline: none;\n    background: none;\n    width: 100%;\n  }\n  input-dropdown {\n    width: 100%;\n  }\n  input-dropdown::part(id_dropdown) {\n    width: 100%;\n    height: 100%;\n  }\n  input-dropdown::part(id_dropdown-input) {\n    height: 100%;\n    border-radius: var(--nylas-border-radius-2x);\n    border: none;\n    border-top-right-radius: initial;\n    border-bottom-right-radius: initial;\n    padding-left: 16px;\n  }\n}\n\n.nylas-additional-participants__add {\n  padding: 12px;\n  display: flex;\n  align-items: center;\n  border: none;\n  background: none;\n  cursor: pointer;\n  span {\n    padding: 0 8px;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n  }\n  &:hover,\n  &:active {\n    color: var(--nylas-primary);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, Prop, State, Watch, h, Element, Listen, EventEmitter } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Event } from '@stencil/core';\n\ntype Participant = {\n  name?: string;\n  email: string;\n  is_valid?: boolean;\n  is_organizer: boolean;\n  availability?: Availability;\n  booking?: Booking;\n};\ntype Availability = {\n  calendar_ids: string[];\n};\ntype Booking = {\n  calendar_id: string;\n};\n\n/**\n * The `nylas-additional-participants` component is a form input for adding additional participants to an event.\n *\n * @part nap__title - The title of the component.\n * @part nap__subtitle - The subtitle of the component.\n * @part nap__content - The content of the component.\n * @part nap__input_group - The input group of the component.\n * @part nap__input_wrapper - The input wrapper of the component.\n * @part nap__input - The input of the component.\n * @part nap__remove-participant - The remove participant button of the component.\n * @part nap__add-participant - The add participant button of the component.\n *\n */\n@Component({\n  tag: 'nylas-additional-participants',\n  styleUrl: 'nylas-additional-participants.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAdditionalParticipants {\n  @Element() host!: HTMLNylasAdditionalParticipantsElement;\n  @Prop() name: string = 'participants';\n  @Prop() eventParticipants?: Participant[];\n  @Prop() participantOptions?: Participant[];\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * This event is fired when the selected participants change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\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-additional-participants', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @State() participants: Participant[] = this.eventParticipants ?? [];\n  @State() participantsValid: boolean = true;\n  connectedCallback() {\n    debug('nylas-additional-participants', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-additional-participants', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-additional-participants', 'componentDidLoad');\n    this.updateFormValue();\n  }\n\n  disconnectedCallback() {\n    debug('nylas-additional-participants', 'disconnectedCallback');\n  }\n\n  @Listen('inputOptionChanged')\n  onInputOptionChanged(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-additional-participants', 'onInputOptionChanged');\n    const index = event.detail.name;\n    this.participants[index].email = event.detail.value;\n    const participant = this.participantOptions?.find(participant => participant.email === event.detail.value);\n    this.participants[index].availability = participant ? { calendar_ids: ['primary'] } : undefined;\n    this.participants[index].name = participant?.name || event.detail.value;\n    this.participants = [...this.participants];\n    this.updateFormValue();\n  }\n  onParticipantChange(event, index) {\n    debug('nylas-additional-participants', 'onParticipantChange');\n    this.participants[index].email = event.target.value;\n    this.updateFormValue();\n  }\n  addParticipant() {\n    debug('nylas-additional-participants', 'addParticipant');\n    this.participants = [...this.participants, { name: '', email: '', is_organizer: false }];\n    this.updateFormValue();\n  }\n  removeParticipant(index: number) {\n    debug('nylas-additional-participants', 'removeParticipant');\n    this.participants = this.participants.filter((_, i) => i !== index);\n    this.updateFormValue();\n  }\n  validate(email, index) {\n    debug('nylas-additional-participants', 'validate');\n    const regex = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n    const valid = regex.test(String(email).toLowerCase());\n    this.participants[index].is_valid = valid;\n    this.updateFormValue();\n  }\n\n  updateFormValue() {\n    debug('nylas-additional-participants', 'updateFormValue');\n    this.internals.setFormValue(JSON.stringify(this.participants), this.name);\n    this.valueChanged.emit({ value: JSON.stringify(this.participants), name: this.name });\n  }\n\n  // Filter out the participants that are already added\n  getArrayDifference(array1: Participant[], array2: Participant[]) {\n    const filtered = array1.filter(participant1 => !array2.some(participant2 => participant1.email === participant2.email));\n    return filtered.map(participant => {\n      return { value: participant.email, label: participant.email };\n    });\n  }\n\n  @RegisterComponent<NylasAdditionalParticipants, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-additional-participants',\n    stateToProps: new Map([['schedulerConfig.additionalParticipants', 'participantOptions']]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <nylas-form-card>\n          <h3 slot=\"header-title\" class=\"nylas-additional-participants__title\" part=\"nap__title\">\n            Additional participants\n          </h3>\n          <p slot=\"header-subtitle\" class=\"nylas-additional-participants__subtitle\" part=\"nap__subtitle\">\n            Add anyone else who would be joining for this event.\n          </p>\n          <div slot=\"content\" class=\"nylas-additional-participants__content\">\n            <div>\n              {this.participants.map((participant, index) => {\n                return (\n                  <div class={'nylas-additional-participants__input_group'} part=\"nap__input_group\">\n                    <label>{participant.is_organizer ? 'Organizer' : `Participant ${index}`}</label>\n                    <div\n                      part=\"nap__input_wrapper\"\n                      class={`nylas-additional-participants__input_wrapper ${participant.is_organizer && 'nylas-additional-participants__input_wrapper_organizer'} ${participant.is_valid === false && 'nylas-additional-participants__input_wrapper_invalid'}`}\n                    >\n                      <div class={{ 'nylas-additional-participants__input': true, 'organizer': participant.is_organizer }} part=\"nap__input\">\n                        {participant.is_organizer ? (\n                          <input\n                            type=\"text\"\n                            value={participant.email}\n                            onInput={e => {\n                              this.onParticipantChange(e, index);\n                            }}\n                            readOnly={participant.is_organizer}\n                            onBlur={() => this.validate(participant.email, index)}\n                          />\n                        ) : (\n                          <input-dropdown\n                            name={`${index}`}\n                            filterable={true}\n                            inputValue={participant.email}\n                            options={this.getArrayDifference(this.participantOptions || [], this.participants)}\n                          />\n                        )}\n                        {!participant.is_organizer && (\n                          <button onClick={() => this.removeParticipant(index)} part=\"nap__remove-participant\">\n                            <close-icon />\n                          </button>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n            <button class=\"nylas-additional-participants__add\" part=\"nap__add-participant\" onClick={() => this.addParticipant()}>\n              <add-circle-icon /> <span>Add {this.participants.length > 1 ? 'another' : 'a'} participant</span>\n            </button>\n          </div>\n        </nylas-form-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/nylas-availability-picker.cjs.entry.js

@@ -9,7 +9,7 @@ const constants = require('./constants-1449c26f.js');
 require('./buffer-es6-e5b4d313.js');
 require('./_commonjsHelpers-9463df90.js');
 
-const nylasAvailabilityPickerCss = ":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-availability-picker{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-availability-picker .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-availability-picker .header h3{margin:0;font-size:16px;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-availability-picker .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}.nylas-availability-picker .content{padding:1rem;color:var(--nylas-base-900);font-size:16px;font-family:var(--nylas-font-family)}@media screen and (max-width: 504px){.nylas-availability-picker .content{font-size:15px}}.nylas-availability-picker .content .select-timezone{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--nylas-base-200);padding-bottom:1rem;gap:1rem}.nylas-availability-picker .content .select-timezone h4{display:flex;gap:0.5rem;align-items:center;margin:0;font-size:16px;font-weight:500;line-height:20px}@media screen and (max-width: 504px){.nylas-availability-picker .content .select-timezone h4{font-size:15px}}.nylas-availability-picker .content .availability{display:flex;flex-direction:column;gap:1rem;padding:0 0.5rem;margin:1rem 0}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability{gap:0.5rem;padding:0}}.nylas-availability-picker .content .availability .availability-day{display:grid;grid-template-columns:minmax(auto, 65px) 1fr minmax(auto, 40px);gap:1rem;align-items:baseline}@media screen and (max-width: 768px){.nylas-availability-picker .content .availability .availability-day{grid-template-columns:78px 1fr auto}}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day{display:inline-grid;gap:8px;grid-template-columns:60px 1fr auto}}.nylas-availability-picker .content .availability .availability-day .day{display:flex;gap:0.5rem;align-items:center}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .day{gap:0.25rem}}.nylas-availability-picker .content .availability .availability-day .day input[type=checkbox]{transform:scale(1.3)}.nylas-availability-picker .content .availability .availability-day .time-ranges span.unavailable{height:48px;display:flex;align-items:center;justify-content:center}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range{display:flex;gap:1.5rem;justify-content:space-between;align-items:baseline}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range{justify-content:unset;gap:0.5rem}}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers{display:flex;gap:1rem}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers{gap:0.5rem}}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers span{margin-top:0.75rem}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range:not(:last-of-type){margin-bottom:1rem}.nylas-availability-picker .content .availability .availability-day .time-ranges p.error{color:var(--nylas-error)}.nylas-availability-picker .content .availability .availability-day button{border:none;background:transparent;height:40px;cursor:pointer;color:var(--nylas-base-800)}.nylas-availability-picker .content .availability .availability-day button:hover,.nylas-availability-picker .content .availability .availability-day button:active{color:var(--nylas-primary)}select-dropdown{width:auto}select-dropdown::part(sd_dropdown-button){justify-content:initial}";
+const nylasAvailabilityPickerCss = ":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-availability-picker{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-availability-picker .header{padding:1rem}.nylas-availability-picker .header h3{margin:0;font-size:16px;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-availability-picker .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}.nylas-availability-picker .content{padding:1rem;color:var(--nylas-base-900);font-size:16px;font-family:var(--nylas-font-family);border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 504px){.nylas-availability-picker .content{font-size:15px}}.nylas-availability-picker .content .select-timezone{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--nylas-base-200);padding-bottom:1rem;gap:1rem}.nylas-availability-picker .content .select-timezone h4{display:flex;gap:0.5rem;align-items:center;margin:0;font-size:16px;font-weight:500;line-height:20px}@media screen and (max-width: 504px){.nylas-availability-picker .content .select-timezone h4{font-size:15px}}.nylas-availability-picker .content .availability{display:flex;flex-direction:column;gap:1rem;padding:0 0.5rem;margin:1rem 0}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability{gap:0.5rem;padding:0}}.nylas-availability-picker .content .availability .availability-day{display:grid;grid-template-columns:minmax(auto, 65px) 1fr minmax(auto, 40px);gap:1rem;align-items:baseline}@media screen and (max-width: 768px){.nylas-availability-picker .content .availability .availability-day{grid-template-columns:78px 1fr auto}}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day{display:inline-grid;gap:8px;grid-template-columns:60px 1fr auto}}.nylas-availability-picker .content .availability .availability-day .day{display:flex;gap:0.5rem;align-items:center}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .day{gap:0.25rem}}.nylas-availability-picker .content .availability .availability-day .day input[type=checkbox]{transform:scale(1.3)}.nylas-availability-picker .content .availability .availability-day .time-ranges span.unavailable{height:48px;display:flex;align-items:center;justify-content:center}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range{display:flex;gap:1.5rem;justify-content:space-between;align-items:baseline}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range{justify-content:unset;gap:0.5rem}}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers{display:flex;gap:1rem}@media screen and (max-width: 504px){.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers{gap:0.5rem}}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range .pickers span{margin-top:0.75rem}.nylas-availability-picker .content .availability .availability-day .time-ranges .time-range:not(:last-of-type){margin-bottom:1rem}.nylas-availability-picker .content .availability .availability-day .time-ranges p.error{color:var(--nylas-error)}.nylas-availability-picker .content .availability .availability-day button{border:none;background:transparent;height:40px;cursor:pointer;color:var(--nylas-base-800)}.nylas-availability-picker .content .availability .availability-day button:hover,.nylas-availability-picker .content .availability .availability-day button:active{color:var(--nylas-primary)}select-dropdown{width:auto}select-dropdown::part(sd_dropdown-button){justify-content:initial}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -40,6 +40,7 @@ const NylasAvailabilityPicker = class {
         this.openHours = undefined;
         this.name = 'availability';
         this.defaultTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        this.hideHeader = false;
         this.schedule = {
             SUN: [],
             MON: [{ start: '09:00am', end: '05:00pm' }],
@@ -57,20 +58,13 @@ const NylasAvailabilityPicker = class {
         this.host.setAttribute('name', newValue);
     }
     configChangedHandler(newConfig) {
-        const organizer = newConfig?.participants?.find(p => p.is_organizer);
-        if (organizer && organizer?.availability?.open_hours) {
-            this.openHoursToSchedule(organizer?.availability?.open_hours);
+        const defaultOpenHours = newConfig?.availability?.availability_rules?.default_open_hours;
+        if (defaultOpenHours) {
+            this.openHoursToSchedule(defaultOpenHours);
         }
     }
     scheduleChanged(newValue, oldValue) {
         if (newValue !== oldValue) {
-            this.valueChanged.emit({
-                value: {
-                    openHours: this.scheduleToOpenHours(newValue),
-                    timezone: this.timezone,
-                },
-                name: this.name,
-            });
             let overlapDays = {};
             Object.keys(newValue).forEach(key => {
                 const dayTimeRanges = newValue[key];
@@ -99,6 +93,13 @@ const NylasAvailabilityPicker = class {
                     timezone: this.timezone,
                 }));
             }
+            this.valueChanged.emit({
+                value: JSON.stringify({
+                    openHours: this.scheduleToOpenHours(newValue),
+                    timezone: this.timezone,
+                }),
+                name: this.name,
+            });
         }
     }
     nylasFormDropdownChangedHandler(event) {
@@ -108,10 +109,15 @@ const NylasAvailabilityPicker = class {
             if (typeof this.internals.setFormValue !== 'function') {
                 return;
             }
-            this.internals.setFormValue(JSON.stringify({
+            const updateValue = {
                 openHours: this.scheduleToOpenHours(this.schedule),
                 timezone: this.timezone,
-            }));
+            };
+            this.internals.setFormValue(JSON.stringify(updateValue));
+            this.valueChanged.emit({
+                value: JSON.stringify(updateValue),
+                name: this.name,
+            });
         }
     }
     connectedCallback() {
@@ -132,10 +138,15 @@ const NylasAvailabilityPicker = class {
         if (typeof this.internals.setFormValue !== 'function') {
             return;
         }
-        this.internals.setFormValue(JSON.stringify({
+        const updateValue = {
             openHours: this.scheduleToOpenHours(this.schedule),
             timezone: this.timezone,
-        }));
+        };
+        this.internals.setFormValue(JSON.stringify(updateValue));
+        this.valueChanged.emit({
+            value: JSON.stringify(updateValue),
+            name: this.name,
+        });
     }
     getOverlaps(timeRanges) {
         let timeRangesInMinutes = timeRanges.map((range, index) => ({
@@ -305,7 +316,7 @@ const NylasAvailabilityPicker = class {
             label: constants.TIMEZONE_MAP[key],
             value: key,
         }));
-        return (index.h(index.Host, { key: 'c032e8a3630fe918533895156285e4b37778d812' }, index.h("div", { key: '1582bd8c1f3ef09d793a7120dafb6c7d420c3e9a', class: "nylas-availability-picker" }, index.h("div", { key: '61f2c1de7921e15455d7b827379e7d4815f6fb13', class: "header", part: "nap__header" }, index.h("h3", { key: '238b0ab77477d06a62412fed051d5641924e46d4' }, "General availability"), index.h("p", { key: '81967b68c5077941a5bf3d055c9be9e41d4ae705' }, "Set your availability for scheduling meetings.")), index.h("div", { key: 'f1da5a939c1459bd7e9833cf9a97add09d75a822', class: "content" }, index.h("div", { key: '71e2f859541bd4fb2a4485f3350db5d6bbf73b00', class: "select-timezone", part: "nap__select-timezone" }, index.h("h4", { key: 'a136696a498fb1521d4d8d844b9b03e2e49ff93a', class: "sub-header" }, "Select timezone", index.h("span", { key: '52636e30a6dea12cb69d55bd258ed48837826c80', class: "icon" }, index.h("tooltip-component", { key: '9f0dbc8c234f3550e83bbce3226346981b764896' }, index.h("info-icon", { key: 'a8f556694bd02b710c89242a3d3057de5b7b0612', slot: "tooltip-icon" }), index.h("span", { key: 'a8a52dd9835c32becbae165fa972bf6be6e716fa', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), index.h("select-dropdown", { key: '4800272cc24dcd24c82a4a89f24131c11e528d8c', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, index.h("span", { key: '8b072e23cd0130f203696f5c99baaad07b1bbb2e', slot: "select-icon" }, index.h("globe-icon", { key: 'de4c7ef153bff887947d73ed458aa5de0786b576', width: "20", height: "20" })))), index.h("div", { key: '6234933a0307c253e33ad9242e06c71388ba7a0a', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
+        return (index.h(index.Host, { key: 'bb0a4148b2d9728d7a2a9fdab8359382dd1ae5d5' }, index.h("div", { key: '27c5e85931d318e6ec66a155faa78e021b570f70', class: "nylas-availability-picker", part: "nap" }, !this.hideHeader && (index.h("div", { class: "header", part: "nap__header" }, index.h("h3", null, "General availability"), index.h("p", null, "Set your availability for scheduling meetings."))), index.h("div", { key: 'f2b3434dc127fc19fe6fe915cdc5f4a9d12ba6e7', class: "content" }, index.h("div", { key: 'bd75cb0749168b32c6366aea6f4df5920d098ec7', class: "select-timezone", part: "nap__select-timezone" }, index.h("h4", { key: '0c74924a291afaa07ff5b06781720a8cbadeea4d', class: "sub-header" }, "Select timezone", index.h("span", { key: '64933b3f6623f2d0b13559406db3d14afa99e0b6', class: "icon" }, index.h("tooltip-component", { key: '09c42633826e0ad358b4877f7d48bb70ce7ca518' }, index.h("info-icon", { key: '9ea9340b193710d759e71081e59ad6ccf762e4a8', slot: "tooltip-icon" }), index.h("span", { key: '83e596171dc8fb74543b21e957855f9cd32423b1', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), index.h("select-dropdown", { key: 'd65b32234b1669a5e7bef4b88024f50548011b98', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, index.h("span", { key: '3387e2d39b7a052557d7668d5a7822fda1440da7', slot: "select-icon" }, index.h("globe-icon", { key: 'e92459b2ce063e199d8685f5a422a88e7a50fbd6', width: "20", height: "20" })))), index.h("div", { key: 'd510d9538189898f52e56388d661158e243fc8dd', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
             const day = key;
             const timeRanges = this.schedule[key];
             return (index.h("div", { class: "availability-day" }, index.h("div", { class: "day", part: "nap__day" }, index.h("input", { type: "checkbox", name: day, id: day, checked: timeRanges.length > 0, onClick: () => {

package/dist/cjs/nylas-availability-picker.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nylas-availability-picker.entry.cjs.js","mappings":"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","names":["debug","timeToMinutes","convertTo12HourFormat","minutesToTime","convertTo24HourFormat","TIMEZONE_MAP","h","Host","RegisterComponent"],"sources":["src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.scss?tag=nylas-availability-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-availability-picker {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  .header {\n    padding: 1rem;\n    border-bottom: 1px solid var(--nylas-base-200);\n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n    p {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n  }\n  .content {\n    padding: 1rem;\n    color: var(--nylas-base-900);\n    font-size: 16px;\n    font-family: var(--nylas-font-family);\n    @media #{$small-mobile} {\n      font-size: 15px;\n    }\n    .select-timezone {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-bottom: 1px solid var(--nylas-base-200);\n      padding-bottom: 1rem;\n      gap: 1rem;\n      h4 {\n        display: flex;\n        gap: 0.5rem;\n        align-items: center;\n        margin: 0;\n        font-size: 16px;\n        @media #{$small-mobile} {\n          font-size: 15px;\n        }\n        font-weight: 500;\n        line-height: 20px;\n      }\n    }\n    .availability {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      padding: 0 0.5rem;\n      @media #{$small-mobile} {\n        gap: 0.5rem;\n        padding: 0;\n      }\n      margin: 1rem 0;\n      .availability-day {\n        display: grid;\n        grid-template-columns: minmax(auto, 65px) 1fr minmax(auto, 40px);\n        @media #{$mobile} {\n          grid-template-columns: 78px 1fr auto;\n        }\n        @media #{$small-mobile} {\n          display: inline-grid;\n          gap: 8px;\n          grid-template-columns: 60px 1fr auto;\n        }\n        gap: 1rem;\n        align-items: baseline;\n        .day {\n          display: flex;\n          gap: 0.5rem;\n          @media #{$small-mobile} {\n            gap: 0.25rem;\n          }\n          align-items: center;\n\n          input[type='checkbox'] {\n            transform: scale(1.3);\n          }\n        }\n        .time-ranges {\n          span.unavailable {\n            height: 48px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n          }\n          .time-range {\n            display: flex;\n            gap: 1.5rem;\n            justify-content: space-between;\n            align-items: baseline;\n            @media #{$small-mobile} {\n              justify-content: unset;\n              gap: 0.5rem;\n            }\n            .pickers {\n              display: flex;\n              gap: 1rem;\n              @media #{$small-mobile} {\n                gap: 0.5rem;\n              }\n              span {\n                margin-top: 0.75rem;\n              }\n            }\n            &:not(:last-of-type) {\n              margin-bottom: 1rem;\n            }\n          }\n          p.error {\n            color: var(--nylas-error);\n          }\n        }\n        button {\n          border: none;\n          background: transparent;\n          height: 40px;\n          cursor: pointer;\n          color: var(--nylas-base-800);\n          &:hover,\n          &:active {\n            color: var(--nylas-primary);\n          }\n        }\n      }\n    }\n  }\n}\n\nselect-dropdown {\n  width: auto;\n}\n\nselect-dropdown::part(sd_dropdown-button) {\n  justify-content: initial;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { convertTo12HourFormat, convertTo24HourFormat, debug, minutesToTime, timeToMinutes } 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 { TIMEZONE_MAP } from '@/common/constants';\nimport { Configuration } from '@nylas/core';\n\nexport type OpenHours = {\n  days: number[];\n  start: string;\n  end: string;\n  timezone: string;\n};\n\nexport type Schedule = {\n  SUN: { start: string; end: string }[];\n  MON: { start: string; end: string }[];\n  TUE: { start: string; end: string }[];\n  WED: { start: string; end: string }[];\n  THU: { start: string; end: string }[];\n  FRI: { start: string; end: string }[];\n  SAT: { start: string; end: string }[];\n};\n\n/**\n * The `nylas-availability-picker` component is a form input for selecting availability (open hours).\n * @part nap__header - The header of the availability picker\n * @part nap__select-timezone - The timezone selection container\n * @part nap__select-timezone-button - The timezone selection button\n * @part nap__select-timezone-dropdown-content - The timezone selection dropdown content\n * @part nap__availability - The availability container\n * @part nap__day - The day container\n * @part nap__time-ranges - The time ranges container\n * @part nap__time-range - The time range container\n * @part nap__add-time-range - The add time range button\n * @part nap__time-picker-container - The time picker container\n * @part nap__time-picker-input - The time picker input\n * @part nap__time-picker-times - The time picker times\n */\n@Component({\n  tag: 'nylas-availability-picker',\n  styleUrl: 'nylas-availability-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAvailabilityPicker {\n  /**\n   * The element <nylas-availability-picker> itself.\n   */\n  @Element() host!: HTMLNylasAvailabilityPickerElement;\n  /**\n   * The selected configuration.\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The open hours to display.\n   */\n  @Prop() openHours?: OpenHours[];\n  /**\n   * The name of the availability picker.\n   */\n  @Prop() name: string = 'availability';\n  /*\n   * The default timezone or preset timezone.\n   */\n  @Prop() defaultTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * This event is fired when the selected availability / open hours change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: {\n      openHours: OpenHours[];\n      timezone: string;\n    };\n    name: string;\n  }>;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n  @State() schedule = {\n    SUN: [],\n    MON: [{ start: '09:00am', end: '05:00pm' }],\n    TUE: [{ start: '09:00am', end: '05:00pm' }],\n    WED: [{ start: '09:00am', end: '05:00pm' }],\n    THU: [{ start: '09:00am', end: '05:00pm' }],\n    FRI: [{ start: '09:00am', end: '05:00pm' }],\n    SAT: [],\n  };\n  /**\n   * The selected timezone state.\n   */\n  @State() timezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n  /**\n   * The overlapping time ranges state. This is used to display an error message when there are overlapping time ranges.\n   */\n  @State() overlapDays: { [key: string]: number[] } = {};\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-calendar-picker', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  configChangedHandler(newConfig: Configuration) {\n    const organizer = newConfig?.participants?.find(p => p.is_organizer);\n    if (organizer && organizer?.availability?.open_hours) {\n      this.openHoursToSchedule(organizer?.availability?.open_hours);\n    }\n  }\n\n  @Watch('schedule')\n  scheduleChanged(newValue: Schedule, oldValue: Schedule) {\n    if (newValue !== oldValue) {\n      this.valueChanged.emit({\n        value: {\n          openHours: this.scheduleToOpenHours(newValue),\n          timezone: this.timezone,\n        },\n        name: this.name,\n      });\n      let overlapDays: { [key: string]: number[] } = {};\n      Object.keys(newValue).forEach(key => {\n        const dayTimeRanges = newValue[key];\n        if (dayTimeRanges.length > 0) {\n          const overlaps = this.getOverlaps(dayTimeRanges);\n          if (overlaps.length > 0) {\n            overlapDays[key] = overlaps;\n          }\n        }\n      });\n      this.overlapDays = overlapDays;\n      if (typeof this.internals.setFormValue !== 'function') {\n        return;\n      }\n      if (Object.keys(overlapDays).length > 0) {\n        const element = this.host.shadowRoot?.getElementById(Object.keys(overlapDays)[0]) as HTMLInputElement;\n        if (element) {\n          debug('nylas-availability-picker', 'The time ranges are overlapping. Overlap: ', overlapDays);\n          this.internals.setValidity({ customError: true }, 'Overlapping time ranges found', element);\n        }\n      } else {\n        this.internals.setValidity({ customError: false });\n        this.internals.setFormValue(\n          JSON.stringify({\n            openHours: this.scheduleToOpenHours(this.schedule),\n            timezone: this.timezone,\n          }),\n        );\n      }\n    }\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(\n    event: CustomEvent<{\n      value: string;\n      name: string;\n    }>,\n  ) {\n    const { name, value } = event.detail;\n    if (name === 'timezone') {\n      this.timezone = value;\n      if (typeof this.internals.setFormValue !== 'function') {\n        return;\n      }\n      this.internals.setFormValue(\n        JSON.stringify({\n          openHours: this.scheduleToOpenHours(this.schedule),\n          timezone: this.timezone,\n        }),\n      );\n    }\n  }\n\n  connectedCallback() {\n    debug('nylas-availability-picker', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-availability-picker', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-availability-picker', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-availability-picker', 'componentDidLoad');\n    if (this.openHours && this.openHours.length > 0) {\n      this.openHoursToSchedule(this.openHours);\n    }\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(\n      JSON.stringify({\n        openHours: this.scheduleToOpenHours(this.schedule),\n        timezone: this.timezone,\n      }),\n    );\n  }\n\n  getOverlaps(timeRanges) {\n    // Convert times to minutes and add to the array\n    let timeRangesInMinutes = timeRanges.map((range, index) => ({\n      start: timeToMinutes(range.start),\n      end: timeToMinutes(range.end),\n      originalIndex: index,\n    }));\n\n    // Sort by start time\n    timeRangesInMinutes.sort((a, b) => a.start - b.start);\n    let overlaps: number[] = [];\n    // Check for overlap\n    for (let i = 1; i < timeRangesInMinutes.length; i++) {\n      if (timeRangesInMinutes[i].start < timeRangesInMinutes[i - 1].end) {\n        // Add both overlapping time range indices if they are not already included\n        if (!overlaps.includes(timeRangesInMinutes[i].originalIndex)) {\n          overlaps.push(timeRangesInMinutes[i].originalIndex);\n        }\n        if (!overlaps.includes(timeRangesInMinutes[i - 1].originalIndex)) {\n          overlaps.push(timeRangesInMinutes[i - 1].originalIndex);\n        }\n      }\n    }\n    return overlaps.sort((a, b) => a - b); // Return sorted list of indices\n  }\n\n  addTimeRange(day) {\n    const currentTimeRanges = this.schedule[day];\n\n    // Default working hours are from 00:00 to 23:45 for calculation purposes\n    const dayStart = 0; // Start of the day in minutes (00:00)\n    const dayEnd = 1425; // End of the day in minutes (23:45)\n\n    if (currentTimeRanges.length === 0) {\n      // If there are no existing time ranges, add one at the start of the day\n      this.schedule[day] = [{ start: '09:00am', end: '05:00pm' }]; // Example range\n    } else {\n      // Convert all time ranges to minutes for comparison\n      const timeRangesInMinutes = currentTimeRanges\n        .map(range => ({\n          start: timeToMinutes(range.start),\n          end: timeToMinutes(range.end),\n        }))\n        .sort((a, b) => a.start - b.start); // Sort by start time\n\n      // Attempt to add a new time range at the end of the day\n      const lastRangeEnd = timeRangesInMinutes[timeRangesInMinutes.length - 1].end;\n      if (lastRangeEnd + 60 <= dayEnd) {\n        // There's room at the end of the day\n        this.schedule[day].push({\n          start: convertTo12HourFormat(minutesToTime(lastRangeEnd)),\n          end: convertTo12HourFormat(minutesToTime(lastRangeEnd + 60)),\n        });\n      } else {\n        // No room at the end, look for gaps at the beginning of the day\n        let gapFound = false;\n        if (timeRangesInMinutes[0].start > dayStart + 60) {\n          // There's room for at least a 1-hour meeting at the beginning of the day\n          this.schedule[day].push({\n            start: convertTo12HourFormat(minutesToTime(dayStart)),\n            end: convertTo12HourFormat(minutesToTime(dayStart + 60)),\n          });\n          gapFound = true;\n        }\n\n        if (!gapFound) {\n          // Search for gaps between scheduled time ranges\n          for (let i = 0; i < timeRangesInMinutes.length - 1; i++) {\n            const currentEnd = timeRangesInMinutes[i].end;\n            const nextStart = timeRangesInMinutes[i + 1].start;\n\n            if (nextStart - currentEnd >= 60) {\n              // Found a gap\n              this.schedule[day].push({\n                start: convertTo12HourFormat(minutesToTime(currentEnd)),\n                end: convertTo12HourFormat(minutesToTime(currentEnd + 60)),\n              });\n              break; // Exit the loop after adding a time range\n            }\n          }\n        }\n      }\n    }\n\n    // Sort the updated schedule to maintain order\n    this.schedule[day].sort((a, b) => timeToMinutes(a.start) - timeToMinutes(b.start));\n\n    this.schedule = { ...this.schedule };\n  }\n\n  removeTimeRange(day, index) {\n    this.schedule[day].splice(index, 1);\n    this.schedule = { ...this.schedule };\n  }\n\n  @Listen('timeChange')\n  setTime(event: CustomEvent<{ key: string; value: string }>) {\n    const { key, value } = event.detail;\n    const [dayIndex, timeType] = key.split('_');\n    const [day, index] = dayIndex.split(':');\n\n    if (timeType === 'start') {\n      this.schedule[day][index].start = value;\n    } else if (timeType === 'end') {\n      this.schedule[day][index].end = value;\n    }\n    this.internals.setValidity({ customError: false });\n    this.schedule = { ...this.schedule };\n  }\n\n  @Listen('formError')\n  setFormError(event: CustomEvent<{ key: string; message: string }>) {\n    const { key } = event.detail;\n    const [_, timeType] = key.split('_');\n    const element = this.host.shadowRoot?.getElementById(key);\n    if (element) {\n      this.internals.setValidity({ customError: true }, `Invalid ${timeType} time`, element as HTMLInputElement);\n    }\n  }\n\n  openHoursToSchedule(openHours: OpenHours[]) {\n    const newSchedule = {\n      SUN: [],\n      MON: [],\n      TUE: [],\n      WED: [],\n      THU: [],\n      FRI: [],\n      SAT: [],\n    };\n    openHours.forEach(openHour => {\n      openHour.days.forEach(day => {\n        const dayKey = this.getDayKey(day);\n        const start12hr = convertTo12HourFormat(openHour.start);\n        const end12hr = convertTo12HourFormat(openHour.end);\n        const timeRange = { start: start12hr, end: end12hr };\n\n        // Check if the time range already exists for the day\n        let timeRangeExists = false;\n        if (newSchedule[dayKey]) {\n          // Search for an existing time range that matches the current one\n          timeRangeExists = newSchedule[dayKey].some(range => range.start === timeRange.start && range.end === timeRange.end);\n        }\n\n        if (!timeRangeExists) {\n          if (newSchedule[dayKey]) {\n            newSchedule[dayKey].push(timeRange);\n          } else {\n            newSchedule[dayKey] = [timeRange];\n          }\n        }\n      });\n    });\n\n    this.timezone = this.defaultTimezone;\n    this.schedule = newSchedule;\n  }\n\n  getDayKey(dayIndex: number): string {\n    const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];\n    return days[dayIndex];\n  }\n\n  scheduleToOpenHours(schedule: Schedule): OpenHours[] {\n    const dayKeys = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];\n    let openHoursMap: Map<string, { days: number[]; start: string; end: string }> = new Map();\n\n    dayKeys.forEach((dayKey, index) => {\n      if (schedule[dayKey]) {\n        // Check if schedule for the day exists\n        schedule[dayKey].forEach(timeRange => {\n          const start24hr = convertTo24HourFormat(timeRange.start);\n          const end24hr = convertTo24HourFormat(timeRange.end);\n          const key = `${start24hr}-${end24hr}`;\n\n          if (!openHoursMap.has(key)) {\n            openHoursMap.set(key, { days: [index], start: start24hr, end: end24hr });\n          } else {\n            let entry = openHoursMap.get(key);\n            if (entry) {\n              entry.days.push(index);\n              openHoursMap.set(key, entry);\n            }\n          }\n        });\n      }\n    });\n\n    let selectedOpenHours: OpenHours[] = [];\n    openHoursMap.forEach((value, _key) => {\n      selectedOpenHours.push({\n        days: value.days,\n        start: value.start,\n        end: value.end,\n        timezone: this.timezone,\n      });\n    });\n\n    return selectedOpenHours;\n  }\n\n  @RegisterComponent<NylasAvailabilityPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-availability-picker',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    fireRegisterEvent: true,\n  })\n  render() {\n    const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n      label: TIMEZONE_MAP[key],\n      value: key,\n    }));\n\n    return (\n      <Host>\n        <div class=\"nylas-availability-picker\">\n          <div class=\"header\" part=\"nap__header\">\n            <h3>General availability</h3>\n            <p>Set your availability for scheduling meetings.</p>\n          </div>\n          <div class=\"content\">\n            <div class=\"select-timezone\" part=\"nap__select-timezone\">\n              <h4 class=\"sub-header\">\n                Select timezone\n                <span class=\"icon\">\n                  <tooltip-component>\n                    <info-icon slot=\"tooltip-icon\" />\n                    <span slot=\"tooltip-content\">Select your timezone for displaying availability.</span>\n                  </tooltip-component>\n                </span>\n              </h4>\n              <select-dropdown\n                name=\"timezone\"\n                exportparts=\"sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content\"\n                options={timezoneOptions}\n                defaultSelectedOption={timezoneOptions.find(i => i.value === this.defaultTimezone)}\n              >\n                <span slot=\"select-icon\">\n                  <globe-icon width=\"20\" height=\"20\" />\n                </span>\n              </select-dropdown>\n            </div>\n            <div class=\"availability\" part=\"nap__availability\">\n              {Object.keys(this.schedule).map(key => {\n                const day = key;\n                const timeRanges = this.schedule[key] as { start: string; end: string }[];\n                return (\n                  <div class=\"availability-day\">\n                    <div class=\"day\" part=\"nap__day\">\n                      <input\n                        type=\"checkbox\"\n                        name={day}\n                        id={day}\n                        checked={timeRanges.length > 0}\n                        onClick={() => {\n                          if (timeRanges.length > 0) {\n                            this.schedule[day] = [];\n                          } else {\n                            this.schedule[day] = [{ start: '09:00am', end: '05:00pm' }];\n                          }\n                          this.schedule = { ...this.schedule };\n                        }}\n                      />\n                      <label htmlFor={day} aria-label=\"Select day\">\n                        {day}\n                      </label>\n                    </div>\n                    <div class=\"time-ranges\" part=\"nap__time-ranges\">\n                      {timeRanges.length ? null : <span class=\"unavailable\">Unavailable</span>}\n                      {timeRanges.length > 0 &&\n                        timeRanges.map((timeRange, timeRangeIndex) => {\n                          const startKey = `${key}:${timeRangeIndex}_start`;\n                          const endKey = `${key}:${timeRangeIndex}_end`;\n                          return (\n                            <div class=\"time-range\" part=\"nap__time-range\">\n                              <div class=\"pickers\">\n                                <nylas-time-window-picker\n                                  id={startKey}\n                                  hasError={this.overlapDays[day]?.includes(timeRangeIndex)}\n                                  time={timeRange.start}\n                                  name={startKey}\n                                  key={startKey}\n                                  exportparts=\"time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times\"\n                                />\n                                <span> - </span>\n                                <nylas-time-window-picker\n                                  id={endKey}\n                                  hasError={this.overlapDays[day]?.includes(timeRangeIndex)}\n                                  time={timeRange.end}\n                                  name={endKey}\n                                  key={endKey}\n                                  minimumStartTime={timeRange.start}\n                                  exportparts=\"time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times\"\n                                />\n                              </div>\n                              <button onClick={() => this.removeTimeRange(day, timeRangeIndex)}>\n                                <close-icon />\n                              </button>\n                            </div>\n                          );\n                        })}\n                      <p class=\"error\">{this.overlapDays[day] ? 'Overlapping time ranges' : ''}</p>\n                    </div>\n                    <div>\n                      {timeRanges.length > 0 ? (\n                        <button onClick={() => this.addTimeRange(day)} part=\"nap__add-time-range\">\n                          <add-circle-icon />\n                        </button>\n                      ) : null}\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-availability-picker.entry.cjs.js","mappings":"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","names":["debug","timeToMinutes","convertTo12HourFormat","minutesToTime","convertTo24HourFormat","TIMEZONE_MAP","h","Host","RegisterComponent"],"sources":["src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.scss?tag=nylas-availability-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-availability-picker {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n  .header {\n    padding: 1rem;\n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n    p {\n      margin: 0.25rem 0 0 0;\n      font-size: 0.875rem;\n      font-weight: 400;\n      line-height: 20px;\n      color: var(--nylas-base-600);\n      text-align: left;\n    }\n  }\n  .content {\n    padding: 1rem;\n    color: var(--nylas-base-900);\n    font-size: 16px;\n    font-family: var(--nylas-font-family);\n    border-top: 1px solid var(--nylas-base-200);\n    @media #{$small-mobile} {\n      font-size: 15px;\n    }\n    .select-timezone {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-bottom: 1px solid var(--nylas-base-200);\n      padding-bottom: 1rem;\n      gap: 1rem;\n      h4 {\n        display: flex;\n        gap: 0.5rem;\n        align-items: center;\n        margin: 0;\n        font-size: 16px;\n        @media #{$small-mobile} {\n          font-size: 15px;\n        }\n        font-weight: 500;\n        line-height: 20px;\n      }\n    }\n    .availability {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      padding: 0 0.5rem;\n      @media #{$small-mobile} {\n        gap: 0.5rem;\n        padding: 0;\n      }\n      margin: 1rem 0;\n      .availability-day {\n        display: grid;\n        grid-template-columns: minmax(auto, 65px) 1fr minmax(auto, 40px);\n        @media #{$mobile} {\n          grid-template-columns: 78px 1fr auto;\n        }\n        @media #{$small-mobile} {\n          display: inline-grid;\n          gap: 8px;\n          grid-template-columns: 60px 1fr auto;\n        }\n        gap: 1rem;\n        align-items: baseline;\n        .day {\n          display: flex;\n          gap: 0.5rem;\n          @media #{$small-mobile} {\n            gap: 0.25rem;\n          }\n          align-items: center;\n\n          input[type='checkbox'] {\n            transform: scale(1.3);\n          }\n        }\n        .time-ranges {\n          span.unavailable {\n            height: 48px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n          }\n          .time-range {\n            display: flex;\n            gap: 1.5rem;\n            justify-content: space-between;\n            align-items: baseline;\n            @media #{$small-mobile} {\n              justify-content: unset;\n              gap: 0.5rem;\n            }\n            .pickers {\n              display: flex;\n              gap: 1rem;\n              @media #{$small-mobile} {\n                gap: 0.5rem;\n              }\n              span {\n                margin-top: 0.75rem;\n              }\n            }\n            &:not(:last-of-type) {\n              margin-bottom: 1rem;\n            }\n          }\n          p.error {\n            color: var(--nylas-error);\n          }\n        }\n        button {\n          border: none;\n          background: transparent;\n          height: 40px;\n          cursor: pointer;\n          color: var(--nylas-base-800);\n          &:hover,\n          &:active {\n            color: var(--nylas-primary);\n          }\n        }\n      }\n    }\n  }\n}\n\nselect-dropdown {\n  width: auto;\n}\n\nselect-dropdown::part(sd_dropdown-button) {\n  justify-content: initial;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { convertTo12HourFormat, convertTo24HourFormat, debug, minutesToTime, timeToMinutes } 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 { TIMEZONE_MAP } from '@/common/constants';\nimport { Configuration } from '@nylas/core';\n\nexport type OpenHours = {\n  days: number[];\n  start: string;\n  end: string;\n  timezone: string;\n};\n\nexport type Schedule = {\n  SUN: { start: string; end: string }[];\n  MON: { start: string; end: string }[];\n  TUE: { start: string; end: string }[];\n  WED: { start: string; end: string }[];\n  THU: { start: string; end: string }[];\n  FRI: { start: string; end: string }[];\n  SAT: { start: string; end: string }[];\n};\n\n/**\n * The `nylas-availability-picker` component is a form input for selecting availability (open hours).\n * @part nap__header - The header of the availability picker\n * @part nap__select-timezone - The timezone selection container\n * @part nap__select-timezone-button - The timezone selection button\n * @part nap__select-timezone-dropdown-content - The timezone selection dropdown content\n * @part nap__availability - The availability container\n * @part nap__day - The day container\n * @part nap__time-ranges - The time ranges container\n * @part nap__time-range - The time range container\n * @part nap__add-time-range - The add time range button\n * @part nap__time-picker-container - The time picker container\n * @part nap__time-picker-input - The time picker input\n * @part nap__time-picker-times - The time picker times\n */\n@Component({\n  tag: 'nylas-availability-picker',\n  styleUrl: 'nylas-availability-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasAvailabilityPicker {\n  /**\n   * The element <nylas-availability-picker> itself.\n   */\n  @Element() host!: HTMLNylasAvailabilityPickerElement;\n  /**\n   * The selected configuration.\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The open hours to display.\n   */\n  @Prop() openHours?: OpenHours[];\n  /**\n   * The name of the availability picker.\n   */\n  @Prop() name: string = 'availability';\n  /*\n   * The default timezone or preset timezone.\n   */\n  @Prop() defaultTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * Hide the header of the availability picker.\n   */\n  @Prop() hideHeader: boolean = false;\n\n  /**\n   * This event is fired when the selected availability / open hours change.\n   * The value is a stringified JSON object with the open hours and timezone.\n   * Ex: {\n   *   openHours: OpenHours[];\n   *   timezone: string;\n   * };\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n  @State() schedule = {\n    SUN: [],\n    MON: [{ start: '09:00am', end: '05:00pm' }],\n    TUE: [{ start: '09:00am', end: '05:00pm' }],\n    WED: [{ start: '09:00am', end: '05:00pm' }],\n    THU: [{ start: '09:00am', end: '05:00pm' }],\n    FRI: [{ start: '09:00am', end: '05:00pm' }],\n    SAT: [],\n  };\n  /**\n   * The selected timezone state.\n   */\n  @State() timezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n  /**\n   * The overlapping time ranges state. This is used to display an error message when there are overlapping time ranges.\n   */\n  @State() overlapDays: { [key: string]: number[] } = {};\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-calendar-picker', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  configChangedHandler(newConfig: Configuration) {\n    const defaultOpenHours = newConfig?.availability?.availability_rules?.default_open_hours;\n    if (defaultOpenHours) {\n      this.openHoursToSchedule(defaultOpenHours);\n    }\n  }\n\n  @Watch('schedule')\n  scheduleChanged(newValue: Schedule, oldValue: Schedule) {\n    if (newValue !== oldValue) {\n      let overlapDays: { [key: string]: number[] } = {};\n      Object.keys(newValue).forEach(key => {\n        const dayTimeRanges = newValue[key];\n        if (dayTimeRanges.length > 0) {\n          const overlaps = this.getOverlaps(dayTimeRanges);\n          if (overlaps.length > 0) {\n            overlapDays[key] = overlaps;\n          }\n        }\n      });\n      this.overlapDays = overlapDays;\n      if (typeof this.internals.setFormValue !== 'function') {\n        return;\n      }\n      if (Object.keys(overlapDays).length > 0) {\n        const element = this.host.shadowRoot?.getElementById(Object.keys(overlapDays)[0]) as HTMLInputElement;\n        if (element) {\n          debug('nylas-availability-picker', 'The time ranges are overlapping. Overlap: ', overlapDays);\n          this.internals.setValidity({ customError: true }, 'Overlapping time ranges found', element);\n        }\n      } else {\n        this.internals.setValidity({ customError: false });\n        this.internals.setFormValue(\n          JSON.stringify({\n            openHours: this.scheduleToOpenHours(this.schedule),\n            timezone: this.timezone,\n          }),\n        );\n      }\n      this.valueChanged.emit({\n        value: JSON.stringify({\n          openHours: this.scheduleToOpenHours(newValue),\n          timezone: this.timezone,\n        }),\n        name: this.name,\n      });\n    }\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(\n    event: CustomEvent<{\n      value: string;\n      name: string;\n    }>,\n  ) {\n    const { name, value } = event.detail;\n    if (name === 'timezone') {\n      this.timezone = value;\n      if (typeof this.internals.setFormValue !== 'function') {\n        return;\n      }\n      const updateValue = {\n        openHours: this.scheduleToOpenHours(this.schedule),\n        timezone: this.timezone,\n      };\n      this.internals.setFormValue(JSON.stringify(updateValue));\n      this.valueChanged.emit({\n        value: JSON.stringify(updateValue),\n        name: this.name,\n      });\n    }\n  }\n\n  connectedCallback() {\n    debug('nylas-availability-picker', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-availability-picker', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-availability-picker', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-availability-picker', 'componentDidLoad');\n    if (this.openHours && this.openHours.length > 0) {\n      this.openHoursToSchedule(this.openHours);\n    }\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    const updateValue = {\n      openHours: this.scheduleToOpenHours(this.schedule),\n      timezone: this.timezone,\n    };\n    this.internals.setFormValue(JSON.stringify(updateValue));\n    this.valueChanged.emit({\n      value: JSON.stringify(updateValue),\n      name: this.name,\n    });\n  }\n\n  getOverlaps(timeRanges) {\n    // Convert times to minutes and add to the array\n    let timeRangesInMinutes = timeRanges.map((range, index) => ({\n      start: timeToMinutes(range.start),\n      end: timeToMinutes(range.end),\n      originalIndex: index,\n    }));\n\n    // Sort by start time\n    timeRangesInMinutes.sort((a, b) => a.start - b.start);\n    let overlaps: number[] = [];\n    // Check for overlap\n    for (let i = 1; i < timeRangesInMinutes.length; i++) {\n      if (timeRangesInMinutes[i].start < timeRangesInMinutes[i - 1].end) {\n        // Add both overlapping time range indices if they are not already included\n        if (!overlaps.includes(timeRangesInMinutes[i].originalIndex)) {\n          overlaps.push(timeRangesInMinutes[i].originalIndex);\n        }\n        if (!overlaps.includes(timeRangesInMinutes[i - 1].originalIndex)) {\n          overlaps.push(timeRangesInMinutes[i - 1].originalIndex);\n        }\n      }\n    }\n    return overlaps.sort((a, b) => a - b); // Return sorted list of indices\n  }\n\n  addTimeRange(day) {\n    const currentTimeRanges = this.schedule[day];\n\n    // Default working hours are from 00:00 to 23:45 for calculation purposes\n    const dayStart = 0; // Start of the day in minutes (00:00)\n    const dayEnd = 1425; // End of the day in minutes (23:45)\n\n    if (currentTimeRanges.length === 0) {\n      // If there are no existing time ranges, add one at the start of the day\n      this.schedule[day] = [{ start: '09:00am', end: '05:00pm' }]; // Example range\n    } else {\n      // Convert all time ranges to minutes for comparison\n      const timeRangesInMinutes = currentTimeRanges\n        .map(range => ({\n          start: timeToMinutes(range.start),\n          end: timeToMinutes(range.end),\n        }))\n        .sort((a, b) => a.start - b.start); // Sort by start time\n\n      // Attempt to add a new time range at the end of the day\n      const lastRangeEnd = timeRangesInMinutes[timeRangesInMinutes.length - 1].end;\n      if (lastRangeEnd + 60 <= dayEnd) {\n        // There's room at the end of the day\n        this.schedule[day].push({\n          start: convertTo12HourFormat(minutesToTime(lastRangeEnd)),\n          end: convertTo12HourFormat(minutesToTime(lastRangeEnd + 60)),\n        });\n      } else {\n        // No room at the end, look for gaps at the beginning of the day\n        let gapFound = false;\n        if (timeRangesInMinutes[0].start > dayStart + 60) {\n          // There's room for at least a 1-hour meeting at the beginning of the day\n          this.schedule[day].push({\n            start: convertTo12HourFormat(minutesToTime(dayStart)),\n            end: convertTo12HourFormat(minutesToTime(dayStart + 60)),\n          });\n          gapFound = true;\n        }\n\n        if (!gapFound) {\n          // Search for gaps between scheduled time ranges\n          for (let i = 0; i < timeRangesInMinutes.length - 1; i++) {\n            const currentEnd = timeRangesInMinutes[i].end;\n            const nextStart = timeRangesInMinutes[i + 1].start;\n\n            if (nextStart - currentEnd >= 60) {\n              // Found a gap\n              this.schedule[day].push({\n                start: convertTo12HourFormat(minutesToTime(currentEnd)),\n                end: convertTo12HourFormat(minutesToTime(currentEnd + 60)),\n              });\n              break; // Exit the loop after adding a time range\n            }\n          }\n        }\n      }\n    }\n\n    // Sort the updated schedule to maintain order\n    this.schedule[day].sort((a, b) => timeToMinutes(a.start) - timeToMinutes(b.start));\n\n    this.schedule = { ...this.schedule };\n  }\n\n  removeTimeRange(day, index) {\n    this.schedule[day].splice(index, 1);\n    this.schedule = { ...this.schedule };\n  }\n\n  @Listen('timeChange')\n  setTime(event: CustomEvent<{ key: string; value: string }>) {\n    const { key, value } = event.detail;\n    const [dayIndex, timeType] = key.split('_');\n    const [day, index] = dayIndex.split(':');\n\n    if (timeType === 'start') {\n      this.schedule[day][index].start = value;\n    } else if (timeType === 'end') {\n      this.schedule[day][index].end = value;\n    }\n    this.internals.setValidity({ customError: false });\n    this.schedule = { ...this.schedule };\n  }\n\n  @Listen('formError')\n  setFormError(event: CustomEvent<{ key: string; message: string }>) {\n    const { key } = event.detail;\n    const [_, timeType] = key.split('_');\n    const element = this.host.shadowRoot?.getElementById(key);\n    if (element) {\n      this.internals.setValidity({ customError: true }, `Invalid ${timeType} time`, element as HTMLInputElement);\n    }\n  }\n\n  openHoursToSchedule(openHours: OpenHours[]) {\n    const newSchedule = {\n      SUN: [],\n      MON: [],\n      TUE: [],\n      WED: [],\n      THU: [],\n      FRI: [],\n      SAT: [],\n    };\n    openHours.forEach(openHour => {\n      openHour.days.forEach(day => {\n        const dayKey = this.getDayKey(day);\n        const start12hr = convertTo12HourFormat(openHour.start);\n        const end12hr = convertTo12HourFormat(openHour.end);\n        const timeRange = { start: start12hr, end: end12hr };\n\n        // Check if the time range already exists for the day\n        let timeRangeExists = false;\n        if (newSchedule[dayKey]) {\n          // Search for an existing time range that matches the current one\n          timeRangeExists = newSchedule[dayKey].some(range => range.start === timeRange.start && range.end === timeRange.end);\n        }\n\n        if (!timeRangeExists) {\n          if (newSchedule[dayKey]) {\n            newSchedule[dayKey].push(timeRange);\n          } else {\n            newSchedule[dayKey] = [timeRange];\n          }\n        }\n      });\n    });\n\n    this.timezone = this.defaultTimezone;\n    this.schedule = newSchedule;\n  }\n\n  getDayKey(dayIndex: number): string {\n    const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];\n    return days[dayIndex];\n  }\n\n  scheduleToOpenHours(schedule: Schedule): OpenHours[] {\n    const dayKeys = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];\n    let openHoursMap: Map<string, { days: number[]; start: string; end: string }> = new Map();\n\n    dayKeys.forEach((dayKey, index) => {\n      if (schedule[dayKey]) {\n        // Check if schedule for the day exists\n        schedule[dayKey].forEach(timeRange => {\n          const start24hr = convertTo24HourFormat(timeRange.start);\n          const end24hr = convertTo24HourFormat(timeRange.end);\n          const key = `${start24hr}-${end24hr}`;\n\n          if (!openHoursMap.has(key)) {\n            openHoursMap.set(key, { days: [index], start: start24hr, end: end24hr });\n          } else {\n            let entry = openHoursMap.get(key);\n            if (entry) {\n              entry.days.push(index);\n              openHoursMap.set(key, entry);\n            }\n          }\n        });\n      }\n    });\n\n    let selectedOpenHours: OpenHours[] = [];\n    openHoursMap.forEach((value, _key) => {\n      selectedOpenHours.push({\n        days: value.days,\n        start: value.start,\n        end: value.end,\n        timezone: this.timezone,\n      });\n    });\n\n    return selectedOpenHours;\n  }\n\n  @RegisterComponent<NylasAvailabilityPicker, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-availability-picker',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    fireRegisterEvent: true,\n  })\n  render() {\n    const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n      label: TIMEZONE_MAP[key],\n      value: key,\n    }));\n\n    return (\n      <Host>\n        <div class=\"nylas-availability-picker\" part=\"nap\">\n          {!this.hideHeader && (\n            <div class=\"header\" part=\"nap__header\">\n              <h3>General availability</h3>\n              <p>Set your availability for scheduling meetings.</p>\n            </div>\n          )}\n          <div class=\"content\">\n            <div class=\"select-timezone\" part=\"nap__select-timezone\">\n              <h4 class=\"sub-header\">\n                Select timezone\n                <span class=\"icon\">\n                  <tooltip-component>\n                    <info-icon slot=\"tooltip-icon\" />\n                    <span slot=\"tooltip-content\">Select your timezone for displaying availability.</span>\n                  </tooltip-component>\n                </span>\n              </h4>\n              <select-dropdown\n                name=\"timezone\"\n                exportparts=\"sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content\"\n                options={timezoneOptions}\n                defaultSelectedOption={timezoneOptions.find(i => i.value === this.defaultTimezone)}\n              >\n                <span slot=\"select-icon\">\n                  <globe-icon width=\"20\" height=\"20\" />\n                </span>\n              </select-dropdown>\n            </div>\n            <div class=\"availability\" part=\"nap__availability\">\n              {Object.keys(this.schedule).map(key => {\n                const day = key;\n                const timeRanges = this.schedule[key] as { start: string; end: string }[];\n                return (\n                  <div class=\"availability-day\">\n                    <div class=\"day\" part=\"nap__day\">\n                      <input\n                        type=\"checkbox\"\n                        name={day}\n                        id={day}\n                        checked={timeRanges.length > 0}\n                        onClick={() => {\n                          if (timeRanges.length > 0) {\n                            this.schedule[day] = [];\n                          } else {\n                            this.schedule[day] = [{ start: '09:00am', end: '05:00pm' }];\n                          }\n                          this.schedule = { ...this.schedule };\n                        }}\n                      />\n                      <label htmlFor={day} aria-label=\"Select day\">\n                        {day}\n                      </label>\n                    </div>\n                    <div class=\"time-ranges\" part=\"nap__time-ranges\">\n                      {timeRanges.length ? null : <span class=\"unavailable\">Unavailable</span>}\n                      {timeRanges.length > 0 &&\n                        timeRanges.map((timeRange, timeRangeIndex) => {\n                          const startKey = `${key}:${timeRangeIndex}_start`;\n                          const endKey = `${key}:${timeRangeIndex}_end`;\n                          return (\n                            <div class=\"time-range\" part=\"nap__time-range\">\n                              <div class=\"pickers\">\n                                <nylas-time-window-picker\n                                  id={startKey}\n                                  hasError={this.overlapDays[day]?.includes(timeRangeIndex)}\n                                  time={timeRange.start}\n                                  name={startKey}\n                                  key={startKey}\n                                  exportparts=\"time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times\"\n                                />\n                                <span> - </span>\n                                <nylas-time-window-picker\n                                  id={endKey}\n                                  hasError={this.overlapDays[day]?.includes(timeRangeIndex)}\n                                  time={timeRange.end}\n                                  name={endKey}\n                                  key={endKey}\n                                  minimumStartTime={timeRange.start}\n                                  exportparts=\"time-picker: nap__time-picker-container, time-input: nap__time-picker-input, times: nap__time-picker-times\"\n                                />\n                              </div>\n                              <button onClick={() => this.removeTimeRange(day, timeRangeIndex)}>\n                                <close-icon />\n                              </button>\n                            </div>\n                          );\n                        })}\n                      <p class=\"error\">{this.overlapDays[day] ? 'Overlapping time ranges' : ''}</p>\n                    </div>\n                    <div>\n                      {timeRanges.length > 0 ? (\n                        <button onClick={() => this.addTimeRange(day)} part=\"nap__add-time-range\">\n                          <add-circle-icon />\n                        </button>\n                      ) : null}\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}