ngx-kit 5.0.0 → 6.0.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/README.md +3 -2
- package/angle-selector/README.md +34 -0
- package/box-shadow/README.md +33 -0
- package/color-picker/README.md +52 -0
- package/data-table/README.md +120 -0
- package/date-picker/README.md +74 -0
- package/dialog/README.md +94 -169
- package/drawer-menu/README.md +76 -0
- package/dropzone/README.md +59 -0
- package/fesm2022/ngx-kit-angle-selector.mjs +2 -2
- package/fesm2022/ngx-kit-angle-selector.mjs.map +1 -1
- package/fesm2022/ngx-kit-box-shadow.mjs +28 -27
- package/fesm2022/ngx-kit-box-shadow.mjs.map +1 -1
- package/fesm2022/ngx-kit-color-picker.mjs +173 -43
- package/fesm2022/ngx-kit-color-picker.mjs.map +1 -1
- package/fesm2022/ngx-kit-data-table.mjs +9 -2
- package/fesm2022/ngx-kit-data-table.mjs.map +1 -1
- package/fesm2022/ngx-kit-date-picker.mjs +120 -86
- package/fesm2022/ngx-kit-date-picker.mjs.map +1 -1
- package/fesm2022/ngx-kit-dialog.mjs +38 -7
- package/fesm2022/ngx-kit-dialog.mjs.map +1 -1
- package/fesm2022/ngx-kit-drawer-menu.mjs +190 -0
- package/fesm2022/ngx-kit-drawer-menu.mjs.map +1 -0
- package/fesm2022/ngx-kit-dropzone.mjs +272 -0
- package/fesm2022/ngx-kit-dropzone.mjs.map +1 -0
- package/fesm2022/ngx-kit-form-field.mjs +87 -0
- package/fesm2022/ngx-kit-form-field.mjs.map +1 -0
- package/fesm2022/ngx-kit-gallery.mjs +419 -0
- package/fesm2022/ngx-kit-gallery.mjs.map +1 -0
- package/fesm2022/ngx-kit-gradient-picker.mjs +12 -4
- package/fesm2022/ngx-kit-gradient-picker.mjs.map +1 -1
- package/fesm2022/ngx-kit-image-editor.mjs +501 -0
- package/fesm2022/ngx-kit-image-editor.mjs.map +1 -0
- package/fesm2022/ngx-kit-menu.mjs +9 -4
- package/fesm2022/ngx-kit-menu.mjs.map +1 -1
- package/fesm2022/ngx-kit-message.mjs +50 -24
- package/fesm2022/ngx-kit-message.mjs.map +1 -1
- package/fesm2022/ngx-kit-notify.mjs +1 -4
- package/fesm2022/ngx-kit-notify.mjs.map +1 -1
- package/fesm2022/ngx-kit-shared.mjs +126 -83
- package/fesm2022/ngx-kit-shared.mjs.map +1 -1
- package/fesm2022/ngx-kit-time-picker.mjs +602 -0
- package/fesm2022/ngx-kit-time-picker.mjs.map +1 -0
- package/fesm2022/ngx-kit.mjs.map +1 -1
- package/gallery/README.md +71 -0
- package/gradient-picker/README.md +41 -0
- package/image-editor/README.md +44 -0
- package/menu/README.md +85 -0
- package/message/README.md +70 -0
- package/notify/README.md +56 -0
- package/package.json +25 -1
- package/shared/README.md +117 -0
- package/styles/all.css +27 -0
- package/styles/image-viewer.css +12 -0
- package/types/ngx-kit-box-shadow.d.ts +1 -2
- package/types/ngx-kit-data-table.d.ts +1 -0
- package/types/ngx-kit-date-picker.d.ts +1 -1
- package/types/ngx-kit-dialog.d.ts +1 -0
- package/types/ngx-kit-drawer-menu.d.ts +101 -0
- package/types/ngx-kit-dropzone.d.ts +84 -0
- package/types/ngx-kit-form-field.d.ts +31 -0
- package/types/ngx-kit-gallery.d.ts +168 -0
- package/types/ngx-kit-image-editor.d.ts +175 -0
- package/types/ngx-kit-menu.d.ts +1 -0
- package/types/ngx-kit-message.d.ts +13 -3
- package/types/ngx-kit-notify.d.ts +0 -1
- package/types/ngx-kit-shared.d.ts +44 -13
- package/types/ngx-kit-time-picker.d.ts +149 -0
|
@@ -18,7 +18,11 @@ var ColorFormats;
|
|
|
18
18
|
|
|
19
19
|
function hexToRgb(hex) {
|
|
20
20
|
let h = hex.replace(/^#/, '');
|
|
21
|
-
|
|
21
|
+
// #rgb یا #rgba (فرمت مخفف) — هر کاراکتر دوبار تکرار میشه تا به فرم کامل برسه.
|
|
22
|
+
// قبلاً فقط طول ۳ (بدون آلفا) پشتیبانی میشد؛ #rgba (طول ۴) با اینکه یک
|
|
23
|
+
// فرمت معتبر CSS هست، از اعتبارسنجی رد میشد ولی اینجا expand نمیشد و در
|
|
24
|
+
// نهایت به خطای «Invalid hex color» میخورد.
|
|
25
|
+
if (h.length === 3 || h.length === 4)
|
|
22
26
|
h = h
|
|
23
27
|
.split('')
|
|
24
28
|
.map((x) => x + x)
|
|
@@ -362,7 +366,10 @@ function rgbaToHex(r, g, b, a = 1, allowAlpha = true, allow3Char = false) {
|
|
|
362
366
|
const aHex = toHex(Math.round(a * 255));
|
|
363
367
|
// Try compressing to #rgb or #rgba if allowed and all characters are duplicated
|
|
364
368
|
if (allow3Char && (!allowAlpha || aHex === 'ff')) {
|
|
365
|
-
const canShorten = rHex[0] === rHex[1] &&
|
|
369
|
+
const canShorten = rHex[0] === rHex[1] &&
|
|
370
|
+
gHex[0] === gHex[1] &&
|
|
371
|
+
bHex[0] === bHex[1] &&
|
|
372
|
+
(!allowAlpha || aHex[0] === aHex[1]);
|
|
366
373
|
if (canShorten) {
|
|
367
374
|
return '#' + rHex[0] + gHex[0] + bHex[0] + (allowAlpha && aHex !== 'ff' ? aHex[0] : '');
|
|
368
375
|
}
|
|
@@ -456,36 +463,154 @@ function rgbToCmykString(r, g, b) {
|
|
|
456
463
|
|
|
457
464
|
// List of all CSS color names and their hex values (W3C + extended)
|
|
458
465
|
const colorNames = {
|
|
459
|
-
aliceblue: '#f0f8ff',
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
466
|
+
aliceblue: '#f0f8ff',
|
|
467
|
+
antiquewhite: '#faebd7',
|
|
468
|
+
aqua: '#00ffff',
|
|
469
|
+
aquamarine: '#7fffd4',
|
|
470
|
+
azure: '#f0ffff',
|
|
471
|
+
beige: '#f5f5dc',
|
|
472
|
+
bisque: '#ffe4c4',
|
|
473
|
+
black: '#000000',
|
|
474
|
+
blanchedalmond: '#ffebcd',
|
|
475
|
+
blue: '#0000ff',
|
|
476
|
+
blueviolet: '#8a2be2',
|
|
477
|
+
brown: '#a52a2a',
|
|
478
|
+
burlywood: '#deb887',
|
|
479
|
+
cadetblue: '#5f9ea0',
|
|
480
|
+
chartreuse: '#7fff00',
|
|
481
|
+
chocolate: '#d2691e',
|
|
482
|
+
coral: '#ff7f50',
|
|
483
|
+
cornflowerblue: '#6495ed',
|
|
484
|
+
cornsilk: '#fff8dc',
|
|
485
|
+
crimson: '#dc143c',
|
|
486
|
+
cyan: '#00ffff',
|
|
487
|
+
darkblue: '#00008b',
|
|
488
|
+
darkcyan: '#008b8b',
|
|
489
|
+
darkgoldenrod: '#b8860b',
|
|
490
|
+
darkgray: '#a9a9a9',
|
|
491
|
+
darkgreen: '#006400',
|
|
492
|
+
darkgrey: '#a9a9a9',
|
|
493
|
+
darkkhaki: '#bdb76b',
|
|
494
|
+
darkmagenta: '#8b008b',
|
|
495
|
+
darkolivegreen: '#556b2f',
|
|
496
|
+
darkorange: '#ff8c00',
|
|
497
|
+
darkorchid: '#9932cc',
|
|
498
|
+
darkred: '#8b0000',
|
|
499
|
+
darksalmon: '#e9967a',
|
|
500
|
+
darkseagreen: '#8fbc8f',
|
|
501
|
+
darkslateblue: '#483d8b',
|
|
502
|
+
darkslategray: '#2f4f4f',
|
|
503
|
+
darkslategrey: '#2f4f4f',
|
|
504
|
+
darkturquoise: '#00ced1',
|
|
505
|
+
darkviolet: '#9400d3',
|
|
506
|
+
deeppink: '#ff1493',
|
|
507
|
+
deepskyblue: '#00bfff',
|
|
508
|
+
dimgray: '#696969',
|
|
509
|
+
dimgrey: '#696969',
|
|
510
|
+
dodgerblue: '#1e90ff',
|
|
511
|
+
firebrick: '#b22222',
|
|
512
|
+
floralwhite: '#fffaf0',
|
|
513
|
+
forestgreen: '#228b22',
|
|
514
|
+
fuchsia: '#ff00ff',
|
|
515
|
+
gainsboro: '#dcdcdc',
|
|
516
|
+
ghostwhite: '#f8f8ff',
|
|
517
|
+
gold: '#ffd700',
|
|
518
|
+
goldenrod: '#daa520',
|
|
519
|
+
gray: '#808080',
|
|
520
|
+
green: '#008000',
|
|
521
|
+
greenyellow: '#adff2f',
|
|
522
|
+
grey: '#808080',
|
|
523
|
+
honeydew: '#f0fff0',
|
|
524
|
+
hotpink: '#ff69b4',
|
|
525
|
+
indianred: '#cd5c5c',
|
|
526
|
+
indigo: '#4b0082',
|
|
527
|
+
ivory: '#fffff0',
|
|
528
|
+
khaki: '#f0e68c',
|
|
529
|
+
lavender: '#e6e6fa',
|
|
530
|
+
lavenderblush: '#fff0f5',
|
|
531
|
+
lawngreen: '#7cfc00',
|
|
532
|
+
lemonchiffon: '#fffacd',
|
|
533
|
+
lightblue: '#add8e6',
|
|
534
|
+
lightcoral: '#f08080',
|
|
535
|
+
lightcyan: '#e0ffff',
|
|
536
|
+
lightgoldenrodyellow: '#fafad2',
|
|
537
|
+
lightgray: '#d3d3d3',
|
|
538
|
+
lightgreen: '#90ee90',
|
|
539
|
+
lightgrey: '#d3d3d3',
|
|
540
|
+
lightpink: '#ffb6c1',
|
|
541
|
+
lightsalmon: '#ffa07a',
|
|
542
|
+
lightseagreen: '#20b2aa',
|
|
543
|
+
lightskyblue: '#87cefa',
|
|
544
|
+
lightslategray: '#778899',
|
|
545
|
+
lightslategrey: '#778899',
|
|
546
|
+
lightsteelblue: '#b0c4de',
|
|
547
|
+
lightyellow: '#ffffe0',
|
|
548
|
+
lime: '#00ff00',
|
|
549
|
+
limegreen: '#32cd32',
|
|
550
|
+
linen: '#faf0e6',
|
|
551
|
+
magenta: '#ff00ff',
|
|
552
|
+
maroon: '#800000',
|
|
553
|
+
mediumaquamarine: '#66cdaa',
|
|
554
|
+
mediumblue: '#0000cd',
|
|
555
|
+
mediumorchid: '#ba55d3',
|
|
556
|
+
mediumpurple: '#9370db',
|
|
557
|
+
mediumseagreen: '#3cb371',
|
|
558
|
+
mediumslateblue: '#7b68ee',
|
|
559
|
+
mediumspringgreen: '#00fa9a',
|
|
560
|
+
mediumturquoise: '#48d1cc',
|
|
561
|
+
mediumvioletred: '#c71585',
|
|
562
|
+
midnightblue: '#191970',
|
|
563
|
+
mintcream: '#f5fffa',
|
|
564
|
+
mistyrose: '#ffe4e1',
|
|
565
|
+
moccasin: '#ffe4b5',
|
|
566
|
+
navajowhite: '#ffdead',
|
|
567
|
+
navy: '#000080',
|
|
568
|
+
oldlace: '#fdf5e6',
|
|
569
|
+
olive: '#808000',
|
|
570
|
+
olivedrab: '#6b8e23',
|
|
571
|
+
orange: '#ffa500',
|
|
572
|
+
orangered: '#ff4500',
|
|
573
|
+
orchid: '#da70d6',
|
|
574
|
+
palegoldenrod: '#eee8aa',
|
|
575
|
+
palegreen: '#98fb98',
|
|
576
|
+
paleturquoise: '#afeeee',
|
|
577
|
+
palevioletred: '#db7093',
|
|
578
|
+
papayawhip: '#ffefd5',
|
|
579
|
+
peachpuff: '#ffdab9',
|
|
580
|
+
peru: '#cd853f',
|
|
581
|
+
pink: '#ffc0cb',
|
|
582
|
+
plum: '#dda0dd',
|
|
583
|
+
powderblue: '#b0e0e6',
|
|
584
|
+
purple: '#800080',
|
|
585
|
+
rebeccapurple: '#663399',
|
|
586
|
+
red: '#ff0000',
|
|
587
|
+
rosybrown: '#bc8f8f',
|
|
588
|
+
royalblue: '#4169e1',
|
|
589
|
+
saddlebrown: '#8b4513',
|
|
590
|
+
salmon: '#fa8072',
|
|
591
|
+
sandybrown: '#f4a460',
|
|
592
|
+
seagreen: '#2e8b57',
|
|
593
|
+
seashell: '#fff5ee',
|
|
594
|
+
sienna: '#a0522d',
|
|
595
|
+
silver: '#c0c0c0',
|
|
596
|
+
skyblue: '#87ceeb',
|
|
597
|
+
slateblue: '#6a5acd',
|
|
598
|
+
slategray: '#708090',
|
|
599
|
+
slategrey: '#708090',
|
|
600
|
+
snow: '#fffafa',
|
|
601
|
+
springgreen: '#00ff7f',
|
|
602
|
+
steelblue: '#4682b4',
|
|
603
|
+
tan: '#d2b48c',
|
|
604
|
+
teal: '#008080',
|
|
605
|
+
thistle: '#d8bfd8',
|
|
606
|
+
tomato: '#ff6347',
|
|
607
|
+
turquoise: '#40e0d0',
|
|
608
|
+
violet: '#ee82ee',
|
|
609
|
+
wheat: '#f5deb3',
|
|
610
|
+
white: '#ffffff',
|
|
611
|
+
whitesmoke: '#f5f5f5',
|
|
612
|
+
yellow: '#ffff00',
|
|
613
|
+
yellowgreen: '#9acd32',
|
|
489
614
|
};
|
|
490
615
|
|
|
491
616
|
class NgxColor {
|
|
@@ -501,7 +626,12 @@ class NgxColor {
|
|
|
501
626
|
}
|
|
502
627
|
if (typeof input === 'object') {
|
|
503
628
|
if ('r' in input && 'g' in input && 'b' in input) {
|
|
504
|
-
this._rgb = {
|
|
629
|
+
this._rgb = {
|
|
630
|
+
r: +input.r,
|
|
631
|
+
g: +input.g,
|
|
632
|
+
b: +input.b,
|
|
633
|
+
a: input.a !== undefined ? +input.a : 1,
|
|
634
|
+
};
|
|
505
635
|
return;
|
|
506
636
|
}
|
|
507
637
|
if ('h' in input && 's' in input && 'l' in input) {
|
|
@@ -738,11 +868,11 @@ class PickerComponent {
|
|
|
738
868
|
}
|
|
739
869
|
}
|
|
740
870
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
741
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: PickerComponent, isStandalone: true, selector: "app-picker", inputs: { simpleMode: "simpleMode", color: "color", useAlphaChannel: "useAlphaChannel" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<saturation\
|
|
871
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: PickerComponent, isStandalone: true, selector: "app-picker", inputs: { simpleMode: "simpleMode", color: "color", useAlphaChannel: "useAlphaChannel" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<saturation\n [height]=\"simpleMode ? 150 : 160\"\n [(ngModel)]=\"board\"\n name=\"board\"\n [min]=\"{ x: 0, y: 0 }\"\n [max]=\"{ x: 100, y: 100 }\"\n [step]=\"1\"\n [color]=\"baseColor\"\n (change)=\"generateColor()\"></saturation>\n<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%)\"></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,' + alphaBgColor + ')'\"></slider>\n}\n", styles: [".color-sliders{display:flex;gap:5px}.color-sliders .sliders{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: SliderComponent, selector: "slider", inputs: ["step", "min", "max", "background", "isBgTransparent"], outputs: ["change"] }, { kind: "component", type: SaturationComponent, selector: "saturation", inputs: ["width", "height", "color", "step", "min", "max"], outputs: ["change"] }] });
|
|
742
872
|
}
|
|
743
873
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PickerComponent, decorators: [{
|
|
744
874
|
type: Component,
|
|
745
|
-
args: [{ selector: 'app-picker', imports: [FormsModule, SliderComponent, SaturationComponent], template: "<saturation\
|
|
875
|
+
args: [{ selector: 'app-picker', imports: [FormsModule, SliderComponent, SaturationComponent], template: "<saturation\n [height]=\"simpleMode ? 150 : 160\"\n [(ngModel)]=\"board\"\n name=\"board\"\n [min]=\"{ x: 0, y: 0 }\"\n [max]=\"{ x: 100, y: 100 }\"\n [step]=\"1\"\n [color]=\"baseColor\"\n (change)=\"generateColor()\"></saturation>\n<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%)\"></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,' + alphaBgColor + ')'\"></slider>\n}\n", styles: [".color-sliders{display:flex;gap:5px}.color-sliders .sliders{flex:1}\n"] }]
|
|
746
876
|
}], ctorParameters: () => [], propDecorators: { simpleMode: [{
|
|
747
877
|
type: Input
|
|
748
878
|
}], color: [{
|
|
@@ -817,11 +947,11 @@ class CmykComponent {
|
|
|
817
947
|
// return Object.assign({}, cmyk);
|
|
818
948
|
}
|
|
819
949
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CmykComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
820
|
-
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\
|
|
950
|
+
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 #fff 0 0 0 100px;border:none;width:40px;color:#000;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"] }] });
|
|
821
951
|
}
|
|
822
952
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CmykComponent, decorators: [{
|
|
823
953
|
type: Component,
|
|
824
|
-
args: [{ selector: 'app-cmyk', imports: [FormsModule, SliderComponent], template: "<slider\
|
|
954
|
+
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 #fff 0 0 0 100px;border:none;width:40px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"] }]
|
|
825
955
|
}], ctorParameters: () => [], propDecorators: { color: [{
|
|
826
956
|
type: Input
|
|
827
957
|
}], colorChange: [{
|
|
@@ -865,11 +995,11 @@ class HslComponent {
|
|
|
865
995
|
}
|
|
866
996
|
}
|
|
867
997
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HslComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
868
|
-
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\
|
|
998
|
+
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 #fff 0 0 0 100px;border:none;width:48px;color:#000;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"] }] });
|
|
869
999
|
}
|
|
870
1000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HslComponent, decorators: [{
|
|
871
1001
|
type: Component,
|
|
872
|
-
args: [{ selector: 'app-hsl', imports: [FormsModule, SliderComponent], template: "<slider\
|
|
1002
|
+
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 #fff 0 0 0 100px;border:none;width:48px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"] }]
|
|
873
1003
|
}], ctorParameters: () => [], propDecorators: { color: [{
|
|
874
1004
|
type: Input
|
|
875
1005
|
}], useAlphaChannel: [{
|
|
@@ -925,11 +1055,11 @@ class RgbComponent {
|
|
|
925
1055
|
this.baseColor = `rgb(${r}, ${g}, ${b})`;
|
|
926
1056
|
}
|
|
927
1057
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RgbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
928
|
-
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\
|
|
1058
|
+
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 #fff 0 0 0 100px;border:none;width:40px;color:#000;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"] }] });
|
|
929
1059
|
}
|
|
930
1060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RgbComponent, decorators: [{
|
|
931
1061
|
type: Component,
|
|
932
|
-
args: [{ selector: 'app-rgb', imports: [FormsModule, SliderComponent], template: "<slider\
|
|
1062
|
+
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 #fff 0 0 0 100px;border:none;width:40px;color:#000;font-family:Inter,sans-serif;padding:5px 6px;border-radius:5px;font-size:12px}\n"] }]
|
|
933
1063
|
}], ctorParameters: () => [], propDecorators: { color: [{
|
|
934
1064
|
type: Input
|
|
935
1065
|
}], useAlphaChannel: [{
|
|
@@ -1092,7 +1222,7 @@ class NgxInputColorComponent {
|
|
|
1092
1222
|
multi: true,
|
|
1093
1223
|
useExisting: NgxInputColorComponent,
|
|
1094
1224
|
},
|
|
1095
|
-
], ngImport: i0, template: "<div
|
|
1225
|
+
], ngImport: i0, template: "<div\n class=\"ngx-input-color-picker\"\n (click)=\"stopPropagation($event)\"\n [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\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 </div>\n</div>\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff}.ngx-input-color-picker{width:270px;max-width:100%;border-radius:15px;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(191,191,191,.4) solid;box-shadow:0 0 20px #9090904f}.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:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text)}.top-actions select:focus{cursor:pointer;background:#e5f0ff;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}\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 });
|
|
1096
1226
|
}
|
|
1097
1227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxInputColorComponent, decorators: [{
|
|
1098
1228
|
type: Component,
|
|
@@ -1117,7 +1247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
1117
1247
|
CmykComponent,
|
|
1118
1248
|
HslComponent,
|
|
1119
1249
|
RgbComponent,
|
|
1120
|
-
], template: "<div
|
|
1250
|
+
], template: "<div\n class=\"ngx-input-color-picker\"\n (click)=\"stopPropagation($event)\"\n [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\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 </div>\n</div>\n", styles: [":host{--ngx-color-bg: #fff;--ngx-color-text: #000}:host-context(.dark){--ngx-color-bg: #222;--ngx-color-text: #fff}.ngx-input-color-picker{width:270px;max-width:100%;border-radius:15px;overflow:hidden;direction:ltr;font-family:arial,tahoma;border:1px rgba(191,191,191,.4) solid;box-shadow:0 0 20px #9090904f}.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:none;border-radius:4px;padding:5px 10px;background:none;color:var(--ngx-color-text)}.top-actions select:focus{cursor:pointer;background:#e5f0ff;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}\n"] }]
|
|
1121
1251
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { setTheme: [{
|
|
1122
1252
|
type: Input,
|
|
1123
1253
|
args: ['theme']
|