UNPKG

@kubit-ui-web/react-components

Version:

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

630 lines 26.3 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.POPOVER_STYLES = void 0; const cssAnimation_1 = require("../../../../components/cssAnimation/types/cssAnimation"); const variant_1 = require("../../../../components/cssAnimation/types/variant"); const positionVariant_1 = require("../../../../components/popover/types/positionVariant"); const breakpoints_1 = require("../../../../types/breakpoints/breakpoints"); const positions_1 = require("../../../../types/positions/positions"); const zIndex_1 = require("../../foundations/zIndex"); const variants_1 = require("./variants"); exports.POPOVER_STYLES = { [variants_1.PopoverVariantType.DEFAULT]: { zIndex: zIndex_1.Z_INDEX.AUTO, }, [variants_1.PopoverVariantType.TOOLTIP]: { zIndex: zIndex_1.Z_INDEX.OVERLAY, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_FIXED, fullWidth: true, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_FIXED, fullWidth: true, }, }, [variants_1.PopoverVariantType.BADGE]: { zIndex: zIndex_1.Z_INDEX.POPUP, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, align: positions_1.POSITIONS.BOTTOM_CENTER, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, align: positions_1.POSITIONS.BOTTOM_GAP_RIGHT, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_FIXED, fullWidth: true, }, }, [variants_1.PopoverVariantType.MODAL]: { zIndex: zIndex_1.Z_INDEX.MODAL, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { overlay: 'DEFAULT', }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { overlay: 'DEFAULT', align: positions_1.POSITIONS.BOTTOM_FIXED, fullWidth: true, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { overlay: 'DEFAULT', align: positions_1.POSITIONS.BOTTOM_FIXED, fullWidth: true, }, }, [variants_1.PopoverVariantType.MODAL_ABSOLUTE]: { zIndex: 1, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, align: positions_1.POSITIONS.TOP_LEFT, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, fullWidth: true, align: positions_1.POSITIONS.TOP_LEFT, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, fullWidth: true, align: positions_1.POSITIONS.TOP_LEFT, }, }, [variants_1.PopoverVariantType.INPUT_SEARCH]: { zIndex: zIndex_1.Z_INDEX.MODAL, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, align: positions_1.POSITIONS.BOTTOM_CENTER, fullWidth: true, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { overlay: 'DEFAULT', align: positions_1.POSITIONS.BOTTOM_FIXED, positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, fullWidth: true, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.3, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '0%', animationYEndPosition: '0%', animationXEndPosition: '0%', }, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { overlay: 'DEFAULT', align: positions_1.POSITIONS.BOTTOM_FIXED, positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, fullWidth: true, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.3, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '0%', animationYEndPosition: '0%', animationXEndPosition: '0%', }, }, }, [variants_1.PopoverVariantType.INPUT_DROPDOWN_LEVEL_ONE]: { zIndex: zIndex_1.Z_INDEX.MODAL, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, align: positions_1.POSITIONS.BOTTOM_CENTER, fullWidth: true, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { overlay: 'DEFAULT', align: positions_1.POSITIONS.BOTTOM_FIXED, positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, fullWidth: true, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.3, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '0%', animationYEndPosition: '0%', animationXEndPosition: '0%', }, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { overlay: 'DEFAULT', align: positions_1.POSITIONS.BOTTOM_FIXED, positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, fullWidth: true, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.3, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '0%', animationYEndPosition: '0%', animationXEndPosition: '0%', }, }, }, [variants_1.PopoverVariantType.INPUT_DROPDOWN_LEVEL_TWO]: { zIndex: zIndex_1.Z_INDEX.INTERN_2, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, align: positions_1.POSITIONS.BOTTOM_CENTER, fullWidth: true, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, align: positions_1.POSITIONS.BOTTOM_CENTER, fullWidth: true, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, align: positions_1.POSITIONS.BOTTOM_CENTER, fullWidth: true, }, }, [variants_1.PopoverVariantType.SNACKBAR_BOTTOM]: { zIndex: zIndex_1.Z_INDEX.TOAST, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_CENTER_FIXED, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.3, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '-50%', animationYEndPosition: '0%', animationXEndPosition: '-50%', }, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_CENTER_FIXED, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.3, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '-50%', animationYEndPosition: '0%', animationXEndPosition: '-50%', }, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_CENTER_FIXED, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.3, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '-50%', animationYEndPosition: '0%', animationXEndPosition: '-50%', }, }, }, [variants_1.PopoverVariantType.SNACKBAR_TOP]: { zIndex: zIndex_1.Z_INDEX.AUTO, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.TOP_CENTER_FIXED, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.TOP_CENTER_FIXED, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.TOP_CENTER_FIXED, }, }, [variants_1.PopoverVariantType.ACTION_BOTTOM_SHEET]: { zIndex: zIndex_1.Z_INDEX.MODAL, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, align: positions_1.POSITIONS.BOTTOM_LEFT, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { overlay: 'DEFAULT', positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_FIXED, fullWidth: true, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.3, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '0%', animationYEndPosition: '0%', animationXEndPosition: '0%', }, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { overlay: 'DEFAULT', positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_FIXED, fullWidth: true, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.3, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '0%', animationYEndPosition: '0%', animationXEndPosition: '0%', }, }, }, [variants_1.PopoverVariantType.ACTION_BOTTOM_SHEET_NO_ANIMATION]: { zIndex: zIndex_1.Z_INDEX.MODAL, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, align: positions_1.POSITIONS.BOTTOM_LEFT, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { overlay: 'DEFAULT', positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_FIXED, fullWidth: true, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { overlay: 'DEFAULT', positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_FIXED, fullWidth: true, }, }, [variants_1.PopoverVariantType.ACTION_BOTTOM_SHEET_RELATIVE]: { zIndex: zIndex_1.Z_INDEX.INTERN_1, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: 'relative', align: positions_1.POSITIONS.BOTTOM_LEFT, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { overlay: 'DEFAULT', positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_FIXED, fullWidth: true, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.3, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '0%', animationYEndPosition: '0%', animationXEndPosition: '0%', }, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { overlay: 'DEFAULT', positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_FIXED, fullWidth: true, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.3, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '0%', animationYEndPosition: '0%', animationXEndPosition: '0%', }, }, }, [variants_1.PopoverVariantType.DRAWER_LEFT]: { zIndex: zIndex_1.Z_INDEX.INTERN_1, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: 'relative', align: positions_1.POSITIONS.LEFT_FIXED, fullWidth: false, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.5, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '0%', animationXStartPosition: '-100%', animationYEndPosition: '0', animationXEndPosition: '0', }, }, }, [variants_1.PopoverVariantType.DRAWER_RIGHT]: { zIndex: zIndex_1.Z_INDEX.MODAL, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { overlay: 'DEFAULT', positionVariant: 'fixed', align: positions_1.POSITIONS.RIGHT_FIXED, fullWidth: false, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.5, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '0%', animationXStartPosition: '100%', animationYEndPosition: '0', animationXEndPosition: '0', }, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { overlay: 'DEFAULT', positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.RIGHT_FIXED, fullWidth: false, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.5, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '0%', animationXStartPosition: '100%', animationYEndPosition: '0', animationXEndPosition: '0', }, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { overlay: 'DEFAULT', positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.RIGHT_FIXED, fullWidth: true, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.5, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '0%', animationXStartPosition: '100%', animationYEndPosition: '0', animationXEndPosition: '0', }, }, }, [variants_1.PopoverVariantType.DRAWER_BOTTOM]: { zIndex: zIndex_1.Z_INDEX.MODAL, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: 'relative', align: positions_1.POSITIONS.RIGHT_FIXED, fullWidth: false, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.5, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '0%', animationXStartPosition: '100%', animationYEndPosition: '0', animationXEndPosition: '0', }, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { overlay: 'DEFAULT', positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_FIXED, fullWidth: true, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.5, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '0', animationYEndPosition: '0%', animationXEndPosition: '0', }, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { overlay: 'DEFAULT', positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.BOTTOM_FIXED, fullWidth: true, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.5, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '0', animationYEndPosition: '0%', animationXEndPosition: '0', }, }, }, [variants_1.PopoverVariantType.DRAWER_NO_ANIMATION]: { zIndex: zIndex_1.Z_INDEX.MODAL, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: 'relative', align: positions_1.POSITIONS.RIGHT_FIXED, fullWidth: false, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { overlay: 'DEFAULT', positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.RIGHT_FIXED, fullWidth: false, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { overlay: 'DEFAULT', positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, align: positions_1.POSITIONS.RIGHT_FIXED, fullWidth: true, }, }, [variants_1.PopoverVariantType.TOPBAR_TAP]: { zIndex: zIndex_1.Z_INDEX.MODAL, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, align: positions_1.POSITIONS.BOTTOM_LEFT_FIT_CONTENT, fullWidth: false, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, align: positions_1.POSITIONS.BOTTOM_LEFT_FIT_CONTENT, fullWidth: false, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { align: positions_1.POSITIONS.BOTTOM_FIXED, positionVariant: 'static', fullWidth: true, }, }, [variants_1.PopoverVariantType.INPUT_DROPDOWN_DEFAULT]: { zIndex: zIndex_1.Z_INDEX.MODAL, [breakpoints_1.DeviceBreakpointsType.DESKTOP]: { positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, align: positions_1.POSITIONS.BOTTOM_CENTER, fullWidth: true, }, [breakpoints_1.DeviceBreakpointsType.TABLET]: { overlay: 'DEFAULT', align: positions_1.POSITIONS.BOTTOM_FIXED, positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, fullWidth: true, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.3, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '0%', animationYEndPosition: '0%', animationXEndPosition: '0%', }, }, [breakpoints_1.DeviceBreakpointsType.MOBILE]: { overlay: 'DEFAULT', align: positions_1.POSITIONS.BOTTOM_FIXED, positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, fullWidth: true, animation: { type: variant_1.CssAnimationVariants.SLIDE_IN, }, animationOptions: { duration: 0.3, delay: 0, timingFunction: cssAnimation_1.CssAnimationTimingFunction.LINEAR, iterationCount: 1, animationDistanceInPx: 100, animationRotationInDeg: 500, animationYStartPosition: '100%', animationXStartPosition: '0%', animationYEndPosition: '0%', animationXEndPosition: '0%', }, }, }, }; //# sourceMappingURL=styles.js.map