ngx-color 7.0.2 → 7.3.1
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 +27 -2
- 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 +137 -14
- 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/LICENSE +0 -21
- package/README.md +0 -280
- package/alpha/bundles/ngx-color-alpha.umd.js +0 -387
- package/alpha/bundles/ngx-color-alpha.umd.js.map +0 -1
- package/alpha/esm2015/alpha-picker.component.js +0 -72
- package/alpha/esm2015/ngx-color-alpha.js +0 -5
- package/alpha/fesm2015/ngx-color-alpha.js +0 -79
- 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 -455
- 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 -139
- package/block/esm2015/ngx-color-block.js +0 -6
- package/block/fesm2015/ngx-color-block.js +0 -202
- 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 -953
- package/bundles/ngx-color.umd.js.map +0 -1
- package/chrome/bundles/ngx-color-chrome.umd.js +0 -526
- 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 -161
- package/chrome/esm2015/ngx-color-chrome.js +0 -6
- package/chrome/fesm2015/ngx-color-chrome.js +0 -420
- 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 -452
- 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 -97
- package/circle/esm2015/ngx-color-circle.js +0 -6
- package/circle/fesm2015/ngx-color-circle.js +0 -165
- 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 -562
- 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 -123
- package/compact/esm2015/ngx-color-compact.js +0 -7
- package/compact/fesm2015/ngx-color-compact.js +0 -336
- 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 -82
- 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 -1166
- package/fesm2015/ngx-color.js.map +0 -1
- package/github/bundles/ngx-color-github.umd.js +0 -430
- 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 -134
- package/github/esm2015/ngx-color-github.js +0 -6
- package/github/fesm2015/ngx-color-github.js +0 -187
- 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 -390
- package/hue/bundles/ngx-color-hue.umd.js.map +0 -1
- package/hue/esm2015/hue-picker.component.js +0 -70
- package/hue/esm2015/ngx-color-hue.js +0 -5
- package/hue/fesm2015/ngx-color-hue.js +0 -77
- 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 -438
- package/material/bundles/ngx-color-material.umd.js.map +0 -1
- package/material/esm2015/material.component.js +0 -149
- package/material/esm2015/ngx-color-material.js +0 -5
- package/material/fesm2015/ngx-color-material.js +0 -156
- 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 -554
- 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 -169
- package/photoshop/fesm2015/ngx-color-photoshop.js +0 -452
- 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 -382
- 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 -63
- package/shade/fesm2015/ngx-color-shade.js +0 -70
- 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 -568
- 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 -191
- package/sketch/fesm2015/ngx-color-sketch.js +0 -450
- 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 -453
- 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 -69
- package/slider/fesm2015/ngx-color-slider.js +0 -221
- 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 -595
- 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 -205
- package/swatches/fesm2015/ngx-color-swatches.js +0 -339
- 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 -416
- 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 -195
- package/twitter/fesm2015/ngx-color-twitter.js +0 -202
- package/twitter/fesm2015/ngx-color-twitter.js.map +0 -1
- package/twitter/ngx-color-twitter.metadata.json +0 -1
package/esm2015/hue.component.js
DELETED
@@ -1,140 +0,0 @@
|
|
1
|
-
import { CommonModule } from '@angular/common';
|
2
|
-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Output, } from '@angular/core';
|
3
|
-
import { CoordinatesModule } from './coordinates.directive';
|
4
|
-
export class HueComponent {
|
5
|
-
constructor() {
|
6
|
-
this.hidePointer = false;
|
7
|
-
this.direction = 'horizontal';
|
8
|
-
this.onChange = new EventEmitter();
|
9
|
-
this.left = '0px';
|
10
|
-
this.top = '';
|
11
|
-
}
|
12
|
-
ngOnChanges() {
|
13
|
-
if (this.direction === 'horizontal') {
|
14
|
-
this.left = `${this.hsl.h * 100 / 360}%`;
|
15
|
-
}
|
16
|
-
else {
|
17
|
-
this.top = `${-(this.hsl.h * 100 / 360) + 100}%`;
|
18
|
-
}
|
19
|
-
}
|
20
|
-
handleChange({ top, left, containerHeight, containerWidth, $event }) {
|
21
|
-
let data;
|
22
|
-
if (this.direction === 'vertical') {
|
23
|
-
let h;
|
24
|
-
if (top < 0) {
|
25
|
-
h = 359;
|
26
|
-
}
|
27
|
-
else if (top > containerHeight) {
|
28
|
-
h = 0;
|
29
|
-
}
|
30
|
-
else {
|
31
|
-
const percent = -(top * 100 / containerHeight) + 100;
|
32
|
-
h = 360 * percent / 100;
|
33
|
-
}
|
34
|
-
if (this.hsl.h !== h) {
|
35
|
-
data = {
|
36
|
-
h,
|
37
|
-
s: this.hsl.s,
|
38
|
-
l: this.hsl.l,
|
39
|
-
a: this.hsl.a,
|
40
|
-
source: 'rgb',
|
41
|
-
};
|
42
|
-
}
|
43
|
-
}
|
44
|
-
else {
|
45
|
-
let h;
|
46
|
-
if (left < 0) {
|
47
|
-
h = 0;
|
48
|
-
}
|
49
|
-
else if (left > containerWidth) {
|
50
|
-
h = 359;
|
51
|
-
}
|
52
|
-
else {
|
53
|
-
const percent = left * 100 / containerWidth;
|
54
|
-
h = 360 * percent / 100;
|
55
|
-
}
|
56
|
-
if (this.hsl.h !== h) {
|
57
|
-
data = {
|
58
|
-
h,
|
59
|
-
s: this.hsl.s,
|
60
|
-
l: this.hsl.l,
|
61
|
-
a: this.hsl.a,
|
62
|
-
source: 'rgb',
|
63
|
-
};
|
64
|
-
}
|
65
|
-
}
|
66
|
-
if (!data) {
|
67
|
-
return;
|
68
|
-
}
|
69
|
-
this.onChange.emit({ data, $event });
|
70
|
-
}
|
71
|
-
}
|
72
|
-
HueComponent.decorators = [
|
73
|
-
{ type: Component, args: [{
|
74
|
-
selector: 'color-hue',
|
75
|
-
template: `
|
76
|
-
<div class="color-hue color-hue-{{direction}}" [style.border-radius.px]="radius" [style.box-shadow]="shadow">
|
77
|
-
<div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="color-hue-container">
|
78
|
-
<div class="color-hue-pointer" [style.left]="left" [style.top]="top" *ngIf="!hidePointer">
|
79
|
-
<div class="color-hue-slider" [ngStyle]="pointer"></div>
|
80
|
-
</div>
|
81
|
-
</div>
|
82
|
-
</div>
|
83
|
-
`,
|
84
|
-
preserveWhitespaces: false,
|
85
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
86
|
-
styles: [`
|
87
|
-
.color-hue {
|
88
|
-
position: absolute;
|
89
|
-
top: 0;
|
90
|
-
bottom: 0;
|
91
|
-
left: 0;
|
92
|
-
right: 0;
|
93
|
-
}
|
94
|
-
.color-hue-container {
|
95
|
-
margin: 0 2px;
|
96
|
-
position: relative;
|
97
|
-
height: 100%;
|
98
|
-
}
|
99
|
-
.color-hue-pointer {
|
100
|
-
position: absolute;
|
101
|
-
}
|
102
|
-
.color-hue-slider {
|
103
|
-
margin-top: 1px;
|
104
|
-
width: 4px;
|
105
|
-
border-radius: 1px;
|
106
|
-
height: 8px;
|
107
|
-
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
|
108
|
-
background: #fff;
|
109
|
-
transform: translateX(-2px);
|
110
|
-
}
|
111
|
-
.color-hue-horizontal {
|
112
|
-
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
|
113
|
-
33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
114
|
-
}
|
115
|
-
.color-hue-vertical {
|
116
|
-
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
117
|
-
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
118
|
-
}
|
119
|
-
`]
|
120
|
-
},] }
|
121
|
-
];
|
122
|
-
HueComponent.propDecorators = {
|
123
|
-
hsl: [{ type: Input }],
|
124
|
-
pointer: [{ type: Input }],
|
125
|
-
radius: [{ type: Input }],
|
126
|
-
shadow: [{ type: Input }],
|
127
|
-
hidePointer: [{ type: Input }],
|
128
|
-
direction: [{ type: Input }],
|
129
|
-
onChange: [{ type: Output }]
|
130
|
-
};
|
131
|
-
export class HueModule {
|
132
|
-
}
|
133
|
-
HueModule.decorators = [
|
134
|
-
{ type: NgModule, args: [{
|
135
|
-
declarations: [HueComponent],
|
136
|
-
exports: [HueComponent],
|
137
|
-
imports: [CommonModule, CoordinatesModule],
|
138
|
-
},] }
|
139
|
-
];
|
140
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHVlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY29tbW9uL2h1ZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsUUFBUSxFQUVSLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQXFENUQsTUFBTSxPQUFPLFlBQVk7SUFsRHpCO1FBdURXLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLGNBQVMsR0FBOEIsWUFBWSxDQUFDO1FBQ25ELGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBdUMsQ0FBQztRQUM3RSxTQUFJLEdBQUcsS0FBSyxDQUFDO1FBQ2IsUUFBRyxHQUFHLEVBQUUsQ0FBQztJQTJEWCxDQUFDO0lBekRDLFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyxTQUFTLEtBQUssWUFBWSxFQUFFO1lBQ25DLElBQUksQ0FBQyxJQUFJLEdBQUcsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLEdBQUcsR0FBRyxHQUFHLENBQUM7U0FDMUM7YUFBTTtZQUNMLElBQUksQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxHQUFHLEdBQUcsQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO1NBQ2xEO0lBQ0gsQ0FBQztJQUNELFlBQVksQ0FBQyxFQUFFLEdBQUcsRUFBRSxJQUFJLEVBQUUsZUFBZSxFQUFFLGNBQWMsRUFBRSxNQUFNLEVBQUU7UUFDakUsSUFBSSxJQUE0QixDQUFDO1FBQ2pDLElBQUksSUFBSSxDQUFDLFNBQVMsS0FBSyxVQUFVLEVBQUU7WUFDakMsSUFBSSxDQUFTLENBQUM7WUFDZCxJQUFJLEdBQUcsR0FBRyxDQUFDLEVBQUU7Z0JBQ1gsQ0FBQyxHQUFHLEdBQUcsQ0FBQzthQUNUO2lCQUFNLElBQUksR0FBRyxHQUFHLGVBQWUsRUFBRTtnQkFDaEMsQ0FBQyxHQUFHLENBQUMsQ0FBQzthQUNQO2lCQUFNO2dCQUNMLE1BQU0sT0FBTyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsR0FBRyxHQUFHLGVBQWUsQ0FBQyxHQUFHLEdBQUcsQ0FBQztnQkFDckQsQ0FBQyxHQUFHLEdBQUcsR0FBRyxPQUFPLEdBQUcsR0FBRyxDQUFDO2FBQ3pCO1lBRUQsSUFBSSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxDQUFDLEVBQUU7Z0JBQ3BCLElBQUksR0FBRztvQkFDTCxDQUFDO29CQUNELENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7b0JBQ2IsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztvQkFDYixDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO29CQUNiLE1BQU0sRUFBRSxLQUFLO2lCQUNkLENBQUM7YUFDSDtTQUNGO2FBQU07WUFDTCxJQUFJLENBQVMsQ0FBQztZQUNkLElBQUksSUFBSSxHQUFHLENBQUMsRUFBRTtnQkFDWixDQUFDLEdBQUcsQ0FBQyxDQUFDO2FBQ1A7aUJBQU0sSUFBSSxJQUFJLEdBQUcsY0FBYyxFQUFFO2dCQUNoQyxDQUFDLEdBQUcsR0FBRyxDQUFDO2FBQ1Q7aUJBQU07Z0JBQ0wsTUFBTSxPQUFPLEdBQUcsSUFBSSxHQUFHLEdBQUcsR0FBRyxjQUFjLENBQUM7Z0JBQzVDLENBQUMsR0FBRyxHQUFHLEdBQUcsT0FBTyxHQUFHLEdBQUcsQ0FBQzthQUN6QjtZQUVELElBQUksSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssQ0FBQyxFQUFFO2dCQUNwQixJQUFJLEdBQUc7b0JBQ0wsQ0FBQztvQkFDRCxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO29CQUNiLENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7b0JBQ2IsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztvQkFDYixNQUFNLEVBQUUsS0FBSztpQkFDZCxDQUFDO2FBQ0g7U0FDRjtRQUVELElBQUksQ0FBQyxJQUFJLEVBQUU7WUFDVCxPQUFPO1NBQ1I7UUFFRCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7OztZQXJIRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFdBQVc7Z0JBQ3JCLFFBQVEsRUFBRTs7Ozs7Ozs7R0FRVDtnQkFxQ0QsbUJBQW1CLEVBQUUsS0FBSztnQkFDMUIsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07eUJBcEM3Qzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUNEO2FBSUY7OztrQkFFRSxLQUFLO3NCQUNMLEtBQUs7cUJBQ0wsS0FBSztxQkFDTCxLQUFLOzBCQUNMLEtBQUs7d0JBQ0wsS0FBSzt1QkFDTCxNQUFNOztBQW9FVCxNQUFNLE9BQU8sU0FBUzs7O1lBTHJCLFFBQVEsU0FBQztnQkFDUixZQUFZLEVBQUUsQ0FBQyxZQUFZLENBQUM7Z0JBQzVCLE9BQU8sRUFBRSxDQUFDLFlBQVksQ0FBQztnQkFDdkIsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLGlCQUFpQixDQUFDO2FBQzNDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE5nTW9kdWxlLFxuICBPbkNoYW5nZXMsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IENvb3JkaW5hdGVzTW9kdWxlIH0gZnJvbSAnLi9jb29yZGluYXRlcy5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgSFNMQSwgSFNMQXNvdXJjZSB9IGZyb20gJy4vaGVscGVycy9jb2xvci5pbnRlcmZhY2VzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3ItaHVlJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGRpdiBjbGFzcz1cImNvbG9yLWh1ZSBjb2xvci1odWUte3tkaXJlY3Rpb259fVwiIFtzdHlsZS5ib3JkZXItcmFkaXVzLnB4XT1cInJhZGl1c1wiIFtzdHlsZS5ib3gtc2hhZG93XT1cInNoYWRvd1wiPlxuICAgIDxkaXYgbmd4LWNvbG9yLWNvb3JkaW5hdGVzIChjb29yZGluYXRlc0NoYW5nZSk9XCJoYW5kbGVDaGFuZ2UoJGV2ZW50KVwiIGNsYXNzPVwiY29sb3ItaHVlLWNvbnRhaW5lclwiPlxuICAgICAgPGRpdiBjbGFzcz1cImNvbG9yLWh1ZS1wb2ludGVyXCIgW3N0eWxlLmxlZnRdPVwibGVmdFwiIFtzdHlsZS50b3BdPVwidG9wXCIgKm5nSWY9XCIhaGlkZVBvaW50ZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNvbG9yLWh1ZS1zbGlkZXJcIiBbbmdTdHlsZV09XCJwb2ludGVyXCI+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAuY29sb3ItaHVlIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRvcDogMDtcbiAgICAgIGJvdHRvbTogMDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgICByaWdodDogMDtcbiAgICB9XG4gICAgLmNvbG9yLWh1ZS1jb250YWluZXIge1xuICAgICAgbWFyZ2luOiAwIDJweDtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICB9XG4gICAgLmNvbG9yLWh1ZS1wb2ludGVyIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB9XG4gICAgLmNvbG9yLWh1ZS1zbGlkZXIge1xuICAgICAgbWFyZ2luLXRvcDogMXB4O1xuICAgICAgd2lkdGg6IDRweDtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDFweDtcbiAgICAgIGhlaWdodDogOHB4O1xuICAgICAgYm94LXNoYWRvdzogMCAwIDJweCByZ2JhKDAsIDAsIDAsIC42KTtcbiAgICAgIGJhY2tncm91bmQ6ICNmZmY7XG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTJweCk7XG4gICAgfVxuICAgIC5jb2xvci1odWUtaG9yaXpvbnRhbCB7XG4gICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsICNmMDAgMCUsICNmZjAgMTclLCAjMGYwXG4gICAgICAgIDMzJSwgIzBmZiA1MCUsICMwMGYgNjclLCAjZjBmIDgzJSwgI2YwMCAxMDAlKTtcbiAgICB9XG4gICAgLmNvbG9yLWh1ZS12ZXJ0aWNhbCB7XG4gICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gdG9wLCAjZjAwIDAlLCAjZmYwIDE3JSwgIzBmMCAzMyUsXG4gICAgICAgICMwZmYgNTAlLCAjMDBmIDY3JSwgI2YwZiA4MyUsICNmMDAgMTAwJSk7XG4gICAgfVxuICBgLFxuICBdLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEh1ZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGhzbCE6IEhTTEE7XG4gIEBJbnB1dCgpIHBvaW50ZXIhOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+O1xuICBASW5wdXQoKSByYWRpdXMhOiBudW1iZXI7XG4gIEBJbnB1dCgpIHNoYWRvdyE6IHN0cmluZztcbiAgQElucHV0KCkgaGlkZVBvaW50ZXIgPSBmYWxzZTtcbiAgQElucHV0KCkgZGlyZWN0aW9uOiAnaG9yaXpvbnRhbCcgfCAndmVydGljYWwnID0gJ2hvcml6b250YWwnO1xuICBAT3V0cHV0KCkgb25DaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHsgZGF0YTogSFNMQXNvdXJjZTsgJGV2ZW50OiBFdmVudCB9PigpO1xuICBsZWZ0ID0gJzBweCc7XG4gIHRvcCA9ICcnO1xuXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmRpcmVjdGlvbiA9PT0gJ2hvcml6b250YWwnKSB7XG4gICAgICB0aGlzLmxlZnQgPSBgJHt0aGlzLmhzbC5oICogMTAwIC8gMzYwfSVgO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnRvcCA9IGAkey0odGhpcy5oc2wuaCAqIDEwMCAvIDM2MCkgKyAxMDB9JWA7XG4gICAgfVxuICB9XG4gIGhhbmRsZUNoYW5nZSh7IHRvcCwgbGVmdCwgY29udGFpbmVySGVpZ2h0LCBjb250YWluZXJXaWR0aCwgJGV2ZW50IH0pOiB2b2lkIHtcbiAgICBsZXQgZGF0YTogSFNMQXNvdXJjZSB8IHVuZGVmaW5lZDtcbiAgICBpZiAodGhpcy5kaXJlY3Rpb24gPT09ICd2ZXJ0aWNhbCcpIHtcbiAgICAgIGxldCBoOiBudW1iZXI7XG4gICAgICBpZiAodG9wIDwgMCkge1xuICAgICAgICBoID0gMzU5O1xuICAgICAgfSBlbHNlIGlmICh0b3AgPiBjb250YWluZXJIZWlnaHQpIHtcbiAgICAgICAgaCA9IDA7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBjb25zdCBwZXJjZW50ID0gLSh0b3AgKiAxMDAgLyBjb250YWluZXJIZWlnaHQpICsgMTAwO1xuICAgICAgICBoID0gMzYwICogcGVyY2VudCAvIDEwMDtcbiAgICAgIH1cblxuICAgICAgaWYgKHRoaXMuaHNsLmggIT09IGgpIHtcbiAgICAgICAgZGF0YSA9IHtcbiAgICAgICAgICBoLFxuICAgICAgICAgIHM6IHRoaXMuaHNsLnMsXG4gICAgICAgICAgbDogdGhpcy5oc2wubCxcbiAgICAgICAgICBhOiB0aGlzLmhzbC5hLFxuICAgICAgICAgIHNvdXJjZTogJ3JnYicsXG4gICAgICAgIH07XG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIGxldCBoOiBudW1iZXI7XG4gICAgICBpZiAobGVmdCA8IDApIHtcbiAgICAgICAgaCA9IDA7XG4gICAgICB9IGVsc2UgaWYgKGxlZnQgPiBjb250YWluZXJXaWR0aCkge1xuICAgICAgICBoID0gMzU5O1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgY29uc3QgcGVyY2VudCA9IGxlZnQgKiAxMDAgLyBjb250YWluZXJXaWR0aDtcbiAgICAgICAgaCA9IDM2MCAqIHBlcmNlbnQgLyAxMDA7XG4gICAgICB9XG5cbiAgICAgIGlmICh0aGlzLmhzbC5oICE9PSBoKSB7XG4gICAgICAgIGRhdGEgPSB7XG4gICAgICAgICAgaCxcbiAgICAgICAgICBzOiB0aGlzLmhzbC5zLFxuICAgICAgICAgIGw6IHRoaXMuaHNsLmwsXG4gICAgICAgICAgYTogdGhpcy5oc2wuYSxcbiAgICAgICAgICBzb3VyY2U6ICdyZ2InLFxuICAgICAgICB9O1xuICAgICAgfVxuICAgIH1cblxuICAgIGlmICghZGF0YSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMub25DaGFuZ2UuZW1pdCh7IGRhdGEsICRldmVudCB9KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtIdWVDb21wb25lbnRdLFxuICBleHBvcnRzOiBbSHVlQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ29vcmRpbmF0ZXNNb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBIdWVNb2R1bGUge31cbiJdfQ==
|
package/esm2015/ngx-color.js
DELETED
@@ -1,5 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Generated bundle index. Do not edit.
|
3
|
-
*/
|
4
|
-
export * from './public_api';
|
5
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9jb21tb24vbmd4LWNvbG9yLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljX2FwaSc7XG4iXX0=
|
package/esm2015/public_api.js
DELETED
@@ -1,14 +0,0 @@
|
|
1
|
-
export * from './alpha.component';
|
2
|
-
export * from './checkboard.component';
|
3
|
-
export * from './color-wrap.component';
|
4
|
-
export * from './editable-input.component';
|
5
|
-
export * from './hue.component';
|
6
|
-
export * from './raised.component';
|
7
|
-
export * from './saturation.component';
|
8
|
-
export * from './swatch.component';
|
9
|
-
export * from './coordinates.directive';
|
10
|
-
export * from './shade.component';
|
11
|
-
export * from './helpers/checkboard';
|
12
|
-
export * from './helpers/color';
|
13
|
-
export * from './helpers/color.interfaces';
|
14
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY29tbW9uL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLG9CQUFvQixDQUFDO0FBQ25DLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxtQkFBbUIsQ0FBQztBQUVsQyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyw0QkFBNEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vYWxwaGEuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vY2hlY2tib2FyZC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9jb2xvci13cmFwLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2VkaXRhYmxlLWlucHV0LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2h1ZS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9yYWlzZWQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vc2F0dXJhdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9zd2F0Y2guY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vY29vcmRpbmF0ZXMuZGlyZWN0aXZlJztcbmV4cG9ydCAqIGZyb20gJy4vc2hhZGUuY29tcG9uZW50JztcblxuZXhwb3J0ICogZnJvbSAnLi9oZWxwZXJzL2NoZWNrYm9hcmQnO1xuZXhwb3J0ICogZnJvbSAnLi9oZWxwZXJzL2NvbG9yJztcbmV4cG9ydCAqIGZyb20gJy4vaGVscGVycy9jb2xvci5pbnRlcmZhY2VzJztcbiJdfQ==
|
@@ -1,73 +0,0 @@
|
|
1
|
-
import { CommonModule } from '@angular/common';
|
2
|
-
import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';
|
3
|
-
export class RaisedComponent {
|
4
|
-
constructor() {
|
5
|
-
this.zDepth = 1;
|
6
|
-
this.radius = 1;
|
7
|
-
this.background = '#fff';
|
8
|
-
}
|
9
|
-
}
|
10
|
-
RaisedComponent.decorators = [
|
11
|
-
{ type: Component, args: [{
|
12
|
-
selector: 'color-raised',
|
13
|
-
template: `
|
14
|
-
<div class="raised-wrap">
|
15
|
-
<div class="raised-bg zDepth-{{zDepth}}" [style.background]="background"></div>
|
16
|
-
<div class="raised-content">
|
17
|
-
<ng-content></ng-content>
|
18
|
-
</div>
|
19
|
-
</div>
|
20
|
-
`,
|
21
|
-
preserveWhitespaces: false,
|
22
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
23
|
-
styles: [`
|
24
|
-
.raised-wrap {
|
25
|
-
position: relative;
|
26
|
-
display: inline-block;
|
27
|
-
}
|
28
|
-
.raised-bg {
|
29
|
-
position: absolute;
|
30
|
-
top: 0px;
|
31
|
-
right: 0px;
|
32
|
-
bottom: 0px;
|
33
|
-
left: 0px;
|
34
|
-
}
|
35
|
-
.raised-content {
|
36
|
-
position: relative;
|
37
|
-
}
|
38
|
-
.zDepth-0 {
|
39
|
-
box-shadow: none;
|
40
|
-
}
|
41
|
-
.zDepth-1 {
|
42
|
-
box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);
|
43
|
-
}
|
44
|
-
.zDepth-2 {
|
45
|
-
box-shadow: 0 6px 20px rgba(0,0,0,.19), 0 8px 17px rgba(0,0,0,.2);
|
46
|
-
}
|
47
|
-
.zDepth-3 {
|
48
|
-
box-shadow: 0 17px 50px rgba(0,0,0,.19), 0 12px 15px rgba(0,0,0,.24);
|
49
|
-
}
|
50
|
-
.zDepth-4 {
|
51
|
-
box-shadow: 0 25px 55px rgba(0,0,0,.21), 0 16px 28px rgba(0,0,0,.22);
|
52
|
-
}
|
53
|
-
.zDepth-5 {
|
54
|
-
box-shadow: 0 40px 77px rgba(0,0,0,.22), 0 27px 24px rgba(0,0,0,.2);
|
55
|
-
}
|
56
|
-
`]
|
57
|
-
},] }
|
58
|
-
];
|
59
|
-
RaisedComponent.propDecorators = {
|
60
|
-
zDepth: [{ type: Input }],
|
61
|
-
radius: [{ type: Input }],
|
62
|
-
background: [{ type: Input }]
|
63
|
-
};
|
64
|
-
export class RaisedModule {
|
65
|
-
}
|
66
|
-
RaisedModule.decorators = [
|
67
|
-
{ type: NgModule, args: [{
|
68
|
-
declarations: [RaisedComponent],
|
69
|
-
exports: [RaisedComponent],
|
70
|
-
imports: [CommonModule],
|
71
|
-
},] }
|
72
|
-
];
|
73
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFpc2VkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY29tbW9uL3JhaXNlZC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQW1EcEYsTUFBTSxPQUFPLGVBQWU7SUEvQzVCO1FBZ0RXLFdBQU0sR0FBVyxDQUFDLENBQUM7UUFDbkIsV0FBTSxHQUFHLENBQUMsQ0FBQztRQUNYLGVBQVUsR0FBRyxNQUFNLENBQUM7SUFDL0IsQ0FBQzs7O1lBbkRBLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsY0FBYztnQkFDeEIsUUFBUSxFQUFFOzs7Ozs7O0dBT1Q7Z0JBbUNELG1CQUFtQixFQUFFLEtBQUs7Z0JBQzFCLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO3lCQW5DdEM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWlDUjthQUdGOzs7cUJBRUUsS0FBSztxQkFDTCxLQUFLO3lCQUNMLEtBQUs7O0FBUVIsTUFBTSxPQUFPLFlBQVk7OztZQUx4QixRQUFRLFNBQUM7Z0JBQ1IsWUFBWSxFQUFFLENBQUMsZUFBZSxDQUFDO2dCQUMvQixPQUFPLEVBQUUsQ0FBQyxlQUFlLENBQUM7Z0JBQzFCLE9BQU8sRUFBRSxDQUFDLFlBQVksQ0FBQzthQUN4QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCwgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IHR5cGUgekRlcHRoID0gMCB8IDEgfCAyIHwgMyB8IDQgfCA1O1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1yYWlzZWQnLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwicmFpc2VkLXdyYXBcIj5cbiAgICA8ZGl2IGNsYXNzPVwicmFpc2VkLWJnIHpEZXB0aC17e3pEZXB0aH19XCIgW3N0eWxlLmJhY2tncm91bmRdPVwiYmFja2dyb3VuZFwiPjwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJyYWlzZWQtY29udGVudFwiPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbYFxuICAgIC5yYWlzZWQtd3JhcCB7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgfVxuICAgIC5yYWlzZWQtYmcge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwcHg7XG4gICAgICByaWdodDogMHB4O1xuICAgICAgYm90dG9tOiAwcHg7XG4gICAgICBsZWZ0OiAwcHg7XG4gICAgfVxuICAgIC5yYWlzZWQtY29udGVudCB7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgfVxuICAgIC56RGVwdGgtMCB7XG4gICAgICBib3gtc2hhZG93OiBub25lO1xuICAgIH1cbiAgICAuekRlcHRoLTEge1xuICAgICAgYm94LXNoYWRvdzogMCAycHggMTBweCByZ2JhKDAsMCwwLC4xMiksIDAgMnB4IDVweCByZ2JhKDAsMCwwLC4xNik7XG4gICAgfVxuICAgIC56RGVwdGgtMiB7XG4gICAgICBib3gtc2hhZG93OiAwIDZweCAyMHB4IHJnYmEoMCwwLDAsLjE5KSwgMCA4cHggMTdweCByZ2JhKDAsMCwwLC4yKTtcbiAgICB9XG4gICAgLnpEZXB0aC0zIHtcbiAgICAgIGJveC1zaGFkb3c6IDAgMTdweCA1MHB4IHJnYmEoMCwwLDAsLjE5KSwgMCAxMnB4IDE1cHggcmdiYSgwLDAsMCwuMjQpO1xuICAgIH1cbiAgICAuekRlcHRoLTQge1xuICAgICAgYm94LXNoYWRvdzogMCAyNXB4IDU1cHggcmdiYSgwLDAsMCwuMjEpLCAwIDE2cHggMjhweCByZ2JhKDAsMCwwLC4yMik7XG4gICAgfVxuICAgIC56RGVwdGgtNSB7XG4gICAgICBib3gtc2hhZG93OiAwIDQwcHggNzdweCByZ2JhKDAsMCwwLC4yMiksIDAgMjdweCAyNHB4IHJnYmEoMCwwLDAsLjIpO1xuICAgIH1cbiAgYF0sXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgUmFpc2VkQ29tcG9uZW50IHtcbiAgQElucHV0KCkgekRlcHRoOiB6RGVwdGggPSAxO1xuICBASW5wdXQoKSByYWRpdXMgPSAxO1xuICBASW5wdXQoKSBiYWNrZ3JvdW5kID0gJyNmZmYnO1xufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtSYWlzZWRDb21wb25lbnRdLFxuICBleHBvcnRzOiBbUmFpc2VkQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIFJhaXNlZE1vZHVsZSB7IH1cbiJdfQ==
|
@@ -1,111 +0,0 @@
|
|
1
|
-
import { CommonModule } from '@angular/common';
|
2
|
-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Output, } from '@angular/core';
|
3
|
-
import { CoordinatesModule } from './coordinates.directive';
|
4
|
-
export class SaturationComponent {
|
5
|
-
constructor() {
|
6
|
-
this.onChange = new EventEmitter();
|
7
|
-
}
|
8
|
-
ngOnChanges() {
|
9
|
-
this.background = `hsl(${this.hsl.h}, 100%, 50%)`;
|
10
|
-
this.pointerTop = -(this.hsv.v * 100) + 1 + 100 + '%';
|
11
|
-
this.pointerLeft = this.hsv.s * 100 + '%';
|
12
|
-
}
|
13
|
-
handleChange({ top, left, containerHeight, containerWidth, $event }) {
|
14
|
-
if (left < 0) {
|
15
|
-
left = 0;
|
16
|
-
}
|
17
|
-
else if (left > containerWidth) {
|
18
|
-
left = containerWidth;
|
19
|
-
}
|
20
|
-
else if (top < 0) {
|
21
|
-
top = 0;
|
22
|
-
}
|
23
|
-
else if (top > containerHeight) {
|
24
|
-
top = containerHeight;
|
25
|
-
}
|
26
|
-
const saturation = left / containerWidth;
|
27
|
-
let bright = -(top / containerHeight) + 1;
|
28
|
-
bright = bright > 0 ? bright : 0;
|
29
|
-
bright = bright > 1 ? 1 : bright;
|
30
|
-
const data = {
|
31
|
-
h: this.hsl.h,
|
32
|
-
s: saturation,
|
33
|
-
v: bright,
|
34
|
-
a: this.hsl.a,
|
35
|
-
source: 'hsva',
|
36
|
-
};
|
37
|
-
this.onChange.emit({ data, $event });
|
38
|
-
}
|
39
|
-
}
|
40
|
-
SaturationComponent.decorators = [
|
41
|
-
{ type: Component, args: [{
|
42
|
-
selector: 'color-saturation',
|
43
|
-
template: `
|
44
|
-
<div class="color-saturation" ngx-color-coordinates (coordinatesChange)="handleChange($event)" [style.background]="background">
|
45
|
-
<div class="saturation-white">
|
46
|
-
<div class="saturation-black"></div>
|
47
|
-
<div class="saturation-pointer" [ngStyle]="pointer" [style.top]="pointerTop" [style.left]="pointerLeft">
|
48
|
-
<div class="saturation-circle" [ngStyle]="circle"></div>
|
49
|
-
</div>
|
50
|
-
</div>
|
51
|
-
</div>
|
52
|
-
`,
|
53
|
-
preserveWhitespaces: false,
|
54
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
55
|
-
styles: [`
|
56
|
-
.saturation-white {
|
57
|
-
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
|
58
|
-
position: absolute;
|
59
|
-
top: 0;
|
60
|
-
bottom: 0;
|
61
|
-
left: 0;
|
62
|
-
right: 0;
|
63
|
-
}
|
64
|
-
.saturation-black {
|
65
|
-
background: linear-gradient(to top, #000, rgba(0,0,0,0));
|
66
|
-
position: absolute;
|
67
|
-
top: 0;
|
68
|
-
bottom: 0;
|
69
|
-
left: 0;
|
70
|
-
right: 0;
|
71
|
-
}
|
72
|
-
.color-saturation {
|
73
|
-
position: absolute;
|
74
|
-
top: 0;
|
75
|
-
bottom: 0;
|
76
|
-
left: 0;
|
77
|
-
right: 0;
|
78
|
-
}
|
79
|
-
.saturation-pointer {
|
80
|
-
position: absolute;
|
81
|
-
cursor: default;
|
82
|
-
}
|
83
|
-
.saturation-circle {
|
84
|
-
width: 4px;
|
85
|
-
height: 4px;
|
86
|
-
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);
|
87
|
-
border-radius: 50%;
|
88
|
-
cursor: hand;
|
89
|
-
transform: translate(-2px, -4px);
|
90
|
-
}
|
91
|
-
`]
|
92
|
-
},] }
|
93
|
-
];
|
94
|
-
SaturationComponent.propDecorators = {
|
95
|
-
hsl: [{ type: Input }],
|
96
|
-
hsv: [{ type: Input }],
|
97
|
-
radius: [{ type: Input }],
|
98
|
-
pointer: [{ type: Input }],
|
99
|
-
circle: [{ type: Input }],
|
100
|
-
onChange: [{ type: Output }]
|
101
|
-
};
|
102
|
-
export class SaturationModule {
|
103
|
-
}
|
104
|
-
SaturationModule.decorators = [
|
105
|
-
{ type: NgModule, args: [{
|
106
|
-
declarations: [SaturationComponent],
|
107
|
-
exports: [SaturationComponent],
|
108
|
-
imports: [CommonModule, CoordinatesModule],
|
109
|
-
},] }
|
110
|
-
];
|
111
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2F0dXJhdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2NvbW1vbi9zYXR1cmF0aW9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFDTCxRQUFRLEVBRVIsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBR3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBeUQ1RCxNQUFNLE9BQU8sbUJBQW1CO0lBdERoQztRQTREWSxhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQXVDLENBQUM7SUFtQy9FLENBQUM7SUE5QkMsV0FBVztRQUNULElBQUksQ0FBQyxVQUFVLEdBQUcsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsY0FBYyxDQUFDO1FBQ2xELElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxHQUFHLENBQUMsR0FBRyxHQUFHLEdBQUcsR0FBRyxDQUFDO1FBQ3RELElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxHQUFHLEdBQUcsQ0FBQztJQUM1QyxDQUFDO0lBQ0QsWUFBWSxDQUFDLEVBQUUsR0FBRyxFQUFFLElBQUksRUFBRSxlQUFlLEVBQUUsY0FBYyxFQUFFLE1BQU0sRUFBRTtRQUNqRSxJQUFJLElBQUksR0FBRyxDQUFDLEVBQUU7WUFDWixJQUFJLEdBQUcsQ0FBQyxDQUFDO1NBQ1Y7YUFBTSxJQUFJLElBQUksR0FBRyxjQUFjLEVBQUU7WUFDaEMsSUFBSSxHQUFHLGNBQWMsQ0FBQztTQUN2QjthQUFNLElBQUksR0FBRyxHQUFHLENBQUMsRUFBRTtZQUNsQixHQUFHLEdBQUcsQ0FBQyxDQUFDO1NBQ1Q7YUFBTSxJQUFJLEdBQUcsR0FBRyxlQUFlLEVBQUU7WUFDaEMsR0FBRyxHQUFHLGVBQWUsQ0FBQztTQUN2QjtRQUVELE1BQU0sVUFBVSxHQUFHLElBQUksR0FBRyxjQUFjLENBQUM7UUFDekMsSUFBSSxNQUFNLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxlQUFlLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDMUMsTUFBTSxHQUFHLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ2pDLE1BQU0sR0FBRyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQztRQUVqQyxNQUFNLElBQUksR0FBZTtZQUN2QixDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1lBQ2IsQ0FBQyxFQUFFLFVBQVU7WUFDYixDQUFDLEVBQUUsTUFBTTtZQUNULENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7WUFDYixNQUFNLEVBQUUsTUFBTTtTQUNmLENBQUM7UUFDRixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7OztZQTlGRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtnQkFDNUIsUUFBUSxFQUFFOzs7Ozs7Ozs7R0FTVDtnQkF3Q0QsbUJBQW1CLEVBQUUsS0FBSztnQkFDMUIsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07eUJBdkM3Qzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBb0NEO2FBSUY7OztrQkFFRSxLQUFLO2tCQUNMLEtBQUs7cUJBQ0wsS0FBSztzQkFDTCxLQUFLO3FCQUNMLEtBQUs7dUJBQ0wsTUFBTTs7QUEwQ1QsTUFBTSxPQUFPLGdCQUFnQjs7O1lBTDVCLFFBQVEsU0FBQztnQkFDUixZQUFZLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQztnQkFDbkMsT0FBTyxFQUFFLENBQUMsbUJBQW1CLENBQUM7Z0JBQzlCLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxpQkFBaUIsQ0FBQzthQUMzQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBOZ01vZHVsZSxcbiAgT25DaGFuZ2VzLFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5cbmltcG9ydCB7IENvb3JkaW5hdGVzTW9kdWxlIH0gZnJvbSAnLi9jb29yZGluYXRlcy5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgSFNMQSwgSFNWQSwgSFNWQXNvdXJjZSB9IGZyb20gJy4vaGVscGVycy9jb2xvci5pbnRlcmZhY2VzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3Itc2F0dXJhdGlvbicsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJjb2xvci1zYXR1cmF0aW9uXCIgbmd4LWNvbG9yLWNvb3JkaW5hdGVzIChjb29yZGluYXRlc0NoYW5nZSk9XCJoYW5kbGVDaGFuZ2UoJGV2ZW50KVwiIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImJhY2tncm91bmRcIj5cbiAgICA8ZGl2IGNsYXNzPVwic2F0dXJhdGlvbi13aGl0ZVwiPlxuICAgICAgPGRpdiBjbGFzcz1cInNhdHVyYXRpb24tYmxhY2tcIj48L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJzYXR1cmF0aW9uLXBvaW50ZXJcIiBbbmdTdHlsZV09XCJwb2ludGVyXCIgW3N0eWxlLnRvcF09XCJwb2ludGVyVG9wXCIgW3N0eWxlLmxlZnRdPVwicG9pbnRlckxlZnRcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNhdHVyYXRpb24tY2lyY2xlXCIgW25nU3R5bGVdPVwiY2lyY2xlXCI+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAuc2F0dXJhdGlvbi13aGl0ZSB7XG4gICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsICNmZmYsIHJnYmEoMjU1LDI1NSwyNTUsMCkpO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHJpZ2h0OiAwO1xuICAgIH1cbiAgICAuc2F0dXJhdGlvbi1ibGFjayB7XG4gICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gdG9wLCAjMDAwLCByZ2JhKDAsMCwwLDApKTtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRvcDogMDtcbiAgICAgIGJvdHRvbTogMDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgICByaWdodDogMDtcbiAgICB9XG4gICAgLmNvbG9yLXNhdHVyYXRpb24ge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHJpZ2h0OiAwO1xuICAgIH1cbiAgICAuc2F0dXJhdGlvbi1wb2ludGVyIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGN1cnNvcjogZGVmYXVsdDtcbiAgICB9XG4gICAgLnNhdHVyYXRpb24tY2lyY2xlIHtcbiAgICAgIHdpZHRoOiA0cHg7XG4gICAgICBoZWlnaHQ6IDRweDtcbiAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDEuNXB4ICNmZmYsIGluc2V0IDAgMCAxcHggMXB4IHJnYmEoMCwwLDAsLjMpLCAwIDAgMXB4IDJweCByZ2JhKDAsMCwwLC40KTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgIGN1cnNvcjogaGFuZDtcbiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC0ycHgsIC00cHgpO1xuICAgIH1cbiAgYCxcbiAgXSxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTYXR1cmF0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgaHNsITogSFNMQTtcbiAgQElucHV0KCkgaHN2ITogSFNWQTtcbiAgQElucHV0KCkgcmFkaXVzITogbnVtYmVyO1xuICBASW5wdXQoKSBwb2ludGVyITogUmVjb3JkPHN0cmluZywgc3RyaW5nPjtcbiAgQElucHV0KCkgY2lyY2xlITogUmVjb3JkPHN0cmluZywgc3RyaW5nPjtcbiAgQE91dHB1dCgpIG9uQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjx7IGRhdGE6IEhTVkFzb3VyY2U7ICRldmVudDogRXZlbnQgfT4oKTtcbiAgYmFja2dyb3VuZCE6IHN0cmluZztcbiAgcG9pbnRlclRvcCE6IHN0cmluZztcbiAgcG9pbnRlckxlZnQhOiBzdHJpbmc7XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgdGhpcy5iYWNrZ3JvdW5kID0gYGhzbCgke3RoaXMuaHNsLmh9LCAxMDAlLCA1MCUpYDtcbiAgICB0aGlzLnBvaW50ZXJUb3AgPSAtKHRoaXMuaHN2LnYgKiAxMDApICsgMSArIDEwMCArICclJztcbiAgICB0aGlzLnBvaW50ZXJMZWZ0ID0gdGhpcy5oc3YucyAqIDEwMCArICclJztcbiAgfVxuICBoYW5kbGVDaGFuZ2UoeyB0b3AsIGxlZnQsIGNvbnRhaW5lckhlaWdodCwgY29udGFpbmVyV2lkdGgsICRldmVudCB9KSB7XG4gICAgaWYgKGxlZnQgPCAwKSB7XG4gICAgICBsZWZ0ID0gMDtcbiAgICB9IGVsc2UgaWYgKGxlZnQgPiBjb250YWluZXJXaWR0aCkge1xuICAgICAgbGVmdCA9IGNvbnRhaW5lcldpZHRoO1xuICAgIH0gZWxzZSBpZiAodG9wIDwgMCkge1xuICAgICAgdG9wID0gMDtcbiAgICB9IGVsc2UgaWYgKHRvcCA+IGNvbnRhaW5lckhlaWdodCkge1xuICAgICAgdG9wID0gY29udGFpbmVySGVpZ2h0O1xuICAgIH1cblxuICAgIGNvbnN0IHNhdHVyYXRpb24gPSBsZWZ0IC8gY29udGFpbmVyV2lkdGg7XG4gICAgbGV0IGJyaWdodCA9IC0odG9wIC8gY29udGFpbmVySGVpZ2h0KSArIDE7XG4gICAgYnJpZ2h0ID0gYnJpZ2h0ID4gMCA/IGJyaWdodCA6IDA7XG4gICAgYnJpZ2h0ID0gYnJpZ2h0ID4gMSA/IDEgOiBicmlnaHQ7XG5cbiAgICBjb25zdCBkYXRhOiBIU1ZBc291cmNlID0ge1xuICAgICAgaDogdGhpcy5oc2wuaCxcbiAgICAgIHM6IHNhdHVyYXRpb24sXG4gICAgICB2OiBicmlnaHQsXG4gICAgICBhOiB0aGlzLmhzbC5hLFxuICAgICAgc291cmNlOiAnaHN2YScsXG4gICAgfTtcbiAgICB0aGlzLm9uQ2hhbmdlLmVtaXQoeyBkYXRhLCAkZXZlbnQgfSk7XG4gIH1cbn1cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbU2F0dXJhdGlvbkNvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtTYXR1cmF0aW9uQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ29vcmRpbmF0ZXNNb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBTYXR1cmF0aW9uTW9kdWxlIHt9XG4iXX0=
|
@@ -1,127 +0,0 @@
|
|
1
|
-
import { CommonModule } from '@angular/common';
|
2
|
-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Output, } from '@angular/core';
|
3
|
-
import { CoordinatesModule } from './coordinates.directive';
|
4
|
-
import { TinyColor } from '@ctrl/tinycolor';
|
5
|
-
export class ShadeComponent {
|
6
|
-
constructor() {
|
7
|
-
this.onChange = new EventEmitter();
|
8
|
-
}
|
9
|
-
ngOnChanges() {
|
10
|
-
this.gradient = {
|
11
|
-
background: `linear-gradient(to right,
|
12
|
-
hsl(${this.hsl.h}, 90%, 55%),
|
13
|
-
#000)`,
|
14
|
-
};
|
15
|
-
const hsv = new TinyColor(this.hsl).toHsv();
|
16
|
-
this.pointerLeft = 100 - (hsv.v * 100);
|
17
|
-
}
|
18
|
-
handleChange({ left, containerWidth, $event }) {
|
19
|
-
let data;
|
20
|
-
let v;
|
21
|
-
if (left < 0) {
|
22
|
-
v = 0;
|
23
|
-
}
|
24
|
-
else if (left > containerWidth) {
|
25
|
-
v = 1;
|
26
|
-
}
|
27
|
-
else {
|
28
|
-
v = Math.round((left * 100) / containerWidth) / 100;
|
29
|
-
}
|
30
|
-
const hsv = new TinyColor(this.hsl).toHsv();
|
31
|
-
if (hsv.v !== v) {
|
32
|
-
data = {
|
33
|
-
h: this.hsl.h,
|
34
|
-
s: 100,
|
35
|
-
v: 1 - v,
|
36
|
-
l: this.hsl.l,
|
37
|
-
a: this.hsl.a,
|
38
|
-
source: 'rgb',
|
39
|
-
};
|
40
|
-
}
|
41
|
-
if (!data) {
|
42
|
-
return;
|
43
|
-
}
|
44
|
-
this.onChange.emit({ data, $event });
|
45
|
-
}
|
46
|
-
}
|
47
|
-
ShadeComponent.decorators = [
|
48
|
-
{ type: Component, args: [{
|
49
|
-
selector: 'color-shade',
|
50
|
-
template: `
|
51
|
-
<div class="shade" [style.border-radius]="radius">
|
52
|
-
<div
|
53
|
-
class="shade-gradient"
|
54
|
-
[ngStyle]="gradient"
|
55
|
-
[style.box-shadow]="shadow"
|
56
|
-
[style.border-radius]="radius"
|
57
|
-
></div>
|
58
|
-
<div
|
59
|
-
ngx-color-coordinates
|
60
|
-
(coordinatesChange)="handleChange($event)"
|
61
|
-
class="shade-container"
|
62
|
-
>
|
63
|
-
<div
|
64
|
-
class="shade-pointer"
|
65
|
-
[style.left.%]="pointerLeft"
|
66
|
-
[style.top.%]="pointerTop"
|
67
|
-
>
|
68
|
-
<div class="shade-slider" [ngStyle]="pointer"></div>
|
69
|
-
</div>
|
70
|
-
</div>
|
71
|
-
</div>
|
72
|
-
`,
|
73
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
74
|
-
preserveWhitespaces: false,
|
75
|
-
styles: [`
|
76
|
-
.shade {
|
77
|
-
position: absolute;
|
78
|
-
top: 0;
|
79
|
-
bottom: 0;
|
80
|
-
left: 0;
|
81
|
-
right: 0;
|
82
|
-
}
|
83
|
-
.shade-gradient {
|
84
|
-
position: absolute;
|
85
|
-
top: 0;
|
86
|
-
bottom: 0;
|
87
|
-
left: 0;
|
88
|
-
right: 0;
|
89
|
-
}
|
90
|
-
.shade-container {
|
91
|
-
position: relative;
|
92
|
-
height: 100%;
|
93
|
-
margin: 0 3px;
|
94
|
-
}
|
95
|
-
.shade-pointer {
|
96
|
-
position: absolute;
|
97
|
-
}
|
98
|
-
.shade-slider {
|
99
|
-
width: 4px;
|
100
|
-
border-radius: 1px;
|
101
|
-
height: 8px;
|
102
|
-
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
|
103
|
-
background: #fff;
|
104
|
-
margin-top: 1px;
|
105
|
-
transform: translateX(-2px);
|
106
|
-
}
|
107
|
-
`]
|
108
|
-
},] }
|
109
|
-
];
|
110
|
-
ShadeComponent.propDecorators = {
|
111
|
-
hsl: [{ type: Input }],
|
112
|
-
rgb: [{ type: Input }],
|
113
|
-
pointer: [{ type: Input }],
|
114
|
-
shadow: [{ type: Input }],
|
115
|
-
radius: [{ type: Input }],
|
116
|
-
onChange: [{ type: Output }]
|
117
|
-
};
|
118
|
-
export class ShadeModule {
|
119
|
-
}
|
120
|
-
ShadeModule.decorators = [
|
121
|
-
{ type: NgModule, args: [{
|
122
|
-
declarations: [ShadeComponent],
|
123
|
-
exports: [ShadeComponent],
|
124
|
-
imports: [CommonModule, CoordinatesModule],
|
125
|
-
},] }
|
126
|
-
];
|
127
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhZGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9jb21tb24vc2hhZGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLFFBQVEsRUFFUixNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFFNUQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBa0U1QyxNQUFNLE9BQU8sY0FBYztJQS9EM0I7UUFxRVksYUFBUSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUE0Qy9DLENBQUM7SUF2Q0MsV0FBVztRQUNULElBQUksQ0FBQyxRQUFRLEdBQUc7WUFDZCxVQUFVLEVBQUU7Z0JBQ0YsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO2dCQUNWO1NBQ1gsQ0FBQztRQUNGLE1BQU0sR0FBRyxHQUFHLElBQUksU0FBUyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUM1QyxJQUFJLENBQUMsV0FBVyxHQUFHLEdBQUcsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVELFlBQVksQ0FBQyxFQUFFLElBQUksRUFBRSxjQUFjLEVBQUUsTUFBTSxFQUFFO1FBQzNDLElBQUksSUFBSSxDQUFDO1FBQ1QsSUFBSSxDQUFTLENBQUM7UUFDZCxJQUFJLElBQUksR0FBRyxDQUFDLEVBQUU7WUFDWixDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQ1A7YUFBTSxJQUFJLElBQUksR0FBRyxjQUFjLEVBQUU7WUFDaEMsQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUNQO2FBQU07WUFDTCxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLElBQUksR0FBRyxHQUFHLENBQUMsR0FBRyxjQUFjLENBQUMsR0FBRyxHQUFHLENBQUM7U0FDckQ7UUFFRCxNQUFNLEdBQUcsR0FBRyxJQUFJLFNBQVMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDNUMsSUFBSSxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUNmLElBQUksR0FBRztnQkFDTCxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO2dCQUNiLENBQUMsRUFBRSxHQUFHO2dCQUNOLENBQUMsRUFBRSxDQUFDLEdBQUcsQ0FBQztnQkFDUixDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO2dCQUNiLENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7Z0JBQ2IsTUFBTSxFQUFFLEtBQUs7YUFDZCxDQUFDO1NBQ0g7UUFFRCxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ1QsT0FBTztTQUNSO1FBRUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQztJQUN2QyxDQUFDOzs7WUFoSEYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxhQUFhO2dCQUN2QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQlQ7Z0JBb0NELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2dCQUMvQyxtQkFBbUIsRUFBRSxLQUFLO3lCQW5DeEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBZ0NEO2FBSUY7OztrQkFFRSxLQUFLO2tCQUNMLEtBQUs7c0JBQ0wsS0FBSztxQkFDTCxLQUFLO3FCQUNMLEtBQUs7dUJBQ0wsTUFBTTs7QUFtRFQsTUFBTSxPQUFPLFdBQVc7OztZQUx2QixRQUFRLFNBQUM7Z0JBQ1IsWUFBWSxFQUFFLENBQUMsY0FBYyxDQUFDO2dCQUM5QixPQUFPLEVBQUUsQ0FBQyxjQUFjLENBQUM7Z0JBQ3pCLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxpQkFBaUIsQ0FBQzthQUMzQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBOZ01vZHVsZSxcbiAgT25DaGFuZ2VzLFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29vcmRpbmF0ZXNNb2R1bGUgfSBmcm9tICcuL2Nvb3JkaW5hdGVzLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBIU0xBLCBSR0JBIH0gZnJvbSAnLi9oZWxwZXJzL2NvbG9yLmludGVyZmFjZXMnO1xuaW1wb3J0IHsgVGlueUNvbG9yIH0gZnJvbSAnQGN0cmwvdGlueWNvbG9yJztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1zaGFkZScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cInNoYWRlXCIgW3N0eWxlLmJvcmRlci1yYWRpdXNdPVwicmFkaXVzXCI+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwic2hhZGUtZ3JhZGllbnRcIlxuICAgICAgICBbbmdTdHlsZV09XCJncmFkaWVudFwiXG4gICAgICAgIFtzdHlsZS5ib3gtc2hhZG93XT1cInNoYWRvd1wiXG4gICAgICAgIFtzdHlsZS5ib3JkZXItcmFkaXVzXT1cInJhZGl1c1wiXG4gICAgICA+PC9kaXY+XG4gICAgICA8ZGl2XG4gICAgICAgIG5neC1jb2xvci1jb29yZGluYXRlc1xuICAgICAgICAoY29vcmRpbmF0ZXNDaGFuZ2UpPVwiaGFuZGxlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICBjbGFzcz1cInNoYWRlLWNvbnRhaW5lclwiXG4gICAgICA+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzcz1cInNoYWRlLXBvaW50ZXJcIlxuICAgICAgICAgIFtzdHlsZS5sZWZ0LiVdPVwicG9pbnRlckxlZnRcIlxuICAgICAgICAgIFtzdHlsZS50b3AuJV09XCJwb2ludGVyVG9wXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJzaGFkZS1zbGlkZXJcIiBbbmdTdHlsZV09XCJwb2ludGVyXCI+PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAuc2hhZGUge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHJpZ2h0OiAwO1xuICAgIH1cbiAgICAuc2hhZGUtZ3JhZGllbnQge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHJpZ2h0OiAwO1xuICAgIH1cbiAgICAuc2hhZGUtY29udGFpbmVyIHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIG1hcmdpbjogMCAzcHg7XG4gICAgfVxuICAgIC5zaGFkZS1wb2ludGVyIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB9XG4gICAgLnNoYWRlLXNsaWRlciB7XG4gICAgICB3aWR0aDogNHB4O1xuICAgICAgYm9yZGVyLXJhZGl1czogMXB4O1xuICAgICAgaGVpZ2h0OiA4cHg7XG4gICAgICBib3gtc2hhZG93OiAwIDAgMnB4IHJnYmEoMCwgMCwgMCwgLjYpO1xuICAgICAgYmFja2dyb3VuZDogI2ZmZjtcbiAgICAgIG1hcmdpbi10b3A6IDFweDtcbiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtMnB4KTtcbiAgICB9XG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgU2hhZGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBoc2whOiBIU0xBO1xuICBASW5wdXQoKSByZ2IhOiBSR0JBO1xuICBASW5wdXQoKSBwb2ludGVyITogUmVjb3JkPHN0cmluZywgc3RyaW5nPjtcbiAgQElucHV0KCkgc2hhZG93ITogc3RyaW5nO1xuICBASW5wdXQoKSByYWRpdXMhOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBvbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBncmFkaWVudCE6IFJlY29yZDxzdHJpbmcsIHN0cmluZz47XG4gIHBvaW50ZXJMZWZ0ITogbnVtYmVyO1xuICBwb2ludGVyVG9wPzogbnVtYmVyO1xuXG4gIG5nT25DaGFuZ2VzKCkge1xuICAgIHRoaXMuZ3JhZGllbnQgPSB7XG4gICAgICBiYWNrZ3JvdW5kOiBgbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LFxuICAgICAgICAgIGhzbCgke3RoaXMuaHNsLmh9LCA5MCUsIDU1JSksXG4gICAgICAgICAgIzAwMClgLFxuICAgIH07XG4gICAgY29uc3QgaHN2ID0gbmV3IFRpbnlDb2xvcih0aGlzLmhzbCkudG9Ic3YoKTtcbiAgICB0aGlzLnBvaW50ZXJMZWZ0ID0gMTAwIC0gKGhzdi52ICogMTAwKTtcbiAgfVxuXG4gIGhhbmRsZUNoYW5nZSh7IGxlZnQsIGNvbnRhaW5lcldpZHRoLCAkZXZlbnQgfSk6IHZvaWQge1xuICAgIGxldCBkYXRhO1xuICAgIGxldCB2OiBudW1iZXI7XG4gICAgaWYgKGxlZnQgPCAwKSB7XG4gICAgICB2ID0gMDtcbiAgICB9IGVsc2UgaWYgKGxlZnQgPiBjb250YWluZXJXaWR0aCkge1xuICAgICAgdiA9IDE7XG4gICAgfSBlbHNlIHtcbiAgICAgIHYgPSBNYXRoLnJvdW5kKChsZWZ0ICogMTAwKSAvIGNvbnRhaW5lcldpZHRoKSAvIDEwMDtcbiAgICB9XG5cbiAgICBjb25zdCBoc3YgPSBuZXcgVGlueUNvbG9yKHRoaXMuaHNsKS50b0hzdigpO1xuICAgIGlmIChoc3YudiAhPT0gdikge1xuICAgICAgZGF0YSA9IHtcbiAgICAgICAgaDogdGhpcy5oc2wuaCxcbiAgICAgICAgczogMTAwLFxuICAgICAgICB2OiAxIC0gdixcbiAgICAgICAgbDogdGhpcy5oc2wubCxcbiAgICAgICAgYTogdGhpcy5oc2wuYSxcbiAgICAgICAgc291cmNlOiAncmdiJyxcbiAgICAgIH07XG4gICAgfVxuXG4gICAgaWYgKCFkYXRhKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5vbkNoYW5nZS5lbWl0KHsgZGF0YSwgJGV2ZW50IH0pO1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1NoYWRlQ29tcG9uZW50XSxcbiAgZXhwb3J0czogW1NoYWRlQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ29vcmRpbmF0ZXNNb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBTaGFkZU1vZHVsZSB7fVxuIl19
|
@@ -1,85 +0,0 @@
|
|
1
|
-
import { CommonModule } from '@angular/common';
|
2
|
-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Output, } from '@angular/core';
|
3
|
-
import { CheckboardModule } from './checkboard.component';
|
4
|
-
export class SwatchComponent {
|
5
|
-
constructor() {
|
6
|
-
this.style = {};
|
7
|
-
this.focusStyle = {};
|
8
|
-
this.onClick = new EventEmitter();
|
9
|
-
this.onHover = new EventEmitter();
|
10
|
-
this.divStyles = {};
|
11
|
-
this.focusStyles = {};
|
12
|
-
this.inFocus = false;
|
13
|
-
}
|
14
|
-
ngOnInit() {
|
15
|
-
this.divStyles = Object.assign({ background: this.color }, this.style);
|
16
|
-
}
|
17
|
-
currentStyles() {
|
18
|
-
this.focusStyles = Object.assign(Object.assign({}, this.divStyles), this.focusStyle);
|
19
|
-
return this.focus || this.inFocus ? this.focusStyles : this.divStyles;
|
20
|
-
}
|
21
|
-
handleFocusOut() {
|
22
|
-
this.inFocus = false;
|
23
|
-
}
|
24
|
-
handleFocus() {
|
25
|
-
this.inFocus = true;
|
26
|
-
}
|
27
|
-
handleHover(hex, $event) {
|
28
|
-
this.onHover.emit({ hex, $event });
|
29
|
-
}
|
30
|
-
handleClick(hex, $event) {
|
31
|
-
this.onClick.emit({ hex, $event });
|
32
|
-
}
|
33
|
-
}
|
34
|
-
SwatchComponent.decorators = [
|
35
|
-
{ type: Component, args: [{
|
36
|
-
selector: 'color-swatch',
|
37
|
-
template: `
|
38
|
-
<div
|
39
|
-
class="swatch"
|
40
|
-
[ngStyle]="currentStyles()"
|
41
|
-
[attr.title]="color"
|
42
|
-
(click)="handleClick(color, $event)"
|
43
|
-
(keydown.enter)="handleClick(color, $event)"
|
44
|
-
(focus)="handleFocus()"
|
45
|
-
(blur)="handleFocusOut()"
|
46
|
-
(mouseover)="handleHover(color, $event)"
|
47
|
-
tabindex="0"
|
48
|
-
>
|
49
|
-
<ng-content></ng-content>
|
50
|
-
<color-checkboard
|
51
|
-
*ngIf="color === 'transparent'"
|
52
|
-
boxShadow="inset 0 0 0 1px rgba(0,0,0,0.1)"
|
53
|
-
></color-checkboard>
|
54
|
-
</div>
|
55
|
-
`,
|
56
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
57
|
-
styles: [`
|
58
|
-
.swatch {
|
59
|
-
outline: none;
|
60
|
-
height: 100%;
|
61
|
-
width: 100%;
|
62
|
-
cursor: pointer;
|
63
|
-
position: relative;
|
64
|
-
}
|
65
|
-
`]
|
66
|
-
},] }
|
67
|
-
];
|
68
|
-
SwatchComponent.propDecorators = {
|
69
|
-
color: [{ type: Input }],
|
70
|
-
style: [{ type: Input }],
|
71
|
-
focusStyle: [{ type: Input }],
|
72
|
-
focus: [{ type: Input }],
|
73
|
-
onClick: [{ type: Output }],
|
74
|
-
onHover: [{ type: Output }]
|
75
|
-
};
|
76
|
-
export class SwatchModule {
|
77
|
-
}
|
78
|
-
SwatchModule.decorators = [
|
79
|
-
{ type: NgModule, args: [{
|
80
|
-
declarations: [SwatchComponent],
|
81
|
-
exports: [SwatchComponent],
|
82
|
-
imports: [CommonModule, CheckboardModule],
|
83
|
-
},] }
|
84
|
-
];
|
85
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dhdGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY29tbW9uL3N3YXRjaC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsUUFBUSxFQUVSLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQW9DMUQsTUFBTSxPQUFPLGVBQWU7SUFsQzVCO1FBb0NXLFVBQUssR0FBMkIsRUFBRSxDQUFDO1FBQ25DLGVBQVUsR0FBMkIsRUFBRSxDQUFDO1FBRXZDLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ2xDLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQzVDLGNBQVMsR0FBMkIsRUFBRSxDQUFDO1FBQ3ZDLGdCQUFXLEdBQTJCLEVBQUUsQ0FBQztRQUN6QyxZQUFPLEdBQUcsS0FBSyxDQUFDO0lBMkJsQixDQUFDO0lBekJDLFFBQVE7UUFDTixJQUFJLENBQUMsU0FBUyxtQkFDWixVQUFVLEVBQUUsSUFBSSxDQUFDLEtBQWUsSUFDN0IsSUFBSSxDQUFDLEtBQUssQ0FDZCxDQUFDO0lBQ0osQ0FBQztJQUNELGFBQWE7UUFDWCxJQUFJLENBQUMsV0FBVyxtQ0FDWCxJQUFJLENBQUMsU0FBUyxHQUNkLElBQUksQ0FBQyxVQUFVLENBQ25CLENBQUM7UUFDRixPQUFPLElBQUksQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUN4RSxDQUFDO0lBQ0QsY0FBYztRQUNaLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLENBQUM7SUFDRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7SUFDdEIsQ0FBQztJQUNELFdBQVcsQ0FBQyxHQUFXLEVBQUUsTUFBTTtRQUM3QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUUsQ0FBQyxDQUFDO0lBQ3JDLENBQUM7SUFDRCxXQUFXLENBQUMsR0FBVyxFQUFFLE1BQU07UUFDN0IsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQztJQUNyQyxDQUFDOzs7WUFyRUYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxjQUFjO2dCQUN4QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtCVDtnQkFZRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTt5QkFWN0M7Ozs7Ozs7O0tBUUM7YUFHSjs7O29CQUVFLEtBQUs7b0JBQ0wsS0FBSzt5QkFDTCxLQUFLO29CQUNMLEtBQUs7c0JBQ0wsTUFBTTtzQkFDTixNQUFNOztBQXFDVCxNQUFNLE9BQU8sWUFBWTs7O1lBTHhCLFFBQVEsU0FBQztnQkFDUixZQUFZLEVBQUUsQ0FBQyxlQUFlLENBQUM7Z0JBQy9CLE9BQU8sRUFBRSxDQUFDLGVBQWUsQ0FBQztnQkFDMUIsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLGdCQUFnQixDQUFDO2FBQzFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE5nTW9kdWxlLFxuICBPbkluaXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IENoZWNrYm9hcmRNb2R1bGUgfSBmcm9tICcuL2NoZWNrYm9hcmQuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3Itc3dhdGNoJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cInN3YXRjaFwiXG4gICAgICBbbmdTdHlsZV09XCJjdXJyZW50U3R5bGVzKClcIlxuICAgICAgW2F0dHIudGl0bGVdPVwiY29sb3JcIlxuICAgICAgKGNsaWNrKT1cImhhbmRsZUNsaWNrKGNvbG9yLCAkZXZlbnQpXCJcbiAgICAgIChrZXlkb3duLmVudGVyKT1cImhhbmRsZUNsaWNrKGNvbG9yLCAkZXZlbnQpXCJcbiAgICAgIChmb2N1cyk9XCJoYW5kbGVGb2N1cygpXCJcbiAgICAgIChibHVyKT1cImhhbmRsZUZvY3VzT3V0KClcIlxuICAgICAgKG1vdXNlb3Zlcik9XCJoYW5kbGVIb3Zlcihjb2xvciwgJGV2ZW50KVwiXG4gICAgICB0YWJpbmRleD1cIjBcIlxuICAgID5cbiAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgIDxjb2xvci1jaGVja2JvYXJkXG4gICAgICAgICpuZ0lmPVwiY29sb3IgPT09ICd0cmFuc3BhcmVudCdcIlxuICAgICAgICBib3hTaGFkb3c9XCJpbnNldCAwIDAgMCAxcHggcmdiYSgwLDAsMCwwLjEpXCJcbiAgICAgID48L2NvbG9yLWNoZWNrYm9hcmQ+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAgIC5zd2F0Y2gge1xuICAgICAgICBvdXRsaW5lOiBub25lO1xuICAgICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIH1cbiAgICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgU3dhdGNoQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgY29sb3IhOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHN0eWxlOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge307XG4gIEBJbnB1dCgpIGZvY3VzU3R5bGU6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7fTtcbiAgQElucHV0KCkgZm9jdXMhOiBib29sZWFuO1xuICBAT3V0cHV0KCkgb25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBAT3V0cHV0KCkgb25Ib3ZlciA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBkaXZTdHlsZXM6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7fTtcbiAgZm9jdXNTdHlsZXM6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7fTtcbiAgaW5Gb2N1cyA9IGZhbHNlO1xuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuZGl2U3R5bGVzID0ge1xuICAgICAgYmFja2dyb3VuZDogdGhpcy5jb2xvciBhcyBzdHJpbmcsXG4gICAgICAuLi50aGlzLnN0eWxlLFxuICAgIH07XG4gIH1cbiAgY3VycmVudFN0eWxlcygpIHtcbiAgICB0aGlzLmZvY3VzU3R5bGVzID0ge1xuICAgICAgLi4udGhpcy5kaXZTdHlsZXMsXG4gICAgICAuLi50aGlzLmZvY3VzU3R5bGUsXG4gICAgfTtcbiAgICByZXR1cm4gdGhpcy5mb2N1cyB8fCB0aGlzLmluRm9jdXMgPyB0aGlzLmZvY3VzU3R5bGVzIDogdGhpcy5kaXZTdHlsZXM7XG4gIH1cbiAgaGFuZGxlRm9jdXNPdXQoKSB7XG4gICAgdGhpcy5pbkZvY3VzID0gZmFsc2U7XG4gIH1cbiAgaGFuZGxlRm9jdXMoKSB7XG4gICAgdGhpcy5pbkZvY3VzID0gdHJ1ZTtcbiAgfVxuICBoYW5kbGVIb3ZlcihoZXg6IHN0cmluZywgJGV2ZW50KSB7XG4gICAgdGhpcy5vbkhvdmVyLmVtaXQoeyBoZXgsICRldmVudCB9KTtcbiAgfVxuICBoYW5kbGVDbGljayhoZXg6IHN0cmluZywgJGV2ZW50KSB7XG4gICAgdGhpcy5vbkNsaWNrLmVtaXQoeyBoZXgsICRldmVudCB9KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtTd2F0Y2hDb21wb25lbnRdLFxuICBleHBvcnRzOiBbU3dhdGNoQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ2hlY2tib2FyZE1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIFN3YXRjaE1vZHVsZSB7fVxuIl19
|