@dmlibs/dm-cmps 0.1.26 → 0.1.28
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.
|
@@ -779,11 +779,23 @@ class DmColorPicker {
|
|
|
779
779
|
registerOnChange(fn) { }
|
|
780
780
|
registerOnTouched(fn) { }
|
|
781
781
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
782
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DmColorPicker, isStandalone: true, selector: "dm-color-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, customColor: { classPropertyName: "customColor", publicName: "customColor", isSignal: true, isRequired: false, transformFunction: null }, opacitySlider: { classPropertyName: "opacitySlider", publicName: "opacitySlider", isSignal: true, isRequired: false, transformFunction: null }, opacitySliderLabel: { classPropertyName: "opacitySliderLabel", publicName: "opacitySliderLabel", isSignal: true, isRequired: false, transformFunction: null }, customColorTooltip: { classPropertyName: "customColorTooltip", publicName: "customColorTooltip", isSignal: true, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "wrapperClass", isSignal: true, isRequired: false, transformFunction: null }, wrapperStyle: { classPropertyName: "wrapperStyle", publicName: "wrapperStyle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onColorChange: "onColorChange", value: "valueChange" },
|
|
782
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DmColorPicker, isStandalone: true, selector: "dm-color-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, customColor: { classPropertyName: "customColor", publicName: "customColor", isSignal: true, isRequired: false, transformFunction: null }, opacitySlider: { classPropertyName: "opacitySlider", publicName: "opacitySlider", isSignal: true, isRequired: false, transformFunction: null }, opacitySliderLabel: { classPropertyName: "opacitySliderLabel", publicName: "opacitySliderLabel", isSignal: true, isRequired: false, transformFunction: null }, customColorTooltip: { classPropertyName: "customColorTooltip", publicName: "customColorTooltip", isSignal: true, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "wrapperClass", isSignal: true, isRequired: false, transformFunction: null }, wrapperStyle: { classPropertyName: "wrapperStyle", publicName: "wrapperStyle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onColorChange: "onColorChange", value: "valueChange" }, providers: [
|
|
783
|
+
{
|
|
784
|
+
provide: NG_VALUE_ACCESSOR,
|
|
785
|
+
useExisting: forwardRef(() => DmColorPicker),
|
|
786
|
+
multi: true,
|
|
787
|
+
},
|
|
788
|
+
], ngImport: i0, template: "<div class=\"dm-color-picker-wrapper\" [class]=\"wrapperClass()\" [style]=\"wrapperStyle()\">\n <div\n class=\"dm-color-picker\"\n [matMenuTriggerFor]=\"colorPicker\"\n [style.background-color]=\"selectedColor()\"\n [matTooltip]=\"tooltip()\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [style.width.px]=\"width()\"\n [style.height.px]=\"height()\"\n [style.border-radius]=\"radius()\"\n ></div>\n @if (opacitySlider()){\n <div class=\"dm-color-picker-slider-wrapper\">\n {{ opacitySliderLabel() }}\n <mat-slider min=\"0\" max=\"100\" step=\"1\" discrete [displayWith]=\"formatLabel\">\n <input\n matSliderThumb\n [value]=\"getOpacity()\"\n (input)=\"onOpacityChange($event)\"\n #slider\n (change)=\"updateSelectedColor()\"\n />\n </mat-slider>\n </div>\n }\n</div>\n\n<mat-menu #colorPicker=\"matMenu\">\n <div class=\"dm-color-picker-menu\">\n @for (color of colors(); track color.color){\n <div\n (click)=\"onColorSelected(color.color)\"\n class=\"dm-color-div\"\n [matTooltip]=\"color.tooltip || ''\"\n matTooltipPosition=\"above\"\n [style.background-color]=\"color.color\"\n ></div>\n } @if (customColor()){<input\n (click)=\"$event.stopPropagation()\"\n [matTooltip]=\"customColorTooltip()\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [value]=\"selectedColor()\"\n type=\"color\"\n class=\"pointer\"\n (change)=\"_onColorChange($event)\"\n />}\n </div>\n</mat-menu>\n", styles: [".dm-color-picker-wrapper{display:flex;flex-direction:column;align-items:start;width:fit-content}.dm-color-picker-wrapper .dm-color-picker{cursor:pointer;padding:3px;box-shadow:0 0 2.5px 1px #00000080}.dm-color-picker-wrapper .dm-color-picker-slider-wrapper{display:flex;align-items:center;gap:5px}.dm-color-picker-menu{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;height:100%}.dm-color-picker-menu .dm-color-div{width:30px;height:30px;border-radius:50%;margin:5px;cursor:pointer;box-shadow:0 0 2.5px 1px #00000080}.dm-color-picker-menu .dm-color-div:hover{box-shadow:0 0 5px 2px #00000080}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i3$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] });
|
|
783
789
|
}
|
|
784
790
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmColorPicker, decorators: [{
|
|
785
791
|
type: Component,
|
|
786
|
-
args: [{ selector: 'dm-color-picker', standalone: true, imports: [MatMenuModule, MatTooltipModule, CommonModule, MatSliderModule],
|
|
792
|
+
args: [{ selector: 'dm-color-picker', standalone: true, imports: [MatMenuModule, MatTooltipModule, CommonModule, MatSliderModule], providers: [
|
|
793
|
+
{
|
|
794
|
+
provide: NG_VALUE_ACCESSOR,
|
|
795
|
+
useExisting: forwardRef(() => DmColorPicker),
|
|
796
|
+
multi: true,
|
|
797
|
+
},
|
|
798
|
+
], template: "<div class=\"dm-color-picker-wrapper\" [class]=\"wrapperClass()\" [style]=\"wrapperStyle()\">\n <div\n class=\"dm-color-picker\"\n [matMenuTriggerFor]=\"colorPicker\"\n [style.background-color]=\"selectedColor()\"\n [matTooltip]=\"tooltip()\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [style.width.px]=\"width()\"\n [style.height.px]=\"height()\"\n [style.border-radius]=\"radius()\"\n ></div>\n @if (opacitySlider()){\n <div class=\"dm-color-picker-slider-wrapper\">\n {{ opacitySliderLabel() }}\n <mat-slider min=\"0\" max=\"100\" step=\"1\" discrete [displayWith]=\"formatLabel\">\n <input\n matSliderThumb\n [value]=\"getOpacity()\"\n (input)=\"onOpacityChange($event)\"\n #slider\n (change)=\"updateSelectedColor()\"\n />\n </mat-slider>\n </div>\n }\n</div>\n\n<mat-menu #colorPicker=\"matMenu\">\n <div class=\"dm-color-picker-menu\">\n @for (color of colors(); track color.color){\n <div\n (click)=\"onColorSelected(color.color)\"\n class=\"dm-color-div\"\n [matTooltip]=\"color.tooltip || ''\"\n matTooltipPosition=\"above\"\n [style.background-color]=\"color.color\"\n ></div>\n } @if (customColor()){<input\n (click)=\"$event.stopPropagation()\"\n [matTooltip]=\"customColorTooltip()\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [value]=\"selectedColor()\"\n type=\"color\"\n class=\"pointer\"\n (change)=\"_onColorChange($event)\"\n />}\n </div>\n</mat-menu>\n", styles: [".dm-color-picker-wrapper{display:flex;flex-direction:column;align-items:start;width:fit-content}.dm-color-picker-wrapper .dm-color-picker{cursor:pointer;padding:3px;box-shadow:0 0 2.5px 1px #00000080}.dm-color-picker-wrapper .dm-color-picker-slider-wrapper{display:flex;align-items:center;gap:5px}.dm-color-picker-menu{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;height:100%}.dm-color-picker-menu .dm-color-div{width:30px;height:30px;border-radius:50%;margin:5px;cursor:pointer;box-shadow:0 0 2.5px 1px #00000080}.dm-color-picker-menu .dm-color-div:hover{box-shadow:0 0 5px 2px #00000080}.pointer{cursor:pointer}\n"] }]
|
|
787
799
|
}], ctorParameters: () => [], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], customColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColor", required: false }] }], opacitySlider: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacitySlider", required: false }] }], opacitySliderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacitySliderLabel", required: false }] }], customColorTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColorTooltip", required: false }] }], wrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperClass", required: false }] }], wrapperStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperStyle", required: false }] }], onColorChange: [{ type: i0.Output, args: ["onColorChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
788
800
|
|
|
789
801
|
const DEFAULT_SPINNER_ID = 'dm-spinner';
|