@nylas/web-elements 1.1.0-canary.4 → 1.1.0-canary.5

package/dist/components/nylas-custom-booking-flow2.js

@@ -87,7 +87,7 @@ const NylasCustomBookingFlow = proxyCustomElement(class NylasCustomBookingFlow e
                 value: 'pre-booking',
             },
         ];
-        return (h(Host, { key: 'fe9e837aba8f846a0b77a21eee365080d41b4e57' }, h("div", { key: '2405db5290bcd44a602fd9f91bb91e13a9d7ffc7', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: '2de829660fdba0da9e6cbcd6281c427b65414d90', class: "header", part: "ncbf__header" }, h("h3", { key: '13e3b9e450f54f04538c773ab2564513cdaf0fa5' }, "Customize booking flow"), h("p", { key: '9436439f81faf9aed4ff9029c5c0a08a268b5e59' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
+        return (h(Host, { key: 'a4f8162f7964925b34c256d88fa8cd3f0e684e7e' }, h("div", { key: '3b5c6077ad57d232f9c25c17b117b4ad31cf3cfa', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: '4ecafa38be03812b2b6188d4858018d5cd94be8e', class: "header", part: "ncbf__header" }, h("h3", { key: 'd0eccafc6133ff24de9fbab11737e08862aad835' }, "Customize booking flow"), h("p", { key: '0e75183824a878b6df83f92467aba58072d2ac6f' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
@@ -157,7 +157,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasCustomBookingFlow);
 
 export { NylasCustomBookingFlow as N, defineCustomElement as d };
 

package/dist/components/nylas-custom-booking-flow2.js.map

@@ -1 +1 @@
-{"file":"nylas-custom-booking-flow2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.scss?tag=nylas-custom-booking-flow&encapsulation=shadow","src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.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-custom-booking-flow {\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: 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  .nylas-custom-booking-flow__loading {\n    padding-bottom: 1rem;\n    .label {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin: 1rem 1rem 0;\n      color: var(--nylas-base-800);\n    }\n    .loading-button {\n      margin: 0 1rem;\n      padding: 0;\n      width: inherit;\n      height: 48px;\n      color: black;\n      font-size: 1rem;\n      cursor: not-allowed;\n      display: flex;\n      gap: 0.5rem;\n      justify-content: space-between;\n      align-items: center;\n      background: transparent;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      span {\n        padding: 0 1rem;\n      }\n    }\n  }\n  .nylas-custom-booking-flow__dropdown {\n    padding: 1rem;\n    span.label {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--nylas-base-800);\n      tooltip-component {\n        display: flex;\n      }\n    }\n    select-dropdown::part(sd_dropdown) {\n      width: 100%;\n    }\n    select-dropdown::part(sd_dropdown-button) {\n      width: 100%;\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      max-width: unset;\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-custom-booking-flow` component is a UI component that displays the booking calendar picker.\n * @part ncbf - The custom booking flow container\n * @part ncbf__header - The header of the custom booking flow\n * @part ncbf__dropdown - The dropdown container\n * @part ncbf__dropdown-button - The dropdown button\n * @part ncbf__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-custom-booking-flow',\n  styleUrl: 'nylas-custom-booking-flow.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCustomBookingFlow {\n  @Element() host!: HTMLNylasCustomBookingFlowElement;\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'booking-type';\n  /**\n   * The booking type.\n   */\n  @Prop() bookingType: string = '';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected bookingType.\n   */\n  @State() selectedBookingType: string = '';\n\n  /**\n   * This event is fired when the selected bookingType changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-custom-booking-flow', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-custom-booking-flow', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-custom-booking-flow', '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-custom-booking-flow', 'componentDidLoad');\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');\n    }\n    this.selectedBookingType = this.bookingType;\n  }\n\n  componentWillUpdate() {\n    debug('nylas-custom-booking-flow', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-custom-booking-flow', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-custom-booking-flow', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-custom-booking-flow', '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-custom-booking-flow', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-custom-booking-flow', '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 } = event.detail;\n      this.selectedBookingType = value;\n      this.internals.setFormValue(value.toString(), 'booking-calendar');\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  @RegisterComponent<NylasCustomBookingFlow, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-custom-booking-flow',\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 bookingOptions = [\n      {\n        label: 'Automatically accept bookings',\n        value: 'booking',\n      },\n      {\n        label: 'Manually confirm/decline bookings',\n        value: 'pre-booking',\n      },\n    ];\n\n    return (\n      <Host>\n        <div class=\"nylas-custom-booking-flow\" part=\"ncbf\">\n          <div class=\"header\" part=\"ncbf__header\">\n            <h3>Customize booking flow</h3>\n            <p>Customize how new bookings are handled when a booking is completed.</p>\n          </div>\n\n          {bookingOptions.length > 0 ? (\n            <div class=\"nylas-custom-booking-flow__dropdown\">\n              <span class=\"label\">\n                After a booking is confirmed\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">\n                    Choose how you’d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking\n                    request.\n                  </span>\n                </tooltip-component>\n              </span>\n              <select-dropdown\n                name=\"booking-type\"\n                options={bookingOptions}\n                withSearch={false}\n                exportparts=\"sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content\"\n                defaultSelectedOption={bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0]}\n              />\n            </div>\n          ) : (\n            <div class=\"nylas-custom-booking-flow__loading\">\n              <span class=\"label\">\n                Select a calendar to book meetings on <info-icon />\n              </span>\n              <div class=\"loading-button\">\n                <span>Loading...</span>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-custom-booking-flow2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.scss?tag=nylas-custom-booking-flow&encapsulation=shadow","src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.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-custom-booking-flow {\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: 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  .nylas-custom-booking-flow__loading {\n    padding-bottom: 1rem;\n    .label {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin: 1rem 1rem 0;\n      color: var(--nylas-base-800);\n    }\n    .loading-button {\n      margin: 0 1rem;\n      padding: 0;\n      width: inherit;\n      height: 48px;\n      color: black;\n      font-size: 1rem;\n      cursor: not-allowed;\n      display: flex;\n      gap: 0.5rem;\n      justify-content: space-between;\n      align-items: center;\n      background: transparent;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      span {\n        padding: 0 1rem;\n      }\n    }\n  }\n  .nylas-custom-booking-flow__dropdown {\n    padding: 1rem;\n    span.label {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--nylas-base-800);\n      tooltip-component {\n        display: flex;\n      }\n    }\n    select-dropdown::part(sd_dropdown) {\n      width: 100%;\n    }\n    select-dropdown::part(sd_dropdown-button) {\n      width: 100%;\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      max-width: unset;\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-custom-booking-flow` component is a UI component that displays the booking calendar picker.\n * @part ncbf - The custom booking flow container\n * @part ncbf__header - The header of the custom booking flow\n * @part ncbf__dropdown - The dropdown container\n * @part ncbf__dropdown-button - The dropdown button\n * @part ncbf__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-custom-booking-flow',\n  styleUrl: 'nylas-custom-booking-flow.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCustomBookingFlow {\n  @Element() host!: HTMLNylasCustomBookingFlowElement;\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'booking-type';\n  /**\n   * The booking type.\n   */\n  @Prop() bookingType: string = '';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected bookingType.\n   */\n  @State() selectedBookingType: string = '';\n\n  /**\n   * This event is fired when the selected bookingType changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-custom-booking-flow', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-custom-booking-flow', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-custom-booking-flow', '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-custom-booking-flow', 'componentDidLoad');\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');\n    }\n    this.selectedBookingType = this.bookingType;\n  }\n\n  componentWillUpdate() {\n    debug('nylas-custom-booking-flow', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-custom-booking-flow', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-custom-booking-flow', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-custom-booking-flow', '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-custom-booking-flow', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-custom-booking-flow', '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 } = event.detail;\n      this.selectedBookingType = value;\n      this.internals.setFormValue(value.toString(), 'booking-calendar');\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  @RegisterComponent<NylasCustomBookingFlow, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-custom-booking-flow',\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 bookingOptions = [\n      {\n        label: 'Automatically accept bookings',\n        value: 'booking',\n      },\n      {\n        label: 'Manually confirm/decline bookings',\n        value: 'pre-booking',\n      },\n    ];\n\n    return (\n      <Host>\n        <div class=\"nylas-custom-booking-flow\" part=\"ncbf\">\n          <div class=\"header\" part=\"ncbf__header\">\n            <h3>Customize booking flow</h3>\n            <p>Customize how new bookings are handled when a booking is completed.</p>\n          </div>\n\n          {bookingOptions.length > 0 ? (\n            <div class=\"nylas-custom-booking-flow__dropdown\">\n              <span class=\"label\">\n                After a booking is confirmed\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">\n                    Choose how you’d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking\n                    request.\n                  </span>\n                </tooltip-component>\n              </span>\n              <select-dropdown\n                name=\"booking-type\"\n                options={bookingOptions}\n                withSearch={false}\n                exportparts=\"sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content\"\n                defaultSelectedOption={bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0]}\n              />\n            </div>\n          ) : (\n            <div class=\"nylas-custom-booking-flow__loading\">\n              <span class=\"label\">\n                Select a calendar to book meetings on <info-icon />\n              </span>\n              <div class=\"loading-button\">\n                <span>Loading...</span>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-date-picker2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { h as getLastDayOfMonth, i as getFirstDayOfMonth, j as isSameDay, k as isSameMonth } from './utils.js';
+import { l as getLastDayOfMonth, n as getFirstDayOfMonth, o as isSameDay, p as isSameMonth } from './utils.js';
 import { d as defineCustomElement$1 } from './chevron.js';
 
 const t0 = new Date, t1 = new Date;
@@ -1855,7 +1855,6 @@ function defineCustomElement() {
             break;
     } });
 }
-defineCustomElement(NylasDatePicker);
 
 export { NylasDatePicker as N, defineCustomElement as d };