@nylas/web-elements 2.2.0 → 2.2.2
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/nylas-web-elements/{abstract-provider-D75Ucvku.js → abstract-provider-9AZudYSI.js} +2 -2
- package/dist/nylas-web-elements/{abstract-provider-D75Ucvku.js.map → abstract-provider-9AZudYSI.js.map} +1 -1
- package/dist/nylas-web-elements/add-circle-icon.entry.js +1 -1
- package/dist/nylas-web-elements/archive-icon.entry.js +1 -1
- package/dist/nylas-web-elements/arrow-icon.entry.js +1 -1
- package/dist/nylas-web-elements/bold-icon.entry.js +1 -1
- package/dist/nylas-web-elements/button-component.entry.js +1 -1
- package/dist/nylas-web-elements/calendar-agenda-fill-icon.entry.js +1 -1
- package/dist/nylas-web-elements/calendar-agenda-icon.entry.js +1 -1
- package/dist/nylas-web-elements/calendar-cancel-icon.entry.js +1 -1
- package/dist/nylas-web-elements/calendar-check-icon.entry.js +1 -1
- package/dist/nylas-web-elements/calendar-icon.entry.js +1 -1
- package/dist/nylas-web-elements/calendar-info-icon.entry.js +1 -1
- package/dist/nylas-web-elements/calendar-patterns-icon.entry.js +1 -1
- package/dist/nylas-web-elements/checkbox-component.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/checkbox-component.entry.js +1 -1
- package/dist/nylas-web-elements/checkbox-component.entry.js.map +1 -1
- package/dist/nylas-web-elements/checkbox-group.entry.js +1 -1
- package/dist/nylas-web-elements/checkmark-circle-icon.entry.js +1 -1
- package/dist/nylas-web-elements/checkmark-icon.entry.js +1 -1
- package/dist/nylas-web-elements/chevron-icon.entry.js +1 -1
- package/dist/nylas-web-elements/clock-icon.entry.js +1 -1
- package/dist/nylas-web-elements/close-icon.entry.js +1 -1
- package/dist/nylas-web-elements/copy-icon.entry.js +1 -1
- package/dist/nylas-web-elements/{customParseFormat-Bk5PI6Cs.js → customParseFormat-BJNMxHY2.js} +2 -2
- package/dist/nylas-web-elements/{customParseFormat-Bk5PI6Cs.js.map → customParseFormat-BJNMxHY2.js.map} +1 -1
- package/dist/nylas-web-elements/delete-icon.entry.js +1 -1
- package/dist/nylas-web-elements/document-refresh-icon.entry.js +1 -1
- package/dist/nylas-web-elements/dragable-icon.entry.js +1 -1
- package/dist/nylas-web-elements/edit-icon.entry.js +1 -1
- package/dist/nylas-web-elements/envelope-fill-icon.entry.js +1 -1
- package/dist/nylas-web-elements/envelope-icon.entry.js +1 -1
- package/dist/nylas-web-elements/eye-icon.entry.js +1 -1
- package/dist/nylas-web-elements/feedback-icon.entry.js +1 -1
- package/dist/nylas-web-elements/flow-icon.entry.js +1 -1
- package/dist/nylas-web-elements/folder-icon.entry.js +1 -1
- package/dist/nylas-web-elements/forward-icon.entry.js +1 -1
- package/dist/nylas-web-elements/globe-icon.entry.js +1 -1
- package/dist/nylas-web-elements/google-logo-icon.entry.js +1 -1
- package/dist/nylas-web-elements/google-meet-icon.entry.js +1 -1
- package/dist/nylas-web-elements/inbox-icon.entry.js +1 -1
- package/dist/nylas-web-elements/{index-BVtainOy.js → index-BPPwIJj2.js} +2 -2
- package/dist/nylas-web-elements/{index-BVtainOy.js.map → index-BPPwIJj2.js.map} +1 -1
- package/dist/nylas-web-elements/{index-B-KMpdMZ.js → index-Cbn5rIwb.js} +2 -2
- package/dist/nylas-web-elements/index-Cbn5rIwb.js.map +1 -0
- package/dist/nylas-web-elements/index.esm.js +1 -1
- package/dist/nylas-web-elements/info-icon.entry.js +1 -1
- package/dist/nylas-web-elements/input-color-picker.entry.js +1 -1
- package/dist/nylas-web-elements/input-component.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/input-component.entry.js +1 -1
- package/dist/nylas-web-elements/input-component.entry.js.map +1 -1
- package/dist/nylas-web-elements/input-dropdown.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/input-dropdown.entry.js +1 -1
- package/dist/nylas-web-elements/input-dropdown.entry.js.map +1 -1
- package/dist/nylas-web-elements/input-image-url.entry.js +1 -1
- package/dist/nylas-web-elements/italic-icon.entry.js +1 -1
- package/dist/nylas-web-elements/loading-icon.entry.js +1 -1
- package/dist/nylas-web-elements/location-icon.entry.js +1 -1
- package/dist/nylas-web-elements/location-off-icon.entry.js +1 -1
- package/dist/nylas-web-elements/microsoft-logo-icon.entry.js +1 -1
- package/dist/nylas-web-elements/microsoft-teams-icon.entry.js +1 -1
- package/dist/nylas-web-elements/multi-select-dropdown.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/multi-select-dropdown.entry.js +1 -1
- package/dist/nylas-web-elements/multi-select-dropdown.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-additional-participants.entry.js +1 -1
- package/dist/nylas-web-elements/{nylas-api-request-B1V2koVc.js → nylas-api-request-rYAjhY1J.js} +2 -2
- package/dist/nylas-web-elements/{nylas-api-request-B1V2koVc.js.map → nylas-api-request-rYAjhY1J.js.map} +1 -1
- package/dist/nylas-web-elements/nylas-availability-picker.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-booked-event-card.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-booking-calendar-picker.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-booking-confirmation-redirect.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-booking-confirmation-type.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-booking-form-config.entry.js +2 -2
- package/dist/nylas-web-elements/nylas-booking-form.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-buffer-time.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-calendar-picker.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-cancel-booking-form.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-cancellation-policy.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-cancellation-policy.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-cancellation-policy.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-cancelled-event-card.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-confirmation-email.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-confirmed-event-card.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-connected-calendars.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-custom-booking-flow.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-custom-event-slug.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-customize-booking-settings.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-customize-booking-settings.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-customize-booking-settings.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-date-component.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-date-picker.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-date-picker.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-disable-emails.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-editor-tabs-group.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-editor-tabs-group.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-editor-tabs-group.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-editor-tabs.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-editor-tabs.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-editor-tabs.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-event-calendar.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-event-capacity.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-event-description.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-event-description.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-event-description.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-event-duration.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-event-duration.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-event-duration.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-event-info.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-event-limits.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-event-limits.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-event-limits.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-event-location.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-event-location.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-event-location.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-event-timeslot.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-event-title.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-event-title.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-event-title.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-feedback-form.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-form-card.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-form-card.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-form-card.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-limit-future-bookings.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-list-configurations.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-locale-switch.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-logo.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-min-booking-notice.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-min-cancellation-notice.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-notification.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-notification.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-organizer-confirmation-card.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-page-name.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-page-name.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-page-name.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-page-styling.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-participant-booking-calendars.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-participants-custom-availability.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-reminder-emails.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-reminder-time.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-scheduler-editor.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-scheduler-editor.entry.js +3 -3
- package/dist/nylas-web-elements/nylas-scheduler-editor.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-scheduling-method.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-scheduling.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-select-event-type.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-selected-event-card.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-specific-time-availability-picker.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-time-window-picker.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-time-window-picker.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-time-window-picker.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-timeslot-interval.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/nylas-timeslot-interval.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-timeslot-interval.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-timeslot-picker.entry.js +1 -1
- package/dist/nylas-web-elements/nylas-web-elements.esm.js +1 -1
- package/dist/nylas-web-elements/nylas-web-elements.esm.js.map +1 -1
- package/dist/nylas-web-elements/paintbrush-fill-icon.entry.js +1 -1
- package/dist/nylas-web-elements/paintbrush-icon.entry.js +1 -1
- package/dist/nylas-web-elements/people-icon.entry.js +1 -1
- package/dist/nylas-web-elements/person-clipboard-icon.entry.js +1 -1
- package/dist/nylas-web-elements/person-icon.entry.js +1 -1
- package/dist/nylas-web-elements/play-icon.entry.js +1 -1
- package/dist/nylas-web-elements/plus-icon.entry.js +1 -1
- package/dist/nylas-web-elements/radio-button-group.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/radio-button-group.entry.js +1 -1
- package/dist/nylas-web-elements/radio-button-group.entry.js.map +1 -1
- package/dist/nylas-web-elements/refresh-icon.entry.js +1 -1
- package/dist/nylas-web-elements/{register-component-BHk70oxk.js → register-component-Blj8K64f.js} +2 -2
- package/dist/nylas-web-elements/{register-component-BHk70oxk.js.map → register-component-Blj8K64f.js.map} +1 -1
- package/dist/nylas-web-elements/reply-all-icon.entry.js +1 -1
- package/dist/nylas-web-elements/reply-icon.entry.js +1 -1
- package/dist/nylas-web-elements/search-icon.entry.js +1 -1
- package/dist/nylas-web-elements/select-dropdown.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/select-dropdown.entry.js +1 -1
- package/dist/nylas-web-elements/select-dropdown.entry.js.map +1 -1
- package/dist/nylas-web-elements/sent-icon.entry.js +1 -1
- package/dist/nylas-web-elements/spam-icon.entry.js +1 -1
- package/dist/nylas-web-elements/star-icon.entry.js +1 -1
- package/dist/nylas-web-elements/stop-icon.entry.js +1 -1
- package/dist/nylas-web-elements/textarea-component.entry.esm.js.map +1 -1
- package/dist/nylas-web-elements/textarea-component.entry.js +1 -1
- package/dist/nylas-web-elements/textarea-component.entry.js.map +1 -1
- package/dist/nylas-web-elements/time-period-selector.entry.js +1 -1
- package/dist/nylas-web-elements/toggle-switch.entry.js +1 -1
- package/dist/nylas-web-elements/tooltip-component.entry.js +1 -1
- package/dist/nylas-web-elements/translate-icon.entry.js +1 -1
- package/dist/nylas-web-elements/trash-fill-icon.entry.js +1 -1
- package/dist/nylas-web-elements/trash-icon.entry.js +1 -1
- package/dist/nylas-web-elements/underline-icon.entry.js +1 -1
- package/dist/nylas-web-elements/{utils-Bj5Y75fX.js → utils-DhmCcrVs.js} +3 -3
- package/dist/nylas-web-elements/{utils-Bj5Y75fX.js.map → utils-DhmCcrVs.js.map} +1 -1
- package/dist/nylas-web-elements/warning-icon.entry.js +1 -1
- package/dist/nylas-web-elements/zoom-icon.entry.js +1 -1
- package/dist/types/components/design-system/input-component/input-component.d.ts +1 -0
- package/dist/types/components/design-system/multi-select-dropdown/multi-select-dropdown.d.ts +1 -0
- package/dist/types/components/design-system/textarea-component/textarea-component.d.ts +1 -0
- package/dist/types/components/scheduler-editor/nylas-customize-booking-settings/nylas-customize-booking-settings.d.ts +1 -1
- package/dist/types/components/scheduler-editor/nylas-time-window-picker/nylas-time-window-picker.d.ts +1 -0
- package/dist/types/components.d.ts +4 -4
- package/package.json +3 -3
- package/readme.md +1 -1
- package/dist/nylas-web-elements/index-B-KMpdMZ.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nylas-time-window-picker.entry.esm.js","sources":["src/components/scheduler-editor/nylas-time-window-picker/nylas-time-window-picker.scss?tag=nylas-time-window-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-time-window-picker/nylas-time-window-picker.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n display: block;\n position: relative;\n @include default-css-variables;\n}\n\n.time-picker {\n display: inline-block;\n width: 150px;\n font-family: var(--nylas-font-family);\n position: relative;\n\n @media #{$mobile} {\n width: auto;\n }\n\n input {\n width: 150px;\n height: 48px;\n text-align: center;\n font-size: 16px;\n font-family: inherit;\n color: var(--nylas-base-900);\n\n cursor: pointer;\n background: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n @media #{$mobile} {\n width: 88px;\n }\n\n @media #{$small-mobile} {\n width: 68px;\n font-size: 15px;\n }\n\n &.focus {\n background: var(--nylas-base-0);\n }\n\n &:hover,\n &:active {\n border: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n span {\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n }\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n }\n\n p.error {\n color: var(--nylas-error);\n font-size: 0.875rem;\n margin: 0;\n }\n}\n\n.times {\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 border: 1px solid #ddd;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n\n 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: center;\n cursor: pointer;\n\n &.focused {\n background-color: var(--nylas-base-100);\n }\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n margin: 0;\n }\n }\n }\n }\n}\n","import { LANGUAGE_CODE } from '@/common/constants';\nimport { autocompleteTimeFormat, convertTo12HourFormat, convertTo24HourFormat, roundToNearest15Minutes, validateExactTimeFormat, validateTimeFormatInput } from '@/utils/utils';\nimport { Component, h, State, Prop, Event, EventEmitter, Listen, Element, Host, Watch } from '@stencil/core';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\ndayjs.extend(customParseFormat);\n\ntype Time = { id: number; value: string };\n\n/**\n * The `nylas-time-window-picker` component is a time picker that can be used to select a time.\n * @part time-picker - The time picker container\n * @part time-input - The time input\n * @part times - The list of times\n */\n@Component({\n tag: 'nylas-time-window-picker',\n styleUrl: 'nylas-time-window-picker.scss',\n shadow: true,\n})\nexport class TimeInput {\n @Element() el!: HTMLElement;\n private timeInput!: HTMLInputElement;\n private timeMenu!: HTMLElement;\n\n /**\n * The time to display in the input.\n * This is passed by the parent component\n */\n @Prop() time!: string;\n /**\n * This is the start time value if one is set by the parent component.\n * It is useful if this component is used to render an end time which\n * should not be before the start time, defining the earliest selectable time.\n */\n @Prop() minimumStartTime: string | null = null;\n\n /**\n * The placeholder text for the input.\n */\n @Prop() placeholder: string = 'hh:mmam/pm';\n /**\n * The name of the input.\n */\n @Prop() name!: string;\n /**\n * This sets the error state of the input.\n */\n @Prop({ reflect: true }) hasError: boolean = false;\n\n /**\n * The language of the input.\n */\n @Prop() language: LANGUAGE_CODE = LANGUAGE_CODE.en;\n\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /**\n * The error message to display if the time is invalid.\n */\n @State() err: string = '';\n /**\n * Toggle to show the list of times.\n */\n @State() showTimes: boolean = false;\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 * The list of times to display in the dropdown.\n */\n @State() times: Time[] = this.generateTimes();\n /**\n * This is used to scroll to the selected time when the time is changed.\n */\n @State() shouldAutoScroll: boolean = false;\n\n /**\n * This event is fired when the time is changed.\n */\n @Event() timeChange!: EventEmitter<{\n key: string;\n value: string;\n }>;\n\n /**\n * This event is fired when the form has an error. The parent component\n * can listen for this event and display an error message or set form validity.\n */\n @Event() timeWindowFormError!: EventEmitter<{\n key: string;\n message: string;\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.showTimes) {\n this.showTimes = false;\n }\n }\n\n @Watch('time')\n timeChangedHandler() {\n this.validateTimeAgainstMinimum();\n }\n\n @Watch('minimumStartTime')\n minimumStartTimeChangedHandler() {\n this.validateTimeAgainstMinimum();\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, _oldVal: ThemeConfig) {\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 private validateTimeAgainstMinimum() {\n if (this.minimumStartTime) {\n // Parse the minimum start time properly using dayjs\n const minimumTime = dayjs(this.minimumStartTime, 'hh:mma');\n const selectedTime = dayjs(this.time, 'hh:mma');\n\n this.times = this.generateTimes();\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n\n // Check if selected time is before minimum time\n if (selectedTime.isBefore(minimumTime)) {\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n } else {\n // Clear the error if the time is valid\n this.err = '';\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: '',\n });\n }\n } else {\n // Clear any existing error if no minimum start time is set\n this.err = '';\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: '',\n });\n }\n }\n\n componentDidLoad() {\n // Validate time against minimum on initial load\n this.validateTimeAgainstMinimum();\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidRender() {\n if (this.showTimes && this.shouldAutoScroll) {\n const autocompletedTime = autocompleteTimeFormat(this.time);\n const optionIndex = this.times.findIndex(time => time.value === autocompletedTime);\n if (optionIndex > -1) {\n this.shouldAutoScroll = false;\n this.scrollToViewWithinParent(optionIndex);\n }\n return;\n }\n }\n\n private handleTimeChange(_e: Event, input: string) {\n const timePart = input.split(':');\n if (timePart[0] === '00' && timePart[1].slice(-2) == 'pm') {\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n }\n if (!validateTimeFormatInput(input)) {\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n } else {\n this.err = '';\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: '',\n });\n }\n if (this.err) {\n return;\n }\n this.timeChange.emit({\n key: this.el.id,\n value: input,\n });\n }\n\n private handleTimeAutocomplete(event: Event) {\n const targetInput = (event.target as HTMLInputElement)?.value;\n const input = this.language !== LANGUAGE_CODE.en ? convertTo12HourFormat(targetInput) : targetInput;\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n if (!validateTimeFormatInput(input)) {\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n return;\n }\n if (input === '') {\n const newTime = roundToNearest15Minutes().format('hh:mma');\n this.timeChange.emit({\n key: this.el.id,\n value: newTime,\n });\n return;\n }\n if (!validateExactTimeFormat(input)) {\n const autocompletedTime = autocompleteTimeFormat(input);\n this.timeChange.emit({\n key: this.el.id,\n value: autocompletedTime,\n });\n return;\n }\n this.timeChange.emit({\n key: this.el.id,\n value: input,\n });\n }\n\n private handleOnInput(event: Event) {\n const input = (event.target as HTMLInputElement)?.value;\n if (!validateTimeFormatInput(input)) {\n return;\n }\n if (input === '') {\n const newTime = roundToNearest15Minutes().format('hh:mma');\n const optionIndex = this.times.findIndex(time => time.value === newTime);\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n return;\n }\n if (!validateExactTimeFormat(input)) {\n const autocompletedTime = autocompleteTimeFormat(input);\n const optionIndex = this.times.findIndex(time => time.value === autocompletedTime);\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n return;\n }\n }\n\n private generateTimes() {\n const times: Time[] = [];\n let startTime = dayjs().set('hour', 0).set('minute', 0).set('second', 0); // Set to 12:00 am\n if (this.minimumStartTime) {\n startTime = dayjs(this.minimumStartTime, 'hh:mma');\n }\n const diff = startTime.endOf('day').diff(startTime, 'minutes');\n const iterations = Math.round(diff / 15);\n for (let i = 0; i < iterations + 1; i++) {\n // 96 represents the total number of 15-minute increments in a day (24 hours * 60 minutes / 15 minutes)\n const time = startTime.add(i * 15, 'minute');\n if (i == iterations && time.format('hh:mma').includes('am')) {\n break;\n }\n times.push({ id: i, value: time.format('hh:mma') });\n }\n return times;\n }\n\n private handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n if (!this.showTimes) {\n this.showTimes = true;\n this.shouldAutoScroll = true;\n return;\n }\n if (this.ariaActivedescendant === '') {\n this.ariaActivedescendant = this.times[0].id.toString();\n this.focusOption(0);\n } else {\n const currentIndex = this.times.findIndex(time => time.id.toString() === this.ariaActivedescendant);\n const nextIndex = currentIndex + 1 < this.times.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = this.times[nextIndex].id.toString();\n this.focusOption(nextIndex);\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n if (this.ariaActivedescendant === '') {\n this.ariaActivedescendant = this.times[this.times.length - 1].id.toString();\n this.focusOption(this.times.length - 1);\n } else {\n const currentIndex = this.times.findIndex(time => time.id.toString() === this.ariaActivedescendant);\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : this.times.length - 1;\n this.ariaActivedescendant = this.times[prevIndex].id.toString();\n this.focusOption(prevIndex);\n }\n } else if (event.key === 'Escape') {\n this.showTimes = false;\n this.timeInput.focus();\n }\n }\n\n private handleListboxKeydown(e: KeyboardEvent) {\n const items = this.times;\n const currentIndex = items.findIndex(item => item.id.toString() === this.ariaActivedescendant);\n\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].id.toString();\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].id.toString();\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n const option = items[currentIndex];\n this.handleTimeChange(e, option.value);\n this.showTimes = false;\n this.ariaActivedescendant = '';\n this.timeInput.focus();\n }\n } else if (e.key === 'Escape') {\n this.showTimes = false;\n this.timeInput.focus();\n }\n }\n\n scrollToViewWithinParent(optionIndex: number) {\n const option = this.times[optionIndex];\n const childElement = this.el.shadowRoot?.getElementById(option.id.toString()) as HTMLLIElement;\n const parentElement = this.timeMenu;\n\n this.ariaActivedescendant = option.id.toString();\n\n // Scroll child into view within parent\n const childRect = childElement.getBoundingClientRect();\n const parentRect = parentElement.getBoundingClientRect();\n\n if (childRect.top < parentRect.top) {\n // Child is above the visible area of the parent\n parentElement.scrollTop -= parentRect.top - childRect.top;\n } else if (childRect.bottom > parentRect.bottom) {\n // Child is below the visible area of the parent\n parentElement.scrollTop += childRect.bottom - parentRect.bottom;\n }\n\n if (childRect.left < parentRect.left) {\n // Child is to the left of the visible area of the parent\n parentElement.scrollLeft -= parentRect.left - childRect.left;\n } else if (childRect.right > parentRect.right) {\n // Child is to the right of the visible area of the parent\n parentElement.scrollLeft += childRect.right - parentRect.right;\n }\n }\n\n focusOption(index: number) {\n const option = this.times[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.id.toString();\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 render() {\n const is24HourFormat = this.language === LANGUAGE_CODE.en ? false : true;\n return (\n <Host>\n <div class=\"time-picker\" part=\"time-picker\">\n <input\n type=\"text\"\n name={this.name}\n id={this.name}\n part=\"time-input\"\n class={{\n 'time-input': true,\n 'error': !!this.err || this.hasError,\n }}\n ref={el => (this.timeInput = el as HTMLInputElement)}\n value={is24HourFormat ? convertTo24HourFormat(this.time) : this.time}\n onClick={() => {\n this.showTimes = !this.showTimes;\n this.shouldAutoScroll = true;\n }}\n aria-haspopup=\"listbox\"\n aria-label={this.name}\n aria-expanded={this.showTimes ? 'true' : 'false'}\n placeholder={this.placeholder}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n onInput={event => this.handleOnInput(event)}\n onBlur={event => this.handleTimeAutocomplete(event)}\n />\n {this.err && <div class=\"invalid-time-icon\">{/* Icon here */}</div>}\n {this.showTimes && (\n <div class=\"times\" part=\"times\" ref={el => (this.timeMenu = el as HTMLElement)}>\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.times.map(option => (\n <li\n tabindex=\"0\"\n key={option.id}\n id={option.id.toString()}\n class={{\n focused: this.ariaActivedescendant === option.id.toString(),\n }}\n onClick={e => {\n this.handleTimeChange(e, option.value);\n this.showTimes = false;\n this.timeInput.focus();\n }}\n role=\"option\"\n >\n {`${is24HourFormat ? convertTo24HourFormat(option.value) : option.value}`}\n </li>\n ))}\n </ul>\n </div>\n )}\n {!this.showTimes && this.err && (\n <p class=\"error\" id=\"email-error\">\n {this.err}\n </p>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"names":["i18next"],"mappings":";;;;;AAAA,MAAM,wBAAwB,GAAG,iiIAAiiI;;ACQlkI,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC;MAelB,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAoBU,QAAA,IAAgB,CAAA,gBAAA,GAAkB,IAAI;AAKtC,QAAA,IAAW,CAAA,WAAA,GAAW,YAAY;AAQjB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAK1C,QAAA,IAAA,CAAA,QAAQ,GAAkB,aAAa,CAAC,EAAE;AAUzC,QAAA,IAAG,CAAA,GAAA,GAAW,EAAE;AAIhB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAM1B,QAAA,IAAoB,CAAA,oBAAA,GAAW,EAAE;AAIjC,QAAA,IAAA,CAAA,KAAK,GAAW,IAAI,CAAC,aAAa,EAAE;AAIpC,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;AA+X3C;AA1WC,IAAA,kBAAkB,CAAC,KAAiB,EAAA;AAElC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE;QAGjC,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;AAE5C,QAAA,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,SAAS,EAAE;AACpC,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;;;IAK1B,kBAAkB,GAAA;QAChB,IAAI,CAAC,0BAA0B,EAAE;;IAInC,8BAA8B,GAAA;QAC5B,IAAI,CAAC,0BAA0B,EAAE;;IAInC,yBAAyB,CAAC,MAAmB,EAAE,OAAoB,EAAA;AACjE,QAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;;AAG/B,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,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA,EAAG,GAAG,CAAA,CAAE,EAAE,KAAK,CAAC;;;;IAKxC,0BAA0B,GAAA;AAChC,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAEzB,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC;YAC1D,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC;AAE/C,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE;YACjC,MAAM,YAAY,GAAGA,QAAO,CAAC,CAAC,CAAC,sCAAsC,CAAC;AAGtE,YAAA,IAAI,YAAY,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;AACtC,gBAAA,IAAI,CAAC,GAAG,GAAG,YAAY;AACvB,gBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC5B,oBAAA,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;AACf,oBAAA,OAAO,EAAE,YAAY;AACtB,iBAAA,CAAC;;iBACG;AAEL,gBAAA,IAAI,CAAC,GAAG,GAAG,EAAE;AACb,gBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC5B,oBAAA,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;AACf,oBAAA,OAAO,EAAE,EAAE;AACZ,iBAAA,CAAC;;;aAEC;AAEL,YAAA,IAAI,CAAC,GAAG,GAAG,EAAE;AACb,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC5B,gBAAA,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;AACf,gBAAA,OAAO,EAAE,EAAE;AACZ,aAAA,CAAC;;;IAIN,gBAAgB,GAAA;QAEd,IAAI,CAAC,0BAA0B,EAAE;AACjC,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC;;IAGzC,kBAAkB,GAAA;QAChB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC3C,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC;AAC3D,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,iBAAiB,CAAC;AAClF,YAAA,IAAI,WAAW,GAAG,CAAC,CAAC,EAAE;AACpB,gBAAA,IAAI,CAAC,gBAAgB,GAAG,KAAK;AAC7B,gBAAA,IAAI,CAAC,wBAAwB,CAAC,WAAW,CAAC;;YAE5C;;;IAII,gBAAgB,CAAC,EAAS,EAAE,KAAa,EAAA;QAC/C,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;QACjC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE;YACzD,MAAM,YAAY,GAAGA,QAAO,CAAC,CAAC,CAAC,sCAAsC,CAAC;AACtE,YAAA,IAAI,CAAC,GAAG,GAAG,YAAY;AACvB,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC5B,gBAAA,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;AACf,gBAAA,OAAO,EAAE,YAAY;AACtB,aAAA,CAAC;;AAEJ,QAAA,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE;YACnC,MAAM,YAAY,GAAGA,QAAO,CAAC,CAAC,CAAC,sCAAsC,CAAC;AACtE,YAAA,IAAI,CAAC,GAAG,GAAG,YAAY;AACvB,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC5B,gBAAA,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;AACf,gBAAA,OAAO,EAAE,YAAY;AACtB,aAAA,CAAC;;aACG;AACL,YAAA,IAAI,CAAC,GAAG,GAAG,EAAE;AACb,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC5B,gBAAA,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;AACf,gBAAA,OAAO,EAAE,EAAE;AACZ,aAAA,CAAC;;AAEJ,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ;;AAEF,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,YAAA,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;AACf,YAAA,KAAK,EAAE,KAAK;AACb,SAAA,CAAC;;AAGI,IAAA,sBAAsB,CAAC,KAAY,EAAA;AACzC,QAAA,MAAM,WAAW,GAAI,KAAK,CAAC,MAA2B,EAAE,KAAK;QAC7D,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC,EAAE,GAAG,qBAAqB,CAAC,WAAW,CAAC,GAAG,WAAW;QACnG,MAAM,YAAY,GAAGA,QAAO,CAAC,CAAC,CAAC,sCAAsC,CAAC;AACtE,QAAA,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE;AACnC,YAAA,IAAI,CAAC,GAAG,GAAG,YAAY;AACvB,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC5B,gBAAA,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;AACf,gBAAA,OAAO,EAAE,YAAY;AACtB,aAAA,CAAC;YACF;;AAEF,QAAA,IAAI,KAAK,KAAK,EAAE,EAAE;YAChB,MAAM,OAAO,GAAG,uBAAuB,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC;AAC1D,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,gBAAA,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;AACf,gBAAA,KAAK,EAAE,OAAO;AACf,aAAA,CAAC;YACF;;AAEF,QAAA,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE;AACnC,YAAA,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,KAAK,CAAC;AACvD,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,gBAAA,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;AACf,gBAAA,KAAK,EAAE,iBAAiB;AACzB,aAAA,CAAC;YACF;;AAEF,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,YAAA,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;AACf,YAAA,KAAK,EAAE,KAAK;AACb,SAAA,CAAC;;AAGI,IAAA,aAAa,CAAC,KAAY,EAAA;AAChC,QAAA,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,EAAE,KAAK;AACvD,QAAA,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE;YACnC;;AAEF,QAAA,IAAI,KAAK,KAAK,EAAE,EAAE;YAChB,MAAM,OAAO,GAAG,uBAAuB,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC;AAC1D,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;AACxE,YAAA,IAAI,WAAW,GAAG,CAAC,CAAC,EAAE;AACpB,gBAAA,IAAI,CAAC,wBAAwB,CAAC,WAAW,CAAC;;YAE5C;;AAEF,QAAA,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE;AACnC,YAAA,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,KAAK,CAAC;AACvD,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,iBAAiB,CAAC;AAClF,YAAA,IAAI,WAAW,GAAG,CAAC,CAAC,EAAE;AACpB,gBAAA,IAAI,CAAC,wBAAwB,CAAC,WAAW,CAAC;;YAE5C;;;IAII,aAAa,GAAA;QACnB,MAAM,KAAK,GAAW,EAAE;QACxB,IAAI,SAAS,GAAG,KAAK,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;AACxE,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC;;AAEpD,QAAA,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;QAC9D,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC;AACxC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;AAEvC,YAAA,MAAM,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,QAAQ,CAAC;AAC5C,YAAA,IAAI,CAAC,IAAI,UAAU,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBAC3D;;AAEF,YAAA,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;;AAErD,QAAA,OAAO,KAAK;;AAGN,IAAA,qBAAqB,CAAC,KAAoB,EAAA;AAChD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YAC7B,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AACnB,gBAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,gBAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;gBAC5B;;AAEF,YAAA,IAAI,IAAI,CAAC,oBAAoB,KAAK,EAAE,EAAE;AACpC,gBAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE;AACvD,gBAAA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;;iBACd;gBACL,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,oBAAoB,CAAC;gBACnG,MAAM,SAAS,GAAG,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;AAC7E,gBAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE;AAC/D,gBAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;;;AAExB,aAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;YAClC,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,IAAI,CAAC,oBAAoB,KAAK,EAAE,EAAE;gBACpC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE;gBAC3E,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;;iBAClC;gBACL,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,oBAAoB,CAAC;gBACnG,MAAM,SAAS,GAAG,YAAY,GAAG,CAAC,IAAI,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;AAClF,gBAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE;AAC/D,gBAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;;;AAExB,aAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;AACjC,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;;;AAIlB,IAAA,oBAAoB,CAAC,CAAgB,EAAA;AAC3C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK;QACxB,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,oBAAoB,CAAC;AAE9F,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,KAAK,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE;YAC7D,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,MAAM,SAAS,GAAG,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;AACxE,YAAA,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE;AAC1D,YAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;;AACtB,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,KAAK,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE;YACjE,CAAC,CAAC,cAAc,EAAE;YAClB,MAAM,SAAS,GAAG,YAAY,GAAG,CAAC,IAAI,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC;AAC7E,YAAA,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE;AAC1D,YAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;;AACtB,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YAC5B,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;AAC7B,gBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;gBAClC,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC;AACtC,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,gBAAA,IAAI,CAAC,oBAAoB,GAAG,EAAE;AAC9B,gBAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;;;AAEnB,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;AAC7B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;;;AAI1B,IAAA,wBAAwB,CAAC,WAAmB,EAAA;QAC1C,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC;AACtC,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAkB;AAC9F,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ;QAEnC,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE;AAGhD,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,qBAAqB,EAAE;AACtD,QAAA,MAAM,UAAU,GAAG,aAAa,CAAC,qBAAqB,EAAE;QAExD,IAAI,SAAS,CAAC,GAAG,GAAG,UAAU,CAAC,GAAG,EAAE;YAElC,aAAa,CAAC,SAAS,IAAI,UAAU,CAAC,GAAG,GAAG,SAAS,CAAC,GAAG;;aACpD,IAAI,SAAS,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE;YAE/C,aAAa,CAAC,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM;;QAGjE,IAAI,SAAS,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE;YAEpC,aAAa,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI;;aACvD,IAAI,SAAS,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,EAAE;YAE7C,aAAa,CAAC,UAAU,IAAI,SAAS,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK;;;AAIlE,IAAA,WAAW,CAAC,KAAa,EAAA;QACvB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAChC,QAAA,IAAI,CAAC,MAAM;YAAE;QAEb,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE;AACtC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,CAAC,SAAS,CAAkB;QAE9E,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,EAAE;AACf,YAAA,OAAO,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;;;IAIpE,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC,EAAE,GAAG,KAAK,GAAG,IAAI;QACxE,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,EAAA,EACzC,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;gBAClB,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ;AACrC,aAAA,EACD,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAsB,CAAC,EACpD,KAAK,EAAE,cAAc,GAAG,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,EACpE,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;AAChC,gBAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;aAC7B,EACa,eAAA,EAAA,SAAS,EACX,YAAA,EAAA,IAAI,CAAC,IAAI,EACN,eAAA,EAAA,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,OAAO,EAChD,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAC7C,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,EACnD,CAAA,EACD,IAAI,CAAC,GAAG,IAAI,4DAAK,KAAK,EAAC,mBAAmB,EAAwB,CAAA,EAClE,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAiB,CAAC,EAAA,EAC5E,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAA,YAAA,EAAa,IAAI,CAAC,IAAI,EAAA,uBAAA,EAAyB,IAAI,CAAC,oBAAoB,EAAE,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EACnJ,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,KACpB,CACE,CAAA,IAAA,EAAA,EAAA,QAAQ,EAAC,GAAG,EACZ,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,EACxB,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,oBAAoB,KAAK,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE;AAC5D,aAAA,EACD,OAAO,EAAE,CAAC,IAAG;gBACX,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC;AACtC,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,gBAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;AACxB,aAAC,EACD,IAAI,EAAC,QAAQ,EAEZ,EAAA,CAAG,EAAA,cAAc,GAAG,qBAAqB,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAA,CAAE,CACtE,CACN,CAAC,CACC,CACD,CACP,EACA,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,GAAG,KAC1B,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAC,EAAE,EAAC,aAAa,EAAA,EAC9B,IAAI,CAAC,GAAG,CACP,CACL,CACG,CACD;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"nylas-time-window-picker.entry.esm.js","sources":["src/components/scheduler-editor/nylas-time-window-picker/nylas-time-window-picker.scss?tag=nylas-time-window-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-time-window-picker/nylas-time-window-picker.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n display: block;\n position: relative;\n @include default-css-variables;\n}\n\n.time-picker {\n display: inline-block;\n width: 150px;\n font-family: var(--nylas-font-family);\n position: relative;\n\n @media #{$mobile} {\n width: auto;\n }\n\n input {\n width: 150px;\n height: 48px;\n text-align: center;\n font-size: 16px;\n font-family: inherit;\n color: var(--nylas-base-900);\n\n cursor: pointer;\n background: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n @media #{$mobile} {\n width: 88px;\n }\n\n @media #{$small-mobile} {\n width: 68px;\n font-size: 15px;\n }\n\n &.focus {\n background: var(--nylas-base-0);\n }\n\n &:hover,\n &:active {\n border: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n span {\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n }\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n }\n\n p.error {\n color: var(--nylas-error);\n font-size: 0.875rem;\n margin: 0;\n }\n}\n\n.times {\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 border: 1px solid #ddd;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n\n 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: center;\n cursor: pointer;\n\n &.focused {\n background-color: var(--nylas-base-100);\n }\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n margin: 0;\n }\n }\n }\n }\n}\n","import { LANGUAGE_CODE } from '@/common/constants';\nimport { autocompleteTimeFormat, convertTo12HourFormat, convertTo24HourFormat, roundToNearest15Minutes, validateExactTimeFormat, validateTimeFormatInput } from '@/utils/utils';\nimport { Component, h, State, Prop, Event, EventEmitter, Listen, Element, Host, Watch } from '@stencil/core';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\ndayjs.extend(customParseFormat);\n\ntype Time = { id: number; value: string };\n\n/**\n * The `nylas-time-window-picker` component is a time picker that can be used to select a time.\n * @part time-picker - The time picker container\n * @part time-input - The time input\n * @part times - The list of times\n */\n@Component({\n tag: 'nylas-time-window-picker',\n styleUrl: 'nylas-time-window-picker.scss',\n shadow: true,\n})\nexport class TimeInput {\n @Element() el!: HTMLElement;\n private timeInput!: HTMLInputElement;\n private timeMenu!: HTMLElement;\n\n /**\n * The time to display in the input.\n * This is passed by the parent component\n */\n @Prop() time!: string;\n /**\n * This is the start time value if one is set by the parent component.\n * It is useful if this component is used to render an end time which\n * should not be before the start time, defining the earliest selectable time.\n */\n @Prop() minimumStartTime: string | null = null;\n\n /**\n * The placeholder text for the input.\n */\n @Prop() placeholder: string = 'hh:mmam/pm';\n /**\n * The name of the input.\n */\n @Prop() name!: string;\n /**\n * This sets the error state of the input.\n */\n @Prop({ reflect: true }) hasError: boolean = false;\n\n /**\n * The language of the input.\n */\n @Prop() language: LANGUAGE_CODE = LANGUAGE_CODE.en;\n\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /**\n * The error message to display if the time is invalid.\n */\n @State() err: string = '';\n /**\n * Toggle to show the list of times.\n */\n @State() showTimes: boolean = false;\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 * The list of times to display in the dropdown.\n */\n @State() times: Time[] = this.generateTimes();\n /**\n * This is used to scroll to the selected time when the time is changed.\n */\n @State() shouldAutoScroll: boolean = false;\n\n /**\n * This event is fired when the time is changed.\n */\n @Event() timeChange!: EventEmitter<{\n key: string;\n value: string;\n }>;\n\n /**\n * This event is fired when the form has an error. The parent component\n * can listen for this event and display an error message or set form validity.\n */\n @Event() timeWindowFormError!: EventEmitter<{\n key: string;\n message: string;\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.showTimes) {\n this.showTimes = false;\n }\n }\n\n @Watch('time')\n timeChangedHandler() {\n this.validateTimeAgainstMinimum();\n }\n\n @Watch('minimumStartTime')\n minimumStartTimeChangedHandler() {\n this.validateTimeAgainstMinimum();\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, _oldVal: ThemeConfig) {\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 private validateTimeAgainstMinimum() {\n if (this.minimumStartTime) {\n // Parse the minimum start time properly using dayjs\n const minimumTime = dayjs(this.minimumStartTime, 'hh:mma');\n const selectedTime = dayjs(this.time, 'hh:mma');\n\n this.times = this.generateTimes();\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n\n // Check if selected time is before minimum time\n if (selectedTime.isBefore(minimumTime)) {\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n } else {\n // Clear the error if the time is valid\n this.err = '';\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: '',\n });\n }\n } else {\n // Clear any existing error if no minimum start time is set\n this.err = '';\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: '',\n });\n }\n }\n\n componentWillLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidLoad() {\n // Validate time against minimum on initial load\n this.validateTimeAgainstMinimum();\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidRender() {\n if (this.showTimes && this.shouldAutoScroll) {\n const autocompletedTime = autocompleteTimeFormat(this.time);\n const optionIndex = this.times.findIndex(time => time.value === autocompletedTime);\n if (optionIndex > -1) {\n this.shouldAutoScroll = false;\n this.scrollToViewWithinParent(optionIndex);\n }\n return;\n }\n }\n\n private handleTimeChange(_e: Event, input: string) {\n const timePart = input.split(':');\n if (timePart[0] === '00' && timePart[1].slice(-2) == 'pm') {\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n }\n if (!validateTimeFormatInput(input)) {\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n } else {\n this.err = '';\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: '',\n });\n }\n if (this.err) {\n return;\n }\n this.timeChange.emit({\n key: this.el.id,\n value: input,\n });\n }\n\n private handleTimeAutocomplete(event: Event) {\n const targetInput = (event.target as HTMLInputElement)?.value;\n const input = this.language !== LANGUAGE_CODE.en ? convertTo12HourFormat(targetInput) : targetInput;\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n if (!validateTimeFormatInput(input)) {\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n return;\n }\n if (input === '') {\n const newTime = roundToNearest15Minutes().format('hh:mma');\n this.timeChange.emit({\n key: this.el.id,\n value: newTime,\n });\n return;\n }\n if (!validateExactTimeFormat(input)) {\n const autocompletedTime = autocompleteTimeFormat(input);\n this.timeChange.emit({\n key: this.el.id,\n value: autocompletedTime,\n });\n return;\n }\n this.timeChange.emit({\n key: this.el.id,\n value: input,\n });\n }\n\n private handleOnInput(event: Event) {\n const input = (event.target as HTMLInputElement)?.value;\n if (!validateTimeFormatInput(input)) {\n return;\n }\n if (input === '') {\n const newTime = roundToNearest15Minutes().format('hh:mma');\n const optionIndex = this.times.findIndex(time => time.value === newTime);\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n return;\n }\n if (!validateExactTimeFormat(input)) {\n const autocompletedTime = autocompleteTimeFormat(input);\n const optionIndex = this.times.findIndex(time => time.value === autocompletedTime);\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n return;\n }\n }\n\n private generateTimes() {\n const times: Time[] = [];\n let startTime = dayjs().set('hour', 0).set('minute', 0).set('second', 0); // Set to 12:00 am\n if (this.minimumStartTime) {\n startTime = dayjs(this.minimumStartTime, 'hh:mma');\n }\n const diff = startTime.endOf('day').diff(startTime, 'minutes');\n const iterations = Math.round(diff / 15);\n for (let i = 0; i < iterations + 1; i++) {\n // 96 represents the total number of 15-minute increments in a day (24 hours * 60 minutes / 15 minutes)\n const time = startTime.add(i * 15, 'minute');\n if (i == iterations && time.format('hh:mma').includes('am')) {\n break;\n }\n times.push({ id: i, value: time.format('hh:mma') });\n }\n return times;\n }\n\n private handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n if (!this.showTimes) {\n this.showTimes = true;\n this.shouldAutoScroll = true;\n return;\n }\n if (this.ariaActivedescendant === '') {\n this.ariaActivedescendant = this.times[0].id.toString();\n this.focusOption(0);\n } else {\n const currentIndex = this.times.findIndex(time => time.id.toString() === this.ariaActivedescendant);\n const nextIndex = currentIndex + 1 < this.times.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = this.times[nextIndex].id.toString();\n this.focusOption(nextIndex);\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n if (this.ariaActivedescendant === '') {\n this.ariaActivedescendant = this.times[this.times.length - 1].id.toString();\n this.focusOption(this.times.length - 1);\n } else {\n const currentIndex = this.times.findIndex(time => time.id.toString() === this.ariaActivedescendant);\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : this.times.length - 1;\n this.ariaActivedescendant = this.times[prevIndex].id.toString();\n this.focusOption(prevIndex);\n }\n } else if (event.key === 'Escape') {\n this.showTimes = false;\n this.timeInput.focus();\n }\n }\n\n private handleListboxKeydown(e: KeyboardEvent) {\n const items = this.times;\n const currentIndex = items.findIndex(item => item.id.toString() === this.ariaActivedescendant);\n\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].id.toString();\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].id.toString();\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n const option = items[currentIndex];\n this.handleTimeChange(e, option.value);\n this.showTimes = false;\n this.ariaActivedescendant = '';\n this.timeInput.focus();\n }\n } else if (e.key === 'Escape') {\n this.showTimes = false;\n this.timeInput.focus();\n }\n }\n\n scrollToViewWithinParent(optionIndex: number) {\n const option = this.times[optionIndex];\n const childElement = this.el.shadowRoot?.getElementById(option.id.toString()) as HTMLLIElement;\n const parentElement = this.timeMenu;\n\n this.ariaActivedescendant = option.id.toString();\n\n // Scroll child into view within parent\n const childRect = childElement.getBoundingClientRect();\n const parentRect = parentElement.getBoundingClientRect();\n\n if (childRect.top < parentRect.top) {\n // Child is above the visible area of the parent\n parentElement.scrollTop -= parentRect.top - childRect.top;\n } else if (childRect.bottom > parentRect.bottom) {\n // Child is below the visible area of the parent\n parentElement.scrollTop += childRect.bottom - parentRect.bottom;\n }\n\n if (childRect.left < parentRect.left) {\n // Child is to the left of the visible area of the parent\n parentElement.scrollLeft -= parentRect.left - childRect.left;\n } else if (childRect.right > parentRect.right) {\n // Child is to the right of the visible area of the parent\n parentElement.scrollLeft += childRect.right - parentRect.right;\n }\n }\n\n focusOption(index: number) {\n const option = this.times[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.id.toString();\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 render() {\n const is24HourFormat = this.language === LANGUAGE_CODE.en ? false : true;\n return (\n <Host>\n <div class=\"time-picker\" part=\"time-picker\">\n <input\n type=\"text\"\n name={this.name}\n id={this.name}\n part=\"time-input\"\n class={{\n 'time-input': true,\n 'error': !!this.err || this.hasError,\n }}\n ref={el => (this.timeInput = el as HTMLInputElement)}\n value={is24HourFormat ? convertTo24HourFormat(this.time) : this.time}\n onClick={() => {\n this.showTimes = !this.showTimes;\n this.shouldAutoScroll = true;\n }}\n aria-haspopup=\"listbox\"\n aria-label={this.name}\n aria-expanded={this.showTimes ? 'true' : 'false'}\n placeholder={this.placeholder}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n onInput={event => this.handleOnInput(event)}\n onBlur={event => this.handleTimeAutocomplete(event)}\n />\n {this.err && <div class=\"invalid-time-icon\">{/* Icon here */}</div>}\n {this.showTimes && (\n <div class=\"times\" part=\"times\" ref={el => (this.timeMenu = el as HTMLElement)}>\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.times.map(option => (\n <li\n tabindex=\"0\"\n key={option.id}\n id={option.id.toString()}\n class={{\n focused: this.ariaActivedescendant === option.id.toString(),\n }}\n onClick={e => {\n this.handleTimeChange(e, option.value);\n this.showTimes = false;\n this.timeInput.focus();\n }}\n role=\"option\"\n >\n {`${is24HourFormat ? convertTo24HourFormat(option.value) : option.value}`}\n </li>\n ))}\n </ul>\n </div>\n )}\n {!this.showTimes && this.err && (\n <p class=\"error\" id=\"email-error\">\n {this.err}\n </p>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"names":["i18next"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as s,a as e,h as i,d as t,e as a}from"./index-B-KMpdMZ.js";import{L as r}from"./constants-DhnshuDN.js";import{d as o,i as n,N as l,O as c,E as h,P as f,Q as d,G as y}from"./utils-Bj5Y75fX.js";import{c as m}from"./customParseFormat-Bk5PI6Cs.js";const p=':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}.time-picker{display:inline-block;width:150px;font-family:var(--nylas-font-family);position:relative}@media screen and (max-width: 768px){.time-picker{width:auto}}.time-picker input{width:150px;height:48px;text-align:center;font-size:16px;font-family:inherit;color:var(--nylas-base-900);cursor:pointer;background:var(--nylas-base-0);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}@media screen and (max-width: 768px){.time-picker input{width:88px}}@media screen and (max-width: 504px){.time-picker input{width:68px;font-size:15px}}.time-picker input.focus{background:var(--nylas-base-0)}.time-picker input:hover,.time-picker input:active{border:1px solid var(--nylas-primary)}.time-picker input:active{outline:2px solid var(--nylas-primary)}.time-picker input span.open{transform:rotate(90deg)}.time-picker input span.closed{transform:rotate(270deg)}.time-picker input.error{border:1px solid var(--nylas-error)}.time-picker p.error{color:var(--nylas-error);font-size:0.875rem;margin:0}.times{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;border:1px solid #ddd;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.times ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.times 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:center;cursor:pointer}.times ul li.focused{background-color:var(--nylas-base-100)}.times ul li:hover,.times ul li:focus{background-color:var(--nylas-base-100)}.times ul li label{display:flex;align-items:center;gap:0.5rem}.times ul li label input{margin:0}';o.extend(m);const b=class{constructor(i){s(this,i);this.timeChange=e(this,"timeChange",7);this.timeWindowFormError=e(this,"timeWindowFormError",7);this.minimumStartTime=null;this.placeholder="hh:mmam/pm";this.hasError=false;this.language=r.en;this.err="";this.showTimes=false;this.ariaActivedescendant="";this.times=this.generateTimes();this.shouldAutoScroll=false}handleOutsideClick(s){const e=s.composedPath();const i=e.includes(this.el);if(!i&&this.showTimes){this.showTimes=false}}timeChangedHandler(){this.validateTimeAgainstMinimum()}minimumStartTimeChangedHandler(){this.validateTimeAgainstMinimum()}themeConfigChangedHandler(s,e){this.applyThemeConfig(s)}applyThemeConfig(s){if(s){for(const[e,i]of Object.entries(s)){this.el.style.setProperty(`${e}`,i)}}}validateTimeAgainstMinimum(){if(this.minimumStartTime){const s=o(this.minimumStartTime,"hh:mma");const e=o(this.time,"hh:mma");this.times=this.generateTimes();const i=n.t("nylasTimeWindowPicker.errors.invalid");if(e.isBefore(s)){this.err=i;this.timeWindowFormError.emit({key:this.el.id,message:i})}else{this.err="";this.timeWindowFormError.emit({key:this.el.id,message:""})}}else{this.err="";this.timeWindowFormError.emit({key:this.el.id,message:""})}}componentDidLoad(){this.validateTimeAgainstMinimum();this.applyThemeConfig(this.themeConfig)}componentDidRender(){if(this.showTimes&&this.shouldAutoScroll){const s=l(this.time);const e=this.times.findIndex((e=>e.value===s));if(e>-1){this.shouldAutoScroll=false;this.scrollToViewWithinParent(e)}return}}handleTimeChange(s,e){const i=e.split(":");if(i[0]==="00"&&i[1].slice(-2)=="pm"){const s=n.t("nylasTimeWindowPicker.errors.invalid");this.err=s;this.timeWindowFormError.emit({key:this.el.id,message:s})}if(!c(e)){const s=n.t("nylasTimeWindowPicker.errors.invalid");this.err=s;this.timeWindowFormError.emit({key:this.el.id,message:s})}else{this.err="";this.timeWindowFormError.emit({key:this.el.id,message:""})}if(this.err){return}this.timeChange.emit({key:this.el.id,value:e})}handleTimeAutocomplete(s){const e=s.target?.value;const i=this.language!==r.en?h(e):e;const t=n.t("nylasTimeWindowPicker.errors.invalid");if(!c(i)){this.err=t;this.timeWindowFormError.emit({key:this.el.id,message:t});return}if(i===""){const s=f().format("hh:mma");this.timeChange.emit({key:this.el.id,value:s});return}if(!d(i)){const s=l(i);this.timeChange.emit({key:this.el.id,value:s});return}this.timeChange.emit({key:this.el.id,value:i})}handleOnInput(s){const e=s.target?.value;if(!c(e)){return}if(e===""){const s=f().format("hh:mma");const e=this.times.findIndex((e=>e.value===s));if(e>-1){this.scrollToViewWithinParent(e)}return}if(!d(e)){const s=l(e);const i=this.times.findIndex((e=>e.value===s));if(i>-1){this.scrollToViewWithinParent(i)}return}}generateTimes(){const s=[];let e=o().set("hour",0).set("minute",0).set("second",0);if(this.minimumStartTime){e=o(this.minimumStartTime,"hh:mma")}const i=e.endOf("day").diff(e,"minutes");const t=Math.round(i/15);for(let i=0;i<t+1;i++){const a=e.add(i*15,"minute");if(i==t&&a.format("hh:mma").includes("am")){break}s.push({id:i,value:a.format("hh:mma")})}return s}handleComboboxKeyDown(s){if(s.key==="ArrowDown"){s.preventDefault();if(!this.showTimes){this.showTimes=true;this.shouldAutoScroll=true;return}if(this.ariaActivedescendant===""){this.ariaActivedescendant=this.times[0].id.toString();this.focusOption(0)}else{const s=this.times.findIndex((s=>s.id.toString()===this.ariaActivedescendant));const e=s+1<this.times.length?s+1:0;this.ariaActivedescendant=this.times[e].id.toString();this.focusOption(e)}}else if(s.key==="ArrowUp"){s.preventDefault();if(this.ariaActivedescendant===""){this.ariaActivedescendant=this.times[this.times.length-1].id.toString();this.focusOption(this.times.length-1)}else{const s=this.times.findIndex((s=>s.id.toString()===this.ariaActivedescendant));const e=s-1>=0?s-1:this.times.length-1;this.ariaActivedescendant=this.times[e].id.toString();this.focusOption(e)}}else if(s.key==="Escape"){this.showTimes=false;this.timeInput.focus()}}handleListboxKeydown(s){const e=this.times;const i=e.findIndex((s=>s.id.toString()===this.ariaActivedescendant));if(s.key==="ArrowDown"||s.key==="Tab"&&!s.shiftKey){s.preventDefault();const t=i+1<e.length?i+1:0;this.ariaActivedescendant=e[t].id.toString();this.focusOption(t)}else if(s.key==="ArrowUp"||s.key==="Tab"&&s.shiftKey){s.preventDefault();const t=i-1>=0?i-1:e.length-1;this.ariaActivedescendant=e[t].id.toString();this.focusOption(t)}else if(s.key==="Enter"){s.preventDefault();if(this.ariaActivedescendant){const t=e[i];this.handleTimeChange(s,t.value);this.showTimes=false;this.ariaActivedescendant="";this.timeInput.focus()}}else if(s.key==="Escape"){this.showTimes=false;this.timeInput.focus()}}scrollToViewWithinParent(s){const e=this.times[s];const i=this.el.shadowRoot?.getElementById(e.id.toString());const t=this.timeMenu;this.ariaActivedescendant=e.id.toString();const a=i.getBoundingClientRect();const r=t.getBoundingClientRect();if(a.top<r.top){t.scrollTop-=r.top-a.top}else if(a.bottom>r.bottom){t.scrollTop+=a.bottom-r.bottom}if(a.left<r.left){t.scrollLeft-=r.left-a.left}else if(a.right>r.right){t.scrollLeft+=a.right-r.right}}focusOption(s){const e=this.times[s];if(!e)return;const i=e.id.toString();const t=this.el.shadowRoot?.getElementById(i);if(t){t.focus();t.scrollIntoView({behavior:"smooth",block:"nearest"})}}render(){const s=this.language===r.en?false:true;return i(t,{key:"e6875e718b52092c355afb43e83bce77afb9fe5b"},i("div",{key:"a1c69ac15ff9e4f29cf9dd607aaea9042d18f6dc",class:"time-picker",part:"time-picker"},i("input",{key:"ac4b00851c6c9b58554b7e1f33375934416b4e2c",type:"text",name:this.name,id:this.name,part:"time-input",class:{"time-input":true,error:!!this.err||this.hasError},ref:s=>this.timeInput=s,value:s?y(this.time):this.time,onClick:()=>{this.showTimes=!this.showTimes;this.shouldAutoScroll=true},"aria-haspopup":"listbox","aria-label":this.name,"aria-expanded":this.showTimes?"true":"false",placeholder:this.placeholder,onKeyDown:s=>this.handleComboboxKeyDown(s),onInput:s=>this.handleOnInput(s),onBlur:s=>this.handleTimeAutocomplete(s)}),this.err&&i("div",{key:"1813ff07a1f974a019834c408f1edc68f3922292",class:"invalid-time-icon"}),this.showTimes&&i("div",{key:"a3d8d3d7909383ab591f7ba77131d833f398242c",class:"times",part:"times",ref:s=>this.timeMenu=s},i("ul",{key:"bcb839ce48b5a6fe14294acd4047f79b73855289",tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:s=>this.handleListboxKeydown(s)},this.times.map((e=>i("li",{tabindex:"0",key:e.id,id:e.id.toString(),class:{focused:this.ariaActivedescendant===e.id.toString()},onClick:s=>{this.handleTimeChange(s,e.value);this.showTimes=false;this.timeInput.focus()},role:"option"},`${s?y(e.value):e.value}`))))),!this.showTimes&&this.err&&i("p",{key:"9a4aa5cc17b643dff64659c7b05c5b8afe819b78",class:"error",id:"email-error"},this.err)))}get el(){return a(this)}static get watchers(){return{time:["timeChangedHandler"],minimumStartTime:["minimumStartTimeChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};b.style=p;export{b as nylas_time_window_picker};
|
|
1
|
+
import{r as s,a as e,h as i,d as t,e as a}from"./index-Cbn5rIwb.js";import{L as r}from"./constants-DhnshuDN.js";import{d as o,i as n,N as l,O as c,E as h,P as d,Q as f,G as y}from"./utils-DhmCcrVs.js";import{c as m}from"./customParseFormat-BJNMxHY2.js";const p=':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}.time-picker{display:inline-block;width:150px;font-family:var(--nylas-font-family);position:relative}@media screen and (max-width: 768px){.time-picker{width:auto}}.time-picker input{width:150px;height:48px;text-align:center;font-size:16px;font-family:inherit;color:var(--nylas-base-900);cursor:pointer;background:var(--nylas-base-0);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}@media screen and (max-width: 768px){.time-picker input{width:88px}}@media screen and (max-width: 504px){.time-picker input{width:68px;font-size:15px}}.time-picker input.focus{background:var(--nylas-base-0)}.time-picker input:hover,.time-picker input:active{border:1px solid var(--nylas-primary)}.time-picker input:active{outline:2px solid var(--nylas-primary)}.time-picker input span.open{transform:rotate(90deg)}.time-picker input span.closed{transform:rotate(270deg)}.time-picker input.error{border:1px solid var(--nylas-error)}.time-picker p.error{color:var(--nylas-error);font-size:0.875rem;margin:0}.times{display:block;margin-top:0.5rem;background-color:var(--nylas-base-0);width:100%;max-height:336px;overflow:auto;border:1px solid #ddd;z-index:1;border-radius:4px;position:absolute;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.0509803922);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1019607843)}.times ul{padding:0;list-style-type:none;color:var(--nylas-base-900);max-height:336px}.times 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:center;cursor:pointer}.times ul li.focused{background-color:var(--nylas-base-100)}.times ul li:hover,.times ul li:focus{background-color:var(--nylas-base-100)}.times ul li label{display:flex;align-items:center;gap:0.5rem}.times ul li label input{margin:0}';o.extend(m);const b=class{constructor(i){s(this,i);this.timeChange=e(this,"timeChange",7);this.timeWindowFormError=e(this,"timeWindowFormError",7);this.minimumStartTime=null;this.placeholder="hh:mmam/pm";this.hasError=false;this.language=r.en;this.err="";this.showTimes=false;this.ariaActivedescendant="";this.times=this.generateTimes();this.shouldAutoScroll=false}handleOutsideClick(s){const e=s.composedPath();const i=e.includes(this.el);if(!i&&this.showTimes){this.showTimes=false}}timeChangedHandler(){this.validateTimeAgainstMinimum()}minimumStartTimeChangedHandler(){this.validateTimeAgainstMinimum()}themeConfigChangedHandler(s,e){this.applyThemeConfig(s)}applyThemeConfig(s){if(s){for(const[e,i]of Object.entries(s)){this.el.style.setProperty(`${e}`,i)}}}validateTimeAgainstMinimum(){if(this.minimumStartTime){const s=o(this.minimumStartTime,"hh:mma");const e=o(this.time,"hh:mma");this.times=this.generateTimes();const i=n.t("nylasTimeWindowPicker.errors.invalid");if(e.isBefore(s)){this.err=i;this.timeWindowFormError.emit({key:this.el.id,message:i})}else{this.err="";this.timeWindowFormError.emit({key:this.el.id,message:""})}}else{this.err="";this.timeWindowFormError.emit({key:this.el.id,message:""})}}componentWillLoad(){this.applyThemeConfig(this.themeConfig)}componentDidLoad(){this.validateTimeAgainstMinimum();this.applyThemeConfig(this.themeConfig)}componentDidRender(){if(this.showTimes&&this.shouldAutoScroll){const s=l(this.time);const e=this.times.findIndex((e=>e.value===s));if(e>-1){this.shouldAutoScroll=false;this.scrollToViewWithinParent(e)}return}}handleTimeChange(s,e){const i=e.split(":");if(i[0]==="00"&&i[1].slice(-2)=="pm"){const s=n.t("nylasTimeWindowPicker.errors.invalid");this.err=s;this.timeWindowFormError.emit({key:this.el.id,message:s})}if(!c(e)){const s=n.t("nylasTimeWindowPicker.errors.invalid");this.err=s;this.timeWindowFormError.emit({key:this.el.id,message:s})}else{this.err="";this.timeWindowFormError.emit({key:this.el.id,message:""})}if(this.err){return}this.timeChange.emit({key:this.el.id,value:e})}handleTimeAutocomplete(s){const e=s.target?.value;const i=this.language!==r.en?h(e):e;const t=n.t("nylasTimeWindowPicker.errors.invalid");if(!c(i)){this.err=t;this.timeWindowFormError.emit({key:this.el.id,message:t});return}if(i===""){const s=d().format("hh:mma");this.timeChange.emit({key:this.el.id,value:s});return}if(!f(i)){const s=l(i);this.timeChange.emit({key:this.el.id,value:s});return}this.timeChange.emit({key:this.el.id,value:i})}handleOnInput(s){const e=s.target?.value;if(!c(e)){return}if(e===""){const s=d().format("hh:mma");const e=this.times.findIndex((e=>e.value===s));if(e>-1){this.scrollToViewWithinParent(e)}return}if(!f(e)){const s=l(e);const i=this.times.findIndex((e=>e.value===s));if(i>-1){this.scrollToViewWithinParent(i)}return}}generateTimes(){const s=[];let e=o().set("hour",0).set("minute",0).set("second",0);if(this.minimumStartTime){e=o(this.minimumStartTime,"hh:mma")}const i=e.endOf("day").diff(e,"minutes");const t=Math.round(i/15);for(let i=0;i<t+1;i++){const a=e.add(i*15,"minute");if(i==t&&a.format("hh:mma").includes("am")){break}s.push({id:i,value:a.format("hh:mma")})}return s}handleComboboxKeyDown(s){if(s.key==="ArrowDown"){s.preventDefault();if(!this.showTimes){this.showTimes=true;this.shouldAutoScroll=true;return}if(this.ariaActivedescendant===""){this.ariaActivedescendant=this.times[0].id.toString();this.focusOption(0)}else{const s=this.times.findIndex((s=>s.id.toString()===this.ariaActivedescendant));const e=s+1<this.times.length?s+1:0;this.ariaActivedescendant=this.times[e].id.toString();this.focusOption(e)}}else if(s.key==="ArrowUp"){s.preventDefault();if(this.ariaActivedescendant===""){this.ariaActivedescendant=this.times[this.times.length-1].id.toString();this.focusOption(this.times.length-1)}else{const s=this.times.findIndex((s=>s.id.toString()===this.ariaActivedescendant));const e=s-1>=0?s-1:this.times.length-1;this.ariaActivedescendant=this.times[e].id.toString();this.focusOption(e)}}else if(s.key==="Escape"){this.showTimes=false;this.timeInput.focus()}}handleListboxKeydown(s){const e=this.times;const i=e.findIndex((s=>s.id.toString()===this.ariaActivedescendant));if(s.key==="ArrowDown"||s.key==="Tab"&&!s.shiftKey){s.preventDefault();const t=i+1<e.length?i+1:0;this.ariaActivedescendant=e[t].id.toString();this.focusOption(t)}else if(s.key==="ArrowUp"||s.key==="Tab"&&s.shiftKey){s.preventDefault();const t=i-1>=0?i-1:e.length-1;this.ariaActivedescendant=e[t].id.toString();this.focusOption(t)}else if(s.key==="Enter"){s.preventDefault();if(this.ariaActivedescendant){const t=e[i];this.handleTimeChange(s,t.value);this.showTimes=false;this.ariaActivedescendant="";this.timeInput.focus()}}else if(s.key==="Escape"){this.showTimes=false;this.timeInput.focus()}}scrollToViewWithinParent(s){const e=this.times[s];const i=this.el.shadowRoot?.getElementById(e.id.toString());const t=this.timeMenu;this.ariaActivedescendant=e.id.toString();const a=i.getBoundingClientRect();const r=t.getBoundingClientRect();if(a.top<r.top){t.scrollTop-=r.top-a.top}else if(a.bottom>r.bottom){t.scrollTop+=a.bottom-r.bottom}if(a.left<r.left){t.scrollLeft-=r.left-a.left}else if(a.right>r.right){t.scrollLeft+=a.right-r.right}}focusOption(s){const e=this.times[s];if(!e)return;const i=e.id.toString();const t=this.el.shadowRoot?.getElementById(i);if(t){t.focus();t.scrollIntoView({behavior:"smooth",block:"nearest"})}}render(){const s=this.language===r.en?false:true;return i(t,{key:"31ec434be67e4a853c9f46027c922ab4b3311c1f"},i("div",{key:"4617de73c9bb429d37b5c85d3fdb41aee0e4a49d",class:"time-picker",part:"time-picker"},i("input",{key:"702d573751e3c7a0c6acfd43c09c49cc452d7f8a",type:"text",name:this.name,id:this.name,part:"time-input",class:{"time-input":true,error:!!this.err||this.hasError},ref:s=>this.timeInput=s,value:s?y(this.time):this.time,onClick:()=>{this.showTimes=!this.showTimes;this.shouldAutoScroll=true},"aria-haspopup":"listbox","aria-label":this.name,"aria-expanded":this.showTimes?"true":"false",placeholder:this.placeholder,onKeyDown:s=>this.handleComboboxKeyDown(s),onInput:s=>this.handleOnInput(s),onBlur:s=>this.handleTimeAutocomplete(s)}),this.err&&i("div",{key:"112e8db2352e3c86d73b17b367d069c921bd4116",class:"invalid-time-icon"}),this.showTimes&&i("div",{key:"ba7ce4ac7b6cdaa7e85531e41c69bda08066fa60",class:"times",part:"times",ref:s=>this.timeMenu=s},i("ul",{key:"ed88445c3c647741d28d794c460d215d5c61b593",tabindex:"-1",role:"listbox","aria-label":this.name,"aria-activedescendant":this.ariaActivedescendant,onKeyDown:s=>this.handleListboxKeydown(s)},this.times.map((e=>i("li",{tabindex:"0",key:e.id,id:e.id.toString(),class:{focused:this.ariaActivedescendant===e.id.toString()},onClick:s=>{this.handleTimeChange(s,e.value);this.showTimes=false;this.timeInput.focus()},role:"option"},`${s?y(e.value):e.value}`))))),!this.showTimes&&this.err&&i("p",{key:"75d6c271fddbec9489798256d02b1840eed96123",class:"error",id:"email-error"},this.err)))}get el(){return a(this)}static get watchers(){return{time:["timeChangedHandler"],minimumStartTime:["minimumStartTimeChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};b.style=p;export{b as nylas_time_window_picker};
|
|
2
2
|
//# sourceMappingURL=nylas-time-window-picker.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["nylasTimeWindowPickerCss","dayjs","extend","customParseFormat","TimeInput","constructor","hostRef","this","minimumStartTime","placeholder","hasError","language","LANGUAGE_CODE","en","err","showTimes","ariaActivedescendant","times","generateTimes","shouldAutoScroll","handleOutsideClick","event","path","composedPath","isClickInside","includes","el","timeChangedHandler","validateTimeAgainstMinimum","minimumStartTimeChangedHandler","themeConfigChangedHandler","newVal","_oldVal","applyThemeConfig","themeConfig","key","value","Object","entries","style","setProperty","minimumTime","selectedTime","time","errorMessage","i18next","t","isBefore","timeWindowFormError","emit","id","message","componentDidLoad","componentDidRender","autocompletedTime","autocompleteTimeFormat","optionIndex","findIndex","scrollToViewWithinParent","handleTimeChange","_e","input","timePart","split","slice","validateTimeFormatInput","timeChange","handleTimeAutocomplete","targetInput","target","convertTo12HourFormat","newTime","roundToNearest15Minutes","format","validateExactTimeFormat","handleOnInput","startTime","set","diff","endOf","iterations","Math","round","i","add","push","handleComboboxKeyDown","preventDefault","toString","focusOption","currentIndex","nextIndex","length","prevIndex","timeInput","focus","handleListboxKeydown","e","items","item","shiftKey","option","childElement","shadowRoot","getElementById","parentElement","timeMenu","childRect","getBoundingClientRect","parentRect","top","scrollTop","bottom","left","scrollLeft","right","index","elementId","element","scrollIntoView","behavior","block","render","is24HourFormat","h","Host","class","part","type","name","error","ref","convertTo24HourFormat","onClick","onKeyDown","onInput","onBlur","tabindex","role","map","focused"],"sources":["src/components/scheduler-editor/nylas-time-window-picker/nylas-time-window-picker.scss?tag=nylas-time-window-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-time-window-picker/nylas-time-window-picker.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n display: block;\n position: relative;\n @include default-css-variables;\n}\n\n.time-picker {\n display: inline-block;\n width: 150px;\n font-family: var(--nylas-font-family);\n position: relative;\n\n @media #{$mobile} {\n width: auto;\n }\n\n input {\n width: 150px;\n height: 48px;\n text-align: center;\n font-size: 16px;\n font-family: inherit;\n color: var(--nylas-base-900);\n\n cursor: pointer;\n background: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n @media #{$mobile} {\n width: 88px;\n }\n\n @media #{$small-mobile} {\n width: 68px;\n font-size: 15px;\n }\n\n &.focus {\n background: var(--nylas-base-0);\n }\n\n &:hover,\n &:active {\n border: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n span {\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n }\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n }\n\n p.error {\n color: var(--nylas-error);\n font-size: 0.875rem;\n margin: 0;\n }\n}\n\n.times {\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 border: 1px solid #ddd;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n\n 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: center;\n cursor: pointer;\n\n &.focused {\n background-color: var(--nylas-base-100);\n }\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n margin: 0;\n }\n }\n }\n }\n}\n","import { LANGUAGE_CODE } from '@/common/constants';\nimport { autocompleteTimeFormat, convertTo12HourFormat, convertTo24HourFormat, roundToNearest15Minutes, validateExactTimeFormat, validateTimeFormatInput } from '@/utils/utils';\nimport { Component, h, State, Prop, Event, EventEmitter, Listen, Element, Host, Watch } from '@stencil/core';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\ndayjs.extend(customParseFormat);\n\ntype Time = { id: number; value: string };\n\n/**\n * The `nylas-time-window-picker` component is a time picker that can be used to select a time.\n * @part time-picker - The time picker container\n * @part time-input - The time input\n * @part times - The list of times\n */\n@Component({\n tag: 'nylas-time-window-picker',\n styleUrl: 'nylas-time-window-picker.scss',\n shadow: true,\n})\nexport class TimeInput {\n @Element() el!: HTMLElement;\n private timeInput!: HTMLInputElement;\n private timeMenu!: HTMLElement;\n\n /**\n * The time to display in the input.\n * This is passed by the parent component\n */\n @Prop() time!: string;\n /**\n * This is the start time value if one is set by the parent component.\n * It is useful if this component is used to render an end time which\n * should not be before the start time, defining the earliest selectable time.\n */\n @Prop() minimumStartTime: string | null = null;\n\n /**\n * The placeholder text for the input.\n */\n @Prop() placeholder: string = 'hh:mmam/pm';\n /**\n * The name of the input.\n */\n @Prop() name!: string;\n /**\n * This sets the error state of the input.\n */\n @Prop({ reflect: true }) hasError: boolean = false;\n\n /**\n * The language of the input.\n */\n @Prop() language: LANGUAGE_CODE = LANGUAGE_CODE.en;\n\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /**\n * The error message to display if the time is invalid.\n */\n @State() err: string = '';\n /**\n * Toggle to show the list of times.\n */\n @State() showTimes: boolean = false;\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 * The list of times to display in the dropdown.\n */\n @State() times: Time[] = this.generateTimes();\n /**\n * This is used to scroll to the selected time when the time is changed.\n */\n @State() shouldAutoScroll: boolean = false;\n\n /**\n * This event is fired when the time is changed.\n */\n @Event() timeChange!: EventEmitter<{\n key: string;\n value: string;\n }>;\n\n /**\n * This event is fired when the form has an error. The parent component\n * can listen for this event and display an error message or set form validity.\n */\n @Event() timeWindowFormError!: EventEmitter<{\n key: string;\n message: string;\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.showTimes) {\n this.showTimes = false;\n }\n }\n\n @Watch('time')\n timeChangedHandler() {\n this.validateTimeAgainstMinimum();\n }\n\n @Watch('minimumStartTime')\n minimumStartTimeChangedHandler() {\n this.validateTimeAgainstMinimum();\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, _oldVal: ThemeConfig) {\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 private validateTimeAgainstMinimum() {\n if (this.minimumStartTime) {\n // Parse the minimum start time properly using dayjs\n const minimumTime = dayjs(this.minimumStartTime, 'hh:mma');\n const selectedTime = dayjs(this.time, 'hh:mma');\n\n this.times = this.generateTimes();\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n\n // Check if selected time is before minimum time\n if (selectedTime.isBefore(minimumTime)) {\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n } else {\n // Clear the error if the time is valid\n this.err = '';\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: '',\n });\n }\n } else {\n // Clear any existing error if no minimum start time is set\n this.err = '';\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: '',\n });\n }\n }\n\n componentDidLoad() {\n // Validate time against minimum on initial load\n this.validateTimeAgainstMinimum();\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidRender() {\n if (this.showTimes && this.shouldAutoScroll) {\n const autocompletedTime = autocompleteTimeFormat(this.time);\n const optionIndex = this.times.findIndex(time => time.value === autocompletedTime);\n if (optionIndex > -1) {\n this.shouldAutoScroll = false;\n this.scrollToViewWithinParent(optionIndex);\n }\n return;\n }\n }\n\n private handleTimeChange(_e: Event, input: string) {\n const timePart = input.split(':');\n if (timePart[0] === '00' && timePart[1].slice(-2) == 'pm') {\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n }\n if (!validateTimeFormatInput(input)) {\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n } else {\n this.err = '';\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: '',\n });\n }\n if (this.err) {\n return;\n }\n this.timeChange.emit({\n key: this.el.id,\n value: input,\n });\n }\n\n private handleTimeAutocomplete(event: Event) {\n const targetInput = (event.target as HTMLInputElement)?.value;\n const input = this.language !== LANGUAGE_CODE.en ? convertTo12HourFormat(targetInput) : targetInput;\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n if (!validateTimeFormatInput(input)) {\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n return;\n }\n if (input === '') {\n const newTime = roundToNearest15Minutes().format('hh:mma');\n this.timeChange.emit({\n key: this.el.id,\n value: newTime,\n });\n return;\n }\n if (!validateExactTimeFormat(input)) {\n const autocompletedTime = autocompleteTimeFormat(input);\n this.timeChange.emit({\n key: this.el.id,\n value: autocompletedTime,\n });\n return;\n }\n this.timeChange.emit({\n key: this.el.id,\n value: input,\n });\n }\n\n private handleOnInput(event: Event) {\n const input = (event.target as HTMLInputElement)?.value;\n if (!validateTimeFormatInput(input)) {\n return;\n }\n if (input === '') {\n const newTime = roundToNearest15Minutes().format('hh:mma');\n const optionIndex = this.times.findIndex(time => time.value === newTime);\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n return;\n }\n if (!validateExactTimeFormat(input)) {\n const autocompletedTime = autocompleteTimeFormat(input);\n const optionIndex = this.times.findIndex(time => time.value === autocompletedTime);\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n return;\n }\n }\n\n private generateTimes() {\n const times: Time[] = [];\n let startTime = dayjs().set('hour', 0).set('minute', 0).set('second', 0); // Set to 12:00 am\n if (this.minimumStartTime) {\n startTime = dayjs(this.minimumStartTime, 'hh:mma');\n }\n const diff = startTime.endOf('day').diff(startTime, 'minutes');\n const iterations = Math.round(diff / 15);\n for (let i = 0; i < iterations + 1; i++) {\n // 96 represents the total number of 15-minute increments in a day (24 hours * 60 minutes / 15 minutes)\n const time = startTime.add(i * 15, 'minute');\n if (i == iterations && time.format('hh:mma').includes('am')) {\n break;\n }\n times.push({ id: i, value: time.format('hh:mma') });\n }\n return times;\n }\n\n private handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n if (!this.showTimes) {\n this.showTimes = true;\n this.shouldAutoScroll = true;\n return;\n }\n if (this.ariaActivedescendant === '') {\n this.ariaActivedescendant = this.times[0].id.toString();\n this.focusOption(0);\n } else {\n const currentIndex = this.times.findIndex(time => time.id.toString() === this.ariaActivedescendant);\n const nextIndex = currentIndex + 1 < this.times.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = this.times[nextIndex].id.toString();\n this.focusOption(nextIndex);\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n if (this.ariaActivedescendant === '') {\n this.ariaActivedescendant = this.times[this.times.length - 1].id.toString();\n this.focusOption(this.times.length - 1);\n } else {\n const currentIndex = this.times.findIndex(time => time.id.toString() === this.ariaActivedescendant);\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : this.times.length - 1;\n this.ariaActivedescendant = this.times[prevIndex].id.toString();\n this.focusOption(prevIndex);\n }\n } else if (event.key === 'Escape') {\n this.showTimes = false;\n this.timeInput.focus();\n }\n }\n\n private handleListboxKeydown(e: KeyboardEvent) {\n const items = this.times;\n const currentIndex = items.findIndex(item => item.id.toString() === this.ariaActivedescendant);\n\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].id.toString();\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].id.toString();\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n const option = items[currentIndex];\n this.handleTimeChange(e, option.value);\n this.showTimes = false;\n this.ariaActivedescendant = '';\n this.timeInput.focus();\n }\n } else if (e.key === 'Escape') {\n this.showTimes = false;\n this.timeInput.focus();\n }\n }\n\n scrollToViewWithinParent(optionIndex: number) {\n const option = this.times[optionIndex];\n const childElement = this.el.shadowRoot?.getElementById(option.id.toString()) as HTMLLIElement;\n const parentElement = this.timeMenu;\n\n this.ariaActivedescendant = option.id.toString();\n\n // Scroll child into view within parent\n const childRect = childElement.getBoundingClientRect();\n const parentRect = parentElement.getBoundingClientRect();\n\n if (childRect.top < parentRect.top) {\n // Child is above the visible area of the parent\n parentElement.scrollTop -= parentRect.top - childRect.top;\n } else if (childRect.bottom > parentRect.bottom) {\n // Child is below the visible area of the parent\n parentElement.scrollTop += childRect.bottom - parentRect.bottom;\n }\n\n if (childRect.left < parentRect.left) {\n // Child is to the left of the visible area of the parent\n parentElement.scrollLeft -= parentRect.left - childRect.left;\n } else if (childRect.right > parentRect.right) {\n // Child is to the right of the visible area of the parent\n parentElement.scrollLeft += childRect.right - parentRect.right;\n }\n }\n\n focusOption(index: number) {\n const option = this.times[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.id.toString();\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 render() {\n const is24HourFormat = this.language === LANGUAGE_CODE.en ? false : true;\n return (\n <Host>\n <div class=\"time-picker\" part=\"time-picker\">\n <input\n type=\"text\"\n name={this.name}\n id={this.name}\n part=\"time-input\"\n class={{\n 'time-input': true,\n 'error': !!this.err || this.hasError,\n }}\n ref={el => (this.timeInput = el as HTMLInputElement)}\n value={is24HourFormat ? convertTo24HourFormat(this.time) : this.time}\n onClick={() => {\n this.showTimes = !this.showTimes;\n this.shouldAutoScroll = true;\n }}\n aria-haspopup=\"listbox\"\n aria-label={this.name}\n aria-expanded={this.showTimes ? 'true' : 'false'}\n placeholder={this.placeholder}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n onInput={event => this.handleOnInput(event)}\n onBlur={event => this.handleTimeAutocomplete(event)}\n />\n {this.err && <div class=\"invalid-time-icon\">{/* Icon here */}</div>}\n {this.showTimes && (\n <div class=\"times\" part=\"times\" ref={el => (this.timeMenu = el as HTMLElement)}>\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.times.map(option => (\n <li\n tabindex=\"0\"\n key={option.id}\n id={option.id.toString()}\n class={{\n focused: this.ariaActivedescendant === option.id.toString(),\n }}\n onClick={e => {\n this.handleTimeChange(e, option.value);\n this.showTimes = false;\n this.timeInput.focus();\n }}\n role=\"option\"\n >\n {`${is24HourFormat ? convertTo24HourFormat(option.value) : option.value}`}\n </li>\n ))}\n </ul>\n </div>\n )}\n {!this.showTimes && this.err && (\n <p class=\"error\" id=\"email-error\">\n {this.err}\n </p>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["nylasTimeWindowPickerCss","dayjs","extend","customParseFormat","TimeInput","constructor","hostRef","this","minimumStartTime","placeholder","hasError","language","LANGUAGE_CODE","en","err","showTimes","ariaActivedescendant","times","generateTimes","shouldAutoScroll","handleOutsideClick","event","path","composedPath","isClickInside","includes","el","timeChangedHandler","validateTimeAgainstMinimum","minimumStartTimeChangedHandler","themeConfigChangedHandler","newVal","_oldVal","applyThemeConfig","themeConfig","key","value","Object","entries","style","setProperty","minimumTime","selectedTime","time","errorMessage","i18next","t","isBefore","timeWindowFormError","emit","id","message","componentWillLoad","componentDidLoad","componentDidRender","autocompletedTime","autocompleteTimeFormat","optionIndex","findIndex","scrollToViewWithinParent","handleTimeChange","_e","input","timePart","split","slice","validateTimeFormatInput","timeChange","handleTimeAutocomplete","targetInput","target","convertTo12HourFormat","newTime","roundToNearest15Minutes","format","validateExactTimeFormat","handleOnInput","startTime","set","diff","endOf","iterations","Math","round","i","add","push","handleComboboxKeyDown","preventDefault","toString","focusOption","currentIndex","nextIndex","length","prevIndex","timeInput","focus","handleListboxKeydown","e","items","item","shiftKey","option","childElement","shadowRoot","getElementById","parentElement","timeMenu","childRect","getBoundingClientRect","parentRect","top","scrollTop","bottom","left","scrollLeft","right","index","elementId","element","scrollIntoView","behavior","block","render","is24HourFormat","h","Host","class","part","type","name","error","ref","convertTo24HourFormat","onClick","onKeyDown","onInput","onBlur","tabindex","role","map","focused"],"sources":["src/components/scheduler-editor/nylas-time-window-picker/nylas-time-window-picker.scss?tag=nylas-time-window-picker&encapsulation=shadow","src/components/scheduler-editor/nylas-time-window-picker/nylas-time-window-picker.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n\n:host {\n display: block;\n position: relative;\n @include default-css-variables;\n}\n\n.time-picker {\n display: inline-block;\n width: 150px;\n font-family: var(--nylas-font-family);\n position: relative;\n\n @media #{$mobile} {\n width: auto;\n }\n\n input {\n width: 150px;\n height: 48px;\n text-align: center;\n font-size: 16px;\n font-family: inherit;\n color: var(--nylas-base-900);\n\n cursor: pointer;\n background: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-200);\n border-radius: var(--nylas-border-radius-2x);\n\n @media #{$mobile} {\n width: 88px;\n }\n\n @media #{$small-mobile} {\n width: 68px;\n font-size: 15px;\n }\n\n &.focus {\n background: var(--nylas-base-0);\n }\n\n &:hover,\n &:active {\n border: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n span {\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n }\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n }\n\n p.error {\n color: var(--nylas-error);\n font-size: 0.875rem;\n margin: 0;\n }\n}\n\n.times {\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 border: 1px solid #ddd;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n box-shadow: 0px 4px 6px -2px #0000000d;\n box-shadow: 0px 10px 15px -3px #0000001a;\n\n 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: center;\n cursor: pointer;\n\n &.focused {\n background-color: var(--nylas-base-100);\n }\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n input {\n margin: 0;\n }\n }\n }\n }\n}\n","import { LANGUAGE_CODE } from '@/common/constants';\nimport { autocompleteTimeFormat, convertTo12HourFormat, convertTo24HourFormat, roundToNearest15Minutes, validateExactTimeFormat, validateTimeFormatInput } from '@/utils/utils';\nimport { Component, h, State, Prop, Event, EventEmitter, Listen, Element, Host, Watch } from '@stencil/core';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\ndayjs.extend(customParseFormat);\n\ntype Time = { id: number; value: string };\n\n/**\n * The `nylas-time-window-picker` component is a time picker that can be used to select a time.\n * @part time-picker - The time picker container\n * @part time-input - The time input\n * @part times - The list of times\n */\n@Component({\n tag: 'nylas-time-window-picker',\n styleUrl: 'nylas-time-window-picker.scss',\n shadow: true,\n})\nexport class TimeInput {\n @Element() el!: HTMLElement;\n private timeInput!: HTMLInputElement;\n private timeMenu!: HTMLElement;\n\n /**\n * The time to display in the input.\n * This is passed by the parent component\n */\n @Prop() time!: string;\n /**\n * This is the start time value if one is set by the parent component.\n * It is useful if this component is used to render an end time which\n * should not be before the start time, defining the earliest selectable time.\n */\n @Prop() minimumStartTime: string | null = null;\n\n /**\n * The placeholder text for the input.\n */\n @Prop() placeholder: string = 'hh:mmam/pm';\n /**\n * The name of the input.\n */\n @Prop() name!: string;\n /**\n * This sets the error state of the input.\n */\n @Prop({ reflect: true }) hasError: boolean = false;\n\n /**\n * The language of the input.\n */\n @Prop() language: LANGUAGE_CODE = LANGUAGE_CODE.en;\n\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /**\n * The error message to display if the time is invalid.\n */\n @State() err: string = '';\n /**\n * Toggle to show the list of times.\n */\n @State() showTimes: boolean = false;\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 * The list of times to display in the dropdown.\n */\n @State() times: Time[] = this.generateTimes();\n /**\n * This is used to scroll to the selected time when the time is changed.\n */\n @State() shouldAutoScroll: boolean = false;\n\n /**\n * This event is fired when the time is changed.\n */\n @Event() timeChange!: EventEmitter<{\n key: string;\n value: string;\n }>;\n\n /**\n * This event is fired when the form has an error. The parent component\n * can listen for this event and display an error message or set form validity.\n */\n @Event() timeWindowFormError!: EventEmitter<{\n key: string;\n message: string;\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.showTimes) {\n this.showTimes = false;\n }\n }\n\n @Watch('time')\n timeChangedHandler() {\n this.validateTimeAgainstMinimum();\n }\n\n @Watch('minimumStartTime')\n minimumStartTimeChangedHandler() {\n this.validateTimeAgainstMinimum();\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, _oldVal: ThemeConfig) {\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 private validateTimeAgainstMinimum() {\n if (this.minimumStartTime) {\n // Parse the minimum start time properly using dayjs\n const minimumTime = dayjs(this.minimumStartTime, 'hh:mma');\n const selectedTime = dayjs(this.time, 'hh:mma');\n\n this.times = this.generateTimes();\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n\n // Check if selected time is before minimum time\n if (selectedTime.isBefore(minimumTime)) {\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n } else {\n // Clear the error if the time is valid\n this.err = '';\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: '',\n });\n }\n } else {\n // Clear any existing error if no minimum start time is set\n this.err = '';\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: '',\n });\n }\n }\n\n componentWillLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidLoad() {\n // Validate time against minimum on initial load\n this.validateTimeAgainstMinimum();\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidRender() {\n if (this.showTimes && this.shouldAutoScroll) {\n const autocompletedTime = autocompleteTimeFormat(this.time);\n const optionIndex = this.times.findIndex(time => time.value === autocompletedTime);\n if (optionIndex > -1) {\n this.shouldAutoScroll = false;\n this.scrollToViewWithinParent(optionIndex);\n }\n return;\n }\n }\n\n private handleTimeChange(_e: Event, input: string) {\n const timePart = input.split(':');\n if (timePart[0] === '00' && timePart[1].slice(-2) == 'pm') {\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n }\n if (!validateTimeFormatInput(input)) {\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n } else {\n this.err = '';\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: '',\n });\n }\n if (this.err) {\n return;\n }\n this.timeChange.emit({\n key: this.el.id,\n value: input,\n });\n }\n\n private handleTimeAutocomplete(event: Event) {\n const targetInput = (event.target as HTMLInputElement)?.value;\n const input = this.language !== LANGUAGE_CODE.en ? convertTo12HourFormat(targetInput) : targetInput;\n const errorMessage = i18next.t('nylasTimeWindowPicker.errors.invalid');\n if (!validateTimeFormatInput(input)) {\n this.err = errorMessage;\n this.timeWindowFormError.emit({\n key: this.el.id,\n message: errorMessage,\n });\n return;\n }\n if (input === '') {\n const newTime = roundToNearest15Minutes().format('hh:mma');\n this.timeChange.emit({\n key: this.el.id,\n value: newTime,\n });\n return;\n }\n if (!validateExactTimeFormat(input)) {\n const autocompletedTime = autocompleteTimeFormat(input);\n this.timeChange.emit({\n key: this.el.id,\n value: autocompletedTime,\n });\n return;\n }\n this.timeChange.emit({\n key: this.el.id,\n value: input,\n });\n }\n\n private handleOnInput(event: Event) {\n const input = (event.target as HTMLInputElement)?.value;\n if (!validateTimeFormatInput(input)) {\n return;\n }\n if (input === '') {\n const newTime = roundToNearest15Minutes().format('hh:mma');\n const optionIndex = this.times.findIndex(time => time.value === newTime);\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n return;\n }\n if (!validateExactTimeFormat(input)) {\n const autocompletedTime = autocompleteTimeFormat(input);\n const optionIndex = this.times.findIndex(time => time.value === autocompletedTime);\n if (optionIndex > -1) {\n this.scrollToViewWithinParent(optionIndex);\n }\n return;\n }\n }\n\n private generateTimes() {\n const times: Time[] = [];\n let startTime = dayjs().set('hour', 0).set('minute', 0).set('second', 0); // Set to 12:00 am\n if (this.minimumStartTime) {\n startTime = dayjs(this.minimumStartTime, 'hh:mma');\n }\n const diff = startTime.endOf('day').diff(startTime, 'minutes');\n const iterations = Math.round(diff / 15);\n for (let i = 0; i < iterations + 1; i++) {\n // 96 represents the total number of 15-minute increments in a day (24 hours * 60 minutes / 15 minutes)\n const time = startTime.add(i * 15, 'minute');\n if (i == iterations && time.format('hh:mma').includes('am')) {\n break;\n }\n times.push({ id: i, value: time.format('hh:mma') });\n }\n return times;\n }\n\n private handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n if (!this.showTimes) {\n this.showTimes = true;\n this.shouldAutoScroll = true;\n return;\n }\n if (this.ariaActivedescendant === '') {\n this.ariaActivedescendant = this.times[0].id.toString();\n this.focusOption(0);\n } else {\n const currentIndex = this.times.findIndex(time => time.id.toString() === this.ariaActivedescendant);\n const nextIndex = currentIndex + 1 < this.times.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = this.times[nextIndex].id.toString();\n this.focusOption(nextIndex);\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n if (this.ariaActivedescendant === '') {\n this.ariaActivedescendant = this.times[this.times.length - 1].id.toString();\n this.focusOption(this.times.length - 1);\n } else {\n const currentIndex = this.times.findIndex(time => time.id.toString() === this.ariaActivedescendant);\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : this.times.length - 1;\n this.ariaActivedescendant = this.times[prevIndex].id.toString();\n this.focusOption(prevIndex);\n }\n } else if (event.key === 'Escape') {\n this.showTimes = false;\n this.timeInput.focus();\n }\n }\n\n private handleListboxKeydown(e: KeyboardEvent) {\n const items = this.times;\n const currentIndex = items.findIndex(item => item.id.toString() === this.ariaActivedescendant);\n\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].id.toString();\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].id.toString();\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n const option = items[currentIndex];\n this.handleTimeChange(e, option.value);\n this.showTimes = false;\n this.ariaActivedescendant = '';\n this.timeInput.focus();\n }\n } else if (e.key === 'Escape') {\n this.showTimes = false;\n this.timeInput.focus();\n }\n }\n\n scrollToViewWithinParent(optionIndex: number) {\n const option = this.times[optionIndex];\n const childElement = this.el.shadowRoot?.getElementById(option.id.toString()) as HTMLLIElement;\n const parentElement = this.timeMenu;\n\n this.ariaActivedescendant = option.id.toString();\n\n // Scroll child into view within parent\n const childRect = childElement.getBoundingClientRect();\n const parentRect = parentElement.getBoundingClientRect();\n\n if (childRect.top < parentRect.top) {\n // Child is above the visible area of the parent\n parentElement.scrollTop -= parentRect.top - childRect.top;\n } else if (childRect.bottom > parentRect.bottom) {\n // Child is below the visible area of the parent\n parentElement.scrollTop += childRect.bottom - parentRect.bottom;\n }\n\n if (childRect.left < parentRect.left) {\n // Child is to the left of the visible area of the parent\n parentElement.scrollLeft -= parentRect.left - childRect.left;\n } else if (childRect.right > parentRect.right) {\n // Child is to the right of the visible area of the parent\n parentElement.scrollLeft += childRect.right - parentRect.right;\n }\n }\n\n focusOption(index: number) {\n const option = this.times[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.id.toString();\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 render() {\n const is24HourFormat = this.language === LANGUAGE_CODE.en ? false : true;\n return (\n <Host>\n <div class=\"time-picker\" part=\"time-picker\">\n <input\n type=\"text\"\n name={this.name}\n id={this.name}\n part=\"time-input\"\n class={{\n 'time-input': true,\n 'error': !!this.err || this.hasError,\n }}\n ref={el => (this.timeInput = el as HTMLInputElement)}\n value={is24HourFormat ? convertTo24HourFormat(this.time) : this.time}\n onClick={() => {\n this.showTimes = !this.showTimes;\n this.shouldAutoScroll = true;\n }}\n aria-haspopup=\"listbox\"\n aria-label={this.name}\n aria-expanded={this.showTimes ? 'true' : 'false'}\n placeholder={this.placeholder}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n onInput={event => this.handleOnInput(event)}\n onBlur={event => this.handleTimeAutocomplete(event)}\n />\n {this.err && <div class=\"invalid-time-icon\">{/* Icon here */}</div>}\n {this.showTimes && (\n <div class=\"times\" part=\"times\" ref={el => (this.timeMenu = el as HTMLElement)}>\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.times.map(option => (\n <li\n tabindex=\"0\"\n key={option.id}\n id={option.id.toString()}\n class={{\n focused: this.ariaActivedescendant === option.id.toString(),\n }}\n onClick={e => {\n this.handleTimeChange(e, option.value);\n this.showTimes = false;\n this.timeInput.focus();\n }}\n role=\"option\"\n >\n {`${is24HourFormat ? convertTo24HourFormat(option.value) : option.value}`}\n </li>\n ))}\n </ul>\n </div>\n )}\n {!this.showTimes && this.err && (\n <p class=\"error\" id=\"email-error\">\n {this.err}\n </p>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nylas-timeslot-interval.entry.esm.js","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-picker';\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 }\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"],"names":["i18next"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nylas-timeslot-interval.entry.esm.js","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 }\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 this.applyThemeConfig(this.themeConfig);\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"],"names":["i18next"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,a as n,h as l,d as a,e as t}from"./index-B-KMpdMZ.js";import{R as o}from"./register-component-BHk70oxk.js";import{b as s,i as r}from"./utils-Bj5Y75fX.js";const i=':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}';var d=undefined&&undefined.__decorate||function(e,n,l,a){var t=arguments.length,o=t<3?n:a===null?a=Object.getOwnPropertyDescriptor(n,l):a,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,n,l,a);else for(var r=e.length-1;r>=0;r--)if(s=e[r])o=(t<3?s(o):t>3?s(n,l,o):s(n,l))||o;return t>3&&o&&Object.defineProperty(n,l,o),o};var c=undefined&&undefined.__metadata||function(e,n){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(e,n)};const f=15;const y=class{constructor(l){e(this,l);this.valueChanged=n(this,"valueChanged",7);if(l.$hostElement$["s-ei"]){this.internals=l.$hostElement$["s-ei"]}else{this.internals=l.$hostElement$.attachInternals();l.$hostElement$["s-ei"]=this.internals}this.name="timeslot-picker";this.eventDurationMinutes=this.selectedConfiguration?.availability?.duration_minutes;this.componentLoaded=false}elementNameChangedHandler(e){s("nylas-timeslot-interval","elementNameChangedHandler",e);this.host.setAttribute("name",e)}selectedConfigurationChangedHandler(e){s("nylas-timeslot-interval","selectedConfigurationChangedHandler",e);this.internalEventDurationMinutes=e?.availability?.duration_minutes??this.eventDurationMinutes??30;const n=e?.availability?.interval_minutes??this.internalEventDurationMinutes??30;this.selectedInterval=e?.availability?.interval_minutes??n??10;const l=e?.availability?.round_to||null;this.selectedRoundTo=l&&l===n?true:false}selectedLanguageChangedHandler(e,n){if(e===n)return;r.changeLanguage(e)}themeConfigChangedHandler(e,n){if(e===n)return;this.applyThemeConfig(e)}connectedCallback(){s("nylas-timeslot-interval","connectedCallback")}disconnectedCallback(){s("nylas-timeslot-interval","disconnectedCallback")}componentWillLoad(){s("nylas-timeslot-interval","componentWillLoad");this.host.setAttribute("name",this.name)}componentDidLoad(){s("nylas-timeslot-interval","componentDidLoad");if(this.selectedConfiguration){this.selectedConfigurationChangedHandler(this.selectedConfiguration)}else{this.internalEventDurationMinutes=this.eventDurationMinutes??30;const e=this.internalEventDurationMinutes;this.selectedInterval=e??10;this.selectedRoundTo=false}this.componentLoaded=true}componentWillUpdate(){s("nylas-timeslot-interval","componentWillUpdate")}componentDidUpdate(){s("nylas-timeslot-interval","componentDidUpdate")}componentWillRender(){s("nylas-timeslot-interval","componentWillRender")}componentDidRender(){s("nylas-timeslot-interval","componentDidRender")}applyThemeConfig(e){if(e){for(const[n,l]of Object.entries(e)){this.host.style.setProperty(`${n}`,l)}}}nylasFormDropdownChangedHandler(e){s("nylas-timeslot-interval","nylasFormDropdownChangedHandler",e.detail);const n=e.detail.value;if(n==="duration"){this.selectedInterval=this.internalEventDurationMinutes??10}else{this.selectedInterval=parseInt(e.detail.value)}this.valueChanged.emit({value:JSON.stringify({interval:this.selectedInterval,roundTo:this.selectedRoundTo?this.selectedInterval:f}),name:this.name});if(typeof this.internals.setFormValue==="function"){this.internals.setFormValue(JSON.stringify({interval:this.selectedInterval,roundTo:this.selectedRoundTo?this.selectedInterval:f}),this.name)}}nylasFormRadioChangedHandler(e){s("nylas-timeslot-interval","nylasFormRadioChangedHandler",e.detail);const n=e.detail.value;if(n==="no-rounding"){this.selectedRoundTo=false}else{this.selectedRoundTo=true}this.valueChanged.emit({value:JSON.stringify({interval:this.selectedInterval,roundTo:this.selectedRoundTo?this.selectedInterval:f}),name:this.name});if(typeof this.internals.setFormValue==="function"){this.internals.setFormValue(JSON.stringify({interval:this.selectedInterval,roundTo:this.selectedRoundTo?this.selectedInterval:f}),this.name)}}render(){const e=[{value:"duration",label:r.t("nylasTimeslotInterval.lengthOfMeeting")},{value:"5",label:`5 ${r.t("nylasTimeslotInterval.minutesShort")}`},{value:"10",label:`10 ${r.t("nylasTimeslotInterval.minutesShort")}`},{value:"15",label:`15 ${r.t("nylasTimeslotInterval.minutesShort")}`},{value:"20",label:`20 ${r.t("nylasTimeslotInterval.minutesShort")}`},{value:"30",label:`30 ${r.t("nylasTimeslotInterval.minutesShort")}`},{value:"45",label:`45 ${r.t("nylasTimeslotInterval.minutesShort")}`},{value:"60",label:`60 ${r.t("nylasTimeslotInterval.minutesShort")}`}];const n=typeof this.selectedInterval!=="undefined"?this.selectedInterval==this.internalEventDurationMinutes?e[0]:e.find((e=>e.value==this.selectedInterval.toString()))??e[0]:undefined;return l(a,{key:"cde6d03cde55704c421eb8c6324c0bd3d67e4583"},l("div",{key:"fea91804be4a141e5ffbf15de964ef2a7a757b6f",class:"nylas-timeslot-interval",part:"nti"},l("div",{key:"92aa106641a28b08aca7013b277caf3f0422b56a",class:"header",part:"nti__header"},l("h3",{key:"edee77ce8d5c58642d4fe04fc5c1a23b6f4e0d21"},r.t("nylasTimeslotInterval.headerTitle"))),l("div",{key:"573032820d61fd87e622252a99ccce1692697665",class:"nylas-timeslot-interval__dropdown"},l("span",{key:"b0fe3e2b051d025430acd7610a5cfcf5d6e3ccce",class:"label",part:"nti__input-label"},r.t("nylasTimeslotInterval.timeslotInterval.label")),n?.label&&l("select-dropdown",{key:"2d3bb30ac6fb4c1e62a7abed638f5a185c9d5efb",name:"interval-minutes",options:e,withSearch:false,exportparts:"sd_dropdown: nti__dropdown, sd_dropdown-button: nti__dropdown-button, sd_dropdown-content: nti__dropdown-content",defaultSelectedOption:n,themeConfig:this.themeConfig}),l("span",{key:"09015a9a287988ad4c8e97207a862905c76085c4",slot:"label",class:"label",part:"nti__input-label"},r.t("nylasTimeslotInterval.timeslotRounding.label"),l("tooltip-component",{key:"8c2f4b00460ce90b54e5f038d41ac1ba44f6bcc2"},l("info-icon",{key:"f298eb950c4ca56c20035e60c47fefdf6b9b021c",slot:"tooltip-icon"}),l("span",{key:"07e9fad9ab914ecf8df510455522469b6739eb20",slot:"tooltip-content"},r.t("nylasTimeslotInterval.timeslotRounding.tooltip.desc")))),this.componentLoaded&&l("radio-button-group",{key:"8d7fae3e11a5ecccda33f03502898fade50cbdab",name:"interval-preference",defaultSelectedValue:this.selectedRoundTo?"rounding":"no-rounding",options:[{value:"no-rounding",label:r.t("nylasTimeslotInterval.timeslotRoundingOptions.noRounding.label"),description:r.t("nylasTimeslotInterval.timeslotRoundingOptions.noRounding.desc")},{value:"rounding",label:r.t("nylasTimeslotInterval.timeslotRoundingOptions.rounding.label"),description:r.t("nylasTimeslotInterval.timeslotRoundingOptions.rounding.desc")}],themeConfig:this.themeConfig}))))}static get formAssociated(){return true}get host(){return t(this)}static get watchers(){return{name:["elementNameChangedHandler"],selectedConfiguration:["selectedConfigurationChangedHandler"],selectedLanguage:["selectedLanguageChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};d([o({name:"nylas-timeslot-interval",stateToProps:new Map([["schedulerConfig.selectedConfiguration","selectedConfiguration"],["schedulerConfig.selectedLanguage","selectedLanguage"],["schedulerConfig.themeConfig","themeConfig"]]),fireRegisterEvent:true}),c("design:type",Function),c("design:paramtypes",[]),c("design:returntype",void 0)],y.prototype,"render",null);y.style=i;export{y as nylas_timeslot_interval};
|
|
1
|
+
import{r as e,a as n,h as l,d as a,e as t}from"./index-Cbn5rIwb.js";import{R as o}from"./register-component-Blj8K64f.js";import{b as s,i as r}from"./utils-DhmCcrVs.js";const i=':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}';var d=undefined&&undefined.__decorate||function(e,n,l,a){var t=arguments.length,o=t<3?n:a===null?a=Object.getOwnPropertyDescriptor(n,l):a,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,n,l,a);else for(var r=e.length-1;r>=0;r--)if(s=e[r])o=(t<3?s(o):t>3?s(n,l,o):s(n,l))||o;return t>3&&o&&Object.defineProperty(n,l,o),o};var c=undefined&&undefined.__metadata||function(e,n){if(typeof Reflect==="object"&&typeof Reflect.metadata==="function")return Reflect.metadata(e,n)};const f=15;const y=class{constructor(l){e(this,l);this.valueChanged=n(this,"valueChanged",7);if(l.$hostElement$["s-ei"]){this.internals=l.$hostElement$["s-ei"]}else{this.internals=l.$hostElement$.attachInternals();l.$hostElement$["s-ei"]=this.internals}this.name="timeslot-interval";this.eventDurationMinutes=this.selectedConfiguration?.availability?.duration_minutes;this.componentLoaded=false}elementNameChangedHandler(e){s("nylas-timeslot-interval","elementNameChangedHandler",e);this.host.setAttribute("name",e)}selectedConfigurationChangedHandler(e){s("nylas-timeslot-interval","selectedConfigurationChangedHandler",e);this.internalEventDurationMinutes=e?.availability?.duration_minutes??this.eventDurationMinutes??30;const n=e?.availability?.interval_minutes??this.internalEventDurationMinutes??30;this.selectedInterval=e?.availability?.interval_minutes??n??10;const l=e?.availability?.round_to||null;this.selectedRoundTo=l&&l===n?true:false}selectedLanguageChangedHandler(e,n){if(e===n)return;r.changeLanguage(e)}themeConfigChangedHandler(e,n){if(e===n)return;this.applyThemeConfig(e)}connectedCallback(){s("nylas-timeslot-interval","connectedCallback")}disconnectedCallback(){s("nylas-timeslot-interval","disconnectedCallback")}componentWillLoad(){s("nylas-timeslot-interval","componentWillLoad");this.host.setAttribute("name",this.name);this.applyThemeConfig(this.themeConfig)}componentDidLoad(){s("nylas-timeslot-interval","componentDidLoad");if(this.selectedConfiguration){this.selectedConfigurationChangedHandler(this.selectedConfiguration)}else{this.internalEventDurationMinutes=this.eventDurationMinutes??30;const e=this.internalEventDurationMinutes;this.selectedInterval=e??10;this.selectedRoundTo=false}this.componentLoaded=true}componentWillUpdate(){s("nylas-timeslot-interval","componentWillUpdate")}componentDidUpdate(){s("nylas-timeslot-interval","componentDidUpdate")}componentWillRender(){s("nylas-timeslot-interval","componentWillRender")}componentDidRender(){s("nylas-timeslot-interval","componentDidRender")}applyThemeConfig(e){if(e){for(const[n,l]of Object.entries(e)){this.host.style.setProperty(`${n}`,l)}}}nylasFormDropdownChangedHandler(e){s("nylas-timeslot-interval","nylasFormDropdownChangedHandler",e.detail);const n=e.detail.value;if(n==="duration"){this.selectedInterval=this.internalEventDurationMinutes??10}else{this.selectedInterval=parseInt(e.detail.value)}this.valueChanged.emit({value:JSON.stringify({interval:this.selectedInterval,roundTo:this.selectedRoundTo?this.selectedInterval:f}),name:this.name});if(typeof this.internals.setFormValue==="function"){this.internals.setFormValue(JSON.stringify({interval:this.selectedInterval,roundTo:this.selectedRoundTo?this.selectedInterval:f}),this.name)}}nylasFormRadioChangedHandler(e){s("nylas-timeslot-interval","nylasFormRadioChangedHandler",e.detail);const n=e.detail.value;if(n==="no-rounding"){this.selectedRoundTo=false}else{this.selectedRoundTo=true}this.valueChanged.emit({value:JSON.stringify({interval:this.selectedInterval,roundTo:this.selectedRoundTo?this.selectedInterval:f}),name:this.name});if(typeof this.internals.setFormValue==="function"){this.internals.setFormValue(JSON.stringify({interval:this.selectedInterval,roundTo:this.selectedRoundTo?this.selectedInterval:f}),this.name)}}render(){const e=[{value:"duration",label:r.t("nylasTimeslotInterval.lengthOfMeeting")},{value:"5",label:`5 ${r.t("nylasTimeslotInterval.minutesShort")}`},{value:"10",label:`10 ${r.t("nylasTimeslotInterval.minutesShort")}`},{value:"15",label:`15 ${r.t("nylasTimeslotInterval.minutesShort")}`},{value:"20",label:`20 ${r.t("nylasTimeslotInterval.minutesShort")}`},{value:"30",label:`30 ${r.t("nylasTimeslotInterval.minutesShort")}`},{value:"45",label:`45 ${r.t("nylasTimeslotInterval.minutesShort")}`},{value:"60",label:`60 ${r.t("nylasTimeslotInterval.minutesShort")}`}];const n=typeof this.selectedInterval!=="undefined"?this.selectedInterval==this.internalEventDurationMinutes?e[0]:e.find((e=>e.value==this.selectedInterval.toString()))??e[0]:undefined;return l(a,{key:"214d1d6527a30cdb45a1ea4ef639baf72e85e627"},l("div",{key:"7d30517e43a8849a20b6499a9663f5b70d3d54d2",class:"nylas-timeslot-interval",part:"nti"},l("div",{key:"486d23baf45614614387b283a3ecffaf2dc8b5fb",class:"header",part:"nti__header"},l("h3",{key:"42b8a3c024215d159b8fb1ed97d1245d61feee47"},r.t("nylasTimeslotInterval.headerTitle"))),l("div",{key:"98ddc8cd6931fdb26594b836a24d4fc8d72af410",class:"nylas-timeslot-interval__dropdown"},l("span",{key:"53c5d1a98eb946b765a7258ddcfeab1f415f94b5",class:"label",part:"nti__input-label"},r.t("nylasTimeslotInterval.timeslotInterval.label")),n?.label&&l("select-dropdown",{key:"29056446ff9c001b6cbf653ecb57b9675ab568af",name:"interval-minutes",options:e,withSearch:false,exportparts:"sd_dropdown: nti__dropdown, sd_dropdown-button: nti__dropdown-button, sd_dropdown-content: nti__dropdown-content",defaultSelectedOption:n,themeConfig:this.themeConfig}),l("span",{key:"af875dc41998e9adc9f4a5bf7dac8e5fe4e7805c",slot:"label",class:"label",part:"nti__input-label"},r.t("nylasTimeslotInterval.timeslotRounding.label"),l("tooltip-component",{key:"bbad2bc5cf4d2f2239034ce5f4ea246bb461b2ce"},l("info-icon",{key:"f328346712f839f1e2a1c2ca19edbacf0eb1d0fe",slot:"tooltip-icon"}),l("span",{key:"e808fc158db1ef1d11b67a50874c0f594a07f2a8",slot:"tooltip-content"},r.t("nylasTimeslotInterval.timeslotRounding.tooltip.desc")))),this.componentLoaded&&l("radio-button-group",{key:"779823fa043f285dca522f3f3ddb4b7b333f21dc",name:"interval-preference",defaultSelectedValue:this.selectedRoundTo?"rounding":"no-rounding",options:[{value:"no-rounding",label:r.t("nylasTimeslotInterval.timeslotRoundingOptions.noRounding.label"),description:r.t("nylasTimeslotInterval.timeslotRoundingOptions.noRounding.desc")},{value:"rounding",label:r.t("nylasTimeslotInterval.timeslotRoundingOptions.rounding.label"),description:r.t("nylasTimeslotInterval.timeslotRoundingOptions.rounding.desc")}],themeConfig:this.themeConfig}))))}static get formAssociated(){return true}get host(){return t(this)}static get watchers(){return{name:["elementNameChangedHandler"],selectedConfiguration:["selectedConfigurationChangedHandler"],selectedLanguage:["selectedLanguageChangedHandler"],themeConfig:["themeConfigChangedHandler"]}}};d([o({name:"nylas-timeslot-interval",stateToProps:new Map([["schedulerConfig.selectedConfiguration","selectedConfiguration"],["schedulerConfig.selectedLanguage","selectedLanguage"],["schedulerConfig.themeConfig","themeConfig"]]),fireRegisterEvent:true}),c("design:type",Function),c("design:paramtypes",[]),c("design:returntype",void 0)],y.prototype,"render",null);y.style=i;export{y as nylas_timeslot_interval};
|
|
2
2
|
//# sourceMappingURL=nylas-timeslot-interval.entry.js.map
|