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

package/dist/components/nylas-booking-confirmation-type2.js.map

@@ -1 +1 @@
-{"file":"nylas-booking-confirmation-type2.js","mappings":";;;;;;;;;AAAA,MAAM,+BAA+B,GAAG,swDAAswD,CAAC;AAC/yD,2CAAe,+BAA+B;;;;;;;;;;;;;;;;MCoBjC,4BAA4B;;;;;;;;oBAUhB,mBAAmB;2BAIZ,SAAS;6BAON,IAAI,CAAC,qBAAqB,EAAE,aAAa,EAAE,YAAY,KAAK,qBAAqB;;;;IA8BlH,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,iCAAiC,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QAChF,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;KAC1C;IAGD,mCAAmC,CAAC,QAAuB;QACzD,KAAK,CAAC,iCAAiC,EAAE,qCAAqC,EAAE,QAAQ,CAAC,CAAC;QAC1F,IAAI,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE;YACzC,IAAI,CAAC,mBAAmB,GAAG,QAAQ,EAAE,aAAa,EAAE,YAAY,CAAC;YACjE,IAAI,CAAC,YAAY,GAAG,QAAQ,EAAE,aAAa,EAAE,YAAY,KAAK,qBAAqB,IAAI,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,0BAA0B,CAAC;SAC1I;KACF;IAGD,iBAAiB;QACf,KAAK,CAAC,iCAAiC,EAAE,mBAAmB,CAAC,CAAC;KAC/D;IAED,oBAAoB;QAClB,KAAK,CAAC,iCAAiC,EAAE,sBAAsB,CAAC,CAAC;KAClE;IAED,iBAAiB;QACf,KAAK,CAAC,iCAAiC,EAAE,mBAAmB,CAAC,CAAC;QAE9D,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3C;IAED,gBAAgB;QACd,KAAK,CAAC,iCAAiC,EAAE,kBAAkB,CAAC,CAAC;QAC7D,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,IAAI,CAAC,mCAAmC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;SACtE;aAAM;YACL,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,WAAW,IAAI,SAAS,CAAC;SAC1D;QACD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5E,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,qBAAqB,EAAE,aAAa,EAAE,YAAY,KAAK,qBAAqB,IAAI,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE,SAAS,EAAE,0BAA0B,CAAC;KAC9K;IAED,mBAAmB;QACjB,KAAK,CAAC,iCAAiC,EAAE,qBAAqB,CAAC,CAAC;KACjE;IAED,kBAAkB;QAChB,KAAK,CAAC,iCAAiC,EAAE,oBAAoB,CAAC,CAAC;KAChE;IAED,mBAAmB;QACjB,KAAK,CAAC,iCAAiC,EAAE,qBAAqB,CAAC,CAAC;KACjE;IAED,kBAAkB;QAChB,KAAK,CAAC,iCAAiC,EAAE,oBAAoB,CAAC,CAAC;KAChE;IAGD,+BAA+B,CAAC,KAAmD;QACjF,KAAK,CAAC,iCAAiC,EAAE,iCAAiC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAE1F,MAAM,YAAY,GAAG,CAAC,KAAmD;YACvE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;YAC/B,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;SAC1D,CAAC;QACF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;KAC3D;IAmBD,MAAM;QACJ,MAAM,cAAc,GAAG;YACrB;gBACE,KAAK,EAAE,+BAA+B;gBACtC,KAAK,EAAE,SAAS;aACjB;YACD;gBACE,KAAK,EAAE,0BAA0B;gBACjC,KAAK,EAAE,wBAAwB;aAChC;SACF,CAAC;QAEF,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,YAAY,KAChB,WAAK,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,IACrD,cAAc,CAAC,MAAM,GAAG,CAAC,KACxB,WAAK,KAAK,EAAC,2CAA2C,IACpD,YAAM,KAAK,EAAC,OAAO,mCAEjB,6BACE,iBAAW,IAAI,EAAC,cAAc,GAAG,EACjC,YAAM,IAAI,EAAC,iBAAiB,uGAAwG,CAClH,CACf,EACN,IAAI,CAAC,mBAAmB,KACvB,uBACE,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,cAAc,EACvB,UAAU,EAAE,KAAK,EACjB,WAAW,EAAC,qHAAqH,EACjI,qBAAqB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,IAAI,IAAI,CAAC,mBAAmB,CAAC,GACxF,CACH,CACG,CACP,CACG,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;AAxCD;IAjBC,iBAAiB,CAAkH;QAClI,IAAI,EAAE,iCAAiC;QACvC,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,uCAAuC,EAAE,uBAAuB,CAAC,CAAC,CAAC;QAC3F,YAAY,EAAE;YACZ,YAAY,EAAE,OACZ,KAAiI,EACjI,8BAA6D;gBAE7D,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBAEtC,IAAI,YAAY,EAAE;oBAChB,YAAY,CAAC,KAAK,CAAC,CAAC;iBACrB;aACF;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;0DAyCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-booking-confirmation-type/nylas-booking-confirmation-type.scss?tag=nylas-booking-confirmation-type&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-confirmation-type/nylas-booking-confirmation-type.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-booking-confirmation-type {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 1rem;\n\n  .nylas-booking-confirmation-type__dropdown {\n    span.label {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--nylas-base-800);\n\n      tooltip-component {\n        display: flex;\n      }\n    }\n\n    select-dropdown::part(sd_dropdown) {\n      width: 100%;\n    }\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\n    select-dropdown::part(sd_dropdown-content) {\n      width: 100%;\n      max-width: unset;\n    }\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';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-booking-confirmation-type` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed.\n * @part nbct - The custom booking flow container\n * @part nbct__header - The header of the custom booking flow\n * @part nbct__dropdown - The dropdown container\n * @part nbct__dropdown-button - The dropdown button\n * @part nbct__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-booking-confirmation-type',\n  styleUrl: 'nylas-booking-confirmation-type.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasBookingConfirmationType {\n  @Element() host!: HTMLNylasBookingConfirmationTypeElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * The name of the confirmation redirect link.\n   */\n  @Prop() name: string = 'confirmation-type';\n  /**\n   * The booking type.\n   */\n  @Prop() bookingType: string = 'booking';\n  /**\n   * @deprecated Show or hide the confirmation type.\n   * This prop is automatically determined based on the value of selectedConfiguration in the config,\n   * making it unnecessary to set this prop manually. The selectedConfiguration alone handles the functionality.\n   * This prop is deprecated and will be removed in the next version. Setting this prop will have no effect.\n   */\n  @Prop() showComponent: boolean = this.selectedConfiguration?.event_booking?.booking_type !== 'custom-confirmation';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected bookingType.\n   */\n  @State() selectedBookingType!: string;\n\n  /**\n   * The open/close state of the booking confirmation type dropdown.\n   */\n  @State() showDropdown!: boolean;\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  /**\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-booking-confirmation-type', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-booking-confirmation-type', 'selectedConfigurationChangedHandler', newValue);\n    if (newValue?.event_booking?.booking_type) {\n      this.selectedBookingType = newValue?.event_booking?.booking_type;\n      this.showDropdown = newValue?.event_booking?.booking_type !== 'custom-confirmation' && !!newValue?.scheduler?.organizer_confirmation_url;\n    }\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-booking-confirmation-type', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-booking-confirmation-type', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-booking-confirmation-type', '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-booking-confirmation-type', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.selectedBookingType = this.bookingType || 'booking';\n    }\n    this.internals.setFormValue(this.selectedBookingType.toString(), this.name);\n    this.showDropdown = this.selectedConfiguration?.event_booking?.booking_type !== 'custom-confirmation' && !!this.selectedConfiguration?.scheduler?.organizer_confirmation_url;\n  }\n\n  componentWillUpdate() {\n    debug('nylas-booking-confirmation-type', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-booking-confirmation-type', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-booking-confirmation-type', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-booking-confirmation-type', 'componentDidRender');\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-booking-confirmation-type', 'nylasFormDropdownChangedHandler', 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(), this.name);\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  @RegisterComponent<NylasBookingConfirmationType, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-booking-confirmation-type',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const bookingOptions = [\n      {\n        label: 'Automatically accept bookings',\n        value: 'booking',\n      },\n      {\n        label: 'Manually accept bookings',\n        value: 'organizer-confirmation',\n      },\n    ];\n\n    return (\n      <Host>\n        {this.showDropdown && (\n          <div class=\"nylas-booking-confirmation-type\" part=\"nbct\">\n            {bookingOptions.length > 0 && (\n              <div class=\"nylas-booking-confirmation-type__dropdown\">\n                <span class=\"label\">\n                  When a booking is requested\n                  <tooltip-component>\n                    <info-icon slot=\"tooltip-icon\" />\n                    <span slot=\"tooltip-content\">Manually accept bookings allows you to review and either accept or decline each booking request.</span>\n                  </tooltip-component>\n                </span>\n                {this.selectedBookingType && (\n                  <select-dropdown\n                    name=\"booking-type\"\n                    options={bookingOptions}\n                    withSearch={false}\n                    exportparts=\"sd_dropdown: nbct__dropdown, sd_dropdown-button: nbct__dropdown-button, sd_dropdown-content: nbct__dropdown-content\"\n                    defaultSelectedOption={bookingOptions.find(cal => cal.value == this.selectedBookingType)}\n                  />\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-booking-confirmation-type2.js","mappings":";;;;;;;;;AAAA,MAAM,+BAA+B,GAAG,swDAAswD,CAAC;AAC/yD,2CAAe,+BAA+B;;;;;;;;;;;;;;;;MCoBjC,4BAA4B;;;;;;;;oBAYhB,mBAAmB;2BAKZ,SAAS;6BAON,IAAI,CAAC,qBAAqB,EAAE,aAAa,EAAE,YAAY,KAAK,qBAAqB;;;;IA8BlH,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,iCAAiC,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QAChF,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;KAC1C;IAGD,mCAAmC,CAAC,QAAuB;QACzD,KAAK,CAAC,iCAAiC,EAAE,qCAAqC,EAAE,QAAQ,CAAC,CAAC;QAC1F,IAAI,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE;YACzC,IAAI,CAAC,mBAAmB,GAAG,QAAQ,EAAE,aAAa,EAAE,YAAY,CAAC;YACjE,IAAI,CAAC,YAAY,GAAG,QAAQ,EAAE,aAAa,EAAE,YAAY,KAAK,qBAAqB,IAAI,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,0BAA0B,CAAC;SAC1I;KACF;IAGD,iBAAiB;QACf,KAAK,CAAC,iCAAiC,EAAE,mBAAmB,CAAC,CAAC;KAC/D;IAED,oBAAoB;QAClB,KAAK,CAAC,iCAAiC,EAAE,sBAAsB,CAAC,CAAC;KAClE;IAED,iBAAiB;QACf,KAAK,CAAC,iCAAiC,EAAE,mBAAmB,CAAC,CAAC;QAE9D,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC3C;IAED,gBAAgB;QACd,KAAK,CAAC,iCAAiC,EAAE,kBAAkB,CAAC,CAAC;QAC7D,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,IAAI,CAAC,mCAAmC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;SACtE;aAAM;YACL,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,WAAW,IAAI,SAAS,CAAC;YACzD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC;SACxC;QACD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7E;IAED,mBAAmB;QACjB,KAAK,CAAC,iCAAiC,EAAE,qBAAqB,CAAC,CAAC;KACjE;IAED,kBAAkB;QAChB,KAAK,CAAC,iCAAiC,EAAE,oBAAoB,CAAC,CAAC;KAChE;IAED,mBAAmB;QACjB,KAAK,CAAC,iCAAiC,EAAE,qBAAqB,CAAC,CAAC;KACjE;IAED,kBAAkB;QAChB,KAAK,CAAC,iCAAiC,EAAE,oBAAoB,CAAC,CAAC;KAChE;IAGD,+BAA+B,CAAC,KAAmD;QACjF,KAAK,CAAC,iCAAiC,EAAE,iCAAiC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAE1F,MAAM,YAAY,GAAG,CAAC,KAAmD;YACvE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;YAC/B,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;SAC1D,CAAC;QACF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;KAC3D;IAmBD,MAAM;QACJ,MAAM,cAAc,GAAG;YACrB;gBACE,KAAK,EAAE,+BAA+B;gBACtC,KAAK,EAAE,SAAS;aACjB;YACD;gBACE,KAAK,EAAE,0BAA0B;gBACjC,KAAK,EAAE,wBAAwB;aAChC;SACF,CAAC;QAEF,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,YAAY,KAChB,WAAK,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,IACrD,cAAc,CAAC,MAAM,GAAG,CAAC,KACxB,WAAK,KAAK,EAAC,2CAA2C,IACpD,YAAM,KAAK,EAAC,OAAO,mCAEjB,6BACE,iBAAW,IAAI,EAAC,cAAc,GAAG,EACjC,YAAM,IAAI,EAAC,iBAAiB,uGAAwG,CAClH,CACf,EACN,IAAI,CAAC,mBAAmB,KACvB,uBACE,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,cAAc,EACvB,UAAU,EAAE,KAAK,EACjB,WAAW,EAAC,qHAAqH,EACjI,qBAAqB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,IAAI,IAAI,CAAC,mBAAmB,CAAC,GACxF,CACH,CACG,CACP,CACG,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;AAxCD;IAjBC,iBAAiB,CAAkH;QAClI,IAAI,EAAE,iCAAiC;QACvC,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,uCAAuC,EAAE,uBAAuB,CAAC,CAAC,CAAC;QAC3F,YAAY,EAAE;YACZ,YAAY,EAAE,OACZ,KAAiI,EACjI,8BAA6D;gBAE7D,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBAEtC,IAAI,YAAY,EAAE;oBAChB,YAAY,CAAC,KAAK,CAAC,CAAC;iBACrB;aACF;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;0DAyCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/scheduler-editor/nylas-booking-confirmation-type/nylas-booking-confirmation-type.scss?tag=nylas-booking-confirmation-type&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-confirmation-type/nylas-booking-confirmation-type.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-booking-confirmation-type {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 1rem;\n\n  .nylas-booking-confirmation-type__dropdown {\n    span.label {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--nylas-base-800);\n\n      tooltip-component {\n        display: flex;\n      }\n    }\n\n    select-dropdown::part(sd_dropdown) {\n      width: 100%;\n    }\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\n    select-dropdown::part(sd_dropdown-content) {\n      width: 100%;\n      max-width: unset;\n    }\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';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-booking-confirmation-type` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed.\n * @part nbct - The custom booking flow container\n * @part nbct__header - The header of the custom booking flow\n * @part nbct__dropdown - The dropdown container\n * @part nbct__dropdown-button - The dropdown button\n * @part nbct__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-booking-confirmation-type',\n  styleUrl: 'nylas-booking-confirmation-type.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasBookingConfirmationType {\n  @Element() host!: HTMLNylasBookingConfirmationTypeElement;\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * @standalone\n   * The name of the confirmation redirect link.\n   */\n  @Prop() name: string = 'confirmation-type';\n  /**\n   * @standalone\n   * The booking type.\n   */\n  @Prop() bookingType: string = 'booking';\n  /**\n   * @standalone\n   * Show or hide the confirmation type.\n   * This prop is automatically determined based on the value of selectedConfiguration in the config,\n   * making it unnecessary to set this prop manually.\n   */\n  @Prop() showComponent: boolean = this.selectedConfiguration?.event_booking?.booking_type !== 'custom-confirmation';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected bookingType.\n   */\n  @State() selectedBookingType!: string;\n\n  /**\n   * The open/close state of the booking confirmation type dropdown.\n   */\n  @State() showDropdown!: boolean;\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  /**\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-booking-confirmation-type', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-booking-confirmation-type', 'selectedConfigurationChangedHandler', newValue);\n    if (newValue?.event_booking?.booking_type) {\n      this.selectedBookingType = newValue?.event_booking?.booking_type;\n      this.showDropdown = newValue?.event_booking?.booking_type !== 'custom-confirmation' && !!newValue?.scheduler?.organizer_confirmation_url;\n    }\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-booking-confirmation-type', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-booking-confirmation-type', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-booking-confirmation-type', '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-booking-confirmation-type', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.selectedBookingType = this.bookingType || 'booking';\n      this.showDropdown = this.showComponent;\n    }\n    this.internals.setFormValue(this.selectedBookingType.toString(), this.name);\n  }\n\n  componentWillUpdate() {\n    debug('nylas-booking-confirmation-type', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-booking-confirmation-type', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-booking-confirmation-type', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-booking-confirmation-type', 'componentDidRender');\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-booking-confirmation-type', 'nylasFormDropdownChangedHandler', 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(), this.name);\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  @RegisterComponent<NylasBookingConfirmationType, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-booking-confirmation-type',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const bookingOptions = [\n      {\n        label: 'Automatically accept bookings',\n        value: 'booking',\n      },\n      {\n        label: 'Manually accept bookings',\n        value: 'organizer-confirmation',\n      },\n    ];\n\n    return (\n      <Host>\n        {this.showDropdown && (\n          <div class=\"nylas-booking-confirmation-type\" part=\"nbct\">\n            {bookingOptions.length > 0 && (\n              <div class=\"nylas-booking-confirmation-type__dropdown\">\n                <span class=\"label\">\n                  When a booking is requested\n                  <tooltip-component>\n                    <info-icon slot=\"tooltip-icon\" />\n                    <span slot=\"tooltip-content\">Manually accept bookings allows you to review and either accept or decline each booking request.</span>\n                  </tooltip-component>\n                </span>\n                {this.selectedBookingType && (\n                  <select-dropdown\n                    name=\"booking-type\"\n                    options={bookingOptions}\n                    withSearch={false}\n                    exportparts=\"sd_dropdown: nbct__dropdown, sd_dropdown-button: nbct__dropdown-button, sd_dropdown-content: nbct__dropdown-content\"\n                    defaultSelectedOption={bookingOptions.find(cal => cal.value == this.selectedBookingType)}\n                  />\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-booking-form-config2.js

@@ -3598,7 +3598,7 @@ const NylasBookingFormConfig = proxyCustomElement(class NylasBookingFormConfig e
         });
     }
     render() {
-        return (h(Host, { key: '8db177dc9df5c63aaae9e657b81a564d2df2d34e' }, h("div", { key: '3026f554b98ffdb0e14173a49bff44a85ad5cc17', class: "nylas-booking-form-config" }, h("div", { key: '4369640ba9d4411713d5066324fa6f59fb4040da', class: "header", part: "nbfc__header" }, h("div", { key: '1a4bfa5b5ef7532cb36be53bdc1f7d73db365c33', class: "header_text" }, h("h3", { key: 'c689200151903cb8b410c78da9dafc6550d0c51e' }, "Booking form"), h("p", { key: 'a53818d44fb4fce66b4a07d41f4fd1322efb4f5a' }, "Add custom fields to the booking form.")), h("div", { key: '8059ccdaad2ccabd0f33728cd4f93b1f3b8aebdd', class: "header_action" }, h("select-dropdown", { key: '7c11e6c8d82c9b7d585f85e2847d48c70d696e72', name: "add-field", exportparts: "sd_dropdown: nbfc__add_field, sd_dropdown-button: nbfc__add_field-button, sd_dropdown-content: nbfc__add_field-dropdown-content", options: DEFAULT_FORM_FIELD_TYPES, withSearch: false, withChevron: false, dropdownButtonText: "Add new field" }, h("span", { key: '7e099ef91121f954377db3a4a0c517d58df3a1e8', slot: "select-icon" }, h("plus-icon", { key: 'bbdd97931d1826cc4955e1bc695f984f8ee35a20', width: "15", height: "15" }))))), h("div", { key: '417adc5084d74399f9a77f2da83117fe7c0160a3', class: "content" }, h("div", { key: '598bbda9bf5b9d87a8e13fc336c3879b327c58e6', id: "fields", class: "additional_fields", part: "nbfc__additional_fields" }, this.formFields.map((field, i) => {
+        return (h(Host, { key: '890a8dc51e6aee455ce2eec3b1b9e534122e87e1' }, h("div", { key: 'a6d477428eb9851402cadbe384fd5dc7a0a7788b', class: "nylas-booking-form-config", part: "nbfc" }, h("div", { key: '4fa905aa07838ab99c01d20f2e8f809a24328059', class: "header", part: "nbfc__header" }, h("div", { key: '33b8980d3927d1aa717aade3f6e1e3f3b099feab', class: "header_text" }, h("h3", { key: '2381bd7f07124b653aac4542946585357d1eecd5' }, "Booking form"), h("p", { key: 'a57f318250af040f150df4fe6cf02f299250da74' }, "Add custom fields to the booking form.")), h("div", { key: '7297904e841d80bdc38a22605427234bf69c15b3', class: "header_action" }, h("select-dropdown", { key: 'fed774ace8a8d000a51228c32100597035c01cb0', name: "add-field", exportparts: "sd_dropdown: nbfc__add_field, sd_dropdown-button: nbfc__add_field-button, sd_dropdown-content: nbfc__add_field-dropdown-content", options: DEFAULT_FORM_FIELD_TYPES, withSearch: false, withChevron: false, dropdownButtonText: "Add new field" }, h("span", { key: '4a445ec9df4d27d455e5936a83469df6850ee24f', slot: "select-icon" }, h("plus-icon", { key: '1f5fa764396d7f0ecc212ed7e2145dee1250eb4c', width: "15", height: "15" }))))), h("div", { key: 'f2384ca1eef8e9b50176ca6a23ed018dba95190e', class: "content" }, h("div", { key: '6ce505f1753086e43ac25e188a63b4319282f33d', id: "fields", class: "additional_fields", part: "nbfc__additional_fields" }, this.formFields.map((field, i) => {
             return (h("div", { class: `form-field draggable ${field.readonly && 'fixed'}`, part: "nbfc__form_field", key: i }, h("div", { class: "form-field_header", part: "nbfc__form_field-header" }, h("span", { class: "dragable" }, h("dragable-icon", { width: "24", height: "25" })), h("div", { class: "form-field_header_text" }, h("h4", null, field.label), h("p", null, field.typeLabel)), h("div", { class: "form-field_header_actions" }, h("span", { class: `is-required` }, field.required ? 'Required' : 'Optional'), !field.readonly && (h("button", { onClick: () => {
                     this.fieldRemove(i);
                 } }, h("close-icon", null))), h("span", { class: `chevron ${field.isOpen ? 'open' : 'closed'}`, onClick: () => {