@acorex/components 7.2.6 → 7.2.7
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/breadcrumbs/lib/breadcrumbs-item.component.d.ts +5 -69
- package/button/lib/button-group.component.d.ts +6 -6
- package/button/lib/button-item.component.d.ts +6 -6
- package/checkbox/lib/checkbox.component.d.ts +14 -9
- package/chips/lib/chips.component.d.ts +5 -64
- package/collapse/lib/collapse-group.component.d.ts +22 -10
- package/collapse/lib/collapse.component.d.ts +13 -7
- package/color-palette/lib/color-palette-input.component.d.ts +4 -6
- package/color-palette/lib/color-palette-picker.component.d.ts +4 -7
- package/color-palette/lib/color-palette-preview.component.d.ts +5 -5
- package/color-palette/lib/color-palette-swatches.component.d.ts +6 -7
- package/color-palette/lib/color-palette.class.d.ts +1 -1
- package/color-palette/lib/color-palette.component.d.ts +13 -7
- package/color-picker/lib/color-picker.component.d.ts +21 -18
- package/common/lib/components/base-component.class.d.ts +7 -7
- package/common/lib/components/value-component.class.d.ts +1 -0
- package/decorators/index.d.ts +1 -0
- package/decorators/lib/divider.component.d.ts +5 -0
- package/esm2022/alert/lib/alert.component.mjs +2 -1
- package/esm2022/breadcrumbs/lib/breadcrumbs-item.component.mjs +10 -19
- package/esm2022/breadcrumbs/lib/breadcrumbs.component.mjs +2 -2
- package/esm2022/calendar/lib/calendar.class.mjs +3 -2
- package/esm2022/checkbox/lib/checkbox.component.mjs +27 -19
- package/esm2022/chips/lib/chips.component.mjs +6 -9
- package/esm2022/collapse/lib/collapse-group.component.mjs +80 -24
- package/esm2022/collapse/lib/collapse.component.mjs +28 -15
- package/esm2022/color-palette/lib/color-palette-input.component.mjs +11 -11
- package/esm2022/color-palette/lib/color-palette-picker.component.mjs +25 -21
- package/esm2022/color-palette/lib/color-palette-preview.component.mjs +12 -11
- package/esm2022/color-palette/lib/color-palette-swatches.component.mjs +12 -12
- package/esm2022/color-palette/lib/color-palette.class.mjs +1 -1
- package/esm2022/color-palette/lib/color-palette.component.mjs +26 -37
- package/esm2022/color-picker/lib/color-picker.component.mjs +3 -6
- package/esm2022/common/lib/components/base-component.class.mjs +5 -4
- package/esm2022/common/lib/components/value-component.class.mjs +17 -11
- package/esm2022/decorators/index.mjs +2 -1
- package/esm2022/decorators/lib/divider.component.mjs +17 -0
- package/esm2022/decorators/lib/form-hint.component.mjs +4 -4
- package/esm2022/decorators/lib/suffix.component.mjs +1 -1
- package/esm2022/form/lib/form-field.component.mjs +2 -2
- package/esm2022/form/lib/form.component.mjs +1 -3
- package/esm2022/label/lib/label.component.mjs +2 -2
- package/esm2022/mixin/lib/value-mixin.class.mjs +4 -1
- package/esm2022/range-slider/lib/range-slider.component.mjs +28 -20
- package/esm2022/switch/lib/switch.component.mjs +2 -3
- package/esm2022/time-box/lib/time-box.component.mjs +2 -4
- package/fesm2022/acorex-components-alert.mjs +1 -0
- package/fesm2022/acorex-components-alert.mjs.map +1 -1
- package/fesm2022/acorex-components-breadcrumbs.mjs +11 -21
- package/fesm2022/acorex-components-breadcrumbs.mjs.map +1 -1
- package/fesm2022/acorex-components-calendar.mjs +2 -1
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-checkbox.mjs +26 -18
- package/fesm2022/acorex-components-checkbox.mjs.map +1 -1
- package/fesm2022/acorex-components-chips.mjs +6 -9
- package/fesm2022/acorex-components-chips.mjs.map +1 -1
- package/fesm2022/acorex-components-collapse.mjs +104 -35
- package/fesm2022/acorex-components-collapse.mjs.map +1 -1
- package/fesm2022/acorex-components-color-palette.mjs +71 -76
- package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
- package/fesm2022/acorex-components-color-picker.mjs +2 -5
- package/fesm2022/acorex-components-color-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-common.mjs +20 -13
- package/fesm2022/acorex-components-common.mjs.map +1 -1
- package/fesm2022/acorex-components-decorators.mjs +18 -3
- package/fesm2022/acorex-components-decorators.mjs.map +1 -1
- package/fesm2022/acorex-components-form.mjs +2 -4
- package/fesm2022/acorex-components-form.mjs.map +1 -1
- package/fesm2022/acorex-components-label.mjs +2 -2
- package/fesm2022/acorex-components-label.mjs.map +1 -1
- package/fesm2022/acorex-components-mixin.mjs +3 -0
- package/fesm2022/acorex-components-mixin.mjs.map +1 -1
- package/fesm2022/acorex-components-range-slider.mjs +26 -18
- package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
- package/fesm2022/acorex-components-switch.mjs +1 -2
- package/fesm2022/acorex-components-switch.mjs.map +1 -1
- package/fesm2022/acorex-components-time-box.mjs +1 -3
- package/fesm2022/acorex-components-time-box.mjs.map +1 -1
- package/mixin/lib/base-components.class.d.ts +2 -2
- package/mixin/lib/base-menu-mixin.class.d.ts +5 -5
- package/mixin/lib/button-mixin.class.d.ts +2 -2
- package/mixin/lib/clickable-mixin.class.d.ts +2 -2
- package/mixin/lib/color-look-mixing.class.d.ts +2 -2
- package/mixin/lib/datalist-component.class.d.ts +10 -10
- package/mixin/lib/dropdown-mixin.class.d.ts +2 -2
- package/mixin/lib/interactive-mixin.class.d.ts +4 -4
- package/mixin/lib/loading-mixin.class.d.ts +2 -2
- package/mixin/lib/mixin.class.d.ts +62 -61
- package/mixin/lib/page-component.class.d.ts +2 -2
- package/mixin/lib/selection-component.class.d.ts +2 -2
- package/mixin/lib/sizable-mixin.class.d.ts +2 -2
- package/mixin/lib/textbox-mixin.class.d.ts +2 -2
- package/mixin/lib/value-mixin.class.d.ts +9 -8
- package/package.json +8 -8
- package/range-slider/lib/range-slider.component.d.ts +16 -9
- package/switch/lib/switch.component.d.ts +1 -1
- package/tabs/lib/tab-item.component.d.ts +2 -2
- package/time-box/lib/time-box.component.d.ts +1 -1
@@ -2,7 +2,7 @@ import { AXColorUtil } from '@acorex/core/utils';
|
|
2
2
|
import * as i0 from '@angular/core';
|
3
3
|
import { Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Inject, Input, ContentChildren, HostBinding, NgModule } from '@angular/core';
|
4
4
|
import { distinctUntilChanged } from 'rxjs/operators';
|
5
|
-
import {
|
5
|
+
import { MXBaseComponent, MXInteractiveComponent, MXValueComponent } from '@acorex/components/common';
|
6
6
|
import * as i1 from '@angular/common';
|
7
7
|
import { CommonModule } from '@angular/common';
|
8
8
|
import * as i2 from '@acorex/components/textbox';
|
@@ -14,6 +14,7 @@ import { AXRangeSliderModule } from '@acorex/components/range-slider';
|
|
14
14
|
import * as i2$1 from '@angular/cdk/drag-drop';
|
15
15
|
import { DragDropModule } from '@angular/cdk/drag-drop';
|
16
16
|
import { Subject } from 'rxjs';
|
17
|
+
import { classes } from 'polytype';
|
17
18
|
import { AXLabelModule } from '@acorex/components/label';
|
18
19
|
import { AXButtonModule } from '@acorex/components/button';
|
19
20
|
import { AXDecoratorModule } from '@acorex/components/decorators';
|
@@ -33,9 +34,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
|
|
33
34
|
type: Injectable
|
34
35
|
}] });
|
35
36
|
|
36
|
-
class AXColorPaletteInputComponent extends
|
37
|
-
constructor(
|
38
|
-
super(
|
37
|
+
class AXColorPaletteInputComponent extends MXBaseComponent {
|
38
|
+
constructor(_parent) {
|
39
|
+
super();
|
39
40
|
this._parent = _parent;
|
40
41
|
this._isTouched = false;
|
41
42
|
this.isValid = true;
|
@@ -76,7 +77,7 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
|
|
76
77
|
}
|
77
78
|
}
|
78
79
|
this.checkValid();
|
79
|
-
|
80
|
+
this.cdr.detectChanges();
|
80
81
|
});
|
81
82
|
}
|
82
83
|
_handleChangeInputMode() {
|
@@ -96,7 +97,7 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
|
|
96
97
|
const { r, g, b, a } = this._rgba;
|
97
98
|
const _color = `rgba(${r},${g},${b},${a})`;
|
98
99
|
if (e.isUserInteraction) {
|
99
|
-
this._parent.
|
100
|
+
this._parent.setUserInteraction();
|
100
101
|
this._isTouched = true;
|
101
102
|
}
|
102
103
|
this._parent._onInternalColorChanged$.next({
|
@@ -109,7 +110,7 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
|
|
109
110
|
return;
|
110
111
|
//
|
111
112
|
if (e.isUserInteraction) {
|
112
|
-
this._parent.
|
113
|
+
this._parent.setUserInteraction();
|
113
114
|
this._isTouched = true;
|
114
115
|
}
|
115
116
|
//
|
@@ -129,7 +130,7 @@ class AXColorPaletteInputComponent extends AXBaseComponent {
|
|
129
130
|
checkValid() {
|
130
131
|
this.isValid = AXColorUtil.isValid(this._hex);
|
131
132
|
}
|
132
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token:
|
133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteInputComponent, deps: [{ token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
133
134
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input", host: { classAttribute: "ax-color-palette-input" }, providers: [
|
134
135
|
{
|
135
136
|
provide: AXColorPaletteChildComponent,
|
@@ -145,16 +146,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
|
|
145
146
|
useExisting: AXColorPaletteInputComponent,
|
146
147
|
},
|
147
148
|
], template: "<ng-container [ngSwitch]=\"this._colorMode\">\n <div class=\"palette-inputs\">\n <ng-container *ngSwitchCase=\"'hex'\">\n <div>\n <ax-text-box\n class=\"ax-sm\"\n [value]=\"_hex\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n [state]=\"isValid ? 'clear' : 'error'\"\n (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n [mask-options]=\"_hexMaskOptions\">\n </ax-text-box>\n <label>HEX</label>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'rgba'\">\n <div>\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [maxValue]=\"255\"\n [(value)]=\"_rgba.r\"\n [showSpinButtons]=\"false\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n </ax-number-box>\n <label>R</label>\n </div>\n <div>\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [maxValue]=\"255\"\n [(value)]=\"_rgba.g\"\n [showSpinButtons]=\"false\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n </ax-number-box>\n <label>G</label>\n </div>\n <div>\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [maxValue]=\"255\"\n [(value)]=\"_rgba.b\"\n [showSpinButtons]=\"false\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n </ax-number-box>\n <label>B</label>\n </div>\n <div>\n <ax-number-box\n class=\"ax-sm\"\n [minValue]=\"0\"\n [maxValue]=\"1\"\n [(value)]=\"_rgba.a\"\n [decimals]=\"2\"\n [step]=\"0.1\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n [showSpinButtons]=\"false\"\n (onValueChanged)=\"_handleRGBAValueChanged($event)\">\n </ax-number-box>\n <label>A</label>\n </div>\n </ng-container>\n </div>\n <button\n class=\"ax-general-button ax-button-rounded ax-button-icon ax-sm\"\n (click)=\"_handleChangeInputMode()\"\n [disabled]=\"_parent.disabled\">\n <span class=\"ax-icon ax-icon-unfold-more\"></span>\n </button>\n</ng-container>\n" }]
|
148
|
-
}], ctorParameters: function () { return [{ type:
|
149
|
+
}], ctorParameters: function () { return [{ type: AXColorComponent, decorators: [{
|
149
150
|
type: Optional
|
150
151
|
}, {
|
151
152
|
type: Inject,
|
152
153
|
args: [AXColorComponent]
|
153
154
|
}] }]; } });
|
154
155
|
|
155
|
-
class AXColorPalettePickerComponent extends
|
156
|
-
constructor(
|
157
|
-
super(
|
156
|
+
class AXColorPalettePickerComponent extends MXBaseComponent {
|
157
|
+
constructor(_parent) {
|
158
|
+
super();
|
158
159
|
this._parent = _parent;
|
159
160
|
this._rgba = {
|
160
161
|
r: 0,
|
@@ -191,7 +192,7 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
|
|
191
192
|
}
|
192
193
|
}
|
193
194
|
this.setHSV();
|
194
|
-
|
195
|
+
this.cdr.detectChanges();
|
195
196
|
});
|
196
197
|
}
|
197
198
|
setHSV() {
|
@@ -203,7 +204,7 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
|
|
203
204
|
if (e.value != null && e.value != this._rgba.a) {
|
204
205
|
const { r, g, b } = this._rgba;
|
205
206
|
const _color = `rgba(${r},${g},${b},${e.value})`;
|
206
|
-
this._parent.
|
207
|
+
this._parent.setUserInteraction();
|
207
208
|
this._parent._onInternalColorChanged$.next({
|
208
209
|
color: AXColorUtil.toString(_color, 'rgba'),
|
209
210
|
sender: this,
|
@@ -216,7 +217,7 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
|
|
216
217
|
const colors = gradient.rgb(100);
|
217
218
|
const { s, v } = AXColorUtil.to(this._rgba, "hsva");
|
218
219
|
const { h } = colors[e.value].toHsv();
|
219
|
-
this._parent.
|
220
|
+
this._parent.setUserInteraction();
|
220
221
|
this._parent._onInternalColorChanged$.next({
|
221
222
|
color: AXColorUtil.toString({ h, s, v, a: this._rgba.a }, 'rgba'),
|
222
223
|
sender: this,
|
@@ -224,18 +225,23 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
|
|
224
225
|
}
|
225
226
|
}
|
226
227
|
_handleSurfaceClick(e) {
|
227
|
-
|
228
|
+
if (this._parent.disabled || this._parent.readonly) {
|
229
|
+
e.preventDefault();
|
230
|
+
e.stopPropagation();
|
231
|
+
return;
|
232
|
+
}
|
233
|
+
const surface = this.getHostElement().querySelector(".ax-color-picker-overlay");
|
228
234
|
const sb = surface.getBoundingClientRect();
|
229
|
-
const pointer = this.
|
235
|
+
const pointer = this.getHostElement().querySelector(".ax-color-picker-pointer");
|
230
236
|
const pb = pointer.getBoundingClientRect();
|
231
237
|
let x = e.offsetX;
|
232
238
|
let y = e.offsetY;
|
233
239
|
this.setColorByXY(x, y);
|
234
240
|
}
|
235
241
|
_handleDrag() {
|
236
|
-
const surface = this.
|
242
|
+
const surface = this.getHostElement().querySelector(".ax-color-picker-overlay");
|
237
243
|
const sb = surface.getBoundingClientRect();
|
238
|
-
const pointer = this.
|
244
|
+
const pointer = this.getHostElement().querySelector(".ax-color-picker-pointer");
|
239
245
|
const pb = pointer.getBoundingClientRect();
|
240
246
|
const w = (pb.width / 2);
|
241
247
|
let x = (pb.left - sb.left) + w;
|
@@ -250,7 +256,7 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
|
|
250
256
|
this.setColorByXY(x, y);
|
251
257
|
}
|
252
258
|
setColorByXY(x, y) {
|
253
|
-
const surface = this.
|
259
|
+
const surface = this.getHostElement().querySelector(".ax-color-picker-overlay");
|
254
260
|
const sb = surface.getBoundingClientRect();
|
255
261
|
//
|
256
262
|
const { h } = AXColorUtil.to(this._bgColor, "hsva");
|
@@ -265,9 +271,9 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
|
|
265
271
|
});
|
266
272
|
}
|
267
273
|
setPointerByPercent(x, y) {
|
268
|
-
const surface = this.
|
274
|
+
const surface = this.getHostElement().querySelector(".ax-color-picker-overlay");
|
269
275
|
const sb = surface.getBoundingClientRect();
|
270
|
-
const pointer = this.
|
276
|
+
const pointer = this.getHostElement().querySelector(".ax-color-picker-pointer");
|
271
277
|
const pb = pointer.getBoundingClientRect();
|
272
278
|
const w = (pb.width / 2);
|
273
279
|
const width = sb.width; //+ pb.width
|
@@ -277,13 +283,13 @@ class AXColorPalettePickerComponent extends AXBaseComponent {
|
|
277
283
|
y: (height - (((y * height)) / 100)) - w
|
278
284
|
};
|
279
285
|
}
|
280
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token:
|
286
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalettePickerComponent, deps: [{ token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
281
287
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker", host: { classAttribute: "ax-color-palette-picker" }, providers: [
|
282
288
|
{
|
283
289
|
provide: AXColorPaletteChildComponent,
|
284
290
|
useExisting: AXColorPalettePickerComponent,
|
285
291
|
},
|
286
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-picker-overlay-trans\">\n <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\n <div class=\"ax-color-picker-overlay-g1\"></div>\n <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"
|
292
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-picker-overlay-trans\">\n <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\n <div class=\"ax-color-picker-overlay-g1\"></div>\n <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\" \n [cdkDragDisabled]=\"_parent.disabled || _parent.readonly\">\n\n </div>\n </div>\n</div>\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \n (onValueChanged)=\"_handleGradientChanged($event)\" \n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\">\n</ax-range-slider>\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleAlphaChanged($event)\">\n</ax-range-slider>", dependencies: [{ kind: "component", type: i1$1.AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["readonly", "disabled", "value", "name", "minValue", "maxValue", "step", "color", "oriantaion"], outputs: ["valueChange", "onValueChanged", "colorChange"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
287
293
|
}
|
288
294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
|
289
295
|
type: Component,
|
@@ -292,32 +298,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
|
|
292
298
|
provide: AXColorPaletteChildComponent,
|
293
299
|
useExisting: AXColorPalettePickerComponent,
|
294
300
|
},
|
295
|
-
], template: "<div class=\"ax-color-picker-overlay-trans\">\n <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\n <div class=\"ax-color-picker-overlay-g1\"></div>\n <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\"
|
296
|
-
}], ctorParameters: function () { return [{ type:
|
301
|
+
], template: "<div class=\"ax-color-picker-overlay-trans\">\n <div class=\"ax-color-picker-overlay\" [style.background-color]=\"_bgColor\">\n <div class=\"ax-color-picker-overlay-g1\"></div>\n <div class=\"ax-color-picker-overlay-g2\" (click)=\"_handleSurfaceClick($event)\"></div>\n <div class=\"ax-color-picker-pointer\" cdkDrag cdkDragBoundary=\".ax-color-picker-overlay\" [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"_handleDrag()\" \n [cdkDragDisabled]=\"_parent.disabled || _parent.readonly\">\n\n </div>\n </div>\n</div>\n<ax-range-slider class=\"ax-color-picker-gradient\" [minValue]=\"0\" [maxValue]=\"99\" [step]=\"1\" [value]=\"_gradient\" \n (onValueChanged)=\"_handleGradientChanged($event)\" \n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\">\n</ax-range-slider>\n<ax-range-slider class=\"ax-color-picker-transparent\" [minValue]=\"0\" [maxValue]=\"1\" [step]=\"0.01\" [value]=\"_rgba.a\"\n [disabled]=\"_parent.disabled\"\n [readonly]=\"_parent.readonly\"\n (onValueChanged)=\"_handleAlphaChanged($event)\">\n</ax-range-slider>" }]
|
302
|
+
}], ctorParameters: function () { return [{ type: AXColorComponent, decorators: [{
|
297
303
|
type: Optional
|
298
304
|
}, {
|
299
305
|
type: Inject,
|
300
306
|
args: [AXColorComponent]
|
301
307
|
}] }]; } });
|
302
308
|
|
303
|
-
class AXColorPalettePreviewComponent extends
|
304
|
-
constructor(
|
305
|
-
super(
|
309
|
+
class AXColorPalettePreviewComponent extends MXBaseComponent {
|
310
|
+
constructor(_parent, _zone) {
|
311
|
+
super();
|
306
312
|
this._parent = _parent;
|
307
313
|
this._zone = _zone;
|
308
314
|
_parent._onInternalColorChanged$
|
309
315
|
.pipe(distinctUntilChanged())
|
310
316
|
.subscribe((e) => {
|
311
317
|
_zone.runOutsideAngular(() => {
|
312
|
-
this.
|
313
|
-
|
318
|
+
const inner = this.getHostElement().firstElementChild;
|
319
|
+
inner.style.backgroundColor = e.color;
|
320
|
+
inner.innerText = AXColorUtil.toString(e.color);
|
314
321
|
const color = AXColorUtil.toString(e.color, 'hex');
|
315
322
|
const ratio = AXColorUtil.contrastToWhite(color);
|
316
|
-
this.
|
323
|
+
this.getHostElement().style.color = !(ratio > 2.0) ? '#000' : '#fff';
|
317
324
|
});
|
318
325
|
});
|
319
326
|
}
|
320
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token:
|
327
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [{ token: AXColorComponent, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
321
328
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview", host: { classAttribute: "ax-color-palette-preview" }, providers: [
|
322
329
|
{
|
323
330
|
provide: AXColorPaletteChildComponent,
|
@@ -346,16 +353,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
|
|
346
353
|
},
|
347
354
|
],
|
348
355
|
}]
|
349
|
-
}], ctorParameters: function () { return [{ type:
|
356
|
+
}], ctorParameters: function () { return [{ type: AXColorComponent, decorators: [{
|
350
357
|
type: Optional
|
351
358
|
}, {
|
352
359
|
type: Inject,
|
353
360
|
args: [AXColorComponent]
|
354
361
|
}] }, { type: i0.NgZone }]; } });
|
355
362
|
|
356
|
-
class AXColorPaletteSwatchesComponent extends
|
357
|
-
constructor(
|
358
|
-
super(
|
363
|
+
class AXColorPaletteSwatchesComponent extends MXBaseComponent {
|
364
|
+
constructor(_parent) {
|
365
|
+
super();
|
359
366
|
this._parent = _parent;
|
360
367
|
this.colors = [];
|
361
368
|
this._defaultPalette = [
|
@@ -581,11 +588,11 @@ class AXColorPaletteSwatchesComponent extends AXBaseComponent {
|
|
581
588
|
];
|
582
589
|
_parent?._onInternalColorChanged$.pipe(distinctUntilChanged()).subscribe((e) => {
|
583
590
|
this._selected = AXColorUtil.toString(e.color, 'hex').toLowerCase();
|
584
|
-
this.
|
591
|
+
this.cdr.detectChanges();
|
585
592
|
});
|
586
593
|
}
|
587
|
-
|
588
|
-
const isFav = this.
|
594
|
+
ngOnInit() {
|
595
|
+
const isFav = this.getHostElement().tagName.toLowerCase() == 'ax-color-palette-favorite';
|
589
596
|
if (!isFav && this.colors.length == 0) {
|
590
597
|
this.colors = this._defaultPalette.map((c) => this._format(c));
|
591
598
|
}
|
@@ -593,7 +600,7 @@ class AXColorPaletteSwatchesComponent extends AXBaseComponent {
|
|
593
600
|
_handleClick(e, color) {
|
594
601
|
if (this._parent.disabled || this._parent.readonly)
|
595
602
|
return;
|
596
|
-
this._parent.
|
603
|
+
this._parent.setUserInteraction();
|
597
604
|
this._parent._onInternalColorChanged$.next({
|
598
605
|
color: color.code,
|
599
606
|
sender: this,
|
@@ -604,7 +611,7 @@ class AXColorPaletteSwatchesComponent extends AXBaseComponent {
|
|
604
611
|
code: color.code.toLowerCase(),
|
605
612
|
};
|
606
613
|
}
|
607
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token:
|
614
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [{ token: AXColorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
608
615
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
|
609
616
|
{
|
610
617
|
provide: AXColorPaletteChildComponent,
|
@@ -638,7 +645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
|
|
638
645
|
},
|
639
646
|
],
|
640
647
|
}]
|
641
|
-
}], ctorParameters: function () { return [{ type:
|
648
|
+
}], ctorParameters: function () { return [{ type: AXColorComponent, decorators: [{
|
642
649
|
type: Optional
|
643
650
|
}, {
|
644
651
|
type: Inject,
|
@@ -647,63 +654,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
|
|
647
654
|
type: Input
|
648
655
|
}] } });
|
649
656
|
|
650
|
-
class AXColorPalleteComponent extends
|
651
|
-
_onValueChanged(oldValue, newValue) {
|
652
|
-
super._onValueChanged(oldValue, newValue);
|
653
|
-
this._onInternalColorChanged$.next({
|
654
|
-
color: this.value,
|
655
|
-
mode: newValue?.startsWith('#') ? "hex" : "rgba",
|
656
|
-
sender: this
|
657
|
-
});
|
658
|
-
}
|
657
|
+
class AXColorPalleteComponent extends classes(MXInteractiveComponent, (MXValueComponent)) {
|
659
658
|
ngAfterContentInit() {
|
660
659
|
this._children.changes.subscribe(() => {
|
661
660
|
this._onInternalColorChanged$.next({
|
662
661
|
color: this.value,
|
663
|
-
sender: this
|
662
|
+
sender: this,
|
664
663
|
});
|
665
664
|
});
|
666
665
|
}
|
667
|
-
|
666
|
+
ngAfterViewInit() {
|
668
667
|
this._onInternalColorChanged$.next({
|
669
668
|
color: this.value,
|
670
|
-
sender: this
|
669
|
+
sender: this,
|
671
670
|
});
|
672
671
|
}
|
673
|
-
constructor(
|
674
|
-
super(
|
672
|
+
constructor() {
|
673
|
+
super();
|
675
674
|
this._onInternalColorChanged$ = new Subject();
|
676
675
|
//
|
677
|
-
this._onInternalColorChanged$.pipe(distinctUntilChanged()).subscribe(e => {
|
676
|
+
this._onInternalColorChanged$.pipe(distinctUntilChanged()).subscribe((e) => {
|
678
677
|
if (this.disabled || this.readonly)
|
679
678
|
return;
|
680
679
|
this.value = e.color;
|
681
|
-
cdr.markForCheck();
|
680
|
+
this.cdr.markForCheck();
|
681
|
+
});
|
682
|
+
//
|
683
|
+
this.onValueChanged.subscribe(this._handleOnValueChanged.bind(this));
|
684
|
+
}
|
685
|
+
_handleOnValueChanged(e) {
|
686
|
+
this._onInternalColorChanged$.next({
|
687
|
+
color: this.value,
|
688
|
+
mode: e.value?.startsWith('#') ? 'hex' : 'rgba',
|
689
|
+
sender: this,
|
682
690
|
});
|
683
691
|
}
|
684
692
|
get __hostDisabled() {
|
685
693
|
return this.disabled;
|
686
694
|
}
|
687
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalleteComponent, deps: [
|
688
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly",
|
689
|
-
{ provide: AXColorComponent, useExisting: AXColorPalleteComponent },
|
690
|
-
], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\n\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\n\n<ng-template #custom>\n <ng-content select='ax-color-palette-preview'></ng-content>\n <ng-content select='ax-color-palette-picker'></ng-content>\n <ng-content select='ax-color-palette-swatches'></ng-content>\n <ng-content select='ax-color-palette-favorite'></ng-content>\n <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n <ax-color-palette-preview></ax-color-palette-preview>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n\n<ng-content select='ax-footer'></ng-content>\n\n\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgba(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
695
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
696
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AXColorPalleteComponent, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", state: "state", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [{ provide: AXColorComponent, useExisting: AXColorPalleteComponent }], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select='ax-header'></ng-content>\n\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\n\n<ng-template #custom>\n <ng-content select='ax-color-palette-preview'></ng-content>\n <ng-content select='ax-color-palette-picker'></ng-content>\n <ng-content select='ax-color-palette-swatches'></ng-content>\n <ng-content select='ax-color-palette-favorite'></ng-content>\n <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n <ax-color-palette-preview></ax-color-palette-preview>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n\n<ng-content select='ax-footer'></ng-content>\n\n\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgba(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
691
697
|
}
|
692
698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AXColorPalleteComponent, decorators: [{
|
693
699
|
type: Component,
|
694
|
-
args: [{ selector: 'ax-color-palette', inputs: [
|
695
|
-
|
696
|
-
'tabIndex',
|
697
|
-
'readonly',
|
698
|
-
'allowNull',
|
699
|
-
'value',
|
700
|
-
'state',
|
701
|
-
'name',
|
702
|
-
'checked',
|
703
|
-
], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
704
|
-
{ provide: AXColorComponent, useExisting: AXColorPalleteComponent },
|
705
|
-
], template: "<ng-content select='ax-header'></ng-content>\n\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\n\n<ng-template #custom>\n <ng-content select='ax-color-palette-preview'></ng-content>\n <ng-content select='ax-color-palette-picker'></ng-content>\n <ng-content select='ax-color-palette-swatches'></ng-content>\n <ng-content select='ax-color-palette-favorite'></ng-content>\n <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n <ax-color-palette-preview></ax-color-palette-preview>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n\n<ng-content select='ax-footer'></ng-content>\n\n\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgba(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"] }]
|
706
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _children: [{
|
700
|
+
args: [{ selector: 'ax-color-palette', inputs: ['disabled', 'tabIndex', 'readonly', 'value', 'state', 'name', 'checked'], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXColorComponent, useExisting: AXColorPalleteComponent }], template: "<ng-content select='ax-header'></ng-content>\n\n<ng-container [ngTemplateOutlet]=\"default\" *ngIf=\"!_children.length\"></ng-container>\n<ng-container [ngTemplateOutlet]=\"custom\" *ngIf=\"_children.length\"></ng-container>\n\n<ng-template #custom>\n <ng-content select='ax-color-palette-preview'></ng-content>\n <ng-content select='ax-color-palette-picker'></ng-content>\n <ng-content select='ax-color-palette-swatches'></ng-content>\n <ng-content select='ax-color-palette-favorite'></ng-content>\n <ng-content select='ax-color-palette-input'></ng-content>\n</ng-template>\n<ng-template #default>\n <ax-color-palette-preview></ax-color-palette-preview>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n\n<ng-content select='ax-footer'></ng-content>\n\n\n", styles: ["ax-color-palette{display:flex;flex-direction:column;border:1px solid;background-color:rgba(var(--ax-color-surface));border-color:rgba(var(--ax-color-border-default));border-radius:var(--ax-rounded-border-default);width:18rem}@media (min-width: 600px){ax-color-palette{width:20rem!important}}@media (min-width: 1200px){ax-color-palette{width:18rem!important}}@media (max-width: 599px){ax-color-palette{width:100%!important}}ax-color-palette.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-color-palette.ax-state-disabled ax-color-palette-swatches div:hover,ax-color-palette.ax-state-disabled ax-color-palette-swatches div.ax-state-selected,ax-color-palette.ax-state-disabled ax-color-palette-favorite div:hover,ax-color-palette.ax-state-disabled ax-color-palette-favorite div.ax-state-selected{opacity:.5;cursor:not-allowed}ax-color-palette ax-header,ax-color-palette ax-footer{padding:.75rem;border-top-width:1px;display:flex}ax-color-palette ax-color-palette-preview{position:relative;width:100%;height:6rem;gap:.5;border-top-left-radius:var(--ax-rounded-border-default);border-top-right-radius:var(--ax-rounded-border-default);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center}ax-color-palette ax-color-palette-preview .palette-preview-overlay{position:absolute;left:0;width:100%;height:100%;display:flex;align-items:center;text-transform:uppercase;justify-content:center;border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default));box-shadow:0 1px 8px #00000029;text-shadow:0px 0px 14px rgba(0,0,0,.5)}ax-color-palette ax-color-palette-favorite{display:block;border-top:1px solid;border-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{display:grid;padding:.5rem;grid-template-columns:repeat(10,minmax(0,1fr));max-height:9rem;overflow-x:hidden;gap:.5rem}ax-color-palette ax-color-palette-swatches div,ax-color-palette ax-color-palette-favorite div{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:99rem;border:1px solid rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-swatches div:before,ax-color-palette ax-color-palette-favorite div:before{content:\"\";padding-top:100%;float:left}ax-color-palette ax-color-palette-swatches div:after,ax-color-palette ax-color-palette-favorite div:after{content:\"\";display:block;clear:both}ax-color-palette ax-color-palette-swatches div:hover,ax-color-palette ax-color-palette-swatches div.ax-state-selected,ax-color-palette ax-color-palette-favorite div:hover,ax-color-palette ax-color-palette-favorite div.ax-state-selected{outline-offset:2px;outline-width:1px;outline-style:solid;outline-color:rgba(var(--ax-color-border-default))}ax-color-palette ax-color-palette-input{display:flex;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-input .palette-inputs{display:flex;flex:1 1 0%;gap:.5rem}ax-color-palette ax-color-palette-input .palette-inputs div{width:100%;text-align:center}ax-color-palette ax-color-palette-input .palette-inputs div label{margin-top:.75rem;font-size:.75rem;line-height:1.25rem}ax-color-palette ax-color-palette-picker{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay-trans{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay{display:block;width:100%;height:8rem;position:relative}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-pointer{width:.75rem;height:.75rem;border-radius:99rem;background-color:transparent;border:1px solid rgba(var(--ax-color-background-default));position:relative;z-index:1}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{height:100%;width:100%;position:absolute;inset:0}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g1{z-index:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}ax-color-palette ax-color-palette-picker .ax-color-picker-overlay .ax-color-picker-overlay-g2{z-index:1;background:linear-gradient(to bottom,transparent 0%,#000 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-gradient input{background:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 17%,rgb(0,255,0) 33%,rgb(0,255,255) 50%,rgb(0,0,255) 67%,rgb(255,0,255) 83%,rgb(255,0,0) 100%)}ax-color-palette ax-color-palette-picker .ax-range-slider.ax-color-picker-transparent input{background-image:linear-gradient(to right,rgba(245,246,252,0),rgb(0,0,0)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=)}\n"] }]
|
701
|
+
}], ctorParameters: function () { return []; }, propDecorators: { _children: [{
|
707
702
|
type: ContentChildren,
|
708
703
|
args: [AXColorPaletteChildComponent]
|
709
704
|
}], __hostDisabled: [{
|