@nylas/web-elements 1.1.0-canary.7 → 1.1.0-canary.9

package/dist/cjs/nylas-booking-calendar-picker.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c14ea8f5.js');
-const registerComponent = require('./register-component-c8b6e907.js');
-const utils = require('./utils-2c7f0895.js');
+const registerComponent = require('./register-component-4f8ae42c.js');
+const utils = require('./utils-85bd0909.js');
 require('./_commonjsHelpers-ef8cd0cd.js');
 
 const nylasBookingCalendarPickerCss = ":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-booking-calendar-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-booking-calendar-picker .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-booking-calendar-picker .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-booking-calendar-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-booking-calendar-picker .nylas-booking-calendar-picker__loading{padding-bottom:1rem;display:flex;flex-direction:column;gap:4px}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__loading .label{display:flex;align-items:center;gap:0.5rem;margin:1rem 1rem 0;color:var(--nylas-base-800)}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__loading .loading-button{margin:0 1rem;padding:0;width:inherit;height:48px;color:black;font-size:1rem;cursor:not-allowed;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__loading .loading-button span{padding:0 1rem}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown{padding:1rem;display:flex;flex-direction:column;gap:4px}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown span.label{display:flex;align-items:center;gap:4px;color:var(--nylas-base-800)}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown span.label tooltip-component{display:flex}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown select-dropdown::part(sd_dropdown){width:100%}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown select-dropdown::part(sd_dropdown-content){width:100%;max-width:unset}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown select-dropdown::part(sd_dropdown-button){width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-booking-calendar-picker .nylas-booking-calendar-picker__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";

package/dist/cjs/nylas-booking-form.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c14ea8f5.js');
-const registerComponent = require('./register-component-c8b6e907.js');
-const utils = require('./utils-2c7f0895.js');
+const registerComponent = require('./register-component-4f8ae42c.js');
+const utils = require('./utils-85bd0909.js');
 require('./_commonjsHelpers-ef8cd0cd.js');
 
 const nylasBookingFormCss = ":host{display:block;height:100%;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}.nylas-booking-form{width:100%;padding:1.5rem;box-sizing:border-box;height:450px;overflow-y:auto;height:100%}form{height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}sp-textfield{--spectrum-corner-radius-100:var(--nylas-border-radius-2x);--spectrum-textfield-border-color:var(--nylas-base-300);position:relative;width:100%;height:48px;margin-bottom:16px;color:var(--nylas-base-500)}.cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:0.5rem;padding:10px;box-sizing:border-box;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.cta{flex-direction:column-reverse}}sp-button{background-color:transparent;color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);--button-width:50%;font-family:var(--nylas-font-family);font-size:16px;font-weight:600;border:none;height:48px;padding:14px}@media screen and (max-width: 768px){sp-button{--button-width:100%}}sp-button:hover,sp-button:focus{background-color:var(--nylas-base-100);color:var(--nylas-primary);border-radius:var(--nylas-border-radius-2x)}sp-button:active{background-color:var(--nylas-base-200);color:var(--nylas-base-800)}sp-button.back{width:var(--button-width);background-color:transparent;color:var(--nylas-base-700);outline:1px solid var(--nylas-base-300)}sp-button.back:hover,sp-button.back:focus{outline-color:var(--nylas-primary)}sp-button.back:active{outline:2px solid var(--nylas-base-600)}sp-button.book{width:var(--button-width);background-color:var(--nylas-primary);color:var(--nylas-base-0)}sp-button.book:hover,sp-button.book:focus{background-color:var(--nylas-base-600)}sp-button.book:active{background-color:var(--nylas-base-800)}.input-wrapper{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:1rem}.input-wrapper input::placeholder{color:var(--nylas-base-300)}.input-wrapper label,.input-wrapper input{font-family:var(--nylas-font-family)}.input-wrapper .help-text{margin:0;color:var(--nylas-error)}.button-wrapper{width:100%;align-items:flex-start;height:max-content;position:relative}sp-infield-button{--spectrum-infield-button-background-color:transparent;--spectrum-infield-button-background-color-hover:transparent;--spectrum-infield-button-background-color-active:transparent;--spectrum-infield-button-border-color:transparent;--spectrum-infield-button-border-width:1px;--spectrum-infield-button-border-radius:0;color:var(--nylas-base-600);background:transparent;border:none;outline:1px solid var(--nylas-base-300);border-radius:0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;height:52px;width:52px;display:flex;position:absolute;right:0;align-items:center;justify-content:center;cursor:pointer}sp-infield-button sp-icon-cross300{color:var(--nylas-base-600)}sp-infield-button.error{border-width:2px;border-color:var(--nylas-error)}input[type=text],input[type=email]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%}input[type=text].error,input[type=email].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=email].error::placeholder{font-weight:400}input[type=text].guest-email,input[type=email].guest-email{color:var(--nylas-base-900);padding-right:52px}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}";

package/dist/cjs/nylas-buffer-time.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c14ea8f5.js');
-const registerComponent = require('./register-component-c8b6e907.js');
-const utils = require('./utils-2c7f0895.js');
+const registerComponent = require('./register-component-4f8ae42c.js');
+const utils = require('./utils-85bd0909.js');
 require('./_commonjsHelpers-ef8cd0cd.js');
 
-const nylasBufferTimeCss = ":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-buffer-time{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200);text-align:left}.nylas-buffer-time .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-buffer-time .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-buffer-time .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-buffer-time .nylas-buffer-time__body{display:grid;grid-template-columns:1fr auto}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown{padding:1rem;display:flex;flex-direction:column;gap:1rem;border-right:1px solid var(--nylas-base-200)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row label{width:200px}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row .dropdown-container{display:flex;gap:1rem;align-items:center}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview{width:200px;padding:1rem;background:var(--nylas-base-25);border-bottom-right-radius:var(--nylas-border-radius-2x)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview h4{font-size:12px;line-height:24px;color:var(--nylas-base-600);font-family:var(--nylas-font-family);font-weight:500;text-align:center}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot{background-color:transparent;border-top:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot.active{background-color:var(--nylas-base-100)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot:last-of-type{border-bottom:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .event-slot{background-color:var(--nylas-base-600);border-top:1px solid var(--nylas-base-300);border-bottom:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button){width:104px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-content){width:100%}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
+const nylasBufferTimeCss = ":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-buffer-time{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200);text-align:left}.nylas-buffer-time .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-buffer-time .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-buffer-time .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-buffer-time .nylas-buffer-time__body{display:grid;grid-template-columns:1fr auto}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body{grid-template-columns:1fr}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown{padding:1rem;display:flex;flex-direction:column;gap:1rem;border-right:1px solid var(--nylas-base-200);color:var(--nylas-base-800)}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown{border:none}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row label{width:200px}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__dropdown .nylas-buffer-time__row .dropdown-container{display:flex;gap:1rem;align-items:center;justify-content:flex-end}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview{width:208px;background:var(--nylas-base-25);border-bottom-right-radius:var(--nylas-border-radius-2x)}@media screen and (max-width: 768px){.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview{width:inherit;border-bottom-left-radius:var(--nylas-border-radius-2x)}}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview h4{font-size:14px;line-height:24px;color:var(--nylas-base-600);font-family:var(--nylas-font-family);font-weight:500;text-align:center}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container{padding:0 2rem 1rem}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot{background-color:transparent;border-top:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot.active{background-color:var(--nylas-base-100)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .slot:last-of-type{border-bottom:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__body .nylas-buffer-time__preview .preview-container .event-slot{background-color:var(--nylas-base-600);border-top:1px solid var(--nylas-base-300);border-bottom:1px solid var(--nylas-base-300)}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button){width:104px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-content){width:100%}.nylas-buffer-time .nylas-buffer-time__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
 
 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;
