ngx-color 7.2.0 → 7.3.0
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/alpha/alpha-picker.component.d.ts +8 -0
- package/alpha/esm2020/alpha-picker.component.mjs +116 -0
- package/alpha/{esm2015/ngx-color-alpha.js → esm2020/ngx-color-alpha.mjs} +2 -2
- package/alpha/esm2020/public_api.mjs +2 -0
- package/alpha/fesm2015/ngx-color-alpha.mjs +123 -0
- package/alpha/fesm2015/ngx-color-alpha.mjs.map +1 -0
- package/alpha/fesm2020/ngx-color-alpha.mjs +123 -0
- package/alpha/fesm2020/ngx-color-alpha.mjs.map +1 -0
- package/alpha/ngx-color-alpha.d.ts +2 -1
- package/alpha/package.json +19 -7
- package/alpha/public_api.d.ts +1 -0
- package/alpha.component.d.ts +9 -0
- package/block/block-swatches.component.d.ts +3 -0
- package/block/block.component.d.ts +9 -0
- package/block/esm2020/block-swatches.component.mjs +76 -0
- package/block/esm2020/block.component.mjs +199 -0
- package/block/esm2020/ngx-color-block.mjs +5 -0
- package/block/esm2020/public_api.mjs +3 -0
- package/block/fesm2015/ngx-color-block.mjs +277 -0
- package/block/fesm2015/ngx-color-block.mjs.map +1 -0
- package/block/fesm2020/ngx-color-block.mjs +277 -0
- package/block/fesm2020/ngx-color-block.mjs.map +1 -0
- package/block/ngx-color-block.d.ts +2 -2
- package/block/package.json +19 -7
- package/block/public_api.d.ts +2 -0
- package/checkboard.component.d.ts +7 -0
- package/chrome/chrome-fields.component.d.ts +3 -0
- package/chrome/chrome.component.d.ts +9 -0
- package/chrome/esm2020/chrome-fields.component.mjs +356 -0
- package/chrome/esm2020/chrome.component.mjs +249 -0
- package/chrome/esm2020/ngx-color-chrome.mjs +5 -0
- package/chrome/esm2020/public_api.mjs +3 -0
- package/chrome/fesm2015/ngx-color-chrome.mjs +606 -0
- package/chrome/fesm2015/ngx-color-chrome.mjs.map +1 -0
- package/chrome/fesm2020/ngx-color-chrome.mjs +606 -0
- package/chrome/fesm2020/ngx-color-chrome.mjs.map +1 -0
- package/chrome/ngx-color-chrome.d.ts +2 -2
- package/chrome/package.json +19 -7
- package/chrome/public_api.d.ts +2 -0
- package/circle/circle-swatch.component.d.ts +3 -0
- package/circle/circle.component.d.ts +9 -0
- package/circle/esm2020/circle-swatch.component.mjs +85 -0
- package/circle/esm2020/circle.component.mjs +148 -0
- package/circle/esm2020/ngx-color-circle.mjs +5 -0
- package/circle/esm2020/public_api.mjs +3 -0
- package/circle/fesm2015/ngx-color-circle.mjs +237 -0
- package/circle/fesm2015/ngx-color-circle.mjs.map +1 -0
- package/circle/fesm2020/ngx-color-circle.mjs +237 -0
- package/circle/fesm2020/ngx-color-circle.mjs.map +1 -0
- package/circle/ngx-color-circle.d.ts +2 -2
- package/circle/package.json +19 -7
- package/circle/public_api.d.ts +2 -0
- package/color-wrap.component.d.ts +7 -0
- package/compact/compact-color.component.d.ts +3 -0
- package/compact/compact-fields.component.d.ts +3 -0
- package/compact/compact.component.d.ts +10 -0
- package/compact/esm2020/compact-color.component.mjs +91 -0
- package/compact/esm2020/compact-fields.component.mjs +186 -0
- package/compact/esm2020/compact.component.mjs +177 -0
- package/compact/esm2020/ngx-color-compact.mjs +5 -0
- package/compact/esm2020/public_api.mjs +4 -0
- package/compact/fesm2015/ngx-color-compact.mjs +451 -0
- package/compact/fesm2015/ngx-color-compact.mjs.map +1 -0
- package/compact/fesm2020/ngx-color-compact.mjs +451 -0
- package/compact/fesm2020/ngx-color-compact.mjs.map +1 -0
- package/compact/ngx-color-compact.d.ts +2 -3
- package/compact/package.json +19 -7
- package/compact/public_api.d.ts +3 -0
- package/coordinates.directive.d.ts +6 -0
- package/editable-input.component.d.ts +7 -0
- package/esm2020/alpha.component.mjs +186 -0
- package/esm2020/checkboard.component.mjs +66 -0
- package/esm2020/color-wrap.component.mjs +163 -0
- package/esm2020/coordinates.directive.mjs +104 -0
- package/esm2020/editable-input.component.mjs +217 -0
- package/{esm2015/helpers/checkboard.js → esm2020/helpers/checkboard.mjs} +0 -0
- package/{esm2015/helpers/color.interfaces.js → esm2020/helpers/color.interfaces.mjs} +0 -0
- package/{esm2015/helpers/color.js → esm2020/helpers/color.mjs} +0 -0
- package/esm2020/hue.component.mjs +165 -0
- package/{esm2015/ngx-color.js → esm2020/ngx-color.mjs} +0 -0
- package/{esm2015/public_api.js → esm2020/public_api.mjs} +0 -0
- package/esm2020/raised.component.mjs +89 -0
- package/esm2020/saturation.component.mjs +136 -0
- package/esm2020/shade.component.mjs +165 -0
- package/esm2020/swatch.component.mjs +125 -0
- package/fesm2015/ngx-color.mjs +1461 -0
- package/fesm2015/ngx-color.mjs.map +1 -0
- package/fesm2020/ngx-color.mjs +1466 -0
- package/fesm2020/ngx-color.mjs.map +1 -0
- package/github/esm2020/github-swatch.component.mjs +67 -0
- package/github/esm2020/github.component.mjs +179 -0
- package/github/esm2020/ngx-color-github.mjs +5 -0
- package/github/esm2020/public_api.mjs +3 -0
- package/github/fesm2015/ngx-color-github.mjs +250 -0
- package/github/fesm2015/ngx-color-github.mjs.map +1 -0
- package/github/fesm2020/ngx-color-github.mjs +250 -0
- package/github/fesm2020/ngx-color-github.mjs.map +1 -0
- package/github/github-swatch.component.d.ts +3 -0
- package/github/github.component.d.ts +9 -0
- package/github/ngx-color-github.d.ts +2 -2
- package/github/package.json +19 -7
- package/github/public_api.d.ts +2 -0
- package/helpers/checkboard.d.ts +2 -2
- package/hue/esm2020/hue-picker.component.mjs +113 -0
- package/hue/{esm2015/ngx-color-hue.js → esm2020/ngx-color-hue.mjs} +2 -2
- package/hue/esm2020/public_api.mjs +2 -0
- package/hue/fesm2015/ngx-color-hue.mjs +120 -0
- package/hue/fesm2015/ngx-color-hue.mjs.map +1 -0
- package/hue/fesm2020/ngx-color-hue.mjs +120 -0
- package/hue/fesm2020/ngx-color-hue.mjs.map +1 -0
- package/hue/hue-picker.component.d.ts +8 -0
- package/hue/ngx-color-hue.d.ts +2 -1
- package/hue/package.json +19 -7
- package/hue/public_api.d.ts +1 -0
- package/hue.component.d.ts +8 -0
- package/material/esm2020/material.component.mjs +211 -0
- package/material/{esm2015/ngx-color-material.js → esm2020/ngx-color-material.mjs} +2 -2
- package/material/esm2020/public_api.mjs +2 -0
- package/material/fesm2015/ngx-color-material.mjs +218 -0
- package/material/fesm2015/ngx-color-material.mjs.map +1 -0
- package/material/fesm2020/ngx-color-material.mjs +218 -0
- package/material/fesm2020/ngx-color-material.mjs.map +1 -0
- package/material/material.component.d.ts +8 -0
- package/material/ngx-color-material.d.ts +2 -1
- package/material/package.json +19 -7
- package/material/public_api.d.ts +1 -0
- package/ngx-color.d.ts +1 -0
- package/package.json +20 -8
- package/photoshop/esm2020/ngx-color-photoshop.mjs +5 -0
- package/photoshop/esm2020/photoshop-button.component.mjs +63 -0
- package/photoshop/esm2020/photoshop-fields.component.mjs +241 -0
- package/photoshop/esm2020/photoshop-previews.component.mjs +68 -0
- package/photoshop/esm2020/photoshop.component.mjs +258 -0
- package/photoshop/esm2020/public_api.mjs +5 -0
- package/photoshop/fesm2015/ngx-color-photoshop.mjs +626 -0
- package/photoshop/fesm2015/ngx-color-photoshop.mjs.map +1 -0
- package/photoshop/fesm2020/ngx-color-photoshop.mjs +626 -0
- package/photoshop/fesm2020/ngx-color-photoshop.mjs.map +1 -0
- package/photoshop/ngx-color-photoshop.d.ts +2 -4
- package/photoshop/package.json +19 -7
- package/photoshop/photoshop-button.component.d.ts +3 -0
- package/photoshop/photoshop-fields.component.d.ts +3 -0
- package/photoshop/photoshop-previews.component.d.ts +3 -0
- package/photoshop/photoshop.component.d.ts +11 -0
- package/photoshop/public_api.d.ts +4 -0
- package/raised.component.d.ts +7 -0
- package/saturation.component.d.ts +8 -0
- package/shade/{esm2015/ngx-color-shade.js → esm2020/ngx-color-shade.mjs} +2 -2
- package/shade/esm2020/public_api.mjs +2 -0
- package/shade/esm2020/shade-picker.component.mjs +105 -0
- package/shade/fesm2015/ngx-color-shade.mjs +112 -0
- package/shade/fesm2015/ngx-color-shade.mjs.map +1 -0
- package/shade/fesm2020/ngx-color-shade.mjs +112 -0
- package/shade/fesm2020/ngx-color-shade.mjs.map +1 -0
- package/shade/ngx-color-shade.d.ts +2 -1
- package/shade/package.json +19 -7
- package/shade/public_api.d.ts +1 -0
- package/shade/shade-picker.component.d.ts +8 -0
- package/shade.component.d.ts +8 -0
- package/sketch/esm2020/ngx-color-sketch.mjs +5 -0
- package/sketch/esm2020/public_api.mjs +4 -0
- package/sketch/esm2020/sketch-fields.component.mjs +243 -0
- package/sketch/esm2020/sketch-preset-colors.component.mjs +98 -0
- package/sketch/esm2020/sketch.component.mjs +283 -0
- package/sketch/fesm2015/ngx-color-sketch.mjs +620 -0
- package/sketch/fesm2015/ngx-color-sketch.mjs.map +1 -0
- package/sketch/fesm2020/ngx-color-sketch.mjs +620 -0
- package/sketch/fesm2020/ngx-color-sketch.mjs.map +1 -0
- package/sketch/ngx-color-sketch.d.ts +2 -3
- package/sketch/package.json +19 -7
- package/sketch/public_api.d.ts +3 -0
- package/sketch/sketch-fields.component.d.ts +3 -0
- package/sketch/sketch-preset-colors.component.d.ts +3 -0
- package/sketch/sketch.component.d.ts +10 -0
- package/slider/esm2020/ngx-color-slider.mjs +5 -0
- package/slider/esm2020/public_api.mjs +4 -0
- package/slider/esm2020/slider-swatch.component.mjs +80 -0
- package/slider/esm2020/slider-swatches.component.mjs +135 -0
- package/slider/esm2020/slider.component.mjs +116 -0
- package/slider/fesm2015/ngx-color-slider.mjs +331 -0
- package/slider/fesm2015/ngx-color-slider.mjs.map +1 -0
- package/slider/fesm2020/ngx-color-slider.mjs +331 -0
- package/slider/fesm2020/ngx-color-slider.mjs.map +1 -0
- package/slider/ngx-color-slider.d.ts +2 -3
- package/slider/package.json +19 -7
- package/slider/public_api.d.ts +3 -0
- package/slider/slider-swatch.component.d.ts +3 -0
- package/slider/slider-swatches.component.d.ts +3 -0
- package/slider/slider.component.d.ts +10 -0
- package/swatch.component.d.ts +8 -0
- package/swatches/esm2020/ngx-color-swatches.mjs +5 -0
- package/swatches/esm2020/public_api.mjs +4 -0
- package/swatches/esm2020/swatches-color.component.mjs +123 -0
- package/swatches/esm2020/swatches-group.component.mjs +64 -0
- package/swatches/esm2020/swatches.component.mjs +258 -0
- package/swatches/fesm2015/ngx-color-swatches.mjs +441 -0
- package/swatches/fesm2015/ngx-color-swatches.mjs.map +1 -0
- package/swatches/fesm2020/ngx-color-swatches.mjs +441 -0
- package/swatches/fesm2020/ngx-color-swatches.mjs.map +1 -0
- package/swatches/ngx-color-swatches.d.ts +2 -3
- package/swatches/package.json +19 -7
- package/swatches/public_api.d.ts +3 -0
- package/swatches/swatches-color.component.d.ts +3 -0
- package/swatches/swatches-group.component.d.ts +3 -0
- package/swatches/swatches.component.d.ts +10 -0
- package/twitter/{esm2015/ngx-color-twitter.js → esm2020/ngx-color-twitter.mjs} +2 -2
- package/twitter/esm2020/public_api.mjs +2 -0
- package/twitter/esm2020/twitter.component.mjs +255 -0
- package/twitter/fesm2015/ngx-color-twitter.mjs +262 -0
- package/twitter/fesm2015/ngx-color-twitter.mjs.map +1 -0
- package/twitter/fesm2020/ngx-color-twitter.mjs +262 -0
- package/twitter/fesm2020/ngx-color-twitter.mjs.map +1 -0
- package/twitter/ngx-color-twitter.d.ts +2 -1
- package/twitter/package.json +19 -7
- package/twitter/public_api.d.ts +1 -0
- package/twitter/twitter.component.d.ts +8 -0
- package/alpha/bundles/ngx-color-alpha.umd.js +0 -404
- package/alpha/bundles/ngx-color-alpha.umd.js.map +0 -1
- package/alpha/esm2015/alpha-picker.component.js +0 -84
- package/alpha/fesm2015/ngx-color-alpha.js +0 -91
- package/alpha/fesm2015/ngx-color-alpha.js.map +0 -1
- package/alpha/ngx-color-alpha.metadata.json +0 -1
- package/block/bundles/ngx-color-block.umd.js +0 -472
- package/block/bundles/ngx-color-block.umd.js.map +0 -1
- package/block/esm2015/block-swatches.component.js +0 -58
- package/block/esm2015/block.component.js +0 -151
- package/block/esm2015/ngx-color-block.js +0 -6
- package/block/fesm2015/ngx-color-block.js +0 -214
- package/block/fesm2015/ngx-color-block.js.map +0 -1
- package/block/ngx-color-block.metadata.json +0 -1
- package/bundles/ngx-color.umd.js +0 -1014
- package/bundles/ngx-color.umd.js.map +0 -1
- package/chrome/bundles/ngx-color-chrome.umd.js +0 -543
- package/chrome/bundles/ngx-color-chrome.umd.js.map +0 -1
- package/chrome/esm2015/chrome-fields.component.js +0 -255
- package/chrome/esm2015/chrome.component.js +0 -173
- package/chrome/esm2015/ngx-color-chrome.js +0 -6
- package/chrome/fesm2015/ngx-color-chrome.js +0 -432
- package/chrome/fesm2015/ngx-color-chrome.js.map +0 -1
- package/chrome/ngx-color-chrome.metadata.json +0 -1
- package/circle/bundles/ngx-color-circle.umd.js +0 -469
- package/circle/bundles/ngx-color-circle.umd.js.map +0 -1
- package/circle/esm2015/circle-swatch.component.js +0 -63
- package/circle/esm2015/circle.component.js +0 -109
- package/circle/esm2015/ngx-color-circle.js +0 -6
- package/circle/fesm2015/ngx-color-circle.js +0 -177
- package/circle/fesm2015/ngx-color-circle.js.map +0 -1
- package/circle/ngx-color-circle.metadata.json +0 -1
- package/compact/bundles/ngx-color-compact.umd.js +0 -579
- package/compact/bundles/ngx-color-compact.umd.js.map +0 -1
- package/compact/esm2015/compact-color.component.js +0 -70
- package/compact/esm2015/compact-fields.component.js +0 -142
- package/compact/esm2015/compact.component.js +0 -135
- package/compact/esm2015/ngx-color-compact.js +0 -7
- package/compact/fesm2015/ngx-color-compact.js +0 -348
- package/compact/fesm2015/ngx-color-compact.js.map +0 -1
- package/compact/ngx-color-compact.metadata.json +0 -1
- package/esm2015/alpha.component.js +0 -156
- package/esm2015/checkboard.component.js +0 -52
- package/esm2015/color-wrap.component.js +0 -145
- package/esm2015/coordinates.directive.js +0 -85
- package/esm2015/editable-input.component.js +0 -183
- package/esm2015/hue.component.js +0 -140
- package/esm2015/raised.component.js +0 -73
- package/esm2015/saturation.component.js +0 -111
- package/esm2015/shade.component.js +0 -127
- package/esm2015/swatch.component.js +0 -85
- package/fesm2015/ngx-color.js +0 -1228
- package/fesm2015/ngx-color.js.map +0 -1
- package/github/bundles/ngx-color-github.umd.js +0 -447
- package/github/bundles/ngx-color-github.umd.js.map +0 -1
- package/github/esm2015/github-swatch.component.js +0 -48
- package/github/esm2015/github.component.js +0 -146
- package/github/esm2015/ngx-color-github.js +0 -6
- package/github/fesm2015/ngx-color-github.js +0 -199
- package/github/fesm2015/ngx-color-github.js.map +0 -1
- package/github/ngx-color-github.metadata.json +0 -1
- package/hue/bundles/ngx-color-hue.umd.js +0 -407
- package/hue/bundles/ngx-color-hue.umd.js.map +0 -1
- package/hue/esm2015/hue-picker.component.js +0 -82
- package/hue/fesm2015/ngx-color-hue.js +0 -89
- package/hue/fesm2015/ngx-color-hue.js.map +0 -1
- package/hue/ngx-color-hue.metadata.json +0 -1
- package/material/bundles/ngx-color-material.umd.js +0 -455
- package/material/bundles/ngx-color-material.umd.js.map +0 -1
- package/material/esm2015/material.component.js +0 -161
- package/material/fesm2015/ngx-color-material.js +0 -168
- package/material/fesm2015/ngx-color-material.js.map +0 -1
- package/material/ngx-color-material.metadata.json +0 -1
- package/ngx-color.metadata.json +0 -1
- package/photoshop/bundles/ngx-color-photoshop.umd.js +0 -571
- package/photoshop/bundles/ngx-color-photoshop.umd.js.map +0 -1
- package/photoshop/esm2015/ngx-color-photoshop.js +0 -8
- package/photoshop/esm2015/photoshop-button.component.js +0 -50
- package/photoshop/esm2015/photoshop-fields.component.js +0 -180
- package/photoshop/esm2015/photoshop-previews.component.js +0 -53
- package/photoshop/esm2015/photoshop.component.js +0 -181
- package/photoshop/fesm2015/ngx-color-photoshop.js +0 -464
- package/photoshop/fesm2015/ngx-color-photoshop.js.map +0 -1
- package/photoshop/ngx-color-photoshop.metadata.json +0 -1
- package/shade/bundles/ngx-color-shade.umd.js +0 -399
- package/shade/bundles/ngx-color-shade.umd.js.map +0 -1
- package/shade/esm2015/shade-picker.component.js +0 -75
- package/shade/fesm2015/ngx-color-shade.js +0 -82
- package/shade/fesm2015/ngx-color-shade.js.map +0 -1
- package/shade/ngx-color-shade.metadata.json +0 -1
- package/sketch/bundles/ngx-color-sketch.umd.js +0 -585
- package/sketch/bundles/ngx-color-sketch.umd.js.map +0 -1
- package/sketch/esm2015/ngx-color-sketch.js +0 -7
- package/sketch/esm2015/sketch-fields.component.js +0 -181
- package/sketch/esm2015/sketch-preset-colors.component.js +0 -76
- package/sketch/esm2015/sketch.component.js +0 -203
- package/sketch/fesm2015/ngx-color-sketch.js +0 -462
- package/sketch/fesm2015/ngx-color-sketch.js.map +0 -1
- package/sketch/ngx-color-sketch.metadata.json +0 -1
- package/slider/bundles/ngx-color-slider.umd.js +0 -470
- package/slider/bundles/ngx-color-slider.umd.js.map +0 -1
- package/slider/esm2015/ngx-color-slider.js +0 -7
- package/slider/esm2015/slider-swatch.component.js +0 -65
- package/slider/esm2015/slider-swatches.component.js +0 -84
- package/slider/esm2015/slider.component.js +0 -81
- package/slider/fesm2015/ngx-color-slider.js +0 -233
- package/slider/fesm2015/ngx-color-slider.js.map +0 -1
- package/slider/ngx-color-slider.metadata.json +0 -1
- package/swatches/bundles/ngx-color-swatches.umd.js +0 -612
- package/swatches/bundles/ngx-color-swatches.umd.js.map +0 -1
- package/swatches/esm2015/ngx-color-swatches.js +0 -7
- package/swatches/esm2015/swatches-color.component.js +0 -90
- package/swatches/esm2015/swatches-group.component.js +0 -42
- package/swatches/esm2015/swatches.component.js +0 -217
- package/swatches/fesm2015/ngx-color-swatches.js +0 -351
- package/swatches/fesm2015/ngx-color-swatches.js.map +0 -1
- package/swatches/ngx-color-swatches.metadata.json +0 -1
- package/twitter/bundles/ngx-color-twitter.umd.js +0 -433
- package/twitter/bundles/ngx-color-twitter.umd.js.map +0 -1
- package/twitter/esm2015/twitter.component.js +0 -207
- package/twitter/fesm2015/ngx-color-twitter.js +0 -214
- package/twitter/fesm2015/ngx-color-twitter.js.map +0 -1
- package/twitter/ngx-color-twitter.metadata.json +0 -1
@@ -1,151 +0,0 @@
|
|
1
|
-
import { CommonModule } from '@angular/common';
|
2
|
-
import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
|
3
|
-
import { CheckboardModule, ColorWrap, EditableInputModule, getContrastingColor, isValidHex, SwatchModule, } from 'ngx-color';
|
4
|
-
import { BlockSwatchesComponent } from './block-swatches.component';
|
5
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
6
|
-
export class BlockComponent extends ColorWrap {
|
7
|
-
constructor() {
|
8
|
-
super();
|
9
|
-
/** Pixel value for picker width */
|
10
|
-
this.width = 170;
|
11
|
-
/** Color squares to display */
|
12
|
-
this.colors = [
|
13
|
-
'#D9E3F0',
|
14
|
-
'#F47373',
|
15
|
-
'#697689',
|
16
|
-
'#37D67A',
|
17
|
-
'#2CCCE4',
|
18
|
-
'#555555',
|
19
|
-
'#dce775',
|
20
|
-
'#ff8a65',
|
21
|
-
'#ba68c8',
|
22
|
-
];
|
23
|
-
this.triangle = 'top';
|
24
|
-
this.input = {
|
25
|
-
width: '100%',
|
26
|
-
fontSize: '12px',
|
27
|
-
color: '#666',
|
28
|
-
border: '0px',
|
29
|
-
outline: 'none',
|
30
|
-
height: '22px',
|
31
|
-
boxShadow: 'inset 0 0 0 1px #ddd',
|
32
|
-
borderRadius: '4px',
|
33
|
-
padding: '0 7px',
|
34
|
-
boxSizing: 'border-box',
|
35
|
-
};
|
36
|
-
this.wrap = {
|
37
|
-
position: 'relative',
|
38
|
-
width: '100%',
|
39
|
-
};
|
40
|
-
this.disableAlpha = true;
|
41
|
-
}
|
42
|
-
handleValueChange({ data, $event }) {
|
43
|
-
this.handleBlockChange({ hex: data, $event });
|
44
|
-
}
|
45
|
-
getContrastingColor(hex) {
|
46
|
-
return getContrastingColor(hex);
|
47
|
-
}
|
48
|
-
handleBlockChange({ hex, $event }) {
|
49
|
-
if (isValidHex(hex)) {
|
50
|
-
// this.hex = hex;
|
51
|
-
this.handleChange({
|
52
|
-
hex,
|
53
|
-
source: 'hex',
|
54
|
-
}, $event);
|
55
|
-
}
|
56
|
-
}
|
57
|
-
}
|
58
|
-
BlockComponent.decorators = [
|
59
|
-
{ type: Component, args: [{
|
60
|
-
selector: 'color-block',
|
61
|
-
template: `
|
62
|
-
<div class="block-card block-picker {{ className }}">
|
63
|
-
<div class="block-triangle" *ngIf="triangle !== 'hide'"
|
64
|
-
[style.border-color]="'transparent transparent ' + this.hex + ' transparent'"
|
65
|
-
></div>
|
66
|
-
|
67
|
-
<div class="block-head" [style.background]="hex">
|
68
|
-
<color-checkboard *ngIf="hex === 'transparent'"
|
69
|
-
borderRadius="6px 6px 0 0"
|
70
|
-
></color-checkboard>
|
71
|
-
<div class="block-label" [style.color]="getContrastingColor(hex)">
|
72
|
-
{{ hex }}
|
73
|
-
</div>
|
74
|
-
</div>
|
75
|
-
|
76
|
-
<div class="block-body">
|
77
|
-
<color-block-swatches [colors]="colors"
|
78
|
-
(onClick)="handleBlockChange($event)"
|
79
|
-
(onSwatchHover)="onSwatchHover.emit($event)"
|
80
|
-
></color-block-swatches>
|
81
|
-
<color-editable-input [value]="hex"
|
82
|
-
(onChange)="handleValueChange($event)"
|
83
|
-
[style]="{input: input, wrap: wrap}"
|
84
|
-
></color-editable-input>
|
85
|
-
</div>
|
86
|
-
</div>
|
87
|
-
`,
|
88
|
-
preserveWhitespaces: false,
|
89
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
90
|
-
providers: [
|
91
|
-
{
|
92
|
-
provide: NG_VALUE_ACCESSOR,
|
93
|
-
useExisting: forwardRef(() => BlockComponent),
|
94
|
-
multi: true,
|
95
|
-
},
|
96
|
-
{
|
97
|
-
provide: ColorWrap,
|
98
|
-
useExisting: forwardRef(() => BlockComponent),
|
99
|
-
},
|
100
|
-
],
|
101
|
-
styles: [`
|
102
|
-
.block-card {
|
103
|
-
background: #fff;
|
104
|
-
border-radius: 6px;
|
105
|
-
box-shadow: 0 1px rgba(0, 0, 0, .1);
|
106
|
-
position: relative;
|
107
|
-
}
|
108
|
-
.block-head {
|
109
|
-
align-items: center;
|
110
|
-
border-radius: 6px 6px 0 0;
|
111
|
-
display: flex;
|
112
|
-
height: 110px;
|
113
|
-
justify-content: center;
|
114
|
-
position: relative;
|
115
|
-
}
|
116
|
-
.block-body {
|
117
|
-
padding: 10px;
|
118
|
-
}
|
119
|
-
.block-label {
|
120
|
-
font-size: 18px;
|
121
|
-
position: relative;
|
122
|
-
}
|
123
|
-
.block-triangle {
|
124
|
-
border-style: solid;
|
125
|
-
border-width: 0 10px 10px 10px;
|
126
|
-
height: 0;
|
127
|
-
left: 50%;
|
128
|
-
margin-left: -10px;
|
129
|
-
position: absolute;
|
130
|
-
top: -10px;
|
131
|
-
width: 0;
|
132
|
-
}
|
133
|
-
`]
|
134
|
-
},] }
|
135
|
-
];
|
136
|
-
BlockComponent.ctorParameters = () => [];
|
137
|
-
BlockComponent.propDecorators = {
|
138
|
-
width: [{ type: Input }],
|
139
|
-
colors: [{ type: Input }],
|
140
|
-
triangle: [{ type: Input }]
|
141
|
-
};
|
142
|
-
export class ColorBlockModule {
|
143
|
-
}
|
144
|
-
ColorBlockModule.decorators = [
|
145
|
-
{ type: NgModule, args: [{
|
146
|
-
declarations: [BlockComponent, BlockSwatchesComponent],
|
147
|
-
exports: [BlockComponent, BlockSwatchesComponent],
|
148
|
-
imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule],
|
149
|
-
},] }
|
150
|
-
];
|
151
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmxvY2suY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL2Jsb2NrL2Jsb2NrLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVoRyxPQUFPLEVBQ0wsZ0JBQWdCLEVBQ2hCLFNBQVMsRUFDVCxtQkFBbUIsRUFDbkIsbUJBQW1CLEVBQ25CLFVBQVUsRUFDVixZQUFZLEdBQ2IsTUFBTSxXQUFXLENBQUM7QUFDbkIsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDcEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFnRm5ELE1BQU0sT0FBTyxjQUFlLFNBQVEsU0FBUztJQWtDM0M7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQWxDVixtQ0FBbUM7UUFDMUIsVUFBSyxHQUFvQixHQUFHLENBQUM7UUFDdEMsK0JBQStCO1FBQ3RCLFdBQU0sR0FBRztZQUNoQixTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7U0FDVixDQUFDO1FBQ08sYUFBUSxHQUFtQixLQUFLLENBQUM7UUFDMUMsVUFBSyxHQUE0QjtZQUMvQixLQUFLLEVBQUUsTUFBTTtZQUNiLFFBQVEsRUFBRSxNQUFNO1lBQ2hCLEtBQUssRUFBRSxNQUFNO1lBQ2IsTUFBTSxFQUFFLEtBQUs7WUFDYixPQUFPLEVBQUUsTUFBTTtZQUNmLE1BQU0sRUFBRSxNQUFNO1lBQ2QsU0FBUyxFQUFFLHNCQUFzQjtZQUNqQyxZQUFZLEVBQUUsS0FBSztZQUNuQixPQUFPLEVBQUUsT0FBTztZQUNoQixTQUFTLEVBQUUsWUFBWTtTQUN4QixDQUFDO1FBQ0YsU0FBSSxHQUE0QjtZQUM5QixRQUFRLEVBQUUsVUFBVTtZQUNwQixLQUFLLEVBQUUsTUFBTTtTQUNkLENBQUM7UUFDRixpQkFBWSxHQUFHLElBQUksQ0FBQztJQUlwQixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFO1FBQ2hDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxFQUFFLEdBQUcsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQztJQUNoRCxDQUFDO0lBQ0QsbUJBQW1CLENBQUMsR0FBRztRQUNyQixPQUFPLG1CQUFtQixDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFDRCxpQkFBaUIsQ0FBQyxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUU7UUFDL0IsSUFBSSxVQUFVLENBQUMsR0FBRyxDQUFDLEVBQUU7WUFDbkIsa0JBQWtCO1lBQ2xCLElBQUksQ0FBQyxZQUFZLENBQ2Y7Z0JBQ0UsR0FBRztnQkFDSCxNQUFNLEVBQUUsS0FBSzthQUNkLEVBQ0QsTUFBTSxDQUNQLENBQUM7U0FDSDtJQUNILENBQUM7OztZQXJJRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGFBQWE7Z0JBQ3ZCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0EwQlQ7Z0JBb0NELG1CQUFtQixFQUFFLEtBQUs7Z0JBQzFCLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2dCQUMvQyxTQUFTLEVBQUU7b0JBQ1Q7d0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjt3QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxjQUFjLENBQUM7d0JBQzdDLEtBQUssRUFBRSxJQUFJO3FCQUNaO29CQUNEO3dCQUNFLE9BQU8sRUFBRSxTQUFTO3dCQUNsQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGNBQWMsQ0FBQztxQkFDOUM7aUJBQ0Y7eUJBOUNDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWdDRDthQWVGOzs7O29CQUdFLEtBQUs7cUJBRUwsS0FBSzt1QkFXTCxLQUFLOztBQWdEUixNQUFNLE9BQU8sZ0JBQWdCOzs7WUFMNUIsUUFBUSxTQUFDO2dCQUNSLFlBQVksRUFBRSxDQUFDLGNBQWMsRUFBRSxzQkFBc0IsQ0FBQztnQkFDdEQsT0FBTyxFQUFFLENBQUMsY0FBYyxFQUFFLHNCQUFzQixDQUFDO2dCQUNqRCxPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsZ0JBQWdCLEVBQUUsWUFBWSxFQUFFLG1CQUFtQixDQUFDO2FBQzdFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGZvcndhcmRSZWYsIElucHV0LCBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQge1xuICBDaGVja2JvYXJkTW9kdWxlLFxuICBDb2xvcldyYXAsXG4gIEVkaXRhYmxlSW5wdXRNb2R1bGUsXG4gIGdldENvbnRyYXN0aW5nQ29sb3IsXG4gIGlzVmFsaWRIZXgsXG4gIFN3YXRjaE1vZHVsZSxcbn0gZnJvbSAnbmd4LWNvbG9yJztcbmltcG9ydCB7IEJsb2NrU3dhdGNoZXNDb21wb25lbnQgfSBmcm9tICcuL2Jsb2NrLXN3YXRjaGVzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3ItYmxvY2snLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwiYmxvY2stY2FyZCBibG9jay1waWNrZXIge3sgY2xhc3NOYW1lIH19XCI+XG4gICAgPGRpdiBjbGFzcz1cImJsb2NrLXRyaWFuZ2xlXCIgKm5nSWY9XCJ0cmlhbmdsZSAhPT0gJ2hpZGUnXCJcbiAgICAgIFtzdHlsZS5ib3JkZXItY29sb3JdPVwiJ3RyYW5zcGFyZW50IHRyYW5zcGFyZW50ICcgKyB0aGlzLmhleCArICcgdHJhbnNwYXJlbnQnXCJcbiAgICA+PC9kaXY+XG5cbiAgICA8ZGl2IGNsYXNzPVwiYmxvY2staGVhZFwiIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImhleFwiPlxuICAgICAgPGNvbG9yLWNoZWNrYm9hcmQgKm5nSWY9XCJoZXggPT09ICd0cmFuc3BhcmVudCdcIlxuICAgICAgICBib3JkZXJSYWRpdXM9XCI2cHggNnB4IDAgMFwiXG4gICAgICA+PC9jb2xvci1jaGVja2JvYXJkPlxuICAgICAgPGRpdiBjbGFzcz1cImJsb2NrLWxhYmVsXCIgW3N0eWxlLmNvbG9yXT1cImdldENvbnRyYXN0aW5nQ29sb3IoaGV4KVwiPlxuICAgICAgICB7eyBoZXggfX1cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdiBjbGFzcz1cImJsb2NrLWJvZHlcIj5cbiAgICAgIDxjb2xvci1ibG9jay1zd2F0Y2hlcyBbY29sb3JzXT1cImNvbG9yc1wiXG4gICAgICAgIChvbkNsaWNrKT1cImhhbmRsZUJsb2NrQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAob25Td2F0Y2hIb3Zlcik9XCJvblN3YXRjaEhvdmVyLmVtaXQoJGV2ZW50KVwiXG4gICAgICA+PC9jb2xvci1ibG9jay1zd2F0Y2hlcz5cbiAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dCBbdmFsdWVdPVwiaGV4XCJcbiAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICBbc3R5bGVdPVwie2lucHV0OiBpbnB1dCwgd3JhcDogd3JhcH1cIlxuICAgICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgLmJsb2NrLWNhcmQge1xuICAgICAgYmFja2dyb3VuZDogI2ZmZjtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDZweDtcbiAgICAgIGJveC1zaGFkb3c6IDAgMXB4IHJnYmEoMCwgMCwgMCwgLjEpO1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIH1cbiAgICAuYmxvY2staGVhZCB7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgYm9yZGVyLXJhZGl1czogNnB4IDZweCAwIDA7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgaGVpZ2h0OiAxMTBweDtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIH1cbiAgICAuYmxvY2stYm9keSB7XG4gICAgICBwYWRkaW5nOiAxMHB4O1xuICAgIH1cbiAgICAuYmxvY2stbGFiZWwge1xuICAgICAgZm9udC1zaXplOiAxOHB4O1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIH1cbiAgICAuYmxvY2stdHJpYW5nbGUge1xuICAgICAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcbiAgICAgIGJvcmRlci13aWR0aDogMCAxMHB4IDEwcHggMTBweDtcbiAgICAgIGhlaWdodDogMDtcbiAgICAgIGxlZnQ6IDUwJTtcbiAgICAgIG1hcmdpbi1sZWZ0OiAtMTBweDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRvcDogLTEwcHg7XG4gICAgICB3aWR0aDogMDtcbiAgICB9XG4gIGAsXG4gIF0sXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBCbG9ja0NvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IENvbG9yV3JhcCxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEJsb2NrQ29tcG9uZW50KSxcbiAgICB9LFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIEJsb2NrQ29tcG9uZW50IGV4dGVuZHMgQ29sb3JXcmFwIHtcbiAgLyoqIFBpeGVsIHZhbHVlIGZvciBwaWNrZXIgd2lkdGggKi9cbiAgQElucHV0KCkgd2lkdGg6IHN0cmluZyB8IG51bWJlciA9IDE3MDtcbiAgLyoqIENvbG9yIHNxdWFyZXMgdG8gZGlzcGxheSAqL1xuICBASW5wdXQoKSBjb2xvcnMgPSBbXG4gICAgJyNEOUUzRjAnLFxuICAgICcjRjQ3MzczJyxcbiAgICAnIzY5NzY4OScsXG4gICAgJyMzN0Q2N0EnLFxuICAgICcjMkNDQ0U0JyxcbiAgICAnIzU1NTU1NScsXG4gICAgJyNkY2U3NzUnLFxuICAgICcjZmY4YTY1JyxcbiAgICAnI2JhNjhjOCcsXG4gIF07XG4gIEBJbnB1dCgpIHRyaWFuZ2xlOiAndG9wJyB8ICdoaWRlJyA9ICd0b3AnO1xuICBpbnB1dDoge1trZXk6IHN0cmluZ106IHN0cmluZ30gPSB7XG4gICAgd2lkdGg6ICcxMDAlJyxcbiAgICBmb250U2l6ZTogJzEycHgnLFxuICAgIGNvbG9yOiAnIzY2NicsXG4gICAgYm9yZGVyOiAnMHB4JyxcbiAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgaGVpZ2h0OiAnMjJweCcsXG4gICAgYm94U2hhZG93OiAnaW5zZXQgMCAwIDAgMXB4ICNkZGQnLFxuICAgIGJvcmRlclJhZGl1czogJzRweCcsXG4gICAgcGFkZGluZzogJzAgN3B4JyxcbiAgICBib3hTaXppbmc6ICdib3JkZXItYm94JyxcbiAgfTtcbiAgd3JhcDoge1trZXk6IHN0cmluZ106IHN0cmluZ30gPSB7XG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgd2lkdGg6ICcxMDAlJyxcbiAgfTtcbiAgZGlzYWJsZUFscGhhID0gdHJ1ZTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgaGFuZGxlVmFsdWVDaGFuZ2UoeyBkYXRhLCAkZXZlbnQgfSkge1xuICAgIHRoaXMuaGFuZGxlQmxvY2tDaGFuZ2UoeyBoZXg6IGRhdGEsICRldmVudCB9KTtcbiAgfVxuICBnZXRDb250cmFzdGluZ0NvbG9yKGhleCkge1xuICAgIHJldHVybiBnZXRDb250cmFzdGluZ0NvbG9yKGhleCk7XG4gIH1cbiAgaGFuZGxlQmxvY2tDaGFuZ2UoeyBoZXgsICRldmVudCB9KSB7XG4gICAgaWYgKGlzVmFsaWRIZXgoaGV4KSkge1xuICAgICAgLy8gdGhpcy5oZXggPSBoZXg7XG4gICAgICB0aGlzLmhhbmRsZUNoYW5nZShcbiAgICAgICAge1xuICAgICAgICAgIGhleCxcbiAgICAgICAgICBzb3VyY2U6ICdoZXgnLFxuICAgICAgICB9LFxuICAgICAgICAkZXZlbnQsXG4gICAgICApO1xuICAgIH1cbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtCbG9ja0NvbXBvbmVudCwgQmxvY2tTd2F0Y2hlc0NvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtCbG9ja0NvbXBvbmVudCwgQmxvY2tTd2F0Y2hlc0NvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIENoZWNrYm9hcmRNb2R1bGUsIFN3YXRjaE1vZHVsZSwgRWRpdGFibGVJbnB1dE1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIENvbG9yQmxvY2tNb2R1bGUge31cbiJdfQ==
|
@@ -1,6 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Generated bundle index. Do not edit.
|
3
|
-
*/
|
4
|
-
export * from './block.component';
|
5
|
-
export { BlockSwatchesComponent as ɵa } from './block-swatches.component';
|
6
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLWJsb2NrLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL2Jsb2NrL25neC1jb2xvci1ibG9jay50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsbUJBQW1CLENBQUM7QUFFbEMsT0FBTyxFQUFDLHNCQUFzQixJQUFJLEVBQUUsRUFBQyxNQUFNLDRCQUE0QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2Jsb2NrLmNvbXBvbmVudCc7XG5cbmV4cG9ydCB7QmxvY2tTd2F0Y2hlc0NvbXBvbmVudCBhcyDJtWF9IGZyb20gJy4vYmxvY2stc3dhdGNoZXMuY29tcG9uZW50JzsiXX0=
|
@@ -1,214 +0,0 @@
|
|
1
|
-
import { CommonModule } from '@angular/common';
|
2
|
-
import { EventEmitter, Component, Input, Output, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
|
3
|
-
import { ColorWrap, getContrastingColor, isValidHex, CheckboardModule, SwatchModule, EditableInputModule } from 'ngx-color';
|
4
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
5
|
-
|
6
|
-
class BlockSwatchesComponent {
|
7
|
-
constructor() {
|
8
|
-
this.onClick = new EventEmitter();
|
9
|
-
this.onSwatchHover = new EventEmitter();
|
10
|
-
}
|
11
|
-
ngOnInit() {
|
12
|
-
this.swatchStyle = {
|
13
|
-
width: '22px',
|
14
|
-
height: '22px',
|
15
|
-
float: 'left',
|
16
|
-
marginRight: '10px',
|
17
|
-
marginBottom: '10px',
|
18
|
-
borderRadius: '4px',
|
19
|
-
};
|
20
|
-
}
|
21
|
-
handleClick({ hex, $event }) {
|
22
|
-
this.onClick.emit({ hex, $event });
|
23
|
-
}
|
24
|
-
focusStyle(c) {
|
25
|
-
return {
|
26
|
-
boxShadow: `${c} 0 0 4px`,
|
27
|
-
};
|
28
|
-
}
|
29
|
-
}
|
30
|
-
BlockSwatchesComponent.decorators = [
|
31
|
-
{ type: Component, args: [{
|
32
|
-
selector: 'color-block-swatches',
|
33
|
-
template: `
|
34
|
-
<div class="block-swatches">
|
35
|
-
<color-swatch
|
36
|
-
*ngFor="let c of colors"
|
37
|
-
[color]="c"
|
38
|
-
[style]="swatchStyle"
|
39
|
-
[focusStyle]="focusStyle(c)"
|
40
|
-
(onClick)="handleClick($event)"
|
41
|
-
(onHover)="onSwatchHover.emit($event)"
|
42
|
-
></color-swatch>
|
43
|
-
<div class="clear"></div>
|
44
|
-
</div>
|
45
|
-
`,
|
46
|
-
styles: [`
|
47
|
-
.block-swatches {
|
48
|
-
margin-right: -10px;
|
49
|
-
}
|
50
|
-
.clear {
|
51
|
-
clear: both;
|
52
|
-
}
|
53
|
-
`]
|
54
|
-
},] }
|
55
|
-
];
|
56
|
-
BlockSwatchesComponent.ctorParameters = () => [];
|
57
|
-
BlockSwatchesComponent.propDecorators = {
|
58
|
-
colors: [{ type: Input }],
|
59
|
-
onClick: [{ type: Output }],
|
60
|
-
onSwatchHover: [{ type: Output }]
|
61
|
-
};
|
62
|
-
|
63
|
-
class BlockComponent extends ColorWrap {
|
64
|
-
constructor() {
|
65
|
-
super();
|
66
|
-
/** Pixel value for picker width */
|
67
|
-
this.width = 170;
|
68
|
-
/** Color squares to display */
|
69
|
-
this.colors = [
|
70
|
-
'#D9E3F0',
|
71
|
-
'#F47373',
|
72
|
-
'#697689',
|
73
|
-
'#37D67A',
|
74
|
-
'#2CCCE4',
|
75
|
-
'#555555',
|
76
|
-
'#dce775',
|
77
|
-
'#ff8a65',
|
78
|
-
'#ba68c8',
|
79
|
-
];
|
80
|
-
this.triangle = 'top';
|
81
|
-
this.input = {
|
82
|
-
width: '100%',
|
83
|
-
fontSize: '12px',
|
84
|
-
color: '#666',
|
85
|
-
border: '0px',
|
86
|
-
outline: 'none',
|
87
|
-
height: '22px',
|
88
|
-
boxShadow: 'inset 0 0 0 1px #ddd',
|
89
|
-
borderRadius: '4px',
|
90
|
-
padding: '0 7px',
|
91
|
-
boxSizing: 'border-box',
|
92
|
-
};
|
93
|
-
this.wrap = {
|
94
|
-
position: 'relative',
|
95
|
-
width: '100%',
|
96
|
-
};
|
97
|
-
this.disableAlpha = true;
|
98
|
-
}
|
99
|
-
handleValueChange({ data, $event }) {
|
100
|
-
this.handleBlockChange({ hex: data, $event });
|
101
|
-
}
|
102
|
-
getContrastingColor(hex) {
|
103
|
-
return getContrastingColor(hex);
|
104
|
-
}
|
105
|
-
handleBlockChange({ hex, $event }) {
|
106
|
-
if (isValidHex(hex)) {
|
107
|
-
// this.hex = hex;
|
108
|
-
this.handleChange({
|
109
|
-
hex,
|
110
|
-
source: 'hex',
|
111
|
-
}, $event);
|
112
|
-
}
|
113
|
-
}
|
114
|
-
}
|
115
|
-
BlockComponent.decorators = [
|
116
|
-
{ type: Component, args: [{
|
117
|
-
selector: 'color-block',
|
118
|
-
template: `
|
119
|
-
<div class="block-card block-picker {{ className }}">
|
120
|
-
<div class="block-triangle" *ngIf="triangle !== 'hide'"
|
121
|
-
[style.border-color]="'transparent transparent ' + this.hex + ' transparent'"
|
122
|
-
></div>
|
123
|
-
|
124
|
-
<div class="block-head" [style.background]="hex">
|
125
|
-
<color-checkboard *ngIf="hex === 'transparent'"
|
126
|
-
borderRadius="6px 6px 0 0"
|
127
|
-
></color-checkboard>
|
128
|
-
<div class="block-label" [style.color]="getContrastingColor(hex)">
|
129
|
-
{{ hex }}
|
130
|
-
</div>
|
131
|
-
</div>
|
132
|
-
|
133
|
-
<div class="block-body">
|
134
|
-
<color-block-swatches [colors]="colors"
|
135
|
-
(onClick)="handleBlockChange($event)"
|
136
|
-
(onSwatchHover)="onSwatchHover.emit($event)"
|
137
|
-
></color-block-swatches>
|
138
|
-
<color-editable-input [value]="hex"
|
139
|
-
(onChange)="handleValueChange($event)"
|
140
|
-
[style]="{input: input, wrap: wrap}"
|
141
|
-
></color-editable-input>
|
142
|
-
</div>
|
143
|
-
</div>
|
144
|
-
`,
|
145
|
-
preserveWhitespaces: false,
|
146
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
147
|
-
providers: [
|
148
|
-
{
|
149
|
-
provide: NG_VALUE_ACCESSOR,
|
150
|
-
useExisting: forwardRef(() => BlockComponent),
|
151
|
-
multi: true,
|
152
|
-
},
|
153
|
-
{
|
154
|
-
provide: ColorWrap,
|
155
|
-
useExisting: forwardRef(() => BlockComponent),
|
156
|
-
},
|
157
|
-
],
|
158
|
-
styles: [`
|
159
|
-
.block-card {
|
160
|
-
background: #fff;
|
161
|
-
border-radius: 6px;
|
162
|
-
box-shadow: 0 1px rgba(0, 0, 0, .1);
|
163
|
-
position: relative;
|
164
|
-
}
|
165
|
-
.block-head {
|
166
|
-
align-items: center;
|
167
|
-
border-radius: 6px 6px 0 0;
|
168
|
-
display: flex;
|
169
|
-
height: 110px;
|
170
|
-
justify-content: center;
|
171
|
-
position: relative;
|
172
|
-
}
|
173
|
-
.block-body {
|
174
|
-
padding: 10px;
|
175
|
-
}
|
176
|
-
.block-label {
|
177
|
-
font-size: 18px;
|
178
|
-
position: relative;
|
179
|
-
}
|
180
|
-
.block-triangle {
|
181
|
-
border-style: solid;
|
182
|
-
border-width: 0 10px 10px 10px;
|
183
|
-
height: 0;
|
184
|
-
left: 50%;
|
185
|
-
margin-left: -10px;
|
186
|
-
position: absolute;
|
187
|
-
top: -10px;
|
188
|
-
width: 0;
|
189
|
-
}
|
190
|
-
`]
|
191
|
-
},] }
|
192
|
-
];
|
193
|
-
BlockComponent.ctorParameters = () => [];
|
194
|
-
BlockComponent.propDecorators = {
|
195
|
-
width: [{ type: Input }],
|
196
|
-
colors: [{ type: Input }],
|
197
|
-
triangle: [{ type: Input }]
|
198
|
-
};
|
199
|
-
class ColorBlockModule {
|
200
|
-
}
|
201
|
-
ColorBlockModule.decorators = [
|
202
|
-
{ type: NgModule, args: [{
|
203
|
-
declarations: [BlockComponent, BlockSwatchesComponent],
|
204
|
-
exports: [BlockComponent, BlockSwatchesComponent],
|
205
|
-
imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule],
|
206
|
-
},] }
|
207
|
-
];
|
208
|
-
|
209
|
-
/**
|
210
|
-
* Generated bundle index. Do not edit.
|
211
|
-
*/
|
212
|
-
|
213
|
-
export { BlockComponent, ColorBlockModule, BlockSwatchesComponent as ɵa };
|
214
|
-
//# sourceMappingURL=ngx-color-block.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-block.js","sources":["../../../../src/lib/components/block/block-swatches.component.ts","../../../../src/lib/components/block/block.component.ts","../../../../src/lib/components/block/ngx-color-block.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\n\nimport { Shape } from 'ngx-color';\n\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 implements OnInit {\n @Input() colors!: string[] | Shape[];\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n swatchStyle?: {[key: string]: string};\n\n constructor() { }\n\n ngOnInit() {\n this.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 './block.component';\n\nexport {BlockSwatchesComponent as ɵa} from './block-swatches.component';"],"names":[],"mappings":"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"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"__symbolic":"module","version":4,"metadata":{"BlockComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":92,"character":36},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"color-block","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 ","styles":["\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 "],"preserveWhitespaces":false,"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":79,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":82,"character":15},"useExisting":{"__symbolic":"reference","name":"BlockComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":87,"character":15},"useExisting":{"__symbolic":"reference","name":"BlockComponent"}}]}]}],"members":{"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":3}}]}],"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"triangle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"handleValueChange":[{"__symbolic":"method"}],"getContrastingColor":[{"__symbolic":"method"}],"handleBlockChange":[{"__symbolic":"method"}]}},"ColorBlockModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":150,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"BlockComponent"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"BlockComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":153,"character":12},{"__symbolic":"reference","module":"ngx-color","name":"CheckboardModule","line":153,"character":26},{"__symbolic":"reference","module":"ngx-color","name":"SwatchModule","line":153,"character":44},{"__symbolic":"reference","module":"ngx-color","name":"EditableInputModule","line":153,"character":58}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"color-block-swatches","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 ","styles":["\n .block-swatches {\n margin-right: -10px;\n }\n .clear {\n clear: both;\n }\n "]}]}],"members":{"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":30,"character":3}}]}],"onSwatchHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":31,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"handleClick":[{"__symbolic":"method"}],"focusStyle":[{"__symbolic":"method"}]}}},"origins":{"BlockComponent":"./block.component","ColorBlockModule":"./block.component","ɵa":"./block-swatches.component"},"importAs":"ngx-color/block"}
|