ngx-color 7.2.0 → 7.3.0

package/circle/esm2015/circle.component.js

@@ -1,109 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
-import { amber, blue, blueGrey, brown, cyan, deepOrange, deepPurple, green, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, yellow, } from 'material-colors';
-import { TinyColor } from '@ctrl/tinycolor';
-import { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';
-import { CircleSwatchComponent } from './circle-swatch.component';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-export class CircleComponent extends ColorWrap {
-    constructor() {
-        super();
-        /** Pixel value for picker width */
-        this.width = 252;
-        /** Color squares to display */
-        this.colors = [
-            red['500'],
-            pink['500'],
-            purple['500'],
-            deepPurple['500'],
-            indigo['500'],
-            blue['500'],
-            lightBlue['500'],
-            cyan['500'],
-            teal['500'],
-            green['500'],
-            lightGreen['500'],
-            lime['500'],
-            yellow['500'],
-            amber['500'],
-            orange['500'],
-            deepOrange['500'],
-            brown['500'],
-            blueGrey['500'],
-        ];
-        /** Value for circle size */
-        this.circleSize = 28;
-        /** Value for spacing between circles */
-        this.circleSpacing = 14;
-    }
-    isActive(color) {
-        return new TinyColor(this.hex).equals(color);
-    }
-    handleBlockChange({ hex, $event }) {
-        if (isValidHex(hex)) {
-            this.handleChange({ hex, source: 'hex' }, $event);
-        }
-    }
-    handleValueChange({ data, $event }) {
-        this.handleChange(data, $event);
-    }
-}
-CircleComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-circle',
-                template: `
-    <div
-      class="circle-picker {{ className }}"
-      [style.width.px]="width"
-      [style.margin-right.px]="-circleSpacing"
-      [style.margin-bottom.px]="-circleSpacing"
-    >
-      <color-circle-swatch
-        *ngFor="let color of colors"
-        [circleSize]="circleSize"
-        [circleSpacing]="circleSpacing"
-        [color]="color"
-        [focus]="isActive(color)"
-        (onClick)="handleBlockChange($event)"
-        (onSwatchHover)="onSwatchHover.emit($event)"
-      ></color-circle-swatch>
-    </div>
-  `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false,
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => CircleComponent),
-                        multi: true,
-                    },
-                    {
-                        provide: ColorWrap,
-                        useExisting: forwardRef(() => CircleComponent),
-                    },
-                ],
-                styles: [`
-      .circle-picker {
-        display: flex;
-        flex-wrap: wrap;
-      }
-    `]
-            },] }
-];
-CircleComponent.ctorParameters = () => [];
-CircleComponent.propDecorators = {
-    width: [{ type: Input }],
-    colors: [{ type: Input }],
-    circleSize: [{ type: Input }],
-    circleSpacing: [{ type: Input }]
-};
-export class ColorCircleModule {
-}
-ColorCircleModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [CircleComponent, CircleSwatchComponent],
-                exports: [CircleComponent, CircleSwatchComponent],
-                imports: [CommonModule, SwatchModule],
-            },] }
-];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2lyY2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9jaXJjbGUvY2lyY2xlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRyxPQUFPLEVBQ0wsS0FBSyxFQUNMLElBQUksRUFDSixRQUFRLEVBQ1IsS0FBSyxFQUNMLElBQUksRUFDSixVQUFVLEVBQ1YsVUFBVSxFQUNWLEtBQUssRUFDTCxNQUFNLEVBQ04sU0FBUyxFQUNULFVBQVUsRUFDVixJQUFJLEVBQ0osTUFBTSxFQUNOLElBQUksRUFDSixNQUFNLEVBQ04sR0FBRyxFQUNILElBQUksRUFDSixNQUFNLEdBQ1AsTUFBTSxpQkFBaUIsQ0FBQztBQUN6QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFNUMsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBNENuRCxNQUFNLE9BQU8sZUFBZ0IsU0FBUSxTQUFTO0lBOEI1QztRQUNFLEtBQUssRUFBRSxDQUFDO1FBOUJWLG1DQUFtQztRQUMxQixVQUFLLEdBQW9CLEdBQUcsQ0FBQztRQUN0QywrQkFBK0I7UUFFL0IsV0FBTSxHQUFhO1lBQ2pCLEdBQUcsQ0FBQyxLQUFLLENBQUM7WUFDVixJQUFJLENBQUMsS0FBSyxDQUFDO1lBQ1gsTUFBTSxDQUFDLEtBQUssQ0FBQztZQUNiLFVBQVUsQ0FBQyxLQUFLLENBQUM7WUFDakIsTUFBTSxDQUFDLEtBQUssQ0FBQztZQUNiLElBQUksQ0FBQyxLQUFLLENBQUM7WUFDWCxTQUFTLENBQUMsS0FBSyxDQUFDO1lBQ2hCLElBQUksQ0FBQyxLQUFLLENBQUM7WUFDWCxJQUFJLENBQUMsS0FBSyxDQUFDO1lBQ1gsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUNaLFVBQVUsQ0FBQyxLQUFLLENBQUM7WUFDakIsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUNYLE1BQU0sQ0FBQyxLQUFLLENBQUM7WUFDYixLQUFLLENBQUMsS0FBSyxDQUFDO1lBQ1osTUFBTSxDQUFDLEtBQUssQ0FBQztZQUNiLFVBQVUsQ0FBQyxLQUFLLENBQUM7WUFDakIsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUNaLFFBQVEsQ0FBQyxLQUFLLENBQUM7U0FDaEIsQ0FBQztRQUNGLDRCQUE0QjtRQUNuQixlQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ3pCLHdDQUF3QztRQUMvQixrQkFBYSxHQUFHLEVBQUUsQ0FBQztJQUk1QixDQUFDO0lBQ0QsUUFBUSxDQUFDLEtBQWE7UUFDcEIsT0FBTyxJQUFJLFNBQVMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQy9DLENBQUM7SUFDRCxpQkFBaUIsQ0FBQyxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQWtDO1FBQy9ELElBQUksVUFBVSxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQ25CLElBQUksQ0FBQyxZQUFZLENBQUMsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxFQUFFLE1BQU0sQ0FBQyxDQUFDO1NBQ25EO0lBQ0gsQ0FBQztJQUNELGlCQUFpQixDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRTtRQUNoQyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxNQUFNLENBQUMsQ0FBQztJQUNsQyxDQUFDOzs7WUFyRkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxjQUFjO2dCQUN4QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUJUO2dCQVNELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2dCQUMvQyxtQkFBbUIsRUFBRSxLQUFLO2dCQUMxQixTQUFTLEVBQUU7b0JBQ1Q7d0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjt3QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxlQUFlLENBQUM7d0JBQzlDLEtBQUssRUFBRSxJQUFJO3FCQUNaO29CQUNEO3dCQUNFLE9BQU8sRUFBRSxTQUFTO3dCQUNsQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQztxQkFDL0M7aUJBQ0Y7eUJBbkJDOzs7OztLQUtDO2FBZUo7Ozs7b0JBR0UsS0FBSztxQkFFTCxLQUFLO3lCQXNCTCxLQUFLOzRCQUVMLEtBQUs7O0FBdUJSLE1BQU0sT0FBTyxpQkFBaUI7OztZQUw3QixRQUFRLFNBQUM7Z0JBQ1IsWUFBWSxFQUFFLENBQUMsZUFBZSxFQUFFLHFCQUFxQixDQUFDO2dCQUN0RCxPQUFPLEVBQUUsQ0FBQyxlQUFlLEVBQUUscUJBQXFCLENBQUM7Z0JBQ2pELE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxZQUFZLENBQUM7YUFDdEMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgZm9yd2FyZFJlZiwgSW5wdXQsIE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICBhbWJlcixcbiAgYmx1ZSxcbiAgYmx1ZUdyZXksXG4gIGJyb3duLFxuICBjeWFuLFxuICBkZWVwT3JhbmdlLFxuICBkZWVwUHVycGxlLFxuICBncmVlbixcbiAgaW5kaWdvLFxuICBsaWdodEJsdWUsXG4gIGxpZ2h0R3JlZW4sXG4gIGxpbWUsXG4gIG9yYW5nZSxcbiAgcGluayxcbiAgcHVycGxlLFxuICByZWQsXG4gIHRlYWwsXG4gIHllbGxvdyxcbn0gZnJvbSAnbWF0ZXJpYWwtY29sb3JzJztcbmltcG9ydCB7IFRpbnlDb2xvciB9IGZyb20gJ0BjdHJsL3Rpbnljb2xvcic7XG5cbmltcG9ydCB7IENvbG9yV3JhcCwgaXNWYWxpZEhleCwgU3dhdGNoTW9kdWxlIH0gZnJvbSAnbmd4LWNvbG9yJztcbmltcG9ydCB7IENpcmNsZVN3YXRjaENvbXBvbmVudCB9IGZyb20gJy4vY2lyY2xlLXN3YXRjaC5jb21wb25lbnQnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLWNpcmNsZScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJjaXJjbGUtcGlja2VyIHt7IGNsYXNzTmFtZSB9fVwiXG4gICAgICBbc3R5bGUud2lkdGgucHhdPVwid2lkdGhcIlxuICAgICAgW3N0eWxlLm1hcmdpbi1yaWdodC5weF09XCItY2lyY2xlU3BhY2luZ1wiXG4gICAgICBbc3R5bGUubWFyZ2luLWJvdHRvbS5weF09XCItY2lyY2xlU3BhY2luZ1wiXG4gICAgPlxuICAgICAgPGNvbG9yLWNpcmNsZS1zd2F0Y2hcbiAgICAgICAgKm5nRm9yPVwibGV0IGNvbG9yIG9mIGNvbG9yc1wiXG4gICAgICAgIFtjaXJjbGVTaXplXT1cImNpcmNsZVNpemVcIlxuICAgICAgICBbY2lyY2xlU3BhY2luZ109XCJjaXJjbGVTcGFjaW5nXCJcbiAgICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgW2ZvY3VzXT1cImlzQWN0aXZlKGNvbG9yKVwiXG4gICAgICAgIChvbkNsaWNrKT1cImhhbmRsZUJsb2NrQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAob25Td2F0Y2hIb3Zlcik9XCJvblN3YXRjaEhvdmVyLmVtaXQoJGV2ZW50KVwiXG4gICAgICA+PC9jb2xvci1jaXJjbGUtc3dhdGNoPlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgICAuY2lyY2xlLXBpY2tlciB7XG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgIGZsZXgtd3JhcDogd3JhcDtcbiAgICAgIH1cbiAgICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ2lyY2xlQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gICAge1xuICAgICAgcHJvdmlkZTogQ29sb3JXcmFwLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ2lyY2xlQ29tcG9uZW50KSxcbiAgICB9LFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIENpcmNsZUNvbXBvbmVudCBleHRlbmRzIENvbG9yV3JhcCB7XG4gIC8qKiBQaXhlbCB2YWx1ZSBmb3IgcGlja2VyIHdpZHRoICovXG4gIEBJbnB1dCgpIHdpZHRoOiBzdHJpbmcgfCBudW1iZXIgPSAyNTI7XG4gIC8qKiBDb2xvciBzcXVhcmVzIHRvIGRpc3BsYXkgKi9cbiAgQElucHV0KClcbiAgY29sb3JzOiBzdHJpbmdbXSA9IFtcbiAgICByZWRbJzUwMCddLFxuICAgIHBpbmtbJzUwMCddLFxuICAgIHB1cnBsZVsnNTAwJ10sXG4gICAgZGVlcFB1cnBsZVsnNTAwJ10sXG4gICAgaW5kaWdvWyc1MDAnXSxcbiAgICBibHVlWyc1MDAnXSxcbiAgICBsaWdodEJsdWVbJzUwMCddLFxuICAgIGN5YW5bJzUwMCddLFxuICAgIHRlYWxbJzUwMCddLFxuICAgIGdyZWVuWyc1MDAnXSxcbiAgICBsaWdodEdyZWVuWyc1MDAnXSxcbiAgICBsaW1lWyc1MDAnXSxcbiAgICB5ZWxsb3dbJzUwMCddLFxuICAgIGFtYmVyWyc1MDAnXSxcbiAgICBvcmFuZ2VbJzUwMCddLFxuICAgIGRlZXBPcmFuZ2VbJzUwMCddLFxuICAgIGJyb3duWyc1MDAnXSxcbiAgICBibHVlR3JleVsnNTAwJ10sXG4gIF07XG4gIC8qKiBWYWx1ZSBmb3IgY2lyY2xlIHNpemUgKi9cbiAgQElucHV0KCkgY2lyY2xlU2l6ZSA9IDI4O1xuICAvKiogVmFsdWUgZm9yIHNwYWNpbmcgYmV0d2VlbiBjaXJjbGVzICovXG4gIEBJbnB1dCgpIGNpcmNsZVNwYWNpbmcgPSAxNDtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG4gIGlzQWN0aXZlKGNvbG9yOiBzdHJpbmcpIHtcbiAgICByZXR1cm4gbmV3IFRpbnlDb2xvcih0aGlzLmhleCkuZXF1YWxzKGNvbG9yKTtcbiAgfVxuICBoYW5kbGVCbG9ja0NoYW5nZSh7IGhleCwgJGV2ZW50IH06IHsgaGV4OiBzdHJpbmcsICRldmVudDogRXZlbnQgfSkge1xuICAgIGlmIChpc1ZhbGlkSGV4KGhleCkpIHtcbiAgICAgIHRoaXMuaGFuZGxlQ2hhbmdlKHsgaGV4LCBzb3VyY2U6ICdoZXgnIH0sICRldmVudCk7XG4gICAgfVxuICB9XG4gIGhhbmRsZVZhbHVlQ2hhbmdlKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLmhhbmRsZUNoYW5nZShkYXRhLCAkZXZlbnQpO1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW0NpcmNsZUNvbXBvbmVudCwgQ2lyY2xlU3dhdGNoQ29tcG9uZW50XSxcbiAgZXhwb3J0czogW0NpcmNsZUNvbXBvbmVudCwgQ2lyY2xlU3dhdGNoQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgU3dhdGNoTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JDaXJjbGVNb2R1bGUge31cbiJdfQ==

