@festo-ui/angular 3.1.0-pre-20220328.2 → 3.1.0-pre-20220331.4

package/esm2020/lib/forms/checkbox/checkbox.component.mjs

@@ -111,7 +111,7 @@ CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             useExisting: forwardRef(() => CheckboxComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<label\n  class=\"fwe-checkbox-container\"\n  [class.fng-checkbox-large]=\"large\"\n  [class.fng-checkbox-invalid]=\"!valid || required\"\n  [class.fwe-disabled]=\"disabled\"\n  [class.fng-checkbox-indeterminate]=\"indeterminate\"\n  [class.fwe-checked]=\"checked\"\n  [attr.for]=\"inputId\"\n  [ngClass]=\"{\n    'fwe-label-below': labelPosition == 'below',\n    'fwe-label-before': labelPosition == 'before'\n  }\"\n>\n  <input\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.value]=\"value\"\n    [attr.name]=\"name\"\n    [checked]=\"checked\"\n    (change)=\"onInteractionEvent($event)\"\n    (click)=\"onInputClick($event)\"\n  />\n  <div class=\"fwe-checkbox-indicator-container\">\n    <div class=\"fwe-checkbox-indicator-background\"></div>\n    <ng-container *ngIf=\"!indeterminate && checked\">\n      <svg *ngIf=\"large\" width=\"24px\" height=\"24px\">\n        <path d=\"M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z\" fill=\"#fff\" />\n      </svg>\n      <svg *ngIf=\"!large\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\">\n        <path d=\"M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z\" fill=\"#fff\" />\n      </svg>\n    </ng-container>\n    <div *ngIf=\"indeterminate && !checked\" class=\"fwe-indeterminate-indicator\"></div>\n  </div>\n  <div class=\"fwe-checkbox-title\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [".fwe-checkbox-container{font-family:MetaPro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;flex-direction:row;align-items:flex-start}.fwe-checkbox-container.fwe-label-below{align-items:center;flex-direction:column}.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title{text-align:center;margin:8px 0 0}.fwe-checkbox-container.fwe-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title{margin:0 8px 0 0}.fwe-checkbox-container .fwe-checkbox-indicator-container{margin-top:4px;position:relative}.fwe-checkbox-container input{opacity:0;cursor:pointer;height:0;width:0}.fwe-checkbox-container .fwe-checkbox-title{margin-left:8px;line-height:24px;color:var(--fwe-text);-webkit-user-select:none;user-select:none}.fwe-checkbox-container .fwe-checkbox-indicator-background{box-sizing:border-box;background:var(--fwe-white);border:1px solid var(--fwe-text-light);border-radius:2px;height:16px;width:16px;transition:border-width .2s ease-out}.fwe-checkbox-container .fwe-indeterminate-indicator{position:absolute;height:2px;width:10px;top:7px;left:3px;background:white}.fwe-checkbox-container svg{display:block;position:absolute;top:0px;left:0px}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-container{margin-top:0}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-background{height:24px;width:24px;border-radius:4px}.fwe-checkbox-container.fng-checkbox-large .fwe-indeterminate-indicator{top:11px;width:14px;left:5px}.fwe-checkbox-container.fng-checkbox-large.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-large.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:12px solid var(--fwe-hero)}.fwe-checkbox-container:hover .fwe-checkbox-indicator-background{background-color:var(--fwe-control)}.fwe-checkbox-container:active .fwe-checkbox-indicator-background{background-color:var(--fwe-control-dark)}.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:8px solid var(--fwe-hero)}.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:hover .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-dark)}.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:active .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-darker)}.fwe-checkbox-container.fng-checkbox-invalid .fwe-checkbox-indicator-background{border:1px solid var(--fwe-red);background:var(--fwe-white)}.fwe-checkbox-container.fwe-disabled{cursor:default}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-disabled.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{background-color:var(--fwe-control);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fng-checkbox-invalid .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title{color:var(--fwe-text-disabled)}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], ngImport: i0, template: "<label\n  class=\"fwe-checkbox-container\"\n  [class.fng-checkbox-large]=\"large\"\n  [class.fng-checkbox-invalid]=\"!valid || required\"\n  [class.fwe-disabled]=\"disabled\"\n  [class.fng-checkbox-indeterminate]=\"indeterminate\"\n  [class.fwe-checked]=\"checked\"\n  [attr.for]=\"inputId\"\n  [ngClass]=\"{\n    'fwe-label-below': labelPosition == 'below',\n    'fwe-label-before': labelPosition == 'before'\n  }\"\n>\n  <input\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.value]=\"value\"\n    [attr.name]=\"name\"\n    [checked]=\"checked\"\n    (change)=\"onInteractionEvent($event)\"\n    (click)=\"onInputClick($event)\"\n  />\n  <div class=\"fwe-checkbox-indicator-container\">\n    <div class=\"fwe-checkbox-indicator-background\"></div>\n    <ng-container *ngIf=\"!indeterminate && checked\">\n      <svg *ngIf=\"large\" width=\"24px\" height=\"24px\">\n        <path d=\"M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z\" fill=\"#fff\" />\n      </svg>\n      <svg *ngIf=\"!large\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\">\n        <path d=\"M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z\" fill=\"#fff\" />\n      </svg>\n    </ng-container>\n    <div *ngIf=\"indeterminate && !checked\" class=\"fwe-indeterminate-indicator\"></div>\n  </div>\n  <div class=\"fwe-checkbox-title\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [".fwe-checkbox-container{font-family:var(--fwe-font-family-sans-serif);-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;flex-direction:row;align-items:flex-start}.fwe-checkbox-container.fwe-label-below{align-items:center;flex-direction:column}.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title{text-align:center;margin:8px 0 0}.fwe-checkbox-container.fwe-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title{margin:0 8px 0 0}.fwe-checkbox-container .fwe-checkbox-indicator-container{margin-top:4px;position:relative}.fwe-checkbox-container input{opacity:0;cursor:pointer;height:0;width:0}.fwe-checkbox-container .fwe-checkbox-title{margin-left:8px;line-height:24px;color:var(--fwe-text);-webkit-user-select:none;user-select:none}.fwe-checkbox-container .fwe-checkbox-indicator-background{box-sizing:border-box;background:var(--fwe-white);border:1px solid var(--fwe-text-light);border-radius:2px;height:16px;width:16px;transition:border-width .2s ease-out}.fwe-checkbox-container .fwe-indeterminate-indicator{position:absolute;height:2px;width:10px;top:7px;left:3px;background:white}.fwe-checkbox-container svg{display:block;position:absolute;top:0px;left:0px}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-container{margin-top:0}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-background{height:24px;width:24px;border-radius:4px}.fwe-checkbox-container.fng-checkbox-large .fwe-indeterminate-indicator{top:11px;width:14px;left:5px}.fwe-checkbox-container.fng-checkbox-large.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-large.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:12px solid var(--fwe-hero)}.fwe-checkbox-container:hover .fwe-checkbox-indicator-background{background-color:var(--fwe-control)}.fwe-checkbox-container:active .fwe-checkbox-indicator-background{background-color:var(--fwe-control-dark)}.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:8px solid var(--fwe-hero)}.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:hover .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-dark)}.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:active .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-darker)}.fwe-checkbox-container.fng-checkbox-invalid .fwe-checkbox-indicator-background{border:1px solid var(--fwe-red);background:var(--fwe-white)}.fwe-checkbox-container.fwe-disabled{cursor:default}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-disabled.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{background-color:var(--fwe-control);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fng-checkbox-invalid .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title{color:var(--fwe-text-disabled)}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fng-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
@@ -120,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true
                         }
