ngx-color 7.2.0 → 7.3.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.
- package/alpha/alpha-picker.component.d.ts +8 -0
- package/alpha/ngx-color-alpha.d.ts +2 -1
- package/alpha/package.json +6 -10
- package/alpha/public_api.d.ts +1 -0
- package/alpha.component.d.ts +9 -0
- package/block/block-swatches.component.d.ts +13 -8
- package/block/block.component.d.ts +9 -0
- package/block/ngx-color-block.d.ts +2 -2
- package/block/package.json +6 -10
- 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/ngx-color-chrome.d.ts +2 -2
- package/chrome/package.json +6 -10
- 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/ngx-color-circle.d.ts +2 -2
- package/circle/package.json +9 -10
- 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/ngx-color-compact.d.ts +2 -3
- package/compact/package.json +6 -10
- 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/alpha-picker.component.mjs +116 -0
- package/esm2020/alpha/ngx-color-alpha.mjs +5 -0
- package/esm2020/alpha/public_api.mjs +2 -0
- package/esm2020/alpha.component.mjs +186 -0
- package/esm2020/block/block-swatches.component.mjs +74 -0
- package/esm2020/block/block.component.mjs +199 -0
- package/esm2020/block/ngx-color-block.mjs +5 -0
- package/esm2020/block/public_api.mjs +3 -0
- package/esm2020/checkboard.component.mjs +66 -0
- package/esm2020/chrome/chrome-fields.component.mjs +356 -0
- package/{chrome/esm2015/chrome.component.js → esm2020/chrome/chrome.component.mjs} +116 -40
- package/esm2020/chrome/ngx-color-chrome.mjs +5 -0
- package/esm2020/chrome/public_api.mjs +3 -0
- package/esm2020/circle/circle-swatch.component.mjs +85 -0
- package/esm2020/circle/circle.component.mjs +148 -0
- package/esm2020/circle/ngx-color-circle.mjs +5 -0
- package/esm2020/circle/public_api.mjs +3 -0
- package/esm2020/color-wrap.component.mjs +163 -0
- package/esm2020/compact/compact-color.component.mjs +91 -0
- package/esm2020/compact/compact-fields.component.mjs +186 -0
- package/esm2020/compact/compact.component.mjs +177 -0
- package/esm2020/compact/ngx-color-compact.mjs +5 -0
- package/esm2020/compact/public_api.mjs +4 -0
- package/esm2020/coordinates.directive.mjs +104 -0
- package/esm2020/editable-input.component.mjs +217 -0
- package/esm2020/github/github-swatch.component.mjs +67 -0
- package/esm2020/github/github.component.mjs +179 -0
- package/esm2020/github/ngx-color-github.mjs +5 -0
- package/esm2020/github/public_api.mjs +3 -0
- package/esm2020/helpers/checkboard.mjs +33 -0
- package/esm2020/helpers/color.interfaces.mjs +2 -0
- package/esm2020/helpers/color.mjs +60 -0
- package/esm2020/hue/hue-picker.component.mjs +113 -0
- package/esm2020/hue/ngx-color-hue.mjs +5 -0
- package/esm2020/hue/public_api.mjs +2 -0
- package/esm2020/hue.component.mjs +165 -0
- package/esm2020/material/material.component.mjs +211 -0
- package/esm2020/material/ngx-color-material.mjs +5 -0
- package/esm2020/material/public_api.mjs +2 -0
- package/esm2020/ngx-color.mjs +5 -0
- package/esm2020/photoshop/ngx-color-photoshop.mjs +5 -0
- package/esm2020/photoshop/photoshop-button.component.mjs +63 -0
- package/esm2020/photoshop/photoshop-fields.component.mjs +241 -0
- package/esm2020/photoshop/photoshop-previews.component.mjs +68 -0
- package/esm2020/photoshop/photoshop.component.mjs +258 -0
- package/esm2020/photoshop/public_api.mjs +5 -0
- package/esm2020/public_api.mjs +14 -0
- package/esm2020/raised.component.mjs +89 -0
- package/esm2020/saturation.component.mjs +136 -0
- package/esm2020/shade/ngx-color-shade.mjs +5 -0
- package/esm2020/shade/public_api.mjs +2 -0
- package/esm2020/shade/shade-picker.component.mjs +105 -0
- package/esm2020/shade.component.mjs +165 -0
- package/esm2020/sketch/ngx-color-sketch.mjs +5 -0
- package/esm2020/sketch/public_api.mjs +4 -0
- package/esm2020/sketch/sketch-fields.component.mjs +243 -0
- package/esm2020/sketch/sketch-preset-colors.component.mjs +98 -0
- package/esm2020/sketch/sketch.component.mjs +283 -0
- package/esm2020/slider/ngx-color-slider.mjs +5 -0
- package/esm2020/slider/public_api.mjs +4 -0
- package/esm2020/slider/slider-swatch.component.mjs +80 -0
- package/esm2020/slider/slider-swatches.component.mjs +135 -0
- package/esm2020/slider/slider.component.mjs +116 -0
- package/esm2020/swatch.component.mjs +125 -0
- package/esm2020/swatches/ngx-color-swatches.mjs +5 -0
- package/esm2020/swatches/public_api.mjs +4 -0
- package/esm2020/swatches/swatches-color.component.mjs +123 -0
- package/esm2020/swatches/swatches-group.component.mjs +64 -0
- package/esm2020/swatches/swatches.component.mjs +258 -0
- package/esm2020/twitter/ngx-color-twitter.mjs +5 -0
- package/esm2020/twitter/public_api.mjs +2 -0
- package/{twitter/esm2015/twitter.component.js → esm2020/twitter/twitter.component.mjs} +83 -35
- package/fesm2015/ngx-color-alpha.mjs +123 -0
- package/fesm2015/ngx-color-alpha.mjs.map +1 -0
- package/fesm2015/ngx-color-block.mjs +275 -0
- package/fesm2015/ngx-color-block.mjs.map +1 -0
- package/fesm2015/ngx-color-chrome.mjs +606 -0
- package/fesm2015/ngx-color-chrome.mjs.map +1 -0
- package/fesm2015/ngx-color-circle.mjs +237 -0
- package/fesm2015/ngx-color-circle.mjs.map +1 -0
- package/fesm2015/ngx-color-compact.mjs +451 -0
- package/fesm2015/ngx-color-compact.mjs.map +1 -0
- package/fesm2015/ngx-color-github.mjs +250 -0
- package/fesm2015/ngx-color-github.mjs.map +1 -0
- package/fesm2015/ngx-color-hue.mjs +120 -0
- package/fesm2015/ngx-color-hue.mjs.map +1 -0
- package/fesm2015/ngx-color-material.mjs +218 -0
- package/fesm2015/ngx-color-material.mjs.map +1 -0
- package/fesm2015/ngx-color-photoshop.mjs +626 -0
- package/fesm2015/ngx-color-photoshop.mjs.map +1 -0
- package/fesm2015/ngx-color-shade.mjs +112 -0
- package/fesm2015/ngx-color-shade.mjs.map +1 -0
- package/fesm2015/ngx-color-sketch.mjs +620 -0
- package/fesm2015/ngx-color-sketch.mjs.map +1 -0
- package/fesm2015/ngx-color-slider.mjs +331 -0
- package/fesm2015/ngx-color-slider.mjs.map +1 -0
- package/fesm2015/ngx-color-swatches.mjs +441 -0
- package/fesm2015/ngx-color-swatches.mjs.map +1 -0
- package/fesm2015/ngx-color-twitter.mjs +262 -0
- package/fesm2015/ngx-color-twitter.mjs.map +1 -0
- package/fesm2015/ngx-color.mjs +1461 -0
- package/fesm2015/ngx-color.mjs.map +1 -0
- package/fesm2020/ngx-color-alpha.mjs +123 -0
- package/fesm2020/ngx-color-alpha.mjs.map +1 -0
- package/fesm2020/ngx-color-block.mjs +275 -0
- package/fesm2020/ngx-color-block.mjs.map +1 -0
- package/fesm2020/ngx-color-chrome.mjs +606 -0
- package/fesm2020/ngx-color-chrome.mjs.map +1 -0
- package/fesm2020/ngx-color-circle.mjs +237 -0
- package/fesm2020/ngx-color-circle.mjs.map +1 -0
- package/fesm2020/ngx-color-compact.mjs +451 -0
- package/fesm2020/ngx-color-compact.mjs.map +1 -0
- package/fesm2020/ngx-color-github.mjs +250 -0
- package/fesm2020/ngx-color-github.mjs.map +1 -0
- package/fesm2020/ngx-color-hue.mjs +120 -0
- package/fesm2020/ngx-color-hue.mjs.map +1 -0
- package/fesm2020/ngx-color-material.mjs +218 -0
- package/fesm2020/ngx-color-material.mjs.map +1 -0
- package/fesm2020/ngx-color-photoshop.mjs +626 -0
- package/fesm2020/ngx-color-photoshop.mjs.map +1 -0
- package/fesm2020/ngx-color-shade.mjs +112 -0
- package/fesm2020/ngx-color-shade.mjs.map +1 -0
- package/fesm2020/ngx-color-sketch.mjs +620 -0
- package/fesm2020/ngx-color-sketch.mjs.map +1 -0
- package/fesm2020/ngx-color-slider.mjs +331 -0
- package/fesm2020/ngx-color-slider.mjs.map +1 -0
- package/fesm2020/ngx-color-swatches.mjs +441 -0
- package/fesm2020/ngx-color-swatches.mjs.map +1 -0
- package/fesm2020/ngx-color-twitter.mjs +262 -0
- package/fesm2020/ngx-color-twitter.mjs.map +1 -0
- package/fesm2020/ngx-color.mjs +1466 -0
- package/fesm2020/ngx-color.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 +6 -10
- package/github/public_api.d.ts +2 -0
- package/hue/hue-picker.component.d.ts +8 -0
- package/hue/ngx-color-hue.d.ts +2 -1
- package/hue/package.json +6 -10
- package/hue/public_api.d.ts +1 -0
- package/hue.component.d.ts +8 -0
- package/material/material.component.d.ts +8 -0
- package/material/ngx-color-material.d.ts +2 -1
- package/material/package.json +6 -10
- package/material/public_api.d.ts +1 -0
- package/ngx-color.d.ts +1 -0
- package/package.json +133 -9
- package/photoshop/ngx-color-photoshop.d.ts +2 -4
- package/photoshop/package.json +6 -10
- 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/ngx-color-shade.d.ts +2 -1
- package/shade/package.json +6 -10
- 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/ngx-color-sketch.d.ts +2 -3
- package/sketch/package.json +6 -10
- 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/ngx-color-slider.d.ts +2 -3
- package/slider/package.json +6 -10
- 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/ngx-color-swatches.d.ts +2 -3
- package/swatches/package.json +9 -10
- 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/ngx-color-twitter.d.ts +2 -1
- package/twitter/package.json +6 -10
- 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/esm2015/ngx-color-alpha.js +0 -5
- 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/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/helpers/checkboard.js +0 -33
- package/esm2015/helpers/color.interfaces.js +0 -2
- package/esm2015/helpers/color.js +0 -60
- package/esm2015/hue.component.js +0 -140
- package/esm2015/ngx-color.js +0 -5
- package/esm2015/public_api.js +0 -14
- 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/esm2015/ngx-color-hue.js +0 -5
- 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/esm2015/ngx-color-material.js +0 -5
- 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/ngx-color-shade.js +0 -5
- 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/ngx-color-twitter.js +0 -5
- 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,109 +0,0 @@
|
|
1
|
-
import { CommonModule } from '@angular/common';
|
2
|
-
import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
|
3
|
-
import { amber, blue, blueGrey, brown, cyan, deepOrange, deepPurple, green, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, yellow, } from 'material-colors';
|
4
|
-
import { TinyColor } from '@ctrl/tinycolor';
|
5
|
-
import { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';
|
6
|
-
import { CircleSwatchComponent } from './circle-swatch.component';
|
7
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
8
|
-
export class CircleComponent extends ColorWrap {
|
9
|
-
constructor() {
|
10
|
-
super();
|
11
|
-
/** Pixel value for picker width */
|
12
|
-
this.width = 252;
|
13
|
-
/** Color squares to display */
|
14
|
-
this.colors = [
|
15
|
-
red['500'],
|
16
|
-
pink['500'],
|
17
|
-
purple['500'],
|
18
|
-
deepPurple['500'],
|
19
|
-
indigo['500'],
|
20
|
-
blue['500'],
|
21
|
-
lightBlue['500'],
|
22
|
-
cyan['500'],
|
23
|
-
teal['500'],
|
24
|
-
green['500'],
|
25
|
-
lightGreen['500'],
|
26
|
-
lime['500'],
|
27
|
-
yellow['500'],
|
28
|
-
amber['500'],
|
29
|
-
orange['500'],
|
30
|
-
deepOrange['500'],
|
31
|
-
brown['500'],
|
32
|
-
blueGrey['500'],
|
33
|
-
];
|
34
|
-
/** Value for circle size */
|
35
|
-
this.circleSize = 28;
|
36
|
-
/** Value for spacing between circles */
|
37
|
-
this.circleSpacing = 14;
|
38
|
-
}
|
39
|
-
isActive(color) {
|
40
|
-
return new TinyColor(this.hex).equals(color);
|
41
|
-
}
|
42
|
-
handleBlockChange({ hex, $event }) {
|
43
|
-
if (isValidHex(hex)) {
|
44
|
-
this.handleChange({ hex, source: 'hex' }, $event);
|
45
|
-
}
|
46
|
-
}
|
47
|
-
handleValueChange({ data, $event }) {
|
48
|
-
this.handleChange(data, $event);
|
49
|
-
}
|
50
|
-
}
|
51
|
-
CircleComponent.decorators = [
|
52
|
-
{ type: Component, args: [{
|
53
|
-
selector: 'color-circle',
|
54
|
-
template: `
|
55
|
-
<div
|
56
|
-
class="circle-picker {{ className }}"
|
57
|
-
[style.width.px]="width"
|
58
|
-
[style.margin-right.px]="-circleSpacing"
|
59
|
-
[style.margin-bottom.px]="-circleSpacing"
|
60
|
-
>
|
61
|
-
<color-circle-swatch
|
62
|
-
*ngFor="let color of colors"
|
63
|
-
[circleSize]="circleSize"
|
64
|
-
[circleSpacing]="circleSpacing"
|
65
|
-
[color]="color"
|
66
|
-
[focus]="isActive(color)"
|
67
|
-
(onClick)="handleBlockChange($event)"
|
68
|
-
(onSwatchHover)="onSwatchHover.emit($event)"
|
69
|
-
></color-circle-swatch>
|
70
|
-
</div>
|
71
|
-
`,
|
72
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
73
|
-
preserveWhitespaces: false,
|
74
|
-
providers: [
|
75
|
-
{
|
76
|
-
provide: NG_VALUE_ACCESSOR,
|
77
|
-
useExisting: forwardRef(() => CircleComponent),
|
78
|
-
multi: true,
|
79
|
-
},
|
80
|
-
{
|
81
|
-
provide: ColorWrap,
|
82
|
-
useExisting: forwardRef(() => CircleComponent),
|
83
|
-
},
|
84
|
-
],
|
85
|
-
styles: [`
|
86
|
-
.circle-picker {
|
87
|
-
display: flex;
|
88
|
-
flex-wrap: wrap;
|
89
|
-
}
|
90
|
-
`]
|
91
|
-
},] }
|
92
|
-
];
|
93
|
-
CircleComponent.ctorParameters = () => [];
|
94
|
-
CircleComponent.propDecorators = {
|
95
|
-
width: [{ type: Input }],
|
96
|
-
colors: [{ type: Input }],
|
97
|
-
circleSize: [{ type: Input }],
|
98
|
-
circleSpacing: [{ type: Input }]
|
99
|
-
};
|
100
|
-
export class ColorCircleModule {
|
101
|
-
}
|
102
|
-
ColorCircleModule.decorators = [
|
103
|
-
{ type: NgModule, args: [{
|
104
|
-
declarations: [CircleComponent, CircleSwatchComponent],
|
105
|
-
exports: [CircleComponent, CircleSwatchComponent],
|
106
|
-
imports: [CommonModule, SwatchModule],
|
107
|
-
},] }
|
108
|
-
];
|
109
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2lyY2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9jaXJjbGUvY2lyY2xlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRyxPQUFPLEVBQ0wsS0FBSyxFQUNMLElBQUksRUFDSixRQUFRLEVBQ1IsS0FBSyxFQUNMLElBQUksRUFDSixVQUFVLEVBQ1YsVUFBVSxFQUNWLEtBQUssRUFDTCxNQUFNLEVBQ04sU0FBUyxFQUNULFVBQVUsRUFDVixJQUFJLEVBQ0osTUFBTSxFQUNOLElBQUksRUFDSixNQUFNLEVBQ04sR0FBRyxFQUNILElBQUksRUFDSixNQUFNLEdBQ1AsTUFBTSxpQkFBaUIsQ0FBQztBQUN6QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFNUMsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBNENuRCxNQUFNLE9BQU8sZUFBZ0IsU0FBUSxTQUFTO0lBOEI1QztRQUNFLEtBQUssRUFBRSxDQUFDO1FBOUJWLG1DQUFtQztRQUMxQixVQUFLLEdBQW9CLEdBQUcsQ0FBQztRQUN0QywrQkFBK0I7UUFFL0IsV0FBTSxHQUFhO1lBQ2pCLEdBQUcsQ0FBQyxLQUFLLENBQUM7WUFDVixJQUFJLENBQUMsS0FBSyxDQUFDO1lBQ1gsTUFBTSxDQUFDLEtBQUssQ0FBQztZQUNiLFVBQVUsQ0FBQyxLQUFLLENBQUM7WUFDakIsTUFBTSxDQUFDLEtBQUssQ0FBQztZQUNiLElBQUksQ0FBQyxLQUFLLENBQUM7WUFDWCxTQUFTLENBQUMsS0FBSyxDQUFDO1lBQ2hCLElBQUksQ0FBQyxLQUFLLENBQUM7WUFDWCxJQUFJLENBQUMsS0FBSyxDQUFDO1lBQ1gsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUNaLFVBQVUsQ0FBQyxLQUFLLENBQUM7WUFDakIsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUNYLE1BQU0sQ0FBQyxLQUFLLENBQUM7WUFDYixLQUFLLENBQUMsS0FBSyxDQUFDO1lBQ1osTUFBTSxDQUFDLEtBQUssQ0FBQztZQUNiLFVBQVUsQ0FBQyxLQUFLLENBQUM7WUFDakIsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUNaLFFBQVEsQ0FBQyxLQUFLLENBQUM7U0FDaEIsQ0FBQztRQUNGLDRCQUE0QjtRQUNuQixlQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ3pCLHdDQUF3QztRQUMvQixrQkFBYSxHQUFHLEVBQUUsQ0FBQztJQUk1QixDQUFDO0lBQ0QsUUFBUSxDQUFDLEtBQWE7UUFDcEIsT0FBTyxJQUFJLFNBQVMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQy9DLENBQUM7SUFDRCxpQkFBaUIsQ0FBQyxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQWtDO1FBQy9ELElBQUksVUFBVSxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQ25CLElBQUksQ0FBQyxZQUFZLENBQUMsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxFQUFFLE1BQU0sQ0FBQyxDQUFDO1NBQ25EO0lBQ0gsQ0FBQztJQUNELGlCQUFpQixDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRTtRQUNoQyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxNQUFNLENBQUMsQ0FBQztJQUNsQyxDQUFDOzs7WUFyRkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxjQUFjO2dCQUN4QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUJUO2dCQVNELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2dCQUMvQyxtQkFBbUIsRUFBRSxLQUFLO2dCQUMxQixTQUFTLEVBQUU7b0JBQ1Q7d0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjt3QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxlQUFlLENBQUM7d0JBQzlDLEtBQUssRUFBRSxJQUFJO3FCQUNaO29CQUNEO3dCQUNFLE9BQU8sRUFBRSxTQUFTO3dCQUNsQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQztxQkFDL0M7aUJBQ0Y7eUJBbkJDOzs7OztLQUtDO2FBZUo7Ozs7b0JBR0UsS0FBSztxQkFFTCxLQUFLO3lCQXNCTCxLQUFLOzRCQUVMLEtBQUs7O0FBdUJSLE1BQU0sT0FBTyxpQkFBaUI7OztZQUw3QixRQUFRLFNBQUM7Z0JBQ1IsWUFBWSxFQUFFLENBQUMsZUFBZSxFQUFFLHFCQUFxQixDQUFDO2dCQUN0RCxPQUFPLEVBQUUsQ0FBQyxlQUFlLEVBQUUscUJBQXFCLENBQUM7Z0JBQ2pELE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxZQUFZLENBQUM7YUFDdEMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgZm9yd2FyZFJlZiwgSW5wdXQsIE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICBhbWJlcixcbiAgYmx1ZSxcbiAgYmx1ZUdyZXksXG4gIGJyb3duLFxuICBjeWFuLFxuICBkZWVwT3JhbmdlLFxuICBkZWVwUHVycGxlLFxuICBncmVlbixcbiAgaW5kaWdvLFxuICBsaWdodEJsdWUsXG4gIGxpZ2h0R3JlZW4sXG4gIGxpbWUsXG4gIG9yYW5nZSxcbiAgcGluayxcbiAgcHVycGxlLFxuICByZWQsXG4gIHRlYWwsXG4gIHllbGxvdyxcbn0gZnJvbSAnbWF0ZXJpYWwtY29sb3JzJztcbmltcG9ydCB7IFRpbnlDb2xvciB9IGZyb20gJ0BjdHJsL3Rpbnljb2xvcic7XG5cbmltcG9ydCB7IENvbG9yV3JhcCwgaXNWYWxpZEhleCwgU3dhdGNoTW9kdWxlIH0gZnJvbSAnbmd4LWNvbG9yJztcbmltcG9ydCB7IENpcmNsZVN3YXRjaENvbXBvbmVudCB9IGZyb20gJy4vY2lyY2xlLXN3YXRjaC5jb21wb25lbnQnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLWNpcmNsZScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJjaXJjbGUtcGlja2VyIHt7IGNsYXNzTmFtZSB9fVwiXG4gICAgICBbc3R5bGUud2lkdGgucHhdPVwid2lkdGhcIlxuICAgICAgW3N0eWxlLm1hcmdpbi1yaWdodC5weF09XCItY2lyY2xlU3BhY2luZ1wiXG4gICAgICBbc3R5bGUubWFyZ2luLWJvdHRvbS5weF09XCItY2lyY2xlU3BhY2luZ1wiXG4gICAgPlxuICAgICAgPGNvbG9yLWNpcmNsZS1zd2F0Y2hcbiAgICAgICAgKm5nRm9yPVwibGV0IGNvbG9yIG9mIGNvbG9yc1wiXG4gICAgICAgIFtjaXJjbGVTaXplXT1cImNpcmNsZVNpemVcIlxuICAgICAgICBbY2lyY2xlU3BhY2luZ109XCJjaXJjbGVTcGFjaW5nXCJcbiAgICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgW2ZvY3VzXT1cImlzQWN0aXZlKGNvbG9yKVwiXG4gICAgICAgIChvbkNsaWNrKT1cImhhbmRsZUJsb2NrQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAob25Td2F0Y2hIb3Zlcik9XCJvblN3YXRjaEhvdmVyLmVtaXQoJGV2ZW50KVwiXG4gICAgICA+PC9jb2xvci1jaXJjbGUtc3dhdGNoPlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgICAuY2lyY2xlLXBpY2tlciB7XG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgIGZsZXgtd3JhcDogd3JhcDtcbiAgICAgIH1cbiAgICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ2lyY2xlQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gICAge1xuICAgICAgcHJvdmlkZTogQ29sb3JXcmFwLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ2lyY2xlQ29tcG9uZW50KSxcbiAgICB9LFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIENpcmNsZUNvbXBvbmVudCBleHRlbmRzIENvbG9yV3JhcCB7XG4gIC8qKiBQaXhlbCB2YWx1ZSBmb3IgcGlja2VyIHdpZHRoICovXG4gIEBJbnB1dCgpIHdpZHRoOiBzdHJpbmcgfCBudW1iZXIgPSAyNTI7XG4gIC8qKiBDb2xvciBzcXVhcmVzIHRvIGRpc3BsYXkgKi9cbiAgQElucHV0KClcbiAgY29sb3JzOiBzdHJpbmdbXSA9IFtcbiAgICByZWRbJzUwMCddLFxuICAgIHBpbmtbJzUwMCddLFxuICAgIHB1cnBsZVsnNTAwJ10sXG4gICAgZGVlcFB1cnBsZVsnNTAwJ10sXG4gICAgaW5kaWdvWyc1MDAnXSxcbiAgICBibHVlWyc1MDAnXSxcbiAgICBsaWdodEJsdWVbJzUwMCddLFxuICAgIGN5YW5bJzUwMCddLFxuICAgIHRlYWxbJzUwMCddLFxuICAgIGdyZWVuWyc1MDAnXSxcbiAgICBsaWdodEdyZWVuWyc1MDAnXSxcbiAgICBsaW1lWyc1MDAnXSxcbiAgICB5ZWxsb3dbJzUwMCddLFxuICAgIGFtYmVyWyc1MDAnXSxcbiAgICBvcmFuZ2VbJzUwMCddLFxuICAgIGRlZXBPcmFuZ2VbJzUwMCddLFxuICAgIGJyb3duWyc1MDAnXSxcbiAgICBibHVlR3JleVsnNTAwJ10sXG4gIF07XG4gIC8qKiBWYWx1ZSBmb3IgY2lyY2xlIHNpemUgKi9cbiAgQElucHV0KCkgY2lyY2xlU2l6ZSA9IDI4O1xuICAvKiogVmFsdWUgZm9yIHNwYWNpbmcgYmV0d2VlbiBjaXJjbGVzICovXG4gIEBJbnB1dCgpIGNpcmNsZVNwYWNpbmcgPSAxNDtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG4gIGlzQWN0aXZlKGNvbG9yOiBzdHJpbmcpIHtcbiAgICByZXR1cm4gbmV3IFRpbnlDb2xvcih0aGlzLmhleCkuZXF1YWxzKGNvbG9yKTtcbiAgfVxuICBoYW5kbGVCbG9ja0NoYW5nZSh7IGhleCwgJGV2ZW50IH06IHsgaGV4OiBzdHJpbmcsICRldmVudDogRXZlbnQgfSkge1xuICAgIGlmIChpc1ZhbGlkSGV4KGhleCkpIHtcbiAgICAgIHRoaXMuaGFuZGxlQ2hhbmdlKHsgaGV4LCBzb3VyY2U6ICdoZXgnIH0sICRldmVudCk7XG4gICAgfVxuICB9XG4gIGhhbmRsZVZhbHVlQ2hhbmdlKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLmhhbmRsZUNoYW5nZShkYXRhLCAkZXZlbnQpO1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW0NpcmNsZUNvbXBvbmVudCwgQ2lyY2xlU3dhdGNoQ29tcG9uZW50XSxcbiAgZXhwb3J0czogW0NpcmNsZUNvbXBvbmVudCwgQ2lyY2xlU3dhdGNoQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgU3dhdGNoTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JDaXJjbGVNb2R1bGUge31cbiJdfQ==
|
@@ -1,6 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Generated bundle index. Do not edit.
|
3
|
-
*/
|
4
|
-
export * from './circle.component';
|
5
|
-
export { CircleSwatchComponent as ɵa } from './circle-swatch.component';
|
6
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLWNpcmNsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9jaXJjbGUvbmd4LWNvbG9yLWNpcmNsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsb0JBQW9CLENBQUM7QUFFbkMsT0FBTyxFQUFDLHFCQUFxQixJQUFJLEVBQUUsRUFBQyxNQUFNLDJCQUEyQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2NpcmNsZS5jb21wb25lbnQnO1xuXG5leHBvcnQge0NpcmNsZVN3YXRjaENvbXBvbmVudCBhcyDJtWF9IGZyb20gJy4vY2lyY2xlLXN3YXRjaC5jb21wb25lbnQnOyJdfQ==
|
@@ -1,177 +0,0 @@
|
|
1
|
-
import { CommonModule } from '@angular/common';
|
2
|
-
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
|
3
|
-
import { red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, lightGreen, lime, yellow, amber, orange, deepOrange, brown, blueGrey } from 'material-colors';
|
4
|
-
import { TinyColor } from '@ctrl/tinycolor';
|
5
|
-
import { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';
|
6
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
7
|
-
|
8
|
-
class CircleSwatchComponent {
|
9
|
-
constructor() {
|
10
|
-
this.circleSize = 28;
|
11
|
-
this.circleSpacing = 14;
|
12
|
-
this.focus = false;
|
13
|
-
this.onClick = new EventEmitter();
|
14
|
-
this.onSwatchHover = new EventEmitter();
|
15
|
-
this.focusStyle = {};
|
16
|
-
this.swatchStyle = {
|
17
|
-
borderRadius: '50%',
|
18
|
-
background: 'transparent',
|
19
|
-
transition: '100ms box-shadow ease 0s',
|
20
|
-
};
|
21
|
-
}
|
22
|
-
ngOnChanges() {
|
23
|
-
this.swatchStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}`;
|
24
|
-
this.focusStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}, 0 0 5px ${this.color}`;
|
25
|
-
if (this.focus) {
|
26
|
-
this.focusStyle.boxShadow = `inset 0 0 0 3px ${this.color}, 0 0 5px ${this.color}`;
|
27
|
-
}
|
28
|
-
}
|
29
|
-
handleClick({ hex, $event }) {
|
30
|
-
this.onClick.emit({ hex, $event });
|
31
|
-
}
|
32
|
-
}
|
33
|
-
CircleSwatchComponent.decorators = [
|
34
|
-
{ type: Component, args: [{
|
35
|
-
selector: 'color-circle-swatch',
|
36
|
-
template: `
|
37
|
-
<div class="circle-swatch"
|
38
|
-
[style.width.px]="circleSize" [style.height.px]="circleSize"
|
39
|
-
[style.margin-right.px]="circleSpacing" [style.margin-bottom.px]="circleSpacing"
|
40
|
-
>
|
41
|
-
<color-swatch
|
42
|
-
[color]="color" [style]="swatchStyle" [focus]="focus" [focusStyle]="focusStyle"
|
43
|
-
(onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)">
|
44
|
-
</color-swatch>
|
45
|
-
<div class="clear"></div>
|
46
|
-
</div>
|
47
|
-
`,
|
48
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
49
|
-
preserveWhitespaces: false,
|
50
|
-
styles: [`
|
51
|
-
.circle-swatch {
|
52
|
-
transform: scale(1);
|
53
|
-
transition: transform 100ms ease;
|
54
|
-
}
|
55
|
-
.circle-swatch:hover {
|
56
|
-
transform: scale(1.2);
|
57
|
-
}
|
58
|
-
`]
|
59
|
-
},] }
|
60
|
-
];
|
61
|
-
CircleSwatchComponent.propDecorators = {
|
62
|
-
color: [{ type: Input }],
|
63
|
-
circleSize: [{ type: Input }],
|
64
|
-
circleSpacing: [{ type: Input }],
|
65
|
-
focus: [{ type: Input }],
|
66
|
-
onClick: [{ type: Output }],
|
67
|
-
onSwatchHover: [{ type: Output }]
|
68
|
-
};
|
69
|
-
|
70
|
-
class CircleComponent extends ColorWrap {
|
71
|
-
constructor() {
|
72
|
-
super();
|
73
|
-
/** Pixel value for picker width */
|
74
|
-
this.width = 252;
|
75
|
-
/** Color squares to display */
|
76
|
-
this.colors = [
|
77
|
-
red['500'],
|
78
|
-
pink['500'],
|
79
|
-
purple['500'],
|
80
|
-
deepPurple['500'],
|
81
|
-
indigo['500'],
|
82
|
-
blue['500'],
|
83
|
-
lightBlue['500'],
|
84
|
-
cyan['500'],
|
85
|
-
teal['500'],
|
86
|
-
green['500'],
|
87
|
-
lightGreen['500'],
|
88
|
-
lime['500'],
|
89
|
-
yellow['500'],
|
90
|
-
amber['500'],
|
91
|
-
orange['500'],
|
92
|
-
deepOrange['500'],
|
93
|
-
brown['500'],
|
94
|
-
blueGrey['500'],
|
95
|
-
];
|
96
|
-
/** Value for circle size */
|
97
|
-
this.circleSize = 28;
|
98
|
-
/** Value for spacing between circles */
|
99
|
-
this.circleSpacing = 14;
|
100
|
-
}
|
101
|
-
isActive(color) {
|
102
|
-
return new TinyColor(this.hex).equals(color);
|
103
|
-
}
|
104
|
-
handleBlockChange({ hex, $event }) {
|
105
|
-
if (isValidHex(hex)) {
|
106
|
-
this.handleChange({ hex, source: 'hex' }, $event);
|
107
|
-
}
|
108
|
-
}
|
109
|
-
handleValueChange({ data, $event }) {
|
110
|
-
this.handleChange(data, $event);
|
111
|
-
}
|
112
|
-
}
|
113
|
-
CircleComponent.decorators = [
|
114
|
-
{ type: Component, args: [{
|
115
|
-
selector: 'color-circle',
|
116
|
-
template: `
|
117
|
-
<div
|
118
|
-
class="circle-picker {{ className }}"
|
119
|
-
[style.width.px]="width"
|
120
|
-
[style.margin-right.px]="-circleSpacing"
|
121
|
-
[style.margin-bottom.px]="-circleSpacing"
|
122
|
-
>
|
123
|
-
<color-circle-swatch
|
124
|
-
*ngFor="let color of colors"
|
125
|
-
[circleSize]="circleSize"
|
126
|
-
[circleSpacing]="circleSpacing"
|
127
|
-
[color]="color"
|
128
|
-
[focus]="isActive(color)"
|
129
|
-
(onClick)="handleBlockChange($event)"
|
130
|
-
(onSwatchHover)="onSwatchHover.emit($event)"
|
131
|
-
></color-circle-swatch>
|
132
|
-
</div>
|
133
|
-
`,
|
134
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
135
|
-
preserveWhitespaces: false,
|
136
|
-
providers: [
|
137
|
-
{
|
138
|
-
provide: NG_VALUE_ACCESSOR,
|
139
|
-
useExisting: forwardRef(() => CircleComponent),
|
140
|
-
multi: true,
|
141
|
-
},
|
142
|
-
{
|
143
|
-
provide: ColorWrap,
|
144
|
-
useExisting: forwardRef(() => CircleComponent),
|
145
|
-
},
|
146
|
-
],
|
147
|
-
styles: [`
|
148
|
-
.circle-picker {
|
149
|
-
display: flex;
|
150
|
-
flex-wrap: wrap;
|
151
|
-
}
|
152
|
-
`]
|
153
|
-
},] }
|
154
|
-
];
|
155
|
-
CircleComponent.ctorParameters = () => [];
|
156
|
-
CircleComponent.propDecorators = {
|
157
|
-
width: [{ type: Input }],
|
158
|
-
colors: [{ type: Input }],
|
159
|
-
circleSize: [{ type: Input }],
|
160
|
-
circleSpacing: [{ type: Input }]
|
161
|
-
};
|
162
|
-
class ColorCircleModule {
|
163
|
-
}
|
164
|
-
ColorCircleModule.decorators = [
|
165
|
-
{ type: NgModule, args: [{
|
166
|
-
declarations: [CircleComponent, CircleSwatchComponent],
|
167
|
-
exports: [CircleComponent, CircleSwatchComponent],
|
168
|
-
imports: [CommonModule, SwatchModule],
|
169
|
-
},] }
|
170
|
-
];
|
171
|
-
|
172
|
-
/**
|
173
|
-
* Generated bundle index. Do not edit.
|
174
|
-
*/
|
175
|
-
|
176
|
-
export { CircleComponent, ColorCircleModule, CircleSwatchComponent as ɵa };
|
177
|
-
//# sourceMappingURL=ngx-color-circle.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-circle.js","sources":["../../../../src/lib/components/circle/circle-swatch.component.ts","../../../../src/lib/components/circle/circle.component.ts","../../../../src/lib/components/circle/ngx-color-circle.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n} from '@angular/core';\n\n@Component({\n selector: 'color-circle-swatch',\n template: `\n <div class=\"circle-swatch\"\n [style.width.px]=\"circleSize\" [style.height.px]=\"circleSize\"\n [style.margin-right.px]=\"circleSpacing\" [style.margin-bottom.px]=\"circleSpacing\"\n >\n <color-swatch\n [color]=\"color\" [style]=\"swatchStyle\" [focus]=\"focus\" [focusStyle]=\"focusStyle\"\n (onClick)=\"handleClick($event)\" (onHover)=\"onSwatchHover.emit($event)\">\n </color-swatch>\n <div class=\"clear\"></div>\n </div>\n `,\n styles: [\n `\n .circle-swatch {\n transform: scale(1);\n transition: transform 100ms ease;\n }\n .circle-swatch:hover {\n transform: scale(1.2);\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class CircleSwatchComponent implements OnChanges {\n @Input() color!: string;\n @Input() circleSize = 28;\n @Input() circleSpacing = 14;\n @Input() focus = false;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n focusStyle: Record<string, string> = {};\n swatchStyle: Record<string, string> = {\n borderRadius: '50%',\n background: 'transparent',\n transition: '100ms box-shadow ease 0s',\n };\n\n ngOnChanges() {\n this.swatchStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}`;\n this.focusStyle.boxShadow = `inset 0 0 0 ${ this.circleSize / 2 }px ${ this.color }, 0 0 5px ${ this.color }`;\n if (this.focus) {\n this.focusStyle.boxShadow = `inset 0 0 0 3px ${ this.color }, 0 0 5px ${ this.color }`;\n }\n }\n handleClick({ hex, $event }) {\n this.onClick.emit({ hex, $event });\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\nimport {\n amber,\n blue,\n blueGrey,\n brown,\n cyan,\n deepOrange,\n deepPurple,\n green,\n indigo,\n lightBlue,\n lightGreen,\n lime,\n orange,\n pink,\n purple,\n red,\n teal,\n yellow,\n} from 'material-colors';\nimport { TinyColor } from '@ctrl/tinycolor';\n\nimport { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';\nimport { CircleSwatchComponent } from './circle-swatch.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-circle',\n template: `\n <div\n class=\"circle-picker {{ className }}\"\n [style.width.px]=\"width\"\n [style.margin-right.px]=\"-circleSpacing\"\n [style.margin-bottom.px]=\"-circleSpacing\"\n >\n <color-circle-swatch\n *ngFor=\"let color of colors\"\n [circleSize]=\"circleSize\"\n [circleSpacing]=\"circleSpacing\"\n [color]=\"color\"\n [focus]=\"isActive(color)\"\n (onClick)=\"handleBlockChange($event)\"\n (onSwatchHover)=\"onSwatchHover.emit($event)\"\n ></color-circle-swatch>\n </div>\n `,\n styles: [\n `\n .circle-picker {\n display: flex;\n flex-wrap: wrap;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CircleComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => CircleComponent),\n },\n ]\n})\nexport class CircleComponent extends ColorWrap {\n /** Pixel value for picker width */\n @Input() width: string | number = 252;\n /** Color squares to display */\n @Input()\n colors: string[] = [\n red['500'],\n pink['500'],\n purple['500'],\n deepPurple['500'],\n indigo['500'],\n blue['500'],\n lightBlue['500'],\n cyan['500'],\n teal['500'],\n green['500'],\n lightGreen['500'],\n lime['500'],\n yellow['500'],\n amber['500'],\n orange['500'],\n deepOrange['500'],\n brown['500'],\n blueGrey['500'],\n ];\n /** Value for circle size */\n @Input() circleSize = 28;\n /** Value for spacing between circles */\n @Input() circleSpacing = 14;\n\n constructor() {\n super();\n }\n isActive(color: string) {\n return new TinyColor(this.hex).equals(color);\n }\n handleBlockChange({ hex, $event }: { hex: string, $event: Event }) {\n if (isValidHex(hex)) {\n this.handleChange({ hex, source: 'hex' }, $event);\n }\n }\n handleValueChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [CircleComponent, CircleSwatchComponent],\n exports: [CircleComponent, CircleSwatchComponent],\n imports: [CommonModule, SwatchModule],\n})\nexport class ColorCircleModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './circle.component';\n\nexport {CircleSwatchComponent as ɵa} from './circle-swatch.component';"],"names":[],"mappings":"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"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"__symbolic":"module","version":4,"metadata":{"CircleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":70,"character":37},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"color-circle","template":"\n <div\n class=\"circle-picker {{ className }}\"\n [style.width.px]=\"width\"\n [style.margin-right.px]=\"-circleSpacing\"\n [style.margin-bottom.px]=\"-circleSpacing\"\n >\n <color-circle-swatch\n *ngFor=\"let color of colors\"\n [circleSize]=\"circleSize\"\n [circleSpacing]=\"circleSpacing\"\n [color]=\"color\"\n [focus]=\"isActive(color)\"\n (onClick)=\"handleBlockChange($event)\"\n (onSwatchHover)=\"onSwatchHover.emit($event)\"\n ></color-circle-swatch>\n </div>\n ","styles":["\n .circle-picker {\n display: flex;\n flex-wrap: wrap;\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":56,"character":19},"member":"OnPush"},"preserveWhitespaces":false,"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":60,"character":15},"useExisting":{"__symbolic":"reference","name":"CircleComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":65,"character":15},"useExisting":{"__symbolic":"reference","name":"CircleComponent"}}]}]}],"members":{"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}}]}],"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"circleSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"circleSpacing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"isActive":[{"__symbolic":"method"}],"handleBlockChange":[{"__symbolic":"method"}],"handleValueChange":[{"__symbolic":"method"}]}},"ColorCircleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":116,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CircleComponent"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"CircleComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":119,"character":12},{"__symbolic":"reference","module":"ngx-color","name":"SwatchModule","line":119,"character":26}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"color-circle-swatch","template":"\n <div class=\"circle-swatch\"\n [style.width.px]=\"circleSize\" [style.height.px]=\"circleSize\"\n [style.margin-right.px]=\"circleSpacing\" [style.margin-bottom.px]=\"circleSpacing\"\n >\n <color-swatch\n [color]=\"color\" [style]=\"swatchStyle\" [focus]=\"focus\" [focusStyle]=\"focusStyle\"\n (onClick)=\"handleClick($event)\" (onHover)=\"onSwatchHover.emit($event)\">\n </color-swatch>\n <div class=\"clear\"></div>\n </div>\n ","styles":["\n .circle-swatch {\n transform: scale(1);\n transition: transform 100ms ease;\n }\n .circle-swatch:hover {\n transform: scale(1.2);\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":34,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"circleSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"circleSpacing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":3}}]}],"onSwatchHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":3}}]}],"ngOnChanges":[{"__symbolic":"method"}],"handleClick":[{"__symbolic":"method"}]}}},"origins":{"CircleComponent":"./circle.component","ColorCircleModule":"./circle.component","ɵa":"./circle-swatch.component"},"importAs":"ngx-color/circle"}
|