ngx-color 8.0.3 → 10.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-compact.mjs","sources":["../../src/lib/compact/compact-color.component.ts","../../src/lib/compact/compact-fields.component.ts","../../src/lib/compact/compact.component.ts","../../src/lib/compact/ngx-color-compact.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n} from '@angular/core';\n\nimport { getContrastingColor } from 'ngx-color';\n\n@Component({\n  selector: 'color-compact-color',\n  template: `\n    <div class=\"compact-color\">\n      <color-swatch\n        class=\"swatch\"\n        [color]=\"color\"\n        [style]=\"swatchStyle\"\n        [focusStyle]=\"swatchFocus\"\n        (onClick)=\"handleClick($event)\"\n        (onHover)=\"onSwatchHover.emit($event)\"\n      >\n        <div\n          class=\"compact-dot\"\n          [class.active]=\"active\"\n          [style.background]=\"getContrastingColor(color)\"\n        ></div>\n      </color-swatch>\n    </div>\n  `,\n  styles: [\n    `\n      .compact-dot {\n        position: absolute;\n        top: 5px;\n        right: 5px;\n        bottom: 5px;\n        left: 5px;\n        border-radius: 50%;\n        opacity: 0;\n      }\n      .compact-dot.active {\n        opacity: 1;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  standalone: false,\n})\nexport class CompactColorComponent implements OnChanges {\n  @Input() color!: string;\n  @Input() active!: boolean;\n  @Output() onClick = new EventEmitter<any>();\n  @Output() onSwatchHover = new EventEmitter<any>();\n  swatchStyle: Record<string, string> = {\n    width: '15px',\n    height: '15px',\n    float: 'left',\n    marginRight: '5px',\n    marginBottom: '5px',\n    position: 'relative',\n    cursor: 'pointer',\n  };\n  swatchFocus: Record<string, string> = {};\n  getContrastingColor = getContrastingColor;\n\n  ngOnChanges() {\n    this.swatchStyle.background = this.color;\n    this.swatchFocus.boxShadow = `0 0 4px ${this.color}`;\n    if (this.color.toLowerCase() === '#ffffff') {\n      this.swatchStyle.boxShadow = 'inset 0 0 0 1px #ddd';\n    }\n  }\n  handleClick({ hex, $event }) {\n    this.onClick.emit({ hex, $event });\n  }\n}\n","import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\nimport { isValidHex, RGBA } from 'ngx-color';\n\n@Component({\n  selector: 'color-compact-fields',\n  template: `\n    <div class=\"compact-fields\">\n      <div class=\"compact-active\" [style.background]=\"hex\"></div>\n      <div style=\"flex: 6 1 0%;\">\n        <color-editable-input\n          [style]=\"{ wrap: HEXWrap, input: HEXinput, label: HEXlabel }\"\n          label=\"hex\"\n          [value]=\"hex\"\n          (onChange)=\"handleChange($event)\"\n        ></color-editable-input>\n      </div>\n      <div style=\"flex: 3 1 0%\">\n        <color-editable-input\n          [style]=\"{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }\"\n          label=\"r\"\n          [value]=\"rgb.r\"\n          (onChange)=\"handleChange($event)\"\n        ></color-editable-input>\n      </div>\n      <div style=\"flex: 3 1 0%\">\n        <color-editable-input\n          [style]=\"{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }\"\n          label=\"g\"\n          [value]=\"rgb.g\"\n          (onChange)=\"handleChange($event)\"\n        ></color-editable-input>\n      </div>\n      <div style=\"flex: 3 1 0%\">\n        <color-editable-input\n          [style]=\"{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }\"\n          label=\"b\"\n          [value]=\"rgb.b\"\n          (onChange)=\"handleChange($event)\"\n        ></color-editable-input>\n      </div>\n    </div>\n  `,\n  styles: [\n    `\n      .compact-fields {\n        display: flex;\n        padding-bottom: 6px;\n        padding-right: 5px;\n        position: relative;\n      }\n      .compact-active {\n        position: absolute;\n        top: 6px;\n        left: 5px;\n        height: 9px;\n        width: 9px;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  standalone: false,\n})\nexport class CompactFieldsComponent {\n  @Input() hex!: string;\n  @Input() rgb!: RGBA;\n  @Output() onChange = new EventEmitter<any>();\n  HEXWrap: { [key: string]: string } = {\n    marginTop: '-3px',\n    marginBottom: '-3px',\n    // flex: '6 1 0%',\n    position: 'relative',\n  };\n  HEXinput: { [key: string]: string } = {\n    width: '80%',\n    padding: '0px',\n    paddingLeft: '20%',\n    border: 'none',\n    outline: 'none',\n    background: 'none',\n    fontSize: '12px',\n    color: '#333',\n    height: '16px',\n  };\n  HEXlabel: { [key: string]: string } = {\n    display: 'none',\n  };\n  RGBwrap: { [key: string]: string } = {\n    marginTop: '-3px',\n    marginBottom: '-3px',\n    // flex: '3 1 0%',\n    position: 'relative',\n  };\n  RGBinput: { [key: string]: string } = {\n    width: '80%',\n    padding: '0px',\n    paddingLeft: '30%',\n    border: 'none',\n    outline: 'none',\n    background: 'none',\n    fontSize: '12px',\n    color: '#333',\n    height: '16px',\n  };\n  RGBlabel: { [key: string]: string } = {\n    position: 'absolute',\n    top: '6px',\n    left: '0px',\n    'line-height': '16px',\n    'text-transform': 'uppercase',\n    fontSize: '12px',\n    color: '#999',\n  };\n\n  handleChange({ data, $event }) {\n    if (data.hex) {\n      if (isValidHex(data.hex)) {\n        this.onChange.emit({\n          data: {\n            hex: data.hex,\n            source: 'hex',\n          },\n          $event,\n        });\n      }\n    } else {\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    }\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport {\n  ColorWrap,\n  EditableInputModule,\n  isValidHex,\n  RaisedModule,\n  SwatchModule,\n  zDepth,\n} from 'ngx-color';\nimport { CompactColorComponent } from './compact-color.component';\nimport { CompactFieldsComponent } from './compact-fields.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-compact',\n  template: `\n    <color-raised\n      class=\"color-compact\"\n      [zDepth]=\"zDepth\"\n      [background]=\"background\"\n      [radius]=\"radius\"\n    >\n      <div class=\"compact-picker {{ className }}\">\n        <div>\n          @for (color of colors; track color) {\n            <color-compact-color\n              [color]=\"color\"\n              [active]=\"color.toLowerCase() === hex.toLowerCase()\"\n              (onClick)=\"handleBlockChange($event)\"\n            ></color-compact-color>\n          }\n          <div class=\"compact-clear\"></div>\n        </div>\n        <color-compact-fields\n          [hex]=\"hex\"\n          [rgb]=\"rgb\"\n          (onChange)=\"handleValueChange($event)\"\n        ></color-compact-fields>\n      </div>\n    </color-raised>\n  `,\n  styles: [\n    `\n      .color-compact {\n        background: #f6f6f6;\n        radius: 4px;\n      }\n      .compact-picker {\n        padding-top: 5px;\n        padding-left: 5px;\n        box-sizing: border-box;\n        width: 245px;\n      }\n      .compact-clear {\n        clear: both;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => CompactComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => CompactComponent),\n    },\n  ],\n  standalone: false,\n})\nexport class CompactComponent extends ColorWrap {\n  /** Color squares to display */\n  @Input() colors = [\n    '#4D4D4D',\n    '#999999',\n    '#FFFFFF',\n    '#F44E3B',\n    '#FE9200',\n    '#FCDC00',\n    '#DBDF00',\n    '#A4DD00',\n    '#68CCCA',\n    '#73D8FF',\n    '#AEA1FF',\n    '#FDA1FF',\n    '#333333',\n    '#808080',\n    '#cccccc',\n    '#D33115',\n    '#E27300',\n    '#FCC400',\n    '#B0BC00',\n    '#68BC00',\n    '#16A5A5',\n    '#009CE0',\n    '#7B64FF',\n    '#FA28FF',\n    '#000000',\n    '#666666',\n    '#B3B3B3',\n    '#9F0500',\n    '#C45100',\n    '#FB9E00',\n    '#808900',\n    '#194D33',\n    '#0C797D',\n    '#0062B1',\n    '#653294',\n    '#AB149E',\n  ];\n  @Input() zDepth: zDepth = 1;\n  @Input() radius = 1;\n  @Input() background = '#fff';\n  disableAlpha = true;\n\n  constructor() {\n    super();\n  }\n  handleBlockChange({ hex, $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: [CompactComponent, CompactColorComponent, CompactFieldsComponent],\n  exports: [CompactComponent, CompactColorComponent, CompactFieldsComponent],\n  imports: [CommonModule, EditableInputModule, SwatchModule, RaisedModule],\n})\nexport class ColorCompactModule {}\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-github.mjs

@@ -0,0 +1,167 @@
+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 { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class GithubSwatchComponent {
+    color;
+    onClick = new EventEmitter();
+    onSwatchHover = new EventEmitter();
+    focusStyle = {
+        position: 'relative',
+        'z-index': '2',
+        outline: '2px solid #fff',
+        'box-shadow': '0 0 5px 2px rgba(0,0,0,0.25)',
+    };
+    handleClick({ hex, $event }) {
+        this.onClick.emit({ hex, $event });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: GithubSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: GithubSwatchComponent, isStandalone: false, selector: "color-github-swatch", inputs: { color: "color" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
+    <div class="github-swatch">
+      <color-swatch
+        [color]="color"
+        [focusStyle]="focusStyle"
+        (onClick)="handleClick($event)"
+        (onHover)="onSwatchHover.emit($event)"
+        class="swatch"
+      ></color-swatch>
+      <div class="clear"></div>
+    </div>
+  `, isInline: true, styles: [".github-swatch{width:25px;height:25px;font-size:0}\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: GithubSwatchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-github-swatch', template: `
+    <div class="github-swatch">
+      <color-swatch
+        [color]="color"
+        [focusStyle]="focusStyle"
+        (onClick)="handleClick($event)"
+        (onHover)="onSwatchHover.emit($event)"
+        class="swatch"
+      ></color-swatch>
+      <div class="clear"></div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, standalone: false, styles: [".github-swatch{width:25px;height:25px;font-size:0}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+
+class GithubComponent extends ColorWrap {
+    /** Pixel value for picker width */
+    width = 212;
+    /** Color squares to display */
+    colors = [
+        '#B80000',
+        '#DB3E00',
+        '#FCCB00',
+        '#008B02',
+        '#006B76',
+        '#1273DE',
+        '#004DCF',
+        '#5300EB',
+        '#EB9694',
+        '#FAD0C3',
+        '#FEF3BD',
+        '#C1E1C5',
+        '#BEDADC',
+        '#C4DEF6',
+        '#BED3F3',
+        '#D4C4FB',
+    ];
+    triangle = 'top-left';
+    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: GithubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: GithubComponent, isStandalone: false, selector: "color-github", inputs: { width: "width", colors: "colors", triangle: "triangle" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => GithubComponent),
+                multi: true,
+            },
+            {
+                provide: ColorWrap,
+                useExisting: forwardRef(() => GithubComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <div class="github-picker {{ triangle }}-triangle {{ className }}" [style.width.px]="width">
+      <div class="triangleShadow"></div>
+      <div class="triangle"></div>
+      @for (color of colors; track color) {
+        <color-github-swatch
+          [color]="color"
+          (onClick)="handleBlockChange($event)"
+          (onSwatchHover)="onSwatchHover.emit($event)"
+        ></color-github-swatch>
+      }
+    </div>
+  `, isInline: true, styles: [".github-picker{background:#fff;border:1px solid rgba(0,0,0,.2);box-shadow:#00000026 0 3px 12px;border-radius:4px;position:relative;padding:5px;display:flex;flex-wrap:wrap;box-sizing:border-box}.triangleShadow{position:absolute;border-width:8px;border-style:solid;border-color:transparent transparent rgba(0,0,0,.15);border-image:initial}.triangle{position:absolute;border-width:7px;border-style:solid;border-color:transparent transparent rgb(255,255,255);border-image:initial}.hide-triangle>.triangle{display:none}.hide-triangle>.triangleShadow{display:none}.top-left-triangle>.triangle{top:-14px;left:10px}.top-left-triangle>.triangleShadow{top:-16px;left:9px}.top-right-triangle>.triangle{top:-14px;right:10px}.top-right-triangle>.triangleShadow{top:-16px;right:9px}.bottom-right-triangle>.triangle{top:35px;right:10px;transform:rotate(180deg)}.bottom-right-triangle>.triangleShadow{top:37px;right:9px;transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => GithubSwatchComponent), selector: "color-github-swatch", inputs: ["color"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: GithubComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-github', template: `
+    <div class="github-picker {{ triangle }}-triangle {{ className }}" [style.width.px]="width">
+      <div class="triangleShadow"></div>
+      <div class="triangle"></div>
+      @for (color of colors; track color) {
+        <color-github-swatch
+          [color]="color"
+          (onClick)="handleBlockChange($event)"
+          (onSwatchHover)="onSwatchHover.emit($event)"
+        ></color-github-swatch>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GithubComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => GithubComponent),
+                        },
+                    ], standalone: false, styles: [".github-picker{background:#fff;border:1px solid rgba(0,0,0,.2);box-shadow:#00000026 0 3px 12px;border-radius:4px;position:relative;padding:5px;display:flex;flex-wrap:wrap;box-sizing:border-box}.triangleShadow{position:absolute;border-width:8px;border-style:solid;border-color:transparent transparent rgba(0,0,0,.15);border-image:initial}.triangle{position:absolute;border-width:7px;border-style:solid;border-color:transparent transparent rgb(255,255,255);border-image:initial}.hide-triangle>.triangle{display:none}.hide-triangle>.triangleShadow{display:none}.top-left-triangle>.triangle{top:-14px;left:10px}.top-left-triangle>.triangleShadow{top:-16px;left:9px}.top-right-triangle>.triangle{top:-14px;right:10px}.top-right-triangle>.triangleShadow{top:-16px;right:9px}.bottom-right-triangle>.triangle{top:35px;right:10px;transform:rotate(180deg)}.bottom-right-triangle>.triangleShadow{top:37px;right:9px;transform:rotate(180deg)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { width: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }], triangle: [{
+                type: Input
+            }] } });
+class ColorGithubModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorGithubModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ColorGithubModule, declarations: [GithubComponent, GithubSwatchComponent], imports: [CommonModule, SwatchModule], exports: [GithubComponent, GithubSwatchComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorGithubModule, imports: [CommonModule, SwatchModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorGithubModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GithubComponent, GithubSwatchComponent],
+                    exports: [GithubComponent, GithubSwatchComponent],
+                    imports: [CommonModule, SwatchModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorGithubModule, GithubComponent, GithubSwatchComponent };
+//# sourceMappingURL=ngx-color-github.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-github.mjs","sources":["../../src/lib/github/github-swatch.component.ts","../../src/lib/github/github.component.ts","../../src/lib/github/ngx-color-github.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\n@Component({\n  selector: 'color-github-swatch',\n  template: `\n    <div class=\"github-swatch\">\n      <color-swatch\n        [color]=\"color\"\n        [focusStyle]=\"focusStyle\"\n        (onClick)=\"handleClick($event)\"\n        (onHover)=\"onSwatchHover.emit($event)\"\n        class=\"swatch\"\n      ></color-swatch>\n      <div class=\"clear\"></div>\n    </div>\n  `,\n  styles: [\n    `\n      .github-swatch {\n        width: 25px;\n        height: 25px;\n        font-size: 0;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  standalone: false,\n})\nexport class GithubSwatchComponent {\n  @Input() color!: string;\n  @Output() onClick = new EventEmitter<any>();\n  @Output() onSwatchHover = new EventEmitter<any>();\n  focusStyle = {\n    position: 'relative',\n    'z-index': '2',\n    outline: '2px solid #fff',\n    'box-shadow': '0 0 5px 2px rgba(0,0,0,0.25)',\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';\n\nimport { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';\nimport { GithubSwatchComponent } from './github-swatch.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-github',\n  template: `\n    <div class=\"github-picker {{ triangle }}-triangle {{ className }}\" [style.width.px]=\"width\">\n      <div class=\"triangleShadow\"></div>\n      <div class=\"triangle\"></div>\n      @for (color of colors; track color) {\n        <color-github-swatch\n          [color]=\"color\"\n          (onClick)=\"handleBlockChange($event)\"\n          (onSwatchHover)=\"onSwatchHover.emit($event)\"\n        ></color-github-swatch>\n      }\n    </div>\n  `,\n  styles: [\n    `\n      .github-picker {\n        background: rgb(255, 255, 255);\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 12px;\n        border-radius: 4px;\n        position: relative;\n        padding: 5px;\n        display: flex;\n        flex-wrap: wrap;\n        box-sizing: border-box;\n      }\n      .triangleShadow {\n        position: absolute;\n        border-width: 8px;\n        border-style: solid;\n        border-color: transparent transparent rgba(0, 0, 0, 0.15);\n        border-image: initial;\n      }\n      .triangle {\n        position: absolute;\n        border-width: 7px;\n        border-style: solid;\n        border-color: transparent transparent rgb(255, 255, 255);\n        border-image: initial;\n      }\n      .hide-triangle > .triangle {\n        display: none;\n      }\n      .hide-triangle > .triangleShadow {\n        display: none;\n      }\n      .top-left-triangle > .triangle {\n        top: -14px;\n        left: 10px;\n      }\n      .top-left-triangle > .triangleShadow {\n        top: -16px;\n        left: 9px;\n      }\n      .top-right-triangle > .triangle {\n        top: -14px;\n        right: 10px;\n      }\n      .top-right-triangle > .triangleShadow {\n        top: -16px;\n        right: 9px;\n      }\n      .bottom-right-triangle > .triangle {\n        top: 35px;\n        right: 10px;\n        transform: rotate(180deg);\n      }\n      .bottom-right-triangle > .triangleShadow {\n        top: 37px;\n        right: 9px;\n        transform: rotate(180deg);\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => GithubComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => GithubComponent),\n    },\n  ],\n  standalone: false,\n})\nexport class GithubComponent extends ColorWrap {\n  /** Pixel value for picker width */\n  @Input() width: string | number = 212;\n  /** Color squares to display */\n  @Input() colors = [\n    '#B80000',\n    '#DB3E00',\n    '#FCCB00',\n    '#008B02',\n    '#006B76',\n    '#1273DE',\n    '#004DCF',\n    '#5300EB',\n    '#EB9694',\n    '#FAD0C3',\n    '#FEF3BD',\n    '#C1E1C5',\n    '#BEDADC',\n    '#C4DEF6',\n    '#BED3F3',\n    '#D4C4FB',\n  ];\n  @Input() triangle: 'hide' | 'top-left' | 'top-right' | 'bottom-right' = 'top-left';\n\n  constructor() {\n    super();\n  }\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: [GithubComponent, GithubSwatchComponent],\n  exports: [GithubComponent, GithubSwatchComponent],\n  imports: [CommonModule, SwatchModule],\n})\nexport class ColorGithubModule {}\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-hue.mjs

@@ -0,0 +1,109 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import * as i1 from 'ngx-color';
+import { ColorWrap, toState, HueModule } from 'ngx-color';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class HuePickerComponent extends ColorWrap {
+    /** Pixel value for picker width */
+    width = 316;
+    /** Pixel value for picker height */
+    height = 16;
+    radius = 2;
+    direction = 'horizontal';
+    pointer = {
+        width: '18px',
+        height: '18px',
+        borderRadius: '50%',
+        transform: 'translate(-9px, -2px)',
+        backgroundColor: 'rgb(248, 248, 248)',
+        boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
+    };
+    constructor() {
+        super();
+    }
+    ngOnChanges() {
+        if (this.direction === 'vertical') {
+            this.pointer.transform = 'translate(-3px, -9px)';
+        }
+        this.setState(toState(this.color, this.oldHue));
+    }
+    handlePickerChange({ data, $event }) {
+        this.handleChange({ a: 1, h: data.h, l: 0.5, s: 1 }, $event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HuePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: HuePickerComponent, isStandalone: false, selector: "color-hue-picker", inputs: { width: "width", height: "height", radius: "radius", direction: "direction" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => HuePickerComponent),
+                multi: true,
+            },
+            {
+                provide: ColorWrap,
+                useExisting: forwardRef(() => HuePickerComponent),
+            },
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    <div class="hue-picker {{ className }}" [style.width.px]="width" [style.height.px]="height">
+      <color-hue
+        [hsl]="hsl"
+        [pointer]="pointer"
+        [direction]="direction"
+        [radius]="radius"
+        (onChange)="handlePickerChange($event)"
+      ></color-hue>
+    </div>
+  `, isInline: true, styles: [".hue-picker{position:relative}\n"], dependencies: [{ kind: "component", type: i1.HueComponent, selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HuePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-hue-picker', template: `
+    <div class="hue-picker {{ className }}" [style.width.px]="width" [style.height.px]="height">
+      <color-hue
+        [hsl]="hsl"
+        [pointer]="pointer"
+        [direction]="direction"
+        [radius]="radius"
+        (onChange)="handlePickerChange($event)"
+      ></color-hue>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => HuePickerComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => HuePickerComponent),
+                        },
+                    ], standalone: false, styles: [".hue-picker{position:relative}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }] } });
+class ColorHueModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorHueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ColorHueModule, declarations: [HuePickerComponent], imports: [CommonModule, HueModule], exports: [HuePickerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorHueModule, imports: [CommonModule, HueModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorHueModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [HuePickerComponent],
+                    exports: [HuePickerComponent],
+                    imports: [CommonModule, HueModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorHueModule, HuePickerComponent };
+//# sourceMappingURL=ngx-color-hue.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-hue.mjs","sources":["../../src/lib/hue/hue-picker.component.ts","../../src/lib/hue/ngx-color-hue.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  forwardRef,\n  Input,\n  NgModule,\n  OnChanges,\n} from '@angular/core';\n\nimport { ColorWrap, HueModule, toState } from 'ngx-color';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-hue-picker',\n  template: `\n    <div class=\"hue-picker {{ className }}\" [style.width.px]=\"width\" [style.height.px]=\"height\">\n      <color-hue\n        [hsl]=\"hsl\"\n        [pointer]=\"pointer\"\n        [direction]=\"direction\"\n        [radius]=\"radius\"\n        (onChange)=\"handlePickerChange($event)\"\n      ></color-hue>\n    </div>\n  `,\n  styles: [\n    `\n      .hue-picker {\n        position: relative;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => HuePickerComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => HuePickerComponent),\n    },\n  ],\n  standalone: false,\n})\nexport class HuePickerComponent extends ColorWrap implements OnChanges {\n  /** Pixel value for picker width */\n  @Input() width: string | number = 316;\n  /** Pixel value for picker height */\n  @Input() height: string | number = 16;\n  @Input() radius = 2;\n  @Input() direction: 'horizontal' | 'vertical' = 'horizontal';\n  pointer: { [key: string]: string } = {\n    width: '18px',\n    height: '18px',\n    borderRadius: '50%',\n    transform: 'translate(-9px, -2px)',\n    backgroundColor: 'rgb(248, 248, 248)',\n    boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',\n  };\n\n  constructor() {\n    super();\n  }\n\n  ngOnChanges() {\n    if (this.direction === 'vertical') {\n      this.pointer.transform = 'translate(-3px, -9px)';\n    }\n    this.setState(toState(this.color, this.oldHue));\n  }\n  handlePickerChange({ data, $event }) {\n    this.handleChange({ a: 1, h: data.h, l: 0.5, s: 1 }, $event);\n  }\n}\n\n@NgModule({\n  declarations: [HuePickerComponent],\n  exports: [HuePickerComponent],\n  imports: [CommonModule, HueModule],\n})\nexport class ColorHueModule {}\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-material.mjs

@@ -0,0 +1,209 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import * as i1 from 'ngx-color';
+import { ColorWrap, isValidHex, EditableInputModule, RaisedModule } from 'ngx-color';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class MaterialComponent extends ColorWrap {
+    HEXinput = {
+        width: '100%',
+        marginTop: '12px',
+        fontSize: '15px',
+        color: 'rgb(51, 51, 51)',
+        padding: '0px',
+        'border-width': '0px 0px 2px',
+        outline: 'none',
+        height: '30px',
+    };
+    HEXlabel = {
+        position: 'absolute',
+        top: '0px',
+        left: '0px',
+        fontSize: '11px',
+        color: 'rgb(153, 153, 153)',
+        'text-transform': 'capitalize',
+    };
+    RGBinput = {
+        width: '100%',
+        marginTop: '12px',
+        fontSize: '15px',
+        color: '#333',
+        padding: '0px',
+        border: '0px',
+        'border-bottom': '1px solid #eee',
+        outline: 'none',
+        height: '30px',
+    };
+    RGBlabel = {
+        position: 'absolute',
+        top: '0px',
+        left: '0px',
+        fontSize: '11px',
+        color: '#999999',
+        'text-transform': 'capitalize',
+    };
+    zDepth = 1;
+    radius = 1;
+    background = '#fff';
+    disableAlpha = true;
+    constructor() {
+        super();
+    }
+    handleValueChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+    handleInputChange({ data, $event }) {
+        if (data.hex) {
+            if (isValidHex(data.hex)) {
+                this.handleValueChange({
+                    data: {
+                        hex: data.hex,
+                        source: 'hex',
+                    },
+                    $event,
+                });
+            }
+        }
+        else if (data.r || data.g || data.b) {
+            this.handleValueChange({
+                data: {
+                    r: data.r || this.rgb.r,
+                    g: data.g || this.rgb.g,
+                    b: data.b || this.rgb.b,
+                    source: 'rgb',
+                },
+                $event,
+            });
+        }
+    }
+    afterValidChange() {
+        this.HEXinput['border-bottom-color'] = this.hex;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MaterialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: MaterialComponent, isStandalone: false, selector: "color-material", inputs: { zDepth: "zDepth", radius: "radius", background: "background" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MaterialComponent),
+                multi: true,
+            },
+            {
+                provide: ColorWrap,
+                useExisting: forwardRef(() => MaterialComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
+      <div class="material-picker {{ className }}">
+        <color-editable-input
+          label="hex"
+          [value]="hex"
+          (onChange)="handleValueChange($event)"
+          [style]="{ input: HEXinput, label: HEXlabel }"
+        ></color-editable-input>
+        <div class="material-split">
+          <div class="material-third">
+            <color-editable-input
+              label="r"
+              [value]="rgb.r"
+              [style]="{ input: RGBinput, label: RGBlabel }"
+              (onChange)="handleInputChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="material-third">
+            <color-editable-input
+              label="g"
+              [value]="rgb.g"
+              [style]="{ input: RGBinput, label: RGBlabel }"
+              (onChange)="handleInputChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="material-third">
+            <color-editable-input
+              label="b"
+              [value]="rgb.b"
+              [style]="{ input: RGBinput, label: RGBlabel }"
+              (onChange)="handleInputChange($event)"
+            ></color-editable-input>
+          </div>
+        </div>
+      </div>
+    </color-raised>
+  `, isInline: true, styles: [".material-picker{width:130px;height:130px;padding:16px;font-family:Roboto}.material-split{display:flex;margin-right:-10px;padding-top:11px}.material-third{flex:1 1 0%;padding-right:10px}\n"], dependencies: [{ kind: "component", type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }, { kind: "component", type: i1.RaisedComponent, selector: "color-raised", inputs: ["zDepth", "radius", "background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MaterialComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-material', template: `
+    <color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
+      <div class="material-picker {{ className }}">
+        <color-editable-input
+          label="hex"
+          [value]="hex"
+          (onChange)="handleValueChange($event)"
+          [style]="{ input: HEXinput, label: HEXlabel }"
+        ></color-editable-input>
+        <div class="material-split">
+          <div class="material-third">
+            <color-editable-input
+              label="r"
+              [value]="rgb.r"
+              [style]="{ input: RGBinput, label: RGBlabel }"
+              (onChange)="handleInputChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="material-third">
+            <color-editable-input
+              label="g"
+              [value]="rgb.g"
+              [style]="{ input: RGBinput, label: RGBlabel }"
+              (onChange)="handleInputChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="material-third">
+            <color-editable-input
+              label="b"
+              [value]="rgb.b"
+              [style]="{ input: RGBinput, label: RGBlabel }"
+              (onChange)="handleInputChange($event)"
+            ></color-editable-input>
+          </div>
+        </div>
+      </div>
+    </color-raised>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MaterialComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => MaterialComponent),
+                        },
+                    ], standalone: false, styles: [".material-picker{width:130px;height:130px;padding:16px;font-family:Roboto}.material-split{display:flex;margin-right:-10px;padding-top:11px}.material-third{flex:1 1 0%;padding-right:10px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { zDepth: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }] } });
+class ColorMaterialModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorMaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ColorMaterialModule, declarations: [MaterialComponent], imports: [CommonModule, EditableInputModule, RaisedModule], exports: [MaterialComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorMaterialModule, imports: [CommonModule, EditableInputModule, RaisedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorMaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [MaterialComponent],
+                    declarations: [MaterialComponent],
+                    imports: [CommonModule, EditableInputModule, RaisedModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorMaterialModule, MaterialComponent };
+//# sourceMappingURL=ngx-color-material.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-material.mjs","sources":["../../src/lib/material/material.component.ts","../../src/lib/material/ngx-color-material.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, EditableInputModule, isValidHex, RaisedModule, zDepth } from 'ngx-color';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-material',\n  template: `\n    <color-raised [zDepth]=\"zDepth\" [background]=\"background\" [radius]=\"radius\">\n      <div class=\"material-picker {{ className }}\">\n        <color-editable-input\n          label=\"hex\"\n          [value]=\"hex\"\n          (onChange)=\"handleValueChange($event)\"\n          [style]=\"{ input: HEXinput, label: HEXlabel }\"\n        ></color-editable-input>\n        <div class=\"material-split\">\n          <div class=\"material-third\">\n            <color-editable-input\n              label=\"r\"\n              [value]=\"rgb.r\"\n              [style]=\"{ input: RGBinput, label: RGBlabel }\"\n              (onChange)=\"handleInputChange($event)\"\n            ></color-editable-input>\n          </div>\n          <div class=\"material-third\">\n            <color-editable-input\n              label=\"g\"\n              [value]=\"rgb.g\"\n              [style]=\"{ input: RGBinput, label: RGBlabel }\"\n              (onChange)=\"handleInputChange($event)\"\n            ></color-editable-input>\n          </div>\n          <div class=\"material-third\">\n            <color-editable-input\n              label=\"b\"\n              [value]=\"rgb.b\"\n              [style]=\"{ input: RGBinput, label: RGBlabel }\"\n              (onChange)=\"handleInputChange($event)\"\n            ></color-editable-input>\n          </div>\n        </div>\n      </div>\n    </color-raised>\n  `,\n  styles: [\n    `\n      .material-picker {\n        width: 130px;\n        height: 130px;\n        padding: 16px;\n        font-family: Roboto;\n      }\n      .material-split {\n        display: flex;\n        margin-right: -10px;\n        padding-top: 11px;\n      }\n      .material-third {\n        flex: 1 1 0%;\n        padding-right: 10px;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => MaterialComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => MaterialComponent),\n    },\n  ],\n  standalone: false,\n})\nexport class MaterialComponent extends ColorWrap {\n  HEXinput: { [key: string]: string } = {\n    width: '100%',\n    marginTop: '12px',\n    fontSize: '15px',\n    color: 'rgb(51, 51, 51)',\n    padding: '0px',\n    'border-width': '0px 0px 2px',\n    outline: 'none',\n    height: '30px',\n  };\n  HEXlabel: { [key: string]: string } = {\n    position: 'absolute',\n    top: '0px',\n    left: '0px',\n    fontSize: '11px',\n    color: 'rgb(153, 153, 153)',\n    'text-transform': 'capitalize',\n  };\n  RGBinput: { [key: string]: string } = {\n    width: '100%',\n    marginTop: '12px',\n    fontSize: '15px',\n    color: '#333',\n    padding: '0px',\n    border: '0px',\n    'border-bottom': '1px solid #eee',\n    outline: 'none',\n    height: '30px',\n  };\n  RGBlabel: { [key: string]: string } = {\n    position: 'absolute',\n    top: '0px',\n    left: '0px',\n    fontSize: '11px',\n    color: '#999999',\n    'text-transform': 'capitalize',\n  };\n  @Input() zDepth: zDepth = 1;\n  @Input() radius = 1;\n  @Input() background = '#fff';\n  disableAlpha = true;\n\n  constructor() {\n    super();\n  }\n\n  handleValueChange({ data, $event }) {\n    this.handleChange(data, $event);\n  }\n\n  handleInputChange({ data, $event }) {\n    if (data.hex) {\n      if (isValidHex(data.hex)) {\n        this.handleValueChange({\n          data: {\n            hex: data.hex,\n            source: 'hex',\n          },\n          $event,\n        });\n      }\n    } else if (data.r || data.g || data.b) {\n      this.handleValueChange({\n        data: {\n          r: data.r || this.rgb.r,\n          g: data.g || this.rgb.g,\n          b: data.b || this.rgb.b,\n          source: 'rgb',\n        },\n        $event,\n      });\n    }\n  }\n\n  afterValidChange() {\n    this.HEXinput['border-bottom-color'] = this.hex;\n  }\n}\n\n@NgModule({\n  exports: [MaterialComponent],\n  declarations: [MaterialComponent],\n  imports: [CommonModule, EditableInputModule, RaisedModule],\n})\nexport class ColorMaterialModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}