package/circle/esm2015/ngx-color-circle.js

@@ -1,6 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './circle.component';
-export { CircleSwatchComponent as ɵa } from './circle-swatch.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLWNpcmNsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9jaXJjbGUvbmd4LWNvbG9yLWNpcmNsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsb0JBQW9CLENBQUM7QUFFbkMsT0FBTyxFQUFDLHFCQUFxQixJQUFJLEVBQUUsRUFBQyxNQUFNLDJCQUEyQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2NpcmNsZS5jb21wb25lbnQnO1xuXG5leHBvcnQge0NpcmNsZVN3YXRjaENvbXBvbmVudCBhcyDJtWF9IGZyb20gJy4vY2lyY2xlLXN3YXRjaC5jb21wb25lbnQnOyJdfQ==

package/circle/fesm2015/ngx-color-circle.js

@@ -1,177 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
-import { red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, lightGreen, lime, yellow, amber, orange, deepOrange, brown, blueGrey } from 'material-colors';
-import { TinyColor } from '@ctrl/tinycolor';
-import { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-
-class CircleSwatchComponent {
-    constructor() {
-        this.circleSize = 28;
-        this.circleSpacing = 14;
-        this.focus = false;
-        this.onClick = new EventEmitter();
-        this.onSwatchHover = new EventEmitter();
-        this.focusStyle = {};
-        this.swatchStyle = {
-            borderRadius: '50%',
-            background: 'transparent',
-            transition: '100ms box-shadow ease 0s',
-        };
-    }
-    ngOnChanges() {
-        this.swatchStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}`;
-        this.focusStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}, 0 0 5px ${this.color}`;
-        if (this.focus) {
-            this.focusStyle.boxShadow = `inset 0 0 0 3px ${this.color}, 0 0 5px ${this.color}`;
-        }
-    }
-    handleClick({ hex, $event }) {
-        this.onClick.emit({ hex, $event });
-    }
-}
-CircleSwatchComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-circle-swatch',
-                template: `
-  <div class="circle-swatch"
-    [style.width.px]="circleSize" [style.height.px]="circleSize"
-    [style.margin-right.px]="circleSpacing" [style.margin-bottom.px]="circleSpacing"
-    >
-    <color-swatch
-      [color]="color" [style]="swatchStyle" [focus]="focus" [focusStyle]="focusStyle"
-      (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)">
-    </color-swatch>
-    <div class="clear"></div>
-  </div>
-  `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false,
-                styles: [`
-  .circle-swatch {
-    transform: scale(1);
-    transition: transform 100ms ease;
-  }
-  .circle-swatch:hover {
-    transform: scale(1.2);
-  }
-  `]
-            },] }
-];
-CircleSwatchComponent.propDecorators = {
-    color: [{ type: Input }],
-    circleSize: [{ type: Input }],
-    circleSpacing: [{ type: Input }],
-    focus: [{ type: Input }],
-    onClick: [{ type: Output }],
-    onSwatchHover: [{ type: Output }]
-};
-
-class CircleComponent extends ColorWrap {
-    constructor() {
-        super();
-        /** Pixel value for picker width */
-        this.width = 252;
-        /** Color squares to display */
-        this.colors = [
-            red['500'],
-            pink['500'],
-            purple['500'],
-            deepPurple['500'],
-            indigo['500'],
-            blue['500'],
-            lightBlue['500'],
-            cyan['500'],
-            teal['500'],
-            green['500'],
-            lightGreen['500'],
-            lime['500'],
-            yellow['500'],
-            amber['500'],
-            orange['500'],
-            deepOrange['500'],
-            brown['500'],
-            blueGrey['500'],
-        ];
-        /** Value for circle size */
-        this.circleSize = 28;
-        /** Value for spacing between circles */
-        this.circleSpacing = 14;
-    }
-    isActive(color) {
-        return new TinyColor(this.hex).equals(color);
-    }
-    handleBlockChange({ hex, $event }) {
-        if (isValidHex(hex)) {
-            this.handleChange({ hex, source: 'hex' }, $event);
-        }
-    }
-    handleValueChange({ data, $event }) {
-        this.handleChange(data, $event);
-    }
-}
-CircleComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-circle',
-                template: `
-    <div
-      class="circle-picker {{ className }}"
-      [style.width.px]="width"
-      [style.margin-right.px]="-circleSpacing"
-      [style.margin-bottom.px]="-circleSpacing"
-    >
-      <color-circle-swatch
-        *ngFor="let color of colors"
-        [circleSize]="circleSize"
-        [circleSpacing]="circleSpacing"
-        [color]="color"
-        [focus]="isActive(color)"
-        (onClick)="handleBlockChange($event)"
-        (onSwatchHover)="onSwatchHover.emit($event)"
-      ></color-circle-swatch>
-    </div>
-  `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false,
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => CircleComponent),
-                        multi: true,
-                    },
-                    {
-                        provide: ColorWrap,
-                        useExisting: forwardRef(() => CircleComponent),
-                    },
-                ],
-                styles: [`
-      .circle-picker {
-        display: flex;
-        flex-wrap: wrap;
-      }
-    `]
-            },] }
-];
-CircleComponent.ctorParameters = () => [];
-CircleComponent.propDecorators = {
-    width: [{ type: Input }],
-    colors: [{ type: Input }],
-    circleSize: [{ type: Input }],
-    circleSpacing: [{ type: Input }]
-};
-class ColorCircleModule {
-}
-ColorCircleModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [CircleComponent, CircleSwatchComponent],
-                exports: [CircleComponent, CircleSwatchComponent],
-                imports: [CommonModule, SwatchModule],
-            },] }
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { CircleComponent, ColorCircleModule, CircleSwatchComponent as ɵa };
-//# sourceMappingURL=ngx-color-circle.js.map

