@nylas/web-elements 0.0.0-canary-20251202205510 → 0.0.0-canary-20251202215015
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js +1 -1
- package/dist/cdn/nylas-scheduling/nylas-scheduling.es.js +26 -13
- package/dist/cjs/{abstract-provider-Dmxxrbyn.js → abstract-provider-DoKrwElM.js} +3 -3
- package/dist/cjs/{abstract-provider-Dmxxrbyn.js.map → abstract-provider-DoKrwElM.js.map} +1 -1
- package/dist/cjs/calendar-agenda-fill-icon_39.cjs.entry.js +2 -2
- package/dist/cjs/checkbox-group_4.cjs.entry.js +3 -3
- package/dist/cjs/checkmark-icon_15.cjs.entry.js +2 -2
- package/dist/cjs/{customParseFormat-erQGD2DY.js → customParseFormat-B4kVLg4K.js} +3 -3
- package/dist/cjs/{customParseFormat-erQGD2DY.js.map → customParseFormat-B4kVLg4K.js.map} +1 -1
- package/dist/cjs/globe-icon_3.cjs.entry.js +2 -2
- package/dist/cjs/google-logo-icon_6.cjs.entry.js +3 -3
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/input-component.cjs.entry.js +1 -1
- package/dist/cjs/input-dropdown_2.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/multi-select-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/{nylas-api-request-DYg-aPS2.js → nylas-api-request-DAkJ3_Et.js} +3 -3
- package/dist/cjs/{nylas-api-request-DYg-aPS2.js.map → nylas-api-request-DAkJ3_Et.js.map} +1 -1
- package/dist/cjs/nylas-booked-event-card_11.cjs.entry.js +34 -14
- package/dist/cjs/nylas-booked-event-card_11.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-form-card.cjs.entry.js +2 -2
- package/dist/cjs/nylas-notification_2.cjs.entry.js +1 -1
- package/dist/cjs/nylas-scheduler-editor.cjs.entry.js +4 -4
- package/dist/cjs/nylas-scheduling.cjs.entry.js +3 -3
- package/dist/cjs/nylas-web-elements.cjs.js +1 -1
- package/dist/cjs/{register-component-B0TuWHSQ.js → register-component-hLp40v0W.js} +3 -3
- package/dist/cjs/{register-component-B0TuWHSQ.js.map → register-component-hLp40v0W.js.map} +1 -1
- package/dist/cjs/textarea-component.cjs.entry.js +1 -1
- package/dist/cjs/{utils-CWOo-QbG.js → utils-DnRflvHV.js} +3 -3
- package/dist/cjs/utils-DnRflvHV.js.map +1 -0
- package/dist/cjs/{version-BPast14X.js → version-z-n90sIJ.js} +3 -3
- package/dist/cjs/{version-BPast14X.js.map → version-z-n90sIJ.js.map} +1 -1
- package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.js +35 -11
- package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.js.map +1 -1
- package/dist/collection/version.js +1 -1
- package/dist/collection/version.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/input-component.js +1 -1
- package/dist/components/input-image-url.js +1 -1
- package/dist/components/multi-select-dropdown.js +1 -1
- package/dist/components/nylas-additional-participants.js +1 -1
- package/dist/components/nylas-availability-picker.js +1 -1
- package/dist/components/nylas-booked-event-card.js +1 -1
- package/dist/components/nylas-booking-calendar-picker.js +1 -1
- package/dist/components/nylas-booking-confirmation-redirect.js +1 -1
- package/dist/components/nylas-booking-confirmation-type.js +1 -1
- package/dist/components/nylas-booking-form-config.js +1 -1
- package/dist/components/nylas-booking-form.js +1 -1
- package/dist/components/nylas-buffer-time.js +1 -1
- package/dist/components/nylas-calendar-picker.js +1 -1
- package/dist/components/nylas-cancel-booking-form.js +1 -1
- package/dist/components/nylas-cancellation-policy.js +1 -1
- package/dist/components/nylas-cancelled-event-card.js +1 -1
- package/dist/components/nylas-confirmation-email.js +1 -1
- package/dist/components/nylas-confirmed-event-card.js +1 -1
- package/dist/components/nylas-connected-calendars.js +1 -1
- package/dist/components/nylas-custom-booking-flow.js +1 -1
- package/dist/components/nylas-custom-event-slug.js +1 -1
- package/dist/components/nylas-customize-booking-settings.js +1 -1
- package/dist/components/nylas-date-component.js +1 -1
- package/dist/components/nylas-date-picker.js +1 -1
- package/dist/components/nylas-disable-emails.js +1 -1
- package/dist/components/nylas-editor-tabs-group.js +1 -1
- package/dist/components/nylas-editor-tabs.js +1 -1
- package/dist/components/nylas-event-calendar.js +1 -1
- package/dist/components/nylas-event-capacity.js +1 -1
- package/dist/components/nylas-event-description.js +1 -1
- package/dist/components/nylas-event-duration.js +1 -1
- package/dist/components/nylas-event-info.js +1 -1
- package/dist/components/nylas-event-limits.js +1 -1
- package/dist/components/nylas-event-location.js +1 -1
- package/dist/components/nylas-event-timeslot.js +1 -1
- package/dist/components/nylas-event-title.js +1 -1
- package/dist/components/nylas-feedback-form.js +1 -1
- package/dist/components/nylas-form-card.js +1 -1
- package/dist/components/nylas-limit-future-bookings.js +1 -1
- package/dist/components/nylas-list-configurations.js +1 -1
- package/dist/components/nylas-locale-switch.js +1 -1
- package/dist/components/nylas-min-booking-notice.js +1 -1
- package/dist/components/nylas-min-cancellation-notice.js +1 -1
- package/dist/components/nylas-notetaker-config.js +1 -1
- package/dist/components/nylas-notification.js +1 -1
- package/dist/components/nylas-only-specific-time-availability.js +1 -1
- package/dist/components/nylas-organizer-confirmation-card.js +1 -1
- package/dist/components/nylas-page-name.js +1 -1
- package/dist/components/nylas-page-styling.js +1 -1
- package/dist/components/nylas-participant-booking-calendars.js +1 -1
- package/dist/components/nylas-participants-custom-availability.js +1 -1
- package/dist/components/nylas-reminder-emails.js +1 -1
- package/dist/components/nylas-reminder-time.js +1 -1
- package/dist/components/nylas-scheduler-editor.js +56 -56
- package/dist/components/nylas-scheduling-method.js +1 -1
- package/dist/components/nylas-scheduling.js +19 -19
- package/dist/components/nylas-select-event-type.js +1 -1
- package/dist/components/nylas-selected-event-card.js +1 -1
- package/dist/components/nylas-specific-time-availability-picker.js +1 -1
- package/dist/components/nylas-time-window-picker.js +1 -1
- package/dist/components/nylas-timeslot-interval.js +1 -1
- package/dist/components/nylas-timeslot-picker.js +1 -1
- package/dist/components/{p-CHrFrkWg.js → p-6ChZ1Qbz.js} +4 -4
- package/dist/components/{p-CHrFrkWg.js.map → p-6ChZ1Qbz.js.map} +1 -1
- package/dist/components/{p-BWuqxd0-.js → p-71j5L-dt.js} +5 -5
- package/dist/components/{p-BWuqxd0-.js.map → p-71j5L-dt.js.map} +1 -1
- package/dist/components/{p-RdM6EOvn.js → p-7sBPfdYI.js} +17 -17
- package/dist/components/{p-RdM6EOvn.js.map → p-7sBPfdYI.js.map} +1 -1
- package/dist/components/{p-CwExJf3p.js → p-AW961heI.js} +7 -7
- package/dist/components/{p-CwExJf3p.js.map → p-AW961heI.js.map} +1 -1
- package/dist/components/{p-Xz9vYJkl.js → p-B0DrSwKH.js} +5 -5
- package/dist/components/{p-Xz9vYJkl.js.map → p-B0DrSwKH.js.map} +1 -1
- package/dist/components/{p-Dbirawci.js → p-B14eRCR5.js} +3 -3
- package/dist/components/{p-Dbirawci.js.map → p-B14eRCR5.js.map} +1 -1
- package/dist/components/{p-CWTSM6yO.js → p-BJ0gZqoJ.js} +3 -3
- package/dist/components/{p-CWTSM6yO.js.map → p-BJ0gZqoJ.js.map} +1 -1
- package/dist/components/{p-B66WkprG.js → p-BLaGY2c9.js} +3 -3
- package/dist/components/{p-B66WkprG.js.map → p-BLaGY2c9.js.map} +1 -1
- package/dist/components/{p-zVAQ5U3H.js → p-BMTQXDvy.js} +5 -5
- package/dist/components/{p-zVAQ5U3H.js.map → p-BMTQXDvy.js.map} +1 -1
- package/dist/components/{p-D6N64LfQ.js → p-BaTbUdcw.js} +3 -3
- package/dist/components/{p-D6N64LfQ.js.map → p-BaTbUdcw.js.map} +1 -1
- package/dist/components/{p-DWEP06hR.js → p-BffnA_f7.js} +3 -3
- package/dist/components/{p-DWEP06hR.js.map → p-BffnA_f7.js.map} +1 -1
- package/dist/components/{p-C62uZf7r.js → p-BfrrTJGs.js} +4 -4
- package/dist/components/{p-C62uZf7r.js.map → p-BfrrTJGs.js.map} +1 -1
- package/dist/components/{p-z65sQUHF.js → p-BgWpQ57E.js} +5 -5
- package/dist/components/{p-z65sQUHF.js.map → p-BgWpQ57E.js.map} +1 -1
- package/dist/components/{p-DuxmEkPv.js → p-BmzQm3Nh.js} +5 -5
- package/dist/components/{p-DuxmEkPv.js.map → p-BmzQm3Nh.js.map} +1 -1
- package/dist/components/{p-rBm-tOur.js → p-C6nI5iTF.js} +4 -4
- package/dist/components/{p-rBm-tOur.js.map → p-C6nI5iTF.js.map} +1 -1
- package/dist/components/{p-BCuiGyoU.js → p-C8_sw1Bl.js} +4 -4
- package/dist/components/{p-BCuiGyoU.js.map → p-C8_sw1Bl.js.map} +1 -1
- package/dist/components/{p-DMZiMhDK.js → p-CBLI3JpV.js} +50 -50
- package/dist/components/{p-DMZiMhDK.js.map → p-CBLI3JpV.js.map} +1 -1
- package/dist/components/{p-4Hw__e3D.js → p-CCwI4JJ6.js} +8 -8
- package/dist/components/{p-4Hw__e3D.js.map → p-CCwI4JJ6.js.map} +1 -1
- package/dist/components/{p-cP0q4lU_.js → p-CDDvCyLe.js} +4 -4
- package/dist/components/{p-cP0q4lU_.js.map → p-CDDvCyLe.js.map} +1 -1
- package/dist/components/{p-CeB6Cbwj.js → p-CDY2803i.js} +7 -7
- package/dist/components/{p-CeB6Cbwj.js.map → p-CDY2803i.js.map} +1 -1
- package/dist/components/{p-CdgRkJo5.js → p-CGRnWG3R.js} +5 -5
- package/dist/components/{p-CdgRkJo5.js.map → p-CGRnWG3R.js.map} +1 -1
- package/dist/components/{p-Bmgc4OoC.js → p-CTibK7DI.js} +6 -6
- package/dist/components/{p-Bmgc4OoC.js.map → p-CTibK7DI.js.map} +1 -1
- package/dist/components/{p-C8b_6Mwi.js → p-CZXVRFvj.js} +5 -5
- package/dist/components/{p-C8b_6Mwi.js.map → p-CZXVRFvj.js.map} +1 -1
- package/dist/components/{p-CUbBPFuC.js → p-C_wt4VG1.js} +6 -6
- package/dist/components/{p-CUbBPFuC.js.map → p-C_wt4VG1.js.map} +1 -1
- package/dist/components/{p-CPl2QujN.js → p-Ca7_waxI.js} +5 -5
- package/dist/components/{p-CPl2QujN.js.map → p-Ca7_waxI.js.map} +1 -1
- package/dist/components/{p-DxlNq7J-.js → p-CbzGOkVl.js} +5 -5
- package/dist/components/{p-DxlNq7J-.js.map → p-CbzGOkVl.js.map} +1 -1
- package/dist/components/{p-BJC7yMYa.js → p-CeBINn7w.js} +5 -5
- package/dist/components/{p-BJC7yMYa.js.map → p-CeBINn7w.js.map} +1 -1
- package/dist/components/{p-CBt5X1k9.js → p-Ch2fnEor.js} +4 -4
- package/dist/components/{p-CBt5X1k9.js.map → p-Ch2fnEor.js.map} +1 -1
- package/dist/components/{p-Cpntx1Mu.js → p-Cmi5--r4.js} +4 -4
- package/dist/components/{p-Cpntx1Mu.js.map → p-Cmi5--r4.js.map} +1 -1
- package/dist/components/{p-BMp7KcxH.js → p-CoSrYtWD.js} +4 -4
- package/dist/components/{p-BMp7KcxH.js.map → p-CoSrYtWD.js.map} +1 -1
- package/dist/components/{p-D_9rbrrd.js → p-Cp6o6dvp.js} +4 -4
- package/dist/components/{p-D_9rbrrd.js.map → p-Cp6o6dvp.js.map} +1 -1
- package/dist/components/{p-07Ul9BQq.js → p-Cw0C2FtI.js} +39 -17
- package/dist/components/p-Cw0C2FtI.js.map +1 -0
- package/dist/components/{p-Aurz8anf.js → p-CyE6dQa1.js} +3 -3
- package/dist/components/{p-Aurz8anf.js.map → p-CyE6dQa1.js.map} +1 -1
- package/dist/components/{p-BLz815Ny.js → p-CyEL9Dys.js} +5 -5
- package/dist/components/{p-BLz815Ny.js.map → p-CyEL9Dys.js.map} +1 -1
- package/dist/components/{p-Cw2wynla.js → p-CzUnDM0S.js} +5 -5
- package/dist/components/{p-Cw2wynla.js.map → p-CzUnDM0S.js.map} +1 -1
- package/dist/components/{p-DdzrgkUr.js → p-D1kUhVgX.js} +4 -4
- package/dist/components/{p-DdzrgkUr.js.map → p-D1kUhVgX.js.map} +1 -1
- package/dist/components/{p-sKlwNeg3.js → p-D2boni88.js} +4 -4
- package/dist/components/{p-sKlwNeg3.js.map → p-D2boni88.js.map} +1 -1
- package/dist/components/{p-CMnhMEB3.js → p-D5X8shfk.js} +3 -3
- package/dist/components/{p-CMnhMEB3.js.map → p-D5X8shfk.js.map} +1 -1
- package/dist/components/{p-CztSSKob.js → p-D72GASZY.js} +6 -6
- package/dist/components/{p-CztSSKob.js.map → p-D72GASZY.js.map} +1 -1
- package/dist/components/{p-DBeFl6it.js → p-DBYtkpo-.js} +5 -5
- package/dist/components/{p-DBeFl6it.js.map → p-DBYtkpo-.js.map} +1 -1
- package/dist/components/{p-DX_efMHV.js → p-DFAeC2_5.js} +40 -40
- package/dist/components/{p-DX_efMHV.js.map → p-DFAeC2_5.js.map} +1 -1
- package/dist/components/{p-CulTX7Fr.js → p-DO1rWSYE.js} +4 -4
- package/dist/components/{p-CulTX7Fr.js.map → p-DO1rWSYE.js.map} +1 -1
- package/dist/components/{p-CrPTHsWg.js → p-DSjJ_aq0.js} +4 -4
- package/dist/components/{p-CrPTHsWg.js.map → p-DSjJ_aq0.js.map} +1 -1
- package/dist/components/{p-BFjEYRDA.js → p-DWeyMY_K.js} +4 -4
- package/dist/components/{p-BFjEYRDA.js.map → p-DWeyMY_K.js.map} +1 -1
- package/dist/components/{p-CXHIOvuw.js → p-DbaulkBW.js} +5 -5
- package/dist/components/{p-CXHIOvuw.js.map → p-DbaulkBW.js.map} +1 -1
- package/dist/components/{p-BPK0dIhW.js → p-DiYyjvXU.js} +8 -8
- package/dist/components/{p-BPK0dIhW.js.map → p-DiYyjvXU.js.map} +1 -1
- package/dist/components/{p-wg959gAI.js → p-DkQwOhaw.js} +5 -5
- package/dist/components/{p-wg959gAI.js.map → p-DkQwOhaw.js.map} +1 -1
- package/dist/components/{p-fFf19yyL.js → p-DmaMKknu.js} +5 -5
- package/dist/components/{p-fFf19yyL.js.map → p-DmaMKknu.js.map} +1 -1
- package/dist/components/{p-BHUyDM4a.js → p-DmqqlFjj.js} +3 -3
- package/dist/components/{p-BHUyDM4a.js.map → p-DmqqlFjj.js.map} +1 -1
- package/dist/components/{p-BNdXWt95.js → p-Dnr8VCvL.js} +4 -4
- package/dist/components/{p-BNdXWt95.js.map → p-Dnr8VCvL.js.map} +1 -1
- package/dist/components/{p-B6vWzWVH.js → p-DqQXniRY.js} +5 -5
- package/dist/components/{p-B6vWzWVH.js.map → p-DqQXniRY.js.map} +1 -1
- package/dist/components/{p-D5A3zAnj.js → p-DuymSQwd.js} +3 -3
- package/dist/components/{p-D5A3zAnj.js.map → p-DuymSQwd.js.map} +1 -1
- package/dist/components/{p-Q6RJB1kT.js → p-Dyw-txou.js} +8 -8
- package/dist/components/{p-Q6RJB1kT.js.map → p-Dyw-txou.js.map} +1 -1
- package/dist/components/{p-DTIl-dL0.js → p-IsvARMhz.js} +4 -4
- package/dist/components/{p-DTIl-dL0.js.map → p-IsvARMhz.js.map} +1 -1
- package/dist/components/{p-DLjTrAZQ.js → p-NBMazUZO.js} +4 -4
- package/dist/components/{p-DLjTrAZQ.js.map → p-NBMazUZO.js.map} +1 -1
- package/dist/components/{p-DwD3KXGW.js → p-YGA4H-9G.js} +4 -4
- package/dist/components/{p-DwD3KXGW.js.map → p-YGA4H-9G.js.map} +1 -1
- package/dist/components/{p-BRJUcnBZ.js → p-cuNPlg0X.js} +5 -5
- package/dist/components/{p-BRJUcnBZ.js.map → p-cuNPlg0X.js.map} +1 -1
- package/dist/components/{p-BI2p9Jc6.js → p-dUL2dkUa.js} +4 -4
- package/dist/components/{p-BI2p9Jc6.js.map → p-dUL2dkUa.js.map} +1 -1
- package/dist/components/{p-B-j_noAT.js → p-keMejSk3.js} +3 -3
- package/dist/components/{p-B-j_noAT.js.map → p-keMejSk3.js.map} +1 -1
- package/dist/components/{p-B3b2oLwS.js → p-mGdgvW-1.js} +6 -6
- package/dist/components/{p-B3b2oLwS.js.map → p-mGdgvW-1.js.map} +1 -1
- package/dist/components/{p-7omIdes5.js → p-qv7yU2pb.js} +7 -7
- package/dist/components/{p-7omIdes5.js.map → p-qv7yU2pb.js.map} +1 -1
- package/dist/components/{p-Biycd4iI.js → p-sXbbNax8.js} +4 -4
- package/dist/components/{p-Biycd4iI.js.map → p-sXbbNax8.js.map} +1 -1
- package/dist/components/{p-ickjUaoC.js → p-ttOMOXED.js} +3 -3
- package/dist/components/{p-ickjUaoC.js.map → p-ttOMOXED.js.map} +1 -1
- package/dist/components/{p-DyLPwQVe.js → p-u7v_3NZe.js} +5 -5
- package/dist/components/{p-DyLPwQVe.js.map → p-u7v_3NZe.js.map} +1 -1
- package/dist/components/{p-6w1TXINP.js → p-uxYETK9F.js} +3 -3
- package/dist/components/{p-6w1TXINP.js.map → p-uxYETK9F.js.map} +1 -1
- package/dist/components/{p-pKaQ_oN3.js → p-wbuAwPIf.js} +4 -4
- package/dist/components/{p-pKaQ_oN3.js.map → p-wbuAwPIf.js.map} +1 -1
- package/dist/components/{p-BkqJeMJc.js → p-zGaD8wi_.js} +4 -4
- package/dist/components/{p-BkqJeMJc.js.map → p-zGaD8wi_.js.map} +1 -1
- package/dist/components/textarea-component.js +1 -1
- package/dist/components/time-period-selector.js +1 -1
- package/dist/esm/{abstract-provider-DMUHtPZk.js → abstract-provider-BaO0SAV5.js} +3 -3
- package/dist/esm/{abstract-provider-DMUHtPZk.js.map → abstract-provider-BaO0SAV5.js.map} +1 -1
- package/dist/esm/calendar-agenda-fill-icon_39.entry.js +2 -2
- package/dist/esm/checkbox-group_4.entry.js +3 -3
- package/dist/esm/checkmark-icon_15.entry.js +2 -2
- package/dist/esm/{customParseFormat-DfI_KT_e.js → customParseFormat-BXULiIqM.js} +3 -3
- package/dist/esm/{customParseFormat-DfI_KT_e.js.map → customParseFormat-BXULiIqM.js.map} +1 -1
- package/dist/esm/globe-icon_3.entry.js +2 -2
- package/dist/esm/google-logo-icon_6.entry.js +3 -3
- package/dist/esm/index.js +2 -2
- package/dist/esm/input-component.entry.js +1 -1
- package/dist/esm/input-dropdown_2.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/multi-select-dropdown.entry.js +1 -1
- package/dist/esm/{nylas-api-request-Bfo7R-Jq.js → nylas-api-request-C-uof_ko.js} +3 -3
- package/dist/esm/{nylas-api-request-Bfo7R-Jq.js.map → nylas-api-request-C-uof_ko.js.map} +1 -1
- package/dist/esm/nylas-booked-event-card_11.entry.js +34 -14
- package/dist/esm/nylas-booked-event-card_11.entry.js.map +1 -1
- package/dist/esm/nylas-form-card.entry.js +2 -2
- package/dist/esm/nylas-notification_2.entry.js +1 -1
- package/dist/esm/nylas-scheduler-editor.entry.js +4 -4
- package/dist/esm/nylas-scheduling.entry.js +3 -3
- package/dist/esm/nylas-web-elements.js +1 -1
- package/dist/esm/{register-component-Mc-aGXTY.js → register-component-BWkU2nzv.js} +3 -3
- package/dist/esm/{register-component-Mc-aGXTY.js.map → register-component-BWkU2nzv.js.map} +1 -1
- package/dist/esm/textarea-component.entry.js +1 -1
- package/dist/esm/{utils-Hhz0ojc7.js → utils-qPYSsMs1.js} +3 -3
- package/dist/esm/utils-qPYSsMs1.js.map +1 -0
- package/dist/esm/{version-C8X2q4zX.js → version-C0XfEIKF.js} +3 -3
- package/dist/esm/{version-C8X2q4zX.js.map → version-C0XfEIKF.js.map} +1 -1
- package/dist/nylas-web-elements/index.esm.js +1 -1
- package/dist/nylas-web-elements/nylas-web-elements.esm.js +1 -1
- package/dist/nylas-web-elements/{p-98bbf87f.entry.js → p-062d7fdf.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-21d506a3.entry.js → p-308de920.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-7b418732.entry.js → p-4a7b2e75.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-34214390.entry.js → p-4d554975.entry.js} +3 -3
- package/dist/nylas-web-elements/{p-f0097382.entry.js → p-4efc4661.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-c51215b6.entry.js → p-62c11ceb.entry.js} +2 -2
- package/dist/nylas-web-elements/p-62c11ceb.entry.js.map +1 -0
- package/dist/nylas-web-elements/{p-0a105d77.entry.js → p-694d464b.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-887ed22a.entry.js → p-750e5cc6.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-BCvV6idp.js → p-7nXSDTLA.js} +2 -2
- package/dist/nylas-web-elements/{p-BCvV6idp.js.map → p-7nXSDTLA.js.map} +1 -1
- package/dist/nylas-web-elements/{p-6c8e47a9.entry.js → p-854f1b66.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-lLLUSoaT.js → p-BMmDQ3tf.js} +2 -2
- package/dist/nylas-web-elements/{p-lLLUSoaT.js.map → p-BMmDQ3tf.js.map} +1 -1
- package/dist/nylas-web-elements/{p-C8X2q4zX.js → p-C0XfEIKF.js} +2 -2
- package/dist/nylas-web-elements/{p-C8X2q4zX.js.map → p-C0XfEIKF.js.map} +1 -1
- package/dist/nylas-web-elements/{p-BzJOftan.js → p-CiuA-WAz.js} +2 -2
- package/dist/nylas-web-elements/{p-BzJOftan.js.map → p-CiuA-WAz.js.map} +1 -1
- package/dist/nylas-web-elements/{p-fd6a12bd.entry.js → p-c7117440.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-sMJwFhkX.js → p-cIC9nmxa.js} +2 -2
- package/dist/nylas-web-elements/{p-sMJwFhkX.js.map → p-cIC9nmxa.js.map} +1 -1
- package/dist/nylas-web-elements/{p-7d369618.entry.js → p-d317b6ad.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-4bf65d9a.entry.js → p-d35c9487.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-ab87f218.entry.js → p-da93f29f.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-506c2328.entry.js → p-e6a22e75.entry.js} +3 -3
- package/dist/nylas-web-elements/{p-Hhz0ojc7.js → p-qPYSsMs1.js} +1 -1
- package/dist/nylas-web-elements/p-qPYSsMs1.js.map +1 -0
- package/dist/types/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.d.ts +3 -0
- package/dist/types/version.d.ts +1 -1
- package/package.json +2 -2
- package/dist/cjs/utils-CWOo-QbG.js.map +0 -1
- package/dist/components/p-07Ul9BQq.js.map +0 -1
- package/dist/esm/utils-Hhz0ojc7.js.map +0 -1
- package/dist/nylas-web-elements/p-Hhz0ojc7.js.map +0 -1
- package/dist/nylas-web-elements/p-c51215b6.entry.js.map +0 -1
- /package/dist/nylas-web-elements/{p-98bbf87f.entry.js.map → p-062d7fdf.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-21d506a3.entry.js.map → p-308de920.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-7b418732.entry.js.map → p-4a7b2e75.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-34214390.entry.js.map → p-4d554975.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-f0097382.entry.js.map → p-4efc4661.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-0a105d77.entry.js.map → p-694d464b.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-887ed22a.entry.js.map → p-750e5cc6.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-6c8e47a9.entry.js.map → p-854f1b66.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-fd6a12bd.entry.js.map → p-c7117440.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-7d369618.entry.js.map → p-d317b6ad.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-4bf65d9a.entry.js.map → p-d35c9487.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-ab87f218.entry.js.map → p-da93f29f.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-506c2328.entry.js.map → p-e6a22e75.entry.js.map} +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, e as createEvent, h, i as Host } from './p-Bht9ktsW.js';
|
|
2
|
-
import { R as RegisterComponent } from './p-
|
|
3
|
-
import { b as instance, a as debug } from './p-
|
|
2
|
+
import { R as RegisterComponent } from './p-BLaGY2c9.js';
|
|
3
|
+
import { b as instance, a as debug } from './p-BJ0gZqoJ.js';
|
|
4
4
|
import { d as defineCustomElement$3 } from './p-CD74XxwY.js';
|
|
5
5
|
import { d as defineCustomElement$2 } from './p-RLLogeWk.js';
|
|
6
6
|
import { d as defineCustomElement$1 } from './p-DVz9HZ14.js';
|
|
@@ -141,6 +141,6 @@ function defineCustomElement() {
|
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
export { NylasConfirmedEventCard as N, defineCustomElement as d };
|
|
144
|
-
//# sourceMappingURL=p-
|
|
144
|
+
//# sourceMappingURL=p-sXbbNax8.js.map
|
|
145
145
|
|
|
146
|
-
//# sourceMappingURL=p-
|
|
146
|
+
//# sourceMappingURL=p-sXbbNax8.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-Biycd4iI.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.scss?tag=nylas-confirmed-event-card&encapsulation=shadow","src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-confirmed-event-card {\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 width: 400px;\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 @media #{$mobile} {\n width: inherit;\n }\n}\n\n.nylas-confirmed-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-confirmed-event-description {\n font-size: 16px;\n font-weight: 500;\n color: var(--nylas-base-600);\n}\n\n.nylas-confirmed-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-confirmed-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-check-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\nbutton-component {\n width: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { LANGUAGE_CODE, NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card.\n *\n * @part ncec - The confirmed event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the confirmed event card.\n * @part ncec__description - The description of the confirmed event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The confirmed event card.\n */\n@Component({\n tag: 'nylas-confirmed-event-card',\n styleUrl: 'nylas-confirmed-event-card.scss',\n shadow: true,\n})\nexport class NylasConfirmedEventCard {\n /**\n * The host element.\n * Used to manage the host element of the provider.\n */\n @Element() private host!: HTMLNylasConfirmedEventCardElement;\n\n /**\n * @standalone\n * The config settings for the scheduler.\n */\n @Prop() readonly configSettings?: ConfigSettings;\n\n /**\n * @standalone\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /**\n * The selected language.\n */\n @Prop({ attribute: 'selected-language' }) readonly selectedLanguage?: LANGUAGE_CODE;\n\n /**\n * The participant's name who booked the event / is logged in.\n */\n @Prop() readonly confirmedEventInfo!: Partial<NylasEvent>;\n\n /**\n * Closing state of the confirmed event card button.\n */\n @State() isClosing: boolean = false;\n\n /**\n * This event is fired when the close button is clicked on the confirmed event card.\n */\n @Event() readonly closeConfirmEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /**\n * This event is fired when an error occurs.\n */\n @Event() readonly confirmedEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n @Watch('themeConfig')\n themeConfigChanged(newThemeConfig: ThemeConfig) {\n this.applyThemeConfig(newThemeConfig);\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n connectedCallback() {\n debug(`[nylas-confirmed-event-card] Component connected`);\n }\n\n async componentWillLoad() {\n debug(`[nylas-confirmed-event-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-confirmed-event-card] Component did load`);\n if (!this.confirmedEventInfo) {\n console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, \"confirmedEventInfo\" prop is required.`);\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n disconnectedCallback() {\n debug(`[nylas-confirmed-event-card] Component disconnected`);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private handleCloseClicked = () => {\n this.isClosing = true;\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.confirmedEventCardError.emit(error);\n this.isClosing = false;\n };\n this.closeConfirmEventCardClicked.emit({ errorHandler });\n };\n\n @RegisterComponent<NylasConfirmedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-confirmed-event-card',\n stateToProps: new Map([\n ['scheduler.configSettings', 'configSettings'],\n ['scheduler.themeConfig', 'themeConfig'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ]),\n eventToProps: {\n closeConfirmEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n const result = await nylasschedulerconnector.scheduler.resetConfirm();\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 <div class=\"nylas-confirmed-event-card\" part=\"ncec__card\">\n <div class=\"nylas-confirmed-event-card__calendar-icon\" part=\"ncec__icon\">\n <calendar-check-icon />\n </div>\n <h3 class=\"nylas-confirmed-event-card__title\" part=\"ncec__title\">\n {i18next.t('confirmedEventCardTitle')}!\n </h3>\n <div class=\"nylas-confirmed-event-card__description\" part=\"ncec__description\">\n {i18next.t('confirmedEventCardDescription')} {this.configSettings?.organizer?.name || 'the participants'}.\n </div>\n <div class=\"nylas-confirmed-event-card__cta\">\n <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n </button-component>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-sXbbNax8.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.scss?tag=nylas-confirmed-event-card&encapsulation=shadow","src/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.nylas-confirmed-event-card {\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 width: 400px;\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 @media #{$mobile} {\n width: inherit;\n }\n}\n\n.nylas-confirmed-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-confirmed-event-description {\n font-size: 16px;\n font-weight: 500;\n color: var(--nylas-base-600);\n}\n\n.nylas-confirmed-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-confirmed-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-check-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\nbutton-component {\n width: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { LANGUAGE_CODE, NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-confirmed-event-card` component is a UI component that displays the confirmed event card.\n *\n * @part ncec - The confirmed event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the confirmed event card.\n * @part ncec__description - The description of the confirmed event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The confirmed event card.\n */\n@Component({\n tag: 'nylas-confirmed-event-card',\n styleUrl: 'nylas-confirmed-event-card.scss',\n shadow: true,\n})\nexport class NylasConfirmedEventCard {\n /**\n * The host element.\n * Used to manage the host element of the provider.\n */\n @Element() private host!: HTMLNylasConfirmedEventCardElement;\n\n /**\n * @standalone\n * The config settings for the scheduler.\n */\n @Prop() readonly configSettings?: ConfigSettings;\n\n /**\n * @standalone\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /**\n * The selected language.\n */\n @Prop({ attribute: 'selected-language' }) readonly selectedLanguage?: LANGUAGE_CODE;\n\n /**\n * The participant's name who booked the event / is logged in.\n */\n @Prop() readonly confirmedEventInfo!: Partial<NylasEvent>;\n\n /**\n * Closing state of the confirmed event card button.\n */\n @State() isClosing: boolean = false;\n\n /**\n * This event is fired when the close button is clicked on the confirmed event card.\n */\n @Event() readonly closeConfirmEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /**\n * This event is fired when an error occurs.\n */\n @Event() readonly confirmedEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n @Watch('themeConfig')\n themeConfigChanged(newThemeConfig: ThemeConfig) {\n this.applyThemeConfig(newThemeConfig);\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n connectedCallback() {\n debug(`[nylas-confirmed-event-card] Component connected`);\n }\n\n async componentWillLoad() {\n debug(`[nylas-confirmed-event-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-confirmed-event-card] Component did load`);\n if (!this.confirmedEventInfo) {\n console.warn(`[nylas-confirmed-event-card] No confirmed event info provided, \"confirmedEventInfo\" prop is required.`);\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n disconnectedCallback() {\n debug(`[nylas-confirmed-event-card] Component disconnected`);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private handleCloseClicked = () => {\n this.isClosing = true;\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.confirmedEventCardError.emit(error);\n this.isClosing = false;\n };\n this.closeConfirmEventCardClicked.emit({ errorHandler });\n };\n\n @RegisterComponent<NylasConfirmedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-confirmed-event-card',\n stateToProps: new Map([\n ['scheduler.configSettings', 'configSettings'],\n ['scheduler.themeConfig', 'themeConfig'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ]),\n eventToProps: {\n closeConfirmEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n const result = await nylasschedulerconnector.scheduler.resetConfirm();\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 <div class=\"nylas-confirmed-event-card\" part=\"ncec__card\">\n <div class=\"nylas-confirmed-event-card__calendar-icon\" part=\"ncec__icon\">\n <calendar-check-icon />\n </div>\n <h3 class=\"nylas-confirmed-event-card__title\" part=\"ncec__title\">\n {i18next.t('confirmedEventCardTitle')}!\n </h3>\n <div class=\"nylas-confirmed-event-card__description\" part=\"ncec__description\">\n {i18next.t('confirmedEventCardDescription')} {this.configSettings?.organizer?.name || 'the participants'}.\n </div>\n <div class=\"nylas-confirmed-event-card__cta\">\n <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n </button-component>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, e as createEvent, h } from './p-Bht9ktsW.js';
|
|
2
|
-
import { s as sanitize } from './p-
|
|
2
|
+
import { s as sanitize } from './p-BJ0gZqoJ.js';
|
|
3
3
|
|
|
4
4
|
const inputComponentCss = ":host{display:block;height:auto;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--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-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff;width:100%}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;flex-direction:column;gap:4px;font-family:var(--nylas-font-family);font-size:16px;color:var(--nylas-base-800)}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}label p{margin:0}label .error{color:var(--nylas-error)}.input_wrapper{display:flex;align-items:center;gap:1rem}input[type=text],input[type=number],input[type=email],input[type=phone_number]{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%;width:-moz-available;width:-webkit-fill-available}input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,input[type=phone_number]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=number].error,input[type=email].error,input[type=phone_number].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=number].error::placeholder,input[type=email].error::placeholder,input[type=phone_number].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=number]::placeholder,input[type=email]::placeholder,input[type=phone_number]::placeholder{color:var(--nylas-base-300)}input:read-only{background-color:var(--nylas-base-100);cursor:not-allowed}";
|
|
5
5
|
|
|
@@ -180,6 +180,6 @@ function defineCustomElement() {
|
|
|
180
180
|
}
|
|
181
181
|
|
|
182
182
|
export { InputComponent as I, defineCustomElement as d };
|
|
183
|
-
//# sourceMappingURL=p-
|
|
183
|
+
//# sourceMappingURL=p-ttOMOXED.js.map
|
|
184
184
|
|
|
185
|
-
//# sourceMappingURL=p-
|
|
185
|
+
//# sourceMappingURL=p-ttOMOXED.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-ickjUaoC.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/design-system/input-component/input-component.scss?tag=input-component&encapsulation=shadow","src/components/design-system/input-component/input-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n display: block;\n height: auto;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.input_wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\ninput[type='text'],\ninput[type='number'],\ninput[type='email'],\ninput[type='phone_number'] {\n @include textfield;\n width: -moz-available;\n width: -webkit-fill-available;\n}\n\ninput:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\n\nconst DefaultPattern = {\n email: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,\n phone_number: /^\\+?\\d{1,15}$/,\n};\n\nconst DefaultPlaceholder = {\n email: 'name@example.com',\n phone_number: '1234567890',\n};\n\n/**\n * The `input-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n */\n\n@Component({\n tag: 'input-component',\n styleUrl: 'input-component.scss',\n shadow: true,\n})\nexport class InputComponent {\n /**\n * The host element\n */\n @Element() el!: HTMLElement;\n /**\n * The name of the input. This is used to identify the input when submitting a form.\n */\n @Prop() name: string = 'input';\n /**\n * The default value of the input. This is the value that is displayed when the input is rendered.\n */\n @Prop() defaultValue?: string;\n /**\n * The label of the input. This is displayed above the input.\n */\n @Prop() label: string = '';\n /**\n * The type of the input. This is used to determine the input's behavior.\n * Supported types are 'text', 'email', and 'phone_number'.\n */\n @Prop() type: 'text' | 'email' | 'phone_number' | 'number' = 'text';\n /**\n * The placeholder of the input. This is displayed when the input is empty.\n */\n @Prop() placeholder: string = DefaultPlaceholder[this.type];\n /**\n * Whether the input is required. If true, the input must have a value when submitting a form.\n * Default is false. If the input is required and the value is empty, an error message is displayed.\n */\n @Prop() required: boolean = false;\n /**\n * Whether the input is read-only. If true, the input cannot be edited.\n * Default is false.\n */\n @Prop() readOnly: boolean = false;\n /**\n * Whether the input should be focused when rendered.\n * Default is false. If true, the input is focused when rendered.\n * Use this to set the focus on the first input in a form.\n */\n @Prop() autoFocus: boolean = false;\n /**\n * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n */\n @Prop() pattern?: RegExp;\n /**\n * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n * Default is 255.\n */\n @Prop() maxLength: number = 255;\n /**\n * The error message to display when the value does not match the pattern.\n * Default is 'Invalid <field> format.' where <field> is the input label.\n */\n @Prop() patternError: string = '';\n\n /**\n * This error message is displayed when the input value is empty and the input is required.\n */\n @Prop() requiredError: string = '';\n @Prop() maxValue?: number; // Optional max value for 'number'\n @Prop() minValue?: number; // Optional min value for 'number'\n\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /**\n * The input value state.\n */\n @State() value!: string;\n /**\n * The error message state.\n */\n @State() error: string = '';\n\n /**\n * This event is fired when the input value is changed.\n * The scheduling form listens for this event to validate the input value and submit the form.\n * If using outside of the scheduling form, listen for this event to validate the input value\n * and handle the input value change.\n */\n @Event() nylasFormInputChanged!: EventEmitter<{\n value: string;\n name: string;\n label: string;\n type: string;\n error: string;\n }>;\n\n @Event() nylasFormInputFocused!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n @Event() nylasFormInputBlurred!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n @Watch('defaultValue')\n handleDefaultValueChange(newValue: string) {\n this.value = sanitize(newValue);\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n componentWillLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidLoad() {\n this.value = sanitize(this.defaultValue || '');\n if (this.type !== 'text' && !this.pattern) {\n this.pattern = DefaultPattern[this.type];\n }\n\n if (this.value) {\n this.validatePattern(this.value);\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n // Event listeners\n /**\n * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n */\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n async handleFormSubmitted(event: CustomEvent) {\n if (this.el?.getAttribute('data-page-styling')) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n }\n\n // Methods\n handleInput(e: Event) {\n this.error = '';\n const inputValue = (e.target as HTMLInputElement).value;\n\n // For 'number', ensure the value is valid\n if (this.type === 'number') {\n const numericValue = parseFloat(inputValue);\n if ((this.maxValue !== undefined && numericValue > this.maxValue) || (this.minValue !== undefined && numericValue < this.minValue)) {\n if (this.minValue === undefined) {\n this.error = `Value must be less than ${this.maxValue}`;\n } else if (this.maxValue === undefined) {\n this.error = `Value must be greater than ${this.minValue}`;\n } else {\n this.error = `Value must be between ${this.minValue} and ${this.maxValue}`;\n }\n } else if (isNaN(numericValue)) {\n this.error = this.patternError || 'Invalid format.';\n }\n }\n\n this.value = sanitize(inputValue);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n label: this.label,\n error: this.error,\n type: this.type,\n });\n }\n\n handleBlur() {\n this.nylasFormInputBlurred.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n handleFocus() {\n this.nylasFormInputFocused.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n validatePattern(value: string) {\n // Reset error\n this.error = '';\n\n if (this.required && !value) {\n this.error = this.requiredError || 'This field is required.';\n return;\n }\n\n if (this.type === 'number' && value) {\n const numericValue = parseFloat(value);\n if ((this.maxValue !== undefined && numericValue > this.maxValue) || (this.minValue !== undefined && numericValue < this.minValue)) {\n this.error = `Value must be between ${this.minValue} and ${this.maxValue}`;\n return;\n }\n }\n\n if (this.pattern && value && !this.pattern.test(value)) {\n this.error = this.patternError || 'Invalid format.';\n }\n }\n\n render() {\n return (\n <label part={this.error ? 'ic__label ic__label--error' : 'ic__label'} class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n </p>\n )}\n <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n <input\n type={this.type}\n name={this.name}\n part={this.error ? 'ic__input ic__input--error' : 'ic__input'}\n title={this.readOnly ? 'read-only field' : undefined}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n max={this.type === 'number' ? this.maxValue : undefined}\n min={this.type === 'number' ? this.minValue : undefined}\n placeholder={this.placeholder}\n class={{ error: !!this.error }}\n onInput={e => this.handleInput(e)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n <slot name=\"additional-input\"></slot>\n </div>\n {this.error && (\n <span class=\"error help-text\" part=\"ic__error_message\">\n {this.error}\n </span>\n )}\n </label>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-ttOMOXED.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/design-system/input-component/input-component.scss?tag=input-component&encapsulation=shadow","src/components/design-system/input-component/input-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n display: block;\n height: auto;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.input_wrapper {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\ninput[type='text'],\ninput[type='number'],\ninput[type='email'],\ninput[type='phone_number'] {\n @include textfield;\n width: -moz-available;\n width: -webkit-fill-available;\n}\n\ninput:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}","import { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\nimport { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\n\nconst DefaultPattern = {\n email: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,\n phone_number: /^\\+?\\d{1,15}$/,\n};\n\nconst DefaultPlaceholder = {\n email: 'name@example.com',\n phone_number: '1234567890',\n};\n\n/**\n * The `input-component` component is a UI component that allows users to input text, email, or phone number values.\n * This component is used in the scheduling form to input text, email and phone number type inputs.\n */\n\n@Component({\n tag: 'input-component',\n styleUrl: 'input-component.scss',\n shadow: true,\n})\nexport class InputComponent {\n /**\n * The host element\n */\n @Element() el!: HTMLElement;\n /**\n * The name of the input. This is used to identify the input when submitting a form.\n */\n @Prop() name: string = 'input';\n /**\n * The default value of the input. This is the value that is displayed when the input is rendered.\n */\n @Prop() defaultValue?: string;\n /**\n * The label of the input. This is displayed above the input.\n */\n @Prop() label: string = '';\n /**\n * The type of the input. This is used to determine the input's behavior.\n * Supported types are 'text', 'email', and 'phone_number'.\n */\n @Prop() type: 'text' | 'email' | 'phone_number' | 'number' = 'text';\n /**\n * The placeholder of the input. This is displayed when the input is empty.\n */\n @Prop() placeholder: string = DefaultPlaceholder[this.type];\n /**\n * Whether the input is required. If true, the input must have a value when submitting a form.\n * Default is false. If the input is required and the value is empty, an error message is displayed.\n */\n @Prop() required: boolean = false;\n /**\n * Whether the input is read-only. If true, the input cannot be edited.\n * Default is false.\n */\n @Prop() readOnly: boolean = false;\n /**\n * Whether the input should be focused when rendered.\n * Default is false. If true, the input is focused when rendered.\n * Use this to set the focus on the first input in a form.\n */\n @Prop() autoFocus: boolean = false;\n /**\n * The pattern to validate the input value. If the value does not match the pattern, an error message is displayed.\n * Default is null. If the pattern is not set, the pattern is determined by the input type for 'email' and 'phone_number'.\n */\n @Prop() pattern?: RegExp;\n /**\n * The maximum length of the input value. If the value is longer than the maximum length, an error message is displayed.\n * Default is 255.\n */\n @Prop() maxLength: number = 255;\n /**\n * The error message to display when the value does not match the pattern.\n * Default is 'Invalid <field> format.' where <field> is the input label.\n */\n @Prop() patternError: string = '';\n\n /**\n * This error message is displayed when the input value is empty and the input is required.\n */\n @Prop() requiredError: string = '';\n @Prop() maxValue?: number; // Optional max value for 'number'\n @Prop() minValue?: number; // Optional min value for 'number'\n\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /**\n * The input value state.\n */\n @State() value!: string;\n /**\n * The error message state.\n */\n @State() error: string = '';\n\n /**\n * This event is fired when the input value is changed.\n * The scheduling form listens for this event to validate the input value and submit the form.\n * If using outside of the scheduling form, listen for this event to validate the input value\n * and handle the input value change.\n */\n @Event() nylasFormInputChanged!: EventEmitter<{\n value: string;\n name: string;\n label: string;\n type: string;\n error: string;\n }>;\n\n @Event() nylasFormInputFocused!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n @Event() nylasFormInputBlurred!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n // Lifecycle methods\n @Watch('defaultValue')\n handleDefaultValueChange(newValue: string) {\n this.value = sanitize(newValue);\n if (this.value) {\n this.validatePattern(this.value);\n }\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n componentWillLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidLoad() {\n this.value = sanitize(this.defaultValue || '');\n if (this.type !== 'text' && !this.pattern) {\n this.pattern = DefaultPattern[this.type];\n }\n\n if (this.value) {\n this.validatePattern(this.value);\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n // Event listeners\n /**\n * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n */\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('formSubmitted', { target: 'document' })\n async handleFormSubmitted(event: CustomEvent) {\n if (this.el?.getAttribute('data-page-styling')) {\n this.validatePattern(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n }\n\n // Methods\n handleInput(e: Event) {\n this.error = '';\n const inputValue = (e.target as HTMLInputElement).value;\n\n // For 'number', ensure the value is valid\n if (this.type === 'number') {\n const numericValue = parseFloat(inputValue);\n if ((this.maxValue !== undefined && numericValue > this.maxValue) || (this.minValue !== undefined && numericValue < this.minValue)) {\n if (this.minValue === undefined) {\n this.error = `Value must be less than ${this.maxValue}`;\n } else if (this.maxValue === undefined) {\n this.error = `Value must be greater than ${this.minValue}`;\n } else {\n this.error = `Value must be between ${this.minValue} and ${this.maxValue}`;\n }\n } else if (isNaN(numericValue)) {\n this.error = this.patternError || 'Invalid format.';\n }\n }\n\n this.value = sanitize(inputValue);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n label: this.label,\n error: this.error,\n type: this.type,\n });\n }\n\n handleBlur() {\n this.nylasFormInputBlurred.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n handleFocus() {\n this.nylasFormInputFocused.emit({\n value: this.value,\n name: this.name,\n });\n }\n\n validatePattern(value: string) {\n // Reset error\n this.error = '';\n\n if (this.required && !value) {\n this.error = this.requiredError || 'This field is required.';\n return;\n }\n\n if (this.type === 'number' && value) {\n const numericValue = parseFloat(value);\n if ((this.maxValue !== undefined && numericValue > this.maxValue) || (this.minValue !== undefined && numericValue < this.minValue)) {\n this.error = `Value must be between ${this.minValue} and ${this.maxValue}`;\n return;\n }\n }\n\n if (this.pattern && value && !this.pattern.test(value)) {\n this.error = this.patternError || 'Invalid format.';\n }\n }\n\n render() {\n return (\n <label part={this.error ? 'ic__label ic__label--error' : 'ic__label'} class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n </p>\n )}\n <div part=\"ic__input_wrapper\" class=\"input_wrapper\">\n <input\n type={this.type}\n name={this.name}\n part={this.error ? 'ic__input ic__input--error' : 'ic__input'}\n title={this.readOnly ? 'read-only field' : undefined}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n max={this.type === 'number' ? this.maxValue : undefined}\n min={this.type === 'number' ? this.minValue : undefined}\n placeholder={this.placeholder}\n class={{ error: !!this.error }}\n onInput={e => this.handleInput(e)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n <slot name=\"additional-input\"></slot>\n </div>\n {this.error && (\n <span class=\"error help-text\" part=\"ic__error_message\">\n {this.error}\n </span>\n )}\n </label>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, e as createEvent, h, i as Host } from './p-Bht9ktsW.js';
|
|
2
|
-
import { R as RegisterComponent } from './p-
|
|
3
|
-
import { a as debug, b as instance } from './p-
|
|
2
|
+
import { R as RegisterComponent } from './p-BLaGY2c9.js';
|
|
3
|
+
import { a as debug, b as instance } from './p-BJ0gZqoJ.js';
|
|
4
4
|
import { d as defineCustomElement$6 } from './p-BmAj0mhb.js';
|
|
5
5
|
import { d as defineCustomElement$5 } from './p-Ctw485JT.js';
|
|
6
|
-
import { d as defineCustomElement$4 } from './p-
|
|
6
|
+
import { d as defineCustomElement$4 } from './p-ttOMOXED.js';
|
|
7
7
|
import { d as defineCustomElement$3 } from './p-BPcKgFmL.js';
|
|
8
8
|
import { d as defineCustomElement$2 } from './p-DNNbYGla.js';
|
|
9
9
|
import { d as defineCustomElement$1 } from './p-Chy47KVW.js';
|
|
@@ -213,6 +213,6 @@ function defineCustomElement() {
|
|
|
213
213
|
}
|
|
214
214
|
|
|
215
215
|
export { NylasSchedulingMethod as N, defineCustomElement as d };
|
|
216
|
-
//# sourceMappingURL=p-
|
|
216
|
+
//# sourceMappingURL=p-u7v_3NZe.js.map
|
|
217
217
|
|
|
218
|
-
//# sourceMappingURL=p-
|
|
218
|
+
//# sourceMappingURL=p-u7v_3NZe.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-DyLPwQVe.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-scheduling-method/nylas-scheduling-method.scss?tag=nylas-scheduling-method&encapsulation=shadow","src/components/scheduler-editor/nylas-scheduling-method/nylas-scheduling-method.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-scheduling-method {\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\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n\n h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n }\n\n .nylas-scheduling-method__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n span.nylas-scheduling-method__dropdown-label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n margin: 0.25rem 0 0 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n text-align: left;\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-content) {\n width: 100%;\n max-width: unset;\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 }\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 input-component::part(ic__input) {\n background: var(--nylas-base-50);\n outline: none;\n cursor: not-allowed;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AdditionalParticipant, Configuration, ThemeConfig } from '@nylas/core';\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 i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/**\n * The `nylas-scheduling-method` component is a UI component that displays the booking calendar picker.\n * @part nsm - The booking calendar picker container\n * @part nsm__header - The header of the booking calendar picker\n * @part nsm__input-label - The input label of the booking calendar picker\n * @part nsm__dropdown - The dropdown container\n * @part nsm__dropdown-button - The dropdown button\n * @part nsm__dropdown-content - The dropdown content\n */\n@Component({\n tag: 'nylas-scheduling-method',\n styleUrl: 'nylas-scheduling-method.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasSchedulingMethod {\n @Element() host!: HTMLNylasSchedulingMethodElement;\n\n /**\n * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The name of the booking type picker.\n */\n @Prop() name: string = 'availability-method';\n /**\n * @standalone\n * The participant options passed in the additionalParticipants prop\n * from the nylas-scheduler-editor component.\n */\n @Prop() participantOptions?: AdditionalParticipant[];\n /**\n * This prop is used to display the component in a disabled state / read-only mode.\n */\n @Prop() readOnly: boolean = false;\n /**\n * The selected language.\n */\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n /**\n * Whether to show the sub-title.\n */\n @Prop() showSubTitle: boolean = false;\n\n /**\n * The element internals.\n */\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * The selected booking type.\n */\n @State() selectedBookingType: string = '';\n\n /**\n * This event is fired when the selected booking calendar changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-scheduling-method', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-scheduling-method', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-scheduling-method', '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-scheduling-method', 'componentDidLoad');\n const bookingType = this.selectedConfiguration?.availability?.availability_rules?.availability_method?.toString();\n\n // TODO: Remove this when the internals in tests are fixed.\n if (bookingType && typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(bookingType, this.name);\n }\n this.selectedBookingType = bookingType || 'collective';\n }\n\n componentWillUpdate() {\n debug('nylas-scheduling-method', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-scheduling-method', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-scheduling-method', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-scheduling-method', '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-scheduling-method', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newVal: Configuration, _oldVal: Configuration) {\n const bookingType = newVal?.availability?.availability_rules?.availability_method ?? 'collective';\n\n this.internals.setFormValue(bookingType, this.name);\n this.selectedBookingType = bookingType || 'collective';\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-scheduling-method', '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 if (value) {\n this.selectedBookingType = value;\n this.internals.setFormValue(value, this.name);\n }\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n }\n\n @RegisterComponent<NylasSchedulingMethod, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-scheduling-method',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\n localPropsToProp: new Map([['additionalParticipants', 'participantOptions']]),\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 bookingTypeOptions = [\n { label: i18next.t('nylasSchedulingMethod.schedulingMethodOptions', { context: 'collective' }), value: 'collective' },\n { label: i18next.t('nylasSchedulingMethod.schedulingMethodOptions', { context: 'maxFairness' }), value: 'max-fairness' },\n { label: i18next.t('nylasSchedulingMethod.schedulingMethodOptions', { context: 'maxAvailability' }), value: 'max-availability' },\n ];\n const defaultBookingType = this.selectedConfiguration?.availability?.availability_rules?.availability_method?.toString();\n const hasAdditionalParticipants =\n this.participantOptions &&\n this.participantOptions?.length > 0 &&\n !!this.participantOptions[0].email &&\n !!this.participantOptions[0].name &&\n !!this.participantOptions[0].calendars &&\n this.participantOptions[0].calendars.length > 0;\n\n // If a default availability method is set in the configuration (developer settings), do not show the booking type picker.\n // Or, if a default availability method is not set and there are no additional participants, do not show the booking type picker.\n if ((defaultBookingType || !hasAdditionalParticipants) && !this.readOnly) {\n return null;\n }\n\n return (\n <Host>\n <div class=\"nylas-scheduling-method\" part=\"nsm\">\n <div class=\"header\" part=\"nsm__header\">\n <h3>{i18next.t('nylasSchedulingMethod.headerTitle')}</h3>\n </div>\n <div class=\"nylas-scheduling-method__dropdown\">\n {this.showSubTitle && (\n <span class=\"nylas-scheduling-method__dropdown-label\">\n {i18next.t('nylasSchedulingMethod.headerSubTitle')}\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n <strong>{i18next.t('nylasSchedulingMethod.tooltip.standard.label')}</strong>\n <br />- {i18next.t('nylasSchedulingMethod.tooltip.standard.desc')}\n <br />\n <br />\n <strong>{i18next.t('nylasSchedulingMethod.tooltip.maxFairness.label')}</strong>\n <br />- {i18next.t('nylasSchedulingMethod.tooltip.maxFairness.desc')}\n <br />\n <br />\n <strong>{i18next.t('nylasSchedulingMethod.tooltip.maxAvailability.label')}</strong>\n <br />- {i18next.t('nylasSchedulingMethod.tooltip.maxAvailability.desc')}\n <br />\n </span>\n </tooltip-component>\n </span>\n )}\n {this.readOnly ? (\n <input-component\n name=\"availability-method-read-only\"\n type=\"text\"\n exportparts=\"ic__label: nsm__input-label, ic__input: nsm__input, ic__input_wrapper: nsm__input_wrapper\"\n readOnly\n defaultValue={bookingTypeOptions.find(cal => cal.value == defaultBookingType)?.label ?? bookingTypeOptions[0].label}\n themeConfig={this.themeConfig}\n />\n ) : (\n <select-dropdown\n name={this.name}\n options={bookingTypeOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nsm__dropdown, sd_dropdown-button: nsm__dropdown-button, sd_dropdown-content: nsm__dropdown-content\"\n defaultSelectedOption={bookingTypeOptions.find(cal => cal.value == defaultBookingType) ?? bookingTypeOptions[0]}\n themeConfig={this.themeConfig}\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-u7v_3NZe.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-scheduling-method/nylas-scheduling-method.scss?tag=nylas-scheduling-method&encapsulation=shadow","src/components/scheduler-editor/nylas-scheduling-method/nylas-scheduling-method.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n display: block;\n @include default-css-variables;\n width: inherit;\n}\n\n.nylas-scheduling-method {\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\n .header {\n padding: 1rem;\n border-bottom: 1px solid var(--nylas-base-200);\n\n h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 20px;\n color: var(--nylas-base-900);\n text-align: left;\n }\n }\n\n .nylas-scheduling-method__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n span.nylas-scheduling-method__dropdown-label {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--nylas-base-800);\n margin: 0.25rem 0 0 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n text-align: left;\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-content) {\n width: 100%;\n max-width: unset;\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 }\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 input-component::part(ic__input) {\n background: var(--nylas-base-50);\n outline: none;\n cursor: not-allowed;\n }\n }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AdditionalParticipant, Configuration, ThemeConfig } from '@nylas/core';\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 i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/**\n * The `nylas-scheduling-method` component is a UI component that displays the booking calendar picker.\n * @part nsm - The booking calendar picker container\n * @part nsm__header - The header of the booking calendar picker\n * @part nsm__input-label - The input label of the booking calendar picker\n * @part nsm__dropdown - The dropdown container\n * @part nsm__dropdown-button - The dropdown button\n * @part nsm__dropdown-content - The dropdown content\n */\n@Component({\n tag: 'nylas-scheduling-method',\n styleUrl: 'nylas-scheduling-method.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasSchedulingMethod {\n @Element() host!: HTMLNylasSchedulingMethodElement;\n\n /**\n * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The name of the booking type picker.\n */\n @Prop() name: string = 'availability-method';\n /**\n * @standalone\n * The participant options passed in the additionalParticipants prop\n * from the nylas-scheduler-editor component.\n */\n @Prop() participantOptions?: AdditionalParticipant[];\n /**\n * This prop is used to display the component in a disabled state / read-only mode.\n */\n @Prop() readOnly: boolean = false;\n /**\n * The selected language.\n */\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n /**\n * Whether to show the sub-title.\n */\n @Prop() showSubTitle: boolean = false;\n\n /**\n * The element internals.\n */\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * The selected booking type.\n */\n @State() selectedBookingType: string = '';\n\n /**\n * This event is fired when the selected booking calendar changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n }>;\n\n // Lifecycle methods\n connectedCallback() {\n debug('nylas-scheduling-method', 'connectedCallback');\n }\n\n disconnectedCallback() {\n debug('nylas-scheduling-method', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-scheduling-method', '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-scheduling-method', 'componentDidLoad');\n const bookingType = this.selectedConfiguration?.availability?.availability_rules?.availability_method?.toString();\n\n // TODO: Remove this when the internals in tests are fixed.\n if (bookingType && typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(bookingType, this.name);\n }\n this.selectedBookingType = bookingType || 'collective';\n }\n\n componentWillUpdate() {\n debug('nylas-scheduling-method', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-scheduling-method', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-scheduling-method', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-scheduling-method', '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-scheduling-method', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newVal: Configuration, _oldVal: Configuration) {\n const bookingType = newVal?.availability?.availability_rules?.availability_method ?? 'collective';\n\n this.internals.setFormValue(bookingType, this.name);\n this.selectedBookingType = bookingType || 'collective';\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n @Listen('nylasFormDropdownChanged')\n nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-scheduling-method', '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 if (value) {\n this.selectedBookingType = value;\n this.internals.setFormValue(value, this.name);\n }\n };\n this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n }\n\n @RegisterComponent<NylasSchedulingMethod, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-scheduling-method',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\n localPropsToProp: new Map([['additionalParticipants', 'participantOptions']]),\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 bookingTypeOptions = [\n { label: i18next.t('nylasSchedulingMethod.schedulingMethodOptions', { context: 'collective' }), value: 'collective' },\n { label: i18next.t('nylasSchedulingMethod.schedulingMethodOptions', { context: 'maxFairness' }), value: 'max-fairness' },\n { label: i18next.t('nylasSchedulingMethod.schedulingMethodOptions', { context: 'maxAvailability' }), value: 'max-availability' },\n ];\n const defaultBookingType = this.selectedConfiguration?.availability?.availability_rules?.availability_method?.toString();\n const hasAdditionalParticipants =\n this.participantOptions &&\n this.participantOptions?.length > 0 &&\n !!this.participantOptions[0].email &&\n !!this.participantOptions[0].name &&\n !!this.participantOptions[0].calendars &&\n this.participantOptions[0].calendars.length > 0;\n\n // If a default availability method is set in the configuration (developer settings), do not show the booking type picker.\n // Or, if a default availability method is not set and there are no additional participants, do not show the booking type picker.\n if ((defaultBookingType || !hasAdditionalParticipants) && !this.readOnly) {\n return null;\n }\n\n return (\n <Host>\n <div class=\"nylas-scheduling-method\" part=\"nsm\">\n <div class=\"header\" part=\"nsm__header\">\n <h3>{i18next.t('nylasSchedulingMethod.headerTitle')}</h3>\n </div>\n <div class=\"nylas-scheduling-method__dropdown\">\n {this.showSubTitle && (\n <span class=\"nylas-scheduling-method__dropdown-label\">\n {i18next.t('nylasSchedulingMethod.headerSubTitle')}\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">\n <strong>{i18next.t('nylasSchedulingMethod.tooltip.standard.label')}</strong>\n <br />- {i18next.t('nylasSchedulingMethod.tooltip.standard.desc')}\n <br />\n <br />\n <strong>{i18next.t('nylasSchedulingMethod.tooltip.maxFairness.label')}</strong>\n <br />- {i18next.t('nylasSchedulingMethod.tooltip.maxFairness.desc')}\n <br />\n <br />\n <strong>{i18next.t('nylasSchedulingMethod.tooltip.maxAvailability.label')}</strong>\n <br />- {i18next.t('nylasSchedulingMethod.tooltip.maxAvailability.desc')}\n <br />\n </span>\n </tooltip-component>\n </span>\n )}\n {this.readOnly ? (\n <input-component\n name=\"availability-method-read-only\"\n type=\"text\"\n exportparts=\"ic__label: nsm__input-label, ic__input: nsm__input, ic__input_wrapper: nsm__input_wrapper\"\n readOnly\n defaultValue={bookingTypeOptions.find(cal => cal.value == defaultBookingType)?.label ?? bookingTypeOptions[0].label}\n themeConfig={this.themeConfig}\n />\n ) : (\n <select-dropdown\n name={this.name}\n options={bookingTypeOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nsm__dropdown, sd_dropdown-button: nsm__dropdown-button, sd_dropdown-content: nsm__dropdown-content\"\n defaultSelectedOption={bookingTypeOptions.find(cal => cal.value == defaultBookingType) ?? bookingTypeOptions[0]}\n themeConfig={this.themeConfig}\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, e as createEvent, h } from './p-Bht9ktsW.js';
|
|
2
|
-
import { s as sanitize } from './p-
|
|
2
|
+
import { s as sanitize } from './p-BJ0gZqoJ.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './p-Ctw485JT.js';
|
|
4
4
|
import { d as defineCustomElement$1 } from './p-Chy47KVW.js';
|
|
5
5
|
|
|
@@ -129,6 +129,6 @@ function defineCustomElement() {
|
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
export { TextareaComponent as T, defineCustomElement as d };
|
|
132
|
-
//# sourceMappingURL=p-
|
|
132
|
+
//# sourceMappingURL=p-uxYETK9F.js.map
|
|
133
133
|
|
|
134
|
-
//# sourceMappingURL=p-
|
|
134
|
+
//# sourceMappingURL=p-uxYETK9F.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-6w1TXINP.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/design-system/textarea-component/textarea-component.scss?tag=textarea-component&encapsulation=shadow","src/components/design-system/textarea-component/textarea-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n display: block;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n display: flex;\n gap: 4px;\n align-items: center;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\ntextarea {\n @include textfield;\n padding: 12px 16px;\n border-width: 1;\n resize: vertical;\n border-radius: 8px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n\n &::-webkit-resizer {\n display: none;\n }\n}\n\ntextarea:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\n\n/**\n * `textarea-component` allows users to enter multiline text.\n * It is ideal for larger inputs like comments or messages in a form.\n * This component is used in the scheduling form to input multiline text.\n *\n * @part tc__label - The label for the textarea.\n * @part tc__textarea - The textarea element.\n */\n@Component({\n tag: 'textarea-component',\n styleUrl: 'textarea-component.scss',\n shadow: true,\n})\nexport class TextareaComponent {\n @Element() el!: HTMLElement;\n\n /**\n * The name of the textarea, important for form submissions.\n */\n @Prop() name: string = 'textarea';\n\n /**\n * The default value of the textarea, appearing when the component first renders.\n */\n @Prop() defaultValue?: string;\n\n /**\n * The label for the textarea, displayed above it.\n */\n @Prop() label: string = '';\n\n /**\n * Placeholder text shown in the textarea when it is empty.\n */\n @Prop() placeholder: string = '';\n\n /**\n * Specifies if the textarea is required for form submission.\n * If true, an error message shows if left empty.\n */\n @Prop() required: boolean = false;\n\n /**\n * If true, the textarea cannot be edited by the user.\n */\n @Prop() readOnly: boolean = false;\n\n /**\n * Automatically focus the textarea when the component loads.\n */\n @Prop() autoFocus: boolean = false;\n\n /**\n * The maximum number of characters allowed in the textarea.\n */\n @Prop() maxLength: number = 255;\n\n /**\n * The type\n */\n @Prop() type: string = 'multi_line_text';\n\n /**\n * The content of the label's tooltip\n */\n @Prop() tooltip: string = '';\n\n /**\n * Error message to display when the textarea is required and empty.\n */\n @Prop() errorMessage: string = '';\n\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /**\n * State for the current value of the textarea.\n */\n @State() value: string = '';\n\n /**\n * State for managing the display of any error messages.\n */\n @State() error: string = '';\n\n /**\n * Event emitted when the value of the textarea changes.\n * Useful for parent components to capture user input.\n */\n @Event() nylasFormInputChanged!: EventEmitter<{ value: string; name: string; error: string; label: string; type: string }>;\n\n componentWillLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n /**\n * Lifecycle method that runs before the component loads.\n * It sets the initial value and cleans it using sanitize-html.\n */\n componentDidLoad() {\n this.value = sanitize(this.defaultValue || '');\n this.applyThemeConfig(this.themeConfig);\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n // Event listeners\n /**\n * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n */\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('triggerValidation', { target: 'document' })\n handletriggerValidation(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /**\n * Handles user input in the textarea, updating the value and emitting an event.\n */\n handleInput(e: Event) {\n this.error = '';\n const inputElement = e.target as HTMLTextAreaElement;\n this.value = sanitize(inputElement.value);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n error: this.error,\n label: this.label,\n type: this.type,\n });\n }\n\n /**\n * Validates the textarea value based on the required prop and maxLength.\n * If the value is invalid, an error message is displayed.\n */\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage || `${this.label} is required.`;\n } else if (value.length > this.maxLength) {\n this.error = `${this.label} cannot exceed ${this.maxLength} characters.`;\n } else {\n this.error = '';\n }\n }\n\n /**\n * Renders the component UI including the label, textarea, and any error messages.\n */\n render() {\n return (\n <label part=\"tc__label\" class={{ error: !!this.error }}>\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n {this.tooltip && (\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{this.tooltip}</span>\n </tooltip-component>\n )}\n </p>\n <textarea\n name={this.name}\n title={this.readOnly ? 'read-only field' : undefined}\n placeholder={this.placeholder}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n onInput={e => this.handleInput(e)}\n class={{ error: !!this.error }}\n part=\"tc__textarea\"\n />\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-uxYETK9F.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/design-system/textarea-component/textarea-component.scss?tag=textarea-component&encapsulation=shadow","src/components/design-system/textarea-component/textarea-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n display: block;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n display: flex;\n gap: 4px;\n align-items: center;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\ntextarea {\n @include textfield;\n padding: 12px 16px;\n border-width: 1;\n resize: vertical;\n border-radius: 8px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n\n &::-webkit-resizer {\n display: none;\n }\n}\n\ntextarea:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\n\n/**\n * `textarea-component` allows users to enter multiline text.\n * It is ideal for larger inputs like comments or messages in a form.\n * This component is used in the scheduling form to input multiline text.\n *\n * @part tc__label - The label for the textarea.\n * @part tc__textarea - The textarea element.\n */\n@Component({\n tag: 'textarea-component',\n styleUrl: 'textarea-component.scss',\n shadow: true,\n})\nexport class TextareaComponent {\n @Element() el!: HTMLElement;\n\n /**\n * The name of the textarea, important for form submissions.\n */\n @Prop() name: string = 'textarea';\n\n /**\n * The default value of the textarea, appearing when the component first renders.\n */\n @Prop() defaultValue?: string;\n\n /**\n * The label for the textarea, displayed above it.\n */\n @Prop() label: string = '';\n\n /**\n * Placeholder text shown in the textarea when it is empty.\n */\n @Prop() placeholder: string = '';\n\n /**\n * Specifies if the textarea is required for form submission.\n * If true, an error message shows if left empty.\n */\n @Prop() required: boolean = false;\n\n /**\n * If true, the textarea cannot be edited by the user.\n */\n @Prop() readOnly: boolean = false;\n\n /**\n * Automatically focus the textarea when the component loads.\n */\n @Prop() autoFocus: boolean = false;\n\n /**\n * The maximum number of characters allowed in the textarea.\n */\n @Prop() maxLength: number = 255;\n\n /**\n * The type\n */\n @Prop() type: string = 'multi_line_text';\n\n /**\n * The content of the label's tooltip\n */\n @Prop() tooltip: string = '';\n\n /**\n * Error message to display when the textarea is required and empty.\n */\n @Prop() errorMessage: string = '';\n\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /**\n * State for the current value of the textarea.\n */\n @State() value: string = '';\n\n /**\n * State for managing the display of any error messages.\n */\n @State() error: string = '';\n\n /**\n * Event emitted when the value of the textarea changes.\n * Useful for parent components to capture user input.\n */\n @Event() nylasFormInputChanged!: EventEmitter<{ value: string; name: string; error: string; label: string; type: string }>;\n\n componentWillLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n /**\n * Lifecycle method that runs before the component loads.\n * It sets the initial value and cleans it using sanitize-html.\n */\n componentDidLoad() {\n this.value = sanitize(this.defaultValue || '');\n this.applyThemeConfig(this.themeConfig);\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n // Event listeners\n /**\n * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n */\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('triggerValidation', { target: 'document' })\n handletriggerValidation(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /**\n * Handles user input in the textarea, updating the value and emitting an event.\n */\n handleInput(e: Event) {\n this.error = '';\n const inputElement = e.target as HTMLTextAreaElement;\n this.value = sanitize(inputElement.value);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n error: this.error,\n label: this.label,\n type: this.type,\n });\n }\n\n /**\n * Validates the textarea value based on the required prop and maxLength.\n * If the value is invalid, an error message is displayed.\n */\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage || `${this.label} is required.`;\n } else if (value.length > this.maxLength) {\n this.error = `${this.label} cannot exceed ${this.maxLength} characters.`;\n } else {\n this.error = '';\n }\n }\n\n /**\n * Renders the component UI including the label, textarea, and any error messages.\n */\n render() {\n return (\n <label part=\"tc__label\" class={{ error: !!this.error }}>\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n {this.tooltip && (\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{this.tooltip}</span>\n </tooltip-component>\n )}\n </p>\n <textarea\n name={this.name}\n title={this.readOnly ? 'read-only field' : undefined}\n placeholder={this.placeholder}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n onInput={e => this.handleInput(e)}\n class={{ error: !!this.error }}\n part=\"tc__textarea\"\n />\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, e as createEvent, h, i as Host } from './p-Bht9ktsW.js';
|
|
2
|
-
import { R as RegisterComponent } from './p-
|
|
3
|
-
import { a as debug, b as instance } from './p-
|
|
2
|
+
import { R as RegisterComponent } from './p-BLaGY2c9.js';
|
|
3
|
+
import { a as debug, b as instance } from './p-BJ0gZqoJ.js';
|
|
4
4
|
import { d as defineCustomElement$5 } from './p-BmAj0mhb.js';
|
|
5
5
|
import { d as defineCustomElement$4 } from './p-Ctw485JT.js';
|
|
6
6
|
import { d as defineCustomElement$3 } from './p-BPcKgFmL.js';
|
|
@@ -207,6 +207,6 @@ function defineCustomElement() {
|
|
|
207
207
|
}
|
|
208
208
|
|
|
209
209
|
export { NylasBookingConfirmationType as N, defineCustomElement as d };
|
|
210
|
-
//# sourceMappingURL=p-
|
|
210
|
+
//# sourceMappingURL=p-wbuAwPIf.js.map
|
|
211
211
|
|
|
212
|
-
//# sourceMappingURL=p-
|
|
212
|
+
//# sourceMappingURL=p-wbuAwPIf.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-pKaQ_oN3.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"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":["@use '../../../common/styles/variables' as *;\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, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\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 * If the configuration is a group configuration, the component will not be shown.\n */\n @Prop() showComponent: boolean = this.selectedConfiguration?.event_booking?.booking_type !== 'custom-confirmation' && this.selectedConfiguration?.type !== 'group';\n /**\n * The selected language.\n */\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n /**\n * @standalone\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\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 // If the configuration is a group configuration, the component will not be shown.\n this.showDropdown = newValue?.event_booking?.booking_type !== 'custom-confirmation' && !!newValue?.scheduler?.organizer_confirmation_url && newValue?.type !== 'group';\n this.isInternalsAvailable && this.internals.setFormValue(this.selectedBookingType.toString(), this.name);\n }\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\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.isInternalsAvailable && 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 get isInternalsAvailable() {\n return typeof this.internals.setFormValue === 'function' && typeof this.internals.setFormValue === 'function';\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\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([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\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: i18next.t('nylasBookingConfirmationType.bookingOption', { context: 'booking' }),\n value: 'booking',\n },\n {\n label: i18next.t('nylasBookingConfirmationType.bookingOption', { context: 'organizerConfirmation' }),\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 {i18next.t('nylasBookingConfirmationType.dropdownLabel')}\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{i18next.t('nylasBookingConfirmationType.tooltip.desc')}</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 themeConfig={this.themeConfig}\n />\n )}\n </div>\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-wbuAwPIf.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"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":["@use '../../../common/styles/variables' as *;\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, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\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 * If the configuration is a group configuration, the component will not be shown.\n */\n @Prop() showComponent: boolean = this.selectedConfiguration?.event_booking?.booking_type !== 'custom-confirmation' && this.selectedConfiguration?.type !== 'group';\n /**\n * The selected language.\n */\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n /**\n * @standalone\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\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 // If the configuration is a group configuration, the component will not be shown.\n this.showDropdown = newValue?.event_booking?.booking_type !== 'custom-confirmation' && !!newValue?.scheduler?.organizer_confirmation_url && newValue?.type !== 'group';\n this.isInternalsAvailable && this.internals.setFormValue(this.selectedBookingType.toString(), this.name);\n }\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\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.isInternalsAvailable && 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 get isInternalsAvailable() {\n return typeof this.internals.setFormValue === 'function' && typeof this.internals.setFormValue === 'function';\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\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([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\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: i18next.t('nylasBookingConfirmationType.bookingOption', { context: 'booking' }),\n value: 'booking',\n },\n {\n label: i18next.t('nylasBookingConfirmationType.bookingOption', { context: 'organizerConfirmation' }),\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 {i18next.t('nylasBookingConfirmationType.dropdownLabel')}\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{i18next.t('nylasBookingConfirmationType.tooltip.desc')}</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 themeConfig={this.themeConfig}\n />\n )}\n </div>\n )}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, e as createEvent, h, i as Host } from './p-Bht9ktsW.js';
|
|
2
|
-
import { R as RegisterComponent } from './p-
|
|
3
|
-
import { b as instance, a as debug } from './p-
|
|
2
|
+
import { R as RegisterComponent } from './p-BLaGY2c9.js';
|
|
3
|
+
import { b as instance, a as debug } from './p-BJ0gZqoJ.js';
|
|
4
4
|
import { d as defineCustomElement$3 } from './p-CD74XxwY.js';
|
|
5
5
|
import { d as defineCustomElement$2 } from './p-RLLogeWk.js';
|
|
6
6
|
import { d as defineCustomElement$1 } from './p-DVz9HZ14.js';
|
|
@@ -160,6 +160,6 @@ function defineCustomElement() {
|
|
|
160
160
|
}
|
|
161
161
|
|
|
162
162
|
export { NylasOrganizerConfirmationCard as N, defineCustomElement as d };
|
|
163
|
-
//# sourceMappingURL=p-
|
|
163
|
+
//# sourceMappingURL=p-zGaD8wi_.js.map
|
|
164
164
|
|
|
165
|
-
//# sourceMappingURL=p-
|
|
165
|
+
//# sourceMappingURL=p-zGaD8wi_.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-BkqJeMJc.js","mappings":";;;;;;;AAAA,MAAM,iCAAiC,GAAG,m3HAAm3H;;;;;;;;;;;;;;;;MC2Bh5H,8BAA8B,GAAAA,kBAAA,CAAA,MAAA,8BAAA,SAAAC,CAAA,CAAA;AAL3C,IAAA,WAAA,GAAA;;;;;;;AAqCqD,QAAA,IAAA,CAAA,gBAAgB,GAAW,SAAS,CAAC,QAAQ;AAKvF,QAAA,IAAM,CAAA,MAAA,GAAgC,IAAI;AAqD3C,QAAA,IAAiC,CAAA,iCAAA,GAAG,MAAK;AAC/C,YAAA,IAAI,CAAC,MAAM,GAAG,SAAS;AACvB,YAAA,MAAM,YAAY,GAAG,CAAC,KAAkC,KAAI;AAC1D,gBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC;AACtC,aAAC;YACD,IAAI,IAAI,CAAC,8BAA8B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBAC1D,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,CAAC;;AAE5H,SAAC;AAEO,QAAA,IAAgC,CAAA,gCAAA,GAAG,MAAK;AAC9C,YAAA,IAAI,CAAC,MAAM,GAAG,QAAQ;YACtB,IAAI,IAAI,CAAC,8BAA8B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AAC1D,gBAAA,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;AAE7G,SAAC;AAkFF;AAhIC,IAAA,kBAAkB,CAAC,cAA2B,EAAA;AAC5C,QAAA,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC;;IAIvC,8BAA8B,CAAC,MAAqB,EAAE,MAAqB,EAAA;QACzE,IAAI,MAAM,KAAK,MAAM;YAAE;AACvB,QAAAC,QAAO,CAAC,cAAc,CAAC,MAAM,CAAC;;AAGhC,IAAA,iBAAiB;AAEjB,IAAA,oBAAoB;AAEpB,IAAA,MAAM,iBAAiB,GAAA;QACrB,KAAK,CAAC,CAAyD,uDAAA,CAAA,CAAC;;AAGlE,IAAA,MAAM,gBAAgB,GAAA;QACpB,KAAK,CAAC,CAAwD,sDAAA,CAAA,CAAC;AAC/D,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC;;AAGzC,IAAA,gBAAgB,CAAC,WAAyB,EAAA;QACxC,IAAI,WAAW,EAAE;AACf,YAAA,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;AACtD,gBAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA,EAAG,GAAG,CAAA,CAAE,EAAE,KAAK,CAAC;;;;AAuBlD,IAAA,MAAM,WAAW,GAAA;AACf,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;;IAqCpB,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACf,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,aAAa,EAAA,EAChD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAuB,CACnB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,aAAa,EACrC,EAAA,CAAC,CAAC,IAAI,CAAC,8BAA8B,IAAI,CAAG,EAAAA,QAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAG,CAAA,CAAA,CAC7E,CACD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAAA,EACrC,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAIA,QAAO,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAK,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,IAAI;aACb,EAAA,EAED,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAC9C,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EACrD,IAAI,EAAC,uCAAuC,EAAA,EAE3C,CAAA,EAAGA,QAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAE,CAAA,CACrB,EACnB,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,IAAI,CAAC,iCAAiC,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EACtD,IAAI,EAAC,2CAA2C,EAE/C,EAAA,CAAG,EAAAA,QAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAA,CAAE,CACtB,CACf,CACF,CACD;;;;;;;;;;;;;;;;;;;;AAtCX,UAAA,CAAA;AAlCC,IAAA,iBAAiB,CAAyG;AACzH,QAAA,IAAI,EAAE,mCAAmC;QACzC,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,0CAA0C,EAAE,gCAAgC,CAAC;YAC9E,CAAC,0BAA0B,EAAE,gBAAgB,CAAC;YAC9C,CAAC,qBAAqB,EAAE,WAAW,CAAC;YACpC,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,uBAAuB,EAAE,aAAa,CAAC;SACzC,CAAC;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,0BAA0B,EAAE,OAC1B,KAA0F,EAC1F,uBAAgD,KAC9C;gBACF,uBAAuB,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;aACpE;AACD,YAAA,2BAA2B,EAAE,OAC3B,KAAuJ,EACvJ,uBAAgD,KAC9C;AACF,gBAAA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM;gBAC7B,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,aAAa,CAAC;AACnE,oBAAA,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS;AACjC,oBAAA,MAAM,EAAE,WAAW;AACpB,iBAAA,CAAC;AACF,gBAAA,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM;gBACrC,IAAI,YAAY,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE;oBAClD,YAAY,CAAC,MAAM,CAAC;;AAEtB,gBAAA,MAAM,IAAI,CAAC,WAAW,EAAE;aACzB;AACF,SAAA;AACD,QAAA,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;CAyCD,EAAA,8BAAA,CAAA,SAAA,EAAA,QAAA,EAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.scss?tag=nylas-organizer-confirmation-card&encapsulation=shadow","src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.event-card-wrapper {\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 background-color: var(--nylas-base-0);\n color: var(--nylas-base-900);\n border-radius: var(--nylas-border-radius-3x);\n position: relative;\n margin-top: 1rem;\n width: 424px;\n\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 @media #{$mobile} {\n width: 100%;\n border-radius: 0px;\n }\n}\n\n.calendar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\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 color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n margin: 1.5rem 4rem;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 16px;\n font-weight: 400;\n\n h2 {\n color: var(--nylas-base-600);\n margin-top: 1.5rem;\n margin-bottom: 0.25rem;\n font-size: 1.125rem;\n font-weight: 600;\n }\n}\n\n.manage-booking-description {\n border-top: 1px solid var(--nylas-base-200);\n\n p {\n font-size: 16px;\n margin: 1rem;\n padding: 0.5rem 1rem;\n font-weight: 400;\n color: var(--nylas-base-800);\n }\n}\n\n.footer {\n padding: 0.5rem;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n box-sizing: border-box;\n background-color: var(--nylas-base-25);\n width: 100%;\n border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n &.no-template-cols {\n grid-template-columns: 1fr;\n }\n\n &.no-footer {\n display: none;\n }\n}\n\nsp-divider {\n background-color: var(--nylas-base-200);\n height: 1px;\n}\n\ncalendar-check-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\nbutton-component {\n --dot-color: var(--nylas-base-700);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card.\n *\n * @part nmcc - The booked event card host.\n * @part nmcc__card - The booked event card.\n * @part nmcc__title - The title of the booked event card.\n * @part nmcc__description - The description of the booked event card.\n * @part nmcc__button-outline - The cancel & reschedule button CTA.\n * @part nmcc__cancel-cta - The cancel button CTA.\n * @part nmcc__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n tag: 'nylas-organizer-confirmation-card',\n styleUrl: 'nylas-organizer-confirmation-card.scss',\n shadow: true,\n})\nexport class NylasOrganizerConfirmationCard {\n /**\n * The host element.\n */\n @Element() host!: HTMLNylasOrganizerConfirmationCardElement;\n\n /**\n * @standalone\n * The config settings for the scheduler.\n */\n @Prop() readonly configSettings?: ConfigSettings;\n\n /**\n * @standalone\n * The loading state prop. Used to display loading state when fetching availability.\n */\n @Prop() readonly isLoading?: boolean;\n\n /**\n * @standalone\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /**\n * Booking flow type.\n */\n @Prop() readonly organizerConfirmationBookingId?: string;\n\n /**\n * The selected language.\n */\n @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n /**\n * The state to identify which action is being performed.\n */\n @State() action: 'confirm' | 'reject' | null = null;\n\n /**\n * Reject booking button clicked event.\n */\n @Event() readonly rejectBookingButtonClicked!: EventEmitter<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>;\n\n /**\n * Reschedule button clicked event.\n * */\n @Event() readonly confirmBookingButtonClicked!: EventEmitter<{\n bookingId: string;\n host: HTMLNylasOrganizerConfirmationCardElement;\n errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n }>;\n\n /**\n * This event is fired when an error occurs while rescheduling the booking.\n */\n @Event() readonly confirmBookingError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n @Watch('themeConfig')\n themeConfigChanged(newThemeConfig: ThemeConfig) {\n this.applyThemeConfig(newThemeConfig);\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-organizer-confirmation-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-organizer-confirmation-card] Component did load`);\n this.applyThemeConfig(this.themeConfig);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private handleConfirmBookingButtonClicked = () => {\n this.action = 'confirm';\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.confirmBookingError.emit(error);\n };\n if (this.organizerConfirmationBookingId && !this.isLoading) {\n this.confirmBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host, errorHandler });\n }\n };\n\n private handleRejectBookingButtonClicked = () => {\n this.action = 'reject';\n if (this.organizerConfirmationBookingId && !this.isLoading) {\n this.rejectBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host });\n }\n };\n\n @Method()\n async resetAction() {\n this.action = null;\n }\n\n @RegisterComponent<NylasOrganizerConfirmationCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-organizer-confirmation-card',\n stateToProps: new Map([\n ['scheduler.organizerConfirmationBookingId', 'organizerConfirmationBookingId'],\n ['scheduler.configSettings', 'configSettings'],\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.themeConfig', 'themeConfig'],\n ]),\n eventToProps: {\n rejectBookingButtonClicked: async (\n event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n nylasSchedulerConnector.scheduler.setReject(event.detail.bookingId);\n },\n confirmBookingButtonClicked: async (\n event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const { host } = event.detail;\n const result = await nylasSchedulerConnector.scheduler.updateBooking({\n bookingId: event.detail.bookingId,\n status: 'confirmed',\n });\n const { errorHandler } = event.detail;\n if (errorHandler && (!result || 'error' in result)) {\n errorHandler(result);\n }\n await host.resetAction();\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"nmcc\">\n <div class=\"event-card-wrapper\" part=\"nmccc__card\">\n <div class=\"calendar-icon\">\n <calendar-check-icon />\n </div>\n <div class=\"booked-event-header\">\n <h2 slot=\"card-title\" part=\"nmcc__title\">\n {!!this.organizerConfirmationBookingId && `${i18next.t('bookingPendingTitle')}!`}\n </h2>\n </div>\n <div class=\"manage-booking-description\">\n <p>{i18next.t('bookingPendingnDescription')}</p>\n </div>\n <div\n class={{\n footer: true,\n }}\n >\n <button-component\n variant={'destructive'}\n onClick={this.handleRejectBookingButtonClicked}\n isLoading={this.isLoading && this.action === 'reject'}\n part=\"nmcc__button-outline nmcc__cancel-cta\"\n >\n {`${i18next.t('rejectBookingButton')}`}\n </button-component>\n <button-component\n variant={'basic'}\n onClick={this.handleConfirmBookingButtonClicked}\n isLoading={this.isLoading && this.action === 'confirm'}\n part=\"nmcc__button-outline nmcc__reschedule-cta\"\n >\n {`${i18next.t('confirmBookingButton')}`}\n </button-component>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-zGaD8wi_.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.scss?tag=nylas-organizer-confirmation-card&encapsulation=shadow","src/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n display: block;\n @include default-css-variables;\n}\n\n.event-card-wrapper {\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 background-color: var(--nylas-base-0);\n color: var(--nylas-base-900);\n border-radius: var(--nylas-border-radius-3x);\n position: relative;\n margin-top: 1rem;\n width: 424px;\n\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 @media #{$mobile} {\n width: 100%;\n border-radius: 0px;\n }\n}\n\n.calendar-icon {\n display: flex;\n align-items: center;\n justify-content: center;\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 color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n margin: 1.5rem 4rem;\n overflow-wrap: anywhere;\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 16px;\n font-weight: 400;\n\n h2 {\n color: var(--nylas-base-600);\n margin-top: 1.5rem;\n margin-bottom: 0.25rem;\n font-size: 1.125rem;\n font-weight: 600;\n }\n}\n\n.manage-booking-description {\n border-top: 1px solid var(--nylas-base-200);\n\n p {\n font-size: 16px;\n margin: 1rem;\n padding: 0.5rem 1rem;\n font-weight: 400;\n color: var(--nylas-base-800);\n }\n}\n\n.footer {\n padding: 0.5rem;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n box-sizing: border-box;\n background-color: var(--nylas-base-25);\n width: 100%;\n border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n &.no-template-cols {\n grid-template-columns: 1fr;\n }\n\n &.no-footer {\n display: none;\n }\n}\n\nsp-divider {\n background-color: var(--nylas-base-200);\n height: 1px;\n}\n\ncalendar-check-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\nbutton-component {\n --dot-color: var(--nylas-base-700);\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-organizer-confirmation-card` component is a UI component that displays the booked event card.\n *\n * @part nmcc - The booked event card host.\n * @part nmcc__card - The booked event card.\n * @part nmcc__title - The title of the booked event card.\n * @part nmcc__description - The description of the booked event card.\n * @part nmcc__button-outline - The cancel & reschedule button CTA.\n * @part nmcc__cancel-cta - The cancel button CTA.\n * @part nmcc__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n tag: 'nylas-organizer-confirmation-card',\n styleUrl: 'nylas-organizer-confirmation-card.scss',\n shadow: true,\n})\nexport class NylasOrganizerConfirmationCard {\n /**\n * The host element.\n */\n @Element() host!: HTMLNylasOrganizerConfirmationCardElement;\n\n /**\n * @standalone\n * The config settings for the scheduler.\n */\n @Prop() readonly configSettings?: ConfigSettings;\n\n /**\n * @standalone\n * The loading state prop. Used to display loading state when fetching availability.\n */\n @Prop() readonly isLoading?: boolean;\n\n /**\n * @standalone\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /**\n * Booking flow type.\n */\n @Prop() readonly organizerConfirmationBookingId?: string;\n\n /**\n * The selected language.\n */\n @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n\n /**\n * The state to identify which action is being performed.\n */\n @State() action: 'confirm' | 'reject' | null = null;\n\n /**\n * Reject booking button clicked event.\n */\n @Event() readonly rejectBookingButtonClicked!: EventEmitter<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>;\n\n /**\n * Reschedule button clicked event.\n * */\n @Event() readonly confirmBookingButtonClicked!: EventEmitter<{\n bookingId: string;\n host: HTMLNylasOrganizerConfirmationCardElement;\n errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n }>;\n\n /**\n * This event is fired when an error occurs while rescheduling the booking.\n */\n @Event() readonly confirmBookingError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n @Watch('themeConfig')\n themeConfigChanged(newThemeConfig: ThemeConfig) {\n this.applyThemeConfig(newThemeConfig);\n }\n\n @Watch('selectedLanguage')\n selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n if (newVal === oldVal) return;\n i18next.changeLanguage(newVal);\n }\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n async componentWillLoad() {\n debug(`[nylas-organizer-confirmation-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-organizer-confirmation-card] Component did load`);\n this.applyThemeConfig(this.themeConfig);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private handleConfirmBookingButtonClicked = () => {\n this.action = 'confirm';\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.confirmBookingError.emit(error);\n };\n if (this.organizerConfirmationBookingId && !this.isLoading) {\n this.confirmBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host, errorHandler });\n }\n };\n\n private handleRejectBookingButtonClicked = () => {\n this.action = 'reject';\n if (this.organizerConfirmationBookingId && !this.isLoading) {\n this.rejectBookingButtonClicked.emit({ bookingId: this.organizerConfirmationBookingId, host: this.host });\n }\n };\n\n @Method()\n async resetAction() {\n this.action = null;\n }\n\n @RegisterComponent<NylasOrganizerConfirmationCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-organizer-confirmation-card',\n stateToProps: new Map([\n ['scheduler.organizerConfirmationBookingId', 'organizerConfirmationBookingId'],\n ['scheduler.configSettings', 'configSettings'],\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.selectedLanguage', 'selectedLanguage'],\n ['scheduler.themeConfig', 'themeConfig'],\n ]),\n eventToProps: {\n rejectBookingButtonClicked: async (\n event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n nylasSchedulerConnector.scheduler.setReject(event.detail.bookingId);\n },\n confirmBookingButtonClicked: async (\n event: CustomEvent<{ bookingId: string; host: HTMLNylasOrganizerConfirmationCardElement; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const { host } = event.detail;\n const result = await nylasSchedulerConnector.scheduler.updateBooking({\n bookingId: event.detail.bookingId,\n status: 'confirmed',\n });\n const { errorHandler } = event.detail;\n if (errorHandler && (!result || 'error' in result)) {\n errorHandler(result);\n }\n await host.resetAction();\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"nmcc\">\n <div class=\"event-card-wrapper\" part=\"nmccc__card\">\n <div class=\"calendar-icon\">\n <calendar-check-icon />\n </div>\n <div class=\"booked-event-header\">\n <h2 slot=\"card-title\" part=\"nmcc__title\">\n {!!this.organizerConfirmationBookingId && `${i18next.t('bookingPendingTitle')}!`}\n </h2>\n </div>\n <div class=\"manage-booking-description\">\n <p>{i18next.t('bookingPendingnDescription')}</p>\n </div>\n <div\n class={{\n footer: true,\n }}\n >\n <button-component\n variant={'destructive'}\n onClick={this.handleRejectBookingButtonClicked}\n isLoading={this.isLoading && this.action === 'reject'}\n part=\"nmcc__button-outline nmcc__cancel-cta\"\n >\n {`${i18next.t('rejectBookingButton')}`}\n </button-component>\n <button-component\n variant={'basic'}\n onClick={this.handleConfirmBookingButtonClicked}\n isLoading={this.isLoading && this.action === 'confirm'}\n part=\"nmcc__button-outline nmcc__reschedule-cta\"\n >\n {`${i18next.t('confirmBookingButton')}`}\n </button-component>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TextareaComponent$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { T as TextareaComponent$1, d as defineCustomElement$1 } from './p-uxYETK9F.js';
|
|
2
2
|
|
|
3
3
|
const TextareaComponent = TextareaComponent$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TimePeriodSelector$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { T as TimePeriodSelector$1, d as defineCustomElement$1 } from './p-DmqqlFjj.js';
|
|
2
2
|
|
|
3
3
|
const TimePeriodSelector = TimePeriodSelector$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|