@festo-ui/react 7.0.0-dev.357 → 7.0.0-dev.367
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/index.css +1 -1
- package/lib/components/buttons/button/Button.d.ts +1 -1
- package/lib/components/buttons/button/Button.stories.d.ts +11 -0
- package/lib/components/buttons/button/Button.stories.js +61 -0
- package/lib/components/chips/chip/Chip.js +11 -9
- package/lib/components/chips/chip-container/ChipContainer.d.ts +0 -1
- package/lib/components/modals/imageGallery/ImageGallery.d.ts +2 -0
- package/lib/components/modals/imageGallery/ImageGallery.js +27 -4
- package/lib/components/modals/imageGallery/ImageGalleryPagination.js +1 -1
- package/lib/components/search-input/SearchInput.js +1 -2
- package/lib/forms/radio/RadioGroup.d.ts +3 -4
- package/lib/forms/radio/RadioGroup.js +17 -8
- package/lib/forms/select/Select.js +3 -1
- package/lib/forms/text-area/TextArea.d.ts +1 -1
- package/lib/forms/text-area/TextArea.js +1 -1
- package/node/lib/components/buttons/button/Button.stories.js +67 -0
- package/node/lib/components/chips/chip/Chip.js +11 -9
- package/node/lib/components/modals/imageGallery/ImageGallery.js +27 -4
- package/node/lib/components/modals/imageGallery/ImageGalleryPagination.js +1 -1
- package/node/lib/components/search-input/SearchInput.js +1 -2
- package/node/lib/forms/radio/RadioGroup.js +16 -7
- package/node/lib/forms/select/Select.js +3 -1
- package/node/lib/forms/text-area/TextArea.js +1 -1
- package/package.json +1 -1
package/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.fr-accordion,.fr-accordion-header{border-bottom:1px solid var(--fwe-gray-100)}.fr-accordion-header{align-items:center;color:var(--fwe-text);display:flex;font-size:var(--fwe-font-size-md);font-weight:var(--fwe-font-weight-bold);height:48px;padding:0 16px 0 24px}.fr-accordion-item-body{height:0;overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1)}.fr-accordion-item-body>:first-child:not(.fr-accordion-item-body-spacer-bottom):not(.fr-accordion){margin-top:0!important;padding-top:0!important}.fr-accordion-item-body>:not(.fr-accordion){margin-right:0}.fr-accordion-item-body-content{margin-right:64px}.fr-accordion-item-body-spacer-bottom{height:0;margin-top:24px;width:0}.fr-accordion-item-body .fr-accordion{margin-bottom:24px;margin-top:64px}.fr-accordion-item-body .fr-accordion-item-link{display:block;top:8px}.fr-accordion-item-body .fr-accordion-item-header{padding-right:32px;padding-top:32px}.fr-accordion-item-body .fr-accordion-item:after{color:var(--fwe-caerul);content:"";font-family:var(--fwe-font-family-icons-16);font-size:var(--fwe-font-size-base);height:16px;line-height:16px;right:4px;top:12px}.fr-accordion-item-body .fr-accordion-item--expanded:before{background-color:transparent}@media(min-width:600px){.fr-accordion-item-body>:not(.fng-accordion){margin-right:64px}.fr-accordion-item-body .fr-accordion-item-header{padding-right:168px;padding-top:24px}.fr-accordion-item-body .fr-accordion-item-link{font-size:var(--fwe-font-size-base);max-width:128px;overflow:hidden;text-overflow:ellipsis;top:24px;white-space:nowrap}.fr-accordion-item-body .fr-accordion-item:after{top:30px}}.fr-accordion-item-header{align-items:center;cursor:pointer;display:flex;min-height:48px;padding:24px 64px 24px 0}.fr-accordion-item{border-bottom:1px solid var(--fwe-gray-100);border-top:1px solid var(--fwe-gray-100);padding:0 16px 0 24px;position:relative}.fr-accordion-item-link{color:var(--fwe-caerul);display:none;font-size:var(--fwe-font-size-md);pointer-events:none;position:absolute;right:24px;top:24px}.fr-accordion-item.fr-accordion-item--highlighted:before{background-color:var(--fwe-caerul);content:"";display:block;height:0;left:0;position:absolute;top:0;width:4px}.fr-accordion-item:after{content:"";display:block;font-family:var(--fwe-font-family-icons-32);font-size:var(--fwe-font-size-xxl);height:32px;line-height:32px;pointer-events:none;position:absolute;right:16px;top:21px;transition:transform .2s ease}.fr-accordion-item--expanded .fr-accordion-item-header{font-weight:var(--fwe-font-weight-bold)}.fr-accordion-item--expanded .fr-accordion-item-body{height:auto}.fr-accordion-item--expanded:after{transform:rotate(-180deg)}.fr-accordion-item--expanded.fr-accordion-item--highlighted:before{height:100%}.fr-accordion-item--collapsed .fr-accordion-item-body{height:0}.fr-accordion-item--collapsed .fr-accordion-item-header{font-weight:var(--fwe-font-weight-normal)}.fwe-chip-container .fr-chip .fwe-icon-menu-close{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#333;font-size:var(--fwe-font-size-base);line-height:var(--fwe-font-size-base);margin-left:0;padding-right:0;position:absolute;right:5px;top:3px}.fwe-chip-container .fr-chip .fwe-icon-menu-close:before{font-family:var(--fwe-font-family-icons-32)}.fwe-chip-container .fr-chip.fwe-chip.fwe-selected.fwe-category:after{content:none}.fr-modal{opacity:0}.fr-modal-enter-done{opacity:1;transition:opacity .1s ease-out .3s}.fr-modal-backdrop{opacity:0}.fr-modal-backdrop-enter-done{opacity:1;transition:opacity .3s ease-out}.fr-modal-backdrop-exit,.fr-modal-exit{opacity:1}.fr-modal-backdrop-exit-active,.fr-modal-exit-active{opacity:0;transition:opacity .6s}.fr-modal-overlay-wrapper{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--fwe-z-index-modal)}@font-face{font-family:swiper-icons;font-style:normal;font-weight:400;src:url("data:application/font-woff;charset=utf-8;base64, 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") format("woff")}:root{--swiper-theme-color:#007aff}.swiper,swiper-container{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:content-box;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide,swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(270deg,rgba(0,0,0,.5),transparent)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(90deg,rgba(0,0,0,.5),transparent)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(0deg,rgba(0,0,0,.5),transparent)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent)}.swiper-css-mode>.swiper-wrapper{-ms-overflow-style:none;overflow:auto;scrollbar-width:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid transparent;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;margin-top:calc(0px - var(--swiper-navigation-size)/2);position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/44*27);z-index:10}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);font-variant:normal;letter-spacing:0;line-height:1;text-transform:none!important}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:"prev"}.swiper-button-next,.swiper-rtl .swiper-button-prev{left:auto;right:var(--swiper-navigation-sides-offset,10px)}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:"next"}.swiper-button-lock{display:none}.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.fwe-page-dot:focus{background:var(--fwe-control-border-hover);outline:0}.fwe-popover-menu #tooltip{background:#fff;box-shadow:0 1px 4px rgba(51,51,51,.2)}.fwe-popover-menu #tooltip,.fwe-popover-menu .fwe-popover{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{display:inline-flex;height:32px;justify-content:unset;margin-left:inherit;max-height:32px;padding:0 8px 0 0;text-align:left;width:100%}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{align-items:center;display:inline-flex;flex-wrap:nowrap;height:24px;justify-content:center;width:32px}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=" fwe-icon-"]{margin-left:inherit}.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{background-color:rgba(51,51,51,.102);color:var(--fwe-black)}.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:rgba(51,51,51,.2)}#arrow,#arrow:after{height:12px;position:absolute;transform:rotate(45deg);width:12px}#arrow{height:17px;overflow:hidden;width:17px}#arrow:after{background:#fff;box-shadow:0 1px 4px rgba(51,51,51,.2);content:"";z-index:-1}.fwe-popover-container[data-popper-placement^=top]>#arrow{top:100%}.fwe-popover-container[data-popper-placement^=top]>#arrow:after{left:3px;top:-6px}.fwe-popover-container[data-popper-placement^=bottom]>#arrow{top:-17px}.fwe-popover-container[data-popper-placement^=bottom]>#arrow:after{left:3px;top:11px}.fwe-popover-container[data-popper-placement^=left]>#arrow{left:100%}.fwe-popover-container[data-popper-placement^=left]>#arrow:after{left:-6px;top:2px}.fwe-popover-container[data-popper-placement^=right]>#arrow{left:-17px}.fwe-popover-container[data-popper-placement^=right]>#arrow:after{left:11px;top:2px}.fr-tooltip-container{width:-moz-fit-content;width:fit-content}.fwe-w-100{width:100%}.fwe-search-suggestion{height:40px}.fr-snackbar-wrapper{margin-bottom:24px;opacity:1;opacity:0}.fr-snackbar-wrapper-enter-done{opacity:1;transition:opacity .6s ease-out}.fr-snackbar-wrapper-exit{height:48px;opacity:1}.fr-snackbar-wrapper-exit-active{height:0;margin-bottom:0;opacity:0;transition:height .3s ease-out .3s,opacity .3s ease-out,margin-bottom .3s ease-out .3s}.fr-snackbar-wrapper--first{margin-bottom:24px;opacity:1;transform:translateY(100px)}.fr-snackbar-wrapper--first-enter-done{opacity:1;transition:opacity .6s ease-out}.fr-snackbar-wrapper--first-exit{height:48px;opacity:1}.fr-snackbar-wrapper--first-exit-active{height:0;margin-bottom:0;opacity:0;transition:height .3s ease-out .3s,opacity .3s ease-out,margin-bottom .3s ease-out .3s}.fr-snackbar-wrapper--first-enter-done{transform:translateY(0);transition:transform .6s ease-out}.fr-snackbar-wrapper--first-exit-active{transform:translateY(0)}.overflow-hidden{overflow:hidden}@keyframes stepperAnimation{0%{transform:translateX(100%)}to{transform:translateX(0)}}.fr-moving-container{animation-duration:.3s;animation-name:stepperAnimation;animation-timing-function:ease}.hidden{display:none}.fwe-stepper-vertical .fwe-step-container.fwe-step-active .fwe-step-content-container{height:20px}.fr-show{display:block}.fr-hide{display:none}.fwe-legacy-tabs{height:100%;margin:48px 0;width:100%}.fwe-legacy-tab-bar{display:flex;flex-wrap:nowrap;font-size:var(--fwe-font-size-base);list-style:none;margin-bottom:0;margin-top:0;padding-left:0;width:75%}.fwe-legacy-tab-bar.fwe-legacy-tab-bar-full-width{width:100%}.fwe-legacy-tab-bar.fwe-legacy-tab-items-fill .fwe-legacy-tab-item{flex:1 1 auto}.fwe-legacy-tab-bar.fwe-legacy-tab-items-equal-width .fwe-legacy-tab-item{flex:1 1 0}.fwe-legacy-tab-item{background-color:var(--fwe-gray-300);border-right:2px solid var(--fwe-gray-100);height:48px;max-height:48px;text-align:center}.fwe-legacy-tab-item:last-child{border-right:none}.fwe-legacy-tab-item.fwe-active{background-color:var(--fwe-white)}.fwe-legacy-tab-item.fwe-active .fwe-legacy-tab-link{color:var(--fwe-caerul)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-gray-100)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link{padding:11px 16px}.fwe-legacy-tab-link{color:var(--fwe-black);cursor:pointer;display:inline-block;height:48px;line-height:24px;padding:11px 16px 13px;white-space:nowrap;width:100%}.fwe-legacy-tab-link i.fwe-icon{padding-right:8px;vertical-align:initial}.fwe-legacy-tab-link i.fwe-icon.fwe-icon-lg{position:relative;top:3px}.fwe-legacy-tab-link:hover{color:var(--fwe-caerul)}.fwe-legacy-tab-link:active{background-color:var(--fwe-white);color:var(--fwe-caerul)}.fwe-legacy-tab-panel-content{background-color:var(--fwe-white);height:100%;overflow:auto;padding:48px 24px}@media(max-width:375px){.fwe-legacy-tab-bar{background-color:var(--fwe-white);justify-content:space-between;width:100%}.fwe-legacy-tab-item{background-color:var(--fwe-white);border-right:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link,.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link i.fwe-icon{color:var(--fwe-hero-gray)}.fwe-legacy-tab-link.fwe-can-swap-icon{direction:rtl}.fwe-legacy-tab-link.fwe-can-swap-icon i.fwe-icon{padding-left:8px;padding-right:0}}.fr-tab-panel-content{background-color:var(--fwe-white);height:100%;overflow:auto;padding:48px 24px}.fr-tab-bar{width:100%}.fr-tab-scroller{overflow-y:hidden}.fr-tab-scroller-scroll-area{display:flex;overflow-x:hidden;position:relative}.fr-tab-scroller-scroll-area::-webkit-scrollbar{display:none}.fr-tab-scroller-scroll-area--scroll{overflow-x:scroll}.fr-tab-scroller-scroll-content{display:flex;flex:1 0 auto;padding:0 17px 0 16px;position:relative;transform:none;will-change:transform}.fr-tab-scroller-scroll-content--with-divider .fr-tab-scroller-divider-line{display:block}.fr-tab-scroller--animating .fr-tab-scroller-scroll-content{transition:transform .25s cubic-bezier(.4,0,.2,1)}.fr-tab-scroller-divider-line{border-bottom:1px solid var(--fwe-control);bottom:0;display:none;left:0;position:absolute;right:0;top:0}.fr-tab-indicator{display:flex;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.fr-tab-indicator-content{opacity:0;transform-origin:left}.fr-tab-indicator-content--underline{align-self:flex-end;border-top-style:solid;box-sizing:border-box;width:100%}.fr-tab-indicator .fr-tab-indicator-content{transition:transform .25s cubic-bezier(.4,0,.2,1)}.fr-tab-indicator .fr-tab-indicator-content--underline{border-top:4px solid var(--fwe-caerul)}.fr-tab-indicator--active .fr-tab-indicator-content{opacity:1}.fr-tab{-webkit-appearance:none;background:none;border:none;cursor:pointer;display:flex;flex:1 0 auto;height:36px;justify-content:center;margin:0;outline:none;padding:0;position:relative;text-align:center;white-space:nowrap;z-index:1}.fr-tab:not(:last-child){margin-right:32px}.fr-tab::-moz-focus-inner{border:0;padding:0}.fr-tab .fr-tab-text-label{color:var(--fwe-text)}.fr-tab--active .fr-tab-text-label{color:var(--fwe-caerul)}.fr-tab-content{align-items:flex-start;display:flex;height:inherit;justify-content:center;pointer-events:none;position:relative}.fr-tab-text-label{display:inline-block;z-index:2}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab{flex:none}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab:not(:last-child){margin-right:64px}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-scroll-content{padding:0 32px}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-divider-line{padding-right:64px}.fwe-checkbox-container{align-items:center;cursor:pointer;display:flex;flex-direction:row;font-family:var(--fwe-font-family-sans-serif);-webkit-user-select:none;-moz-user-select:none;user-select:none}.fwe-checkbox-container.fwe-label-below{flex-direction:column}.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title{margin:8px 0 0}.fwe-checkbox-container.fwe-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title{margin:0 8px 0 0}.fwe-checkbox-container .fwe-checkbox-indicator-container{position:relative}.fwe-checkbox-container input{cursor:pointer;height:0;opacity:0;width:0}.fwe-checkbox-container .fwe-checkbox-title{color:var(--fwe-text);line-height:24px;margin-left:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fwe-checkbox-container .fwe-checkbox-indicator-background{background:var(--fwe-white);border:1px solid var(--fwe-text-light);border-radius:2px;box-sizing:border-box;height:16px;transition:border-width .2s ease-out;width:16px}.fwe-checkbox-container .fwe-indeterminate-indicator{background:#fff;height:2px;left:3px;position:absolute;top:7px;width:10px}.fwe-checkbox-container svg{display:block;left:0;position:absolute;top:0}.fwe-checkbox-container.fr-checkbox-large .fwe-checkbox-indicator-background{border-radius:4px;height:24px;width:24px}.fwe-checkbox-container.fr-checkbox-large .fwe-indeterminate-indicator{left:5px;top:11px;width:14px}.fwe-checkbox-container.fr-checkbox-large.fr-checkbox-indeterminate .fwe-checkbox-indicator-background,.fwe-checkbox-container.fr-checkbox-large.fwe-checked .fwe-checkbox-indicator-background{border:12px solid var(--fwe-hero)}.fwe-checkbox-container:hover .fwe-checkbox-indicator-background{background-color:var(--fwe-control)}.fwe-checkbox-container:active .fwe-checkbox-indicator-background{background-color:var(--fwe-control-hover)}.fwe-checkbox-container.fr-checkbox-indeterminate .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background{border:8px solid var(--fwe-hero)}.fwe-checkbox-container.fr-checkbox-indeterminate:hover .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-hover)}.fwe-checkbox-container.fr-checkbox-indeterminate:active .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-active)}.fwe-checkbox-container.fr-checkbox-invalid .fwe-checkbox-indicator-background{background:var(--fwe-white);border:1px solid var(--fwe-red)}.fwe-checkbox-container.fwe-disabled{cursor:default}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fr-checkbox-indeterminate .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background{background-color:var(--fwe-control);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fr-checkbox-invalid .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title{color:var(--fwe-text-disabled)}.fwe-color-indicator .fwe-popover-container{position:relative}.fwe-color-indicator .fwe-popover-container .fwe-popover{background-color:var(--fwe-white);border-radius:4px;box-shadow:0 1px 4px rgba(51,51,51,.2);font-size:var(--fwe-font-size-md);line-height:1rem;padding:8px 16px 16px}.fwe-color-indicator .fwe-backdrop{background:transparent}.fwe-color-indicator .fwe-color-label{font-size:var(--fwe-font-size-small);font-weight:var(--fwe-font-weight-bold);height:18px;margin-bottom:4px}.fwe-color-indicator .fwe-color-container{display:flex}.fwe-color-indicator .fwe-color-container .fwe-color-box{background:var(--fwe-white);border:1px solid var(--fwe-control-border);border-radius:4px;height:24px;width:24px}.fwe-color-indicator .fwe-color-container .fwe-color-box .fwe-no-color-pattern{margin:2px}.fwe-color-indicator .fwe-color-container .fwe-color-indicator-text{margin-left:8px}.fwe-color-indicator.disabled{pointer-events:none}.fwe-color-indicator.disabled .fwe-color-label{color:var(--fwe-text-disabled)}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-box{opacity:.5}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-indicator-text{color:var(--fwe-text-disabled)}.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-top{height:17px;overflow:hidden;position:absolute;width:17px}.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-top:after{background:var(--fwe-white);box-shadow:0 1px 4px rgba(51,51,51,.2);content:"";height:12px;position:absolute;transform:rotate(45deg);width:12px}.fwe-popover,.fwe-popover.fwe-popover-menu{background-color:var(--fwe-white);border-radius:4px;box-shadow:0 1px 4px rgba(51,51,51,.2)}.fwe-popover{font-size:var(--fwe-font-size-md);line-height:1rem;padding:8px}.fwe-popover-container{display:inline-block;position:relative}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-top:after{left:3px;top:11px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-bottom:after{left:3px;top:-6px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{left:11px;top:2px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{left:-6px;top:2px}.fwe-popover.fwe-popover-menu{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{display:inline-flex;height:32px;justify-content:unset;margin-left:inherit;max-height:32px;padding:0 8px 0 0;text-align:left;width:100%}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{align-items:center;display:inline-flex;flex-wrap:nowrap;height:24px;justify-content:center;width:32px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=" fwe-icon-"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{background-color:rgba(51,51,51,.102);color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:rgba(51,51,51,.2)}.fwe-popover .fwe-popover-legend{display:table;line-height:24px;margin:16px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content{display:table-row}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fwe-color-picker{width:216px}.fwe-color-picker.fwe-alpha-active{width:245px}.fwe-color-picker .fwe-gradient-picker{height:198px;margin:-7px;position:relative;width:198px}.fwe-color-picker .fwe-gradient-picker .fwe-brightness-gradient{background-image:linear-gradient(transparent,#000);bottom:7px;left:7px;position:absolute;right:7px;top:7px}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{bottom:7px;left:7px;position:absolute;right:7px;top:7px}.fwe-color-picker .fwe-alpha-picker,.fwe-color-picker .fwe-hue-picker,.fwe-color-picker .fwe-vertical-picker{height:198px;margin:-7px -3px -7px 18px;position:relative;width:14px}.fwe-color-picker .fwe-alpha-picker .fwe-picker-background,.fwe-color-picker .fwe-hue-picker .fwe-picker-background,.fwe-color-picker .fwe-vertical-picker .fwe-picker-background{border-radius:4px;height:184px;margin:7px 3px;width:8px}.fwe-color-picker .fwe-alpha-picker .fwe-knob,.fwe-color-picker .fwe-hue-picker .fwe-knob,.fwe-color-picker .fwe-vertical-picker .fwe-knob{left:-3px}.fwe-color-picker .fwe-hue-picker .fwe-picker-background{background-image:linear-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.fwe-color-picker .fwe-alpha-picker .fwe-no-color-pattern{margin:7px 3px;position:absolute}.fwe-color-picker .fwe-alpha-picker .fwe-picker-background{position:absolute}.fwe-color-picker .fwe-type-select{display:flex;position:relative}.fwe-color-picker .fwe-type-select .fwe-type-indicator{cursor:pointer;display:flex;flex-shrink:1}.fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type{font-size:var(--fwe-font-size-small);font-weight:var(--fwe-font-weight-bold);line-height:calc(var(--fwe-font-size-small) + 5px)}.fwe-color-picker .fwe-type-select .fwe-type-indicator:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-icon-arrows-collapse{line-height:16px;margin-left:16px}.fwe-color-picker .fwe-type-select .fwe-popover{left:0;position:absolute;top:24px;z-index:1}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item{cursor:pointer;display:flex;padding:8px}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item .fwe-icon-menu-check{margin-right:8px;opacity:0}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected{cursor:default}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected .fwe-icon-menu-check{opacity:1}.fwe-color-picker input::-webkit-inner-spin-button,.fwe-color-picker input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fwe-color-picker input[type=number]{-moz-appearance:textfield}.fwe-color-picker input{padding-right:0!important;text-align:center}.fwe-color-picker .fwe-hex-input{margin-right:16px;width:75px}.fwe-color-picker .fwe-green-input,.fwe-color-picker .fwe-red-input{margin-right:8px;width:32px}.fwe-color-picker .fwe-blue-input{width:32px}.fwe-color-picker .fwe-alpha-input span input{padding-right:16px!important;width:48px}.fwe-color-picker .fwe-alpha-input .fwe-percent-char{margin-left:-16px}.fwe-color-picker .fwe-color-grid{display:flex;flex-wrap:wrap;margin-bottom:-8px;margin-right:-8px}.fwe-color-picker .fwe-color-grid .fwe-color-item{align-items:center;border-radius:4px;color:#fff;display:flex;height:24px;justify-content:center;margin-bottom:8px;margin-right:8px;width:24px}.fwe-color-picker .fwe-color-grid .fwe-color-item.fwe-white-item{border:1px solid var(--fwe-control-border);color:#000}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button{align-items:center;border:1px solid var(--fwe-control-border);border-radius:4px;color:var(--fwe-control);display:flex;height:24px;justify-content:center;margin-bottom:8px;margin-right:8px;width:24px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button .fwe-no-color-pattern{margin:2px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button i{color:transparent;position:absolute}.fwe-color-picker .fwe-knob{border:2px solid #fff;border-radius:50%;box-shadow:0 0 4px 0 rgba(0,0,0,.15);height:14px;position:absolute;width:14px;z-index:1}.flatpickr-calendar{margin-top:6px}.flatpickr-calendar:not(.open){display:none}.fwe-border-hero{border-color:var(--fwe-hero)!important}.fr-date-range-picker:hover input{color:var(--fwe-hero)}.fr-date-range-picker-inputs{display:flex;order:2}.fwe-select-wrapper{min-width:48px;width:100%}.fwe-select-wrapper .fr-select-input{bottom:0;box-sizing:border-box;left:0;opacity:0;pointer-events:none;position:absolute;width:100%}.fwe-select-wrapper.fwe-disabled:before{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select{cursor:pointer}.fwe-select-wrapper .fwe-select .fwe-select-content{line-height:1.5rem;overflow:hidden;padding-right:24px;text-overflow:ellipsis;white-space:nowrap}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled)~.fwe-select-label:after{content:"*";display:inline-block;left:3px;position:relative}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled):not(.fwe-invalid)~.fwe-select-valid{display:block}.fwe-select-wrapper .fwe-select:focus:not(:disabled){border-color:var(--fwe-hero);color:var(--fwe-hero)}.fwe-select-wrapper .fwe-select:focus:not(:disabled) option{color:var(--fwe-text)}.fwe-select-wrapper .fwe-select:focus:invalid{border-color:var(--fwe-red)}.fwe-select-wrapper .fwe-select.fwe-disabled{border-color:var(--fwe-control-disabled)!important;cursor:default}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content,.fwe-select-wrapper .fwe-select.fwe-disabled~.fwe-select-label{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:focus,.fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:hover{border-color:var(--fwe-red)}.fwe-select-wrapper .fwe-select.fwe-invalid~.fwe-select-invalid{display:block}.fwe-select-wrapper .fwe-select.fwe-invalid~.fwe-select-description{display:none}.fr-select-scroll{overflow-y:scroll}.fwe-select-options-container{background-color:var(--fwe-white);border:1px solid var(--fwe-gray-200);border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.161);font-size:var(--fwe-font-size-base);list-style:none;margin:0;max-width:100vw;padding:8px;z-index:var(--fwe-z-index-popover)}.fwe-select-options-container .fwe-select-option{cursor:pointer;line-height:24px;min-height:24px;padding:12px 8px;position:relative}.fwe-select-options-container .fwe-select-option:focus,.fwe-select-options-container .fwe-select-option:hover{background-color:var(--fwe-gray-100);outline:none}.fwe-select-options-container .fwe-select-option:last-child{border-bottom:none}.fwe-select-options-container .fwe-select-option .fwe-select-option-content{display:block;line-height:24px;min-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fr-backdrop{inset:0;position:fixed;z-index:var(--fwe-z-index-modal)}label.fwe-slider{display:block;position:relative}label.fwe-slider .fr-slider-indicator{background:var(--fwe-hero);bottom:22px;height:2px;left:0;position:absolute}label.fwe-slider .fr-slider-indicator.disabled{background:var(--fwe-border)}label.fwe-slider.fr-slider-value{height:56px}label.fwe-slider.fr-slider-value .fr-slider-indicator{bottom:38px}label.fwe-slider.fr-slider-label{height:67px}label.fwe-slider.fr-slider-label .fr-slider-indicator{bottom:22px}label.fwe-slider.fr-slider-value-label{height:83px}label.fwe-slider.fr-slider-value-label .fr-slider-indicator{bottom:38px}label.fwe-slider .fr-slider-value{bottom:0;color:var(--fwe-text);font-size:var(--fwe-font-size-base);margin-bottom:0;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}label.fwe-input-text .fr-textarea{overflow:visible}
|
|
1
|
+
.fr-accordion,.fr-accordion-header{border-bottom:1px solid var(--fwe-gray-100)}.fr-accordion-header{align-items:center;color:var(--fwe-text);display:flex;font-size:var(--fwe-font-size-md);font-weight:var(--fwe-font-weight-bold);height:48px;padding:0 16px 0 24px}.fr-accordion-item-body{height:0;overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1)}.fr-accordion-item-body>:first-child:not(.fr-accordion-item-body-spacer-bottom):not(.fr-accordion){margin-top:0!important;padding-top:0!important}.fr-accordion-item-body>:not(.fr-accordion){margin-right:0}.fr-accordion-item-body-content{margin-right:64px}.fr-accordion-item-body-spacer-bottom{height:0;margin-top:24px;width:0}.fr-accordion-item-body .fr-accordion{margin-bottom:24px;margin-top:64px}.fr-accordion-item-body .fr-accordion-item-link{display:block;top:8px}.fr-accordion-item-body .fr-accordion-item-header{padding-right:32px;padding-top:32px}.fr-accordion-item-body .fr-accordion-item:after{color:var(--fwe-caerul);content:"";font-family:var(--fwe-font-family-icons-16);font-size:var(--fwe-font-size-base);height:16px;line-height:16px;right:4px;top:12px}.fr-accordion-item-body .fr-accordion-item--expanded:before{background-color:transparent}@media(min-width:600px){.fr-accordion-item-body>:not(.fng-accordion){margin-right:64px}.fr-accordion-item-body .fr-accordion-item-header{padding-right:168px;padding-top:24px}.fr-accordion-item-body .fr-accordion-item-link{font-size:var(--fwe-font-size-base);max-width:128px;overflow:hidden;text-overflow:ellipsis;top:24px;white-space:nowrap}.fr-accordion-item-body .fr-accordion-item:after{top:30px}}.fr-accordion-item-header{align-items:center;cursor:pointer;display:flex;min-height:48px;padding:24px 64px 24px 0}.fr-accordion-item{border-bottom:1px solid var(--fwe-gray-100);border-top:1px solid var(--fwe-gray-100);padding:0 16px 0 24px;position:relative}.fr-accordion-item-link{color:var(--fwe-caerul);display:none;font-size:var(--fwe-font-size-md);pointer-events:none;position:absolute;right:24px;top:24px}.fr-accordion-item.fr-accordion-item--highlighted:before{background-color:var(--fwe-caerul);content:"";display:block;height:0;left:0;position:absolute;top:0;width:4px}.fr-accordion-item:after{content:"";display:block;font-family:var(--fwe-font-family-icons-32);font-size:var(--fwe-font-size-xxl);height:32px;line-height:32px;pointer-events:none;position:absolute;right:16px;top:21px;transition:transform .2s ease}.fr-accordion-item--expanded .fr-accordion-item-header{font-weight:var(--fwe-font-weight-bold)}.fr-accordion-item--expanded .fr-accordion-item-body{height:auto}.fr-accordion-item--expanded:after{transform:rotate(-180deg)}.fr-accordion-item--expanded.fr-accordion-item--highlighted:before{height:100%}.fr-accordion-item--collapsed .fr-accordion-item-body{height:0}.fr-accordion-item--collapsed .fr-accordion-item-header{font-weight:var(--fwe-font-weight-normal)}.fr-modal{opacity:0}.fr-modal-enter-done{opacity:1;transition:opacity .1s ease-out .3s}.fr-modal-backdrop{opacity:0}.fr-modal-backdrop-enter-done{opacity:1;transition:opacity .3s ease-out}.fr-modal-backdrop-exit,.fr-modal-exit{opacity:1}.fr-modal-backdrop-exit-active,.fr-modal-exit-active{opacity:0;transition:opacity .6s}.fr-modal-overlay-wrapper{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--fwe-z-index-modal)}@font-face{font-family:swiper-icons;font-style:normal;font-weight:400;src:url("data:application/font-woff;charset=utf-8;base64, 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") format("woff")}:root{--swiper-theme-color:#007aff}.swiper,swiper-container{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:content-box;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide,swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(270deg,rgba(0,0,0,.5),transparent)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(90deg,rgba(0,0,0,.5),transparent)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(0deg,rgba(0,0,0,.5),transparent)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent)}.swiper-css-mode>.swiper-wrapper{-ms-overflow-style:none;overflow:auto;scrollbar-width:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid transparent;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;margin-top:calc(0px - var(--swiper-navigation-size)/2);position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/44*27);z-index:10}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);font-variant:normal;letter-spacing:0;line-height:1;text-transform:none!important}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:"prev"}.swiper-button-next,.swiper-rtl .swiper-button-prev{left:auto;right:var(--swiper-navigation-sides-offset,10px)}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:"next"}.swiper-button-lock{display:none}.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.fwe-page-dot:focus{background:var(--fwe-control-border-hover);outline:0}.fwe-popover-menu #tooltip{background:#fff;box-shadow:0 1px 4px rgba(51,51,51,.2)}.fwe-popover-menu #tooltip,.fwe-popover-menu .fwe-popover{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{display:inline-flex;height:32px;justify-content:unset;margin-left:inherit;max-height:32px;padding:0 8px 0 0;text-align:left;width:100%}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{align-items:center;display:inline-flex;flex-wrap:nowrap;height:24px;justify-content:center;width:32px}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=" fwe-icon-"]{margin-left:inherit}.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{background-color:rgba(51,51,51,.102);color:var(--fwe-black)}.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:rgba(51,51,51,.2)}#arrow,#arrow:after{height:12px;position:absolute;transform:rotate(45deg);width:12px}#arrow{height:17px;overflow:hidden;width:17px}#arrow:after{background:#fff;box-shadow:0 1px 4px rgba(51,51,51,.2);content:"";z-index:-1}.fwe-popover-container[data-popper-placement^=top]>#arrow{top:100%}.fwe-popover-container[data-popper-placement^=top]>#arrow:after{left:3px;top:-6px}.fwe-popover-container[data-popper-placement^=bottom]>#arrow{top:-17px}.fwe-popover-container[data-popper-placement^=bottom]>#arrow:after{left:3px;top:11px}.fwe-popover-container[data-popper-placement^=left]>#arrow{left:100%}.fwe-popover-container[data-popper-placement^=left]>#arrow:after{left:-6px;top:2px}.fwe-popover-container[data-popper-placement^=right]>#arrow{left:-17px}.fwe-popover-container[data-popper-placement^=right]>#arrow:after{left:11px;top:2px}.fr-tooltip-container{width:-moz-fit-content;width:fit-content}.fwe-search-suggestion{height:40px}.fr-snackbar-wrapper{margin-bottom:24px;opacity:1;opacity:0}.fr-snackbar-wrapper-enter-done{opacity:1;transition:opacity .6s ease-out}.fr-snackbar-wrapper-exit{height:48px;opacity:1}.fr-snackbar-wrapper-exit-active{height:0;margin-bottom:0;opacity:0;transition:height .3s ease-out .3s,opacity .3s ease-out,margin-bottom .3s ease-out .3s}.fr-snackbar-wrapper--first{margin-bottom:24px;opacity:1;transform:translateY(100px)}.fr-snackbar-wrapper--first-enter-done{opacity:1;transition:opacity .6s ease-out}.fr-snackbar-wrapper--first-exit{height:48px;opacity:1}.fr-snackbar-wrapper--first-exit-active{height:0;margin-bottom:0;opacity:0;transition:height .3s ease-out .3s,opacity .3s ease-out,margin-bottom .3s ease-out .3s}.fr-snackbar-wrapper--first-enter-done{transform:translateY(0);transition:transform .6s ease-out}.fr-snackbar-wrapper--first-exit-active{transform:translateY(0)}.overflow-hidden{overflow:hidden}@keyframes stepperAnimation{0%{transform:translateX(100%)}to{transform:translateX(0)}}.fr-moving-container{animation-duration:.3s;animation-name:stepperAnimation;animation-timing-function:ease}.hidden{display:none}.fwe-stepper-vertical .fwe-step-container.fwe-step-active .fwe-step-content-container{height:20px}.fr-show{display:block}.fr-hide{display:none}.fwe-legacy-tabs{height:100%;margin:48px 0;width:100%}.fwe-legacy-tab-bar{display:flex;flex-wrap:nowrap;font-size:var(--fwe-font-size-base);list-style:none;margin-bottom:0;margin-top:0;padding-left:0;width:75%}.fwe-legacy-tab-bar.fwe-legacy-tab-bar-full-width{width:100%}.fwe-legacy-tab-bar.fwe-legacy-tab-items-fill .fwe-legacy-tab-item{flex:1 1 auto}.fwe-legacy-tab-bar.fwe-legacy-tab-items-equal-width .fwe-legacy-tab-item{flex:1 1 0}.fwe-legacy-tab-item{background-color:var(--fwe-gray-300);border-right:2px solid var(--fwe-gray-100);height:48px;max-height:48px;text-align:center}.fwe-legacy-tab-item:last-child{border-right:none}.fwe-legacy-tab-item.fwe-active{background-color:var(--fwe-white)}.fwe-legacy-tab-item.fwe-active .fwe-legacy-tab-link{color:var(--fwe-caerul)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-gray-100)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link{padding:11px 16px}.fwe-legacy-tab-link{color:var(--fwe-black);cursor:pointer;display:inline-block;height:48px;line-height:24px;padding:11px 16px 13px;white-space:nowrap;width:100%}.fwe-legacy-tab-link i.fwe-icon{padding-right:8px;vertical-align:initial}.fwe-legacy-tab-link i.fwe-icon.fwe-icon-lg{position:relative;top:3px}.fwe-legacy-tab-link:hover{color:var(--fwe-caerul)}.fwe-legacy-tab-link:active{background-color:var(--fwe-white);color:var(--fwe-caerul)}.fwe-legacy-tab-panel-content{background-color:var(--fwe-white);height:100%;overflow:auto;padding:48px 24px}@media(max-width:375px){.fwe-legacy-tab-bar{background-color:var(--fwe-white);justify-content:space-between;width:100%}.fwe-legacy-tab-item{background-color:var(--fwe-white);border-right:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link,.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link i.fwe-icon{color:var(--fwe-hero-gray)}.fwe-legacy-tab-link.fwe-can-swap-icon{direction:rtl}.fwe-legacy-tab-link.fwe-can-swap-icon i.fwe-icon{padding-left:8px;padding-right:0}}.fr-tab-panel-content{background-color:var(--fwe-white);height:100%;overflow:auto;padding:48px 24px}.fr-tab-bar{width:100%}.fr-tab-scroller{overflow-y:hidden}.fr-tab-scroller-scroll-area{display:flex;overflow-x:hidden;position:relative}.fr-tab-scroller-scroll-area::-webkit-scrollbar{display:none}.fr-tab-scroller-scroll-area--scroll{overflow-x:scroll}.fr-tab-scroller-scroll-content{display:flex;flex:1 0 auto;padding:0 17px 0 16px;position:relative;transform:none;will-change:transform}.fr-tab-scroller-scroll-content--with-divider .fr-tab-scroller-divider-line{display:block}.fr-tab-scroller--animating .fr-tab-scroller-scroll-content{transition:transform .25s cubic-bezier(.4,0,.2,1)}.fr-tab-scroller-divider-line{border-bottom:1px solid var(--fwe-control);bottom:0;display:none;left:0;position:absolute;right:0;top:0}.fr-tab-indicator{display:flex;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.fr-tab-indicator-content{opacity:0;transform-origin:left}.fr-tab-indicator-content--underline{align-self:flex-end;border-top-style:solid;box-sizing:border-box;width:100%}.fr-tab-indicator .fr-tab-indicator-content{transition:transform .25s cubic-bezier(.4,0,.2,1)}.fr-tab-indicator .fr-tab-indicator-content--underline{border-top:4px solid var(--fwe-caerul)}.fr-tab-indicator--active .fr-tab-indicator-content{opacity:1}.fr-tab{-webkit-appearance:none;background:none;border:none;cursor:pointer;display:flex;flex:1 0 auto;height:36px;justify-content:center;margin:0;outline:none;padding:0;position:relative;text-align:center;white-space:nowrap;z-index:1}.fr-tab:not(:last-child){margin-right:32px}.fr-tab::-moz-focus-inner{border:0;padding:0}.fr-tab .fr-tab-text-label{color:var(--fwe-text)}.fr-tab--active .fr-tab-text-label{color:var(--fwe-caerul)}.fr-tab-content{align-items:flex-start;display:flex;height:inherit;justify-content:center;pointer-events:none;position:relative}.fr-tab-text-label{display:inline-block;z-index:2}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab{flex:none}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab:not(:last-child){margin-right:64px}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-scroll-content{padding:0 32px}.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-divider-line{padding-right:64px}.fwe-checkbox-container{align-items:center;cursor:pointer;display:flex;flex-direction:row;font-family:var(--fwe-font-family-sans-serif);-webkit-user-select:none;-moz-user-select:none;user-select:none}.fwe-checkbox-container.fwe-label-below{flex-direction:column}.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title{margin:8px 0 0}.fwe-checkbox-container.fwe-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title{margin:0 8px 0 0}.fwe-checkbox-container .fwe-checkbox-indicator-container{position:relative}.fwe-checkbox-container input{cursor:pointer;height:0;opacity:0;width:0}.fwe-checkbox-container .fwe-checkbox-title{color:var(--fwe-text);line-height:24px;margin-left:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fwe-checkbox-container .fwe-checkbox-indicator-background{background:var(--fwe-white);border:1px solid var(--fwe-text-light);border-radius:2px;box-sizing:border-box;height:16px;transition:border-width .2s ease-out;width:16px}.fwe-checkbox-container .fwe-indeterminate-indicator{background:#fff;height:2px;left:3px;position:absolute;top:7px;width:10px}.fwe-checkbox-container svg{display:block;left:0;position:absolute;top:0}.fwe-checkbox-container.fr-checkbox-large .fwe-checkbox-indicator-background{border-radius:4px;height:24px;width:24px}.fwe-checkbox-container.fr-checkbox-large .fwe-indeterminate-indicator{left:5px;top:11px;width:14px}.fwe-checkbox-container.fr-checkbox-large.fr-checkbox-indeterminate .fwe-checkbox-indicator-background,.fwe-checkbox-container.fr-checkbox-large.fwe-checked .fwe-checkbox-indicator-background{border:12px solid var(--fwe-hero)}.fwe-checkbox-container:hover .fwe-checkbox-indicator-background{background-color:var(--fwe-control)}.fwe-checkbox-container:active .fwe-checkbox-indicator-background{background-color:var(--fwe-control-hover)}.fwe-checkbox-container.fr-checkbox-indeterminate .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background{border:8px solid var(--fwe-hero)}.fwe-checkbox-container.fr-checkbox-indeterminate:hover .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-hover)}.fwe-checkbox-container.fr-checkbox-indeterminate:active .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-active)}.fwe-checkbox-container.fr-checkbox-invalid .fwe-checkbox-indicator-background{background:var(--fwe-white);border:1px solid var(--fwe-red)}.fwe-checkbox-container.fwe-disabled{cursor:default}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fr-checkbox-indeterminate .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background{background-color:var(--fwe-control);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fr-checkbox-invalid .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title{color:var(--fwe-text-disabled)}.fwe-color-indicator .fwe-popover-container{position:relative}.fwe-color-indicator .fwe-popover-container .fwe-popover{background-color:var(--fwe-white);border-radius:4px;box-shadow:0 1px 4px rgba(51,51,51,.2);font-size:var(--fwe-font-size-md);line-height:1rem;padding:8px 16px 16px}.fwe-color-indicator .fwe-backdrop{background:transparent}.fwe-color-indicator .fwe-color-label{font-size:var(--fwe-font-size-small);font-weight:var(--fwe-font-weight-bold);height:18px;margin-bottom:4px}.fwe-color-indicator .fwe-color-container{display:flex}.fwe-color-indicator .fwe-color-container .fwe-color-box{background:var(--fwe-white);border:1px solid var(--fwe-control-border);border-radius:4px;height:24px;width:24px}.fwe-color-indicator .fwe-color-container .fwe-color-box .fwe-no-color-pattern{margin:2px}.fwe-color-indicator .fwe-color-container .fwe-color-indicator-text{margin-left:8px}.fwe-color-indicator.disabled{pointer-events:none}.fwe-color-indicator.disabled .fwe-color-label{color:var(--fwe-text-disabled)}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-box{opacity:.5}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-indicator-text{color:var(--fwe-text-disabled)}.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-top{height:17px;overflow:hidden;position:absolute;width:17px}.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-top:after{background:var(--fwe-white);box-shadow:0 1px 4px rgba(51,51,51,.2);content:"";height:12px;position:absolute;transform:rotate(45deg);width:12px}.fwe-popover,.fwe-popover.fwe-popover-menu{background-color:var(--fwe-white);border-radius:4px;box-shadow:0 1px 4px rgba(51,51,51,.2)}.fwe-popover{font-size:var(--fwe-font-size-md);line-height:1rem;padding:8px}.fwe-popover-container{display:inline-block;position:relative}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-top:after{left:3px;top:11px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-bottom:after{left:3px;top:-6px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{left:11px;top:2px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{left:-6px;top:2px}.fwe-popover.fwe-popover-menu{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{display:inline-flex;height:32px;justify-content:unset;margin-left:inherit;max-height:32px;padding:0 8px 0 0;text-align:left;width:100%}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{align-items:center;display:inline-flex;flex-wrap:nowrap;height:24px;justify-content:center;width:32px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=" fwe-icon-"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{background-color:rgba(51,51,51,.102);color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:rgba(51,51,51,.2)}.fwe-popover .fwe-popover-legend{display:table;line-height:24px;margin:16px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content{display:table-row}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fwe-color-picker{width:216px}.fwe-color-picker.fwe-alpha-active{width:245px}.fwe-color-picker .fwe-gradient-picker{height:198px;margin:-7px;position:relative;width:198px}.fwe-color-picker .fwe-gradient-picker .fwe-brightness-gradient{background-image:linear-gradient(transparent,#000);bottom:7px;left:7px;position:absolute;right:7px;top:7px}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{bottom:7px;left:7px;position:absolute;right:7px;top:7px}.fwe-color-picker .fwe-alpha-picker,.fwe-color-picker .fwe-hue-picker,.fwe-color-picker .fwe-vertical-picker{height:198px;margin:-7px -3px -7px 18px;position:relative;width:14px}.fwe-color-picker .fwe-alpha-picker .fwe-picker-background,.fwe-color-picker .fwe-hue-picker .fwe-picker-background,.fwe-color-picker .fwe-vertical-picker .fwe-picker-background{border-radius:4px;height:184px;margin:7px 3px;width:8px}.fwe-color-picker .fwe-alpha-picker .fwe-knob,.fwe-color-picker .fwe-hue-picker .fwe-knob,.fwe-color-picker .fwe-vertical-picker .fwe-knob{left:-3px}.fwe-color-picker .fwe-hue-picker .fwe-picker-background{background-image:linear-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.fwe-color-picker .fwe-alpha-picker .fwe-no-color-pattern{margin:7px 3px;position:absolute}.fwe-color-picker .fwe-alpha-picker .fwe-picker-background{position:absolute}.fwe-color-picker .fwe-type-select{display:flex;position:relative}.fwe-color-picker .fwe-type-select .fwe-type-indicator{cursor:pointer;display:flex;flex-shrink:1}.fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type{font-size:var(--fwe-font-size-small);font-weight:var(--fwe-font-weight-bold);line-height:calc(var(--fwe-font-size-small) + 5px)}.fwe-color-picker .fwe-type-select .fwe-type-indicator:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-icon-arrows-collapse{line-height:16px;margin-left:16px}.fwe-color-picker .fwe-type-select .fwe-popover{left:0;position:absolute;top:24px;z-index:1}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item{cursor:pointer;display:flex;padding:8px}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item .fwe-icon-menu-check{margin-right:8px;opacity:0}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected{cursor:default}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected .fwe-icon-menu-check{opacity:1}.fwe-color-picker input::-webkit-inner-spin-button,.fwe-color-picker input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fwe-color-picker input[type=number]{-moz-appearance:textfield}.fwe-color-picker input{padding-right:0!important;text-align:center}.fwe-color-picker .fwe-hex-input{margin-right:16px;width:75px}.fwe-color-picker .fwe-green-input,.fwe-color-picker .fwe-red-input{margin-right:8px;width:32px}.fwe-color-picker .fwe-blue-input{width:32px}.fwe-color-picker .fwe-alpha-input span input{padding-right:16px!important;width:48px}.fwe-color-picker .fwe-alpha-input .fwe-percent-char{margin-left:-16px}.fwe-color-picker .fwe-color-grid{display:flex;flex-wrap:wrap;margin-bottom:-8px;margin-right:-8px}.fwe-color-picker .fwe-color-grid .fwe-color-item{align-items:center;border-radius:4px;color:#fff;display:flex;height:24px;justify-content:center;margin-bottom:8px;margin-right:8px;width:24px}.fwe-color-picker .fwe-color-grid .fwe-color-item.fwe-white-item{border:1px solid var(--fwe-control-border);color:#000}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button{align-items:center;border:1px solid var(--fwe-control-border);border-radius:4px;color:var(--fwe-control);display:flex;height:24px;justify-content:center;margin-bottom:8px;margin-right:8px;width:24px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button .fwe-no-color-pattern{margin:2px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button i{color:transparent;position:absolute}.fwe-color-picker .fwe-knob{border:2px solid #fff;border-radius:50%;box-shadow:0 0 4px 0 rgba(0,0,0,.15);height:14px;position:absolute;width:14px;z-index:1}.flatpickr-calendar{margin-top:6px}.flatpickr-calendar:not(.open){display:none}.fwe-border-hero{border-color:var(--fwe-hero)!important}.fr-date-range-picker:hover input{color:var(--fwe-hero)}.fr-date-range-picker-inputs{display:flex;order:2}.fwe-select-wrapper{min-width:48px;width:100%}.fwe-select-wrapper .fr-select-input{bottom:0;box-sizing:border-box;left:0;opacity:0;pointer-events:none;position:absolute;width:100%}.fwe-select-wrapper.fwe-disabled:before{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select{cursor:pointer}.fwe-select-wrapper .fwe-select .fwe-select-content{line-height:1.5rem;overflow:hidden;padding-right:24px;text-overflow:ellipsis;white-space:nowrap}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled)~.fwe-select-label:after{content:"*";display:inline-block;left:3px;position:relative}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled):not(.fwe-invalid)~.fwe-select-valid{display:block}.fwe-select-wrapper .fwe-select:focus:not(:disabled){border-color:var(--fwe-hero);color:var(--fwe-hero)}.fwe-select-wrapper .fwe-select:focus:not(:disabled) option{color:var(--fwe-text)}.fwe-select-wrapper .fwe-select:focus:invalid{border-color:var(--fwe-red)}.fwe-select-wrapper .fwe-select.fwe-disabled{border-color:var(--fwe-control-disabled)!important;cursor:default}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content,.fwe-select-wrapper .fwe-select.fwe-disabled~.fwe-select-label{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:focus,.fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:hover{border-color:var(--fwe-red)}.fwe-select-wrapper .fwe-select.fwe-invalid~.fwe-select-invalid{display:block}.fwe-select-wrapper .fwe-select.fwe-invalid~.fwe-select-description{display:none}.fr-select-scroll{overflow-y:scroll}.fwe-select-options-container{background-color:var(--fwe-white);border:1px solid var(--fwe-gray-200);border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.161);font-size:var(--fwe-font-size-base);list-style:none;margin:0;max-width:100vw;padding:8px;z-index:var(--fwe-z-index-popover)}.fwe-select-options-container .fwe-select-option{cursor:pointer;line-height:24px;min-height:24px;padding:12px 8px;position:relative}.fwe-select-options-container .fwe-select-option:focus,.fwe-select-options-container .fwe-select-option:hover{background-color:var(--fwe-gray-100);outline:none}.fwe-select-options-container .fwe-select-option:last-child{border-bottom:none}.fwe-select-options-container .fwe-select-option .fwe-select-option-content{display:block;line-height:24px;min-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fr-backdrop{inset:0;position:fixed;z-index:var(--fwe-z-index-modal)}label.fwe-slider{display:block;position:relative}label.fwe-slider .fr-slider-indicator{background:var(--fwe-hero);bottom:22px;height:2px;left:0;position:absolute}label.fwe-slider .fr-slider-indicator.disabled{background:var(--fwe-border)}label.fwe-slider.fr-slider-value{height:56px}label.fwe-slider.fr-slider-value .fr-slider-indicator{bottom:38px}label.fwe-slider.fr-slider-label{height:67px}label.fwe-slider.fr-slider-label .fr-slider-indicator{bottom:22px}label.fwe-slider.fr-slider-value-label{height:83px}label.fwe-slider.fr-slider-value-label .fr-slider-indicator{bottom:38px}label.fwe-slider .fr-slider-value{bottom:0;color:var(--fwe-text);font-size:var(--fwe-font-size-base);margin-bottom:0;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}label.fwe-input-text .fr-textarea{overflow:visible}
|
|
2
2
|
/*!
|
|
3
3
|
* Quill Editor v2.0.2
|
|
4
4
|
* https://quilljs.com
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import Button from './Button';
|
|
3
|
+
declare const meta: Meta<typeof Button>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Button>;
|
|
6
|
+
export declare const Overview: Story;
|
|
7
|
+
export declare const Primary: Story;
|
|
8
|
+
export declare const Secondary: Story;
|
|
9
|
+
export declare const Sizes: Story;
|
|
10
|
+
export declare const Icon: Story;
|
|
11
|
+
export declare const IconOnly: Story;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import Button from './Button';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
+
const meta = {
|
|
5
|
+
component: Button,
|
|
6
|
+
title: 'Components/Buttons'
|
|
7
|
+
};
|
|
8
|
+
export default meta;
|
|
9
|
+
export const Overview = {
|
|
10
|
+
render: () => /*#__PURE__*/_jsxs("div", {
|
|
11
|
+
className: "fwe-d-flex fwe-justify-content-space-between fwe-align-items-end",
|
|
12
|
+
children: [/*#__PURE__*/_jsx(Button, {
|
|
13
|
+
children: "Secondary"
|
|
14
|
+
}), /*#__PURE__*/_jsx(Button, {
|
|
15
|
+
disabled: true,
|
|
16
|
+
children: "Disabled"
|
|
17
|
+
}), /*#__PURE__*/_jsx(Button, {
|
|
18
|
+
primary: true,
|
|
19
|
+
children: "Hero"
|
|
20
|
+
}), /*#__PURE__*/_jsx(Button, {
|
|
21
|
+
large: true,
|
|
22
|
+
children: "Large"
|
|
23
|
+
}), /*#__PURE__*/_jsx(Button, {
|
|
24
|
+
icon: "ecommerce-core-range-product",
|
|
25
|
+
children: "Icon"
|
|
26
|
+
}), /*#__PURE__*/_jsx(Button, {
|
|
27
|
+
icon: "ecommerce-core-range-product",
|
|
28
|
+
iconOnly: true,
|
|
29
|
+
children: "Icon"
|
|
30
|
+
})]
|
|
31
|
+
})
|
|
32
|
+
};
|
|
33
|
+
export const Primary = {
|
|
34
|
+
args: {
|
|
35
|
+
primary: true,
|
|
36
|
+
children: 'Primary'
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
export const Secondary = {
|
|
40
|
+
args: {
|
|
41
|
+
children: 'Secondary'
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
export const Sizes = {
|
|
45
|
+
args: {
|
|
46
|
+
children: 'Large Button',
|
|
47
|
+
large: true
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
export const Icon = {
|
|
51
|
+
args: {
|
|
52
|
+
children: 'With Icon',
|
|
53
|
+
icon: 'ecommerce-core-range-product'
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
export const IconOnly = {
|
|
57
|
+
args: {
|
|
58
|
+
iconOnly: true,
|
|
59
|
+
icon: 'ecommerce-core-range-product'
|
|
60
|
+
}
|
|
61
|
+
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
import DeleteIcon from './DeleteIcon';
|
|
3
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
3
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
4
|
export let ChipType;
|
|
@@ -34,13 +33,16 @@ function Chip(_ref) {
|
|
|
34
33
|
}, {
|
|
35
34
|
'fwe-readonly': type === ChipType.Readonly
|
|
36
35
|
}, className);
|
|
37
|
-
return
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
onClick:
|
|
43
|
-
|
|
44
|
-
|
|
36
|
+
return (
|
|
37
|
+
/*#__PURE__*/
|
|
38
|
+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
|
39
|
+
_jsxs("div", {
|
|
40
|
+
className: classes,
|
|
41
|
+
onClick: onClick,
|
|
42
|
+
children: [icon && /*#__PURE__*/_jsx("i", {
|
|
43
|
+
className: `fwe-icon fwe-icon-${icon}`
|
|
44
|
+
}), children]
|
|
45
|
+
})
|
|
46
|
+
);
|
|
45
47
|
}
|
|
46
48
|
export default Chip;
|
|
@@ -8,8 +8,10 @@ interface ImageGalleryProps extends ComponentPropsWithoutRef<'div'>, ModalBasePr
|
|
|
8
8
|
images: ImageGalleryItemData[];
|
|
9
9
|
thumbnailImages?: ImageGalleryItemDataBase[];
|
|
10
10
|
pagination?: boolean;
|
|
11
|
+
showScaleButton?: boolean;
|
|
11
12
|
descriptiveContent?: boolean;
|
|
12
13
|
onSlideChanged?: (index: number) => void;
|
|
14
|
+
onScaleChange?: (value: boolean) => void;
|
|
13
15
|
}
|
|
14
16
|
export declare const ImageGallery: (props: ImageGalleryProps & import("react").RefAttributes<HTMLImageElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
15
17
|
export default ImageGallery;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { forwardRef, useState } from 'react';
|
|
2
|
+
import cn from 'classnames';
|
|
2
3
|
import ModalBase from '../ModalBase';
|
|
3
4
|
import BaseGallery from './BaseGallery';
|
|
4
5
|
import ImageGalleryContent from './ImageGalleryContent';
|
|
@@ -17,11 +18,14 @@ export const ImageGallery = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
17
18
|
children,
|
|
18
19
|
className,
|
|
19
20
|
pagination,
|
|
21
|
+
showScaleButton,
|
|
20
22
|
onClose,
|
|
21
23
|
onSlideChanged,
|
|
24
|
+
onScaleChange,
|
|
22
25
|
...props
|
|
23
26
|
} = _ref;
|
|
24
27
|
const [currentIndex, setCurrentIndex] = useState(startIndex + 1);
|
|
28
|
+
const [isScaled, setScaled] = useState(false);
|
|
25
29
|
function handleChange(index) {
|
|
26
30
|
setCurrentIndex(index + 1);
|
|
27
31
|
onSlideChanged?.(index);
|
|
@@ -31,6 +35,11 @@ export const ImageGallery = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
31
35
|
onClose?.();
|
|
32
36
|
}
|
|
33
37
|
const classes = getClasses(thumbnailImages, descriptiveContent, className);
|
|
38
|
+
function handleScale() {
|
|
39
|
+
const newScaled = !isScaled;
|
|
40
|
+
setScaled(newScaled);
|
|
41
|
+
onScaleChange?.(newScaled);
|
|
42
|
+
}
|
|
34
43
|
return /*#__PURE__*/_jsx(ModalBase, {
|
|
35
44
|
onClose: handleClose,
|
|
36
45
|
className: classes,
|
|
@@ -44,13 +53,27 @@ export const ImageGallery = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
44
53
|
currentIndex: currentIndex,
|
|
45
54
|
length: images.length,
|
|
46
55
|
pagination: pagination
|
|
47
|
-
}), /*#__PURE__*/_jsx("button", {
|
|
48
|
-
"aria-label": "
|
|
56
|
+
}), showScaleButton ? /*#__PURE__*/_jsx("button", {
|
|
57
|
+
"aria-label": "scale up",
|
|
49
58
|
type: "button",
|
|
50
59
|
className: "fwe-btn fwe-btn-link fwe-ml-auto",
|
|
51
|
-
onClick:
|
|
60
|
+
onClick: handleScale,
|
|
61
|
+
children: /*#__PURE__*/_jsx("i", {
|
|
62
|
+
className: cn('fwe-icon fwe-icon-lg fwe-color-white fwe-modal-image-gallery-scale', {
|
|
63
|
+
'fwe-icon-arrows-scale-down': isScaled,
|
|
64
|
+
'fwe-icon-arrows-scale-up': !isScaled
|
|
65
|
+
})
|
|
66
|
+
})
|
|
67
|
+
}) : null, /*#__PURE__*/_jsx("button", {
|
|
68
|
+
"aria-label": "close",
|
|
69
|
+
type: "button",
|
|
70
|
+
className: cn('fwe-btn fwe-btn-link', {
|
|
71
|
+
'fwe-ml-auto': !showScaleButton,
|
|
72
|
+
'fwe-ml-3': showScaleButton
|
|
73
|
+
}),
|
|
74
|
+
onClick: onClose,
|
|
52
75
|
children: /*#__PURE__*/_jsx("i", {
|
|
53
|
-
className: "fwe-icon fwe-icon-
|
|
76
|
+
className: "fwe-icon fwe-icon-2x fwe-color-white fwe-icon-menu-close fwe-modal-image-gallery-close"
|
|
54
77
|
})
|
|
55
78
|
})]
|
|
56
79
|
}), descriptiveContent ? /*#__PURE__*/_jsxs("div", {
|
|
@@ -9,7 +9,7 @@ export default function ImageGalleryPagination(_ref) {
|
|
|
9
9
|
} = _ref;
|
|
10
10
|
return /*#__PURE__*/_jsx(_Fragment, {
|
|
11
11
|
children: pagination && /*#__PURE__*/_jsxs("div", {
|
|
12
|
-
className: "fwe-pagination fwe-pagination--on-dark-bg",
|
|
12
|
+
className: "fwe-pagination fwe-pagination--on-dark-bg fwe-pagination--lining-tabular-numbers",
|
|
13
13
|
children: [/*#__PURE__*/_jsx("button", {
|
|
14
14
|
"aria-label": "previous",
|
|
15
15
|
type: "button",
|
|
@@ -31,11 +31,10 @@ function SearchInput(_ref) {
|
|
|
31
31
|
} = useSearchInput(inputRef, cappedSuggestions, value, defaultValue, onChange, onSearch, onKeyboardNavigate);
|
|
32
32
|
useOnClickOutside(containerRef, handleOutsideClick);
|
|
33
33
|
return /*#__PURE__*/_jsxs("div", {
|
|
34
|
-
className: "fwe-search-input
|
|
34
|
+
className: "fwe-search-input",
|
|
35
35
|
ref: containerRef,
|
|
36
36
|
children: [/*#__PURE__*/_jsx("input", {
|
|
37
37
|
ref: inputRef,
|
|
38
|
-
className: "fwe-w-100",
|
|
39
38
|
disabled: disabled,
|
|
40
39
|
placeholder: label,
|
|
41
40
|
onFocus: handleFocus,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
interface RadioGroupProps extends ClassNamePropsWithChildren {
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
|
|
4
3
|
name?: string;
|
|
5
4
|
defaultValue?: string;
|
|
6
5
|
onValueChange?: (value: string) => void;
|
|
@@ -10,5 +9,5 @@ interface RadioGroupProps extends ClassNamePropsWithChildren {
|
|
|
10
9
|
disabled?: boolean;
|
|
11
10
|
required?: boolean;
|
|
12
11
|
}
|
|
13
|
-
declare
|
|
12
|
+
declare const RadioGroup: (props: RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
14
13
|
export default RadioGroup;
|
|
@@ -1,19 +1,23 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
import { useCallback, useMemo } from 'react';
|
|
2
|
+
import { forwardRef, useCallback, useMemo } from 'react';
|
|
3
3
|
import useControlled from '../../helper/useControlled';
|
|
4
4
|
import useId from '../../helper/useId';
|
|
5
5
|
import RadioGroupContext from './RadioGroupContext';
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
8
|
+
let {
|
|
9
9
|
children,
|
|
10
10
|
className,
|
|
11
11
|
onValueChange,
|
|
12
12
|
value: controlledValue,
|
|
13
13
|
defaultValue,
|
|
14
14
|
name,
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
labelPosition,
|
|
16
|
+
large,
|
|
17
|
+
disabled,
|
|
18
|
+
required,
|
|
19
|
+
...props
|
|
20
|
+
} = _ref;
|
|
17
21
|
const contextName = useId(name);
|
|
18
22
|
const [value, setValue] = useControlled({
|
|
19
23
|
controlled: controlledValue,
|
|
@@ -24,19 +28,24 @@ function RadioGroup(props) {
|
|
|
24
28
|
setValue(newValue);
|
|
25
29
|
}, [onValueChange, setValue]);
|
|
26
30
|
const contextValue = useMemo(() => ({
|
|
27
|
-
|
|
31
|
+
labelPosition,
|
|
32
|
+
large,
|
|
33
|
+
disabled,
|
|
34
|
+
required,
|
|
28
35
|
handleValueChange,
|
|
29
36
|
value,
|
|
30
37
|
isControlled: controlledValue !== undefined,
|
|
31
38
|
name: contextName
|
|
32
|
-
}), [controlledValue, handleValueChange,
|
|
39
|
+
}), [controlledValue, handleValueChange, labelPosition, large, disabled, required, value, contextName]);
|
|
33
40
|
return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
|
|
34
41
|
value: contextValue,
|
|
35
42
|
children: /*#__PURE__*/_jsx("div", {
|
|
43
|
+
ref: ref,
|
|
36
44
|
className: classNames('fwe-radio-group', className),
|
|
37
45
|
role: "radiogroup",
|
|
46
|
+
...props,
|
|
38
47
|
children: children
|
|
39
48
|
})
|
|
40
49
|
});
|
|
41
|
-
}
|
|
50
|
+
});
|
|
42
51
|
export default RadioGroup;
|
|
@@ -232,7 +232,9 @@ export const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
232
232
|
}
|
|
233
233
|
return /*#__PURE__*/_jsxs("div", {
|
|
234
234
|
ref: combinedRef,
|
|
235
|
-
className: classNames('fwe-select-wrapper',
|
|
235
|
+
className: classNames('fwe-select-wrapper', {
|
|
236
|
+
'fwe-disabled': disabled
|
|
237
|
+
}, className),
|
|
236
238
|
...props,
|
|
237
239
|
children: [/*#__PURE__*/_jsx("input", {
|
|
238
240
|
className: "fr-select-input",
|
|
@@ -15,7 +15,7 @@ interface TextAreaProps extends ClassNameProps {
|
|
|
15
15
|
value?: string;
|
|
16
16
|
defaultValue?: string;
|
|
17
17
|
rows?: number;
|
|
18
|
-
maxLength
|
|
18
|
+
maxLength?: number;
|
|
19
19
|
id?: string;
|
|
20
20
|
}
|
|
21
21
|
declare function TextArea({ disabled, onBlur, onChange, onFocus, onInput, readonly, required, label, error, hint, value, rows, maxLength, className, id: idProps, defaultValue, }: TextAreaProps): JSX.Element;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.Sizes = exports.Secondary = exports.Primary = exports.Overview = exports.IconOnly = exports.Icon = void 0;
|
|
7
|
+
var _Button = _interopRequireDefault(require("./Button"));
|
|
8
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
const meta = {
|
|
11
|
+
component: _Button.default,
|
|
12
|
+
title: 'Components/Buttons'
|
|
13
|
+
};
|
|
14
|
+
var _default = exports.default = meta;
|
|
15
|
+
const Overview = exports.Overview = {
|
|
16
|
+
render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
17
|
+
className: "fwe-d-flex fwe-justify-content-space-between fwe-align-items-end",
|
|
18
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
|
|
19
|
+
children: "Secondary"
|
|
20
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
|
|
21
|
+
disabled: true,
|
|
22
|
+
children: "Disabled"
|
|
23
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
|
|
24
|
+
primary: true,
|
|
25
|
+
children: "Hero"
|
|
26
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
|
|
27
|
+
large: true,
|
|
28
|
+
children: "Large"
|
|
29
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
|
|
30
|
+
icon: "ecommerce-core-range-product",
|
|
31
|
+
children: "Icon"
|
|
32
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
|
|
33
|
+
icon: "ecommerce-core-range-product",
|
|
34
|
+
iconOnly: true,
|
|
35
|
+
children: "Icon"
|
|
36
|
+
})]
|
|
37
|
+
})
|
|
38
|
+
};
|
|
39
|
+
const Primary = exports.Primary = {
|
|
40
|
+
args: {
|
|
41
|
+
primary: true,
|
|
42
|
+
children: 'Primary'
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
const Secondary = exports.Secondary = {
|
|
46
|
+
args: {
|
|
47
|
+
children: 'Secondary'
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
const Sizes = exports.Sizes = {
|
|
51
|
+
args: {
|
|
52
|
+
children: 'Large Button',
|
|
53
|
+
large: true
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
const Icon = exports.Icon = {
|
|
57
|
+
args: {
|
|
58
|
+
children: 'With Icon',
|
|
59
|
+
icon: 'ecommerce-core-range-product'
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
const IconOnly = exports.IconOnly = {
|
|
63
|
+
args: {
|
|
64
|
+
iconOnly: true,
|
|
65
|
+
icon: 'ecommerce-core-range-product'
|
|
66
|
+
}
|
|
67
|
+
};
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.ChipType = void 0;
|
|
7
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
|
-
var _DeleteIcon = _interopRequireDefault(require("./DeleteIcon"));
|
|
9
8
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
10
|
let ChipType = exports.ChipType = void 0;
|
|
@@ -40,13 +39,16 @@ function Chip(_ref) {
|
|
|
40
39
|
}, {
|
|
41
40
|
'fwe-readonly': type === ChipType.Readonly
|
|
42
41
|
}, className);
|
|
43
|
-
return
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
onClick:
|
|
49
|
-
|
|
50
|
-
|
|
42
|
+
return (
|
|
43
|
+
/*#__PURE__*/
|
|
44
|
+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
|
45
|
+
(0, _jsxRuntime.jsxs)("div", {
|
|
46
|
+
className: classes,
|
|
47
|
+
onClick: onClick,
|
|
48
|
+
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
|
|
49
|
+
className: `fwe-icon fwe-icon-${icon}`
|
|
50
|
+
}), children]
|
|
51
|
+
})
|
|
52
|
+
);
|
|
51
53
|
}
|
|
52
54
|
var _default = exports.default = Chip;
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.ImageGallery = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
9
|
var _ModalBase = _interopRequireDefault(require("../ModalBase"));
|
|
9
10
|
var _BaseGallery = _interopRequireDefault(require("./BaseGallery"));
|
|
10
11
|
var _ImageGalleryContent = _interopRequireDefault(require("./ImageGalleryContent"));
|
|
@@ -22,11 +23,14 @@ const ImageGallery = exports.ImageGallery = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
22
23
|
children,
|
|
23
24
|
className,
|
|
24
25
|
pagination,
|
|
26
|
+
showScaleButton,
|
|
25
27
|
onClose,
|
|
26
28
|
onSlideChanged,
|
|
29
|
+
onScaleChange,
|
|
27
30
|
...props
|
|
28
31
|
} = _ref;
|
|
29
32
|
const [currentIndex, setCurrentIndex] = (0, _react.useState)(startIndex + 1);
|
|
33
|
+
const [isScaled, setScaled] = (0, _react.useState)(false);
|
|
30
34
|
function handleChange(index) {
|
|
31
35
|
setCurrentIndex(index + 1);
|
|
32
36
|
onSlideChanged?.(index);
|
|
@@ -36,6 +40,11 @@ const ImageGallery = exports.ImageGallery = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
36
40
|
onClose?.();
|
|
37
41
|
}
|
|
38
42
|
const classes = (0, _ImageGallery.default)(thumbnailImages, descriptiveContent, className);
|
|
43
|
+
function handleScale() {
|
|
44
|
+
const newScaled = !isScaled;
|
|
45
|
+
setScaled(newScaled);
|
|
46
|
+
onScaleChange?.(newScaled);
|
|
47
|
+
}
|
|
39
48
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalBase.default, {
|
|
40
49
|
onClose: handleClose,
|
|
41
50
|
className: classes,
|
|
@@ -49,13 +58,27 @@ const ImageGallery = exports.ImageGallery = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
49
58
|
currentIndex: currentIndex,
|
|
50
59
|
length: images.length,
|
|
51
60
|
pagination: pagination
|
|
52
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
53
|
-
"aria-label": "
|
|
61
|
+
}), showScaleButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
62
|
+
"aria-label": "scale up",
|
|
54
63
|
type: "button",
|
|
55
64
|
className: "fwe-btn fwe-btn-link fwe-ml-auto",
|
|
56
|
-
onClick:
|
|
65
|
+
onClick: handleScale,
|
|
66
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
|
|
67
|
+
className: (0, _classnames.default)('fwe-icon fwe-icon-lg fwe-color-white fwe-modal-image-gallery-scale', {
|
|
68
|
+
'fwe-icon-arrows-scale-down': isScaled,
|
|
69
|
+
'fwe-icon-arrows-scale-up': !isScaled
|
|
70
|
+
})
|
|
71
|
+
})
|
|
72
|
+
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
73
|
+
"aria-label": "close",
|
|
74
|
+
type: "button",
|
|
75
|
+
className: (0, _classnames.default)('fwe-btn fwe-btn-link', {
|
|
76
|
+
'fwe-ml-auto': !showScaleButton,
|
|
77
|
+
'fwe-ml-3': showScaleButton
|
|
78
|
+
}),
|
|
79
|
+
onClick: onClose,
|
|
57
80
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
|
|
58
|
-
className: "fwe-icon fwe-icon-
|
|
81
|
+
className: "fwe-icon fwe-icon-2x fwe-color-white fwe-icon-menu-close fwe-modal-image-gallery-close"
|
|
59
82
|
})
|
|
60
83
|
})]
|
|
61
84
|
}), descriptiveContent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
@@ -13,7 +13,7 @@ function ImageGalleryPagination(_ref) {
|
|
|
13
13
|
} = _ref;
|
|
14
14
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
15
15
|
children: pagination && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
16
|
-
className: "fwe-pagination fwe-pagination--on-dark-bg",
|
|
16
|
+
className: "fwe-pagination fwe-pagination--on-dark-bg fwe-pagination--lining-tabular-numbers",
|
|
17
17
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
18
18
|
"aria-label": "previous",
|
|
19
19
|
type: "button",
|
|
@@ -37,11 +37,10 @@ function SearchInput(_ref) {
|
|
|
37
37
|
} = (0, _useSearchInput.default)(inputRef, cappedSuggestions, value, defaultValue, onChange, onSearch, onKeyboardNavigate);
|
|
38
38
|
(0, _useOnClickOutside.default)(containerRef, handleOutsideClick);
|
|
39
39
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
40
|
-
className: "fwe-search-input
|
|
40
|
+
className: "fwe-search-input",
|
|
41
41
|
ref: containerRef,
|
|
42
42
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
43
43
|
ref: inputRef,
|
|
44
|
-
className: "fwe-w-100",
|
|
45
44
|
disabled: disabled,
|
|
46
45
|
placeholder: label,
|
|
47
46
|
onFocus: handleFocus,
|
|
@@ -11,16 +11,20 @@ var _useId = _interopRequireDefault(require("../../helper/useId"));
|
|
|
11
11
|
var _RadioGroupContext = _interopRequireDefault(require("./RadioGroupContext"));
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
15
|
+
let {
|
|
16
16
|
children,
|
|
17
17
|
className,
|
|
18
18
|
onValueChange,
|
|
19
19
|
value: controlledValue,
|
|
20
20
|
defaultValue,
|
|
21
21
|
name,
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
labelPosition,
|
|
23
|
+
large,
|
|
24
|
+
disabled,
|
|
25
|
+
required,
|
|
26
|
+
...props
|
|
27
|
+
} = _ref;
|
|
24
28
|
const contextName = (0, _useId.default)(name);
|
|
25
29
|
const [value, setValue] = (0, _useControlled.default)({
|
|
26
30
|
controlled: controlledValue,
|
|
@@ -31,19 +35,24 @@ function RadioGroup(props) {
|
|
|
31
35
|
setValue(newValue);
|
|
32
36
|
}, [onValueChange, setValue]);
|
|
33
37
|
const contextValue = (0, _react.useMemo)(() => ({
|
|
34
|
-
|
|
38
|
+
labelPosition,
|
|
39
|
+
large,
|
|
40
|
+
disabled,
|
|
41
|
+
required,
|
|
35
42
|
handleValueChange,
|
|
36
43
|
value,
|
|
37
44
|
isControlled: controlledValue !== undefined,
|
|
38
45
|
name: contextName
|
|
39
|
-
}), [controlledValue, handleValueChange,
|
|
46
|
+
}), [controlledValue, handleValueChange, labelPosition, large, disabled, required, value, contextName]);
|
|
40
47
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroupContext.default.Provider, {
|
|
41
48
|
value: contextValue,
|
|
42
49
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
50
|
+
ref: ref,
|
|
43
51
|
className: (0, _classnames.default)('fwe-radio-group', className),
|
|
44
52
|
role: "radiogroup",
|
|
53
|
+
...props,
|
|
45
54
|
children: children
|
|
46
55
|
})
|
|
47
56
|
});
|
|
48
|
-
}
|
|
57
|
+
});
|
|
49
58
|
var _default = exports.default = RadioGroup;
|
|
@@ -239,7 +239,9 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref)
|
|
|
239
239
|
}
|
|
240
240
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
241
241
|
ref: combinedRef,
|
|
242
|
-
className: (0, _classnames.default)('fwe-select-wrapper',
|
|
242
|
+
className: (0, _classnames.default)('fwe-select-wrapper', {
|
|
243
|
+
'fwe-disabled': disabled
|
|
244
|
+
}, className),
|
|
243
245
|
...props,
|
|
244
246
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
245
247
|
className: "fr-select-input",
|