ngx-kit 8.2.0 → 8.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngx-kit-box-shadow.mjs +23 -4
- package/fesm2022/ngx-kit-box-shadow.mjs.map +1 -1
- package/fesm2022/ngx-kit-color-picker.mjs +78 -62
- package/fesm2022/ngx-kit-color-picker.mjs.map +1 -1
- package/fesm2022/ngx-kit-core.mjs +4 -4
- package/fesm2022/ngx-kit-core.mjs.map +1 -1
- package/fesm2022/ngx-kit-gradient-picker.mjs +143 -133
- package/fesm2022/ngx-kit-gradient-picker.mjs.map +1 -1
- package/gradient-picker/README.md +1 -1
- package/package.json +1 -1
- package/types/ngx-kit-box-shadow.d.ts +2 -1
- package/types/ngx-kit-color-picker.d.ts +5 -8
- package/types/ngx-kit-gradient-picker.d.ts +16 -12
|
@@ -795,11 +795,11 @@ class CmykComponent {
|
|
|
795
795
|
// return Object.assign({}, cmyk);
|
|
796
796
|
}
|
|
797
797
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CmykComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
798
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: CmykComponent, isStandalone: true, selector: "app-cmyk", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<slider\n [(ngModel)]=\"cyan\"\n name=\"cyan\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"cyanSliderBackground\">\n <div class=\"slider-title\">\n <span>Cyan</span>\n <input type=\"number\" [(ngModel)]=\"cyan\" name=\"inputCyan\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"magenta\"\n name=\"magenta\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"magentaSliderBackground\">\n <div class=\"slider-title\">\n <span>Magenta</span>\n <input type=\"number\" [(ngModel)]=\"magenta\" name=\"inputMagenta\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"yellow\"\n name=\"yellow\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"yellowSliderBackground\">\n <div class=\"slider-title\">\n <span>Yellow</span>\n <input type=\"number\" [(ngModel)]=\"yellow\" name=\"inputYellow\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"key\"\n name=\"key\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"keySliderBackground\">\n <div class=\"slider-title\">\n <span>Key</span>\n <input type=\"number\" [(ngModel)]=\"key\" name=\"inputKey\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset
|
|
798
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: CmykComponent, isStandalone: true, selector: "app-cmyk", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<slider\n [(ngModel)]=\"cyan\"\n name=\"cyan\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"cyanSliderBackground\">\n <div class=\"slider-title\">\n <span>Cyan</span>\n <input type=\"number\" [(ngModel)]=\"cyan\" name=\"inputCyan\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"magenta\"\n name=\"magenta\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"magentaSliderBackground\">\n <div class=\"slider-title\">\n <span>Magenta</span>\n <input type=\"number\" [(ngModel)]=\"magenta\" name=\"inputMagenta\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"yellow\"\n name=\"yellow\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"yellowSliderBackground\">\n <div class=\"slider-title\">\n <span>Yellow</span>\n <input type=\"number\" [(ngModel)]=\"yellow\" name=\"inputYellow\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"key\"\n name=\"key\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"keySliderBackground\">\n <div class=\"slider-title\">\n <span>Key</span>\n <input type=\"number\" [(ngModel)]=\"key\" name=\"inputKey\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset light-dark(#d8d8da,#4b4b4b) 0 0 0 1px,inset light-dark(white,#626262) 0 0 0 100px;border:none;width:40px;color:light-dark(black,white);font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SliderComponent, selector: "slider", inputs: ["step", "min", "max", "background", "isBgTransparent"], outputs: ["change"] }] });
|
|
799
799
|
}
|
|
800
800
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CmykComponent, decorators: [{
|
|
801
801
|
type: Component,
|
|
802
|
-
args: [{ selector: 'app-cmyk', imports: [FormsModule, SliderComponent], template: "<slider\n [(ngModel)]=\"cyan\"\n name=\"cyan\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"cyanSliderBackground\">\n <div class=\"slider-title\">\n <span>Cyan</span>\n <input type=\"number\" [(ngModel)]=\"cyan\" name=\"inputCyan\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"magenta\"\n name=\"magenta\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"magentaSliderBackground\">\n <div class=\"slider-title\">\n <span>Magenta</span>\n <input type=\"number\" [(ngModel)]=\"magenta\" name=\"inputMagenta\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"yellow\"\n name=\"yellow\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"yellowSliderBackground\">\n <div class=\"slider-title\">\n <span>Yellow</span>\n <input type=\"number\" [(ngModel)]=\"yellow\" name=\"inputYellow\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"key\"\n name=\"key\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"keySliderBackground\">\n <div class=\"slider-title\">\n <span>Key</span>\n <input type=\"number\" [(ngModel)]=\"key\" name=\"inputKey\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset
|
|
802
|
+
args: [{ selector: 'app-cmyk', imports: [FormsModule, SliderComponent], template: "<slider\n [(ngModel)]=\"cyan\"\n name=\"cyan\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"cyanSliderBackground\">\n <div class=\"slider-title\">\n <span>Cyan</span>\n <input type=\"number\" [(ngModel)]=\"cyan\" name=\"inputCyan\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"magenta\"\n name=\"magenta\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"magentaSliderBackground\">\n <div class=\"slider-title\">\n <span>Magenta</span>\n <input type=\"number\" [(ngModel)]=\"magenta\" name=\"inputMagenta\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"yellow\"\n name=\"yellow\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"yellowSliderBackground\">\n <div class=\"slider-title\">\n <span>Yellow</span>\n <input type=\"number\" [(ngModel)]=\"yellow\" name=\"inputYellow\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"key\"\n name=\"key\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"keySliderBackground\">\n <div class=\"slider-title\">\n <span>Key</span>\n <input type=\"number\" [(ngModel)]=\"key\" name=\"inputKey\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset light-dark(#d8d8da,#4b4b4b) 0 0 0 1px,inset light-dark(white,#626262) 0 0 0 100px;border:none;width:40px;color:light-dark(black,white);font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"] }]
|
|
803
803
|
}], ctorParameters: () => [], propDecorators: { color: [{
|
|
804
804
|
type: Input
|
|
805
805
|
}], colorChange: [{
|
|
@@ -843,11 +843,11 @@ class HslComponent {
|
|
|
843
843
|
}
|
|
844
844
|
}
|
|
845
845
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HslComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
846
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: HslComponent, isStandalone: true, selector: "app-hsl", inputs: { color: "color", useAlphaChannel: "useAlphaChannel" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<slider\n [(ngModel)]=\"hue\"\n name=\"hue\"\n [min]=\"0\"\n [max]=\"360\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\">\n <div class=\"slider-title\">\n <span>Hue</span>\n <input type=\"number\" [(ngModel)]=\"hue\" name=\"inputHue\" min=\"0\" max=\"360\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"saturation\"\n name=\"saturation\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"'linear-gradient(to right,#808080,' + baseColor + ')'\">\n <div class=\"slider-title\">\n <span>Saturation</span>\n <input\n type=\"number\"\n [(ngModel)]=\"saturation\"\n name=\"inputSaturation\"\n min=\"0\"\n max=\"100\"\n step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"luminance\"\n name=\"luminance\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"'linear-gradient(to right,black,' + baseColor + ',white)'\">\n <div class=\"slider-title\">\n <span>Luminance</span>\n <input type=\"number\" [(ngModel)]=\"luminance\" name=\"inputLuminance\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n@if (useAlphaChannel) {\n <slider\n [(ngModel)]=\"alpha\"\n name=\"alpha\"\n [min]=\"0\"\n [max]=\"1\"\n [step]=\"0.1\"\n (change)=\"generateColor()\"\n [isBgTransparent]=\"true\"\n [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\n <div class=\"slider-title\">\n <span>Alpha</span>\n <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\n </div>\n </slider>\n}\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset
|
|
846
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: HslComponent, isStandalone: true, selector: "app-hsl", inputs: { color: "color", useAlphaChannel: "useAlphaChannel" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<slider\n [(ngModel)]=\"hue\"\n name=\"hue\"\n [min]=\"0\"\n [max]=\"360\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\">\n <div class=\"slider-title\">\n <span>Hue</span>\n <input type=\"number\" [(ngModel)]=\"hue\" name=\"inputHue\" min=\"0\" max=\"360\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"saturation\"\n name=\"saturation\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"'linear-gradient(to right,#808080,' + baseColor + ')'\">\n <div class=\"slider-title\">\n <span>Saturation</span>\n <input\n type=\"number\"\n [(ngModel)]=\"saturation\"\n name=\"inputSaturation\"\n min=\"0\"\n max=\"100\"\n step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"luminance\"\n name=\"luminance\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"'linear-gradient(to right,black,' + baseColor + ',white)'\">\n <div class=\"slider-title\">\n <span>Luminance</span>\n <input type=\"number\" [(ngModel)]=\"luminance\" name=\"inputLuminance\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n@if (useAlphaChannel) {\n <slider\n [(ngModel)]=\"alpha\"\n name=\"alpha\"\n [min]=\"0\"\n [max]=\"1\"\n [step]=\"0.1\"\n (change)=\"generateColor()\"\n [isBgTransparent]=\"true\"\n [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\n <div class=\"slider-title\">\n <span>Alpha</span>\n <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\n </div>\n </slider>\n}\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset light-dark(#d8d8da,#4b4b4b) 0 0 0 1px,inset light-dark(white,#626262) 0 0 0 100px;border:none;width:48px;color:light-dark(black,white);font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SliderComponent, selector: "slider", inputs: ["step", "min", "max", "background", "isBgTransparent"], outputs: ["change"] }] });
|
|
847
847
|
}
|
|
848
848
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HslComponent, decorators: [{
|
|
849
849
|
type: Component,
|
|
850
|
-
args: [{ selector: 'app-hsl', imports: [FormsModule, SliderComponent], template: "<slider\n [(ngModel)]=\"hue\"\n name=\"hue\"\n [min]=\"0\"\n [max]=\"360\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\">\n <div class=\"slider-title\">\n <span>Hue</span>\n <input type=\"number\" [(ngModel)]=\"hue\" name=\"inputHue\" min=\"0\" max=\"360\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"saturation\"\n name=\"saturation\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"'linear-gradient(to right,#808080,' + baseColor + ')'\">\n <div class=\"slider-title\">\n <span>Saturation</span>\n <input\n type=\"number\"\n [(ngModel)]=\"saturation\"\n name=\"inputSaturation\"\n min=\"0\"\n max=\"100\"\n step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"luminance\"\n name=\"luminance\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"'linear-gradient(to right,black,' + baseColor + ',white)'\">\n <div class=\"slider-title\">\n <span>Luminance</span>\n <input type=\"number\" [(ngModel)]=\"luminance\" name=\"inputLuminance\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n@if (useAlphaChannel) {\n <slider\n [(ngModel)]=\"alpha\"\n name=\"alpha\"\n [min]=\"0\"\n [max]=\"1\"\n [step]=\"0.1\"\n (change)=\"generateColor()\"\n [isBgTransparent]=\"true\"\n [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\n <div class=\"slider-title\">\n <span>Alpha</span>\n <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\n </div>\n </slider>\n}\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset
|
|
850
|
+
args: [{ selector: 'app-hsl', imports: [FormsModule, SliderComponent], template: "<slider\n [(ngModel)]=\"hue\"\n name=\"hue\"\n [min]=\"0\"\n [max]=\"360\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n background=\"linear-gradient(to right,red 0%,#ff0 17%,lime 33%,cyan 50%,blue 66%,#f0f 83%,red 100%)\">\n <div class=\"slider-title\">\n <span>Hue</span>\n <input type=\"number\" [(ngModel)]=\"hue\" name=\"inputHue\" min=\"0\" max=\"360\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"saturation\"\n name=\"saturation\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"'linear-gradient(to right,#808080,' + baseColor + ')'\">\n <div class=\"slider-title\">\n <span>Saturation</span>\n <input\n type=\"number\"\n [(ngModel)]=\"saturation\"\n name=\"inputSaturation\"\n min=\"0\"\n max=\"100\"\n step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"luminance\"\n name=\"luminance\"\n [min]=\"0\"\n [max]=\"100\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"'linear-gradient(to right,black,' + baseColor + ',white)'\">\n <div class=\"slider-title\">\n <span>Luminance</span>\n <input type=\"number\" [(ngModel)]=\"luminance\" name=\"inputLuminance\" min=\"0\" max=\"100\" step=\"1\" />\n </div>\n</slider>\n@if (useAlphaChannel) {\n <slider\n [(ngModel)]=\"alpha\"\n name=\"alpha\"\n [min]=\"0\"\n [max]=\"1\"\n [step]=\"0.1\"\n (change)=\"generateColor()\"\n [isBgTransparent]=\"true\"\n [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\n <div class=\"slider-title\">\n <span>Alpha</span>\n <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\n </div>\n </slider>\n}\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset light-dark(#d8d8da,#4b4b4b) 0 0 0 1px,inset light-dark(white,#626262) 0 0 0 100px;border:none;width:48px;color:light-dark(black,white);font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"] }]
|
|
851
851
|
}], ctorParameters: () => [], propDecorators: { color: [{
|
|
852
852
|
type: Input
|
|
853
853
|
}], useAlphaChannel: [{
|
|
@@ -903,11 +903,11 @@ class RgbComponent {
|
|
|
903
903
|
this.baseColor = `rgb(${r}, ${g}, ${b})`;
|
|
904
904
|
}
|
|
905
905
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RgbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
906
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RgbComponent, isStandalone: true, selector: "app-rgb", inputs: { color: "color", useAlphaChannel: "useAlphaChannel" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<slider\n [(ngModel)]=\"red\"\n name=\"red\"\n [min]=\"0\"\n [max]=\"255\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"redSliderBackground\">\n <div class=\"slider-title\">\n <span>Red</span>\n <input type=\"number\" [(ngModel)]=\"red\" name=\"inputRed\" min=\"0\" max=\"255\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"green\"\n name=\"green\"\n [min]=\"0\"\n [max]=\"255\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"greenSliderBackground\">\n <div class=\"slider-title\">\n <span>Green</span>\n <input type=\"number\" [(ngModel)]=\"green\" name=\"inputGreen\" min=\"0\" max=\"255\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"blue\"\n name=\"blue\"\n [min]=\"0\"\n [max]=\"255\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"blueSliderBackground\">\n <div class=\"slider-title\">\n <span>Blue</span>\n <input type=\"number\" [(ngModel)]=\"blue\" name=\"inputBlue\" min=\"0\" max=\"255\" step=\"1\" />\n </div>\n</slider>\n@if (useAlphaChannel) {\n <slider\n [(ngModel)]=\"alpha\"\n name=\"alpha\"\n [min]=\"0\"\n [max]=\"1\"\n [step]=\"0.1\"\n (change)=\"generateColor()\"\n [isBgTransparent]=\"true\"\n [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\n <div class=\"slider-title\">\n <span>Alpha</span>\n <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\n </div>\n </slider>\n}\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset
|
|
906
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RgbComponent, isStandalone: true, selector: "app-rgb", inputs: { color: "color", useAlphaChannel: "useAlphaChannel" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<slider\n [(ngModel)]=\"red\"\n name=\"red\"\n [min]=\"0\"\n [max]=\"255\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"redSliderBackground\">\n <div class=\"slider-title\">\n <span>Red</span>\n <input type=\"number\" [(ngModel)]=\"red\" name=\"inputRed\" min=\"0\" max=\"255\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"green\"\n name=\"green\"\n [min]=\"0\"\n [max]=\"255\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"greenSliderBackground\">\n <div class=\"slider-title\">\n <span>Green</span>\n <input type=\"number\" [(ngModel)]=\"green\" name=\"inputGreen\" min=\"0\" max=\"255\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"blue\"\n name=\"blue\"\n [min]=\"0\"\n [max]=\"255\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"blueSliderBackground\">\n <div class=\"slider-title\">\n <span>Blue</span>\n <input type=\"number\" [(ngModel)]=\"blue\" name=\"inputBlue\" min=\"0\" max=\"255\" step=\"1\" />\n </div>\n</slider>\n@if (useAlphaChannel) {\n <slider\n [(ngModel)]=\"alpha\"\n name=\"alpha\"\n [min]=\"0\"\n [max]=\"1\"\n [step]=\"0.1\"\n (change)=\"generateColor()\"\n [isBgTransparent]=\"true\"\n [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\n <div class=\"slider-title\">\n <span>Alpha</span>\n <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\n </div>\n </slider>\n}\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset light-dark(#d8d8da,#4b4b4b) 0 0 0 1px,inset light-dark(white,#626262) 0 0 0 100px;border:none;width:40px;color:light-dark(black,white);font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SliderComponent, selector: "slider", inputs: ["step", "min", "max", "background", "isBgTransparent"], outputs: ["change"] }] });
|
|
907
907
|
}
|
|
908
908
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RgbComponent, decorators: [{
|
|
909
909
|
type: Component,
|
|
910
|
-
args: [{ selector: 'app-rgb', imports: [FormsModule, SliderComponent], template: "<slider\n [(ngModel)]=\"red\"\n name=\"red\"\n [min]=\"0\"\n [max]=\"255\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"redSliderBackground\">\n <div class=\"slider-title\">\n <span>Red</span>\n <input type=\"number\" [(ngModel)]=\"red\" name=\"inputRed\" min=\"0\" max=\"255\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"green\"\n name=\"green\"\n [min]=\"0\"\n [max]=\"255\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"greenSliderBackground\">\n <div class=\"slider-title\">\n <span>Green</span>\n <input type=\"number\" [(ngModel)]=\"green\" name=\"inputGreen\" min=\"0\" max=\"255\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"blue\"\n name=\"blue\"\n [min]=\"0\"\n [max]=\"255\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"blueSliderBackground\">\n <div class=\"slider-title\">\n <span>Blue</span>\n <input type=\"number\" [(ngModel)]=\"blue\" name=\"inputBlue\" min=\"0\" max=\"255\" step=\"1\" />\n </div>\n</slider>\n@if (useAlphaChannel) {\n <slider\n [(ngModel)]=\"alpha\"\n name=\"alpha\"\n [min]=\"0\"\n [max]=\"1\"\n [step]=\"0.1\"\n (change)=\"generateColor()\"\n [isBgTransparent]=\"true\"\n [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\n <div class=\"slider-title\">\n <span>Alpha</span>\n <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\n </div>\n </slider>\n}\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset #d8d8da 0 0 0 1px,inset
|
|
910
|
+
args: [{ selector: 'app-rgb', imports: [FormsModule, SliderComponent], template: "<slider\n [(ngModel)]=\"red\"\n name=\"red\"\n [min]=\"0\"\n [max]=\"255\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"redSliderBackground\">\n <div class=\"slider-title\">\n <span>Red</span>\n <input type=\"number\" [(ngModel)]=\"red\" name=\"inputRed\" min=\"0\" max=\"255\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"green\"\n name=\"green\"\n [min]=\"0\"\n [max]=\"255\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"greenSliderBackground\">\n <div class=\"slider-title\">\n <span>Green</span>\n <input type=\"number\" [(ngModel)]=\"green\" name=\"inputGreen\" min=\"0\" max=\"255\" step=\"1\" />\n </div>\n</slider>\n<slider\n [(ngModel)]=\"blue\"\n name=\"blue\"\n [min]=\"0\"\n [max]=\"255\"\n [step]=\"1\"\n (change)=\"generateColor()\"\n [background]=\"blueSliderBackground\">\n <div class=\"slider-title\">\n <span>Blue</span>\n <input type=\"number\" [(ngModel)]=\"blue\" name=\"inputBlue\" min=\"0\" max=\"255\" step=\"1\" />\n </div>\n</slider>\n@if (useAlphaChannel) {\n <slider\n [(ngModel)]=\"alpha\"\n name=\"alpha\"\n [min]=\"0\"\n [max]=\"1\"\n [step]=\"0.1\"\n (change)=\"generateColor()\"\n [isBgTransparent]=\"true\"\n [background]=\"'linear-gradient(to right,transparent,' + baseColor + ')'\">\n <div class=\"slider-title\">\n <span>Alpha</span>\n <input type=\"number\" [(ngModel)]=\"alpha\" name=\"inputAlpha\" min=\"0\" max=\"1\" step=\"0.1\" />\n </div>\n </slider>\n}\n", styles: [".slider-title{display:flex;align-items:center;justify-content:space-between}.slider-title input{transition:box-shadow .1s;box-shadow:inset light-dark(#d8d8da,#4b4b4b) 0 0 0 1px,inset light-dark(white,#626262) 0 0 0 100px;border:none;width:40px;color:light-dark(black,white);font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"] }]
|
|
911
911
|
}], ctorParameters: () => [], propDecorators: { color: [{
|
|
912
912
|
type: Input
|
|
913
913
|
}], useAlphaChannel: [{
|
|
@@ -1095,7 +1095,7 @@ class NgxInputColorComponent {
|
|
|
1095
1095
|
multi: true,
|
|
1096
1096
|
useExisting: NgxInputColorComponent,
|
|
1097
1097
|
},
|
|
1098
|
-
], ngImport: i0, template: "<div class=\"ngx-input-color-picker\" [class.simple-mode]=\"simpleMode()\">\n @if (!simpleMode()) {\n <div\n class=\"ngx-color-preview\"\n [ngStyle]=\"{ '--ngx-selected-color': rgbaColor() }\"\n [class.is-dark-color]=\"isDarkColor\">\n <div class=\"rgbacode\">{{ outputColor() | uppercase }}</div>\n @if (outputType() !== 'HEX') {\n <div class=\"hexacode\">{{ hexColor() | uppercase }}</div>\n }\n <div class=\"colorname\">{{ name() }}</div>\n <div class=\"color\"></div>\n </div>\n }\n <div class=\"ngx-c-inner\">\n <div class=\"top-actions\">\n <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\n @for (inspector of ColorInspector | enumToArray; track inspector) {\n <option [value]=\"inspector\">\n {{ ColorInspector[+inspector] }}\n </option>\n }\n </select>\n @if (isSupportedEyeDrop) {\n <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <defs>\n <style>\n .fa-secondary {\n opacity: 0.4;\n }\n </style>\n </defs>\n <path\n class=\"fa-primary\"\n d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\n <path\n class=\"fa-secondary\"\n d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\n </svg>\n </button>\n }\n </div>\n @switch (+defaultInspector()) {\n @case (ColorInspector.Picker) {\n <app-picker\n [color]=\"color()\"\n (colorChange)=\"initColor($event)\"\n [simpleMode]=\"simpleMode()\"\n [useAlphaChannel]=\"useAlphaChannel()\"></app-picker>\n }\n @case (ColorInspector.HSL) {\n <app-hsl\n [color]=\"color()\"\n (colorChange)=\"initColor($event)\"\n [useAlphaChannel]=\"useAlphaChannel()\"></app-hsl>\n }\n @case (ColorInspector.RGB) {\n <app-rgb\n [color]=\"color()\"\n (colorChange)=\"initColor($event)\"\n [useAlphaChannel]=\"useAlphaChannel()\"></app-rgb>\n }\n @case (ColorInspector.CMYK) {\n <app-cmyk [color]=\"color()\" (colorChange)=\"initColor($event)\"></app-cmyk>\n }\n }\n @if (showPresets() && !simpleMode()) {\n <div class=\"presets-colors\">\n @for (item of presetColors(); track $index) {\n <button type=\"button\" [style.background]=\"item\" (click)=\"selectColor(item)\"></button>\n }\n </div>\n }\n </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-input-color-picker{width:270px;max-width:100%;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.ngx-color-preview{min-height:100px;padding:10px 36px;line-height:1.6;font-size:14px;font-family:arial,tahoma;font-weight:700;position:relative;color:#353535;background-color:#fff}.ngx-color-preview.is-dark-color{color:#fff}.ngx-color-preview:after,.ngx-color-preview:before{content:\" \";position:absolute;inset:0}.ngx-color-preview:before{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.ngx-color-preview:after{background:var(--ngx-selected-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border
|
|
1098
|
+
], ngImport: i0, template: "<div class=\"ngx-input-color-picker\" [class.simple-mode]=\"simpleMode()\">\n @if (!simpleMode()) {\n <div\n class=\"ngx-color-preview\"\n [ngStyle]=\"{ '--ngx-selected-color': rgbaColor() }\"\n [class.is-dark-color]=\"isDarkColor\">\n <div class=\"rgbacode\">{{ outputColor() | uppercase }}</div>\n @if (outputType() !== 'HEX') {\n <div class=\"hexacode\">{{ hexColor() | uppercase }}</div>\n }\n <div class=\"colorname\">{{ name() }}</div>\n <div class=\"color\"></div>\n </div>\n }\n <div class=\"ngx-c-inner\">\n <div class=\"top-actions\">\n <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\n @for (inspector of ColorInspector | enumToArray; track inspector) {\n <option [value]=\"inspector\">\n {{ ColorInspector[+inspector] }}\n </option>\n }\n </select>\n @if (isSupportedEyeDrop) {\n <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <defs>\n <style>\n .fa-secondary {\n opacity: 0.4;\n }\n </style>\n </defs>\n <path\n class=\"fa-primary\"\n d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\n <path\n class=\"fa-secondary\"\n d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\n </svg>\n </button>\n }\n </div>\n @switch (+defaultInspector()) {\n @case (ColorInspector.Picker) {\n <app-picker\n [color]=\"color()\"\n (colorChange)=\"initColor($event)\"\n [simpleMode]=\"simpleMode()\"\n [useAlphaChannel]=\"useAlphaChannel()\"></app-picker>\n }\n @case (ColorInspector.HSL) {\n <app-hsl\n [color]=\"color()\"\n (colorChange)=\"initColor($event)\"\n [useAlphaChannel]=\"useAlphaChannel()\"></app-hsl>\n }\n @case (ColorInspector.RGB) {\n <app-rgb\n [color]=\"color()\"\n (colorChange)=\"initColor($event)\"\n [useAlphaChannel]=\"useAlphaChannel()\"></app-rgb>\n }\n @case (ColorInspector.CMYK) {\n <app-cmyk [color]=\"color()\" (colorChange)=\"initColor($event)\"></app-cmyk>\n }\n }\n @if (showPresets() && !simpleMode()) {\n <div class=\"presets-colors\">\n @for (item of presetColors(); track $index) {\n <button type=\"button\" [style.background]=\"item\" (click)=\"selectColor(item)\"></button>\n }\n </div>\n }\n </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-input-color-picker{width:270px;max-width:100%;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.ngx-color-preview{min-height:100px;padding:10px 36px;line-height:1.6;font-size:14px;font-family:arial,tahoma;font-weight:700;position:relative;color:#353535;background-color:#fff}.ngx-color-preview.is-dark-color{color:#fff}.ngx-color-preview:after,.ngx-color-preview:before{content:\" \";position:absolute;inset:0}.ngx-color-preview:before{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.ngx-color-preview:after{background:var(--ngx-selected-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text);border:1px rgba(109,109,109,.436) solid}.top-actions select:focus{cursor:pointer;background:light-dark(#e5f0ff,#35373a);color:#06f}.top-actions select option{padding:10px 20px;background:var(--ngx-color-bg);color:var(--ngx-color-text);transition:all .3s}.top-actions select option:hover{background:#f0f0f048}.presets-colors{display:flex;align-items:center;flex-wrap:wrap;max-height:200px;overflow:auto;gap:5px;margin-top:10px}.presets-colors button{all:unset;width:26px;height:26px;border-radius:100%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PickerComponent, selector: "app-picker", inputs: ["simpleMode", "color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "component", type: CmykComponent, selector: "app-cmyk", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: HslComponent, selector: "app-hsl", inputs: ["color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "component", type: RgbComponent, selector: "app-rgb", inputs: ["color", "useAlphaChannel"], outputs: ["colorChange"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: EnumToArrayPipe, name: "enumToArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1099
1099
|
}
|
|
1100
1100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColorComponent, decorators: [{
|
|
1101
1101
|
type: Component,
|
|
@@ -1118,7 +1118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
1118
1118
|
CmykComponent,
|
|
1119
1119
|
HslComponent,
|
|
1120
1120
|
RgbComponent,
|
|
1121
|
-
], template: "<div class=\"ngx-input-color-picker\" [class.simple-mode]=\"simpleMode()\">\n @if (!simpleMode()) {\n <div\n class=\"ngx-color-preview\"\n [ngStyle]=\"{ '--ngx-selected-color': rgbaColor() }\"\n [class.is-dark-color]=\"isDarkColor\">\n <div class=\"rgbacode\">{{ outputColor() | uppercase }}</div>\n @if (outputType() !== 'HEX') {\n <div class=\"hexacode\">{{ hexColor() | uppercase }}</div>\n }\n <div class=\"colorname\">{{ name() }}</div>\n <div class=\"color\"></div>\n </div>\n }\n <div class=\"ngx-c-inner\">\n <div class=\"top-actions\">\n <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\n @for (inspector of ColorInspector | enumToArray; track inspector) {\n <option [value]=\"inspector\">\n {{ ColorInspector[+inspector] }}\n </option>\n }\n </select>\n @if (isSupportedEyeDrop) {\n <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <defs>\n <style>\n .fa-secondary {\n opacity: 0.4;\n }\n </style>\n </defs>\n <path\n class=\"fa-primary\"\n d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\n <path\n class=\"fa-secondary\"\n d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\n </svg>\n </button>\n }\n </div>\n @switch (+defaultInspector()) {\n @case (ColorInspector.Picker) {\n <app-picker\n [color]=\"color()\"\n (colorChange)=\"initColor($event)\"\n [simpleMode]=\"simpleMode()\"\n [useAlphaChannel]=\"useAlphaChannel()\"></app-picker>\n }\n @case (ColorInspector.HSL) {\n <app-hsl\n [color]=\"color()\"\n (colorChange)=\"initColor($event)\"\n [useAlphaChannel]=\"useAlphaChannel()\"></app-hsl>\n }\n @case (ColorInspector.RGB) {\n <app-rgb\n [color]=\"color()\"\n (colorChange)=\"initColor($event)\"\n [useAlphaChannel]=\"useAlphaChannel()\"></app-rgb>\n }\n @case (ColorInspector.CMYK) {\n <app-cmyk [color]=\"color()\" (colorChange)=\"initColor($event)\"></app-cmyk>\n }\n }\n @if (showPresets() && !simpleMode()) {\n <div class=\"presets-colors\">\n @for (item of presetColors(); track $index) {\n <button type=\"button\" [style.background]=\"item\" (click)=\"selectColor(item)\"></button>\n }\n </div>\n }\n </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-input-color-picker{width:270px;max-width:100%;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.ngx-color-preview{min-height:100px;padding:10px 36px;line-height:1.6;font-size:14px;font-family:arial,tahoma;font-weight:700;position:relative;color:#353535;background-color:#fff}.ngx-color-preview.is-dark-color{color:#fff}.ngx-color-preview:after,.ngx-color-preview:before{content:\" \";position:absolute;inset:0}.ngx-color-preview:before{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.ngx-color-preview:after{background:var(--ngx-selected-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border
|
|
1121
|
+
], template: "<div class=\"ngx-input-color-picker\" [class.simple-mode]=\"simpleMode()\">\n @if (!simpleMode()) {\n <div\n class=\"ngx-color-preview\"\n [ngStyle]=\"{ '--ngx-selected-color': rgbaColor() }\"\n [class.is-dark-color]=\"isDarkColor\">\n <div class=\"rgbacode\">{{ outputColor() | uppercase }}</div>\n @if (outputType() !== 'HEX') {\n <div class=\"hexacode\">{{ hexColor() | uppercase }}</div>\n }\n <div class=\"colorname\">{{ name() }}</div>\n <div class=\"color\"></div>\n </div>\n }\n <div class=\"ngx-c-inner\">\n <div class=\"top-actions\">\n <select [(ngModel)]=\"defaultInspector\" name=\"inspector\">\n @for (inspector of ColorInspector | enumToArray; track inspector) {\n <option [value]=\"inspector\">\n {{ ColorInspector[+inspector] }}\n </option>\n }\n </select>\n @if (isSupportedEyeDrop) {\n <button type=\"button\" (click)=\"openEyeDrop()\" class=\"ngx-btn-eyedroper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <defs>\n <style>\n .fa-secondary {\n opacity: 0.4;\n }\n </style>\n </defs>\n <path\n class=\"fa-primary\"\n d=\"M482.8 29.23C521.7 68.21 521.7 131.4 482.8 170.4L381.2 271.9L390.6 281.4C403.1 293.9 403.1 314.1 390.6 326.6C378.1 339.1 357.9 339.1 345.4 326.6L185.4 166.6C172.9 154.1 172.9 133.9 185.4 121.4C197.9 108.9 218.1 108.9 230.6 121.4L240.1 130.8L341.6 29.23C380.6-9.744 443.8-9.744 482.8 29.23L482.8 29.23zM132.1 416H96V379.9C96 375.6 97.69 371.6 100.7 368.6L149.3 320H234.7L143.4 411.3C140.4 414.3 136.4 416 132.1 416H132.1z\" />\n <path\n class=\"fa-secondary\"\n d=\"M244 225.3L100.7 368.6C97.69 371.6 96 375.6 96 379.9V416H132.1C136.4 416 140.4 414.3 143.4 411.3L286.7 268L332 313.3L188.7 456.6C173.7 471.6 153.3 480 132.1 480H89.69L49.75 506.6C37.06 515.1 20.16 513.4 9.372 502.6C-1.414 491.8-3.087 474.9 5.374 462.2L32 422.3V379.9C32 358.7 40.43 338.3 55.43 323.3L198.7 180L244 225.3z\" />\n </svg>\n </button>\n }\n </div>\n @switch (+defaultInspector()) {\n @case (ColorInspector.Picker) {\n <app-picker\n [color]=\"color()\"\n (colorChange)=\"initColor($event)\"\n [simpleMode]=\"simpleMode()\"\n [useAlphaChannel]=\"useAlphaChannel()\"></app-picker>\n }\n @case (ColorInspector.HSL) {\n <app-hsl\n [color]=\"color()\"\n (colorChange)=\"initColor($event)\"\n [useAlphaChannel]=\"useAlphaChannel()\"></app-hsl>\n }\n @case (ColorInspector.RGB) {\n <app-rgb\n [color]=\"color()\"\n (colorChange)=\"initColor($event)\"\n [useAlphaChannel]=\"useAlphaChannel()\"></app-rgb>\n }\n @case (ColorInspector.CMYK) {\n <app-cmyk [color]=\"color()\" (colorChange)=\"initColor($event)\"></app-cmyk>\n }\n }\n @if (showPresets() && !simpleMode()) {\n <div class=\"presets-colors\">\n @for (item of presetColors(); track $index) {\n <button type=\"button\" [style.background]=\"item\" (click)=\"selectColor(item)\"></button>\n }\n </div>\n }\n </div>\n</div>\n", styles: [":host{--ngx-color-bg: light-dark(#fff, #222);--ngx-color-text: light-dark(#000, #fff)}.ngx-input-color-picker{width:270px;max-width:100%;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(134,134,134,.3490196078) solid}.ngx-input-color-picker .ngx-c-inner{padding:12px;background:var(--ngx-color-bg);color:var(--ngx-color-text);border-radius:15px;margin-top:-15px;position:relative}.ngx-input-color-picker *{box-sizing:border-box}.ngx-input-color-picker.simple-mode{width:220px;--ngx-thumb-size: 24px}.ngx-input-color-picker.simple-mode .ngx-c-inner{padding:12px;margin:0}.ngx-color-preview{min-height:100px;padding:10px 36px;line-height:1.6;font-size:14px;font-family:arial,tahoma;font-weight:700;position:relative;color:#353535;background-color:#fff}.ngx-color-preview.is-dark-color{color:#fff}.ngx-color-preview:after,.ngx-color-preview:before{content:\" \";position:absolute;inset:0}.ngx-color-preview:before{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.ngx-color-preview:after{background:var(--ngx-selected-color)}.ngx-color-preview .rgbacode,.ngx-color-preview .colorname,.ngx-color-preview .color{text-shadow:0 0 1px #000000;position:relative;z-index:1}.button-groups{display:flex;border-radius:4px;overflow:hidden;border:1px #d3d3d3 solid}.button-groups button{cursor:pointer;background:#f9f9f9;outline:none;border:none;transition:all .3s;border-left:1px #d3d3d3 solid;padding:10px 12px;flex:auto}.button-groups button:hover{background:#8db6e4}.button-groups button:first-child{border-left-width:0}.ngx-btn-eyedroper{padding:2px;min-width:0;width:45px;cursor:pointer;background-color:transparent;outline:none;transition:all .3s;border:none;border-radius:6px}.ngx-btn-eyedroper svg{width:18px;fill:var(--ngx-color-text)}.top-actions{display:flex;justify-content:space-between;align-items:center;padding:0 0 12px}.top-actions select{outline:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text);border:1px rgba(109,109,109,.436) solid}.top-actions select:focus{cursor:pointer;background:light-dark(#e5f0ff,#35373a);color:#06f}.top-actions select option{padding:10px 20px;background:var(--ngx-color-bg);color:var(--ngx-color-text);transition:all .3s}.top-actions select option:hover{background:#f0f0f048}.presets-colors{display:flex;align-items:center;flex-wrap:wrap;max-height:200px;overflow:auto;gap:5px;margin-top:10px}.presets-colors button{all:unset;width:26px;height:26px;border-radius:100%;cursor:pointer}\n"] }]
|
|
1122
1122
|
}], ctorParameters: () => [], propDecorators: { simpleMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "simpleMode", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }], defaultInspector: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultInspector", required: false }] }, { type: i0.Output, args: ["defaultInspectorChange"] }], useAlphaChannel: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAlphaChannel", required: false }] }], showPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresets", required: false }] }], presetColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetColors", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }] } });
|
|
1123
1123
|
|
|
1124
1124
|
class NgxInputColor {
|
|
@@ -1126,8 +1126,9 @@ class NgxInputColor {
|
|
|
1126
1126
|
renderer;
|
|
1127
1127
|
viewContainerRef;
|
|
1128
1128
|
overlayService;
|
|
1129
|
-
setInputBackgroundColor = true;
|
|
1130
1129
|
configs = inject(NGX_INPUT_COLOR_CONFIG);
|
|
1130
|
+
setInputBackgroundColor = input(true, /* @ts-ignore */
|
|
1131
|
+
...(ngDevMode ? [{ debugName: "setInputBackgroundColor" }] : /* istanbul ignore next */ []));
|
|
1131
1132
|
/** Minifi UI */
|
|
1132
1133
|
simpleMode = input(this.configs.simpleMode ?? false, /* @ts-ignore */
|
|
1133
1134
|
...(ngDevMode ? [{ debugName: "simpleMode" }] : /* istanbul ignore next */ []));
|
|
@@ -1161,14 +1162,11 @@ class NgxInputColor {
|
|
|
1161
1162
|
set ngxInputColor(element) {
|
|
1162
1163
|
this.removeTargetInputListener();
|
|
1163
1164
|
this.isHostInput = false;
|
|
1164
|
-
this.explicitTargetInput = false;
|
|
1165
1165
|
if (element instanceof ElementRef) {
|
|
1166
1166
|
this._targetInput = element.nativeElement;
|
|
1167
|
-
this.explicitTargetInput = true;
|
|
1168
1167
|
}
|
|
1169
1168
|
else if (this.isInputElement(element)) {
|
|
1170
1169
|
this._targetInput = element;
|
|
1171
|
-
this.explicitTargetInput = true;
|
|
1172
1170
|
}
|
|
1173
1171
|
else {
|
|
1174
1172
|
/**
|
|
@@ -1193,8 +1191,8 @@ class NgxInputColor {
|
|
|
1193
1191
|
color;
|
|
1194
1192
|
pickerRef;
|
|
1195
1193
|
_targetInput;
|
|
1196
|
-
explicitTargetInput = false;
|
|
1197
1194
|
isHostInput = false;
|
|
1195
|
+
syncingTargetInput = false;
|
|
1198
1196
|
removeInputListener;
|
|
1199
1197
|
disabled = false;
|
|
1200
1198
|
invalid = false;
|
|
@@ -1208,7 +1206,7 @@ class NgxInputColor {
|
|
|
1208
1206
|
this.overlayService = overlayService;
|
|
1209
1207
|
effect(() => {
|
|
1210
1208
|
const useAlphaChannel = this.useAlphaChannel() == true;
|
|
1211
|
-
if (!
|
|
1209
|
+
if (!useAlphaChannel && this.color) {
|
|
1212
1210
|
this.color.removeAlphaChannel();
|
|
1213
1211
|
void this.color.getOutputResult(this.outputType()).then((value) => this.emitChange(value));
|
|
1214
1212
|
}
|
|
@@ -1225,7 +1223,7 @@ class NgxInputColor {
|
|
|
1225
1223
|
this.bindTargetInput();
|
|
1226
1224
|
}
|
|
1227
1225
|
if (this._targetInput) {
|
|
1228
|
-
this.
|
|
1226
|
+
this.readTargetInput();
|
|
1229
1227
|
}
|
|
1230
1228
|
}
|
|
1231
1229
|
ngOnDestroy() {
|
|
@@ -1264,8 +1262,7 @@ class NgxInputColor {
|
|
|
1264
1262
|
}
|
|
1265
1263
|
this.color = color;
|
|
1266
1264
|
this.invalid = false;
|
|
1267
|
-
|
|
1268
|
-
this.syncView(colorValue);
|
|
1265
|
+
this.syncView(value instanceof NgxColor ? this.getViewColor() : String(value));
|
|
1269
1266
|
}
|
|
1270
1267
|
catch {
|
|
1271
1268
|
this.color = undefined;
|
|
@@ -1276,7 +1273,8 @@ class NgxInputColor {
|
|
|
1276
1273
|
* Angular/form validation needs to know that the value
|
|
1277
1274
|
* is invalid instead of silently turning it into #000.
|
|
1278
1275
|
*/
|
|
1279
|
-
this.syncView(
|
|
1276
|
+
this.syncView(String(value));
|
|
1277
|
+
this.syncHostBackground('');
|
|
1280
1278
|
this.notifyValidatorChange();
|
|
1281
1279
|
}
|
|
1282
1280
|
}
|
|
@@ -1341,32 +1339,24 @@ class NgxInputColor {
|
|
|
1341
1339
|
* must propagate through ControlValueAccessor.
|
|
1342
1340
|
*/
|
|
1343
1341
|
handleInputEvent(event) {
|
|
1342
|
+
if (this.syncingTargetInput)
|
|
1343
|
+
return;
|
|
1344
1344
|
const input = event.target;
|
|
1345
1345
|
const value = input.value;
|
|
1346
|
+
let color;
|
|
1346
1347
|
try {
|
|
1347
|
-
|
|
1348
|
-
if (color && color.isValid === false) {
|
|
1349
|
-
this.color = undefined;
|
|
1350
|
-
this.invalid = true;
|
|
1351
|
-
this.notifyValidatorChange();
|
|
1352
|
-
return;
|
|
1353
|
-
}
|
|
1354
|
-
this.color = color;
|
|
1355
|
-
this.invalid = false;
|
|
1356
|
-
this.syncHostBackground(value);
|
|
1357
|
-
/**
|
|
1358
|
-
* User change → Angular Forms.
|
|
1359
|
-
*/
|
|
1360
|
-
this._onChange(value);
|
|
1361
|
-
this.change.emit(value);
|
|
1362
|
-
this._onTouched();
|
|
1363
|
-
this.notifyValidatorChange();
|
|
1348
|
+
color = value ? new NgxColor(value) : undefined;
|
|
1364
1349
|
}
|
|
1365
1350
|
catch {
|
|
1366
|
-
|
|
1367
|
-
this.invalid = true;
|
|
1368
|
-
this.notifyValidatorChange();
|
|
1351
|
+
color = undefined;
|
|
1369
1352
|
}
|
|
1353
|
+
this.color = color?.isValid ? color : undefined;
|
|
1354
|
+
this.invalid = !!value && !this.color;
|
|
1355
|
+
this.syncHostBackground(this.invalid ? '' : value);
|
|
1356
|
+
this._onChange(value);
|
|
1357
|
+
this.change.emit(value);
|
|
1358
|
+
this._onTouched();
|
|
1359
|
+
this.notifyValidatorChange();
|
|
1370
1360
|
}
|
|
1371
1361
|
toggle() {
|
|
1372
1362
|
if (this.disabled) {
|
|
@@ -1376,6 +1366,8 @@ class NgxInputColor {
|
|
|
1376
1366
|
this.destroyColorPicker();
|
|
1377
1367
|
return;
|
|
1378
1368
|
}
|
|
1369
|
+
// A bound model can change this input's value without firing a DOM event.
|
|
1370
|
+
this.readTargetInput();
|
|
1379
1371
|
this.pickerRef = this.overlayService.open({
|
|
1380
1372
|
anchor: this.el.nativeElement,
|
|
1381
1373
|
component: NgxInputColorComponent,
|
|
@@ -1383,11 +1375,10 @@ class NgxInputColor {
|
|
|
1383
1375
|
alignment: 'start',
|
|
1384
1376
|
placement: 'auto',
|
|
1385
1377
|
configure: (instance, ref) => {
|
|
1386
|
-
ref.componentRef?.setInput('defaultInspector', this.defaultInspector());
|
|
1387
1378
|
ref.componentRef?.setInput('defaultInspector', this.defaultInspector());
|
|
1388
1379
|
ref.componentRef?.setInput('simpleMode', this.simpleMode());
|
|
1389
1380
|
ref.componentRef?.setInput('outputType', this.outputType());
|
|
1390
|
-
ref.componentRef?.setInput('
|
|
1381
|
+
ref.componentRef?.setInput('useAlphaChannel', this.useAlphaChannel());
|
|
1391
1382
|
ref.componentRef?.setInput('showPresets', this.showPresets());
|
|
1392
1383
|
ref.componentRef?.setInput('presetColors', this.presetColors());
|
|
1393
1384
|
if (this.color?.isValid) {
|
|
@@ -1408,11 +1399,7 @@ class NgxInputColor {
|
|
|
1408
1399
|
this.pickerRef?.close();
|
|
1409
1400
|
this.pickerRef = undefined;
|
|
1410
1401
|
}
|
|
1411
|
-
/**
|
|
1412
|
-
* User-originated/custom-picker value.
|
|
1413
|
-
*
|
|
1414
|
-
* This is the ONLY place where _onChange is called.
|
|
1415
|
-
*/
|
|
1402
|
+
/** Propagates values selected from the custom picker. */
|
|
1416
1403
|
async emitChange(value) {
|
|
1417
1404
|
try {
|
|
1418
1405
|
const color = new NgxColor(value);
|
|
@@ -1423,13 +1410,9 @@ class NgxInputColor {
|
|
|
1423
1410
|
}
|
|
1424
1411
|
this.color = color;
|
|
1425
1412
|
this.invalid = false;
|
|
1426
|
-
|
|
1427
|
-
this.
|
|
1428
|
-
|
|
1429
|
-
* Do NOT dispatch another input event here.
|
|
1430
|
-
*/
|
|
1431
|
-
this._onChange(viewValue);
|
|
1432
|
-
this.change.emit(viewValue);
|
|
1413
|
+
this.syncView(value, true);
|
|
1414
|
+
this._onChange(value);
|
|
1415
|
+
this.change.emit(value);
|
|
1433
1416
|
this._onTouched();
|
|
1434
1417
|
this.notifyValidatorChange();
|
|
1435
1418
|
}
|
|
@@ -1441,19 +1424,28 @@ class NgxInputColor {
|
|
|
1441
1424
|
/**
|
|
1442
1425
|
* Synchronize all visual representations.
|
|
1443
1426
|
*/
|
|
1444
|
-
syncView(value) {
|
|
1427
|
+
syncView(value, notifyTargetInput = false) {
|
|
1445
1428
|
/**
|
|
1446
1429
|
* Host input value.
|
|
1447
1430
|
*/
|
|
1448
1431
|
if (this.isHostInput) {
|
|
1449
1432
|
const input = this.el.nativeElement;
|
|
1450
|
-
input.value = this.getNativeInputColor(value);
|
|
1433
|
+
input.value = this.getNativeInputColor(value, input);
|
|
1451
1434
|
}
|
|
1452
1435
|
/**
|
|
1453
1436
|
* External target input.
|
|
1454
1437
|
*/
|
|
1455
1438
|
if (this._targetInput && this._targetInput !== this.el.nativeElement) {
|
|
1456
|
-
this._targetInput.value = this.getNativeInputColor(value);
|
|
1439
|
+
this._targetInput.value = this.getNativeInputColor(value, this._targetInput);
|
|
1440
|
+
if (notifyTargetInput) {
|
|
1441
|
+
this.syncingTargetInput = true;
|
|
1442
|
+
try {
|
|
1443
|
+
this._targetInput.dispatchEvent(new Event('input', { bubbles: true }));
|
|
1444
|
+
}
|
|
1445
|
+
finally {
|
|
1446
|
+
this.syncingTargetInput = false;
|
|
1447
|
+
}
|
|
1448
|
+
}
|
|
1457
1449
|
}
|
|
1458
1450
|
/**
|
|
1459
1451
|
* Background of host element.
|
|
@@ -1466,10 +1458,12 @@ class NgxInputColor {
|
|
|
1466
1458
|
* Therefore even if the selected color contains alpha,
|
|
1467
1459
|
* the native color input receives #RRGGBB.
|
|
1468
1460
|
*/
|
|
1469
|
-
getNativeInputColor(value) {
|
|
1461
|
+
getNativeInputColor(value, input) {
|
|
1470
1462
|
if (!value) {
|
|
1471
1463
|
return '';
|
|
1472
1464
|
}
|
|
1465
|
+
if (input.type !== 'color')
|
|
1466
|
+
return value;
|
|
1473
1467
|
try {
|
|
1474
1468
|
const color = new NgxColor(value);
|
|
1475
1469
|
return color.toHexString();
|
|
@@ -1482,12 +1476,36 @@ class NgxInputColor {
|
|
|
1482
1476
|
return this.color?.toHexString() ?? '';
|
|
1483
1477
|
}
|
|
1484
1478
|
syncHostBackground(value) {
|
|
1485
|
-
if (!this.setInputBackgroundColor) {
|
|
1479
|
+
if (!this.setInputBackgroundColor()) {
|
|
1486
1480
|
return;
|
|
1487
1481
|
}
|
|
1488
|
-
const element = this.el.nativeElement;
|
|
1482
|
+
const element = this._targetInput ?? this.el.nativeElement;
|
|
1489
1483
|
this.renderer.setStyle(element, 'backgroundColor', value || null);
|
|
1490
1484
|
}
|
|
1485
|
+
readTargetInput() {
|
|
1486
|
+
if (!this._targetInput)
|
|
1487
|
+
return;
|
|
1488
|
+
const value = this._targetInput.value;
|
|
1489
|
+
if (!value) {
|
|
1490
|
+
this.color = undefined;
|
|
1491
|
+
this.invalid = false;
|
|
1492
|
+
this.syncHostBackground('');
|
|
1493
|
+
this.notifyValidatorChange();
|
|
1494
|
+
return;
|
|
1495
|
+
}
|
|
1496
|
+
try {
|
|
1497
|
+
const color = new NgxColor(value);
|
|
1498
|
+
this.color = color.isValid ? color : undefined;
|
|
1499
|
+
this.invalid = !color.isValid;
|
|
1500
|
+
this.syncHostBackground(this.invalid ? '' : value);
|
|
1501
|
+
}
|
|
1502
|
+
catch {
|
|
1503
|
+
this.color = undefined;
|
|
1504
|
+
this.invalid = true;
|
|
1505
|
+
this.syncHostBackground('');
|
|
1506
|
+
}
|
|
1507
|
+
this.notifyValidatorChange();
|
|
1508
|
+
}
|
|
1491
1509
|
notifyValidatorChange() {
|
|
1492
1510
|
this._onValidateChange();
|
|
1493
1511
|
}
|
|
@@ -1495,7 +1513,7 @@ class NgxInputColor {
|
|
|
1495
1513
|
return value instanceof HTMLInputElement;
|
|
1496
1514
|
}
|
|
1497
1515
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColor, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i1$2.OverlayService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1498
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxInputColor, isStandalone: true, selector: "[ngxInputColor]", inputs: { setInputBackgroundColor: { classPropertyName: "setInputBackgroundColor", publicName: "setInputBackgroundColor", isSignal:
|
|
1516
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxInputColor, isStandalone: true, selector: "[ngxInputColor]", inputs: { setInputBackgroundColor: { classPropertyName: "setInputBackgroundColor", publicName: "setInputBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, simpleMode: { classPropertyName: "simpleMode", publicName: "simpleMode", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null }, defaultInspector: { classPropertyName: "defaultInspector", publicName: "defaultInspector", isSignal: true, isRequired: false, transformFunction: null }, useAlphaChannel: { classPropertyName: "useAlphaChannel", publicName: "useAlphaChannel", isSignal: true, isRequired: false, transformFunction: null }, showPresets: { classPropertyName: "showPresets", publicName: "showPresets", isSignal: true, isRequired: false, transformFunction: null }, presetColors: { classPropertyName: "presetColors", publicName: "presetColors", isSignal: true, isRequired: false, transformFunction: null }, ngxInputColor: { classPropertyName: "ngxInputColor", publicName: "ngxInputColor", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { defaultInspector: "defaultInspectorChange", colorChange: "colorChange", change: "change" }, host: { listeners: { "click": "onHostClick($event)" } }, providers: [
|
|
1499
1517
|
{
|
|
1500
1518
|
provide: NG_VALUE_ACCESSOR,
|
|
1501
1519
|
useExisting: forwardRef(() => NgxInputColor),
|
|
@@ -1526,9 +1544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
1526
1544
|
},
|
|
1527
1545
|
],
|
|
1528
1546
|
}]
|
|
1529
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i1$2.OverlayService }], propDecorators: { setInputBackgroundColor: [{
|
|
1530
|
-
type: Input
|
|
1531
|
-
}], simpleMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "simpleMode", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }], defaultInspector: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultInspector", required: false }] }, { type: i0.Output, args: ["defaultInspectorChange"] }], useAlphaChannel: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAlphaChannel", required: false }] }], showPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresets", required: false }] }], presetColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetColors", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], ngxInputColor: [{
|
|
1547
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i1$2.OverlayService }], propDecorators: { setInputBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "setInputBackgroundColor", required: false }] }], simpleMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "simpleMode", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }], defaultInspector: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultInspector", required: false }] }, { type: i0.Output, args: ["defaultInspectorChange"] }], useAlphaChannel: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAlphaChannel", required: false }] }], showPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresets", required: false }] }], presetColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetColors", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], ngxInputColor: [{
|
|
1532
1548
|
type: Input,
|
|
1533
1549
|
args: ['ngxInputColor']
|
|
1534
1550
|
}], change: [{
|