ngx-color 7.0.1 → 7.3.0

package/twitter/esm2020/twitter.component.mjs

@@ -0,0 +1,255 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
+import { ColorWrap, EditableInputModule, isValidHex, SwatchModule } from 'ngx-color';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-color";
+import * as i2 from "@angular/common";
+export class TwitterComponent extends ColorWrap {
+    constructor() {
+        super();
+        /** Pixel value for picker width */
+        this.width = 276;
+        /** Color squares to display */
+        this.colors = [
+            '#FF6900',
+            '#FCB900',
+            '#7BDCB5',
+            '#00D084',
+            '#8ED1FC',
+            '#0693E3',
+            '#ABB8C3',
+            '#EB144C',
+            '#F78DA7',
+            '#9900EF',
+        ];
+        this.triangle = 'top-left';
+        this.swatchStyle = {
+            width: '30px',
+            height: '30px',
+            borderRadius: '4px',
+            fontSize: '0',
+        };
+        this.input = {
+            borderRadius: '4px',
+            borderBottomLeftRadius: '0',
+            borderTopLeftRadius: '0',
+            border: '1px solid #e6ecf0',
+            boxSizing: 'border-box',
+            display: 'inline',
+            fontSize: '14px',
+            height: '30px',
+            padding: '0',
+            paddingLeft: '6px',
+            width: '100%',
+            color: '#657786',
+        };
+        this.disableAlpha = true;
+    }
+    focus(color) {
+        return { boxShadow: `0 0 4px ${color}` };
+    }
+    handleBlockChange({ hex, $event }) {
+        if (isValidHex(hex)) {
+            // this.hex = hex;
+            this.handleChange({ hex, source: 'hex' }, $event);
+        }
+    }
+    handleValueChange({ data, $event }) {
+        this.handleBlockChange({ hex: data, $event });
+    }
+}
+TwitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TwitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TwitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: TwitterComponent, selector: "color-twitter", inputs: { width: "width", colors: "colors", triangle: "triangle" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TwitterComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => TwitterComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: `
+  <div class="twitter-picker {{ triangle }}-triangle {{ className }}" [style.width.px]="width">
+    <div class="triangleShadow"></div>
+    <div class="triangle"></div>
+    <div class="twitter-body">
+      <div class="twitter-swatch" *ngFor="let color of colors">
+        <color-swatch
+          [color]="color"
+          [style]="swatchStyle"
+          [focusStyle]="focus(color)"
+          (onClick)="handleBlockChange($event)"
+          (onHover)="onSwatchHover.emit($event)"
+        ></color-swatch>
+      </div>
+      <div class="twitter-hash">
+        <div>#</div>
+      </div>
+      <div class="twitter-input">
+        <color-editable-input
+          [style]="{ input: input }"
+          [value]="hex.replace('#', '')"
+          (onChange)="handleValueChange($event)"
+        ></color-editable-input>
+      </div>
+    </div>
+  </div>
+  `, isInline: true, styles: [".twitter-picker{background:rgb(255,255,255);border:0px solid rgba(0,0,0,.25);box-shadow:#00000040 0 1px 4px;border-radius:4px;position:relative;box-sizing:border-box}.triangleShadow{width:0px;height:0px;border-style:solid;border-width:0px 9px 10px;border-color:transparent transparent rgba(0,0,0,.1);position:absolute}.triangle{width:0px;height:0px;border-style:solid;border-width:0px 9px 10px;border-color:transparent transparent rgb(255,255,255);position:absolute}.hide-triangle>.triangle{display:none}.hide-triangle>.triangleShadow{display:none}.top-left-triangle>.triangle{top:-10px;left:12px}.top-left-triangle>.triangleShadow{top:-11px;left:12px}.top-right-triangle>.triangle{top:-10px;right:12px}.top-right-triangle>.triangleShadow{top:-11px;right:12px}.twitter-body{padding:15px 9px 9px 15px}.twitter-swatch{width:30px;height:30px;display:inline-block;margin:0 6px 0 0}.twitter-hash{background:rgb(240,240,240);height:30px;width:30px;border-radius:4px 0 0 4px;color:#98a1a4;margin-left:-3px;display:inline-block}.twitter-hash>div{position:absolute;align-items:center;justify-content:center;height:30px;width:30px;display:flex}.twitter-input{display:inline-block;margin-top:-6px;font-size:10px;height:27px;padding:0;position:relative;top:6px;vertical-align:top;width:108px;margin-left:-4px}\n"], components: [{ type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }, { type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TwitterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-twitter',
+                    template: `
+  <div class="twitter-picker {{ triangle }}-triangle {{ className }}" [style.width.px]="width">
+    <div class="triangleShadow"></div>
+    <div class="triangle"></div>
+    <div class="twitter-body">
+      <div class="twitter-swatch" *ngFor="let color of colors">
+        <color-swatch
+          [color]="color"
+          [style]="swatchStyle"
+          [focusStyle]="focus(color)"
+          (onClick)="handleBlockChange($event)"
+          (onHover)="onSwatchHover.emit($event)"
+        ></color-swatch>
+      </div>
+      <div class="twitter-hash">
+        <div>#</div>
+      </div>
+      <div class="twitter-input">
+        <color-editable-input
+          [style]="{ input: input }"
+          [value]="hex.replace('#', '')"
+          (onChange)="handleValueChange($event)"
+        ></color-editable-input>
+      </div>
+    </div>
+  </div>
+  `,
+                    styles: [
+                        `
+    .twitter-picker {
+      background: rgb(255, 255, 255);
+      border: 0px solid rgba(0, 0, 0, 0.25);
+      box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;
+      border-radius: 4px;
+      position: relative;
+      box-sizing: border-box;
+    }
+    .triangleShadow {
+      width: 0px;
+      height: 0px;
+      border-style: solid;
+      border-width: 0px 9px 10px;
+      border-color: transparent transparent rgba(0, 0, 0, 0.1);
+      position: absolute;
+    }
+    .triangle {
+      width: 0px;
+      height: 0px;
+      border-style: solid;
+      border-width: 0px 9px 10px;
+      border-color: transparent transparent rgb(255, 255, 255);
+      position: absolute;
+    }
+    .hide-triangle > .triangle {
+      display: none;
+    }
+    .hide-triangle > .triangleShadow {
+      display: none;
+    }
+    .top-left-triangle > .triangle {
+      top: -10px;
+      left: 12px;
+    }
+    .top-left-triangle > .triangleShadow {
+      top: -11px;
+      left: 12px;
+    }
+    .top-right-triangle > .triangle {
+      top: -10px;
+      right: 12px;
+    }
+    .top-right-triangle > .triangleShadow {
+      top: -11px;
+      right: 12px;
+    }
+    .twitter-body {
+      padding: 15px 9px 9px 15px;
+    }
+    .twitter-swatch {
+      width: 30px;
+      height: 30px;
+      display: inline-block;
+      margin: 0 6px 0 0;
+    }
+    .twitter-hash {
+      background: rgb(240, 240, 240);
+      height: 30px;
+      width: 30px;
+      border-radius: 4px 0px 0px 4px;
+      color: rgb(152, 161, 164);
+      margin-left: -3px;
+      display: inline-block;
+
+    }
+    .twitter-hash > div {
+      position: absolute;
+      align-items: center;
+      justify-content: center;
+      height: 30px;
+      width: 30px;
+      display: flex;
+    }
+    .twitter-input {
+      position: relative;
+      display: inline-block;
+      margin-top: -6px;
+      font-size: 10px;
+      height: 27px;
+      padding: 0;
+      position: relative;
+      top: 6px;
+      vertical-align: top;
+      width: 108px;
+      margin-left: -4px;
+    }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TwitterComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => TwitterComponent),
+                        },
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }], triangle: [{
+                type: Input
+            }] } });
+export class ColorTwitterModule {
+}
+ColorTwitterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorTwitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorTwitterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorTwitterModule, declarations: [TwitterComponent], imports: [CommonModule, SwatchModule, EditableInputModule], exports: [TwitterComponent] });
+ColorTwitterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorTwitterModule, imports: [[CommonModule, SwatchModule, EditableInputModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorTwitterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TwitterComponent],
+                    exports: [TwitterComponent],
+                    imports: [CommonModule, SwatchModule, EditableInputModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHdpdHRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvdHdpdHRlci90d2l0dGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVoRyxPQUFPLEVBQUUsU0FBUyxFQUFFLG1CQUFtQixFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDckYsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUF1SW5ELE1BQU0sT0FBTyxnQkFBaUIsU0FBUSxTQUFTO0lBd0M3QztRQUNFLEtBQUssRUFBRSxDQUFDO1FBeENWLG1DQUFtQztRQUMxQixVQUFLLEdBQW9CLEdBQUcsQ0FBQztRQUN0QywrQkFBK0I7UUFDdEIsV0FBTSxHQUFHO1lBQ2hCLFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7U0FDVixDQUFDO1FBQ08sYUFBUSxHQUF1RCxVQUFVLENBQUM7UUFFbkYsZ0JBQVcsR0FBNEI7WUFDckMsS0FBSyxFQUFFLE1BQU07WUFDYixNQUFNLEVBQUUsTUFBTTtZQUNkLFlBQVksRUFBRSxLQUFLO1lBQ25CLFFBQVEsRUFBRSxHQUFHO1NBQ2QsQ0FBQztRQUNGLFVBQUssR0FBNEI7WUFDL0IsWUFBWSxFQUFFLEtBQUs7WUFDbkIsc0JBQXNCLEVBQUUsR0FBRztZQUMzQixtQkFBbUIsRUFBRSxHQUFHO1lBQ3hCLE1BQU0sRUFBRSxtQkFBbUI7WUFDM0IsU0FBUyxFQUFF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bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgZm9yd2FyZFJlZiwgSW5wdXQsIE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IENvbG9yV3JhcCwgRWRpdGFibGVJbnB1dE1vZHVsZSwgaXNWYWxpZEhleCwgU3dhdGNoTW9kdWxlIH0gZnJvbSAnbmd4LWNvbG9yJztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci10d2l0dGVyJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGRpdiBjbGFzcz1cInR3aXR0ZXItcGlja2VyIHt7IHRyaWFuZ2xlIH19LXRyaWFuZ2xlIHt7IGNsYXNzTmFtZSB9fVwiIFtzdHlsZS53aWR0aC5weF09XCJ3aWR0aFwiPlxuICAgIDxkaXYgY2xhc3M9XCJ0cmlhbmdsZVNoYWRvd1wiPjwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJ0cmlhbmdsZVwiPjwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJ0d2l0dGVyLWJvZHlcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJ0d2l0dGVyLXN3YXRjaFwiICpuZ0Zvcj1cImxldCBjb2xvciBvZiBjb2xvcnNcIj5cbiAgICAgICAgPGNvbG9yLXN3YXRjaFxuICAgICAgICAgIFtjb2xvcl09XCJjb2xvclwiXG4gICAgICAgICAgW3N0eWxlXT1cInN3YXRjaFN0eWxlXCJcbiAgICAgICAgICBbZm9jdXNTdHlsZV09XCJmb2N1cyhjb2xvcilcIlxuICAgICAgICAgIChvbkNsaWNrKT1cImhhbmRsZUJsb2NrQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAgIChvbkhvdmVyKT1cIm9uU3dhdGNoSG92ZXIuZW1pdCgkZXZlbnQpXCJcbiAgICAgICAgPjwvY29sb3Itc3dhdGNoPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwidHdpdHRlci1oYXNoXCI+XG4gICAgICAgIDxkaXY+IzwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwidHdpdHRlci1pbnB1dFwiPlxuICAgICAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgICAgICBbc3R5bGVdPVwieyBpbnB1dDogaW5wdXQgfVwiXG4gICAgICAgICAgW3ZhbHVlXT1cImhleC5yZXBsYWNlKCcjJywgJycpXCJcbiAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgLnR3aXR0ZXItcGlja2VyIHtcbiAgICAgIGJhY2tncm91bmQ6IHJnYigyNTUsIDI1NSwgMjU1KTtcbiAgICAgIGJvcmRlcjogMHB4IHNvbGlkIHJnYmEoMCwgMCwgMCwgMC4yNSk7XG4gICAgICBib3gtc2hhZG93OiByZ2JhKDAsIDAsIDAsIDAuMjUpIDBweCAxcHggNHB4O1xuICAgICAgYm9yZGVyLXJhZGl1czogNHB4O1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICB9XG4gICAgLnRyaWFuZ2xlU2hhZG93IHtcbiAgICAgIHdpZHRoOiAwcHg7XG4gICAgICBoZWlnaHQ6IDBweDtcbiAgICAgIGJvcmRlci1zdHlsZTogc29saWQ7XG4gICAgICBib3JkZXItd2lkdGg6IDBweCA5cHggMTBweDtcbiAgICAgIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQgdHJhbnNwYXJlbnQgcmdiYSgwLCAwLCAwLCAwLjEpO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIH1cbiAgICAudHJpYW5nbGUge1xuICAgICAgd2lkdGg6IDBweDtcbiAgICAgIGhlaWdodDogMHB4O1xuICAgICAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcbiAgICAgIGJvcmRlci13aWR0aDogMHB4IDlweCAxMHB4O1xuICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudCB0cmFuc3BhcmVudCByZ2IoMjU1LCAyNTUsIDI1NSk7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgfVxuICAgIC5oaWRlLXRyaWFuZ2xlID4gLnRyaWFuZ2xlIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICAgIC5oaWRlLXRyaWFuZ2xlID4gLnRyaWFuZ2xlU2hhZG93IHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICAgIC50b3AtbGVmdC10cmlhbmdsZSA+IC50cmlhbmdsZSB7XG4gICAgICB0b3A6IC0xMHB4O1xuICAgICAgbGVmdDogMTJweDtcbiAgICB9XG4gICAgLnRvcC1sZWZ0LXRyaWFuZ2xlID4gLnRyaWFuZ2xlU2hhZG93IHtcbiAgICAgIHRvcDogLTExcHg7XG4gICAgICBsZWZ0OiAxMnB4O1xuICAgIH1cbiAgICAudG9wLXJpZ2h0LXRyaWFuZ2xlID4gLnRyaWFuZ2xlIHtcbiAgICAgIHRvcDogLTEwcHg7XG4gICAgICByaWdodDogMTJweDtcbiAgICB9XG4gICAgLnRvcC1yaWdodC10cmlhbmdsZSA+IC50cmlhbmdsZVNoYWRvdyB7XG4gICAgICB0b3A6IC0xMXB4O1xuICAgICAgcmlnaHQ6IDEycHg7XG4gICAgfVxuICAgIC50d2l0dGVyLWJvZHkge1xuICAgICAgcGFkZGluZzogMTVweCA5cHggOXB4IDE1cHg7XG4gICAgfVxuICAgIC50d2l0dGVyLXN3YXRjaCB7XG4gICAgICB3aWR0aDogMzBweDtcbiAgICAgIGhlaWdodDogMzBweDtcbiAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgIG1hcmdpbjogMCA2cHggMCAwO1xuICAgIH1cbiAgICAudHdpdHRlci1oYXNoIHtcbiAgICAgIGJhY2tncm91bmQ6IHJnYigyNDAsIDI0MCwgMjQwKTtcbiAgICAgIGhlaWdodDogMzBweDtcbiAgICAgIHdpZHRoOiAzMHB4O1xuICAgICAgYm9yZGVyLXJhZGl1czogNHB4IDBweCAwcHggNHB4O1xuICAgICAgY29sb3I6IHJnYigxNTIsIDE2MSwgMTY0KTtcbiAgICAgIG1hcmdpbi1sZWZ0OiAtM3B4O1xuICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXG4gICAgfVxuICAgIC50d2l0dGVyLWhhc2ggPiBkaXYge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgaGVpZ2h0OiAzMHB4O1xuICAgICAgd2lkdGg6IDMwcHg7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgIH1cbiAgICAudHdpdHRlci1pbnB1dCB7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgICBtYXJnaW4tdG9wOiAtNnB4O1xuICAgICAgZm9udC1zaXplOiAxMHB4O1xuICAgICAgaGVpZ2h0OiAyN3B4O1xuICAgICAgcGFkZGluZzogMDtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIHRvcDogNnB4O1xuICAgICAgdmVydGljYWwtYWxpZ246IHRvcDtcbiAgICAgIHdpZHRoOiAxMDhweDtcbiAgICAgIG1hcmdpbi1sZWZ0OiAtNHB4O1xuICAgIH1cbiAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IFR3aXR0ZXJDb21wb25lbnQpLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfSxcbiAgICB7XG4gICAgICBwcm92aWRlOiBDb2xvcldyYXAsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBUd2l0dGVyQ29tcG9uZW50KSxcbiAgICB9LFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFR3aXR0ZXJDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAge1xuICAvKiogUGl4ZWwgdmFsdWUgZm9yIHBpY2tlciB3aWR0aCAqL1xuICBASW5wdXQoKSB3aWR0aDogc3RyaW5nIHwgbnVtYmVyID0gMjc2O1xuICAvKiogQ29sb3Igc3F1YXJlcyB0byBkaXNwbGF5ICovXG4gIEBJbnB1dCgpIGNvbG9ycyA9IFtcbiAgICAnI0ZGNjkwMCcsXG4gICAgJyNGQ0I5MDAnLFxuICAgICcjN0JEQ0I1JyxcbiAgICAnIzAwRDA4NCcsXG4gICAgJyM4RUQxRkMnLFxuICAgICcjMDY5M0UzJyxcbiAgICAnI0FCQjhDMycsXG4gICAgJyNFQjE0NEMnLFxuICAgICcjRjc4REE3JyxcbiAgICAnIzk5MDBFRicsXG4gIF07XG4gIEBJbnB1dCgpIHRyaWFuZ2xlOiAnaGlkZScgfCAndG9wLWxlZnQnIHwgJ3RvcC1yaWdodCcgfCAnYm90dG9tLXJpZ2h0JyA9ICd0b3AtbGVmdCc7XG5cbiAgc3dhdGNoU3R5bGU6IHtba2V5OiBzdHJpbmddOiBzdHJpbmd9ID0ge1xuICAgIHdpZHRoOiAnMzBweCcsXG4gICAgaGVpZ2h0OiAnMzBweCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnNHB4JyxcbiAgICBmb250U2l6ZTogJzAnLFxuICB9O1xuICBpbnB1dDoge1trZXk6IHN0cmluZ106IHN0cmluZ30gPSB7XG4gICAgYm9yZGVyUmFkaXVzOiAnNHB4JyxcbiAgICBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiAnMCcsXG4gICAgYm9yZGVyVG9wTGVmdFJhZGl1czogJzAnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAjZTZlY2YwJyxcbiAgICBib3hTaXppbmc6ICdib3JkZXItYm94JyxcbiAgICBkaXNwbGF5OiAnaW5saW5lJyxcbiAgICBmb250U2l6ZTogJzE0cHgnLFxuICAgIGhlaWdodDogJzMwcHgnLFxuICAgIHBhZGRpbmc6ICcwJyxcbiAgICBwYWRkaW5nTGVmdDogJzZweCcsXG4gICAgd2lkdGg6ICcxMDAlJyxcbiAgICBjb2xvcjogJyM2NTc3ODYnLFxuICB9O1xuICBkaXNhYmxlQWxwaGEgPSB0cnVlO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBmb2N1cyhjb2xvcjogc3RyaW5nKSB7XG4gICAgcmV0dXJuIHsgYm94U2hhZG93OiBgMCAwIDRweCAke2NvbG9yfWAgfTtcbiAgfVxuXG4gIGhhbmRsZUJsb2NrQ2hhbmdlKHsgaGV4LCAkZXZlbnQgfTogYW55KSB7XG4gICAgaWYgKGlzVmFsaWRIZXgoaGV4KSkge1xuICAgICAgLy8gdGhpcy5oZXggPSBoZXg7XG4gICAgICB0aGlzLmhhbmRsZUNoYW5nZSh7IGhleCwgc291cmNlOiAnaGV4JyB9LCAkZXZlbnQpO1xuICAgIH1cbiAgfVxuXG4gIGhhbmRsZVZhbHVlQ2hhbmdlKHsgZGF0YSwgJGV2ZW50IH06IGFueSkge1xuICAgIHRoaXMuaGFuZGxlQmxvY2tDaGFuZ2UoeyBoZXg6IGRhdGEsICRldmVudCB9KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtUd2l0dGVyQ29tcG9uZW50XSxcbiAgZXhwb3J0czogW1R3aXR0ZXJDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBTd2F0Y2hNb2R1bGUsIEVkaXRhYmxlSW5wdXRNb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBDb2xvclR3aXR0ZXJNb2R1bGUge31cbiJdfQ==

package/twitter/fesm2015/ngx-color-twitter.mjs

@@ -0,0 +1,262 @@
+import * as i2 from '@angular/common';
+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, SwatchModule, EditableInputModule } from 'ngx-color';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class TwitterComponent extends ColorWrap {
+    constructor() {
+        super();
+        /** Pixel value for picker width */
+        this.width = 276;
+        /** Color squares to display */
+        this.colors = [
+            '#FF6900',
+            '#FCB900',
+            '#7BDCB5',
+            '#00D084',
+            '#8ED1FC',
+            '#0693E3',
+            '#ABB8C3',
+            '#EB144C',
+            '#F78DA7',
+            '#9900EF',
+        ];
+        this.triangle = 'top-left';
+        this.swatchStyle = {
+            width: '30px',
+            height: '30px',
+            borderRadius: '4px',
+            fontSize: '0',
+        };
+        this.input = {
+            borderRadius: '4px',
+            borderBottomLeftRadius: '0',
+            borderTopLeftRadius: '0',
+            border: '1px solid #e6ecf0',
+            boxSizing: 'border-box',
+            display: 'inline',
+            fontSize: '14px',
+            height: '30px',
+            padding: '0',
+            paddingLeft: '6px',
+            width: '100%',
+            color: '#657786',
+        };
+        this.disableAlpha = true;
+    }
+    focus(color) {
+        return { boxShadow: `0 0 4px ${color}` };
+    }
+    handleBlockChange({ hex, $event }) {
+        if (isValidHex(hex)) {
+            // this.hex = hex;
+            this.handleChange({ hex, source: 'hex' }, $event);
+        }
+    }
+    handleValueChange({ data, $event }) {
+        this.handleBlockChange({ hex: data, $event });
+    }
+}
+TwitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TwitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TwitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: TwitterComponent, selector: "color-twitter", inputs: { width: "width", colors: "colors", triangle: "triangle" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TwitterComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => TwitterComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: `
+  <div class="twitter-picker {{ triangle }}-triangle {{ className }}" [style.width.px]="width">
+    <div class="triangleShadow"></div>
+    <div class="triangle"></div>
+    <div class="twitter-body">
+      <div class="twitter-swatch" *ngFor="let color of colors">
+        <color-swatch
+          [color]="color"
+          [style]="swatchStyle"
+          [focusStyle]="focus(color)"
+          (onClick)="handleBlockChange($event)"
+          (onHover)="onSwatchHover.emit($event)"
+        ></color-swatch>
+      </div>
+      <div class="twitter-hash">
+        <div>#</div>
+      </div>
+      <div class="twitter-input">
+        <color-editable-input
+          [style]="{ input: input }"
+          [value]="hex.replace('#', '')"
+          (onChange)="handleValueChange($event)"
+        ></color-editable-input>
+      </div>
+    </div>
+  </div>
+  `, isInline: true, styles: [".twitter-picker{background:rgb(255,255,255);border:0px solid rgba(0,0,0,.25);box-shadow:#00000040 0 1px 4px;border-radius:4px;position:relative;box-sizing:border-box}.triangleShadow{width:0px;height:0px;border-style:solid;border-width:0px 9px 10px;border-color:transparent transparent rgba(0,0,0,.1);position:absolute}.triangle{width:0px;height:0px;border-style:solid;border-width:0px 9px 10px;border-color:transparent transparent rgb(255,255,255);position:absolute}.hide-triangle>.triangle{display:none}.hide-triangle>.triangleShadow{display:none}.top-left-triangle>.triangle{top:-10px;left:12px}.top-left-triangle>.triangleShadow{top:-11px;left:12px}.top-right-triangle>.triangle{top:-10px;right:12px}.top-right-triangle>.triangleShadow{top:-11px;right:12px}.twitter-body{padding:15px 9px 9px 15px}.twitter-swatch{width:30px;height:30px;display:inline-block;margin:0 6px 0 0}.twitter-hash{background:rgb(240,240,240);height:30px;width:30px;border-radius:4px 0 0 4px;color:#98a1a4;margin-left:-3px;display:inline-block}.twitter-hash>div{position:absolute;align-items:center;justify-content:center;height:30px;width:30px;display:flex}.twitter-input{display:inline-block;margin-top:-6px;font-size:10px;height:27px;padding:0;position:relative;top:6px;vertical-align:top;width:108px;margin-left:-4px}\n"], components: [{ type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }, { type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TwitterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-twitter',
+                    template: `
+  <div class="twitter-picker {{ triangle }}-triangle {{ className }}" [style.width.px]="width">
+    <div class="triangleShadow"></div>
+    <div class="triangle"></div>
+    <div class="twitter-body">
+      <div class="twitter-swatch" *ngFor="let color of colors">
+        <color-swatch
+          [color]="color"
+          [style]="swatchStyle"
+          [focusStyle]="focus(color)"
+          (onClick)="handleBlockChange($event)"
+          (onHover)="onSwatchHover.emit($event)"
+        ></color-swatch>
+      </div>
+      <div class="twitter-hash">
+        <div>#</div>
+      </div>
+      <div class="twitter-input">
+        <color-editable-input
+          [style]="{ input: input }"
+          [value]="hex.replace('#', '')"
+          (onChange)="handleValueChange($event)"
+        ></color-editable-input>
+      </div>
+    </div>
+  </div>
+  `,
+                    styles: [
+                        `
+    .twitter-picker {
+      background: rgb(255, 255, 255);
+      border: 0px solid rgba(0, 0, 0, 0.25);
+      box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;
+      border-radius: 4px;
+      position: relative;
+      box-sizing: border-box;
+    }
+    .triangleShadow {
+      width: 0px;
+      height: 0px;
+      border-style: solid;
+      border-width: 0px 9px 10px;
+      border-color: transparent transparent rgba(0, 0, 0, 0.1);
+      position: absolute;
+    }
+    .triangle {
+      width: 0px;
+      height: 0px;
+      border-style: solid;
+      border-width: 0px 9px 10px;
+      border-color: transparent transparent rgb(255, 255, 255);
+      position: absolute;
+    }
+    .hide-triangle > .triangle {
+      display: none;
+    }
+    .hide-triangle > .triangleShadow {
+      display: none;
+    }
+    .top-left-triangle > .triangle {
+      top: -10px;
+      left: 12px;
+    }
+    .top-left-triangle > .triangleShadow {
+      top: -11px;
+      left: 12px;
+    }
+    .top-right-triangle > .triangle {
+      top: -10px;
+      right: 12px;
+    }
+    .top-right-triangle > .triangleShadow {
+      top: -11px;
+      right: 12px;
+    }
+    .twitter-body {
+      padding: 15px 9px 9px 15px;
+    }
+    .twitter-swatch {
+      width: 30px;
+      height: 30px;
+      display: inline-block;
+      margin: 0 6px 0 0;
+    }
+    .twitter-hash {
+      background: rgb(240, 240, 240);
+      height: 30px;
+      width: 30px;
+      border-radius: 4px 0px 0px 4px;
+      color: rgb(152, 161, 164);
+      margin-left: -3px;
+      display: inline-block;
+
+    }
+    .twitter-hash > div {
+      position: absolute;
+      align-items: center;
+      justify-content: center;
+      height: 30px;
+      width: 30px;
+      display: flex;
+    }
+    .twitter-input {
+      position: relative;
+      display: inline-block;
+      margin-top: -6px;
+      font-size: 10px;
+      height: 27px;
+      padding: 0;
+      position: relative;
+      top: 6px;
+      vertical-align: top;
+      width: 108px;
+      margin-left: -4px;
+    }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TwitterComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => TwitterComponent),
+                        },
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }], triangle: [{
+                type: Input
+            }] } });
+class ColorTwitterModule {
+}
+ColorTwitterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorTwitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorTwitterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorTwitterModule, declarations: [TwitterComponent], imports: [CommonModule, SwatchModule, EditableInputModule], exports: [TwitterComponent] });
+ColorTwitterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorTwitterModule, imports: [[CommonModule, SwatchModule, EditableInputModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorTwitterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TwitterComponent],
+                    exports: [TwitterComponent],
+                    imports: [CommonModule, SwatchModule, EditableInputModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorTwitterModule, TwitterComponent };
+//# sourceMappingURL=ngx-color-twitter.mjs.map

package/twitter/fesm2015/ngx-color-twitter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-twitter.mjs","sources":["../../../../src/lib/components/twitter/twitter.component.ts","../../../../src/lib/components/twitter/ngx-color-twitter.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, EditableInputModule, isValidHex, SwatchModule } from 'ngx-color';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-twitter',\n  template: `\n  <div class=\"twitter-picker {{ triangle }}-triangle {{ className }}\" [style.width.px]=\"width\">\n    <div class=\"triangleShadow\"></div>\n    <div class=\"triangle\"></div>\n    <div class=\"twitter-body\">\n      <div class=\"twitter-swatch\" *ngFor=\"let color of colors\">\n        <color-swatch\n          [color]=\"color\"\n          [style]=\"swatchStyle\"\n          [focusStyle]=\"focus(color)\"\n          (onClick)=\"handleBlockChange($event)\"\n          (onHover)=\"onSwatchHover.emit($event)\"\n        ></color-swatch>\n      </div>\n      <div class=\"twitter-hash\">\n        <div>#</div>\n      </div>\n      <div class=\"twitter-input\">\n        <color-editable-input\n          [style]=\"{ input: input }\"\n          [value]=\"hex.replace('#', '')\"\n          (onChange)=\"handleValueChange($event)\"\n        ></color-editable-input>\n      </div>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .twitter-picker {\n      background: rgb(255, 255, 255);\n      border: 0px solid rgba(0, 0, 0, 0.25);\n      box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;\n      border-radius: 4px;\n      position: relative;\n      box-sizing: border-box;\n    }\n    .triangleShadow {\n      width: 0px;\n      height: 0px;\n      border-style: solid;\n      border-width: 0px 9px 10px;\n      border-color: transparent transparent rgba(0, 0, 0, 0.1);\n      position: absolute;\n    }\n    .triangle {\n      width: 0px;\n      height: 0px;\n      border-style: solid;\n      border-width: 0px 9px 10px;\n      border-color: transparent transparent rgb(255, 255, 255);\n      position: absolute;\n    }\n    .hide-triangle > .triangle {\n      display: none;\n    }\n    .hide-triangle > .triangleShadow {\n      display: none;\n    }\n    .top-left-triangle > .triangle {\n      top: -10px;\n      left: 12px;\n    }\n    .top-left-triangle > .triangleShadow {\n      top: -11px;\n      left: 12px;\n    }\n    .top-right-triangle > .triangle {\n      top: -10px;\n      right: 12px;\n    }\n    .top-right-triangle > .triangleShadow {\n      top: -11px;\n      right: 12px;\n    }\n    .twitter-body {\n      padding: 15px 9px 9px 15px;\n    }\n    .twitter-swatch {\n      width: 30px;\n      height: 30px;\n      display: inline-block;\n      margin: 0 6px 0 0;\n    }\n    .twitter-hash {\n      background: rgb(240, 240, 240);\n      height: 30px;\n      width: 30px;\n      border-radius: 4px 0px 0px 4px;\n      color: rgb(152, 161, 164);\n      margin-left: -3px;\n      display: inline-block;\n\n    }\n    .twitter-hash > div {\n      position: absolute;\n      align-items: center;\n      justify-content: center;\n      height: 30px;\n      width: 30px;\n      display: flex;\n    }\n    .twitter-input {\n      position: relative;\n      display: inline-block;\n      margin-top: -6px;\n      font-size: 10px;\n      height: 27px;\n      padding: 0;\n      position: relative;\n      top: 6px;\n      vertical-align: top;\n      width: 108px;\n      margin-left: -4px;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => TwitterComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => TwitterComponent),\n    },\n  ]\n})\nexport class TwitterComponent extends ColorWrap {\n  /** Pixel value for picker width */\n  @Input() width: string | number = 276;\n  /** Color squares to display */\n  @Input() colors = [\n    '#FF6900',\n    '#FCB900',\n    '#7BDCB5',\n    '#00D084',\n    '#8ED1FC',\n    '#0693E3',\n    '#ABB8C3',\n    '#EB144C',\n    '#F78DA7',\n    '#9900EF',\n  ];\n  @Input() triangle: 'hide' | 'top-left' | 'top-right' | 'bottom-right' = 'top-left';\n\n  swatchStyle: {[key: string]: string} = {\n    width: '30px',\n    height: '30px',\n    borderRadius: '4px',\n    fontSize: '0',\n  };\n  input: {[key: string]: string} = {\n    borderRadius: '4px',\n    borderBottomLeftRadius: '0',\n    borderTopLeftRadius: '0',\n    border: '1px solid #e6ecf0',\n    boxSizing: 'border-box',\n    display: 'inline',\n    fontSize: '14px',\n    height: '30px',\n    padding: '0',\n    paddingLeft: '6px',\n    width: '100%',\n    color: '#657786',\n  };\n  disableAlpha = true;\n\n  constructor() {\n    super();\n  }\n\n  focus(color: string) {\n    return { boxShadow: `0 0 4px ${color}` };\n  }\n\n  handleBlockChange({ hex, $event }: any) {\n    if (isValidHex(hex)) {\n      // this.hex = hex;\n      this.handleChange({ hex, source: 'hex' }, $event);\n    }\n  }\n\n  handleValueChange({ data, $event }: any) {\n    this.handleBlockChange({ hex: data, $event });\n  }\n}\n\n@NgModule({\n  declarations: [TwitterComponent],\n  exports: [TwitterComponent],\n  imports: [CommonModule, SwatchModule, EditableInputModule],\n})\nexport class ColorTwitterModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}