ngx-color 7.3.3 → 8.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/alpha/alpha-picker.component.d.ts +1 -1
- package/alpha/{ngx-color-alpha.d.ts → index.d.ts} +0 -0
- package/alpha.component.d.ts +1 -1
- package/block/block-swatches.component.d.ts +1 -1
- package/block/block.component.d.ts +1 -1
- package/block/{ngx-color-block.d.ts → index.d.ts} +0 -0
- package/checkboard.component.d.ts +1 -1
- package/chrome/chrome-fields.component.d.ts +1 -1
- package/chrome/chrome.component.d.ts +1 -1
- package/chrome/{ngx-color-chrome.d.ts → index.d.ts} +0 -0
- package/circle/circle-swatch.component.d.ts +1 -1
- package/circle/circle.component.d.ts +1 -1
- package/circle/{ngx-color-circle.d.ts → index.d.ts} +0 -0
- package/color-wrap.component.d.ts +1 -1
- package/compact/compact-color.component.d.ts +1 -1
- package/compact/compact-fields.component.d.ts +1 -1
- package/compact/compact.component.d.ts +1 -1
- package/compact/{ngx-color-compact.d.ts → index.d.ts} +0 -0
- package/coordinates.directive.d.ts +2 -2
- package/editable-input.component.d.ts +1 -1
- package/esm2020/alpha/alpha-picker.component.mjs +12 -28
- package/esm2020/alpha.component.mjs +13 -61
- package/esm2020/block/block-swatches.component.mjs +9 -20
- package/esm2020/block/block.component.mjs +14 -55
- package/esm2020/checkboard.component.mjs +9 -25
- package/esm2020/chrome/chrome-fields.component.mjs +9 -51
- package/esm2020/chrome/chrome.component.mjs +19 -84
- package/esm2020/circle/circle-swatch.component.mjs +7 -23
- package/esm2020/circle/circle.component.mjs +12 -26
- package/esm2020/color-wrap.component.mjs +10 -10
- package/esm2020/compact/compact-color.component.mjs +7 -28
- package/esm2020/compact/compact-fields.component.mjs +7 -29
- package/esm2020/compact/compact.component.mjs +14 -37
- package/esm2020/coordinates.directive.mjs +9 -9
- package/esm2020/editable-input.component.mjs +13 -31
- package/esm2020/github/github-swatch.component.mjs +7 -21
- package/esm2020/github/github.component.mjs +12 -79
- package/esm2020/hue/hue-picker.component.mjs +12 -25
- package/esm2020/hue.component.mjs +13 -54
- package/esm2020/material/material.component.mjs +12 -37
- package/esm2020/photoshop/photoshop-button.component.mjs +6 -35
- package/esm2020/photoshop/photoshop-fields.component.mjs +7 -36
- package/esm2020/photoshop/photoshop-previews.component.mjs +6 -34
- package/esm2020/photoshop/photoshop.component.mjs +17 -90
- package/esm2020/raised.component.mjs +10 -49
- package/esm2020/saturation.component.mjs +13 -57
- package/esm2020/shade/shade-picker.component.mjs +12 -25
- package/esm2020/shade.component.mjs +11 -51
- package/esm2020/sketch/sketch-fields.component.mjs +9 -43
- package/esm2020/sketch/sketch-preset-colors.component.mjs +9 -39
- package/esm2020/sketch/sketch.component.mjs +20 -91
- package/esm2020/slider/slider-swatch.component.mjs +6 -34
- package/esm2020/slider/slider-swatches.component.mjs +7 -23
- package/esm2020/slider/slider.component.mjs +12 -26
- package/esm2020/swatch.component.mjs +13 -28
- package/esm2020/swatches/swatches-color.component.mjs +9 -28
- package/esm2020/swatches/swatches-group.component.mjs +9 -24
- package/esm2020/swatches/swatches.component.mjs +14 -30
- package/esm2020/twitter/twitter.component.mjs +14 -110
- package/fesm2015/ngx-color-alpha.mjs +11 -27
- package/fesm2015/ngx-color-alpha.mjs.map +1 -1
- package/fesm2015/ngx-color-block.mjs +20 -72
- package/fesm2015/ngx-color-block.mjs.map +1 -1
- package/fesm2015/ngx-color-chrome.mjs +24 -131
- package/fesm2015/ngx-color-chrome.mjs.map +1 -1
- package/fesm2015/ngx-color-circle.mjs +17 -47
- package/fesm2015/ngx-color-circle.mjs.map +1 -1
- package/fesm2015/ngx-color-compact.mjs +24 -90
- package/fesm2015/ngx-color-compact.mjs.map +1 -1
- package/fesm2015/ngx-color-github.mjs +17 -98
- package/fesm2015/ngx-color-github.mjs.map +1 -1
- package/fesm2015/ngx-color-hue.mjs +11 -24
- package/fesm2015/ngx-color-hue.mjs.map +1 -1
- package/fesm2015/ngx-color-material.mjs +11 -36
- package/fesm2015/ngx-color-material.mjs.map +1 -1
- package/fesm2015/ngx-color-photoshop.mjs +32 -191
- package/fesm2015/ngx-color-photoshop.mjs.map +1 -1
- package/fesm2015/ngx-color-shade.mjs +11 -24
- package/fesm2015/ngx-color-shade.mjs.map +1 -1
- package/fesm2015/ngx-color-sketch.mjs +31 -166
- package/fesm2015/ngx-color-sketch.mjs.map +1 -1
- package/fesm2015/ngx-color-slider.mjs +22 -80
- package/fesm2015/ngx-color-slider.mjs.map +1 -1
- package/fesm2015/ngx-color-swatches.mjs +25 -75
- package/fesm2015/ngx-color-swatches.mjs.map +1 -1
- package/fesm2015/ngx-color-twitter.mjs +13 -109
- package/fesm2015/ngx-color-twitter.mjs.map +1 -1
- package/fesm2015/ngx-color.mjs +100 -359
- package/fesm2015/ngx-color.mjs.map +1 -1
- package/fesm2020/ngx-color-alpha.mjs +11 -27
- package/fesm2020/ngx-color-alpha.mjs.map +1 -1
- package/fesm2020/ngx-color-block.mjs +20 -72
- package/fesm2020/ngx-color-block.mjs.map +1 -1
- package/fesm2020/ngx-color-chrome.mjs +24 -131
- package/fesm2020/ngx-color-chrome.mjs.map +1 -1
- package/fesm2020/ngx-color-circle.mjs +17 -47
- package/fesm2020/ngx-color-circle.mjs.map +1 -1
- package/fesm2020/ngx-color-compact.mjs +24 -90
- package/fesm2020/ngx-color-compact.mjs.map +1 -1
- package/fesm2020/ngx-color-github.mjs +17 -98
- package/fesm2020/ngx-color-github.mjs.map +1 -1
- package/fesm2020/ngx-color-hue.mjs +11 -24
- package/fesm2020/ngx-color-hue.mjs.map +1 -1
- package/fesm2020/ngx-color-material.mjs +11 -36
- package/fesm2020/ngx-color-material.mjs.map +1 -1
- package/fesm2020/ngx-color-photoshop.mjs +32 -191
- package/fesm2020/ngx-color-photoshop.mjs.map +1 -1
- package/fesm2020/ngx-color-shade.mjs +11 -24
- package/fesm2020/ngx-color-shade.mjs.map +1 -1
- package/fesm2020/ngx-color-sketch.mjs +31 -166
- package/fesm2020/ngx-color-sketch.mjs.map +1 -1
- package/fesm2020/ngx-color-slider.mjs +22 -80
- package/fesm2020/ngx-color-slider.mjs.map +1 -1
- package/fesm2020/ngx-color-swatches.mjs +25 -75
- package/fesm2020/ngx-color-swatches.mjs.map +1 -1
- package/fesm2020/ngx-color-twitter.mjs +13 -109
- package/fesm2020/ngx-color-twitter.mjs.map +1 -1
- package/fesm2020/ngx-color.mjs +97 -358
- package/fesm2020/ngx-color.mjs.map +1 -1
- package/github/github-swatch.component.d.ts +1 -1
- package/github/github.component.d.ts +1 -1
- package/github/{ngx-color-github.d.ts → index.d.ts} +0 -0
- package/hue/hue-picker.component.d.ts +1 -1
- package/hue/{ngx-color-hue.d.ts → index.d.ts} +0 -0
- package/hue.component.d.ts +1 -1
- package/{ngx-color.d.ts → index.d.ts} +0 -0
- package/material/{ngx-color-material.d.ts → index.d.ts} +0 -0
- package/material/material.component.d.ts +1 -1
- package/package.json +20 -21
- package/photoshop/{ngx-color-photoshop.d.ts → index.d.ts} +0 -0
- package/photoshop/photoshop-button.component.d.ts +1 -1
- package/photoshop/photoshop-fields.component.d.ts +1 -1
- package/photoshop/photoshop-previews.component.d.ts +1 -1
- package/photoshop/photoshop.component.d.ts +1 -1
- package/raised.component.d.ts +1 -1
- package/saturation.component.d.ts +1 -1
- package/shade/{ngx-color-shade.d.ts → index.d.ts} +0 -0
- package/shade/shade-picker.component.d.ts +1 -1
- package/shade.component.d.ts +1 -1
- package/sketch/{ngx-color-sketch.d.ts → index.d.ts} +0 -0
- package/sketch/sketch-fields.component.d.ts +1 -1
- package/sketch/sketch-preset-colors.component.d.ts +1 -1
- package/sketch/sketch.component.d.ts +1 -1
- package/slider/{ngx-color-slider.d.ts → index.d.ts} +0 -0
- package/slider/slider-swatch.component.d.ts +1 -1
- package/slider/slider-swatches.component.d.ts +1 -1
- package/slider/slider.component.d.ts +1 -1
- package/swatch.component.d.ts +1 -1
- package/swatches/{ngx-color-swatches.d.ts → index.d.ts} +0 -0
- package/swatches/swatches-color.component.d.ts +1 -1
- package/swatches/swatches-group.component.d.ts +1 -1
- package/swatches/swatches.component.d.ts +1 -1
- package/twitter/{ngx-color-twitter.d.ts → index.d.ts} +0 -0
- package/twitter/twitter.component.d.ts +1 -1
- package/alpha/package.json +0 -17
- package/block/package.json +0 -16
- package/chrome/package.json +0 -16
- package/circle/package.json +0 -19
- package/compact/package.json +0 -16
- package/github/package.json +0 -16
- package/hue/package.json +0 -15
- package/material/package.json +0 -15
- package/photoshop/package.json +0 -15
- package/shade/package.json +0 -17
- package/sketch/package.json +0 -15
- package/slider/package.json +0 -15
- package/swatches/package.json +0 -18
- package/twitter/package.json +0 -15
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-block.mjs","sources":["../../src/lib/block/block-swatches.component.ts","../../src/lib/block/block.component.ts","../../src/lib/block/ngx-color-block.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\n@Component({\n selector: 'color-block-swatches',\n template: `\n <div class=\"block-swatches\">\n <color-swatch\n *ngFor=\"let c of colors\"\n [color]=\"c\"\n [style]=\"swatchStyle\"\n [focusStyle]=\"focusStyle(c)\"\n (onClick)=\"handleClick($event)\"\n (onHover)=\"onSwatchHover.emit($event)\"\n ></color-swatch>\n <div class=\"clear\"></div>\n </div>\n `,\n styles: [`\n .block-swatches {\n margin-right: -10px;\n }\n .clear {\n clear: both;\n }\n `],\n})\nexport class BlockSwatchesComponent {\n @Input() colors!: string[];\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n\n swatchStyle = {\n width: '22px',\n height: '22px',\n float: 'left',\n marginRight: '10px',\n marginBottom: '10px',\n borderRadius: '4px',\n };\n\n handleClick({hex, $event}) {\n this.onClick.emit({hex, $event});\n }\n focusStyle(c) {\n return {\n boxShadow: `${ c } 0 0 4px`,\n };\n }\n\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport {\n CheckboardModule,\n ColorWrap,\n EditableInputModule,\n getContrastingColor,\n isValidHex,\n SwatchModule,\n} from 'ngx-color';\nimport { BlockSwatchesComponent } from './block-swatches.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-block',\n template: `\n <div class=\"block-card block-picker {{ className }}\">\n <div class=\"block-triangle\" *ngIf=\"triangle !== 'hide'\"\n [style.border-color]=\"'transparent transparent ' + this.hex + ' transparent'\"\n ></div>\n\n <div class=\"block-head\" [style.background]=\"hex\">\n <color-checkboard *ngIf=\"hex === 'transparent'\"\n borderRadius=\"6px 6px 0 0\"\n ></color-checkboard>\n <div class=\"block-label\" [style.color]=\"getContrastingColor(hex)\">\n {{ hex }}\n </div>\n </div>\n\n <div class=\"block-body\">\n <color-block-swatches [colors]=\"colors\"\n (onClick)=\"handleBlockChange($event)\"\n (onSwatchHover)=\"onSwatchHover.emit($event)\"\n ></color-block-swatches>\n <color-editable-input [value]=\"hex\"\n (onChange)=\"handleValueChange($event)\"\n [style]=\"{input: input, wrap: wrap}\"\n ></color-editable-input>\n </div>\n </div>\n `,\n styles: [\n `\n .block-card {\n background: #fff;\n border-radius: 6px;\n box-shadow: 0 1px rgba(0, 0, 0, .1);\n position: relative;\n }\n .block-head {\n align-items: center;\n border-radius: 6px 6px 0 0;\n display: flex;\n height: 110px;\n justify-content: center;\n position: relative;\n }\n .block-body {\n padding: 10px;\n }\n .block-label {\n font-size: 18px;\n position: relative;\n }\n .block-triangle {\n border-style: solid;\n border-width: 0 10px 10px 10px;\n height: 0;\n left: 50%;\n margin-left: -10px;\n position: absolute;\n top: -10px;\n width: 0;\n }\n `,\n ],\n preserveWhitespaces: false,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => BlockComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => BlockComponent),\n },\n ]\n})\nexport class BlockComponent extends ColorWrap {\n /** Pixel value for picker width */\n @Input() width: string | number = 170;\n /** Color squares to display */\n @Input() colors = [\n '#D9E3F0',\n '#F47373',\n '#697689',\n '#37D67A',\n '#2CCCE4',\n '#555555',\n '#dce775',\n '#ff8a65',\n '#ba68c8',\n ];\n @Input() triangle: 'top' | 'hide' = 'top';\n input: {[key: string]: string} = {\n width: '100%',\n fontSize: '12px',\n color: '#666',\n border: '0px',\n outline: 'none',\n height: '22px',\n boxShadow: 'inset 0 0 0 1px #ddd',\n borderRadius: '4px',\n padding: '0 7px',\n boxSizing: 'border-box',\n };\n wrap: {[key: string]: string} = {\n position: 'relative',\n width: '100%',\n };\n disableAlpha = true;\n\n constructor() {\n super();\n }\n\n handleValueChange({ data, $event }) {\n this.handleBlockChange({ hex: data, $event });\n }\n getContrastingColor(hex) {\n return getContrastingColor(hex);\n }\n handleBlockChange({ hex, $event }) {\n if (isValidHex(hex)) {\n // this.hex = hex;\n this.handleChange(\n {\n hex,\n source: 'hex',\n },\n $event,\n );\n }\n }\n}\n\n@NgModule({\n declarations: [BlockComponent, BlockSwatchesComponent],\n exports: [BlockComponent, BlockSwatchesComponent],\n imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule],\n})\nexport class ColorBlockModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;MAyBa,sBAAsB;IAxBnC;QA0BY,YAAO,GAAG,IAAI,YAAY,EAAO,CAAC;QAClC,kBAAa,GAAG,IAAI,YAAY,EAAO,CAAC;QAElD,gBAAW,GAAG;YACZ,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,MAAM;YACnB,YAAY,EAAE,MAAM;YACpB,YAAY,EAAE,KAAK;SACpB,CAAC;KAWH;IATC,WAAW,CAAC,EAAC,GAAG,EAAE,MAAM,EAAC;QACvB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAC,GAAG,EAAE,MAAM,EAAC,CAAC,CAAC;KAClC;IACD,UAAU,CAAC,CAAC;QACV,OAAO;YACL,SAAS,EAAE,GAAI,CAAE,UAAU;SAC5B,CAAC;KACH;;mHArBU,sBAAsB;uGAAtB,sBAAsB,2JAtBvB;;;;;;;;;;;;GAYT;2FAUU,sBAAsB;kBAxBlC,SAAS;mBAAC;oBACT,QAAQ,EAAE,sBAAsB;oBAChC,QAAQ,EAAE;;;;;;;;;;;;GAYT;oBACD,MAAM,EAAE,CAAC;;;;;;;GAOR,CAAC;iBACH;8BAEU,MAAM;sBAAd,KAAK;gBACI,OAAO;sBAAhB,MAAM;gBACG,aAAa;sBAAtB,MAAM;;;MCgEI,cAAe,SAAQ,SAAS;IAkC3C;QACE,KAAK,EAAE,CAAC;;QAjCD,UAAK,GAAoB,GAAG,CAAC;;QAE7B,WAAM,GAAG;YAChB,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;SACV,CAAC;QACO,aAAQ,GAAmB,KAAK,CAAC;QAC1C,UAAK,GAA4B;YAC/B,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,KAAK;YACb,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,sBAAsB;YACjC,YAAY,EAAE,KAAK;YACnB,OAAO,EAAE,OAAO;YAChB,SAAS,EAAE,YAAY;SACxB,CAAC;QACF,SAAI,GAA4B;YAC9B,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;SACd,CAAC;QACF,iBAAY,GAAG,IAAI,CAAC;KAInB;IAED,iBAAiB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;QAChC,IAAI,CAAC,iBAAiB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;KAC/C;IACD,mBAAmB,CAAC,GAAG;QACrB,OAAO,mBAAmB,CAAC,GAAG,CAAC,CAAC;KACjC;IACD,iBAAiB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE;QAC/B,IAAI,UAAU,CAAC,GAAG,CAAC,EAAE;;YAEnB,IAAI,CAAC,YAAY,CACf;gBACE,GAAG;gBACH,MAAM,EAAE,KAAK;aACd,EACD,MAAM,CACP,CAAC;SACH;KACF;;2GAvDU,cAAc;+FAAd,cAAc,0GAZd;QACT;YACE,OAAO,EAAE,iBAAiB;YAC1B,WAAW,EAAE,UAAU,CAAC,MAAM,cAAc,CAAC;YAC7C,KAAK,EAAE,IAAI;SACZ;QACD;YACE,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,UAAU,CAAC,MAAM,cAAc,CAAC;SAC9C;KACF,iDA1ES;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BT,wqBA6G8B,sBAAsB;2FA3D1C,cAAc;kBA9E1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,aAAa;oBACvB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BT;oBACD,MAAM,EAAE;wBACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCD;qBACA;oBACD,mBAAmB,EAAE,KAAK;oBAC1B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,oBAAoB,CAAC;4BAC7C,KAAK,EAAE,IAAI;yBACZ;wBACD;4BACE,OAAO,EAAE,SAAS;4BAClB,WAAW,EAAE,UAAU,CAAC,oBAAoB,CAAC;yBAC9C;qBACF;iBACF;0EAGU,KAAK;sBAAb,KAAK;gBAEG,MAAM;sBAAd,KAAK;gBAWG,QAAQ;sBAAhB,KAAK;;MAgDK,gBAAgB;;6GAAhB,gBAAgB;8GAAhB,gBAAgB,iBA/DhB,cAAc,EA2DM,sBAAsB,aAE3C,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,mBAAmB,aA7DhE,cAAc,EA4DC,sBAAsB;8GAGrC,gBAAgB,YAFlB,CAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,mBAAmB,CAAC;2FAEjE,gBAAgB;kBAL5B,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,cAAc,EAAE,sBAAsB,CAAC;oBACtD,OAAO,EAAE,CAAC,cAAc,EAAE,sBAAsB,CAAC;oBACjD,OAAO,EAAE,CAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,mBAAmB,CAAC;iBAC7E;;;AC1JD;;;;;;"}
|
1
|
+
{"version":3,"file":"ngx-color-block.mjs","sources":["../../src/lib/block/block-swatches.component.ts","../../src/lib/block/block.component.ts","../../src/lib/block/ngx-color-block.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\n@Component({\n selector: 'color-block-swatches',\n template: `\n <div class=\"block-swatches\">\n <color-swatch\n *ngFor=\"let c of colors\"\n [color]=\"c\"\n [style]=\"swatchStyle\"\n [focusStyle]=\"focusStyle(c)\"\n (onClick)=\"handleClick($event)\"\n (onHover)=\"onSwatchHover.emit($event)\"\n ></color-swatch>\n <div class=\"clear\"></div>\n </div>\n `,\n styles: [`\n .block-swatches {\n margin-right: -10px;\n }\n .clear {\n clear: both;\n }\n `],\n})\nexport class BlockSwatchesComponent {\n @Input() colors!: string[];\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n\n swatchStyle = {\n width: '22px',\n height: '22px',\n float: 'left',\n marginRight: '10px',\n marginBottom: '10px',\n borderRadius: '4px',\n };\n\n handleClick({hex, $event}) {\n this.onClick.emit({hex, $event});\n }\n focusStyle(c) {\n return {\n boxShadow: `${ c } 0 0 4px`,\n };\n }\n\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport {\n CheckboardModule,\n ColorWrap,\n EditableInputModule,\n getContrastingColor,\n isValidHex,\n SwatchModule,\n} from 'ngx-color';\nimport { BlockSwatchesComponent } from './block-swatches.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-block',\n template: `\n <div class=\"block-card block-picker {{ className }}\">\n <div class=\"block-triangle\" *ngIf=\"triangle !== 'hide'\"\n [style.border-color]=\"'transparent transparent ' + this.hex + ' transparent'\"\n ></div>\n\n <div class=\"block-head\" [style.background]=\"hex\">\n <color-checkboard *ngIf=\"hex === 'transparent'\"\n borderRadius=\"6px 6px 0 0\"\n ></color-checkboard>\n <div class=\"block-label\" [style.color]=\"getContrastingColor(hex)\">\n {{ hex }}\n </div>\n </div>\n\n <div class=\"block-body\">\n <color-block-swatches [colors]=\"colors\"\n (onClick)=\"handleBlockChange($event)\"\n (onSwatchHover)=\"onSwatchHover.emit($event)\"\n ></color-block-swatches>\n <color-editable-input [value]=\"hex\"\n (onChange)=\"handleValueChange($event)\"\n [style]=\"{input: input, wrap: wrap}\"\n ></color-editable-input>\n </div>\n </div>\n `,\n styles: [\n `\n .block-card {\n background: #fff;\n border-radius: 6px;\n box-shadow: 0 1px rgba(0, 0, 0, .1);\n position: relative;\n }\n .block-head {\n align-items: center;\n border-radius: 6px 6px 0 0;\n display: flex;\n height: 110px;\n justify-content: center;\n position: relative;\n }\n .block-body {\n padding: 10px;\n }\n .block-label {\n font-size: 18px;\n position: relative;\n }\n .block-triangle {\n border-style: solid;\n border-width: 0 10px 10px 10px;\n height: 0;\n left: 50%;\n margin-left: -10px;\n position: absolute;\n top: -10px;\n width: 0;\n }\n `,\n ],\n preserveWhitespaces: false,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => BlockComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => BlockComponent),\n },\n ]\n})\nexport class BlockComponent extends ColorWrap {\n /** Pixel value for picker width */\n @Input() width: string | number = 170;\n /** Color squares to display */\n @Input() colors = [\n '#D9E3F0',\n '#F47373',\n '#697689',\n '#37D67A',\n '#2CCCE4',\n '#555555',\n '#dce775',\n '#ff8a65',\n '#ba68c8',\n ];\n @Input() triangle: 'top' | 'hide' = 'top';\n input: {[key: string]: string} = {\n width: '100%',\n fontSize: '12px',\n color: '#666',\n border: '0px',\n outline: 'none',\n height: '22px',\n boxShadow: 'inset 0 0 0 1px #ddd',\n borderRadius: '4px',\n padding: '0 7px',\n boxSizing: 'border-box',\n };\n wrap: {[key: string]: string} = {\n position: 'relative',\n width: '100%',\n };\n disableAlpha = true;\n\n constructor() {\n super();\n }\n\n handleValueChange({ data, $event }) {\n this.handleBlockChange({ hex: data, $event });\n }\n getContrastingColor(hex) {\n return getContrastingColor(hex);\n }\n handleBlockChange({ hex, $event }) {\n if (isValidHex(hex)) {\n // this.hex = hex;\n this.handleChange(\n {\n hex,\n source: 'hex',\n },\n $event,\n );\n }\n }\n}\n\n@NgModule({\n declarations: [BlockComponent, BlockSwatchesComponent],\n exports: [BlockComponent, BlockSwatchesComponent],\n imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule],\n})\nexport class ColorBlockModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import * as i0 from '@angular/core';
|
2
2
|
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
|
3
|
-
import * as
|
3
|
+
import * as i2 from 'ngx-color';
|
4
4
|
import { isValidHex, ColorWrap, AlphaModule, CheckboardModule, EditableInputModule, HueModule, SaturationModule } from 'ngx-color';
|
5
5
|
import { TinyColor } from '@ctrl/tinycolor';
|
6
|
-
import * as
|
6
|
+
import * as i1 from '@angular/common';
|
7
7
|
import { CommonModule } from '@angular/common';
|
8
8
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
9
9
|
|
@@ -118,8 +118,8 @@ class ChromeFieldsComponent {
|
|
118
118
|
}
|
119
119
|
}
|
120
120
|
}
|
121
|
-
ChromeFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
122
|
-
ChromeFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
121
|
+
ChromeFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ChromeFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
122
|
+
ChromeFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: ChromeFieldsComponent, selector: "color-chrome-fields", inputs: { disableAlpha: "disableAlpha", hsl: "hsl", rgb: "rgb", hex: "hex" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
|
123
123
|
<div class="chrome-wrap">
|
124
124
|
<div class="chrome-fields">
|
125
125
|
<ng-template [ngIf]="view === 'hex'">
|
@@ -209,12 +209,10 @@ ChromeFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
209
209
|
</div>
|
210
210
|
</div>
|
211
211
|
</div>
|
212
|
-
`, isInline: true, styles: [".chrome-wrap{padding-top:16px;display:flex}.chrome-fields{flex:1;display:flex;margin-left:-6px}.chrome-field{padding-left:6px;width:100%}.chrome-toggle{width:32px;text-align:right;position:relative}.chrome-icon{margin-right:-4px;margin-top:12px;cursor:pointer;position:relative}.chrome-toggle-svg{width:24px;height:24px;border:1px transparent solid;border-radius:5px}.chrome-toggle-svg:hover{background:#eee}\n"],
|
213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
212
|
+
`, isInline: true, styles: [".chrome-wrap{padding-top:16px;display:flex}.chrome-fields{flex:1;display:flex;margin-left:-6px}.chrome-field{padding-left:6px;width:100%}.chrome-toggle{width:32px;text-align:right;position:relative}.chrome-icon{margin-right:-4px;margin-top:12px;cursor:pointer;position:relative}.chrome-toggle-svg{width:24px;height:24px;border:1px transparent solid;border-radius:5px}.chrome-toggle-svg:hover{background:#eee}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ChromeFieldsComponent, decorators: [{
|
214
214
|
type: Component,
|
215
|
-
args: [{
|
216
|
-
selector: 'color-chrome-fields',
|
217
|
-
template: `
|
215
|
+
args: [{ selector: 'color-chrome-fields', template: `
|
218
216
|
<div class="chrome-wrap">
|
219
217
|
<div class="chrome-fields">
|
220
218
|
<ng-template [ngIf]="view === 'hex'">
|
@@ -304,47 +302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
304
302
|
</div>
|
305
303
|
</div>
|
306
304
|
</div>
|
307
|
-
`,
|
308
|
-
styles: [
|
309
|
-
`
|
310
|
-
.chrome-wrap {
|
311
|
-
padding-top: 16px;
|
312
|
-
display: flex;
|
313
|
-
}
|
314
|
-
.chrome-fields {
|
315
|
-
flex: 1;
|
316
|
-
display: flex;
|
317
|
-
margin-left: -6px;
|
318
|
-
}
|
319
|
-
.chrome-field {
|
320
|
-
padding-left: 6px;
|
321
|
-
width: 100%;
|
322
|
-
}
|
323
|
-
.chrome-toggle {
|
324
|
-
width: 32px;
|
325
|
-
text-align: right;
|
326
|
-
position: relative;
|
327
|
-
}
|
328
|
-
.chrome-icon {
|
329
|
-
margin-right: -4px;
|
330
|
-
margin-top: 12px;
|
331
|
-
cursor: pointer;
|
332
|
-
position: relative;
|
333
|
-
}
|
334
|
-
.chrome-toggle-svg {
|
335
|
-
width: 24px;
|
336
|
-
height: 24px;
|
337
|
-
border: 1px transparent solid;
|
338
|
-
border-radius: 5px;
|
339
|
-
}
|
340
|
-
.chrome-toggle-svg:hover {
|
341
|
-
background: #eee;
|
342
|
-
}
|
343
|
-
`,
|
344
|
-
],
|
345
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
346
|
-
preserveWhitespaces: false,
|
347
|
-
}]
|
305
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".chrome-wrap{padding-top:16px;display:flex}.chrome-fields{flex:1;display:flex;margin-left:-6px}.chrome-field{padding-left:6px;width:100%}.chrome-toggle{width:32px;text-align:right;position:relative}.chrome-icon{margin-right:-4px;margin-top:12px;cursor:pointer;position:relative}.chrome-toggle-svg{width:24px;height:24px;border:1px transparent solid;border-radius:5px}.chrome-toggle-svg:hover{background:#eee}\n"] }]
|
348
306
|
}], propDecorators: { disableAlpha: [{
|
349
307
|
type: Input
|
350
308
|
}], hsl: [{
|
@@ -386,8 +344,8 @@ class ChromeComponent extends ColorWrap {
|
|
386
344
|
this.handleChange(data, $event);
|
387
345
|
}
|
388
346
|
}
|
389
|
-
ChromeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
390
|
-
ChromeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
347
|
+
ChromeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ChromeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
348
|
+
ChromeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: ChromeComponent, selector: "color-chrome", inputs: { disableAlpha: "disableAlpha" }, providers: [
|
391
349
|
{
|
392
350
|
provide: NG_VALUE_ACCESSOR,
|
393
351
|
useExisting: forwardRef(() => ChromeComponent),
|
@@ -441,12 +399,10 @@ ChromeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
441
399
|
></color-chrome-fields>
|
442
400
|
</div>
|
443
401
|
</div>
|
444
|
-
`, isInline: true, styles: [".chrome-picker{background:#fff;border-radius:2px;box-shadow:0 0 2px #0000004d,0 4px 8px #0000004d;box-sizing:initial;width:225px;font-family
|
445
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
402
|
+
`, isInline: true, styles: [".chrome-picker{background:#fff;border-radius:2px;box-shadow:0 0 2px #0000004d,0 4px 8px #0000004d;box-sizing:initial;width:225px;font-family:Menlo}.chrome-controls{display:flex}.chrome-color{width:42px}.chrome-body{padding:14px 14px 12px}.chrome-active{position:absolute;top:0;bottom:0;left:0;right:0;border-radius:20px;box-shadow:inset 0 0 0 1px #0000001a;z-index:2}.chrome-swatch{width:28px;height:28px;border-radius:15px;position:relative;overflow:hidden}.saturation{width:100%;padding-bottom:55%;position:relative;border-radius:2px 2px 0 0;overflow:hidden}.chrome-toggles{flex:1}.chrome-hue{height:10px;position:relative;margin-bottom:8px}.chrome-alpha{height:10px;position:relative}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i2.AlphaComponent; }), selector: "color-alpha", inputs: ["hsl", "rgb", "pointer", "shadow", "radius", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i2.CheckboardComponent; }), selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }, { kind: "component", type: i0.forwardRef(function () { return i2.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i2.SaturationComponent; }), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return ChromeFieldsComponent; }), selector: "color-chrome-fields", inputs: ["disableAlpha", "hsl", "rgb", "hex"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ChromeComponent, decorators: [{
|
446
404
|
type: Component,
|
447
|
-
args: [{
|
448
|
-
selector: 'color-chrome',
|
449
|
-
template: `
|
405
|
+
args: [{ selector: 'color-chrome', template: `
|
450
406
|
<div class="chrome-picker {{ className }}">
|
451
407
|
<div class="saturation">
|
452
408
|
<color-saturation
|
@@ -490,67 +446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
490
446
|
></color-chrome-fields>
|
491
447
|
</div>
|
492
448
|
</div>
|
493
|
-
`,
|
494
|
-
styles: [
|
495
|
-
`
|
496
|
-
.chrome-picker {
|
497
|
-
background: #fff;
|
498
|
-
border-radius: 2px;
|
499
|
-
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3);
|
500
|
-
box-sizing: initial;
|
501
|
-
width: 225px;
|
502
|
-
font-family: 'Menlo';
|
503
|
-
}
|
504
|
-
.chrome-controls {
|
505
|
-
display: flex;
|
506
|
-
}
|
507
|
-
.chrome-color {
|
508
|
-
width: 42px;
|
509
|
-
}
|
510
|
-
.chrome-body {
|
511
|
-
padding: 14px 14px 12px;
|
512
|
-
}
|
513
|
-
.chrome-active {
|
514
|
-
position: absolute;
|
515
|
-
top: 0;
|
516
|
-
bottom: 0;
|
517
|
-
left: 0;
|
518
|
-
right: 0;
|
519
|
-
border-radius: 20px;
|
520
|
-
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
521
|
-
z-index: 2;
|
522
|
-
}
|
523
|
-
.chrome-swatch {
|
524
|
-
width: 28px;
|
525
|
-
height: 28px;
|
526
|
-
border-radius: 15px;
|
527
|
-
position: relative;
|
528
|
-
overflow: hidden;
|
529
|
-
}
|
530
|
-
.saturation {
|
531
|
-
width: 100%;
|
532
|
-
padding-bottom: 55%;
|
533
|
-
position: relative;
|
534
|
-
border-radius: 2px 2px 0 0;
|
535
|
-
overflow: hidden;
|
536
|
-
}
|
537
|
-
.chrome-toggles {
|
538
|
-
flex: 1;
|
539
|
-
}
|
540
|
-
.chrome-hue {
|
541
|
-
height: 10px;
|
542
|
-
position: relative;
|
543
|
-
margin-bottom: 8px;
|
544
|
-
}
|
545
|
-
.chrome-alpha {
|
546
|
-
height: 10px;
|
547
|
-
position: relative;
|
548
|
-
}
|
549
|
-
`,
|
550
|
-
],
|
551
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
552
|
-
preserveWhitespaces: false,
|
553
|
-
providers: [
|
449
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
|
554
450
|
{
|
555
451
|
provide: NG_VALUE_ACCESSOR,
|
556
452
|
useExisting: forwardRef(() => ChromeComponent),
|
@@ -560,29 +456,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
560
456
|
provide: ColorWrap,
|
561
457
|
useExisting: forwardRef(() => ChromeComponent),
|
562
458
|
},
|
563
|
-
]
|
564
|
-
}]
|
459
|
+
], styles: [".chrome-picker{background:#fff;border-radius:2px;box-shadow:0 0 2px #0000004d,0 4px 8px #0000004d;box-sizing:initial;width:225px;font-family:Menlo}.chrome-controls{display:flex}.chrome-color{width:42px}.chrome-body{padding:14px 14px 12px}.chrome-active{position:absolute;top:0;bottom:0;left:0;right:0;border-radius:20px;box-shadow:inset 0 0 0 1px #0000001a;z-index:2}.chrome-swatch{width:28px;height:28px;border-radius:15px;position:relative;overflow:hidden}.saturation{width:100%;padding-bottom:55%;position:relative;border-radius:2px 2px 0 0;overflow:hidden}.chrome-toggles{flex:1}.chrome-hue{height:10px;position:relative;margin-bottom:8px}.chrome-alpha{height:10px;position:relative}\n"] }]
|
565
460
|
}], ctorParameters: function () { return []; }, propDecorators: { disableAlpha: [{
|
566
461
|
type: Input
|
567
462
|
}] } });
|
568
463
|
class ColorChromeModule {
|
569
464
|
}
|
570
|
-
ColorChromeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
571
|
-
ColorChromeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
465
|
+
ColorChromeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorChromeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
466
|
+
ColorChromeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorChromeModule, declarations: [ChromeComponent, ChromeFieldsComponent], imports: [CommonModule,
|
572
467
|
AlphaModule,
|
573
468
|
CheckboardModule,
|
574
469
|
EditableInputModule,
|
575
470
|
HueModule,
|
576
471
|
SaturationModule], exports: [ChromeComponent, ChromeFieldsComponent] });
|
577
|
-
ColorChromeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
578
|
-
|
579
|
-
|
580
|
-
|
581
|
-
|
582
|
-
|
583
|
-
|
584
|
-
]] });
|
585
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorChromeModule, decorators: [{
|
472
|
+
ColorChromeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorChromeModule, imports: [CommonModule,
|
473
|
+
AlphaModule,
|
474
|
+
CheckboardModule,
|
475
|
+
EditableInputModule,
|
476
|
+
HueModule,
|
477
|
+
SaturationModule] });
|
478
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorChromeModule, decorators: [{
|
586
479
|
type: NgModule,
|
587
480
|
args: [{
|
588
481
|
declarations: [ChromeComponent, ChromeFieldsComponent],
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-chrome.mjs","sources":["../../src/lib/chrome/chrome-fields.component.ts","../../src/lib/chrome/chrome.component.ts","../../src/lib/chrome/ngx-color-chrome.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnInit,\n Output,\n} from '@angular/core';\n\nimport { isValidHex, HSLA, RGBA } from 'ngx-color';\nimport { TinyColor } from '@ctrl/tinycolor';\n\n@Component({\n selector: 'color-chrome-fields',\n template: `\n <div class=\"chrome-wrap\">\n <div class=\"chrome-fields\">\n <ng-template [ngIf]=\"view === 'hex'\">\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"hex\" [value]=\"hex\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"view === 'rgb'\">\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"r\" [value]=\"rgb.r\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"g\" [value]=\"rgb.g\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"b\" [value]=\"rgb.b\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input *ngIf=\"!disableAlpha\"\n [style]=\"{ input: input, label: label }\"\n label=\"a\" [value]=\"rgb.a\"\n [arrowOffset]=\"0.01\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"view === 'hsl'\">\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"h\"\n [value]=\"round(hsl.h)\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"s\" [value]=\"round(hsl.s * 100) + '%'\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"l\" [value]=\"round(hsl.l * 100) + '%'\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input *ngIf=\"!disableAlpha\"\n [style]=\"{ input: input, label: label }\"\n label=\"a\" [value]=\"hsl.a\"\n [arrowOffset]=\"0.01\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n </ng-template>\n </div>\n\n <div class=\"chrome-toggle\">\n <div class=\"chrome-icon\" (click)=\"toggleViews()\" #icon>\n <svg class=\"chrome-toggle-svg\" viewBox=\"0 0 24 24\">\n <path #iconUp fill=\"#333\"\n d=\"M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z\"\n />\n <path #iconDown fill=\"#333\"\n d=\"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z\"\n />\n </svg>\n </div>\n </div>\n </div>\n `,\n styles: [\n `\n .chrome-wrap {\n padding-top: 16px;\n display: flex;\n }\n .chrome-fields {\n flex: 1;\n display: flex;\n margin-left: -6px;\n }\n .chrome-field {\n padding-left: 6px;\n width: 100%;\n }\n .chrome-toggle {\n width: 32px;\n text-align: right;\n position: relative;\n }\n .chrome-icon {\n margin-right: -4px;\n margin-top: 12px;\n cursor: pointer;\n position: relative;\n }\n .chrome-toggle-svg {\n width: 24px;\n height: 24px;\n border: 1px transparent solid;\n border-radius: 5px;\n }\n .chrome-toggle-svg:hover {\n background: #eee;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class ChromeFieldsComponent implements OnInit {\n @Input() disableAlpha!: boolean;\n @Input() hsl!: HSLA;\n @Input() rgb!: RGBA;\n @Input() hex!: string;\n @Output() onChange = new EventEmitter<any>();\n view = '';\n input: Record<string, string> = {\n fontSize: '11px',\n color: '#333',\n width: '100%',\n borderRadius: '2px',\n border: 'none',\n boxShadow: 'inset 0 0 0 1px #dadada',\n height: '21px',\n 'text-align': 'center',\n };\n label: Record<string, string> = {\n 'text-transform': 'uppercase',\n fontSize: '11px',\n 'line-height': '11px',\n color: '#969696',\n 'text-align': 'center',\n display: 'block',\n marginTop: '12px',\n };\n\n ngOnInit() {\n if (this.hsl.a === 1 && this.view !== 'hex') {\n this.view = 'hex';\n } else if (this.view !== 'rgb' && this.view !== 'hsl') {\n this.view = 'rgb';\n }\n }\n toggleViews() {\n if (this.view === 'hex') {\n this.view = 'rgb';\n } else if (this.view === 'rgb') {\n this.view = 'hsl';\n } else if (this.view === 'hsl') {\n if (this.hsl.a === 1) {\n this.view = 'hex';\n } else {\n this.view = 'rgb';\n }\n }\n }\n round(value) {\n return Math.round(value);\n }\n handleChange({ data, $event }) {\n if (data.hex) {\n if (isValidHex(data.hex)) {\n const color = new TinyColor(data.hex);\n this.onChange.emit({\n data: {\n hex: this.disableAlpha ? color.toHex() : color.toHex8(),\n source: 'hex',\n },\n $event,\n });\n }\n } else if (data.r || data.g || data.b) {\n this.onChange.emit({\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 } else if (data.a) {\n if (data.a < 0) {\n data.a = 0;\n } else if (data.a > 1) {\n data.a = 1;\n }\n\n if (this.disableAlpha) {\n data.a = 1;\n }\n\n this.onChange.emit({\n data: {\n h: this.hsl.h,\n s: this.hsl.s,\n l: this.hsl.l,\n a: Math.round(data.a * 100) / 100,\n source: 'rgb',\n },\n $event,\n });\n } else if (data.h || data.s || data.l) {\n const s = data.s && data.s.replace('%', '');\n const l = data.l && data.l.replace('%', '');\n this.onChange.emit({\n data: {\n h: data.h || this.hsl.h,\n s: Number(s || this.hsl.s),\n l: Number(l || this.hsl.l),\n source: 'hsl',\n },\n $event,\n });\n }\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { AlphaModule, CheckboardModule, ColorWrap, EditableInputModule, HueModule, SaturationModule } from 'ngx-color';\nimport { ChromeFieldsComponent } from './chrome-fields.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-chrome',\n template: `\n <div class=\"chrome-picker {{ className }}\">\n <div class=\"saturation\">\n <color-saturation\n [hsl]=\"hsl\"\n [hsv]=\"hsv\"\n [circle]=\"circle\"\n (onChange)=\"handleValueChange($event)\"\n ></color-saturation>\n </div>\n <div class=\"chrome-body\">\n <div class=\"chrome-controls\">\n <div class=\"chrome-color\">\n <div class=\"chrome-swatch\">\n <div class=\"chrome-active\"\n [style.background]=\"activeBackground\"\n ></div>\n <color-checkboard></color-checkboard>\n </div>\n </div>\n <div class=\"chrome-toggles\">\n <div class=\"chrome-hue\">\n <color-hue\n [radius]=\"2\"\n [hsl]=\"hsl\"\n [pointer]=\"pointer\"\n (onChange)=\"handleValueChange($event)\"\n ></color-hue>\n </div>\n <div class=\"chrome-alpha\" *ngIf=\"!disableAlpha\">\n <color-alpha\n [radius]=\"2\" [rgb]=\"rgb\" [hsl]=\"hsl\"\n [pointer]=\"pointer\" (onChange)=\"handleValueChange($event)\"\n ></color-alpha>\n </div>\n </div>\n </div>\n <color-chrome-fields\n [rgb]=\"rgb\" [hsl]=\"hsl\" [hex]=\"hex\"\n [disableAlpha]=\"disableAlpha\"\n (onChange)=\"handleValueChange($event)\"\n ></color-chrome-fields>\n </div>\n </div>\n `,\n styles: [\n `\n .chrome-picker {\n background: #fff;\n border-radius: 2px;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3);\n box-sizing: initial;\n width: 225px;\n font-family: 'Menlo';\n }\n .chrome-controls {\n display: flex;\n }\n .chrome-color {\n width: 42px;\n }\n .chrome-body {\n padding: 14px 14px 12px;\n }\n .chrome-active {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 20px;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n z-index: 2;\n }\n .chrome-swatch {\n width: 28px;\n height: 28px;\n border-radius: 15px;\n position: relative;\n overflow: hidden;\n }\n .saturation {\n width: 100%;\n padding-bottom: 55%;\n position: relative;\n border-radius: 2px 2px 0 0;\n overflow: hidden;\n }\n .chrome-toggles {\n flex: 1;\n }\n .chrome-hue {\n height: 10px;\n position: relative;\n margin-bottom: 8px;\n }\n .chrome-alpha {\n height: 10px;\n position: relative;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ChromeComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => ChromeComponent),\n },\n ]\n})\nexport class ChromeComponent extends ColorWrap {\n /** Remove alpha slider and options from picker */\n @Input() disableAlpha = false;\n circle: Record<string, string> = {\n width: '12px',\n height: '12px',\n borderRadius: '6px',\n boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',\n transform: 'translate(-6px, -8px)',\n };\n pointer: Record<string, string> = {\n width: '12px',\n height: '12px',\n borderRadius: '6px',\n transform: 'translate(-6px, -2px)',\n backgroundColor: 'rgb(248, 248, 248)',\n boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',\n };\n activeBackground!: string;\n\n constructor() {\n super();\n }\n\n afterValidChange() {\n const alpha = this.disableAlpha ? 1 : this.rgb.a;\n this.activeBackground = `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${alpha})`;\n }\n handleValueChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [ChromeComponent, ChromeFieldsComponent],\n exports: [ChromeComponent, ChromeFieldsComponent],\n imports: [\n CommonModule,\n AlphaModule,\n CheckboardModule,\n EditableInputModule,\n HueModule,\n SaturationModule,\n ],\n})\nexport class ColorChromeModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
1
|
+
{"version":3,"file":"ngx-color-chrome.mjs","sources":["../../src/lib/chrome/chrome-fields.component.ts","../../src/lib/chrome/chrome.component.ts","../../src/lib/chrome/ngx-color-chrome.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnInit,\n Output,\n} from '@angular/core';\n\nimport { isValidHex, HSLA, RGBA } from 'ngx-color';\nimport { TinyColor } from '@ctrl/tinycolor';\n\n@Component({\n selector: 'color-chrome-fields',\n template: `\n <div class=\"chrome-wrap\">\n <div class=\"chrome-fields\">\n <ng-template [ngIf]=\"view === 'hex'\">\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"hex\" [value]=\"hex\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"view === 'rgb'\">\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"r\" [value]=\"rgb.r\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"g\" [value]=\"rgb.g\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"b\" [value]=\"rgb.b\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input *ngIf=\"!disableAlpha\"\n [style]=\"{ input: input, label: label }\"\n label=\"a\" [value]=\"rgb.a\"\n [arrowOffset]=\"0.01\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"view === 'hsl'\">\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"h\"\n [value]=\"round(hsl.h)\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"s\" [value]=\"round(hsl.s * 100) + '%'\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input\n [style]=\"{ input: input, label: label }\"\n label=\"l\" [value]=\"round(hsl.l * 100) + '%'\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"chrome-field\">\n <color-editable-input *ngIf=\"!disableAlpha\"\n [style]=\"{ input: input, label: label }\"\n label=\"a\" [value]=\"hsl.a\"\n [arrowOffset]=\"0.01\"\n (onChange)=\"handleChange($event)\"\n ></color-editable-input>\n </div>\n </ng-template>\n </div>\n\n <div class=\"chrome-toggle\">\n <div class=\"chrome-icon\" (click)=\"toggleViews()\" #icon>\n <svg class=\"chrome-toggle-svg\" viewBox=\"0 0 24 24\">\n <path #iconUp fill=\"#333\"\n d=\"M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z\"\n />\n <path #iconDown fill=\"#333\"\n d=\"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z\"\n />\n </svg>\n </div>\n </div>\n </div>\n `,\n styles: [\n `\n .chrome-wrap {\n padding-top: 16px;\n display: flex;\n }\n .chrome-fields {\n flex: 1;\n display: flex;\n margin-left: -6px;\n }\n .chrome-field {\n padding-left: 6px;\n width: 100%;\n }\n .chrome-toggle {\n width: 32px;\n text-align: right;\n position: relative;\n }\n .chrome-icon {\n margin-right: -4px;\n margin-top: 12px;\n cursor: pointer;\n position: relative;\n }\n .chrome-toggle-svg {\n width: 24px;\n height: 24px;\n border: 1px transparent solid;\n border-radius: 5px;\n }\n .chrome-toggle-svg:hover {\n background: #eee;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class ChromeFieldsComponent implements OnInit {\n @Input() disableAlpha!: boolean;\n @Input() hsl!: HSLA;\n @Input() rgb!: RGBA;\n @Input() hex!: string;\n @Output() onChange = new EventEmitter<any>();\n view = '';\n input: Record<string, string> = {\n fontSize: '11px',\n color: '#333',\n width: '100%',\n borderRadius: '2px',\n border: 'none',\n boxShadow: 'inset 0 0 0 1px #dadada',\n height: '21px',\n 'text-align': 'center',\n };\n label: Record<string, string> = {\n 'text-transform': 'uppercase',\n fontSize: '11px',\n 'line-height': '11px',\n color: '#969696',\n 'text-align': 'center',\n display: 'block',\n marginTop: '12px',\n };\n\n ngOnInit() {\n if (this.hsl.a === 1 && this.view !== 'hex') {\n this.view = 'hex';\n } else if (this.view !== 'rgb' && this.view !== 'hsl') {\n this.view = 'rgb';\n }\n }\n toggleViews() {\n if (this.view === 'hex') {\n this.view = 'rgb';\n } else if (this.view === 'rgb') {\n this.view = 'hsl';\n } else if (this.view === 'hsl') {\n if (this.hsl.a === 1) {\n this.view = 'hex';\n } else {\n this.view = 'rgb';\n }\n }\n }\n round(value) {\n return Math.round(value);\n }\n handleChange({ data, $event }) {\n if (data.hex) {\n if (isValidHex(data.hex)) {\n const color = new TinyColor(data.hex);\n this.onChange.emit({\n data: {\n hex: this.disableAlpha ? color.toHex() : color.toHex8(),\n source: 'hex',\n },\n $event,\n });\n }\n } else if (data.r || data.g || data.b) {\n this.onChange.emit({\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 } else if (data.a) {\n if (data.a < 0) {\n data.a = 0;\n } else if (data.a > 1) {\n data.a = 1;\n }\n\n if (this.disableAlpha) {\n data.a = 1;\n }\n\n this.onChange.emit({\n data: {\n h: this.hsl.h,\n s: this.hsl.s,\n l: this.hsl.l,\n a: Math.round(data.a * 100) / 100,\n source: 'rgb',\n },\n $event,\n });\n } else if (data.h || data.s || data.l) {\n const s = data.s && data.s.replace('%', '');\n const l = data.l && data.l.replace('%', '');\n this.onChange.emit({\n data: {\n h: data.h || this.hsl.h,\n s: Number(s || this.hsl.s),\n l: Number(l || this.hsl.l),\n source: 'hsl',\n },\n $event,\n });\n }\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { AlphaModule, CheckboardModule, ColorWrap, EditableInputModule, HueModule, SaturationModule } from 'ngx-color';\nimport { ChromeFieldsComponent } from './chrome-fields.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-chrome',\n template: `\n <div class=\"chrome-picker {{ className }}\">\n <div class=\"saturation\">\n <color-saturation\n [hsl]=\"hsl\"\n [hsv]=\"hsv\"\n [circle]=\"circle\"\n (onChange)=\"handleValueChange($event)\"\n ></color-saturation>\n </div>\n <div class=\"chrome-body\">\n <div class=\"chrome-controls\">\n <div class=\"chrome-color\">\n <div class=\"chrome-swatch\">\n <div class=\"chrome-active\"\n [style.background]=\"activeBackground\"\n ></div>\n <color-checkboard></color-checkboard>\n </div>\n </div>\n <div class=\"chrome-toggles\">\n <div class=\"chrome-hue\">\n <color-hue\n [radius]=\"2\"\n [hsl]=\"hsl\"\n [pointer]=\"pointer\"\n (onChange)=\"handleValueChange($event)\"\n ></color-hue>\n </div>\n <div class=\"chrome-alpha\" *ngIf=\"!disableAlpha\">\n <color-alpha\n [radius]=\"2\" [rgb]=\"rgb\" [hsl]=\"hsl\"\n [pointer]=\"pointer\" (onChange)=\"handleValueChange($event)\"\n ></color-alpha>\n </div>\n </div>\n </div>\n <color-chrome-fields\n [rgb]=\"rgb\" [hsl]=\"hsl\" [hex]=\"hex\"\n [disableAlpha]=\"disableAlpha\"\n (onChange)=\"handleValueChange($event)\"\n ></color-chrome-fields>\n </div>\n </div>\n `,\n styles: [\n `\n .chrome-picker {\n background: #fff;\n border-radius: 2px;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3);\n box-sizing: initial;\n width: 225px;\n font-family: 'Menlo';\n }\n .chrome-controls {\n display: flex;\n }\n .chrome-color {\n width: 42px;\n }\n .chrome-body {\n padding: 14px 14px 12px;\n }\n .chrome-active {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 20px;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n z-index: 2;\n }\n .chrome-swatch {\n width: 28px;\n height: 28px;\n border-radius: 15px;\n position: relative;\n overflow: hidden;\n }\n .saturation {\n width: 100%;\n padding-bottom: 55%;\n position: relative;\n border-radius: 2px 2px 0 0;\n overflow: hidden;\n }\n .chrome-toggles {\n flex: 1;\n }\n .chrome-hue {\n height: 10px;\n position: relative;\n margin-bottom: 8px;\n }\n .chrome-alpha {\n height: 10px;\n position: relative;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ChromeComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => ChromeComponent),\n },\n ]\n})\nexport class ChromeComponent extends ColorWrap {\n /** Remove alpha slider and options from picker */\n @Input() disableAlpha = false;\n circle: Record<string, string> = {\n width: '12px',\n height: '12px',\n borderRadius: '6px',\n boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',\n transform: 'translate(-6px, -8px)',\n };\n pointer: Record<string, string> = {\n width: '12px',\n height: '12px',\n borderRadius: '6px',\n transform: 'translate(-6px, -2px)',\n backgroundColor: 'rgb(248, 248, 248)',\n boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',\n };\n activeBackground!: string;\n\n constructor() {\n super();\n }\n\n afterValidChange() {\n const alpha = this.disableAlpha ? 1 : this.rgb.a;\n this.activeBackground = `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${alpha})`;\n }\n handleValueChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [ChromeComponent, ChromeFieldsComponent],\n exports: [ChromeComponent, ChromeFieldsComponent],\n imports: [\n CommonModule,\n AlphaModule,\n CheckboardModule,\n EditableInputModule,\n HueModule,\n SaturationModule,\n ],\n})\nexport class ColorChromeModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
@@ -33,8 +33,8 @@ class CircleSwatchComponent {
|
|
33
33
|
this.onClick.emit({ hex, $event });
|
34
34
|
}
|
35
35
|
}
|
36
|
-
CircleSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
37
|
-
CircleSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
36
|
+
CircleSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CircleSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
37
|
+
CircleSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: CircleSwatchComponent, selector: "color-circle-swatch", inputs: { color: "color", circleSize: "circleSize", circleSpacing: "circleSpacing", focus: "focus" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, usesOnChanges: true, ngImport: i0, template: `
|
38
38
|
<div class="circle-swatch"
|
39
39
|
[style.width.px]="circleSize" [style.height.px]="circleSize"
|
40
40
|
[style.margin-right.px]="circleSpacing" [style.margin-bottom.px]="circleSpacing"
|
@@ -45,12 +45,10 @@ CircleSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
45
45
|
</color-swatch>
|
46
46
|
<div class="clear"></div>
|
47
47
|
</div>
|
48
|
-
`, isInline: true, styles: [".circle-swatch{transform:scale(1);transition:transform .1s ease}.circle-swatch:hover{transform:scale(1.2)}\n"],
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
48
|
+
`, isInline: true, styles: [".circle-swatch{transform:scale(1);transition:transform .1s ease}.circle-swatch:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "component", type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CircleSwatchComponent, decorators: [{
|
50
50
|
type: Component,
|
51
|
-
args: [{
|
52
|
-
selector: 'color-circle-swatch',
|
53
|
-
template: `
|
51
|
+
args: [{ selector: 'color-circle-swatch', template: `
|
54
52
|
<div class="circle-swatch"
|
55
53
|
[style.width.px]="circleSize" [style.height.px]="circleSize"
|
56
54
|
[style.margin-right.px]="circleSpacing" [style.margin-bottom.px]="circleSpacing"
|
@@ -61,21 +59,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
61
59
|
</color-swatch>
|
62
60
|
<div class="clear"></div>
|
63
61
|
</div>
|
64
|
-
`,
|
65
|
-
styles: [
|
66
|
-
`
|
67
|
-
.circle-swatch {
|
68
|
-
transform: scale(1);
|
69
|
-
transition: transform 100ms ease;
|
70
|
-
}
|
71
|
-
.circle-swatch:hover {
|
72
|
-
transform: scale(1.2);
|
73
|
-
}
|
74
|
-
`,
|
75
|
-
],
|
76
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
77
|
-
preserveWhitespaces: false,
|
78
|
-
}]
|
62
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".circle-swatch{transform:scale(1);transition:transform .1s ease}.circle-swatch:hover{transform:scale(1.2)}\n"] }]
|
79
63
|
}], propDecorators: { color: [{
|
80
64
|
type: Input
|
81
65
|
}], circleSize: [{
|
@@ -133,8 +117,8 @@ class CircleComponent extends ColorWrap {
|
|
133
117
|
this.handleChange(data, $event);
|
134
118
|
}
|
135
119
|
}
|
136
|
-
CircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
137
|
-
CircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
120
|
+
CircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
121
|
+
CircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: CircleComponent, selector: "color-circle", inputs: { width: "width", colors: "colors", circleSize: "circleSize", circleSpacing: "circleSpacing" }, providers: [
|
138
122
|
{
|
139
123
|
provide: NG_VALUE_ACCESSOR,
|
140
124
|
useExisting: forwardRef(() => CircleComponent),
|
@@ -161,12 +145,10 @@ CircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
161
145
|
(onSwatchHover)="onSwatchHover.emit($event)"
|
162
146
|
></color-circle-swatch>
|
163
147
|
</div>
|
164
|
-
`, isInline: true, styles: [".circle-picker{display:flex;flex-wrap:wrap}\n"],
|
165
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
148
|
+
`, isInline: true, styles: [".circle-picker{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i0.forwardRef(function () { return CircleSwatchComponent; }), selector: "color-circle-swatch", inputs: ["color", "circleSize", "circleSpacing", "focus"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
149
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: CircleComponent, decorators: [{
|
166
150
|
type: Component,
|
167
|
-
args: [{
|
168
|
-
selector: 'color-circle',
|
169
|
-
template: `
|
151
|
+
args: [{ selector: 'color-circle', template: `
|
170
152
|
<div
|
171
153
|
class="circle-picker {{ className }}"
|
172
154
|
[style.width.px]="width"
|
@@ -183,18 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
183
165
|
(onSwatchHover)="onSwatchHover.emit($event)"
|
184
166
|
></color-circle-swatch>
|
185
167
|
</div>
|
186
|
-
`,
|
187
|
-
styles: [
|
188
|
-
`
|
189
|
-
.circle-picker {
|
190
|
-
display: flex;
|
191
|
-
flex-wrap: wrap;
|
192
|
-
}
|
193
|
-
`,
|
194
|
-
],
|
195
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
196
|
-
preserveWhitespaces: false,
|
197
|
-
providers: [
|
168
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
|
198
169
|
{
|
199
170
|
provide: NG_VALUE_ACCESSOR,
|
200
171
|
useExisting: forwardRef(() => CircleComponent),
|
@@ -204,8 +175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
204
175
|
provide: ColorWrap,
|
205
176
|
useExisting: forwardRef(() => CircleComponent),
|
206
177
|
},
|
207
|
-
]
|
208
|
-
}]
|
178
|
+
], styles: [".circle-picker{display:flex;flex-wrap:wrap}\n"] }]
|
209
179
|
}], ctorParameters: function () { return []; }, propDecorators: { width: [{
|
210
180
|
type: Input
|
211
181
|
}], colors: [{
|
@@ -217,10 +187,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
217
187
|
}] } });
|
218
188
|
class ColorCircleModule {
|
219
189
|
}
|
220
|
-
ColorCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
221
|
-
ColorCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
222
|
-
ColorCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
223
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
190
|
+
ColorCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
191
|
+
ColorCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorCircleModule, declarations: [CircleComponent, CircleSwatchComponent], imports: [CommonModule, SwatchModule], exports: [CircleComponent, CircleSwatchComponent] });
|
192
|
+
ColorCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorCircleModule, imports: [CommonModule, SwatchModule] });
|
193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorCircleModule, decorators: [{
|
224
194
|
type: NgModule,
|
225
195
|
args: [{
|
226
196
|
declarations: [CircleComponent, CircleSwatchComponent],
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-circle.mjs","sources":["../../src/lib/circle/circle-swatch.component.ts","../../src/lib/circle/circle.component.ts","../../src/lib/circle/ngx-color-circle.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n} from '@angular/core';\n\n@Component({\n selector: 'color-circle-swatch',\n template: `\n <div class=\"circle-swatch\"\n [style.width.px]=\"circleSize\" [style.height.px]=\"circleSize\"\n [style.margin-right.px]=\"circleSpacing\" [style.margin-bottom.px]=\"circleSpacing\"\n >\n <color-swatch\n [color]=\"color\" [style]=\"swatchStyle\" [focus]=\"focus\" [focusStyle]=\"focusStyle\"\n (onClick)=\"handleClick($event)\" (onHover)=\"onSwatchHover.emit($event)\">\n </color-swatch>\n <div class=\"clear\"></div>\n </div>\n `,\n styles: [\n `\n .circle-swatch {\n transform: scale(1);\n transition: transform 100ms ease;\n }\n .circle-swatch:hover {\n transform: scale(1.2);\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class CircleSwatchComponent implements OnChanges {\n @Input() color!: string;\n @Input() circleSize = 28;\n @Input() circleSpacing = 14;\n @Input() focus = false;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n focusStyle: Record<string, string> = {};\n swatchStyle: Record<string, string> = {\n borderRadius: '50%',\n background: 'transparent',\n transition: '100ms box-shadow ease 0s',\n };\n\n ngOnChanges() {\n this.swatchStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}`;\n this.focusStyle.boxShadow = `inset 0 0 0 ${ this.circleSize / 2 }px ${ this.color }, 0 0 5px ${ this.color }`;\n if (this.focus) {\n this.focusStyle.boxShadow = `inset 0 0 0 3px ${ this.color }, 0 0 5px ${ this.color }`;\n }\n }\n handleClick({ hex, $event }) {\n this.onClick.emit({ hex, $event });\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\nimport {\n amber,\n blue,\n blueGrey,\n brown,\n cyan,\n deepOrange,\n deepPurple,\n green,\n indigo,\n lightBlue,\n lightGreen,\n lime,\n orange,\n pink,\n purple,\n red,\n teal,\n yellow,\n} from 'material-colors';\nimport { TinyColor } from '@ctrl/tinycolor';\n\nimport { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';\nimport { CircleSwatchComponent } from './circle-swatch.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-circle',\n template: `\n <div\n class=\"circle-picker {{ className }}\"\n [style.width.px]=\"width\"\n [style.margin-right.px]=\"-circleSpacing\"\n [style.margin-bottom.px]=\"-circleSpacing\"\n >\n <color-circle-swatch\n *ngFor=\"let color of colors\"\n [circleSize]=\"circleSize\"\n [circleSpacing]=\"circleSpacing\"\n [color]=\"color\"\n [focus]=\"isActive(color)\"\n (onClick)=\"handleBlockChange($event)\"\n (onSwatchHover)=\"onSwatchHover.emit($event)\"\n ></color-circle-swatch>\n </div>\n `,\n styles: [\n `\n .circle-picker {\n display: flex;\n flex-wrap: wrap;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CircleComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => CircleComponent),\n },\n ]\n})\nexport class CircleComponent extends ColorWrap {\n /** Pixel value for picker width */\n @Input() width: string | number = 252;\n /** Color squares to display */\n @Input()\n colors: string[] = [\n red['500'],\n pink['500'],\n purple['500'],\n deepPurple['500'],\n indigo['500'],\n blue['500'],\n lightBlue['500'],\n cyan['500'],\n teal['500'],\n green['500'],\n lightGreen['500'],\n lime['500'],\n yellow['500'],\n amber['500'],\n orange['500'],\n deepOrange['500'],\n brown['500'],\n blueGrey['500'],\n ];\n /** Value for circle size */\n @Input() circleSize = 28;\n /** Value for spacing between circles */\n @Input() circleSpacing = 14;\n\n constructor() {\n super();\n }\n isActive(color: string) {\n return new TinyColor(this.hex).equals(color);\n }\n handleBlockChange({ hex, $event }: { hex: string, $event: Event }) {\n if (isValidHex(hex)) {\n this.handleChange({ hex, source: 'hex' }, $event);\n }\n }\n handleValueChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [CircleComponent, CircleSwatchComponent],\n exports: [CircleComponent, CircleSwatchComponent],\n imports: [CommonModule, SwatchModule],\n})\nexport class ColorCircleModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
1
|
+
{"version":3,"file":"ngx-color-circle.mjs","sources":["../../src/lib/circle/circle-swatch.component.ts","../../src/lib/circle/circle.component.ts","../../src/lib/circle/ngx-color-circle.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n} from '@angular/core';\n\n@Component({\n selector: 'color-circle-swatch',\n template: `\n <div class=\"circle-swatch\"\n [style.width.px]=\"circleSize\" [style.height.px]=\"circleSize\"\n [style.margin-right.px]=\"circleSpacing\" [style.margin-bottom.px]=\"circleSpacing\"\n >\n <color-swatch\n [color]=\"color\" [style]=\"swatchStyle\" [focus]=\"focus\" [focusStyle]=\"focusStyle\"\n (onClick)=\"handleClick($event)\" (onHover)=\"onSwatchHover.emit($event)\">\n </color-swatch>\n <div class=\"clear\"></div>\n </div>\n `,\n styles: [\n `\n .circle-swatch {\n transform: scale(1);\n transition: transform 100ms ease;\n }\n .circle-swatch:hover {\n transform: scale(1.2);\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class CircleSwatchComponent implements OnChanges {\n @Input() color!: string;\n @Input() circleSize = 28;\n @Input() circleSpacing = 14;\n @Input() focus = false;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n focusStyle: Record<string, string> = {};\n swatchStyle: Record<string, string> = {\n borderRadius: '50%',\n background: 'transparent',\n transition: '100ms box-shadow ease 0s',\n };\n\n ngOnChanges() {\n this.swatchStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}`;\n this.focusStyle.boxShadow = `inset 0 0 0 ${ this.circleSize / 2 }px ${ this.color }, 0 0 5px ${ this.color }`;\n if (this.focus) {\n this.focusStyle.boxShadow = `inset 0 0 0 3px ${ this.color }, 0 0 5px ${ this.color }`;\n }\n }\n handleClick({ hex, $event }) {\n this.onClick.emit({ hex, $event });\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\nimport {\n amber,\n blue,\n blueGrey,\n brown,\n cyan,\n deepOrange,\n deepPurple,\n green,\n indigo,\n lightBlue,\n lightGreen,\n lime,\n orange,\n pink,\n purple,\n red,\n teal,\n yellow,\n} from 'material-colors';\nimport { TinyColor } from '@ctrl/tinycolor';\n\nimport { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';\nimport { CircleSwatchComponent } from './circle-swatch.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-circle',\n template: `\n <div\n class=\"circle-picker {{ className }}\"\n [style.width.px]=\"width\"\n [style.margin-right.px]=\"-circleSpacing\"\n [style.margin-bottom.px]=\"-circleSpacing\"\n >\n <color-circle-swatch\n *ngFor=\"let color of colors\"\n [circleSize]=\"circleSize\"\n [circleSpacing]=\"circleSpacing\"\n [color]=\"color\"\n [focus]=\"isActive(color)\"\n (onClick)=\"handleBlockChange($event)\"\n (onSwatchHover)=\"onSwatchHover.emit($event)\"\n ></color-circle-swatch>\n </div>\n `,\n styles: [\n `\n .circle-picker {\n display: flex;\n flex-wrap: wrap;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CircleComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => CircleComponent),\n },\n ]\n})\nexport class CircleComponent extends ColorWrap {\n /** Pixel value for picker width */\n @Input() width: string | number = 252;\n /** Color squares to display */\n @Input()\n colors: string[] = [\n red['500'],\n pink['500'],\n purple['500'],\n deepPurple['500'],\n indigo['500'],\n blue['500'],\n lightBlue['500'],\n cyan['500'],\n teal['500'],\n green['500'],\n lightGreen['500'],\n lime['500'],\n yellow['500'],\n amber['500'],\n orange['500'],\n deepOrange['500'],\n brown['500'],\n blueGrey['500'],\n ];\n /** Value for circle size */\n @Input() circleSize = 28;\n /** Value for spacing between circles */\n @Input() circleSpacing = 14;\n\n constructor() {\n super();\n }\n isActive(color: string) {\n return new TinyColor(this.hex).equals(color);\n }\n handleBlockChange({ hex, $event }: { hex: string, $event: Event }) {\n if (isValidHex(hex)) {\n this.handleChange({ hex, source: 'hex' }, $event);\n }\n }\n handleValueChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [CircleComponent, CircleSwatchComponent],\n exports: [CircleComponent, CircleSwatchComponent],\n imports: [CommonModule, SwatchModule],\n})\nexport class ColorCircleModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1"],"mappings":"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"}
|