ngx-color 8.0.2 → 9.0.0

package/esm2022/photoshop/photoshop-previews.component.mjs

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, Input, } from '@angular/core';
+import * as i0 from "@angular/core";
+class PhotoshopPreviewsComponent {
+    rgb;
+    currentColor = '';
+    backgroundNew = '';
+    ngOnChanges() {
+        this.backgroundNew = `rgb(${this.rgb.r},${this.rgb.g}, ${this.rgb.b})`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopPreviewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: PhotoshopPreviewsComponent, selector: "color-photoshop-previews", inputs: { rgb: "rgb", currentColor: "currentColor" }, usesOnChanges: true, ngImport: i0, template: `
+  <div>
+    <div class="photoshop-label">new</div>
+    <div class="photoshop-swatches">
+      <div class="photoshop-new" [style.background]="backgroundNew"></div>
+      <div class="photoshop-current" [style.background]="currentColor"></div>
+    </div>
+    <div class="photoshop-label">current</div>
+  </div>
+  `, isInline: true, styles: [".photoshop-swatches{border:1px solid #B3B3B3;border-bottom:1px solid #F0F0F0;margin-bottom:2px;margin-top:1px}.photoshop-new{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 1px #000}.photoshop-current{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 -1px #000}.photoshop-label{font-size:14px;color:#000;text-align:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+export { PhotoshopPreviewsComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopPreviewsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-photoshop-previews', template: `
+  <div>
+    <div class="photoshop-label">new</div>
+    <div class="photoshop-swatches">
+      <div class="photoshop-new" [style.background]="backgroundNew"></div>
+      <div class="photoshop-current" [style.background]="currentColor"></div>
+    </div>
+    <div class="photoshop-label">current</div>
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".photoshop-swatches{border:1px solid #B3B3B3;border-bottom:1px solid #F0F0F0;margin-bottom:2px;margin-top:1px}.photoshop-new{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 1px #000}.photoshop-current{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 -1px #000}.photoshop-label{font-size:14px;color:#000;text-align:center}\n"] }]
+        }], propDecorators: { rgb: [{
+                type: Input
+            }], currentColor: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvdG9zaG9wLXByZXZpZXdzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvcGhvdG9zaG9wL3Bob3Rvc2hvcC1wcmV2aWV3cy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxHQUVOLE1BQU0sZUFBZSxDQUFDOztBQUd2QixNQXNDYSwwQkFBMEI7SUFDNUIsR0FBRyxDQUFPO0lBQ1YsWUFBWSxHQUFHLEVBQUUsQ0FBQztJQUMzQixhQUFhLEdBQUcsRUFBRSxDQUFDO0lBRW5CLFdBQVc7UUFDVCxJQUFJLENBQUMsYUFBYSxHQUFHLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQztJQUN6RSxDQUFDO3VHQVBVLDBCQUEwQjsyRkFBMUIsMEJBQTBCLDJJQXBDM0I7Ozs7Ozs7OztHQVNUOztTQTJCVSwwQkFBMEI7MkZBQTFCLDBCQUEwQjtrQkF0Q3RDLFNBQVM7K0JBQ0UsMEJBQTBCLFlBQzFCOzs7Ozs7Ozs7R0FTVCxtQkF3QmdCLHVCQUF1QixDQUFDLE1BQU0sdUJBQzFCLEtBQUs7OEJBR2pCLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBSR0IgfSBmcm9tICduZ3gtY29sb3InO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1waG90b3Nob3AtcHJldmlld3MnLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtbGFiZWxcIj5uZXc8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLXN3YXRjaGVzXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLW5ld1wiIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImJhY2tncm91bmROZXdcIj48L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtY3VycmVudFwiIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImN1cnJlbnRDb2xvclwiPjwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtbGFiZWxcIj5jdXJyZW50PC9kaXY+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gIC5waG90b3Nob3Atc3dhdGNoZXMge1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICNCM0IzQjM7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNGMEYwRjA7XG4gICAgbWFyZ2luLWJvdHRvbTogMnB4O1xuICAgIG1hcmdpbi10b3A6IDFweDtcbiAgfVxuICAucGhvdG9zaG9wLW5ldyB7XG4gICAgaGVpZ2h0OiAzNHB4O1xuICAgIGJveC1zaGFkb3c6IGluc2V0IDFweCAwIDAgIzAwMCwgaW5zZXQgLTFweCAwIDAgIzAwMCwgaW5zZXQgMCAxcHggMCAjMDAwO1xuICB9XG4gIC5waG90b3Nob3AtY3VycmVudCB7XG4gICAgaGVpZ2h0OiAzNHB4O1xuICAgIGJveC1zaGFkb3c6IGluc2V0IDFweCAwIDAgIzAwMCwgaW5zZXQgLTFweCAwIDAgIzAwMCwgaW5zZXQgMCAtMXB4IDAgIzAwMDtcbiAgfVxuICAucGhvdG9zaG9wLWxhYmVsIHtcbiAgICBmb250LXNpemU6IDE0cHg7XG4gICAgY29sb3I6ICMwMDA7XG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICB9XG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgUGhvdG9zaG9wUHJldmlld3NDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKSByZ2IhOiBSR0I7XG4gIEBJbnB1dCgpIGN1cnJlbnRDb2xvciA9ICcnO1xuICBiYWNrZ3JvdW5kTmV3ID0gJyc7XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgdGhpcy5iYWNrZ3JvdW5kTmV3ID0gYHJnYigke3RoaXMucmdiLnJ9LCR7dGhpcy5yZ2IuZ30sICR7dGhpcy5yZ2IuYn0pYDtcbiAgfVxufVxuIl19

package/esm2022/photoshop/photoshop.component.mjs

@@ -0,0 +1,187 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, Input, NgModule, Output } from '@angular/core';
+import { AlphaModule, ColorWrap, EditableInputModule, HueModule, SaturationModule, SwatchModule } from 'ngx-color';
+import { PhotoshopButtonComponent } from './photoshop-button.component';
+import { PhotoshopFieldsComponent } from './photoshop-fields.component';
+import { PhotoshopPreviewsComponent } from './photoshop-previews.component';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-color";
+class PhotoshopComponent extends ColorWrap {
+    /** Title text */
+    header = 'Color Picker';
+    onAccept = new EventEmitter();
+    onCancel = new EventEmitter();
+    circle = {
+        width: '12px',
+        height: '12px',
+        borderRadius: '6px',
+        boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',
+        transform: 'translate(-6px, -10px)',
+    };
+    constructor() {
+        super();
+    }
+    handleValueChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: PhotoshopComponent, selector: "color-photoshop", inputs: { header: "header" }, outputs: { onAccept: "onAccept", onCancel: "onCancel" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PhotoshopComponent),
+                multi: true,
+            },
+            {
+                provide: ColorWrap,
+                useExisting: forwardRef(() => PhotoshopComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+  <div class="photoshop-picker {{ className }}">
+    <div class="photoshop-head">{{ header }}</div>
+    <div class="photoshop-body">
+      <div class="photoshop-saturation">
+        <color-saturation
+          [hsl]="hsl" [hsv]="hsv" [circle]="circle"
+          (onChange)="handleValueChange($event)"
+        ></color-saturation>
+      </div>
+      <div class="photoshop-hue">
+        <color-hue direction="vertical"
+          [hsl]="hsl" [hidePointer]="true"
+          (onChange)="handleValueChange($event)"
+        ></color-hue>
+      </div>
+      <div class="photoshop-controls">
+        <div class="photoshop-top">
+          <div class="photoshop-previews">
+            <color-photoshop-previews
+              [rgb]="rgb" [currentColor]="currentColor"
+            ></color-photoshop-previews>
+          </div>
+          <div class="photoshop-actions">
+            <color-photoshop-button label="OK"
+              [active]="true" (onClick)="onAccept.emit($event)"
+            ></color-photoshop-button>
+            <color-photoshop-button label="Cancel"
+              (onClick)="onCancel.emit($event)"
+            >
+            </color-photoshop-button>
+            <color-photoshop-fields
+              [rgb]="rgb" [hex]="hex" [hsv]="hsv"
+              (onChange)="handleValueChange($event)"
+            ></color-photoshop-fields>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `, isInline: true, styles: [".photoshop-picker{background:rgb(220,220,220);border-radius:4px;box-shadow:#00000040 0 0 0 1px,#00000026 0 8px 16px;box-sizing:initial;width:513px}.photoshop-head{background-image:linear-gradient(-180deg,rgb(240,240,240) 0%,rgb(212,212,212) 100%);border-bottom:1px solid rgb(177,177,177);box-shadow:#fff3 0 1px inset,#00000005 0 -1px inset;height:23px;line-height:24px;border-radius:4px 4px 0 0;font-size:13px;color:#4d4d4d;text-align:center}.photoshop-body{padding:15px 15px 0;display:flex}.photoshop-saturation{width:256px;height:256px;position:relative;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial;overflow:hidden}.photoshop-hue{position:relative;height:256px;width:23px;margin-left:10px;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial}.photoshop-controls{width:180px;margin-left:10px}.photoshop-top{display:flex}.photoshop-previews{width:60px}.photoshop-actions{flex:1 1 0%;margin-left:20px}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(function () { return i1.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i1.SaturationComponent; }), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return PhotoshopPreviewsComponent; }), selector: "color-photoshop-previews", inputs: ["rgb", "currentColor"] }, { kind: "component", type: i0.forwardRef(function () { return PhotoshopButtonComponent; }), selector: "color-photoshop-button", inputs: ["label", "active"], outputs: ["onClick"] }, { kind: "component", type: i0.forwardRef(function () { return PhotoshopFieldsComponent; }), selector: "color-photoshop-fields", inputs: ["rgb", "hsv", "hex"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+export { PhotoshopComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-photoshop', template: `
+  <div class="photoshop-picker {{ className }}">
+    <div class="photoshop-head">{{ header }}</div>
+    <div class="photoshop-body">
+      <div class="photoshop-saturation">
+        <color-saturation
+          [hsl]="hsl" [hsv]="hsv" [circle]="circle"
+          (onChange)="handleValueChange($event)"
+        ></color-saturation>
+      </div>
+      <div class="photoshop-hue">
+        <color-hue direction="vertical"
+          [hsl]="hsl" [hidePointer]="true"
+          (onChange)="handleValueChange($event)"
+        ></color-hue>
+      </div>
+      <div class="photoshop-controls">
+        <div class="photoshop-top">
+          <div class="photoshop-previews">
+            <color-photoshop-previews
+              [rgb]="rgb" [currentColor]="currentColor"
+            ></color-photoshop-previews>
+          </div>
+          <div class="photoshop-actions">
+            <color-photoshop-button label="OK"
+              [active]="true" (onClick)="onAccept.emit($event)"
+            ></color-photoshop-button>
+            <color-photoshop-button label="Cancel"
+              (onClick)="onCancel.emit($event)"
+            >
+            </color-photoshop-button>
+            <color-photoshop-fields
+              [rgb]="rgb" [hex]="hex" [hsv]="hsv"
+              (onChange)="handleValueChange($event)"
+            ></color-photoshop-fields>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PhotoshopComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => PhotoshopComponent),
+                        },
+                    ], styles: [".photoshop-picker{background:rgb(220,220,220);border-radius:4px;box-shadow:#00000040 0 0 0 1px,#00000026 0 8px 16px;box-sizing:initial;width:513px}.photoshop-head{background-image:linear-gradient(-180deg,rgb(240,240,240) 0%,rgb(212,212,212) 100%);border-bottom:1px solid rgb(177,177,177);box-shadow:#fff3 0 1px inset,#00000005 0 -1px inset;height:23px;line-height:24px;border-radius:4px 4px 0 0;font-size:13px;color:#4d4d4d;text-align:center}.photoshop-body{padding:15px 15px 0;display:flex}.photoshop-saturation{width:256px;height:256px;position:relative;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial;overflow:hidden}.photoshop-hue{position:relative;height:256px;width:23px;margin-left:10px;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial}.photoshop-controls{width:180px;margin-left:10px}.photoshop-top{display:flex}.photoshop-previews{width:60px}.photoshop-actions{flex:1 1 0%;margin-left:20px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { header: [{
+                type: Input
+            }], onAccept: [{
+                type: Output
+            }], onCancel: [{
+                type: Output
+            }] } });
+class ColorPhotoshopModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorPhotoshopModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: ColorPhotoshopModule, declarations: [PhotoshopComponent, PhotoshopPreviewsComponent,
+            PhotoshopButtonComponent,
+            PhotoshopFieldsComponent], imports: [CommonModule,
+            EditableInputModule,
+            HueModule,
+            AlphaModule,
+            SwatchModule,
+            SaturationModule], exports: [PhotoshopComponent, PhotoshopPreviewsComponent,
+            PhotoshopButtonComponent,
+            PhotoshopFieldsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorPhotoshopModule, imports: [CommonModule,
+            EditableInputModule,
+            HueModule,
+            AlphaModule,
+            SwatchModule,
+            SaturationModule] });
+}
+export { ColorPhotoshopModule };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorPhotoshopModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        PhotoshopComponent,
+                        PhotoshopPreviewsComponent,
+                        PhotoshopButtonComponent,
+                        PhotoshopFieldsComponent,
+                    ],
+                    exports: [
+                        PhotoshopComponent,
+                        PhotoshopPreviewsComponent,
+                        PhotoshopButtonComponent,
+                        PhotoshopFieldsComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        EditableInputModule,
+                        HueModule,
+                        AlphaModule,
+                        SwatchModule,
+                        SaturationModule,
+                    ],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvdG9zaG9wLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvcGhvdG9zaG9wL3Bob3Rvc2hvcC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV0SCxPQUFPLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxtQkFBbUIsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ25ILE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ3hFLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ3hFLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQzVFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFFbkQsTUEwSGEsa0JBQW1CLFNBQVEsU0FBUztJQUMvQyxpQkFBaUI7SUFDUixNQUFNLEdBQUcsY0FBYyxDQUFDO0lBQ3ZCLFFBQVEsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDO0lBQ3JDLFFBQVEsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDO0lBQy9DLE1BQU0sR0FBRztRQUNQLEtBQUssRUFBRSxNQUFNO1FBQ2IsTUFBTSxFQUFFLE1BQU07UUFDZCxZQUFZLEVBQUUsS0FBSztRQUNuQixTQUFTLEVBQUUsMENBQTBDO1FBQ3JELFNBQVMsRUFBRSx3QkFBd0I7S0FDcEMsQ0FBQztJQUNGO1FBQ0UsS0FBSyxFQUFFLENBQUM7SUFDVixDQUFDO0lBQ0QsaUJBQWlCLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFO1FBQ2hDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxFQUFFLE1BQU0sQ0FBQyxDQUFDO0lBQ2xDLENBQUM7dUdBakJVLGtCQUFrQjsyRkFBbEIsa0JBQWtCLGlJQVpsQjtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsa0JBQWtCLENBQUM7Z0JBQ2pELEtBQUssRUFBRSxJQUFJO2FBQ1o7WUFDRDtnQkFDRSxPQUFPLEVBQUUsU0FBUztnQkFDbEIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQzthQUNsRDtTQUNGLGlEQXRIUzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXdDVCwwaERBdUdDLDBCQUEwQiw2SUFDMUIsd0JBQXdCLDZKQUN4Qix3QkFBd0I7O1NBekJmLGtCQUFrQjsyRkFBbEIsa0JBQWtCO2tCQTFIOUIsU0FBUzsrQkFDRSxpQkFBaUIsWUFDakI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F3Q1QsbUJBa0VnQix1QkFBdUIsQ0FBQyxNQUFNLHVCQUMxQixLQUFLLGFBQ2Y7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsbUJBQW1CLENBQUM7NEJBQ2pELEtBQUssRUFBRSxJQUFJO3lCQUNaO3dCQUNEOzRCQUNFLE9BQU8sRUFBRSxTQUFTOzRCQUNsQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxtQkFBbUIsQ0FBQzt5QkFDbEQ7cUJBQ0Y7MEVBSVEsTUFBTTtzQkFBZCxLQUFLO2dCQUNJLFFBQVE7c0JBQWpCLE1BQU07Z0JBQ0csUUFBUTtzQkFBakIsTUFBTTs7QUFnQlQsTUFzQmEsb0JBQW9CO3VHQUFwQixvQkFBb0I7d0dBQXBCLG9CQUFvQixpQkExQ3BCLGtCQUFrQixFQXVCM0IsMEJBQTBCO1lBQzFCLHdCQUF3QjtZQUN4Qix3QkFBd0IsYUFTeEIsWUFBWTtZQUNaLG1CQUFtQjtZQUNuQixTQUFTO1lBQ1QsV0FBVztZQUNYLFlBQVk7WUFDWixnQkFBZ0IsYUF2Q1Asa0JBQWtCLEVBNkIzQiwwQkFBMEI7WUFDMUIsd0JBQXdCO1lBQ3hCLHdCQUF3Qjt3R0FXZixvQkFBb0IsWUFSN0IsWUFBWTtZQUNaLG1CQUFtQjtZQUNuQixTQUFTO1lBQ1QsV0FBVztZQUNYLFlBQVk7WUFDWixnQkFBZ0I7O1NBR1Asb0JBQW9COzJGQUFwQixvQkFBb0I7a0JBdEJoQyxRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWixrQkFBa0I7d0JBQ2xCLDBCQUEwQjt3QkFDMUIsd0JBQXdCO3dCQUN4Qix3QkFBd0I7cUJBQ3pCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxrQkFBa0I7d0JBQ2xCLDBCQUEwQjt3QkFDMUIsd0JBQXdCO3dCQUN4Qix3QkFBd0I7cUJBQ3pCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLG1CQUFtQjt3QkFDbkIsU0FBUzt3QkFDVCxXQUFXO3dCQUNYLFlBQVk7d0JBQ1osZ0JBQWdCO3FCQUNqQjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYsIElucHV0LCBOZ01vZHVsZSwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IEFscGhhTW9kdWxlLCBDb2xvcldyYXAsIEVkaXRhYmxlSW5wdXRNb2R1bGUsIEh1ZU1vZHVsZSwgU2F0dXJhdGlvbk1vZHVsZSwgU3dhdGNoTW9kdWxlIH0gZnJvbSAnbmd4LWNvbG9yJztcbmltcG9ydCB7IFBob3Rvc2hvcEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4vcGhvdG9zaG9wLWJ1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgUGhvdG9zaG9wRmllbGRzQ29tcG9uZW50IH0gZnJvbSAnLi9waG90b3Nob3AtZmllbGRzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBQaG90b3Nob3BQcmV2aWV3c0NvbXBvbmVudCB9IGZyb20gJy4vcGhvdG9zaG9wLXByZXZpZXdzLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3ItcGhvdG9zaG9wJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1waWNrZXIge3sgY2xhc3NOYW1lIH19XCI+XG4gICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1oZWFkXCI+e3sgaGVhZGVyIH19PC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1ib2R5XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLXNhdHVyYXRpb25cIj5cbiAgICAgICAgPGNvbG9yLXNhdHVyYXRpb25cbiAgICAgICAgICBbaHNsXT1cImhzbFwiIFtoc3ZdPVwiaHN2XCIgW2NpcmNsZV09XCJjaXJjbGVcIlxuICAgICAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgPjwvY29sb3Itc2F0dXJhdGlvbj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1odWVcIj5cbiAgICAgICAgPGNvbG9yLWh1ZSBkaXJlY3Rpb249XCJ2ZXJ0aWNhbFwiXG4gICAgICAgICAgW2hzbF09XCJoc2xcIiBbaGlkZVBvaW50ZXJdPVwidHJ1ZVwiXG4gICAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICA+PC9jb2xvci1odWU+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtY29udHJvbHNcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC10b3BcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLXByZXZpZXdzXCI+XG4gICAgICAgICAgICA8Y29sb3ItcGhvdG9zaG9wLXByZXZpZXdzXG4gICAgICAgICAgICAgIFtyZ2JdPVwicmdiXCIgW2N1cnJlbnRDb2xvcl09XCJjdXJyZW50Q29sb3JcIlxuICAgICAgICAgICAgPjwvY29sb3ItcGhvdG9zaG9wLXByZXZpZXdzPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtYWN0aW9uc1wiPlxuICAgICAgICAgICAgPGNvbG9yLXBob3Rvc2hvcC1idXR0b24gbGFiZWw9XCJPS1wiXG4gICAgICAgICAgICAgIFthY3RpdmVdPVwidHJ1ZVwiIChvbkNsaWNrKT1cIm9uQWNjZXB0LmVtaXQoJGV2ZW50KVwiXG4gICAgICAgICAgICA+PC9jb2xvci1waG90b3Nob3AtYnV0dG9uPlxuICAgICAgICAgICAgPGNvbG9yLXBob3Rvc2hvcC1idXR0b24gbGFiZWw9XCJDYW5jZWxcIlxuICAgICAgICAgICAgICAob25DbGljayk9XCJvbkNhbmNlbC5lbWl0KCRldmVudClcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgPC9jb2xvci1waG90b3Nob3AtYnV0dG9uPlxuICAgICAgICAgICAgPGNvbG9yLXBob3Rvc2hvcC1maWVsZHNcbiAgICAgICAgICAgICAgW3JnYl09XCJyZ2JcIiBbaGV4XT1cImhleFwiIFtoc3ZdPVwiaHN2XCJcbiAgICAgICAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAgICAgPjwvY29sb3ItcGhvdG9zaG9wLWZpZWxkcz5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAucGhvdG9zaG9wLXBpY2tlciB7XG4gICAgICBiYWNrZ3JvdW5kOiByZ2IoMjIwLCAyMjAsIDIyMCk7XG4gICAgICBib3JkZXItcmFkaXVzOiA0cHg7XG4gICAgICBib3gtc2hhZG93OiByZ2JhKDAsIDAsIDAsIDAuMjUpIDBweCAwcHggMHB4IDFweCwgcmdiYSgwLCAwLCAwLCAwLjE1KSAwcHggOHB4IDE2cHg7XG4gICAgICBib3gtc2l6aW5nOiBpbml0aWFsOyB3aWR0aDogNTEzcHg7XG4gICAgfVxuICAgIC5waG90b3Nob3AtaGVhZCB7XG4gICAgICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgIC0xODBkZWcsXG4gICAgICAgIHJnYigyNDAsIDI0MCwgMjQwKSAwJSxcbiAgICAgICAgcmdiKDIxMiwgMjEyLCAyMTIpIDEwMCVcbiAgICAgICk7XG4gICAgICBib3JkZXItYm90dG9tOiAxcHggc29saWQgcmdiKDE3NywgMTc3LCAxNzcpO1xuICAgICAgYm94LXNoYWRvdzogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjIpIDBweCAxcHggMHB4IDBweCBpbnNldCxcbiAgICAgICAgcmdiYSgwLCAwLCAwLCAwLjAyKSAwcHggLTFweCAwcHggMHB4IGluc2V0O1xuICAgICAgaGVpZ2h0OiAyM3B4O1xuICAgICAgbGluZS1oZWlnaHQ6IDI0cHg7XG4gICAgICBib3JkZXItcmFkaXVzOiA0cHggNHB4IDBweCAwcHg7XG4gICAgICBmb250LXNpemU6IDEzcHg7XG4gICAgICBjb2xvcjogcmdiKDc3LCA3NywgNzcpO1xuICAgICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAgIH1cbiAgICAucGhvdG9zaG9wLWJvZHkge1xuICAgICAgcGFkZGluZzogMTVweCAxNXB4IDBweDtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuICAgIC5waG90b3Nob3Atc2F0dXJhdGlvbiB7XG4gICAgICB3aWR0aDogMjU2cHg7XG4gICAgICBoZWlnaHQ6IDI1NnB4O1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgYm9yZGVyLXdpZHRoOiAycHg7XG4gICAgICBib3JkZXItc3R5bGU6IHNvbGlkO1xuICAgICAgYm9yZGVyLWNvbG9yOiByZ2IoMTc5LCAxNzksIDE3OSkgcmdiKDE3OSwgMTc5LCAxNzkpIHJnYigyNDAsIDI0MCwgMjQwKTtcbiAgICAgIGJvcmRlci1pbWFnZTogaW5pdGlhbDtcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgfVxuICAgIC5waG90b3Nob3AtaHVlIHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGhlaWdodDogMjU2cHg7XG4gICAgICB3aWR0aDogMjNweDtcbiAgICAgIG1hcmdpbi1sZWZ0OiAxMHB4O1xuICAgICAgYm9yZGVyLXdpZHRoOiAycHg7XG4gICAgICBib3JkZXItc3R5bGU6IHNvbGlkO1xuICAgICAgYm9yZGVyLWNvbG9yOiByZ2IoMTc5LCAxNzksIDE3OSkgcmdiKDE3OSwgMTc5LCAxNzkpIHJnYigyNDAsIDI0MCwgMjQwKTtcbiAgICAgIGJvcmRlci1pbWFnZTogaW5pdGlhbDtcbiAgICB9XG4gICAgLnBob3Rvc2hvcC1jb250cm9scyB7XG4gICAgICB3aWR0aDogMTgwcHg7XG4gICAgICBtYXJnaW4tbGVmdDogMTBweDtcbiAgICB9XG4gICAgLnBob3Rvc2hvcC10b3Age1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gICAgLnBob3Rvc2hvcC1wcmV2aWV3cyB7XG4gICAgICB3aWR0aDogNjBweDtcbiAgICB9XG4gICAgLnBob3Rvc2hvcC1hY3Rpb25zIHtcbiAgICAgIC13ZWJraXQtYm94LWZsZXg6IDE7XG4gICAgICBmbGV4OiAxIDEgMCU7XG4gICAgICBtYXJnaW4tbGVmdDogMjBweDtcbiAgICB9XG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBQaG90b3Nob3BDb21wb25lbnQpLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfSxcbiAgICB7XG4gICAgICBwcm92aWRlOiBDb2xvcldyYXAsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBQaG90b3Nob3BDb21wb25lbnQpLFxuICAgIH0sXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgUGhvdG9zaG9wQ29tcG9uZW50IGV4dGVuZHMgQ29sb3JXcmFwIHtcbiAgLyoqIFRpdGxlIHRleHQgKi9cbiAgQElucHV0KCkgaGVhZGVyID0gJ0NvbG9yIFBpY2tlcic7XG4gIEBPdXRwdXQoKSBvbkFjY2VwdCA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7XG4gIEBPdXRwdXQoKSBvbkNhbmNlbCA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7XG4gIGNpcmNsZSA9IHtcbiAgICB3aWR0aDogJzEycHgnLFxuICAgIGhlaWdodDogJzEycHgnLFxuICAgIGJvcmRlclJhZGl1czogJzZweCcsXG4gICAgYm94U2hhZG93OiAncmdiKDI1NSwgMjU1LCAyNTUpIDBweCAwcHggMHB4IDFweCBpbnNldCcsXG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlKC02cHgsIC0xMHB4KScsXG4gIH07XG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gIH1cbiAgaGFuZGxlVmFsdWVDaGFuZ2UoeyBkYXRhLCAkZXZlbnQgfSkge1xuICAgIHRoaXMuaGFuZGxlQ2hhbmdlKGRhdGEsICRldmVudCk7XG4gIH1cbn1cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgUGhvdG9zaG9wQ29tcG9uZW50LFxuICAgIFBob3Rvc2hvcFByZXZpZXdzQ29tcG9uZW50LFxuICAgIFBob3Rvc2hvcEJ1dHRvbkNvbXBvbmVudCxcbiAgICBQaG90b3Nob3BGaWVsZHNDb21wb25lbnQsXG4gIF0sXG4gIGV4cG9ydHM6IFtcbiAgICBQaG90b3Nob3BDb21wb25lbnQsXG4gICAgUGhvdG9zaG9wUHJldmlld3NDb21wb25lbnQsXG4gICAgUGhvdG9zaG9wQnV0dG9uQ29tcG9uZW50LFxuICAgIFBob3Rvc2hvcEZpZWxkc0NvbXBvbmVudCxcbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBFZGl0YWJsZUlucHV0TW9kdWxlLFxuICAgIEh1ZU1vZHVsZSxcbiAgICBBbHBoYU1vZHVsZSxcbiAgICBTd2F0Y2hNb2R1bGUsXG4gICAgU2F0dXJhdGlvbk1vZHVsZSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JQaG90b3Nob3BNb2R1bGUge31cbiJdfQ==

