ngx-color 7.1.0 → 7.3.2
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/esm2020/chrome/chrome.component.mjs +249 -0
- 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/esm2020/twitter/twitter.component.mjs +255 -0
- 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 +132 -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 -400
- package/alpha/bundles/ngx-color-alpha.umd.js.map +0 -1
- package/alpha/esm2015/alpha-picker.component.js +0 -80
- package/alpha/esm2015/ngx-color-alpha.js +0 -5
- package/alpha/fesm2015/ngx-color-alpha.js +0 -87
- 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 -468
- 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 -147
- package/block/esm2015/ngx-color-block.js +0 -6
- package/block/fesm2015/ngx-color-block.js +0 -210
- 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 -539
- 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 -169
- package/chrome/esm2015/ngx-color-chrome.js +0 -6
- package/chrome/fesm2015/ngx-color-chrome.js +0 -428
- 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 -465
- 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 -105
- package/circle/esm2015/ngx-color-circle.js +0 -6
- package/circle/fesm2015/ngx-color-circle.js +0 -173
- 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 -575
- 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 -131
- package/compact/esm2015/ngx-color-compact.js +0 -7
- package/compact/fesm2015/ngx-color-compact.js +0 -344
- 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 -443
- 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 -142
- package/github/esm2015/ngx-color-github.js +0 -6
- package/github/fesm2015/ngx-color-github.js +0 -195
- 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 -403
- package/hue/bundles/ngx-color-hue.umd.js.map +0 -1
- package/hue/esm2015/hue-picker.component.js +0 -78
- package/hue/esm2015/ngx-color-hue.js +0 -5
- package/hue/fesm2015/ngx-color-hue.js +0 -85
- 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 -451
- package/material/bundles/ngx-color-material.umd.js.map +0 -1
- package/material/esm2015/material.component.js +0 -157
- package/material/esm2015/ngx-color-material.js +0 -5
- package/material/fesm2015/ngx-color-material.js +0 -164
- 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 -567
- 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 -177
- package/photoshop/fesm2015/ngx-color-photoshop.js +0 -460
- 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 -395
- 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 -71
- package/shade/fesm2015/ngx-color-shade.js +0 -78
- 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 -581
- 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 -199
- package/sketch/fesm2015/ngx-color-sketch.js +0 -458
- 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 -466
- 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 -77
- package/slider/fesm2015/ngx-color-slider.js +0 -229
- 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 -608
- 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 -213
- package/swatches/fesm2015/ngx-color-swatches.js +0 -347
- 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 -429
- package/twitter/bundles/ngx-color-twitter.umd.js.map +0 -1
- package/twitter/esm2015/ngx-color-twitter.js +0 -5
- package/twitter/esm2015/twitter.component.js +0 -203
- package/twitter/fesm2015/ngx-color-twitter.js +0 -210
- package/twitter/fesm2015/ngx-color-twitter.js.map +0 -1
- package/twitter/ngx-color-twitter.metadata.json +0 -1
@@ -0,0 +1,85 @@
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
|
2
|
+
import * as i0 from "@angular/core";
|
3
|
+
import * as i1 from "ngx-color";
|
4
|
+
export class CircleSwatchComponent {
|
5
|
+
constructor() {
|
6
|
+
this.circleSize = 28;
|
7
|
+
this.circleSpacing = 14;
|
8
|
+
this.focus = false;
|
9
|
+
this.onClick = new EventEmitter();
|
10
|
+
this.onSwatchHover = new EventEmitter();
|
11
|
+
this.focusStyle = {};
|
12
|
+
this.swatchStyle = {
|
13
|
+
borderRadius: '50%',
|
14
|
+
background: 'transparent',
|
15
|
+
transition: '100ms box-shadow ease 0s',
|
16
|
+
};
|
17
|
+
}
|
18
|
+
ngOnChanges() {
|
19
|
+
this.swatchStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}`;
|
20
|
+
this.focusStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}, 0 0 5px ${this.color}`;
|
21
|
+
if (this.focus) {
|
22
|
+
this.focusStyle.boxShadow = `inset 0 0 0 3px ${this.color}, 0 0 5px ${this.color}`;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
handleClick({ hex, $event }) {
|
26
|
+
this.onClick.emit({ hex, $event });
|
27
|
+
}
|
28
|
+
}
|
29
|
+
CircleSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CircleSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
30
|
+
CircleSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: CircleSwatchComponent, selector: "color-circle-swatch", inputs: { color: "color", circleSize: "circleSize", circleSpacing: "circleSpacing", focus: "focus" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, usesOnChanges: true, ngImport: i0, template: `
|
31
|
+
<div class="circle-swatch"
|
32
|
+
[style.width.px]="circleSize" [style.height.px]="circleSize"
|
33
|
+
[style.margin-right.px]="circleSpacing" [style.margin-bottom.px]="circleSpacing"
|
34
|
+
>
|
35
|
+
<color-swatch
|
36
|
+
[color]="color" [style]="swatchStyle" [focus]="focus" [focusStyle]="focusStyle"
|
37
|
+
(onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)">
|
38
|
+
</color-swatch>
|
39
|
+
<div class="clear"></div>
|
40
|
+
</div>
|
41
|
+
`, isInline: true, styles: [".circle-swatch{transform:scale(1);transition:transform .1s ease}.circle-swatch:hover{transform:scale(1.2)}\n"], components: [{ type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
42
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CircleSwatchComponent, decorators: [{
|
43
|
+
type: Component,
|
44
|
+
args: [{
|
45
|
+
selector: 'color-circle-swatch',
|
46
|
+
template: `
|
47
|
+
<div class="circle-swatch"
|
48
|
+
[style.width.px]="circleSize" [style.height.px]="circleSize"
|
49
|
+
[style.margin-right.px]="circleSpacing" [style.margin-bottom.px]="circleSpacing"
|
50
|
+
>
|
51
|
+
<color-swatch
|
52
|
+
[color]="color" [style]="swatchStyle" [focus]="focus" [focusStyle]="focusStyle"
|
53
|
+
(onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)">
|
54
|
+
</color-swatch>
|
55
|
+
<div class="clear"></div>
|
56
|
+
</div>
|
57
|
+
`,
|
58
|
+
styles: [
|
59
|
+
`
|
60
|
+
.circle-swatch {
|
61
|
+
transform: scale(1);
|
62
|
+
transition: transform 100ms ease;
|
63
|
+
}
|
64
|
+
.circle-swatch:hover {
|
65
|
+
transform: scale(1.2);
|
66
|
+
}
|
67
|
+
`,
|
68
|
+
],
|
69
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
70
|
+
preserveWhitespaces: false,
|
71
|
+
}]
|
72
|
+
}], propDecorators: { color: [{
|
73
|
+
type: Input
|
74
|
+
}], circleSize: [{
|
75
|
+
type: Input
|
76
|
+
}], circleSpacing: [{
|
77
|
+
type: Input
|
78
|
+
}], focus: [{
|
79
|
+
type: Input
|
80
|
+
}], onClick: [{
|
81
|
+
type: Output
|
82
|
+
}], onSwatchHover: [{
|
83
|
+
type: Output
|
84
|
+
}] } });
|
85
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2lyY2xlLXN3YXRjaC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2NpcmNsZS9jaXJjbGUtc3dhdGNoLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQzs7O0FBOEJ2QixNQUFNLE9BQU8scUJBQXFCO0lBNUJsQztRQThCVyxlQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ2hCLGtCQUFhLEdBQUcsRUFBRSxDQUFDO1FBQ25CLFVBQUssR0FBRyxLQUFLLENBQUM7UUFDYixZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUNsQyxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFDbEQsZUFBVSxHQUEyQixFQUFFLENBQUM7UUFDeEMsZ0JBQVcsR0FBMkI7WUFDcEMsWUFBWSxFQUFFLEtBQUs7WUFDbkIsVUFBVSxFQUFFLGFBQWE7WUFDekIsVUFBVSxFQUFFLDBCQUEwQjtTQUN2QyxDQUFDO0tBWUg7SUFWQyxXQUFXO1FBQ1QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxTQUFTLEdBQUcsZUFBZSxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsTUFBTSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDbEYsSUFBSSxDQUFDLFVBQVUsQ0FBQyxTQUFTLEdBQUcsZUFBZ0IsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFFLE1BQU8sSUFBSSxDQUFDLEtBQU0sYUFBYyxJQUFJLENBQUMsS0FBTSxFQUFFLENBQUM7UUFDOUcsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2QsSUFBSSxDQUFDLFVBQVUsQ0FBQyxTQUFTLEdBQUcsbUJBQW9CLElBQUksQ0FBQyxLQUFNLGFBQWMsSUFBSSxDQUFDLEtBQU0sRUFBRSxDQUFDO1NBQ3hGO0lBQ0gsQ0FBQztJQUNELFdBQVcsQ0FBQyxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUU7UUFDekIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQztJQUNyQyxDQUFDOztrSEF2QlUscUJBQXFCO3NHQUFyQixxQkFBcUIsdVBBMUJ0Qjs7Ozs7Ozs7Ozs7R0FXVDsyRkFlVSxxQkFBcUI7a0JBNUJqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7R0FXVDtvQkFDRCxNQUFNLEVBQUU7d0JBQ047Ozs7Ozs7O0dBUUQ7cUJBQ0E7b0JBQ0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLG1CQUFtQixFQUFFLEtBQUs7aUJBQzNCOzhCQUVVLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNJLE9BQU87c0JBQWhCLE1BQU07Z0JBQ0csYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3ItY2lyY2xlLXN3YXRjaCcsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJjaXJjbGUtc3dhdGNoXCJcbiAgICBbc3R5bGUud2lkdGgucHhdPVwiY2lyY2xlU2l6ZVwiIFtzdHlsZS5oZWlnaHQucHhdPVwiY2lyY2xlU2l6ZVwiXG4gICAgW3N0eWxlLm1hcmdpbi1yaWdodC5weF09XCJjaXJjbGVTcGFjaW5nXCIgW3N0eWxlLm1hcmdpbi1ib3R0b20ucHhdPVwiY2lyY2xlU3BhY2luZ1wiXG4gICAgPlxuICAgIDxjb2xvci1zd2F0Y2hcbiAgICAgIFtjb2xvcl09XCJjb2xvclwiIFtzdHlsZV09XCJzd2F0Y2hTdHlsZVwiIFtmb2N1c109XCJmb2N1c1wiIFtmb2N1c1N0eWxlXT1cImZvY3VzU3R5bGVcIlxuICAgICAgKG9uQ2xpY2spPVwiaGFuZGxlQ2xpY2soJGV2ZW50KVwiIChvbkhvdmVyKT1cIm9uU3dhdGNoSG92ZXIuZW1pdCgkZXZlbnQpXCI+XG4gICAgPC9jb2xvci1zd2F0Y2g+XG4gICAgPGRpdiBjbGFzcz1cImNsZWFyXCI+PC9kaXY+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gIC5jaXJjbGUtc3dhdGNoIHtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDEpO1xuICAgIHRyYW5zaXRpb246IHRyYW5zZm9ybSAxMDBtcyBlYXNlO1xuICB9XG4gIC5jaXJjbGUtc3dhdGNoOmhvdmVyIHtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDEuMik7XG4gIH1cbiAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxufSlcbmV4cG9ydCBjbGFzcyBDaXJjbGVTd2F0Y2hDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBjb2xvciE6IHN0cmluZztcbiAgQElucHV0KCkgY2lyY2xlU2l6ZSA9IDI4O1xuICBASW5wdXQoKSBjaXJjbGVTcGFjaW5nID0gMTQ7XG4gIEBJbnB1dCgpIGZvY3VzID0gZmFsc2U7XG4gIEBPdXRwdXQoKSBvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBPdXRwdXQoKSBvblN3YXRjaEhvdmVyID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIGZvY3VzU3R5bGU6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7fTtcbiAgc3dhdGNoU3R5bGU6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7XG4gICAgYm9yZGVyUmFkaXVzOiAnNTAlJyxcbiAgICBiYWNrZ3JvdW5kOiAndHJhbnNwYXJlbnQnLFxuICAgIHRyYW5zaXRpb246ICcxMDBtcyBib3gtc2hhZG93IGVhc2UgMHMnLFxuICB9O1xuXG4gIG5nT25DaGFuZ2VzKCkge1xuICAgIHRoaXMuc3dhdGNoU3R5bGUuYm94U2hhZG93ID0gYGluc2V0IDAgMCAwICR7dGhpcy5jaXJjbGVTaXplIC8gMn1weCAke3RoaXMuY29sb3J9YDtcbiAgICB0aGlzLmZvY3VzU3R5bGUuYm94U2hhZG93ID0gYGluc2V0IDAgMCAwICR7IHRoaXMuY2lyY2xlU2l6ZSAvIDIgfXB4ICR7IHRoaXMuY29sb3IgfSwgMCAwIDVweCAkeyB0aGlzLmNvbG9yIH1gO1xuICAgIGlmICh0aGlzLmZvY3VzKSB7XG4gICAgICB0aGlzLmZvY3VzU3R5bGUuYm94U2hhZG93ID0gYGluc2V0IDAgMCAwIDNweCAkeyB0aGlzLmNvbG9yIH0sIDAgMCA1cHggJHsgdGhpcy5jb2xvciB9YDtcbiAgICB9XG4gIH1cbiAgaGFuZGxlQ2xpY2soeyBoZXgsICRldmVudCB9KSB7XG4gICAgdGhpcy5vbkNsaWNrLmVtaXQoeyBoZXgsICRldmVudCB9KTtcbiAgfVxufVxuIl19
|
@@ -0,0 +1,148 @@
|
|
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
|
+
import * as i0 from "@angular/core";
|
9
|
+
import * as i1 from "@angular/common";
|
10
|
+
export class CircleComponent extends ColorWrap {
|
11
|
+
constructor() {
|
12
|
+
super();
|
13
|
+
/** Pixel value for picker width */
|
14
|
+
this.width = 252;
|
15
|
+
/** Color squares to display */
|
16
|
+
this.colors = [
|
17
|
+
red['500'],
|
18
|
+
pink['500'],
|
19
|
+
purple['500'],
|
20
|
+
deepPurple['500'],
|
21
|
+
indigo['500'],
|
22
|
+
blue['500'],
|
23
|
+
lightBlue['500'],
|
24
|
+
cyan['500'],
|
25
|
+
teal['500'],
|
26
|
+
green['500'],
|
27
|
+
lightGreen['500'],
|
28
|
+
lime['500'],
|
29
|
+
yellow['500'],
|
30
|
+
amber['500'],
|
31
|
+
orange['500'],
|
32
|
+
deepOrange['500'],
|
33
|
+
brown['500'],
|
34
|
+
blueGrey['500'],
|
35
|
+
];
|
36
|
+
/** Value for circle size */
|
37
|
+
this.circleSize = 28;
|
38
|
+
/** Value for spacing between circles */
|
39
|
+
this.circleSpacing = 14;
|
40
|
+
}
|
41
|
+
isActive(color) {
|
42
|
+
return new TinyColor(this.hex).equals(color);
|
43
|
+
}
|
44
|
+
handleBlockChange({ hex, $event }) {
|
45
|
+
if (isValidHex(hex)) {
|
46
|
+
this.handleChange({ hex, source: 'hex' }, $event);
|
47
|
+
}
|
48
|
+
}
|
49
|
+
handleValueChange({ data, $event }) {
|
50
|
+
this.handleChange(data, $event);
|
51
|
+
}
|
52
|
+
}
|
53
|
+
CircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
54
|
+
CircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: CircleComponent, selector: "color-circle", inputs: { width: "width", colors: "colors", circleSize: "circleSize", circleSpacing: "circleSpacing" }, providers: [
|
55
|
+
{
|
56
|
+
provide: NG_VALUE_ACCESSOR,
|
57
|
+
useExisting: forwardRef(() => CircleComponent),
|
58
|
+
multi: true,
|
59
|
+
},
|
60
|
+
{
|
61
|
+
provide: ColorWrap,
|
62
|
+
useExisting: forwardRef(() => CircleComponent),
|
63
|
+
},
|
64
|
+
], usesInheritance: true, ngImport: i0, template: `
|
65
|
+
<div
|
66
|
+
class="circle-picker {{ className }}"
|
67
|
+
[style.width.px]="width"
|
68
|
+
[style.margin-right.px]="-circleSpacing"
|
69
|
+
[style.margin-bottom.px]="-circleSpacing"
|
70
|
+
>
|
71
|
+
<color-circle-swatch
|
72
|
+
*ngFor="let color of colors"
|
73
|
+
[circleSize]="circleSize"
|
74
|
+
[circleSpacing]="circleSpacing"
|
75
|
+
[color]="color"
|
76
|
+
[focus]="isActive(color)"
|
77
|
+
(onClick)="handleBlockChange($event)"
|
78
|
+
(onSwatchHover)="onSwatchHover.emit($event)"
|
79
|
+
></color-circle-swatch>
|
80
|
+
</div>
|
81
|
+
`, isInline: true, styles: [".circle-picker{display:flex;flex-wrap:wrap}\n"], components: [{ type: i0.forwardRef(function () { return CircleSwatchComponent; }), selector: "color-circle-swatch", inputs: ["color", "circleSize", "circleSpacing", "focus"], outputs: ["onClick", "onSwatchHover"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CircleComponent, decorators: [{
|
83
|
+
type: Component,
|
84
|
+
args: [{
|
85
|
+
selector: 'color-circle',
|
86
|
+
template: `
|
87
|
+
<div
|
88
|
+
class="circle-picker {{ className }}"
|
89
|
+
[style.width.px]="width"
|
90
|
+
[style.margin-right.px]="-circleSpacing"
|
91
|
+
[style.margin-bottom.px]="-circleSpacing"
|
92
|
+
>
|
93
|
+
<color-circle-swatch
|
94
|
+
*ngFor="let color of colors"
|
95
|
+
[circleSize]="circleSize"
|
96
|
+
[circleSpacing]="circleSpacing"
|
97
|
+
[color]="color"
|
98
|
+
[focus]="isActive(color)"
|
99
|
+
(onClick)="handleBlockChange($event)"
|
100
|
+
(onSwatchHover)="onSwatchHover.emit($event)"
|
101
|
+
></color-circle-swatch>
|
102
|
+
</div>
|
103
|
+
`,
|
104
|
+
styles: [
|
105
|
+
`
|
106
|
+
.circle-picker {
|
107
|
+
display: flex;
|
108
|
+
flex-wrap: wrap;
|
109
|
+
}
|
110
|
+
`,
|
111
|
+
],
|
112
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
113
|
+
preserveWhitespaces: false,
|
114
|
+
providers: [
|
115
|
+
{
|
116
|
+
provide: NG_VALUE_ACCESSOR,
|
117
|
+
useExisting: forwardRef(() => CircleComponent),
|
118
|
+
multi: true,
|
119
|
+
},
|
120
|
+
{
|
121
|
+
provide: ColorWrap,
|
122
|
+
useExisting: forwardRef(() => CircleComponent),
|
123
|
+
},
|
124
|
+
]
|
125
|
+
}]
|
126
|
+
}], ctorParameters: function () { return []; }, propDecorators: { width: [{
|
127
|
+
type: Input
|
128
|
+
}], colors: [{
|
129
|
+
type: Input
|
130
|
+
}], circleSize: [{
|
131
|
+
type: Input
|
132
|
+
}], circleSpacing: [{
|
133
|
+
type: Input
|
134
|
+
}] } });
|
135
|
+
export class ColorCircleModule {
|
136
|
+
}
|
137
|
+
ColorCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
138
|
+
ColorCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, declarations: [CircleComponent, CircleSwatchComponent], imports: [CommonModule, SwatchModule], exports: [CircleComponent, CircleSwatchComponent] });
|
139
|
+
ColorCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, imports: [[CommonModule, SwatchModule]] });
|
140
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, decorators: [{
|
141
|
+
type: NgModule,
|
142
|
+
args: [{
|
143
|
+
declarations: [CircleComponent, CircleSwatchComponent],
|
144
|
+
exports: [CircleComponent, CircleSwatchComponent],
|
145
|
+
imports: [CommonModule, SwatchModule],
|
146
|
+
}]
|
147
|
+
}] });
|
148
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2lyY2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY2lyY2xlL2NpcmNsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEcsT0FBTyxFQUNMLEtBQUssRUFDTCxJQUFJLEVBQ0osUUFBUSxFQUNSLEtBQUssRUFDTCxJQUFJLEVBQ0osVUFBVSxFQUNWLFVBQVUsRUFDVixLQUFLLEVBQ0wsTUFBTSxFQUNOLFNBQVMsRUFDVCxVQUFVLEVBQ1YsSUFBSSxFQUNKLE1BQU0sRUFDTixJQUFJLEVBQ0osTUFBTSxFQUNOLEdBQUcsRUFDSCxJQUFJLEVBQ0osTUFBTSxHQUNQLE1BQU0saUJBQWlCLENBQUM7QUFDekIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRTVDLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNoRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBNENuRCxNQUFNLE9BQU8sZUFBZ0IsU0FBUSxTQUFTO0lBOEI1QztRQUNFLEtBQUssRUFBRSxDQUFDO1FBOUJWLG1DQUFtQztRQUMxQixVQUFLLEdBQW9CLEdBQUcsQ0FBQztRQUN0QywrQkFBK0I7UUFFL0IsV0FBTSxHQUFhO1lBQ2pCLEdBQUcsQ0FBQyxLQUFLLENBQUM7WUFDVixJQUFJLENBQUMsS0FBSyxDQUFDO1lBQ1gsTUFBTSxDQUFDLEtBQUssQ0FBQztZQUNiLFVBQVUsQ0FBQyxLQUFLLENB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bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsZUFBZSxFQUFFLHFCQUFxQixDQUFDO29CQUN0RCxPQUFPLEVBQUUsQ0FBQyxlQUFlLEVBQUUscUJBQXFCLENBQUM7b0JBQ2pELE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxZQUFZLENBQUM7aUJBQ3RDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGZvcndhcmRSZWYsIElucHV0LCBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgYW1iZXIsXG4gIGJsdWUsXG4gIGJsdWVHcmV5LFxuICBicm93bixcbiAgY3lhbixcbiAgZGVlcE9yYW5nZSxcbiAgZGVlcFB1cnBsZSxcbiAgZ3JlZW4sXG4gIGluZGlnbyxcbiAgbGlnaHRCbHVlLFxuICBsaWdodEdyZWVuLFxuICBsaW1lLFxuICBvcmFuZ2UsXG4gIHBpbmssXG4gIHB1cnBsZSxcbiAgcmVkLFxuICB0ZWFsLFxuICB5ZWxsb3csXG59IGZyb20gJ21hdGVyaWFsLWNvbG9ycyc7XG5pbXBvcnQgeyBUaW55Q29sb3IgfSBmcm9tICdAY3RybC90aW55Y29sb3InO1xuXG5pbXBvcnQgeyBDb2xvcldyYXAsIGlzVmFsaWRIZXgsIFN3YXRjaE1vZHVsZSB9IGZyb20gJ25neC1jb2xvcic7XG5pbXBvcnQgeyBDaXJjbGVTd2F0Y2hDb21wb25lbnQgfSBmcm9tICcuL2NpcmNsZS1zd2F0Y2guY29tcG9uZW50JztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1jaXJjbGUnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiY2lyY2xlLXBpY2tlciB7eyBjbGFzc05hbWUgfX1cIlxuICAgICAgW3N0eWxlLndpZHRoLnB4XT1cIndpZHRoXCJcbiAgICAgIFtzdHlsZS5tYXJnaW4tcmlnaHQucHhdPVwiLWNpcmNsZVNwYWNpbmdcIlxuICAgICAgW3N0eWxlLm1hcmdpbi1ib3R0b20ucHhdPVwiLWNpcmNsZVNwYWNpbmdcIlxuICAgID5cbiAgICAgIDxjb2xvci1jaXJjbGUtc3dhdGNoXG4gICAgICAgICpuZ0Zvcj1cImxldCBjb2xvciBvZiBjb2xvcnNcIlxuICAgICAgICBbY2lyY2xlU2l6ZV09XCJjaXJjbGVTaXplXCJcbiAgICAgICAgW2NpcmNsZVNwYWNpbmddPVwiY2lyY2xlU3BhY2luZ1wiXG4gICAgICAgIFtjb2xvcl09XCJjb2xvclwiXG4gICAgICAgIFtmb2N1c109XCJpc0FjdGl2ZShjb2xvcilcIlxuICAgICAgICAob25DbGljayk9XCJoYW5kbGVCbG9ja0NoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgKG9uU3dhdGNoSG92ZXIpPVwib25Td2F0Y2hIb3Zlci5lbWl0KCRldmVudClcIlxuICAgICAgPjwvY29sb3ItY2lyY2xlLXN3YXRjaD5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgICAgLmNpcmNsZS1waWNrZXIge1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBmbGV4LXdyYXA6IHdyYXA7XG4gICAgICB9XG4gICAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IENpcmNsZUNvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IENvbG9yV3JhcCxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IENpcmNsZUNvbXBvbmVudCksXG4gICAgfSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBDaXJjbGVDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAge1xuICAvKiogUGl4ZWwgdmFsdWUgZm9yIHBpY2tlciB3aWR0aCAqL1xuICBASW5wdXQoKSB3aWR0aDogc3RyaW5nIHwgbnVtYmVyID0gMjUyO1xuICAvKiogQ29sb3Igc3F1YXJlcyB0byBkaXNwbGF5ICovXG4gIEBJbnB1dCgpXG4gIGNvbG9yczogc3RyaW5nW10gPSBbXG4gICAgcmVkWyc1MDAnXSxcbiAgICBwaW5rWyc1MDAnXSxcbiAgICBwdXJwbGVbJzUwMCddLFxuICAgIGRlZXBQdXJwbGVbJzUwMCddLFxuICAgIGluZGlnb1snNTAwJ10sXG4gICAgYmx1ZVsnNTAwJ10sXG4gICAgbGlnaHRCbHVlWyc1MDAnXSxcbiAgICBjeWFuWyc1MDAnXSxcbiAgICB0ZWFsWyc1MDAnXSxcbiAgICBncmVlblsnNTAwJ10sXG4gICAgbGlnaHRHcmVlblsnNTAwJ10sXG4gICAgbGltZVsnNTAwJ10sXG4gICAgeWVsbG93Wyc1MDAnXSxcbiAgICBhbWJlclsnNTAwJ10sXG4gICAgb3JhbmdlWyc1MDAnXSxcbiAgICBkZWVwT3JhbmdlWyc1MDAnXSxcbiAgICBicm93blsnNTAwJ10sXG4gICAgYmx1ZUdyZXlbJzUwMCddLFxuICBdO1xuICAvKiogVmFsdWUgZm9yIGNpcmNsZSBzaXplICovXG4gIEBJbnB1dCgpIGNpcmNsZVNpemUgPSAyODtcbiAgLyoqIFZhbHVlIGZvciBzcGFjaW5nIGJldHdlZW4gY2lyY2xlcyAqL1xuICBASW5wdXQoKSBjaXJjbGVTcGFjaW5nID0gMTQ7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuICBpc0FjdGl2ZShjb2xvcjogc3RyaW5nKSB7XG4gICAgcmV0dXJuIG5ldyBUaW55Q29sb3IodGhpcy5oZXgpLmVxdWFscyhjb2xvcik7XG4gIH1cbiAgaGFuZGxlQmxvY2tDaGFuZ2UoeyBoZXgsICRldmVudCB9OiB7IGhleDogc3RyaW5nLCAkZXZlbnQ6IEV2ZW50IH0pIHtcbiAgICBpZiAoaXNWYWxpZEhleChoZXgpKSB7XG4gICAgICB0aGlzLmhhbmRsZUNoYW5nZSh7IGhleCwgc291cmNlOiAnaGV4JyB9LCAkZXZlbnQpO1xuICAgIH1cbiAgfVxuICBoYW5kbGVWYWx1ZUNoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgdGhpcy5oYW5kbGVDaGFuZ2UoZGF0YSwgJGV2ZW50KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtDaXJjbGVDb21wb25lbnQsIENpcmNsZVN3YXRjaENvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtDaXJjbGVDb21wb25lbnQsIENpcmNsZVN3YXRjaENvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFN3YXRjaE1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIENvbG9yQ2lyY2xlTW9kdWxlIHt9XG4iXX0=
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/**
|
2
|
+
* Generated bundle index. Do not edit.
|
3
|
+
*/
|
4
|
+
export * from './public_api';
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLWNpcmNsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY2lyY2xlL25neC1jb2xvci1jaXJjbGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWNfYXBpJztcbiJdfQ==
|
@@ -0,0 +1,3 @@
|
|
1
|
+
export { CircleSwatchComponent } from './circle-swatch.component';
|
2
|
+
export { CircleComponent, ColorCircleModule } from './circle.component';
|
3
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY2lyY2xlL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGVBQWUsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgQ2lyY2xlU3dhdGNoQ29tcG9uZW50IH0gZnJvbSAnLi9jaXJjbGUtc3dhdGNoLmNvbXBvbmVudCc7XG5leHBvcnQgeyBDaXJjbGVDb21wb25lbnQsIENvbG9yQ2lyY2xlTW9kdWxlIH0gZnJvbSAnLi9jaXJjbGUuY29tcG9uZW50JztcbiJdfQ==
|
@@ -0,0 +1,163 @@
|
|
1
|
+
import { CommonModule } from '@angular/common';
|
2
|
+
import { Component, EventEmitter, forwardRef, Input, isDevMode, NgModule, Output, } from '@angular/core';
|
3
|
+
import { Subscription } from 'rxjs';
|
4
|
+
import { debounceTime, tap } from 'rxjs/operators';
|
5
|
+
import { simpleCheckForValidColor, toState } from './helpers/color';
|
6
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
7
|
+
import * as i0 from "@angular/core";
|
8
|
+
export var ColorMode;
|
9
|
+
(function (ColorMode) {
|
10
|
+
ColorMode["HEX"] = "hex";
|
11
|
+
ColorMode["HSL"] = "hsl";
|
12
|
+
ColorMode["HSV"] = "hsv";
|
13
|
+
ColorMode["RGB"] = "rgb";
|
14
|
+
})(ColorMode || (ColorMode = {}));
|
15
|
+
export class ColorWrap {
|
16
|
+
constructor() {
|
17
|
+
/**
|
18
|
+
* Descriptors the return color format if the component is used with two-way binding
|
19
|
+
*/
|
20
|
+
this.mode = ColorMode.HEX;
|
21
|
+
this.color = {
|
22
|
+
h: 250,
|
23
|
+
s: 0.5,
|
24
|
+
l: 0.2,
|
25
|
+
a: 1,
|
26
|
+
};
|
27
|
+
this.colorChange = new EventEmitter();
|
28
|
+
this.onChange = new EventEmitter();
|
29
|
+
this.onChangeComplete = new EventEmitter();
|
30
|
+
this.onSwatchHover = new EventEmitter();
|
31
|
+
this._onChangeCompleteSubscription = new Subscription();
|
32
|
+
this._onSwatchHoverSubscription = new Subscription();
|
33
|
+
}
|
34
|
+
ngOnInit() {
|
35
|
+
this.changes = this.onChange
|
36
|
+
.pipe(debounceTime(100), tap(event => {
|
37
|
+
this.onChangeComplete.emit(event);
|
38
|
+
switch (this.mode) {
|
39
|
+
case ColorMode.HEX:
|
40
|
+
this.colorChange.emit(event.color.hex);
|
41
|
+
break;
|
42
|
+
case ColorMode.HSL:
|
43
|
+
this.colorChange.emit(event.color.hsl);
|
44
|
+
break;
|
45
|
+
case ColorMode.HSV:
|
46
|
+
this.colorChange.emit(event.color.hsv);
|
47
|
+
break;
|
48
|
+
case ColorMode.RGB:
|
49
|
+
this.colorChange.emit(event.color.rgb);
|
50
|
+
break;
|
51
|
+
default:
|
52
|
+
const msg = `The mode '${this.mode}' is not supported`;
|
53
|
+
if (isDevMode()) {
|
54
|
+
throw new Error(msg);
|
55
|
+
}
|
56
|
+
else {
|
57
|
+
console.warn(msg);
|
58
|
+
}
|
59
|
+
break;
|
60
|
+
}
|
61
|
+
}))
|
62
|
+
.subscribe();
|
63
|
+
this.setState(toState(this.color, 0));
|
64
|
+
this.currentColor = this.hex;
|
65
|
+
}
|
66
|
+
ngOnChanges() {
|
67
|
+
this.setState(toState(this.color, this.oldHue));
|
68
|
+
}
|
69
|
+
ngOnDestroy() {
|
70
|
+
this.changes?.unsubscribe();
|
71
|
+
this._onChangeCompleteSubscription.unsubscribe();
|
72
|
+
this._onSwatchHoverSubscription.unsubscribe();
|
73
|
+
}
|
74
|
+
setState(data) {
|
75
|
+
this.oldHue = data.oldHue;
|
76
|
+
this.hsl = data.hsl;
|
77
|
+
this.hsv = data.hsv;
|
78
|
+
this.rgb = data.rgb;
|
79
|
+
this.hex = data.hex;
|
80
|
+
this.source = data.source;
|
81
|
+
this.afterValidChange();
|
82
|
+
}
|
83
|
+
handleChange(data, $event) {
|
84
|
+
const isValidColor = simpleCheckForValidColor(data);
|
85
|
+
if (isValidColor) {
|
86
|
+
const color = toState(data, data.h || this.oldHue, this.disableAlpha);
|
87
|
+
this.setState(color);
|
88
|
+
this.onChange.emit({ color, $event });
|
89
|
+
this.afterValidChange();
|
90
|
+
}
|
91
|
+
}
|
92
|
+
/** hook for components after a complete change */
|
93
|
+
afterValidChange() { }
|
94
|
+
handleSwatchHover(data, $event) {
|
95
|
+
const isValidColor = simpleCheckForValidColor(data);
|
96
|
+
if (isValidColor) {
|
97
|
+
const color = toState(data, data.h || this.oldHue);
|
98
|
+
this.setState(color);
|
99
|
+
this.onSwatchHover.emit({ color, $event });
|
100
|
+
}
|
101
|
+
}
|
102
|
+
registerOnChange(fn) {
|
103
|
+
this._onChangeCompleteSubscription.add(this.onChangeComplete.pipe(tap(event => fn(event.color.hex))).subscribe());
|
104
|
+
}
|
105
|
+
registerOnTouched(fn) {
|
106
|
+
this._onSwatchHoverSubscription.add(this.onSwatchHover.pipe(tap(() => fn())).subscribe());
|
107
|
+
}
|
108
|
+
setDisabledState(isDisabled) { }
|
109
|
+
writeValue(hex) {
|
110
|
+
this.color = hex;
|
111
|
+
}
|
112
|
+
}
|
113
|
+
ColorWrap.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorWrap, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
114
|
+
ColorWrap.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: ColorWrap, selector: "color-wrap", inputs: { className: "className", mode: "mode", color: "color" }, outputs: { colorChange: "colorChange", onChange: "onChange", onChangeComplete: "onChangeComplete", onSwatchHover: "onSwatchHover" }, providers: [
|
115
|
+
{
|
116
|
+
provide: NG_VALUE_ACCESSOR,
|
117
|
+
useExisting: forwardRef(() => ColorWrap),
|
118
|
+
multi: true,
|
119
|
+
}
|
120
|
+
], usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
|
121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorWrap, decorators: [{
|
122
|
+
type: Component,
|
123
|
+
args: [{
|
124
|
+
// create seletor base for test override property
|
125
|
+
selector: 'color-wrap',
|
126
|
+
template: ``,
|
127
|
+
providers: [
|
128
|
+
{
|
129
|
+
provide: NG_VALUE_ACCESSOR,
|
130
|
+
useExisting: forwardRef(() => ColorWrap),
|
131
|
+
multi: true,
|
132
|
+
}
|
133
|
+
]
|
134
|
+
}]
|
135
|
+
}], propDecorators: { className: [{
|
136
|
+
type: Input
|
137
|
+
}], mode: [{
|
138
|
+
type: Input
|
139
|
+
}], color: [{
|
140
|
+
type: Input
|
141
|
+
}], colorChange: [{
|
142
|
+
type: Output
|
143
|
+
}], onChange: [{
|
144
|
+
type: Output
|
145
|
+
}], onChangeComplete: [{
|
146
|
+
type: Output
|
147
|
+
}], onSwatchHover: [{
|
148
|
+
type: Output
|
149
|
+
}] } });
|
150
|
+
export class ColorWrapModule {
|
151
|
+
}
|
152
|
+
ColorWrapModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorWrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
153
|
+
ColorWrapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorWrapModule, declarations: [ColorWrap], imports: [CommonModule], exports: [ColorWrap] });
|
154
|
+
ColorWrapModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorWrapModule, imports: [[CommonModule]] });
|
155
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorWrapModule, decorators: [{
|
156
|
+
type: NgModule,
|
157
|
+
args: [{
|
158
|
+
declarations: [ColorWrap],
|
159
|
+
exports: [ColorWrap],
|
160
|
+
imports: [CommonModule],
|
161
|
+
}]
|
162
|
+
}] });
|
163
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3Itd3JhcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbG9yLXdyYXAuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixVQUFVLEVBQ1YsS0FBSyxFQUNMLFNBQVMsRUFDVCxRQUFRLEVBSVIsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDcEMsT0FBTyxFQUFFLFlBQVksRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUVuRCxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFcEUsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQU96RSxNQUFNLENBQU4sSUFBWSxTQUtYO0FBTEQsV0FBWSxTQUFTO0lBQ25CLHdCQUFXLENBQUE7SUFDWCx3QkFBVyxDQUFBO0lBQ1gsd0JBQVcsQ0FBQTtJQUNYLHdCQUFXLENBQUE7QUFDYixDQUFDLEVBTFcsU0FBUyxLQUFULFNBQVMsUUFLcEI7QUFjRCxNQUFNLE9BQU8sU0FBUztJQVp0QjtRQWVFOztXQUVHO1FBQ00sU0FBSSxHQUFjLFNBQVMsQ0FBQyxHQUFHLENBQUM7UUFFaEMsVUFBSyxHQUFnQztZQUM1QyxDQUFDLEVBQUUsR0FBRztZQUNOLENBQUMsRUFBRSxHQUFHO1lBQ04sQ0FBQyxFQUFFLEdBQUc7WUFDTixDQUFDLEVBQUUsQ0FBQztTQUNMLENBQUM7UUFDUSxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUErQixDQUFDO1FBQzlELGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBYyxDQUFDO1FBQzFDLHFCQUFnQixHQUFHLElBQUksWUFBWSxF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UUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxTQUFTLENBQUM7b0JBQ3pCLE9BQU8sRUFBRSxDQUFDLFNBQVMsQ0FBQztvQkFDcEIsT0FBTyxFQUFFLENBQUMsWUFBWSxDQUFDO2lCQUN4QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgZm9yd2FyZFJlZixcbiAgSW5wdXQsXG4gIGlzRGV2TW9kZSxcbiAgTmdNb2R1bGUsXG4gIE9uQ2hhbmdlcyxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgZGVib3VuY2VUaW1lLCB0YXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbmltcG9ydCB7IHNpbXBsZUNoZWNrRm9yVmFsaWRDb2xvciwgdG9TdGF0ZSB9IGZyb20gJy4vaGVscGVycy9jb2xvcic7XG5pbXBvcnQgeyBDb2xvciwgSFNMQSwgSFNWQSwgUkdCQSB9IGZyb20gJy4vaGVscGVycy9jb2xvci5pbnRlcmZhY2VzJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuZXhwb3J0IGludGVyZmFjZSBDb2xvckV2ZW50IHtcbiAgJGV2ZW50OiBFdmVudDtcbiAgY29sb3I6IENvbG9yO1xufVxuXG5leHBvcnQgZW51bSBDb2xvck1vZGUge1xuICBIRVggPSAnaGV4JyxcbiAgSFNMID0gJ2hzbCcsXG4gIEhTViA9ICdoc3YnLFxuICBSR0IgPSAncmdiJ1xufVxuXG5AQ29tcG9uZW50KHtcbiAgLy8gY3JlYXRlIHNlbGV0b3IgYmFzZSBmb3IgdGVzdCBvdmVycmlkZSBwcm9wZXJ0eVxuICBzZWxlY3RvcjogJ2NvbG9yLXdyYXAnLFxuICB0ZW1wbGF0ZTogYGAsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ29sb3JXcmFwKSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH1cbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBDb2xvcldyYXAgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95LCBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIEBJbnB1dCgpIGNsYXNzTmFtZT86IHN0cmluZztcblxuICAvKipcbiAgICogRGVzY3JpcHRvcnMgdGhlIHJldHVybiBjb2xvciBmb3JtYXQgaWYgdGhlIGNvbXBvbmVudCBpcyB1c2VkIHdpdGggdHdvLXdheSBiaW5kaW5nXG4gICAqL1xuICBASW5wdXQoKSBtb2RlOiBDb2xvck1vZGUgPSBDb2xvck1vZGUuSEVYO1xuXG4gIEBJbnB1dCgpIGNvbG9yOiBIU0xBIHwgSFNWQSB8IFJHQkEgfCBzdHJpbmcgPSB7XG4gICAgaDogMjUwLFxuICAgIHM6IDAuNSxcbiAgICBsOiAwLjIsXG4gICAgYTogMSxcbiAgfTtcbiAgQE91dHB1dCgpIGNvbG9yQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxIU0xBIHwgSFNWQSB8IFJHQkEgfCBzdHJpbmc+KCk7XG4gIEBPdXRwdXQoKSBvbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Q29sb3JFdmVudD4oKTtcbiAgQE91dHB1dCgpIG9uQ2hhbmdlQ29tcGxldGUgPSBuZXcgRXZlbnRFbWl0dGVyPENvbG9yRXZlbnQ+KCk7XG4gIEBPdXRwdXQoKSBvblN3YXRjaEhvdmVyID0gbmV3IEV2ZW50RW1pdHRlcjxDb2xvckV2ZW50PigpO1xuICBvbGRIdWUhOiBudW1iZXI7XG4gIGhzbCE6IEhTTEE7XG4gIGhzdiE6IEhTVkE7XG4gIHJnYiE6IFJHQkE7XG4gIGhleCE6IHN0cmluZztcbiAgc291cmNlITogc3RyaW5nO1xuICBjdXJyZW50Q29sb3IhOiBzdHJpbmc7XG4gIGNoYW5nZXM/OiBTdWJzY3JpcHRpb247XG4gIGRpc2FibGVBbHBoYT86IGJvb2xlYW47XG5cbiAgcHJpdmF0ZSBfb25DaGFuZ2VDb21wbGV0ZVN1YnNjcmlwdGlvbiA9IG5ldyBTdWJzY3JpcHRpb24oKTtcbiAgcHJpdmF0ZSBfb25Td2F0Y2hIb3ZlclN1YnNjcmlwdGlvbiA9IG5ldyBTdWJzY3JpcHRpb24oKTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmNoYW5nZXMgPSB0aGlzLm9uQ2hhbmdlXG4gICAgICAucGlwZShcbiAgICAgICAgZGVib3VuY2VUaW1lKDEwMCksXG4gICAgICAgIHRhcChldmVudCA9PiB7XG4gICAgICAgICAgdGhpcy5vbkNoYW5nZUNvbXBsZXRlLmVtaXQoZXZlbnQpO1xuICAgICAgICAgIHN3aXRjaCAodGhpcy5tb2RlKSB7XG4gICAgICAgICAgICBjYXNlIENvbG9yTW9kZS5IRVg6XG4gICAgICAgICAgICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdChldmVudC5jb2xvci5oZXgpO1xuICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIGNhc2UgQ29sb3JNb2RlLkhTTDpcbiAgICAgICAgICAgICAgdGhpcy5jb2xvckNoYW5nZS5lbWl0KGV2ZW50LmNvbG9yLmhzbCk7XG4gICAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICAgICAgY2FzZSBDb2xvck1vZGUuSFNWOlxuICAgICAgICAgICAgICB0aGlzLmNvbG9yQ2hhbmdlLmVtaXQoZXZlbnQuY29sb3IuaHN2KTtcbiAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICAgICBjYXNlIENvbG9yTW9kZS5SR0I6XG4gICAgICAgICAgICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdChldmVudC5jb2xvci5yZ2IpO1xuICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIGRlZmF1bHQ6XG4gICAgICAgICAgICAgIGNvbnN0IG1zZyA9IGBUaGUgbW9kZSAnJHt0aGlzLm1vZGV9JyBpcyBub3Qgc3VwcG9ydGVkYDtcbiAgICAgICAgICAgICAgaWYgKGlzRGV2TW9kZSgpKSB7XG4gICAgICAgICAgICAgICAgdGhyb3cgbmV3IEVycm9yKG1zZyk7XG4gICAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgY29uc29sZS53YXJuKG1zZyk7XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICAgfVxuICAgICAgICB9KVxuICAgICAgKVxuICAgICAgLnN1YnNjcmliZSgpO1xuICAgIHRoaXMuc2V0U3RhdGUodG9TdGF0ZSh0aGlzLmNvbG9yLCAwKSk7XG4gICAgdGhpcy5jdXJyZW50Q29sb3IgPSB0aGlzLmhleDtcbiAgfVxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICB0aGlzLnNldFN0YXRlKHRvU3RhdGUodGhpcy5jb2xvciwgdGhpcy5vbGRIdWUpKTtcbiAgfVxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmNoYW5nZXM/LnVuc3Vic2NyaWJlKCk7XG4gICAgdGhpcy5fb25DaGFuZ2VDb21wbGV0ZVN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgIHRoaXMuX29uU3dhdGNoSG92ZXJTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgfVxuICBzZXRTdGF0ZShkYXRhKSB7XG4gICAgdGhpcy5vbGRIdWUgPSBkYXRhLm9sZEh1ZTtcbiAgICB0aGlzLmhzbCA9IGRhdGEuaHNsO1xuICAgIHRoaXMuaHN2ID0gZGF0YS5oc3Y7XG4gICAgdGhpcy5yZ2IgPSBkYXRhLnJnYjtcbiAgICB0aGlzLmhleCA9IGRhdGEuaGV4O1xuICAgIHRoaXMuc291cmNlID0gZGF0YS5zb3VyY2U7XG4gICAgdGhpcy5hZnRlclZhbGlkQ2hhbmdlKCk7XG4gIH1cbiAgaGFuZGxlQ2hhbmdlKGRhdGEsICRldmVudCkge1xuICAgIGNvbnN0IGlzVmFsaWRDb2xvciA9IHNpbXBsZUNoZWNrRm9yVmFsaWRDb2xvcihkYXRhKTtcbiAgICBpZiAoaXNWYWxpZENvbG9yKSB7XG4gICAgICBjb25zdCBjb2xvciA9IHRvU3RhdGUoZGF0YSwgZGF0YS5oIHx8IHRoaXMub2xkSHVlLCB0aGlzLmRpc2FibGVBbHBoYSk7XG4gICAgICB0aGlzLnNldFN0YXRlKGNvbG9yKTtcbiAgICAgIHRoaXMub25DaGFuZ2UuZW1pdCh7IGNvbG9yLCAkZXZlbnQgfSk7XG4gICAgICB0aGlzLmFmdGVyVmFsaWRDaGFuZ2UoKTtcbiAgICB9XG4gIH1cbiAgLyoqIGhvb2sgZm9yIGNvbXBvbmVudHMgYWZ0ZXIgYSBjb21wbGV0ZSBjaGFuZ2UgKi9cbiAgYWZ0ZXJWYWxpZENoYW5nZSgpIHt9XG5cbiAgaGFuZGxlU3dhdGNoSG92ZXIoZGF0YSwgJGV2ZW50KSB7XG4gICAgY29uc3QgaXNWYWxpZENvbG9yID0gc2ltcGxlQ2hlY2tGb3JWYWxpZENvbG9yKGRhdGEpO1xuICAgIGlmIChpc1ZhbGlkQ29sb3IpIHtcbiAgICAgIGNvbnN0IGNvbG9yID0gdG9TdGF0ZShkYXRhLCBkYXRhLmggfHwgdGhpcy5vbGRIdWUpO1xuICAgICAgdGhpcy5zZXRTdGF0ZShjb2xvcik7XG4gICAgICB0aGlzLm9uU3dhdGNoSG92ZXIuZW1pdCh7IGNvbG9yLCAkZXZlbnQgfSk7XG4gICAgfVxuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogKGhleDogc3RyaW5nKSA9PiB2b2lkKTogdm9pZCB7XG4gICAgdGhpcy5fb25DaGFuZ2VDb21wbGV0ZVN1YnNjcmlwdGlvbi5hZGQodGhpcy5vbkNoYW5nZUNvbXBsZXRlLnBpcGUoXG4gICAgICB0YXAoZXZlbnQgPT4gZm4oZXZlbnQuY29sb3IuaGV4KSksXG4gICAgKS5zdWJzY3JpYmUoKSk7XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogKCkgPT4gdm9pZCk6IHZvaWQge1xuICAgIHRoaXMuX29uU3dhdGNoSG92ZXJTdWJzY3JpcHRpb24uYWRkKHRoaXMub25Td2F0Y2hIb3Zlci5waXBlKFxuICAgICAgdGFwKCgpID0+IGZuKCkpLFxuICAgICkuc3Vic2NyaWJlKCkpO1xuICB9XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7fVxuXG4gIHdyaXRlVmFsdWUoaGV4OiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLmNvbG9yID0gaGV4O1xuICB9XG5cbn1cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbQ29sb3JXcmFwXSxcbiAgZXhwb3J0czogW0NvbG9yV3JhcF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBDb2xvcldyYXBNb2R1bGUge31cbiJdfQ==
|
@@ -0,0 +1,91 @@
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
|
2
|
+
import { getContrastingColor } from 'ngx-color';
|
3
|
+
import * as i0 from "@angular/core";
|
4
|
+
import * as i1 from "ngx-color";
|
5
|
+
export class CompactColorComponent {
|
6
|
+
constructor() {
|
7
|
+
this.onClick = new EventEmitter();
|
8
|
+
this.onSwatchHover = new EventEmitter();
|
9
|
+
this.swatchStyle = {
|
10
|
+
width: '15px',
|
11
|
+
height: '15px',
|
12
|
+
float: 'left',
|
13
|
+
marginRight: '5px',
|
14
|
+
marginBottom: '5px',
|
15
|
+
position: 'relative',
|
16
|
+
cursor: 'pointer',
|
17
|
+
};
|
18
|
+
this.swatchFocus = {};
|
19
|
+
this.getContrastingColor = getContrastingColor;
|
20
|
+
}
|
21
|
+
ngOnChanges() {
|
22
|
+
this.swatchStyle.background = this.color;
|
23
|
+
this.swatchFocus.boxShadow = `0 0 4px ${this.color}`;
|
24
|
+
if (this.color.toLowerCase() === '#ffffff') {
|
25
|
+
this.swatchStyle.boxShadow = 'inset 0 0 0 1px #ddd';
|
26
|
+
}
|
27
|
+
}
|
28
|
+
handleClick({ hex, $event }) {
|
29
|
+
this.onClick.emit({ hex, $event });
|
30
|
+
}
|
31
|
+
}
|
32
|
+
CompactColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CompactColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
33
|
+
CompactColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: CompactColorComponent, selector: "color-compact-color", inputs: { color: "color", active: "active" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, usesOnChanges: true, ngImport: i0, template: `
|
34
|
+
<div class="compact-color">
|
35
|
+
<color-swatch class="swatch"
|
36
|
+
[color]="color" [style]="swatchStyle"
|
37
|
+
[focusStyle]="swatchFocus"
|
38
|
+
(onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)"
|
39
|
+
>
|
40
|
+
<div class="compact-dot"
|
41
|
+
[class.active]="active" [style.background]="getContrastingColor(color)"
|
42
|
+
></div>
|
43
|
+
</color-swatch>
|
44
|
+
</div>
|
45
|
+
`, isInline: true, styles: [".compact-dot{position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;opacity:0}.compact-dot.active{opacity:1}\n"], components: [{ type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CompactColorComponent, decorators: [{
|
47
|
+
type: Component,
|
48
|
+
args: [{
|
49
|
+
selector: 'color-compact-color',
|
50
|
+
template: `
|
51
|
+
<div class="compact-color">
|
52
|
+
<color-swatch class="swatch"
|
53
|
+
[color]="color" [style]="swatchStyle"
|
54
|
+
[focusStyle]="swatchFocus"
|
55
|
+
(onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)"
|
56
|
+
>
|
57
|
+
<div class="compact-dot"
|
58
|
+
[class.active]="active" [style.background]="getContrastingColor(color)"
|
59
|
+
></div>
|
60
|
+
</color-swatch>
|
61
|
+
</div>
|
62
|
+
`,
|
63
|
+
styles: [
|
64
|
+
`
|
65
|
+
.compact-dot {
|
66
|
+
position: absolute;
|
67
|
+
top: 5px;
|
68
|
+
right: 5px;
|
69
|
+
bottom: 5px;
|
70
|
+
left: 5px;
|
71
|
+
border-radius: 50%;
|
72
|
+
opacity: 0;
|
73
|
+
}
|
74
|
+
.compact-dot.active {
|
75
|
+
opacity: 1;
|
76
|
+
}
|
77
|
+
`,
|
78
|
+
],
|
79
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
80
|
+
preserveWhitespaces: false,
|
81
|
+
}]
|
82
|
+
}], propDecorators: { color: [{
|
83
|
+
type: Input
|
84
|
+
}], active: [{
|
85
|
+
type: Input
|
86
|
+
}], onClick: [{
|
87
|
+
type: Output
|
88
|
+
}], onSwatchHover: [{
|
89
|
+
type: Output
|
90
|
+
}] } });
|
91
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcGFjdC1jb2xvci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2NvbXBhY3QvY29tcGFjdC1jb2xvci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFFTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sV0FBVyxDQUFDOzs7QUFvQ2hELE1BQU0sT0FBTyxxQkFBcUI7SUFsQ2xDO1FBcUNZLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ2xDLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUNsRCxnQkFBVyxHQUEyQjtZQUNwQyxLQUFLLEVBQUUsTUFBTTtZQUNiLE1BQU0sRUFBRSxNQUFNO1lBQ2QsS0FBSyxFQUFFLE1BQU07WUFDYixXQUFXLEVBQUUsS0FBSztZQUNsQixZQUFZLEVBQUUsS0FBSztZQUNuQixRQUFRLEVBQUUsVUFBVTtZQUNwQixNQUFNLEVBQUUsU0FBUztTQUNsQixDQUFDO1FBQ0YsZ0JBQVcsR0FBMkIsRUFBRSxDQUFDO1FBQ3pDLHdCQUFtQixHQUFHLG1CQUFtQixDQUFDO0tBWTNDO0lBVkMsV0FBVztRQUNULElBQUksQ0FBQyxXQUFXLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7UUFDekMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxTQUFTLEdBQUcsV0FBVyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDckQsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLFdBQVcsRUFBRSxLQUFLLFNBQVMsRUFBRTtZQUMxQyxJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsR0FBRyxzQkFBc0IsQ0FBQztTQUNyRDtJQUNILENBQUM7SUFDRCxXQUFXLENBQUMsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFO1FBQ3pCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDckMsQ0FBQzs7a0hBMUJVLHFCQUFxQjtzR0FBckIscUJBQXFCLCtMQWhDdEI7Ozs7Ozs7Ozs7OztHQVlUOzJGQW9CVSxxQkFBcUI7a0JBbENqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7O0dBWVQ7b0JBQ0QsTUFBTSxFQUFFO3dCQUNOOzs7Ozs7Ozs7Ozs7O0dBYUQ7cUJBQ0E7b0JBQ0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLG1CQUFtQixFQUFFLEtBQUs7aUJBQzNCOzhCQUVVLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTTtnQkFDRyxhQUFhO3NCQUF0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBnZXRDb250cmFzdGluZ0NvbG9yIH0gZnJvbSAnbmd4LWNvbG9yJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3ItY29tcGFjdC1jb2xvcicsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJjb21wYWN0LWNvbG9yXCI+XG4gICAgPGNvbG9yLXN3YXRjaCBjbGFzcz1cInN3YXRjaFwiXG4gICAgICBbY29sb3JdPVwiY29sb3JcIiBbc3R5bGVdPVwic3dhdGNoU3R5bGVcIlxuICAgICAgW2ZvY3VzU3R5bGVdPVwic3dhdGNoRm9jdXNcIlxuICAgICAgKG9uQ2xpY2spPVwiaGFuZGxlQ2xpY2soJGV2ZW50KVwiIChvbkhvdmVyKT1cIm9uU3dhdGNoSG92ZXIuZW1pdCgkZXZlbnQpXCJcbiAgICAgID5cbiAgICAgIDxkaXYgY2xhc3M9XCJjb21wYWN0LWRvdFwiXG4gICAgICAgIFtjbGFzcy5hY3RpdmVdPVwiYWN0aXZlXCIgW3N0eWxlLmJhY2tncm91bmRdPVwiZ2V0Q29udHJhc3RpbmdDb2xvcihjb2xvcilcIlxuICAgICAgPjwvZGl2PlxuICAgIDwvY29sb3Itc3dhdGNoPlxuICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAuY29tcGFjdC1kb3Qge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDVweDtcbiAgICByaWdodDogNXB4O1xuICAgIGJvdHRvbTogNXB4O1xuICAgIGxlZnQ6IDVweDtcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgb3BhY2l0eTogMDtcbiAgfVxuICAuY29tcGFjdC1kb3QuYWN0aXZlIHtcbiAgICBvcGFjaXR5OiAxO1xuICB9XG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgQ29tcGFjdENvbG9yQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgY29sb3IhOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGFjdGl2ZSE6IGJvb2xlYW47XG4gIEBPdXRwdXQoKSBvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBPdXRwdXQoKSBvblN3YXRjaEhvdmVyID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIHN3YXRjaFN0eWxlOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge1xuICAgIHdpZHRoOiAnMTVweCcsXG4gICAgaGVpZ2h0OiAnMTVweCcsXG4gICAgZmxvYXQ6ICdsZWZ0JyxcbiAgICBtYXJnaW5SaWdodDogJzVweCcsXG4gICAgbWFyZ2luQm90dG9tOiAnNXB4JyxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICBjdXJzb3I6ICdwb2ludGVyJyxcbiAgfTtcbiAgc3dhdGNoRm9jdXM6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7fTtcbiAgZ2V0Q29udHJhc3RpbmdDb2xvciA9IGdldENvbnRyYXN0aW5nQ29sb3I7XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgdGhpcy5zd2F0Y2hTdHlsZS5iYWNrZ3JvdW5kID0gdGhpcy5jb2xvcjtcbiAgICB0aGlzLnN3YXRjaEZvY3VzLmJveFNoYWRvdyA9IGAwIDAgNHB4ICR7dGhpcy5jb2xvcn1gO1xuICAgIGlmICh0aGlzLmNvbG9yLnRvTG93ZXJDYXNlKCkgPT09ICcjZmZmZmZmJykge1xuICAgICAgdGhpcy5zd2F0Y2hTdHlsZS5ib3hTaGFkb3cgPSAnaW5zZXQgMCAwIDAgMXB4ICNkZGQnO1xuICAgIH1cbiAgfVxuICBoYW5kbGVDbGljayh7IGhleCwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLm9uQ2xpY2suZW1pdCh7IGhleCwgJGV2ZW50IH0pO1xuICB9XG59XG4iXX0=
|