ngx-color 8.0.3 → 10.0.0

package/fesm2022/ngx-color-circle.mjs

@@ -0,0 +1,223 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
+import * as i1 from 'ngx-color';
+import { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';
+import { CommonModule } from '@angular/common';
+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 { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class CircleSwatchComponent {
+    color;
+    circleSize = 28;
+    circleSpacing = 14;
+    focus = false;
+    onClick = new EventEmitter();
+    onSwatchHover = new EventEmitter();
+    focusStyle = {};
+    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 });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CircleSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: CircleSwatchComponent, isStandalone: false, selector: "color-circle-swatch", inputs: { color: "color", circleSize: "circleSize", circleSpacing: "circleSpacing", focus: "focus" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, usesOnChanges: true, ngImport: i0, 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>
+  `, 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: 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, standalone: false, styles: [".circle-swatch{transform:scale(1);transition:transform .1s ease}.circle-swatch:hover{transform:scale(1.2)}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], circleSize: [{
+                type: Input
+            }], circleSpacing: [{
+                type: Input
+            }], focus: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+
+class CircleComponent extends ColorWrap {
+    /** Pixel value for picker width */
+    width = 252;
+    /** Color squares to display */
+    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 */
+    circleSize = 28;
+    /** Value for spacing between circles */
+    circleSpacing = 14;
+    constructor() {
+        super();
+    }
+    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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: CircleComponent, isStandalone: false, selector: "color-circle", inputs: { width: "width", colors: "colors", circleSize: "circleSize", circleSpacing: "circleSpacing" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CircleComponent),
+                multi: true,
+            },
+            {
+                provide: ColorWrap,
+                useExisting: forwardRef(() => CircleComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <div
+      class="circle-picker {{ className }}"
+      [style.width.px]="width"
+      [style.margin-right.px]="-circleSpacing"
+      [style.margin-bottom.px]="-circleSpacing"
+    >
+      @for (color of colors; track color) {
+        <color-circle-swatch
+          [circleSize]="circleSize"
+          [circleSpacing]="circleSpacing"
+          [color]="color"
+          [focus]="isActive(color)"
+          (onClick)="handleBlockChange($event)"
+          (onSwatchHover)="onSwatchHover.emit($event)"
+        ></color-circle-swatch>
+      }
+    </div>
+  `, isInline: true, styles: [".circle-picker{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => CircleSwatchComponent), selector: "color-circle-swatch", inputs: ["color", "circleSize", "circleSpacing", "focus"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: 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"
+    >
+      @for (color of colors; track color) {
+        <color-circle-swatch
+          [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),
+                        },
+                    ], standalone: false, styles: [".circle-picker{display:flex;flex-wrap:wrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { width: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }], circleSize: [{
+                type: Input
+            }], circleSpacing: [{
+                type: Input
+            }] } });
+class ColorCircleModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ColorCircleModule, declarations: [CircleComponent, CircleSwatchComponent], imports: [CommonModule, SwatchModule], exports: [CircleComponent, CircleSwatchComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorCircleModule, imports: [CommonModule, SwatchModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorCircleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CircleComponent, CircleSwatchComponent],
+                    exports: [CircleComponent, CircleSwatchComponent],
+                    imports: [CommonModule, SwatchModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CircleComponent, CircleSwatchComponent, ColorCircleModule };
+//# sourceMappingURL=ngx-color-circle.mjs.map

package/fesm2022/ngx-color-circle.mjs.map

@@ -0,0 +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\n      class=\"circle-swatch\"\n      [style.width.px]=\"circleSize\"\n      [style.height.px]=\"circleSize\"\n      [style.margin-right.px]=\"circleSpacing\"\n      [style.margin-bottom.px]=\"circleSpacing\"\n    >\n      <color-swatch\n        [color]=\"color\"\n        [style]=\"swatchStyle\"\n        [focus]=\"focus\"\n        [focusStyle]=\"focusStyle\"\n        (onClick)=\"handleClick($event)\"\n        (onHover)=\"onSwatchHover.emit($event)\"\n      >\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  standalone: 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      @for (color of colors; track color) {\n        <color-circle-swatch\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      }\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  standalone: false,\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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"}

