ngx-color 8.0.0 → 8.0.3

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.
Files changed (187) hide show
  1. package/README.md +0 -1
  2. package/alpha/alpha-picker.component.d.ts +28 -0
  3. package/alpha/index.d.ts +5 -0
  4. package/alpha/public_api.d.ts +1 -0
  5. package/block/block-swatches.component.d.ts +24 -0
  6. package/block/block.component.d.ts +36 -0
  7. package/block/index.d.ts +5 -0
  8. package/block/public_api.d.ts +2 -0
  9. package/chrome/chrome-fields.component.d.ts +22 -0
  10. package/chrome/chrome.component.d.ts +25 -0
  11. package/chrome/index.d.ts +5 -0
  12. package/chrome/public_api.d.ts +2 -0
  13. package/circle/circle-swatch.component.d.ts +19 -0
  14. package/circle/circle.component.d.ts +32 -0
  15. package/circle/index.d.ts +5 -0
  16. package/circle/public_api.d.ts +2 -0
  17. package/compact/compact-color.component.d.ts +19 -0
  18. package/compact/compact-fields.component.d.ts +32 -0
  19. package/compact/compact.component.d.ts +30 -0
  20. package/compact/index.d.ts +5 -0
  21. package/compact/public_api.d.ts +3 -0
  22. package/coordinates.directive.d.ts +1 -1
  23. package/esm2020/alpha/alpha-picker.component.mjs +100 -0
  24. package/esm2020/alpha/ngx-color-alpha.mjs +5 -0
  25. package/esm2020/alpha/public_api.mjs +2 -0
  26. package/esm2020/alpha.component.mjs +7 -7
  27. package/esm2020/block/block-swatches.component.mjs +63 -0
  28. package/esm2020/block/block.component.mjs +158 -0
  29. package/esm2020/block/ngx-color-block.mjs +5 -0
  30. package/esm2020/block/public_api.mjs +3 -0
  31. package/esm2020/checkboard.component.mjs +7 -7
  32. package/esm2020/chrome/chrome-fields.component.mjs +314 -0
  33. package/esm2020/chrome/chrome.component.mjs +184 -0
  34. package/esm2020/chrome/ngx-color-chrome.mjs +5 -0
  35. package/esm2020/chrome/public_api.mjs +3 -0
  36. package/esm2020/circle/circle-swatch.component.mjs +69 -0
  37. package/esm2020/circle/circle.component.mjs +134 -0
  38. package/esm2020/circle/ngx-color-circle.mjs +5 -0
  39. package/esm2020/circle/public_api.mjs +3 -0
  40. package/esm2020/color-wrap.component.mjs +10 -10
  41. package/esm2020/compact/compact-color.component.mjs +70 -0
  42. package/esm2020/compact/compact-fields.component.mjs +164 -0
  43. package/esm2020/compact/compact.component.mjs +154 -0
  44. package/esm2020/compact/ngx-color-compact.mjs +5 -0
  45. package/esm2020/compact/public_api.mjs +4 -0
  46. package/esm2020/coordinates.directive.mjs +9 -9
  47. package/esm2020/editable-input.component.mjs +10 -14
  48. package/esm2020/github/github-swatch.component.mjs +53 -0
  49. package/esm2020/github/github.component.mjs +112 -0
  50. package/esm2020/github/ngx-color-github.mjs +5 -0
  51. package/esm2020/github/public_api.mjs +3 -0
  52. package/esm2020/hue/hue-picker.component.mjs +100 -0
  53. package/esm2020/hue/ngx-color-hue.mjs +5 -0
  54. package/esm2020/hue/public_api.mjs +2 -0
  55. package/esm2020/hue.component.mjs +7 -7
  56. package/esm2020/material/material.component.mjs +186 -0
  57. package/esm2020/material/ngx-color-material.mjs +5 -0
  58. package/esm2020/material/public_api.mjs +2 -0
  59. package/esm2020/photoshop/ngx-color-photoshop.mjs +5 -0
  60. package/esm2020/photoshop/photoshop-button.component.mjs +34 -0
  61. package/esm2020/photoshop/photoshop-fields.component.mjs +212 -0
  62. package/esm2020/photoshop/photoshop-previews.component.mjs +40 -0
  63. package/esm2020/photoshop/photoshop.component.mjs +185 -0
  64. package/esm2020/photoshop/public_api.mjs +5 -0
  65. package/esm2020/raised.component.mjs +7 -7
  66. package/esm2020/saturation.component.mjs +7 -7
  67. package/esm2020/shade/ngx-color-shade.mjs +5 -0
  68. package/esm2020/shade/public_api.mjs +2 -0
  69. package/esm2020/shade/shade-picker.component.mjs +92 -0
  70. package/esm2020/shade.component.mjs +7 -7
  71. package/esm2020/sketch/ngx-color-sketch.mjs +5 -0
  72. package/esm2020/sketch/public_api.mjs +4 -0
  73. package/esm2020/sketch/sketch-fields.component.mjs +209 -0
  74. package/esm2020/sketch/sketch-preset-colors.component.mjs +68 -0
  75. package/esm2020/sketch/sketch.component.mjs +212 -0
  76. package/esm2020/slider/ngx-color-slider.mjs +5 -0
  77. package/esm2020/slider/public_api.mjs +4 -0
  78. package/esm2020/slider/slider-swatch.component.mjs +52 -0
  79. package/esm2020/slider/slider-swatches.component.mjs +119 -0
  80. package/esm2020/slider/slider.component.mjs +102 -0
  81. package/esm2020/swatch.component.mjs +7 -7
  82. package/esm2020/swatches/ngx-color-swatches.mjs +5 -0
  83. package/esm2020/swatches/public_api.mjs +4 -0
  84. package/esm2020/swatches/swatches-color.component.mjs +104 -0
  85. package/esm2020/swatches/swatches-group.component.mjs +49 -0
  86. package/esm2020/swatches/swatches.component.mjs +242 -0
  87. package/esm2020/twitter/ngx-color-twitter.mjs +5 -0
  88. package/esm2020/twitter/public_api.mjs +2 -0
  89. package/esm2020/twitter/twitter.component.mjs +159 -0
  90. package/fesm2015/ngx-color-alpha.mjs +107 -0
  91. package/fesm2015/ngx-color-alpha.mjs.map +1 -0
  92. package/fesm2015/ngx-color-block.mjs +223 -0
  93. package/fesm2015/ngx-color-block.mjs.map +1 -0
  94. package/fesm2015/ngx-color-chrome.mjs +499 -0
  95. package/fesm2015/ngx-color-chrome.mjs.map +1 -0
  96. package/fesm2015/ngx-color-circle.mjs +207 -0
  97. package/fesm2015/ngx-color-circle.mjs.map +1 -0
  98. package/fesm2015/ngx-color-compact.mjs +385 -0
  99. package/fesm2015/ngx-color-compact.mjs.map +1 -0
  100. package/fesm2015/ngx-color-github.mjs +169 -0
  101. package/fesm2015/ngx-color-github.mjs.map +1 -0
  102. package/fesm2015/ngx-color-hue.mjs +107 -0
  103. package/fesm2015/ngx-color-hue.mjs.map +1 -0
  104. package/fesm2015/ngx-color-material.mjs +193 -0
  105. package/fesm2015/ngx-color-material.mjs.map +1 -0
  106. package/fesm2015/ngx-color-photoshop.mjs +467 -0
  107. package/fesm2015/ngx-color-photoshop.mjs.map +1 -0
  108. package/fesm2015/ngx-color-shade.mjs +99 -0
  109. package/fesm2015/ngx-color-shade.mjs.map +1 -0
  110. package/fesm2015/ngx-color-sketch.mjs +485 -0
  111. package/fesm2015/ngx-color-sketch.mjs.map +1 -0
  112. package/fesm2015/ngx-color-slider.mjs +273 -0
  113. package/fesm2015/ngx-color-slider.mjs.map +1 -0
  114. package/fesm2015/ngx-color-swatches.mjs +391 -0
  115. package/fesm2015/ngx-color-swatches.mjs.map +1 -0
  116. package/fesm2015/ngx-color-twitter.mjs +166 -0
  117. package/fesm2015/ngx-color-twitter.mjs.map +1 -0
  118. package/fesm2015/ngx-color.mjs +78 -80
  119. package/fesm2015/ngx-color.mjs.map +1 -1
  120. package/fesm2020/ngx-color-alpha.mjs +107 -0
  121. package/fesm2020/ngx-color-alpha.mjs.map +1 -0
  122. package/fesm2020/ngx-color-block.mjs +223 -0
  123. package/fesm2020/ngx-color-block.mjs.map +1 -0
  124. package/fesm2020/ngx-color-chrome.mjs +499 -0
  125. package/fesm2020/ngx-color-chrome.mjs.map +1 -0
  126. package/fesm2020/ngx-color-circle.mjs +207 -0
  127. package/fesm2020/ngx-color-circle.mjs.map +1 -0
  128. package/fesm2020/ngx-color-compact.mjs +385 -0
  129. package/fesm2020/ngx-color-compact.mjs.map +1 -0
  130. package/fesm2020/ngx-color-github.mjs +169 -0
  131. package/fesm2020/ngx-color-github.mjs.map +1 -0
  132. package/fesm2020/ngx-color-hue.mjs +107 -0
  133. package/fesm2020/ngx-color-hue.mjs.map +1 -0
  134. package/fesm2020/ngx-color-material.mjs +193 -0
  135. package/fesm2020/ngx-color-material.mjs.map +1 -0
  136. package/fesm2020/ngx-color-photoshop.mjs +467 -0
  137. package/fesm2020/ngx-color-photoshop.mjs.map +1 -0
  138. package/fesm2020/ngx-color-shade.mjs +99 -0
  139. package/fesm2020/ngx-color-shade.mjs.map +1 -0
  140. package/fesm2020/ngx-color-sketch.mjs +485 -0
  141. package/fesm2020/ngx-color-sketch.mjs.map +1 -0
  142. package/fesm2020/ngx-color-slider.mjs +273 -0
  143. package/fesm2020/ngx-color-slider.mjs.map +1 -0
  144. package/fesm2020/ngx-color-swatches.mjs +391 -0
  145. package/fesm2020/ngx-color-swatches.mjs.map +1 -0
  146. package/fesm2020/ngx-color-twitter.mjs +166 -0
  147. package/fesm2020/ngx-color-twitter.mjs.map +1 -0
  148. package/fesm2020/ngx-color.mjs +75 -79
  149. package/fesm2020/ngx-color.mjs.map +1 -1
  150. package/github/github-swatch.component.d.ts +19 -0
  151. package/github/github.component.d.ts +28 -0
  152. package/github/index.d.ts +5 -0
  153. package/github/public_api.d.ts +2 -0
  154. package/hue/hue-picker.component.d.ts +29 -0
  155. package/hue/index.d.ts +5 -0
  156. package/hue/public_api.d.ts +1 -0
  157. package/material/index.d.ts +5 -0
  158. package/material/material.component.d.ts +39 -0
  159. package/material/public_api.d.ts +1 -0
  160. package/package.json +113 -1
  161. package/photoshop/index.d.ts +5 -0
  162. package/photoshop/photoshop-button.component.d.ts +9 -0
  163. package/photoshop/photoshop-fields.component.d.ts +22 -0
  164. package/photoshop/photoshop-previews.component.d.ts +11 -0
  165. package/photoshop/photoshop.component.d.ts +33 -0
  166. package/photoshop/public_api.d.ts +4 -0
  167. package/shade/index.d.ts +5 -0
  168. package/shade/public_api.d.ts +1 -0
  169. package/shade/shade-picker.component.d.ts +27 -0
  170. package/sketch/index.d.ts +5 -0
  171. package/sketch/public_api.d.ts +3 -0
  172. package/sketch/sketch-fields.component.d.ts +23 -0
  173. package/sketch/sketch-preset-colors.component.d.ts +24 -0
  174. package/sketch/sketch.component.d.ts +32 -0
  175. package/slider/index.d.ts +5 -0
  176. package/slider/public_api.d.ts +3 -0
  177. package/slider/slider-swatch.component.d.ts +16 -0
  178. package/slider/slider-swatches.component.d.ts +15 -0
  179. package/slider/slider.component.d.ts +22 -0
  180. package/swatches/index.d.ts +5 -0
  181. package/swatches/public_api.d.ts +3 -0
  182. package/swatches/swatches-color.component.d.ts +18 -0
  183. package/swatches/swatches-group.component.d.ts +10 -0
  184. package/swatches/swatches.component.d.ts +29 -0
  185. package/twitter/index.d.ts +5 -0
  186. package/twitter/public_api.d.ts +1 -0
  187. package/twitter/twitter.component.d.ts +31 -0