package/circle/fesm2015/ngx-color-circle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ngx-color-circle.js","sources":["../../../../src/lib/components/circle/circle-swatch.component.ts","../../../../src/lib/components/circle/circle.component.ts","../../../../src/lib/components/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 './circle.component';\n\nexport {CircleSwatchComponent as ɵa} from './circle-swatch.component';"],"names":[],"mappings":";;;;;;;MAqCa,qBAAqB;IA5BlC;QA8BW,eAAU,GAAG,EAAE,CAAC;QAChB,kBAAa,GAAG,EAAE,CAAC;QACnB,UAAK,GAAG,KAAK,CAAC;QACb,YAAO,GAAG,IAAI,YAAY,EAAO,CAAC;QAClC,kBAAa,GAAG,IAAI,YAAY,EAAO,CAAC;QAClD,eAAU,GAA2B,EAAE,CAAC;QACxC,gBAAW,GAA2B;YACpC,YAAY,EAAE,KAAK;YACnB,UAAU,EAAE,aAAa;YACzB,UAAU,EAAE,0BAA0B;SACvC,CAAC;KAYH;IAVC,WAAW;QACT,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,eAAe,IAAI,CAAC,UAAU,GAAG,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;QAClF,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,eAAgB,IAAI,CAAC,UAAU,GAAG,CAAE,MAAO,IAAI,CAAC,KAAM,aAAc,IAAI,CAAC,KAAM,EAAE,CAAC;QAC9G,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,mBAAoB,IAAI,CAAC,KAAM,aAAc,IAAI,CAAC,KAAM,EAAE,CAAC;SACxF;KACF;IACD,WAAW,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE;QACzB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC;KACpC;;;YAnDF,SAAS,SAAC;gBACT,QAAQ,EAAE,qBAAqB;gBAC/B,QAAQ,EAAE;;;;;;;;;;;GAWT;gBAYD,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,mBAAmB,EAAE,KAAK;yBAXxB;;;;;;;;GAQD;aAIF;;;oBAEE,KAAK;yBACL,KAAK;4BACL,KAAK;oBACL,KAAK;sBACL,MAAM;4BACN,MAAM;;;MC2BI,eAAgB,SAAQ,SAAS;IA8B5C;QACE,KAAK,EAAE,CAAC;;QA7BD,UAAK,GAAoB,GAAG,CAAC;;QAGtC,WAAM,GAAa;YACjB,GAAG,CAAC,KAAK,CAAC;YACV,IAAI,CAAC,KAAK,CAAC;YACX,MAAM,CAAC,KAAK,CAAC;YACb,UAAU,CAAC,KAAK,CAAC;YACjB,MAAM,CAAC,KAAK,CAAC;YACb,IAAI,CAAC,KAAK,CAAC;YACX,SAAS,CAAC,KAAK,CAAC;YAChB,IAAI,CAAC,KAAK,CAAC;YACX,IAAI,CAAC,KAAK,CAAC;YACX,KAAK,CAAC,KAAK,CAAC;YACZ,UAAU,CAAC,KAAK,CAAC;YACjB,IAAI,CAAC,KAAK,CAAC;YACX,MAAM,CAAC,KAAK,CAAC;YACb,KAAK,CAAC,KAAK,CAAC;YACZ,MAAM,CAAC,KAAK,CAAC;YACb,UAAU,CAAC,KAAK,CAAC;YACjB,KAAK,CAAC,KAAK,CAAC;YACZ,QAAQ,CAAC,KAAK,CAAC;SAChB,CAAC;;QAEO,eAAU,GAAG,EAAE,CAAC;;QAEhB,kBAAa,GAAG,EAAE,CAAC;KAI3B;IACD,QAAQ,CAAC,KAAa;QACpB,OAAO,IAAI,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAC9C;IACD,iBAAiB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAkC;QAC/D,IAAI,UAAU,CAAC,GAAG,CAAC,EAAE;YACnB,IAAI,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,CAAC,CAAC;SACnD;KACF;IACD,iBAAiB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;QAChC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;KACjC;;;YArFF,SAAS,SAAC;gBACT,QAAQ,EAAE,cAAc;gBACxB,QAAQ,EAAE;;;;;;;;;;;;;;;;;GAiBT;gBASD,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,mBAAmB,EAAE,KAAK;gBAC1B,SAAS,EAAE;oBACT;wBACE,OAAO,EAAE,iBAAiB;wBAC1B,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;wBAC9C,KAAK,EAAE,IAAI;qBACZ;oBACD;wBACE,OAAO,EAAE,SAAS;wBAClB,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;qBAC/C;iBACF;yBAnBC;;;;;KAKC;aAeJ;;;;oBAGE,KAAK;qBAEL,KAAK;yBAsBL,KAAK;4BAEL,KAAK;;MAuBK,iBAAiB;;;YAL7B,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,eAAe,EAAE,qBAAqB,CAAC;gBACtD,OAAO,EAAE,CAAC,eAAe,EAAE,qBAAqB,CAAC;gBACjD,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;aACtC;;;ACxHD;;;;;;"}

