@festo-ui/angular 3.1.0-pre-20220203.2 → 3.1.0-pre-20220217.1

package/esm2015/lib/forms/color-picker/color-picker.component.js

@@ -1,280 +0,0 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Component, forwardRef, Input, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ColorHelper } from './color-helper';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@angular/cdk/drag-drop";
-import * as i3 from "@angular/forms";
-export const PREDEFINED_COLORS = [
-    '#0091dc',
-    '#333333',
-    '#ffffff',
-    '#f2f3f5',
-    '#e5e8eb',
-    '#d8dce1',
-    '#b6bec6',
-    '#80ca3d',
-    '#ffd600',
-    '#ff9600',
-    '#d50000'
-];
-/**
- * A custom form element to pick a color.
- */
-export class ColorPickerComponent {
-    constructor() {
-        this.baseSize = 184;
-        this.inputType = 'RGB';
-        this.isSelectOpen = false;
-        this.useAlpha = false;
-        this.alphaChange = new EventEmitter();
-        /**
-         * hide the hue and gradient picker and shot the palette only.
-         */
-        this.paletteOnly = false;
-        // input controls
-        this.hexInputColor = '#ff0000';
-        this.redInput = 255;
-        this.greenInput = 0;
-        this.blueInput = 0;
-        this.alphaInput = 100;
-        // poitions of the knobs in px
-        this.hueKnobOffset = 0;
-        this.alphaKnobOffset = 0;
-        this.saturationKnobOffset = 0;
-        this.valueKnobOffset = 0;
-    }
-    get alpha() {
-        return this.innerAlpha;
-    }
-    set alpha(value) {
-        if (value <= 100 && value >= 0 && this.innerAlpha !== Math.round(value)) {
-            this.innerAlpha = Math.round(value);
-            this.alphaInput = this.innerAlpha;
-            this.updateKnobs();
-        }
-    }
-    /**
-     * The current color
-     */
-    get color() {
-        return this.innerColor;
-    }
-    set color(value) {
-        if (this.isHexColor(value)) {
-            this.innerColor = value.toUpperCase();
-        }
-        else {
-            this.innerColor = null;
-        }
-        this.updateColorRgb(true);
-    }
-    get disabled() {
-        return this.innerDisabled;
-    }
-    set disabled(value) {
-        this.innerDisabled = coerceBooleanProperty(value);
-    }
-    ngOnChanges(changes) {
-        var _a, _b;
-        if (((_b = (_a = changes === null || changes === void 0 ? void 0 : changes.palette) === null || _a === void 0 ? void 0 : _a.currentValue) === null || _b === void 0 ? void 0 : _b.length) > 0 && changes.palette.currentValue.indexOf('FESTO_COLORS') !== -1) {
-            this.palette = PREDEFINED_COLORS;
-        }
-    }
-    // ControlValueAccessor
-    writeValue(color) {
-        if (this.isHexColor(color)) {
-            this.innerColor = color.toUpperCase();
-        }
-        else {
-            this.innerColor = null;
-        }
-        this.updateColorRgb(false);
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.innerDisabled = isDisabled;
-    }
-    // update method for changes of the rgb value
-    updateColorRgb(emitChange) {
-        const currentColor = this.innerColor || '#FFFFFF';
-        this.updateInputs(currentColor);
-        const rgb = ColorHelper.hexToRgb(currentColor);
-        const hsv = ColorHelper.rgbToHsv(rgb);
-        this.hue = hsv.h;
-        this.saturation = hsv.s;
-        this.value = hsv.v;
-        this.updateKnobs();
-        if (emitChange) {
-            if (this.onChange != null) {
-                this.onChange(this.innerColor);
-            }
-            if (this.onTouched != null) {
-                this.onTouched();
-            }
-        }
-    }
-    // update method for changes of the hsv value
-    updateColorHsv() {
-        const rgb = ColorHelper.hsvToRgb({ h: this.hue, s: this.saturation, v: this.value });
-        this.innerColor = ColorHelper.rgbToHex(rgb);
-        this.updateInputs(this.innerColor);
-        if (this.onChange != null) {
-            this.onChange(this.innerColor);
-        }
-        if (this.onTouched != null) {
-            this.onTouched();
-        }
-    }
-    // event handler for inputs
-    onHexBlur() {
-        if (this.isHexColor(this.hexInputColor)) {
-            this.color = this.hexInputColor.toUpperCase();
-        }
-        else {
-            this.hexInputColor = this.color;
-        }
-    }
-    onHexInput() {
-        if (this.isHexColor(this.hexInputColor)) {
-            this.color = this.hexInputColor.toUpperCase();
-        }
-    }
-    onRgbBlur() {
-        if (this.isHexColor(this.hexInputColor)) {
-            this.color = this.hexInputColor.toUpperCase();
-        }
-        else {
-            this.hexInputColor = this.color;
-        }
-    }
-    onRgbInput(value, channel) {
-        if (value > 255 || value < 0) {
-            this.updateInputs(this.innerColor);
-        }
-        else {
-            const rgb = ColorHelper.hexToRgb(this.innerColor);
-            rgb[channel] = value;
-            this.innerColor = ColorHelper.rgbToHex(rgb);
-            this.updateColorRgb(true);
-        }
-    }
-    onAlphaInput(value) {
-        if (value > 100 || value < 0) {
-            this.alphaInput = this.innerAlpha;
-        }
-        else {
-            this.alpha = value;
-            this.alphaChange.emit(this.alpha);
-        }
-    }
-    onGradientClick(event) {
-        this.saturation = event.offsetX / this.baseSize;
-        this.value = (this.baseSize - event.offsetY) / this.baseSize;
-        this.updateColorHsv();
-        this.updateKnobs();
-    }
-    onGradientDrag(event) {
-        const position = event.source.getFreeDragPosition();
-        this.saturation = Math.floor(position.x) / this.baseSize;
-        this.value = (this.baseSize - position.y) / this.baseSize;
-        this.updateColorHsv();
-    }
-    onHueClick(event) {
-        this.hue = event.offsetY / this.baseSize;
-        this.updateColorHsv();
-        this.updateKnobs();
-    }
-    onAlphaClick(event) {
-        this.alpha = 100 - Math.round((event.offsetY / this.baseSize) * 100);
-        this.alphaChange.emit(this.alpha);
-    }
-    onHueDrag(event) {
-        const position = event.source.getFreeDragPosition();
-        this.hue = (position.y + this.baseSize + 14) / this.baseSize;
-        this.updateColorHsv();
-    }
-    onAlphaDrag(event) {
-        const position = event.source.getFreeDragPosition();
-        this.innerAlpha = 100 - Math.round((position.y / this.baseSize) * 100);
-        this.alphaInput = this.innerAlpha;
-        this.alphaChange.emit(this.innerAlpha);
-    }
-    onRemoveColor() {
-        if (this.useAlpha) {
-            this.alpha = 0;
-            this.alphaChange.emit(this.alpha);
-        }
-        else {
-            this.color = null;
-        }
-    }
-    isHexColor(value) {
-        return /^#[0-9A-F]{6}$/i.test(value);
-    }
-    getSaturationGradient() {
-        return 'linear-gradient(to right, white,  hsl(' + this.hue * 360 + ', 100%, 50%) )';
-    }
-    updateInputs(hexColor) {
-        this.hexInputColor = hexColor;
-        const rgb = ColorHelper.hexToRgb(hexColor);
-        this.redInput = rgb.r;
-        this.greenInput = rgb.g;
-        this.blueInput = rgb.b;
-    }
-    updateKnobs() {
-        this.alphaKnobOffset = ((100 - this.alpha) / 100) * this.baseSize;
-        this.hueKnobOffset = this.hue * this.baseSize - (this.baseSize + 14);
-        this.saturationKnobOffset = this.saturation * this.baseSize;
-        this.valueKnobOffset = (1 - this.value) * this.baseSize;
-    }
-    onChangeType(type) {
-        this.inputType = type;
-        this.isSelectOpen = false;
-    }
-}
-ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: ColorPickerComponent, selector: "fng-color-picker", inputs: { useAlpha: "useAlpha", alpha: "alpha", color: "color", disabled: "disabled", palette: "palette", paletteOnly: "paletteOnly" }, outputs: { alphaChange: "alphaChange" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            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: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{width:32px;margin-right:8px}.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: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], 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: "12.2.0", ngImport: i0, type: ColorPickerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fng-color-picker',
-                    templateUrl: './color-picker.component.html',
-                    styleUrls: ['../text-input/text-input.component.scss', './color-picker.component.scss'],
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ColorPickerComponent),
-                            multi: true
-                        }
-                    ],
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], propDecorators: { useAlpha: [{
-                type: Input
-            }], alpha: [{
-                type: Input
-            }], alphaChange: [{
-                type: Output
-            }], color: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], palette: [{
-                type: Input
-            }], paletteOnly: [{
-                type: Input
-            }] } });
-//# sourceMappingURL=color-picker.component.js.map