package/fesm2022/ngx-color-compact.mjs

@@ -0,0 +1,403 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
+import * as i1 from 'ngx-color';
+import { getContrastingColor, isValidHex, ColorWrap, EditableInputModule, SwatchModule, RaisedModule } from 'ngx-color';
+import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class CompactColorComponent {
+    color;
+    active;
+    onClick = new EventEmitter();
+    onSwatchHover = new EventEmitter();
+    swatchStyle = {
+        width: '15px',
+        height: '15px',
+        float: 'left',
+        marginRight: '5px',
+        marginBottom: '5px',
+        position: 'relative',
+        cursor: 'pointer',
+    };
+    swatchFocus = {};
+    getContrastingColor = getContrastingColor;
+    ngOnChanges() {
+        this.swatchStyle.background = this.color;
+        this.swatchFocus.boxShadow = `0 0 4px ${this.color}`;
+        if (this.color.toLowerCase() === '#ffffff') {
+            this.swatchStyle.boxShadow = 'inset 0 0 0 1px #ddd';
+        }
+    }
+    handleClick({ hex, $event }) {
+        this.onClick.emit({ hex, $event });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CompactColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: CompactColorComponent, isStandalone: false, selector: "color-compact-color", inputs: { color: "color", active: "active" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="compact-color">
+      <color-swatch
+        class="swatch"
+        [color]="color"
+        [style]="swatchStyle"
+        [focusStyle]="swatchFocus"
+        (onClick)="handleClick($event)"
+        (onHover)="onSwatchHover.emit($event)"
+      >
+        <div
+          class="compact-dot"
+          [class.active]="active"
+          [style.background]="getContrastingColor(color)"
+        ></div>
+      </color-swatch>
+    </div>
+  `, isInline: true, styles: [".compact-dot{position:absolute;inset:5px;border-radius:50%;opacity:0}.compact-dot.active{opacity:1}\n"], dependencies: [{ kind: "component", type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CompactColorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-compact-color', template: `
+    <div class="compact-color">
+      <color-swatch
+        class="swatch"
+        [color]="color"
+        [style]="swatchStyle"
+        [focusStyle]="swatchFocus"
+        (onClick)="handleClick($event)"
+        (onHover)="onSwatchHover.emit($event)"
+      >
+        <div
+          class="compact-dot"
+          [class.active]="active"
+          [style.background]="getContrastingColor(color)"
+        ></div>
+      </color-swatch>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: false, styles: [".compact-dot{position:absolute;inset:5px;border-radius:50%;opacity:0}.compact-dot.active{opacity:1}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+
+class CompactFieldsComponent {
+    hex;
+    rgb;
+    onChange = new EventEmitter();
+    HEXWrap = {
+        marginTop: '-3px',
+        marginBottom: '-3px',
+        // flex: '6 1 0%',
+        position: 'relative',
+    };
+    HEXinput = {
+        width: '80%',
+        padding: '0px',
+        paddingLeft: '20%',
+        border: 'none',
+        outline: 'none',
+        background: 'none',
+        fontSize: '12px',
+        color: '#333',
+        height: '16px',
+    };
+    HEXlabel = {
+        display: 'none',
+    };
+    RGBwrap = {
+        marginTop: '-3px',
+        marginBottom: '-3px',
+        // flex: '3 1 0%',
+        position: 'relative',
+    };
+    RGBinput = {
+        width: '80%',
+        padding: '0px',
+        paddingLeft: '30%',
+        border: 'none',
+        outline: 'none',
+        background: 'none',
+        fontSize: '12px',
+        color: '#333',
+        height: '16px',
+    };
+    RGBlabel = {
+        position: 'absolute',
+        top: '6px',
+        left: '0px',
+        'line-height': '16px',
+        'text-transform': 'uppercase',
+        fontSize: '12px',
+        color: '#999',
+    };
+    handleChange({ data, $event }) {
+        if (data.hex) {
+            if (isValidHex(data.hex)) {
+                this.onChange.emit({
+                    data: {
+                        hex: data.hex,
+                        source: 'hex',
+                    },
+                    $event,
+                });
+            }
+        }
+        else {
+            this.onChange.emit({
+                data: {
+                    r: data.r || this.rgb.r,
+                    g: data.g || this.rgb.g,
+                    b: data.b || this.rgb.b,
+                    source: 'rgb',
+                },
+                $event,
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CompactFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: CompactFieldsComponent, isStandalone: false, selector: "color-compact-fields", inputs: { hex: "hex", rgb: "rgb" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+    <div class="compact-fields">
+      <div class="compact-active" [style.background]="hex"></div>
+      <div style="flex: 6 1 0%;">
+        <color-editable-input
+          [style]="{ wrap: HEXWrap, input: HEXinput, label: HEXlabel }"
+          label="hex"
+          [value]="hex"
+          (onChange)="handleChange($event)"
+        ></color-editable-input>
+      </div>
+      <div style="flex: 3 1 0%">
+        <color-editable-input
+          [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+          label="r"
+          [value]="rgb.r"
+          (onChange)="handleChange($event)"
+        ></color-editable-input>
+      </div>
+      <div style="flex: 3 1 0%">
+        <color-editable-input
+          [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+          label="g"
+          [value]="rgb.g"
+          (onChange)="handleChange($event)"
+        ></color-editable-input>
+      </div>
+      <div style="flex: 3 1 0%">
+        <color-editable-input
+          [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+          label="b"
+          [value]="rgb.b"
+          (onChange)="handleChange($event)"
+        ></color-editable-input>
+      </div>
+    </div>
+  `, isInline: true, styles: [".compact-fields{display:flex;padding-bottom:6px;padding-right:5px;position:relative}.compact-active{position:absolute;top:6px;left:5px;height:9px;width:9px}\n"], dependencies: [{ kind: "component", type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CompactFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-compact-fields', template: `
+    <div class="compact-fields">
+      <div class="compact-active" [style.background]="hex"></div>
+      <div style="flex: 6 1 0%;">
+        <color-editable-input
+          [style]="{ wrap: HEXWrap, input: HEXinput, label: HEXlabel }"
+          label="hex"
+          [value]="hex"
+          (onChange)="handleChange($event)"
+        ></color-editable-input>
+      </div>
+      <div style="flex: 3 1 0%">
+        <color-editable-input
+          [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+          label="r"
+          [value]="rgb.r"
+          (onChange)="handleChange($event)"
+        ></color-editable-input>
+      </div>
+      <div style="flex: 3 1 0%">
+        <color-editable-input
+          [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+          label="g"
+          [value]="rgb.g"
+          (onChange)="handleChange($event)"
+        ></color-editable-input>
+      </div>
+      <div style="flex: 3 1 0%">
+        <color-editable-input
+          [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+          label="b"
+          [value]="rgb.b"
+          (onChange)="handleChange($event)"
+        ></color-editable-input>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: false, styles: [".compact-fields{display:flex;padding-bottom:6px;padding-right:5px;position:relative}.compact-active{position:absolute;top:6px;left:5px;height:9px;width:9px}\n"] }]
+        }], propDecorators: { hex: [{
+                type: Input
+            }], rgb: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
+class CompactComponent extends ColorWrap {
+    /** Color squares to display */
+    colors = [
+        '#4D4D4D',
+        '#999999',
+        '#FFFFFF',
+        '#F44E3B',
+        '#FE9200',
+        '#FCDC00',
+        '#DBDF00',
+        '#A4DD00',
+        '#68CCCA',
+        '#73D8FF',
+        '#AEA1FF',
+        '#FDA1FF',
+        '#333333',
+        '#808080',
+        '#cccccc',
+        '#D33115',
+        '#E27300',
+        '#FCC400',
+        '#B0BC00',
+        '#68BC00',
+        '#16A5A5',
+        '#009CE0',
+        '#7B64FF',
+        '#FA28FF',
+        '#000000',
+        '#666666',
+        '#B3B3B3',
+        '#9F0500',
+        '#C45100',
+        '#FB9E00',
+        '#808900',
+        '#194D33',
+        '#0C797D',
+        '#0062B1',
+        '#653294',
+        '#AB149E',
+    ];
+    zDepth = 1;
+    radius = 1;
+    background = '#fff';
+    disableAlpha = true;
+    constructor() {
+        super();
+    }
+    handleBlockChange({ hex, $event }) {
+        if (isValidHex(hex)) {
+            this.handleChange({ hex, source: 'hex' }, $event);
+        }
+    }
+    handleValueChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CompactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: CompactComponent, isStandalone: false, selector: "color-compact", inputs: { colors: "colors", zDepth: "zDepth", radius: "radius", background: "background" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CompactComponent),
+                multi: true,
+            },
+            {
+                provide: ColorWrap,
+                useExisting: forwardRef(() => CompactComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <color-raised
+      class="color-compact"
+      [zDepth]="zDepth"
+      [background]="background"
+      [radius]="radius"
+    >
+      <div class="compact-picker {{ className }}">
+        <div>
+          @for (color of colors; track color) {
+            <color-compact-color
+              [color]="color"
+              [active]="color.toLowerCase() === hex.toLowerCase()"
+              (onClick)="handleBlockChange($event)"
+            ></color-compact-color>
+          }
+          <div class="compact-clear"></div>
+        </div>
+        <color-compact-fields
+          [hex]="hex"
+          [rgb]="rgb"
+          (onChange)="handleValueChange($event)"
+        ></color-compact-fields>
+      </div>
+    </color-raised>
+  `, isInline: true, styles: [".color-compact{background:#f6f6f6;radius:4px}.compact-picker{padding-top:5px;padding-left:5px;box-sizing:border-box;width:245px}.compact-clear{clear:both}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => i1.RaisedComponent), selector: "color-raised", inputs: ["zDepth", "radius", "background"] }, { kind: "component", type: i0.forwardRef(() => CompactColorComponent), selector: "color-compact-color", inputs: ["color", "active"], outputs: ["onClick", "onSwatchHover"] }, { kind: "component", type: i0.forwardRef(() => CompactFieldsComponent), selector: "color-compact-fields", inputs: ["hex", "rgb"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: CompactComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-compact', template: `
+    <color-raised
+      class="color-compact"
+      [zDepth]="zDepth"
+      [background]="background"
+      [radius]="radius"
+    >
+      <div class="compact-picker {{ className }}">
+        <div>
+          @for (color of colors; track color) {
+            <color-compact-color
+              [color]="color"
+              [active]="color.toLowerCase() === hex.toLowerCase()"
+              (onClick)="handleBlockChange($event)"
+            ></color-compact-color>
+          }
+          <div class="compact-clear"></div>
+        </div>
+        <color-compact-fields
+          [hex]="hex"
+          [rgb]="rgb"
+          (onChange)="handleValueChange($event)"
+        ></color-compact-fields>
+      </div>
+    </color-raised>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CompactComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => CompactComponent),
+                        },
+                    ], standalone: false, styles: [".color-compact{background:#f6f6f6;radius:4px}.compact-picker{padding-top:5px;padding-left:5px;box-sizing:border-box;width:245px}.compact-clear{clear:both}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { colors: [{
+                type: Input
+            }], zDepth: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }] } });
+class ColorCompactModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorCompactModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ColorCompactModule, declarations: [CompactComponent, CompactColorComponent, CompactFieldsComponent], imports: [CommonModule, EditableInputModule, SwatchModule, RaisedModule], exports: [CompactComponent, CompactColorComponent, CompactFieldsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorCompactModule, imports: [CommonModule, EditableInputModule, SwatchModule, RaisedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorCompactModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CompactComponent, CompactColorComponent, CompactFieldsComponent],
+                    exports: [CompactComponent, CompactColorComponent, CompactFieldsComponent],
+                    imports: [CommonModule, EditableInputModule, SwatchModule, RaisedModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorCompactModule, CompactColorComponent, CompactComponent, CompactFieldsComponent };
+//# sourceMappingURL=ngx-color-compact.mjs.map