@skodaflow/web-library 4.2.0 → 5.0.0
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/README.md +61 -47
- package/cjs/components/accordion/accordion.d.ts +2 -2
- package/cjs/components/accordion/accordion.js +1 -1
- package/cjs/components/accordion/accordion.js.map +1 -1
- package/cjs/components/banner/banner.d.ts +2 -2
- package/cjs/components/banner/banner.js +1 -1
- package/cjs/components/banner/banner.js.map +1 -1
- package/cjs/components/cardMenu/cardMenu.js +1 -1
- package/cjs/components/cardMenu/cardMenu.js.map +1 -1
- package/cjs/components/cardMenu/styled/menuListStyled.d.ts +1 -1
- package/cjs/components/common/hook/useWindowSize.js +1 -1
- package/cjs/components/common/hook/useWindowSize.js.map +1 -1
- package/cjs/components/common/styled/textFieldStyled.d.ts +1 -1
- package/cjs/components/iconButton/index.d.ts +1 -1
- package/cjs/components/indicator/indicator.js.map +1 -1
- package/cjs/components/label/label.js.map +1 -1
- package/cjs/components/labelFeature/labelFeature.js.map +1 -1
- package/cjs/components/labelStatus/labelStatus.js.map +1 -1
- package/cjs/components/mobileStepper/index.d.ts +1 -0
- package/cjs/components/mobileStepper/mobileStepper.d.ts +1 -1
- package/cjs/components/mobileStepper/mobileStepper.js +1 -1
- package/cjs/components/mobileStepper/mobileStepper.js.map +1 -1
- package/cjs/components/mobileStepper/mobileStepperButton.d.ts +4 -0
- package/cjs/components/mobileStepper/mobileStepperButton.js +2 -0
- package/cjs/components/mobileStepper/mobileStepperButton.js.map +1 -0
- package/cjs/components/modal/modal.d.ts +12 -0
- package/cjs/components/modal/modal.js +1 -1
- package/cjs/components/modal/modal.js.map +1 -1
- package/cjs/components/selectInput/formControlSelectStyled.d.ts +1 -1
- package/cjs/components/slider/slider.d.ts +3 -3
- package/cjs/components/slider/slider.js +1 -1
- package/cjs/components/slider/slider.js.map +1 -1
- package/cjs/components/snackbar/snackbarMessage.js +1 -1
- package/cjs/components/snackbar/snackbarMessage.js.map +1 -1
- package/cjs/components/stepper/stepper.d.ts +2 -2
- package/cjs/components/stepper/stepper.js +1 -1
- package/cjs/components/stepper/stepper.js.map +1 -1
- package/cjs/components/tab/secondaryNavigation/secondaryNavigationTabs.js +1 -1
- package/cjs/components/tab/secondaryNavigation/secondaryNavigationTabs.js.map +1 -1
- package/cjs/components/tab/tabStyled.d.ts +1 -1
- package/cjs/design/skoda/components/accordion/accordion.theme.js +1 -1
- package/cjs/design/skoda/components/accordion/accordion.theme.js.map +1 -1
- package/cjs/design/skoda/components/accordion/accordionSummary.theme.js +1 -1
- package/cjs/design/skoda/components/accordion/accordionSummary.theme.js.map +1 -1
- package/cjs/design/skoda/components/autocomplete.theme.js +1 -1
- package/cjs/design/skoda/components/autocomplete.theme.js.map +1 -1
- package/cjs/design/skoda/components/dialog/dialog.theme.js.map +1 -0
- package/cjs/design/skoda/components/dialog/dialogActions.theme.js.map +1 -0
- package/cjs/design/skoda/components/dialog/dialogTitle.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/filledInput.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/formControl.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/formControlLabel.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/formHelperText.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/formLabel.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/input.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/inputAdornment.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/inputBase.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/inputLabel.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/radio.theme.js +2 -0
- package/cjs/design/skoda/components/form/radio.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/select.theme.js +2 -0
- package/cjs/design/skoda/components/form/select.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/slider.theme.js +2 -0
- package/cjs/design/skoda/components/form/slider.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/switch.theme.js.map +1 -0
- package/cjs/design/skoda/components/form/textField.theme.js.map +1 -0
- package/cjs/design/skoda/components/layout/breakpoints.theme.js.map +1 -0
- package/cjs/design/skoda/components/layout/container.theme.js.map +1 -0
- package/cjs/design/skoda/components/layout/grid.theme.js.map +1 -0
- package/cjs/design/skoda/components/mobileStepper.theme.js +1 -1
- package/cjs/design/skoda/components/mobileStepper.theme.js.map +1 -1
- package/cjs/design/skoda/components/stepper/index.d.ts +1 -0
- package/cjs/design/skoda/components/stepper/stepIcon/errorStepIcon.d.ts +3 -0
- package/cjs/design/skoda/components/stepper/stepIcon/errorStepIcon.js +2 -0
- package/cjs/design/skoda/components/stepper/stepIcon/errorStepIcon.js.map +1 -0
- package/cjs/design/skoda/components/stepper/stepIcon/index.d.ts +2 -0
- package/cjs/design/skoda/components/stepper/stepIcon/index.js +2 -0
- package/cjs/design/skoda/components/stepper/stepIcon/index.js.map +1 -0
- package/cjs/design/skoda/components/stepper/stepIcon/qontoStepIcon.d.ts +2 -0
- package/cjs/design/skoda/components/stepper/stepIcon/qontoStepIcon.js +2 -0
- package/cjs/design/skoda/components/stepper/stepIcon/qontoStepIcon.js.map +1 -0
- package/cjs/design/skoda/components/stepper/stepper.theme.d.ts +3 -0
- package/cjs/design/skoda/components/stepper/stepper.theme.js +2 -0
- package/cjs/design/skoda/components/stepper/stepper.theme.js.map +1 -0
- package/cjs/design/skoda/components/tabs/tabs.theme.js +1 -1
- package/cjs/design/skoda/components/tabs/tabs.theme.js.map +1 -1
- package/cjs/design/skoda/theme.js +1 -1
- package/cjs/design/skoda/theme.js.map +1 -1
- package/cjs/index.js +1 -1
- package/cjs/layout/Error/ErrorContent.d.ts +6 -6
- package/cjs/layout/Error/ErrorContent.js +1 -1
- package/cjs/layout/Error/ErrorContent.js.map +1 -1
- package/cjs/layout/Footer/Footer.d.ts +3 -14
- package/cjs/layout/Footer/Footer.js +1 -1
- package/cjs/layout/Footer/Footer.js.map +1 -1
- package/cjs/layout/Footer/FooterAccordion.d.ts +18 -0
- package/cjs/layout/Footer/FooterAccordion.js +2 -0
- package/cjs/layout/Footer/FooterAccordion.js.map +1 -0
- package/cjs/layout/Footer/FooterIconButton.d.ts +6 -2
- package/cjs/layout/Footer/FooterIconButton.js +1 -1
- package/cjs/layout/Footer/FooterIconButton.js.map +1 -1
- package/cjs/layout/Footer/FooterLink.d.ts +15 -0
- package/cjs/layout/Footer/FooterLink.js +2 -0
- package/cjs/layout/Footer/FooterLink.js.map +1 -0
- package/cjs/layout/Footer/FooterMenu.d.ts +21 -0
- package/cjs/layout/Footer/FooterMenu.js +2 -0
- package/cjs/layout/Footer/FooterMenu.js.map +1 -0
- package/cjs/layout/Footer/FooterSectionContact.d.ts +12 -0
- package/cjs/layout/Footer/FooterSectionContact.js +2 -0
- package/cjs/layout/Footer/FooterSectionContact.js.map +1 -0
- package/cjs/layout/Footer/FooterSectionMenu.d.ts +5 -0
- package/cjs/layout/Footer/FooterSectionMenu.js +2 -0
- package/cjs/layout/Footer/FooterSectionMenu.js.map +1 -0
- package/cjs/layout/Footer/PredefinedFooterIconButtons.d.ts +5 -4
- package/cjs/layout/Footer/PredefinedFooterIconButtons.js +1 -1
- package/cjs/layout/Footer/PredefinedFooterIconButtons.js.map +1 -1
- package/cjs/layout/Footer/index.d.ts +5 -1
- package/cjs/layout/Header/HeaderButton.js +1 -1
- package/cjs/layout/Header/HeaderButton.js.map +1 -1
- package/cjs/organisms/cardPhotoAdjustable/cardPhotoAdjustable.js.map +1 -1
- package/cjs/organisms/cardPhotoFixed/cardPhotoFixed.js.map +1 -1
- package/cjs/organisms/cardTypeOnly/cardTypeOnly.js.map +1 -1
- package/cjs/organisms/carousel2/cardCarousel/cardCarousel.js +1 -1
- package/cjs/organisms/carousel2/cardCarousel/cardCarousel.js.map +1 -1
- package/cjs/organisms/carousel2/components/NavButton.js +1 -1
- package/cjs/organisms/carousel2/components/NavButton.js.map +1 -1
- package/cjs/organisms/carousel2/heroCarousel/heroCarousel.js +1 -1
- package/cjs/organisms/carousel2/heroCarousel/heroCarousel.js.map +1 -1
- package/cjs/organisms/common/styled/cardStandardWrapperStyled.d.ts +1 -1
- package/cjs/organisms/gallery/Gallery.js +1 -1
- package/cjs/organisms/gallery/Gallery.js.map +1 -1
- package/cjs/organisms/gallery/GalleryTrigger.js +1 -1
- package/cjs/organisms/gallery/GalleryTrigger.js.map +1 -1
- package/cjs/organisms/heroImageCard/heroImageCard.js.map +1 -1
- package/cjs/organisms/hotspotCard/hotspotCard.d.ts +5 -12
- package/cjs/organisms/maps/mapComponents/infoWindowConfig.js.map +1 -1
- package/cjs/organisms/maps/maps.js.map +1 -1
- package/cjs/organisms/notification/Notification.js +1 -1
- package/cjs/organisms/notification/Notification.js.map +1 -1
- package/cjs/production/{Button.d.ts → Button/Button.d.ts} +1 -1
- package/cjs/production/Button/Button.js.map +1 -0
- package/cjs/production/Button/index.d.ts +1 -0
- package/cjs/production/index.js +1 -1
- package/cjs/utils/utilities.d.ts +1 -1
- package/components/accordion/accordion.d.ts +2 -2
- package/components/accordion/accordion.js +1 -1
- package/components/accordion/accordion.js.map +1 -1
- package/components/banner/banner.d.ts +2 -2
- package/components/banner/banner.js +1 -1
- package/components/banner/banner.js.map +1 -1
- package/components/cardMenu/cardMenu.js +1 -1
- package/components/cardMenu/cardMenu.js.map +1 -1
- package/components/cardMenu/styled/menuListStyled.d.ts +1 -1
- package/components/common/hook/useWindowSize.js +1 -1
- package/components/common/hook/useWindowSize.js.map +1 -1
- package/components/common/styled/textFieldStyled.d.ts +1 -1
- package/components/iconButton/index.d.ts +1 -1
- package/components/indicator/indicator.js.map +1 -1
- package/components/label/label.js.map +1 -1
- package/components/labelFeature/labelFeature.js.map +1 -1
- package/components/labelStatus/labelStatus.js.map +1 -1
- package/components/mobileStepper/index.d.ts +1 -0
- package/components/mobileStepper/mobileStepper.d.ts +1 -1
- package/components/mobileStepper/mobileStepper.js +1 -1
- package/components/mobileStepper/mobileStepper.js.map +1 -1
- package/components/mobileStepper/mobileStepperButton.d.ts +4 -0
- package/components/mobileStepper/mobileStepperButton.js +2 -0
- package/components/mobileStepper/mobileStepperButton.js.map +1 -0
- package/components/modal/modal.d.ts +12 -0
- package/components/modal/modal.js +1 -1
- package/components/modal/modal.js.map +1 -1
- package/components/selectInput/formControlSelectStyled.d.ts +1 -1
- package/components/slider/slider.d.ts +3 -3
- package/components/slider/slider.js +1 -1
- package/components/slider/slider.js.map +1 -1
- package/components/snackbar/snackbarMessage.js +1 -1
- package/components/snackbar/snackbarMessage.js.map +1 -1
- package/components/stepper/stepper.d.ts +2 -2
- package/components/stepper/stepper.js +1 -1
- package/components/stepper/stepper.js.map +1 -1
- package/components/tab/secondaryNavigation/secondaryNavigationTabs.js +1 -1
- package/components/tab/secondaryNavigation/secondaryNavigationTabs.js.map +1 -1
- package/components/tab/tabStyled.d.ts +1 -1
- package/design/skoda/components/accordion/accordion.theme.js +1 -1
- package/design/skoda/components/accordion/accordion.theme.js.map +1 -1
- package/design/skoda/components/accordion/accordionSummary.theme.js +1 -1
- package/design/skoda/components/accordion/accordionSummary.theme.js.map +1 -1
- package/design/skoda/components/autocomplete.theme.js +1 -1
- package/design/skoda/components/autocomplete.theme.js.map +1 -1
- package/design/skoda/components/dialog/dialog.theme.js.map +1 -0
- package/design/skoda/components/dialog/dialogActions.theme.js.map +1 -0
- package/design/skoda/components/dialog/dialogTitle.theme.js.map +1 -0
- package/design/skoda/components/form/filledInput.theme.js.map +1 -0
- package/design/skoda/components/form/formControl.theme.js.map +1 -0
- package/design/skoda/components/form/formControlLabel.theme.js.map +1 -0
- package/design/skoda/components/form/formHelperText.theme.js.map +1 -0
- package/design/skoda/components/form/formLabel.theme.js.map +1 -0
- package/design/skoda/components/form/input.theme.js.map +1 -0
- package/design/skoda/components/form/inputAdornment.theme.js.map +1 -0
- package/design/skoda/components/form/inputBase.theme.js.map +1 -0
- package/design/skoda/components/form/inputLabel.theme.js.map +1 -0
- package/design/skoda/components/form/radio.theme.js +2 -0
- package/design/skoda/components/form/radio.theme.js.map +1 -0
- package/design/skoda/components/form/select.theme.js +2 -0
- package/design/skoda/components/form/select.theme.js.map +1 -0
- package/design/skoda/components/form/slider.theme.js +2 -0
- package/design/skoda/components/form/slider.theme.js.map +1 -0
- package/design/skoda/components/form/switch.theme.js.map +1 -0
- package/design/skoda/components/form/textField.theme.js.map +1 -0
- package/design/skoda/components/layout/breakpoints.theme.js.map +1 -0
- package/design/skoda/components/layout/container.theme.js.map +1 -0
- package/design/skoda/components/layout/grid.theme.js.map +1 -0
- package/design/skoda/components/mobileStepper.theme.js +1 -1
- package/design/skoda/components/mobileStepper.theme.js.map +1 -1
- package/design/skoda/components/stepper/index.d.ts +1 -0
- package/design/skoda/components/stepper/stepIcon/errorStepIcon.d.ts +3 -0
- package/design/skoda/components/stepper/stepIcon/errorStepIcon.js +2 -0
- package/design/skoda/components/stepper/stepIcon/errorStepIcon.js.map +1 -0
- package/design/skoda/components/stepper/stepIcon/index.d.ts +2 -0
- package/design/skoda/components/stepper/stepIcon/index.js +2 -0
- package/design/skoda/components/stepper/stepIcon/index.js.map +1 -0
- package/design/skoda/components/stepper/stepIcon/qontoStepIcon.d.ts +2 -0
- package/design/skoda/components/stepper/stepIcon/qontoStepIcon.js +2 -0
- package/design/skoda/components/stepper/stepIcon/qontoStepIcon.js.map +1 -0
- package/design/skoda/components/stepper/stepper.theme.d.ts +3 -0
- package/design/skoda/components/stepper/stepper.theme.js +2 -0
- package/design/skoda/components/stepper/stepper.theme.js.map +1 -0
- package/design/skoda/components/tabs/tabs.theme.js +1 -1
- package/design/skoda/components/tabs/tabs.theme.js.map +1 -1
- package/design/skoda/theme.js +1 -1
- package/design/skoda/theme.js.map +1 -1
- package/index.js +1 -1
- package/layout/Error/ErrorContent.d.ts +6 -6
- package/layout/Error/ErrorContent.js +1 -1
- package/layout/Error/ErrorContent.js.map +1 -1
- package/layout/Footer/Footer.d.ts +3 -14
- package/layout/Footer/Footer.js +1 -1
- package/layout/Footer/Footer.js.map +1 -1
- package/layout/Footer/FooterAccordion.d.ts +18 -0
- package/layout/Footer/FooterAccordion.js +2 -0
- package/layout/Footer/FooterAccordion.js.map +1 -0
- package/layout/Footer/FooterIconButton.d.ts +6 -2
- package/layout/Footer/FooterIconButton.js +1 -1
- package/layout/Footer/FooterIconButton.js.map +1 -1
- package/layout/Footer/FooterLink.d.ts +15 -0
- package/layout/Footer/FooterLink.js +2 -0
- package/layout/Footer/FooterLink.js.map +1 -0
- package/layout/Footer/FooterMenu.d.ts +21 -0
- package/layout/Footer/FooterMenu.js +2 -0
- package/layout/Footer/FooterMenu.js.map +1 -0
- package/layout/Footer/FooterSectionContact.d.ts +12 -0
- package/layout/Footer/FooterSectionContact.js +2 -0
- package/layout/Footer/FooterSectionContact.js.map +1 -0
- package/layout/Footer/FooterSectionMenu.d.ts +5 -0
- package/layout/Footer/FooterSectionMenu.js +2 -0
- package/layout/Footer/FooterSectionMenu.js.map +1 -0
- package/layout/Footer/PredefinedFooterIconButtons.d.ts +5 -4
- package/layout/Footer/PredefinedFooterIconButtons.js +1 -1
- package/layout/Footer/PredefinedFooterIconButtons.js.map +1 -1
- package/layout/Footer/index.d.ts +5 -1
- package/layout/Header/HeaderButton.js +1 -1
- package/layout/Header/HeaderButton.js.map +1 -1
- package/organisms/cardPhotoAdjustable/cardPhotoAdjustable.js.map +1 -1
- package/organisms/cardPhotoFixed/cardPhotoFixed.js.map +1 -1
- package/organisms/cardTypeOnly/cardTypeOnly.js.map +1 -1
- package/organisms/carousel2/cardCarousel/cardCarousel.js +1 -1
- package/organisms/carousel2/cardCarousel/cardCarousel.js.map +1 -1
- package/organisms/carousel2/components/NavButton.js +1 -1
- package/organisms/carousel2/components/NavButton.js.map +1 -1
- package/organisms/carousel2/heroCarousel/heroCarousel.js +1 -1
- package/organisms/carousel2/heroCarousel/heroCarousel.js.map +1 -1
- package/organisms/common/styled/cardStandardWrapperStyled.d.ts +1 -1
- package/organisms/gallery/Gallery.js +1 -1
- package/organisms/gallery/Gallery.js.map +1 -1
- package/organisms/gallery/GalleryTrigger.js +1 -1
- package/organisms/gallery/GalleryTrigger.js.map +1 -1
- package/organisms/heroImageCard/heroImageCard.js.map +1 -1
- package/organisms/hotspotCard/hotspotCard.d.ts +5 -12
- package/organisms/maps/mapComponents/infoWindowConfig.js.map +1 -1
- package/organisms/maps/maps.js.map +1 -1
- package/organisms/notification/Notification.js +1 -1
- package/organisms/notification/Notification.js.map +1 -1
- package/package.json +1 -1
- package/production/{Button.d.ts → Button/Button.d.ts} +1 -1
- package/production/Button/Button.js.map +1 -0
- package/production/Button/index.d.ts +1 -0
- package/production/index.js +1 -1
- package/utils/utilities.d.ts +1 -1
- package/cjs/design/skoda/components/breakpoints.theme.js.map +0 -1
- package/cjs/design/skoda/components/container.theme.js.map +0 -1
- package/cjs/design/skoda/components/dialog.theme.js.map +0 -1
- package/cjs/design/skoda/components/dialogActions.theme.js.map +0 -1
- package/cjs/design/skoda/components/dialogTitle.theme.js.map +0 -1
- package/cjs/design/skoda/components/filledInput.theme.js.map +0 -1
- package/cjs/design/skoda/components/formControl.theme.js.map +0 -1
- package/cjs/design/skoda/components/formControlLabel.theme.js.map +0 -1
- package/cjs/design/skoda/components/formHelperText.theme.js.map +0 -1
- package/cjs/design/skoda/components/formLabel.theme.js.map +0 -1
- package/cjs/design/skoda/components/grid.theme.js.map +0 -1
- package/cjs/design/skoda/components/input.theme.js.map +0 -1
- package/cjs/design/skoda/components/inputAdornment.theme.js.map +0 -1
- package/cjs/design/skoda/components/inputBase.theme.js.map +0 -1
- package/cjs/design/skoda/components/inputLabel.theme.js.map +0 -1
- package/cjs/design/skoda/components/radio.theme.js +0 -2
- package/cjs/design/skoda/components/radio.theme.js.map +0 -1
- package/cjs/design/skoda/components/select.theme.js +0 -2
- package/cjs/design/skoda/components/select.theme.js.map +0 -1
- package/cjs/design/skoda/components/slider.theme.js +0 -2
- package/cjs/design/skoda/components/slider.theme.js.map +0 -1
- package/cjs/design/skoda/components/stepper.theme.d.ts +0 -2
- package/cjs/design/skoda/components/stepper.theme.js +0 -2
- package/cjs/design/skoda/components/stepper.theme.js.map +0 -1
- package/cjs/design/skoda/components/switch.theme.js.map +0 -1
- package/cjs/design/skoda/components/textField.theme.js.map +0 -1
- package/cjs/layout/Footer/FooterNavItem.d.ts +0 -14
- package/cjs/layout/Footer/FooterNavItem.js +0 -2
- package/cjs/layout/Footer/FooterNavItem.js.map +0 -1
- package/cjs/production/Button.js.map +0 -1
- package/design/skoda/components/breakpoints.theme.js.map +0 -1
- package/design/skoda/components/container.theme.js.map +0 -1
- package/design/skoda/components/dialog.theme.js.map +0 -1
- package/design/skoda/components/dialogActions.theme.js.map +0 -1
- package/design/skoda/components/dialogTitle.theme.js.map +0 -1
- package/design/skoda/components/filledInput.theme.js.map +0 -1
- package/design/skoda/components/formControl.theme.js.map +0 -1
- package/design/skoda/components/formControlLabel.theme.js.map +0 -1
- package/design/skoda/components/formHelperText.theme.js.map +0 -1
- package/design/skoda/components/formLabel.theme.js.map +0 -1
- package/design/skoda/components/grid.theme.js.map +0 -1
- package/design/skoda/components/input.theme.js.map +0 -1
- package/design/skoda/components/inputAdornment.theme.js.map +0 -1
- package/design/skoda/components/inputBase.theme.js.map +0 -1
- package/design/skoda/components/inputLabel.theme.js.map +0 -1
- package/design/skoda/components/radio.theme.js +0 -2
- package/design/skoda/components/radio.theme.js.map +0 -1
- package/design/skoda/components/select.theme.js +0 -2
- package/design/skoda/components/select.theme.js.map +0 -1
- package/design/skoda/components/slider.theme.js +0 -2
- package/design/skoda/components/slider.theme.js.map +0 -1
- package/design/skoda/components/stepper.theme.d.ts +0 -2
- package/design/skoda/components/stepper.theme.js +0 -2
- package/design/skoda/components/stepper.theme.js.map +0 -1
- package/design/skoda/components/switch.theme.js.map +0 -1
- package/design/skoda/components/textField.theme.js.map +0 -1
- package/layout/Footer/FooterNavItem.d.ts +0 -14
- package/layout/Footer/FooterNavItem.js +0 -2
- package/layout/Footer/FooterNavItem.js.map +0 -1
- package/production/Button.js.map +0 -1
- /package/cjs/design/skoda/components/{dialog.theme.d.ts → dialog/dialog.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{dialog.theme.js → dialog/dialog.theme.js} +0 -0
- /package/cjs/design/skoda/components/{dialogActions.theme.d.ts → dialog/dialogActions.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{dialogActions.theme.js → dialog/dialogActions.theme.js} +0 -0
- /package/cjs/design/skoda/components/{dialogTitle.theme.d.ts → dialog/dialogTitle.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{dialogTitle.theme.js → dialog/dialogTitle.theme.js} +0 -0
- /package/cjs/design/skoda/components/{filledInput.theme.d.ts → form/filledInput.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{filledInput.theme.js → form/filledInput.theme.js} +0 -0
- /package/cjs/design/skoda/components/{formControl.theme.d.ts → form/formControl.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{formControl.theme.js → form/formControl.theme.js} +0 -0
- /package/cjs/design/skoda/components/{formControlLabel.theme.d.ts → form/formControlLabel.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{formControlLabel.theme.js → form/formControlLabel.theme.js} +0 -0
- /package/cjs/design/skoda/components/{formHelperText.theme.d.ts → form/formHelperText.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{formHelperText.theme.js → form/formHelperText.theme.js} +0 -0
- /package/cjs/design/skoda/components/{formLabel.theme.d.ts → form/formLabel.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{formLabel.theme.js → form/formLabel.theme.js} +0 -0
- /package/cjs/design/skoda/components/{input.theme.d.ts → form/input.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{input.theme.js → form/input.theme.js} +0 -0
- /package/cjs/design/skoda/components/{inputAdornment.theme.d.ts → form/inputAdornment.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{inputAdornment.theme.js → form/inputAdornment.theme.js} +0 -0
- /package/cjs/design/skoda/components/{inputBase.theme.d.ts → form/inputBase.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{inputBase.theme.js → form/inputBase.theme.js} +0 -0
- /package/cjs/design/skoda/components/{inputLabel.theme.d.ts → form/inputLabel.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{inputLabel.theme.js → form/inputLabel.theme.js} +0 -0
- /package/cjs/design/skoda/components/{radio.theme.d.ts → form/radio.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{select.theme.d.ts → form/select.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{slider.theme.d.ts → form/slider.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{switch.theme.d.ts → form/switch.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{switch.theme.js → form/switch.theme.js} +0 -0
- /package/cjs/design/skoda/components/{textField.theme.d.ts → form/textField.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{textField.theme.js → form/textField.theme.js} +0 -0
- /package/cjs/design/skoda/components/{breakpoints.theme.d.ts → layout/breakpoints.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{breakpoints.theme.js → layout/breakpoints.theme.js} +0 -0
- /package/cjs/design/skoda/components/{container.theme.d.ts → layout/container.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{container.theme.js → layout/container.theme.js} +0 -0
- /package/cjs/design/skoda/components/{grid.theme.d.ts → layout/grid.theme.d.ts} +0 -0
- /package/cjs/design/skoda/components/{grid.theme.js → layout/grid.theme.js} +0 -0
- /package/cjs/production/{Button.js → Button/Button.js} +0 -0
- /package/design/skoda/components/{dialog.theme.d.ts → dialog/dialog.theme.d.ts} +0 -0
- /package/design/skoda/components/{dialog.theme.js → dialog/dialog.theme.js} +0 -0
- /package/design/skoda/components/{dialogActions.theme.d.ts → dialog/dialogActions.theme.d.ts} +0 -0
- /package/design/skoda/components/{dialogActions.theme.js → dialog/dialogActions.theme.js} +0 -0
- /package/design/skoda/components/{dialogTitle.theme.d.ts → dialog/dialogTitle.theme.d.ts} +0 -0
- /package/design/skoda/components/{dialogTitle.theme.js → dialog/dialogTitle.theme.js} +0 -0
- /package/design/skoda/components/{filledInput.theme.d.ts → form/filledInput.theme.d.ts} +0 -0
- /package/design/skoda/components/{filledInput.theme.js → form/filledInput.theme.js} +0 -0
- /package/design/skoda/components/{formControl.theme.d.ts → form/formControl.theme.d.ts} +0 -0
- /package/design/skoda/components/{formControl.theme.js → form/formControl.theme.js} +0 -0
- /package/design/skoda/components/{formControlLabel.theme.d.ts → form/formControlLabel.theme.d.ts} +0 -0
- /package/design/skoda/components/{formControlLabel.theme.js → form/formControlLabel.theme.js} +0 -0
- /package/design/skoda/components/{formHelperText.theme.d.ts → form/formHelperText.theme.d.ts} +0 -0
- /package/design/skoda/components/{formHelperText.theme.js → form/formHelperText.theme.js} +0 -0
- /package/design/skoda/components/{formLabel.theme.d.ts → form/formLabel.theme.d.ts} +0 -0
- /package/design/skoda/components/{formLabel.theme.js → form/formLabel.theme.js} +0 -0
- /package/design/skoda/components/{input.theme.d.ts → form/input.theme.d.ts} +0 -0
- /package/design/skoda/components/{input.theme.js → form/input.theme.js} +0 -0
- /package/design/skoda/components/{inputAdornment.theme.d.ts → form/inputAdornment.theme.d.ts} +0 -0
- /package/design/skoda/components/{inputAdornment.theme.js → form/inputAdornment.theme.js} +0 -0
- /package/design/skoda/components/{inputBase.theme.d.ts → form/inputBase.theme.d.ts} +0 -0
- /package/design/skoda/components/{inputBase.theme.js → form/inputBase.theme.js} +0 -0
- /package/design/skoda/components/{inputLabel.theme.d.ts → form/inputLabel.theme.d.ts} +0 -0
- /package/design/skoda/components/{inputLabel.theme.js → form/inputLabel.theme.js} +0 -0
- /package/design/skoda/components/{radio.theme.d.ts → form/radio.theme.d.ts} +0 -0
- /package/design/skoda/components/{select.theme.d.ts → form/select.theme.d.ts} +0 -0
- /package/design/skoda/components/{slider.theme.d.ts → form/slider.theme.d.ts} +0 -0
- /package/design/skoda/components/{switch.theme.d.ts → form/switch.theme.d.ts} +0 -0
- /package/design/skoda/components/{switch.theme.js → form/switch.theme.js} +0 -0
- /package/design/skoda/components/{textField.theme.d.ts → form/textField.theme.d.ts} +0 -0
- /package/design/skoda/components/{textField.theme.js → form/textField.theme.js} +0 -0
- /package/design/skoda/components/{breakpoints.theme.d.ts → layout/breakpoints.theme.d.ts} +0 -0
- /package/design/skoda/components/{breakpoints.theme.js → layout/breakpoints.theme.js} +0 -0
- /package/design/skoda/components/{container.theme.d.ts → layout/container.theme.d.ts} +0 -0
- /package/design/skoda/components/{container.theme.js → layout/container.theme.js} +0 -0
- /package/design/skoda/components/{grid.theme.d.ts → layout/grid.theme.d.ts} +0 -0
- /package/design/skoda/components/{grid.theme.js → layout/grid.theme.js} +0 -0
- /package/production/{Button.js → Button/Button.js} +0 -0
|
@@ -62,6 +62,18 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
62
62
|
* A callback used to track if the modal is fully loaded. When the modal is closed isLoaded is set to false.
|
|
63
63
|
*/
|
|
64
64
|
modalLoadedCallback?: (isLoaded: boolean) => void;
|
|
65
|
+
/**
|
|
66
|
+
* If true, the modal will not prevent focus from leaving the modal while open.
|
|
67
|
+
* Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.
|
|
68
|
+
* @default false
|
|
69
|
+
*/
|
|
70
|
+
disableEnforceFocus?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* If true, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the disableAutoFocus prop.
|
|
73
|
+
* Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.
|
|
74
|
+
* @default false
|
|
75
|
+
*/
|
|
76
|
+
disableAutoFocus?: boolean;
|
|
65
77
|
}
|
|
66
78
|
/**
|
|
67
79
|
* @description Styled SkodaFlow Modal component
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var t=require("tslib"),a=require("react/jsx-runtime"),e=require("react"),o=require("@mui/material/styles"),i=require("@mui/material/Modal"),n=require("../button/button.js"),d=require("../icon/icon.js"),
|
|
1
|
+
"use strict";var t=require("tslib"),a=require("react/jsx-runtime"),e=require("react"),o=require("@mui/material/styles"),i=require("@mui/material/Modal"),n=require("../button/button.js"),d=require("../icon/icon.js"),s=require("./contentDiv.js"),l=require("@mui/material");function r(t){return t&&t.__esModule?t:{default:t}}var c=r(i);const u=e.forwardRef(((o,i)=>{var{children:r,open:c,handleClose:u,onClickTopButton:m,onClickBottomButton:x,ariaLabelledby:b,ariaDescribedBy:h,firstButton:g,secondButton:B,hasCloseButton:f,size:v,firstButtonVariant:C,secondButtonVariant:k,secondButtonVisible:w,defaultButtonSection:j=!0,maxWidth:W,modalLoadedCallback:y,disableAutoFocus:F,disableEnforceFocus:M}=o,q=t.__rest(o,["children","open","handleClose","onClickTopButton","onClickBottomButton","ariaLabelledby","ariaDescribedBy","firstButton","secondButton","hasCloseButton","size","firstButtonVariant","secondButtonVariant","secondButtonVisible","defaultButtonSection","maxWidth","modalLoadedCallback","disableAutoFocus","disableEnforceFocus"]);const[T,z]=e.useState(!1),[S,V]=e.useState(!1),_=l.useTheme();e.useEffect((()=>{const t=window.matchMedia(`(min-width: ${_.breakpoints.values.md}px)`);V(t.matches)}),[_.breakpoints.values.md]);const D=e.useCallback((()=>{if(S&&"large"===(v||"large"))return!1}),[S,v]);return a.jsx(p,Object.assign({},q,{ref:i,open:c,size:v,onClose:u,isOverFlowing:T,"aria-labelledby":b,"aria-describedby":h,compactButtons:D(),maxWidth:W,"data-testid":"Modal",disableEnforceFocus:M,disableAutoFocus:F,children:a.jsxs("div",{className:"modal-container","data-testid":"Modal.container",children:[f&&a.jsx("button",{onClick:u,"data-testid":"Modal.close",children:a.jsx(d.Icon,{className:"ballotx",fontSize:"medium"})}),a.jsx(s.ContentDiv,{setIsOverFlowing:z,className:"modal-container--content",modalLoadedCallback:y,"data-testid":"Modal.content",children:r}),j&&a.jsxs("div",{className:"modal-container--action-buttons","data-testid":"Modal.buttons",children:[a.jsx(n.Button,{label:g,onClick:m,fullWidth:!0,variant:C,compact:D(),"data-testid":"Modal.button1","data-variant":C}),w&&a.jsx(n.Button,{label:B,onClick:x,fullWidth:!0,variant:k,compact:D(),"data-testid":"Modal.button2","data-variant":k})]})]})}))})),p=o.styled(c.default,{shouldForwardProp:t=>"compactButtons"!==t&&"isOverFlowing"!==t&&"maxWidth"!==t})((a=>{var{theme:e}=a,o=t.__rest(a,["theme"]);const i=o.compactButtons?"16px":"24px",n=o.maxWidth?o.maxWidth:"calc(100% - 40px)",d="large"===(o.size||"large"),s=o.size&&"full-width"===o.size,l=d?{maxWidth:"624px",marginTop:"40px",padding:"40px"}:s?{maxWidth:n,marginTop:"40px",padding:"40px"}:{maxWidth:"408px",marginTop:"48px",padding:"24px 40px 40px 40px"};return{"& .modal-container":{maxHeight:"calc(100vh - 64px)",minHeight:"300px",display:"flex",flexDirection:"column","&--content":{overflowX:"hidden",overflowY:"overlay",marginTop:"48px",padding:"0px 24px"},"&--action-buttons":{padding:"32px 24px",paddingBottom:i,boxShadow:o.isOverFlowing?"0px 0px 32px rgba(0, 0, 0, 0.15)":null,"div:first-of-type":{marginBottom:"15px"}}},[e.breakpoints.up("md")]:{"& .modal-container":{maxHeight:"calc(100vh - 160px)",margin:"0px",width:"100%",maxWidth:l.maxWidth,"&--content":{marginTop:l.marginTop,padding:"0px 40px"},"&--action-buttons":{padding:l.padding,paddingBottom:i}}}}}));exports.Modal=u;
|
|
2
2
|
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useEffect, useState, forwardRef } from 'react';\nimport { styled } from '@mui/material/styles';\nimport MuiModal from '@mui/material/Modal';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { ContentDiv } from './contentDiv';\nimport { useTheme } from '@mui/material';\n/**\n * @description Styled SkodaFlow Modal component\n * @param props ModalProps\n * @returns React Functional Component\n */\nexport const Modal = forwardRef((_a, ref) => {\n var { children, open, handleClose, onClickTopButton, onClickBottomButton, ariaLabelledby, ariaDescribedBy, firstButton, secondButton, hasCloseButton, size, firstButtonVariant, secondButtonVariant, secondButtonVisible, defaultButtonSection = true, maxWidth, modalLoadedCallback } = _a, props = __rest(_a, [\"children\", \"open\", \"handleClose\", \"onClickTopButton\", \"onClickBottomButton\", \"ariaLabelledby\", \"ariaDescribedBy\", \"firstButton\", \"secondButton\", \"hasCloseButton\", \"size\", \"firstButtonVariant\", \"secondButtonVariant\", \"secondButtonVisible\", \"defaultButtonSection\", \"maxWidth\", \"modalLoadedCallback\"]);\n const [isOverFlowing, setIsOverFlowing] = useState(false);\n const [desktopView, setDesktopView] = useState(false);\n const theme = useTheme();\n useEffect(() => {\n const mq = window.matchMedia(`(min-width: ${theme.breakpoints.values.md}px)`);\n setDesktopView(mq.matches);\n }, [theme.breakpoints.values.md]);\n const isCompactButton = useCallback(() => {\n const isModalLarge = (size || 'large') === 'large';\n if (desktopView && isModalLarge)\n return false;\n }, [desktopView, size]);\n return (_jsx(ModalStyled, Object.assign({}, props, { ref: ref, open: open, size: size, onClose: handleClose, isOverFlowing: isOverFlowing, \"aria-labelledby\": ariaLabelledby, \"aria-describedby\": ariaDescribedBy, compactButtons: isCompactButton(), maxWidth: maxWidth, \"data-testid\": \"Modal\", children: _jsxs(\"div\", { className: \"modal-container\", \"data-testid\": \"Modal.container\", children: [hasCloseButton && (_jsx(\"button\", { onClick: handleClose, \"data-testid\": \"Modal.close\", children: _jsx(Icon, { className: \"ballotx\", fontSize: \"medium\" }) })), _jsx(ContentDiv, { setIsOverFlowing: setIsOverFlowing, className: \"modal-container--content\", modalLoadedCallback: modalLoadedCallback, \"data-testid\": \"Modal.content\", children: children }), defaultButtonSection && (_jsxs(\"div\", { className: \"modal-container--action-buttons\", \"data-testid\": \"Modal.buttons\", children: [_jsx(Button, { label: firstButton, onClick: onClickTopButton, fullWidth: true, variant: firstButtonVariant, compact: isCompactButton(), \"data-testid\": \"Modal.button1\", \"data-variant\": firstButtonVariant }), secondButtonVisible && (_jsx(Button, { label: secondButton, onClick: onClickBottomButton, fullWidth: true, variant: secondButtonVariant, compact: isCompactButton(), \"data-testid\": \"Modal.button2\", \"data-variant\": secondButtonVariant }))] }))] }) })));\n});\n/**\n * @description Modal styling definition\n */\nconst ModalStyled = styled(MuiModal, {\n shouldForwardProp: (prop) => prop !== 'compactButtons' && prop !== 'isOverFlowing' && prop !== 'maxWidth',\n})((_a) => {\n var { theme } = _a, args = __rest(_a, [\"theme\"]);\n const bottomButtonPadding = args.compactButtons ? '16px' : '24px';\n const smallModalWidth = '408px';\n const largeModalWidth = '624px';\n const fullWidthModal = args.maxWidth ? args.maxWidth : 'calc(100% - 40px)';\n const isModalLarge = (args.size || 'large') === 'large';\n const isModalFullWidth = args.size && args.size === 'full-width';\n const sizeBasedStyles = isModalLarge\n ? { maxWidth: largeModalWidth, marginTop: '40px', padding: '40px' }\n : isModalFullWidth\n ? { maxWidth: fullWidthModal, marginTop: '40px', padding: '40px' }\n : {\n maxWidth: smallModalWidth,\n marginTop: '48px',\n padding: '24px 40px 40px 40px',\n };\n return {\n '& .modal-container': {\n maxHeight: 'calc(100vh - 64px)',\n minHeight: '300px',\n display: 'flex',\n flexDirection: 'column',\n '&--content': {\n overflowX: 'hidden',\n overflowY: 'overlay',\n marginTop: '48px',\n padding: '0px 24px',\n },\n '&--action-buttons': {\n padding: '32px 24px',\n paddingBottom: bottomButtonPadding,\n boxShadow: args.isOverFlowing ? '0px 0px 32px rgba(0, 0, 0, 0.15)' : null,\n 'div:first-of-type': {\n marginBottom: '15px',\n },\n },\n },\n [theme.breakpoints.up('md')]: {\n '& .modal-container': {\n maxHeight: 'calc(100vh - 160px)',\n margin: '0px',\n width: '100%',\n maxWidth: sizeBasedStyles.maxWidth,\n '&--content': {\n marginTop: sizeBasedStyles.marginTop,\n padding: '0px 40px',\n },\n '&--action-buttons': {\n padding: sizeBasedStyles.padding,\n paddingBottom: bottomButtonPadding,\n },\n },\n },\n };\n});\n//# sourceMappingURL=modal.js.map"],"names":["Modal","forwardRef","_a","ref","children","open","handleClose","onClickTopButton","onClickBottomButton","ariaLabelledby","ariaDescribedBy","firstButton","secondButton","hasCloseButton","size","firstButtonVariant","secondButtonVariant","secondButtonVisible","defaultButtonSection","maxWidth","modalLoadedCallback","props","__rest","isOverFlowing","setIsOverFlowing","useState","desktopView","setDesktopView","theme","useTheme","useEffect","mq","window","matchMedia","breakpoints","values","md","matches","isCompactButton","useCallback","_jsx","jsx","ModalStyled","Object","assign","onClose","compactButtons","_jsxs","className","onClick","Icon","fontSize","ContentDiv","Button","label","fullWidth","variant","compact","styled","MuiModal","shouldForwardProp","prop","args","bottomButtonPadding","fullWidthModal","isModalLarge","isModalFullWidth","sizeBasedStyles","marginTop","padding","maxHeight","minHeight","display","flexDirection","overflowX","overflowY","paddingBottom","boxShadow","marginBottom","up","margin","width"],"mappings":"6UAcY,MAACA,EAAQC,EAAUA,YAAC,CAACC,EAAIC,KACjC,IAAIC,SAAEA,EAAQC,KAAEA,EAAIC,YAAEA,EAAWC,iBAAEA,EAAgBC,oBAAEA,EAAmBC,eAAEA,EAAcC,gBAAEA,EAAeC,YAAEA,EAAWC,aAAEA,EAAYC,eAAEA,EAAcC,KAAEA,EAAIC,mBAAEA,EAAkBC,oBAAEA,EAAmBC,oBAAEA,EAAmBC,qBAAEA,GAAuB,EAAIC,SAAEA,EAAQC,oBAAEA,
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useEffect, useState, forwardRef } from 'react';\nimport { styled } from '@mui/material/styles';\nimport MuiModal from '@mui/material/Modal';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { ContentDiv } from './contentDiv';\nimport { useTheme } from '@mui/material';\n/**\n * @description Styled SkodaFlow Modal component\n * @param props ModalProps\n * @returns React Functional Component\n */\nexport const Modal = forwardRef((_a, ref) => {\n var { children, open, handleClose, onClickTopButton, onClickBottomButton, ariaLabelledby, ariaDescribedBy, firstButton, secondButton, hasCloseButton, size, firstButtonVariant, secondButtonVariant, secondButtonVisible, defaultButtonSection = true, maxWidth, modalLoadedCallback, disableAutoFocus, disableEnforceFocus } = _a, props = __rest(_a, [\"children\", \"open\", \"handleClose\", \"onClickTopButton\", \"onClickBottomButton\", \"ariaLabelledby\", \"ariaDescribedBy\", \"firstButton\", \"secondButton\", \"hasCloseButton\", \"size\", \"firstButtonVariant\", \"secondButtonVariant\", \"secondButtonVisible\", \"defaultButtonSection\", \"maxWidth\", \"modalLoadedCallback\", \"disableAutoFocus\", \"disableEnforceFocus\"]);\n const [isOverFlowing, setIsOverFlowing] = useState(false);\n const [desktopView, setDesktopView] = useState(false);\n const theme = useTheme();\n useEffect(() => {\n const mq = window.matchMedia(`(min-width: ${theme.breakpoints.values.md}px)`);\n setDesktopView(mq.matches);\n }, [theme.breakpoints.values.md]);\n const isCompactButton = useCallback(() => {\n const isModalLarge = (size || 'large') === 'large';\n if (desktopView && isModalLarge)\n return false;\n }, [desktopView, size]);\n return (_jsx(ModalStyled, Object.assign({}, props, { ref: ref, open: open, size: size, onClose: handleClose, isOverFlowing: isOverFlowing, \"aria-labelledby\": ariaLabelledby, \"aria-describedby\": ariaDescribedBy, compactButtons: isCompactButton(), maxWidth: maxWidth, \"data-testid\": \"Modal\", disableEnforceFocus: disableEnforceFocus, disableAutoFocus: disableAutoFocus, children: _jsxs(\"div\", { className: \"modal-container\", \"data-testid\": \"Modal.container\", children: [hasCloseButton && (_jsx(\"button\", { onClick: handleClose, \"data-testid\": \"Modal.close\", children: _jsx(Icon, { className: \"ballotx\", fontSize: \"medium\" }) })), _jsx(ContentDiv, { setIsOverFlowing: setIsOverFlowing, className: \"modal-container--content\", modalLoadedCallback: modalLoadedCallback, \"data-testid\": \"Modal.content\", children: children }), defaultButtonSection && (_jsxs(\"div\", { className: \"modal-container--action-buttons\", \"data-testid\": \"Modal.buttons\", children: [_jsx(Button, { label: firstButton, onClick: onClickTopButton, fullWidth: true, variant: firstButtonVariant, compact: isCompactButton(), \"data-testid\": \"Modal.button1\", \"data-variant\": firstButtonVariant }), secondButtonVisible && (_jsx(Button, { label: secondButton, onClick: onClickBottomButton, fullWidth: true, variant: secondButtonVariant, compact: isCompactButton(), \"data-testid\": \"Modal.button2\", \"data-variant\": secondButtonVariant }))] }))] }) })));\n});\n/**\n * @description Modal styling definition\n */\nconst ModalStyled = styled(MuiModal, {\n shouldForwardProp: (prop) => prop !== 'compactButtons' && prop !== 'isOverFlowing' && prop !== 'maxWidth',\n})((_a) => {\n var { theme } = _a, args = __rest(_a, [\"theme\"]);\n const bottomButtonPadding = args.compactButtons ? '16px' : '24px';\n const smallModalWidth = '408px';\n const largeModalWidth = '624px';\n const fullWidthModal = args.maxWidth ? args.maxWidth : 'calc(100% - 40px)';\n const isModalLarge = (args.size || 'large') === 'large';\n const isModalFullWidth = args.size && args.size === 'full-width';\n const sizeBasedStyles = isModalLarge\n ? { maxWidth: largeModalWidth, marginTop: '40px', padding: '40px' }\n : isModalFullWidth\n ? { maxWidth: fullWidthModal, marginTop: '40px', padding: '40px' }\n : {\n maxWidth: smallModalWidth,\n marginTop: '48px',\n padding: '24px 40px 40px 40px',\n };\n return {\n '& .modal-container': {\n maxHeight: 'calc(100vh - 64px)',\n minHeight: '300px',\n display: 'flex',\n flexDirection: 'column',\n '&--content': {\n overflowX: 'hidden',\n overflowY: 'overlay',\n marginTop: '48px',\n padding: '0px 24px',\n },\n '&--action-buttons': {\n padding: '32px 24px',\n paddingBottom: bottomButtonPadding,\n boxShadow: args.isOverFlowing ? '0px 0px 32px rgba(0, 0, 0, 0.15)' : null,\n 'div:first-of-type': {\n marginBottom: '15px',\n },\n },\n },\n [theme.breakpoints.up('md')]: {\n '& .modal-container': {\n maxHeight: 'calc(100vh - 160px)',\n margin: '0px',\n width: '100%',\n maxWidth: sizeBasedStyles.maxWidth,\n '&--content': {\n marginTop: sizeBasedStyles.marginTop,\n padding: '0px 40px',\n },\n '&--action-buttons': {\n padding: sizeBasedStyles.padding,\n paddingBottom: bottomButtonPadding,\n },\n },\n },\n };\n});\n//# sourceMappingURL=modal.js.map"],"names":["Modal","forwardRef","_a","ref","children","open","handleClose","onClickTopButton","onClickBottomButton","ariaLabelledby","ariaDescribedBy","firstButton","secondButton","hasCloseButton","size","firstButtonVariant","secondButtonVariant","secondButtonVisible","defaultButtonSection","maxWidth","modalLoadedCallback","disableAutoFocus","disableEnforceFocus","props","__rest","isOverFlowing","setIsOverFlowing","useState","desktopView","setDesktopView","theme","useTheme","useEffect","mq","window","matchMedia","breakpoints","values","md","matches","isCompactButton","useCallback","_jsx","jsx","ModalStyled","Object","assign","onClose","compactButtons","_jsxs","jsxs","className","onClick","Icon","fontSize","ContentDiv","Button","label","fullWidth","variant","compact","styled","MuiModal","shouldForwardProp","prop","args","bottomButtonPadding","fullWidthModal","isModalLarge","isModalFullWidth","sizeBasedStyles","marginTop","padding","maxHeight","minHeight","display","flexDirection","overflowX","overflowY","paddingBottom","boxShadow","marginBottom","up","margin","width"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const FormControlSelectStyled: import("@emotion/styled").StyledComponent<import("@mui/material/FormControl").FormControlOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
3
3
|
ref?: import("react").Ref<HTMLDivElement>;
|
|
4
|
-
}, "disabled" | "className" | "style" | "classes" | "children" | "sx" | "
|
|
4
|
+
}, "disabled" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "color" | "margin" | "error" | "required" | "size" | "fullWidth" | "focused" | "hiddenLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
5
5
|
component?: import("react").ElementType<any>;
|
|
6
6
|
} & {
|
|
7
7
|
disabled?: boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { HTMLAttributes } from 'react';
|
|
2
|
-
import React from 'react';
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
3
2
|
export type ValueComponentType = 'default' | 'input' | 'labeledInput' | null;
|
|
3
|
+
export type SliderThousandsSeparatorType = '.' | ',' | ' ';
|
|
4
4
|
/**
|
|
5
5
|
* @interface Base defintion of SkodaFlow Slider component independent on core implementation.
|
|
6
6
|
* Properties are inherited from HTML Span element and component functionality is taken from @mui/material/Slider v5.0.1.
|
|
@@ -131,7 +131,7 @@ export interface SliderProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'colo
|
|
|
131
131
|
/**
|
|
132
132
|
* Thousands separator variants for formatting currency
|
|
133
133
|
*/
|
|
134
|
-
thousandsSeparator?:
|
|
134
|
+
thousandsSeparator?: SliderThousandsSeparatorType;
|
|
135
135
|
/**
|
|
136
136
|
* Decimal separator variants for formatting currency
|
|
137
137
|
*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("tslib"),a=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/Slider"),l=require("@mui/material/styles"),i=require("../common/resizableSliderInput.js"),d=require("../common/styled/sliderValuesStyled.js"),n=require("./containerStyled.js");function s(e){return e&&e.__esModule?e:{default:e}}var u=s(t);const o=r.forwardRef(((t,l)=>{var{min:s,max:u,defaultValue:o,valueComponentType:c,leftSideLabel:b,rightSideLabel:x,disabled:S,disableSwap:h,step:v,value:f,isCurrencyInFront:y,minTextDescription:g="",maxTextDescription:j="",onChange:C,onInputBlur:D,thousandsSeparator:I=" ",decimalSeparator:T=",",hiddenDecimalSeparator:$=!0}=t,F=e.__rest(t,["min","max","defaultValue","valueComponentType","leftSideLabel","rightSideLabel","disabled","disableSwap","step","value","isCurrencyInFront","minTextDescription","maxTextDescription","onChange","onInputBlur","thousandsSeparator","decimalSeparator","hiddenDecimalSeparator"]);const k=r.useMemo((()=>((e,a,r,t)=>void 0!==t?t:void 0!==r?r:a&&!e?[0,a]:!a&&e?e:0)(s,u,o,f)),[s,u,o,f]),[q,V]=r.useState(k);r.useEffect((()=>{f&&V((()=>f))}),[f]);const B=r.useCallback((e=>(e=>{let a=e?parseInt(e):-1;return isNaN(a)&&(a=-1),a})(e)),[]),L=r.useCallback(((e,a,r)=>{if(!Array.isArray(a))return V(a),void(C&&C(e,a,r));V(0===r?[Math.min(a[0],a[1]-v
|
|
1
|
+
"use strict";var e=require("tslib"),a=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/Slider"),l=require("@mui/material/styles"),i=require("../common/resizableSliderInput.js"),d=require("../common/styled/sliderValuesStyled.js"),n=require("./containerStyled.js");function s(e){return e&&e.__esModule?e:{default:e}}var u=s(t);const o=r.forwardRef(((t,l)=>{var{min:s,max:u,defaultValue:o,valueComponentType:c,leftSideLabel:b,rightSideLabel:x,disabled:S,disableSwap:h,step:v,value:f,isCurrencyInFront:y,minTextDescription:g="",maxTextDescription:j="",onChange:C,onInputBlur:D,thousandsSeparator:I=" ",decimalSeparator:T=",",hiddenDecimalSeparator:$=!0}=t,F=e.__rest(t,["min","max","defaultValue","valueComponentType","leftSideLabel","rightSideLabel","disabled","disableSwap","step","value","isCurrencyInFront","minTextDescription","maxTextDescription","onChange","onInputBlur","thousandsSeparator","decimalSeparator","hiddenDecimalSeparator"]);const k=r.useMemo((()=>((e,a,r,t)=>void 0!==t?t:void 0!==r?r:a&&!e?[0,a]:!a&&e?e:0)(s,u,o,f)),[s,u,o,f]),[q,V]=r.useState(k);r.useEffect((()=>{f&&V((()=>f))}),[f]);const B=r.useCallback((e=>(e=>{let a=e?parseInt(e):-1;return isNaN(a)&&(a=-1),a})(e)),[]),L=r.useCallback(((e,a,r)=>{if(!Array.isArray(a))return V(a),void(C&&C(e,a,r));V(0===r?[Math.min(a[0],a[1]-v),a[1]]:[a[0],Math.max(a[1],a[0]+v)]),C&&C(e,a,r)}),[C,v]),M=r.useCallback((e=>{let a=B(e.target.value);a>u&&(a=u),C&&C(e,a),V((()=>a))}),[B,u,C]),A=r.useCallback(((e,a)=>{let r=B(e.target.value);1===a&&r>u?r=u:0===a&&r>q[1]&&(r=q[1]),V((t=>{let l=[...t];return l[a]=r,l[0]>l[1]&&(l=[0,v]),C&&C(e,l,a),l}))}),[B,u,C,v,q]),N=r.useMemo((()=>Array.isArray(q)?((e,r,t,l,d,n,s,u,o,p,c,b,x)=>{if("default"===e||!e){const e=m("number"==typeof r[0]?r[0]:parseInt(r[0]),b,c,x),t=m("number"==typeof r[1]?r[1]:parseInt(r[1]),b,c,x);return a.jsxs("div",{className:"range-values",children:[a.jsx("div",{"data-testid":"Slider.minVal",children:p?`${d} ${e}`:`${e} ${d}`}),a.jsx("div",{className:"middle-side"}),a.jsx("div",{"data-testid":"Slider.maxVal",children:p?`${n} ${t}`:`${t} ${n}`})]})}return a.jsxs("div",{className:"range-values",children:[a.jsx(i.default,{id:"slider-double-value-left-label-input",onChange:s,onBlur:u,value:r[0],thousandsSeparator:c,decimalSeparator:b,hiddenDecimalSeparator:x,thumb:0,disabled:o,textDescription:d,labelText:"input"===e?null:t,isCurrencyInFront:p,"data-testid":"Slider.minVal"}),a.jsx("div",{className:"middle-side"}),a.jsx(i.default,{id:"slider-double-value-right-label-input",onChange:s,onBlur:u,value:r[1],thousandsSeparator:c,decimalSeparator:b,hiddenDecimalSeparator:x,thumb:1,disabled:o,textDescription:n,labelText:"labeledInput"===e?l:null,isCurrencyInFront:p,"data-testid":"Slider.maxVal"})]})})(c,q,b,x,g,j,A,D,S,y,I,T,$):((e,r,t,l,d,n,s,u,o,p,c)=>{if("default"===e||!e){const e=m("number"==typeof r?r:parseInt(r),p,o,c);return a.jsxs("div",{"data-testid":"Slider.minVal",children:[l&&u?`${l} ${e}`:l?`${e} ${l}`:e," "]})}return a.jsx(i.default,{id:"slider-single-value-label-input",value:r,thousandsSeparator:o,decimalSeparator:p,hiddenDecimalSeparator:c,onChange:d,onBlur:n,disabled:s,textDescription:l,labelText:"labeledInput"===e?t:null,isCurrencyInFront:u})})(c,q,b,g,M,D,S,y,I,T,$)),[S,y,b,j,g,A,M,D,x,c,q,I,T,$]);return a.jsxs(n.ContainerStyled,{value:q,marks:F.marks,"data-testid":"Slider","data-state":S?"disabled":void 0,children:[a.jsx(p,Object.assign({},F,{disabled:S,ref:l,onChange:L,min:s,max:u,step:v,disableSwap:h,valueLabelFormat:e=>m(e,T,I,$),value:q})),a.jsx(d.default,{disabled:S,children:N})]})})),p=l.styled(u.default,{shouldForwardProp:e=>"minTextDescription"!==e&&"maxTextDescription"!==e&&"leftSideLabel"!==e&&"rightSideLabel"!==e&&"valueComponentType"!==e})((a=>{var r=e.__rest(a,["theme"]);if(!r.marks)return null;let t={};Array.isArray(r.value)||(t={"& .MuiSlider-track":{left:"-3px !important"}});let l={"& .MuiSlider-rail":{left:"-3px",paddingRight:"6px"}};return l=Object.assign(Object.assign({},l),t),l})),m=(e,a,r,t)=>t?e.toFixed().replace(/\B(?=(\d{3})+(?!\d))/g,r):e.toFixed(2).replace(".",a).replace(/\B(?=(\d{3})+(?!\d))/g,r);exports.Slider=o;
|
|
2
2
|
//# sourceMappingURL=slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","sources":["../../../../src/components/slider/slider.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/* eslint-disable sonarjs/cognitive-complexity */\nimport { forwardRef } from 'react';\nimport MuiSlider from '@mui/material/Slider';\nimport { styled } from '@mui/material/styles';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport ResizableSliderInput from '../common/resizableSliderInput';\nimport SliderValuesStyled from '../common/styled/sliderValuesStyled';\nimport { ContainerStyled } from './containerStyled';\nconst getDoubleValueComponent = (type, values, leftSideLabel, rightSideLabel, minTextDescription, maxTextDescription, onChange, onBlur, disabled, isCurrencyInFront, thousandsSeparator, decimalSeparator, hiddenDecimalSeparator) => {\n if (type === 'default' || !type) {\n const minVal = getFormattedString(typeof values[0] === 'number' ? values[0] : parseInt(values[0]), decimalSeparator, thousandsSeparator, hiddenDecimalSeparator);\n const maxVal = getFormattedString(typeof values[1] === 'number' ? values[1] : parseInt(values[1]), decimalSeparator, thousandsSeparator, hiddenDecimalSeparator);\n return (_jsxs(\"div\", { className: \"range-values\", children: [_jsx(\"div\", { \"data-testid\": \"Slider.minVal\", children: isCurrencyInFront ? `${minTextDescription} ${minVal}` : `${minVal} ${minTextDescription}` }), _jsx(\"div\", { className: \"middle-side\" }), _jsx(\"div\", { \"data-testid\": \"Slider.maxVal\", children: isCurrencyInFront ? `${maxTextDescription} ${maxVal}` : `${maxVal} ${maxTextDescription}` })] }));\n }\n return (_jsxs(\"div\", { className: \"range-values\", children: [_jsx(ResizableSliderInput, { id: \"slider-double-value-left-label-input\", onChange: onChange, onBlur: onBlur, value: values[0], thousandsSeparator: thousandsSeparator, decimalSeparator: decimalSeparator, hiddenDecimalSeparator: hiddenDecimalSeparator, thumb: 0, disabled: disabled, textDescription: minTextDescription, labelText: type === 'input' ? null : leftSideLabel, isCurrencyInFront: isCurrencyInFront, \"data-testid\": \"Slider.minVal\" }), _jsx(\"div\", { className: \"middle-side\" }), _jsx(ResizableSliderInput, { id: \"slider-double-value-right-label-input\", onChange: onChange, onBlur: onBlur, value: values[1], thousandsSeparator: thousandsSeparator, decimalSeparator: decimalSeparator, hiddenDecimalSeparator: hiddenDecimalSeparator, thumb: 1, disabled: disabled, textDescription: maxTextDescription, labelText: type === 'labeledInput' ? rightSideLabel : null, isCurrencyInFront: isCurrencyInFront, \"data-testid\": \"Slider.maxVal\" })] }));\n};\nconst getSingleValueComponent = (type, values, leftSideLabel, minTextDescription, onChange, onBlur, disabled, isCurrencyInFront, thousandsSeparator, decimalSeparator, hiddenDecimalSeparator) => {\n if (type === 'default' || !type) {\n const val = getFormattedString(typeof values === 'number' ? values : parseInt(values), decimalSeparator, thousandsSeparator, hiddenDecimalSeparator);\n return (_jsxs(\"div\", { \"data-testid\": \"Slider.minVal\", children: [minTextDescription && isCurrencyInFront\n ? `${minTextDescription} ${val}`\n : minTextDescription\n ? `${val} ${minTextDescription}`\n : val, ' '] }));\n }\n return (_jsx(ResizableSliderInput, { id: \"slider-single-value-label-input\", value: values, thousandsSeparator: thousandsSeparator, decimalSeparator: decimalSeparator, hiddenDecimalSeparator: hiddenDecimalSeparator, onChange: onChange, onBlur: onBlur, disabled: disabled, textDescription: minTextDescription, labelText: type === 'labeledInput' ? leftSideLabel : null, isCurrencyInFront: isCurrencyInFront }));\n};\nconst getFormattedValue = (value) => {\n let result = value ? parseInt(value) : -1;\n if (isNaN(result))\n result = -1;\n return result;\n};\nconst getInitialValue = (min, max, defaultValue, value) => {\n if (value !== undefined)\n return value;\n if (defaultValue !== undefined)\n return defaultValue;\n if (max && !min)\n return [0, max];\n if (!max && min)\n return min;\n return 0;\n};\n/**\n * @description Styled SkodaFlow Slider component\n * @param props SliderProps\n * @returns React Functional Component\n */\nexport const Slider = forwardRef((_a, ref) => {\n var { min, max, defaultValue, valueComponentType, leftSideLabel, rightSideLabel, disabled, disableSwap, step, value, isCurrencyInFront, minTextDescription = '', maxTextDescription = '', onChange, onInputBlur, thousandsSeparator = ' ', decimalSeparator = ',', hiddenDecimalSeparator = true } = _a, props = __rest(_a, [\"min\", \"max\", \"defaultValue\", \"valueComponentType\", \"leftSideLabel\", \"rightSideLabel\", \"disabled\", \"disableSwap\", \"step\", \"value\", \"isCurrencyInFront\", \"minTextDescription\", \"maxTextDescription\", \"onChange\", \"onInputBlur\", \"thousandsSeparator\", \"decimalSeparator\", \"hiddenDecimalSeparator\"]);\n const getInitialValueWithUseCallBack = useMemo(() => {\n return getInitialValue(min, max, defaultValue, value);\n }, [min, max, defaultValue, value]);\n const [values, setValues] = useState(getInitialValueWithUseCallBack);\n useEffect(() => {\n if (value)\n setValues(() => value);\n }, [value]);\n const getFormattedValueWithUseCallBack = useCallback((_value) => {\n return getFormattedValue(_value);\n }, []);\n const onChangeHandler = useCallback((event, _value, activeThumb) => {\n if (!Array.isArray(_value)) {\n setValues(_value);\n onChange && onChange(event, _value, activeThumb);\n return;\n }\n if (activeThumb === 0) {\n setValues([Math.min(_value[0], _value[1] - step - 1), _value[1]]);\n }\n else {\n setValues([_value[0], Math.max(_value[1], _value[0] + step + 1)]);\n }\n onChange && onChange(event, _value, activeThumb);\n }, [onChange, step]);\n const onChangeSingleValue = useCallback((e) => {\n let newValue = getFormattedValueWithUseCallBack(e.target.value);\n if (newValue > max)\n newValue = max;\n onChange && onChange(e, newValue);\n setValues(() => newValue);\n }, [getFormattedValueWithUseCallBack, max, onChange]);\n const onChangeDoubleValue = useCallback((e, thumb) => {\n let newValue = getFormattedValueWithUseCallBack(e.target.value);\n if (thumb === 1 && newValue > max)\n newValue = max;\n else if (thumb === 0 && newValue > values[1])\n newValue = values[1];\n setValues((curr) => {\n let newArrayValue = [...curr];\n newArrayValue[thumb] = newValue;\n if (newArrayValue[0] > newArrayValue[1]) {\n newArrayValue = [0, step + 1];\n }\n onChange && onChange(e, newArrayValue, thumb);\n return newArrayValue;\n });\n }, [getFormattedValueWithUseCallBack, max, onChange, step, values]);\n const valuesComponent = useMemo(() => {\n return Array.isArray(values)\n ? getDoubleValueComponent(valueComponentType, values, leftSideLabel, rightSideLabel, minTextDescription, maxTextDescription, onChangeDoubleValue, onInputBlur, disabled, isCurrencyInFront, thousandsSeparator, decimalSeparator, hiddenDecimalSeparator)\n : getSingleValueComponent(valueComponentType, values, leftSideLabel, minTextDescription, onChangeSingleValue, onInputBlur, disabled, isCurrencyInFront, thousandsSeparator, decimalSeparator, hiddenDecimalSeparator);\n }, [\n disabled,\n isCurrencyInFront,\n leftSideLabel,\n maxTextDescription,\n minTextDescription,\n onChangeDoubleValue,\n onChangeSingleValue,\n onInputBlur,\n rightSideLabel,\n valueComponentType,\n values,\n thousandsSeparator,\n decimalSeparator,\n hiddenDecimalSeparator,\n ]);\n return (_jsxs(ContainerStyled, { value: values, marks: props.marks, \"data-testid\": \"Slider\", \"data-state\": disabled ? 'disabled' : undefined, children: [_jsx(SliderStyled, Object.assign({}, props, { disabled: disabled, ref: ref, onChange: onChangeHandler, min: min, max: max, step: step, disableSwap: disableSwap, valueLabelFormat: (v) => getFormattedString(v, decimalSeparator, thousandsSeparator, hiddenDecimalSeparator), value: values })), _jsx(SliderValuesStyled, { disabled: disabled, children: valuesComponent })] }));\n});\n/**\n * @description Slider styling definition\n */\nconst SliderStyled = styled(MuiSlider, {\n shouldForwardProp: (prop) => prop !== 'minTextDescription' &&\n prop !== 'maxTextDescription' &&\n prop !== 'leftSideLabel' &&\n prop !== 'rightSideLabel' &&\n prop !== 'valueComponentType',\n})((_a) => {\n var { theme } = _a, args = __rest(_a, [\"theme\"]);\n if (!args.marks)\n return null;\n let rule = {};\n const isArray = Array.isArray(args.value);\n if (!isArray)\n rule = {\n '& .MuiSlider-track': {\n left: '-3px !important',\n },\n };\n let style = {\n '& .MuiSlider-rail': {\n left: '-3px',\n paddingRight: '6px',\n },\n };\n style = Object.assign(Object.assign({}, style), rule);\n return style;\n});\nconst getFormattedString = (num, decimalSeparator, thousandsSeparator, hiddenDecimalSeparator) => {\n if (hiddenDecimalSeparator)\n return num.toFixed().replace(/\\B(?=(\\d{3})+(?!\\d))/g, thousandsSeparator);\n return num\n .toFixed(2)\n .replace('.', decimalSeparator)\n .replace(/\\B(?=(\\d{3})+(?!\\d))/g, thousandsSeparator);\n};\n//# sourceMappingURL=slider.js.map"],"names":["Slider","forwardRef","_a","ref","min","max","defaultValue","valueComponentType","leftSideLabel","rightSideLabel","disabled","disableSwap","step","value","isCurrencyInFront","minTextDescription","maxTextDescription","onChange","onInputBlur","thousandsSeparator","decimalSeparator","hiddenDecimalSeparator","props","__rest","getInitialValueWithUseCallBack","useMemo","undefined","getInitialValue","values","setValues","useState","useEffect","getFormattedValueWithUseCallBack","useCallback","_value","result","parseInt","isNaN","getFormattedValue","onChangeHandler","event","activeThumb","Array","isArray","Math","onChangeSingleValue","e","newValue","target","onChangeDoubleValue","thumb","curr","newArrayValue","valuesComponent","type","onBlur","minVal","getFormattedString","maxVal","_jsxs","className","children","_jsx","jsxs","jsx","ResizableSliderInput","id","textDescription","labelText","default","getDoubleValueComponent","val","getSingleValueComponent","ContainerStyled","marks","SliderStyled","Object","assign","valueLabelFormat","v","SliderValuesStyled","styled","MuiSlider","shouldForwardProp","prop","args","rule","left","style","paddingRight","num","toFixed","replace"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"slider.js","sources":["../../../../src/components/slider/slider.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/* eslint-disable sonarjs/cognitive-complexity */\nimport { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';\nimport MuiSlider from '@mui/material/Slider';\nimport { styled } from '@mui/material/styles';\nimport ResizableSliderInput from '../common/resizableSliderInput';\nimport SliderValuesStyled from '../common/styled/sliderValuesStyled';\nimport { ContainerStyled } from './containerStyled';\nconst getDoubleValueComponent = (type, values, leftSideLabel, rightSideLabel, minTextDescription, maxTextDescription, onChange, onBlur, disabled, isCurrencyInFront, thousandsSeparator, decimalSeparator, hiddenDecimalSeparator) => {\n if (type === 'default' || !type) {\n const minVal = getFormattedString(typeof values[0] === 'number' ? values[0] : parseInt(values[0]), decimalSeparator, thousandsSeparator, hiddenDecimalSeparator);\n const maxVal = getFormattedString(typeof values[1] === 'number' ? values[1] : parseInt(values[1]), decimalSeparator, thousandsSeparator, hiddenDecimalSeparator);\n return (_jsxs(\"div\", { className: \"range-values\", children: [_jsx(\"div\", { \"data-testid\": \"Slider.minVal\", children: isCurrencyInFront ? `${minTextDescription} ${minVal}` : `${minVal} ${minTextDescription}` }), _jsx(\"div\", { className: \"middle-side\" }), _jsx(\"div\", { \"data-testid\": \"Slider.maxVal\", children: isCurrencyInFront ? `${maxTextDescription} ${maxVal}` : `${maxVal} ${maxTextDescription}` })] }));\n }\n return (_jsxs(\"div\", { className: \"range-values\", children: [_jsx(ResizableSliderInput, { id: \"slider-double-value-left-label-input\", onChange: onChange, onBlur: onBlur, value: values[0], thousandsSeparator: thousandsSeparator, decimalSeparator: decimalSeparator, hiddenDecimalSeparator: hiddenDecimalSeparator, thumb: 0, disabled: disabled, textDescription: minTextDescription, labelText: type === 'input' ? null : leftSideLabel, isCurrencyInFront: isCurrencyInFront, \"data-testid\": \"Slider.minVal\" }), _jsx(\"div\", { className: \"middle-side\" }), _jsx(ResizableSliderInput, { id: \"slider-double-value-right-label-input\", onChange: onChange, onBlur: onBlur, value: values[1], thousandsSeparator: thousandsSeparator, decimalSeparator: decimalSeparator, hiddenDecimalSeparator: hiddenDecimalSeparator, thumb: 1, disabled: disabled, textDescription: maxTextDescription, labelText: type === 'labeledInput' ? rightSideLabel : null, isCurrencyInFront: isCurrencyInFront, \"data-testid\": \"Slider.maxVal\" })] }));\n};\nconst getSingleValueComponent = (type, values, leftSideLabel, minTextDescription, onChange, onBlur, disabled, isCurrencyInFront, thousandsSeparator, decimalSeparator, hiddenDecimalSeparator) => {\n if (type === 'default' || !type) {\n const val = getFormattedString(typeof values === 'number' ? values : parseInt(values), decimalSeparator, thousandsSeparator, hiddenDecimalSeparator);\n return (_jsxs(\"div\", { \"data-testid\": \"Slider.minVal\", children: [minTextDescription && isCurrencyInFront\n ? `${minTextDescription} ${val}`\n : minTextDescription\n ? `${val} ${minTextDescription}`\n : val, ' '] }));\n }\n return (_jsx(ResizableSliderInput, { id: \"slider-single-value-label-input\", value: values, thousandsSeparator: thousandsSeparator, decimalSeparator: decimalSeparator, hiddenDecimalSeparator: hiddenDecimalSeparator, onChange: onChange, onBlur: onBlur, disabled: disabled, textDescription: minTextDescription, labelText: type === 'labeledInput' ? leftSideLabel : null, isCurrencyInFront: isCurrencyInFront }));\n};\nconst getFormattedValue = (value) => {\n let result = value ? parseInt(value) : -1;\n if (isNaN(result))\n result = -1;\n return result;\n};\nconst getInitialValue = (min, max, defaultValue, value) => {\n if (value !== undefined)\n return value;\n if (defaultValue !== undefined)\n return defaultValue;\n if (max && !min)\n return [0, max];\n if (!max && min)\n return min;\n return 0;\n};\n/**\n * @description Styled SkodaFlow Slider component\n * @param props SliderProps\n * @returns React Functional Component\n */\nexport const Slider = forwardRef((_a, ref) => {\n var { min, max, defaultValue, valueComponentType, leftSideLabel, rightSideLabel, disabled, disableSwap, step, value, isCurrencyInFront, minTextDescription = '', maxTextDescription = '', onChange, onInputBlur, thousandsSeparator = ' ', decimalSeparator = ',', hiddenDecimalSeparator = true } = _a, props = __rest(_a, [\"min\", \"max\", \"defaultValue\", \"valueComponentType\", \"leftSideLabel\", \"rightSideLabel\", \"disabled\", \"disableSwap\", \"step\", \"value\", \"isCurrencyInFront\", \"minTextDescription\", \"maxTextDescription\", \"onChange\", \"onInputBlur\", \"thousandsSeparator\", \"decimalSeparator\", \"hiddenDecimalSeparator\"]);\n const getInitialValueWithUseCallBack = useMemo(() => {\n return getInitialValue(min, max, defaultValue, value);\n }, [min, max, defaultValue, value]);\n const [values, setValues] = useState(getInitialValueWithUseCallBack);\n useEffect(() => {\n if (value)\n setValues(() => value);\n }, [value]);\n const getFormattedValueWithUseCallBack = useCallback((_value) => {\n return getFormattedValue(_value);\n }, []);\n const onChangeHandler = useCallback((event, _value, activeThumb) => {\n if (!Array.isArray(_value)) {\n setValues(_value);\n onChange && onChange(event, _value, activeThumb);\n return;\n }\n if (activeThumb === 0) {\n setValues([Math.min(_value[0], _value[1] - step), _value[1]]);\n }\n else {\n setValues([_value[0], Math.max(_value[1], _value[0] + step)]);\n }\n onChange && onChange(event, _value, activeThumb);\n }, [onChange, step]);\n const onChangeSingleValue = useCallback((e) => {\n let newValue = getFormattedValueWithUseCallBack(e.target.value);\n if (newValue > max)\n newValue = max;\n onChange && onChange(e, newValue);\n setValues(() => newValue);\n }, [getFormattedValueWithUseCallBack, max, onChange]);\n const onChangeDoubleValue = useCallback((e, thumb) => {\n let newValue = getFormattedValueWithUseCallBack(e.target.value);\n if (thumb === 1 && newValue > max)\n newValue = max;\n else if (thumb === 0 && newValue > values[1])\n newValue = values[1];\n setValues((curr) => {\n let newArrayValue = [...curr];\n newArrayValue[thumb] = newValue;\n if (newArrayValue[0] > newArrayValue[1]) {\n newArrayValue = [0, step];\n }\n onChange && onChange(e, newArrayValue, thumb);\n return newArrayValue;\n });\n }, [getFormattedValueWithUseCallBack, max, onChange, step, values]);\n const valuesComponent = useMemo(() => {\n return Array.isArray(values)\n ? getDoubleValueComponent(valueComponentType, values, leftSideLabel, rightSideLabel, minTextDescription, maxTextDescription, onChangeDoubleValue, onInputBlur, disabled, isCurrencyInFront, thousandsSeparator, decimalSeparator, hiddenDecimalSeparator)\n : getSingleValueComponent(valueComponentType, values, leftSideLabel, minTextDescription, onChangeSingleValue, onInputBlur, disabled, isCurrencyInFront, thousandsSeparator, decimalSeparator, hiddenDecimalSeparator);\n }, [\n disabled,\n isCurrencyInFront,\n leftSideLabel,\n maxTextDescription,\n minTextDescription,\n onChangeDoubleValue,\n onChangeSingleValue,\n onInputBlur,\n rightSideLabel,\n valueComponentType,\n values,\n thousandsSeparator,\n decimalSeparator,\n hiddenDecimalSeparator,\n ]);\n return (_jsxs(ContainerStyled, { value: values, marks: props.marks, \"data-testid\": \"Slider\", \"data-state\": disabled ? 'disabled' : undefined, children: [_jsx(SliderStyled, Object.assign({}, props, { disabled: disabled, ref: ref, onChange: onChangeHandler, min: min, max: max, step: step, disableSwap: disableSwap, valueLabelFormat: (v) => getFormattedString(v, decimalSeparator, thousandsSeparator, hiddenDecimalSeparator), value: values })), _jsx(SliderValuesStyled, { disabled: disabled, children: valuesComponent })] }));\n});\n/**\n * @description Slider styling definition\n */\nconst SliderStyled = styled(MuiSlider, {\n shouldForwardProp: (prop) => prop !== 'minTextDescription' &&\n prop !== 'maxTextDescription' &&\n prop !== 'leftSideLabel' &&\n prop !== 'rightSideLabel' &&\n prop !== 'valueComponentType',\n})((_a) => {\n var { theme } = _a, args = __rest(_a, [\"theme\"]);\n if (!args.marks)\n return null;\n let rule = {};\n const isArray = Array.isArray(args.value);\n if (!isArray)\n rule = {\n '& .MuiSlider-track': {\n left: '-3px !important',\n },\n };\n let style = {\n '& .MuiSlider-rail': {\n left: '-3px',\n paddingRight: '6px',\n },\n };\n style = Object.assign(Object.assign({}, style), rule);\n return style;\n});\nconst getFormattedString = (num, decimalSeparator, thousandsSeparator, hiddenDecimalSeparator) => {\n if (hiddenDecimalSeparator)\n return num.toFixed().replace(/\\B(?=(\\d{3})+(?!\\d))/g, thousandsSeparator);\n return num\n .toFixed(2)\n .replace('.', decimalSeparator)\n .replace(/\\B(?=(\\d{3})+(?!\\d))/g, thousandsSeparator);\n};\n//# sourceMappingURL=slider.js.map"],"names":["Slider","forwardRef","_a","ref","min","max","defaultValue","valueComponentType","leftSideLabel","rightSideLabel","disabled","disableSwap","step","value","isCurrencyInFront","minTextDescription","maxTextDescription","onChange","onInputBlur","thousandsSeparator","decimalSeparator","hiddenDecimalSeparator","props","__rest","getInitialValueWithUseCallBack","useMemo","undefined","getInitialValue","values","setValues","useState","useEffect","getFormattedValueWithUseCallBack","useCallback","_value","result","parseInt","isNaN","getFormattedValue","onChangeHandler","event","activeThumb","Array","isArray","Math","onChangeSingleValue","e","newValue","target","onChangeDoubleValue","thumb","curr","newArrayValue","valuesComponent","type","onBlur","minVal","getFormattedString","maxVal","_jsxs","className","children","_jsx","jsxs","jsx","ResizableSliderInput","id","textDescription","labelText","default","getDoubleValueComponent","val","getSingleValueComponent","ContainerStyled","marks","SliderStyled","Object","assign","valueLabelFormat","v","SliderValuesStyled","styled","MuiSlider","shouldForwardProp","prop","args","rule","left","style","paddingRight","num","toFixed","replace"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("tslib"),s=require("react/jsx-runtime"),a=require("
|
|
1
|
+
"use strict";var e=require("tslib"),s=require("react/jsx-runtime"),a=require("../icon/icon.js"),i=require("@mui/material/styles"),r=require("./snackbar.js");const c=i.styled("div")((s=>{var a=e.__rest(s,[]);return{"& .styled-message-header-message-container":{display:a.header?"block":"flex"},"& p":{display:a.header?"block":"inline",paddingBottom:a.header?"0px":"2px"},"& .snackbar-icon-wrapper":{"& span":{lineHeight:a.header?"20px":"unset"}},"& .custom-snackbar-divider":{paddingLeft:r.checkForIcon(a.icon)?"24px":"56px","& > div":{borderLeft:`1px solid ${a.theme.palette.onSurface.os600}`,height:a.header?"48px":"32px"}}}})),n=({icon:e})=>{let i=null;switch(e){case"alert":i=s.jsx(a.Icon,{className:"triangle-up-exclamation",fontSize:"inherit",iconStyle:"filled"});break;case"success":i=s.jsx(a.Icon,{className:"circle-check",fontSize:"inherit",iconStyle:"filled"});break;case"warning":i=s.jsx(a.Icon,{className:"circle-exclamation",fontSize:"inherit",iconStyle:"filled"})}return i?s.jsx("span",{className:"snackbar-icon-wrapper",children:i}):i};exports.SnackbarMessage=({header:e,icon:a,message:i})=>s.jsxs(c,{header:e,icon:a,children:[a&&s.jsx(n,{icon:a}),s.jsxs("div",{className:"styled-message-header-message-container",children:[e&&s.jsxs("h3",{children:[" ",e]}),s.jsxs("p",{children:[" ",i," "]})]}),s.jsx("div",{className:"custom-snackbar-divider",children:s.jsx("div",{})})]}),exports.SnackbarMessageStyled=c;
|
|
2
2
|
//# sourceMappingURL=snackbarMessage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbarMessage.js","sources":["../../../../src/components/snackbar/snackbarMessage.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport {
|
|
1
|
+
{"version":3,"file":"snackbarMessage.js","sources":["../../../../src/components/snackbar/snackbarMessage.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Icon } from '../icon';\nimport { styled } from '@mui/material/styles';\nimport { checkForIcon } from './snackbar';\nexport const SnackbarMessage = ({ header, icon, message }) => {\n return (_jsxs(SnackbarMessageStyled, { header: header, icon: icon, children: [icon && _jsx(IconComponent, { icon: icon }), _jsxs(\"div\", { className: \"styled-message-header-message-container\", children: [header && _jsxs(\"h3\", { children: [\" \", header] }), _jsxs(\"p\", { children: [\" \", message, \" \"] })] }), _jsx(\"div\", { className: \"custom-snackbar-divider\", children: _jsx(\"div\", {}) })] }));\n};\n/**\n * @description SnackbarMessageStyled styling defintion based on props\n */\nexport const SnackbarMessageStyled = styled('div')((_a) => {\n var args = __rest(_a, []);\n return {\n '& .styled-message-header-message-container': {\n display: args.header ? 'block' : 'flex',\n },\n '& p': {\n display: args.header ? 'block' : 'inline',\n paddingBottom: args.header ? '0px' : '2px',\n },\n '& .snackbar-icon-wrapper': {\n '& span': {\n lineHeight: args.header ? '20px' : 'unset',\n },\n },\n '& .custom-snackbar-divider': {\n paddingLeft: checkForIcon(args.icon) ? '24px' : '56px',\n '& > div': {\n borderLeft: `1px solid ${args.theme.palette.onSurface.os600}`,\n height: args.header ? '48px' : '32px',\n },\n },\n };\n});\nconst IconComponent = ({ icon }) => {\n let iconToReturn = null;\n switch (icon) {\n case 'alert':\n iconToReturn = _jsx(Icon, { className: \"triangle-up-exclamation\", fontSize: \"inherit\", iconStyle: \"filled\" });\n break;\n case 'success':\n iconToReturn = _jsx(Icon, { className: \"circle-check\", fontSize: \"inherit\", iconStyle: \"filled\" });\n break;\n case 'warning':\n iconToReturn = _jsx(Icon, { className: \"circle-exclamation\", fontSize: \"inherit\", iconStyle: \"filled\" });\n break;\n }\n return iconToReturn ? _jsx(\"span\", { className: \"snackbar-icon-wrapper\", children: iconToReturn }) : iconToReturn;\n};\n//# sourceMappingURL=snackbarMessage.js.map"],"names":["SnackbarMessageStyled","styled","_a","args","__rest","display","header","paddingBottom","lineHeight","paddingLeft","checkForIcon","icon","borderLeft","theme","palette","onSurface","os600","height","IconComponent","iconToReturn","_jsx","jsx","Icon","className","fontSize","iconStyle","children","message","_jsxs","jsxs"],"mappings":"6JAKY,MAMCA,EAAwBC,EAAMA,OAAC,MAAPA,EAAeC,IAChD,IAAIC,EAAOC,EAAAA,OAAOF,EAAI,IACtB,MAAO,CACH,6CAA8C,CAC1CG,QAASF,EAAKG,OAAS,QAAU,QAErC,MAAO,CACHD,QAASF,EAAKG,OAAS,QAAU,SACjCC,cAAeJ,EAAKG,OAAS,MAAQ,OAEzC,2BAA4B,CACxB,SAAU,CACNE,WAAYL,EAAKG,OAAS,OAAS,UAG3C,6BAA8B,CAC1BG,YAAaC,EAAAA,aAAaP,EAAKQ,MAAQ,OAAS,OAChD,UAAW,CACPC,WAAY,aAAaT,EAAKU,MAAMC,QAAQC,UAAUC,QACtDC,OAAQd,EAAKG,OAAS,OAAS,SAG1C,IAECY,EAAgB,EAAGP,KAAAA,MACrB,IAAIQ,EAAe,KACnB,OAAQR,GACJ,IAAK,QACDQ,EAAeC,EAAIC,IAACC,OAAM,CAAEC,UAAW,0BAA2BC,SAAU,UAAWC,UAAW,WAClG,MACJ,IAAK,UACDN,EAAeC,EAAIC,IAACC,OAAM,CAAEC,UAAW,eAAgBC,SAAU,UAAWC,UAAW,WACvF,MACJ,IAAK,UACDN,EAAeC,EAAIC,IAACC,OAAM,CAAEC,UAAW,qBAAsBC,SAAU,UAAWC,UAAW,WAGrG,OAAON,EAAeC,MAAK,OAAQ,CAAEG,UAAW,wBAAyBG,SAAUP,IAAkBA,CAAY,0BA3CtF,EAAGb,SAAQK,OAAMgB,aACpCC,OAAM5B,EAAuB,CAAEM,OAAQA,EAAQK,KAAMA,EAAMe,SAAU,CAACf,GAAQS,EAAAA,IAAKF,EAAe,CAAEP,KAAMA,IAASiB,OAAM,MAAO,CAAEL,UAAW,0CAA2CG,SAAU,CAACpB,GAAUsB,EAAKC,KAAC,KAAM,CAAEH,SAAU,CAAC,IAAKpB,KAAYsB,EAAKC,KAAC,IAAK,CAAEH,SAAU,CAAC,IAAKC,EAAS,UAAaP,MAAK,MAAO,CAAEG,UAAW,0BAA2BG,SAAUN,EAAIC,IAAC,MAAO,CAAE"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { FC, HTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
import { SxProps } from '@mui/system';
|
|
3
1
|
import { Theme } from '@mui/material';
|
|
2
|
+
import { SxProps } from '@mui/system';
|
|
3
|
+
import { FC, HTMLAttributes, ReactNode } from 'react';
|
|
4
4
|
export interface StepperProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
5
|
/**
|
|
6
6
|
* The activeStep of a stepper.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("tslib"),o=require("react/jsx-runtime"),r=require("@mui/material
|
|
1
|
+
"use strict";var e=require("tslib"),o=require("react/jsx-runtime"),r=require("@mui/material"),t=require("@mui/material/Stepper"),l=require("@mui/material/styles"),n=require("../../design/skoda/palette.theme.js");function s(e){return e&&e.__esModule?e:{default:e}}var a=s(t);function i(e){const{active:r,completed:t,className:l}=e;return o.jsx(c,{className:l,children:r?o.jsx("div",{className:"QontoStepIcon-active"}):t?o.jsx("div",{className:"QontoStepIcon-completedIcon"}):o.jsx("div",{className:"QontoStepIcon-circle"})})}const c=l.styled("div")((({theme:e})=>{let o={};return o={color:"dark"===e.palette.mode?e.palette.grey[700]:"#464748",display:"flex",height:22,alignItems:"center","& .QontoStepIcon-completedIcon":{color:n.flowColors.onSurface.os700,width:12,height:12,borderRadius:"50%",backgroundColor:"currentColor","&:hover":{borderRadius:"50%",border:`1.5px solid ${n.flowColors.onSurface.os700}`,color:n.flowColors.brand.secondary}},"& .QontoStepIcon-active":{color:n.flowColors.onSurface.os700,width:18,height:18,borderRadius:"50%",marginRight:"5.25px",marginLeft:"0px",backgroundColor:"currentColor","&:hover":{borderRadius:"50%",border:`1.5px solid ${n.flowColors.onSurface.os700}`,color:n.flowColors.brand.secondary}},"& .QontoStepIcon-circle":{width:12,height:12,borderRadius:"50%",border:"1.5px solid #C4C6C7",color:"transparent","&:hover":{cursor:"pointer",borderRadius:"50%",border:`1.5px solid ${n.flowColors.disabled.tertiary}`,backgroundColor:n.flowColors.disabled.secondary}}},o})),d=l.styled(r.StepConnector)((({theme:e})=>({[`&.${r.stepConnectorClasses.alternativeLabel}`]:{top:10,left:"calc(-50% + 9px)",right:"calc(50% + 9px)"},[`&.${r.stepConnectorClasses.active}`]:{[`& .${r.stepConnectorClasses.line}`]:{borderColor:n.flowColors.onSurface.os700,width:"60px"}},[`&.${r.stepConnectorClasses.completed}`]:{[`& .${r.stepConnectorClasses.line}`]:{borderColor:n.flowColors.onSurface.os700}},[`& .${r.stepConnectorClasses.line}`]:{borderColor:"dark"===e.palette.mode?e.palette.grey[800]:n.flowColors.disabled.primary,borderTopWidth:3,borderRadius:1}}))),p=l.styled("div")((()=>{let e={};return e={"& .controllerContainer":{display:"flex",alignItems:"center",fontFamily:"SKODA Next",fontStyle:"normal",fontWeight:"700",fontSize:"12px",lineHeight:"16px"}},e}));exports.Stepper=t=>{var{activeStep:l,alternativeLabel:n,children:s,classes:c,connector:u,nonLinear:C,orientation:h,step:m}=t,f=e.__rest(t,["activeStep","alternativeLabel","children","classes","connector","nonLinear","orientation","step"]);const x={lineHeight:"16px",fontSize:"12px",fontWeight:"400"};return o.jsx(p,{children:o.jsx("div",{children:o.jsx(a.default,Object.assign({className:"controllerContainer"},f,{activeStep:l,sx:{maxWidth:800,display:"flex",alignItems:"center",spacing:4},alternativeLabel:n,connector:o.jsx(d,{}),children:m.map((e=>o.jsx(r.Step,{children:o.jsx(r.StepLabel,{style:x,StepIconComponent:i,children:e})},e)))}))})})};
|
|
2
2
|
//# sourceMappingURL=stepper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.js","sources":["../../../../src/components/stepper/stepper.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport
|
|
1
|
+
{"version":3,"file":"stepper.js","sources":["../../../../src/components/stepper/stepper.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Step, StepConnector, StepLabel, stepConnectorClasses } from '@mui/material';\nimport MuiStepper from '@mui/material/Stepper';\nimport { styled } from '@mui/material/styles';\nimport { flowColors } from '../../design/skoda/palette.theme';\nexport const Stepper = (_a) => {\n var { activeStep, alternativeLabel, children, classes, connector, nonLinear, orientation, step } = _a, props = __rest(_a, [\"activeStep\", \"alternativeLabel\", \"children\", \"classes\", \"connector\", \"nonLinear\", \"orientation\", \"step\"]);\n const styles = {\n lineHeight: '16px',\n fontSize: '12px',\n fontWeight: '400',\n };\n const desktopStepper = () => (_jsx(\"div\", { children: _jsx(MuiStepper, Object.assign({ className: \"controllerContainer\" }, props, { activeStep: activeStep, sx: {\n maxWidth: 800,\n display: 'flex',\n alignItems: 'center',\n spacing: 4,\n }, alternativeLabel: alternativeLabel, connector: _jsx(QontoConnector, {}), children: step.map((label) => (_jsx(Step, { children: _jsx(StepLabel, { style: styles, StepIconComponent: QontoStepIcon, children: label }) }, label))) })) }));\n return _jsx(StepperStyled, { children: desktopStepper() });\n};\nfunction QontoStepIcon(props) {\n const { active, completed, className } = props;\n return (_jsx(QontoStepIconRoot, { className: className, children: active ? (_jsx(\"div\", { className: \"QontoStepIcon-active\" })) : completed ? (_jsx(\"div\", { className: \"QontoStepIcon-completedIcon\" })) : (_jsx(\"div\", { className: \"QontoStepIcon-circle\" })) }));\n}\nconst QontoStepIconRoot = styled('div')(({ theme }) => {\n let style = {};\n style = {\n color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#464748',\n display: 'flex',\n height: 22,\n alignItems: 'center',\n '& .QontoStepIcon-completedIcon': {\n color: flowColors.onSurface.os700,\n width: 12,\n height: 12,\n borderRadius: '50%',\n backgroundColor: 'currentColor',\n '&:hover': {\n borderRadius: '50%',\n border: `1.5px solid ${flowColors.onSurface.os700}`,\n color: flowColors.brand.secondary,\n },\n },\n '& .QontoStepIcon-active': {\n color: flowColors.onSurface.os700,\n width: 18,\n height: 18,\n borderRadius: '50%',\n marginRight: '5.25px',\n marginLeft: '0px',\n backgroundColor: 'currentColor',\n '&:hover': {\n borderRadius: '50%',\n border: `1.5px solid ${flowColors.onSurface.os700}`,\n color: flowColors.brand.secondary,\n },\n },\n '& .QontoStepIcon-circle': {\n width: 12,\n height: 12,\n borderRadius: '50%',\n border: '1.5px solid #C4C6C7',\n color: 'transparent',\n '&:hover': {\n cursor: 'pointer',\n borderRadius: '50%',\n border: `1.5px solid ${flowColors.disabled.tertiary}`,\n backgroundColor: flowColors.disabled.secondary,\n },\n },\n };\n return style;\n});\nconst QontoConnector = styled(StepConnector)(({ theme }) => ({\n [`&.${stepConnectorClasses.alternativeLabel}`]: {\n top: 10,\n left: 'calc(-50% + 9px)',\n right: 'calc(50% + 9px)',\n },\n [`&.${stepConnectorClasses.active}`]: {\n [`& .${stepConnectorClasses.line}`]: {\n borderColor: flowColors.onSurface.os700,\n width: '60px',\n },\n },\n [`&.${stepConnectorClasses.completed}`]: {\n [`& .${stepConnectorClasses.line}`]: {\n borderColor: flowColors.onSurface.os700,\n },\n },\n [`& .${stepConnectorClasses.line}`]: {\n borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : flowColors.disabled.primary,\n borderTopWidth: 3,\n borderRadius: 1,\n },\n}));\nconst StepperStyled = styled('div')(() => {\n let style = {};\n const SKODA_NEXT = 'SKODA Next';\n style = {\n '& .controllerContainer': {\n display: 'flex',\n alignItems: 'center',\n fontFamily: SKODA_NEXT,\n fontStyle: 'normal',\n fontWeight: '700',\n fontSize: '12px',\n lineHeight: '16px',\n },\n };\n return style;\n});\n//# sourceMappingURL=stepper.js.map"],"names":["QontoStepIcon","props","active","completed","className","_jsx","QontoStepIconRoot","children","jsx","styled","theme","style","color","palette","mode","grey","display","height","alignItems","flowColors","onSurface","os700","width","borderRadius","backgroundColor","border","brand","secondary","marginRight","marginLeft","cursor","disabled","tertiary","QontoConnector","StepConnector","stepConnectorClasses","alternativeLabel","top","left","right","line","borderColor","primary","borderTopWidth","StepperStyled","fontFamily","fontStyle","fontWeight","fontSize","lineHeight","_a","activeStep","classes","connector","nonLinear","orientation","step","__rest","styles","MuiStepper","Object","assign","sx","maxWidth","spacing","map","label","Step","StepLabel","StepIconComponent"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material/AppBar"),i=require("@mui/material/Toolbar"),t=require("../../icon/icon.js"),a=require("./secondaryTabStyled.js"),n=require("@mui/material"),s=require("
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material/AppBar"),i=require("@mui/material/Toolbar"),t=require("../../icon/icon.js"),a=require("./secondaryTabStyled.js"),n=require("@mui/material"),s=require("../../../design/skoda/palette.theme.js");function l(e){return e&&e.__esModule?e:{default:e}}var p=l(r),d=l(o),c=l(i);const u=n.styled(n.Backdrop)((()=>({zIndex:2e3}))),x=n.styled(n.Popper)((()=>({transform:"unset !important",position:"static !important",zIndex:2e3}))),b=n.styled(n.MenuList)((({theme:e})=>({position:"absolute",bottom:"0",left:0,width:"100%",padding:"26px 0px 27px 0px",background:"white",boxSizing:"border-box",borderTopLeftRadius:"16px",borderTopRightRadius:"16px",zIndex:2e3,boxShadow:"rgb(0 0 0 / 15%) 0px 3px 8px","& .MuiDivider-root":{display:"block",marginTop:"0px !important",marginBottom:"0px !important"},"& div:first-of-type":{"& > li":{borderTopLeftRadius:"16px",borderTopRightRadius:"16px"}},"& > div > li":{fontSize:"16px",fontWeight:"400",color:e.palette.onSurface.os900,paddingTop:"11px",paddingBottom:"11px"}}))),h=n.styled(d.default)((()=>({maxHeigth:"56px",padding:"0px",top:"auto",bottom:0,boxShadow:"none",borderTop:`1px solid ${s.flowColors.transparent.secondary}`,backgroundColor:s.flowColors.background.primary,"& > div.MuiToolbar-root":{maxHeight:"56px",padding:"0px","& > div":{width:"100%",justifyContent:"space-evenly","& > div":{"&> a":{padding:0,textDecoration:"none"}}}}})));exports.SecondaryNavigationTabs=({currentActiveTab:o,setCurrentActiveTab:i,children:s})=>{const[l,d]=r.useState(null),[m,g]=r.useState(null),[j,f]=r.useState(!1),[v,k]=r.useState(null),C=r.useCallback((e=>{i(e.value),e.onClick&&e.onClick()}),[i]),y=r.useCallback((e=>{f(!j),g(e.currentTarget)}),[j]),T=r.useCallback((r=>r.href?e.jsxs("a",{href:r.href,target:r.target||null,children:[e.jsx(t.Icon,{color:"inherit",className:r.icon||"more-horizontal"}),r.label]}):e.jsxs(e.Fragment,{children:[e.jsx(t.Icon,{color:"inherit",className:r.icon||"more-horizontal"}),r.label]})),[]),A=r.useCallback((e=>{k(e.label),e.href?window.open(e.href,e.target):i(e.value),f(!1),e.onClick&&e.onClick(e.value)}),[i]),w=r.useCallback((()=>l.slice(3).map(((r,o)=>e.jsxs("div",{children:[e.jsx(n.MenuItem,{onClick:()=>A(r.props),children:r.props.label},o),e.jsx(n.Divider,{orientation:"horizontal",textAlign:"center",variant:"middle"})]},r.props.label)))),[l,A]);return r.useEffect((()=>{d(p.default.Children.toArray(s))}),[s]),e.jsx(h,{position:"fixed",color:"transparent",children:e.jsx(c.default,{children:e.jsx(n.Box,{sx:{display:"flex"},children:l&&e.jsxs(e.Fragment,{children:[e.jsx(a.default,Object.assign({},l[0].props,{isActive:o===l[0].props.value,onClick:()=>{C(l[0].props)},children:T(l[0].props)}),"secondary-tab-0"),e.jsx(a.default,Object.assign({},l[1].props,{isActive:o===l[1].props.value,onClick:()=>{C(l[1].props)},children:T(l[1].props)}),"secondary-tab-1"),e.jsx(a.default,Object.assign({},l[2].props,{isActive:o===l[2].props.value,onClick:()=>{C(l[2].props)},children:T(l[2].props)}),"secondary-tab-2"),l.length>4&&e.jsxs(e.Fragment,{children:[e.jsxs(a.default,{isActive:j,moreTab:!0,selectedMenuLabel:v,onClick:y,children:[e.jsx(t.Icon,{color:"inherit",className:"more-vertical"}),v]},"secondary-tab-more"),e.jsx(x,{open:j,anchorEl:m,placement:"top",transition:!0,disablePortal:!1,children:({TransitionProps:r})=>e.jsx(n.ClickAwayListener,{onClickAway:()=>f(!1),children:e.jsx(u,{open:j,onClick:()=>f(!1),children:e.jsx(n.Fade,Object.assign({},r,{timeout:350,children:e.jsx(b,{id:"more-tabs-menu",children:w()})}))})})})]}),l.length<=4&&e.jsx(a.default,Object.assign({},l[3].props,{isActive:o===l[3].props.value,onClick:()=>{C(l[3].props)},children:T(l[3].props)}),"secondary-tab-3")]})})})})};
|
|
2
2
|
//# sourceMappingURL=secondaryNavigationTabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"secondaryNavigationTabs.js","sources":["../../../../../src/components/tab/secondaryNavigation/secondaryNavigationTabs.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useCallback, useEffect, useState } from 'react';\nimport MuiAppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\nimport { Icon } from '../../icon';\nimport SecondaryTabStyled from './secondaryTabStyled';\nimport { MenuItem, ClickAwayListener, Fade, MenuList, Popper, styled, Box, Backdrop } from '@mui/material';\nimport { Divider } from '../../divider';\nimport { flowColors } from '../../../design/skoda/palette.theme';\n/**\n * @description SkodaFlow Checkbox component.\n * Properties are inherited from HTML Button element.\n * @param props AppBarProps\n * @returns React Functional Component\n */\nexport const SecondaryNavigationTabs = ({ currentActiveTab, setCurrentActiveTab, children }) => {\n const [childrenArr, setChildrenArr] = useState(null);\n const [anchorEl, setAnchorEl] = useState(null);\n const [open, setOpen] = useState(false);\n const [selectedMenuLabel, setSelectedMenuLabel] = useState(null);\n //handle the active tab selected\n const handleActiveTab = useCallback((_props) => {\n setCurrentActiveTab(_props.value);\n _props.onClick && _props.onClick();\n }, [setCurrentActiveTab]);\n //handle the click on tab of type menu\n const handleMenuTabClick = useCallback((e) => {\n setOpen(!open);\n setAnchorEl(e.currentTarget);\n }, [open]);\n //render a link tab or not based on type\n const handleRenderTabType = useCallback((_props) => {\n if (_props.href) {\n return (_jsxs(\"a\", { href: _props.href, target: _props.target || null, children: [_jsx(Icon, { color: \"inherit\", className: _props.icon || 'more-horizontal' }), _props.label] }));\n }\n else {\n return (_jsxs(_Fragment, { children: [_jsx(Icon, { color: \"inherit\", className: _props.icon || 'more-horizontal' }), _props.label] }));\n }\n }, []);\n //handle the event triggered on onclick based on tab type (link or tab)\n const onClickMenuItem = useCallback((_props) => {\n setSelectedMenuLabel(_props.label);\n if (!_props.href) {\n setCurrentActiveTab(_props.value);\n }\n else {\n window.open(_props.href, _props.target);\n }\n setOpen(false);\n _props.onClick && _props.onClick(_props.value);\n }, [setCurrentActiveTab]);\n //returns the list of menu items\n const handleMenuItems = useCallback(() => {\n const menuItems = childrenArr.slice(3);\n return menuItems.map((item, i) => {\n return (_jsxs(\"div\", { children: [_jsx(MenuItem, { onClick: () => onClickMenuItem(item.props), children: item.props.label }, i), _jsx(Divider, { orientation: \"horizontal\", textAlign: \"center\", variant: \"middle\" })] }, item.props.label));\n });\n }, [childrenArr, onClickMenuItem]);\n useEffect(() => {\n setChildrenArr(React.Children.toArray(children));\n }, [children]);\n return (_jsx(AppBarStyled, { position: \"fixed\", color: \"transparent\", children: _jsx(Toolbar, { children: _jsx(Box, { sx: { display: 'flex' }, children: childrenArr && (_jsxs(_Fragment, { children: [_jsx(SecondaryTabStyled, Object.assign({}, childrenArr[0].props, { isActive: currentActiveTab === childrenArr[0].props.value, onClick: () => {\n handleActiveTab(childrenArr[0].props);\n }, children: handleRenderTabType(childrenArr[0].props) }), `secondary-tab-0`), _jsx(SecondaryTabStyled, Object.assign({}, childrenArr[1].props, { isActive: currentActiveTab === childrenArr[1].props.value, onClick: () => {\n handleActiveTab(childrenArr[1].props);\n }, children: handleRenderTabType(childrenArr[1].props) }), `secondary-tab-1`), _jsx(SecondaryTabStyled, Object.assign({}, childrenArr[2].props, { isActive: currentActiveTab === childrenArr[2].props.value, onClick: () => {\n handleActiveTab(childrenArr[2].props);\n }, children: handleRenderTabType(childrenArr[2].props) }), `secondary-tab-2`), childrenArr.length > 4 && (_jsxs(_Fragment, { children: [_jsxs(SecondaryTabStyled, { isActive: open, moreTab: true, selectedMenuLabel: selectedMenuLabel, onClick: handleMenuTabClick, children: [_jsx(Icon, { color: \"inherit\", className: 'more-vertical' }), selectedMenuLabel] }, `secondary-tab-more`), _jsx(PopperStyled, { open: open, anchorEl: anchorEl, placement: \"top\", transition: true, disablePortal: false, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(BackdropStyled, { open: open, onClick: () => setOpen(false), children: _jsx(Fade, Object.assign({}, TransitionProps, { timeout: 350, children: _jsx(MenuStyled, { id: \"more-tabs-menu\", children: handleMenuItems() }) })) }) })) })] })), childrenArr.length <= 4 && (_jsx(SecondaryTabStyled, Object.assign({}, childrenArr[3].props, { isActive: currentActiveTab === childrenArr[3].props.value, onClick: () => {\n handleActiveTab(childrenArr[3].props);\n }, children: handleRenderTabType(childrenArr[3].props) }), `secondary-tab-3`))] })) }) }) }));\n};\nconst BackdropStyled = styled(Backdrop)(() => {\n return {\n zIndex: 2000,\n };\n});\nconst PopperStyled = styled(Popper)(() => {\n const style = {\n transform: 'unset !important',\n position: 'static !important',\n zIndex: 2000,\n };\n return style;\n});\nconst MenuStyled = styled(MenuList)(({ theme }) => {\n return {\n position: 'absolute',\n bottom: '0',\n left: 0,\n width: '100%',\n padding: '26px 0px 27px 0px',\n background: 'white',\n boxSizing: 'border-box',\n borderTopLeftRadius: '16px',\n borderTopRightRadius: '16px',\n zIndex: 2000,\n boxShadow: 'rgb(0 0 0 / 15%) 0px 3px 8px',\n '& .MuiDivider-root': {\n display: 'block',\n marginTop: '0px !important',\n marginBottom: '0px !important',\n },\n '& div:first-of-type': {\n '& > li': {\n borderTopLeftRadius: '16px',\n borderTopRightRadius: '16px',\n },\n },\n '& > div > li': {\n fontSize: '16px',\n fontWeight: '400',\n color: theme.palette.onSurface.os900,\n paddingTop: '11px',\n paddingBottom: '11px',\n },\n };\n});\n/**\n * @description Tabs styling definition based on props\n */\nconst AppBarStyled = styled(MuiAppBar)(() => {\n return {\n maxHeigth: '56px',\n padding: '0px',\n top: 'auto',\n bottom: 0,\n boxShadow: 'none',\n borderTop: `1px solid ${flowColors.transparent.secondary}`,\n backgroundColor: flowColors.background.primary,\n '& > div.MuiToolbar-root': {\n maxHeight: '56px',\n padding: '0px',\n '& > div': {\n width: '100%',\n justifyContent: 'space-evenly',\n '& > div': {\n '&> a': {\n padding: 0,\n textDecoration: 'none',\n },\n },\n },\n },\n };\n});\n//# sourceMappingURL=secondaryNavigationTabs.js.map"],"names":["BackdropStyled","styled","Backdrop","zIndex","PopperStyled","Popper","transform","position","MenuStyled","MenuList","theme","bottom","left","width","padding","background","boxSizing","borderTopLeftRadius","borderTopRightRadius","boxShadow","display","marginTop","marginBottom","fontSize","fontWeight","color","palette","onSurface","os900","paddingTop","paddingBottom","AppBarStyled","MuiAppBar","default","maxHeigth","top","borderTop","flowColors","transparent","secondary","backgroundColor","primary","maxHeight","justifyContent","textDecoration","currentActiveTab","setCurrentActiveTab","children","childrenArr","setChildrenArr","useState","anchorEl","setAnchorEl","open","setOpen","selectedMenuLabel","setSelectedMenuLabel","handleActiveTab","useCallback","_props","value","onClick","handleMenuTabClick","e","currentTarget","handleRenderTabType","href","_jsxs","target","_jsx","Icon","className","icon","label","_Fragment","onClickMenuItem","window","handleMenuItems","slice","map","item","i","MenuItem","props","Divider","orientation","textAlign","variant","useEffect","React","Children","toArray","jsx","Toolbar","Box","sx","jsxs","SecondaryTabStyled","Object","assign","isActive","length","moreTab","placement","transition","disablePortal","TransitionProps","ClickAwayListener","onClickAway","Fade","timeout","id"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"secondaryNavigationTabs.js","sources":["../../../../../src/components/tab/secondaryNavigation/secondaryNavigationTabs.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport React, { useCallback, useEffect, useState } from 'react';\nimport MuiAppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\nimport { Icon } from '../../icon';\nimport SecondaryTabStyled from './secondaryTabStyled';\nimport { MenuItem, ClickAwayListener, Fade, MenuList, Popper, styled, Box, Backdrop, Divider } from '@mui/material';\nimport { flowColors } from '../../../design/skoda/palette.theme';\n/**\n * @description SkodaFlow Checkbox component.\n * Properties are inherited from HTML Button element.\n * @param props AppBarProps\n * @returns React Functional Component\n */\nexport const SecondaryNavigationTabs = ({ currentActiveTab, setCurrentActiveTab, children }) => {\n const [childrenArr, setChildrenArr] = useState(null);\n const [anchorEl, setAnchorEl] = useState(null);\n const [open, setOpen] = useState(false);\n const [selectedMenuLabel, setSelectedMenuLabel] = useState(null);\n //handle the active tab selected\n const handleActiveTab = useCallback((_props) => {\n setCurrentActiveTab(_props.value);\n _props.onClick && _props.onClick();\n }, [setCurrentActiveTab]);\n //handle the click on tab of type menu\n const handleMenuTabClick = useCallback((e) => {\n setOpen(!open);\n setAnchorEl(e.currentTarget);\n }, [open]);\n //render a link tab or not based on type\n const handleRenderTabType = useCallback((_props) => {\n if (_props.href) {\n return (_jsxs(\"a\", { href: _props.href, target: _props.target || null, children: [_jsx(Icon, { color: \"inherit\", className: _props.icon || 'more-horizontal' }), _props.label] }));\n }\n else {\n return (_jsxs(_Fragment, { children: [_jsx(Icon, { color: \"inherit\", className: _props.icon || 'more-horizontal' }), _props.label] }));\n }\n }, []);\n //handle the event triggered on onclick based on tab type (link or tab)\n const onClickMenuItem = useCallback((_props) => {\n setSelectedMenuLabel(_props.label);\n if (!_props.href) {\n setCurrentActiveTab(_props.value);\n }\n else {\n window.open(_props.href, _props.target);\n }\n setOpen(false);\n _props.onClick && _props.onClick(_props.value);\n }, [setCurrentActiveTab]);\n //returns the list of menu items\n const handleMenuItems = useCallback(() => {\n const menuItems = childrenArr.slice(3);\n return menuItems.map((item, i) => {\n return (_jsxs(\"div\", { children: [_jsx(MenuItem, { onClick: () => onClickMenuItem(item.props), children: item.props.label }, i), _jsx(Divider, { orientation: \"horizontal\", textAlign: \"center\", variant: \"middle\" })] }, item.props.label));\n });\n }, [childrenArr, onClickMenuItem]);\n useEffect(() => {\n setChildrenArr(React.Children.toArray(children));\n }, [children]);\n return (_jsx(AppBarStyled, { position: \"fixed\", color: \"transparent\", children: _jsx(Toolbar, { children: _jsx(Box, { sx: { display: 'flex' }, children: childrenArr && (_jsxs(_Fragment, { children: [_jsx(SecondaryTabStyled, Object.assign({}, childrenArr[0].props, { isActive: currentActiveTab === childrenArr[0].props.value, onClick: () => {\n handleActiveTab(childrenArr[0].props);\n }, children: handleRenderTabType(childrenArr[0].props) }), `secondary-tab-0`), _jsx(SecondaryTabStyled, Object.assign({}, childrenArr[1].props, { isActive: currentActiveTab === childrenArr[1].props.value, onClick: () => {\n handleActiveTab(childrenArr[1].props);\n }, children: handleRenderTabType(childrenArr[1].props) }), `secondary-tab-1`), _jsx(SecondaryTabStyled, Object.assign({}, childrenArr[2].props, { isActive: currentActiveTab === childrenArr[2].props.value, onClick: () => {\n handleActiveTab(childrenArr[2].props);\n }, children: handleRenderTabType(childrenArr[2].props) }), `secondary-tab-2`), childrenArr.length > 4 && (_jsxs(_Fragment, { children: [_jsxs(SecondaryTabStyled, { isActive: open, moreTab: true, selectedMenuLabel: selectedMenuLabel, onClick: handleMenuTabClick, children: [_jsx(Icon, { color: \"inherit\", className: 'more-vertical' }), selectedMenuLabel] }, `secondary-tab-more`), _jsx(PopperStyled, { open: open, anchorEl: anchorEl, placement: \"top\", transition: true, disablePortal: false, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(BackdropStyled, { open: open, onClick: () => setOpen(false), children: _jsx(Fade, Object.assign({}, TransitionProps, { timeout: 350, children: _jsx(MenuStyled, { id: \"more-tabs-menu\", children: handleMenuItems() }) })) }) })) })] })), childrenArr.length <= 4 && (_jsx(SecondaryTabStyled, Object.assign({}, childrenArr[3].props, { isActive: currentActiveTab === childrenArr[3].props.value, onClick: () => {\n handleActiveTab(childrenArr[3].props);\n }, children: handleRenderTabType(childrenArr[3].props) }), `secondary-tab-3`))] })) }) }) }));\n};\nconst BackdropStyled = styled(Backdrop)(() => {\n return {\n zIndex: 2000,\n };\n});\nconst PopperStyled = styled(Popper)(() => {\n const style = {\n transform: 'unset !important',\n position: 'static !important',\n zIndex: 2000,\n };\n return style;\n});\nconst MenuStyled = styled(MenuList)(({ theme }) => {\n return {\n position: 'absolute',\n bottom: '0',\n left: 0,\n width: '100%',\n padding: '26px 0px 27px 0px',\n background: 'white',\n boxSizing: 'border-box',\n borderTopLeftRadius: '16px',\n borderTopRightRadius: '16px',\n zIndex: 2000,\n boxShadow: 'rgb(0 0 0 / 15%) 0px 3px 8px',\n '& .MuiDivider-root': {\n display: 'block',\n marginTop: '0px !important',\n marginBottom: '0px !important',\n },\n '& div:first-of-type': {\n '& > li': {\n borderTopLeftRadius: '16px',\n borderTopRightRadius: '16px',\n },\n },\n '& > div > li': {\n fontSize: '16px',\n fontWeight: '400',\n color: theme.palette.onSurface.os900,\n paddingTop: '11px',\n paddingBottom: '11px',\n },\n };\n});\n/**\n * @description Tabs styling definition based on props\n */\nconst AppBarStyled = styled(MuiAppBar)(() => {\n return {\n maxHeigth: '56px',\n padding: '0px',\n top: 'auto',\n bottom: 0,\n boxShadow: 'none',\n borderTop: `1px solid ${flowColors.transparent.secondary}`,\n backgroundColor: flowColors.background.primary,\n '& > div.MuiToolbar-root': {\n maxHeight: '56px',\n padding: '0px',\n '& > div': {\n width: '100%',\n justifyContent: 'space-evenly',\n '& > div': {\n '&> a': {\n padding: 0,\n textDecoration: 'none',\n },\n },\n },\n },\n };\n});\n//# sourceMappingURL=secondaryNavigationTabs.js.map"],"names":["BackdropStyled","styled","Backdrop","zIndex","PopperStyled","Popper","transform","position","MenuStyled","MenuList","theme","bottom","left","width","padding","background","boxSizing","borderTopLeftRadius","borderTopRightRadius","boxShadow","display","marginTop","marginBottom","fontSize","fontWeight","color","palette","onSurface","os900","paddingTop","paddingBottom","AppBarStyled","MuiAppBar","default","maxHeigth","top","borderTop","flowColors","transparent","secondary","backgroundColor","primary","maxHeight","justifyContent","textDecoration","currentActiveTab","setCurrentActiveTab","children","childrenArr","setChildrenArr","useState","anchorEl","setAnchorEl","open","setOpen","selectedMenuLabel","setSelectedMenuLabel","handleActiveTab","useCallback","_props","value","onClick","handleMenuTabClick","e","currentTarget","handleRenderTabType","href","_jsxs","target","_jsx","Icon","className","icon","label","_Fragment","onClickMenuItem","window","handleMenuItems","slice","map","item","i","MenuItem","props","Divider","orientation","textAlign","variant","useEffect","React","Children","toArray","jsx","Toolbar","Box","sx","jsxs","SecondaryTabStyled","Object","assign","isActive","length","moreTab","placement","transition","disablePortal","TransitionProps","ClickAwayListener","onClickAway","Fade","timeout","id"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
declare const TabStyled: import("@emotion/styled").StyledComponent<import("@mui/material/Tab").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
6
6
|
ref?: import("react").Ref<HTMLDivElement>;
|
|
7
|
-
}, "disabled" | "className" | "style" | "classes" | "
|
|
7
|
+
}, "disabled" | "className" | "style" | "classes" | "children" | "sx" | "label" | "tabIndex" | "action" | "value" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "iconPosition" | "wrapped"> & {
|
|
8
8
|
theme?: import("@emotion/react").Theme;
|
|
9
9
|
} & {
|
|
10
10
|
component?: import("react").ElementType<any>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var o=require("../../palette.theme.js");const r={defaultProps:{disableGutters:!0,square:!0},styleOverrides:{root:({theme:r})=>({boxShadow:"unset",borderRadius:"0px",borderTop:`1px solid ${r.palette.divider}`,borderBottom:0,"&::before":{display:"none"},"& .MuiAccordionSummary-root":{lineHeight:"24px",fontWeight:700,fontSize:"16px",color:o.flowColors.onSurface.os900,letterSpacing:"0.3px",padding:"0px 24px",display:"flex",alignItems:"
|
|
1
|
+
"use strict";var o=require("../../palette.theme.js");const r={defaultProps:{disableGutters:!0,square:!0},styleOverrides:{root:({theme:r})=>({boxShadow:"unset",borderRadius:"0px",borderTop:`1px solid ${r.palette.divider}`,borderBottom:0,"&::before":{display:"none"},"& .MuiAccordionSummary-root":{lineHeight:"24px",fontWeight:700,fontSize:"16px",color:o.flowColors.onSurface.os900,letterSpacing:"0.3px",padding:"0px 24px",display:"flex",alignItems:"center","& > .MuiAccordionSummary-expandIconWrapper > .MuiIcon-root":{color:o.flowColors.onSurface.os900},"& > .MuiAccordionSummary-content":{flexDirection:"column",margin:"24px 20px 24px 0px","& > .accordion-panel-title--sneak-peak":{marginTop:"8px",fontWeight:300}},"&:hover":{"& > .MuiAccordionSummary-expandIconWrapper > div > button":{background:o.flowColors.transparent.primary}},"&:focus":{backgroundColor:"transparent"}},"& .text":{fontWeight:300,fontSize:"16px",lineHeight:"24px",letterSpacing:"0.3px",color:o.flowColors.onSurface.os900},"& .MuiAccordionDetails-root":{padding:"0px 24px 16px"},"& .MuiAccordionSummary-expandIconWrapper":{transform:"unset !important","& .MuiIcon-root":{borderRadius:"50%",position:"relative !important",fontSize:"18px"},"& > div":{transform:"unset","& > button":{backgroundColor:"transparent",width:"24px",height:"24px",outline:"none","& .MuiIcon-root":{transform:"rotate(0deg)",transition:"all 0.3s",transformOrigin:"50%","&:before":{fontSize:"16px"}}}},"&.Mui-expanded":{"& .MuiIcon-root":{transform:"rotate(180deg)"}}}})}};exports.flowAccordion=r;
|
|
2
2
|
//# sourceMappingURL=accordion.theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.theme.js","sources":["../../../../../../src/design/skoda/components/accordion/accordion.theme.ts"],"sourcesContent":["import { flowColors } from '../../palette.theme';\nexport const flowAccordion = {\n defaultProps: {\n disableGutters: true,\n square: true,\n },\n styleOverrides: {\n root: ({ theme }) => ({\n boxShadow: 'unset',\n borderRadius: '0px',\n borderTop: `1px solid ${theme.palette.divider}`,\n borderBottom: 0,\n '&::before': {\n display: 'none',\n },\n '& .MuiAccordionSummary-root': {\n lineHeight: '24px',\n fontWeight: 700,\n fontSize: '16px',\n color: flowColors.onSurface.os900,\n letterSpacing: '0.3px',\n padding: '0px 24px',\n display: 'flex',\n alignItems: '
|
|
1
|
+
{"version":3,"file":"accordion.theme.js","sources":["../../../../../../src/design/skoda/components/accordion/accordion.theme.ts"],"sourcesContent":["import { flowColors } from '../../palette.theme';\nexport const flowAccordion = {\n defaultProps: {\n disableGutters: true,\n square: true,\n },\n styleOverrides: {\n root: ({ theme }) => ({\n boxShadow: 'unset',\n borderRadius: '0px',\n borderTop: `1px solid ${theme.palette.divider}`,\n borderBottom: 0,\n '&::before': {\n display: 'none',\n },\n '& .MuiAccordionSummary-root': {\n lineHeight: '24px',\n fontWeight: 700,\n fontSize: '16px',\n color: flowColors.onSurface.os900,\n letterSpacing: '0.3px',\n padding: '0px 24px',\n display: 'flex',\n alignItems: 'center',\n '& > .MuiAccordionSummary-expandIconWrapper > .MuiIcon-root': {\n color: flowColors.onSurface.os900,\n },\n '& > .MuiAccordionSummary-content': {\n flexDirection: 'column',\n margin: '24px 20px 24px 0px',\n '& > .accordion-panel-title--sneak-peak': {\n marginTop: '8px',\n fontWeight: 300,\n },\n },\n '&:hover': {\n '& > .MuiAccordionSummary-expandIconWrapper > div > button': {\n background: flowColors.transparent.primary,\n },\n },\n '&:focus': {\n backgroundColor: 'transparent',\n },\n },\n '& .text': {\n fontWeight: 300,\n fontSize: '16px',\n lineHeight: '24px',\n letterSpacing: '0.3px',\n color: flowColors.onSurface.os900,\n },\n '& .MuiAccordionDetails-root': {\n padding: '0px 24px 16px',\n },\n '& .MuiAccordionSummary-expandIconWrapper': {\n transform: 'unset !important',\n '& .MuiIcon-root': {\n borderRadius: '50%',\n position: 'relative !important',\n fontSize: '18px',\n },\n '& > div': {\n transform: 'unset',\n '& > button': {\n backgroundColor: 'transparent',\n width: '24px',\n height: '24px',\n outline: 'none',\n '& .MuiIcon-root': {\n transform: 'rotate(0deg)',\n transition: 'all 0.3s',\n transformOrigin: '50%',\n '&:before': {\n fontSize: '16px',\n },\n },\n },\n },\n '&.Mui-expanded': {\n '& .MuiIcon-root': {\n transform: 'rotate(180deg)',\n },\n },\n },\n }),\n },\n};\n//# sourceMappingURL=accordion.theme.js.map"],"names":["flowAccordion","defaultProps","disableGutters","square","styleOverrides","root","theme","boxShadow","borderRadius","borderTop","palette","divider","borderBottom","display","lineHeight","fontWeight","fontSize","color","flowColors","onSurface","os900","letterSpacing","padding","alignItems","flexDirection","margin","marginTop","background","transparent","primary","backgroundColor","transform","position","width","height","outline","transition","transformOrigin"],"mappings":"qDACY,MAACA,EAAgB,CACzBC,aAAc,CACVC,gBAAgB,EAChBC,QAAQ,GAEZC,eAAgB,CACZC,KAAM,EAAGC,YAAa,CAClBC,UAAW,QACXC,aAAc,MACdC,UAAW,aAAaH,EAAMI,QAAQC,UACtCC,aAAc,EACd,YAAa,CACTC,QAAS,QAEb,8BAA+B,CAC3BC,WAAY,OACZC,WAAY,IACZC,SAAU,OACVC,MAAOC,EAAAA,WAAWC,UAAUC,MAC5BC,cAAe,QACfC,QAAS,WACTT,QAAS,OACTU,WAAY,SACZ,6DAA8D,CAC1DN,MAAOC,EAAAA,WAAWC,UAAUC,OAEhC,mCAAoC,CAChCI,cAAe,SACfC,OAAQ,qBACR,yCAA0C,CACtCC,UAAW,MACXX,WAAY,MAGpB,UAAW,CACP,4DAA6D,CACzDY,WAAYT,EAAAA,WAAWU,YAAYC,UAG3C,UAAW,CACPC,gBAAiB,gBAGzB,UAAW,CACPf,WAAY,IACZC,SAAU,OACVF,WAAY,OACZO,cAAe,QACfJ,MAAOC,EAAAA,WAAWC,UAAUC,OAEhC,8BAA+B,CAC3BE,QAAS,iBAEb,2CAA4C,CACxCS,UAAW,mBACX,kBAAmB,CACfvB,aAAc,MACdwB,SAAU,sBACVhB,SAAU,QAEd,UAAW,CACPe,UAAW,QACX,aAAc,CACVD,gBAAiB,cACjBG,MAAO,OACPC,OAAQ,OACRC,QAAS,OACT,kBAAmB,CACfJ,UAAW,eACXK,WAAY,WACZC,gBAAiB,MACjB,WAAY,CACRrB,SAAU,WAK1B,iBAAkB,CACd,kBAAmB,CACfe,UAAW"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("../../../../components/accordion/accordion.js"),require("../../../../components/backdrop/backdrop.js"),require("../../../../components/button/button.js"),require("../../../../components/banner/banner.js"),require("../../../../components/cardContainer/cardContainer.js"),require("../../../../components/cardMenu/cardMenu.js"),require("../../../../components/checkbox/checkbox.js"),require("../../../../components/chip/chipImage/chipImage.js"),require("../../../../components/chip/regular/chip.js"),require("../../../../components/chip/chipMultiselect/multiSelectChip.js"),require("../../../../components/chip/chipDropdownChildren/chipDropdownChildren.js"),require("@mui/material/Container");var r=require("../../../../components/controls/controls.js");require("../../../../components/divider/divider.js"),require("../../../../components/drawer/drawer.js"),require("../../../../components/flag/flag.js"),require("tslib"),require("@mui/material/Grid"),require("../../../../components/icon/icon.js"),require("../../../../components/indicator/indicator.js"),require("../../../../components/label/label.js"),require("../../../../components/labelCO2/labelCO2.js"),require("../../../../components/labelFeature/labelFeature.js"),require("../../../../components/labelPromotional/labelPromotional.js"),require("../../../../components/labelStatus/labelStatus.js"),require("../../../../components/menu/menu.js"),require("@mui/material/MenuItem"),require("@mui/material"),require("../../../../components/mobileStepper/
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("../../../../components/accordion/accordion.js"),require("../../../../components/backdrop/backdrop.js"),require("../../../../components/button/button.js"),require("../../../../components/banner/banner.js"),require("../../../../components/cardContainer/cardContainer.js"),require("../../../../components/cardMenu/cardMenu.js"),require("../../../../components/checkbox/checkbox.js"),require("../../../../components/chip/chipImage/chipImage.js"),require("../../../../components/chip/regular/chip.js"),require("../../../../components/chip/chipMultiselect/multiSelectChip.js"),require("../../../../components/chip/chipDropdownChildren/chipDropdownChildren.js"),require("@mui/material/Container");var r=require("../../../../components/controls/controls.js");require("../../../../components/divider/divider.js"),require("../../../../components/drawer/drawer.js"),require("../../../../components/flag/flag.js"),require("tslib"),require("@mui/material/Grid"),require("../../../../components/icon/icon.js"),require("../../../../components/indicator/indicator.js"),require("../../../../components/label/label.js"),require("../../../../components/labelCO2/labelCO2.js"),require("../../../../components/labelFeature/labelFeature.js"),require("../../../../components/labelPromotional/labelPromotional.js"),require("../../../../components/labelStatus/labelStatus.js"),require("../../../../components/menu/menu.js"),require("@mui/material/MenuItem"),require("@mui/material"),require("@mui/material/MobileStepper"),require("react"),require("../../../../components/mobileStepper/mobileStepperButton.js"),require("../../../../components/modal/modal.js"),require("../../../../components/modal/modalTitle.js"),require("../../../../components/numbering/numbering.js"),require("../../../../components/pagination/pagination.js"),require("../../../../components/progressBar/progressBar.js"),require("../../../../components/radioButton/radioButton.js"),require("../../../../components/selectInput/selectInput.js"),require("../../../../components/slider/slider.js"),require("../../../../components/snackbar/snackbar.js"),require("../../../../components/stepper/stepper.js"),require("../../../../components/tab/tab.js"),require("../../../../components/tab/tabs.js"),require("../../../../components/tab/secondaryNavigation/secondaryNavigationTabs.js"),require("../../../../components/textArea/textArea.js"),require("../../../../components/common/styled/textFieldStyled.js"),require("../../../../components/helperTextContent/index.js"),require("lodash/noop"),require("../../../../components/toggleSwitch/toggleSwitch.js"),require("../../../../components/agGrid/agGrid.js"),require("../../../../components/avatar/Avatar.js"),require("../../../../components/iconButton/index.js"),require("../../../../components/alert/AlertButton.js"),require("../../../../organisms/gallery/Gallery.js"),require("../../../../organisms/gallery/GalleryItem.js"),require("@mui/material/styles"),require("../../palette.theme.js"),require("../autocomplete.theme.js"),require("../backdrop.theme.js"),require("@skodaflow/web-tokens/src/tokens.json"),require("@mui/system"),require("../../theme.breakpoints.js"),require("../../theme.constants.js"),require("@mui/x-date-pickers/internals"),require("../divider.theme.js"),require("../drawer.theme.js"),require("../form/slider.theme.js"),require("../icon.theme.js"),require("../mobileStepper.theme.js"),require("../modal.theme.js"),require("../pagination.theme.js"),require("../snackbar.theme.js"),require("../stepper/stepIcon/errorStepIcon.js"),require("../stepper/stepIcon/qontoStepIcon.js"),require("../tabs/tabs.theme.js"),require("../tooltip.theme.js"),require("react-use"),require("../../../../organisms/cardOwnedVehicle/cardOwnedVehicle.js"),require("../../../../organisms/cardPhotoAdjustable/cardPhotoAdjustable.js"),require("../../../../organisms/cardPhotoFixed/cardPhotoFixed.js"),require("../../../../organisms/cardPromoVehicle/cardPromoVehicleComponent.js"),require("../../../../organisms/common/styled/cardStandardWrapperStyled.js"),require("../../../../organisms/cardTypeOnly/cardTypeOnly.js"),require("embla-carousel-react"),require("embla-carousel-class-names"),require("embla-carousel-autoplay"),require("../../../../organisms/carousel/styledComponents/styledCarouselHorizontal.js"),require("../../../../organisms/carousel/styledComponents/styledCarouselVertical.js"),require("../../../../utils/enum.js"),require("../../../../organisms/heroImageCard/heroImageCard.js"),require("@googlemaps/react-wrapper"),require("@googlemaps/markerclusterer"),require("../../../../organisms/maps/utils/mapIcons.js"),require("../../../../organisms/maps/mapComponents/mapStyled.js"),require("../../../../organisms/shortcutLink/shortcutLink.js"),require("../../../../organisms/textCta/textCta.js"),require("../../../../organisms/tile/tile.js"),require("lodash/merge"),require("../../../../organisms/carousel2/galleryCarousel/galleryContext.js"),require("../../../../organisms/carousel2/galleryCarousel/galleryItemContext.js"),require("../../../../organisms/carousel2/heroCarousel/heroCarouselContext.js"),require("../../../../organisms/notification/Notification.js"),require("../../../../organisms/notification/NotificationCenter.js"),require("../../../../layout/Header/HeaderContext.js"),require("../../../../layout/Header/HeaderButton.js"),require("../../../../layout/Header/HeaderNavigationHero.js"),require("../../../../layout/Header/HeaderNavigationLink.js"),require("../../../../layout/Header/HeaderNavigationMenu.js"),require("../../../../layout/Header/PredefinedHeaderButtons.js"),require("../../../../layout/Header/HeaderOverheadItem.js"),require("../../../../layout/SideMenu/SideMenuItem.js"),require("@mui/material/Unstable_Grid2"),require("react-keyed-flatten-children"),require("../../../../layout/SecondaryNavigation/SecondaryNavigationCta.js"),require("../../../../layout/SecondaryNavigation/SecondaryNavigationItem.js"),require("../../../../production/Button/Button.js"),require("minimatch");const o={defaultProps:{expandIcon:e.jsx(r.Controller,{controlType:"plus"})},styleOverrides:{}};exports.flowAccordionSummary=o;
|
|
2
2
|
//# sourceMappingURL=accordionSummary.theme.js.map
|