package/esm2015/lib/forms/color-picker/color-picker.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular/src/lib/forms/color-picker/color-picker.component.ts","../../../../../../../libs/angular/src/lib/forms/color-picker/color-picker.component.html"],"names":[],"mappings":"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","sourcesContent":["import { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { CdkDragMove } from '@angular/cdk/drag-drop';\nimport { Component, forwardRef, Input, ViewEncapsulation, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ColorHelper } from './color-helper';\n\nexport const PREDEFINED_COLORS: string[] = [\n  '#0091dc',\n  '#333333',\n  '#ffffff',\n  '#f2f3f5',\n  '#e5e8eb',\n  '#d8dce1',\n  '#b6bec6',\n  '#80ca3d',\n  '#ffd600',\n  '#ff9600',\n  '#d50000'\n];\n\n/**\n * A custom form element to pick a color.\n */\n@Component({\n  selector: 'fng-color-picker',\n  templateUrl: './color-picker.component.html',\n  styleUrls: ['../text-input/text-input.component.scss', './color-picker.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ColorPickerComponent),\n      multi: true\n    }\n  ],\n  encapsulation: ViewEncapsulation.None\n})\nexport class ColorPickerComponent implements OnChanges, ControlValueAccessor {\n  baseSize = 184;\n\n  inputType = 'RGB';\n\n  isSelectOpen = false;\n\n  @Input() useAlpha = false;\n\n  @Input()\n  get alpha(): number {\n    return this.innerAlpha;\n  }\n  set alpha(value: number) {\n    if (value <= 100 && value >= 0 && this.innerAlpha !== Math.round(value)) {\n      this.innerAlpha = Math.round(value);\n      this.alphaInput = this.innerAlpha;\n      this.updateKnobs();\n    }\n  }\n\n  @Output() alphaChange = new EventEmitter<number>();\n\n  /**\n   * The current color\n   */\n  get color(): string {\n    return this.innerColor;\n  }\n  @Input()\n  set color(value: string) {\n    if (this.isHexColor(value)) {\n      this.innerColor = value.toUpperCase();\n    } else {\n      this.innerColor = null;\n    }\n    this.updateColorRgb(true);\n  }\n\n  @Input()\n  get disabled(): boolean {\n    return this.innerDisabled;\n  }\n  set disabled(value: boolean) {\n    this.innerDisabled = coerceBooleanProperty(value);\n  }\n\n  /**\n   * an array with color strings representing the palette.\n   * Example: ['#234567, '#AA00FF']\n   * Pass null to hide palette.\n   */\n  @Input() palette: string[];\n\n  /**\n   * hide the hue and gradient picker and shot the palette only.\n   */\n  @Input() paletteOnly = false;\n\n  private innerColor: string;\n  private innerDisabled: boolean;\n  private innerAlpha: number;\n\n  // input controls\n  hexInputColor = '#ff0000';\n  redInput = 255;\n  greenInput = 0;\n  blueInput = 0;\n  alphaInput = 100;\n\n  // HSV value\n  hue: number;\n  saturation: number;\n  value: number;\n\n  // poitions of the knobs in px\n  hueKnobOffset = 0;\n  alphaKnobOffset = 0;\n  saturationKnobOffset = 0;\n  valueKnobOffset = 0;\n\n  // callbacks for ControlValueAccessor\n  onTouched: () => any;\n  onChange: (color: string) => any;\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes?.palette?.currentValue?.length > 0 && changes.palette.currentValue.indexOf('FESTO_COLORS') !== -1) {\n      this.palette = PREDEFINED_COLORS;\n    }\n  }\n\n  // ControlValueAccessor\n  writeValue(color: string): void {\n    if (this.isHexColor(color)) {\n      this.innerColor = color.toUpperCase();\n    } else {\n      this.innerColor = null;\n    }\n    this.updateColorRgb(false);\n  }\n\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState?(isDisabled: boolean): void {\n    this.innerDisabled = isDisabled;\n  }\n\n  // update method for changes of the rgb value\n  updateColorRgb(emitChange: boolean) {\n    const currentColor = this.innerColor || '#FFFFFF';\n    this.updateInputs(currentColor);\n    const rgb = ColorHelper.hexToRgb(currentColor);\n    const hsv = ColorHelper.rgbToHsv(rgb);\n    this.hue = hsv.h;\n    this.saturation = hsv.s;\n    this.value = hsv.v;\n    this.updateKnobs();\n    if (emitChange) {\n      if (this.onChange != null) {\n        this.onChange(this.innerColor);\n      }\n      if (this.onTouched != null) {\n        this.onTouched();\n      }\n    }\n  }\n\n  // update method for changes of the hsv value\n  updateColorHsv() {\n    const rgb = ColorHelper.hsvToRgb({ h: this.hue, s: this.saturation, v: this.value });\n    this.innerColor = ColorHelper.rgbToHex(rgb);\n    this.updateInputs(this.innerColor);\n    if (this.onChange != null) {\n      this.onChange(this.innerColor);\n    }\n    if (this.onTouched != null) {\n      this.onTouched();\n    }\n  }\n\n  // event handler for inputs\n  onHexBlur() {\n    if (this.isHexColor(this.hexInputColor)) {\n      this.color = this.hexInputColor.toUpperCase();\n    } else {\n      this.hexInputColor = this.color;\n    }\n  }\n\n  onHexInput() {\n    if (this.isHexColor(this.hexInputColor)) {\n      this.color = this.hexInputColor.toUpperCase();\n    }\n  }\n\n  onRgbBlur() {\n    if (this.isHexColor(this.hexInputColor)) {\n      this.color = this.hexInputColor.toUpperCase();\n    } else {\n      this.hexInputColor = this.color;\n    }\n  }\n\n  onRgbInput(value: number, channel: string) {\n    if (value > 255 || value < 0) {\n      this.updateInputs(this.innerColor);\n    } else {\n      const rgb = ColorHelper.hexToRgb(this.innerColor);\n      rgb[channel] = value;\n      this.innerColor = ColorHelper.rgbToHex(rgb);\n      this.updateColorRgb(true);\n    }\n  }\n\n  onAlphaInput(value: number) {\n    if (value > 100 || value < 0) {\n      this.alphaInput = this.innerAlpha;\n    } else {\n      this.alpha = value;\n      this.alphaChange.emit(this.alpha);\n    }\n  }\n\n  onGradientClick(event: MouseEvent) {\n    this.saturation = event.offsetX / this.baseSize;\n    this.value = (this.baseSize - event.offsetY) / this.baseSize;\n    this.updateColorHsv();\n    this.updateKnobs();\n  }\n\n  onGradientDrag(event: CdkDragMove) {\n    const position = event.source.getFreeDragPosition();\n    this.saturation = Math.floor(position.x) / this.baseSize;\n    this.value = (this.baseSize - position.y) / this.baseSize;\n    this.updateColorHsv();\n  }\n\n  onHueClick(event: MouseEvent) {\n    this.hue = event.offsetY / this.baseSize;\n    this.updateColorHsv();\n    this.updateKnobs();\n  }\n\n  onAlphaClick(event: MouseEvent) {\n    this.alpha = 100 - Math.round((event.offsetY / this.baseSize) * 100);\n    this.alphaChange.emit(this.alpha);\n  }\n\n  onHueDrag(event: CdkDragMove) {\n    const position = event.source.getFreeDragPosition();\n    this.hue = (position.y + this.baseSize + 14) / this.baseSize;\n    this.updateColorHsv();\n  }\n\n  onAlphaDrag(event: CdkDragMove) {\n    const position = event.source.getFreeDragPosition();\n    this.innerAlpha = 100 - Math.round((position.y / this.baseSize) * 100);\n    this.alphaInput = this.innerAlpha;\n    this.alphaChange.emit(this.innerAlpha);\n  }\n\n  onRemoveColor() {\n    if (this.useAlpha) {\n      this.alpha = 0;\n      this.alphaChange.emit(this.alpha);\n    } else {\n      this.color = null;\n    }\n  }\n\n  isHexColor(value: string) {\n    return /^#[0-9A-F]{6}$/i.test(value);\n  }\n\n  getSaturationGradient(): string {\n    return 'linear-gradient(to right, white,  hsl(' + this.hue * 360 + ', 100%, 50%) )';\n  }\n\n  updateInputs(hexColor: string) {\n    this.hexInputColor = hexColor;\n    const rgb = ColorHelper.hexToRgb(hexColor);\n    this.redInput = rgb.r;\n    this.greenInput = rgb.g;\n    this.blueInput = rgb.b;\n  }\n\n  updateKnobs() {\n    this.alphaKnobOffset = ((100 - this.alpha) / 100) * this.baseSize;\n    this.hueKnobOffset = this.hue * this.baseSize - (this.baseSize + 14);\n    this.saturationKnobOffset = this.saturation * this.baseSize;\n    this.valueKnobOffset = (1 - this.value) * this.baseSize;\n  }\n\n  onChangeType(type: string) {\n    this.inputType = type;\n    this.isSelectOpen = false;\n  }\n}\n","<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"]}

package/esm2015/lib/forms/container-host.js

@@ -1,27 +0,0 @@
-import { HostListener, ElementRef, Directive } from '@angular/core';
-import * as i0 from "@angular/core";
-export class ContainerHostDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    onHostClick(target) {
-        if (this.elementRef && this.elementRef.nativeElement) {
-            const containsTarget = this.elementRef.nativeElement.contains(target);
-            if (!containsTarget) {
-                this.onOutsideClick();
-            }
-            else {
-                this.onContainerClick();
-            }
-        }
-    }
-}
-ContainerHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ContainerHostDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ContainerHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.0", type: ContainerHostDirective, host: { listeners: { "document:click": "onHostClick($event.target)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ContainerHostDirective, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onHostClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event.target']]
-            }] } });
-//# sourceMappingURL=container-host.js.map

