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
@@ -1,84 +0,0 @@
|
|
1
|
-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
|
2
|
-
export class SliderSwatchesComponent {
|
3
|
-
constructor() {
|
4
|
-
this.onClick = new EventEmitter();
|
5
|
-
this.onSwatchHover = new EventEmitter();
|
6
|
-
}
|
7
|
-
active(l, s) {
|
8
|
-
return (Math.round(this.hsl.l * 100) / 100 === l &&
|
9
|
-
Math.round(this.hsl.s * 100) / 100 === s);
|
10
|
-
}
|
11
|
-
handleClick({ data, $event }) {
|
12
|
-
this.onClick.emit({ data, $event });
|
13
|
-
}
|
14
|
-
}
|
15
|
-
SliderSwatchesComponent.decorators = [
|
16
|
-
{ type: Component, args: [{
|
17
|
-
selector: 'color-slider-swatches',
|
18
|
-
template: `
|
19
|
-
<div class="slider-swatches">
|
20
|
-
<div class="slider-swatch-wrap">
|
21
|
-
<color-slider-swatch
|
22
|
-
[hsl]="hsl"
|
23
|
-
[offset]=".80"
|
24
|
-
[active]="active(0.80, 0.50)"
|
25
|
-
(onClick)="handleClick($event)"
|
26
|
-
[first]="true"
|
27
|
-
></color-slider-swatch>
|
28
|
-
</div>
|
29
|
-
<div class="slider-swatch-wrap">
|
30
|
-
<color-slider-swatch
|
31
|
-
[hsl]="hsl"
|
32
|
-
[offset]=".65"
|
33
|
-
[active]="active(0.65, 0.50)"
|
34
|
-
(onClick)="handleClick($event)"
|
35
|
-
></color-slider-swatch>
|
36
|
-
</div>
|
37
|
-
<div class="slider-swatch-wrap">
|
38
|
-
<color-slider-swatch
|
39
|
-
[hsl]="hsl"
|
40
|
-
[offset]=".50"
|
41
|
-
[active]="active(0.50, 0.50)"
|
42
|
-
(onClick)="handleClick($event)"
|
43
|
-
></color-slider-swatch>
|
44
|
-
</div>
|
45
|
-
<div class="slider-swatch-wrap">
|
46
|
-
<color-slider-swatch
|
47
|
-
[hsl]="hsl"
|
48
|
-
[offset]=".35"
|
49
|
-
[active]="active(0.35, 0.50)"
|
50
|
-
(onClick)="handleClick($event)"
|
51
|
-
></color-slider-swatch>
|
52
|
-
</div>
|
53
|
-
<div class="slider-swatch-wrap">
|
54
|
-
<color-slider-swatch
|
55
|
-
[hsl]="hsl"
|
56
|
-
[offset]=".20"
|
57
|
-
[active]="active(0.20, 0.50)"
|
58
|
-
(onClick)="handleClick($event)"
|
59
|
-
[last]="true"
|
60
|
-
></color-slider-swatch>
|
61
|
-
</div>
|
62
|
-
</div>
|
63
|
-
`,
|
64
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
65
|
-
preserveWhitespaces: false,
|
66
|
-
styles: [`
|
67
|
-
.slider-swatches {
|
68
|
-
margin-top: 20px;
|
69
|
-
}
|
70
|
-
.slider-swatch-wrap {
|
71
|
-
box-sizing: border-box;
|
72
|
-
width: 20%;
|
73
|
-
padding-right: 1px;
|
74
|
-
float: left;
|
75
|
-
}
|
76
|
-
`]
|
77
|
-
},] }
|
78
|
-
];
|
79
|
-
SliderSwatchesComponent.propDecorators = {
|
80
|
-
hsl: [{ type: Input }],
|
81
|
-
onClick: [{ type: Output }],
|
82
|
-
onSwatchHover: [{ type: Output }]
|
83
|
-
};
|
84
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLXN3YXRjaGVzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9zbGlkZXIvc2xpZGVyLXN3YXRjaGVzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQWtFdkIsTUFBTSxPQUFPLHVCQUF1QjtJQTlEcEM7UUFnRVksWUFBTyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFDbEMsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBV3BELENBQUM7SUFUQyxNQUFNLENBQUMsQ0FBUyxFQUFFLENBQVM7UUFDekIsT0FBTyxDQUNMLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDLEdBQUcsR0FBRyxLQUFLLENBQUM7WUFDeEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsR0FBRyxHQUFHLEtBQUssQ0FBQyxDQUN6QyxDQUFDO0lBQ0osQ0FBQztJQUNELFdBQVcsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7UUFDMUIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQztJQUN0QyxDQUFDOzs7WUEzRUYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSx1QkFBdUI7Z0JBQ2pDLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNkNUO2dCQVlELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2dCQUMvQyxtQkFBbUIsRUFBRSxLQUFLO3lCQVpqQjs7Ozs7Ozs7OztHQVVSO2FBR0Y7OztrQkFFRSxLQUFLO3NCQUNMLE1BQU07NEJBQ04sTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IEhTTCB9IGZyb20gJ25neC1jb2xvcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLXNsaWRlci1zd2F0Y2hlcycsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJzbGlkZXItc3dhdGNoZXNcIj5cbiAgICA8ZGl2IGNsYXNzPVwic2xpZGVyLXN3YXRjaC13cmFwXCI+XG4gICAgICA8Y29sb3Itc2xpZGVyLXN3YXRjaFxuICAgICAgICBbaHNsXT1cImhzbFwiXG4gICAgICAgIFtvZmZzZXRdPVwiLjgwXCJcbiAgICAgICAgW2FjdGl2ZV09XCJhY3RpdmUoMC44MCwgMC41MClcIlxuICAgICAgICAob25DbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCJcbiAgICAgICAgW2ZpcnN0XT1cInRydWVcIlxuICAgICAgPjwvY29sb3Itc2xpZGVyLXN3YXRjaD5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwic2xpZGVyLXN3YXRjaC13cmFwXCI+XG4gICAgICA8Y29sb3Itc2xpZGVyLXN3YXRjaFxuICAgICAgICBbaHNsXT1cImhzbFwiXG4gICAgICAgIFtvZmZzZXRdPVwiLjY1XCJcbiAgICAgICAgW2FjdGl2ZV09XCJhY3RpdmUoMC42NSwgMC41MClcIlxuICAgICAgICAob25DbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLXNsaWRlci1zd2F0Y2g+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInNsaWRlci1zd2F0Y2gtd3JhcFwiPlxuICAgICAgPGNvbG9yLXNsaWRlci1zd2F0Y2hcbiAgICAgICAgW2hzbF09XCJoc2xcIlxuICAgICAgICBbb2Zmc2V0XT1cIi41MFwiXG4gICAgICAgIFthY3RpdmVdPVwiYWN0aXZlKDAuNTAsIDAuNTApXCJcbiAgICAgICAgKG9uQ2xpY2spPVwiaGFuZGxlQ2xpY2soJGV2ZW50KVwiXG4gICAgICA+PC9jb2xvci1zbGlkZXItc3dhdGNoPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJzbGlkZXItc3dhdGNoLXdyYXBcIj5cbiAgICAgIDxjb2xvci1zbGlkZXItc3dhdGNoXG4gICAgICAgIFtoc2xdPVwiaHNsXCJcbiAgICAgICAgW29mZnNldF09XCIuMzVcIlxuICAgICAgICBbYWN0aXZlXT1cImFjdGl2ZSgwLjM1LCAwLjUwKVwiXG4gICAgICAgIChvbkNsaWNrKT1cImhhbmRsZUNsaWNrKCRldmVudClcIlxuICAgICAgPjwvY29sb3Itc2xpZGVyLXN3YXRjaD5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwic2xpZGVyLXN3YXRjaC13cmFwXCI+XG4gICAgICA8Y29sb3Itc2xpZGVyLXN3YXRjaFxuICAgICAgICBbaHNsXT1cImhzbFwiXG4gICAgICAgIFtvZmZzZXRdPVwiLjIwXCJcbiAgICAgICAgW2FjdGl2ZV09XCJhY3RpdmUoMC4yMCwgMC41MClcIlxuICAgICAgICAob25DbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCJcbiAgICAgICAgW2xhc3RdPVwidHJ1ZVwiXG4gICAgICA+PC9jb2xvci1zbGlkZXItc3dhdGNoPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbYFxuICAgIC5zbGlkZXItc3dhdGNoZXMge1xuICAgICAgbWFyZ2luLXRvcDogMjBweDtcbiAgICB9XG4gICAgLnNsaWRlci1zd2F0Y2gtd3JhcCB7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgd2lkdGg6IDIwJTtcbiAgICAgIHBhZGRpbmctcmlnaHQ6IDFweDtcbiAgICAgIGZsb2F0OiBsZWZ0O1xuICAgIH1cbiAgYF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgU2xpZGVyU3dhdGNoZXNDb21wb25lbnQge1xuICBASW5wdXQoKSBoc2whOiBIU0w7XG4gIEBPdXRwdXQoKSBvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBPdXRwdXQoKSBvblN3YXRjaEhvdmVyID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgYWN0aXZlKGw6IG51bWJlciwgczogbnVtYmVyKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIE1hdGgucm91bmQodGhpcy5oc2wubCAqIDEwMCkgLyAxMDAgPT09IGwgJiZcbiAgICAgIE1hdGgucm91bmQodGhpcy5oc2wucyAqIDEwMCkgLyAxMDAgPT09IHNcbiAgICApO1xuICB9XG4gIGhhbmRsZUNsaWNrKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLm9uQ2xpY2suZW1pdCh7IGRhdGEsICRldmVudCB9KTtcbiAgfVxufVxuIl19
|
@@ -1,77 +0,0 @@
|
|
1
|
-
import { CommonModule } from '@angular/common';
|
2
|
-
import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
|
3
|
-
import { ColorWrap, HueModule, SwatchModule } from 'ngx-color';
|
4
|
-
import { SliderSwatchComponent } from './slider-swatch.component';
|
5
|
-
import { SliderSwatchesComponent } from './slider-swatches.component';
|
6
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
7
|
-
export class SliderComponent extends ColorWrap {
|
8
|
-
constructor() {
|
9
|
-
super();
|
10
|
-
this.pointer = {
|
11
|
-
width: '14px',
|
12
|
-
height: '14px',
|
13
|
-
borderRadius: '6px',
|
14
|
-
transform: 'translate(-7px, -2px)',
|
15
|
-
backgroundColor: 'rgb(248, 248, 248)',
|
16
|
-
boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
|
17
|
-
};
|
18
|
-
this.radius = 2;
|
19
|
-
}
|
20
|
-
handlePickerChange({ data, $event }) {
|
21
|
-
this.handleChange(data, $event);
|
22
|
-
}
|
23
|
-
}
|
24
|
-
SliderComponent.decorators = [
|
25
|
-
{ type: Component, args: [{
|
26
|
-
selector: 'color-slider',
|
27
|
-
template: `
|
28
|
-
<div class="slider-picker {{ className }}">
|
29
|
-
<div class="slider-hue">
|
30
|
-
<color-hue
|
31
|
-
[hsl]="hsl" [radius]="radius" [pointer]="pointer"
|
32
|
-
(onChange)="handlePickerChange($event)"
|
33
|
-
></color-hue>
|
34
|
-
</div>
|
35
|
-
<div class="slider-swatches">
|
36
|
-
<color-slider-swatches [hsl]="hsl"
|
37
|
-
(onClick)="handlePickerChange($event)"
|
38
|
-
></color-slider-swatches>
|
39
|
-
</div>
|
40
|
-
</div>
|
41
|
-
`,
|
42
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
43
|
-
preserveWhitespaces: false,
|
44
|
-
providers: [
|
45
|
-
{
|
46
|
-
provide: NG_VALUE_ACCESSOR,
|
47
|
-
useExisting: forwardRef(() => SliderComponent),
|
48
|
-
multi: true,
|
49
|
-
}
|
50
|
-
],
|
51
|
-
styles: [`
|
52
|
-
.slider-hue {
|
53
|
-
height: 12px;
|
54
|
-
position: relative;
|
55
|
-
}
|
56
|
-
`]
|
57
|
-
},] }
|
58
|
-
];
|
59
|
-
SliderComponent.ctorParameters = () => [];
|
60
|
-
SliderComponent.propDecorators = {
|
61
|
-
pointer: [{ type: Input }],
|
62
|
-
radius: [{ type: Input }]
|
63
|
-
};
|
64
|
-
export class ColorSliderModule {
|
65
|
-
}
|
66
|
-
ColorSliderModule.decorators = [
|
67
|
-
{ type: NgModule, args: [{
|
68
|
-
declarations: [
|
69
|
-
SliderComponent,
|
70
|
-
SliderSwatchComponent,
|
71
|
-
SliderSwatchesComponent,
|
72
|
-
],
|
73
|
-
exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent],
|
74
|
-
imports: [CommonModule, HueModule, SwatchModule],
|
75
|
-
},] }
|
76
|
-
];
|
77
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9zbGlkZXIvc2xpZGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVoRyxPQUFPLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDL0QsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDdEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFxQ25ELE1BQU0sT0FBTyxlQUFnQixTQUFRLFNBQVM7SUFZNUM7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQVhWLFlBQU8sR0FBMkI7WUFDaEMsS0FBSyxFQUFFLE1BQU07WUFDYixNQUFNLEVBQUUsTUFBTTtZQUNkLFlBQVksRUFBRSxLQUFLO1lBQ25CLFNBQVMsRUFBRSx1QkFBdUI7WUFDbEMsZUFBZSxFQUFFLG9CQUFvQjtZQUNyQyxTQUFTLEVBQUUsaUNBQWlDO1NBQzdDLENBQUM7UUFDTyxXQUFNLEdBQUcsQ0FBQyxDQUFDO0lBSXBCLENBQUM7SUFFRCxrQkFBa0IsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7UUFDakMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLEVBQUUsTUFBTSxDQUFDLENBQUM7SUFDbEMsQ0FBQzs7O1lBckRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsY0FBYztnQkFDeEIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7OztHQWNUO2dCQVNELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2dCQUMvQyxtQkFBbUIsRUFBRSxLQUFLO2dCQUMxQixTQUFTLEVBQUU7b0JBQ1Q7d0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjt3QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxlQUFlLENBQUM7d0JBQzlDLEtBQUssRUFBRSxJQUFJO3FCQUNaO2lCQUNGO3lCQWZDOzs7OztHQUtEO2FBV0Y7Ozs7c0JBRUUsS0FBSztxQkFTTCxLQUFLOztBQW9CUixNQUFNLE9BQU8saUJBQWlCOzs7WUFUN0IsUUFBUSxTQUFDO2dCQUNSLFlBQVksRUFBRTtvQkFDWixlQUFlO29CQUNmLHFCQUFxQjtvQkFDckIsdUJBQXVCO2lCQUN4QjtnQkFDRCxPQUFPLEVBQUUsQ0FBQyxlQUFlLEVBQUUscUJBQXFCLEVBQUUsdUJBQXVCLENBQUM7Z0JBQzFFLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxTQUFTLEVBQUUsWUFBWSxDQUFDO2FBQ2pEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGZvcndhcmRSZWYsIElucHV0LCBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBDb2xvcldyYXAsIEh1ZU1vZHVsZSwgU3dhdGNoTW9kdWxlIH0gZnJvbSAnbmd4LWNvbG9yJztcbmltcG9ydCB7IFNsaWRlclN3YXRjaENvbXBvbmVudCB9IGZyb20gJy4vc2xpZGVyLXN3YXRjaC5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2xpZGVyU3dhdGNoZXNDb21wb25lbnQgfSBmcm9tICcuL3NsaWRlci1zd2F0Y2hlcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLXNsaWRlcicsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJzbGlkZXItcGlja2VyIHt7IGNsYXNzTmFtZSB9fVwiPlxuICAgIDxkaXYgY2xhc3M9XCJzbGlkZXItaHVlXCI+XG4gICAgICA8Y29sb3ItaHVlXG4gICAgICAgIFtoc2xdPVwiaHNsXCIgW3JhZGl1c109XCJyYWRpdXNcIiBbcG9pbnRlcl09XCJwb2ludGVyXCJcbiAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVBpY2tlckNoYW5nZSgkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLWh1ZT5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwic2xpZGVyLXN3YXRjaGVzXCI+XG4gICAgICA8Y29sb3Itc2xpZGVyLXN3YXRjaGVzIFtoc2xdPVwiaHNsXCJcbiAgICAgICAgKG9uQ2xpY2spPVwiaGFuZGxlUGlja2VyQ2hhbmdlKCRldmVudClcIlxuICAgICAgPjwvY29sb3Itc2xpZGVyLXN3YXRjaGVzPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgIC5zbGlkZXItaHVlIHtcbiAgICAgIGhlaWdodDogMTJweDtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB9XG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBTbGlkZXJDb21wb25lbnQpLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFNsaWRlckNvbXBvbmVudCBleHRlbmRzIENvbG9yV3JhcCB7XG4gIEBJbnB1dCgpXG4gIHBvaW50ZXI6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7XG4gICAgd2lkdGg6ICcxNHB4JyxcbiAgICBoZWlnaHQ6ICcxNHB4JyxcbiAgICBib3JkZXJSYWRpdXM6ICc2cHgnLFxuICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZSgtN3B4LCAtMnB4KScsXG4gICAgYmFja2dyb3VuZENvbG9yOiAncmdiKDI0OCwgMjQ4LCAyNDgpJyxcbiAgICBib3hTaGFkb3c6ICcwIDFweCA0cHggMCByZ2JhKDAsIDAsIDAsIDAuMzcpJyxcbiAgfTtcbiAgQElucHV0KCkgcmFkaXVzID0gMjtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgaGFuZGxlUGlja2VyQ2hhbmdlKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLmhhbmRsZUNoYW5nZShkYXRhLCAkZXZlbnQpO1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1xuICAgIFNsaWRlckNvbXBvbmVudCxcbiAgICBTbGlkZXJTd2F0Y2hDb21wb25lbnQsXG4gICAgU2xpZGVyU3dhdGNoZXNDb21wb25lbnQsXG4gIF0sXG4gIGV4cG9ydHM6IFtTbGlkZXJDb21wb25lbnQsIFNsaWRlclN3YXRjaENvbXBvbmVudCwgU2xpZGVyU3dhdGNoZXNDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBIdWVNb2R1bGUsIFN3YXRjaE1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIENvbG9yU2xpZGVyTW9kdWxlIHt9XG4iXX0=
|
@@ -1,229 +0,0 @@
|
|
1
|
-
import { CommonModule } from '@angular/common';
|
2
|
-
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
|
3
|
-
import { ColorWrap, HueModule, SwatchModule } from 'ngx-color';
|
4
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
5
|
-
|
6
|
-
class SliderSwatchComponent {
|
7
|
-
constructor() {
|
8
|
-
this.first = false;
|
9
|
-
this.last = false;
|
10
|
-
this.onClick = new EventEmitter();
|
11
|
-
}
|
12
|
-
ngOnChanges() {
|
13
|
-
this.background = `hsl(${this.hsl.h}, 50%, ${this.offset * 100}%)`;
|
14
|
-
}
|
15
|
-
handleClick($event) {
|
16
|
-
this.onClick.emit({
|
17
|
-
data: {
|
18
|
-
h: this.hsl.h,
|
19
|
-
s: 0.5,
|
20
|
-
l: this.offset,
|
21
|
-
source: 'hsl',
|
22
|
-
},
|
23
|
-
$event,
|
24
|
-
});
|
25
|
-
}
|
26
|
-
}
|
27
|
-
SliderSwatchComponent.decorators = [
|
28
|
-
{ type: Component, args: [{
|
29
|
-
selector: 'color-slider-swatch',
|
30
|
-
template: `
|
31
|
-
<div class="slider-swatch" [style.background]="background"
|
32
|
-
[class.first]="first" [class.last]="last" [class.active]="active"
|
33
|
-
(click)="handleClick($event)"
|
34
|
-
></div>
|
35
|
-
`,
|
36
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
37
|
-
preserveWhitespaces: false,
|
38
|
-
styles: [`
|
39
|
-
.slider-swatch {
|
40
|
-
height: 12px;
|
41
|
-
background: rgb(121, 211, 166);
|
42
|
-
cursor: pointer;
|
43
|
-
}
|
44
|
-
.slider-swatch.active {
|
45
|
-
transform: scaleY(1.8);
|
46
|
-
border-top-right-radius: 3.6px 2px;
|
47
|
-
border-top-left-radius: 3.6px 2px;
|
48
|
-
border-bottom-right-radius: 3.6px 2px;
|
49
|
-
border-bottom-left-radius: 3.6px 2px;
|
50
|
-
}
|
51
|
-
.slider-swatch.first {
|
52
|
-
border-radius: 2px 0px 0px 2px;
|
53
|
-
}
|
54
|
-
.slider-swatch.last {
|
55
|
-
border-radius: 0px 2px 2px 0px;
|
56
|
-
}
|
57
|
-
|
58
|
-
`]
|
59
|
-
},] }
|
60
|
-
];
|
61
|
-
SliderSwatchComponent.propDecorators = {
|
62
|
-
hsl: [{ type: Input }],
|
63
|
-
active: [{ type: Input }],
|
64
|
-
offset: [{ type: Input }],
|
65
|
-
first: [{ type: Input }],
|
66
|
-
last: [{ type: Input }],
|
67
|
-
onClick: [{ type: Output }]
|
68
|
-
};
|
69
|
-
|
70
|
-
class SliderSwatchesComponent {
|
71
|
-
constructor() {
|
72
|
-
this.onClick = new EventEmitter();
|
73
|
-
this.onSwatchHover = new EventEmitter();
|
74
|
-
}
|
75
|
-
active(l, s) {
|
76
|
-
return (Math.round(this.hsl.l * 100) / 100 === l &&
|
77
|
-
Math.round(this.hsl.s * 100) / 100 === s);
|
78
|
-
}
|
79
|
-
handleClick({ data, $event }) {
|
80
|
-
this.onClick.emit({ data, $event });
|
81
|
-
}
|
82
|
-
}
|
83
|
-
SliderSwatchesComponent.decorators = [
|
84
|
-
{ type: Component, args: [{
|
85
|
-
selector: 'color-slider-swatches',
|
86
|
-
template: `
|
87
|
-
<div class="slider-swatches">
|
88
|
-
<div class="slider-swatch-wrap">
|
89
|
-
<color-slider-swatch
|
90
|
-
[hsl]="hsl"
|
91
|
-
[offset]=".80"
|
92
|
-
[active]="active(0.80, 0.50)"
|
93
|
-
(onClick)="handleClick($event)"
|
94
|
-
[first]="true"
|
95
|
-
></color-slider-swatch>
|
96
|
-
</div>
|
97
|
-
<div class="slider-swatch-wrap">
|
98
|
-
<color-slider-swatch
|
99
|
-
[hsl]="hsl"
|
100
|
-
[offset]=".65"
|
101
|
-
[active]="active(0.65, 0.50)"
|
102
|
-
(onClick)="handleClick($event)"
|
103
|
-
></color-slider-swatch>
|
104
|
-
</div>
|
105
|
-
<div class="slider-swatch-wrap">
|
106
|
-
<color-slider-swatch
|
107
|
-
[hsl]="hsl"
|
108
|
-
[offset]=".50"
|
109
|
-
[active]="active(0.50, 0.50)"
|
110
|
-
(onClick)="handleClick($event)"
|
111
|
-
></color-slider-swatch>
|
112
|
-
</div>
|
113
|
-
<div class="slider-swatch-wrap">
|
114
|
-
<color-slider-swatch
|
115
|
-
[hsl]="hsl"
|
116
|
-
[offset]=".35"
|
117
|
-
[active]="active(0.35, 0.50)"
|
118
|
-
(onClick)="handleClick($event)"
|
119
|
-
></color-slider-swatch>
|
120
|
-
</div>
|
121
|
-
<div class="slider-swatch-wrap">
|
122
|
-
<color-slider-swatch
|
123
|
-
[hsl]="hsl"
|
124
|
-
[offset]=".20"
|
125
|
-
[active]="active(0.20, 0.50)"
|
126
|
-
(onClick)="handleClick($event)"
|
127
|
-
[last]="true"
|
128
|
-
></color-slider-swatch>
|
129
|
-
</div>
|
130
|
-
</div>
|
131
|
-
`,
|
132
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
133
|
-
preserveWhitespaces: false,
|
134
|
-
styles: [`
|
135
|
-
.slider-swatches {
|
136
|
-
margin-top: 20px;
|
137
|
-
}
|
138
|
-
.slider-swatch-wrap {
|
139
|
-
box-sizing: border-box;
|
140
|
-
width: 20%;
|
141
|
-
padding-right: 1px;
|
142
|
-
float: left;
|
143
|
-
}
|
144
|
-
`]
|
145
|
-
},] }
|
146
|
-
];
|
147
|
-
SliderSwatchesComponent.propDecorators = {
|
148
|
-
hsl: [{ type: Input }],
|
149
|
-
onClick: [{ type: Output }],
|
150
|
-
onSwatchHover: [{ type: Output }]
|
151
|
-
};
|
152
|
-
|
153
|
-
class SliderComponent extends ColorWrap {
|
154
|
-
constructor() {
|
155
|
-
super();
|
156
|
-
this.pointer = {
|
157
|
-
width: '14px',
|
158
|
-
height: '14px',
|
159
|
-
borderRadius: '6px',
|
160
|
-
transform: 'translate(-7px, -2px)',
|
161
|
-
backgroundColor: 'rgb(248, 248, 248)',
|
162
|
-
boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
|
163
|
-
};
|
164
|
-
this.radius = 2;
|
165
|
-
}
|
166
|
-
handlePickerChange({ data, $event }) {
|
167
|
-
this.handleChange(data, $event);
|
168
|
-
}
|
169
|
-
}
|
170
|
-
SliderComponent.decorators = [
|
171
|
-
{ type: Component, args: [{
|
172
|
-
selector: 'color-slider',
|
173
|
-
template: `
|
174
|
-
<div class="slider-picker {{ className }}">
|
175
|
-
<div class="slider-hue">
|
176
|
-
<color-hue
|
177
|
-
[hsl]="hsl" [radius]="radius" [pointer]="pointer"
|
178
|
-
(onChange)="handlePickerChange($event)"
|
179
|
-
></color-hue>
|
180
|
-
</div>
|
181
|
-
<div class="slider-swatches">
|
182
|
-
<color-slider-swatches [hsl]="hsl"
|
183
|
-
(onClick)="handlePickerChange($event)"
|
184
|
-
></color-slider-swatches>
|
185
|
-
</div>
|
186
|
-
</div>
|
187
|
-
`,
|
188
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
189
|
-
preserveWhitespaces: false,
|
190
|
-
providers: [
|
191
|
-
{
|
192
|
-
provide: NG_VALUE_ACCESSOR,
|
193
|
-
useExisting: forwardRef(() => SliderComponent),
|
194
|
-
multi: true,
|
195
|
-
}
|
196
|
-
],
|
197
|
-
styles: [`
|
198
|
-
.slider-hue {
|
199
|
-
height: 12px;
|
200
|
-
position: relative;
|
201
|
-
}
|
202
|
-
`]
|
203
|
-
},] }
|
204
|
-
];
|
205
|
-
SliderComponent.ctorParameters = () => [];
|
206
|
-
SliderComponent.propDecorators = {
|
207
|
-
pointer: [{ type: Input }],
|
208
|
-
radius: [{ type: Input }]
|
209
|
-
};
|
210
|
-
class ColorSliderModule {
|
211
|
-
}
|
212
|
-
ColorSliderModule.decorators = [
|
213
|
-
{ type: NgModule, args: [{
|
214
|
-
declarations: [
|
215
|
-
SliderComponent,
|
216
|
-
SliderSwatchComponent,
|
217
|
-
SliderSwatchesComponent,
|
218
|
-
],
|
219
|
-
exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent],
|
220
|
-
imports: [CommonModule, HueModule, SwatchModule],
|
221
|
-
},] }
|
222
|
-
];
|
223
|
-
|
224
|
-
/**
|
225
|
-
* Generated bundle index. Do not edit.
|
226
|
-
*/
|
227
|
-
|
228
|
-
export { ColorSliderModule, SliderComponent, SliderSwatchComponent as ɵa, SliderSwatchesComponent as ɵb };
|
229
|
-
//# sourceMappingURL=ngx-color-slider.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-slider.js","sources":["../../../../src/lib/components/slider/slider-swatch.component.ts","../../../../src/lib/components/slider/slider-swatches.component.ts","../../../../src/lib/components/slider/slider.component.ts","../../../../src/lib/components/slider/ngx-color-slider.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n} from '@angular/core';\n\nimport { HSL } from 'ngx-color';\n\n@Component({\n selector: 'color-slider-swatch',\n template: `\n <div class=\"slider-swatch\" [style.background]=\"background\"\n [class.first]=\"first\" [class.last]=\"last\" [class.active]=\"active\"\n (click)=\"handleClick($event)\"\n ></div>\n `,\n styles: [\n `\n .slider-swatch {\n height: 12px;\n background: rgb(121, 211, 166);\n cursor: pointer;\n }\n .slider-swatch.active {\n transform: scaleY(1.8);\n border-top-right-radius: 3.6px 2px;\n border-top-left-radius: 3.6px 2px;\n border-bottom-right-radius: 3.6px 2px;\n border-bottom-left-radius: 3.6px 2px;\n }\n .slider-swatch.first {\n border-radius: 2px 0px 0px 2px;\n }\n .slider-swatch.last {\n border-radius: 0px 2px 2px 0px;\n }\n\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class SliderSwatchComponent implements OnChanges {\n @Input() hsl!: HSL;\n @Input() active!: boolean;\n @Input() offset!: number;\n @Input() first = false;\n @Input() last = false;\n @Output() onClick = new EventEmitter<any>();\n background!: string;\n\n ngOnChanges() {\n this.background = `hsl(${this.hsl.h}, 50%, ${this.offset * 100}%)`;\n }\n handleClick($event) {\n this.onClick.emit({\n data: {\n h: this.hsl.h,\n s: 0.5,\n l: this.offset,\n source: 'hsl',\n },\n $event,\n });\n }\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n Output,\n} from '@angular/core';\n\nimport { HSL } from 'ngx-color';\n\n@Component({\n selector: 'color-slider-swatches',\n template: `\n <div class=\"slider-swatches\">\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".80\"\n [active]=\"active(0.80, 0.50)\"\n (onClick)=\"handleClick($event)\"\n [first]=\"true\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".65\"\n [active]=\"active(0.65, 0.50)\"\n (onClick)=\"handleClick($event)\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".50\"\n [active]=\"active(0.50, 0.50)\"\n (onClick)=\"handleClick($event)\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".35\"\n [active]=\"active(0.35, 0.50)\"\n (onClick)=\"handleClick($event)\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".20\"\n [active]=\"active(0.20, 0.50)\"\n (onClick)=\"handleClick($event)\"\n [last]=\"true\"\n ></color-slider-swatch>\n </div>\n </div>\n `,\n styles: [`\n .slider-swatches {\n margin-top: 20px;\n }\n .slider-swatch-wrap {\n box-sizing: border-box;\n width: 20%;\n padding-right: 1px;\n float: left;\n }\n `],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class SliderSwatchesComponent {\n @Input() hsl!: HSL;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n\n active(l: number, s: number) {\n return (\n Math.round(this.hsl.l * 100) / 100 === l &&\n Math.round(this.hsl.s * 100) / 100 === s\n );\n }\n handleClick({ data, $event }) {\n this.onClick.emit({ data, $event });\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, HueModule, SwatchModule } from 'ngx-color';\nimport { SliderSwatchComponent } from './slider-swatch.component';\nimport { SliderSwatchesComponent } from './slider-swatches.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-slider',\n template: `\n <div class=\"slider-picker {{ className }}\">\n <div class=\"slider-hue\">\n <color-hue\n [hsl]=\"hsl\" [radius]=\"radius\" [pointer]=\"pointer\"\n (onChange)=\"handlePickerChange($event)\"\n ></color-hue>\n </div>\n <div class=\"slider-swatches\">\n <color-slider-swatches [hsl]=\"hsl\"\n (onClick)=\"handlePickerChange($event)\"\n ></color-slider-swatches>\n </div>\n </div>\n `,\n styles: [\n `\n .slider-hue {\n height: 12px;\n position: relative;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SliderComponent),\n multi: true,\n }\n ]\n})\nexport class SliderComponent extends ColorWrap {\n @Input()\n pointer: Record<string, string> = {\n width: '14px',\n height: '14px',\n borderRadius: '6px',\n transform: 'translate(-7px, -2px)',\n backgroundColor: 'rgb(248, 248, 248)',\n boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',\n };\n @Input() radius = 2;\n\n constructor() {\n super();\n }\n\n handlePickerChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [\n SliderComponent,\n SliderSwatchComponent,\n SliderSwatchesComponent,\n ],\n exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent],\n imports: [CommonModule, HueModule, SwatchModule],\n})\nexport class ColorSliderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './slider.component';\n\nexport {SliderSwatchComponent as ɵa} from './slider-swatch.component';\nexport {SliderSwatchesComponent as ɵb} from './slider-swatches.component';"],"names":[],"mappings":";;;;;MA6Ca,qBAAqB;IAlClC;QAsCW,UAAK,GAAG,KAAK,CAAC;QACd,SAAI,GAAG,KAAK,CAAC;QACZ,YAAO,GAAG,IAAI,YAAY,EAAO,CAAC;KAiB7C;IAdC,WAAW;QACT,IAAI,CAAC,UAAU,GAAG,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,UAAU,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC;KACpE;IACD,WAAW,CAAC,MAAM;QAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;YAChB,IAAI,EAAE;gBACJ,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;gBACb,CAAC,EAAE,GAAG;gBACN,CAAC,EAAE,IAAI,CAAC,MAAM;gBACd,MAAM,EAAE,KAAK;aACd;YACD,MAAM;SACP,CAAC,CAAC;KACJ;;;YAxDF,SAAS,SAAC;gBACT,QAAQ,EAAE,qBAAqB;gBAC/B,QAAQ,EAAE;;;;;GAKT;gBAwBD,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,mBAAmB,EAAE,KAAK;yBAvBxB;;;;;;;;;;;;;;;;;;;;GAoBD;aAIF;;;kBAEE,KAAK;qBACL,KAAK;qBACL,KAAK;oBACL,KAAK;mBACL,KAAK;sBACL,MAAM;;;MCqBI,uBAAuB;IA9DpC;QAgEY,YAAO,GAAG,IAAI,YAAY,EAAO,CAAC;QAClC,kBAAa,GAAG,IAAI,YAAY,EAAO,CAAC;KAWnD;IATC,MAAM,CAAC,CAAS,EAAE,CAAS;QACzB,QACE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC;YACxC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC,EACxC;KACH;IACD,WAAW,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;QAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;KACrC;;;YA3EF,SAAS,SAAC;gBACT,QAAQ,EAAE,uBAAuB;gBACjC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CT;gBAYD,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,mBAAmB,EAAE,KAAK;yBAZjB;;;;;;;;;;GAUR;aAGF;;;kBAEE,KAAK;sBACL,MAAM;4BACN,MAAM;;;MChCI,eAAgB,SAAQ,SAAS;IAY5C;QACE,KAAK,EAAE,CAAC;QAXV,YAAO,GAA2B;YAChC,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,uBAAuB;YAClC,eAAe,EAAE,oBAAoB;YACrC,SAAS,EAAE,iCAAiC;SAC7C,CAAC;QACO,WAAM,GAAG,CAAC,CAAC;KAInB;IAED,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;QACjC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;KACjC;;;YArDF,SAAS,SAAC;gBACT,QAAQ,EAAE,cAAc;gBACxB,QAAQ,EAAE;;;;;;;;;;;;;;GAcT;gBASD,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,mBAAmB,EAAE,KAAK;gBAC1B,SAAS,EAAE;oBACT;wBACE,OAAO,EAAE,iBAAiB;wBAC1B,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;wBAC9C,KAAK,EAAE,IAAI;qBACZ;iBACF;yBAfC;;;;;GAKD;aAWF;;;;sBAEE,KAAK;qBASL,KAAK;;MAoBK,iBAAiB;;;YAT7B,QAAQ,SAAC;gBACR,YAAY,EAAE;oBACZ,eAAe;oBACf,qBAAqB;oBACrB,uBAAuB;iBACxB;gBACD,OAAO,EAAE,CAAC,eAAe,EAAE,qBAAqB,EAAE,uBAAuB,CAAC;gBAC1E,OAAO,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,YAAY,CAAC;aACjD;;;ACxED;;;;;;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"__symbolic":"module","version":4,"metadata":{"SliderComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":43,"character":37},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"color-slider","template":"\n <div class=\"slider-picker {{ className }}\">\n <div class=\"slider-hue\">\n <color-hue\n [hsl]=\"hsl\" [radius]=\"radius\" [pointer]=\"pointer\"\n (onChange)=\"handlePickerChange($event)\"\n ></color-hue>\n </div>\n <div class=\"slider-swatches\">\n <color-slider-swatches [hsl]=\"hsl\"\n (onClick)=\"handlePickerChange($event)\"\n ></color-slider-swatches>\n </div>\n </div>\n ","styles":["\n .slider-hue {\n height: 12px;\n position: relative;\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":33,"character":19},"member":"OnPush"},"preserveWhitespaces":false,"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":37,"character":15},"useExisting":{"__symbolic":"reference","name":"SliderComponent"},"multi":true}]}]}],"members":{"pointer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"handlePickerChange":[{"__symbolic":"method"}]}},"ColorSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":64,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SliderComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"SliderComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":71,"character":12},{"__symbolic":"reference","module":"ngx-color","name":"HueModule","line":71,"character":26},{"__symbolic":"reference","module":"ngx-color","name":"SwatchModule","line":71,"character":37}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"color-slider-swatch","template":"\n <div class=\"slider-swatch\" [style.background]=\"background\"\n [class.first]=\"first\" [class.last]=\"last\" [class.active]=\"active\"\n (click)=\"handleClick($event)\"\n ></div>\n ","styles":["\n .slider-swatch {\n height: 12px;\n background: rgb(121, 211, 166);\n cursor: pointer;\n }\n .slider-swatch.active {\n transform: scaleY(1.8);\n border-top-right-radius: 3.6px 2px;\n border-top-left-radius: 3.6px 2px;\n border-bottom-right-radius: 3.6px 2px;\n border-bottom-left-radius: 3.6px 2px;\n }\n .slider-swatch.first {\n border-radius: 2px 0px 0px 2px;\n }\n .slider-swatch.last {\n border-radius: 0px 2px 2px 0px;\n }\n\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":42,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"hsl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"first":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"last":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":3}}]}],"ngOnChanges":[{"__symbolic":"method"}],"handleClick":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"color-slider-swatches","template":"\n <div class=\"slider-swatches\">\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".80\"\n [active]=\"active(0.80, 0.50)\"\n (onClick)=\"handleClick($event)\"\n [first]=\"true\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".65\"\n [active]=\"active(0.65, 0.50)\"\n (onClick)=\"handleClick($event)\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".50\"\n [active]=\"active(0.50, 0.50)\"\n (onClick)=\"handleClick($event)\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".35\"\n [active]=\"active(0.35, 0.50)\"\n (onClick)=\"handleClick($event)\"\n ></color-slider-swatch>\n </div>\n <div class=\"slider-swatch-wrap\">\n <color-slider-swatch\n [hsl]=\"hsl\"\n [offset]=\".20\"\n [active]=\"active(0.20, 0.50)\"\n (onClick)=\"handleClick($event)\"\n [last]=\"true\"\n ></color-slider-swatch>\n </div>\n </div>\n ","styles":["\n .slider-swatches {\n margin-top: 20px;\n }\n .slider-swatch-wrap {\n box-sizing: border-box;\n width: 20%;\n padding-right: 1px;\n float: left;\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":69,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"hsl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":74,"character":3}}]}],"onSwatchHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":75,"character":3}}]}],"active":[{"__symbolic":"method"}],"handleClick":[{"__symbolic":"method"}]}}},"origins":{"SliderComponent":"./slider.component","ColorSliderModule":"./slider.component","ɵa":"./slider-swatch.component","ɵb":"./slider-swatches.component"},"importAs":"ngx-color/slider"}
|