@festo-ui/angular 10.0.0-dev.828 → 10.0.0-dev.830
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/css/bundle.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.cdk-overlay-pane.fng-popover-top .fwe-triangle,.cdk-overlay-pane.fng-popover-bottom .fwe-triangle,.cdk-overlay-pane.fng-popover-right .fwe-triangle,.cdk-overlay-pane.fng-popover-right-top .fwe-triangle,.cdk-overlay-pane.fng-popover-left .fwe-triangle,.cdk-overlay-pane.fng-popover-left-top .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle,.fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.cdk-overlay-pane.fng-popover-top .fwe-triangle::after,.cdk-overlay-pane.fng-popover-bottom .fwe-triangle::after,.cdk-overlay-pane.fng-popover-right .fwe-triangle::after,.cdk-overlay-pane.fng-popover-right-top .fwe-triangle::after,.cdk-overlay-pane.fng-popover-left .fwe-triangle::after,.cdk-overlay-pane.fng-popover-left-top .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle::after,.fwe-triangle.fwe-triangle-right::after,.fwe-triangle.fwe-triangle-left::after,.fwe-triangle.fwe-triangle-bottom::after,.fwe-triangle.fwe-triangle-top::after{content:"";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0px 1px 4px rgba(51,51,51,.2)}.cdk-overlay-pane.fng-popover-menu .fwe-popover,.fwe-popover.fwe-popover-menu,.fwe-popover{background-color:var(--fwe-white);box-shadow:0px 1px 4px rgba(51,51,51,.2);border-radius:4px}.fwe-popover{padding:8px;font-size:var(--fwe-font-size-md);line-height:1rem}.fwe-popover-container{position:relative;display:inline-block;min-width:max-content}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-top::after{top:11px;left:3px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-bottom::after{top:-6px;left:3px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left::after{top:2px;left:11px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right::after{top:2px;left:-6px}.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{width:100%;margin-left:inherit;padding:0 8px 0 0;text-align:left;height:32px;max-height:32px;display:inline-flex;justify-content:unset}.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{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px;margin-right:0px}.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 .fwe-svg-icon{margin-right:8px;margin-left:8px}.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{color:var(--fwe-black);background-color:rgba(51,51,51,.1019607843)}.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;margin:16px;line-height:24px}.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}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0, 0, 0, 0.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}[fngPopoverContent]{cursor:pointer}[fngLegend]{cursor:pointer}.cdk-overlay-pane.fng-overlay{margin:16px}.cdk-overlay-pane.fng-popover-top .fwe-triangle{left:50%;top:100%;transform:translateX(-8px)}.cdk-overlay-pane.fng-popover-top .fwe-triangle::after{top:-6px;left:3px}.cdk-overlay-pane.fng-popover-bottom .fwe-triangle{left:50%;top:-17px;transform:translateX(-8px)}.cdk-overlay-pane.fng-popover-bottom .fwe-triangle::after{top:11px;left:3px}.cdk-overlay-pane.fng-popover-right .fwe-triangle{left:-17px;top:50%;transform:translateY(-8px)}.cdk-overlay-pane.fng-popover-right .fwe-triangle::after{top:2px;left:11px}.cdk-overlay-pane.fng-popover-right-top .fwe-triangle{left:-17px;top:32px;transform:translateY(-8px)}.cdk-overlay-pane.fng-popover-right-top .fwe-triangle::after{top:2px;left:11px}.cdk-overlay-pane.fng-popover-left .fwe-triangle{left:100%;top:50%;transform:translateY(-8px)}.cdk-overlay-pane.fng-popover-left .fwe-triangle::after{top:2px;left:-6px}.cdk-overlay-pane.fng-popover-left-top .fwe-triangle{left:100%;top:32px;transform:translateY(-8px)}.cdk-overlay-pane.fng-popover-left-top .fwe-triangle::after{top:2px;left:-6px}.cdk-overlay-pane.fng-popover-menu .fwe-popover{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.cdk-overlay-pane.fng-popover-menu .fwe-popover .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.cdk-overlay-pane.fng-popover-menu .fwe-popover .fwe-list-group .fwe-list-group-item button{width:100%;margin-left:inherit;padding:0 8px 0 0;text-align:left;height:32px;max-height:32px;display:inline-flex;justify-content:unset}.cdk-overlay-pane.fng-popover-menu .fwe-popover .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.cdk-overlay-pane.fng-popover-menu .fwe-popover .fwe-list-group .fwe-list-group-item button i{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px;margin-right:0px}.cdk-overlay-pane.fng-popover-menu .fwe-popover .fwe-list-group .fwe-list-group-item button i::before{display:inline-flex}.cdk-overlay-pane.fng-popover-menu .fwe-popover .fwe-list-group .fwe-list-group-item button .fwe-svg-icon{margin-right:8px;margin-left:8px}.cdk-overlay-pane.fng-popover-menu .fwe-popover .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.cdk-overlay-pane.fng-popover-menu .fwe-popover .fwe-list-group .fwe-list-group-item button [class*=" fwe-icon-"]{margin-left:inherit}.cdk-overlay-pane.fng-popover-menu .fwe-popover .fwe-list-group .fwe-list-group-item:hover{color:var(--fwe-black);background-color:rgba(51,51,51,.1019607843)}.cdk-overlay-pane.fng-popover-menu .fwe-popover .fwe-list-group .fwe-list-group-item:active{background-color:rgba(51,51,51,.2)}.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle{left:50%;top:100%;transform:translateX(-8px)}.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle::after{top:-6px;left:3px}.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle{left:50%;top:-17px;transform:translateX(-8px)}.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle::after{top:11px;left:3px}.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle{left:100%;top:50%;transform:translateY(-8px)}.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle::after{top:2px;left:-6px}.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle{left:-17px;top:50%;transform:translateY(-8px)}.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle::after{top:2px;left:11px}.cdk-overlay-pane.fng-popover-content .fwe-popover-container{min-height:100%;min-width:100%}.cdk-overlay-pane.fng-popover-content .fwe-popover-container .fwe-popover{min-height:100%;min-width:100%}.cdk-overlay-pane.fng-tooltip-panel .fwe-popover-content{max-width:280px}.cdk-overlay-pane.fng-tooltip-panel--medium .fwe-popover-content{max-width:440px}.cdk-overlay-pane.fng-tooltip-panel--large .fwe-popover-content{max-width:600px}.cdk-overlay-container,.cdk-overlay-connected-position-bounding-box,.cdk-global-overlay-wrapper{z-index:var(--fwe-z-index-modal) !important}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px, 0, 0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.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{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-slide,.swiper-cube-shadow{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper::before{content:"";flex-shrink:0;order:9999}>.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-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-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top,.swiper-slide-shadow-bottom,.swiper-slide-shadow,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top,.swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-slide-shadow-left{background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-slide-shadow-right{background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-slide-shadow-top{background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible{.swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}:root{--swiper-navigation-size: 44px}.swiper-button-prev,.swiper-button-next{position:absolute;width:var(--swiper-navigation-size);height:var(--swiper-navigation-size);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color));&.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}&.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled &{display:none !important}::slotted(svg),svg{width:100%;height:100%;object-fit:contain;transform-origin:center;fill:currentColor;pointer-events:none}}.swiper-button-lock{display:none}.swiper-button-prev,.swiper-button-next{top:var(--swiper-navigation-top-offset, 50%);margin-top:calc(0px - var(--swiper-navigation-size)/2)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset, 4px);right:auto;::slotted(.swiper-navigation-icon),.swiper-navigation-icon{transform:rotate(180deg)}}.swiper-button-next{right:var(--swiper-navigation-sides-offset, 4px);left:auto}.swiper-horizontal{.swiper-button-prev,.swiper-button-next,~.swiper-button-prev,~.swiper-button-next{top:var(--swiper-navigation-top-offset, 50%);margin-top:calc(0px - var(--swiper-navigation-size)/2);margin-left:0}.swiper-button-prev,&~.swiper-button-prev,&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next{left:var(--swiper-navigation-sides-offset, 4px);right:auto}.swiper-button-next,&~.swiper-button-next,&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{right:var(--swiper-navigation-sides-offset, 4px);left:auto}.swiper-button-prev,&~.swiper-button-prev,&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next{::slotted(.swiper-navigation-icon),.swiper-navigation-icon{transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{::slotted(.swiper-navigation-icon),.swiper-navigation-icon{transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-prev,.swiper-button-next,~.swiper-button-prev,~.swiper-button-next{left:var(--swiper-navigation-top-offset, 50%);right:auto;margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0}.swiper-button-prev,~.swiper-button-prev{top:var(--swiper-navigation-sides-offset, 4px);bottom:auto;::slotted(.swiper-navigation-icon),.swiper-navigation-icon{transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset, 4px);top:auto;::slotted(.swiper-navigation-icon),.swiper-navigation-icon{transform:rotate(90deg)}}}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center;>img,>svg,>canvas{max-width:100%;max-height:100%;object-fit:contain}}.swiper-slide-zoomed{cursor:move;touch-action:none}.fng-icon-svg{display:inline-block;width:16px;height:16px;background-repeat:no-repeat;background-position:center;background-size:contain}.fng-icon-svg--time{background:url(data:image/svg+xml;base64,PHN2ZyBpZD0iYWQ2YmNhMGMtYmRiYS00NzBjLTg3NTItODVhYWRlM2RiZjZiIiBkYXRhLW5hbWU9ImNvbnRlbnQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNNy41LDNBNi41LDYuNSwwLDEsMCwxNCw5LjUsNi41MDcxMyw2LjUwNzEzLDAsMCwwLDcuNSwzWm0xLjY0NjQ4LDguODUzNTJMNyw5LjcwN1Y1SDhWOS4yOTNsMS44NTM1MiwxLjg1MzUxWiIgZmlsbD0iIzMzMyIvPjxyZWN0IHg9IjYiIHk9IjEiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIGZpbGw9IiMzMzMiLz48L3N2Zz4=)}.fng-icon-svg--time-calendar{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgaWQ9ImYwMjQzOTIwLTFmZjgtNGIxMy1hMmZiLTBkYTkzY2ZhYzUzMCIgZGF0YS1uYW1lPSJjb250ZW50Ij48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cG9seWdvbiBwb2ludHM9IjIgMTQgMTAgMTQgMTAgMTAgMTQgMTAgMTQgNyAyIDcgMiAxNCIgZmlsbD0iIzMzMyIvPjxwb2x5Z29uIHBvaW50cz0iMTEgMTQgMTQgMTEgMTEgMTEgMTEgMTQiIGZpbGw9IiMzMzMiLz48cG9seWdvbiBwb2ludHM9IjEyIDMgMTIgMiAxMCAyIDEwIDMgNiAzIDYgMiA0IDIgNCAzIDIgMyAyIDYgMTQgNiAxNCAzIDEyIDMiIGZpbGw9IiMzMzMiLz48L2c+PC9zdmc+)}
|
|
1
|
+
.cdk-overlay-pane.fng-popover-top .fwe-triangle,.cdk-overlay-pane.fng-popover-bottom .fwe-triangle,.cdk-overlay-pane.fng-popover-right .fwe-triangle,.cdk-overlay-pane.fng-popover-right-top .fwe-triangle,.cdk-overlay-pane.fng-popover-left .fwe-triangle,.cdk-overlay-pane.fng-popover-left-top .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle,.fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.cdk-overlay-pane.fng-popover-top .fwe-triangle::after,.cdk-overlay-pane.fng-popover-bottom .fwe-triangle::after,.cdk-overlay-pane.fng-popover-right .fwe-triangle::after,.cdk-overlay-pane.fng-popover-right-top .fwe-triangle::after,.cdk-overlay-pane.fng-popover-left .fwe-triangle::after,.cdk-overlay-pane.fng-popover-left-top .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle::after,.fwe-triangle.fwe-triangle-right::after,.fwe-triangle.fwe-triangle-left::after,.fwe-triangle.fwe-triangle-bottom::after,.fwe-triangle.fwe-triangle-top::after{content:"";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0px 1px 4px rgba(51,51,51,.2)}.fwe-popover-container{position:relative;display:inline-block;min-width:max-content}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-top::after{top:11px;left:3px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-bottom::after{top:-6px;left:3px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left::after{top:2px;left:11px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right::after{top:2px;left:-6px}.fwe-popover{background-color:var(--fwe-white);box-shadow:0px 1px 4px rgba(51,51,51,.2);border-radius:4px;padding:8px;font-size:var(--fwe-font-size-md);line-height:1rem}.fwe-popover--legend{display:table;padding:16px;line-height:24px}.fwe-popover--legend .fwe-popover-legend-content{display:table-row}.fwe-popover--legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover--legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fwe-popover--menu{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.fwe-popover--menu button{all:unset;cursor:pointer;border-bottom:none;min-height:36px;padding:0;height:36px;width:100%;display:flex;align-items:center;color:var(--fwe-text)}.fwe-popover--menu button .fwe-svg-icon{margin-right:8px;margin-left:8px}.fwe-popover--menu button i{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px;margin-right:0px}.fwe-popover--menu button i::before{display:inline-flex}.fwe-popover--menu button span{display:inline-flex;margin-right:8px}.fwe-popover--menu button:hover{background-color:rgba(51,51,51,.1019607843)}.fwe-popover--menu button:active{background-color:rgba(51,51,51,.2)}.fwe-popover--content{width:auto;min-width:max-content;max-width:none;padding:16px}.fwe-popover-menu-trigger{background:none;border:none;padding:0;margin:0;line-height:0;display:block;cursor:pointer}.fwe-popover-menu-trigger:hover{color:var(--fwe-hero)}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0, 0, 0, 0.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}[fngPopoverContent]{cursor:pointer}[fngLegend]{cursor:pointer}.cdk-overlay-pane.fng-overlay{margin:16px}.cdk-overlay-pane.fng-popover-top .fwe-triangle{left:50%;top:100%;transform:translateX(-8px)}.cdk-overlay-pane.fng-popover-top .fwe-triangle::after{top:-6px;left:3px}.cdk-overlay-pane.fng-popover-bottom .fwe-triangle{left:50%;top:-17px;transform:translateX(-8px)}.cdk-overlay-pane.fng-popover-bottom .fwe-triangle::after{top:11px;left:3px}.cdk-overlay-pane.fng-popover-right .fwe-triangle{left:-17px;top:50%;transform:translateY(-8px)}.cdk-overlay-pane.fng-popover-right .fwe-triangle::after{top:2px;left:11px}.cdk-overlay-pane.fng-popover-right-top .fwe-triangle{left:-17px;top:32px;transform:translateY(-8px)}.cdk-overlay-pane.fng-popover-right-top .fwe-triangle::after{top:2px;left:11px}.cdk-overlay-pane.fng-popover-left .fwe-triangle{left:100%;top:50%;transform:translateY(-8px)}.cdk-overlay-pane.fng-popover-left .fwe-triangle::after{top:2px;left:-6px}.cdk-overlay-pane.fng-popover-left-top .fwe-triangle{left:100%;top:32px;transform:translateY(-8px)}.cdk-overlay-pane.fng-popover-left-top .fwe-triangle::after{top:2px;left:-6px}.cdk-overlay-pane.fng-popover-menu .fwe-popover{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.cdk-overlay-pane.fng-popover-menu .fwe-popover button{all:unset;cursor:pointer;border-bottom:none;min-height:36px;padding:0;height:36px;width:100%;display:flex;align-items:center;color:var(--fwe-text)}.cdk-overlay-pane.fng-popover-menu .fwe-popover button .fwe-svg-icon{margin-right:8px;margin-left:8px}.cdk-overlay-pane.fng-popover-menu .fwe-popover button i{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px;margin-right:0px}.cdk-overlay-pane.fng-popover-menu .fwe-popover button i::before{display:inline-flex}.cdk-overlay-pane.fng-popover-menu .fwe-popover button span{display:inline-flex;margin-right:8px}.cdk-overlay-pane.fng-popover-menu .fwe-popover button:hover{background-color:rgba(51,51,51,.1019607843)}.cdk-overlay-pane.fng-popover-menu .fwe-popover button:active{background-color:rgba(51,51,51,.2)}.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle{left:50%;top:100%;transform:translateX(-8px)}.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle::after{top:-6px;left:3px}.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle{left:50%;top:-17px;transform:translateX(-8px)}.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle::after{top:11px;left:3px}.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle{left:100%;top:50%;transform:translateY(-8px)}.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle::after{top:2px;left:-6px}.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle{left:-17px;top:50%;transform:translateY(-8px)}.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle::after{top:2px;left:11px}.cdk-overlay-pane.fng-popover-content .fwe-popover-container{min-height:100%;min-width:100%}.cdk-overlay-pane.fng-popover-content .fwe-popover-container .fwe-popover{min-height:100%;min-width:100%}.cdk-overlay-pane.fng-tooltip-panel .fwe-popover-content{max-width:280px}.cdk-overlay-pane.fng-tooltip-panel--medium .fwe-popover-content{max-width:440px}.cdk-overlay-pane.fng-tooltip-panel--large .fwe-popover-content{max-width:600px}.cdk-overlay-container,.cdk-overlay-connected-position-bounding-box,.cdk-global-overlay-wrapper{z-index:var(--fwe-z-index-modal) !important}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px, 0, 0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.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{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-slide,.swiper-cube-shadow{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper::before{content:"";flex-shrink:0;order:9999}>.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-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-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top,.swiper-slide-shadow-bottom,.swiper-slide-shadow,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top,.swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-slide-shadow-left{background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-slide-shadow-right{background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-slide-shadow-top{background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible{.swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}:root{--swiper-navigation-size: 44px}.swiper-button-prev,.swiper-button-next{position:absolute;width:var(--swiper-navigation-size);height:var(--swiper-navigation-size);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color));&.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}&.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled &{display:none !important}::slotted(svg),svg{width:100%;height:100%;object-fit:contain;transform-origin:center;fill:currentColor;pointer-events:none}}.swiper-button-lock{display:none}.swiper-button-prev,.swiper-button-next{top:var(--swiper-navigation-top-offset, 50%);margin-top:calc(0px - var(--swiper-navigation-size)/2)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset, 4px);right:auto;::slotted(.swiper-navigation-icon),.swiper-navigation-icon{transform:rotate(180deg)}}.swiper-button-next{right:var(--swiper-navigation-sides-offset, 4px);left:auto}.swiper-horizontal{.swiper-button-prev,.swiper-button-next,~.swiper-button-prev,~.swiper-button-next{top:var(--swiper-navigation-top-offset, 50%);margin-top:calc(0px - var(--swiper-navigation-size)/2);margin-left:0}.swiper-button-prev,&~.swiper-button-prev,&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next{left:var(--swiper-navigation-sides-offset, 4px);right:auto}.swiper-button-next,&~.swiper-button-next,&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{right:var(--swiper-navigation-sides-offset, 4px);left:auto}.swiper-button-prev,&~.swiper-button-prev,&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next{::slotted(.swiper-navigation-icon),.swiper-navigation-icon{transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{::slotted(.swiper-navigation-icon),.swiper-navigation-icon{transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-prev,.swiper-button-next,~.swiper-button-prev,~.swiper-button-next{left:var(--swiper-navigation-top-offset, 50%);right:auto;margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0}.swiper-button-prev,~.swiper-button-prev{top:var(--swiper-navigation-sides-offset, 4px);bottom:auto;::slotted(.swiper-navigation-icon),.swiper-navigation-icon{transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset, 4px);top:auto;::slotted(.swiper-navigation-icon),.swiper-navigation-icon{transform:rotate(90deg)}}}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center;>img,>svg,>canvas{max-width:100%;max-height:100%;object-fit:contain}}.swiper-slide-zoomed{cursor:move;touch-action:none}.fng-icon-svg{display:inline-block;width:16px;height:16px;background-repeat:no-repeat;background-position:center;background-size:contain}.fng-icon-svg--time{background:url(data:image/svg+xml;base64,PHN2ZyBpZD0iYWQ2YmNhMGMtYmRiYS00NzBjLTg3NTItODVhYWRlM2RiZjZiIiBkYXRhLW5hbWU9ImNvbnRlbnQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNNy41LDNBNi41LDYuNSwwLDEsMCwxNCw5LjUsNi41MDcxMyw2LjUwNzEzLDAsMCwwLDcuNSwzWm0xLjY0NjQ4LDguODUzNTJMNyw5LjcwN1Y1SDhWOS4yOTNsMS44NTM1MiwxLjg1MzUxWiIgZmlsbD0iIzMzMyIvPjxyZWN0IHg9IjYiIHk9IjEiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIGZpbGw9IiMzMzMiLz48L3N2Zz4=)}.fng-icon-svg--time-calendar{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgaWQ9ImYwMjQzOTIwLTFmZjgtNGIxMy1hMmZiLTBkYTkzY2ZhYzUzMCIgZGF0YS1uYW1lPSJjb250ZW50Ij48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cG9seWdvbiBwb2ludHM9IjIgMTQgMTAgMTQgMTAgMTAgMTQgMTAgMTQgNyAyIDcgMiAxNCIgZmlsbD0iIzMzMyIvPjxwb2x5Z29uIHBvaW50cz0iMTEgMTQgMTQgMTEgMTEgMTEgMTEgMTQiIGZpbGw9IiMzMzMiLz48cG9seWdvbiBwb2ludHM9IjEyIDMgMTIgMiAxMCAyIDEwIDMgNiAzIDYgMiA0IDIgNCAzIDIgMyAyIDYgMTQgNiAxNCAzIDEyIDMiIGZpbGw9IiMzMzMiLz48L2c+PC9zdmc+)}
|
package/css/popover.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.cdk-overlay-pane.fng-popover-top .fwe-triangle,.cdk-overlay-pane.fng-popover-bottom .fwe-triangle,.cdk-overlay-pane.fng-popover-right .fwe-triangle,.cdk-overlay-pane.fng-popover-right-top .fwe-triangle,.cdk-overlay-pane.fng-popover-left .fwe-triangle,.cdk-overlay-pane.fng-popover-left-top .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle,.fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.cdk-overlay-pane.fng-popover-top .fwe-triangle::after,.cdk-overlay-pane.fng-popover-bottom .fwe-triangle::after,.cdk-overlay-pane.fng-popover-right .fwe-triangle::after,.cdk-overlay-pane.fng-popover-right-top .fwe-triangle::after,.cdk-overlay-pane.fng-popover-left .fwe-triangle::after,.cdk-overlay-pane.fng-popover-left-top .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle::after,.fwe-triangle.fwe-triangle-right::after,.fwe-triangle.fwe-triangle-left::after,.fwe-triangle.fwe-triangle-bottom::after,.fwe-triangle.fwe-triangle-top::after{content:"";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0px 1px 4px rgba(51,51,51,.2)}.
|
|
1
|
+
.cdk-overlay-pane.fng-popover-top .fwe-triangle,.cdk-overlay-pane.fng-popover-bottom .fwe-triangle,.cdk-overlay-pane.fng-popover-right .fwe-triangle,.cdk-overlay-pane.fng-popover-right-top .fwe-triangle,.cdk-overlay-pane.fng-popover-left .fwe-triangle,.cdk-overlay-pane.fng-popover-left-top .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle,.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle,.fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.cdk-overlay-pane.fng-popover-top .fwe-triangle::after,.cdk-overlay-pane.fng-popover-bottom .fwe-triangle::after,.cdk-overlay-pane.fng-popover-right .fwe-triangle::after,.cdk-overlay-pane.fng-popover-right-top .fwe-triangle::after,.cdk-overlay-pane.fng-popover-left .fwe-triangle::after,.cdk-overlay-pane.fng-popover-left-top .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle::after,.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle::after,.fwe-triangle.fwe-triangle-right::after,.fwe-triangle.fwe-triangle-left::after,.fwe-triangle.fwe-triangle-bottom::after,.fwe-triangle.fwe-triangle-top::after{content:"";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0px 1px 4px rgba(51,51,51,.2)}.fwe-popover-container{position:relative;display:inline-block;min-width:max-content}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-top::after{top:11px;left:3px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translateX(-8px)}.fwe-triangle.fwe-triangle-bottom::after{top:-6px;left:3px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left::after{top:2px;left:11px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right::after{top:2px;left:-6px}.fwe-popover{background-color:var(--fwe-white);box-shadow:0px 1px 4px rgba(51,51,51,.2);border-radius:4px;padding:8px;font-size:var(--fwe-font-size-md);line-height:1rem}.fwe-popover--legend{display:table;padding:16px;line-height:24px}.fwe-popover--legend .fwe-popover-legend-content{display:table-row}.fwe-popover--legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover--legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fwe-popover--menu{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.fwe-popover--menu button{all:unset;cursor:pointer;border-bottom:none;min-height:36px;padding:0;height:36px;width:100%;display:flex;align-items:center;color:var(--fwe-text)}.fwe-popover--menu button .fwe-svg-icon{margin-right:8px;margin-left:8px}.fwe-popover--menu button i{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px;margin-right:0px}.fwe-popover--menu button i::before{display:inline-flex}.fwe-popover--menu button span{display:inline-flex;margin-right:8px}.fwe-popover--menu button:hover{background-color:rgba(51,51,51,.1019607843)}.fwe-popover--menu button:active{background-color:rgba(51,51,51,.2)}.fwe-popover--content{width:auto;min-width:max-content;max-width:none;padding:16px}.fwe-popover-menu-trigger{background:none;border:none;padding:0;margin:0;line-height:0;display:block;cursor:pointer}.fwe-popover-menu-trigger:hover{color:var(--fwe-hero)}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0, 0, 0, 0.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}[fngPopoverContent]{cursor:pointer}[fngLegend]{cursor:pointer}.cdk-overlay-pane.fng-overlay{margin:16px}.cdk-overlay-pane.fng-popover-top .fwe-triangle{left:50%;top:100%;transform:translateX(-8px)}.cdk-overlay-pane.fng-popover-top .fwe-triangle::after{top:-6px;left:3px}.cdk-overlay-pane.fng-popover-bottom .fwe-triangle{left:50%;top:-17px;transform:translateX(-8px)}.cdk-overlay-pane.fng-popover-bottom .fwe-triangle::after{top:11px;left:3px}.cdk-overlay-pane.fng-popover-right .fwe-triangle{left:-17px;top:50%;transform:translateY(-8px)}.cdk-overlay-pane.fng-popover-right .fwe-triangle::after{top:2px;left:11px}.cdk-overlay-pane.fng-popover-right-top .fwe-triangle{left:-17px;top:32px;transform:translateY(-8px)}.cdk-overlay-pane.fng-popover-right-top .fwe-triangle::after{top:2px;left:11px}.cdk-overlay-pane.fng-popover-left .fwe-triangle{left:100%;top:50%;transform:translateY(-8px)}.cdk-overlay-pane.fng-popover-left .fwe-triangle::after{top:2px;left:-6px}.cdk-overlay-pane.fng-popover-left-top .fwe-triangle{left:100%;top:32px;transform:translateY(-8px)}.cdk-overlay-pane.fng-popover-left-top .fwe-triangle::after{top:2px;left:-6px}.cdk-overlay-pane.fng-popover-menu .fwe-popover{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.cdk-overlay-pane.fng-popover-menu .fwe-popover button{all:unset;cursor:pointer;border-bottom:none;min-height:36px;padding:0;height:36px;width:100%;display:flex;align-items:center;color:var(--fwe-text)}.cdk-overlay-pane.fng-popover-menu .fwe-popover button .fwe-svg-icon{margin-right:8px;margin-left:8px}.cdk-overlay-pane.fng-popover-menu .fwe-popover button i{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px;margin-right:0px}.cdk-overlay-pane.fng-popover-menu .fwe-popover button i::before{display:inline-flex}.cdk-overlay-pane.fng-popover-menu .fwe-popover button span{display:inline-flex;margin-right:8px}.cdk-overlay-pane.fng-popover-menu .fwe-popover button:hover{background-color:rgba(51,51,51,.1019607843)}.cdk-overlay-pane.fng-popover-menu .fwe-popover button:active{background-color:rgba(51,51,51,.2)}.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle{left:50%;top:100%;transform:translateX(-8px)}.cdk-overlay-pane.fng-color-indicator-top .fwe-triangle::after{top:-6px;left:3px}.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle{left:50%;top:-17px;transform:translateX(-8px)}.cdk-overlay-pane.fng-color-indicator-bottom .fwe-triangle::after{top:11px;left:3px}.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle{left:100%;top:50%;transform:translateY(-8px)}.cdk-overlay-pane.fng-color-indicator-left .fwe-triangle::after{top:2px;left:-6px}.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle{left:-17px;top:50%;transform:translateY(-8px)}.cdk-overlay-pane.fng-color-indicator-right .fwe-triangle::after{top:2px;left:11px}.cdk-overlay-pane.fng-popover-content .fwe-popover-container{min-height:100%;min-width:100%}.cdk-overlay-pane.fng-popover-content .fwe-popover-container .fwe-popover{min-height:100%;min-width:100%}.cdk-overlay-pane.fng-tooltip-panel .fwe-popover-content{max-width:280px}.cdk-overlay-pane.fng-tooltip-panel--medium .fwe-popover-content{max-width:440px}.cdk-overlay-pane.fng-tooltip-panel--large .fwe-popover-content{max-width:600px}.cdk-overlay-container,.cdk-overlay-connected-position-bounding-box,.cdk-global-overlay-wrapper{z-index:var(--fwe-z-index-modal) !important}
|
|
@@ -4378,7 +4378,7 @@ class FngColorPickerComponent {
|
|
|
4378
4378
|
useExisting: forwardRef(() => FngColorPickerComponent),
|
|
4379
4379
|
multi: true
|
|
4380
4380
|
}
|
|
4381
|
-
], usesOnChanges: true, ngImport: i0, template: "<div class=\"fwe-color-picker\" [class.fwe-alpha-active]=\"useAlpha\">\n @if (!paletteOnly) {\n <div class=\"fwe-d-flex\">\n <div class=\"fwe-gradient-picker\">\n <div class=\"fwe-saturation-gradient\" [ngStyle]=\"{ 'background-image': getSaturationGradient() }\"></div>\n <div class=\"fwe-brightness-gradient\" (click)=\"onGradientClick($event)\"></div>\n <div\n class=\"fwe-knob\"\n cdkDragBoundary=\".fwe-gradient-picker\"\n cdkDrag\n [cdkDragFreeDragPosition]=\"{ x: saturationKnobOffset, y: valueKnobOffset }\"\n (cdkDragMoved)=\"onGradientDrag($event)\"\n [style.background]=\"color\"\n ></div>\n </div>\n <div class=\"fwe-hue-picker\">\n <div class=\"fwe-picker-background\" (click)=\"onHueClick($event)\"></div>\n <div\n class=\"fwe-knob\"\n cdkDragBoundary=\".fwe-hue-picker\"\n cdkDragLockAxis=\"y\"\n cdkDrag\n [cdkDragFreeDragPosition]=\"{ x: 3, y: hueKnobOffset }\"\n (cdkDragMoved)=\"onHueDrag($event)\"\n [style.background]=\"'hsl(' + hue * 360 + ', 100%, 50%)'\"\n ></div>\n </div>\n @if (useAlpha) {\n <div class=\"fwe-alpha-picker\">\n <svg\n class=\"fwe-no-color-pattern\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n id=\"canvas1\"\n width=\"8\"\n height=\"184\"\n >\n <defs>\n <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n </pattern>\n </defs>\n <rect x=\"0\" y=\"0\" rx=\"4\" ry=\"4\" width=\"8\" height=\"184\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n </svg>\n <div\n class=\"fwe-picker-background\"\n (click)=\"onAlphaClick($event)\"\n [ngStyle]=\"{ 'background-image': 'linear-gradient( ' + color + ' , transparent)' }\"\n ></div>\n <div\n class=\"fwe-knob\"\n cdkDragBoundary=\".fwe-alpha-picker\"\n cdkDragLockAxis=\"y\"\n cdkDrag\n [cdkDragFreeDragPosition]=\"{ x: 3, y: alphaKnobOffset }\"\n (cdkDragMoved)=\"onAlphaDrag($event)\"\n [style.background]=\"color\"\n ></div>\n </div>\n }\n </div>\n }\n\n @if (!paletteOnly) {\n <div class=\"fwe-mt-s\">\n <div class=\"fwe-type-select\">\n <div class=\"fwe-type-indicator\" (click)=\"isSelectOpen = !isSelectOpen\">\n <span class=\"fwe-input-type\">{{ inputType }}</span>\n <i class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n </div>\n @if (isSelectOpen) {\n <div class=\"fwe-popover\">\n <div class=\"fwe-type-item\" (click)=\"onChangeType('HEX')\" [class.fwe-selected]=\"inputType === 'HEX'\">\n <i class=\"fwe-icon fwe-icon-menu-check\"></i> HEX\n </div>\n <div class=\"fwe-type-item\" (click)=\"onChangeType('RGB')\" [class.fwe-selected]=\"inputType === 'RGB'\">\n <i class=\"fwe-icon fwe-icon-menu-check\"></i> RGB\n </div>\n </div>\n }\n </div>\n <div class=\"fwe-d-flex\">\n @if (inputType === 'HEX') {\n <label class=\"fwe-input-text fwe-hex-input\">\n <input type=\"text\" [(ngModel)]=\"hexInputColor\" (blur)=\"onHexBlur()\" (input)=\"onHexInput()\" />\n </label>\n }\n @if (inputType === 'RGB') {\n <label class=\"fwe-input-text fwe-red-input\">\n <input type=\"number\" [(ngModel)]=\"redInput\" (input)=\"onRgbInput(redInput, 'r')\" />\n </label>\n <label class=\"fwe-input-text fwe-green-input\">\n <input type=\"number\" [(ngModel)]=\"greenInput\" (input)=\"onRgbInput(greenInput, 'g')\" />\n </label>\n <label class=\"fwe-input-text fwe-blue-input\">\n <input type=\"number\" min=\"0\" max=\"255\" [(ngModel)]=\"blueInput\" (input)=\"onRgbInput(blueInput, 'b')\" />\n </label>\n }\n @if (useAlpha) {\n <label class=\"fwe-input-text fwe-alpha-input fwe-ml-auto\">\n <span>\n <input type=\"number\" min=\"0\" max=\"100\" [(ngModel)]=\"alphaInput\" (input)=\"onAlphaInput(alphaInput)\" />\n <span class=\"fwe-percent-char\">%</span>\n </span>\n </label>\n }\n </div>\n </div>\n }\n\n @if (palette && palette.length) {\n <div class=\"fwe-mt-xs fwe-color-grid\">\n <div class=\"fwe-remove-color-button\" (click)=\"onRemoveColor()\">\n <svg\n class=\"fwe-no-color-pattern\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n id=\"canvas1\"\n width=\"18\"\n height=\"18\"\n >\n <defs>\n <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n </pattern>\n </defs>\n <rect x=\"0\" y=\"0\" rx=\"0\" ry=\"0\" width=\"18\" height=\"18\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n </svg>\n <i class=\"fwe-icon fwe-icon-menu-check\" [class.fwe-color-text]=\"!color\"></i>\n </div>\n @for (colorItem of palette; track colorItem) {\n <div\n class=\"fwe-color-item\"\n [class.fwe-white-item]=\"colorItem.toUpperCase() === '#FFFFFF'\"\n [style.background]=\"colorItem\"\n (click)=\"color = colorItem\"\n >\n @if (colorItem.toUpperCase() === color) {\n <i class=\"fwe-icon fwe-icon-menu-check\"></i>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-top:after{content:\"\";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0 1px 4px #3333}.fwe-popover.fwe-popover-menu,.fwe-popover{background-color:var(--fwe-white);box-shadow:0 1px 4px #3333;border-radius:4px}.fwe-popover{padding:8px;font-size:var(--fwe-font-size-md);line-height:1rem}.fwe-popover-container{position:relative;display:inline-block;min-width:max-content}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translate(-8px)}.fwe-triangle.fwe-triangle-top:after{top:11px;left:3px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translate(-8px)}.fwe-triangle.fwe-triangle-bottom:after{top:-6px;left:3px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{top:2px;left:11px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{top:2px;left:-6px}.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{width:100%;margin-left:inherit;padding:0 8px 0 0;text-align:left;height:32px;max-height:32px;display:inline-flex;justify-content:unset}.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{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px;margin-right:0}.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 .fwe-svg-icon{margin-right:8px;margin-left:8px}.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{color:var(--fwe-black);background-color:#3333331a}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:#3333}.fwe-popover .fwe-popover-legend{display:table;margin:16px;line-height:24px}.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{position:relative;width:198px;height:198px;margin:-7px}.fwe-color-picker .fwe-gradient-picker .fwe-brightness-gradient{position:absolute;inset:7px;background-image:linear-gradient(transparent,#000)}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{position:absolute;inset:7px}.fwe-color-picker .fwe-vertical-picker,.fwe-color-picker .fwe-alpha-picker,.fwe-color-picker .fwe-hue-picker{position:relative;height:198px;width:14px;margin:-7px -3px -7px 18px}.fwe-color-picker .fwe-vertical-picker .fwe-picker-background,.fwe-color-picker .fwe-alpha-picker .fwe-picker-background,.fwe-color-picker .fwe-hue-picker .fwe-picker-background{margin:7px 3px;height:184px;width:8px;border-radius:4px}.fwe-color-picker .fwe-vertical-picker .fwe-knob,.fwe-color-picker .fwe-alpha-picker .fwe-knob,.fwe-color-picker .fwe-hue-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{position:relative;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator{flex-shrink:1;cursor:pointer;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type{font-size:var(--fwe-font-size-small);line-height:calc(var(--fwe-font-size-small) + 5px);font-weight:var(--fwe-font-weight-bold)}.fwe-color-picker .fwe-type-select .fwe-type-indicator:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-icon-arrows-collapse{margin-left:16px;line-height:16px}.fwe-color-picker .fwe-type-select .fwe-popover{position:absolute;z-index:1;top:24px;left:0}.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{opacity:0;margin-right:8px}.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-outer-spin-button,.fwe-color-picker input::-webkit-inner-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{width:75px;margin-right:16px}.fwe-color-picker .fwe-red-input,.fwe-color-picker .fwe-green-input{width:32px;margin-right:8px}.fwe-color-picker .fwe-blue-input{width:32px}.fwe-color-picker .fwe-alpha-input span input{width:48px;padding-right:16px!important}.fwe-color-picker .fwe-alpha-input .fwe-percent-char{margin-left:-16px}.fwe-color-picker .fwe-color-grid{display:flex;flex-wrap:wrap;margin-right:-8px;margin-bottom:-8px}.fwe-color-picker .fwe-color-grid .fwe-color-item{align-items:center;display:flex;justify-content:center;color:#fff;height:24px;width:24px;border-radius:4px;margin-right:8px;margin-bottom:8px}.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;display:flex;justify-content:center;height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);color:var(--fwe-control);margin-right:8px;margin-bottom:8px}.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{position:absolute;z-index:1;height:14px;width:14px;border-radius:50%;border:2px solid white;box-shadow:0 0 4px #00000026}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4381
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"fwe-color-picker\" [class.fwe-alpha-active]=\"useAlpha\">\n @if (!paletteOnly) {\n <div class=\"fwe-d-flex\">\n <div class=\"fwe-gradient-picker\">\n <div class=\"fwe-saturation-gradient\" [ngStyle]=\"{ 'background-image': getSaturationGradient() }\"></div>\n <div class=\"fwe-brightness-gradient\" (click)=\"onGradientClick($event)\"></div>\n <div\n class=\"fwe-knob\"\n cdkDragBoundary=\".fwe-gradient-picker\"\n cdkDrag\n [cdkDragFreeDragPosition]=\"{ x: saturationKnobOffset, y: valueKnobOffset }\"\n (cdkDragMoved)=\"onGradientDrag($event)\"\n [style.background]=\"color\"\n ></div>\n </div>\n <div class=\"fwe-hue-picker\">\n <div class=\"fwe-picker-background\" (click)=\"onHueClick($event)\"></div>\n <div\n class=\"fwe-knob\"\n cdkDragBoundary=\".fwe-hue-picker\"\n cdkDragLockAxis=\"y\"\n cdkDrag\n [cdkDragFreeDragPosition]=\"{ x: 3, y: hueKnobOffset }\"\n (cdkDragMoved)=\"onHueDrag($event)\"\n [style.background]=\"'hsl(' + hue * 360 + ', 100%, 50%)'\"\n ></div>\n </div>\n @if (useAlpha) {\n <div class=\"fwe-alpha-picker\">\n <svg\n class=\"fwe-no-color-pattern\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n id=\"canvas1\"\n width=\"8\"\n height=\"184\"\n >\n <defs>\n <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n </pattern>\n </defs>\n <rect x=\"0\" y=\"0\" rx=\"4\" ry=\"4\" width=\"8\" height=\"184\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n </svg>\n <div\n class=\"fwe-picker-background\"\n (click)=\"onAlphaClick($event)\"\n [ngStyle]=\"{ 'background-image': 'linear-gradient( ' + color + ' , transparent)' }\"\n ></div>\n <div\n class=\"fwe-knob\"\n cdkDragBoundary=\".fwe-alpha-picker\"\n cdkDragLockAxis=\"y\"\n cdkDrag\n [cdkDragFreeDragPosition]=\"{ x: 3, y: alphaKnobOffset }\"\n (cdkDragMoved)=\"onAlphaDrag($event)\"\n [style.background]=\"color\"\n ></div>\n </div>\n }\n </div>\n }\n\n @if (!paletteOnly) {\n <div class=\"fwe-mt-s\">\n <div class=\"fwe-type-select\">\n <div class=\"fwe-type-indicator\" (click)=\"isSelectOpen = !isSelectOpen\">\n <span class=\"fwe-input-type\">{{ inputType }}</span>\n <i class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n </div>\n @if (isSelectOpen) {\n <div class=\"fwe-popover\">\n <div class=\"fwe-type-item\" (click)=\"onChangeType('HEX')\" [class.fwe-selected]=\"inputType === 'HEX'\">\n <i class=\"fwe-icon fwe-icon-menu-check\"></i> HEX\n </div>\n <div class=\"fwe-type-item\" (click)=\"onChangeType('RGB')\" [class.fwe-selected]=\"inputType === 'RGB'\">\n <i class=\"fwe-icon fwe-icon-menu-check\"></i> RGB\n </div>\n </div>\n }\n </div>\n <div class=\"fwe-d-flex\">\n @if (inputType === 'HEX') {\n <label class=\"fwe-input-text fwe-hex-input\">\n <input type=\"text\" [(ngModel)]=\"hexInputColor\" (blur)=\"onHexBlur()\" (input)=\"onHexInput()\" />\n </label>\n }\n @if (inputType === 'RGB') {\n <label class=\"fwe-input-text fwe-red-input\">\n <input type=\"number\" [(ngModel)]=\"redInput\" (input)=\"onRgbInput(redInput, 'r')\" />\n </label>\n <label class=\"fwe-input-text fwe-green-input\">\n <input type=\"number\" [(ngModel)]=\"greenInput\" (input)=\"onRgbInput(greenInput, 'g')\" />\n </label>\n <label class=\"fwe-input-text fwe-blue-input\">\n <input type=\"number\" min=\"0\" max=\"255\" [(ngModel)]=\"blueInput\" (input)=\"onRgbInput(blueInput, 'b')\" />\n </label>\n }\n @if (useAlpha) {\n <label class=\"fwe-input-text fwe-alpha-input fwe-ml-auto\">\n <span>\n <input type=\"number\" min=\"0\" max=\"100\" [(ngModel)]=\"alphaInput\" (input)=\"onAlphaInput(alphaInput)\" />\n <span class=\"fwe-percent-char\">%</span>\n </span>\n </label>\n }\n </div>\n </div>\n }\n\n @if (palette && palette.length) {\n <div class=\"fwe-mt-xs fwe-color-grid\">\n <div class=\"fwe-remove-color-button\" (click)=\"onRemoveColor()\">\n <svg\n class=\"fwe-no-color-pattern\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n id=\"canvas1\"\n width=\"18\"\n height=\"18\"\n >\n <defs>\n <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n </pattern>\n </defs>\n <rect x=\"0\" y=\"0\" rx=\"0\" ry=\"0\" width=\"18\" height=\"18\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n </svg>\n <i class=\"fwe-icon fwe-icon-menu-check\" [class.fwe-color-text]=\"!color\"></i>\n </div>\n @for (colorItem of palette; track colorItem) {\n <div\n class=\"fwe-color-item\"\n [class.fwe-white-item]=\"colorItem.toUpperCase() === '#FFFFFF'\"\n [style.background]=\"colorItem\"\n (click)=\"color = colorItem\"\n >\n @if (colorItem.toUpperCase() === color) {\n <i class=\"fwe-icon fwe-icon-menu-check\"></i>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-top:after{content:\"\";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0 1px 4px #3333}.fwe-popover-container{position:relative;display:inline-block;min-width:max-content}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translate(-8px)}.fwe-triangle.fwe-triangle-top:after{top:11px;left:3px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translate(-8px)}.fwe-triangle.fwe-triangle-bottom:after{top:-6px;left:3px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{top:2px;left:11px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{top:2px;left:-6px}.fwe-popover{background-color:var(--fwe-white);box-shadow:0 1px 4px #3333;border-radius:4px;padding:8px;font-size:var(--fwe-font-size-md);line-height:1rem}.fwe-popover--legend{display:table;padding:16px;line-height:24px}.fwe-popover--legend .fwe-popover-legend-content{display:table-row}.fwe-popover--legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover--legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fwe-popover--menu{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.fwe-popover--menu button{all:unset;cursor:pointer;border-bottom:none;min-height:36px;padding:0;height:36px;width:100%;display:flex;align-items:center;color:var(--fwe-text)}.fwe-popover--menu button .fwe-svg-icon{margin-right:8px;margin-left:8px}.fwe-popover--menu button i{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px;margin-right:0}.fwe-popover--menu button i:before{display:inline-flex}.fwe-popover--menu button span{display:inline-flex;margin-right:8px}.fwe-popover--menu button:hover{background-color:#3333331a}.fwe-popover--menu button:active{background-color:#3333}.fwe-popover--content{width:auto;min-width:max-content;max-width:none;padding:16px}.fwe-popover-menu-trigger{background:none;border:none;padding:0;margin:0;line-height:0;display:block;cursor:pointer}.fwe-popover-menu-trigger:hover{color:var(--fwe-hero)}.fwe-color-picker{width:216px}.fwe-color-picker.fwe-alpha-active{width:245px}.fwe-color-picker .fwe-gradient-picker{position:relative;width:198px;height:198px;margin:-7px}.fwe-color-picker .fwe-gradient-picker .fwe-brightness-gradient{position:absolute;inset:7px;background-image:linear-gradient(transparent,#000)}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{position:absolute;inset:7px}.fwe-color-picker .fwe-vertical-picker,.fwe-color-picker .fwe-alpha-picker,.fwe-color-picker .fwe-hue-picker{position:relative;height:198px;width:14px;margin:-7px -3px -7px 18px}.fwe-color-picker .fwe-vertical-picker .fwe-picker-background,.fwe-color-picker .fwe-alpha-picker .fwe-picker-background,.fwe-color-picker .fwe-hue-picker .fwe-picker-background{margin:7px 3px;height:184px;width:8px;border-radius:4px}.fwe-color-picker .fwe-vertical-picker .fwe-knob,.fwe-color-picker .fwe-alpha-picker .fwe-knob,.fwe-color-picker .fwe-hue-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{position:relative;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator{flex-shrink:1;cursor:pointer;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type{font-size:var(--fwe-font-size-small);line-height:calc(var(--fwe-font-size-small) + 5px);font-weight:var(--fwe-font-weight-bold)}.fwe-color-picker .fwe-type-select .fwe-type-indicator:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-icon-arrows-collapse{margin-left:16px;line-height:16px}.fwe-color-picker .fwe-type-select .fwe-popover{position:absolute;z-index:1;top:24px;left:0}.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{opacity:0;margin-right:8px}.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-outer-spin-button,.fwe-color-picker input::-webkit-inner-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{width:75px;margin-right:16px}.fwe-color-picker .fwe-red-input,.fwe-color-picker .fwe-green-input{width:32px;margin-right:8px}.fwe-color-picker .fwe-blue-input{width:32px}.fwe-color-picker .fwe-alpha-input span input{width:48px;padding-right:16px!important}.fwe-color-picker .fwe-alpha-input .fwe-percent-char{margin-left:-16px}.fwe-color-picker .fwe-color-grid{display:flex;flex-wrap:wrap;margin-right:-8px;margin-bottom:-8px}.fwe-color-picker .fwe-color-grid .fwe-color-item{align-items:center;display:flex;justify-content:center;color:#fff;height:24px;width:24px;border-radius:4px;margin-right:8px;margin-bottom:8px}.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;display:flex;justify-content:center;height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);color:var(--fwe-control);margin-right:8px;margin-bottom:8px}.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{position:absolute;z-index:1;height:14px;width:14px;border-radius:50%;border:2px solid white;box-shadow:0 0 4px #00000026}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4382
4382
|
}
|
|
4383
4383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FngColorPickerComponent, decorators: [{
|
|
4384
4384
|
type: Component,
|
|
@@ -4388,7 +4388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
4388
4388
|
useExisting: forwardRef(() => FngColorPickerComponent),
|
|
4389
4389
|
multi: true
|
|
4390
4390
|
}
|
|
4391
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"fwe-color-picker\" [class.fwe-alpha-active]=\"useAlpha\">\n @if (!paletteOnly) {\n <div class=\"fwe-d-flex\">\n <div class=\"fwe-gradient-picker\">\n <div class=\"fwe-saturation-gradient\" [ngStyle]=\"{ 'background-image': getSaturationGradient() }\"></div>\n <div class=\"fwe-brightness-gradient\" (click)=\"onGradientClick($event)\"></div>\n <div\n class=\"fwe-knob\"\n cdkDragBoundary=\".fwe-gradient-picker\"\n cdkDrag\n [cdkDragFreeDragPosition]=\"{ x: saturationKnobOffset, y: valueKnobOffset }\"\n (cdkDragMoved)=\"onGradientDrag($event)\"\n [style.background]=\"color\"\n ></div>\n </div>\n <div class=\"fwe-hue-picker\">\n <div class=\"fwe-picker-background\" (click)=\"onHueClick($event)\"></div>\n <div\n class=\"fwe-knob\"\n cdkDragBoundary=\".fwe-hue-picker\"\n cdkDragLockAxis=\"y\"\n cdkDrag\n [cdkDragFreeDragPosition]=\"{ x: 3, y: hueKnobOffset }\"\n (cdkDragMoved)=\"onHueDrag($event)\"\n [style.background]=\"'hsl(' + hue * 360 + ', 100%, 50%)'\"\n ></div>\n </div>\n @if (useAlpha) {\n <div class=\"fwe-alpha-picker\">\n <svg\n class=\"fwe-no-color-pattern\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n id=\"canvas1\"\n width=\"8\"\n height=\"184\"\n >\n <defs>\n <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n </pattern>\n </defs>\n <rect x=\"0\" y=\"0\" rx=\"4\" ry=\"4\" width=\"8\" height=\"184\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n </svg>\n <div\n class=\"fwe-picker-background\"\n (click)=\"onAlphaClick($event)\"\n [ngStyle]=\"{ 'background-image': 'linear-gradient( ' + color + ' , transparent)' }\"\n ></div>\n <div\n class=\"fwe-knob\"\n cdkDragBoundary=\".fwe-alpha-picker\"\n cdkDragLockAxis=\"y\"\n cdkDrag\n [cdkDragFreeDragPosition]=\"{ x: 3, y: alphaKnobOffset }\"\n (cdkDragMoved)=\"onAlphaDrag($event)\"\n [style.background]=\"color\"\n ></div>\n </div>\n }\n </div>\n }\n\n @if (!paletteOnly) {\n <div class=\"fwe-mt-s\">\n <div class=\"fwe-type-select\">\n <div class=\"fwe-type-indicator\" (click)=\"isSelectOpen = !isSelectOpen\">\n <span class=\"fwe-input-type\">{{ inputType }}</span>\n <i class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n </div>\n @if (isSelectOpen) {\n <div class=\"fwe-popover\">\n <div class=\"fwe-type-item\" (click)=\"onChangeType('HEX')\" [class.fwe-selected]=\"inputType === 'HEX'\">\n <i class=\"fwe-icon fwe-icon-menu-check\"></i> HEX\n </div>\n <div class=\"fwe-type-item\" (click)=\"onChangeType('RGB')\" [class.fwe-selected]=\"inputType === 'RGB'\">\n <i class=\"fwe-icon fwe-icon-menu-check\"></i> RGB\n </div>\n </div>\n }\n </div>\n <div class=\"fwe-d-flex\">\n @if (inputType === 'HEX') {\n <label class=\"fwe-input-text fwe-hex-input\">\n <input type=\"text\" [(ngModel)]=\"hexInputColor\" (blur)=\"onHexBlur()\" (input)=\"onHexInput()\" />\n </label>\n }\n @if (inputType === 'RGB') {\n <label class=\"fwe-input-text fwe-red-input\">\n <input type=\"number\" [(ngModel)]=\"redInput\" (input)=\"onRgbInput(redInput, 'r')\" />\n </label>\n <label class=\"fwe-input-text fwe-green-input\">\n <input type=\"number\" [(ngModel)]=\"greenInput\" (input)=\"onRgbInput(greenInput, 'g')\" />\n </label>\n <label class=\"fwe-input-text fwe-blue-input\">\n <input type=\"number\" min=\"0\" max=\"255\" [(ngModel)]=\"blueInput\" (input)=\"onRgbInput(blueInput, 'b')\" />\n </label>\n }\n @if (useAlpha) {\n <label class=\"fwe-input-text fwe-alpha-input fwe-ml-auto\">\n <span>\n <input type=\"number\" min=\"0\" max=\"100\" [(ngModel)]=\"alphaInput\" (input)=\"onAlphaInput(alphaInput)\" />\n <span class=\"fwe-percent-char\">%</span>\n </span>\n </label>\n }\n </div>\n </div>\n }\n\n @if (palette && palette.length) {\n <div class=\"fwe-mt-xs fwe-color-grid\">\n <div class=\"fwe-remove-color-button\" (click)=\"onRemoveColor()\">\n <svg\n class=\"fwe-no-color-pattern\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n id=\"canvas1\"\n width=\"18\"\n height=\"18\"\n >\n <defs>\n <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n </pattern>\n </defs>\n <rect x=\"0\" y=\"0\" rx=\"0\" ry=\"0\" width=\"18\" height=\"18\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n </svg>\n <i class=\"fwe-icon fwe-icon-menu-check\" [class.fwe-color-text]=\"!color\"></i>\n </div>\n @for (colorItem of palette; track colorItem) {\n <div\n class=\"fwe-color-item\"\n [class.fwe-white-item]=\"colorItem.toUpperCase() === '#FFFFFF'\"\n [style.background]=\"colorItem\"\n (click)=\"color = colorItem\"\n >\n @if (colorItem.toUpperCase() === color) {\n <i class=\"fwe-icon fwe-icon-menu-check\"></i>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-top:after{content:\"\";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0 1px 4px #3333}.fwe-popover.fwe-popover-menu,.fwe-popover{background-color:var(--fwe-white);box-shadow:0 1px 4px #3333;border-radius:4px}.fwe-popover{padding:8px;font-size:var(--fwe-font-size-md);line-height:1rem}.fwe-popover-container{position:relative;display:inline-block;min-width:max-content}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translate(-8px)}.fwe-triangle.fwe-triangle-top:after{top:11px;left:3px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translate(-8px)}.fwe-triangle.fwe-triangle-bottom:after{top:-6px;left:3px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{top:2px;left:11px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{top:2px;left:-6px}.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{width:100%;margin-left:inherit;padding:0 8px 0 0;text-align:left;height:32px;max-height:32px;display:inline-flex;justify-content:unset}.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{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px;margin-right:0}.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 .fwe-svg-icon{margin-right:8px;margin-left:8px}.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{color:var(--fwe-black);background-color:#3333331a}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:#3333}.fwe-popover .fwe-popover-legend{display:table;margin:16px;line-height:24px}.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{position:relative;width:198px;height:198px;margin:-7px}.fwe-color-picker .fwe-gradient-picker .fwe-brightness-gradient{position:absolute;inset:7px;background-image:linear-gradient(transparent,#000)}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{position:absolute;inset:7px}.fwe-color-picker .fwe-vertical-picker,.fwe-color-picker .fwe-alpha-picker,.fwe-color-picker .fwe-hue-picker{position:relative;height:198px;width:14px;margin:-7px -3px -7px 18px}.fwe-color-picker .fwe-vertical-picker .fwe-picker-background,.fwe-color-picker .fwe-alpha-picker .fwe-picker-background,.fwe-color-picker .fwe-hue-picker .fwe-picker-background{margin:7px 3px;height:184px;width:8px;border-radius:4px}.fwe-color-picker .fwe-vertical-picker .fwe-knob,.fwe-color-picker .fwe-alpha-picker .fwe-knob,.fwe-color-picker .fwe-hue-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{position:relative;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator{flex-shrink:1;cursor:pointer;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type{font-size:var(--fwe-font-size-small);line-height:calc(var(--fwe-font-size-small) + 5px);font-weight:var(--fwe-font-weight-bold)}.fwe-color-picker .fwe-type-select .fwe-type-indicator:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-icon-arrows-collapse{margin-left:16px;line-height:16px}.fwe-color-picker .fwe-type-select .fwe-popover{position:absolute;z-index:1;top:24px;left:0}.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{opacity:0;margin-right:8px}.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-outer-spin-button,.fwe-color-picker input::-webkit-inner-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{width:75px;margin-right:16px}.fwe-color-picker .fwe-red-input,.fwe-color-picker .fwe-green-input{width:32px;margin-right:8px}.fwe-color-picker .fwe-blue-input{width:32px}.fwe-color-picker .fwe-alpha-input span input{width:48px;padding-right:16px!important}.fwe-color-picker .fwe-alpha-input .fwe-percent-char{margin-left:-16px}.fwe-color-picker .fwe-color-grid{display:flex;flex-wrap:wrap;margin-right:-8px;margin-bottom:-8px}.fwe-color-picker .fwe-color-grid .fwe-color-item{align-items:center;display:flex;justify-content:center;color:#fff;height:24px;width:24px;border-radius:4px;margin-right:8px;margin-bottom:8px}.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;display:flex;justify-content:center;height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);color:var(--fwe-control);margin-right:8px;margin-bottom:8px}.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{position:absolute;z-index:1;height:14px;width:14px;border-radius:50%;border:2px solid white;box-shadow:0 0 4px #00000026}\n"] }]
|
|
4391
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"fwe-color-picker\" [class.fwe-alpha-active]=\"useAlpha\">\n @if (!paletteOnly) {\n <div class=\"fwe-d-flex\">\n <div class=\"fwe-gradient-picker\">\n <div class=\"fwe-saturation-gradient\" [ngStyle]=\"{ 'background-image': getSaturationGradient() }\"></div>\n <div class=\"fwe-brightness-gradient\" (click)=\"onGradientClick($event)\"></div>\n <div\n class=\"fwe-knob\"\n cdkDragBoundary=\".fwe-gradient-picker\"\n cdkDrag\n [cdkDragFreeDragPosition]=\"{ x: saturationKnobOffset, y: valueKnobOffset }\"\n (cdkDragMoved)=\"onGradientDrag($event)\"\n [style.background]=\"color\"\n ></div>\n </div>\n <div class=\"fwe-hue-picker\">\n <div class=\"fwe-picker-background\" (click)=\"onHueClick($event)\"></div>\n <div\n class=\"fwe-knob\"\n cdkDragBoundary=\".fwe-hue-picker\"\n cdkDragLockAxis=\"y\"\n cdkDrag\n [cdkDragFreeDragPosition]=\"{ x: 3, y: hueKnobOffset }\"\n (cdkDragMoved)=\"onHueDrag($event)\"\n [style.background]=\"'hsl(' + hue * 360 + ', 100%, 50%)'\"\n ></div>\n </div>\n @if (useAlpha) {\n <div class=\"fwe-alpha-picker\">\n <svg\n class=\"fwe-no-color-pattern\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n id=\"canvas1\"\n width=\"8\"\n height=\"184\"\n >\n <defs>\n <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n </pattern>\n </defs>\n <rect x=\"0\" y=\"0\" rx=\"4\" ry=\"4\" width=\"8\" height=\"184\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n </svg>\n <div\n class=\"fwe-picker-background\"\n (click)=\"onAlphaClick($event)\"\n [ngStyle]=\"{ 'background-image': 'linear-gradient( ' + color + ' , transparent)' }\"\n ></div>\n <div\n class=\"fwe-knob\"\n cdkDragBoundary=\".fwe-alpha-picker\"\n cdkDragLockAxis=\"y\"\n cdkDrag\n [cdkDragFreeDragPosition]=\"{ x: 3, y: alphaKnobOffset }\"\n (cdkDragMoved)=\"onAlphaDrag($event)\"\n [style.background]=\"color\"\n ></div>\n </div>\n }\n </div>\n }\n\n @if (!paletteOnly) {\n <div class=\"fwe-mt-s\">\n <div class=\"fwe-type-select\">\n <div class=\"fwe-type-indicator\" (click)=\"isSelectOpen = !isSelectOpen\">\n <span class=\"fwe-input-type\">{{ inputType }}</span>\n <i class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n </div>\n @if (isSelectOpen) {\n <div class=\"fwe-popover\">\n <div class=\"fwe-type-item\" (click)=\"onChangeType('HEX')\" [class.fwe-selected]=\"inputType === 'HEX'\">\n <i class=\"fwe-icon fwe-icon-menu-check\"></i> HEX\n </div>\n <div class=\"fwe-type-item\" (click)=\"onChangeType('RGB')\" [class.fwe-selected]=\"inputType === 'RGB'\">\n <i class=\"fwe-icon fwe-icon-menu-check\"></i> RGB\n </div>\n </div>\n }\n </div>\n <div class=\"fwe-d-flex\">\n @if (inputType === 'HEX') {\n <label class=\"fwe-input-text fwe-hex-input\">\n <input type=\"text\" [(ngModel)]=\"hexInputColor\" (blur)=\"onHexBlur()\" (input)=\"onHexInput()\" />\n </label>\n }\n @if (inputType === 'RGB') {\n <label class=\"fwe-input-text fwe-red-input\">\n <input type=\"number\" [(ngModel)]=\"redInput\" (input)=\"onRgbInput(redInput, 'r')\" />\n </label>\n <label class=\"fwe-input-text fwe-green-input\">\n <input type=\"number\" [(ngModel)]=\"greenInput\" (input)=\"onRgbInput(greenInput, 'g')\" />\n </label>\n <label class=\"fwe-input-text fwe-blue-input\">\n <input type=\"number\" min=\"0\" max=\"255\" [(ngModel)]=\"blueInput\" (input)=\"onRgbInput(blueInput, 'b')\" />\n </label>\n }\n @if (useAlpha) {\n <label class=\"fwe-input-text fwe-alpha-input fwe-ml-auto\">\n <span>\n <input type=\"number\" min=\"0\" max=\"100\" [(ngModel)]=\"alphaInput\" (input)=\"onAlphaInput(alphaInput)\" />\n <span class=\"fwe-percent-char\">%</span>\n </span>\n </label>\n }\n </div>\n </div>\n }\n\n @if (palette && palette.length) {\n <div class=\"fwe-mt-xs fwe-color-grid\">\n <div class=\"fwe-remove-color-button\" (click)=\"onRemoveColor()\">\n <svg\n class=\"fwe-no-color-pattern\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n id=\"canvas1\"\n width=\"18\"\n height=\"18\"\n >\n <defs>\n <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e2e5e8\" />\n <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n </pattern>\n </defs>\n <rect x=\"0\" y=\"0\" rx=\"0\" ry=\"0\" width=\"18\" height=\"18\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n </svg>\n <i class=\"fwe-icon fwe-icon-menu-check\" [class.fwe-color-text]=\"!color\"></i>\n </div>\n @for (colorItem of palette; track colorItem) {\n <div\n class=\"fwe-color-item\"\n [class.fwe-white-item]=\"colorItem.toUpperCase() === '#FFFFFF'\"\n [style.background]=\"colorItem\"\n (click)=\"color = colorItem\"\n >\n @if (colorItem.toUpperCase() === color) {\n <i class=\"fwe-icon fwe-icon-menu-check\"></i>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-top:after{content:\"\";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0 1px 4px #3333}.fwe-popover-container{position:relative;display:inline-block;min-width:max-content}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translate(-8px)}.fwe-triangle.fwe-triangle-top:after{top:11px;left:3px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translate(-8px)}.fwe-triangle.fwe-triangle-bottom:after{top:-6px;left:3px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{top:2px;left:11px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{top:2px;left:-6px}.fwe-popover{background-color:var(--fwe-white);box-shadow:0 1px 4px #3333;border-radius:4px;padding:8px;font-size:var(--fwe-font-size-md);line-height:1rem}.fwe-popover--legend{display:table;padding:16px;line-height:24px}.fwe-popover--legend .fwe-popover-legend-content{display:table-row}.fwe-popover--legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover--legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fwe-popover--menu{font-size:var(--fwe-font-size-base);line-height:1.5rem;padding:16px}.fwe-popover--menu button{all:unset;cursor:pointer;border-bottom:none;min-height:36px;padding:0;height:36px;width:100%;display:flex;align-items:center;color:var(--fwe-text)}.fwe-popover--menu button .fwe-svg-icon{margin-right:8px;margin-left:8px}.fwe-popover--menu button i{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px;margin-right:0}.fwe-popover--menu button i:before{display:inline-flex}.fwe-popover--menu button span{display:inline-flex;margin-right:8px}.fwe-popover--menu button:hover{background-color:#3333331a}.fwe-popover--menu button:active{background-color:#3333}.fwe-popover--content{width:auto;min-width:max-content;max-width:none;padding:16px}.fwe-popover-menu-trigger{background:none;border:none;padding:0;margin:0;line-height:0;display:block;cursor:pointer}.fwe-popover-menu-trigger:hover{color:var(--fwe-hero)}.fwe-color-picker{width:216px}.fwe-color-picker.fwe-alpha-active{width:245px}.fwe-color-picker .fwe-gradient-picker{position:relative;width:198px;height:198px;margin:-7px}.fwe-color-picker .fwe-gradient-picker .fwe-brightness-gradient{position:absolute;inset:7px;background-image:linear-gradient(transparent,#000)}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{position:absolute;inset:7px}.fwe-color-picker .fwe-vertical-picker,.fwe-color-picker .fwe-alpha-picker,.fwe-color-picker .fwe-hue-picker{position:relative;height:198px;width:14px;margin:-7px -3px -7px 18px}.fwe-color-picker .fwe-vertical-picker .fwe-picker-background,.fwe-color-picker .fwe-alpha-picker .fwe-picker-background,.fwe-color-picker .fwe-hue-picker .fwe-picker-background{margin:7px 3px;height:184px;width:8px;border-radius:4px}.fwe-color-picker .fwe-vertical-picker .fwe-knob,.fwe-color-picker .fwe-alpha-picker .fwe-knob,.fwe-color-picker .fwe-hue-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{position:relative;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator{flex-shrink:1;cursor:pointer;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type{font-size:var(--fwe-font-size-small);line-height:calc(var(--fwe-font-size-small) + 5px);font-weight:var(--fwe-font-weight-bold)}.fwe-color-picker .fwe-type-select .fwe-type-indicator:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-icon-arrows-collapse{margin-left:16px;line-height:16px}.fwe-color-picker .fwe-type-select .fwe-popover{position:absolute;z-index:1;top:24px;left:0}.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{opacity:0;margin-right:8px}.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-outer-spin-button,.fwe-color-picker input::-webkit-inner-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{width:75px;margin-right:16px}.fwe-color-picker .fwe-red-input,.fwe-color-picker .fwe-green-input{width:32px;margin-right:8px}.fwe-color-picker .fwe-blue-input{width:32px}.fwe-color-picker .fwe-alpha-input span input{width:48px;padding-right:16px!important}.fwe-color-picker .fwe-alpha-input .fwe-percent-char{margin-left:-16px}.fwe-color-picker .fwe-color-grid{display:flex;flex-wrap:wrap;margin-right:-8px;margin-bottom:-8px}.fwe-color-picker .fwe-color-grid .fwe-color-item{align-items:center;display:flex;justify-content:center;color:#fff;height:24px;width:24px;border-radius:4px;margin-right:8px;margin-bottom:8px}.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;display:flex;justify-content:center;height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);color:var(--fwe-control);margin-right:8px;margin-bottom:8px}.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{position:absolute;z-index:1;height:14px;width:14px;border-radius:50%;border:2px solid white;box-shadow:0 0 4px #00000026}\n"] }]
|
|
4392
4392
|
}], propDecorators: { useAlpha: [{
|
|
4393
4393
|
type: Input
|
|
4394
4394
|
}], alpha: [{
|