package/esm2015/lib/forms/container-host.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"container-host.js","sourceRoot":"","sources":["../../../../../../libs/angular/src/lib/forms/container-host.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAGpE,MAAM,OAAgB,sBAAsB;IAC1C,YAAmB,UAAsB;QAAtB,eAAU,GAAV,UAAU,CAAY;IAAG,CAAC;IAGtC,WAAW,CAAC,MAAe;QAChC,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE;YACpD,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;YACtE,IAAI,CAAC,cAAc,EAAE;gBACnB,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;iBAAM;gBACL,IAAI,CAAC,gBAAgB,EAAE,CAAC;aACzB;SACF;IACH,CAAC;;mHAbmB,sBAAsB;uGAAtB,sBAAsB;2FAAtB,sBAAsB;kBAD3C,SAAS;iGAKD,WAAW;sBADjB,YAAY;uBAAC,gBAAgB,EAAE,CAAC,eAAe,CAAC","sourcesContent":["import { HostListener, ElementRef, Directive } from '@angular/core';\n\n@Directive()\nexport abstract class ContainerHostDirective {\n  constructor(public elementRef: ElementRef) {}\n\n  @HostListener('document:click', ['$event.target'])\n  public onHostClick(target: Element) {\n    if (this.elementRef && this.elementRef.nativeElement) {\n      const containsTarget = this.elementRef.nativeElement.contains(target);\n      if (!containsTarget) {\n        this.onOutsideClick();\n      } else {\n        this.onContainerClick();\n      }\n    }\n  }\n\n  abstract onOutsideClick(): void;\n  abstract onContainerClick(): void;\n}\n"]}