-                    ], template: "<label\n  class=\"fwe-checkbox-container\"\n  [class.fng-checkbox-large]=\"large\"\n  [class.fng-checkbox-invalid]=\"!valid || required\"\n  [class.fwe-disabled]=\"disabled\"\n  [class.fng-checkbox-indeterminate]=\"indeterminate\"\n  [class.fwe-checked]=\"checked\"\n  [attr.for]=\"inputId\"\n  [ngClass]=\"{\n    'fwe-label-below': labelPosition == 'below',\n    'fwe-label-before': labelPosition == 'before'\n  }\"\n>\n  <input\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.value]=\"value\"\n    [attr.name]=\"name\"\n    [checked]=\"checked\"\n    (change)=\"onInteractionEvent($event)\"\n    (click)=\"onInputClick($event)\"\n  />\n  <div class=\"fwe-checkbox-indicator-container\">\n    <div class=\"fwe-checkbox-indicator-background\"></div>\n    <ng-container *ngIf=\"!indeterminate && checked\">\n      <svg *ngIf=\"large\" width=\"24px\" height=\"24px\">\n        <path d=\"M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z\" fill=\"#fff\" />\n      </svg>\n      <svg *ngIf=\"!large\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\">\n        <path d=\"M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z\" fill=\"#fff\" />\n      </svg>\n    </ng-container>\n    <div *ngIf=\"indeterminate && !checked\" class=\"fwe-indeterminate-indicator\"></div>\n  </div>\n  <div class=\"fwe-checkbox-title\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [".fwe-checkbox-container{font-family:MetaPro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;flex-direction:row;align-items:flex-start}.fwe-checkbox-container.fwe-label-below{align-items:center;flex-direction:column}.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title{text-align:center;margin:8px 0 0}.fwe-checkbox-container.fwe-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title{margin:0 8px 0 0}.fwe-checkbox-container .fwe-checkbox-indicator-container{margin-top:4px;position:relative}.fwe-checkbox-container input{opacity:0;cursor:pointer;height:0;width:0}.fwe-checkbox-container .fwe-checkbox-title{margin-left:8px;line-height:24px;color:var(--fwe-text);-webkit-user-select:none;user-select:none}.fwe-checkbox-container .fwe-checkbox-indicator-background{box-sizing:border-box;background:var(--fwe-white);border:1px solid var(--fwe-text-light);border-radius:2px;height:16px;width:16px;transition:border-width .2s ease-out}.fwe-checkbox-container .fwe-indeterminate-indicator{position:absolute;height:2px;width:10px;top:7px;left:3px;background:white}.fwe-checkbox-container svg{display:block;position:absolute;top:0px;left:0px}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-container{margin-top:0}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-background{height:24px;width:24px;border-radius:4px}.fwe-checkbox-container.fng-checkbox-large .fwe-indeterminate-indicator{top:11px;width:14px;left:5px}.fwe-checkbox-container.fng-checkbox-large.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-large.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:12px solid var(--fwe-hero)}.fwe-checkbox-container:hover .fwe-checkbox-indicator-background{background-color:var(--fwe-control)}.fwe-checkbox-container:active .fwe-checkbox-indicator-background{background-color:var(--fwe-control-dark)}.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:8px solid var(--fwe-hero)}.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:hover .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-dark)}.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:active .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-darker)}.fwe-checkbox-container.fng-checkbox-invalid .fwe-checkbox-indicator-background{border:1px solid var(--fwe-red);background:var(--fwe-white)}.fwe-checkbox-container.fwe-disabled{cursor:default}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-disabled.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{background-color:var(--fwe-control);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fng-checkbox-invalid .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title{color:var(--fwe-text-disabled)}\n"] }]
+                    ], template: "<label\n  class=\"fwe-checkbox-container\"\n  [class.fng-checkbox-large]=\"large\"\n  [class.fng-checkbox-invalid]=\"!valid || required\"\n  [class.fwe-disabled]=\"disabled\"\n  [class.fng-checkbox-indeterminate]=\"indeterminate\"\n  [class.fwe-checked]=\"checked\"\n  [attr.for]=\"inputId\"\n  [ngClass]=\"{\n    'fwe-label-below': labelPosition == 'below',\n    'fwe-label-before': labelPosition == 'before'\n  }\"\n>\n  <input\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.value]=\"value\"\n    [attr.name]=\"name\"\n    [checked]=\"checked\"\n    (change)=\"onInteractionEvent($event)\"\n    (click)=\"onInputClick($event)\"\n  />\n  <div class=\"fwe-checkbox-indicator-container\">\n    <div class=\"fwe-checkbox-indicator-background\"></div>\n    <ng-container *ngIf=\"!indeterminate && checked\">\n      <svg *ngIf=\"large\" width=\"24px\" height=\"24px\">\n        <path d=\"M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z\" fill=\"#fff\" />\n      </svg>\n      <svg *ngIf=\"!large\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\">\n        <path d=\"M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z\" fill=\"#fff\" />\n      </svg>\n    </ng-container>\n    <div *ngIf=\"indeterminate && !checked\" class=\"fwe-indeterminate-indicator\"></div>\n  </div>\n  <div class=\"fwe-checkbox-title\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [".fwe-checkbox-container{font-family:var(--fwe-font-family-sans-serif);-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;flex-direction:row;align-items:flex-start}.fwe-checkbox-container.fwe-label-below{align-items:center;flex-direction:column}.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title{text-align:center;margin:8px 0 0}.fwe-checkbox-container.fwe-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title{margin:0 8px 0 0}.fwe-checkbox-container .fwe-checkbox-indicator-container{margin-top:4px;position:relative}.fwe-checkbox-container input{opacity:0;cursor:pointer;height:0;width:0}.fwe-checkbox-container .fwe-checkbox-title{margin-left:8px;line-height:24px;color:var(--fwe-text);-webkit-user-select:none;user-select:none}.fwe-checkbox-container .fwe-checkbox-indicator-background{box-sizing:border-box;background:var(--fwe-white);border:1px solid var(--fwe-text-light);border-radius:2px;height:16px;width:16px;transition:border-width .2s ease-out}.fwe-checkbox-container .fwe-indeterminate-indicator{position:absolute;height:2px;width:10px;top:7px;left:3px;background:white}.fwe-checkbox-container svg{display:block;position:absolute;top:0px;left:0px}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-container{margin-top:0}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-background{height:24px;width:24px;border-radius:4px}.fwe-checkbox-container.fng-checkbox-large .fwe-indeterminate-indicator{top:11px;width:14px;left:5px}.fwe-checkbox-container.fng-checkbox-large.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-large.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:12px solid var(--fwe-hero)}.fwe-checkbox-container:hover .fwe-checkbox-indicator-background{background-color:var(--fwe-control)}.fwe-checkbox-container:active .fwe-checkbox-indicator-background{background-color:var(--fwe-control-dark)}.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:8px solid var(--fwe-hero)}.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:hover .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-dark)}.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:active .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-darker)}.fwe-checkbox-container.fng-checkbox-invalid .fwe-checkbox-indicator-background{border:1px solid var(--fwe-red);background:var(--fwe-white)}.fwe-checkbox-container.fwe-disabled{cursor:default}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-disabled.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{background-color:var(--fwe-control);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fng-checkbox-invalid .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title{color:var(--fwe-text-disabled)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { name: [{
                 type: Input
             }], large: [{

package/esm2020/lib/forms/color-indicator/color-indicator.component.mjs

@@ -50,10 +50,10 @@ export class ColorIndicatorComponent {
     }
 }
 ColorIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ColorIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColorIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ColorIndicatorComponent, selector: "fng-color-indicator", inputs: { label: "label", text: "text", color: "color", showPopOver: "showPopOver", disabled: "disabled" }, ngImport: i0, template: "<div class=\"fwe-color-indicator\" (click)=\"isEditorOpen = showPopOver ? !isEditorOpen : false\" [class.disabled]=\"disabled\">\n  <div class=\"fwe-color-label\" [style.opacity]=\"isEditorOpen ? 0 : 1\">\n    {{ label }}\n  </div>\n  <div class=\"fwe-color-container\">\n    <div\n      class=\"fwe-color-box\"\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      [style.background]=\"color\"\n      [style.border-color]=\"getBorderColor()\"\n    >\n      <svg\n        *ngIf=\"!color\"\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    </div>\n    <div class=\"fwe-color-indicator-text\" *ngIf=\"text\">\n      {{ text }}\n    </div>\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isEditorOpen\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n    [cdkConnectedOverlayViewportMargin]=\"32\"\n    (backdropClick)=\"isEditorOpen = false\"\n  >\n    <div class=\"fwe-popover-container\">\n      <div class=\"fwe-triangle\"></div>\n      <div class=\"fwe-popover\" #popoverContent>\n        <div class=\"fwe-color-label fwe-mb-s\">\n          {{ label }}\n        </div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".fwe-color-indicator .fwe-popover-container{position:relative}.fwe-color-indicator .fwe-popover-container .fwe-popover{background-color:var(--fwe-white);padding:8px 16px 16px;font-size:14px;line-height:1rem;box-shadow:0 1px 4px #3333;border-radius:8px}.fwe-color-indicator .fwe-backdrop{background:transparent}.fwe-color-indicator .fwe-color-label{height:18px;font-size:12px;font-weight:700;margin-bottom:4px}.fwe-color-indicator .fwe-color-container{display:flex}.fwe-color-indicator .fwe-color-container .fwe-color-box{height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);background:var(--fwe-white)}.fwe-color-indicator .fwe-color-container .fwe-color-box .fwe-no-color-pattern{margin:2px}.fwe-color-indicator .fwe-color-container .fwe-color-indicator-text{margin-left:8px}.fwe-color-indicator.disabled{pointer-events:none}.fwe-color-indicator.disabled .fwe-color-label{color:var(--fwe-text-disabled)}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-box{opacity:.5}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-indicator-text{color:var(--fwe-text-disabled)}\n"], directives: [{ type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
+ColorIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ColorIndicatorComponent, selector: "fng-color-indicator", inputs: { label: "label", text: "text", color: "color", showPopOver: "showPopOver", disabled: "disabled" }, ngImport: i0, template: "<div class=\"fwe-color-indicator\" (click)=\"isEditorOpen = showPopOver ? !isEditorOpen : false\" [class.disabled]=\"disabled\">\n  <div class=\"fwe-color-label\" [style.opacity]=\"isEditorOpen ? 0 : 1\">\n    {{ label }}\n  </div>\n  <div class=\"fwe-color-container\">\n    <div\n      class=\"fwe-color-box\"\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      [style.background]=\"color\"\n      [style.border-color]=\"getBorderColor()\"\n    >\n      <svg\n        *ngIf=\"!color\"\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    </div>\n    <div class=\"fwe-color-indicator-text\" *ngIf=\"text\">\n      {{ text }}\n    </div>\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isEditorOpen\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n    [cdkConnectedOverlayViewportMargin]=\"32\"\n    (backdropClick)=\"isEditorOpen = false\"\n  >\n    <div class=\"fwe-popover-container\">\n      <div class=\"fwe-triangle\"></div>\n      <div class=\"fwe-popover\" #popoverContent>\n        <div class=\"fwe-color-label fwe-mb-s\">\n          {{ label }}\n        </div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".fwe-color-indicator .fwe-popover-container{position:relative}.fwe-color-indicator .fwe-popover-container .fwe-popover{background-color:var(--fwe-white);padding:8px 16px 16px;font-size:var(--fwe-font-size-md);line-height:1rem;box-shadow:0 1px 4px #3333;border-radius:8px}.fwe-color-indicator .fwe-backdrop{background:transparent}.fwe-color-indicator .fwe-color-label{height:18px;font-size:var(--fwe-font-size-small);font-weight:var(--fwe-font-weight-bold);margin-bottom:4px}.fwe-color-indicator .fwe-color-container{display:flex}.fwe-color-indicator .fwe-color-container .fwe-color-box{height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);background:var(--fwe-white)}.fwe-color-indicator .fwe-color-container .fwe-color-box .fwe-no-color-pattern{margin:2px}.fwe-color-indicator .fwe-color-container .fwe-color-indicator-text{margin-left:8px}.fwe-color-indicator.disabled{pointer-events:none}.fwe-color-indicator.disabled .fwe-color-label{color:var(--fwe-text-disabled)}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-box{opacity:.5}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-indicator-text{color:var(--fwe-text-disabled)}\n"], directives: [{ type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ColorIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fng-color-indicator', template: "<div class=\"fwe-color-indicator\" (click)=\"isEditorOpen = showPopOver ? !isEditorOpen : false\" [class.disabled]=\"disabled\">\n  <div class=\"fwe-color-label\" [style.opacity]=\"isEditorOpen ? 0 : 1\">\n    {{ label }}\n  </div>\n  <div class=\"fwe-color-container\">\n    <div\n      class=\"fwe-color-box\"\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      [style.background]=\"color\"\n      [style.border-color]=\"getBorderColor()\"\n    >\n      <svg\n        *ngIf=\"!color\"\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    </div>\n    <div class=\"fwe-color-indicator-text\" *ngIf=\"text\">\n      {{ text }}\n    </div>\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isEditorOpen\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n    [cdkConnectedOverlayViewportMargin]=\"32\"\n    (backdropClick)=\"isEditorOpen = false\"\n  >\n    <div class=\"fwe-popover-container\">\n      <div class=\"fwe-triangle\"></div>\n      <div class=\"fwe-popover\" #popoverContent>\n        <div class=\"fwe-color-label fwe-mb-s\">\n          {{ label }}\n        </div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".fwe-color-indicator .fwe-popover-container{position:relative}.fwe-color-indicator .fwe-popover-container .fwe-popover{background-color:var(--fwe-white);padding:8px 16px 16px;font-size:14px;line-height:1rem;box-shadow:0 1px 4px #3333;border-radius:8px}.fwe-color-indicator .fwe-backdrop{background:transparent}.fwe-color-indicator .fwe-color-label{height:18px;font-size:12px;font-weight:700;margin-bottom:4px}.fwe-color-indicator .fwe-color-container{display:flex}.fwe-color-indicator .fwe-color-container .fwe-color-box{height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);background:var(--fwe-white)}.fwe-color-indicator .fwe-color-container .fwe-color-box .fwe-no-color-pattern{margin:2px}.fwe-color-indicator .fwe-color-container .fwe-color-indicator-text{margin-left:8px}.fwe-color-indicator.disabled{pointer-events:none}.fwe-color-indicator.disabled .fwe-color-label{color:var(--fwe-text-disabled)}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-box{opacity:.5}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-indicator-text{color:var(--fwe-text-disabled)}\n"] }]
+            args: [{ selector: 'fng-color-indicator', template: "<div class=\"fwe-color-indicator\" (click)=\"isEditorOpen = showPopOver ? !isEditorOpen : false\" [class.disabled]=\"disabled\">\n  <div class=\"fwe-color-label\" [style.opacity]=\"isEditorOpen ? 0 : 1\">\n    {{ label }}\n  </div>\n  <div class=\"fwe-color-container\">\n    <div\n      class=\"fwe-color-box\"\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      [style.background]=\"color\"\n      [style.border-color]=\"getBorderColor()\"\n    >\n      <svg\n        *ngIf=\"!color\"\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    </div>\n    <div class=\"fwe-color-indicator-text\" *ngIf=\"text\">\n      {{ text }}\n    </div>\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isEditorOpen\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n    [cdkConnectedOverlayViewportMargin]=\"32\"\n    (backdropClick)=\"isEditorOpen = false\"\n  >\n    <div class=\"fwe-popover-container\">\n      <div class=\"fwe-triangle\"></div>\n      <div class=\"fwe-popover\" #popoverContent>\n        <div class=\"fwe-color-label fwe-mb-s\">\n          {{ label }}\n        </div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".fwe-color-indicator .fwe-popover-container{position:relative}.fwe-color-indicator .fwe-popover-container .fwe-popover{background-color:var(--fwe-white);padding:8px 16px 16px;font-size:var(--fwe-font-size-md);line-height:1rem;box-shadow:0 1px 4px #3333;border-radius:8px}.fwe-color-indicator .fwe-backdrop{background:transparent}.fwe-color-indicator .fwe-color-label{height:18px;font-size:var(--fwe-font-size-small);font-weight:var(--fwe-font-weight-bold);margin-bottom:4px}.fwe-color-indicator .fwe-color-container{display:flex}.fwe-color-indicator .fwe-color-container .fwe-color-box{height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);background:var(--fwe-white)}.fwe-color-indicator .fwe-color-container .fwe-color-box .fwe-no-color-pattern{margin:2px}.fwe-color-indicator .fwe-color-container .fwe-color-indicator-text{margin-left:8px}.fwe-color-indicator.disabled{pointer-events:none}.fwe-color-indicator.disabled .fwe-color-label{color:var(--fwe-text-disabled)}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-box{opacity:.5}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-indicator-text{color:var(--fwe-text-disabled)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], text: [{

package/esm2020/lib/forms/color-picker/color-picker.component.mjs

@@ -245,7 +245,7 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => ColorPickerComponent),
             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=\".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=\".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=\".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: ["fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}fng-text-input.ng-valid label.fwe-input-text input[type=text]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=password]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=date]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=time]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=datetime-local]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=number]:hover:not(:disabled){border-bottom:1px solid var(--fwe-hero)!important}fng-text-input label.fwe-input-text.fwe-no-pointer-events{pointer-events:none!important}.fwe-input-text-invalid.fng-projected:empty{display:none}.fwe-input-text-info.fng-projected:empty{display:none}\n", ".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:14px;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:16px;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}.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;top:7px;bottom:7px;right:7px;left:7px;background-image:linear-gradient(transparent,black)}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{position:absolute;top:7px;bottom:7px;right:7px;left: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(#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)}.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:12px;line-height:17px;font-weight:700}.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:0px}.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"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { 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]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], 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=\".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=\".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=\".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: ["fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}fng-text-input.ng-valid label.fwe-input-text input[type=text]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=password]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=date]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=time]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=datetime-local]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=number]:hover:not(:disabled){border-bottom:1px solid var(--fwe-hero)!important}fng-text-input label.fwe-input-text.fwe-no-pointer-events{pointer-events:none!important}.fwe-input-text-invalid.fng-projected:empty{display:none}.fwe-input-text-info.fng-projected:empty{display:none}\n", ".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}.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;top:7px;bottom:7px;right:7px;left:7px;background-image:linear-gradient(transparent,black)}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{position:absolute;top:7px;bottom:7px;right:7px;left: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(#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)}.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:0px}.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"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { 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]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fng-color-picker', providers: [
@@ -254,7 +254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                             useExisting: forwardRef(() => ColorPickerComponent),
                             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=\".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=\".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=\".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: ["fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}fng-text-input.ng-valid label.fwe-input-text input[type=text]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=password]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=date]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=time]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=datetime-local]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=number]:hover:not(:disabled){border-bottom:1px solid var(--fwe-hero)!important}fng-text-input label.fwe-input-text.fwe-no-pointer-events{pointer-events:none!important}.fwe-input-text-invalid.fng-projected:empty{display:none}.fwe-input-text-info.fng-projected:empty{display:none}\n", ".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:14px;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:16px;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}.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;top:7px;bottom:7px;right:7px;left:7px;background-image:linear-gradient(transparent,black)}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{position:absolute;top:7px;bottom:7px;right:7px;left: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(#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)}.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:12px;line-height:17px;font-weight:700}.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:0px}.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=\".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=\".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=\".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: ["fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}fng-text-input.ng-valid label.fwe-input-text input[type=text]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=password]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=date]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=time]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=datetime-local]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=number]:hover:not(:disabled){border-bottom:1px solid var(--fwe-hero)!important}fng-text-input label.fwe-input-text.fwe-no-pointer-events{pointer-events:none!important}.fwe-input-text-invalid.fng-projected:empty{display:none}.fwe-input-text-info.fng-projected:empty{display:none}\n", ".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}.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;top:7px;bottom:7px;right:7px;left:7px;background-image:linear-gradient(transparent,black)}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{position:absolute;top:7px;bottom:7px;right:7px;left: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(#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)}.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:0px}.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: [{

package/esm2020/lib/forms/select/select.component.mjs

@@ -204,7 +204,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             useExisting: forwardRef(() => SelectComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "fngSelectOptions", predicate: SelectOptionComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["div"], descendants: true }], ngImport: i0, template: "<div #div class=\"fwe-select-wrapper\" [class.fwe-disabled]=\"disabled\" [class.fng-hide-label]=\"hideLabel\">\n  <div\n    class=\"fwe-select\"\n    (click)=\"toggle()\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    [class.fwe-focus]=\"showOptions\"\n    [class.fwe-required]=\"required\"\n    [class.fwe-disabled]=\"disabled\"\n    [class.fwe-pty]=\"empty\"\n  >\n    <div class=\"fwe-select-content\">\n      <ng-container *ngIf=\"!multiple; else chips\">\n        {{ value != null && value | fngChipText: options:optionsValueKey:optionsTextKey }}\n      </ng-container>\n      <ng-template #chips>\n        <div class=\"fwe-chip-container\">\n          <div\n            *ngFor=\"let v of value\"\n            class=\"fwe-chip chip-text-truncate fwe-pr-4\"\n            [style.max-width.px]=\"triggerWidth\"\n            [title]=\"v | fngChipText: options:optionsValueKey:optionsTextKey\"\n          >\n            {{ v | fngChipText: options:optionsValueKey:optionsTextKey }}\n            <span class=\"chip-removable\" (click)=\"removeChip($event, v)\"></span>\n          </div>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayMinWidth]=\"triggerWidth\"\n    [cdkConnectedOverlayOpen]=\"showOptions\"\n    [cdkConnectedOverlayPanelClass]=\"selectPanelClasses\"\n    (backdropClick)=\"close()\"\n  >\n    <div class=\"fng-select-panel-wrap\">\n      <ul class=\"fwe-select-options-container\">\n        <li class=\"fwe-select-option\" *ngIf=\"resetOption != null && !multiple\" (click)=\"select(null, $event)\">{{ resetOption }}</li>\n        <li\n          class=\"fwe-select-option\"\n          *ngFor=\"let option of options; let i = index\"\n          (click)=\"select(getOptionValue(i), $event)\"\n          [title]=\"getOptionText(i) || option?.text\"\n        >\n          <span class=\"fwe-select-option-content\">\n            <span\n              *ngIf=\"multiple\"\n              class=\"fng-select-pseudo-checkbox\"\n              [ngClass]=\"{ 'fng-select-pseudo-checkbox-checked': checked.get(getOptionValue(i)) === 'checked' }\"\n            ></span>\n            <span *ngIf=\"hasProjectedOptions; else defaultTemplate\" [innerHTML]=\"projectedHtml[i]\"></span>\n            <ng-template #defaultTemplate>{{ getOptionText(i) || option?.text }}</ng-template>\n          </span>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n  <label class=\"fwe-select-label\" [for]=\"id\" [class.fwe-sr-only]=\"hideLabel\">{{ label }}</label>\n  <div class=\"fwe-select-description\" *ngIf=\"hint\">\n    {{ hint }}\n  </div>\n  <div class=\"fwe-select-invalid\" *ngIf=\"error\">\n    {{ error }}\n  </div>\n</div>\n<div class=\"fwe-d-none\" (cdkObserveContent)=\"onContentChange($event)\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.fng-select-panel-open .fng-select-panel{opacity:1!important}fng-select{width:auto}fng-select.ng-invalid:not(.ng-pristine) .fwe-select:hover{border-color:var(--fwe-red)}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-invalid{display:block}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-description{display:none}.fng-select-panel{opacity:0!important}.fng-select-panel.fng-select-panel-options-3 .fwe-select-options-container{max-height:162px}.fng-select-panel.fng-select-panel-options-4 .fwe-select-options-container{max-height:210px}.fng-select-panel.fng-select-panel-options-5 .fwe-select-options-container{max-height:258px}.fng-select-panel.fng-select-panel-options-6 .fwe-select-options-container{max-height:306px}.fng-select-panel.fng-select-panel-options-7 .fwe-select-options-container{max-height:354px}.fng-select-panel.fng-select-panel-options-8 .fwe-select-options-container{max-height:402px}.fng-select-panel.fng-select-panel-options-9 .fwe-select-options-container{max-height:450px}.fng-select-panel.fng-select-panel-options-10 .fwe-select-options-container{max-height:498px}.fng-select-panel .fwe-select-options-container{scrollbar-width:thin;scrollbar-color:var(--fwe-control-scrollbar) var(--fwe-gray-100)}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar{width:12px}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-track{background:transparent}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-thumb{overflow:visible;background-color:var(--fwe-control-scrollbar);border:3px solid rgba(242,243,245,0);-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:6px}.fng-select-panel-wrap{flex-basis:100%}.fwe-select-options-container{position:relative;top:4px;left:0px;max-height:258px;min-width:calc(100% + 0px)!important;max-width:280px;overflow:auto;font-size:16px;background-color:var(--fwe-white);border-radius:4px;padding:8px;margin:0;border:1px solid var(--fwe-gray-200);box-shadow:0 1px 4px #00000029;list-style:none;outline:0}.fwe-select-options-container .fwe-select-option{position:relative;line-height:24px;padding:12px 8px;min-height:24px;cursor:pointer}.fwe-select-options-container .fwe-select-option:hover{background-color:var(--fwe-gray-100)}.fwe-select-options-container .fwe-select-option:last-child{border-bottom:none}.fwe-select-options-container .fwe-select-option .fwe-select-option-content{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:24px;min-height:24px}.fng-select-pseudo-checkbox{width:16px;height:16px;border-radius:2px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;color:var(--fwe-control-border);border:1px solid;transition:none;margin-right:12px;top:-1px}.fng-select-pseudo-checkbox:after{color:var(--fwe-white);position:absolute;display:block;opacity:0;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked{background:var(--fwe-caerul);border:1px solid var(--fwe-caerul)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked:after{top:3px;left:2px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box}.chip-text-truncate{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-removable:after{position:absolute;right:5px;top:4px;color:var(--fwe-text);font-family:festo_icons-16;font-size:16px;content:\"\\ea1c\";line-height:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fwe-select-wrapper{display:flex;width:inherit;min-width:48px}.fwe-select-wrapper:before{bottom:unset;top:24px}.fwe-select-wrapper.fng-hide-label{margin-top:18px}.fwe-select-wrapper.fng-hide-label:before{top:6px}.fwe-select-wrapper.fwe-disabled:before{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select{cursor:pointer;height:unset;min-height:33px}.fwe-select-wrapper .fwe-select .fwe-select-content{padding-right:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5rem}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled)~.fwe-select-label:after{position:relative;left:3px;display:inline-block;content:\"*\"}.fwe-select-wrapper .fwe-select.fwe-disabled{cursor:default;border-color:var(--fwe-control-disabled)!important}.fwe-select-wrapper .fwe-select.fwe-disabled~.fwe-select-label{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip{color:var(--fwe-text-disabled);border:1px solid var(--fwe-control-disabled);pointer-events:none}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip .chip-removable:after{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select-label:empty~.fwe-select-options-container,.fwe-select-wrapper .fwe-select-label.fwe-sr-only~.fwe-select-options-container{top:38px}\n"], directives: [{ type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], pipes: { "fngChipText": i4.ChipTextPipe }, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "fngSelectOptions", predicate: SelectOptionComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["div"], descendants: true }], ngImport: i0, template: "<div #div class=\"fwe-select-wrapper\" [class.fwe-disabled]=\"disabled\" [class.fng-hide-label]=\"hideLabel\">\n  <div\n    class=\"fwe-select\"\n    (click)=\"toggle()\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    [class.fwe-focus]=\"showOptions\"\n    [class.fwe-required]=\"required\"\n    [class.fwe-disabled]=\"disabled\"\n    [class.fwe-pty]=\"empty\"\n  >\n    <div class=\"fwe-select-content\">\n      <ng-container *ngIf=\"!multiple; else chips\">\n        {{ value != null && value | fngChipText: options:optionsValueKey:optionsTextKey }}\n      </ng-container>\n      <ng-template #chips>\n        <div class=\"fwe-chip-container\">\n          <div\n            *ngFor=\"let v of value\"\n            class=\"fwe-chip chip-text-truncate fwe-pr-4\"\n            [style.max-width.px]=\"triggerWidth\"\n            [title]=\"v | fngChipText: options:optionsValueKey:optionsTextKey\"\n          >\n            {{ v | fngChipText: options:optionsValueKey:optionsTextKey }}\n            <span class=\"chip-removable\" (click)=\"removeChip($event, v)\"></span>\n          </div>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayMinWidth]=\"triggerWidth\"\n    [cdkConnectedOverlayOpen]=\"showOptions\"\n    [cdkConnectedOverlayPanelClass]=\"selectPanelClasses\"\n    (backdropClick)=\"close()\"\n  >\n    <div class=\"fng-select-panel-wrap\">\n      <ul class=\"fwe-select-options-container\">\n        <li class=\"fwe-select-option\" *ngIf=\"resetOption != null && !multiple\" (click)=\"select(null, $event)\">{{ resetOption }}</li>\n        <li\n          class=\"fwe-select-option\"\n          *ngFor=\"let option of options; let i = index\"\n          (click)=\"select(getOptionValue(i), $event)\"\n          [title]=\"getOptionText(i) || option?.text\"\n        >\n          <span class=\"fwe-select-option-content\">\n            <span\n              *ngIf=\"multiple\"\n              class=\"fng-select-pseudo-checkbox\"\n              [ngClass]=\"{ 'fng-select-pseudo-checkbox-checked': checked.get(getOptionValue(i)) === 'checked' }\"\n            ></span>\n            <span *ngIf=\"hasProjectedOptions; else defaultTemplate\" [innerHTML]=\"projectedHtml[i]\"></span>\n            <ng-template #defaultTemplate>{{ getOptionText(i) || option?.text }}</ng-template>\n          </span>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n  <label class=\"fwe-select-label\" [for]=\"id\" [class.fwe-sr-only]=\"hideLabel\">{{ label }}</label>\n  <div class=\"fwe-select-description\" *ngIf=\"hint\">\n    {{ hint }}\n  </div>\n  <div class=\"fwe-select-invalid\" *ngIf=\"error\">\n    {{ error }}\n  </div>\n</div>\n<div class=\"fwe-d-none\" (cdkObserveContent)=\"onContentChange($event)\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.fng-select-panel-open .fng-select-panel{opacity:1!important}fng-select{width:auto}fng-select.ng-invalid:not(.ng-pristine) .fwe-select:hover{border-color:var(--fwe-red)}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-invalid{display:block}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-description{display:none}.fng-select-panel{opacity:0!important}.fng-select-panel.fng-select-panel-options-3 .fwe-select-options-container{max-height:162px}.fng-select-panel.fng-select-panel-options-4 .fwe-select-options-container{max-height:210px}.fng-select-panel.fng-select-panel-options-5 .fwe-select-options-container{max-height:258px}.fng-select-panel.fng-select-panel-options-6 .fwe-select-options-container{max-height:306px}.fng-select-panel.fng-select-panel-options-7 .fwe-select-options-container{max-height:354px}.fng-select-panel.fng-select-panel-options-8 .fwe-select-options-container{max-height:402px}.fng-select-panel.fng-select-panel-options-9 .fwe-select-options-container{max-height:450px}.fng-select-panel.fng-select-panel-options-10 .fwe-select-options-container{max-height:498px}.fng-select-panel .fwe-select-options-container{scrollbar-width:thin;scrollbar-color:var(--fwe-control-scrollbar) var(--fwe-gray-100)}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar{width:12px}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-track{background:transparent}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-thumb{overflow:visible;background-color:var(--fwe-control-scrollbar);border:3px solid rgba(242,243,245,0);-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:6px}.fng-select-panel-wrap{flex-basis:100%}.fwe-select-options-container{position:relative;top:4px;left:0px;max-height:258px;min-width:calc(100% + 0px)!important;max-width:280px;overflow:auto;font-size:var(--fwe-font-size-base);background-color:var(--fwe-white);border-radius:4px;padding:8px;margin:0;border:1px solid var(--fwe-gray-200);box-shadow:0 1px 4px #00000029;list-style:none;outline:0}.fwe-select-options-container .fwe-select-option{position:relative;line-height:24px;padding:12px 8px;min-height:24px;cursor:pointer}.fwe-select-options-container .fwe-select-option:hover{background-color:var(--fwe-gray-100)}.fwe-select-options-container .fwe-select-option:last-child{border-bottom:none}.fwe-select-options-container .fwe-select-option .fwe-select-option-content{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:24px;min-height:24px}.fng-select-pseudo-checkbox{width:16px;height:16px;border-radius:2px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;color:var(--fwe-control-border);border:1px solid;transition:none;margin-right:12px;top:-1px}.fng-select-pseudo-checkbox:after{color:var(--fwe-white);position:absolute;display:block;opacity:0;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked{background:var(--fwe-caerul);border:1px solid var(--fwe-caerul)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked:after{top:3px;left:2px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box}.chip-text-truncate{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-removable:after{position:absolute;right:5px;top:4px;color:var(--fwe-text);font-family:var(--fwe-font-family-icons-16);font-size:var(--fwe-font-size-base);content:\"\\ea1c\";line-height:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fwe-select-wrapper{display:flex;width:inherit;min-width:48px}.fwe-select-wrapper:before{bottom:unset;top:24px}.fwe-select-wrapper.fng-hide-label{margin-top:18px}.fwe-select-wrapper.fng-hide-label:before{top:6px}.fwe-select-wrapper.fwe-disabled:before{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select{cursor:pointer;height:unset;min-height:33px}.fwe-select-wrapper .fwe-select .fwe-select-content{padding-right:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5rem}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled)~.fwe-select-label:after{position:relative;left:3px;display:inline-block;content:\"*\"}.fwe-select-wrapper .fwe-select.fwe-disabled{cursor:default;border-color:var(--fwe-control-disabled)!important}.fwe-select-wrapper .fwe-select.fwe-disabled~.fwe-select-label{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip{color:var(--fwe-text-disabled);border:1px solid var(--fwe-control-disabled);pointer-events:none}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip .chip-removable:after{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select-label:empty~.fwe-select-options-container,.fwe-select-wrapper .fwe-select-label.fwe-sr-only~.fwe-select-options-container{top:38px}\n"], directives: [{ type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], pipes: { "fngChipText": i4.ChipTextPipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fng-select', encapsulation: ViewEncapsulation.None, providers: [
@@ -213,7 +213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true
                         }
-                    ], template: "<div #div class=\"fwe-select-wrapper\" [class.fwe-disabled]=\"disabled\" [class.fng-hide-label]=\"hideLabel\">\n  <div\n    class=\"fwe-select\"\n    (click)=\"toggle()\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    [class.fwe-focus]=\"showOptions\"\n    [class.fwe-required]=\"required\"\n    [class.fwe-disabled]=\"disabled\"\n    [class.fwe-pty]=\"empty\"\n  >\n    <div class=\"fwe-select-content\">\n      <ng-container *ngIf=\"!multiple; else chips\">\n        {{ value != null && value | fngChipText: options:optionsValueKey:optionsTextKey }}\n      </ng-container>\n      <ng-template #chips>\n        <div class=\"fwe-chip-container\">\n          <div\n            *ngFor=\"let v of value\"\n            class=\"fwe-chip chip-text-truncate fwe-pr-4\"\n            [style.max-width.px]=\"triggerWidth\"\n            [title]=\"v | fngChipText: options:optionsValueKey:optionsTextKey\"\n          >\n            {{ v | fngChipText: options:optionsValueKey:optionsTextKey }}\n            <span class=\"chip-removable\" (click)=\"removeChip($event, v)\"></span>\n          </div>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayMinWidth]=\"triggerWidth\"\n    [cdkConnectedOverlayOpen]=\"showOptions\"\n    [cdkConnectedOverlayPanelClass]=\"selectPanelClasses\"\n    (backdropClick)=\"close()\"\n  >\n    <div class=\"fng-select-panel-wrap\">\n      <ul class=\"fwe-select-options-container\">\n        <li class=\"fwe-select-option\" *ngIf=\"resetOption != null && !multiple\" (click)=\"select(null, $event)\">{{ resetOption }}</li>\n        <li\n          class=\"fwe-select-option\"\n          *ngFor=\"let option of options; let i = index\"\n          (click)=\"select(getOptionValue(i), $event)\"\n          [title]=\"getOptionText(i) || option?.text\"\n        >\n          <span class=\"fwe-select-option-content\">\n            <span\n              *ngIf=\"multiple\"\n              class=\"fng-select-pseudo-checkbox\"\n              [ngClass]=\"{ 'fng-select-pseudo-checkbox-checked': checked.get(getOptionValue(i)) === 'checked' }\"\n            ></span>\n            <span *ngIf=\"hasProjectedOptions; else defaultTemplate\" [innerHTML]=\"projectedHtml[i]\"></span>\n            <ng-template #defaultTemplate>{{ getOptionText(i) || option?.text }}</ng-template>\n          </span>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n  <label class=\"fwe-select-label\" [for]=\"id\" [class.fwe-sr-only]=\"hideLabel\">{{ label }}</label>\n  <div class=\"fwe-select-description\" *ngIf=\"hint\">\n    {{ hint }}\n  </div>\n  <div class=\"fwe-select-invalid\" *ngIf=\"error\">\n    {{ error }}\n  </div>\n</div>\n<div class=\"fwe-d-none\" (cdkObserveContent)=\"onContentChange($event)\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.fng-select-panel-open .fng-select-panel{opacity:1!important}fng-select{width:auto}fng-select.ng-invalid:not(.ng-pristine) .fwe-select:hover{border-color:var(--fwe-red)}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-invalid{display:block}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-description{display:none}.fng-select-panel{opacity:0!important}.fng-select-panel.fng-select-panel-options-3 .fwe-select-options-container{max-height:162px}.fng-select-panel.fng-select-panel-options-4 .fwe-select-options-container{max-height:210px}.fng-select-panel.fng-select-panel-options-5 .fwe-select-options-container{max-height:258px}.fng-select-panel.fng-select-panel-options-6 .fwe-select-options-container{max-height:306px}.fng-select-panel.fng-select-panel-options-7 .fwe-select-options-container{max-height:354px}.fng-select-panel.fng-select-panel-options-8 .fwe-select-options-container{max-height:402px}.fng-select-panel.fng-select-panel-options-9 .fwe-select-options-container{max-height:450px}.fng-select-panel.fng-select-panel-options-10 .fwe-select-options-container{max-height:498px}.fng-select-panel .fwe-select-options-container{scrollbar-width:thin;scrollbar-color:var(--fwe-control-scrollbar) var(--fwe-gray-100)}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar{width:12px}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-track{background:transparent}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-thumb{overflow:visible;background-color:var(--fwe-control-scrollbar);border:3px solid rgba(242,243,245,0);-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:6px}.fng-select-panel-wrap{flex-basis:100%}.fwe-select-options-container{position:relative;top:4px;left:0px;max-height:258px;min-width:calc(100% + 0px)!important;max-width:280px;overflow:auto;font-size:16px;background-color:var(--fwe-white);border-radius:4px;padding:8px;margin:0;border:1px solid var(--fwe-gray-200);box-shadow:0 1px 4px #00000029;list-style:none;outline:0}.fwe-select-options-container .fwe-select-option{position:relative;line-height:24px;padding:12px 8px;min-height:24px;cursor:pointer}.fwe-select-options-container .fwe-select-option:hover{background-color:var(--fwe-gray-100)}.fwe-select-options-container .fwe-select-option:last-child{border-bottom:none}.fwe-select-options-container .fwe-select-option .fwe-select-option-content{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:24px;min-height:24px}.fng-select-pseudo-checkbox{width:16px;height:16px;border-radius:2px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;color:var(--fwe-control-border);border:1px solid;transition:none;margin-right:12px;top:-1px}.fng-select-pseudo-checkbox:after{color:var(--fwe-white);position:absolute;display:block;opacity:0;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked{background:var(--fwe-caerul);border:1px solid var(--fwe-caerul)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked:after{top:3px;left:2px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box}.chip-text-truncate{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-removable:after{position:absolute;right:5px;top:4px;color:var(--fwe-text);font-family:festo_icons-16;font-size:16px;content:\"\\ea1c\";line-height:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fwe-select-wrapper{display:flex;width:inherit;min-width:48px}.fwe-select-wrapper:before{bottom:unset;top:24px}.fwe-select-wrapper.fng-hide-label{margin-top:18px}.fwe-select-wrapper.fng-hide-label:before{top:6px}.fwe-select-wrapper.fwe-disabled:before{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select{cursor:pointer;height:unset;min-height:33px}.fwe-select-wrapper .fwe-select .fwe-select-content{padding-right:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5rem}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled)~.fwe-select-label:after{position:relative;left:3px;display:inline-block;content:\"*\"}.fwe-select-wrapper .fwe-select.fwe-disabled{cursor:default;border-color:var(--fwe-control-disabled)!important}.fwe-select-wrapper .fwe-select.fwe-disabled~.fwe-select-label{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip{color:var(--fwe-text-disabled);border:1px solid var(--fwe-control-disabled);pointer-events:none}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip .chip-removable:after{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select-label:empty~.fwe-select-options-container,.fwe-select-wrapper .fwe-select-label.fwe-sr-only~.fwe-select-options-container{top:38px}\n"] }]
+                    ], template: "<div #div class=\"fwe-select-wrapper\" [class.fwe-disabled]=\"disabled\" [class.fng-hide-label]=\"hideLabel\">\n  <div\n    class=\"fwe-select\"\n    (click)=\"toggle()\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    [class.fwe-focus]=\"showOptions\"\n    [class.fwe-required]=\"required\"\n    [class.fwe-disabled]=\"disabled\"\n    [class.fwe-pty]=\"empty\"\n  >\n    <div class=\"fwe-select-content\">\n      <ng-container *ngIf=\"!multiple; else chips\">\n        {{ value != null && value | fngChipText: options:optionsValueKey:optionsTextKey }}\n      </ng-container>\n      <ng-template #chips>\n        <div class=\"fwe-chip-container\">\n          <div\n            *ngFor=\"let v of value\"\n            class=\"fwe-chip chip-text-truncate fwe-pr-4\"\n            [style.max-width.px]=\"triggerWidth\"\n            [title]=\"v | fngChipText: options:optionsValueKey:optionsTextKey\"\n          >\n            {{ v | fngChipText: options:optionsValueKey:optionsTextKey }}\n            <span class=\"chip-removable\" (click)=\"removeChip($event, v)\"></span>\n          </div>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayMinWidth]=\"triggerWidth\"\n    [cdkConnectedOverlayOpen]=\"showOptions\"\n    [cdkConnectedOverlayPanelClass]=\"selectPanelClasses\"\n    (backdropClick)=\"close()\"\n  >\n    <div class=\"fng-select-panel-wrap\">\n      <ul class=\"fwe-select-options-container\">\n        <li class=\"fwe-select-option\" *ngIf=\"resetOption != null && !multiple\" (click)=\"select(null, $event)\">{{ resetOption }}</li>\n        <li\n          class=\"fwe-select-option\"\n          *ngFor=\"let option of options; let i = index\"\n          (click)=\"select(getOptionValue(i), $event)\"\n          [title]=\"getOptionText(i) || option?.text\"\n        >\n          <span class=\"fwe-select-option-content\">\n            <span\n              *ngIf=\"multiple\"\n              class=\"fng-select-pseudo-checkbox\"\n              [ngClass]=\"{ 'fng-select-pseudo-checkbox-checked': checked.get(getOptionValue(i)) === 'checked' }\"\n            ></span>\n            <span *ngIf=\"hasProjectedOptions; else defaultTemplate\" [innerHTML]=\"projectedHtml[i]\"></span>\n            <ng-template #defaultTemplate>{{ getOptionText(i) || option?.text }}</ng-template>\n          </span>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n  <label class=\"fwe-select-label\" [for]=\"id\" [class.fwe-sr-only]=\"hideLabel\">{{ label }}</label>\n  <div class=\"fwe-select-description\" *ngIf=\"hint\">\n    {{ hint }}\n  </div>\n  <div class=\"fwe-select-invalid\" *ngIf=\"error\">\n    {{ error }}\n  </div>\n</div>\n<div class=\"fwe-d-none\" (cdkObserveContent)=\"onContentChange($event)\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.fng-select-panel-open .fng-select-panel{opacity:1!important}fng-select{width:auto}fng-select.ng-invalid:not(.ng-pristine) .fwe-select:hover{border-color:var(--fwe-red)}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-invalid{display:block}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-description{display:none}.fng-select-panel{opacity:0!important}.fng-select-panel.fng-select-panel-options-3 .fwe-select-options-container{max-height:162px}.fng-select-panel.fng-select-panel-options-4 .fwe-select-options-container{max-height:210px}.fng-select-panel.fng-select-panel-options-5 .fwe-select-options-container{max-height:258px}.fng-select-panel.fng-select-panel-options-6 .fwe-select-options-container{max-height:306px}.fng-select-panel.fng-select-panel-options-7 .fwe-select-options-container{max-height:354px}.fng-select-panel.fng-select-panel-options-8 .fwe-select-options-container{max-height:402px}.fng-select-panel.fng-select-panel-options-9 .fwe-select-options-container{max-height:450px}.fng-select-panel.fng-select-panel-options-10 .fwe-select-options-container{max-height:498px}.fng-select-panel .fwe-select-options-container{scrollbar-width:thin;scrollbar-color:var(--fwe-control-scrollbar) var(--fwe-gray-100)}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar{width:12px}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-track{background:transparent}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-thumb{overflow:visible;background-color:var(--fwe-control-scrollbar);border:3px solid rgba(242,243,245,0);-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:6px}.fng-select-panel-wrap{flex-basis:100%}.fwe-select-options-container{position:relative;top:4px;left:0px;max-height:258px;min-width:calc(100% + 0px)!important;max-width:280px;overflow:auto;font-size:var(--fwe-font-size-base);background-color:var(--fwe-white);border-radius:4px;padding:8px;margin:0;border:1px solid var(--fwe-gray-200);box-shadow:0 1px 4px #00000029;list-style:none;outline:0}.fwe-select-options-container .fwe-select-option{position:relative;line-height:24px;padding:12px 8px;min-height:24px;cursor:pointer}.fwe-select-options-container .fwe-select-option:hover{background-color:var(--fwe-gray-100)}.fwe-select-options-container .fwe-select-option:last-child{border-bottom:none}.fwe-select-options-container .fwe-select-option .fwe-select-option-content{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:24px;min-height:24px}.fng-select-pseudo-checkbox{width:16px;height:16px;border-radius:2px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;color:var(--fwe-control-border);border:1px solid;transition:none;margin-right:12px;top:-1px}.fng-select-pseudo-checkbox:after{color:var(--fwe-white);position:absolute;display:block;opacity:0;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked{background:var(--fwe-caerul);border:1px solid var(--fwe-caerul)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked:after{top:3px;left:2px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box}.chip-text-truncate{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-removable:after{position:absolute;right:5px;top:4px;color:var(--fwe-text);font-family:var(--fwe-font-family-icons-16);font-size:var(--fwe-font-size-base);content:\"\\ea1c\";line-height:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fwe-select-wrapper{display:flex;width:inherit;min-width:48px}.fwe-select-wrapper:before{bottom:unset;top:24px}.fwe-select-wrapper.fng-hide-label{margin-top:18px}.fwe-select-wrapper.fng-hide-label:before{top:6px}.fwe-select-wrapper.fwe-disabled:before{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select{cursor:pointer;height:unset;min-height:33px}.fwe-select-wrapper .fwe-select .fwe-select-content{padding-right:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5rem}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled)~.fwe-select-label:after{position:relative;left:3px;display:inline-block;content:\"*\"}.fwe-select-wrapper .fwe-select.fwe-disabled{cursor:default;border-color:var(--fwe-control-disabled)!important}.fwe-select-wrapper .fwe-select.fwe-disabled~.fwe-select-label{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip{color:var(--fwe-text-disabled);border:1px solid var(--fwe-control-disabled);pointer-events:none}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip .chip-removable:after{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select-label:empty~.fwe-select-options-container,.fwe-select-wrapper .fwe-select-label.fwe-sr-only~.fwe-select-options-container{top:38px}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]