@@ -97,7 +97,7 @@ const NylasBufferTime = class {
     }
     renderPreview() {
         const totalSlots = 4;
-        const slotHeight = 20;
+        const slotHeight = 16;
         const eventSlotHeight = slotHeight * 2;
         const slotFill = minutes => {
             const fullSlots = Math.floor(minutes / 30);

package/dist/cjs/nylas-buffer-time.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nylas-buffer-time.entry.cjs.js","mappings":"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","names":["debug","index","h","Host","RegisterComponent"],"sources":["src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.scss?tag=nylas-buffer-time&encapsulation=shadow","src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.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-buffer-time {\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  text-align: left;\n  .header {\n    padding: 1rem;\n    border-bottom: 1px solid var(--nylas-base-200);\n    h3 {\n      margin: 0;\n      font-size: 1rem;\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\n  .nylas-buffer-time__body {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    .nylas-buffer-time__dropdown {\n      padding: 1rem;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      border-right: 1px solid var(--nylas-base-200);\n      .nylas-buffer-time__row {\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n        gap: 1rem;\n        label {\n          width: 200px;\n        }\n        .dropdown-container {\n          display: flex;\n          gap: 1rem;\n          align-items: center;\n        }\n      }\n    }\n    .nylas-buffer-time__preview {\n      width: 200px;\n      padding: 1rem;\n      background: var(--nylas-base-25);\n      border-bottom-right-radius: var(--nylas-border-radius-2x);\n      h4 {\n        font-size: 12px;\n        line-height: 24px;\n        color: var(--nylas-base-600);\n        font-family: var(--nylas-font-family);\n        font-weight: 500;\n        text-align: center;\n      }\n      .preview-container {\n        .slot {\n          background-color: transparent;\n          border-top: 1px solid var(--nylas-base-300);\n          &.active {\n            background-color: var(--nylas-base-100);\n          }\n          &:last-of-type {\n            border-bottom: 1px solid var(--nylas-base-300);\n          }\n        }\n        .event-slot {\n          background-color: var(--nylas-base-600);\n          border-top: 1px solid var(--nylas-base-300);\n          border-bottom: 1px solid var(--nylas-base-300);\n        }\n      }\n    }\n  }\n\n  .nylas-buffer-time__dropdown {\n    select-dropdown::part(sd_dropdown-button) {\n      width: 104px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      padding: 1rem;\n    }\n    select-dropdown::part(sd_dropdown-content) {\n      width: 100%;\n    }\n    select-dropdown::part(sd_dropdown-button-selected-label) {\n      max-width: calc(100% - 2rem);\n      font-family: var(--nylas-font-family);\n      font-size: 16px;\n      line-height: 24px;\n    }\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, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-buffer-time` component is a UI component that displays the booking calendar picker.\n * @part nbt - The buffer time container\n * @part nbt__header - The header of the buffer time\n * @part nbt__body - The body of the buffer time\n * @part nbt__dropdown-before - The dropdown container for the before buffer time\n * @part nbt__dropdown-button-before - The dropdown button for the before buffer time\n * @part nbt__dropdown-content-before - The dropdown content for the before buffer time\n * @part nbt__dropdown-after - The dropdown container for the after buffer time\n * @part nbt__dropdown-button-after - The dropdown button for the after buffer time\n * @part nbt__dropdown-content-after - The dropdown content for the after buffer time\n * @part nbt__preview - The preview container\n */\n@Component({\n  tag: 'nylas-buffer-time',\n  styleUrl: 'nylas-buffer-time.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasBufferTime {\n  @Element() host!: HTMLNylasCalendarPickerElement;\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'buffer-time';\n  /**\n   * The buffer time\n   */\n  @Prop() buffer: { before: number; after: number } = { before: 0, after: 0 };\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected before buffer time.\n   */\n  @State() selectedBeforeBufferTime: number = this.buffer.before;\n\n  /**\n   * The selected after buffer time.\n   */\n  @State() selectedAfterBufferTime: number = this.buffer.after;\n\n  /**\n   * This event is fired when the selected calendars change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-buffer-time', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-buffer-time', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-buffer-time', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-buffer-time', 'componentDidLoad');\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      const bufferTime = {\n        before: this.selectedBeforeBufferTime,\n        after: this.selectedAfterBufferTime,\n      };\n      this.internals.setFormValue(JSON.stringify(bufferTime), this.name);\n    }\n    this.selectedAfterBufferTime = this.buffer.after;\n    this.selectedBeforeBufferTime = this.buffer.before;\n  }\n\n  componentWillUpdate() {\n    debug('nylas-buffer-time', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-buffer-time', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-buffer-time', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-buffer-time', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-buffer-time', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-buffer-time', 'selectedOptionChangedHandler', event.detail);\n    // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n    const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n      const { value, name } = event.detail;\n      if (name === 'before-buffer-time') {\n        this.selectedBeforeBufferTime = parseInt(value);\n      } else if (name === 'after-buffer-time') {\n        this.selectedAfterBufferTime = parseInt(value);\n      }\n      const bufferTime = {\n        before: this.selectedBeforeBufferTime,\n        after: this.selectedAfterBufferTime,\n      };\n      this.internals.setFormValue(JSON.stringify(bufferTime), 'booking-calendar');\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  renderPreview() {\n    const totalSlots = 4;\n    const slotHeight = 20; // The height for each 30-minute slot\n\n    // Event slot height is constant\n    const eventSlotHeight = slotHeight * 2;\n\n    // Helper function to determine the fill of a slot based on the minutes selected\n    const slotFill = minutes => {\n      const fullSlots = Math.floor(minutes / 30);\n      const partialFillHeight = ((minutes % 30) / 30) * slotHeight;\n\n      return {\n        fullSlots,\n        partialFillHeight,\n      };\n    };\n\n    // Helper function to create before slots\n    const createBeforeSlots = () => {\n      const { fullSlots, partialFillHeight } = slotFill(this.selectedBeforeBufferTime);\n\n      return Array.from({ length: totalSlots }, (_, index) => {\n        // Slot is active if its index is greater than the total slots minus the full slots minus one\n        // and there are some minutes selected.\n        const isActive = this.selectedBeforeBufferTime > 0 && index > totalSlots - fullSlots - 1;\n        const isPartial = this.selectedBeforeBufferTime > 0 && index === totalSlots - fullSlots - 1 && partialFillHeight > 0;\n\n        let slotStyle: {\n          backgroundColor?: string;\n          background?: string;\n        } = {};\n        if (isActive && !isPartial) {\n          slotStyle.backgroundColor = 'var(--nylas-base-100)';\n        } else if (isPartial) {\n          slotStyle.background = `linear-gradient(to top, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n        }\n\n        return (\n          <div\n            key={index}\n            class={`slot ${isActive ? 'active' : ''}`}\n            style={{\n              height: `${slotHeight}px`,\n              ...slotStyle,\n            }}\n          ></div>\n        );\n      });\n    };\n\n    // Helper function to create after slots\n    const createAfterSlots = () => {\n      const { fullSlots, partialFillHeight } = slotFill(this.selectedAfterBufferTime);\n\n      return Array.from({ length: totalSlots }, (_, index) => {\n        const isActive = this.selectedAfterBufferTime > 0 && index < fullSlots;\n        const isPartial = index === fullSlots && partialFillHeight > 0;\n\n        let slotStyle: {\n          backgroundColor?: string;\n          background?: string;\n        } = {};\n        if (isActive && !isPartial) {\n          slotStyle.backgroundColor = 'var(--nylas-base-100)';\n        } else if (isPartial) {\n          slotStyle.background = `linear-gradient(to bottom, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n        }\n\n        return (\n          <div\n            key={index}\n            class={`slot ${isActive ? 'active' : ''}`}\n            style={{\n              height: `${slotHeight}px`,\n              ...slotStyle,\n            }}\n          ></div>\n        );\n      });\n    };\n\n    return (\n      <div class=\"preview-container\">\n        {createBeforeSlots()}\n        <div class=\"event-slot\" style={{ height: `${eventSlotHeight}px` }}></div>\n        {createAfterSlots()}\n      </div>\n    );\n  }\n\n  @RegisterComponent<NylasBufferTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-buffer-time',\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const minuteOptions = Array.from({ length: 121 }, (_, i) => {\n      return {\n        label: i.toString(),\n        value: i,\n      };\n    });\n\n    return (\n      <Host>\n        <div class=\"nylas-buffer-time\" part=\"nbt\">\n          <div class=\"header\" part=\"nbt__header\">\n            <h3>Buffer time</h3>\n            <p>Add buffer time before and after the event.</p>\n          </div>\n          <div class=\"nylas-buffer-time__body\" part=\"nbt__body\">\n            <div class=\"nylas-buffer-time__dropdown\">\n              <div class=\"nylas-buffer-time__row\">\n                <label>Before the event</label>\n                <div class=\"dropdown-container\">\n                  <select-dropdown\n                    id=\"before-buffer-time\"\n                    name=\"before-buffer-time\"\n                    exportparts=\"sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before\"\n                    options={minuteOptions}\n                    defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedBeforeBufferTime) ?? minuteOptions[0]}\n                  />\n                  <span>mins</span>\n                </div>\n              </div>\n              <div class=\"nylas-buffer-time__row\">\n                <label>After the event</label>\n                <div class=\"dropdown-container\">\n                  <select-dropdown\n                    id=\"after-buffer-time\"\n                    name=\"after-buffer-time\"\n                    exportparts=\"sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after\"\n                    options={minuteOptions}\n                    defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedAfterBufferTime) ?? minuteOptions[0]}\n                  />\n                  <span>mins</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"nylas-buffer-time__preview\" part=\"nbt__preview\">\n              <h4>PREVIEW</h4>\n              {this.renderPreview()}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-buffer-time.entry.cjs.js","mappings":"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","names":["debug","index","h","Host","RegisterComponent"],"sources":["src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.scss?tag=nylas-buffer-time&encapsulation=shadow","src/components/scheduler-editor/nylas-buffer-time/nylas-buffer-time.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-buffer-time {\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  text-align: left;\n  .header {\n    padding: 1rem;\n    border-bottom: 1px solid var(--nylas-base-200);\n    h3 {\n      margin: 0;\n      font-size: 1rem;\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\n  .nylas-buffer-time__body {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    @media #{$mobile} {\n      grid-template-columns: 1fr;\n    }\n    .nylas-buffer-time__dropdown {\n      padding: 1rem;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      border-right: 1px solid var(--nylas-base-200);\n      color: var(--nylas-base-800);\n      @media #{$mobile} {\n        border: none;\n      }\n      .nylas-buffer-time__row {\n        display: grid;\n        grid-template-columns: auto 1fr;\n        align-items: center;\n        gap: 1rem;\n        label {\n          width: 200px;\n        }\n        .dropdown-container {\n          display: flex;\n          gap: 1rem;\n          align-items: center;\n          justify-content: flex-end;\n        }\n      }\n    }\n    .nylas-buffer-time__preview {\n      width: 208px;\n      background: var(--nylas-base-25);\n      border-bottom-right-radius: var(--nylas-border-radius-2x);\n      @media #{$mobile} {\n        width: inherit;\n        border-bottom-left-radius: var(--nylas-border-radius-2x);\n      }\n      h4 {\n        font-size: 14px;\n        line-height: 24px;\n        color: var(--nylas-base-600);\n        font-family: var(--nylas-font-family);\n        font-weight: 500;\n        text-align: center;\n      }\n      .preview-container {\n        padding: 0 2rem 1rem;\n        .slot {\n          background-color: transparent;\n          border-top: 1px solid var(--nylas-base-300);\n          &.active {\n            background-color: var(--nylas-base-100);\n          }\n          &:last-of-type {\n            border-bottom: 1px solid var(--nylas-base-300);\n          }\n        }\n        .event-slot {\n          background-color: var(--nylas-base-600);\n          border-top: 1px solid var(--nylas-base-300);\n          border-bottom: 1px solid var(--nylas-base-300);\n        }\n      }\n    }\n  }\n\n  .nylas-buffer-time__dropdown {\n    select-dropdown::part(sd_dropdown-button) {\n      width: 104px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      padding: 1rem;\n    }\n    select-dropdown::part(sd_dropdown-content) {\n      width: 100%;\n    }\n    select-dropdown::part(sd_dropdown-button-selected-label) {\n      max-width: calc(100% - 2rem);\n      font-family: var(--nylas-font-family);\n      font-size: 16px;\n      line-height: 24px;\n    }\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, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-buffer-time` component is a UI component that displays the booking calendar picker.\n * @part nbt - The buffer time container\n * @part nbt__header - The header of the buffer time\n * @part nbt__body - The body of the buffer time\n * @part nbt__dropdown-before - The dropdown container for the before buffer time\n * @part nbt__dropdown-button-before - The dropdown button for the before buffer time\n * @part nbt__dropdown-content-before - The dropdown content for the before buffer time\n * @part nbt__dropdown-after - The dropdown container for the after buffer time\n * @part nbt__dropdown-button-after - The dropdown button for the after buffer time\n * @part nbt__dropdown-content-after - The dropdown content for the after buffer time\n * @part nbt__preview - The preview container\n */\n@Component({\n  tag: 'nylas-buffer-time',\n  styleUrl: 'nylas-buffer-time.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasBufferTime {\n  @Element() host!: HTMLNylasCalendarPickerElement;\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'buffer-time';\n  /**\n   * The buffer time\n   */\n  @Prop() buffer: { before: number; after: number } = { before: 0, after: 0 };\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected before buffer time.\n   */\n  @State() selectedBeforeBufferTime: number = this.buffer.before;\n\n  /**\n   * The selected after buffer time.\n   */\n  @State() selectedAfterBufferTime: number = this.buffer.after;\n\n  /**\n   * This event is fired when the selected calendars change.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-buffer-time', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-buffer-time', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-buffer-time', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-buffer-time', 'componentDidLoad');\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      const bufferTime = {\n        before: this.selectedBeforeBufferTime,\n        after: this.selectedAfterBufferTime,\n      };\n      this.internals.setFormValue(JSON.stringify(bufferTime), this.name);\n    }\n    this.selectedAfterBufferTime = this.buffer.after;\n    this.selectedBeforeBufferTime = this.buffer.before;\n  }\n\n  componentWillUpdate() {\n    debug('nylas-buffer-time', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-buffer-time', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-buffer-time', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-buffer-time', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-buffer-time', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-buffer-time', 'selectedOptionChangedHandler', event.detail);\n    // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n    const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n      const { value, name } = event.detail;\n      if (name === 'before-buffer-time') {\n        this.selectedBeforeBufferTime = parseInt(value);\n      } else if (name === 'after-buffer-time') {\n        this.selectedAfterBufferTime = parseInt(value);\n      }\n      const bufferTime = {\n        before: this.selectedBeforeBufferTime,\n        after: this.selectedAfterBufferTime,\n      };\n      this.internals.setFormValue(JSON.stringify(bufferTime), 'booking-calendar');\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  renderPreview() {\n    const totalSlots = 4;\n    const slotHeight = 16; // The height for each 30-minute slot\n\n    // Event slot height is constant\n    const eventSlotHeight = slotHeight * 2;\n\n    // Helper function to determine the fill of a slot based on the minutes selected\n    const slotFill = minutes => {\n      const fullSlots = Math.floor(minutes / 30);\n      const partialFillHeight = ((minutes % 30) / 30) * slotHeight;\n\n      return {\n        fullSlots,\n        partialFillHeight,\n      };\n    };\n\n    // Helper function to create before slots\n    const createBeforeSlots = () => {\n      const { fullSlots, partialFillHeight } = slotFill(this.selectedBeforeBufferTime);\n\n      return Array.from({ length: totalSlots }, (_, index) => {\n        // Slot is active if its index is greater than the total slots minus the full slots minus one\n        // and there are some minutes selected.\n        const isActive = this.selectedBeforeBufferTime > 0 && index > totalSlots - fullSlots - 1;\n        const isPartial = this.selectedBeforeBufferTime > 0 && index === totalSlots - fullSlots - 1 && partialFillHeight > 0;\n\n        let slotStyle: {\n          backgroundColor?: string;\n          background?: string;\n        } = {};\n        if (isActive && !isPartial) {\n          slotStyle.backgroundColor = 'var(--nylas-base-100)';\n        } else if (isPartial) {\n          slotStyle.background = `linear-gradient(to top, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n        }\n\n        return (\n          <div\n            key={index}\n            class={`slot ${isActive ? 'active' : ''}`}\n            style={{\n              height: `${slotHeight}px`,\n              ...slotStyle,\n            }}\n          ></div>\n        );\n      });\n    };\n\n    // Helper function to create after slots\n    const createAfterSlots = () => {\n      const { fullSlots, partialFillHeight } = slotFill(this.selectedAfterBufferTime);\n\n      return Array.from({ length: totalSlots }, (_, index) => {\n        const isActive = this.selectedAfterBufferTime > 0 && index < fullSlots;\n        const isPartial = index === fullSlots && partialFillHeight > 0;\n\n        let slotStyle: {\n          backgroundColor?: string;\n          background?: string;\n        } = {};\n        if (isActive && !isPartial) {\n          slotStyle.backgroundColor = 'var(--nylas-base-100)';\n        } else if (isPartial) {\n          slotStyle.background = `linear-gradient(to bottom, var(--nylas-base-100) ${partialFillHeight}px, transparent 0)`;\n        }\n\n        return (\n          <div\n            key={index}\n            class={`slot ${isActive ? 'active' : ''}`}\n            style={{\n              height: `${slotHeight}px`,\n              ...slotStyle,\n            }}\n          ></div>\n        );\n      });\n    };\n\n    return (\n      <div class=\"preview-container\">\n        {createBeforeSlots()}\n        <div class=\"event-slot\" style={{ height: `${eventSlotHeight}px` }}></div>\n        {createAfterSlots()}\n      </div>\n    );\n  }\n\n  @RegisterComponent<NylasBufferTime, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-buffer-time',\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const minuteOptions = Array.from({ length: 121 }, (_, i) => {\n      return {\n        label: i.toString(),\n        value: i,\n      };\n    });\n\n    return (\n      <Host>\n        <div class=\"nylas-buffer-time\" part=\"nbt\">\n          <div class=\"header\" part=\"nbt__header\">\n            <h3>Buffer time</h3>\n            <p>Add buffer time before and after the event.</p>\n          </div>\n          <div class=\"nylas-buffer-time__body\" part=\"nbt__body\">\n            <div class=\"nylas-buffer-time__dropdown\">\n              <div class=\"nylas-buffer-time__row\">\n                <label>Before the event</label>\n                <div class=\"dropdown-container\">\n                  <select-dropdown\n                    id=\"before-buffer-time\"\n                    name=\"before-buffer-time\"\n                    exportparts=\"sd_dropdown: nbt__dropdown-before, sd_dropdown-button: nbt__dropdown-button-before, sd_dropdown-content: nbt__dropdown-content-before\"\n                    options={minuteOptions}\n                    defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedBeforeBufferTime) ?? minuteOptions[0]}\n                  />\n                  <span>mins</span>\n                </div>\n              </div>\n              <div class=\"nylas-buffer-time__row\">\n                <label>After the event</label>\n                <div class=\"dropdown-container\">\n                  <select-dropdown\n                    id=\"after-buffer-time\"\n                    name=\"after-buffer-time\"\n                    exportparts=\"sd_dropdown: nbt__dropdown-after, sd_dropdown-button: nbt__dropdown-button-after, sd_dropdown-content: nbt__dropdown-content-after\"\n                    options={minuteOptions}\n                    defaultSelectedOption={minuteOptions.find(min => min.value == this.selectedAfterBufferTime) ?? minuteOptions[0]}\n                  />\n                  <span>mins</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"nylas-buffer-time__preview\" part=\"nbt__preview\">\n              <h4>PREVIEW</h4>\n              {this.renderPreview()}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c14ea8f5.js');
-const registerComponent = require('./register-component-c8b6e907.js');
-const utils = require('./utils-2c7f0895.js');
+const registerComponent = require('./register-component-4f8ae42c.js');
+const utils = require('./utils-85bd0909.js');
 require('./_commonjsHelpers-ef8cd0cd.js');
 
 const nylasCalendarPickerCss = ":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-calendar-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-calendar-picker .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-calendar-picker .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-calendar-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-calendar-picker .nylas-calendar-picker__loading{padding-bottom:1rem;display:flex;flex-direction:column;gap:4px}.nylas-calendar-picker .nylas-calendar-picker__loading .label{display:flex;align-items:center;gap:0.5rem;margin:1rem 1rem 0;color:var(--nylas-base-800)}.nylas-calendar-picker .nylas-calendar-picker__loading .label tooltip-component{display:flex}.nylas-calendar-picker .nylas-calendar-picker__loading .loading-button{margin:0 1rem;padding:0;width:inherit;height:48px;color:black;font-size:1rem;cursor:not-allowed;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.nylas-calendar-picker .nylas-calendar-picker__loading .loading-button span{padding:0 1rem}.nylas-calendar-picker .nylas-calendar-picker__dropdown{padding:1rem}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown){width:100%;display:flex;flex-direction:column;gap:4px}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown-button){width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown-content){width:100%;max-width:unset}.nylas-calendar-picker .nylas-calendar-picker__dropdown multi-select-dropdown::part(msd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";

package/dist/cjs/nylas-cancel-booking-form.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c14ea8f5.js');
-const registerComponent = require('./register-component-c8b6e907.js');
-const utils = require('./utils-2c7f0895.js');
+const registerComponent = require('./register-component-4f8ae42c.js');
+const utils = require('./utils-85bd0909.js');
 require('./_commonjsHelpers-ef8cd0cd.js');
 
 const nylasCancelBookingFormCss = ":host{display:block;width:400px;--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}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.nylas-cancel-booking-form{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}.nylas-cancel-booking-form__title{font-size:18px;font-weight:600;margin-bottom:0;color:var(--nylas-base-900)}.nylas-cancel-booking-form__description{font-size:1rem;font-style:normal;font-weight:400;line-height:140%;color:var(--nylas-base-600)}.nylas-cancel-booking-form__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:16px;font-weight:600;width:100%;height:48px;padding:8px;line-height:24px;font-family:var(--nylas-font-family)}sp-button.cancel{margin-top:1.25rem;background-color:var(--nylas-primary);color:var(--nylas-base-0)}sp-button.cancel:hover,sp-button.cancel:focus{background-color:var(--nylas-base-600)}sp-button.cancel:active{background-color:var(--nylas-base-800)}sp-button.back{margin-top:0.5rem}sp-button.back:hover,sp-button.back:focus{border-color:var(--nylas-primary)}sp-button.back:active{border-color:var(--nylas-base-600)}sp-field-label{margin-top:1rem;display:flex;color:var(--nylas-base-800);font-size:14px}sp-field-label.error{color:var(--nylas-error)}sp-field-label span.required{color:var(--nylas-error)}sp-textfield{--spectrum-textfield-border-color:var(--nylas-base-300);--spectrum-textfield-icon-color-invalid:var(--nylas-error);position:relative;width:100%;height:48px;margin-bottom:16px;background-color:var(--nylas-base-0);color:var(--nylas-base-500)}sp-textfield.error{--spectrum-textfield-border-color:var(--nylas-error)}sp-help-text{margin:0.25rem 0 1rem 0;color:var(--nylas-error)}";

package/dist/cjs/nylas-cancelled-event-card.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c14ea8f5.js');
-const registerComponent = require('./register-component-c8b6e907.js');
-const utils = require('./utils-2c7f0895.js');
+const registerComponent = require('./register-component-4f8ae42c.js');
+const utils = require('./utils-85bd0909.js');
 require('./_commonjsHelpers-ef8cd0cd.js');
 
 const nylasCancelledEventCardCss = ":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}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.nylas-cancelled-event-card{display:flex;align-items:center;flex-direction:column;width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.nylas-cancelled-event-card{width:inherit}}.nylas-cancelled-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-cancelled-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-cancelled-event-card__calendar-icon{width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200)}.nylas-cancelled-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:1rem;height:48px;padding:8px;line-height:24px;width:100%}sp-button:hover,sp-button:focus{border-color:var(--nylas-primary)}sp-button:active{border-color:var(--nylas-base-600)}";
@@ -27,10 +27,18 @@ const NylasCancelledEventCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.closeCancelEventCardClicked = index.createEvent(this, "closeCancelEventCardClicked", 7);
+        this.cancelledEventCardError = index.createEvent(this, "cancelledEventCardError", 7);
         this.handleCloseClicked = () => {
-            this.closeCancelEventCardClicked.emit();
+            this.isClosing = true;
+            const errorHandler = (error) => {
+                this.cancelledEventCardError.emit(error);
+                this.isClosing = false;
+            };
+            this.closeCancelEventCardClicked.emit({ errorHandler });
         };
         this.cancelledEventInfo = undefined;
+        this.isClosing = false;
+        this.configSettings = undefined;
     }
     connectedCallback() {
         utils.debug(`[nylas-cancelled-event-card] Component connected`);
@@ -45,13 +53,22 @@ const NylasCancelledEventCard = class {
         utils.debug(`[nylas-cancelled-event-card] Component disconnected`);
     }
     render() {
-        return (index.h(index.Host, { key: '656dd5537bf436780d779e06362974295b6cf552', part: "ncec" }, index.h("sp-theme", { key: 'e6aa25eb233fd0bca7006fd9bf63c9fb54738a66', theme: "spectrum", color: "dark", scale: "medium" }, index.h("div", { key: '005da251e2cad861ca1cb2bc276b01990618995f', class: "nylas-cancelled-event-card", part: "ncec__card" }, index.h("div", { key: 'b30f8abc7dede57b909d69beb11a7da0015bf044', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, index.h("calendar-cancel-icon", { key: '9cc6e10a041979ff5a2a76c9d3e04446fdbfa27f' })), index.h("h3", { key: '0419fbe2aad08be631618146b77869307832f752', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), index.h("div", { key: 'c3fb84c05112e0a4055f6eaaf878ad7afda8726e', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to the participants."), index.h("div", { key: '0409b5465346ffea4c43789fa027f9b5a853d263', class: "nylas-cancelled-event-card__cta" }, index.h("sp-button", { key: '1d2efade3b5cd5ff48f3924c6b1e8248d2e478a3', variant: "secondary", treatment: "outline", part: "ncec__button-outline", onClick: this.handleCloseClicked }, "Close"))))));
+        return (index.h(index.Host, { key: '105954b6497f7a8cf45faedb592896629e90c6d0', part: "ncec" }, index.h("sp-theme", { key: 'd248975c2139a611ab60c5c585d87e8701327a4b', theme: "spectrum", color: "dark", scale: "medium" }, index.h("div", { key: '090b767111679ca9968ac0b128c6685fed6e39db', class: "nylas-cancelled-event-card", part: "ncec__card" }, index.h("div", { key: 'ae1e57f0f2a39f5ad7f4b7b9ed493f3e93ccdeba', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, index.h("calendar-cancel-icon", { key: '06250b1c0f330957f0f691d0f7724c608dffa28b' })), index.h("h3", { key: '1826c12ca770476cfd206d9d1a3b80f0d890da56', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), index.h("div", { key: '93c4c7e4ed245372e736c61c30b23e9be11453ec', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to ", this.configSettings?.organizer?.name || 'the participants', "."), index.h("div", { key: '21162d4c4e2ee6c2f95038b0e25e9ad0aed63742', class: "nylas-cancelled-event-card__cta" }, index.h("sp-button", { key: 'ab6cb1da324717c3b375c9280f307a2590224f27', variant: "secondary", treatment: "outline", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? 'Closing...' : 'Close'))))));
     }
 };
 __decorate([
     registerComponent.RegisterComponent({
         name: 'nylas-cancelled-event-card',
-        eventToProps: {},
+        stateToProps: new Map([['scheduler.configSettings', 'configSettings']]),
+        eventToProps: {
+            closeCancelEventCardClicked: async (_, nylasschedulerconnector) => {
+                const result = await nylasschedulerconnector.scheduler.resetCancel();
+                const { errorHandler } = _.detail;
+                if (errorHandler && (!result || 'error' in result)) {
+                    errorHandler(result);
+                }
+            },
+        },
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),

package/dist/cjs/nylas-cancelled-event-card.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nylas-cancelled-event-card.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,0BAA0B,GAAG,6mEAA6mE;;;;;;;;;;;;;;;;MCqBnoE,uBAAuB;;;;QA2B1B,uBAAkB,GAAG;YAC3B,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;SACzC,CAAC;;;IAlBF,iBAAiB;QACfA,WAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,iBAAiB;QACrBA,WAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,gBAAgB;QACpBA,WAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,oBAAoB;QAClBA,WAAK,CAAC,qDAAqD,CAAC,CAAC;KAC9D;IAWD,MAAM;QACJ,QACEC,QAACC,UAAI,qDAAC,IAAI,EAAC,MAAM,IACfD,uEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,IACpDA,kEAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY,IACvDA,kEAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,YAAY,IACtEA,oFAAwB,CACpB,EACNA,iEAAI,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,aAAa,oDAE3D,EACLA,kEAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB,8DAEvE,EACNA,kEAAK,KAAK,EAAC,iCAAiC,IAC1CA,wEAAW,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,YAEnG,CACR,CACF,CACG,CACN,EACP;KACH;;AAvBD;IALCE,mCAAiB,CAAkG;QAClH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDAwBD;;;;;","names":["debug","h","Host","RegisterComponent"],"sources":["src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.scss?tag=nylas-cancelled-event-card&encapsulation=shadow","src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\nsp-theme {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n}\n\n.nylas-cancelled-event-card {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: 400px;\n  @media #{$mobile} {\n    width: inherit;\n  }\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-800);\n  border-radius: var(--nylas-border-radius-2x);\n  padding: 1.5rem;\n  position: relative;\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.nylas-cancelled-event-card__title {\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 24px;\n  color: var(--nylas-base-900);\n  text-align: center;\n}\n\n.nylas-cancelled-event-description {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--nylas-base-600);\n}\n\n.nylas-cancelled-event-card__calendar-icon {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n}\n\n.nylas-cancelled-event-card__cta {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  margin-top: 1rem;\n}\n\ncalendar-cancel-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nsp-button {\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-700);\n  border: 1px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n  font-size: 1rem;\n  height: 48px;\n  padding: 8px;\n  line-height: 24px;\n  width: 100%;\n  &:hover,\n  &:focus {\n    border-color: var(--nylas-primary);\n  }\n  &:active {\n    border-color: var(--nylas-base-600);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\n\n/**\n * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card.\n *\n * @part ncec - The cancelled event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the cancelled event card.\n * @part ncec__description - The description of the cancelled event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The cancelled event card.\n */\n@Component({\n  tag: 'nylas-cancelled-event-card',\n  styleUrl: 'nylas-cancelled-event-card.scss',\n  shadow: true,\n})\nexport class NylasCancelledEventCard {\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly cancelledEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * This event is fired when the close button is clicked on the cancelled event card.\n   */\n  @Event() readonly closeCancelEventCardClicked!: EventEmitter<void>;\n\n  connectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-cancelled-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-cancelled-event-card] Component did load`);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component disconnected`);\n  }\n\n  private handleCloseClicked = () => {\n    this.closeCancelEventCardClicked.emit();\n  };\n\n  @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-cancelled-event-card',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"nylas-cancelled-event-card\" part=\"ncec__card\">\n            <div class=\"nylas-cancelled-event-card__calendar-icon\" part=\"ncec__icon\">\n              <calendar-cancel-icon />\n            </div>\n            <h3 class=\"nylas-cancelled-event-card__title\" part=\"ncec__title\">\n              Your booking has been cancelled successfully!\n            </h3>\n            <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n              A cancellation email has been sent to the participants.\n            </div>\n            <div class=\"nylas-cancelled-event-card__cta\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n                Close\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-cancelled-event-card.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,0BAA0B,GAAG,6mEAA6mE;;;;;;;;;;;;;;;;MCsBnoE,uBAAuB;;;;;QA0C1B,uBAAkB,GAAG;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,MAAM,YAAY,GAAG,CAAC,KAAkC;gBACtD,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACxB,CAAC;YACF,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;SACzD,CAAC;;yBAxC4B,KAAK;;;IAiBnC,iBAAiB;QACfA,WAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,iBAAiB;QACrBA,WAAK,CAAC,kDAAkD,CAAC,CAAC;KAC3D;IAED,MAAM,gBAAgB;QACpBA,WAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,oBAAoB;QAClBA,WAAK,CAAC,qDAAqD,CAAC,CAAC;KAC9D;IA0BD,MAAM;QACJ,QACEC,QAACC,UAAI,qDAAC,IAAI,EAAC,MAAM,IACfD,uEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,IACpDA,kEAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY,IACvDA,kEAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,YAAY,IACtEA,oFAAwB,CACpB,EACNA,iEAAI,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,aAAa,oDAE3D,EACLA,kEAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB,8CACpC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,IAAI,IAAI,kBAAkB,MAC7F,EACNA,kEAAK,KAAK,EAAC,iCAAiC,IAC1CA,wEAAW,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,IACtI,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,OAAO,CAC9B,CACR,CACF,CACG,CACN,EACP;KACH;;AAvBD;IAfCE,mCAAiB,CAAkG;QAClH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,0BAA0B,EAAE,gBAAgB,CAAC,CAAC,CAAC;QACvE,YAAY,EAAE;YACZ,2BAA2B,EAAE,OAAO,CAA+E,EAAE,uBAAgD;gBACnK,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;gBAErE,MAAM,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;gBAClC,IAAI,YAAY,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE;oBAClD,YAAY,CAAC,MAAM,CAAC,CAAC;iBACtB;aACF;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDAwBD;;;;;","names":["debug","h","Host","RegisterComponent"],"sources":["src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.scss?tag=nylas-cancelled-event-card&encapsulation=shadow","src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\nsp-theme {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n}\n\n.nylas-cancelled-event-card {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: 400px;\n  @media #{$mobile} {\n    width: inherit;\n  }\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-800);\n  border-radius: var(--nylas-border-radius-2x);\n  padding: 1.5rem;\n  position: relative;\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.nylas-cancelled-event-card__title {\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 24px;\n  color: var(--nylas-base-900);\n  text-align: center;\n}\n\n.nylas-cancelled-event-description {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--nylas-base-600);\n}\n\n.nylas-cancelled-event-card__calendar-icon {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n}\n\n.nylas-cancelled-event-card__cta {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  margin-top: 1rem;\n}\n\ncalendar-cancel-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\nsp-button {\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-700);\n  border: 1px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n  font-size: 1rem;\n  height: 48px;\n  padding: 8px;\n  line-height: 24px;\n  width: 100%;\n  &:hover,\n  &:focus {\n    border-color: var(--nylas-primary);\n  }\n  &:active {\n    border-color: var(--nylas-base-600);\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\n\n/**\n * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card.\n *\n * @part ncec - The cancelled event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the cancelled event card.\n * @part ncec__description - The description of the cancelled event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The cancelled event card.\n */\n@Component({\n  tag: 'nylas-cancelled-event-card',\n  styleUrl: 'nylas-cancelled-event-card.scss',\n  shadow: true,\n})\nexport class NylasCancelledEventCard {\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly cancelledEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * Closing state of the cancelled event card button.\n   */\n  @State() isClosing: boolean = false;\n\n  /**\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * This event is fired when the close button is clicked on the cancelled event card.\n   */\n  @Event() readonly closeCancelEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs.\n   */\n  @Event() readonly cancelledEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  connectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-cancelled-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-cancelled-event-card] Component did load`);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component disconnected`);\n  }\n\n  private handleCloseClicked = () => {\n    this.isClosing = true;\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.cancelledEventCardError.emit(error);\n      this.isClosing = false;\n    };\n    this.closeCancelEventCardClicked.emit({ errorHandler });\n  };\n\n  @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-cancelled-event-card',\n    stateToProps: new Map([['scheduler.configSettings', 'configSettings']]),\n    eventToProps: {\n      closeCancelEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n        const result = await nylasschedulerconnector.scheduler.resetCancel();\n\n        const { errorHandler } = _.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"nylas-cancelled-event-card\" part=\"ncec__card\">\n            <div class=\"nylas-cancelled-event-card__calendar-icon\" part=\"ncec__icon\">\n              <calendar-cancel-icon />\n            </div>\n            <h3 class=\"nylas-cancelled-event-card__title\" part=\"ncec__title\">\n              Your booking has been cancelled successfully!\n            </h3>\n            <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n              A cancellation email has been sent to {this.configSettings?.organizer?.name || 'the participants'}.\n            </div>\n            <div class=\"nylas-cancelled-event-card__cta\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n                {this.isClosing ? 'Closing...' : 'Close'}\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/nylas-composer.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c14ea8f5.js');
-const utils = require('./utils-2c7f0895.js');
+const utils = require('./utils-85bd0909.js');
 require('./_commonjsHelpers-ef8cd0cd.js');
 
 const nylasComposerCss = ":host{display:grid;color:var(--nylas-color-primary-900)}.editor{position:relative;display:block;max-height:300px;overflow:auto;padding:1rem;border:1px solid var(--nylas-color-primary-300)}.editor blockquote{visibility:hidden;overflow:hidden;position:relative;transition:height 0.3s ease;margin:0}.editor blockquote::before{content:\"...\";visibility:visible;opacity:1;position:absolute;top:0;left:0;background-color:var(--nylas-color-primary-300);width:20px;text-align:center;color:var(--nylas-color-primary-800);vertical-align:middle;display:flex;justify-content:center;align-items:center;align-self:center;cursor:pointer}.editor .collapsed{height:20px}.editor .expanded{visibility:visible;opacity:1;height:auto;margin:0px 0px 0px 0.8ex;border-left:1px solid var(--nylas-color-primary-300);padding-left:1rem}.editor .expanded::before{display:none;}.buttons{display:flex;margin-top:1rem;justify-content:space-between}.buttons sp-button{border-radius:var(--nylas-border-radius);background-color:var(--nylas-color-primary-400);color:var(--nylas-color-primary-900);fill:var(--nylas-color-primary-900)}.buttons sp-button:hover{background-color:var(--nylas-color-primary-500)}.buttons sp-button:disabled{background-color:var(--nylas-color-primary-200);color:var(--nylas-color-primary-600);cursor:not-allowed}.buttons sp-button chevron-icon{display:inline-block}.buttons .close{justify-self:end}.toolbar{position:absolute;display:none;background-color:var(--nylas-color-primary-200);border-radius:var(--nylas-border-radius);z-index:1}.toolbar sp-button{border:0}";

package/dist/cjs/nylas-custom-booking-flow.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c14ea8f5.js');
-const registerComponent = require('./register-component-c8b6e907.js');
-const utils = require('./utils-2c7f0895.js');
+const registerComponent = require('./register-component-4f8ae42c.js');
+const utils = require('./utils-85bd0909.js');
 require('./_commonjsHelpers-ef8cd0cd.js');
 
 const nylasCustomBookingFlowCss = ":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-custom-booking-flow{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-custom-booking-flow .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-custom-booking-flow .header h3{margin:0;font-size:1rem;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-custom-booking-flow .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-custom-booking-flow .nylas-custom-booking-flow__loading{padding-bottom:1rem}.nylas-custom-booking-flow .nylas-custom-booking-flow__loading .label{display:flex;align-items:center;gap:0.5rem;margin:1rem 1rem 0;color:var(--nylas-base-800)}.nylas-custom-booking-flow .nylas-custom-booking-flow__loading .loading-button{margin:0 1rem;padding:0;width:inherit;height:48px;color:black;font-size:1rem;cursor:not-allowed;display:flex;gap:0.5rem;justify-content:space-between;align-items:center;background:transparent;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.nylas-custom-booking-flow .nylas-custom-booking-flow__loading .loading-button span{padding:0 1rem}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown{padding:1rem}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown span.label{display:flex;align-items:center;gap:4px;color:var(--nylas-base-800)}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown span.label tooltip-component{display:flex}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown select-dropdown::part(sd_dropdown){width:100%}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown select-dropdown::part(sd_dropdown-button){width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown select-dropdown::part(sd_dropdown-content){width:100%;max-width:unset}.nylas-custom-booking-flow .nylas-custom-booking-flow__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c14ea8f5.js');
-const registerComponent = require('./register-component-c8b6e907.js');
-const utils = require('./utils-2c7f0895.js');
+const registerComponent = require('./register-component-4f8ae42c.js');
+const utils = require('./utils-85bd0909.js');
 require('./_commonjsHelpers-ef8cd0cd.js');
 
 const t0 = new Date, t1 = new Date;
@@ -1766,9 +1766,11 @@ const NylasDatePicker = class {
         this.monthChanged = index$1.createEvent(this, "monthChanged", 7);
         this.selectableDates = undefined;
         this.selectedDate = undefined;
+        this.configSettings = undefined;
         this.isLoading = undefined;
         this.month = this.selectedDate || new Date();
         this.dates = this.getDates();
+        this.disableNextMonthButton = false;
     }
     connectedCallback() { }
     disconnectedCallback() { }
@@ -1783,6 +1785,15 @@ const NylasDatePicker = class {
     }
     changeMonth(change) {
         this.month = new Date(this.month.getFullYear(), this.month.getMonth() + change, 1);
+        const nextMonth = new Date(this.month.getFullYear(), this.month.getMonth() + 1, 1);
+        const availableDaysInFuture = this.configSettings?.scheduler?.available_days_in_future;
+        const endDate = utils.addDaysToCurrentDate(new Date(), availableDaysInFuture);
+        if (endDate.getTime() < nextMonth.getTime()) {
+            this.disableNextMonthButton = true;
+        }
+        else {
+            this.disableNextMonthButton = false;
+        }
         this.dates = this.getDates();
         this.monthChanged.emit(this.month);
         this.selectDate();
@@ -1794,7 +1805,7 @@ const NylasDatePicker = class {
         return date && selectableDates?.find(d => utils.isSameDay(d, date)) === undefined;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'da3c7e290b60613575379d559e03d5e1dca04535', part: "ndp" }, index$1.h("div", { key: '4bb1b14f4f609f601b27f7ad2eb4baeed6cc4d55', class: "nylas-date-picker" }, index$1.h("div", { key: '5d6c68298c5e9606bae9e45a99f0c59da3d36854', class: 'header flex-row' }, index$1.h("h2", { key: '2504a779961e1e07a881f2eb2f5ffa5d8329e627', part: 'ndp__month-header' }, index$1.h("strong", { key: '433fdd38ccf5b49144bafd3b284acd26b94d19c4' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), index$1.h("div", { key: 'ffaa3276b249a85dc197828625835ad1f2278179', class: 'pagination' }, index$1.h("button", { key: '451c9d09fc01e4c7ae35742d7c6b4b2f3da4d3ee', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, index$1.h("chevron-icon", { key: '3a23fa0fb325feab4b56477602f122b800dce5ce' })), index$1.h("button", { key: '56b81156d02525a70c6c567e5facb1d9995ea2de', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: !this.selectableDates?.length, part: "ndp__month-button" }, index$1.h("chevron-icon", { key: '1329d513678bffec6bc21d579b240e7af29ec530' })))), index$1.h("div", { key: '14eb94fe04ca2797f3377057a87825689b818719', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
+        return (index$1.h(index$1.Host, { key: 'fd7de67053417b11844a66e5b978f7feb80efe18', part: "ndp" }, index$1.h("div", { key: 'a08943851e2239ad12121b90f35760d73a085441', class: "nylas-date-picker" }, index$1.h("div", { key: '832ad38012c55eb04ab2c5b0ceb50052ab3edd42', class: 'header flex-row' }, index$1.h("h2", { key: '2df451227e57dfee081c1d4435443e479cf8871c', part: 'ndp__month-header' }, index$1.h("strong", { key: '63421dca4b9bf36207ba05e9eff795c7c198287c' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), index$1.h("div", { key: 'ca982a82d87baf5658674624c1153f14e77470aa', class: 'pagination' }, index$1.h("button", { key: 'd2a41582014f92c23784c71fe1df9834d77fd355', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, index$1.h("chevron-icon", { key: '4f319da7e440236edb9bfa711fb0b05cd046dc8e' })), index$1.h("button", { key: 'ff00426293e1857592ebae58557ea46e5db9858d', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: !this.selectableDates?.length || this.disableNextMonthButton, part: "ndp__month-button" }, index$1.h("chevron-icon", { key: '7075f5e8da61c9d91fb612771a3d7672f1521b6f' })))), index$1.h("div", { key: '3ad884077d163de5182731c03bf856c9e204f411', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
             return (index$1.h("div", { class: 'day', part: "ndp__day" }, day));
         }), this.dates.map((date, i) => {
             const isDisabled = this.isDisabled(date, this.selectableDates);
@@ -1820,6 +1831,7 @@ __decorate([
             ['scheduler.selectableDates', 'selectableDates'],
             ['scheduler.selectedDate', 'selectedDate'],
             ['scheduler.isLoading', 'isLoading'],
+            ['scheduler.configSettings', 'configSettings'],
         ]),
         eventToProps: {
             dateSelected: async (event, nylasSchedulerConnector) => {