package/esm2015/lib/forms/date-picker/date-picker.component.js

@@ -1,205 +0,0 @@
-import { Component, ViewEncapsulation, forwardRef, Input, ElementRef, ViewChild, HostListener, HostBinding } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Overlay } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
-import { FlatpickrComponent } from '../../wrappers/flatpickr/flatpickr.component';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { formatDate } from '@angular/common';
-import { LOCALE_ID, Inject } from '@angular/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/cdk/overlay";
-import * as i2 from "@angular/common";
-export class DatePickerComponent {
-    constructor(overlay, localeDefault) {
-        this.overlay = overlay;
-        this.localeDefault = localeDefault;
-        this.innerDisabled = false;
-        this.innerRequired = false;
-        this.display = 'block';
-        this.complete = new Subject();
-    }
-    get value() {
-        return this.innerValue;
-    }
-    set value(date) {
-        if (!this.disabled) {
-            this.innerValue = date;
-            if (this.onChange != null) {
-                this.onChange(date);
-            }
-            if (this.onTouched != null) {
-                this.onTouched();
-            }
-        }
-    }
-    get disabled() {
-        return this.innerDisabled;
-    }
-    set disabled(value) {
-        this.innerDisabled = coerceBooleanProperty(value);
-    }
-    get required() {
-        return this.innerRequired;
-    }
-    set required(value) {
-        this.innerRequired = coerceBooleanProperty(value);
-    }
-    get displayValue() {
-        if (!this.value) {
-            return null;
-        }
-        const format = this.format || 'mediumDate';
-        const locale = this.locale || this.localeDefault;
-        const timezone = this.timezone;
-        return formatDate(this.value, format, locale, timezone);
-    }
-    hide(event) {
-        if (event.key === 'Escape' || event.key === 'Tab') {
-            this.dispose();
-        }
-    }
-    onDateChange(date) {
-        this.value = date;
-    }
-    writeValue(date) {
-        this.innerValue = date;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    toggle(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!this.disabled) {
-            if (this.datePickerRef == null) {
-                this.datePickerRef = this.overlay.create({
-                    hasBackdrop: true,
-                    backdropClass: 'fng-date-picker-backdrop',
-                    scrollStrategy: this.overlay.scrollStrategies.block(),
-                    positionStrategy: this.overlay
-                        .position()
-                        .flexibleConnectedTo(this.connector.nativeElement)
-                        .withPositions([
-                        {
-                            originX: 'center',
-                            originY: 'bottom',
-                            overlayX: 'center',
-                            overlayY: 'top',
-                            offsetY: -12,
-                            offsetX: -10,
-                            panelClass: ['flatpickr-calendar', 'open']
-                        },
-                        {
-                            originX: 'center',
-                            originY: 'top',
-                            overlayX: 'center',
-                            overlayY: 'bottom',
-                            offsetY: 4,
-                            offsetX: -10,
-                            panelClass: ['flatpickr-calendar', 'open']
-                        }
-                    ])
-                        .withFlexibleDimensions(false)
-                        .withPush(false)
-                });
-                const datePickerPortal = new ComponentPortal(FlatpickrComponent);
-                this.datePicker = this.datePickerRef.attach(datePickerPortal);
-                this.datePicker.instance.options = this.options;
-                this.datePicker.instance.date = this.value;
-                this.datePicker.instance.dateChange.pipe(takeUntil(this.complete)).subscribe((c) => {
-                    this.onDateChange(c);
-                    if (this.options == null || !this.options.keepOpenOnDateChange) {
-                        this.dispose();
-                    }
-                });
-                this.datePickerRef
-                    .backdropClick()
-                    .pipe(takeUntil(this.complete))
-                    .subscribe(() => this.dispose());
-                this.datePicker.instance.ngOnInit();
-            }
-            else {
-                this.dispose();
-            }
-        }
-    }
-    dispose() {
-        if (this.datePickerRef != null) {
-            this.datePickerRef.detach();
-            this.datePickerRef.dispose();
-            this.datePickerRef = null;
-        }
-        if (this.complete != null) {
-            this.complete.next();
-            this.complete.complete();
-        }
-    }
-}
-DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1.Overlay }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: DatePickerComponent, selector: "fng-date-picker", inputs: { value: "value", disabled: "disabled", hint: "hint", error: "error", options: "options", locale: "locale", format: "format", timezone: "timezone", required: "required", width: "width" }, host: { listeners: { "document:keydown": "hide($event)" }, properties: { "style.width": "this.width", "style.display": "this.display" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => DatePickerComponent),
-            multi: true
-        }
-    ], viewQueries: [{ propertyName: "connector", first: true, predicate: ["connector"], descendants: true, static: true }], ngImport: i0, template: "<label #connector class=\"fng-date-picker fwe-input-text fwe-input-text-icon\" (click)=\"toggle($event)\">\n  <i class=\"fwe-icon fwe-icon-time-calendar\" [class.fwe-color-hero]=\"datePickerRef != null\" [class.fwe-color-control-disabled]=\"disabled\"></i>\n  <input\n    aria-label=\"picked date\"\n    type=\"text\"\n    readonly\n    [required]=\"required === true || null\"\n    [class.fwe-border-hero]=\"datePickerRef != null\"\n    [value]=\"displayValue\"\n    [disabled]=\"disabled\"\n  />\n  <span class=\"fwe-input-text-label\"><ng-content></ng-content></span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n</label>\n", styles: [".fwe-border-hero{border-color:var(--fwe-hero)!important}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: DatePickerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fng-date-picker',
-                    templateUrl: './date-picker.component.html',
-                    styleUrls: ['./date-picker.component.scss'],
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DatePickerComponent),
-                            multi: true
-                        }
-                    ],
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }]; }, propDecorators: { value: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], hint: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], locale: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], timezone: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], connector: [{
-                type: ViewChild,
-                args: ['connector', { static: true }]
-            }], width: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.width']
-            }], display: [{
-                type: HostBinding,
-                args: ['style.display']
-            }], hide: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }] } });
-//# sourceMappingURL=date-picker.component.js.map

