@nylas/web-elements 2.3.2 → 2.3.3-canary-20260206145315
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/input-color-picker/input-color-picker.es.js +1 -1
- package/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js +11 -11
- package/dist/cdn/nylas-scheduling/nylas-scheduling.es.js +8 -8
- package/dist/cjs/calendar-agenda-fill-icon_39.cjs.entry.js +1 -1
- package/dist/cjs/calendar-agenda-fill-icon_39.cjs.entry.js.map +1 -1
- package/dist/cjs/checkbox-component.cjs.entry.js +1 -1
- package/dist/cjs/checkbox-component.cjs.entry.js.map +1 -1
- package/dist/cjs/checkbox-component.entry.cjs.js.map +1 -1
- package/dist/cjs/checkmark-icon_15.cjs.entry.js +3 -3
- package/dist/cjs/checkmark-icon_15.cjs.entry.js.map +1 -1
- package/dist/cjs/chevron-icon.search-icon.select-dropdown.entry.cjs.js.map +1 -1
- package/dist/cjs/chevron-icon_3.cjs.entry.js +1 -1
- package/dist/cjs/chevron-icon_3.cjs.entry.js.map +1 -1
- package/dist/cjs/globe-icon.nylas-date-component.nylas-time-window-picker.entry.cjs.js.map +1 -1
- package/dist/cjs/globe-icon_3.cjs.entry.js +1 -1
- package/dist/cjs/globe-icon_3.cjs.entry.js.map +1 -1
- package/dist/cjs/google-logo-icon_6.cjs.entry.js +1 -1
- package/dist/cjs/input-component.cjs.entry.js +1 -1
- package/dist/cjs/input-component.cjs.entry.js.map +1 -1
- package/dist/cjs/input-component.entry.cjs.js.map +1 -1
- package/dist/cjs/nylas-booked-event-card_11.cjs.entry.js +1 -1
- package/dist/cjs/nylas-booked-event-card_11.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-scheduler-editor.cjs.entry.js +1 -1
- package/dist/cjs/nylas-scheduling.cjs.entry.js +1 -1
- package/dist/cjs/radio-button-group.cjs.entry.js +1 -1
- package/dist/cjs/radio-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/radio-button-group.entry.cjs.js.map +1 -1
- package/dist/cjs/textarea-component.cjs.entry.js +1 -1
- package/dist/cjs/textarea-component.cjs.entry.js.map +1 -1
- package/dist/cjs/textarea-component.entry.cjs.js.map +1 -1
- package/dist/cjs/{version-DUyFnawM.js → version-CwWnMgnL.js} +3 -3
- package/dist/cjs/{version-DUyFnawM.js.map → version-CwWnMgnL.js.map} +1 -1
- package/dist/collection/components/design-system/checkbox-component/checkbox-component.css +2 -0
- package/dist/collection/components/design-system/input-color-picker/input-color-picker.css +2 -0
- package/dist/collection/components/design-system/input-component/input-component.css +2 -0
- package/dist/collection/components/design-system/nylas-date-component/nylas-date-component.css +2 -0
- package/dist/collection/components/design-system/radio-button-group/radio-button-group.css +4 -0
- package/dist/collection/components/design-system/select-dropdown/select-dropdown.css +2 -0
- package/dist/collection/components/design-system/textarea-component/textarea-component.css +2 -0
- package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.css +2 -0
- package/dist/collection/components/scheduler-editor/nylas-booking-form-config/nylas-booking-form-config.css +2 -0
- package/dist/collection/components/scheduler-editor/nylas-event-description/nylas-event-description.css +2 -0
- package/dist/collection/components/scheduler-editor/nylas-event-title/nylas-event-title.css +2 -0
- package/dist/collection/version.js +1 -1
- package/dist/collection/version.js.map +1 -1
- package/dist/components/checkbox-component.js +1 -1
- package/dist/components/checkbox-group.js +1 -1
- package/dist/components/input-color-picker.js +1 -1
- package/dist/components/input-component.js +1 -1
- package/dist/components/input-image-url.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-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-cancel-booking-form.js +1 -1
- package/dist/components/nylas-confirmation-email.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-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-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-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-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 +46 -46
- package/dist/components/nylas-scheduling-method.js +1 -1
- package/dist/components/nylas-scheduling.js +11 -11
- package/dist/components/nylas-specific-time-availability-picker.js +1 -1
- package/dist/components/nylas-timeslot-interval.js +1 -1
- package/dist/components/{p-CdjkLYNh.js → p-1FY06fQD.js} +34 -34
- package/dist/components/{p-CdjkLYNh.js.map → p-1FY06fQD.js.map} +1 -1
- package/dist/components/{p-C1X9fzID.js → p-9PlaXlCB.js} +3 -3
- package/dist/components/{p-C1X9fzID.js.map → p-9PlaXlCB.js.map} +1 -1
- package/dist/components/{p-p2By8R7Z.js → p-B-xvNL5X.js} +3 -3
- package/dist/components/{p-p2By8R7Z.js.map → p-B-xvNL5X.js.map} +1 -1
- package/dist/components/{p-DZJAqRR0.js → p-B4C1SvsK.js} +3 -3
- package/dist/components/{p-DZJAqRR0.js.map → p-B4C1SvsK.js.map} +1 -1
- package/dist/components/{p-FyWR7wsG.js → p-B4WU6Ddk.js} +3 -3
- package/dist/components/{p-FyWR7wsG.js.map → p-B4WU6Ddk.js.map} +1 -1
- package/dist/components/{p-a4aWyy2J.js → p-BCNq-vH8.js} +4 -4
- package/dist/components/{p-a4aWyy2J.js.map → p-BCNq-vH8.js.map} +1 -1
- package/dist/components/{p-ClRazYdc.js → p-BGel3qwa.js} +4 -4
- package/dist/components/{p-ClRazYdc.js.map → p-BGel3qwa.js.map} +1 -1
- package/dist/components/{p-BMS02R_Z.js → p-BJ6nYqW1.js} +3 -3
- package/dist/components/{p-BMS02R_Z.js.map → p-BJ6nYqW1.js.map} +1 -1
- package/dist/components/{p-BA8j6G8I.js → p-BJHGQK2p.js} +3 -3
- package/dist/components/{p-BA8j6G8I.js.map → p-BJHGQK2p.js.map} +1 -1
- package/dist/components/{p-Di7xtAN8.js → p-BWgGjFXi.js} +3 -3
- package/dist/components/{p-Di7xtAN8.js.map → p-BWgGjFXi.js.map} +1 -1
- package/dist/components/{p-B4ta0tDN.js → p-BZ_muELE.js} +3 -3
- package/dist/components/{p-B4ta0tDN.js.map → p-BZ_muELE.js.map} +1 -1
- package/dist/components/{p-DDBe0PRD.js → p-B_ZbZ5lK.js} +3 -3
- package/dist/components/{p-DDBe0PRD.js.map → p-B_ZbZ5lK.js.map} +1 -1
- package/dist/components/{p-BBkyE1MS.js → p-BdQ9iWW4.js} +6 -6
- package/dist/components/{p-BBkyE1MS.js.map → p-BdQ9iWW4.js.map} +1 -1
- package/dist/components/{p-DDM3ZlW1.js → p-BdQA_uHk.js} +3 -3
- package/dist/components/{p-DDM3ZlW1.js.map → p-BdQA_uHk.js.map} +1 -1
- package/dist/components/{p-44_g1hcc.js → p-BeGM4wbq.js} +3 -3
- package/dist/components/{p-44_g1hcc.js.map → p-BeGM4wbq.js.map} +1 -1
- package/dist/components/{p-DM_4oTsI.js → p-BjynTcY9.js} +4 -4
- package/dist/components/{p-DM_4oTsI.js.map → p-BjynTcY9.js.map} +1 -1
- package/dist/components/{p-Bz1eTXD6.js → p-BsMclINV.js} +4 -4
- package/dist/components/{p-Bz1eTXD6.js.map → p-BsMclINV.js.map} +1 -1
- package/dist/components/{p-BdG2pZat.js → p-BvCTseDu.js} +5 -5
- package/dist/components/{p-BdG2pZat.js.map → p-BvCTseDu.js.map} +1 -1
- package/dist/components/{p-lLGrGYYy.js → p-C4s3qYGu.js} +3 -3
- package/dist/components/{p-lLGrGYYy.js.map → p-C4s3qYGu.js.map} +1 -1
- package/dist/components/{p-Dkp7GkzI.js → p-CEvUNENN.js} +3 -3
- package/dist/components/{p-Dkp7GkzI.js.map → p-CEvUNENN.js.map} +1 -1
- package/dist/components/{p-BJACsIxp.js → p-CHQ9sLls.js} +6 -6
- package/dist/components/{p-BJACsIxp.js.map → p-CHQ9sLls.js.map} +1 -1
- package/dist/components/{p-CXvH8gEB.js → p-CIm8sd7h.js} +4 -4
- package/dist/components/{p-CXvH8gEB.js.map → p-CIm8sd7h.js.map} +1 -1
- package/dist/components/{p-eMdkzfgI.js → p-CVnhRnUq.js} +6 -6
- package/dist/components/{p-eMdkzfgI.js.map → p-CVnhRnUq.js.map} +1 -1
- package/dist/components/{p-DzNdcHoB.js → p-CZllU8ii.js} +3 -3
- package/dist/components/{p-DzNdcHoB.js.map → p-CZllU8ii.js.map} +1 -1
- package/dist/components/{p-FGJR3D9_.js → p-Ci9dxGLY.js} +5 -5
- package/dist/components/{p-FGJR3D9_.js.map → p-Ci9dxGLY.js.map} +1 -1
- package/dist/components/{p-CfqEi00L.js → p-D13lTN27.js} +4 -4
- package/dist/components/{p-CfqEi00L.js.map → p-D13lTN27.js.map} +1 -1
- package/dist/components/{p-DsJUpcxE.js → p-DAr02cfd.js} +3 -3
- package/dist/components/{p-DsJUpcxE.js.map → p-DAr02cfd.js.map} +1 -1
- package/dist/components/{p-D0JQ_-Qx.js → p-DDceIF1-.js} +3 -3
- package/dist/components/{p-D0JQ_-Qx.js.map → p-DDceIF1-.js.map} +1 -1
- package/dist/components/{p-CowteGon.js → p-DICXD6Cy.js} +3 -3
- package/dist/components/{p-CowteGon.js.map → p-DICXD6Cy.js.map} +1 -1
- package/dist/components/{p-Dy7hoKyo.js → p-DMltEU-a.js} +4 -4
- package/dist/components/{p-Dy7hoKyo.js.map → p-DMltEU-a.js.map} +1 -1
- package/dist/components/{p-OADv0FUZ.js → p-DNm8Z4AY.js} +3 -3
- package/dist/components/{p-OADv0FUZ.js.map → p-DNm8Z4AY.js.map} +1 -1
- package/dist/components/{p-Dd9ZfJbD.js → p-DTF0fIhr.js} +3 -3
- package/dist/components/p-DTF0fIhr.js.map +1 -0
- package/dist/components/{p-6i8K_2Bl.js → p-DVTv2Hp1.js} +3 -3
- package/dist/components/{p-6i8K_2Bl.js.map → p-DVTv2Hp1.js.map} +1 -1
- package/dist/components/{p-DdroMDi7.js → p-DWCPI1lK.js} +3 -3
- package/dist/components/{p-DdroMDi7.js.map → p-DWCPI1lK.js.map} +1 -1
- package/dist/components/{p-P01mLKOx.js → p-Dary9zXr.js} +3 -3
- package/dist/components/{p-P01mLKOx.js.map → p-Dary9zXr.js.map} +1 -1
- package/dist/components/{p-BmXUSpFE.js → p-DgfDGATC.js} +3 -3
- package/dist/components/{p-BmXUSpFE.js.map → p-DgfDGATC.js.map} +1 -1
- package/dist/components/{p-pgYRW1Gn.js → p-Ey-jPikW.js} +3 -3
- package/dist/components/{p-pgYRW1Gn.js.map → p-Ey-jPikW.js.map} +1 -1
- package/dist/components/{p-BYAaHapV.js → p-FFI2InLT.js} +3 -3
- package/dist/components/{p-BYAaHapV.js.map → p-FFI2InLT.js.map} +1 -1
- package/dist/components/{p-C9c9Tc-Q.js → p-FrLX9pVa.js} +6 -6
- package/dist/components/{p-C9c9Tc-Q.js.map → p-FrLX9pVa.js.map} +1 -1
- package/dist/components/{p-EBvHC_aS.js → p-Gyins0o7.js} +9 -9
- package/dist/components/{p-EBvHC_aS.js.map → p-Gyins0o7.js.map} +1 -1
- package/dist/components/{p-Et75ok2y.js → p-MMkYQKuh.js} +3 -3
- package/dist/components/{p-Et75ok2y.js.map → p-MMkYQKuh.js.map} +1 -1
- package/dist/components/{p-ybLp3dGv.js → p-QKc1T_NS.js} +3 -3
- package/dist/components/{p-ybLp3dGv.js.map → p-QKc1T_NS.js.map} +1 -1
- package/dist/components/{p-D2DM2um3.js → p-UahFYa1w.js} +3 -3
- package/dist/components/{p-D2DM2um3.js.map → p-UahFYa1w.js.map} +1 -1
- package/dist/components/{p-Cqcd_0tY.js → p-cylqcpvp.js} +41 -41
- package/dist/components/{p-Cqcd_0tY.js.map → p-cylqcpvp.js.map} +1 -1
- package/dist/components/{p-kRlkh0g-.js → p-idvnK5Rl.js} +3 -3
- package/dist/components/{p-kRlkh0g-.js.map → p-idvnK5Rl.js.map} +1 -1
- package/dist/components/{p-Bho2Hb_A.js → p-keUQQIah.js} +4 -4
- package/dist/components/{p-Bho2Hb_A.js.map → p-keUQQIah.js.map} +1 -1
- package/dist/components/{p-DAAGx7-h.js → p-pLqfEMSB.js} +3 -3
- package/dist/components/{p-DAAGx7-h.js.map → p-pLqfEMSB.js.map} +1 -1
- package/dist/components/{p-BAZ-jMiz.js → p-pRwtuoW0.js} +4 -4
- package/dist/components/{p-BAZ-jMiz.js.map → p-pRwtuoW0.js.map} +1 -1
- package/dist/components/{p-CJ3feL4K.js → p-whoa2mmo.js} +14 -14
- package/dist/components/{p-CJ3feL4K.js.map → p-whoa2mmo.js.map} +1 -1
- package/dist/components/radio-button-group.js +1 -1
- package/dist/components/select-dropdown.js +1 -1
- package/dist/components/textarea-component.js +1 -1
- package/dist/components/time-period-selector.js +1 -1
- package/dist/esm/calendar-agenda-fill-icon_39.entry.js +1 -1
- package/dist/esm/calendar-agenda-fill-icon_39.entry.js.map +1 -1
- package/dist/esm/checkbox-component.entry.js +1 -1
- package/dist/esm/checkbox-component.entry.js.map +1 -1
- package/dist/esm/checkmark-icon_15.entry.js +3 -3
- package/dist/esm/checkmark-icon_15.entry.js.map +1 -1
- package/dist/esm/chevron-icon.search-icon.select-dropdown.entry.js.map +1 -1
- package/dist/esm/chevron-icon_3.entry.js +1 -1
- package/dist/esm/chevron-icon_3.entry.js.map +1 -1
- package/dist/esm/globe-icon.nylas-date-component.nylas-time-window-picker.entry.js.map +1 -1
- package/dist/esm/globe-icon_3.entry.js +1 -1
- package/dist/esm/globe-icon_3.entry.js.map +1 -1
- package/dist/esm/google-logo-icon_6.entry.js +1 -1
- package/dist/esm/input-component.entry.js +1 -1
- package/dist/esm/input-component.entry.js.map +1 -1
- package/dist/esm/nylas-booked-event-card_11.entry.js +1 -1
- package/dist/esm/nylas-booked-event-card_11.entry.js.map +1 -1
- package/dist/esm/nylas-scheduler-editor.entry.js +1 -1
- package/dist/esm/nylas-scheduling.entry.js +1 -1
- package/dist/esm/radio-button-group.entry.js +1 -1
- package/dist/esm/radio-button-group.entry.js.map +1 -1
- package/dist/esm/textarea-component.entry.js +1 -1
- package/dist/esm/textarea-component.entry.js.map +1 -1
- package/dist/esm/{version-BxqBxG4o.js → version-DM0y_1NQ.js} +3 -3
- package/dist/esm/{version-BxqBxG4o.js.map → version-DM0y_1NQ.js.map} +1 -1
- package/dist/nylas-web-elements/checkbox-component.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/chevron-icon.search-icon.select-dropdown.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/globe-icon.nylas-date-component.nylas-time-window-picker.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/input-component.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-web-elements.esm.js +1 -1
- package/dist/nylas-web-elements/p-23df6f78.entry.js +8 -0
- package/dist/nylas-web-elements/p-23df6f78.entry.js.map +1 -0
- package/dist/nylas-web-elements/p-34c4bf5b.entry.js +2 -0
- package/dist/nylas-web-elements/{p-2bff143d.entry.js.map → p-34c4bf5b.entry.js.map} +1 -1
- package/dist/nylas-web-elements/p-52a66db6.entry.js +2 -0
- package/dist/nylas-web-elements/{p-1ba901b1.entry.js.map → p-52a66db6.entry.js.map} +1 -1
- package/dist/nylas-web-elements/p-5b01e519.entry.js +2 -0
- package/dist/nylas-web-elements/p-5b01e519.entry.js.map +1 -0
- package/dist/nylas-web-elements/p-9a5b1cfb.entry.js +2 -0
- package/dist/nylas-web-elements/{p-ab80b127.entry.js.map → p-9a5b1cfb.entry.js.map} +1 -1
- package/dist/nylas-web-elements/p-9c264d62.entry.js +2 -0
- package/dist/nylas-web-elements/{p-7655eeb0.entry.js.map → p-9c264d62.entry.js.map} +1 -1
- package/dist/nylas-web-elements/p-DM0y_1NQ.js +2 -0
- package/dist/nylas-web-elements/{p-BxqBxG4o.js.map → p-DM0y_1NQ.js.map} +1 -1
- package/dist/nylas-web-elements/p-b0306d35.entry.js +2 -0
- package/dist/nylas-web-elements/{p-70762abf.entry.js.map → p-b0306d35.entry.js.map} +1 -1
- package/dist/nylas-web-elements/{p-9c78baa7.entry.js → p-b2c497eb.entry.js} +2 -2
- package/dist/nylas-web-elements/p-b2c497eb.entry.js.map +1 -0
- package/dist/nylas-web-elements/{p-70614faf.entry.js → p-b90acc64.entry.js} +2 -2
- package/dist/nylas-web-elements/p-c91eb1ba.entry.js +2 -0
- package/dist/nylas-web-elements/{p-e042747e.entry.js.map → p-c91eb1ba.entry.js.map} +1 -1
- package/dist/nylas-web-elements/{p-2d23ef5e.entry.js → p-daf5083c.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-428a7363.entry.js → p-dbad0a98.entry.js} +2 -2
- package/dist/nylas-web-elements/radio-button-group.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/textarea-component.entry.esm.js.map +1 -1
- package/dist/types/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/p-Dd9ZfJbD.js.map +0 -1
- package/dist/nylas-web-elements/p-1ba901b1.entry.js +0 -2
- package/dist/nylas-web-elements/p-2bff143d.entry.js +0 -2
- package/dist/nylas-web-elements/p-70762abf.entry.js +0 -2
- package/dist/nylas-web-elements/p-7655eeb0.entry.js +0 -2
- package/dist/nylas-web-elements/p-88112606.entry.js +0 -8
- package/dist/nylas-web-elements/p-88112606.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-9c78baa7.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-BxqBxG4o.js +0 -2
- package/dist/nylas-web-elements/p-ab80b127.entry.js +0 -2
- package/dist/nylas-web-elements/p-e042747e.entry.js +0 -2
- package/dist/nylas-web-elements/p-e82826b8.entry.js +0 -2
- package/dist/nylas-web-elements/p-e82826b8.entry.js.map +0 -1
- /package/dist/nylas-web-elements/{p-70614faf.entry.js.map → p-b90acc64.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-2d23ef5e.entry.js.map → p-daf5083c.entry.js.map} +0 -0
- /package/dist/nylas-web-elements/{p-428a7363.entry.js.map → p-dbad0a98.entry.js.map} +0 -0
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, e as createEvent, h } from './p-Bht9ktsW.js
|
|
|
2
2
|
import { d as defineCustomElement$2 } from './p-BaI67hQ_.js';
|
|
3
3
|
import { d as defineCustomElement$1 } from './p-BGfs-kGd.js';
|
|
4
4
|
|
|
5
|
-
const selectDropdownCss = ":host{display:block;position:relative;--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%}@media screen and (max-width: 768px){:host{position:unset}}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)}.dropdown{display:inline-block;width:inherit}.dropbtn{color:var(--nylas-base-800);padding:14px;font-size:16px;font-family:var(--nylas-font-family);cursor:pointer;display:flex;justify-content:space-between;gap:0.5rem;background:var(--nylas-base-0);border:1px solid var(--nylas-base-300);border-radius:var(--nylas-border-radius-2x)}.dropbtn.error{border:1px solid var(--nylas-error)}.dropbtn:hover,.dropbtn:active{outline:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn:disabled{cursor:not-allowed;background:var(--nylas-base-100)}.dropbtn span.chevron{display:flex;align-self:center}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropbtn span.selected-option{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:144px;font-size:14px;line-height:20px;color:inherit}@media screen and (max-width: 768px){.dropbtn span.selected-option{max-width:124px;font-size:16px}}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1);scrollbar-width:thin;scrollbar-color:var(--nylas-base-300) var(--nylas-base-50)}.dropdown-content::-webkit-scrollbar{width:8px}.dropdown-content::-webkit-scrollbar-track{background:var(--nylas-base-50);border-radius:4px}.dropdown-content::-webkit-scrollbar-thumb{background:var(--nylas-base-300);border-radius:4px;transition:background-color 0.2s ease}.dropdown-content::-webkit-scrollbar-thumb:hover{background:var(--nylas-base-400)}.dropdown-content::-webkit-scrollbar-thumb:active{background:var(--nylas-base-500)}@media screen and (max-width: 768px){.dropdown-content{right:0;width:325px;max-width:unset}}.search-box{border-bottom:1px solid var(--nylas-base-200);padding:10px;position:sticky;top:0;background:var(--nylas-base-0)}.search-box .icon{position:absolute;top:1.25rem;left:1.25rem;color:var(--nylas-base-300)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:var(--nylas-base-900);padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content .selected{background-color:#e7e7e7}input[type=text]{width:-webkit-fill-available;padding:inherit;border:1px solid var(--nylas-base-200);border-radius:4px;position:sticky;background:no-repeat scroll 7px 7px;padding-left:30px;background-size:16px 16px;color:var(--nylas-base-800)}";
|
|
5
|
+
const selectDropdownCss = ":host{display:block;position:relative;--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%}@media screen and (max-width: 768px){:host{position:unset}}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;word-break:break-word;overflow-wrap:break-word;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)}.dropdown{display:inline-block;width:inherit}.dropbtn{color:var(--nylas-base-800);padding:14px;font-size:16px;font-family:var(--nylas-font-family);cursor:pointer;display:flex;justify-content:space-between;gap:0.5rem;background:var(--nylas-base-0);border:1px solid var(--nylas-base-300);border-radius:var(--nylas-border-radius-2x)}.dropbtn.error{border:1px solid var(--nylas-error)}.dropbtn:hover,.dropbtn:active{outline:1px solid var(--nylas-primary)}.dropbtn:active{outline:2px solid var(--nylas-primary)}.dropbtn:disabled{cursor:not-allowed;background:var(--nylas-base-100)}.dropbtn span.chevron{display:flex;align-self:center}.dropbtn span.open{transform:rotate(90deg)}.dropbtn span.closed{transform:rotate(270deg)}.dropbtn span.selected-option{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:144px;font-size:14px;line-height:20px;color:inherit}@media screen and (max-width: 768px){.dropbtn span.selected-option{max-width:124px;font-size:16px}}.dropdown-content{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1);scrollbar-width:thin;scrollbar-color:var(--nylas-base-300) var(--nylas-base-50)}.dropdown-content::-webkit-scrollbar{width:8px}.dropdown-content::-webkit-scrollbar-track{background:var(--nylas-base-50);border-radius:4px}.dropdown-content::-webkit-scrollbar-thumb{background:var(--nylas-base-300);border-radius:4px;transition:background-color 0.2s ease}.dropdown-content::-webkit-scrollbar-thumb:hover{background:var(--nylas-base-400)}.dropdown-content::-webkit-scrollbar-thumb:active{background:var(--nylas-base-500)}@media screen and (max-width: 768px){.dropdown-content{right:0;width:325px;max-width:unset}}.search-box{border-bottom:1px solid var(--nylas-base-200);padding:10px;position:sticky;top:0;background:var(--nylas-base-0)}.search-box .icon{position:absolute;top:1.25rem;left:1.25rem;color:var(--nylas-base-300)}.dropdown-content ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.dropdown-content ul li{padding:16px, 12px, 16px, 12px;color:var(--nylas-base-900);padding:12px 16px;text-decoration:none;display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;text-align:left;cursor:pointer}.dropdown-content ul li:hover,.dropdown-content ul li:focus{background-color:var(--nylas-base-100)}.dropdown-content .selected{background-color:#e7e7e7}input[type=text]{width:-webkit-fill-available;padding:inherit;border:1px solid var(--nylas-base-200);border-radius:4px;position:sticky;background:no-repeat scroll 7px 7px;padding-left:30px;background-size:16px 16px;color:var(--nylas-base-800)}";
|
|
6
6
|
|
|
7
7
|
const SelectDropdown = proxyCustomElement(class SelectDropdown extends H {
|
|
8
8
|
constructor() {
|
|
@@ -278,6 +278,6 @@ function defineCustomElement() {
|
|
|
278
278
|
}
|
|
279
279
|
|
|
280
280
|
export { SelectDropdown as S, defineCustomElement as d };
|
|
281
|
-
//# sourceMappingURL=p-
|
|
281
|
+
//# sourceMappingURL=p-idvnK5Rl.js.map
|
|
282
282
|
|
|
283
|
-
//# sourceMappingURL=p-
|
|
283
|
+
//# sourceMappingURL=p-idvnK5Rl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-kRlkh0g-.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/design-system/select-dropdown/select-dropdown.scss?tag=select-dropdown&encapsulation=shadow","src/components/design-system/select-dropdown/select-dropdown.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n display: block;\n position: relative;\n @include default-css-variables;\n width: 100%;\n\n @media #{$mobile} {\n position: unset;\n }\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.dropdown {\n display: inline-block;\n width: inherit;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 14px;\n font-size: 16px;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n gap: 0.5rem;\n background: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-300);\n border-radius: var(--nylas-border-radius-2x);\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n\n &:hover,\n &:active {\n outline: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n\n span {\n &.chevron {\n display: flex;\n align-self: center;\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.selected-option {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 144px;\n font-size: 14px;\n line-height: 20px;\n color: inherit;\n\n @media #{$mobile} {\n max-width: 124px;\n font-size: 16px;\n }\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n\n // Firefox scrollbar styling\n scrollbar-width: thin;\n scrollbar-color: var(--nylas-base-300) var(--nylas-base-50);\n\n // Custom scrollbar styling\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: var(--nylas-base-50);\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--nylas-base-300);\n border-radius: 4px;\n transition: background-color 0.2s ease;\n\n &:hover {\n background: var(--nylas-base-400);\n }\n }\n\n &::-webkit-scrollbar-thumb:active {\n background: var(--nylas-base-500);\n }\n\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n}\n\n.search-box {\n border-bottom: 1px solid var(--nylas-base-200);\n padding: 10px;\n position: sticky;\n top: 0;\n background: var(--nylas-base-0);\n\n .icon {\n position: absolute;\n top: 1.25rem;\n left: 1.25rem;\n color: var(--nylas-base-300);\n }\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n }\n}\n\n.dropdown-content .selected {\n background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n width: -webkit-fill-available;\n padding: inherit;\n border: 1px solid var(--nylas-base-200);\n border-radius: 4px;\n position: sticky;\n background: no-repeat scroll 7px 7px;\n padding-left: 30px;\n background-size: 16px 16px;\n color: var(--nylas-base-800);\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\n\n/**\n * The `select-dropdown` component is a dropdown that allows users to select an option from a list of options.\n * This component is used in the scheduling form to input dropdown type inputs.\n * @part sd_dropdown - The dropdown container\n * @part sd_dropdown-button - The dropdown button\n * @part sd_dropdown-button-selected-label - The selected option label\n * @part sd_dropdown-content - The dropdown content\n * @part sd_dropdown_label - The dropdown label\n */\n@Component({\n tag: 'select-dropdown',\n styleUrl: 'select-dropdown.scss',\n shadow: true,\n})\nexport class SelectDropdown {\n @Element() el!: HTMLElement;\n private readonly componentType: string = 'select-dropdown';\n\n private inputRef?: HTMLInputElement;\n\n // Props\n /**\n * The name of the dropdown\n */\n @Prop({ reflect: true }) name!: string;\n /**\n * The options to display in the dropdown\n */\n @Prop() options: DropdownOption[] = [];\n /**\n * The default selected option\n */\n @Prop({ attribute: 'default-selected-option' }) defaultSelectedOption: DropdownOption | null = null;\n /**\n * Should show search input\n */\n @Prop() withSearch: boolean = true;\n\n /**\n * The placeholder for the search input\n */\n @Prop() searchPlaceholder: string = 'Search';\n\n /**\n * The label for the dropdown, skipped if no label is provided\n */\n @Prop() label?: string;\n\n /**\n * If true, the dropdown is required for form submission\n */\n @Prop() required: boolean = false;\n\n /**\n * The property to make the dropdown read-only. If true, the dropdown cannot be edited.\n */\n @Prop() readOnly: boolean = false;\n\n /**\n * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n */\n @Prop() pluralizedLabel: string = '';\n /**\n * Overrides the select dropdown to be used as a button with dropdownButtonText representing actions & dropdownText name on the dropdown intead of selected value\n */\n @Prop() dropdownButtonText?: string;\n /**\n * Should show chevron on button\n */\n @Prop() withChevron: boolean = true;\n /**\n * Allows to set the empty value of the dropdown\n */\n @Prop() emptyValue: string = 'Select an option'; // Default empty value\n /**\n * The custom error message to display when the value is empty or null and the dropdown is required\n */\n @Prop() errorMessage: string = '';\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n // States\n /**\n * The selected option\n */\n @State() selectedOption!: DropdownOption | null;\n /**\n * The open state of the dropdown\n */\n @State() isOpen: boolean = false;\n /**\n * The search value for the dropdown\n */\n @State() searchValue: string = '';\n /**\n * The filtered options based on the search value\n */\n @State() filteredOptions: DropdownOption[] = [...this.options];\n /**\n * The aria-activedescendant attribute for the listbox element to indicate the currently active\n * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n * the active option.\n */\n @State() ariaActivedescendant: string = '';\n\n /**\n * The error message to display when the value is empty or null and the dropdown is required\n */\n @State() error: string = '';\n\n // Events\n /**\n * This event is fired when the selected option is changed\n */\n @Event({ bubbles: true, composed: true }) nylasFormDropdownChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n /**\n * This event is fired when the default selected option is set, on component load\n */\n @Event({ bubbles: true, composed: true }) nylasFormDropdownDefaultSelected!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = newValue;\n }\n\n @Watch('defaultSelectedOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (typeof newValue === 'undefined' || newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n this.nylasFormDropdownDefaultSelected.emit({\n value: newValue?.value || '',\n name: this.name,\n error: this.error,\n label: this.label,\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 // Lifecycle methods\n connectedCallback() {\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.el.setAttribute('data-themed', '');\n }\n });\n }\n\n componentWillLoad() {\n this.el.setAttribute('component-type', this.componentType);\n this.filteredOptions = this.options;\n // Set the selected option to the first option if no option is selected\n this.selectedOption = this.defaultSelectedOption;\n\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\n }\n }\n\n componentDidLoad() {\n this.nylasFormDropdownDefaultSelected.emit({\n value: this.selectedOption?.value || '',\n name: this.name,\n error: this.error,\n label: this.label,\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.selectedOption?.value || '');\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /**\n * Listen for the formSubmitted event to validate the input value when the form is submitted.\n * @param event\n */\n @Listen('formSubmitted', { target: 'document' })\n handleFormSubmitted(event: CustomEvent) {\n this.validate(this.selectedOption?.value || '');\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage || `${this.label} is required.`;\n } else {\n this.error = '';\n }\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n filterOptions(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.searchValue = value;\n this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(value.toLowerCase()));\n }\n\n selectOption(option: DropdownOption): void {\n this.error = '';\n this.selectedOption = option;\n this.toggleDropdown();\n if (option.value !== this.emptyValue) {\n this.nylasFormDropdownChanged.emit({\n value: option.value,\n name: this.name,\n error: this.error,\n label: this.label,\n });\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n this.inputRef?.focus();\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e) {\n const items = this.filteredOptions; // Assuming this is the array of your current filtered options\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === items.length - 1) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === 0) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n } else if (e.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n focusOption(index) {\n const option = this.filteredOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' || (event.key == 'Tab' && !event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[0].value;\n this.focusOption(0);\n } else if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n this.focusOption(this.filteredOptions.length - 1);\n } else if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n generateButtonText(option: DropdownOption | null, dropButtonText?: string): string {\n if (dropButtonText) {\n return dropButtonText;\n }\n return option?.label ? `${this.pluralizedLabel ? this.pluralizedLabel : option?.label}` : this.emptyValue;\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n render() {\n const buttonText = this.generateButtonText(this.selectedOption, this.dropdownButtonText);\n return (\n <div class=\"dropdown\" part=\"sd_dropdown\">\n <label part=\"sd_dropdown_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 <button\n part=\"sd_dropdown-button\"\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n aria-haspopup=\"listbox\"\n title={this.readOnly ? 'read-only field' : buttonText}\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"sd_dropdown-button-selected-label\">\n {buttonText}\n </span>\n {this.withChevron && (\n <span\n class={{\n open: this.isOpen,\n closed: !this.isOpen,\n chevron: true,\n }}\n aria-hidden=\"true\"\n >\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n )}\n </button>\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"sd_dropdown-content\">\n {this.withSearch && (\n <div class={{ 'search-box': true, 'open': this.isOpen }}>\n <search-icon width=\"15\" height=\"15\" class={'icon'} />\n <input\n type=\"text\"\n role=\"combobox\"\n placeholder={this.searchPlaceholder}\n value={this.searchValue}\n ref={el => (this.inputRef = el)}\n onInput={event => this.filterOptions(event)}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n />\n </div>\n )}\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.filteredOptions.map(option =>\n option.value.toString() ? (\n <li tabindex=\"0\" key={option.value} id={option.value} part={`${this.name}-${option.label}`} onClick={() => this.selectOption(option)} role=\"option\">\n {option.labelHTML ? <div part=\"sd_dropdown-labelhtml\">{option.labelHTML}</div> : option.label}\n </li>\n ) : null,\n )}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-idvnK5Rl.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/design-system/select-dropdown/select-dropdown.scss?tag=select-dropdown&encapsulation=shadow","src/components/design-system/select-dropdown/select-dropdown.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n display: block;\n position: relative;\n @include default-css-variables;\n width: 100%;\n\n @media #{$mobile} {\n position: unset;\n }\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.dropdown {\n display: inline-block;\n width: inherit;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 14px;\n font-size: 16px;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n gap: 0.5rem;\n background: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-300);\n border-radius: var(--nylas-border-radius-2x);\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n\n &:hover,\n &:active {\n outline: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n\n span {\n &.chevron {\n display: flex;\n align-self: center;\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.selected-option {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 144px;\n font-size: 14px;\n line-height: 20px;\n color: inherit;\n\n @media #{$mobile} {\n max-width: 124px;\n font-size: 16px;\n }\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n\n // Firefox scrollbar styling\n scrollbar-width: thin;\n scrollbar-color: var(--nylas-base-300) var(--nylas-base-50);\n\n // Custom scrollbar styling\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: var(--nylas-base-50);\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--nylas-base-300);\n border-radius: 4px;\n transition: background-color 0.2s ease;\n\n &:hover {\n background: var(--nylas-base-400);\n }\n }\n\n &::-webkit-scrollbar-thumb:active {\n background: var(--nylas-base-500);\n }\n\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n}\n\n.search-box {\n border-bottom: 1px solid var(--nylas-base-200);\n padding: 10px;\n position: sticky;\n top: 0;\n background: var(--nylas-base-0);\n\n .icon {\n position: absolute;\n top: 1.25rem;\n left: 1.25rem;\n color: var(--nylas-base-300);\n }\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n }\n}\n\n.dropdown-content .selected {\n background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n width: -webkit-fill-available;\n padding: inherit;\n border: 1px solid var(--nylas-base-200);\n border-radius: 4px;\n position: sticky;\n background: no-repeat scroll 7px 7px;\n padding-left: 30px;\n background-size: 16px 16px;\n color: var(--nylas-base-800);\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\n\n/**\n * The `select-dropdown` component is a dropdown that allows users to select an option from a list of options.\n * This component is used in the scheduling form to input dropdown type inputs.\n * @part sd_dropdown - The dropdown container\n * @part sd_dropdown-button - The dropdown button\n * @part sd_dropdown-button-selected-label - The selected option label\n * @part sd_dropdown-content - The dropdown content\n * @part sd_dropdown_label - The dropdown label\n */\n@Component({\n tag: 'select-dropdown',\n styleUrl: 'select-dropdown.scss',\n shadow: true,\n})\nexport class SelectDropdown {\n @Element() el!: HTMLElement;\n private readonly componentType: string = 'select-dropdown';\n\n private inputRef?: HTMLInputElement;\n\n // Props\n /**\n * The name of the dropdown\n */\n @Prop({ reflect: true }) name!: string;\n /**\n * The options to display in the dropdown\n */\n @Prop() options: DropdownOption[] = [];\n /**\n * The default selected option\n */\n @Prop({ attribute: 'default-selected-option' }) defaultSelectedOption: DropdownOption | null = null;\n /**\n * Should show search input\n */\n @Prop() withSearch: boolean = true;\n\n /**\n * The placeholder for the search input\n */\n @Prop() searchPlaceholder: string = 'Search';\n\n /**\n * The label for the dropdown, skipped if no label is provided\n */\n @Prop() label?: string;\n\n /**\n * If true, the dropdown is required for form submission\n */\n @Prop() required: boolean = false;\n\n /**\n * The property to make the dropdown read-only. If true, the dropdown cannot be edited.\n */\n @Prop() readOnly: boolean = false;\n\n /**\n * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n */\n @Prop() pluralizedLabel: string = '';\n /**\n * Overrides the select dropdown to be used as a button with dropdownButtonText representing actions & dropdownText name on the dropdown intead of selected value\n */\n @Prop() dropdownButtonText?: string;\n /**\n * Should show chevron on button\n */\n @Prop() withChevron: boolean = true;\n /**\n * Allows to set the empty value of the dropdown\n */\n @Prop() emptyValue: string = 'Select an option'; // Default empty value\n /**\n * The custom error message to display when the value is empty or null and the dropdown is required\n */\n @Prop() errorMessage: string = '';\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n // States\n /**\n * The selected option\n */\n @State() selectedOption!: DropdownOption | null;\n /**\n * The open state of the dropdown\n */\n @State() isOpen: boolean = false;\n /**\n * The search value for the dropdown\n */\n @State() searchValue: string = '';\n /**\n * The filtered options based on the search value\n */\n @State() filteredOptions: DropdownOption[] = [...this.options];\n /**\n * The aria-activedescendant attribute for the listbox element to indicate the currently active\n * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n * the active option.\n */\n @State() ariaActivedescendant: string = '';\n\n /**\n * The error message to display when the value is empty or null and the dropdown is required\n */\n @State() error: string = '';\n\n // Events\n /**\n * This event is fired when the selected option is changed\n */\n @Event({ bubbles: true, composed: true }) nylasFormDropdownChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n /**\n * This event is fired when the default selected option is set, on component load\n */\n @Event({ bubbles: true, composed: true }) nylasFormDropdownDefaultSelected!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = newValue;\n }\n\n @Watch('defaultSelectedOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (typeof newValue === 'undefined' || newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n this.nylasFormDropdownDefaultSelected.emit({\n value: newValue?.value || '',\n name: this.name,\n error: this.error,\n label: this.label,\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 // Lifecycle methods\n connectedCallback() {\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.el.setAttribute('data-themed', '');\n }\n });\n }\n\n componentWillLoad() {\n this.el.setAttribute('component-type', this.componentType);\n this.filteredOptions = this.options;\n // Set the selected option to the first option if no option is selected\n this.selectedOption = this.defaultSelectedOption;\n\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\n }\n }\n\n componentDidLoad() {\n this.nylasFormDropdownDefaultSelected.emit({\n value: this.selectedOption?.value || '',\n name: this.name,\n error: this.error,\n label: this.label,\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.selectedOption?.value || '');\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /**\n * Listen for the formSubmitted event to validate the input value when the form is submitted.\n * @param event\n */\n @Listen('formSubmitted', { target: 'document' })\n handleFormSubmitted(event: CustomEvent) {\n this.validate(this.selectedOption?.value || '');\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage || `${this.label} is required.`;\n } else {\n this.error = '';\n }\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n filterOptions(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.searchValue = value;\n this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(value.toLowerCase()));\n }\n\n selectOption(option: DropdownOption): void {\n this.error = '';\n this.selectedOption = option;\n this.toggleDropdown();\n if (option.value !== this.emptyValue) {\n this.nylasFormDropdownChanged.emit({\n value: option.value,\n name: this.name,\n error: this.error,\n label: this.label,\n });\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n this.inputRef?.focus();\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e) {\n const items = this.filteredOptions; // Assuming this is the array of your current filtered options\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === items.length - 1) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === 0) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n } else if (e.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n focusOption(index) {\n const option = this.filteredOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' || (event.key == 'Tab' && !event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[0].value;\n this.focusOption(0);\n } else if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n this.focusOption(this.filteredOptions.length - 1);\n } else if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n generateButtonText(option: DropdownOption | null, dropButtonText?: string): string {\n if (dropButtonText) {\n return dropButtonText;\n }\n return option?.label ? `${this.pluralizedLabel ? this.pluralizedLabel : option?.label}` : this.emptyValue;\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n render() {\n const buttonText = this.generateButtonText(this.selectedOption, this.dropdownButtonText);\n return (\n <div class=\"dropdown\" part=\"sd_dropdown\">\n <label part=\"sd_dropdown_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 <button\n part=\"sd_dropdown-button\"\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n aria-haspopup=\"listbox\"\n title={this.readOnly ? 'read-only field' : buttonText}\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"sd_dropdown-button-selected-label\">\n {buttonText}\n </span>\n {this.withChevron && (\n <span\n class={{\n open: this.isOpen,\n closed: !this.isOpen,\n chevron: true,\n }}\n aria-hidden=\"true\"\n >\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n )}\n </button>\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"sd_dropdown-content\">\n {this.withSearch && (\n <div class={{ 'search-box': true, 'open': this.isOpen }}>\n <search-icon width=\"15\" height=\"15\" class={'icon'} />\n <input\n type=\"text\"\n role=\"combobox\"\n placeholder={this.searchPlaceholder}\n value={this.searchValue}\n ref={el => (this.inputRef = el)}\n onInput={event => this.filterOptions(event)}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n />\n </div>\n )}\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.filteredOptions.map(option =>\n option.value.toString() ? (\n <li tabindex=\"0\" key={option.value} id={option.value} part={`${this.name}-${option.label}`} onClick={() => this.selectOption(option)} role=\"option\">\n {option.labelHTML ? <div part=\"sd_dropdown-labelhtml\">{option.labelHTML}</div> : option.label}\n </li>\n ) : null,\n )}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -5,8 +5,8 @@ import { d as defineCustomElement$7 } from './p-BaI67hQ_.js';
|
|
|
5
5
|
import { d as defineCustomElement$6 } from './p-DAvS1ihh.js';
|
|
6
6
|
import { d as defineCustomElement$5 } from './p-Dng-gcge.js';
|
|
7
7
|
import { d as defineCustomElement$4 } from './p-BGfs-kGd.js';
|
|
8
|
-
import { d as defineCustomElement$3 } from './p-
|
|
9
|
-
import { d as defineCustomElement$2 } from './p-
|
|
8
|
+
import { d as defineCustomElement$3 } from './p-idvnK5Rl.js';
|
|
9
|
+
import { d as defineCustomElement$2 } from './p-FFI2InLT.js';
|
|
10
10
|
import { d as defineCustomElement$1 } from './p-Hj9jbKPX.js';
|
|
11
11
|
|
|
12
12
|
const nylasLimitFutureBookingsCss = ":host{--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}.nylas-limit-future-bookings{display:flex;justify-content:space-between;font-family:var(--nylas-font-family)}@media screen and (max-width: 768px){.nylas-limit-future-bookings{flex-direction:column;gap:0.5rem}}.nylas-limit-future-bookings label{display:flex;align-items:center;color:var(--nylas-base-800);font-size:16px;font-style:normal;font-weight:400;line-height:150%;}.nylas-limit-future-bookings label span.label-icon{margin-left:4px}.nylas-limit-future-bookings label span.label-icon tooltip-component{display:flex}select-dropdown::part(sd_dropdown-button){border:none}";
|
|
@@ -221,6 +221,6 @@ function defineCustomElement() {
|
|
|
221
221
|
}
|
|
222
222
|
|
|
223
223
|
export { NylasLimitFutureBookings as N, defineCustomElement as d };
|
|
224
|
-
//# sourceMappingURL=p-
|
|
224
|
+
//# sourceMappingURL=p-keUQQIah.js.map
|
|
225
225
|
|
|
226
|
-
//# sourceMappingURL=p-
|
|
226
|
+
//# sourceMappingURL=p-keUQQIah.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-Bho2Hb_A.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.scss?tag=nylas-limit-future-bookings&encapsulation=shadow","src/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n @include default-css-variables;\n}\n\n.nylas-limit-future-bookings {\n display: flex;\n justify-content: space-between;\n font-family: var(--nylas-font-family);\n @media #{$mobile} {\n flex-direction: column;\n gap: 0.5rem;\n }\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px */\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n}\n\nselect-dropdown::part(sd_dropdown-button) {\n border: none;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-limit-future-bookings` component is a form input for the number of days in the future a guest is allowed to book an event.\n *\n * @part nlfb - The limit future bookings container\n * @part nlfb__number-dropdown - The number dropdown container\n * @part nlfb__number-dropdown-button - The number dropdown button\n * @part nlfb__number-dropdown-content - The number dropdown content\n * @part nlfb__period-dropdown - The period dropdown container\n * @part nlfb__period-dropdown-button - The period dropdown button\n * @part nlfb__period-dropdown-content - The period dropdown content\n */\n@Component({\n tag: 'nylas-limit-future-bookings',\n styleUrl: 'nylas-limit-future-bookings.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasLimitFutureBookings {\n /**\n * The host element <nylas-limit-future-bookings>\n */\n @Element() host!: HTMLElement;\n /**\n * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The number of days into the future that invitees will see availability, as set in the configuration.\n */\n @Prop() availableDaysInFuture?: number;\n /**\n * @standalone\n * The name of the limit future bookings input.\n */\n @Prop() name: string = 'limit-future-bookings';\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 * The selected number for the available days in the future.\n */\n @State() selectedNumber;\n /**\n * The selected period for the available days in the future.\n */\n @State() selectedPeriod;\n\n /**\n * The element internals.\n */\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-limit-future-bookings', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newVal: Configuration) {\n const daysInFuture = newVal?.scheduler?.available_days_in_future || this.availableDaysInFuture || 1;\n if (daysInFuture) {\n this.updateNumberAndPeriodFromDays(daysInFuture);\n }\n if (typeof this.internals.setFormValue !== 'function') {\n return;\n }\n this.internals.setFormValue(daysInFuture?.toString(), this.name);\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 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 /**\n * Event emitted when the future booking limit changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-limit-future-bookings', 'connectedCallback');\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.host.setAttribute('data-themed', '');\n }\n });\n }\n\n componentWillLoad() {\n debug('nylas-limit-future-bookings', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-limit-future-bookings', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.updateNumberAndPeriodFromDays(this.availableDaysInFuture || 1);\n }\n }\n\n disconnectedCallback() {\n debug('nylas-limit-future-bookings', 'disconnectedCallback');\n }\n\n @Listen('timePeriodChanged')\n timePeriodChangedHandler(\n event: CustomEvent<{\n number: number;\n period: string;\n }>,\n ) {\n const { number, period } = event.detail;\n let availableDaysInFuture;\n if (period === 'day') {\n availableDaysInFuture = number;\n } else if (period === 'week') {\n availableDaysInFuture = number * 7;\n } else {\n availableDaysInFuture = number * 30;\n }\n this.valueChanged.emit({ value: availableDaysInFuture, name: this.name });\n if (typeof this.internals.setFormValue !== 'function') {\n return;\n }\n this.internals.setFormValue(availableDaysInFuture.toString(), this.name);\n }\n\n updateNumberAndPeriodFromDays(days: number): void {\n let number, period;\n if (days >= 30 && days % 30 === 0) {\n number = days / 30;\n period = 'month';\n } else if (days >= 7 && days % 7 === 0) {\n number = days / 7;\n period = 'week';\n } else {\n number = days;\n period = 'day';\n }\n this.selectedNumber = number;\n this.selectedPeriod = period;\n }\n\n @RegisterComponent<NylasLimitFutureBookings, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-limit-future-bookings',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const showTImePeriodSelector = typeof this.selectedNumber == 'number' && typeof this.selectedPeriod == 'string';\n return (\n <Host>\n <div class=\"nylas-limit-future-bookings\" part=\"nlfb\">\n <label>\n {i18next.t('nylasLimitFutureBookings.headerTitle')}\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{i18next.t('nylasLimitFutureBookings.tooltip.desc')}</span>\n </tooltip-component>\n </span>\n </label>\n {showTImePeriodSelector && (\n <time-period-selector\n id=\"limit-future-bookings\"\n timePeriods={[\n { value: 'day', label: i18next.t('timePeriod', { context: 'day' }) },\n { value: 'week', label: i18next.t('timePeriod', { context: 'week' }) },\n { value: 'month', label: i18next.t('timePeriod', { context: 'month' }) },\n ]}\n exportparts=\"tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content\"\n defaultSelectedNumber={this.selectedNumber}\n defaultSelectedPeriod={this.selectedPeriod}\n themeConfig={this.themeConfig}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-keUQQIah.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.scss?tag=nylas-limit-future-bookings&encapsulation=shadow","src/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n @include default-css-variables;\n}\n\n.nylas-limit-future-bookings {\n display: flex;\n justify-content: space-between;\n font-family: var(--nylas-font-family);\n @media #{$mobile} {\n flex-direction: column;\n gap: 0.5rem;\n }\n label {\n display: flex;\n align-items: center;\n color: var(--nylas-base-800);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 150%; /* 21px */\n span.label-icon {\n margin-left: 4px;\n tooltip-component {\n display: flex;\n }\n }\n }\n}\n\nselect-dropdown::part(sd_dropdown-button) {\n border: none;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-limit-future-bookings` component is a form input for the number of days in the future a guest is allowed to book an event.\n *\n * @part nlfb - The limit future bookings container\n * @part nlfb__number-dropdown - The number dropdown container\n * @part nlfb__number-dropdown-button - The number dropdown button\n * @part nlfb__number-dropdown-content - The number dropdown content\n * @part nlfb__period-dropdown - The period dropdown container\n * @part nlfb__period-dropdown-button - The period dropdown button\n * @part nlfb__period-dropdown-content - The period dropdown content\n */\n@Component({\n tag: 'nylas-limit-future-bookings',\n styleUrl: 'nylas-limit-future-bookings.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasLimitFutureBookings {\n /**\n * The host element <nylas-limit-future-bookings>\n */\n @Element() host!: HTMLElement;\n /**\n * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The number of days into the future that invitees will see availability, as set in the configuration.\n */\n @Prop() availableDaysInFuture?: number;\n /**\n * @standalone\n * The name of the limit future bookings input.\n */\n @Prop() name: string = 'limit-future-bookings';\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 * The selected number for the available days in the future.\n */\n @State() selectedNumber;\n /**\n * The selected period for the available days in the future.\n */\n @State() selectedPeriod;\n\n /**\n * The element internals.\n */\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n * Since this component is form-associated, the name attribute is required for form submission.\n * This is a workaround to ensure that the name attribute is set on the host element.\n */\n @Watch('name')\n elementNameChangedHandler(newValue: string) {\n debug('nylas-limit-future-bookings', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newVal: Configuration) {\n const daysInFuture = newVal?.scheduler?.available_days_in_future || this.availableDaysInFuture || 1;\n if (daysInFuture) {\n this.updateNumberAndPeriodFromDays(daysInFuture);\n }\n if (typeof this.internals.setFormValue !== 'function') {\n return;\n }\n this.internals.setFormValue(daysInFuture?.toString(), this.name);\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 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 /**\n * Event emitted when the future booking limit changes.\n */\n @Event() valueChanged!: EventEmitter<{\n value: string;\n name: string;\n }>;\n\n connectedCallback() {\n debug('nylas-limit-future-bookings', 'connectedCallback');\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.host.setAttribute('data-themed', '');\n }\n });\n }\n\n componentWillLoad() {\n debug('nylas-limit-future-bookings', 'componentWillLoad');\n this.host.setAttribute('name', this.name);\n }\n\n componentDidLoad() {\n debug('nylas-limit-future-bookings', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.updateNumberAndPeriodFromDays(this.availableDaysInFuture || 1);\n }\n }\n\n disconnectedCallback() {\n debug('nylas-limit-future-bookings', 'disconnectedCallback');\n }\n\n @Listen('timePeriodChanged')\n timePeriodChangedHandler(\n event: CustomEvent<{\n number: number;\n period: string;\n }>,\n ) {\n const { number, period } = event.detail;\n let availableDaysInFuture;\n if (period === 'day') {\n availableDaysInFuture = number;\n } else if (period === 'week') {\n availableDaysInFuture = number * 7;\n } else {\n availableDaysInFuture = number * 30;\n }\n this.valueChanged.emit({ value: availableDaysInFuture, name: this.name });\n if (typeof this.internals.setFormValue !== 'function') {\n return;\n }\n this.internals.setFormValue(availableDaysInFuture.toString(), this.name);\n }\n\n updateNumberAndPeriodFromDays(days: number): void {\n let number, period;\n if (days >= 30 && days % 30 === 0) {\n number = days / 30;\n period = 'month';\n } else if (days >= 7 && days % 7 === 0) {\n number = days / 7;\n period = 'week';\n } else {\n number = days;\n period = 'day';\n }\n this.selectedNumber = number;\n this.selectedPeriod = period;\n }\n\n @RegisterComponent<NylasLimitFutureBookings, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-limit-future-bookings',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\n eventToProps: {},\n fireRegisterEvent: true,\n })\n render() {\n const showTImePeriodSelector = typeof this.selectedNumber == 'number' && typeof this.selectedPeriod == 'string';\n return (\n <Host>\n <div class=\"nylas-limit-future-bookings\" part=\"nlfb\">\n <label>\n {i18next.t('nylasLimitFutureBookings.headerTitle')}\n <span class=\"label-icon\">\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{i18next.t('nylasLimitFutureBookings.tooltip.desc')}</span>\n </tooltip-component>\n </span>\n </label>\n {showTImePeriodSelector && (\n <time-period-selector\n id=\"limit-future-bookings\"\n timePeriods={[\n { value: 'day', label: i18next.t('timePeriod', { context: 'day' }) },\n { value: 'week', label: i18next.t('timePeriod', { context: 'week' }) },\n { value: 'month', label: i18next.t('timePeriod', { context: 'month' }) },\n ]}\n exportparts=\"tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content\"\n defaultSelectedNumber={this.selectedNumber}\n defaultSelectedPeriod={this.selectedPeriod}\n themeConfig={this.themeConfig}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -4,7 +4,7 @@ import { a as debug, b as instance } from './p-dEI4mtiM.js';
|
|
|
4
4
|
import { d as defineCustomElement$5 } from './p-BaI67hQ_.js';
|
|
5
5
|
import { d as defineCustomElement$4 } from './p-DAvS1ihh.js';
|
|
6
6
|
import { d as defineCustomElement$3 } from './p-BGfs-kGd.js';
|
|
7
|
-
import { d as defineCustomElement$2 } from './p-
|
|
7
|
+
import { d as defineCustomElement$2 } from './p-idvnK5Rl.js';
|
|
8
8
|
import { d as defineCustomElement$1 } from './p-Hj9jbKPX.js';
|
|
9
9
|
|
|
10
10
|
const nylasBookingConfirmationTypeCss = ":host{display:block;--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:inherit}.nylas-booking-confirmation-type{width:inherit;display:flex;flex-direction:column;margin-bottom:1rem}.nylas-booking-confirmation-type .nylas-booking-confirmation-type__dropdown span.label{display:flex;align-items:center;gap:4px;color:var(--nylas-base-800)}.nylas-booking-confirmation-type .nylas-booking-confirmation-type__dropdown span.label tooltip-component{display:flex}.nylas-booking-confirmation-type .nylas-booking-confirmation-type__dropdown select-dropdown::part(sd_dropdown){width:100%}.nylas-booking-confirmation-type .nylas-booking-confirmation-type__dropdown select-dropdown::part(sd_dropdown-button){width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-booking-confirmation-type .nylas-booking-confirmation-type__dropdown select-dropdown::part(sd_dropdown-content){width:100%;max-width:unset}.nylas-booking-confirmation-type .nylas-booking-confirmation-type__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
|
|
@@ -213,6 +213,6 @@ function defineCustomElement() {
|
|
|
213
213
|
}
|
|
214
214
|
|
|
215
215
|
export { NylasBookingConfirmationType as N, defineCustomElement as d };
|
|
216
|
-
//# sourceMappingURL=p-
|
|
216
|
+
//# sourceMappingURL=p-pLqfEMSB.js.map
|
|
217
217
|
|
|
218
|
-
//# sourceMappingURL=p-
|
|
218
|
+
//# sourceMappingURL=p-pLqfEMSB.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-DAAGx7-h.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 // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.host.setAttribute('data-themed', '');\n }\n });\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-pLqfEMSB.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 // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.host.setAttribute('data-themed', '');\n }\n });\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}
|
|
@@ -3,9 +3,9 @@ import { R as RegisterComponent } from './p-_xBp5cfI.js';
|
|
|
3
3
|
import { a as debug, b as instance } from './p-dEI4mtiM.js';
|
|
4
4
|
import { d as defineCustomElement$6 } from './p-BaI67hQ_.js';
|
|
5
5
|
import { d as defineCustomElement$5 } from './p-DAvS1ihh.js';
|
|
6
|
-
import { d as defineCustomElement$4 } from './p-
|
|
6
|
+
import { d as defineCustomElement$4 } from './p-DTF0fIhr.js';
|
|
7
7
|
import { d as defineCustomElement$3 } from './p-BGfs-kGd.js';
|
|
8
|
-
import { d as defineCustomElement$2 } from './p-
|
|
8
|
+
import { d as defineCustomElement$2 } from './p-idvnK5Rl.js';
|
|
9
9
|
import { d as defineCustomElement$1 } from './p-Hj9jbKPX.js';
|
|
10
10
|
|
|
11
11
|
const nylasTimeslotIntervalCss = ":host{display:block;--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:inherit}.nylas-timeslot-interval{width:inherit;display:flex;flex-direction:column;margin:1rem;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-200)}.nylas-timeslot-interval .header{padding:1rem;border-bottom:1px solid var(--nylas-base-200)}.nylas-timeslot-interval .header h3{margin:0;font-size:16px;font-weight:600;line-height:20px;color:var(--nylas-base-900);text-align:left}.nylas-timeslot-interval .header p{margin:0.25rem 0 0 0;font-size:0.875rem;font-weight:400;line-height:20px;color:var(--nylas-base-600);text-align:left}.nylas-timeslot-interval .nylas-timeslot-interval__dropdown{padding:1rem;display:flex;flex-direction:column;gap:4px;background-color:var(--nylas-base-25)}.nylas-timeslot-interval .nylas-timeslot-interval__dropdown span.label{display:flex;align-items:center;gap:4px;color:var(--nylas-base-800)}.nylas-timeslot-interval .nylas-timeslot-interval__dropdown span.label tooltip-component{display:flex}.nylas-timeslot-interval .nylas-timeslot-interval__dropdown select-dropdown{margin-bottom:1.5rem}.nylas-timeslot-interval .nylas-timeslot-interval__dropdown select-dropdown::part(sd_dropdown){width:100%}.nylas-timeslot-interval .nylas-timeslot-interval__dropdown select-dropdown::part(sd_dropdown-content){width:100%;max-width:unset}.nylas-timeslot-interval .nylas-timeslot-interval__dropdown select-dropdown::part(sd_dropdown-button){width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);padding:1rem}.nylas-timeslot-interval .nylas-timeslot-interval__dropdown select-dropdown::part(sd_dropdown-button-selected-label){max-width:calc(100% - 2rem);font-family:var(--nylas-font-family);font-size:16px;line-height:24px}";
|
|
@@ -259,6 +259,6 @@ function defineCustomElement() {
|
|
|
259
259
|
}
|
|
260
260
|
|
|
261
261
|
export { NylasTimeslotInterval as N, defineCustomElement as d };
|
|
262
|
-
//# sourceMappingURL=p-
|
|
262
|
+
//# sourceMappingURL=p-pRwtuoW0.js.map
|
|
263
263
|
|
|
264
|
-
//# sourceMappingURL=p-
|
|
264
|
+
//# sourceMappingURL=p-pRwtuoW0.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-BAZ-jMiz.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-timeslot-interval/nylas-timeslot-interval.scss?tag=nylas-timeslot-interval&encapsulation=shadow","src/components/scheduler-editor/nylas-timeslot-interval/nylas-timeslot-interval.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-timeslot-interval {\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 p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n\n .nylas-timeslot-interval__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n background-color: var(--nylas-base-25);\n\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 {\n margin-bottom: 1.5rem;\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 padding: 1rem;\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\nconst defaultRoundToMinutes = 15;\n/**\n * The `nylas-timeslot-interval` component allows users to set their time slot interval preferences.\n * This component provides an option to set both `interval_minutes` and `round_to` in the configuration.\n *\n * @part nti - The timeslot interval container\n * @part nti__header - The header of the timeslot interval picker\n * @part nti__input-label - The input label of the timeslot interval picker\n * @part nti__dropdown - The dropdown container\n * @part nti__dropdown-button - The dropdown button\n * @part nti__dropdown-content - The dropdown content\n */\n@Component({\n tag: 'nylas-timeslot-interval',\n styleUrl: 'nylas-timeslot-interval.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasTimeslotInterval {\n @Element() host!: HTMLNylasTimeslotIntervalElement;\n /**\n * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The name of the calendar picker.\n */\n @Prop() name: string = 'timeslot-interval';\n\n /**\n * @standalone\n * The event duration in minutes.\n */\n @Prop() eventDurationMinutes?: number = this.selectedConfiguration?.availability?.duration_minutes;\n\n /**\n * The selected language.\n */\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n /**\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 internal event duration minutes state.\n */\n @State() internalEventDurationMinutes!: number;\n\n /**\n * The selected interval minutes.\n */\n @State() selectedInterval!: number;\n\n /**\n * The selected round to minutes.\n */\n @State() selectedRoundTo!: boolean;\n\n /***\n * The state to store that component is ready to render.\n */\n @State() componentLoaded: boolean = false;\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 }>;\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-timeslot-interval', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-timeslot-interval', 'selectedConfigurationChangedHandler', newValue);\n this.internalEventDurationMinutes = newValue?.availability?.duration_minutes ?? this.eventDurationMinutes ?? 30;\n const internalIntervalMinutes = newValue?.availability?.interval_minutes ?? this.internalEventDurationMinutes ?? 30;\n this.selectedInterval = newValue?.availability?.interval_minutes ?? internalIntervalMinutes ?? 10;\n const roundToMinutes = newValue?.availability?.round_to || null;\n this.selectedRoundTo = roundToMinutes && roundToMinutes === internalIntervalMinutes ? true : false;\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-timeslot-interval', 'connectedCallback');\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.host.setAttribute('data-themed', '');\n }\n });\n }\n\n disconnectedCallback() {\n debug('nylas-timeslot-interval', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-timeslot-interval', '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-timeslot-interval', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.internalEventDurationMinutes = this.eventDurationMinutes ?? 30;\n const internalIntervalMinutes = this.internalEventDurationMinutes;\n this.selectedInterval = internalIntervalMinutes ?? 10;\n this.selectedRoundTo = false;\n }\n this.componentLoaded = true;\n }\n\n componentWillUpdate() {\n debug('nylas-timeslot-interval', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-timeslot-interval', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-timeslot-interval', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-timeslot-interval', 'componentDidRender');\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-timeslot-interval', 'nylasFormDropdownChangedHandler', event.detail);\n const value = event.detail.value;\n if (value === 'duration') {\n this.selectedInterval = this.internalEventDurationMinutes ?? 10;\n } else {\n this.selectedInterval = parseInt(event.detail.value);\n }\n\n this.valueChanged.emit({\n value: JSON.stringify({\n interval: this.selectedInterval,\n roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinutes,\n }),\n name: this.name,\n });\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(JSON.stringify({ interval: this.selectedInterval, roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinutes }), this.name);\n }\n }\n\n @Listen('nylasFormRadioChanged')\n nylasFormRadioChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-timeslot-interval', 'nylasFormRadioChangedHandler', event.detail);\n const value = event.detail.value;\n if (value === 'no-rounding') {\n this.selectedRoundTo = false;\n } else {\n this.selectedRoundTo = true;\n }\n\n this.valueChanged.emit({\n value: JSON.stringify({\n interval: this.selectedInterval,\n roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinutes,\n }),\n name: this.name,\n });\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(JSON.stringify({ interval: this.selectedInterval, roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinutes }), this.name);\n }\n }\n\n @RegisterComponent<NylasTimeslotInterval, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-timeslot-interval',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\n fireRegisterEvent: true,\n })\n render() {\n const intervalPreferenceOptions = [\n { value: 'duration', label: i18next.t('nylasTimeslotInterval.lengthOfMeeting') },\n { value: '5', label: `5 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n { value: '10', label: `10 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n { value: '15', label: `15 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n { value: '20', label: `20 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n { value: '30', label: `30 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n { value: '45', label: `45 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n { value: '60', label: `60 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n ];\n\n const defaultSelectedInterval =\n typeof this.selectedInterval !== 'undefined'\n ? this.selectedInterval == this.internalEventDurationMinutes\n ? intervalPreferenceOptions[0]\n : intervalPreferenceOptions.find(op => op.value == this.selectedInterval.toString()) ?? intervalPreferenceOptions[0]\n : undefined;\n\n return (\n <Host>\n <div class=\"nylas-timeslot-interval\" part=\"nti\">\n <div class=\"header\" part=\"nti__header\">\n <h3>{i18next.t('nylasTimeslotInterval.headerTitle')}</h3>\n </div>\n\n <div class=\"nylas-timeslot-interval__dropdown\">\n <span class=\"label\" part=\"nti__input-label\">\n {i18next.t('nylasTimeslotInterval.timeslotInterval.label')}\n </span>\n {defaultSelectedInterval?.label && (\n <select-dropdown\n name=\"interval-minutes\"\n options={intervalPreferenceOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nti__dropdown, sd_dropdown-button: nti__dropdown-button, sd_dropdown-content: nti__dropdown-content\"\n defaultSelectedOption={defaultSelectedInterval}\n themeConfig={this.themeConfig}\n />\n )}\n <span slot=\"label\" class=\"label\" part=\"nti__input-label\">\n {i18next.t('nylasTimeslotInterval.timeslotRounding.label')}\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{i18next.t('nylasTimeslotInterval.timeslotRounding.tooltip.desc')}</span>\n </tooltip-component>\n </span>\n {this.componentLoaded && (\n <radio-button-group\n name=\"interval-preference\"\n defaultSelectedValue={this.selectedRoundTo ? 'rounding' : 'no-rounding'}\n options={[\n {\n value: 'no-rounding',\n label: i18next.t('nylasTimeslotInterval.timeslotRoundingOptions.noRounding.label'),\n description: i18next.t('nylasTimeslotInterval.timeslotRoundingOptions.noRounding.desc'),\n },\n {\n value: 'rounding',\n label: i18next.t('nylasTimeslotInterval.timeslotRoundingOptions.rounding.label'),\n description: i18next.t('nylasTimeslotInterval.timeslotRoundingOptions.rounding.desc'),\n },\n ]}\n themeConfig={this.themeConfig}\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-pRwtuoW0.js","mappings":";;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,m6HAAm6H;;;;;;;;;;;;;;;;ACSp8H,MAAM,qBAAqB,GAAG,EAAE;MAkBnB,qBAAqB,GAAAA,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;AANlC,IAAA,WAAA,GAAA;;;;;;AAiBU,QAAA,IAAI,CAAA,IAAA,GAAW,mBAAmB;QAMlC,IAAoB,CAAA,oBAAA,GAAY,IAAI,CAAC,qBAAqB,EAAE,YAAY,EAAE,gBAAgB;AAmCzF,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAmO1C;AAnNC,IAAA,yBAAyB,CAAC,QAAgB,EAAA;AACxC,QAAA,KAAK,CAAC,yBAAyB,EAAE,2BAA2B,EAAE,QAAQ,CAAC;QACvE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;;AAI1C,IAAA,mCAAmC,CAAC,QAAuB,EAAA;AACzD,QAAA,KAAK,CAAC,yBAAyB,EAAE,qCAAqC,EAAE,QAAQ,CAAC;AACjF,QAAA,IAAI,CAAC,4BAA4B,GAAG,QAAQ,EAAE,YAAY,EAAE,gBAAgB,IAAI,IAAI,CAAC,oBAAoB,IAAI,EAAE;AAC/G,QAAA,MAAM,uBAAuB,GAAG,QAAQ,EAAE,YAAY,EAAE,gBAAgB,IAAI,IAAI,CAAC,4BAA4B,IAAI,EAAE;AACnH,QAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ,EAAE,YAAY,EAAE,gBAAgB,IAAI,uBAAuB,IAAI,EAAE;QACjG,MAAM,cAAc,GAAG,QAAQ,EAAE,YAAY,EAAE,QAAQ,IAAI,IAAI;AAC/D,QAAA,IAAI,CAAC,eAAe,GAAG,cAAc,IAAI,cAAc,KAAK,uBAAuB,GAAG,IAAI,GAAG,KAAK;;IAIpG,8BAA8B,CAAC,MAAqB,EAAE,MAAqB,EAAA;QACzE,IAAI,MAAM,KAAK,MAAM;YAAE;AACvB,QAAAC,QAAO,CAAC,cAAc,CAAC,MAAM,CAAC;;IAIhC,yBAAyB,CAAC,MAAmB,EAAE,MAAmB,EAAA;QAChE,IAAI,MAAM,KAAK,MAAM;YAAE;AACvB,QAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;;IAI/B,iBAAiB,GAAA;AACf,QAAA,KAAK,CAAC,yBAAyB,EAAE,mBAAmB,CAAC;QAGrD,cAAc,CAAC,MAAK;AAClB,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,gBAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC;gBACvC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;;AAE7C,SAAC,CAAC;;IAGJ,oBAAoB,GAAA;AAClB,QAAA,KAAK,CAAC,yBAAyB,EAAE,sBAAsB,CAAC;;IAG1D,iBAAiB,GAAA;AACf,QAAA,KAAK,CAAC,yBAAyB,EAAE,mBAAmB,CAAC;QAErD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;;IAG3C,gBAAgB,GAAA;AACd,QAAA,KAAK,CAAC,yBAAyB,EAAE,kBAAkB,CAAC;AACpD,QAAA,IAAI,IAAI,CAAC,qBAAqB,EAAE;AAC9B,YAAA,IAAI,CAAC,mCAAmC,CAAC,IAAI,CAAC,qBAAqB,CAAC;;aAC/D;YACL,IAAI,CAAC,4BAA4B,GAAG,IAAI,CAAC,oBAAoB,IAAI,EAAE;AACnE,YAAA,MAAM,uBAAuB,GAAG,IAAI,CAAC,4BAA4B;AACjE,YAAA,IAAI,CAAC,gBAAgB,GAAG,uBAAuB,IAAI,EAAE;AACrD,YAAA,IAAI,CAAC,eAAe,GAAG,KAAK;;AAE9B,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI;;IAG7B,mBAAmB,GAAA;AACjB,QAAA,KAAK,CAAC,yBAAyB,EAAE,qBAAqB,CAAC;;IAGzD,kBAAkB,GAAA;AAChB,QAAA,KAAK,CAAC,yBAAyB,EAAE,oBAAoB,CAAC;;IAGxD,mBAAmB,GAAA;AACjB,QAAA,KAAK,CAAC,yBAAyB,EAAE,qBAAqB,CAAC;;IAGzD,kBAAkB,GAAA;AAChB,QAAA,KAAK,CAAC,yBAAyB,EAAE,oBAAoB,CAAC;;AAGxD,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;;;;AAMlD,IAAA,+BAA+B,CAAC,KAAmD,EAAA;QACjF,KAAK,CAAC,yBAAyB,EAAE,iCAAiC,EAAE,KAAK,CAAC,MAAM,CAAC;AACjF,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;AAChC,QAAA,IAAI,KAAK,KAAK,UAAU,EAAE;YACxB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,4BAA4B,IAAI,EAAE;;aAC1D;YACL,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;AAGtD,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,YAAA,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC;gBACpB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;AAC/B,gBAAA,OAAO,EAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB,GAAG,qBAAqB;aAC9E,CAAC;YACF,IAAI,EAAE,IAAI,CAAC,IAAI;AAChB,SAAA,CAAC;QACF,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,KAAK,UAAU,EAAE;AACrD,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC;;;AAK9K,IAAA,4BAA4B,CAAC,KAAmD,EAAA;QAC9E,KAAK,CAAC,yBAAyB,EAAE,8BAA8B,EAAE,KAAK,CAAC,MAAM,CAAC;AAC9E,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;AAChC,QAAA,IAAI,KAAK,KAAK,aAAa,EAAE;AAC3B,YAAA,IAAI,CAAC,eAAe,GAAG,KAAK;;aACvB;AACL,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI;;AAG7B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,YAAA,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC;gBACpB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;AAC/B,gBAAA,OAAO,EAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB,GAAG,qBAAqB;aAC9E,CAAC;YACF,IAAI,EAAE,IAAI,CAAC,IAAI;AAChB,SAAA,CAAC;QACF,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,KAAK,UAAU,EAAE;AACrD,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC;;;IAa9K,MAAM,GAAA;AACJ,QAAA,MAAM,yBAAyB,GAAG;AAChC,YAAA,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAEA,QAAO,CAAC,CAAC,CAAC,uCAAuC,CAAC,EAAE;AAChF,YAAA,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CAAA,EAAA,EAAKA,QAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,EAAE,EAAE;AAC7E,YAAA,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA,GAAA,EAAMA,QAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,EAAE,EAAE;AAC/E,YAAA,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA,GAAA,EAAMA,QAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,EAAE,EAAE;AAC/E,YAAA,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA,GAAA,EAAMA,QAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,EAAE,EAAE;AAC/E,YAAA,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA,GAAA,EAAMA,QAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,EAAE,EAAE;AAC/E,YAAA,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA,GAAA,EAAMA,QAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,EAAE,EAAE;AAC/E,YAAA,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA,GAAA,EAAMA,QAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,EAAE,EAAE;SAChF;AAED,QAAA,MAAM,uBAAuB,GAC3B,OAAO,IAAI,CAAC,gBAAgB,KAAK;AAC/B,cAAE,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC;AAC9B,kBAAE,yBAAyB,CAAC,CAAC;kBAC3B,yBAAyB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,IAAI,yBAAyB,CAAC,CAAC;cACnH,SAAS;AAEf,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,KAAK,EAAA,EAC7C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,aAAa,EAAA,EACpC,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAKA,QAAO,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAM,CACrD,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mCAAmC,EAAA,EAC5C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,kBAAkB,EACxC,EAAAA,QAAO,CAAC,CAAC,CAAC,8CAA8C,CAAC,CACrD,EACN,uBAAuB,EAAE,KAAK,KAC7B,CACE,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,kBAAkB,EACvB,OAAO,EAAE,yBAAyB,EAClC,UAAU,EAAE,KAAK,EACjB,WAAW,EAAC,kHAAkH,EAC9H,qBAAqB,EAAE,uBAAuB,EAC9C,WAAW,EAAE,IAAI,CAAC,WAAW,GAC7B,CACH,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,kBAAkB,EAAA,EACrDA,QAAO,CAAC,CAAC,CAAC,8CAA8C,CAAC,EAC1D,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAG,CAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,iBAAiB,EAAA,EAAEA,QAAO,CAAC,CAAC,CAAC,qDAAqD,CAAC,CAAQ,CACpF,CACf,EACN,IAAI,CAAC,eAAe,KACnB,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,qBAAqB,EAC1B,oBAAoB,EAAE,IAAI,CAAC,eAAe,GAAG,UAAU,GAAG,aAAa,EACvE,OAAO,EAAE;AACP,gBAAA;AACE,oBAAA,KAAK,EAAE,aAAa;AACpB,oBAAA,KAAK,EAAEA,QAAO,CAAC,CAAC,CAAC,gEAAgE,CAAC;AAClF,oBAAA,WAAW,EAAEA,QAAO,CAAC,CAAC,CAAC,+DAA+D,CAAC;AACxF,iBAAA;AACD,gBAAA;AACE,oBAAA,KAAK,EAAE,UAAU;AACjB,oBAAA,KAAK,EAAEA,QAAO,CAAC,CAAC,CAAC,8DAA8D,CAAC;AAChF,oBAAA,WAAW,EAAEA,QAAO,CAAC,CAAC,CAAC,6DAA6D,CAAC;AACtF,iBAAA;AACF,aAAA,EACD,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,CAAA,CACH,CACG,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;AApEX,UAAA,CAAA;AATC,IAAA,iBAAiB,CAA2G;AAC3H,QAAA,IAAI,EAAE,yBAAyB;QAC/B,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,uCAAuC,EAAE,uBAAuB,CAAC;YAClE,CAAC,kCAAkC,EAAE,kBAAkB,CAAC;YACxD,CAAC,6BAA6B,EAAE,aAAa,CAAC;SAC/C,CAAC;AACF,QAAA,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;CAuED,EAAA,qBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","i18next"],"sources":["src/components/scheduler-editor/nylas-timeslot-interval/nylas-timeslot-interval.scss?tag=nylas-timeslot-interval&encapsulation=shadow","src/components/scheduler-editor/nylas-timeslot-interval/nylas-timeslot-interval.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-timeslot-interval {\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 p {\n margin: 0.25rem 0 0 0;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 20px;\n color: var(--nylas-base-600);\n text-align: left;\n }\n }\n\n .nylas-timeslot-interval__dropdown {\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 4px;\n background-color: var(--nylas-base-25);\n\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 {\n margin-bottom: 1.5rem;\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 padding: 1rem;\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\nconst defaultRoundToMinutes = 15;\n/**\n * The `nylas-timeslot-interval` component allows users to set their time slot interval preferences.\n * This component provides an option to set both `interval_minutes` and `round_to` in the configuration.\n *\n * @part nti - The timeslot interval container\n * @part nti__header - The header of the timeslot interval picker\n * @part nti__input-label - The input label of the timeslot interval picker\n * @part nti__dropdown - The dropdown container\n * @part nti__dropdown-button - The dropdown button\n * @part nti__dropdown-content - The dropdown content\n */\n@Component({\n tag: 'nylas-timeslot-interval',\n styleUrl: 'nylas-timeslot-interval.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class NylasTimeslotInterval {\n @Element() host!: HTMLNylasTimeslotIntervalElement;\n /**\n * @standalone\n * The selected config\n */\n @Prop() selectedConfiguration?: Configuration;\n /**\n * @standalone\n * The name of the calendar picker.\n */\n @Prop() name: string = 'timeslot-interval';\n\n /**\n * @standalone\n * The event duration in minutes.\n */\n @Prop() eventDurationMinutes?: number = this.selectedConfiguration?.availability?.duration_minutes;\n\n /**\n * The selected language.\n */\n @Prop() selectedLanguage?: LANGUAGE_CODE;\n\n /**\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 internal event duration minutes state.\n */\n @State() internalEventDurationMinutes!: number;\n\n /**\n * The selected interval minutes.\n */\n @State() selectedInterval!: number;\n\n /**\n * The selected round to minutes.\n */\n @State() selectedRoundTo!: boolean;\n\n /***\n * The state to store that component is ready to render.\n */\n @State() componentLoaded: boolean = false;\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 }>;\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-timeslot-interval', 'elementNameChangedHandler', newValue);\n this.host.setAttribute('name', newValue);\n }\n\n @Watch('selectedConfiguration')\n selectedConfigurationChangedHandler(newValue: Configuration) {\n debug('nylas-timeslot-interval', 'selectedConfigurationChangedHandler', newValue);\n this.internalEventDurationMinutes = newValue?.availability?.duration_minutes ?? this.eventDurationMinutes ?? 30;\n const internalIntervalMinutes = newValue?.availability?.interval_minutes ?? this.internalEventDurationMinutes ?? 30;\n this.selectedInterval = newValue?.availability?.interval_minutes ?? internalIntervalMinutes ?? 10;\n const roundToMinutes = newValue?.availability?.round_to || null;\n this.selectedRoundTo = roundToMinutes && roundToMinutes === internalIntervalMinutes ? true : false;\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-timeslot-interval', 'connectedCallback');\n // Use queueMicrotask to defer theme application until after React has set props.\n // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n queueMicrotask(() => {\n if (this.themeConfig) {\n this.applyThemeConfig(this.themeConfig);\n this.host.setAttribute('data-themed', '');\n }\n });\n }\n\n disconnectedCallback() {\n debug('nylas-timeslot-interval', 'disconnectedCallback');\n }\n\n componentWillLoad() {\n debug('nylas-timeslot-interval', '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-timeslot-interval', 'componentDidLoad');\n if (this.selectedConfiguration) {\n this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n } else {\n this.internalEventDurationMinutes = this.eventDurationMinutes ?? 30;\n const internalIntervalMinutes = this.internalEventDurationMinutes;\n this.selectedInterval = internalIntervalMinutes ?? 10;\n this.selectedRoundTo = false;\n }\n this.componentLoaded = true;\n }\n\n componentWillUpdate() {\n debug('nylas-timeslot-interval', 'componentWillUpdate');\n }\n\n componentDidUpdate() {\n debug('nylas-timeslot-interval', 'componentDidUpdate');\n }\n\n componentWillRender() {\n debug('nylas-timeslot-interval', 'componentWillRender');\n }\n\n componentDidRender() {\n debug('nylas-timeslot-interval', 'componentDidRender');\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-timeslot-interval', 'nylasFormDropdownChangedHandler', event.detail);\n const value = event.detail.value;\n if (value === 'duration') {\n this.selectedInterval = this.internalEventDurationMinutes ?? 10;\n } else {\n this.selectedInterval = parseInt(event.detail.value);\n }\n\n this.valueChanged.emit({\n value: JSON.stringify({\n interval: this.selectedInterval,\n roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinutes,\n }),\n name: this.name,\n });\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(JSON.stringify({ interval: this.selectedInterval, roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinutes }), this.name);\n }\n }\n\n @Listen('nylasFormRadioChanged')\n nylasFormRadioChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n debug('nylas-timeslot-interval', 'nylasFormRadioChangedHandler', event.detail);\n const value = event.detail.value;\n if (value === 'no-rounding') {\n this.selectedRoundTo = false;\n } else {\n this.selectedRoundTo = true;\n }\n\n this.valueChanged.emit({\n value: JSON.stringify({\n interval: this.selectedInterval,\n roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinutes,\n }),\n name: this.name,\n });\n if (typeof this.internals.setFormValue === 'function') {\n this.internals.setFormValue(JSON.stringify({ interval: this.selectedInterval, roundTo: this.selectedRoundTo ? this.selectedInterval : defaultRoundToMinutes }), this.name);\n }\n }\n\n @RegisterComponent<NylasTimeslotInterval, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n name: 'nylas-timeslot-interval',\n stateToProps: new Map([\n ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n ['schedulerConfig.themeConfig', 'themeConfig'],\n ]),\n fireRegisterEvent: true,\n })\n render() {\n const intervalPreferenceOptions = [\n { value: 'duration', label: i18next.t('nylasTimeslotInterval.lengthOfMeeting') },\n { value: '5', label: `5 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n { value: '10', label: `10 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n { value: '15', label: `15 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n { value: '20', label: `20 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n { value: '30', label: `30 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n { value: '45', label: `45 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n { value: '60', label: `60 ${i18next.t('nylasTimeslotInterval.minutesShort')}` },\n ];\n\n const defaultSelectedInterval =\n typeof this.selectedInterval !== 'undefined'\n ? this.selectedInterval == this.internalEventDurationMinutes\n ? intervalPreferenceOptions[0]\n : intervalPreferenceOptions.find(op => op.value == this.selectedInterval.toString()) ?? intervalPreferenceOptions[0]\n : undefined;\n\n return (\n <Host>\n <div class=\"nylas-timeslot-interval\" part=\"nti\">\n <div class=\"header\" part=\"nti__header\">\n <h3>{i18next.t('nylasTimeslotInterval.headerTitle')}</h3>\n </div>\n\n <div class=\"nylas-timeslot-interval__dropdown\">\n <span class=\"label\" part=\"nti__input-label\">\n {i18next.t('nylasTimeslotInterval.timeslotInterval.label')}\n </span>\n {defaultSelectedInterval?.label && (\n <select-dropdown\n name=\"interval-minutes\"\n options={intervalPreferenceOptions}\n withSearch={false}\n exportparts=\"sd_dropdown: nti__dropdown, sd_dropdown-button: nti__dropdown-button, sd_dropdown-content: nti__dropdown-content\"\n defaultSelectedOption={defaultSelectedInterval}\n themeConfig={this.themeConfig}\n />\n )}\n <span slot=\"label\" class=\"label\" part=\"nti__input-label\">\n {i18next.t('nylasTimeslotInterval.timeslotRounding.label')}\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{i18next.t('nylasTimeslotInterval.timeslotRounding.tooltip.desc')}</span>\n </tooltip-component>\n </span>\n {this.componentLoaded && (\n <radio-button-group\n name=\"interval-preference\"\n defaultSelectedValue={this.selectedRoundTo ? 'rounding' : 'no-rounding'}\n options={[\n {\n value: 'no-rounding',\n label: i18next.t('nylasTimeslotInterval.timeslotRoundingOptions.noRounding.label'),\n description: i18next.t('nylasTimeslotInterval.timeslotRoundingOptions.noRounding.desc'),\n },\n {\n value: 'rounding',\n label: i18next.t('nylasTimeslotInterval.timeslotRoundingOptions.rounding.label'),\n description: i18next.t('nylasTimeslotInterval.timeslotRoundingOptions.rounding.desc'),\n },\n ]}\n themeConfig={this.themeConfig}\n />\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -3,33 +3,33 @@ import { R as RegisterComponent } from './p-_xBp5cfI.js';
|
|
|
3
3
|
import { I as getAugmentedNamespace, h as getDefaultExportFromCjs, j as dayjs, u as utc, w as timezone, b as instance, a as debug, e as error } from './p-dEI4mtiM.js';
|
|
4
4
|
import { d as defineCustomElement$v } from './p-Ha2t2y12.js';
|
|
5
5
|
import { d as defineCustomElement$u } from './p-Dvm3cFRX.js';
|
|
6
|
-
import { d as defineCustomElement$t } from './p-
|
|
7
|
-
import { d as defineCustomElement$s } from './p-
|
|
6
|
+
import { d as defineCustomElement$t } from './p-B4WU6Ddk.js';
|
|
7
|
+
import { d as defineCustomElement$s } from './p-DVTv2Hp1.js';
|
|
8
8
|
import { d as defineCustomElement$r } from './p-BaI67hQ_.js';
|
|
9
9
|
import { d as defineCustomElement$q } from './p-DHEweiQ6.js';
|
|
10
10
|
import { d as defineCustomElement$p } from './p-C-FqPkG1.js';
|
|
11
11
|
import { d as defineCustomElement$o } from './p-sbWcoagv.js';
|
|
12
12
|
import { d as defineCustomElement$n } from './p-DAvS1ihh.js';
|
|
13
|
-
import { d as defineCustomElement$m } from './p-
|
|
13
|
+
import { d as defineCustomElement$m } from './p-UahFYa1w.js';
|
|
14
14
|
import { d as defineCustomElement$l } from './p-Dng-gcge.js';
|
|
15
15
|
import { d as defineCustomElement$k } from './p-hYRQCAHR.js';
|
|
16
16
|
import { d as defineCustomElement$j } from './p-C7vQiSqU.js';
|
|
17
17
|
import { d as defineCustomElement$i } from './p-D0Ur_s8w.js';
|
|
18
18
|
import { d as defineCustomElement$h } from './p-BA0crRT4.js';
|
|
19
19
|
import { d as defineCustomElement$g } from './p-D5z467yH.js';
|
|
20
|
-
import { d as defineCustomElement$f } from './p-
|
|
21
|
-
import { d as defineCustomElement$e } from './p-
|
|
22
|
-
import { d as defineCustomElement$d } from './p-
|
|
23
|
-
import { d as defineCustomElement$c } from './p-
|
|
20
|
+
import { d as defineCustomElement$f } from './p-B-xvNL5X.js';
|
|
21
|
+
import { d as defineCustomElement$e } from './p-BWgGjFXi.js';
|
|
22
|
+
import { d as defineCustomElement$d } from './p-Ey-jPikW.js';
|
|
23
|
+
import { d as defineCustomElement$c } from './p-BJ6nYqW1.js';
|
|
24
24
|
import { d as defineCustomElement$b } from './p-B_TCNkzt.js';
|
|
25
|
-
import { d as defineCustomElement$a } from './p-
|
|
26
|
-
import { d as defineCustomElement$9 } from './p-
|
|
27
|
-
import { d as defineCustomElement$8 } from './p-
|
|
25
|
+
import { d as defineCustomElement$a } from './p-MMkYQKuh.js';
|
|
26
|
+
import { d as defineCustomElement$9 } from './p-CHQ9sLls.js';
|
|
27
|
+
import { d as defineCustomElement$8 } from './p-BJHGQK2p.js';
|
|
28
28
|
import { d as defineCustomElement$7 } from './p-BfRJThsI.js';
|
|
29
29
|
import { d as defineCustomElement$6 } from './p-CiXlFUAF.js';
|
|
30
30
|
import { d as defineCustomElement$5 } from './p-BGfs-kGd.js';
|
|
31
|
-
import { d as defineCustomElement$4 } from './p-
|
|
32
|
-
import { d as defineCustomElement$3 } from './p-
|
|
31
|
+
import { d as defineCustomElement$4 } from './p-idvnK5Rl.js';
|
|
32
|
+
import { d as defineCustomElement$3 } from './p-FFI2InLT.js';
|
|
33
33
|
import { d as defineCustomElement$2 } from './p-Hj9jbKPX.js';
|
|
34
34
|
import { d as defineCustomElement$1 } from './p-PH-ASHZS.js';
|
|
35
35
|
|
|
@@ -15642,6 +15642,6 @@ function defineCustomElement() {
|
|
|
15642
15642
|
}
|
|
15643
15643
|
|
|
15644
15644
|
export { NylasEventCalendar as N, defineCustomElement as d };
|
|
15645
|
-
//# sourceMappingURL=p-
|
|
15645
|
+
//# sourceMappingURL=p-whoa2mmo.js.map
|
|
15646
15646
|
|
|
15647
|
-
//# sourceMappingURL=p-
|
|
15647
|
+
//# sourceMappingURL=p-whoa2mmo.js.map
|