package/esm2020/lib/forms/slider/slider.component.mjs

@@ -75,7 +75,7 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             useExisting: forwardRef(() => SliderComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<label class=\"fwe-slider\" [class.fwe-slider-lg]=\"large\" [class.fng-slider-label]=\"label != null\">\n  <span *ngIf=\"label\">{{ label }}</span>\n  <input\n    type=\"range\"\n    class=\"fwe-slider-input\"\n    [disabled]=\"disabled\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.step]=\"step\"\n    autocomplete=\"off\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n  />\n  <span *ngIf=\"left != null\" class=\"fng-slider-value\" [style.left]=\"left + 'px'\">{{ value | number: digitsInfo:locale }}</span>\n</label>\n", styles: ["label.fwe-slider{display:block;height:56px;position:relative}label.fwe-slider.fng-slider-label{height:83px}label.fwe-slider .fng-slider-value{color:var(--fwe-text);font-size:16px;margin-bottom:0;position:absolute;bottom:0px;-webkit-user-select:none;user-select:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i1.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
+    ], ngImport: i0, template: "<label class=\"fwe-slider\" [class.fwe-slider-lg]=\"large\" [class.fng-slider-label]=\"label != null\">\n  <span *ngIf=\"label\">{{ label }}</span>\n  <input\n    type=\"range\"\n    class=\"fwe-slider-input\"\n    [disabled]=\"disabled\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.step]=\"step\"\n    autocomplete=\"off\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n  />\n  <span *ngIf=\"left != null\" class=\"fng-slider-value\" [style.left]=\"left + 'px'\">{{ value | number: digitsInfo:locale }}</span>\n</label>\n", styles: ["label.fwe-slider{display:block;height:56px;position:relative}label.fwe-slider.fng-slider-label{height:83px}label.fwe-slider .fng-slider-value{color:var(--fwe-text);font-size:var(--fwe-font-size-base);margin-bottom:0;position:absolute;bottom:0px;-webkit-user-select:none;user-select:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i1.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fng-slider', providers: [
@@ -84,7 +84,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                             useExisting: forwardRef(() => SliderComponent),
                             multi: true
                         }
-                    ], encapsulation: ViewEncapsulation.None, template: "<label class=\"fwe-slider\" [class.fwe-slider-lg]=\"large\" [class.fng-slider-label]=\"label != null\">\n  <span *ngIf=\"label\">{{ label }}</span>\n  <input\n    type=\"range\"\n    class=\"fwe-slider-input\"\n    [disabled]=\"disabled\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.step]=\"step\"\n    autocomplete=\"off\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n  />\n  <span *ngIf=\"left != null\" class=\"fng-slider-value\" [style.left]=\"left + 'px'\">{{ value | number: digitsInfo:locale }}</span>\n</label>\n", styles: ["label.fwe-slider{display:block;height:56px;position:relative}label.fwe-slider.fng-slider-label{height:83px}label.fwe-slider .fng-slider-value{color:var(--fwe-text);font-size:16px;margin-bottom:0;position:absolute;bottom:0px;-webkit-user-select:none;user-select:none}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<label class=\"fwe-slider\" [class.fwe-slider-lg]=\"large\" [class.fng-slider-label]=\"label != null\">\n  <span *ngIf=\"label\">{{ label }}</span>\n  <input\n    type=\"range\"\n    class=\"fwe-slider-input\"\n    [disabled]=\"disabled\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.step]=\"step\"\n    autocomplete=\"off\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n  />\n  <span *ngIf=\"left != null\" class=\"fng-slider-value\" [style.left]=\"left + 'px'\">{{ value | number: digitsInfo:locale }}</span>\n</label>\n", styles: ["label.fwe-slider{display:block;height:56px;position:relative}label.fwe-slider.fng-slider-label{height:83px}label.fwe-slider .fng-slider-value{color:var(--fwe-text);font-size:var(--fwe-font-size-base);margin-bottom:0;position:absolute;bottom:0px;-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { label: [{
                 type: Input
             }], large: [{

package/esm2020/lib/forms/text-area/text-area.component.mjs

@@ -139,7 +139,7 @@ TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             useExisting: forwardRef(() => TextAreaComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<label class=\"fwe-input-text\">\n  <textarea\n    #inputElement\n    [class]=\"'fwe-row-' + rows\"\n    [disabled]=\"disabled\"\n    [required]=\"required === true || null\"\n    [attr.readonly]=\"readonly === true || null\"\n    [attr.placeholder]=\"placeholder || null\"\n    [attr.name]=\"name || null\"\n    [attr.tabindex]=\"tabindex\"\n    [class.fng-has-value]=\"value != null && value !== ''\"\n    autocomplete=\"off\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    >{{ value }}</textarea\n  >\n  <span class=\"fwe-input-text-label\">{{ label }}</span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n  <span *ngIf=\"maxlength > 0 && value != null\" class=\"fwe-input-text-count\">{{ value.length }} / {{ maxlength }}</span>\n</label>\n", styles: ["fng-text-area.ng-invalid label.fwe-input-text textarea{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-area.ng-invalid label.fwe-input-text textarea:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-label,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-invalid,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}label.fwe-input-text .fwe-input-text-count{display:block;line-height:1.5;position:absolute;right:0px;bottom:0px;color:var(--fwe-text-disabled);font-size:12px}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<label class=\"fwe-input-text\">\n  <textarea\n    #inputElement\n    [class]=\"'fwe-row-' + rows\"\n    [disabled]=\"disabled\"\n    [required]=\"required === true || null\"\n    [attr.readonly]=\"readonly === true || null\"\n    [attr.placeholder]=\"placeholder || null\"\n    [attr.name]=\"name || null\"\n    [attr.tabindex]=\"tabindex\"\n    [class.fng-has-value]=\"value != null && value !== ''\"\n    autocomplete=\"off\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    >{{ value }}</textarea\n  >\n  <span class=\"fwe-input-text-label\">{{ label }}</span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n  <span *ngIf=\"maxlength > 0 && value != null\" class=\"fwe-input-text-count\">{{ value.length }} / {{ maxlength }}</span>\n</label>\n", styles: ["fng-text-area.ng-invalid label.fwe-input-text textarea{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-area.ng-invalid label.fwe-input-text textarea:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-label,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-invalid,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}label.fwe-input-text .fwe-input-text-count{display:block;line-height:var(--fwe-line-height-base);position:absolute;right:0px;bottom:0px;color:var(--fwe-text-disabled);font-size:var(--fwe-font-size-small)}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fng-text-area', providers: [
@@ -148,7 +148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                             useExisting: forwardRef(() => TextAreaComponent),
                             multi: true
                         }
-                    ], encapsulation: ViewEncapsulation.None, template: "<label class=\"fwe-input-text\">\n  <textarea\n    #inputElement\n    [class]=\"'fwe-row-' + rows\"\n    [disabled]=\"disabled\"\n    [required]=\"required === true || null\"\n    [attr.readonly]=\"readonly === true || null\"\n    [attr.placeholder]=\"placeholder || null\"\n    [attr.name]=\"name || null\"\n    [attr.tabindex]=\"tabindex\"\n    [class.fng-has-value]=\"value != null && value !== ''\"\n    autocomplete=\"off\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    >{{ value }}</textarea\n  >\n  <span class=\"fwe-input-text-label\">{{ label }}</span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n  <span *ngIf=\"maxlength > 0 && value != null\" class=\"fwe-input-text-count\">{{ value.length }} / {{ maxlength }}</span>\n</label>\n", styles: ["fng-text-area.ng-invalid label.fwe-input-text textarea{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-area.ng-invalid label.fwe-input-text textarea:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-label,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-invalid,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}label.fwe-input-text .fwe-input-text-count{display:block;line-height:1.5;position:absolute;right:0px;bottom:0px;color:var(--fwe-text-disabled);font-size:12px}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<label class=\"fwe-input-text\">\n  <textarea\n    #inputElement\n    [class]=\"'fwe-row-' + rows\"\n    [disabled]=\"disabled\"\n    [required]=\"required === true || null\"\n    [attr.readonly]=\"readonly === true || null\"\n    [attr.placeholder]=\"placeholder || null\"\n    [attr.name]=\"name || null\"\n    [attr.tabindex]=\"tabindex\"\n    [class.fng-has-value]=\"value != null && value !== ''\"\n    autocomplete=\"off\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    >{{ value }}</textarea\n  >\n  <span class=\"fwe-input-text-label\">{{ label }}</span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n  <span *ngIf=\"maxlength > 0 && value != null\" class=\"fwe-input-text-count\">{{ value.length }} / {{ maxlength }}</span>\n</label>\n", styles: ["fng-text-area.ng-invalid label.fwe-input-text textarea{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-area.ng-invalid label.fwe-input-text textarea:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-label,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-invalid,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}label.fwe-input-text .fwe-input-text-count{display:block;line-height:var(--fwe-line-height-base);position:absolute;right:0px;bottom:0px;color:var(--fwe-text-disabled);font-size:var(--fwe-font-size-small)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], readonly: [{