@festo-ui/angular 7.3.0-dev.492 → 7.3.0-dev.493

package/fesm2022/festo-ui-angular.mjs

@@ -1022,11 +1022,11 @@ class FngLegendComponent {
         this.popoverRef?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FngLegendComponent, deps: [{ token: FngPopoverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: FngLegendComponent, isStandalone: true, selector: "fng-legend", inputs: { items: "items", options: "options" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<ng-template #tpl>\n  <dl *ngIf=\"0 < items.length\" class=\"fng-legend\">\n    <div *ngFor=\"let item of items\" class=\"fng-legend-content\">\n      <dt>{{ item?.name }}</dt>\n      <dd>{{ item?.text }}</dd>\n    </div>\n  </dl>\n</ng-template>\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}.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}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=\" fwe-icon-\"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{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}.fng-legend{display:table;margin:16px;line-height:24px}.fng-legend .fng-legend-content{display:table-row}.fng-legend .fng-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fng-legend .fng-legend-content dd{display:table-cell;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: FngLegendComponent, isStandalone: true, selector: "fng-legend", inputs: { items: "items", options: "options" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<ng-template #tpl>\n  <dl *ngIf=\"0 < items.length\" class=\"fng-legend\">\n    <div *ngFor=\"let item of items\" class=\"fng-legend-content\">\n      <dt>{{ item?.name }}</dt>\n      <dd>{{ item?.text }}</dd>\n    </div>\n  </dl>\n</ng-template>\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}.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}.fng-legend{display:table;margin:16px;line-height:24px}.fng-legend .fng-legend-content{display:table-row}.fng-legend .fng-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fng-legend .fng-legend-content dd{display:table-cell;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FngLegendComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'fng-legend', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-template #tpl>\n  <dl *ngIf=\"0 < items.length\" class=\"fng-legend\">\n    <div *ngFor=\"let item of items\" class=\"fng-legend-content\">\n      <dt>{{ item?.name }}</dt>\n      <dd>{{ item?.text }}</dd>\n    </div>\n  </dl>\n</ng-template>\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}.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}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=\" fwe-icon-\"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{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}.fng-legend{display:table;margin:16px;line-height:24px}.fng-legend .fng-legend-content{display:table-row}.fng-legend .fng-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fng-legend .fng-legend-content dd{display:table-cell;margin:0}\n"] }]
+            args: [{ standalone: true, selector: 'fng-legend', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-template #tpl>\n  <dl *ngIf=\"0 < items.length\" class=\"fng-legend\">\n    <div *ngFor=\"let item of items\" class=\"fng-legend-content\">\n      <dt>{{ item?.name }}</dt>\n      <dd>{{ item?.text }}</dd>\n    </div>\n  </dl>\n</ng-template>\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}.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}.fng-legend{display:table;margin:16px;line-height:24px}.fng-legend .fng-legend-content{display:table-row}.fng-legend .fng-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fng-legend .fng-legend-content dd{display:table-cell;margin:0}\n"] }]
         }], ctorParameters: () => [{ type: FngPopoverService }], propDecorators: { items: [{
                 type: Input
             }], options: [{
@@ -4064,7 +4064,7 @@ class FngColorPickerComponent {
                 useExisting: forwardRef(() => FngColorPickerComponent),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"fwe-color-picker\" [class.fwe-alpha-active]=\"useAlpha\">\n  <div class=\"fwe-d-flex\" *ngIf=\"!paletteOnly\">\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\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\n    <div class=\"fwe-alpha-picker\" *ngIf=\"useAlpha\">\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=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\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\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  </div>\n\n  <div class=\"fwe-mt-s\" *ngIf=\"!paletteOnly\">\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      <div class=\"fwe-popover\" *ngIf=\"isSelectOpen\">\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    </div>\n\n    <div class=\"fwe-d-flex\">\n      <ng-container *ngIf=\"inputType === 'HEX'\">\n        <label class=\"fwe-input-text fwe-hex-input\">\n          <input type=\"text\" [(ngModel)]=\"hexInputColor\" (blur)=\"onHexBlur()\" (input)=\"onHexInput()\" />\n        </label>\n      </ng-container>\n      <ng-container *ngIf=\"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      </ng-container>\n\n      <label class=\"fwe-input-text fwe-alpha-input fwe-ml-auto\" *ngIf=\"useAlpha\">\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    </div>\n  </div>\n\n  <div class=\"fwe-mt-xs fwe-color-grid\" *ngIf=\"palette && palette.length\">\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=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\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    <ng-container *ngFor=\"let colorItem of palette\">\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        <i class=\"fwe-icon fwe-icon-menu-check\" *ngIf=\"colorItem.toUpperCase() === color\"></i>\n      </div>\n    </ng-container>\n  </div>\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}.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}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=\" fwe-icon-\"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"fwe-color-picker\" [class.fwe-alpha-active]=\"useAlpha\">\n  <div class=\"fwe-d-flex\" *ngIf=\"!paletteOnly\">\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\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\n    <div class=\"fwe-alpha-picker\" *ngIf=\"useAlpha\">\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=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\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\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  </div>\n\n  <div class=\"fwe-mt-s\" *ngIf=\"!paletteOnly\">\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      <div class=\"fwe-popover\" *ngIf=\"isSelectOpen\">\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    </div>\n\n    <div class=\"fwe-d-flex\">\n      <ng-container *ngIf=\"inputType === 'HEX'\">\n        <label class=\"fwe-input-text fwe-hex-input\">\n          <input type=\"text\" [(ngModel)]=\"hexInputColor\" (blur)=\"onHexBlur()\" (input)=\"onHexInput()\" />\n        </label>\n      </ng-container>\n      <ng-container *ngIf=\"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      </ng-container>\n\n      <label class=\"fwe-input-text fwe-alpha-input fwe-ml-auto\" *ngIf=\"useAlpha\">\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    </div>\n  </div>\n\n  <div class=\"fwe-mt-xs fwe-color-grid\" *ngIf=\"palette && palette.length\">\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=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\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    <ng-container *ngFor=\"let colorItem of palette\">\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        <i class=\"fwe-icon fwe-icon-menu-check\" *ngIf=\"colorItem.toUpperCase() === color\"></i>\n      </div>\n    </ng-container>\n  </div>\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}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FngColorPickerComponent, decorators: [{
             type: Component,
@@ -4074,7 +4074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                             useExisting: forwardRef(() => FngColorPickerComponent),
                             multi: true
                         }
-                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"fwe-color-picker\" [class.fwe-alpha-active]=\"useAlpha\">\n  <div class=\"fwe-d-flex\" *ngIf=\"!paletteOnly\">\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\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\n    <div class=\"fwe-alpha-picker\" *ngIf=\"useAlpha\">\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=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\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\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  </div>\n\n  <div class=\"fwe-mt-s\" *ngIf=\"!paletteOnly\">\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      <div class=\"fwe-popover\" *ngIf=\"isSelectOpen\">\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    </div>\n\n    <div class=\"fwe-d-flex\">\n      <ng-container *ngIf=\"inputType === 'HEX'\">\n        <label class=\"fwe-input-text fwe-hex-input\">\n          <input type=\"text\" [(ngModel)]=\"hexInputColor\" (blur)=\"onHexBlur()\" (input)=\"onHexInput()\" />\n        </label>\n      </ng-container>\n      <ng-container *ngIf=\"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      </ng-container>\n\n      <label class=\"fwe-input-text fwe-alpha-input fwe-ml-auto\" *ngIf=\"useAlpha\">\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    </div>\n  </div>\n\n  <div class=\"fwe-mt-xs fwe-color-grid\" *ngIf=\"palette && palette.length\">\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=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\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    <ng-container *ngFor=\"let colorItem of palette\">\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        <i class=\"fwe-icon fwe-icon-menu-check\" *ngIf=\"colorItem.toUpperCase() === color\"></i>\n      </div>\n    </ng-container>\n  </div>\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}.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}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=\" fwe-icon-\"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{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"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"fwe-color-picker\" [class.fwe-alpha-active]=\"useAlpha\">\n  <div class=\"fwe-d-flex\" *ngIf=\"!paletteOnly\">\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\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\n    <div class=\"fwe-alpha-picker\" *ngIf=\"useAlpha\">\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=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\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\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  </div>\n\n  <div class=\"fwe-mt-s\" *ngIf=\"!paletteOnly\">\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      <div class=\"fwe-popover\" *ngIf=\"isSelectOpen\">\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    </div>\n\n    <div class=\"fwe-d-flex\">\n      <ng-container *ngIf=\"inputType === 'HEX'\">\n        <label class=\"fwe-input-text fwe-hex-input\">\n          <input type=\"text\" [(ngModel)]=\"hexInputColor\" (blur)=\"onHexBlur()\" (input)=\"onHexInput()\" />\n        </label>\n      </ng-container>\n      <ng-container *ngIf=\"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      </ng-container>\n\n      <label class=\"fwe-input-text fwe-alpha-input fwe-ml-auto\" *ngIf=\"useAlpha\">\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    </div>\n  </div>\n\n  <div class=\"fwe-mt-xs fwe-color-grid\" *ngIf=\"palette && palette.length\">\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=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\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    <ng-container *ngFor=\"let colorItem of palette\">\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        <i class=\"fwe-icon fwe-icon-menu-check\" *ngIf=\"colorItem.toUpperCase() === color\"></i>\n      </div>\n    </ng-container>\n  </div>\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}.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"] }]
         }], propDecorators: { useAlpha: [{
                 type: Input
             }], alpha: [{