package/circle/ngx-color-circle.metadata.json

@@ -1 +0,0 @@
-{"__symbolic":"module","version":4,"metadata":{"CircleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":70,"character":37},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"color-circle","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  ","styles":["\n      .circle-picker {\n        display: flex;\n        flex-wrap: wrap;\n      }\n    "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":56,"character":19},"member":"OnPush"},"preserveWhitespaces":false,"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":60,"character":15},"useExisting":{"__symbolic":"reference","name":"CircleComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":65,"character":15},"useExisting":{"__symbolic":"reference","name":"CircleComponent"}}]}]}],"members":{"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}}]}],"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"circleSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"circleSpacing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"isActive":[{"__symbolic":"method"}],"handleBlockChange":[{"__symbolic":"method"}],"handleValueChange":[{"__symbolic":"method"}]}},"ColorCircleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":116,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CircleComponent"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"CircleComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":119,"character":12},{"__symbolic":"reference","module":"ngx-color","name":"SwatchModule","line":119,"character":26}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"color-circle-swatch","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  ","styles":["\n  .circle-swatch {\n    transform: scale(1);\n    transition: transform 100ms ease;\n  }\n  .circle-swatch:hover {\n    transform: scale(1.2);\n  }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":34,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"circleSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"circleSpacing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":3}}]}],"onSwatchHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":3}}]}],"ngOnChanges":[{"__symbolic":"method"}],"handleClick":[{"__symbolic":"method"}]}}},"origins":{"CircleComponent":"./circle.component","ColorCircleModule":"./circle.component","ɵa":"./circle-swatch.component"},"importAs":"ngx-color/circle"}