package/esm2022/raised.component.mjs

@@ -0,0 +1,50 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';
+import * as i0 from "@angular/core";
+class RaisedComponent {
+    zDepth = 1;
+    radius = 1;
+    background = '#fff';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: RaisedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: RaisedComponent, selector: "color-raised", inputs: { zDepth: "zDepth", radius: "radius", background: "background" }, ngImport: i0, template: `
+  <div class="raised-wrap">
+    <div class="raised-bg zDepth-{{zDepth}}" [style.background]="background"></div>
+    <div class="raised-content">
+      <ng-content></ng-content>
+    </div>
+  </div>
+  `, isInline: true, styles: [".raised-wrap{position:relative;display:inline-block}.raised-bg{position:absolute;inset:0}.raised-content{position:relative}.zDepth-0{box-shadow:none}.zDepth-1{box-shadow:0 2px 10px #0000001f,0 2px 5px #00000029}.zDepth-2{box-shadow:0 6px 20px #00000030,0 8px 17px #0003}.zDepth-3{box-shadow:0 17px 50px #00000030,0 12px 15px #0000003d}.zDepth-4{box-shadow:0 25px 55px #00000036,0 16px 28px #00000038}.zDepth-5{box-shadow:0 40px 77px #00000038,0 27px 24px #0003}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+export { RaisedComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: RaisedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-raised', template: `
+  <div class="raised-wrap">
+    <div class="raised-bg zDepth-{{zDepth}}" [style.background]="background"></div>
+    <div class="raised-content">
+      <ng-content></ng-content>
+    </div>
+  </div>
+  `, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".raised-wrap{position:relative;display:inline-block}.raised-bg{position:absolute;inset:0}.raised-content{position:relative}.zDepth-0{box-shadow:none}.zDepth-1{box-shadow:0 2px 10px #0000001f,0 2px 5px #00000029}.zDepth-2{box-shadow:0 6px 20px #00000030,0 8px 17px #0003}.zDepth-3{box-shadow:0 17px 50px #00000030,0 12px 15px #0000003d}.zDepth-4{box-shadow:0 25px 55px #00000036,0 16px 28px #00000038}.zDepth-5{box-shadow:0 40px 77px #00000038,0 27px 24px #0003}\n"] }]
+        }], propDecorators: { zDepth: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }] } });
+class RaisedModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: RaisedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: RaisedModule, declarations: [RaisedComponent], imports: [CommonModule], exports: [RaisedComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: RaisedModule, imports: [CommonModule] });
+}
+export { RaisedModule };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: RaisedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [RaisedComponent],
+                    exports: [RaisedComponent],
+                    imports: [CommonModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFpc2VkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvcmFpc2VkLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUlwRixNQStDYSxlQUFlO0lBQ2pCLE1BQU0sR0FBVyxDQUFDLENBQUM7SUFDbkIsTUFBTSxHQUFHLENBQUMsQ0FBQztJQUNYLFVBQVUsR0FBRyxNQUFNLENBQUM7dUdBSGxCLGVBQWU7MkZBQWYsZUFBZSw4SEE3Q2hCOzs7Ozs7O0dBT1Q7O1NBc0NVLGVBQWU7MkZBQWYsZUFBZTtrQkEvQzNCLFNBQVM7K0JBQ0UsY0FBYyxZQUNkOzs7Ozs7O0dBT1QsdUJBbUNvQixLQUFLLG1CQUNULHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLE1BQU07c0JBQWQsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSzs7QUFHUixNQUthLFlBQVk7dUdBQVosWUFBWTt3R0FBWixZQUFZLGlCQVhaLGVBQWUsYUFTaEIsWUFBWSxhQVRYLGVBQWU7d0dBV2YsWUFBWSxZQUZiLFlBQVk7O1NBRVgsWUFBWTsyRkFBWixZQUFZO2tCQUx4QixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRSxDQUFDLGVBQWUsQ0FBQztvQkFDL0IsT0FBTyxFQUFFLENBQUMsZUFBZSxDQUFDO29CQUMxQixPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7aUJBQ3hCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0LCBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgdHlwZSB6RGVwdGggPSAwIHwgMSB8IDIgfCAzIHwgNCB8IDU7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLXJhaXNlZCcsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJyYWlzZWQtd3JhcFwiPlxuICAgIDxkaXYgY2xhc3M9XCJyYWlzZWQtYmcgekRlcHRoLXt7ekRlcHRofX1cIiBbc3R5bGUuYmFja2dyb3VuZF09XCJiYWNrZ3JvdW5kXCI+PC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInJhaXNlZC1jb250ZW50XCI+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtgXG4gICAgLnJhaXNlZC13cmFwIHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICB9XG4gICAgLnJhaXNlZC1iZyB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IDBweDtcbiAgICAgIHJpZ2h0OiAwcHg7XG4gICAgICBib3R0b206IDBweDtcbiAgICAgIGxlZnQ6IDBweDtcbiAgICB9XG4gICAgLnJhaXNlZC1jb250ZW50IHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB9XG4gICAgLnpEZXB0aC0wIHtcbiAgICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgfVxuICAgIC56RGVwdGgtMSB7XG4gICAgICBib3gtc2hhZG93OiAwIDJweCAxMHB4IHJnYmEoMCwwLDAsLjEyKSwgMCAycHggNXB4IHJnYmEoMCwwLDAsLjE2KTtcbiAgICB9XG4gICAgLnpEZXB0aC0yIHtcbiAgICAgIGJveC1zaGFkb3c6IDAgNnB4IDIwcHggcmdiYSgwLDAsMCwuMTkpLCAwIDhweCAxN3B4IHJnYmEoMCwwLDAsLjIpO1xuICAgIH1cbiAgICAuekRlcHRoLTMge1xuICAgICAgYm94LXNoYWRvdzogMCAxN3B4IDUwcHggcmdiYSgwLDAsMCwuMTkpLCAwIDEycHggMTVweCByZ2JhKDAsMCwwLC4yNCk7XG4gICAgfVxuICAgIC56RGVwdGgtNCB7XG4gICAgICBib3gtc2hhZG93OiAwIDI1cHggNTVweCByZ2JhKDAsMCwwLC4yMSksIDAgMTZweCAyOHB4IHJnYmEoMCwwLDAsLjIyKTtcbiAgICB9XG4gICAgLnpEZXB0aC01IHtcbiAgICAgIGJveC1zaGFkb3c6IDAgNDBweCA3N3B4IHJnYmEoMCwwLDAsLjIyKSwgMCAyN3B4IDI0cHggcmdiYSgwLDAsMCwuMik7XG4gICAgfVxuICBgXSxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBSYWlzZWRDb21wb25lbnQge1xuICBASW5wdXQoKSB6RGVwdGg6IHpEZXB0aCA9IDE7XG4gIEBJbnB1dCgpIHJhZGl1cyA9IDE7XG4gIEBJbnB1dCgpIGJhY2tncm91bmQgPSAnI2ZmZic7XG59XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1JhaXNlZENvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtSYWlzZWRDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgUmFpc2VkTW9kdWxlIHsgfVxuIl19

package/esm2022/saturation.component.mjs

@@ -0,0 +1,100 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Output, } from '@angular/core';
+import { CoordinatesModule } from './coordinates.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./coordinates.directive";
+class SaturationComponent {
+    hsl;
+    hsv;
+    radius;
+    pointer;
+    circle;
+    onChange = new EventEmitter();
+    background;
+    pointerTop;
+    pointerLeft;
+    ngOnChanges() {
+        this.background = `hsl(${this.hsl.h}, 100%, 50%)`;
+        this.pointerTop = -(this.hsv.v * 100) + 1 + 100 + '%';
+        this.pointerLeft = this.hsv.s * 100 + '%';
+    }
+    handleChange({ top, left, containerHeight, containerWidth, $event }) {
+        if (left < 0) {
+            left = 0;
+        }
+        else if (left > containerWidth) {
+            left = containerWidth;
+        }
+        else if (top < 0) {
+            top = 0;
+        }
+        else if (top > containerHeight) {
+            top = containerHeight;
+        }
+        const saturation = left / containerWidth;
+        let bright = -(top / containerHeight) + 1;
+        bright = bright > 0 ? bright : 0;
+        bright = bright > 1 ? 1 : bright;
+        const data = {
+            h: this.hsl.h,
+            s: saturation,
+            v: bright,
+            a: this.hsl.a,
+            source: 'hsva',
+        };
+        this.onChange.emit({ data, $event });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SaturationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: SaturationComponent, selector: "color-saturation", inputs: { hsl: "hsl", hsv: "hsv", radius: "radius", pointer: "pointer", circle: "circle" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
+  <div class="color-saturation" ngx-color-coordinates (coordinatesChange)="handleChange($event)" [style.background]="background">
+    <div class="saturation-white">
+      <div class="saturation-black"></div>
+      <div class="saturation-pointer" [ngStyle]="pointer" [style.top]="pointerTop" [style.left]="pointerLeft">
+        <div class="saturation-circle" [ngStyle]="circle"></div>
+      </div>
+    </div>
+  </div>
+  `, isInline: true, styles: [".saturation-white{background:linear-gradient(to right,#fff,rgba(255,255,255,0));position:absolute;inset:0}.saturation-black{background:linear-gradient(to top,#000,rgba(0,0,0,0));position:absolute;inset:0}.color-saturation{position:absolute;inset:0}.saturation-pointer{position:absolute;cursor:default}.saturation-circle{width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px #0000004d,0 0 1px 2px #0006;border-radius:50%;cursor:hand;transform:translate(-2px,-4px)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+export { SaturationComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SaturationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-saturation', template: `
+  <div class="color-saturation" ngx-color-coordinates (coordinatesChange)="handleChange($event)" [style.background]="background">
+    <div class="saturation-white">
+      <div class="saturation-black"></div>
+      <div class="saturation-pointer" [ngStyle]="pointer" [style.top]="pointerTop" [style.left]="pointerLeft">
+        <div class="saturation-circle" [ngStyle]="circle"></div>
+      </div>
+    </div>
+  </div>
+  `, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".saturation-white{background:linear-gradient(to right,#fff,rgba(255,255,255,0));position:absolute;inset:0}.saturation-black{background:linear-gradient(to top,#000,rgba(0,0,0,0));position:absolute;inset:0}.color-saturation{position:absolute;inset:0}.saturation-pointer{position:absolute;cursor:default}.saturation-circle{width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px #0000004d,0 0 1px 2px #0006;border-radius:50%;cursor:hand;transform:translate(-2px,-4px)}\n"] }]
+        }], propDecorators: { hsl: [{
+                type: Input
+            }], hsv: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], pointer: [{
+                type: Input
+            }], circle: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+class SaturationModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SaturationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: SaturationModule, declarations: [SaturationComponent], imports: [CommonModule, CoordinatesModule], exports: [SaturationComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SaturationModule, imports: [CommonModule, CoordinatesModule] });
+}
+export { SaturationModule };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: SaturationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SaturationComponent],
+                    exports: [SaturationComponent],
+                    imports: [CommonModule, CoordinatesModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2F0dXJhdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL3NhdHVyYXRpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLFFBQVEsRUFFUixNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFHdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0seUJBQXlCLENBQUM7Ozs7QUFHNUQsTUFzRGEsbUJBQW1CO0lBQ3JCLEdBQUcsQ0FBUTtJQUNYLEdBQUcsQ0FBUTtJQUNYLE1BQU0sQ0FBVTtJQUNoQixPQUFPLENBQTBCO0lBQ2pDLE1BQU0sQ0FBMEI7SUFDL0IsUUFBUSxHQUFHLElBQUksWUFBWSxFQUF1QyxDQUFDO0lBQzdFLFVBQVUsQ0FBVTtJQUNwQixVQUFVLENBQVU7SUFDcEIsV0FBVyxDQUFVO0lBRXJCLFdBQVc7UUFDVCxJQUFJLENBQUMsVUFBVSxHQUFHLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLGNBQWMsQ0FBQztRQUNsRCxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsR0FBRyxDQUFDLEdBQUcsR0FBRyxHQUFHLEdBQUcsQ0FBQztRQUN0RCxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsR0FBRyxHQUFHLENBQUM7SUFDNUMsQ0FBQztJQUNELFlBQVksQ0FBQyxFQUFFLEdBQUcsRUFBRSxJQUFJLEVBQUUsZUFBZSxFQUFFLGNBQWMsRUFBRSxNQUFNLEVBQUU7UUFDakUsSUFBSSxJQUFJLEdBQUcsQ0FBQyxFQUFFO1lBQ1osSUFBSSxHQUFHLENBQUMsQ0FBQztTQUNWO2FBQU0sSUFBSSxJQUFJLEdBQUcsY0FBYyxFQUFFO1lBQ2hDLElBQUksR0FBRyxjQUFjLENBQUM7U0FDdkI7YUFBTSxJQUFJLEdBQUcsR0FBRyxDQUFDLEVBQUU7WUFDbEIsR0FBRyxHQUFHLENBQUMsQ0FBQztTQUNUO2FBQU0sSUFBSSxHQUFHLEdBQUcsZUFBZSxFQUFFO1lBQ2hDLEdBQUcsR0FBRyxlQUFlLENBQUM7U0FDdkI7UUFFRCxNQUFNLFVBQVUsR0FBRyxJQUFJLEdBQUcsY0FBYyxDQUFDO1FBQ3pDLElBQUksTUFBTSxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsZUFBZSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQzFDLE1BQU0sR0FBRyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNqQyxNQUFNLEdBQUcsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUM7UUFFakMsTUFBTSxJQUFJLEdBQWU7WUFDdkIsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUNiLENBQUMsRUFBRSxVQUFVO1lBQ2IsQ0FBQyxFQUFFLE1BQU07WUFDVCxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1lBQ2IsTUFBTSxFQUFFLE1BQU07U0FDZixDQUFDO1FBQ0YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQztJQUN2QyxDQUFDO3VHQXhDVSxtQkFBbUI7MkZBQW5CLG1CQUFtQiw0TUFwRHBCOzs7Ozs7Ozs7R0FTVDs7U0EyQ1UsbUJBQW1COzJGQUFuQixtQkFBbUI7a0JBdEQvQixTQUFTOytCQUNFLGtCQUFrQixZQUNsQjs7Ozs7Ozs7O0dBU1QsdUJBd0NvQixLQUFLLG1CQUNULHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksUUFBUTtzQkFBakIsTUFBTTs7QUFxQ1QsTUFLYSxnQkFBZ0I7dUdBQWhCLGdCQUFnQjt3R0FBaEIsZ0JBQWdCLGlCQWhEaEIsbUJBQW1CLGFBOENwQixZQUFZLEVBQUUsaUJBQWlCLGFBOUM5QixtQkFBbUI7d0dBZ0RuQixnQkFBZ0IsWUFGakIsWUFBWSxFQUFFLGlCQUFpQjs7U0FFOUIsZ0JBQWdCOzJGQUFoQixnQkFBZ0I7a0JBTDVCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsbUJBQW1CLENBQUM7b0JBQ25DLE9BQU8sRUFBRSxDQUFDLG1CQUFtQixDQUFDO29CQUM5QixPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsaUJBQWlCLENBQUM7aUJBQzNDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE5nTW9kdWxlLFxuICBPbkNoYW5nZXMsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cblxuaW1wb3J0IHsgQ29vcmRpbmF0ZXNNb2R1bGUgfSBmcm9tICcuL2Nvb3JkaW5hdGVzLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBIU0xBLCBIU1ZBLCBIU1ZBc291cmNlIH0gZnJvbSAnLi9oZWxwZXJzL2NvbG9yLmludGVyZmFjZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1zYXR1cmF0aW9uJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGRpdiBjbGFzcz1cImNvbG9yLXNhdHVyYXRpb25cIiBuZ3gtY29sb3ItY29vcmRpbmF0ZXMgKGNvb3JkaW5hdGVzQ2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCIgW3N0eWxlLmJhY2tncm91bmRdPVwiYmFja2dyb3VuZFwiPlxuICAgIDxkaXYgY2xhc3M9XCJzYXR1cmF0aW9uLXdoaXRlXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwic2F0dXJhdGlvbi1ibGFja1wiPjwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInNhdHVyYXRpb24tcG9pbnRlclwiIFtuZ1N0eWxlXT1cInBvaW50ZXJcIiBbc3R5bGUudG9wXT1cInBvaW50ZXJUb3BcIiBbc3R5bGUubGVmdF09XCJwb2ludGVyTGVmdFwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic2F0dXJhdGlvbi1jaXJjbGVcIiBbbmdTdHlsZV09XCJjaXJjbGVcIj48L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgIC5zYXR1cmF0aW9uLXdoaXRlIHtcbiAgICAgIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCh0byByaWdodCwgI2ZmZiwgcmdiYSgyNTUsMjU1LDI1NSwwKSk7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IDA7XG4gICAgICBib3R0b206IDA7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgcmlnaHQ6IDA7XG4gICAgfVxuICAgIC5zYXR1cmF0aW9uLWJsYWNrIHtcbiAgICAgIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCh0byB0b3AsICMwMDAsIHJnYmEoMCwwLDAsMCkpO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHJpZ2h0OiAwO1xuICAgIH1cbiAgICAuY29sb3Itc2F0dXJhdGlvbiB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IDA7XG4gICAgICBib3R0b206IDA7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgcmlnaHQ6IDA7XG4gICAgfVxuICAgIC5zYXR1cmF0aW9uLXBvaW50ZXIge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgY3Vyc29yOiBkZWZhdWx0O1xuICAgIH1cbiAgICAuc2F0dXJhdGlvbi1jaXJjbGUge1xuICAgICAgd2lkdGg6IDRweDtcbiAgICAgIGhlaWdodDogNHB4O1xuICAgICAgYm94LXNoYWRvdzogMCAwIDAgMS41cHggI2ZmZiwgaW5zZXQgMCAwIDFweCAxcHggcmdiYSgwLDAsMCwuMyksIDAgMCAxcHggMnB4IHJnYmEoMCwwLDAsLjQpO1xuICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgY3Vyc29yOiBoYW5kO1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTJweCwgLTRweCk7XG4gICAgfVxuICBgLFxuICBdLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNhdHVyYXRpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBoc2whOiBIU0xBO1xuICBASW5wdXQoKSBoc3YhOiBIU1ZBO1xuICBASW5wdXQoKSByYWRpdXMhOiBudW1iZXI7XG4gIEBJbnB1dCgpIHBvaW50ZXIhOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+O1xuICBASW5wdXQoKSBjaXJjbGUhOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+O1xuICBAT3V0cHV0KCkgb25DaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHsgZGF0YTogSFNWQXNvdXJjZTsgJGV2ZW50OiBFdmVudCB9PigpO1xuICBiYWNrZ3JvdW5kITogc3RyaW5nO1xuICBwb2ludGVyVG9wITogc3RyaW5nO1xuICBwb2ludGVyTGVmdCE6IHN0cmluZztcblxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICB0aGlzLmJhY2tncm91bmQgPSBgaHNsKCR7dGhpcy5oc2wuaH0sIDEwMCUsIDUwJSlgO1xuICAgIHRoaXMucG9pbnRlclRvcCA9IC0odGhpcy5oc3YudiAqIDEwMCkgKyAxICsgMTAwICsgJyUnO1xuICAgIHRoaXMucG9pbnRlckxlZnQgPSB0aGlzLmhzdi5zICogMTAwICsgJyUnO1xuICB9XG4gIGhhbmRsZUNoYW5nZSh7IHRvcCwgbGVmdCwgY29udGFpbmVySGVpZ2h0LCBjb250YWluZXJXaWR0aCwgJGV2ZW50IH0pIHtcbiAgICBpZiAobGVmdCA8IDApIHtcbiAgICAgIGxlZnQgPSAwO1xuICAgIH0gZWxzZSBpZiAobGVmdCA+IGNvbnRhaW5lcldpZHRoKSB7XG4gICAgICBsZWZ0ID0gY29udGFpbmVyV2lkdGg7XG4gICAgfSBlbHNlIGlmICh0b3AgPCAwKSB7XG4gICAgICB0b3AgPSAwO1xuICAgIH0gZWxzZSBpZiAodG9wID4gY29udGFpbmVySGVpZ2h0KSB7XG4gICAgICB0b3AgPSBjb250YWluZXJIZWlnaHQ7XG4gICAgfVxuXG4gICAgY29uc3Qgc2F0dXJhdGlvbiA9IGxlZnQgLyBjb250YWluZXJXaWR0aDtcbiAgICBsZXQgYnJpZ2h0ID0gLSh0b3AgLyBjb250YWluZXJIZWlnaHQpICsgMTtcbiAgICBicmlnaHQgPSBicmlnaHQgPiAwID8gYnJpZ2h0IDogMDtcbiAgICBicmlnaHQgPSBicmlnaHQgPiAxID8gMSA6IGJyaWdodDtcblxuICAgIGNvbnN0IGRhdGE6IEhTVkFzb3VyY2UgPSB7XG4gICAgICBoOiB0aGlzLmhzbC5oLFxuICAgICAgczogc2F0dXJhdGlvbixcbiAgICAgIHY6IGJyaWdodCxcbiAgICAgIGE6IHRoaXMuaHNsLmEsXG4gICAgICBzb3VyY2U6ICdoc3ZhJyxcbiAgICB9O1xuICAgIHRoaXMub25DaGFuZ2UuZW1pdCh7IGRhdGEsICRldmVudCB9KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtTYXR1cmF0aW9uQ29tcG9uZW50XSxcbiAgZXhwb3J0czogW1NhdHVyYXRpb25Db21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBDb29yZGluYXRlc01vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIFNhdHVyYXRpb25Nb2R1bGUge31cbiJdfQ==

package/esm2022/shade/shade-picker.component.mjs

@@ -0,0 +1,94 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
+import { ColorWrap, ShadeModule, toState } from 'ngx-color';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-color";
+class ShadeSliderComponent extends ColorWrap {
+    /** Pixel value for picker width */
+    width = 316;
+    /** Pixel value for picker height */
+    height = 16;
+    pointer = {
+        width: '18px',
+        height: '18px',
+        borderRadius: '50%',
+        transform: 'translate(-9px, -2px)',
+        boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
+    };
+    constructor() {
+        super();
+    }
+    ngOnChanges() {
+        this.setState(toState(this.color, this.oldHue));
+    }
+    handlePickerChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ShadeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: ShadeSliderComponent, selector: "color-shade-picker", inputs: { width: "width", height: "height" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ShadeSliderComponent),
+                multi: true,
+            },
+            {
+                provide: ColorWrap,
+                useExisting: forwardRef(() => ShadeSliderComponent),
+            },
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    <div class="shade-slider {{ className || '' }}"
+      [style.width.px]="width" [style.height.px]="height">
+      <color-shade
+        [hsl]="hsl"
+        [rgb]="rgb"
+        [pointer]="pointer"
+        (onChange)="handlePickerChange($event)"
+      ></color-shade>
+    </div>
+  `, isInline: true, styles: [".shade-slider{position:relative}\n"], dependencies: [{ kind: "component", type: i1.ShadeComponent, selector: "color-shade", inputs: ["hsl", "rgb", "pointer", "shadow", "radius"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+export { ShadeSliderComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ShadeSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-shade-picker', template: `
+    <div class="shade-slider {{ className || '' }}"
+      [style.width.px]="width" [style.height.px]="height">
+      <color-shade
+        [hsl]="hsl"
+        [rgb]="rgb"
+        [pointer]="pointer"
+        (onChange)="handlePickerChange($event)"
+      ></color-shade>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ShadeSliderComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => ShadeSliderComponent),
+                        },
+                    ], styles: [".shade-slider{position:relative}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }] } });
+class ColorShadeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorShadeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: ColorShadeModule, declarations: [ShadeSliderComponent], imports: [CommonModule, ShadeModule], exports: [ShadeSliderComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorShadeModule, imports: [CommonModule, ShadeModule] });
+}
+export { ColorShadeModule };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorShadeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ShadeSliderComponent],
+                    exports: [ShadeSliderComponent],
+                    imports: [CommonModule, ShadeModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhZGUtcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvc2hhZGUvc2hhZGUtcGlja2VyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUMzRyxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxPQUFPLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDNUQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7OztBQUVuRCxNQWtDYSxvQkFBcUIsU0FBUSxTQUFTO0lBQ2pELG1DQUFtQztJQUMxQixLQUFLLEdBQW9CLEdBQUcsQ0FBQztJQUN0QyxvQ0FBb0M7SUFDM0IsTUFBTSxHQUFvQixFQUFFLENBQUM7SUFDdEMsT0FBTyxHQUE0QjtRQUNqQyxLQUFLLEVBQUUsTUFBTTtRQUNiLE1BQU0sRUFBRSxNQUFNO1FBQ2QsWUFBWSxFQUFFLEtBQUs7UUFDbkIsU0FBUyxFQUFFLHVCQUF1QjtRQUNsQyxTQUFTLEVBQUUsaUNBQWlDO0tBQzdDLENBQUM7SUFFRjtRQUNFLEtBQUssRUFBRSxDQUFDO0lBQ1YsQ0FBQztJQUNELFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO0lBQ2xELENBQUM7SUFDRCxrQkFBa0IsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7UUFDakMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLEVBQUUsTUFBTSxDQUFDLENBQUM7SUFDbEMsQ0FBQzt1R0FyQlUsb0JBQW9COzJGQUFwQixvQkFBb0IsMkZBWnBCO1lBQ1Q7Z0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQztnQkFDbkQsS0FBSyxFQUFFLElBQUk7YUFDWjtZQUNEO2dCQUNFLE9BQU8sRUFBRSxTQUFTO2dCQUNsQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG9CQUFvQixDQUFDO2FBQ3BEO1NBQ0Ysc0VBOUJTOzs7Ozs7Ozs7O0dBVVQ7O1NBc0JVLG9CQUFvQjsyRkFBcEIsb0JBQW9CO2tCQWxDaEMsU0FBUzsrQkFDRSxvQkFBb0IsWUFDcEI7Ozs7Ozs7Ozs7R0FVVCxtQkFRZ0IsdUJBQXVCLENBQUMsTUFBTSx1QkFDMUIsS0FBSyxhQUNmO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHFCQUFxQixDQUFDOzRCQUNuRCxLQUFLLEVBQUUsSUFBSTt5QkFDWjt3QkFDRDs0QkFDRSxPQUFPLEVBQUUsU0FBUzs0QkFDbEIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUscUJBQXFCLENBQUM7eUJBQ3BEO3FCQUNGOzBFQUlRLEtBQUs7c0JBQWIsS0FBSztnQkFFRyxNQUFNO3NCQUFkLEtBQUs7O0FBb0JSLE1BS2EsZ0JBQWdCO3VHQUFoQixnQkFBZ0I7d0dBQWhCLGdCQUFnQixpQkE3QmhCLG9CQUFvQixhQTJCckIsWUFBWSxFQUFFLFdBQVcsYUEzQnhCLG9CQUFvQjt3R0E2QnBCLGdCQUFnQixZQUZqQixZQUFZLEVBQUUsV0FBVzs7U0FFeEIsZ0JBQWdCOzJGQUFoQixnQkFBZ0I7a0JBTDVCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsb0JBQW9CLENBQUM7b0JBQ3BDLE9BQU8sRUFBRSxDQUFDLG9CQUFvQixDQUFDO29CQUMvQixPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsV0FBVyxDQUFDO2lCQUNyQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgTmdNb2R1bGUsIE9uQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29sb3JXcmFwLCBTaGFkZU1vZHVsZSwgdG9TdGF0ZSB9IGZyb20gJ25neC1jb2xvcic7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3Itc2hhZGUtcGlja2VyJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwic2hhZGUtc2xpZGVyIHt7IGNsYXNzTmFtZSB8fCAnJyB9fVwiXG4gICAgICBbc3R5bGUud2lkdGgucHhdPVwid2lkdGhcIiBbc3R5bGUuaGVpZ2h0LnB4XT1cImhlaWdodFwiPlxuICAgICAgPGNvbG9yLXNoYWRlXG4gICAgICAgIFtoc2xdPVwiaHNsXCJcbiAgICAgICAgW3JnYl09XCJyZ2JcIlxuICAgICAgICBbcG9pbnRlcl09XCJwb2ludGVyXCJcbiAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVBpY2tlckNoYW5nZSgkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLXNoYWRlPlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgLnNoYWRlLXNsaWRlciB7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU2hhZGVTbGlkZXJDb21wb25lbnQpLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfSxcbiAgICB7XG4gICAgICBwcm92aWRlOiBDb2xvcldyYXAsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBTaGFkZVNsaWRlckNvbXBvbmVudCksXG4gICAgfSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBTaGFkZVNsaWRlckNvbXBvbmVudCBleHRlbmRzIENvbG9yV3JhcCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIC8qKiBQaXhlbCB2YWx1ZSBmb3IgcGlja2VyIHdpZHRoICovXG4gIEBJbnB1dCgpIHdpZHRoOiBzdHJpbmcgfCBudW1iZXIgPSAzMTY7XG4gIC8qKiBQaXhlbCB2YWx1ZSBmb3IgcGlja2VyIGhlaWdodCAqL1xuICBASW5wdXQoKSBoZWlnaHQ6IHN0cmluZyB8IG51bWJlciA9IDE2O1xuICBwb2ludGVyOiB7W2tleTogc3RyaW5nXTogc3RyaW5nfSA9IHtcbiAgICB3aWR0aDogJzE4cHgnLFxuICAgIGhlaWdodDogJzE4cHgnLFxuICAgIGJvcmRlclJhZGl1czogJzUwJScsXG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlKC05cHgsIC0ycHgpJyxcbiAgICBib3hTaGFkb3c6ICcwIDFweCA0cHggMCByZ2JhKDAsIDAsIDAsIDAuMzcpJyxcbiAgfTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG4gIG5nT25DaGFuZ2VzKCkge1xuICAgIHRoaXMuc2V0U3RhdGUodG9TdGF0ZSh0aGlzLmNvbG9yLCB0aGlzLm9sZEh1ZSkpO1xuICB9XG4gIGhhbmRsZVBpY2tlckNoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgdGhpcy5oYW5kbGVDaGFuZ2UoZGF0YSwgJGV2ZW50KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtTaGFkZVNsaWRlckNvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtTaGFkZVNsaWRlckNvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFNoYWRlTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JTaGFkZU1vZHVsZSB7fVxuIl19