package/esm2015/lib/forms/date-picker/date-picker.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-picker.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular/src/lib/forms/date-picker/date-picker.component.ts","../../../../../../../libs/angular/src/lib/forms/date-picker/date-picker.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, ViewEncapsulation, forwardRef, Input, ElementRef, ViewChild, ComponentRef, HostListener, HostBinding } from '@angular/core';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { FlatpickrComponent } from '../../wrappers/flatpickr/flatpickr.component';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { formatDate } from '@angular/common';\nimport { LOCALE_ID, Inject } from '@angular/core';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\n\nexport interface DatePickerOptions {\n  maxDate?: Date;\n  minDate?: Date;\n  keepOpenOnDateChange?: boolean;\n}\n\n@Component({\n  selector: 'fng-date-picker',\n  templateUrl: './date-picker.component.html',\n  styleUrls: ['./date-picker.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => DatePickerComponent),\n      multi: true\n    }\n  ],\n  encapsulation: ViewEncapsulation.None\n})\nexport class DatePickerComponent implements ControlValueAccessor {\n  get value(): Date {\n    return this.innerValue;\n  }\n  @Input()\n  set value(date: Date) {\n    if (!this.disabled) {\n      this.innerValue = date;\n      if (this.onChange != null) {\n        this.onChange(date);\n      }\n      if (this.onTouched != null) {\n        this.onTouched();\n      }\n    }\n  }\n\n  @Input()\n  get disabled(): boolean {\n    return this.innerDisabled;\n  }\n  set disabled(value: boolean) {\n    this.innerDisabled = coerceBooleanProperty(value);\n  }\n  protected innerDisabled = false;\n\n  @Input() hint: string;\n  @Input() error: string;\n  @Input() options: DatePickerOptions;\n\n  /** A locale code for the locale format rules to use. */\n  @Input() locale: string;\n\n  /* The date-time components to include. See `DatePipe` for details. */\n  @Input() format: string;\n\n  /** The time zone. A time zone offset from GMT (such as `'+0430'`) */\n  @Input() timezone: string;\n\n  @Input()\n  get required(): boolean {\n    return this.innerRequired;\n  }\n  set required(value: boolean) {\n    this.innerRequired = coerceBooleanProperty(value);\n  }\n  protected innerRequired = false;\n\n  @ViewChild('connector', { static: true }) connector: ElementRef;\n\n  @Input()\n  @HostBinding('style.width') width: string;\n  @HostBinding('style.display') display: string = 'block';\n\n  get displayValue(): string {\n    if (!this.value) {\n      return null;\n    }\n    const format = this.format || 'mediumDate';\n    const locale = this.locale || this.localeDefault;\n    const timezone = this.timezone;\n    return formatDate(this.value, format, locale, timezone);\n  }\n\n  datePickerRef: OverlayRef;\n  private innerValue: Date;\n  private complete = new Subject();\n  private datePicker: ComponentRef<FlatpickrComponent>;\n\n  constructor(private overlay: Overlay, @Inject(LOCALE_ID) private localeDefault: string) {}\n\n  onTouched: () => any;\n  onChange: (date: Date) => any;\n\n  @HostListener('document:keydown', ['$event'])\n  hide(event: KeyboardEvent) {\n    if (event.key === 'Escape' || event.key === 'Tab') {\n      this.dispose();\n    }\n  }\n\n  onDateChange(date: Date) {\n    this.value = date;\n  }\n\n  writeValue(date: Date): void {\n    this.innerValue = date;\n  }\n\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n  }\n\n  toggle(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.disabled) {\n      if (this.datePickerRef == null) {\n        this.datePickerRef = this.overlay.create({\n          hasBackdrop: true,\n          backdropClass: 'fng-date-picker-backdrop',\n          scrollStrategy: this.overlay.scrollStrategies.block(),\n          positionStrategy: this.overlay\n            .position()\n            .flexibleConnectedTo(this.connector.nativeElement)\n            .withPositions([\n              {\n                originX: 'center',\n                originY: 'bottom',\n                overlayX: 'center',\n                overlayY: 'top',\n                offsetY: -12,\n                offsetX: -10,\n                panelClass: ['flatpickr-calendar', 'open']\n              },\n              {\n                originX: 'center',\n                originY: 'top',\n                overlayX: 'center',\n                overlayY: 'bottom',\n                offsetY: 4,\n                offsetX: -10,\n                panelClass: ['flatpickr-calendar', 'open']\n              }\n            ])\n            .withFlexibleDimensions(false)\n            .withPush(false)\n        });\n        const datePickerPortal = new ComponentPortal(FlatpickrComponent);\n        this.datePicker = this.datePickerRef.attach(datePickerPortal);\n        this.datePicker.instance.options = this.options;\n        this.datePicker.instance.date = this.value;\n        this.datePicker.instance.dateChange.pipe(takeUntil(this.complete)).subscribe((c: Date) => {\n          this.onDateChange(c);\n          if (this.options == null || !this.options.keepOpenOnDateChange) {\n            this.dispose();\n          }\n        });\n        this.datePickerRef\n          .backdropClick()\n          .pipe(takeUntil(this.complete))\n          .subscribe(() => this.dispose());\n        this.datePicker.instance.ngOnInit();\n      } else {\n        this.dispose();\n      }\n    }\n  }\n\n  private dispose() {\n    if (this.datePickerRef != null) {\n      this.datePickerRef.detach();\n      this.datePickerRef.dispose();\n      this.datePickerRef = null;\n    }\n    if (this.complete != null) {\n      this.complete.next();\n      this.complete.complete();\n    }\n  }\n}\n","<label #connector class=\"fng-date-picker fwe-input-text fwe-input-text-icon\" (click)=\"toggle($event)\">\n  <i class=\"fwe-icon fwe-icon-time-calendar\" [class.fwe-color-hero]=\"datePickerRef != null\" [class.fwe-color-control-disabled]=\"disabled\"></i>\n  <input\n    aria-label=\"picked date\"\n    type=\"text\"\n    readonly\n    [required]=\"required === true || null\"\n    [class.fwe-border-hero]=\"datePickerRef != null\"\n    [value]=\"displayValue\"\n    [disabled]=\"disabled\"\n  />\n  <span class=\"fwe-input-text-label\"><ng-content></ng-content></span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n</label>\n"]}