@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,"names":["selectDropdownCss","SelectDropdown","constructor","hostRef","this","componentType","options","defaultSelectedOption","withSearch","searchPlaceholder","required","readOnly","pluralizedLabel","withChevron","emptyValue","errorMessage","isOpen","searchValue","filteredOptions","ariaActivedescendant","error","optionsChangedHandler","newValue","oldValue","defaultSelectedOptionChangedHandler","label","selectedOption","nylasFormDropdownDefaultSelected","emit","value","name","themeConfigChangedHandler","newVal","oldVal","applyThemeConfig","themeConfig","key","Object","entries","el","style","setProperty","componentWillLoad","setAttribute","componentDidLoad","length","handleBookingFormSubmitted","event","validate","preventDefault","handleFormSubmitted","toggleDropdown","filterOptions","target","filter","option","toLowerCase","includes","selectOption","nylasFormDropdownChanged","handleSelectButtonKeyDown","inputRef","focus","handleListboxKeydown","e","items","currentIndex","findIndex","item","shiftKey","nextIndex","focusOption","prevIndex","index","elementId","element","shadowRoot","getElementById","scrollIntoView","behavior","block","handleComboboxKeyDown","generateButtonText","dropButtonText","handleOutsideClick","path","composedPath","isClickInside","render","buttonText","dropdownButtonText","h","class","part","dropbtn","open","onClick","disabled","title","onKeyDown","closed","chevron","width","height","type","role","placeholder","ref","onInput","tabindex","map","toString","id","labelHTML"],"sources":["src/components/design-system/select-dropdown/select-dropdown.scss?tag=select-dropdown&encapsulation=shadow","src/components/design-system/select-dropdown/select-dropdown.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n display: block;\n position: relative;\n @include default-css-variables;\n width: 100%;\n\n @media #{$mobile} {\n position: unset;\n }\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.dropdown {\n display: inline-block;\n width: inherit;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 14px;\n font-size: 16px;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n gap: 0.5rem;\n background: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-300);\n border-radius: var(--nylas-border-radius-2x);\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n\n &:hover,\n &:active {\n outline: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n\n span {\n &.chevron {\n display: flex;\n align-self: center;\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.selected-option {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 144px;\n font-size: 14px;\n line-height: 20px;\n color: inherit;\n\n @media #{$mobile} {\n max-width: 124px;\n font-size: 16px;\n }\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n\n // Firefox scrollbar styling\n scrollbar-width: thin;\n scrollbar-color: var(--nylas-base-300) var(--nylas-base-50);\n\n // Custom scrollbar styling\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: var(--nylas-base-50);\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--nylas-base-300);\n border-radius: 4px;\n transition: background-color 0.2s ease;\n\n &:hover {\n background: var(--nylas-base-400);\n }\n }\n\n &::-webkit-scrollbar-thumb:active {\n background: var(--nylas-base-500);\n }\n\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n}\n\n.search-box {\n border-bottom: 1px solid var(--nylas-base-200);\n padding: 10px;\n position: sticky;\n top: 0;\n background: var(--nylas-base-0);\n\n .icon {\n position: absolute;\n top: 1.25rem;\n left: 1.25rem;\n color: var(--nylas-base-300);\n }\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n }\n}\n\n.dropdown-content .selected {\n background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n width: -webkit-fill-available;\n padding: inherit;\n border: 1px solid var(--nylas-base-200);\n border-radius: 4px;\n position: sticky;\n background: no-repeat scroll 7px 7px;\n padding-left: 30px;\n background-size: 16px 16px;\n color: var(--nylas-base-800);\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\n\n/**\n * The `select-dropdown` component is a dropdown that allows users to select an option from a list of options.\n * This component is used in the scheduling form to input dropdown type inputs.\n * @part sd_dropdown - The dropdown container\n * @part sd_dropdown-button - The dropdown button\n * @part sd_dropdown-button-selected-label - The selected option label\n * @part sd_dropdown-content - The dropdown content\n * @part sd_dropdown_label - The dropdown label\n */\n@Component({\n tag: 'select-dropdown',\n styleUrl: 'select-dropdown.scss',\n shadow: true,\n})\nexport class SelectDropdown {\n @Element() el!: HTMLElement;\n private readonly componentType: string = 'select-dropdown';\n\n private inputRef?: HTMLInputElement;\n\n // Props\n /**\n * The name of the dropdown\n */\n @Prop() name!: string;\n /**\n * The options to display in the dropdown\n */\n @Prop() options: DropdownOption[] = [];\n /**\n * The default selected option\n */\n @Prop({ attribute: 'default-selected-option' }) defaultSelectedOption: DropdownOption | null = null;\n /**\n * Should show search input\n */\n @Prop() withSearch: boolean = true;\n\n /**\n * The placeholder for the search input\n */\n @Prop() searchPlaceholder: string = 'Search';\n\n /**\n * The label for the dropdown, skipped if no label is provided\n */\n @Prop() label?: string;\n\n /**\n * If true, the dropdown is required for form submission\n */\n @Prop() required: boolean = false;\n\n /**\n * The property to make the dropdown read-only. If true, the dropdown cannot be edited.\n */\n @Prop() readOnly: boolean = false;\n\n /**\n * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n */\n @Prop() pluralizedLabel: string = '';\n /**\n * Overrides the select dropdown to be used as a button with dropdownButtonText representing actions & dropdownText name on the dropdown intead of selected value\n */\n @Prop() dropdownButtonText?: string;\n /**\n * Should show chevron on button\n */\n @Prop() withChevron: boolean = true;\n /**\n * Allows to set the empty value of the dropdown\n */\n @Prop() emptyValue: string = 'Select an option'; // Default empty value\n /**\n * The custom error message to display when the value is empty or null and the dropdown is required\n */\n @Prop() errorMessage: string = '';\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n // States\n /**\n * The selected option\n */\n @State() selectedOption!: DropdownOption | null;\n /**\n * The open state of the dropdown\n */\n @State() isOpen: boolean = false;\n /**\n * The search value for the dropdown\n */\n @State() searchValue: string = '';\n /**\n * The filtered options based on the search value\n */\n @State() filteredOptions: DropdownOption[] = [...this.options];\n /**\n * The aria-activedescendant attribute for the listbox element to indicate the currently active\n * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n * the active option.\n */\n @State() ariaActivedescendant: string = '';\n\n /**\n * The error message to display when the value is empty or null and the dropdown is required\n */\n @State() error: string = '';\n\n // Events\n /**\n * This event is fired when the selected option is changed\n */\n @Event({ bubbles: true, composed: true }) nylasFormDropdownChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n /**\n * This event is fired when the default selected option is set, on component load\n */\n @Event({ bubbles: true, composed: true }) nylasFormDropdownDefaultSelected!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = newValue;\n }\n\n @Watch('defaultSelectedOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (typeof newValue === 'undefined' || newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n this.nylasFormDropdownDefaultSelected.emit({\n value: newValue?.value || '',\n name: this.name,\n error: this.error,\n label: this.label,\n });\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n // Lifecycle methods\n componentWillLoad() {\n this.el.setAttribute('component-type', this.componentType);\n }\n\n componentDidLoad() {\n this.filteredOptions = this.options;\n // Set the selected option to the first option if no option is selected\n this.selectedOption = this.defaultSelectedOption;\n\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\n }\n this.nylasFormDropdownDefaultSelected.emit({\n value: this.selectedOption?.value || '',\n name: this.name,\n error: this.error,\n label: this.label,\n });\n this.applyThemeConfig(this.themeConfig);\n }\n\n // Event listeners\n /**\n * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n */\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validate(this.selectedOption?.value || '');\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /**\n * Listen for the formSubmitted event to validate the input value when the form is submitted.\n * @param event\n */\n @Listen('formSubmitted', { target: 'document' })\n handleFormSubmitted(event: CustomEvent) {\n this.validate(this.selectedOption?.value || '');\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage || `${this.label} is required.`;\n } else {\n this.error = '';\n }\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n filterOptions(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.searchValue = value;\n this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(value.toLowerCase()));\n }\n\n selectOption(option: DropdownOption): void {\n this.error = '';\n this.selectedOption = option;\n this.toggleDropdown();\n if (option.value !== this.emptyValue) {\n this.nylasFormDropdownChanged.emit({\n value: option.value,\n name: this.name,\n error: this.error,\n label: this.label,\n });\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n this.inputRef?.focus();\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e) {\n const items = this.filteredOptions; // Assuming this is the array of your current filtered options\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === items.length - 1) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === 0) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n } else if (e.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n focusOption(index) {\n const option = this.filteredOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' || (event.key == 'Tab' && !event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[0].value;\n this.focusOption(0);\n } else if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n this.focusOption(this.filteredOptions.length - 1);\n } else if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n generateButtonText(option: DropdownOption | null, dropButtonText?: string): string {\n if (dropButtonText) {\n return dropButtonText;\n }\n return option?.label ? `${this.pluralizedLabel ? this.pluralizedLabel : option?.label}` : this.emptyValue;\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n render() {\n const buttonText = this.generateButtonText(this.selectedOption, this.dropdownButtonText);\n return (\n <div class=\"dropdown\" part=\"sd_dropdown\">\n <label part=\"sd_dropdown_label\" class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n </p>\n )}\n <button\n part=\"sd_dropdown-button\"\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n aria-haspopup=\"listbox\"\n title={this.readOnly ? 'read-only field' : buttonText}\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"sd_dropdown-button-selected-label\">\n {buttonText}\n </span>\n {this.withChevron && (\n <span\n class={{\n open: this.isOpen,\n closed: !this.isOpen,\n chevron: true,\n }}\n aria-hidden=\"true\"\n >\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n )}\n </button>\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"sd_dropdown-content\">\n {this.withSearch && (\n <div class={{ 'search-box': true, 'open': this.isOpen }}>\n <search-icon width=\"15\" height=\"15\" class={'icon'} />\n <input\n type=\"text\"\n role=\"combobox\"\n placeholder={this.searchPlaceholder}\n value={this.searchValue}\n ref={el => (this.inputRef = el)}\n onInput={event => this.filterOptions(event)}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n />\n </div>\n )}\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.filteredOptions.map(option =>\n option.value.toString() ? (\n <li tabindex=\"0\" key={option.value} id={option.value} part={`${this.name}-${option.label}`} onClick={() => this.selectOption(option)} role=\"option\">\n {option.labelHTML ? <div part=\"sd_dropdown-labelhtml\">{option.labelHTML}</div> : option.label}\n </li>\n ) : null,\n )}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["selectDropdownCss","SelectDropdown","constructor","hostRef","this","componentType","options","defaultSelectedOption","withSearch","searchPlaceholder","required","readOnly","pluralizedLabel","withChevron","emptyValue","errorMessage","isOpen","searchValue","filteredOptions","ariaActivedescendant","error","optionsChangedHandler","newValue","oldValue","defaultSelectedOptionChangedHandler","label","selectedOption","nylasFormDropdownDefaultSelected","emit","value","name","themeConfigChangedHandler","newVal","oldVal","applyThemeConfig","themeConfig","key","Object","entries","el","style","setProperty","componentWillLoad","setAttribute","componentDidLoad","length","handleBookingFormSubmitted","event","validate","preventDefault","handleFormSubmitted","toggleDropdown","filterOptions","target","filter","option","toLowerCase","includes","selectOption","nylasFormDropdownChanged","handleSelectButtonKeyDown","inputRef","focus","handleListboxKeydown","e","items","currentIndex","findIndex","item","shiftKey","nextIndex","focusOption","prevIndex","index","elementId","element","shadowRoot","getElementById","scrollIntoView","behavior","block","handleComboboxKeyDown","generateButtonText","dropButtonText","handleOutsideClick","path","composedPath","isClickInside","render","buttonText","dropdownButtonText","h","class","part","dropbtn","open","onClick","disabled","title","onKeyDown","closed","chevron","width","height","type","role","placeholder","ref","onInput","tabindex","map","toString","id","labelHTML"],"sources":["src/components/design-system/select-dropdown/select-dropdown.scss?tag=select-dropdown&encapsulation=shadow","src/components/design-system/select-dropdown/select-dropdown.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n display: block;\n position: relative;\n @include default-css-variables;\n width: 100%;\n\n @media #{$mobile} {\n position: unset;\n }\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\n.dropdown {\n display: inline-block;\n width: inherit;\n}\n\n.dropbtn {\n color: var(--nylas-base-800);\n padding: 14px;\n font-size: 16px;\n font-family: var(--nylas-font-family);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n gap: 0.5rem;\n background: var(--nylas-base-0);\n border: 1px solid var(--nylas-base-300);\n border-radius: var(--nylas-border-radius-2x);\n\n &.error {\n border: 1px solid var(--nylas-error);\n }\n\n &:hover,\n &:active {\n outline: 1px solid var(--nylas-primary);\n }\n\n &:active {\n outline: 2px solid var(--nylas-primary);\n }\n\n &:disabled {\n cursor: not-allowed;\n background: var(--nylas-base-100);\n }\n\n span {\n &.chevron {\n display: flex;\n align-self: center;\n }\n\n &.open {\n transform: rotate(90deg);\n }\n\n &.closed {\n transform: rotate(270deg);\n }\n\n &.selected-option {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 144px;\n font-size: 14px;\n line-height: 20px;\n color: inherit;\n\n @media #{$mobile} {\n max-width: 124px;\n font-size: 16px;\n }\n }\n }\n}\n\n.dropdown-content {\n display: block;\n margin-top: 0.5rem;\n background-color: var(--nylas-base-0);\n width: 100%;\n max-height: 336px;\n overflow: auto;\n z-index: 1;\n border-radius: 4px;\n position: absolute;\n box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.05);\n box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);\n\n // Firefox scrollbar styling\n scrollbar-width: thin;\n scrollbar-color: var(--nylas-base-300) var(--nylas-base-50);\n\n // Custom scrollbar styling\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: var(--nylas-base-50);\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--nylas-base-300);\n border-radius: 4px;\n transition: background-color 0.2s ease;\n\n &:hover {\n background: var(--nylas-base-400);\n }\n }\n\n &::-webkit-scrollbar-thumb:active {\n background: var(--nylas-base-500);\n }\n\n @media #{$mobile} {\n right: 0;\n width: 325px;\n max-width: unset;\n }\n}\n\n.search-box {\n border-bottom: 1px solid var(--nylas-base-200);\n padding: 10px;\n position: sticky;\n top: 0;\n background: var(--nylas-base-0);\n\n .icon {\n position: absolute;\n top: 1.25rem;\n left: 1.25rem;\n color: var(--nylas-base-300);\n }\n}\n\n.dropdown-content ul {\n padding: 0;\n list-style-type: none;\n color: var(--nylas-base-900);\n max-height: 336px;\n\n li {\n padding: 16px, 12px, 16px, 12px;\n color: var(--nylas-base-900);\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n font-family: inherit;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0px;\n text-align: left;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--nylas-base-100);\n }\n }\n}\n\n.dropdown-content .selected {\n background-color: #e7e7e7;\n}\n\ninput[type='text'] {\n width: -webkit-fill-available;\n padding: inherit;\n border: 1px solid var(--nylas-base-200);\n border-radius: 4px;\n position: sticky;\n background: no-repeat scroll 7px 7px;\n padding-left: 30px;\n background-size: 16px 16px;\n color: var(--nylas-base-800);\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { DropdownOption, ThemeConfig } from '@nylas/core';\n\n/**\n * The `select-dropdown` component is a dropdown that allows users to select an option from a list of options.\n * This component is used in the scheduling form to input dropdown type inputs.\n * @part sd_dropdown - The dropdown container\n * @part sd_dropdown-button - The dropdown button\n * @part sd_dropdown-button-selected-label - The selected option label\n * @part sd_dropdown-content - The dropdown content\n * @part sd_dropdown_label - The dropdown label\n */\n@Component({\n tag: 'select-dropdown',\n styleUrl: 'select-dropdown.scss',\n shadow: true,\n})\nexport class SelectDropdown {\n @Element() el!: HTMLElement;\n private readonly componentType: string = 'select-dropdown';\n\n private inputRef?: HTMLInputElement;\n\n // Props\n /**\n * The name of the dropdown\n */\n @Prop() name!: string;\n /**\n * The options to display in the dropdown\n */\n @Prop() options: DropdownOption[] = [];\n /**\n * The default selected option\n */\n @Prop({ attribute: 'default-selected-option' }) defaultSelectedOption: DropdownOption | null = null;\n /**\n * Should show search input\n */\n @Prop() withSearch: boolean = true;\n\n /**\n * The placeholder for the search input\n */\n @Prop() searchPlaceholder: string = 'Search';\n\n /**\n * The label for the dropdown, skipped if no label is provided\n */\n @Prop() label?: string;\n\n /**\n * If true, the dropdown is required for form submission\n */\n @Prop() required: boolean = false;\n\n /**\n * The property to make the dropdown read-only. If true, the dropdown cannot be edited.\n */\n @Prop() readOnly: boolean = false;\n\n /**\n * Show pluralized label for the selected option. This is s tring that is appended to the selected option label as a suffix.\n */\n @Prop() pluralizedLabel: string = '';\n /**\n * Overrides the select dropdown to be used as a button with dropdownButtonText representing actions & dropdownText name on the dropdown intead of selected value\n */\n @Prop() dropdownButtonText?: string;\n /**\n * Should show chevron on button\n */\n @Prop() withChevron: boolean = true;\n /**\n * Allows to set the empty value of the dropdown\n */\n @Prop() emptyValue: string = 'Select an option'; // Default empty value\n /**\n * The custom error message to display when the value is empty or null and the dropdown is required\n */\n @Prop() errorMessage: string = '';\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n // States\n /**\n * The selected option\n */\n @State() selectedOption!: DropdownOption | null;\n /**\n * The open state of the dropdown\n */\n @State() isOpen: boolean = false;\n /**\n * The search value for the dropdown\n */\n @State() searchValue: string = '';\n /**\n * The filtered options based on the search value\n */\n @State() filteredOptions: DropdownOption[] = [...this.options];\n /**\n * The aria-activedescendant attribute for the listbox element to indicate the currently active\n * option in the list box to screen readers. The value of aria-activedescendant is the ID of\n * the active option.\n */\n @State() ariaActivedescendant: string = '';\n\n /**\n * The error message to display when the value is empty or null and the dropdown is required\n */\n @State() error: string = '';\n\n // Events\n /**\n * This event is fired when the selected option is changed\n */\n @Event({ bubbles: true, composed: true }) nylasFormDropdownChanged!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n /**\n * This event is fired when the default selected option is set, on component load\n */\n @Event({ bubbles: true, composed: true }) nylasFormDropdownDefaultSelected!: EventEmitter<{\n value: DropdownOption['value'];\n name: string;\n error?: string;\n label?: string;\n }>;\n\n @Watch('options')\n optionsChangedHandler(newValue: DropdownOption[], oldValue: DropdownOption[]) {\n if (newValue === oldValue) {\n return;\n }\n this.filteredOptions = newValue;\n }\n\n @Watch('defaultSelectedOption')\n defaultSelectedOptionChangedHandler(newValue: DropdownOption, oldValue: DropdownOption) {\n if (typeof newValue === 'undefined' || newValue?.label === oldValue?.label) {\n return;\n }\n this.selectedOption = newValue;\n this.nylasFormDropdownDefaultSelected.emit({\n value: newValue?.value || '',\n name: this.name,\n error: this.error,\n label: this.label,\n });\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n // Lifecycle methods\n componentWillLoad() {\n this.el.setAttribute('component-type', this.componentType);\n this.applyThemeConfig(this.themeConfig);\n }\n\n componentDidLoad() {\n this.filteredOptions = this.options;\n // Set the selected option to the first option if no option is selected\n this.selectedOption = this.defaultSelectedOption;\n\n if (!this.selectedOption && this.options.length > 0) {\n this.selectedOption = this.options[0];\n }\n this.nylasFormDropdownDefaultSelected.emit({\n value: this.selectedOption?.value || '',\n name: this.name,\n error: this.error,\n label: this.label,\n });\n this.applyThemeConfig(this.themeConfig);\n }\n\n // Event listeners\n /**\n * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n */\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validate(this.selectedOption?.value || '');\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /**\n * Listen for the formSubmitted event to validate the input value when the form is submitted.\n * @param event\n */\n @Listen('formSubmitted', { target: 'document' })\n handleFormSubmitted(event: CustomEvent) {\n this.validate(this.selectedOption?.value || '');\n if (this.error) {\n event.preventDefault();\n }\n }\n\n // Methods\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage || `${this.label} is required.`;\n } else {\n this.error = '';\n }\n }\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n filterOptions(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this.searchValue = value;\n this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(value.toLowerCase()));\n }\n\n selectOption(option: DropdownOption): void {\n this.error = '';\n this.selectedOption = option;\n this.toggleDropdown();\n if (option.value !== this.emptyValue) {\n this.nylasFormDropdownChanged.emit({\n value: option.value,\n name: this.name,\n error: this.error,\n label: this.label,\n });\n }\n }\n\n handleSelectButtonKeyDown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n case 'Enter':\n event.preventDefault();\n if (!this.isOpen) {\n this.toggleDropdown();\n }\n this.inputRef?.focus();\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n handleListboxKeydown(e) {\n const items = this.filteredOptions; // Assuming this is the array of your current filtered options\n const currentIndex = items.findIndex(item => item.value === this.ariaActivedescendant);\n if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === items.length - 1) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n this.ariaActivedescendant = items[nextIndex].value;\n this.focusOption(nextIndex);\n } else if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {\n e.preventDefault();\n if (currentIndex === 0) {\n this.ariaActivedescendant = '';\n this.inputRef?.focus();\n return;\n }\n const prevIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n this.ariaActivedescendant = items[prevIndex].value;\n this.focusOption(prevIndex);\n } else if (e.key === 'Enter') {\n e.preventDefault();\n if (this.ariaActivedescendant) {\n this.selectOption(items[currentIndex]);\n }\n } else if (e.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n focusOption(index) {\n const option = this.filteredOptions[index];\n if (!option) return; // Guard clause in case index is out of bounds\n\n const elementId = option.value;\n const element = this.el.shadowRoot?.getElementById(elementId) as HTMLLIElement;\n\n if (element) {\n element.focus(); // Set focus on the element\n element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }\n\n handleComboboxKeyDown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown' || (event.key == 'Tab' && !event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[0].value;\n this.focusOption(0);\n } else if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {\n event.preventDefault();\n this.ariaActivedescendant = this.filteredOptions[this.filteredOptions.length - 1].value;\n this.focusOption(this.filteredOptions.length - 1);\n } else if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n\n generateButtonText(option: DropdownOption | null, dropButtonText?: string): string {\n if (dropButtonText) {\n return dropButtonText;\n }\n return option?.label ? `${this.pluralizedLabel ? this.pluralizedLabel : option?.label}` : this.emptyValue;\n }\n\n // Event listeners\n @Listen('click', { target: 'document', capture: true })\n handleOutsideClick(event: MouseEvent) {\n // Get the path of the event\n const path = event.composedPath();\n\n // Check if the path includes the host element\n const isClickInside = path.includes(this.el);\n\n if (!isClickInside && this.isOpen) {\n this.isOpen = false;\n }\n }\n\n render() {\n const buttonText = this.generateButtonText(this.selectedOption, this.dropdownButtonText);\n return (\n <div class=\"dropdown\" part=\"sd_dropdown\">\n <label part=\"sd_dropdown_label\" class={{ error: !!this.error }}>\n {this.label && (\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n </p>\n )}\n <button\n part=\"sd_dropdown-button\"\n class={{ dropbtn: true, open: this.isOpen, error: !!this.error }}\n onClick={() => this.toggleDropdown()}\n disabled={this.readOnly}\n aria-haspopup=\"listbox\"\n title={this.readOnly ? 'read-only field' : buttonText}\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-label={this.name}\n onKeyDown={e => this.handleSelectButtonKeyDown(e)}\n >\n <slot name=\"select-icon\" aria-hidden=\"true\"></slot>\n <span class=\"selected-option\" part=\"sd_dropdown-button-selected-label\">\n {buttonText}\n </span>\n {this.withChevron && (\n <span\n class={{\n open: this.isOpen,\n closed: !this.isOpen,\n chevron: true,\n }}\n aria-hidden=\"true\"\n >\n <chevron-icon width=\"16\" height=\"16\" />\n </span>\n )}\n </button>\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n\n {this.isOpen ? (\n <div class=\"dropdown-content\" part=\"sd_dropdown-content\">\n {this.withSearch && (\n <div class={{ 'search-box': true, 'open': this.isOpen }}>\n <search-icon width=\"15\" height=\"15\" class={'icon'} />\n <input\n type=\"text\"\n role=\"combobox\"\n placeholder={this.searchPlaceholder}\n value={this.searchValue}\n ref={el => (this.inputRef = el)}\n onInput={event => this.filterOptions(event)}\n onKeyDown={e => this.handleComboboxKeyDown(e)}\n />\n </div>\n )}\n <ul tabindex=\"-1\" role=\"listbox\" aria-label={this.name} aria-activedescendant={this.ariaActivedescendant} onKeyDown={e => this.handleListboxKeydown(e)}>\n {this.filteredOptions.map(option =>\n option.value.toString() ? (\n <li tabindex=\"0\" key={option.value} id={option.value} part={`${this.name}-${option.label}`} onClick={() => this.selectOption(option)} role=\"option\">\n {option.labelHTML ? <div part=\"sd_dropdown-labelhtml\">{option.labelHTML}</div> : option.label}\n </li>\n ) : null,\n )}\n </ul>\n </div>\n ) : null}\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as t}from"./index-
|
|
1
|
+
import{r as e,h as t}from"./index-Cbn5rIwb.js";const s=".sc-sent-icon-h{display:flex}";const a=class{constructor(t){e(this,t);this.width="15";this.height="15"}render(){return t("svg",{key:"ffce130687f4ef8eabee0196aa55145ec208d16d",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"auto",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"098e8bb7d9b4f7f54438bebc87bc9bca9ace2f55",d:"M21.5 12L3.5 3.5L3.5 20.5L21.5 12Z",stroke:"auto","stroke-width":"1.5"}),t("path",{key:"fecda557e96b9e3caa4618a50bbc452bd8d58557",d:"M3.5 3.5L12 10.5",stroke:"auto","stroke-width":"1.5"}),t("path",{key:"43d3b8603612713683f5c86bdaa03535947ee6de",d:"M3.5 20.5L12 13.5",stroke:"auto","stroke-width":"1.5"}))}};a.style=s;export{a as sent_icon};
|
|
2
2
|
//# sourceMappingURL=sent-icon.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as s}from"./index-
|
|
1
|
+
import{r as t,h as s}from"./index-Cbn5rIwb.js";const e=".sc-spam-icon-h{display:flex}";const a=class{constructor(s){t(this,s);this.width="15";this.height="15"}render(){return s("svg",{key:"49a55f3d7a2e7bd7ded9af1b66990c5e164660d8",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"auto",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"d8e437fb080c224c34c06ba60ce1629d9854845c",d:"M20 3H4C2.89543 3 2 3.89543 2 5V19C2 20.1046 2.89543 21 4 21H20C21.1046 21 22 20.1046 22 19V5C22 3.89543 21.1046 3 20 3Z",stroke:"auto","stroke-width":"1.5"}),s("path",{key:"eb35d8976b9157f606aae287f370e156972dd8a5",d:"M2 5L12 12.5L22 5",stroke:"auto","stroke-width":"1.5"}))}};a.style=e;export{a as spam_icon};
|
|
2
2
|
//# sourceMappingURL=spam-icon.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as s}from"./index-
|
|
1
|
+
import{r as t,h as s}from"./index-Cbn5rIwb.js";const C=".sc-star-icon-h{display:flex}";const a=class{constructor(s){t(this,s);this.width="15";this.height="15"}render(){return s("svg",{key:"1b18302dca51a6ba1c039667b74ead6ef641d7ba",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"auto",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"998c9d862b265f50f4c47d0d0c0239eba050a5df",d:"M9.15316 5.40838C10.4198 3.13613 11.0531 2 12 2C12.9469 2 13.5802 3.13612 14.8468 5.40837L15.1745 5.99623C15.5345 6.64193 15.7144 6.96479 15.9951 7.17781C16.2757 7.39083 16.6251 7.4699 17.3241 7.62805L17.9605 7.77203C20.4201 8.32856 21.65 8.60682 21.9426 9.54773C22.2352 10.4886 21.3968 11.4691 19.7199 13.4299L19.2861 13.9372C18.8096 14.4944 18.5713 14.773 18.4641 15.1177C18.357 15.4624 18.393 15.8341 18.465 16.5776L18.5306 17.2544C18.7841 19.8706 18.9109 21.1787 18.1449 21.7602C17.3788 22.3417 16.2273 21.8115 13.9243 20.7512L13.3285 20.4768C12.6741 20.1755 12.3469 20.0248 12 20.0248C11.6531 20.0248 11.3259 20.1755 10.6715 20.4768L10.0757 20.7512C7.77268 21.8115 6.62118 22.3417 5.85515 21.7602C5.08912 21.1787 5.21588 19.8706 5.4694 17.2544L5.53498 16.5776C5.60703 15.8341 5.64305 15.4624 5.53586 15.1177C5.42868 14.773 5.19043 14.4944 4.71392 13.9372L4.2801 13.4299C2.60325 11.4691 1.76482 10.4886 2.05742 9.54773C2.35002 8.60682 3.57986 8.32856 6.03954 7.77203L6.67589 7.62805C7.37485 7.4699 7.72433 7.39083 8.00494 7.17781C8.28555 6.96479 8.46553 6.64194 8.82547 5.99623L9.15316 5.40838Z",stroke:"auto","stroke-width":"1.5"}))}};a.style=C;export{a as star_icon};
|
|
2
2
|
//# sourceMappingURL=star-icon.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as s}from"./index-
|
|
1
|
+
import{r as t,h as s}from"./index-Cbn5rIwb.js";const o=".sc-stop-icon-h{display:flex}";const e=class{constructor(s){t(this,s);this.width="15";this.height="15"}render(){return s("svg",{key:"a7454cd009a05a63a2823df63af8e3a574de84c4",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"auto",xmlns:"http://www.w3.org/2000/svg"},s("path",{key:"783665d2a49516f92ea68c15f771dc36c05507e7",d:"M4 4H20V20H4V4Z",stroke:"auto","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}))}};e.style=o;export{e as stop_icon};
|
|
2
2
|
//# sourceMappingURL=stop-icon.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea-component.entry.esm.js","sources":["src/components/design-system/textarea-component/textarea-component.scss?tag=textarea-component&encapsulation=shadow","src/components/design-system/textarea-component/textarea-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n display: block;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n display: flex;\n gap: 4px;\n align-items: center;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\ntextarea {\n @include textfield;\n padding: 12px 16px;\n border-width: 1;\n resize: vertical;\n border-radius: 8px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n\n &::-webkit-resizer {\n display: none;\n }\n}\n\ntextarea:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\n\n/**\n * `textarea-component` allows users to enter multiline text.\n * It is ideal for larger inputs like comments or messages in a form.\n * This component is used in the scheduling form to input multiline text.\n *\n * @part tc__label - The label for the textarea.\n * @part tc__textarea - The textarea element.\n */\n@Component({\n tag: 'textarea-component',\n styleUrl: 'textarea-component.scss',\n shadow: true,\n})\nexport class TextareaComponent {\n @Element() el!: HTMLElement;\n\n /**\n * The name of the textarea, important for form submissions.\n */\n @Prop() name: string = 'textarea';\n\n /**\n * The default value of the textarea, appearing when the component first renders.\n */\n @Prop() defaultValue?: string;\n\n /**\n * The label for the textarea, displayed above it.\n */\n @Prop() label: string = '';\n\n /**\n * Placeholder text shown in the textarea when it is empty.\n */\n @Prop() placeholder: string = '';\n\n /**\n * Specifies if the textarea is required for form submission.\n * If true, an error message shows if left empty.\n */\n @Prop() required: boolean = false;\n\n /**\n * If true, the textarea cannot be edited by the user.\n */\n @Prop() readOnly: boolean = false;\n\n /**\n * Automatically focus the textarea when the component loads.\n */\n @Prop() autoFocus: boolean = false;\n\n /**\n * The maximum number of characters allowed in the textarea.\n */\n @Prop() maxLength: number = 255;\n\n /**\n * The type\n */\n @Prop() type: string = 'multi_line_text';\n\n /**\n * The content of the label's tooltip\n */\n @Prop() tooltip: string = '';\n\n /**\n * Error message to display when the textarea is required and empty.\n */\n @Prop() errorMessage: string = '';\n\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /**\n * State for the current value of the textarea.\n */\n @State() value: string = '';\n\n /**\n * State for managing the display of any error messages.\n */\n @State() error: string = '';\n\n /**\n * Event emitted when the value of the textarea changes.\n * Useful for parent components to capture user input.\n */\n @Event() nylasFormInputChanged!: EventEmitter<{ value: string; name: string; error: string; label: string; type: string }>;\n\n /**\n * Lifecycle method that runs before the component loads.\n * It sets the initial value and cleans it using sanitize-html.\n */\n componentDidLoad() {\n this.value = sanitize(this.defaultValue || '');\n this.applyThemeConfig(this.themeConfig);\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n // Event listeners\n /**\n * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n */\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('triggerValidation', { target: 'document' })\n handletriggerValidation(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /**\n * Handles user input in the textarea, updating the value and emitting an event.\n */\n handleInput(e: Event) {\n this.error = '';\n const inputElement = e.target as HTMLTextAreaElement;\n this.value = sanitize(inputElement.value);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n error: this.error,\n label: this.label,\n type: this.type,\n });\n }\n\n /**\n * Validates the textarea value based on the required prop and maxLength.\n * If the value is invalid, an error message is displayed.\n */\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage || `${this.label} is required.`;\n } else if (value.length > this.maxLength) {\n this.error = `${this.label} cannot exceed ${this.maxLength} characters.`;\n } else {\n this.error = '';\n }\n }\n\n /**\n * Renders the component UI including the label, textarea, and any error messages.\n */\n render() {\n return (\n <label part=\"tc__label\" class={{ error: !!this.error }}>\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n {this.tooltip && (\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{this.tooltip}</span>\n </tooltip-component>\n )}\n </p>\n <textarea\n name={this.name}\n title={this.readOnly ? 'read-only field' : undefined}\n placeholder={this.placeholder}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n onInput={e => this.handleInput(e)}\n class={{ error: !!this.error }}\n part=\"tc__textarea\"\n />\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"textarea-component.entry.esm.js","sources":["src/components/design-system/textarea-component/textarea-component.scss?tag=textarea-component&encapsulation=shadow","src/components/design-system/textarea-component/textarea-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n display: block;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n display: flex;\n gap: 4px;\n align-items: center;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\ntextarea {\n @include textfield;\n padding: 12px 16px;\n border-width: 1;\n resize: vertical;\n border-radius: 8px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n\n &::-webkit-resizer {\n display: none;\n }\n}\n\ntextarea:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\n\n/**\n * `textarea-component` allows users to enter multiline text.\n * It is ideal for larger inputs like comments or messages in a form.\n * This component is used in the scheduling form to input multiline text.\n *\n * @part tc__label - The label for the textarea.\n * @part tc__textarea - The textarea element.\n */\n@Component({\n tag: 'textarea-component',\n styleUrl: 'textarea-component.scss',\n shadow: true,\n})\nexport class TextareaComponent {\n @Element() el!: HTMLElement;\n\n /**\n * The name of the textarea, important for form submissions.\n */\n @Prop() name: string = 'textarea';\n\n /**\n * The default value of the textarea, appearing when the component first renders.\n */\n @Prop() defaultValue?: string;\n\n /**\n * The label for the textarea, displayed above it.\n */\n @Prop() label: string = '';\n\n /**\n * Placeholder text shown in the textarea when it is empty.\n */\n @Prop() placeholder: string = '';\n\n /**\n * Specifies if the textarea is required for form submission.\n * If true, an error message shows if left empty.\n */\n @Prop() required: boolean = false;\n\n /**\n * If true, the textarea cannot be edited by the user.\n */\n @Prop() readOnly: boolean = false;\n\n /**\n * Automatically focus the textarea when the component loads.\n */\n @Prop() autoFocus: boolean = false;\n\n /**\n * The maximum number of characters allowed in the textarea.\n */\n @Prop() maxLength: number = 255;\n\n /**\n * The type\n */\n @Prop() type: string = 'multi_line_text';\n\n /**\n * The content of the label's tooltip\n */\n @Prop() tooltip: string = '';\n\n /**\n * Error message to display when the textarea is required and empty.\n */\n @Prop() errorMessage: string = '';\n\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /**\n * State for the current value of the textarea.\n */\n @State() value: string = '';\n\n /**\n * State for managing the display of any error messages.\n */\n @State() error: string = '';\n\n /**\n * Event emitted when the value of the textarea changes.\n * Useful for parent components to capture user input.\n */\n @Event() nylasFormInputChanged!: EventEmitter<{ value: string; name: string; error: string; label: string; type: string }>;\n\n componentWillLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n /**\n * Lifecycle method that runs before the component loads.\n * It sets the initial value and cleans it using sanitize-html.\n */\n componentDidLoad() {\n this.value = sanitize(this.defaultValue || '');\n this.applyThemeConfig(this.themeConfig);\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n // Event listeners\n /**\n * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n */\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('triggerValidation', { target: 'document' })\n handletriggerValidation(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /**\n * Handles user input in the textarea, updating the value and emitting an event.\n */\n handleInput(e: Event) {\n this.error = '';\n const inputElement = e.target as HTMLTextAreaElement;\n this.value = sanitize(inputElement.value);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n error: this.error,\n label: this.label,\n type: this.type,\n });\n }\n\n /**\n * Validates the textarea value based on the required prop and maxLength.\n * If the value is invalid, an error message is displayed.\n */\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage || `${this.label} is required.`;\n } else if (value.length > this.maxLength) {\n this.error = `${this.label} cannot exceed ${this.maxLength} characters.`;\n } else {\n this.error = '';\n }\n }\n\n /**\n * Renders the component UI including the label, textarea, and any error messages.\n */\n render() {\n return (\n <label part=\"tc__label\" class={{ error: !!this.error }}>\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n {this.tooltip && (\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{this.tooltip}</span>\n </tooltip-component>\n )}\n </p>\n <textarea\n name={this.name}\n title={this.readOnly ? 'read-only field' : undefined}\n placeholder={this.placeholder}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n onInput={e => this.handleInput(e)}\n class={{ error: !!this.error }}\n part=\"tc__textarea\"\n />\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,a,h as l,e as r}from"./index-
|
|
1
|
+
import{r as e,a,h as l,e as r}from"./index-Cbn5rIwb.js";import{n as s}from"./utils-DhmCcrVs.js";const o=':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:100%}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%;flex-direction:column;gap:4px;font-family:var(--nylas-font-family);font-size:16px;color:var(--nylas-base-800)}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}label p{margin:0;display:flex;gap:4px;align-items:center}label .error{color:var(--nylas-error)}textarea{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%;padding:12px 16px;border-width:1;resize:vertical;border-radius:8px;font-family:var(--nylas-font-family);font-size:16px;line-height:24px}textarea:focus{outline-color:var(--nylas-primary)}textarea.error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}textarea.error::placeholder{font-weight:400}textarea::placeholder{color:var(--nylas-base-300)}textarea::-webkit-resizer{display:none}textarea:read-only{background-color:var(--nylas-base-100);cursor:not-allowed}';const n=class{constructor(l){e(this,l);this.nylasFormInputChanged=a(this,"nylasFormInputChanged",7);this.name="textarea";this.label="";this.placeholder="";this.required=false;this.readOnly=false;this.autoFocus=false;this.maxLength=255;this.type="multi_line_text";this.tooltip="";this.errorMessage="";this.value="";this.error=""}componentWillLoad(){this.applyThemeConfig(this.themeConfig)}componentDidLoad(){this.value=s(this.defaultValue||"");this.applyThemeConfig(this.themeConfig)}themeConfigChangedHandler(e,a){if(e===a)return;this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[a,l]of Object.entries(e)){this.el.style.setProperty(`${a}`,l)}}}handleBookingFormSubmitted(e){this.validate(this.value);if(this.error){e.preventDefault()}}handletriggerValidation(e){this.validate(this.value);if(this.error){e.preventDefault()}}handleInput(e){this.error="";const a=e.target;this.value=s(a.value);this.nylasFormInputChanged.emit({value:this.value,name:this.name,error:this.error,label:this.label,type:this.type})}validate(e){if(this.required&&!e){this.error=this.errorMessage||`${this.label} is required.`}else if(e.length>this.maxLength){this.error=`${this.label} cannot exceed ${this.maxLength} characters.`}else{this.error=""}}render(){return l("label",{key:"b0cbeb4d6ffc39cde460014c115fac9e64767061",part:"tc__label",class:{error:!!this.error}},l("p",{key:"5b70a94ef6f82c8c6886932ffc3b90eb52c840f6"},l("span",{key:"43e7fea3baa851b9feed6627cb39247d0dce34a7",class:"label"},this.label),this.required&&l("span",{key:"b042b60a0106ba8ce4cf9a3128b84a5cf18df656",class:"required"},"*"),this.tooltip&&l("tooltip-component",{key:"50dbf3a8497a81138127905840a2298b9c679bf6"},l("info-icon",{key:"d9d84032284aa340e67a3c92dfeb9a09431c8194",slot:"tooltip-icon"}),l("span",{key:"1ca37da4318c15e27cc124d002b169faa10caf5e",slot:"tooltip-content"},this.tooltip))),l("textarea",{key:"16d22f81b3adfb67f68bc498b7f0edf01b7ac635",name:this.name,title:this.readOnly?"read-only field":undefined,placeholder:this.placeholder,readOnly:this.readOnly,autoFocus:this.autoFocus,value:this.value,maxLength:this.maxLength,onInput:e=>this.handleInput(e),class:{error:!!this.error},part:"tc__textarea"}),this.error&&l("span",{key:"c97fa0320a33b53c4911a12c2e2a850a012b1550",class:"error help-text"},this.error))}get el(){return r(this)}static get watchers(){return{themeConfig:["themeConfigChangedHandler"]}}};n.style=o;export{n as textarea_component};
|
|
2
2
|
//# sourceMappingURL=textarea-component.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["textareaComponentCss","TextareaComponent","constructor","hostRef","this","name","label","placeholder","required","readOnly","autoFocus","maxLength","type","tooltip","errorMessage","value","error","
|
|
1
|
+
{"version":3,"names":["textareaComponentCss","TextareaComponent","constructor","hostRef","this","name","label","placeholder","required","readOnly","autoFocus","maxLength","type","tooltip","errorMessage","value","error","componentWillLoad","applyThemeConfig","themeConfig","componentDidLoad","sanitize","defaultValue","themeConfigChangedHandler","newVal","oldVal","key","Object","entries","el","style","setProperty","handleBookingFormSubmitted","event","validate","preventDefault","handletriggerValidation","handleInput","e","inputElement","target","nylasFormInputChanged","emit","length","render","h","part","class","slot","title","undefined","onInput"],"sources":["src/components/design-system/textarea-component/textarea-component.scss?tag=textarea-component&encapsulation=shadow","src/components/design-system/textarea-component/textarea-component.tsx"],"sourcesContent":["@use '../../../common/styles/variables' as *;\n@use '../../../common/mixins/inputs' as *;\n\n:host {\n display: block;\n @include default-css-variables;\n width: 100%;\n}\n\nlabel {\n @include input-label;\n flex-direction: column;\n gap: 4px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n color: var(--nylas-base-800);\n\n p {\n margin: 0;\n display: flex;\n gap: 4px;\n align-items: center;\n }\n\n .error {\n color: var(--nylas-error);\n }\n}\n\ntextarea {\n @include textfield;\n padding: 12px 16px;\n border-width: 1;\n resize: vertical;\n border-radius: 8px;\n font-family: var(--nylas-font-family);\n font-size: 16px;\n line-height: 24px;\n\n &::-webkit-resizer {\n display: none;\n }\n}\n\ntextarea:read-only {\n background-color: var(--nylas-base-100);\n cursor: not-allowed;\n}\n","import { sanitize } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport { Component, h, Prop, State, Event, EventEmitter, Listen, Watch, Element } from '@stencil/core';\n\n/**\n * `textarea-component` allows users to enter multiline text.\n * It is ideal for larger inputs like comments or messages in a form.\n * This component is used in the scheduling form to input multiline text.\n *\n * @part tc__label - The label for the textarea.\n * @part tc__textarea - The textarea element.\n */\n@Component({\n tag: 'textarea-component',\n styleUrl: 'textarea-component.scss',\n shadow: true,\n})\nexport class TextareaComponent {\n @Element() el!: HTMLElement;\n\n /**\n * The name of the textarea, important for form submissions.\n */\n @Prop() name: string = 'textarea';\n\n /**\n * The default value of the textarea, appearing when the component first renders.\n */\n @Prop() defaultValue?: string;\n\n /**\n * The label for the textarea, displayed above it.\n */\n @Prop() label: string = '';\n\n /**\n * Placeholder text shown in the textarea when it is empty.\n */\n @Prop() placeholder: string = '';\n\n /**\n * Specifies if the textarea is required for form submission.\n * If true, an error message shows if left empty.\n */\n @Prop() required: boolean = false;\n\n /**\n * If true, the textarea cannot be edited by the user.\n */\n @Prop() readOnly: boolean = false;\n\n /**\n * Automatically focus the textarea when the component loads.\n */\n @Prop() autoFocus: boolean = false;\n\n /**\n * The maximum number of characters allowed in the textarea.\n */\n @Prop() maxLength: number = 255;\n\n /**\n * The type\n */\n @Prop() type: string = 'multi_line_text';\n\n /**\n * The content of the label's tooltip\n */\n @Prop() tooltip: string = '';\n\n /**\n * Error message to display when the textarea is required and empty.\n */\n @Prop() errorMessage: string = '';\n\n /**\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: ThemeConfig;\n\n /**\n * State for the current value of the textarea.\n */\n @State() value: string = '';\n\n /**\n * State for managing the display of any error messages.\n */\n @State() error: string = '';\n\n /**\n * Event emitted when the value of the textarea changes.\n * Useful for parent components to capture user input.\n */\n @Event() nylasFormInputChanged!: EventEmitter<{ value: string; name: string; error: string; label: string; type: string }>;\n\n componentWillLoad() {\n this.applyThemeConfig(this.themeConfig);\n }\n\n /**\n * Lifecycle method that runs before the component loads.\n * It sets the initial value and cleans it using sanitize-html.\n */\n componentDidLoad() {\n this.value = sanitize(this.defaultValue || '');\n this.applyThemeConfig(this.themeConfig);\n }\n\n @Watch('themeConfig')\n themeConfigChangedHandler(newVal: ThemeConfig, oldVal: ThemeConfig) {\n if (newVal === oldVal) return;\n this.applyThemeConfig(newVal);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.el.style.setProperty(`${key}`, value);\n }\n }\n }\n\n // Event listeners\n /**\n * Listen for the bookingFormSubmitted event to validate the input value when the form is submitted.\n */\n @Listen('bookingFormSubmitted', { target: 'document' })\n handleBookingFormSubmitted(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n @Listen('triggerValidation', { target: 'document' })\n handletriggerValidation(event: CustomEvent) {\n this.validate(this.value);\n if (this.error) {\n event.preventDefault();\n }\n }\n\n /**\n * Handles user input in the textarea, updating the value and emitting an event.\n */\n handleInput(e: Event) {\n this.error = '';\n const inputElement = e.target as HTMLTextAreaElement;\n this.value = sanitize(inputElement.value);\n this.nylasFormInputChanged.emit({\n value: this.value,\n name: this.name,\n error: this.error,\n label: this.label,\n type: this.type,\n });\n }\n\n /**\n * Validates the textarea value based on the required prop and maxLength.\n * If the value is invalid, an error message is displayed.\n */\n validate(value: string) {\n if (this.required && !value) {\n this.error = this.errorMessage || `${this.label} is required.`;\n } else if (value.length > this.maxLength) {\n this.error = `${this.label} cannot exceed ${this.maxLength} characters.`;\n } else {\n this.error = '';\n }\n }\n\n /**\n * Renders the component UI including the label, textarea, and any error messages.\n */\n render() {\n return (\n <label part=\"tc__label\" class={{ error: !!this.error }}>\n <p>\n <span class=\"label\">{this.label}</span>\n {this.required && <span class=\"required\">*</span>}\n {this.tooltip && (\n <tooltip-component>\n <info-icon slot=\"tooltip-icon\" />\n <span slot=\"tooltip-content\">{this.tooltip}</span>\n </tooltip-component>\n )}\n </p>\n <textarea\n name={this.name}\n title={this.readOnly ? 'read-only field' : undefined}\n placeholder={this.placeholder}\n readOnly={this.readOnly}\n autoFocus={this.autoFocus}\n value={this.value}\n maxLength={this.maxLength}\n onInput={e => this.handleInput(e)}\n class={{ error: !!this.error }}\n part=\"tc__textarea\"\n />\n {this.error && <span class=\"error help-text\">{this.error}</span>}\n </label>\n );\n }\n}\n"],"mappings":"gGAAA,MAAMA,EAAuB,87G,MCiBhBC,EAAiB,MAL9B,WAAAC,CAAAC,G,uEAWUC,KAAIC,KAAW,WAUfD,KAAKE,MAAW,GAKhBF,KAAWG,YAAW,GAMtBH,KAAQI,SAAY,MAKpBJ,KAAQK,SAAY,MAKpBL,KAASM,UAAY,MAKrBN,KAASO,UAAW,IAKpBP,KAAIQ,KAAW,kBAKfR,KAAOS,QAAW,GAKlBT,KAAYU,aAAW,GAUtBV,KAAKW,MAAW,GAKhBX,KAAKY,MAAW,EAqH1B,CA7GC,iBAAAC,GACEb,KAAKc,iBAAiBd,KAAKe,Y,CAO7B,gBAAAC,GACEhB,KAAKW,MAAQM,EAASjB,KAAKkB,cAAgB,IAC3ClB,KAAKc,iBAAiBd,KAAKe,Y,CAI7B,yBAAAI,CAA0BC,EAAqBC,GAC7C,GAAID,IAAWC,EAAQ,OACvBrB,KAAKc,iBAAiBM,E,CAGxB,gBAAAN,CAAiBC,GACf,GAAIA,EAAa,CACf,IAAK,MAAOO,EAAKX,KAAUY,OAAOC,QAAQT,GAAc,CACtDf,KAAKyB,GAAGC,MAAMC,YAAY,GAAGL,IAAOX,E,GAU1C,0BAAAiB,CAA2BC,GACzB7B,KAAK8B,SAAS9B,KAAKW,OACnB,GAAIX,KAAKY,MAAO,CACdiB,EAAME,gB,EAKV,uBAAAC,CAAwBH,GACtB7B,KAAK8B,SAAS9B,KAAKW,OACnB,GAAIX,KAAKY,MAAO,CACdiB,EAAME,gB,EAOV,WAAAE,CAAYC,GACVlC,KAAKY,MAAQ,GACb,MAAMuB,EAAeD,EAAEE,OACvBpC,KAAKW,MAAQM,EAASkB,EAAaxB,OACnCX,KAAKqC,sBAAsBC,KAAK,CAC9B3B,MAAOX,KAAKW,MACZV,KAAMD,KAAKC,KACXW,MAAOZ,KAAKY,MACZV,MAAOF,KAAKE,MACZM,KAAMR,KAAKQ,M,CAQf,QAAAsB,CAASnB,GACP,GAAIX,KAAKI,WAAaO,EAAO,CAC3BX,KAAKY,MAAQZ,KAAKU,cAAgB,GAAGV,KAAKE,oB,MACrC,GAAIS,EAAM4B,OAASvC,KAAKO,UAAW,CACxCP,KAAKY,MAAQ,GAAGZ,KAAKE,uBAAuBF,KAAKO,uB,KAC5C,CACLP,KAAKY,MAAQ,E,EAOjB,MAAA4B,GACE,OACEC,EAAO,SAAAnB,IAAA,2CAAAoB,KAAK,YAAYC,MAAO,CAAE/B,QAASZ,KAAKY,QAC7C6B,EAAA,KAAAnB,IAAA,4CACEmB,EAAA,QAAAnB,IAAA,2CAAMqB,MAAM,SAAS3C,KAAKE,OACzBF,KAAKI,UAAYqC,EAAA,QAAAnB,IAAA,2CAAMqB,MAAM,YAAmB,KAChD3C,KAAKS,SACJgC,EAAA,qBAAAnB,IAAA,4CACEmB,EAAW,aAAAnB,IAAA,2CAAAsB,KAAK,iBAChBH,EAAM,QAAAnB,IAAA,2CAAAsB,KAAK,mBAAmB5C,KAAKS,WAIzCgC,EAAA,YAAAnB,IAAA,2CACErB,KAAMD,KAAKC,KACX4C,MAAO7C,KAAKK,SAAW,kBAAoByC,UAC3C3C,YAAaH,KAAKG,YAClBE,SAAUL,KAAKK,SACfC,UAAWN,KAAKM,UAChBK,MAAOX,KAAKW,MACZJ,UAAWP,KAAKO,UAChBwC,QAASb,GAAKlC,KAAKiC,YAAYC,GAC/BS,MAAO,CAAE/B,QAASZ,KAAKY,OACvB8B,KAAK,iBAEN1C,KAAKY,OAAS6B,EAAA,QAAAnB,IAAA,2CAAMqB,MAAM,mBAAmB3C,KAAKY,O","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,a as t,h as r,e as o}from"./index-
|
|
1
|
+
import{r as e,a as t,h as r,e as o}from"./index-Cbn5rIwb.js";import{g as i}from"./constants-DhnshuDN.js";import{b as d,i as s}from"./utils-DhmCcrVs.js";const p='.time-period-selector.sc-time-period-selector{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector,.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector{border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x)}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector{width:116px}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector{width:84px;display:flex;align-items:center}.time-period-selector.sc-time-period-selector select-dropdown#time-period.sc-time-period-selector::part(sd_dropdown-button),.time-period-selector.sc-time-period-selector select-dropdown#time-period.sc-time-period-selector [part~="sd_dropdown-button"]{width:100%}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown),.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector [part~="id_dropdown"]{width:inherit;height:100%}.time-period-selector.sc-time-period-selector input-dropdown#time-number.sc-time-period-selector::part(id_dropdown-input),.time-period-selector.sc-time-period-selector input-dropdown#time-number.sc-time-period-selector [part~="id_dropdown-input"]{border:none;border-radius:var(--nylas-border-radius-2x)}.time-period-selector.sc-time-period-selector input-dropdown#time-number.error.sc-time-period-selector::part(id_dropdown-input),.time-period-selector.sc-time-period-selector input-dropdown#time-number.error.sc-time-period-selector [part~="id_dropdown-input"]{border:1px solid var(--nylas-error)}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector:hover{outline:1px solid var(--nylas-primary);border:none}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown-input),.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector [part~="id_dropdown-input"]{padding:16px;gap:1rem}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown-input):hover,.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector [part~="id_dropdown-input"]:hover{border:none;outline:none}.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector::part(id_dropdown-content),.time-period-selector.sc-time-period-selector input-dropdown.sc-time-period-selector [part~="id_dropdown-content"]{width:100%;max-height:200px}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown),.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector [part~="sd_dropdown"]{width:inherit;height:100%}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown_label),.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector [part~="sd_dropdown_label"]{height:100%}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown-button),.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector [part~="sd_dropdown-button"]{padding:1rem;gap:1rem;justify-content:space-between;border:none;align-items:center;height:100%}.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector::part(sd_dropdown-content),.time-period-selector.sc-time-period-selector select-dropdown.sc-time-period-selector [part~="sd_dropdown-content"]{width:100%;max-height:200px}';const n={hours:"hour",days:"day",weeks:"week",months:"month",years:"year"};const c=class{constructor(r){e(this,r);this.timePeriodChanged=t(this,"timePeriodChanged",7);this.timePeriods=i;this.hasError=false;this.selectedPeriod=this.defaultSelectedPeriod;this.selectedNumber=this.defaultSelectedNumber;this.numberOptions=this.calculateOptions(this.defaultSelectedPeriod||"hour").map((e=>({label:e.toString(),value:e.toString()})));this.timePeriodOptions=this.timePeriods.map((e=>({label:e.label,value:e.value})))}defaultSelectedPeriodChanged(e){this.selectedPeriod=e;this.updateNumberOptionsAndSelectedNumber(e)}defaultSelectedNumberChanged(e){this.selectedNumber=e}timePeriodsChanged(e){this.timePeriodOptions=[...e]}themeConfigChangedHandler(e,t){if(e===t)return;this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[t,r]of Object.entries(e)){this.host.style.setProperty(`${t}`,r)}}}componentDidLoad(){this.selectedNumber=this.defaultSelectedNumber;this.selectedPeriod=this.defaultSelectedPeriod;const e=n[this.selectedPeriod]??this.selectedPeriod;const t=this.calculateOptions(e);this.numberOptions=t.map((e=>({label:e.toString(),value:e.toString()})));this.applyThemeConfig(this.themeConfig)}calculateOptions(e){switch(e){case"hour":return Array.from({length:23},((e,t)=>t+1));case"minute":return Array.from({length:13},((e,t)=>t*5));case"day":return Array.from({length:30},((e,t)=>t+1));case"week":return Array.from({length:4},((e,t)=>t+1));case"month":return Array.from({length:12},((e,t)=>t+1));case"year":return Array.from({length:10},((e,t)=>t+1));default:return[]}}inputOptionChangedHandler(e){d("time-period-selector","inputOptionChangedHandler",e.detail);const{value:t,name:r}=e.detail;if(r==="time-number"){this.selectedNumber=t?parseInt(t):this.defaultSelectedNumber}const o={number:this.selectedNumber,period:this.selectedPeriod};this.timePeriodChanged.emit(o)}nylasFormDropdownChangedHandler(e){d("time-period-selector","nylasFormDropdownChangedHandler",e.detail);const{value:t,name:r}=e.detail;if(r==="time-period"){this.selectedPeriod=t;this.updateNumberOptionsAndSelectedNumber(t)}else if(r==="time-number"){this.selectedNumber=parseInt(t)}const o={number:this.selectedNumber,period:this.selectedPeriod};this.timePeriodChanged.emit(o)}updateNumberOptionsAndSelectedNumber(e){const t=this.calculateOptions(e);this.numberOptions=t.map((e=>({label:e.toString(),value:e.toString()})))}render(){return r("div",{key:"634d5344a3a5b6df65bcf190c0b31b563d969818",class:"time-period-selector"},typeof this.selectedNumber=="number"&&r("input-dropdown",{key:"3fe3a3eec4eea056b86c2ea15e44d37fa730cc2c",id:"time-number",name:"time-number",class:{error:this.hasError},inputValue:this.selectedNumber.toString(),exportparts:"id_dropdown: tps__number-dropdown, id_dropdown-input: tps__number-dropdown-button, id_dropdown-content: tps__number-dropdown-content",options:this.numberOptions,defaultInputOption:this.numberOptions.find((e=>e.value==this.selectedNumber.toString())),themeConfig:this.themeConfig}),typeof this.selectedPeriod=="string"&&r("select-dropdown",{key:"7e309f4581e68da49d8b684229a825a0d2cac63d",id:"time-period",name:"time-period",options:this.timePeriodOptions,exportparts:"sd_dropdown: tps__period-dropdown, sd_dropdown-button: tps__period-dropdown-button, sd_dropdown-content: tps__period-dropdown-content",pluralizedLabel:this.selectedNumber>1?s.t(`time.${this.selectedPeriod}s`):s.t(`time.${this.selectedPeriod}`),defaultSelectedOption:this.timePeriodOptions?.find((e=>e.value==this.selectedPeriod)),withSearch:false,themeConfig:this.themeConfig}))}get host(){return o(this)}static get watchers(){return{defaultSelectedPeriod:["defaultSelectedPeriodChanged"],defaultSelectedNumber:["defaultSelectedNumberChanged"],timePeriods:["timePeriodsChanged"],themeConfig:["themeConfigChangedHandler"]}}};c.style=p;export{c as time_period_selector};
|
|
2
2
|
//# sourceMappingURL=time-period-selector.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,a as l,h as s,e as o}from"./index-
|
|
1
|
+
import{r as e,a as l,h as s,e as o}from"./index-Cbn5rIwb.js";const a=':host{--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:"Inter", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.switch{display:inline-block;height:34px;position:relative;width:60px}.switch input{display:none}.slider{background-color:var(--nylas-base-300);bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:0.4s}.slider:before{background-color:var(--nylas-base-50);bottom:4px;content:"";height:32px;left:4px;position:absolute;transition:0.4s;width:32px}input:checked+.slider{background-color:var(--nylas-success)}input:checked+.slider:before{transform:translateX(32px)}.slider.round{border-radius:35px;width:72px;height:40px}.slider.round:before{border-radius:50%}';const r=class{constructor(s){e(this,s);this.nylasFormSwitchToggled=l(this,"nylasFormSwitchToggled",7);this.name="toggle-switch";this.checked=false;this.label="";this.isChecked=this.checked}checkedChanged(e){this.isChecked=e}themeConfigChangedHandler(e,l){if(e===l)return;this.applyThemeConfig(e)}applyThemeConfig(e){if(e){for(const[l,s]of Object.entries(e)){this.el.style.setProperty(`${l}`,s)}}}componentWillLoad(){this.isChecked=this.checked;this.applyThemeConfig(this.themeConfig)}componentDidLoad(){this.applyThemeConfig(this.themeConfig)}toggleCheck(){this.isChecked=!this.isChecked;this.nylasFormSwitchToggled.emit({checked:this.isChecked,name:this.name,label:this.label})}render(){return s("label",{key:"61cdd216e1fad2c66b46c50ad308ef483816f7f0",class:"switch",part:"ts_label"},s("input",{key:"98fa7ff53cd2c3da7e11cf0f5645d2284f2e1f00",type:"checkbox",part:"ts_input",name:this.name,checked:this.isChecked,onChange:()=>this.toggleCheck()}),s("div",{key:"c7cc62ba0c0d748007553be10ee67eade9872701",class:"slider round",part:`ts_slider ${this.isChecked?"ts_slider_checked":""}`}))}get el(){return o(this)}static get watchers(){return{checked:["checkedChanged"],themeConfig:["themeConfigChangedHandler"]}}};r.style=a;export{r as toggle_switch};
|
|
2
2
|
//# sourceMappingURL=toggle-switch.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as o,h as e,e as l}from"./index-
|
|
1
|
+
import{r as o,h as e,e as l}from"./index-Cbn5rIwb.js";const a='.tooltip-container{position:relative;display:flex;--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}.tooltip-content{display:none;background-color:var(--nylas-base-800);color:var(--nylas-base-0);text-align:left;border-radius:6px;padding:5px 0;position:absolute;z-index:1;transition:opacity 0.3s;padding:0.5rem 1rem;max-width:200px;width:max-content}.tooltip-content.top{bottom:0;left:0;margin-bottom:1.25rem;transform:translateX(-50%)}.tooltip-content.right{top:50%;left:0%;margin-left:1.25rem;transform:translateY(-50%)}.tooltip-content.bottom{top:0;left:0;margin-top:1.25rem;transform:translateX(-50%)}.tooltip-content.left{top:50%;right:0%;margin-right:1.25rem;transform:translateY(-50%)}.tooltip-container:hover .tooltip-content,.tooltip-container:focus-within .tooltip-content{display:inline}.tooltip-content::after{content:"";position:absolute;top:-0.75rem;left:50%;transform:rotate(180deg);border-width:6px;border-style:solid;border-color:var(--nylas-base-900) transparent transparent transparent}.tooltip-content.top::after{top:100%;left:50%;transform:rotate(0deg)}.tooltip-content.bottom::after{top:-0.75rem;left:50%;transform:rotate(180deg)}.tooltip-content.left::after{top:47.5%;left:100%;transform:rotate(270deg)}.tooltip-content.right::after{top:47.5%;left:-0.75rem;transform:rotate(90deg)}';const r=class{constructor(e){o(this,e);this.position="bottom"}showTooltip(o){o.target.nextElementSibling.style.display="inline"}hideTooltip(o){o.target.nextElementSibling.style.display="none"}render(){return e("div",{key:"2a4f34fe50836fd863f30d037de2df43238f04da",class:"tooltip-container",part:"tc__container"},e("span",{key:"90e5c2cbcd0f911f44c1913f8bb44a4d7b9db65c",class:"info-icon",tabindex:"0",onFocus:this.showTooltip.bind(this),onBlur:this.hideTooltip.bind(this)},e("slot",{key:"8173d93c63026171627fc99be32c6f94d4e6f45b",name:"tooltip-icon"},"i")),e("span",{key:"375781fe085a1bea6d998d5b9cb8516b77acb744",class:`tooltip-content ${this.position}`,part:"tc__content"},e("slot",{key:"3d7f984edbd2467b03ec1da7918a57ec6250b98e",name:"tooltip-content"},"This is a help text.")))}get el(){return l(this)}};r.style=a;export{r as tooltip_component};
|
|
2
2
|
//# sourceMappingURL=tooltip-component.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as C,h as t}from"./index-
|
|
1
|
+
import{r as C,h as t}from"./index-Cbn5rIwb.js";const s=".sc-translate-icon-h{display:flex}";const c=class{constructor(t){C(this,t);this.width="16";this.height="16"}render(){return t("svg",{key:"375c616a5cc79b53941d95cd9e06aca0c7a05596",xmlns:"http://www.w3.org/2000/svg",width:this.width,height:this.height,viewBox:"0 0 20 20",fill:"none"},t("path",{key:"49677eabad2818accf1f2e1e13cb55c24250d851",fill:"currentColor",d:"M14.1663 4.02867C14.4267 4.12081 14.563 4.40654 14.4709 4.66685C14.3501 5.00788 14.2182 5.4771 14.1178 5.86047C14.6877 5.77587 15.2665 5.65653 15.8867 5.51288C16.1557 5.45058 16.4243 5.61815 16.4866 5.88717C16.5489 6.15619 16.3814 6.42479 16.1123 6.4871C15.339 6.66621 14.6101 6.81289 13.8717 6.90283C13.7759 7.35654 13.7014 7.77084 13.6451 8.15021C14.1202 8.04599 14.5738 8.00553 14.9996 8.02075L14.9996 8C14.9996 7.72386 15.2235 7.5 15.4996 7.5C15.7758 7.5 15.9996 7.72386 15.9996 8C15.9996 8.05657 15.9991 8.11281 15.9979 8.16871C17.1392 8.47838 17.9781 9.23987 18.3435 10.2263C18.9579 11.8853 18.1287 13.8787 15.7027 14.9569C15.4504 15.069 15.1549 14.9554 15.0427 14.7031C14.9306 14.4507 15.0442 14.1552 15.2966 14.0431C17.3705 13.1213 17.7913 11.6147 17.4057 10.5737C17.1874 9.984 16.6776 9.44916 15.9129 9.18633C15.6829 10.7237 15.021 11.9466 14.229 12.7925C14.3126 12.9656 14.3958 13.1436 14.4641 13.3151C14.5662 13.5717 14.441 13.8625 14.1844 13.9646C13.9278 14.0667 13.637 13.9415 13.5349 13.6849C13.5066 13.6137 13.4777 13.5463 13.448 13.4802C13.028 13.7794 12.5905 13.9869 12.1705 14.0835C11.5942 14.2161 10.963 14.1517 10.534 13.6942C9.88917 13.0053 9.84361 11.8611 10.2855 10.8412C10.6652 9.96479 11.4186 9.11781 12.5848 8.54034C12.6387 8.07338 12.7199 7.55894 12.8332 6.98891C12.3926 7.00755 11.9403 7.00326 11.4659 6.97127C11.1904 6.95269 10.9821 6.71428 11.0007 6.43876C11.0192 6.16325 11.2577 5.95496 11.5332 5.97353C12.0633 6.00928 12.5641 6.00772 13.0566 5.97553C13.1605 5.55444 13.3512 4.8331 13.5282 4.33317C13.6203 4.07286 13.906 3.93653 14.1663 4.02867ZM12.501 9.74109C11.8436 10.1821 11.427 10.7219 11.2031 11.2387C10.8542 12.0439 10.9881 12.716 11.2638 13.0105C11.2637 13.0104 11.2639 13.0106 11.2638 13.0105C11.3573 13.11 11.5624 13.1973 11.9463 13.109C12.2578 13.0373 12.6311 12.8571 13.0121 12.5576C12.8658 12.22 12.7272 11.8324 12.6313 11.353C12.5405 10.8996 12.4899 10.3743 12.501 9.74109ZM13.7808 11.7797C14.316 11.0956 14.759 10.1665 14.9271 9.01632C14.539 9.00681 14.1111 9.05601 13.6457 9.17854C13.605 9.19274 13.5647 9.20726 13.525 9.22209C13.4663 10.0545 13.5146 10.671 13.6118 11.1568C13.6578 11.3868 13.7156 11.5913 13.7808 11.7797ZM6.92028 5.2159C5.77942 4.88398 4.78409 5.00841 4.07616 5.21575C3.72264 5.3193 3.439 5.44393 3.24121 5.5443C3.14215 5.59457 3.0641 5.63901 3.00903 5.67212C2.98147 5.68868 2.95962 5.70244 2.9437 5.71271L2.92429 5.72542L2.91797 5.72966L2.91566 5.73123L2.91393 5.73241C2.91384 5.73249 2.91436 5.73325 2.94925 5.78397C3.23698 6.20225 3.1703 6.10548 2.91393 5.73241C2.68634 5.88881 2.62863 6.20009 2.78502 6.42767C2.94134 6.65514 3.25207 6.71313 3.47963 6.55703L3.4788 6.5576L3.48576 6.55305C3.49318 6.54826 3.50608 6.5401 3.52423 6.52919C3.56057 6.50735 3.6177 6.47463 3.69373 6.43605C3.84612 6.35872 4.07228 6.2589 4.35724 6.17544C4.92619 6.0088 5.72242 5.90898 6.64043 6.17595C7.35305 6.38517 7.66747 6.76919 7.82692 7.16112C7.98173 7.54163 8.0026 7.95751 8.00531 8.33243C7.46199 8.18407 6.79336 8.03682 6.08385 8.00744C5.04808 7.96456 3.8874 8.17096 2.87738 9.01102C1.98877 9.75011 1.78345 10.8818 2.07014 11.853C2.35713 12.8252 3.14925 13.692 4.31803 13.9348C5.22351 14.123 6.18016 13.8639 6.9599 13.5212C7.3403 13.354 7.69572 13.1594 8.0057 12.9665V13.5C8.0057 13.7761 8.22956 14 8.5057 14C8.78184 14 9.0057 13.7754 9.0057 13.4993L9.0057 8.44586C9.0058 8.05404 9.00595 7.40554 8.7532 6.78428C8.48142 6.11625 7.93342 5.51313 6.92136 5.21622L6.92028 5.2159ZM6.04249 9.00659C6.76366 9.03645 7.44769 9.209 8.0057 9.37205V11.757C7.65814 12.0182 7.13927 12.35 6.55757 12.6057C5.85264 12.9155 5.12729 13.0816 4.52148 12.9557C3.75127 12.7957 3.22322 12.2271 3.02922 11.5699C2.83491 10.9116 2.98777 10.2199 3.51683 9.77985C4.27958 9.14545 5.16917 8.97043 6.04249 9.00659Z"}))}};c.style=s;export{c as translate_icon};
|
|
2
2
|
//# sourceMappingURL=translate-icon.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as e}from"./index-
|
|
1
|
+
import{r as t,h as e}from"./index-Cbn5rIwb.js";const s=".sc-trash-fill-icon-h{display:flex}";const a=class{constructor(e){t(this,e);this.width="15";this.height="15"}render(){return e("svg",{key:"4b86e2f203b52391a79a4a4cef37119f9e9596eb",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"auto",xmlns:"http://www.w3.org/2000/svg"},e("path",{key:"b54bea4b29102438159531f1e39c6e8abcc3b9ed",d:"M3 6H5H21",stroke:"auto","stroke-width":"1.5"}),e("path",{key:"58855c07f70e4d8f9b2e5865ca2216228ef85e46",d:"M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z",stroke:"auto","stroke-width":"1.5"}),e("path",{key:"31aa6bc9a0e09ad0036d424230c4cc7755fb2678",d:"M10 11V17",stroke:"auto","stroke-width":"1.5"}),e("path",{key:"79b01185bd3c2d165bc22ccc1833d8a082d9c0b6",d:"M14 11V17",stroke:"auto","stroke-width":"1.5"}))}};a.style=s;export{a as trash_fill_icon};
|
|
2
2
|
//# sourceMappingURL=trash-fill-icon.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as C,h as e}from"./index-
|
|
1
|
+
import{r as C,h as e}from"./index-Cbn5rIwb.js";const s=".sc-trash-icon-h{display:flex}";const t=class{constructor(e){C(this,e);this.width="20";this.height="21"}render(){return e("svg",{key:"82f9ebab68998966545df1648e5bf57bfc408e94",width:this.width,height:this.height,viewBox:"0 0 20 21",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{key:"756b3e576f823ae4ea125f8fd2d2a0891481ee20",d:"M10 0.25C11.733 0.25 13.1492 1.60645 13.2449 3.31558L13.25 3.5H18.5C18.9142 3.5 19.25 3.83579 19.25 4.25C19.25 4.6297 18.9678 4.94349 18.6018 4.99315L18.5 5H17.704L16.4239 18.0192C16.2912 19.3683 15.1984 20.41 13.8626 20.4945L13.6871 20.5H6.31293C4.95734 20.5 3.81365 19.5145 3.59883 18.1934L3.57614 18.0192L2.295 5H1.5C1.1203 5 0.806509 4.71785 0.756847 4.35177L0.75 4.25C0.75 3.8703 1.03215 3.55651 1.39823 3.50685L1.5 3.5H6.75C6.75 1.70507 8.20507 0.25 10 0.25ZM16.197 5H3.802L5.06893 17.8724C5.12768 18.4696 5.60033 18.9343 6.18585 18.9936L6.31293 19H13.6871C14.2872 19 14.7959 18.5751 14.9123 17.9982L14.9311 17.8724L16.197 5ZM11.75 7.75C12.1297 7.75 12.4435 8.03215 12.4932 8.39823L12.5 8.5V15.5C12.5 15.9142 12.1642 16.25 11.75 16.25C11.3703 16.25 11.0565 15.9678 11.0068 15.6018L11 15.5V8.5C11 8.08579 11.3358 7.75 11.75 7.75ZM8.25 7.75C8.6297 7.75 8.94349 8.03215 8.99315 8.39823L9 8.5V15.5C9 15.9142 8.66421 16.25 8.25 16.25C7.8703 16.25 7.55651 15.9678 7.50685 15.6018L7.5 15.5V8.5C7.5 8.08579 7.83579 7.75 8.25 7.75ZM10 1.75C9.08183 1.75 8.32881 2.45711 8.2558 3.35647L8.25 3.5H11.75C11.75 2.5335 10.9665 1.75 10 1.75Z",fill:"currentColor"}))}};t.style=s;export{t as trash_icon};
|
|
2
2
|
//# sourceMappingURL=trash-icon.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as
|
|
1
|
+
import{r as e,h as r}from"./index-Cbn5rIwb.js";const t=".sc-underline-icon-h{display:flex}";const n=class{constructor(r){e(this,r);this.width="15";this.height="15"}render(){return r("svg",{key:"579f4720649aace40d61062033d0aaa39be9c60c",width:this.width,height:this.height,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r("path",{key:"3dc2300fb662bc59413ea99904f758598c144070",d:"M19 4V10C19 13.866 15.866 17 12 17C8.13401 17 5 13.866 5 10V4M8.5 4V10C8.5 13.2218 10.6766 15.9352 13.6395 16.7501M4 21H20M3 4L10.5 4M17 4L21 4",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}))}};n.style=t;export{n as underline_icon};
|
|
2
2
|
//# sourceMappingURL=underline-icon.entry.js.map
|