ngx-color 7.2.0 → 7.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/alpha/alpha-picker.component.d.ts +8 -0
- package/alpha/esm2020/alpha-picker.component.mjs +116 -0
- package/alpha/{esm2015/ngx-color-alpha.js → esm2020/ngx-color-alpha.mjs} +2 -2
- package/alpha/esm2020/public_api.mjs +2 -0
- package/alpha/fesm2015/ngx-color-alpha.mjs +123 -0
- package/alpha/fesm2015/ngx-color-alpha.mjs.map +1 -0
- package/alpha/fesm2020/ngx-color-alpha.mjs +123 -0
- package/alpha/fesm2020/ngx-color-alpha.mjs.map +1 -0
- package/alpha/ngx-color-alpha.d.ts +2 -1
- package/alpha/package.json +19 -7
- package/alpha/public_api.d.ts +1 -0
- package/alpha.component.d.ts +9 -0
- package/block/block-swatches.component.d.ts +3 -0
- package/block/block.component.d.ts +9 -0
- package/block/esm2020/block-swatches.component.mjs +76 -0
- package/block/esm2020/block.component.mjs +199 -0
- package/block/esm2020/ngx-color-block.mjs +5 -0
- package/block/esm2020/public_api.mjs +3 -0
- package/block/fesm2015/ngx-color-block.mjs +277 -0
- package/block/fesm2015/ngx-color-block.mjs.map +1 -0
- package/block/fesm2020/ngx-color-block.mjs +277 -0
- package/block/fesm2020/ngx-color-block.mjs.map +1 -0
- package/block/ngx-color-block.d.ts +2 -2
- package/block/package.json +19 -7
- package/block/public_api.d.ts +2 -0
- package/checkboard.component.d.ts +7 -0
- package/chrome/chrome-fields.component.d.ts +3 -0
- package/chrome/chrome.component.d.ts +9 -0
- package/chrome/esm2020/chrome-fields.component.mjs +356 -0
- package/chrome/esm2020/chrome.component.mjs +249 -0
- package/chrome/esm2020/ngx-color-chrome.mjs +5 -0
- package/chrome/esm2020/public_api.mjs +3 -0
- package/chrome/fesm2015/ngx-color-chrome.mjs +606 -0
- package/chrome/fesm2015/ngx-color-chrome.mjs.map +1 -0
- package/chrome/fesm2020/ngx-color-chrome.mjs +606 -0
- package/chrome/fesm2020/ngx-color-chrome.mjs.map +1 -0
- package/chrome/ngx-color-chrome.d.ts +2 -2
- package/chrome/package.json +19 -7
- package/chrome/public_api.d.ts +2 -0
- package/circle/circle-swatch.component.d.ts +3 -0
- package/circle/circle.component.d.ts +9 -0
- package/circle/esm2020/circle-swatch.component.mjs +85 -0
- package/circle/esm2020/circle.component.mjs +148 -0
- package/circle/esm2020/ngx-color-circle.mjs +5 -0
- package/circle/esm2020/public_api.mjs +3 -0
- package/circle/fesm2015/ngx-color-circle.mjs +237 -0
- package/circle/fesm2015/ngx-color-circle.mjs.map +1 -0
- package/circle/fesm2020/ngx-color-circle.mjs +237 -0
- package/circle/fesm2020/ngx-color-circle.mjs.map +1 -0
- package/circle/ngx-color-circle.d.ts +2 -2
- package/circle/package.json +19 -7
- package/circle/public_api.d.ts +2 -0
- package/color-wrap.component.d.ts +7 -0
- package/compact/compact-color.component.d.ts +3 -0
- package/compact/compact-fields.component.d.ts +3 -0
- package/compact/compact.component.d.ts +10 -0
- package/compact/esm2020/compact-color.component.mjs +91 -0
- package/compact/esm2020/compact-fields.component.mjs +186 -0
- package/compact/esm2020/compact.component.mjs +177 -0
- package/compact/esm2020/ngx-color-compact.mjs +5 -0
- package/compact/esm2020/public_api.mjs +4 -0
- package/compact/fesm2015/ngx-color-compact.mjs +451 -0
- package/compact/fesm2015/ngx-color-compact.mjs.map +1 -0
- package/compact/fesm2020/ngx-color-compact.mjs +451 -0
- package/compact/fesm2020/ngx-color-compact.mjs.map +1 -0
- package/compact/ngx-color-compact.d.ts +2 -3
- package/compact/package.json +19 -7
- package/compact/public_api.d.ts +3 -0
- package/coordinates.directive.d.ts +6 -0
- package/editable-input.component.d.ts +7 -0
- package/esm2020/alpha.component.mjs +186 -0
- package/esm2020/checkboard.component.mjs +66 -0
- package/esm2020/color-wrap.component.mjs +163 -0
- package/esm2020/coordinates.directive.mjs +104 -0
- package/esm2020/editable-input.component.mjs +217 -0
- package/{esm2015/helpers/checkboard.js → esm2020/helpers/checkboard.mjs} +0 -0
- package/{esm2015/helpers/color.interfaces.js → esm2020/helpers/color.interfaces.mjs} +0 -0
- package/{esm2015/helpers/color.js → esm2020/helpers/color.mjs} +0 -0
- package/esm2020/hue.component.mjs +165 -0
- package/{esm2015/ngx-color.js → esm2020/ngx-color.mjs} +0 -0
- package/{esm2015/public_api.js → esm2020/public_api.mjs} +0 -0
- package/esm2020/raised.component.mjs +89 -0
- package/esm2020/saturation.component.mjs +136 -0
- package/esm2020/shade.component.mjs +165 -0
- package/esm2020/swatch.component.mjs +125 -0
- package/fesm2015/ngx-color.mjs +1461 -0
- package/fesm2015/ngx-color.mjs.map +1 -0
- package/fesm2020/ngx-color.mjs +1466 -0
- package/fesm2020/ngx-color.mjs.map +1 -0
- package/github/esm2020/github-swatch.component.mjs +67 -0
- package/github/esm2020/github.component.mjs +179 -0
- package/github/esm2020/ngx-color-github.mjs +5 -0
- package/github/esm2020/public_api.mjs +3 -0
- package/github/fesm2015/ngx-color-github.mjs +250 -0
- package/github/fesm2015/ngx-color-github.mjs.map +1 -0
- package/github/fesm2020/ngx-color-github.mjs +250 -0
- package/github/fesm2020/ngx-color-github.mjs.map +1 -0
- package/github/github-swatch.component.d.ts +3 -0
- package/github/github.component.d.ts +9 -0
- package/github/ngx-color-github.d.ts +2 -2
- package/github/package.json +19 -7
- package/github/public_api.d.ts +2 -0
- package/helpers/checkboard.d.ts +2 -2
- package/hue/esm2020/hue-picker.component.mjs +113 -0
- package/hue/{esm2015/ngx-color-hue.js → esm2020/ngx-color-hue.mjs} +2 -2
- package/hue/esm2020/public_api.mjs +2 -0
- package/hue/fesm2015/ngx-color-hue.mjs +120 -0
- package/hue/fesm2015/ngx-color-hue.mjs.map +1 -0
- package/hue/fesm2020/ngx-color-hue.mjs +120 -0
- package/hue/fesm2020/ngx-color-hue.mjs.map +1 -0
- package/hue/hue-picker.component.d.ts +8 -0
- package/hue/ngx-color-hue.d.ts +2 -1
- package/hue/package.json +19 -7
- package/hue/public_api.d.ts +1 -0
- package/hue.component.d.ts +8 -0
- package/material/esm2020/material.component.mjs +211 -0
- package/material/{esm2015/ngx-color-material.js → esm2020/ngx-color-material.mjs} +2 -2
- package/material/esm2020/public_api.mjs +2 -0
- package/material/fesm2015/ngx-color-material.mjs +218 -0
- package/material/fesm2015/ngx-color-material.mjs.map +1 -0
- package/material/fesm2020/ngx-color-material.mjs +218 -0
- package/material/fesm2020/ngx-color-material.mjs.map +1 -0
- package/material/material.component.d.ts +8 -0
- package/material/ngx-color-material.d.ts +2 -1
- package/material/package.json +19 -7
- package/material/public_api.d.ts +1 -0
- package/ngx-color.d.ts +1 -0
- package/package.json +20 -8
- package/photoshop/esm2020/ngx-color-photoshop.mjs +5 -0
- package/photoshop/esm2020/photoshop-button.component.mjs +63 -0
- package/photoshop/esm2020/photoshop-fields.component.mjs +241 -0
- package/photoshop/esm2020/photoshop-previews.component.mjs +68 -0
- package/photoshop/esm2020/photoshop.component.mjs +258 -0
- package/photoshop/esm2020/public_api.mjs +5 -0
- package/photoshop/fesm2015/ngx-color-photoshop.mjs +626 -0
- package/photoshop/fesm2015/ngx-color-photoshop.mjs.map +1 -0
- package/photoshop/fesm2020/ngx-color-photoshop.mjs +626 -0
- package/photoshop/fesm2020/ngx-color-photoshop.mjs.map +1 -0
- package/photoshop/ngx-color-photoshop.d.ts +2 -4
- package/photoshop/package.json +19 -7
- package/photoshop/photoshop-button.component.d.ts +3 -0
- package/photoshop/photoshop-fields.component.d.ts +3 -0
- package/photoshop/photoshop-previews.component.d.ts +3 -0
- package/photoshop/photoshop.component.d.ts +11 -0
- package/photoshop/public_api.d.ts +4 -0
- package/raised.component.d.ts +7 -0
- package/saturation.component.d.ts +8 -0
- package/shade/{esm2015/ngx-color-shade.js → esm2020/ngx-color-shade.mjs} +2 -2
- package/shade/esm2020/public_api.mjs +2 -0
- package/shade/esm2020/shade-picker.component.mjs +105 -0
- package/shade/fesm2015/ngx-color-shade.mjs +112 -0
- package/shade/fesm2015/ngx-color-shade.mjs.map +1 -0
- package/shade/fesm2020/ngx-color-shade.mjs +112 -0
- package/shade/fesm2020/ngx-color-shade.mjs.map +1 -0
- package/shade/ngx-color-shade.d.ts +2 -1
- package/shade/package.json +19 -7
- package/shade/public_api.d.ts +1 -0
- package/shade/shade-picker.component.d.ts +8 -0
- package/shade.component.d.ts +8 -0
- package/sketch/esm2020/ngx-color-sketch.mjs +5 -0
- package/sketch/esm2020/public_api.mjs +4 -0
- package/sketch/esm2020/sketch-fields.component.mjs +243 -0
- package/sketch/esm2020/sketch-preset-colors.component.mjs +98 -0
- package/sketch/esm2020/sketch.component.mjs +283 -0
- package/sketch/fesm2015/ngx-color-sketch.mjs +620 -0
- package/sketch/fesm2015/ngx-color-sketch.mjs.map +1 -0
- package/sketch/fesm2020/ngx-color-sketch.mjs +620 -0
- package/sketch/fesm2020/ngx-color-sketch.mjs.map +1 -0
- package/sketch/ngx-color-sketch.d.ts +2 -3
- package/sketch/package.json +19 -7
- package/sketch/public_api.d.ts +3 -0
- package/sketch/sketch-fields.component.d.ts +3 -0
- package/sketch/sketch-preset-colors.component.d.ts +3 -0
- package/sketch/sketch.component.d.ts +10 -0
- package/slider/esm2020/ngx-color-slider.mjs +5 -0
- package/slider/esm2020/public_api.mjs +4 -0
- package/slider/esm2020/slider-swatch.component.mjs +80 -0
- package/slider/esm2020/slider-swatches.component.mjs +135 -0
- package/slider/esm2020/slider.component.mjs +116 -0
- package/slider/fesm2015/ngx-color-slider.mjs +331 -0
- package/slider/fesm2015/ngx-color-slider.mjs.map +1 -0
- package/slider/fesm2020/ngx-color-slider.mjs +331 -0
- package/slider/fesm2020/ngx-color-slider.mjs.map +1 -0
- package/slider/ngx-color-slider.d.ts +2 -3
- package/slider/package.json +19 -7
- package/slider/public_api.d.ts +3 -0
- package/slider/slider-swatch.component.d.ts +3 -0
- package/slider/slider-swatches.component.d.ts +3 -0
- package/slider/slider.component.d.ts +10 -0
- package/swatch.component.d.ts +8 -0
- package/swatches/esm2020/ngx-color-swatches.mjs +5 -0
- package/swatches/esm2020/public_api.mjs +4 -0
- package/swatches/esm2020/swatches-color.component.mjs +123 -0
- package/swatches/esm2020/swatches-group.component.mjs +64 -0
- package/swatches/esm2020/swatches.component.mjs +258 -0
- package/swatches/fesm2015/ngx-color-swatches.mjs +441 -0
- package/swatches/fesm2015/ngx-color-swatches.mjs.map +1 -0
- package/swatches/fesm2020/ngx-color-swatches.mjs +441 -0
- package/swatches/fesm2020/ngx-color-swatches.mjs.map +1 -0
- package/swatches/ngx-color-swatches.d.ts +2 -3
- package/swatches/package.json +19 -7
- package/swatches/public_api.d.ts +3 -0
- package/swatches/swatches-color.component.d.ts +3 -0
- package/swatches/swatches-group.component.d.ts +3 -0
- package/swatches/swatches.component.d.ts +10 -0
- package/twitter/{esm2015/ngx-color-twitter.js → esm2020/ngx-color-twitter.mjs} +2 -2
- package/twitter/esm2020/public_api.mjs +2 -0
- package/twitter/esm2020/twitter.component.mjs +255 -0
- package/twitter/fesm2015/ngx-color-twitter.mjs +262 -0
- package/twitter/fesm2015/ngx-color-twitter.mjs.map +1 -0
- package/twitter/fesm2020/ngx-color-twitter.mjs +262 -0
- package/twitter/fesm2020/ngx-color-twitter.mjs.map +1 -0
- package/twitter/ngx-color-twitter.d.ts +2 -1
- package/twitter/package.json +19 -7
- package/twitter/public_api.d.ts +1 -0
- package/twitter/twitter.component.d.ts +8 -0
- package/alpha/bundles/ngx-color-alpha.umd.js +0 -404
- package/alpha/bundles/ngx-color-alpha.umd.js.map +0 -1
- package/alpha/esm2015/alpha-picker.component.js +0 -84
- package/alpha/fesm2015/ngx-color-alpha.js +0 -91
- package/alpha/fesm2015/ngx-color-alpha.js.map +0 -1
- package/alpha/ngx-color-alpha.metadata.json +0 -1
- package/block/bundles/ngx-color-block.umd.js +0 -472
- package/block/bundles/ngx-color-block.umd.js.map +0 -1
- package/block/esm2015/block-swatches.component.js +0 -58
- package/block/esm2015/block.component.js +0 -151
- package/block/esm2015/ngx-color-block.js +0 -6
- package/block/fesm2015/ngx-color-block.js +0 -214
- package/block/fesm2015/ngx-color-block.js.map +0 -1
- package/block/ngx-color-block.metadata.json +0 -1
- package/bundles/ngx-color.umd.js +0 -1014
- package/bundles/ngx-color.umd.js.map +0 -1
- package/chrome/bundles/ngx-color-chrome.umd.js +0 -543
- package/chrome/bundles/ngx-color-chrome.umd.js.map +0 -1
- package/chrome/esm2015/chrome-fields.component.js +0 -255
- package/chrome/esm2015/chrome.component.js +0 -173
- package/chrome/esm2015/ngx-color-chrome.js +0 -6
- package/chrome/fesm2015/ngx-color-chrome.js +0 -432
- package/chrome/fesm2015/ngx-color-chrome.js.map +0 -1
- package/chrome/ngx-color-chrome.metadata.json +0 -1
- package/circle/bundles/ngx-color-circle.umd.js +0 -469
- package/circle/bundles/ngx-color-circle.umd.js.map +0 -1
- package/circle/esm2015/circle-swatch.component.js +0 -63
- package/circle/esm2015/circle.component.js +0 -109
- package/circle/esm2015/ngx-color-circle.js +0 -6
- package/circle/fesm2015/ngx-color-circle.js +0 -177
- package/circle/fesm2015/ngx-color-circle.js.map +0 -1
- package/circle/ngx-color-circle.metadata.json +0 -1
- package/compact/bundles/ngx-color-compact.umd.js +0 -579
- package/compact/bundles/ngx-color-compact.umd.js.map +0 -1
- package/compact/esm2015/compact-color.component.js +0 -70
- package/compact/esm2015/compact-fields.component.js +0 -142
- package/compact/esm2015/compact.component.js +0 -135
- package/compact/esm2015/ngx-color-compact.js +0 -7
- package/compact/fesm2015/ngx-color-compact.js +0 -348
- package/compact/fesm2015/ngx-color-compact.js.map +0 -1
- package/compact/ngx-color-compact.metadata.json +0 -1
- package/esm2015/alpha.component.js +0 -156
- package/esm2015/checkboard.component.js +0 -52
- package/esm2015/color-wrap.component.js +0 -145
- package/esm2015/coordinates.directive.js +0 -85
- package/esm2015/editable-input.component.js +0 -183
- package/esm2015/hue.component.js +0 -140
- package/esm2015/raised.component.js +0 -73
- package/esm2015/saturation.component.js +0 -111
- package/esm2015/shade.component.js +0 -127
- package/esm2015/swatch.component.js +0 -85
- package/fesm2015/ngx-color.js +0 -1228
- package/fesm2015/ngx-color.js.map +0 -1
- package/github/bundles/ngx-color-github.umd.js +0 -447
- package/github/bundles/ngx-color-github.umd.js.map +0 -1
- package/github/esm2015/github-swatch.component.js +0 -48
- package/github/esm2015/github.component.js +0 -146
- package/github/esm2015/ngx-color-github.js +0 -6
- package/github/fesm2015/ngx-color-github.js +0 -199
- package/github/fesm2015/ngx-color-github.js.map +0 -1
- package/github/ngx-color-github.metadata.json +0 -1
- package/hue/bundles/ngx-color-hue.umd.js +0 -407
- package/hue/bundles/ngx-color-hue.umd.js.map +0 -1
- package/hue/esm2015/hue-picker.component.js +0 -82
- package/hue/fesm2015/ngx-color-hue.js +0 -89
- package/hue/fesm2015/ngx-color-hue.js.map +0 -1
- package/hue/ngx-color-hue.metadata.json +0 -1
- package/material/bundles/ngx-color-material.umd.js +0 -455
- package/material/bundles/ngx-color-material.umd.js.map +0 -1
- package/material/esm2015/material.component.js +0 -161
- package/material/fesm2015/ngx-color-material.js +0 -168
- package/material/fesm2015/ngx-color-material.js.map +0 -1
- package/material/ngx-color-material.metadata.json +0 -1
- package/ngx-color.metadata.json +0 -1
- package/photoshop/bundles/ngx-color-photoshop.umd.js +0 -571
- package/photoshop/bundles/ngx-color-photoshop.umd.js.map +0 -1
- package/photoshop/esm2015/ngx-color-photoshop.js +0 -8
- package/photoshop/esm2015/photoshop-button.component.js +0 -50
- package/photoshop/esm2015/photoshop-fields.component.js +0 -180
- package/photoshop/esm2015/photoshop-previews.component.js +0 -53
- package/photoshop/esm2015/photoshop.component.js +0 -181
- package/photoshop/fesm2015/ngx-color-photoshop.js +0 -464
- package/photoshop/fesm2015/ngx-color-photoshop.js.map +0 -1
- package/photoshop/ngx-color-photoshop.metadata.json +0 -1
- package/shade/bundles/ngx-color-shade.umd.js +0 -399
- package/shade/bundles/ngx-color-shade.umd.js.map +0 -1
- package/shade/esm2015/shade-picker.component.js +0 -75
- package/shade/fesm2015/ngx-color-shade.js +0 -82
- package/shade/fesm2015/ngx-color-shade.js.map +0 -1
- package/shade/ngx-color-shade.metadata.json +0 -1
- package/sketch/bundles/ngx-color-sketch.umd.js +0 -585
- package/sketch/bundles/ngx-color-sketch.umd.js.map +0 -1
- package/sketch/esm2015/ngx-color-sketch.js +0 -7
- package/sketch/esm2015/sketch-fields.component.js +0 -181
- package/sketch/esm2015/sketch-preset-colors.component.js +0 -76
- package/sketch/esm2015/sketch.component.js +0 -203
- package/sketch/fesm2015/ngx-color-sketch.js +0 -462
- package/sketch/fesm2015/ngx-color-sketch.js.map +0 -1
- package/sketch/ngx-color-sketch.metadata.json +0 -1
- package/slider/bundles/ngx-color-slider.umd.js +0 -470
- package/slider/bundles/ngx-color-slider.umd.js.map +0 -1
- package/slider/esm2015/ngx-color-slider.js +0 -7
- package/slider/esm2015/slider-swatch.component.js +0 -65
- package/slider/esm2015/slider-swatches.component.js +0 -84
- package/slider/esm2015/slider.component.js +0 -81
- package/slider/fesm2015/ngx-color-slider.js +0 -233
- package/slider/fesm2015/ngx-color-slider.js.map +0 -1
- package/slider/ngx-color-slider.metadata.json +0 -1
- package/swatches/bundles/ngx-color-swatches.umd.js +0 -612
- package/swatches/bundles/ngx-color-swatches.umd.js.map +0 -1
- package/swatches/esm2015/ngx-color-swatches.js +0 -7
- package/swatches/esm2015/swatches-color.component.js +0 -90
- package/swatches/esm2015/swatches-group.component.js +0 -42
- package/swatches/esm2015/swatches.component.js +0 -217
- package/swatches/fesm2015/ngx-color-swatches.js +0 -351
- package/swatches/fesm2015/ngx-color-swatches.js.map +0 -1
- package/swatches/ngx-color-swatches.metadata.json +0 -1
- package/twitter/bundles/ngx-color-twitter.umd.js +0 -433
- package/twitter/bundles/ngx-color-twitter.umd.js.map +0 -1
- package/twitter/esm2015/twitter.component.js +0 -207
- package/twitter/fesm2015/ngx-color-twitter.js +0 -214
- package/twitter/fesm2015/ngx-color-twitter.js.map +0 -1
- package/twitter/ngx-color-twitter.metadata.json +0 -1
@@ -0,0 +1,211 @@
|
|
1
|
+
import { CommonModule } from '@angular/common';
|
2
|
+
import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
|
3
|
+
import { ColorWrap, EditableInputModule, isValidHex, RaisedModule } from 'ngx-color';
|
4
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
5
|
+
import * as i0 from "@angular/core";
|
6
|
+
import * as i1 from "ngx-color";
|
7
|
+
export class MaterialComponent extends ColorWrap {
|
8
|
+
constructor() {
|
9
|
+
super();
|
10
|
+
this.HEXinput = {
|
11
|
+
width: '100%',
|
12
|
+
marginTop: '12px',
|
13
|
+
fontSize: '15px',
|
14
|
+
color: 'rgb(51, 51, 51)',
|
15
|
+
padding: '0px',
|
16
|
+
'border-width': '0px 0px 2px',
|
17
|
+
outline: 'none',
|
18
|
+
height: '30px',
|
19
|
+
};
|
20
|
+
this.HEXlabel = {
|
21
|
+
position: 'absolute',
|
22
|
+
top: '0px',
|
23
|
+
left: '0px',
|
24
|
+
fontSize: '11px',
|
25
|
+
color: 'rgb(153, 153, 153)',
|
26
|
+
'text-transform': 'capitalize',
|
27
|
+
};
|
28
|
+
this.RGBinput = {
|
29
|
+
width: '100%',
|
30
|
+
marginTop: '12px',
|
31
|
+
fontSize: '15px',
|
32
|
+
color: '#333',
|
33
|
+
padding: '0px',
|
34
|
+
border: '0px',
|
35
|
+
'border-bottom': '1px solid #eee',
|
36
|
+
outline: 'none',
|
37
|
+
height: '30px',
|
38
|
+
};
|
39
|
+
this.RGBlabel = {
|
40
|
+
position: 'absolute',
|
41
|
+
top: '0px',
|
42
|
+
left: '0px',
|
43
|
+
fontSize: '11px',
|
44
|
+
color: '#999999',
|
45
|
+
'text-transform': 'capitalize',
|
46
|
+
};
|
47
|
+
this.zDepth = 1;
|
48
|
+
this.radius = 1;
|
49
|
+
this.background = '#fff';
|
50
|
+
this.disableAlpha = true;
|
51
|
+
}
|
52
|
+
handleValueChange({ data, $event }) {
|
53
|
+
this.handleChange(data, $event);
|
54
|
+
}
|
55
|
+
handleInputChange({ data, $event }) {
|
56
|
+
if (data.hex) {
|
57
|
+
if (isValidHex(data.hex)) {
|
58
|
+
this.handleValueChange({
|
59
|
+
data: {
|
60
|
+
hex: data.hex,
|
61
|
+
source: 'hex',
|
62
|
+
},
|
63
|
+
$event,
|
64
|
+
});
|
65
|
+
}
|
66
|
+
}
|
67
|
+
else if (data.r || data.g || data.b) {
|
68
|
+
this.handleValueChange({
|
69
|
+
data: {
|
70
|
+
r: data.r || this.rgb.r,
|
71
|
+
g: data.g || this.rgb.g,
|
72
|
+
b: data.b || this.rgb.b,
|
73
|
+
source: 'rgb',
|
74
|
+
},
|
75
|
+
$event,
|
76
|
+
});
|
77
|
+
}
|
78
|
+
}
|
79
|
+
afterValidChange() {
|
80
|
+
this.HEXinput['border-bottom-color'] = this.hex;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
MaterialComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: MaterialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
84
|
+
MaterialComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: MaterialComponent, selector: "color-material", inputs: { zDepth: "zDepth", radius: "radius", background: "background" }, providers: [
|
85
|
+
{
|
86
|
+
provide: NG_VALUE_ACCESSOR,
|
87
|
+
useExisting: forwardRef(() => MaterialComponent),
|
88
|
+
multi: true,
|
89
|
+
},
|
90
|
+
{
|
91
|
+
provide: ColorWrap,
|
92
|
+
useExisting: forwardRef(() => MaterialComponent),
|
93
|
+
},
|
94
|
+
], usesInheritance: true, ngImport: i0, template: `
|
95
|
+
<color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
|
96
|
+
<div class="material-picker {{ className }}">
|
97
|
+
<color-editable-input label="hex" [value]="hex"
|
98
|
+
(onChange)="handleValueChange($event)"
|
99
|
+
[style]="{input: HEXinput, label: HEXlabel}"
|
100
|
+
></color-editable-input>
|
101
|
+
<div class="material-split">
|
102
|
+
<div class="material-third">
|
103
|
+
<color-editable-input label="r" [value]="rgb.r"
|
104
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
105
|
+
(onChange)="handleInputChange($event)"
|
106
|
+
></color-editable-input>
|
107
|
+
</div>
|
108
|
+
<div class="material-third">
|
109
|
+
<color-editable-input label="g" [value]="rgb.g"
|
110
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
111
|
+
(onChange)="handleInputChange($event)"
|
112
|
+
></color-editable-input>
|
113
|
+
</div>
|
114
|
+
<div class="material-third">
|
115
|
+
<color-editable-input label="b" [value]="rgb.b"
|
116
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
117
|
+
(onChange)="handleInputChange($event)"
|
118
|
+
></color-editable-input>
|
119
|
+
</div>
|
120
|
+
</div>
|
121
|
+
</div>
|
122
|
+
</color-raised>
|
123
|
+
`, isInline: true, styles: [".material-picker{width:130px;height:130px;padding:16px;font-family:Roboto}.material-split{display:flex;margin-right:-10px;padding-top:11px}.material-third{flex:1 1 0%;padding-right:10px}\n"], components: [{ type: i1.RaisedComponent, selector: "color-raised", inputs: ["zDepth", "radius", "background"] }, { type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: MaterialComponent, decorators: [{
|
125
|
+
type: Component,
|
126
|
+
args: [{
|
127
|
+
selector: 'color-material',
|
128
|
+
template: `
|
129
|
+
<color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
|
130
|
+
<div class="material-picker {{ className }}">
|
131
|
+
<color-editable-input label="hex" [value]="hex"
|
132
|
+
(onChange)="handleValueChange($event)"
|
133
|
+
[style]="{input: HEXinput, label: HEXlabel}"
|
134
|
+
></color-editable-input>
|
135
|
+
<div class="material-split">
|
136
|
+
<div class="material-third">
|
137
|
+
<color-editable-input label="r" [value]="rgb.r"
|
138
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
139
|
+
(onChange)="handleInputChange($event)"
|
140
|
+
></color-editable-input>
|
141
|
+
</div>
|
142
|
+
<div class="material-third">
|
143
|
+
<color-editable-input label="g" [value]="rgb.g"
|
144
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
145
|
+
(onChange)="handleInputChange($event)"
|
146
|
+
></color-editable-input>
|
147
|
+
</div>
|
148
|
+
<div class="material-third">
|
149
|
+
<color-editable-input label="b" [value]="rgb.b"
|
150
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
151
|
+
(onChange)="handleInputChange($event)"
|
152
|
+
></color-editable-input>
|
153
|
+
</div>
|
154
|
+
</div>
|
155
|
+
</div>
|
156
|
+
</color-raised>
|
157
|
+
`,
|
158
|
+
styles: [
|
159
|
+
`
|
160
|
+
.material-picker {
|
161
|
+
width: 130px;
|
162
|
+
height: 130px;
|
163
|
+
padding: 16px;
|
164
|
+
font-family: Roboto;
|
165
|
+
}
|
166
|
+
.material-split {
|
167
|
+
display: flex;
|
168
|
+
margin-right: -10px;
|
169
|
+
padding-top: 11px;
|
170
|
+
}
|
171
|
+
.material-third {
|
172
|
+
flex: 1 1 0%;
|
173
|
+
padding-right: 10px;
|
174
|
+
}
|
175
|
+
`,
|
176
|
+
],
|
177
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
178
|
+
preserveWhitespaces: false,
|
179
|
+
providers: [
|
180
|
+
{
|
181
|
+
provide: NG_VALUE_ACCESSOR,
|
182
|
+
useExisting: forwardRef(() => MaterialComponent),
|
183
|
+
multi: true,
|
184
|
+
},
|
185
|
+
{
|
186
|
+
provide: ColorWrap,
|
187
|
+
useExisting: forwardRef(() => MaterialComponent),
|
188
|
+
},
|
189
|
+
]
|
190
|
+
}]
|
191
|
+
}], ctorParameters: function () { return []; }, propDecorators: { zDepth: [{
|
192
|
+
type: Input
|
193
|
+
}], radius: [{
|
194
|
+
type: Input
|
195
|
+
}], background: [{
|
196
|
+
type: Input
|
197
|
+
}] } });
|
198
|
+
export class ColorMaterialModule {
|
199
|
+
}
|
200
|
+
ColorMaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorMaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
201
|
+
ColorMaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorMaterialModule, declarations: [MaterialComponent], imports: [CommonModule, EditableInputModule, RaisedModule], exports: [MaterialComponent] });
|
202
|
+
ColorMaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorMaterialModule, imports: [[CommonModule, EditableInputModule, RaisedModule]] });
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorMaterialModule, decorators: [{
|
204
|
+
type: NgModule,
|
205
|
+
args: [{
|
206
|
+
exports: [MaterialComponent],
|
207
|
+
declarations: [MaterialComponent],
|
208
|
+
imports: [CommonModule, EditableInputModule, RaisedModule],
|
209
|
+
}]
|
210
|
+
}] });
|
211
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0ZXJpYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL21hdGVyaWFsL21hdGVyaWFsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVoRyxPQUFPLEVBQUUsU0FBUyxFQUFFLG1CQUFtQixFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQVUsTUFBTSxXQUFXLENBQUM7QUFDN0YsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7OztBQW1FbkQsTUFBTSxPQUFPLGlCQUFrQixTQUFRLFNBQVM7SUEyQzlDO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUEzQ1YsYUFBUSxHQUE0QjtZQUNsQyxLQUFLLEVBQUUsTUFBTTtZQUNiLFNBQVMsRUFBRSxNQUFNO1lBQ2pCLFFBQVEsRUFBRSxNQUFNO1lBQ2hCLEtBQUssRUFBRSxpQkFBaUI7WUFDeEIsT0FBTyxFQUFFLEtBQUs7WUFDZCxjQUFjLEVBQUUsYUFBYTtZQUM3QixPQUFPLEVBQUUsTUFBTTtZQUNmLE1BQU0sRUFBRSxNQUFNO1NBQ2YsQ0FBQztRQUNGLGFBQVEsR0FBNEI7WUFDbEMsUUFBUSxFQUFFLFVBQVU7WUFDcEIsR0FBRyxFQUFFLEtBQUs7WUFDVixJQUFJLEVBQUUsS0FBSztZQUNYLFFBQVEsRUFBRSxNQUFNO1lBQ2hCLEtBQUssRUFBRSxvQkFBb0I7WUFDM0IsZ0JBQWdCLEVBQUUsWUFBWTtTQUMvQixDQUFDO1FBQ0YsYUFBUSxHQUE0QjtZQUNsQyxLQUFLLEVBQUUsTUFBTTtZQUNiLFNBQVMsRUFBRSxNQUFNO1lBQ2pCLFFBQVEsRUFBRSxNQUFNO1lBQ2hCLEtB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SyxFQUFFLElBQUk7eUJBQ1o7d0JBQ0Q7NEJBQ0UsT0FBTyxFQUFFLFNBQVM7NEJBQ2xCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLGtCQUFrQixDQUFDO3lCQUNqRDtxQkFDRjtpQkFDRjswRUF1Q1UsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLOztBQTZDUixNQUFNLE9BQU8sbUJBQW1COztnSEFBbkIsbUJBQW1CO2lIQUFuQixtQkFBbUIsaUJBckZuQixpQkFBaUIsYUFtRmxCLFlBQVksRUFBRSxtQkFBbUIsRUFBRSxZQUFZLGFBbkY5QyxpQkFBaUI7aUhBcUZqQixtQkFBbUIsWUFGckIsQ0FBQyxZQUFZLEVBQUUsbUJBQW1CLEVBQUUsWUFBWSxDQUFDOzJGQUUvQyxtQkFBbUI7a0JBTC9CLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsaUJBQWlCLENBQUM7b0JBQzVCLFlBQVksRUFBRSxDQUFDLGlCQUFpQixDQUFDO29CQUNqQyxPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsbUJBQW1CLEVBQUUsWUFBWSxDQUFDO2lCQUMzRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQ29sb3JXcmFwLCBFZGl0YWJsZUlucHV0TW9kdWxlLCBpc1ZhbGlkSGV4LCBSYWlzZWRNb2R1bGUsIHpEZXB0aCB9IGZyb20gJ25neC1jb2xvcic7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3ItbWF0ZXJpYWwnLFxuICB0ZW1wbGF0ZTogYFxuICA8Y29sb3ItcmFpc2VkIFt6RGVwdGhdPVwiekRlcHRoXCIgW2JhY2tncm91bmRdPVwiYmFja2dyb3VuZFwiIFtyYWRpdXNdPVwicmFkaXVzXCI+XG4gICAgPGRpdiBjbGFzcz1cIm1hdGVyaWFsLXBpY2tlciB7eyBjbGFzc05hbWUgfX1cIj5cbiAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dCBsYWJlbD1cImhleFwiIFt2YWx1ZV09XCJoZXhcIlxuICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgIFtzdHlsZV09XCJ7aW5wdXQ6IEhFWGlucHV0LCBsYWJlbDogSEVYbGFiZWx9XCJcbiAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgICAgPGRpdiBjbGFzcz1cIm1hdGVyaWFsLXNwbGl0XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJtYXRlcmlhbC10aGlyZFwiPlxuICAgICAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dCBsYWJlbD1cInJcIiBbdmFsdWVdPVwicmdiLnJcIlxuICAgICAgICAgICAgW3N0eWxlXT1cInsgaW5wdXQ6IFJHQmlucHV0LCBsYWJlbDogUkdCbGFiZWwgfVwiXG4gICAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlSW5wdXRDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwibWF0ZXJpYWwtdGhpcmRcIj5cbiAgICAgICAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXQgbGFiZWw9XCJnXCIgW3ZhbHVlXT1cInJnYi5nXCJcbiAgICAgICAgICAgIFtzdHlsZV09XCJ7IGlucHV0OiBSR0JpbnB1dCwgbGFiZWw6IFJHQmxhYmVsIH1cIlxuICAgICAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUlucHV0Q2hhbmdlKCRldmVudClcIlxuICAgICAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm1hdGVyaWFsLXRoaXJkXCI+XG4gICAgICAgICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0IGxhYmVsPVwiYlwiIFt2YWx1ZV09XCJyZ2IuYlwiXG4gICAgICAgICAgICBbc3R5bGVdPVwieyBpbnB1dDogUkdCaW5wdXQsIGxhYmVsOiBSR0JsYWJlbCB9XCJcbiAgICAgICAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVJbnB1dENoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9jb2xvci1yYWlzZWQ+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgLm1hdGVyaWFsLXBpY2tlciB7XG4gICAgd2lkdGg6IDEzMHB4O1xuICAgIGhlaWdodDogMTMwcHg7XG4gICAgcGFkZGluZzogMTZweDtcbiAgICBmb250LWZhbWlseTogUm9ib3RvO1xuICB9XG4gIC5tYXRlcmlhbC1zcGxpdCB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBtYXJnaW4tcmlnaHQ6IC0xMHB4O1xuICAgIHBhZGRpbmctdG9wOiAxMXB4O1xuICB9XG4gIC5tYXRlcmlhbC10aGlyZCB7XG4gICAgZmxleDogMSAxIDAlO1xuICAgIHBhZGRpbmctcmlnaHQ6IDEwcHg7XG4gIH1cbiAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IE1hdGVyaWFsQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gICAge1xuICAgICAgcHJvdmlkZTogQ29sb3JXcmFwLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gTWF0ZXJpYWxDb21wb25lbnQpLFxuICAgIH0sXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgTWF0ZXJpYWxDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAge1xuICBIRVhpbnB1dDoge1trZXk6IHN0cmluZ106IHN0cmluZ30gPSB7XG4gICAgd2lkdGg6ICcxMDAlJyxcbiAgICBtYXJnaW5Ub3A6ICcxMnB4JyxcbiAgICBmb250U2l6ZTogJzE1cHgnLFxuICAgIGNvbG9yOiAncmdiKDUxLCA1MSwgNTEpJyxcbiAgICBwYWRkaW5nOiAnMHB4JyxcbiAgICAnYm9yZGVyLXdpZHRoJzogJzBweCAwcHggMnB4JyxcbiAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgaGVpZ2h0OiAnMzBweCcsXG4gIH07XG4gIEhFWGxhYmVsOiB7W2tleTogc3RyaW5nXTogc3RyaW5nfSA9IHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6ICcwcHgnLFxuICAgIGxlZnQ6ICcwcHgnLFxuICAgIGZvbnRTaXplOiAnMTFweCcsXG4gICAgY29sb3I6ICdyZ2IoMTUzLCAxNTMsIDE1MyknLFxuICAgICd0ZXh0LXRyYW5zZm9ybSc6ICdjYXBpdGFsaXplJyxcbiAgfTtcbiAgUkdCaW5wdXQ6IHtba2V5OiBzdHJpbmddOiBzdHJpbmd9ID0ge1xuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgbWFyZ2luVG9wOiAnMTJweCcsXG4gICAgZm9udFNpemU6ICcxNXB4JyxcbiAgICBjb2xvcjogJyMzMzMnLFxuICAgIHBhZGRpbmc6ICcwcHgnLFxuICAgIGJvcmRlcjogJzBweCcsXG4gICAgJ2JvcmRlci1ib3R0b20nOiAnMXB4IHNvbGlkICNlZWUnLFxuICAgIG91dGxpbmU6ICdub25lJyxcbiAgICBoZWlnaHQ6ICczMHB4JyxcbiAgfTtcbiAgUkdCbGFiZWw6IHtba2V5OiBzdHJpbmddOiBzdHJpbmd9ID0ge1xuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogJzBweCcsXG4gICAgbGVmdDogJzBweCcsXG4gICAgZm9udFNpemU6ICcxMXB4JyxcbiAgICBjb2xvcjogJyM5OTk5OTknLFxuICAgICd0ZXh0LXRyYW5zZm9ybSc6ICdjYXBpdGFsaXplJyxcbiAgfTtcbiAgQElucHV0KCkgekRlcHRoOiB6RGVwdGggPSAxO1xuICBASW5wdXQoKSByYWRpdXMgPSAxO1xuICBASW5wdXQoKSBiYWNrZ3JvdW5kID0gJyNmZmYnO1xuICBkaXNhYmxlQWxwaGEgPSB0cnVlO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBoYW5kbGVWYWx1ZUNoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgdGhpcy5oYW5kbGVDaGFuZ2UoZGF0YSwgJGV2ZW50KTtcbiAgfVxuXG4gIGhhbmRsZUlucHV0Q2hhbmdlKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICBpZiAoZGF0YS5oZXgpIHtcbiAgICAgIGlmIChpc1ZhbGlkSGV4KGRhdGEuaGV4KSkge1xuICAgICAgICB0aGlzLmhhbmRsZVZhbHVlQ2hhbmdlKHtcbiAgICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgICBoZXg6IGRhdGEuaGV4LFxuICAgICAgICAgICAgc291cmNlOiAnaGV4JyxcbiAgICAgICAgICB9LFxuICAgICAgICAgICRldmVudCxcbiAgICAgICAgfSk7XG4gICAgICB9XG4gICAgfSBlbHNlIGlmIChkYXRhLnIgfHwgZGF0YS5nIHx8IGRhdGEuYikge1xuICAgICAgdGhpcy5oYW5kbGVWYWx1ZUNoYW5nZSh7XG4gICAgICAgIGRhdGE6IHtcbiAgICAgICAgICByOiBkYXRhLnIgfHwgdGhpcy5yZ2IucixcbiAgICAgICAgICBnOiBkYXRhLmcgfHwgdGhpcy5yZ2IuZyxcbiAgICAgICAgICBiOiBkYXRhLmIgfHwgdGhpcy5yZ2IuYixcbiAgICAgICAgICBzb3VyY2U6ICdyZ2InLFxuICAgICAgICB9LFxuICAgICAgICAkZXZlbnQsXG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBhZnRlclZhbGlkQ2hhbmdlKCkge1xuICAgIHRoaXMuSEVYaW5wdXRbJ2JvcmRlci1ib3R0b20tY29sb3InXSA9IHRoaXMuaGV4O1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGV4cG9ydHM6IFtNYXRlcmlhbENvbXBvbmVudF0sXG4gIGRlY2xhcmF0aW9uczogW01hdGVyaWFsQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRWRpdGFibGVJbnB1dE1vZHVsZSwgUmFpc2VkTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JNYXRlcmlhbE1vZHVsZSB7IH1cbiJdfQ==
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/**
|
2
2
|
* Generated bundle index. Do not edit.
|
3
3
|
*/
|
4
|
-
export * from './
|
5
|
-
//# sourceMappingURL=data:application/json;base64,
|
4
|
+
export * from './public_api';
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLW1hdGVyaWFsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL21hdGVyaWFsL25neC1jb2xvci1tYXRlcmlhbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpY19hcGknO1xuIl19
|
@@ -0,0 +1,2 @@
|
|
1
|
+
export { ColorMaterialModule, MaterialComponent } from './material.component';
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9tYXRlcmlhbC9wdWJsaWNfYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgQ29sb3JNYXRlcmlhbE1vZHVsZSwgTWF0ZXJpYWxDb21wb25lbnQgfSBmcm9tICcuL21hdGVyaWFsLmNvbXBvbmVudCc7XG4iXX0=
|
@@ -0,0 +1,218 @@
|
|
1
|
+
import { CommonModule } from '@angular/common';
|
2
|
+
import * as i0 from '@angular/core';
|
3
|
+
import { forwardRef, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
|
4
|
+
import * as i1 from 'ngx-color';
|
5
|
+
import { ColorWrap, isValidHex, EditableInputModule, RaisedModule } from 'ngx-color';
|
6
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
7
|
+
|
8
|
+
class MaterialComponent extends ColorWrap {
|
9
|
+
constructor() {
|
10
|
+
super();
|
11
|
+
this.HEXinput = {
|
12
|
+
width: '100%',
|
13
|
+
marginTop: '12px',
|
14
|
+
fontSize: '15px',
|
15
|
+
color: 'rgb(51, 51, 51)',
|
16
|
+
padding: '0px',
|
17
|
+
'border-width': '0px 0px 2px',
|
18
|
+
outline: 'none',
|
19
|
+
height: '30px',
|
20
|
+
};
|
21
|
+
this.HEXlabel = {
|
22
|
+
position: 'absolute',
|
23
|
+
top: '0px',
|
24
|
+
left: '0px',
|
25
|
+
fontSize: '11px',
|
26
|
+
color: 'rgb(153, 153, 153)',
|
27
|
+
'text-transform': 'capitalize',
|
28
|
+
};
|
29
|
+
this.RGBinput = {
|
30
|
+
width: '100%',
|
31
|
+
marginTop: '12px',
|
32
|
+
fontSize: '15px',
|
33
|
+
color: '#333',
|
34
|
+
padding: '0px',
|
35
|
+
border: '0px',
|
36
|
+
'border-bottom': '1px solid #eee',
|
37
|
+
outline: 'none',
|
38
|
+
height: '30px',
|
39
|
+
};
|
40
|
+
this.RGBlabel = {
|
41
|
+
position: 'absolute',
|
42
|
+
top: '0px',
|
43
|
+
left: '0px',
|
44
|
+
fontSize: '11px',
|
45
|
+
color: '#999999',
|
46
|
+
'text-transform': 'capitalize',
|
47
|
+
};
|
48
|
+
this.zDepth = 1;
|
49
|
+
this.radius = 1;
|
50
|
+
this.background = '#fff';
|
51
|
+
this.disableAlpha = true;
|
52
|
+
}
|
53
|
+
handleValueChange({ data, $event }) {
|
54
|
+
this.handleChange(data, $event);
|
55
|
+
}
|
56
|
+
handleInputChange({ data, $event }) {
|
57
|
+
if (data.hex) {
|
58
|
+
if (isValidHex(data.hex)) {
|
59
|
+
this.handleValueChange({
|
60
|
+
data: {
|
61
|
+
hex: data.hex,
|
62
|
+
source: 'hex',
|
63
|
+
},
|
64
|
+
$event,
|
65
|
+
});
|
66
|
+
}
|
67
|
+
}
|
68
|
+
else if (data.r || data.g || data.b) {
|
69
|
+
this.handleValueChange({
|
70
|
+
data: {
|
71
|
+
r: data.r || this.rgb.r,
|
72
|
+
g: data.g || this.rgb.g,
|
73
|
+
b: data.b || this.rgb.b,
|
74
|
+
source: 'rgb',
|
75
|
+
},
|
76
|
+
$event,
|
77
|
+
});
|
78
|
+
}
|
79
|
+
}
|
80
|
+
afterValidChange() {
|
81
|
+
this.HEXinput['border-bottom-color'] = this.hex;
|
82
|
+
}
|
83
|
+
}
|
84
|
+
MaterialComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: MaterialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
85
|
+
MaterialComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: MaterialComponent, selector: "color-material", inputs: { zDepth: "zDepth", radius: "radius", background: "background" }, providers: [
|
86
|
+
{
|
87
|
+
provide: NG_VALUE_ACCESSOR,
|
88
|
+
useExisting: forwardRef(() => MaterialComponent),
|
89
|
+
multi: true,
|
90
|
+
},
|
91
|
+
{
|
92
|
+
provide: ColorWrap,
|
93
|
+
useExisting: forwardRef(() => MaterialComponent),
|
94
|
+
},
|
95
|
+
], usesInheritance: true, ngImport: i0, template: `
|
96
|
+
<color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
|
97
|
+
<div class="material-picker {{ className }}">
|
98
|
+
<color-editable-input label="hex" [value]="hex"
|
99
|
+
(onChange)="handleValueChange($event)"
|
100
|
+
[style]="{input: HEXinput, label: HEXlabel}"
|
101
|
+
></color-editable-input>
|
102
|
+
<div class="material-split">
|
103
|
+
<div class="material-third">
|
104
|
+
<color-editable-input label="r" [value]="rgb.r"
|
105
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
106
|
+
(onChange)="handleInputChange($event)"
|
107
|
+
></color-editable-input>
|
108
|
+
</div>
|
109
|
+
<div class="material-third">
|
110
|
+
<color-editable-input label="g" [value]="rgb.g"
|
111
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
112
|
+
(onChange)="handleInputChange($event)"
|
113
|
+
></color-editable-input>
|
114
|
+
</div>
|
115
|
+
<div class="material-third">
|
116
|
+
<color-editable-input label="b" [value]="rgb.b"
|
117
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
118
|
+
(onChange)="handleInputChange($event)"
|
119
|
+
></color-editable-input>
|
120
|
+
</div>
|
121
|
+
</div>
|
122
|
+
</div>
|
123
|
+
</color-raised>
|
124
|
+
`, isInline: true, styles: [".material-picker{width:130px;height:130px;padding:16px;font-family:Roboto}.material-split{display:flex;margin-right:-10px;padding-top:11px}.material-third{flex:1 1 0%;padding-right:10px}\n"], components: [{ type: i1.RaisedComponent, selector: "color-raised", inputs: ["zDepth", "radius", "background"] }, { type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: MaterialComponent, decorators: [{
|
126
|
+
type: Component,
|
127
|
+
args: [{
|
128
|
+
selector: 'color-material',
|
129
|
+
template: `
|
130
|
+
<color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
|
131
|
+
<div class="material-picker {{ className }}">
|
132
|
+
<color-editable-input label="hex" [value]="hex"
|
133
|
+
(onChange)="handleValueChange($event)"
|
134
|
+
[style]="{input: HEXinput, label: HEXlabel}"
|
135
|
+
></color-editable-input>
|
136
|
+
<div class="material-split">
|
137
|
+
<div class="material-third">
|
138
|
+
<color-editable-input label="r" [value]="rgb.r"
|
139
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
140
|
+
(onChange)="handleInputChange($event)"
|
141
|
+
></color-editable-input>
|
142
|
+
</div>
|
143
|
+
<div class="material-third">
|
144
|
+
<color-editable-input label="g" [value]="rgb.g"
|
145
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
146
|
+
(onChange)="handleInputChange($event)"
|
147
|
+
></color-editable-input>
|
148
|
+
</div>
|
149
|
+
<div class="material-third">
|
150
|
+
<color-editable-input label="b" [value]="rgb.b"
|
151
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
152
|
+
(onChange)="handleInputChange($event)"
|
153
|
+
></color-editable-input>
|
154
|
+
</div>
|
155
|
+
</div>
|
156
|
+
</div>
|
157
|
+
</color-raised>
|
158
|
+
`,
|
159
|
+
styles: [
|
160
|
+
`
|
161
|
+
.material-picker {
|
162
|
+
width: 130px;
|
163
|
+
height: 130px;
|
164
|
+
padding: 16px;
|
165
|
+
font-family: Roboto;
|
166
|
+
}
|
167
|
+
.material-split {
|
168
|
+
display: flex;
|
169
|
+
margin-right: -10px;
|
170
|
+
padding-top: 11px;
|
171
|
+
}
|
172
|
+
.material-third {
|
173
|
+
flex: 1 1 0%;
|
174
|
+
padding-right: 10px;
|
175
|
+
}
|
176
|
+
`,
|
177
|
+
],
|
178
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
179
|
+
preserveWhitespaces: false,
|
180
|
+
providers: [
|
181
|
+
{
|
182
|
+
provide: NG_VALUE_ACCESSOR,
|
183
|
+
useExisting: forwardRef(() => MaterialComponent),
|
184
|
+
multi: true,
|
185
|
+
},
|
186
|
+
{
|
187
|
+
provide: ColorWrap,
|
188
|
+
useExisting: forwardRef(() => MaterialComponent),
|
189
|
+
},
|
190
|
+
]
|
191
|
+
}]
|
192
|
+
}], ctorParameters: function () { return []; }, propDecorators: { zDepth: [{
|
193
|
+
type: Input
|
194
|
+
}], radius: [{
|
195
|
+
type: Input
|
196
|
+
}], background: [{
|
197
|
+
type: Input
|
198
|
+
}] } });
|
199
|
+
class ColorMaterialModule {
|
200
|
+
}
|
201
|
+
ColorMaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorMaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
202
|
+
ColorMaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorMaterialModule, declarations: [MaterialComponent], imports: [CommonModule, EditableInputModule, RaisedModule], exports: [MaterialComponent] });
|
203
|
+
ColorMaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorMaterialModule, imports: [[CommonModule, EditableInputModule, RaisedModule]] });
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorMaterialModule, decorators: [{
|
205
|
+
type: NgModule,
|
206
|
+
args: [{
|
207
|
+
exports: [MaterialComponent],
|
208
|
+
declarations: [MaterialComponent],
|
209
|
+
imports: [CommonModule, EditableInputModule, RaisedModule],
|
210
|
+
}]
|
211
|
+
}] });
|
212
|
+
|
213
|
+
/**
|
214
|
+
* Generated bundle index. Do not edit.
|
215
|
+
*/
|
216
|
+
|
217
|
+
export { ColorMaterialModule, MaterialComponent };
|
218
|
+
//# sourceMappingURL=ngx-color-material.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ngx-color-material.mjs","sources":["../../../../src/lib/components/material/material.component.ts","../../../../src/lib/components/material/ngx-color-material.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, EditableInputModule, isValidHex, RaisedModule, zDepth } from 'ngx-color';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-material',\n template: `\n <color-raised [zDepth]=\"zDepth\" [background]=\"background\" [radius]=\"radius\">\n <div class=\"material-picker {{ className }}\">\n <color-editable-input label=\"hex\" [value]=\"hex\"\n (onChange)=\"handleValueChange($event)\"\n [style]=\"{input: HEXinput, label: HEXlabel}\"\n ></color-editable-input>\n <div class=\"material-split\">\n <div class=\"material-third\">\n <color-editable-input label=\"r\" [value]=\"rgb.r\"\n [style]=\"{ input: RGBinput, label: RGBlabel }\"\n (onChange)=\"handleInputChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"material-third\">\n <color-editable-input label=\"g\" [value]=\"rgb.g\"\n [style]=\"{ input: RGBinput, label: RGBlabel }\"\n (onChange)=\"handleInputChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"material-third\">\n <color-editable-input label=\"b\" [value]=\"rgb.b\"\n [style]=\"{ input: RGBinput, label: RGBlabel }\"\n (onChange)=\"handleInputChange($event)\"\n ></color-editable-input>\n </div>\n </div>\n </div>\n </color-raised>\n `,\n styles: [\n `\n .material-picker {\n width: 130px;\n height: 130px;\n padding: 16px;\n font-family: Roboto;\n }\n .material-split {\n display: flex;\n margin-right: -10px;\n padding-top: 11px;\n }\n .material-third {\n flex: 1 1 0%;\n padding-right: 10px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MaterialComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => MaterialComponent),\n },\n ]\n})\nexport class MaterialComponent extends ColorWrap {\n HEXinput: {[key: string]: string} = {\n width: '100%',\n marginTop: '12px',\n fontSize: '15px',\n color: 'rgb(51, 51, 51)',\n padding: '0px',\n 'border-width': '0px 0px 2px',\n outline: 'none',\n height: '30px',\n };\n HEXlabel: {[key: string]: string} = {\n position: 'absolute',\n top: '0px',\n left: '0px',\n fontSize: '11px',\n color: 'rgb(153, 153, 153)',\n 'text-transform': 'capitalize',\n };\n RGBinput: {[key: string]: string} = {\n width: '100%',\n marginTop: '12px',\n fontSize: '15px',\n color: '#333',\n padding: '0px',\n border: '0px',\n 'border-bottom': '1px solid #eee',\n outline: 'none',\n height: '30px',\n };\n RGBlabel: {[key: string]: string} = {\n position: 'absolute',\n top: '0px',\n left: '0px',\n fontSize: '11px',\n color: '#999999',\n 'text-transform': 'capitalize',\n };\n @Input() zDepth: zDepth = 1;\n @Input() radius = 1;\n @Input() background = '#fff';\n disableAlpha = true;\n\n constructor() {\n super();\n }\n\n handleValueChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n\n handleInputChange({ data, $event }) {\n if (data.hex) {\n if (isValidHex(data.hex)) {\n this.handleValueChange({\n data: {\n hex: data.hex,\n source: 'hex',\n },\n $event,\n });\n }\n } else if (data.r || data.g || data.b) {\n this.handleValueChange({\n data: {\n r: data.r || this.rgb.r,\n g: data.g || this.rgb.g,\n b: data.b || this.rgb.b,\n source: 'rgb',\n },\n $event,\n });\n }\n }\n\n afterValidChange() {\n this.HEXinput['border-bottom-color'] = this.hex;\n }\n}\n\n@NgModule({\n exports: [MaterialComponent],\n declarations: [MaterialComponent],\n imports: [CommonModule, EditableInputModule, RaisedModule],\n})\nexport class ColorMaterialModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|