ngx-color 9.0.0 → 10.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/coordinates.directive.d.ts +1 -2
- package/fesm2022/ngx-color-alpha.mjs +15 -17
- package/fesm2022/ngx-color-alpha.mjs.map +1 -1
- package/fesm2022/ngx-color-block.mjs +87 -76
- package/fesm2022/ngx-color-block.mjs.map +1 -1
- package/fesm2022/ngx-color-chrome.mjs +186 -145
- package/fesm2022/ngx-color-chrome.mjs.map +1 -1
- package/fesm2022/ngx-color-circle.mjs +68 -51
- package/fesm2022/ngx-color-circle.mjs.map +1 -1
- package/fesm2022/ngx-color-compact.mjs +163 -145
- package/fesm2022/ngx-color-compact.mjs.map +1 -1
- package/fesm2022/ngx-color-github.mjs +36 -37
- package/fesm2022/ngx-color-github.mjs.map +1 -1
- package/fesm2022/ngx-color-hue.mjs +27 -25
- package/fesm2022/ngx-color-hue.mjs.map +1 -1
- package/fesm2022/ngx-color-material.mjs +77 -61
- package/fesm2022/ngx-color-material.mjs.map +1 -1
- package/fesm2022/ngx-color-photoshop.mjs +224 -214
- package/fesm2022/ngx-color-photoshop.mjs.map +1 -1
- package/fesm2022/ngx-color-shade.mjs +19 -13
- package/fesm2022/ngx-color-shade.mjs.map +1 -1
- package/fesm2022/ngx-color-sketch.mjs +232 -227
- package/fesm2022/ngx-color-sketch.mjs.map +1 -1
- package/fesm2022/ngx-color-slider.mjs +153 -145
- package/fesm2022/ngx-color-slider.mjs.map +1 -1
- package/fesm2022/ngx-color-swatches.mjs +118 -216
- package/fesm2022/ngx-color-swatches.mjs.map +1 -1
- package/fesm2022/ngx-color-twitter.mjs +61 -58
- package/fesm2022/ngx-color-twitter.mjs.map +1 -1
- package/fesm2022/ngx-color.mjs +231 -187
- package/fesm2022/ngx-color.mjs.map +1 -1
- package/package.json +4 -34
- package/esm2022/alpha/alpha-picker.component.mjs +0 -102
- package/esm2022/alpha/ngx-color-alpha.mjs +0 -5
- package/esm2022/alpha/public_api.mjs +0 -2
- package/esm2022/alpha.component.mjs +0 -146
- package/esm2022/block/block-swatches.component.mjs +0 -63
- package/esm2022/block/block.component.mjs +0 -160
- package/esm2022/block/ngx-color-block.mjs +0 -5
- package/esm2022/block/public_api.mjs +0 -3
- package/esm2022/checkboard.component.mjs +0 -53
- package/esm2022/chrome/chrome-fields.component.mjs +0 -317
- package/esm2022/chrome/chrome.component.mjs +0 -187
- package/esm2022/chrome/ngx-color-chrome.mjs +0 -5
- package/esm2022/chrome/public_api.mjs +0 -3
- package/esm2022/circle/circle-swatch.component.mjs +0 -69
- package/esm2022/circle/circle.component.mjs +0 -136
- package/esm2022/circle/ngx-color-circle.mjs +0 -5
- package/esm2022/circle/public_api.mjs +0 -3
- package/esm2022/color-wrap.component.mjs +0 -173
- package/esm2022/compact/compact-color.component.mjs +0 -71
- package/esm2022/compact/compact-fields.component.mjs +0 -165
- package/esm2022/compact/compact.component.mjs +0 -156
- package/esm2022/compact/ngx-color-compact.mjs +0 -5
- package/esm2022/compact/public_api.mjs +0 -4
- package/esm2022/coordinates.directive.mjs +0 -108
- package/esm2022/editable-input.component.mjs +0 -212
- package/esm2022/github/github-swatch.component.mjs +0 -53
- package/esm2022/github/github.component.mjs +0 -114
- package/esm2022/github/ngx-color-github.mjs +0 -5
- package/esm2022/github/public_api.mjs +0 -3
- package/esm2022/helpers/checkboard.mjs +0 -33
- package/esm2022/helpers/color.interfaces.mjs +0 -2
- package/esm2022/helpers/color.mjs +0 -60
- package/esm2022/hue/hue-picker.component.mjs +0 -102
- package/esm2022/hue/ngx-color-hue.mjs +0 -5
- package/esm2022/hue/public_api.mjs +0 -2
- package/esm2022/hue.component.mjs +0 -128
- package/esm2022/material/material.component.mjs +0 -188
- package/esm2022/material/ngx-color-material.mjs +0 -5
- package/esm2022/material/public_api.mjs +0 -2
- package/esm2022/ngx-color.mjs +0 -5
- package/esm2022/photoshop/ngx-color-photoshop.mjs +0 -5
- package/esm2022/photoshop/photoshop-button.component.mjs +0 -33
- package/esm2022/photoshop/photoshop-fields.component.mjs +0 -214
- package/esm2022/photoshop/photoshop-previews.component.mjs +0 -40
- package/esm2022/photoshop/photoshop.component.mjs +0 -187
- package/esm2022/photoshop/public_api.mjs +0 -5
- package/esm2022/public_api.mjs +0 -14
- package/esm2022/raised.component.mjs +0 -50
- package/esm2022/saturation.component.mjs +0 -100
- package/esm2022/shade/ngx-color-shade.mjs +0 -5
- package/esm2022/shade/public_api.mjs +0 -2
- package/esm2022/shade/shade-picker.component.mjs +0 -94
- package/esm2022/shade.component.mjs +0 -133
- package/esm2022/sketch/ngx-color-sketch.mjs +0 -5
- package/esm2022/sketch/public_api.mjs +0 -4
- package/esm2022/sketch/sketch-fields.component.mjs +0 -211
- package/esm2022/sketch/sketch-preset-colors.component.mjs +0 -68
- package/esm2022/sketch/sketch.component.mjs +0 -215
- package/esm2022/slider/ngx-color-slider.mjs +0 -5
- package/esm2022/slider/public_api.mjs +0 -4
- package/esm2022/slider/slider-swatch.component.mjs +0 -55
- package/esm2022/slider/slider-swatches.component.mjs +0 -119
- package/esm2022/slider/slider.component.mjs +0 -104
- package/esm2022/swatch.component.mjs +0 -112
- package/esm2022/swatches/ngx-color-swatches.mjs +0 -5
- package/esm2022/swatches/public_api.mjs +0 -4
- package/esm2022/swatches/swatches-color.component.mjs +0 -105
- package/esm2022/swatches/swatches-group.component.mjs +0 -50
- package/esm2022/swatches/swatches.component.mjs +0 -244
- package/esm2022/twitter/ngx-color-twitter.mjs +0 -5
- package/esm2022/twitter/public_api.mjs +0 -2
- package/esm2022/twitter/twitter.component.mjs +0 -161
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-github.mjs","sources":["../../src/lib/github/github-swatch.component.ts","../../src/lib/github/github.component.ts","../../src/lib/github/ngx-color-github.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\n@Component({\n selector: 'color-github-swatch',\n template: `\n <div class=\"github-swatch\">\n <color-swatch\n [color]=\"color\"\n [focusStyle]=\"focusStyle\"\n (onClick)=\"handleClick($event)\"\n (onHover)=\"onSwatchHover.emit($event)\"\n class=\"swatch\"\n ></color-swatch>\n <div class=\"clear\"></div>\n </div>\n `,\n styles: [\n `\n .github-swatch {\n width: 25px;\n height: 25px;\n font-size: 0;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n})\nexport class GithubSwatchComponent {\n @Input() color!: string;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n focusStyle = {\n position: 'relative',\n 'z-index': '2',\n outline: '2px solid #fff',\n 'box-shadow': '0 0 5px 2px rgba(0,0,0,0.25)',\n };\n\n handleClick({ hex, $event }) {\n this.onClick.emit({ hex, $event });\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';\nimport { GithubSwatchComponent } from './github-swatch.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-github',\n template: `\n
|
1
|
+
{"version":3,"file":"ngx-color-github.mjs","sources":["../../src/lib/github/github-swatch.component.ts","../../src/lib/github/github.component.ts","../../src/lib/github/ngx-color-github.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\n@Component({\n selector: 'color-github-swatch',\n template: `\n <div class=\"github-swatch\">\n <color-swatch\n [color]=\"color\"\n [focusStyle]=\"focusStyle\"\n (onClick)=\"handleClick($event)\"\n (onHover)=\"onSwatchHover.emit($event)\"\n class=\"swatch\"\n ></color-swatch>\n <div class=\"clear\"></div>\n </div>\n `,\n styles: [\n `\n .github-swatch {\n width: 25px;\n height: 25px;\n font-size: 0;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n standalone: false,\n})\nexport class GithubSwatchComponent {\n @Input() color!: string;\n @Output() onClick = new EventEmitter<any>();\n @Output() onSwatchHover = new EventEmitter<any>();\n focusStyle = {\n position: 'relative',\n 'z-index': '2',\n outline: '2px solid #fff',\n 'box-shadow': '0 0 5px 2px rgba(0,0,0,0.25)',\n };\n\n handleClick({ hex, $event }) {\n this.onClick.emit({ hex, $event });\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';\nimport { GithubSwatchComponent } from './github-swatch.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-github',\n template: `\n <div class=\"github-picker {{ triangle }}-triangle {{ className }}\" [style.width.px]=\"width\">\n <div class=\"triangleShadow\"></div>\n <div class=\"triangle\"></div>\n @for (color of colors; track color) {\n <color-github-swatch\n [color]=\"color\"\n (onClick)=\"handleBlockChange($event)\"\n (onSwatchHover)=\"onSwatchHover.emit($event)\"\n ></color-github-swatch>\n }\n </div>\n `,\n styles: [\n `\n .github-picker {\n background: rgb(255, 255, 255);\n border: 1px solid rgba(0, 0, 0, 0.2);\n box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 12px;\n border-radius: 4px;\n position: relative;\n padding: 5px;\n display: flex;\n flex-wrap: wrap;\n box-sizing: border-box;\n }\n .triangleShadow {\n position: absolute;\n border-width: 8px;\n border-style: solid;\n border-color: transparent transparent rgba(0, 0, 0, 0.15);\n border-image: initial;\n }\n .triangle {\n position: absolute;\n border-width: 7px;\n border-style: solid;\n border-color: transparent transparent rgb(255, 255, 255);\n border-image: initial;\n }\n .hide-triangle > .triangle {\n display: none;\n }\n .hide-triangle > .triangleShadow {\n display: none;\n }\n .top-left-triangle > .triangle {\n top: -14px;\n left: 10px;\n }\n .top-left-triangle > .triangleShadow {\n top: -16px;\n left: 9px;\n }\n .top-right-triangle > .triangle {\n top: -14px;\n right: 10px;\n }\n .top-right-triangle > .triangleShadow {\n top: -16px;\n right: 9px;\n }\n .bottom-right-triangle > .triangle {\n top: 35px;\n right: 10px;\n transform: rotate(180deg);\n }\n .bottom-right-triangle > .triangleShadow {\n top: 37px;\n right: 9px;\n transform: rotate(180deg);\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => GithubComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => GithubComponent),\n },\n ],\n standalone: false,\n})\nexport class GithubComponent extends ColorWrap {\n /** Pixel value for picker width */\n @Input() width: string | number = 212;\n /** Color squares to display */\n @Input() colors = [\n '#B80000',\n '#DB3E00',\n '#FCCB00',\n '#008B02',\n '#006B76',\n '#1273DE',\n '#004DCF',\n '#5300EB',\n '#EB9694',\n '#FAD0C3',\n '#FEF3BD',\n '#C1E1C5',\n '#BEDADC',\n '#C4DEF6',\n '#BED3F3',\n '#D4C4FB',\n ];\n @Input() triangle: 'hide' | 'top-left' | 'top-right' | 'bottom-right' = 'top-left';\n\n constructor() {\n super();\n }\n\n handleBlockChange({ hex, $event }: { hex: string; $event: Event }) {\n if (isValidHex(hex)) {\n this.handleChange({ hex, source: 'hex' }, $event);\n }\n }\n handleValueChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n}\n\n@NgModule({\n declarations: [GithubComponent, GithubSwatchComponent],\n exports: [GithubComponent, GithubSwatchComponent],\n imports: [CommonModule, SwatchModule],\n})\nexport class ColorGithubModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
@@ -32,8 +32,8 @@ class HuePickerComponent extends ColorWrap {
|
|
32
32
|
handlePickerChange({ data, $event }) {
|
33
33
|
this.handleChange({ a: 1, h: data.h, l: 0.5, s: 1 }, $event);
|
34
34
|
}
|
35
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
36
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
35
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HuePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: HuePickerComponent, isStandalone: false, selector: "color-hue-picker", inputs: { width: "width", height: "height", radius: "radius", direction: "direction" }, providers: [
|
37
37
|
{
|
38
38
|
provide: NG_VALUE_ACCESSOR,
|
39
39
|
useExisting: forwardRef(() => HuePickerComponent),
|
@@ -44,27 +44,29 @@ class HuePickerComponent extends ColorWrap {
|
|
44
44
|
useExisting: forwardRef(() => HuePickerComponent),
|
45
45
|
},
|
46
46
|
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
47
|
+
<div class="hue-picker {{ className }}" [style.width.px]="width" [style.height.px]="height">
|
48
|
+
<color-hue
|
49
|
+
[hsl]="hsl"
|
50
|
+
[pointer]="pointer"
|
51
|
+
[direction]="direction"
|
52
|
+
[radius]="radius"
|
53
|
+
(onChange)="handlePickerChange($event)"
|
54
|
+
></color-hue>
|
55
|
+
</div>
|
55
56
|
`, isInline: true, styles: [".hue-picker{position:relative}\n"], dependencies: [{ kind: "component", type: i1.HueComponent, selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
56
57
|
}
|
57
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
58
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HuePickerComponent, decorators: [{
|
58
59
|
type: Component,
|
59
60
|
args: [{ selector: 'color-hue-picker', template: `
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
61
|
+
<div class="hue-picker {{ className }}" [style.width.px]="width" [style.height.px]="height">
|
62
|
+
<color-hue
|
63
|
+
[hsl]="hsl"
|
64
|
+
[pointer]="pointer"
|
65
|
+
[direction]="direction"
|
66
|
+
[radius]="radius"
|
67
|
+
(onChange)="handlePickerChange($event)"
|
68
|
+
></color-hue>
|
69
|
+
</div>
|
68
70
|
`, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
|
69
71
|
{
|
70
72
|
provide: NG_VALUE_ACCESSOR,
|
@@ -75,8 +77,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
|
|
75
77
|
provide: ColorWrap,
|
76
78
|
useExisting: forwardRef(() => HuePickerComponent),
|
77
79
|
},
|
78
|
-
], styles: [".hue-picker{position:relative}\n"] }]
|
79
|
-
}], ctorParameters:
|
80
|
+
], standalone: false, styles: [".hue-picker{position:relative}\n"] }]
|
81
|
+
}], ctorParameters: () => [], propDecorators: { width: [{
|
80
82
|
type: Input
|
81
83
|
}], height: [{
|
82
84
|
type: Input
|
@@ -86,11 +88,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
|
|
86
88
|
type: Input
|
87
89
|
}] } });
|
88
90
|
class ColorHueModule {
|
89
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
90
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
91
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
91
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorHueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
92
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ColorHueModule, declarations: [HuePickerComponent], imports: [CommonModule, HueModule], exports: [HuePickerComponent] });
|
93
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorHueModule, imports: [CommonModule, HueModule] });
|
92
94
|
}
|
93
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorHueModule, decorators: [{
|
94
96
|
type: NgModule,
|
95
97
|
args: [{
|
96
98
|
declarations: [HuePickerComponent],
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-hue.mjs","sources":["../../src/lib/hue/hue-picker.component.ts","../../src/lib/hue/ngx-color-hue.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {
|
1
|
+
{"version":3,"file":"ngx-color-hue.mjs","sources":["../../src/lib/hue/hue-picker.component.ts","../../src/lib/hue/ngx-color-hue.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n forwardRef,\n Input,\n NgModule,\n OnChanges,\n} from '@angular/core';\n\nimport { ColorWrap, HueModule, toState } from 'ngx-color';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-hue-picker',\n template: `\n <div class=\"hue-picker {{ className }}\" [style.width.px]=\"width\" [style.height.px]=\"height\">\n <color-hue\n [hsl]=\"hsl\"\n [pointer]=\"pointer\"\n [direction]=\"direction\"\n [radius]=\"radius\"\n (onChange)=\"handlePickerChange($event)\"\n ></color-hue>\n </div>\n `,\n styles: [\n `\n .hue-picker {\n position: relative;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => HuePickerComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => HuePickerComponent),\n },\n ],\n standalone: false,\n})\nexport class HuePickerComponent extends ColorWrap implements OnChanges {\n /** Pixel value for picker width */\n @Input() width: string | number = 316;\n /** Pixel value for picker height */\n @Input() height: string | number = 16;\n @Input() radius = 2;\n @Input() direction: 'horizontal' | 'vertical' = 'horizontal';\n pointer: { [key: string]: string } = {\n width: '18px',\n height: '18px',\n borderRadius: '50%',\n transform: 'translate(-9px, -2px)',\n backgroundColor: 'rgb(248, 248, 248)',\n boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',\n };\n\n constructor() {\n super();\n }\n\n ngOnChanges() {\n if (this.direction === 'vertical') {\n this.pointer.transform = 'translate(-3px, -9px)';\n }\n this.setState(toState(this.color, this.oldHue));\n }\n handlePickerChange({ data, $event }) {\n this.handleChange({ a: 1, h: data.h, l: 0.5, s: 1 }, $event);\n }\n}\n\n@NgModule({\n declarations: [HuePickerComponent],\n exports: [HuePickerComponent],\n imports: [CommonModule, HueModule],\n})\nexport class ColorHueModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
@@ -80,8 +80,8 @@ class MaterialComponent extends ColorWrap {
|
|
80
80
|
afterValidChange() {
|
81
81
|
this.HEXinput['border-bottom-color'] = this.hex;
|
82
82
|
}
|
83
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
84
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
83
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MaterialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
84
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: MaterialComponent, isStandalone: false, selector: "color-material", inputs: { zDepth: "zDepth", radius: "radius", background: "background" }, providers: [
|
85
85
|
{
|
86
86
|
provide: NG_VALUE_ACCESSOR,
|
87
87
|
useExisting: forwardRef(() => MaterialComponent),
|
@@ -92,67 +92,83 @@ class MaterialComponent extends ColorWrap {
|
|
92
92
|
useExisting: forwardRef(() => MaterialComponent),
|
93
93
|
},
|
94
94
|
], usesInheritance: true, ngImport: i0, template: `
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
95
|
+
<color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
|
96
|
+
<div class="material-picker {{ className }}">
|
97
|
+
<color-editable-input
|
98
|
+
label="hex"
|
99
|
+
[value]="hex"
|
100
|
+
(onChange)="handleValueChange($event)"
|
101
|
+
[style]="{ input: HEXinput, label: HEXlabel }"
|
102
|
+
></color-editable-input>
|
103
|
+
<div class="material-split">
|
104
|
+
<div class="material-third">
|
105
|
+
<color-editable-input
|
106
|
+
label="r"
|
107
|
+
[value]="rgb.r"
|
108
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
109
|
+
(onChange)="handleInputChange($event)"
|
110
|
+
></color-editable-input>
|
111
|
+
</div>
|
112
|
+
<div class="material-third">
|
113
|
+
<color-editable-input
|
114
|
+
label="g"
|
115
|
+
[value]="rgb.g"
|
116
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
117
|
+
(onChange)="handleInputChange($event)"
|
118
|
+
></color-editable-input>
|
119
|
+
</div>
|
120
|
+
<div class="material-third">
|
121
|
+
<color-editable-input
|
122
|
+
label="b"
|
123
|
+
[value]="rgb.b"
|
124
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
125
|
+
(onChange)="handleInputChange($event)"
|
126
|
+
></color-editable-input>
|
127
|
+
</div>
|
119
128
|
</div>
|
120
129
|
</div>
|
121
|
-
</
|
122
|
-
</color-raised>
|
130
|
+
</color-raised>
|
123
131
|
`, isInline: true, styles: [".material-picker{width:130px;height:130px;padding:16px;font-family:Roboto}.material-split{display:flex;margin-right:-10px;padding-top:11px}.material-third{flex:1 1 0%;padding-right:10px}\n"], dependencies: [{ kind: "component", type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }, { kind: "component", type: i1.RaisedComponent, selector: "color-raised", inputs: ["zDepth", "radius", "background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
124
132
|
}
|
125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MaterialComponent, decorators: [{
|
126
134
|
type: Component,
|
127
135
|
args: [{ selector: 'color-material', template: `
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
136
|
+
<color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
|
137
|
+
<div class="material-picker {{ className }}">
|
138
|
+
<color-editable-input
|
139
|
+
label="hex"
|
140
|
+
[value]="hex"
|
141
|
+
(onChange)="handleValueChange($event)"
|
142
|
+
[style]="{ input: HEXinput, label: HEXlabel }"
|
143
|
+
></color-editable-input>
|
144
|
+
<div class="material-split">
|
145
|
+
<div class="material-third">
|
146
|
+
<color-editable-input
|
147
|
+
label="r"
|
148
|
+
[value]="rgb.r"
|
149
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
150
|
+
(onChange)="handleInputChange($event)"
|
151
|
+
></color-editable-input>
|
152
|
+
</div>
|
153
|
+
<div class="material-third">
|
154
|
+
<color-editable-input
|
155
|
+
label="g"
|
156
|
+
[value]="rgb.g"
|
157
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
158
|
+
(onChange)="handleInputChange($event)"
|
159
|
+
></color-editable-input>
|
160
|
+
</div>
|
161
|
+
<div class="material-third">
|
162
|
+
<color-editable-input
|
163
|
+
label="b"
|
164
|
+
[value]="rgb.b"
|
165
|
+
[style]="{ input: RGBinput, label: RGBlabel }"
|
166
|
+
(onChange)="handleInputChange($event)"
|
167
|
+
></color-editable-input>
|
168
|
+
</div>
|
152
169
|
</div>
|
153
170
|
</div>
|
154
|
-
</
|
155
|
-
</color-raised>
|
171
|
+
</color-raised>
|
156
172
|
`, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
|
157
173
|
{
|
158
174
|
provide: NG_VALUE_ACCESSOR,
|
@@ -163,8 +179,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
|
|
163
179
|
provide: ColorWrap,
|
164
180
|
useExisting: forwardRef(() => MaterialComponent),
|
165
181
|
},
|
166
|
-
], styles: [".material-picker{width:130px;height:130px;padding:16px;font-family:Roboto}.material-split{display:flex;margin-right:-10px;padding-top:11px}.material-third{flex:1 1 0%;padding-right:10px}\n"] }]
|
167
|
-
}], ctorParameters:
|
182
|
+
], standalone: false, styles: [".material-picker{width:130px;height:130px;padding:16px;font-family:Roboto}.material-split{display:flex;margin-right:-10px;padding-top:11px}.material-third{flex:1 1 0%;padding-right:10px}\n"] }]
|
183
|
+
}], ctorParameters: () => [], propDecorators: { zDepth: [{
|
168
184
|
type: Input
|
169
185
|
}], radius: [{
|
170
186
|
type: Input
|
@@ -172,11 +188,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
|
|
172
188
|
type: Input
|
173
189
|
}] } });
|
174
190
|
class ColorMaterialModule {
|
175
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
176
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
177
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
191
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorMaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
192
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ColorMaterialModule, declarations: [MaterialComponent], imports: [CommonModule, EditableInputModule, RaisedModule], exports: [MaterialComponent] });
|
193
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorMaterialModule, imports: [CommonModule, EditableInputModule, RaisedModule] });
|
178
194
|
}
|
179
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorMaterialModule, decorators: [{
|
180
196
|
type: NgModule,
|
181
197
|
args: [{
|
182
198
|
exports: [MaterialComponent],
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ngx-color-material.mjs","sources":["../../src/lib/material/material.component.ts","../../src/lib/material/ngx-color-material.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, EditableInputModule, isValidHex, RaisedModule, zDepth } from 'ngx-color';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-material',\n template: `\n
|
1
|
+
{"version":3,"file":"ngx-color-material.mjs","sources":["../../src/lib/material/material.component.ts","../../src/lib/material/ngx-color-material.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, EditableInputModule, isValidHex, RaisedModule, zDepth } from 'ngx-color';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n selector: 'color-material',\n template: `\n <color-raised [zDepth]=\"zDepth\" [background]=\"background\" [radius]=\"radius\">\n <div class=\"material-picker {{ className }}\">\n <color-editable-input\n label=\"hex\"\n [value]=\"hex\"\n (onChange)=\"handleValueChange($event)\"\n [style]=\"{ input: HEXinput, label: HEXlabel }\"\n ></color-editable-input>\n <div class=\"material-split\">\n <div class=\"material-third\">\n <color-editable-input\n label=\"r\"\n [value]=\"rgb.r\"\n [style]=\"{ input: RGBinput, label: RGBlabel }\"\n (onChange)=\"handleInputChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"material-third\">\n <color-editable-input\n label=\"g\"\n [value]=\"rgb.g\"\n [style]=\"{ input: RGBinput, label: RGBlabel }\"\n (onChange)=\"handleInputChange($event)\"\n ></color-editable-input>\n </div>\n <div class=\"material-third\">\n <color-editable-input\n label=\"b\"\n [value]=\"rgb.b\"\n [style]=\"{ input: RGBinput, label: RGBlabel }\"\n (onChange)=\"handleInputChange($event)\"\n ></color-editable-input>\n </div>\n </div>\n </div>\n </color-raised>\n `,\n styles: [\n `\n .material-picker {\n width: 130px;\n height: 130px;\n padding: 16px;\n font-family: Roboto;\n }\n .material-split {\n display: flex;\n margin-right: -10px;\n padding-top: 11px;\n }\n .material-third {\n flex: 1 1 0%;\n padding-right: 10px;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n preserveWhitespaces: false,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MaterialComponent),\n multi: true,\n },\n {\n provide: ColorWrap,\n useExisting: forwardRef(() => MaterialComponent),\n },\n ],\n standalone: false,\n})\nexport class MaterialComponent extends ColorWrap {\n HEXinput: { [key: string]: string } = {\n width: '100%',\n marginTop: '12px',\n fontSize: '15px',\n color: 'rgb(51, 51, 51)',\n padding: '0px',\n 'border-width': '0px 0px 2px',\n outline: 'none',\n height: '30px',\n };\n HEXlabel: { [key: string]: string } = {\n position: 'absolute',\n top: '0px',\n left: '0px',\n fontSize: '11px',\n color: 'rgb(153, 153, 153)',\n 'text-transform': 'capitalize',\n };\n RGBinput: { [key: string]: string } = {\n width: '100%',\n marginTop: '12px',\n fontSize: '15px',\n color: '#333',\n padding: '0px',\n border: '0px',\n 'border-bottom': '1px solid #eee',\n outline: 'none',\n height: '30px',\n };\n RGBlabel: { [key: string]: string } = {\n position: 'absolute',\n top: '0px',\n left: '0px',\n fontSize: '11px',\n color: '#999999',\n 'text-transform': 'capitalize',\n };\n @Input() zDepth: zDepth = 1;\n @Input() radius = 1;\n @Input() background = '#fff';\n disableAlpha = true;\n\n constructor() {\n super();\n }\n\n handleValueChange({ data, $event }) {\n this.handleChange(data, $event);\n }\n\n handleInputChange({ data, $event }) {\n if (data.hex) {\n if (isValidHex(data.hex)) {\n this.handleValueChange({\n data: {\n hex: data.hex,\n source: 'hex',\n },\n $event,\n });\n }\n } else if (data.r || data.g || data.b) {\n this.handleValueChange({\n data: {\n r: data.r || this.rgb.r,\n g: data.g || this.rgb.g,\n b: data.b || this.rgb.b,\n source: 'rgb',\n },\n $event,\n });\n }\n }\n\n afterValidChange() {\n this.HEXinput['border-bottom-color'] = this.hex;\n }\n}\n\n@NgModule({\n exports: [MaterialComponent],\n declarations: [MaterialComponent],\n imports: [CommonModule, EditableInputModule, RaisedModule],\n})\nexport class ColorMaterialModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;AAgFM,MAAO,iBAAkB,SAAQ,SAAS,CAAA;AAC9C,IAAA,QAAQ,GAA8B;AACpC,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,KAAK,EAAE,iBAAiB;AACxB,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,cAAc,EAAE,aAAa;AAC7B,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,MAAM,EAAE,MAAM;KACf;AACD,IAAA,QAAQ,GAA8B;AACpC,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,KAAK;AACV,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,KAAK,EAAE,oBAAoB;AAC3B,QAAA,gBAAgB,EAAE,YAAY;KAC/B;AACD,IAAA,QAAQ,GAA8B;AACpC,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,eAAe,EAAE,gBAAgB;AACjC,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,MAAM,EAAE,MAAM;KACf;AACD,IAAA,QAAQ,GAA8B;AACpC,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,KAAK;AACV,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,gBAAgB,EAAE,YAAY;KAC/B;IACQ,MAAM,GAAW,CAAC;IAClB,MAAM,GAAG,CAAC;IACV,UAAU,GAAG,MAAM;IAC5B,YAAY,GAAG,IAAI;AAEnB,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;;AAGT,IAAA,iBAAiB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAA;AAChC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC;;AAGjC,IAAA,iBAAiB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAA;AAChC,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;AACZ,YAAA,IAAI,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;gBACxB,IAAI,CAAC,iBAAiB,CAAC;AACrB,oBAAA,IAAI,EAAE;wBACJ,GAAG,EAAE,IAAI,CAAC,GAAG;AACb,wBAAA,MAAM,EAAE,KAAK;AACd,qBAAA;oBACD,MAAM;AACP,iBAAA,CAAC;;;AAEC,aAAA,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE;YACrC,IAAI,CAAC,iBAAiB,CAAC;AACrB,gBAAA,IAAI,EAAE;oBACJ,CAAC,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;oBACvB,CAAC,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;oBACvB,CAAC,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;AACvB,oBAAA,MAAM,EAAE,KAAK;AACd,iBAAA;gBACD,MAAM;AACP,aAAA,CAAC;;;IAIN,gBAAgB,GAAA;QACd,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC,GAAG;;uGA5EtC,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAbjB,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AAChD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AACjD,aAAA;SACF,EArES,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,8LAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,OAAA,EAAA,aAAA,EAAA,WAAA,EAAA,SAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAmCU,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBA1E7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAChB,QAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCT,EAAA,CAAA,EAAA,eAAA,EAoBgB,uBAAuB,CAAC,MAAM,EAAA,mBAAA,EAC1B,KAAK,EACf,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;AAChD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACD,wBAAA;AACE,4BAAA,OAAO,EAAE,SAAS;AAClB,4BAAA,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;AACjD,yBAAA;AACF,qBAAA,EAAA,UAAA,EACW,KAAK,EAAA,MAAA,EAAA,CAAA,8LAAA,CAAA,EAAA;wDAwCR,MAAM,EAAA,CAAA;sBAAd;gBACQ,MAAM,EAAA,CAAA;sBAAd;gBACQ,UAAU,EAAA,CAAA;sBAAlB;;MA6CU,mBAAmB,CAAA;uGAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAnB,mBAAmB,EAAA,YAAA,EAAA,CArFnB,iBAAiB,CAmFlB,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,mBAAmB,EAAE,YAAY,CAAA,EAAA,OAAA,EAAA,CAnF9C,iBAAiB,CAAA,EAAA,CAAA;AAqFjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,EAFpB,OAAA,EAAA,CAAA,YAAY,EAAE,mBAAmB,EAAE,YAAY,CAAA,EAAA,CAAA;;2FAE9C,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,iBAAiB,CAAC;oBAC5B,YAAY,EAAE,CAAC,iBAAiB,CAAC;AACjC,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,EAAE,YAAY,CAAC;AAC3D,iBAAA;;;ACpKD;;AAEG;;;;"}
|