@@ -0,0 +1,223 @@
1
+ import * as i0 from '@angular/core';
2
+ import { EventEmitter, Component, Input, Output, forwardRef, ChangeDetectionStrategy, NgModule } from '@angular/core';
3
+ import * as i1 from '@angular/common';
4
+ import { CommonModule } from '@angular/common';
5
+ import * as i2 from 'ngx-color';
6
+ import { ColorWrap, getContrastingColor, isValidHex, CheckboardModule, SwatchModule, EditableInputModule } from 'ngx-color';
7
+ import { NG_VALUE_ACCESSOR } from '@angular/forms';
8
+
9
+ class BlockSwatchesComponent {
10
+ constructor() {
11
+ this.onClick = new EventEmitter();
12
+ this.onSwatchHover = new EventEmitter();
13
+ this.swatchStyle = {
14
+ width: '22px',
15
+ height: '22px',
16
+ float: 'left',
17
+ marginRight: '10px',
18
+ marginBottom: '10px',
19
+ borderRadius: '4px',
20
+ };
21
+ }
22
+ handleClick({ hex, $event }) {
23
+ this.onClick.emit({ hex, $event });
24
+ }
25
+ focusStyle(c) {
26
+ return {
27
+ boxShadow: `${c} 0 0 4px`,
28
+ };
29
+ }
30
+ }
31
+ BlockSwatchesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: BlockSwatchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
32
+ BlockSwatchesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: BlockSwatchesComponent, selector: "color-block-swatches", inputs: { colors: "colors" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
33
+ <div class="block-swatches">
34
+ <color-swatch
35
+ *ngFor="let c of colors"
36
+ [color]="c"
37
+ [style]="swatchStyle"
38
+ [focusStyle]="focusStyle(c)"
39
+ (onClick)="handleClick($event)"
40
+ (onHover)="onSwatchHover.emit($event)"
41
+ ></color-swatch>
42
+ <div class="clear"></div>
43
+ </div>
44
+ `, isInline: true, styles: [".block-swatches{margin-right:-10px}.clear{clear:both}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }] });
45
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: BlockSwatchesComponent, decorators: [{
46
+ type: Component,
47
+ args: [{ selector: 'color-block-swatches', template: `
48
+ <div class="block-swatches">
49
+ <color-swatch
50
+ *ngFor="let c of colors"
51
+ [color]="c"
52
+ [style]="swatchStyle"
53
+ [focusStyle]="focusStyle(c)"
54
+ (onClick)="handleClick($event)"
55
+ (onHover)="onSwatchHover.emit($event)"
56
+ ></color-swatch>
57
+ <div class="clear"></div>
58
+ </div>
59
+ `, styles: [".block-swatches{margin-right:-10px}.clear{clear:both}\n"] }]
60
+ }], propDecorators: { colors: [{
61
+ type: Input
62
+ }], onClick: [{
63
+ type: Output
64
+ }], onSwatchHover: [{
65
+ type: Output
66
+ }] } });
67
+
68
+ class BlockComponent extends ColorWrap {
69
+ constructor() {
70
+ super();
71
+ /** Pixel value for picker width */
72
+ this.width = 170;
73
+ /** Color squares to display */
74
+ this.colors = [
75
+ '#D9E3F0',
76
+ '#F47373',
77
+ '#697689',
78
+ '#37D67A',
79
+ '#2CCCE4',
80
+ '#555555',
81
+ '#dce775',
82
+ '#ff8a65',
83
+ '#ba68c8',
84
+ ];
85
+ this.triangle = 'top';
86
+ this.input = {
87
+ width: '100%',
88
+ fontSize: '12px',
89
+ color: '#666',
90
+ border: '0px',
91
+ outline: 'none',
92
+ height: '22px',
93
+ boxShadow: 'inset 0 0 0 1px #ddd',
94
+ borderRadius: '4px',
95
+ padding: '0 7px',
96
+ boxSizing: 'border-box',
97
+ };
98
+ this.wrap = {
99
+ position: 'relative',
100
+ width: '100%',
101
+ };
102
+ this.disableAlpha = true;
103
+ }
104
+ handleValueChange({ data, $event }) {
105
+ this.handleBlockChange({ hex: data, $event });
106
+ }
107
+ getContrastingColor(hex) {
108
+ return getContrastingColor(hex);
109
+ }
110
+ handleBlockChange({ hex, $event }) {
111
+ if (isValidHex(hex)) {
112
+ // this.hex = hex;
113
+ this.handleChange({
114
+ hex,
115
+ source: 'hex',
116
+ }, $event);
117
+ }
118
+ }
119
+ }
120
+ BlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: BlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
121
+ BlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: BlockComponent, selector: "color-block", inputs: { width: "width", colors: "colors", triangle: "triangle" }, providers: [
122
+ {
123
+ provide: NG_VALUE_ACCESSOR,
124
+ useExisting: forwardRef(() => BlockComponent),
125
+ multi: true,
126
+ },
127
+ {
128
+ provide: ColorWrap,
129
+ useExisting: forwardRef(() => BlockComponent),
130
+ },
131
+ ], usesInheritance: true, ngImport: i0, template: `
132
+ <div class="block-card block-picker {{ className }}">
133
+ <div class="block-triangle" *ngIf="triangle !== 'hide'"
134
+ [style.border-color]="'transparent transparent ' + this.hex + ' transparent'"
135
+ ></div>
136
+
137
+ <div class="block-head" [style.background]="hex">
138
+ <color-checkboard *ngIf="hex === 'transparent'"
139
+ borderRadius="6px 6px 0 0"
140
+ ></color-checkboard>
141
+ <div class="block-label" [style.color]="getContrastingColor(hex)">
142
+ {{ hex }}
143
+ </div>
144
+ </div>
145
+
146
+ <div class="block-body">
147
+ <color-block-swatches [colors]="colors"
148
+ (onClick)="handleBlockChange($event)"
149
+ (onSwatchHover)="onSwatchHover.emit($event)"
150
+ ></color-block-swatches>
151
+ <color-editable-input [value]="hex"
152
+ (onChange)="handleValueChange($event)"
153
+ [style]="{input: input, wrap: wrap}"
154
+ ></color-editable-input>
155
+ </div>
156
+ </div>
157
+ `, isInline: true, styles: [".block-card{background:#fff;border-radius:6px;box-shadow:0 1px #0000001a;position:relative}.block-head{align-items:center;border-radius:6px 6px 0 0;display:flex;height:110px;justify-content:center;position:relative}.block-body{padding:10px}.block-label{font-size:18px;position:relative}.block-triangle{border-style:solid;border-width:0 10px 10px 10px;height:0;left:50%;margin-left:-10px;position:absolute;top:-10px;width:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i2.CheckboardComponent; }), selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }, { kind: "component", type: i0.forwardRef(function () { return i2.EditableInputComponent; }), selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return BlockSwatchesComponent; }), selector: "color-block-swatches", inputs: ["colors"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
158
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: BlockComponent, decorators: [{
159
+ type: Component,
160
+ args: [{ selector: 'color-block', template: `
161
+ <div class="block-card block-picker {{ className }}">
162
+ <div class="block-triangle" *ngIf="triangle !== 'hide'"
163
+ [style.border-color]="'transparent transparent ' + this.hex + ' transparent'"
164
+ ></div>
165
+
166
+ <div class="block-head" [style.background]="hex">
167
+ <color-checkboard *ngIf="hex === 'transparent'"
168
+ borderRadius="6px 6px 0 0"
169
+ ></color-checkboard>
170
+ <div class="block-label" [style.color]="getContrastingColor(hex)">
171
+ {{ hex }}
172
+ </div>
173
+ </div>
174
+
175
+ <div class="block-body">
176
+ <color-block-swatches [colors]="colors"
177
+ (onClick)="handleBlockChange($event)"
178
+ (onSwatchHover)="onSwatchHover.emit($event)"
179
+ ></color-block-swatches>
180
+ <color-editable-input [value]="hex"
181
+ (onChange)="handleValueChange($event)"
182
+ [style]="{input: input, wrap: wrap}"
183
+ ></color-editable-input>
184
+ </div>
185
+ </div>
186
+ `, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
187
+ {
188
+ provide: NG_VALUE_ACCESSOR,
189
+ useExisting: forwardRef(() => BlockComponent),
190
+ multi: true,
191
+ },
192
+ {
193
+ provide: ColorWrap,
194
+ useExisting: forwardRef(() => BlockComponent),
195
+ },
196
+ ], styles: [".block-card{background:#fff;border-radius:6px;box-shadow:0 1px #0000001a;position:relative}.block-head{align-items:center;border-radius:6px 6px 0 0;display:flex;height:110px;justify-content:center;position:relative}.block-body{padding:10px}.block-label{font-size:18px;position:relative}.block-triangle{border-style:solid;border-width:0 10px 10px 10px;height:0;left:50%;margin-left:-10px;position:absolute;top:-10px;width:0}\n"] }]
197
+ }], ctorParameters: function () { return []; }, propDecorators: { width: [{
198
+ type: Input
199
+ }], colors: [{
200
+ type: Input
201
+ }], triangle: [{
202
+ type: Input
203
+ }] } });
204
+ class ColorBlockModule {
205
+ }
206
+ ColorBlockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
207
+ ColorBlockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorBlockModule, declarations: [BlockComponent, BlockSwatchesComponent], imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule], exports: [BlockComponent, BlockSwatchesComponent] });
208
+ ColorBlockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorBlockModule, imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule] });
209
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorBlockModule, decorators: [{
210
+ type: NgModule,
211
+ args: [{
212
+ declarations: [BlockComponent, BlockSwatchesComponent],
213
+ exports: [BlockComponent, BlockSwatchesComponent],
214
+ imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule],
215
+ }]
216
+ }] });
217
+
218
+ /**
219
+ * Generated bundle index. Do not edit.
220
+ */
221
+
222
+ export { BlockComponent, BlockSwatchesComponent, ColorBlockModule };
223
+ //# sourceMappingURL=ngx-color-block.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ngx-color-block.mjs","sources":["../../src/lib/block/block-swatches.component.ts","../../src/lib/block/block.component.ts","../../src/lib/block/ngx-color-block.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\n@Component({\n selector: 'color-block-swatches',\n template: `\n <div class=\"block-swatches\">\n <color-swatch\n *ngFor=\"let c of colors\"\n [color]=\"c\"\n [style]=\"swatchStyle\"\n [focusStyle]=\"focusStyle(c)\"\n (onClick)=\"handleClick($event)\"\n (onHover)=\"onSwatchHover.emit($event)\"\n ></color-swatch>\n <div class=\"clear\"></div>\n </div>\n `,\n styles: [`\n .block-swatches {\n margin-right: -10px;\n }\n .clear {\n clear: both;\n }\n `],\n})\nexport class BlockSwatchesComponent {\n @Input() colors!: string[];\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n\n swatchStyle = {\n width: '22px',\n height: '22px',\n float: 'left',\n marginRight: '10px',\n marginBottom: '10px',\n borderRadius: '4px',\n };\n\n handleClick({hex, $event}) {\n this.onClick.emit({hex, $event});\n }\n focusStyle(c) {\n return {\n boxShadow: `${ c } 0 0 4px`,\n };\n }\n\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport {\n CheckboardModule,\n ColorWrap,\n EditableInputModule,\n getContrastingColor,\n isValidHex,\n SwatchModule,\n} from 'ngx-color';\nimport { BlockSwatchesComponent } from './block-swatches.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-block',\n template: `\n <div class=\"block-card block-picker {{ className }}\">\n <div class=\"block-triangle\" *ngIf=\"triangle !== 'hide'\"\n [style.border-color]=\"'transparent transparent ' + this.hex + ' transparent'\"\n ></div>\n\n <div class=\"block-head\" [style.background]=\"hex\">\n <color-checkboard *ngIf=\"hex === 'transparent'\"\n borderRadius=\"6px 6px 0 0\"\n ></color-checkboard>\n <div class=\"block-label\" [style.color]=\"getContrastingColor(hex)\">\n {{ hex }}\n </div>\n </div>\n\n <div class=\"block-body\">\n <color-block-swatches [colors]=\"colors\"\n (onClick)=\"handleBlockChange($event)\"\n (onSwatchHover)=\"onSwatchHover.emit($event)\"\n ></color-block-swatches>\n <color-editable-input [value]=\"hex\"\n (onChange)=\"handleValueChange($event)\"\n [style]=\"{input: input, wrap: wrap}\"\n ></color-editable-input>\n </div>\n </div>\n `,\n styles: [\n `\n .block-card {\n background: #fff;\n border-radius: 6px;\n box-shadow: 0 1px rgba(0, 0, 0, .1);\n position: relative;\n }\n .block-head {\n align-items: center;\n border-radius: 6px 6px 0 0;\n display: flex;\n height: 110px;\n justify-content: center;\n position: relative;\n }\n .block-body {\n padding: 10px;\n }\n .block-label {\n font-size: 18px;\n position: relative;\n }\n .block-triangle {\n border-style: solid;\n border-width: 0 10px 10px 10px;\n height: 0;\n left: 50%;\n margin-left: -10px;\n position: absolute;\n top: -10px;\n width: 0;\n }\n `,\n ],\n preserveWhitespaces: false,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => BlockComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => BlockComponent),\n },\n ]\n})\nexport class BlockComponent extends ColorWrap {\n /** Pixel value for picker width */\n @Input() width: string | number = 170;\n /** Color squares to display */\n @Input() colors = [\n '#D9E3F0',\n '#F47373',\n '#697689',\n '#37D67A',\n '#2CCCE4',\n '#555555',\n '#dce775',\n '#ff8a65',\n '#ba68c8',\n ];\n @Input() triangle: 'top' | 'hide' = 'top';\n input: {[key: string]: string} = {\n width: '100%',\n fontSize: '12px',\n color: '#666',\n border: '0px',\n outline: 'none',\n height: '22px',\n boxShadow: 'inset 0 0 0 1px #ddd',\n borderRadius: '4px',\n padding: '0 7px',\n boxSizing: 'border-box',\n };\n wrap: {[key: string]: string} = {\n position: 'relative',\n width: '100%',\n };\n disableAlpha = true;\n\n constructor() {\n super();\n }\n\n handleValueChange({ data, $event }) {\n this.handleBlockChange({ hex: data, $event });\n }\n getContrastingColor(hex) {\n return getContrastingColor(hex);\n }\n handleBlockChange({ hex, $event }) {\n if (isValidHex(hex)) {\n // this.hex = hex;\n this.handleChange(\n {\n hex,\n source: 'hex',\n },\n $event,\n );\n }\n }\n}\n\n@NgModule({\n declarations: [BlockComponent, BlockSwatchesComponent],\n exports: [BlockComponent, BlockSwatchesComponent],\n imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule],\n})\nexport class ColorBlockModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}