@acrodata/gui 3.0.0 → 3.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 +0 -1
- package/fesm2022/acrodata-gui.mjs +6 -26
- package/fesm2022/acrodata-gui.mjs.map +1 -1
- package/fill/fill-picker.scss +12 -97
- package/index.d.ts +1 -4
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -16,19 +16,16 @@ import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelContent, M
|
|
|
16
16
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
17
17
|
import { MtxColorpickerInput, MtxColorpicker, MtxColorpickerToggle, MtxColorpickerModule } from '@ng-matero/extensions/colorpicker';
|
|
18
18
|
import { MtxSelect, MtxSelectOptionTemplate, MtxSelectLabelTemplate, MtxSelectModule } from '@ng-matero/extensions/select';
|
|
19
|
-
import { Subject, map, Subscription, of, mergeWith } from 'rxjs';
|
|
19
|
+
import { Subject, map, finalize, Subscription, of, mergeWith } from 'rxjs';
|
|
20
20
|
import { CodeEditor } from '@acrodata/code-editor';
|
|
21
21
|
import { RndDialogDragHandle, RndDialog } from '@acrodata/rnd-dialog';
|
|
22
22
|
import { coerceCssPixelValue } from '@angular/cdk/coercion';
|
|
23
23
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
24
24
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
25
25
|
import { DialogRef, DIALOG_DATA } from '@angular/cdk/dialog';
|
|
26
|
-
import { finalize } from 'rxjs/operators';
|
|
27
26
|
import { HttpClient, HttpResponse } from '@angular/common/http';
|
|
27
|
+
import { ColorPicker } from '@acrodata/color-picker';
|
|
28
28
|
import { GradientPicker } from '@acrodata/gradient-picker';
|
|
29
|
-
import { TinyColor } from '@ctrl/tinycolor';
|
|
30
|
-
import * as i2 from 'ngx-color/chrome';
|
|
31
|
-
import { ColorChromeModule } from 'ngx-color/chrome';
|
|
32
29
|
import { MatOption } from '@angular/material/core';
|
|
33
30
|
|
|
34
31
|
/**
|
|
@@ -860,7 +857,6 @@ class GuiFillPicker {
|
|
|
860
857
|
{ label: 'Image', value: 'image' },
|
|
861
858
|
];
|
|
862
859
|
this.selectedType = 'solid';
|
|
863
|
-
this.colorFormat = 'hex';
|
|
864
860
|
this.fillValue = {
|
|
865
861
|
solid: '#000',
|
|
866
862
|
gradient: 'linear-gradient(transparent, #000)',
|
|
@@ -906,15 +902,6 @@ class GuiFillPicker {
|
|
|
906
902
|
this.disabled = isDisabled;
|
|
907
903
|
this.cdr.markForCheck();
|
|
908
904
|
}
|
|
909
|
-
getColorFormat() {
|
|
910
|
-
const color = new TinyColor(this.fillValue.solid);
|
|
911
|
-
if (color.format === 'rgb' || color.format === 'hsl' || color.format === 'hsv') {
|
|
912
|
-
return color.format;
|
|
913
|
-
}
|
|
914
|
-
else {
|
|
915
|
-
return 'hex';
|
|
916
|
-
}
|
|
917
|
-
}
|
|
918
905
|
getTypeFromModel(value) {
|
|
919
906
|
if (value.includes('linear') || value.includes('radial') || value.includes('conic')) {
|
|
920
907
|
this.selectedType = 'gradient';
|
|
@@ -929,7 +916,6 @@ class GuiFillPicker {
|
|
|
929
916
|
getValueFromModel(value) {
|
|
930
917
|
if (this.selectedType === 'solid') {
|
|
931
918
|
this.fillValue.solid = value;
|
|
932
|
-
this.colorFormat = this.getColorFormat();
|
|
933
919
|
}
|
|
934
920
|
else if (this.selectedType === 'gradient') {
|
|
935
921
|
this.fillValue.gradient = value;
|
|
@@ -950,13 +936,7 @@ class GuiFillPicker {
|
|
|
950
936
|
this.onImageChange();
|
|
951
937
|
}
|
|
952
938
|
}
|
|
953
|
-
onColorChange(
|
|
954
|
-
this.fillValue.solid = {
|
|
955
|
-
hex: e.color.rgb.a === 1 ? e.color.hex : new TinyColor(e.color.rgb).toHex8String(),
|
|
956
|
-
rgb: new TinyColor(e.color.rgb).toRgbString(),
|
|
957
|
-
hsl: new TinyColor(e.color.hsl).toHslString(),
|
|
958
|
-
hsv: new TinyColor(e.color.hsv).toHsvString(),
|
|
959
|
-
}[this.colorFormat];
|
|
939
|
+
onColorChange() {
|
|
960
940
|
this.onSolidChange();
|
|
961
941
|
}
|
|
962
942
|
onSolidChange() {
|
|
@@ -976,7 +956,7 @@ class GuiFillPicker {
|
|
|
976
956
|
useExisting: forwardRef(() => GuiFillPicker),
|
|
977
957
|
multi: true,
|
|
978
958
|
},
|
|
979
|
-
], usesOnChanges: true, ngImport: i0, template: "@if (type === 'all') {\n <div class=\"gui-fill-picker-header\">\n <mat-button-toggle-group\n [(ngModel)]=\"selectedType\"\n hideSingleSelectionIndicator\n (ngModelChange)=\"onTypeChange()\"\n >\n @for (t of types; track $index) {\n <mat-button-toggle [value]=\"t.value\" [title]=\"t.label\">\n <mat-icon [svgIcon]=\"t.value\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n}\n\n<div class=\"gui-fill-picker-body\">\n @if (selectedType === 'solid') {\n <color-
|
|
959
|
+
], usesOnChanges: true, ngImport: i0, template: "@if (type === 'all') {\n <div class=\"gui-fill-picker-header\">\n <mat-button-toggle-group\n [(ngModel)]=\"selectedType\"\n hideSingleSelectionIndicator\n (ngModelChange)=\"onTypeChange()\"\n >\n @for (t of types; track $index) {\n <mat-button-toggle [value]=\"t.value\" [title]=\"t.label\">\n <mat-icon [svgIcon]=\"t.value\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n}\n\n<div class=\"gui-fill-picker-body\">\n @if (selectedType === 'solid') {\n <color-picker [(ngModel)]=\"fillValue.solid\" (ngModelChange)=\"onColorChange()\" />\n } @else if (selectedType === 'gradient') {\n <gradient-picker [(ngModel)]=\"fillValue.gradient\" (ngModelChange)=\"onGradientChange()\" />\n } @else if (selectedType === 'image') {\n <gui-file-uploader\n type=\"image\"\n [(ngModel)]=\"fillValue.image\"\n (ngModelChange)=\"onImageChange()\"\n />\n }\n</div>\n", styles: [".gui-fill-picker{display:block;width:15rem;border-radius:.5rem;background-color:var(--mat-expansion-container-background-color, var(--mat-sys-surface));color:var(--mat-expansion-container-text-color, var(--mat-sys-on-surface));box-shadow:inset 0 0 1px #ffffffa3,0 2px 4px #00000029,0 8px 16px #0000001f,0 0 1px #0000001f}.gui-fill-picker .color-picker{--cp-container-width: auto;--cp-container-padding: 0;--cp-container-shape: 0;--cp-container-elevation-shadow: none;--cp-container-background-color: transparent;--cp-container-text-color: var(--mat-form-field-filled-input-text-color, var(--mat-sys-on-surface))}.gui-fill-picker .gradient-picker{--gp-container-width: auto;--gp-container-vertical-padding: 0;--gp-container-margin: -4px -12px;--gp-container-shape: 0;--gp-container-elevation-shadow: none;--gp-container-background-color: transparent;--gp-container-text-color: var(--mat-form-field-filled-input-text-color, var(--mat-sys-on-surface));--gp-input-background-color: var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant));--gp-radio-button-selected-background-color: var(--mat-button-toggle-selected-state-background-color, var(--mat-sys-secondary-container));--gp-radio-button-selected-outline-color: var(--mat-button-toggle-divider-color, var(--mat-sys-outline))}.gui-fill-picker-header{padding:.375rem .375rem 0;line-height:1;--mat-button-toggle-shape: 0;--mat-button-toggle-height: 1}.gui-fill-picker-header .mat-button-toggle-group-appearance-standard{gap:.25rem;border:none}.gui-fill-picker-header .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}.gui-fill-picker-header .mat-button-toggle-appearance-standard{border-radius:.25rem}.gui-fill-picker-header .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{padding:0}.gui-fill-picker-body{padding:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ColorPicker, selector: "color-picker", inputs: ["format", "color", "hideAlpha", "disabled"], outputs: ["formatChange", "colorChange", "valueChange", "valueChanged"] }, { kind: "component", type: GradientPicker, selector: "gradient-picker", inputs: ["disabled"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
980
960
|
}
|
|
981
961
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GuiFillPicker, decorators: [{
|
|
982
962
|
type: Component,
|
|
@@ -993,10 +973,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
993
973
|
MatButtonToggleGroup,
|
|
994
974
|
MatButtonToggle,
|
|
995
975
|
MatIcon,
|
|
996
|
-
|
|
976
|
+
ColorPicker,
|
|
997
977
|
GradientPicker,
|
|
998
978
|
GuiFileUploader,
|
|
999
|
-
], template: "@if (type === 'all') {\n <div class=\"gui-fill-picker-header\">\n <mat-button-toggle-group\n [(ngModel)]=\"selectedType\"\n hideSingleSelectionIndicator\n (ngModelChange)=\"onTypeChange()\"\n >\n @for (t of types; track $index) {\n <mat-button-toggle [value]=\"t.value\" [title]=\"t.label\">\n <mat-icon [svgIcon]=\"t.value\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n}\n\n<div class=\"gui-fill-picker-body\">\n @if (selectedType === 'solid') {\n <color-
|
|
979
|
+
], template: "@if (type === 'all') {\n <div class=\"gui-fill-picker-header\">\n <mat-button-toggle-group\n [(ngModel)]=\"selectedType\"\n hideSingleSelectionIndicator\n (ngModelChange)=\"onTypeChange()\"\n >\n @for (t of types; track $index) {\n <mat-button-toggle [value]=\"t.value\" [title]=\"t.label\">\n <mat-icon [svgIcon]=\"t.value\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n}\n\n<div class=\"gui-fill-picker-body\">\n @if (selectedType === 'solid') {\n <color-picker [(ngModel)]=\"fillValue.solid\" (ngModelChange)=\"onColorChange()\" />\n } @else if (selectedType === 'gradient') {\n <gradient-picker [(ngModel)]=\"fillValue.gradient\" (ngModelChange)=\"onGradientChange()\" />\n } @else if (selectedType === 'image') {\n <gui-file-uploader\n type=\"image\"\n [(ngModel)]=\"fillValue.image\"\n (ngModelChange)=\"onImageChange()\"\n />\n }\n</div>\n", styles: [".gui-fill-picker{display:block;width:15rem;border-radius:.5rem;background-color:var(--mat-expansion-container-background-color, var(--mat-sys-surface));color:var(--mat-expansion-container-text-color, var(--mat-sys-on-surface));box-shadow:inset 0 0 1px #ffffffa3,0 2px 4px #00000029,0 8px 16px #0000001f,0 0 1px #0000001f}.gui-fill-picker .color-picker{--cp-container-width: auto;--cp-container-padding: 0;--cp-container-shape: 0;--cp-container-elevation-shadow: none;--cp-container-background-color: transparent;--cp-container-text-color: var(--mat-form-field-filled-input-text-color, var(--mat-sys-on-surface))}.gui-fill-picker .gradient-picker{--gp-container-width: auto;--gp-container-vertical-padding: 0;--gp-container-margin: -4px -12px;--gp-container-shape: 0;--gp-container-elevation-shadow: none;--gp-container-background-color: transparent;--gp-container-text-color: var(--mat-form-field-filled-input-text-color, var(--mat-sys-on-surface));--gp-input-background-color: var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant));--gp-radio-button-selected-background-color: var(--mat-button-toggle-selected-state-background-color, var(--mat-sys-secondary-container));--gp-radio-button-selected-outline-color: var(--mat-button-toggle-divider-color, var(--mat-sys-outline))}.gui-fill-picker-header{padding:.375rem .375rem 0;line-height:1;--mat-button-toggle-shape: 0;--mat-button-toggle-height: 1}.gui-fill-picker-header .mat-button-toggle-group-appearance-standard{gap:.25rem;border:none}.gui-fill-picker-header .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}.gui-fill-picker-header .mat-button-toggle-appearance-standard{border-radius:.25rem}.gui-fill-picker-header .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{padding:0}.gui-fill-picker-body{padding:.75rem}\n"] }]
|
|
1000
980
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
1001
981
|
type: Input
|
|
1002
982
|
}], type: [{
|