@ngx-mce/color-picker 22.0.2-next.2 → 22.0.2-next.4

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.
@@ -349,10 +349,10 @@ class NgxMatBaseColorCanvas {
349
349
  emitChange(color) {
350
350
  this.colorChanged.emit(color);
351
351
  }
352
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatBaseColorCanvas, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
353
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: NgxMatBaseColorCanvas, isStandalone: true, inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, setColor: { classPropertyName: "setColor", publicName: "color", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged" }, ngImport: i0 });
352
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatBaseColorCanvas, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
353
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: NgxMatBaseColorCanvas, isStandalone: true, inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, setColor: { classPropertyName: "setColor", publicName: "color", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged" }, ngImport: i0 });
354
354
  }
355
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatBaseColorCanvas, decorators: [{
355
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatBaseColorCanvas, decorators: [{
356
356
  type: Directive
357
357
  }], ctorParameters: () => [{ type: undefined }], propDecorators: { colorChanged: [{ type: i0.Output, args: ["colorChanged"] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], setColor: [{
358
358
  type: Input,
@@ -396,10 +396,10 @@ class NgxMatColorSliderComponent extends NgxMatBaseColorCanvas {
396
396
  const { r, g, b } = getColorAtPosition(this.ctx, e.offsetX, e.offsetY);
397
397
  this.emitChange(new Color(r, g, b));
398
398
  }
399
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
400
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: NgxMatColorSliderComponent, isStandalone: true, selector: "ngx-mat-color-slider", usesInheritance: true, ngImport: i0, template: "<canvas\n id=\"color-strip\"\n class=\"zone-strip\"\n (mousedown)=\"onMousedown($event)\"\n (mouseup)=\"onMouseup($event)\"\n width=\"15\"\n height=\"234\"\n></canvas>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.Eager });
399
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
400
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: NgxMatColorSliderComponent, isStandalone: true, selector: "ngx-mat-color-slider", usesInheritance: true, ngImport: i0, template: "<canvas\n id=\"color-strip\"\n class=\"zone-strip\"\n (mousedown)=\"onMousedown($event)\"\n (mouseup)=\"onMouseup($event)\"\n width=\"15\"\n height=\"234\"\n></canvas>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.Eager });
401
401
  }
402
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorSliderComponent, decorators: [{
402
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorSliderComponent, decorators: [{
403
403
  type: Component,
404
404
  args: [{ selector: 'ngx-mat-color-slider', changeDetection: ChangeDetectionStrategy.Eager, template: "<canvas\n id=\"color-strip\"\n class=\"zone-strip\"\n (mousedown)=\"onMousedown($event)\"\n (mouseup)=\"onMouseup($event)\"\n width=\"15\"\n height=\"234\"\n></canvas>\n" }]
405
405
  }], ctorParameters: () => [] });
@@ -509,10 +509,10 @@ class NgxMatColorCanvasComponent extends NgxMatBaseColorCanvas {
509
509
  const { r, g, b } = getColorAtPosition(this.ctx, e.offsetX, e.offsetY);
510
510
  this.emitChange(new Color(r, g, b));
511
511
  }
512
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
513
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: NgxMatColorCanvasComponent, isStandalone: true, selector: "ngx-mat-color-canvas", host: { classAttribute: "ngx-mat-color-canvas" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n <div class=\"color-canvas-row\">\n <div class=\"zone-canvas\">\n <canvas\n id=\"color-block\"\n class=\"zone-block\"\n (mousedown)=\"onMousedown($event)\"\n (mouseup)=\"onMouseup($event)\"\n width=\"200\"\n height=\"235\"\n ></canvas>\n <ngx-mat-color-slider (colorChanged)=\"onSliderColorChanged($event)\" />\n </div>\n\n <div class=\"zone-inputs\">\n <mat-form-field [color]=\"theme()\">\n <mat-label>R</mat-label>\n <input\n matInput\n formControlName=\"r\"\n ngxMatNumericColorInput\n autocomplete=\"off\"\n />\n </mat-form-field>\n\n <mat-form-field [color]=\"theme()\">\n <mat-label>G</mat-label>\n <input\n matInput\n formControlName=\"g\"\n ngxMatNumericColorInput\n autocomplete=\"off\"\n />\n </mat-form-field>\n\n <mat-form-field [color]=\"theme()\">\n <mat-label>B</mat-label>\n <input\n matInput\n formControlName=\"b\"\n ngxMatNumericColorInput\n autocomplete=\"off\"\n />\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"color-canvas-row\">\n <button\n mat-mini-fab\n [style.background-color]=\"color()?.rgba || 'transparent'\"\n class=\"preview\"\n ></button>\n <mat-form-field [color]=\"theme()\">\n <mat-label>HEX6</mat-label>\n <mat-label matPrefix class=\"symbol\">#&nbsp;</mat-label>\n <input matInput formControlName=\"hex\" autocomplete=\"off\" />\n </mat-form-field>\n <mat-form-field class=\"input-opacity\" [color]=\"theme()\">\n <mat-label>A</mat-label>\n <input\n matInput\n formControlName=\"a\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n autocomplete=\"off\"\n />\n </mat-form-field>\n </div>\n</form>\n", styles: [".ngx-mat-color-canvas .color-canvas-row{display:flex}.ngx-mat-color-canvas .color-canvas-row:first-of-type{height:235px;margin-bottom:12px}.ngx-mat-color-canvas .color-canvas-row:first-of-type .card{height:180px}.ngx-mat-color-canvas .color-canvas-row canvas:hover{cursor:crosshair}.ngx-mat-color-canvas .color-canvas-row .zone{display:flex}.ngx-mat-color-canvas .color-canvas-row .zone-canvas{height:235px}.ngx-mat-color-canvas .color-canvas-row .zone-canvas .zone-block{border:1px solid rgba(0,0,0,.12)}.ngx-mat-color-canvas .color-canvas-row .zone-strip{flex-basis:auto;margin-left:10px}.ngx-mat-color-canvas .color-canvas-row .zone-inputs{display:flex;width:60px;height:235px;flex-direction:column;margin-left:16px;margin-top:12px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2){display:flex}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .preview{min-width:40px;min-height:40px;height:40px;width:40px;margin-top:12px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field{margin-left:16px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:first-of-type{width:170px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:first-of-type .symbol{font-weight:700;color:#0000008a}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:last-of-type{width:60px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:last-of-type .mat-mdc-text-field-wrapper{padding:0 8px}.ngx-mat-color-canvas .mat-mdc-form-field-label{font-weight:700}.ngx-mat-color-canvas .mat-mdc-form-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: NgxMatColorSliderComponent, selector: "ngx-mat-color-slider" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
512
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
513
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: NgxMatColorCanvasComponent, isStandalone: true, selector: "ngx-mat-color-canvas", host: { classAttribute: "ngx-mat-color-canvas" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n <div class=\"color-canvas-row\">\n <div class=\"zone-canvas\">\n <canvas\n id=\"color-block\"\n class=\"zone-block\"\n (mousedown)=\"onMousedown($event)\"\n (mouseup)=\"onMouseup($event)\"\n width=\"200\"\n height=\"235\"\n ></canvas>\n <ngx-mat-color-slider (colorChanged)=\"onSliderColorChanged($event)\" />\n </div>\n\n <div class=\"zone-inputs\">\n <mat-form-field [color]=\"theme()\">\n <mat-label>R</mat-label>\n <input\n matInput\n formControlName=\"r\"\n ngxMatNumericColorInput\n autocomplete=\"off\"\n />\n </mat-form-field>\n\n <mat-form-field [color]=\"theme()\">\n <mat-label>G</mat-label>\n <input\n matInput\n formControlName=\"g\"\n ngxMatNumericColorInput\n autocomplete=\"off\"\n />\n </mat-form-field>\n\n <mat-form-field [color]=\"theme()\">\n <mat-label>B</mat-label>\n <input\n matInput\n formControlName=\"b\"\n ngxMatNumericColorInput\n autocomplete=\"off\"\n />\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"color-canvas-row\">\n <button\n mat-mini-fab\n [style.background-color]=\"color()?.rgba || 'transparent'\"\n class=\"preview\"\n ></button>\n <mat-form-field [color]=\"theme()\">\n <mat-label>HEX6</mat-label>\n <mat-label matPrefix class=\"symbol\">#&nbsp;</mat-label>\n <input matInput formControlName=\"hex\" autocomplete=\"off\" />\n </mat-form-field>\n <mat-form-field class=\"input-opacity\" [color]=\"theme()\">\n <mat-label>A</mat-label>\n <input\n matInput\n formControlName=\"a\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n autocomplete=\"off\"\n />\n </mat-form-field>\n </div>\n</form>\n", styles: [".ngx-mat-color-canvas .color-canvas-row{display:flex}.ngx-mat-color-canvas .color-canvas-row:first-of-type{height:235px;margin-bottom:12px}.ngx-mat-color-canvas .color-canvas-row:first-of-type .card{height:180px}.ngx-mat-color-canvas .color-canvas-row canvas:hover{cursor:crosshair}.ngx-mat-color-canvas .color-canvas-row .zone{display:flex}.ngx-mat-color-canvas .color-canvas-row .zone-canvas{height:235px}.ngx-mat-color-canvas .color-canvas-row .zone-canvas .zone-block{border:1px solid rgba(0,0,0,.12)}.ngx-mat-color-canvas .color-canvas-row .zone-strip{flex-basis:auto;margin-left:10px}.ngx-mat-color-canvas .color-canvas-row .zone-inputs{display:flex;width:60px;height:235px;flex-direction:column;margin-left:16px;margin-top:12px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2){display:flex}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .preview{min-width:40px;min-height:40px;height:40px;width:40px;margin-top:12px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field{margin-left:16px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:first-of-type{width:170px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:first-of-type .symbol{font-weight:700;color:#0000008a}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:last-of-type{width:60px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:last-of-type .mat-mdc-text-field-wrapper{padding:0 8px}.ngx-mat-color-canvas .mat-mdc-form-field-label{font-weight:700}.ngx-mat-color-canvas .mat-mdc-form-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: NgxMatColorSliderComponent, selector: "ngx-mat-color-slider" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
514
514
  }
515
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorCanvasComponent, decorators: [{
515
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorCanvasComponent, decorators: [{
516
516
  type: Component,
517
517
  args: [{ selector: 'ngx-mat-color-canvas', encapsulation: ViewEncapsulation.None, host: {
518
518
  class: 'ngx-mat-color-canvas',
@@ -537,10 +537,10 @@ class NgxMatColorCollectionComponent {
537
537
  this.colorChanged.emit(new Color(rgba.r, rgba.g, rgba.b, rgba.a));
538
538
  }
539
539
  }
540
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorCollectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
541
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: NgxMatColorCollectionComponent, isStandalone: true, selector: "ngx-mat-color-collection", inputs: { color: "color" }, outputs: { colorChanged: "colorChanged" }, host: { classAttribute: "ngx-mat-color-collection" }, ngImport: i0, template: "<div class=\"color-collection-row\">\n @for (c of colors1; track c) {\n <button\n mat-mini-fab\n [style.background-color]=\"c\"\n class=\"btn-color\"\n (click)=\"select(c)\"\n [ngClass]=\"{ active: selectedColor() === c }\"\n [disableRipple]=\"true\"></button>\n }\n</div>\n<div class=\"color-collection-row\">\n @for (c of colors2; track c) {\n <button\n mat-mini-fab\n [style.background-color]=\"c\"\n class=\"btn-color\"\n (click)=\"select(c)\"\n [ngClass]=\"{ active: selectedColor() === c }\"\n [disableRipple]=\"true\"></button>\n }\n</div>\n", styles: [".ngx-mat-color-collection .btn-color{height:20px;width:20px;margin-right:11px;box-shadow:none;opacity:.3;will-change:opacity;transition:opacity .3s linear}.ngx-mat-color-collection .btn-color.active{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;opacity:1}.ngx-mat-color-collection .btn-color .mat-mdc-button-touch-target{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
540
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorCollectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
541
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: NgxMatColorCollectionComponent, isStandalone: true, selector: "ngx-mat-color-collection", inputs: { color: "color" }, outputs: { colorChanged: "colorChanged" }, host: { classAttribute: "ngx-mat-color-collection" }, ngImport: i0, template: "<div class=\"color-collection-row\">\n @for (c of colors1; track c) {\n <button\n mat-mini-fab\n [style.background-color]=\"c\"\n class=\"btn-color\"\n (click)=\"select(c)\"\n [ngClass]=\"{ active: selectedColor() === c }\"\n [disableRipple]=\"true\"></button>\n }\n</div>\n<div class=\"color-collection-row\">\n @for (c of colors2; track c) {\n <button\n mat-mini-fab\n [style.background-color]=\"c\"\n class=\"btn-color\"\n (click)=\"select(c)\"\n [ngClass]=\"{ active: selectedColor() === c }\"\n [disableRipple]=\"true\"></button>\n }\n</div>\n", styles: [".ngx-mat-color-collection .btn-color{height:20px;width:20px;margin-right:11px;box-shadow:none;opacity:.3;will-change:opacity;transition:opacity .3s linear}.ngx-mat-color-collection .btn-color.active{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;opacity:1}.ngx-mat-color-collection .btn-color .mat-mdc-button-touch-target{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
542
542
  }
543
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorCollectionComponent, decorators: [{
543
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorCollectionComponent, decorators: [{
544
544
  type: Component,
545
545
  args: [{ selector: 'ngx-mat-color-collection', encapsulation: ViewEncapsulation.None, host: {
546
546
  class: 'ngx-mat-color-collection',
@@ -558,10 +558,10 @@ class NgxMatColorPaletteComponent {
558
558
  handleColorChanged(color) {
559
559
  this.colorChanged.emit(color);
560
560
  }
561
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
562
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: NgxMatColorPaletteComponent, isStandalone: true, selector: "ngx-mat-color-palette", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged" }, host: { classAttribute: "ngx-mat-color-palette" }, ngImport: i0, template: "<ngx-mat-color-canvas\n (colorChanged)=\"handleColorChanged($event)\"\n [color]=\"color()\"\n [theme]=\"theme()\"\n/>\n\n<ngx-mat-color-collection\n (colorChanged)=\"handleColorChanged($event)\"\n [color]=\"color()\"\n/>\n", styles: [".ngx-mat-color-palette .actions{margin-top:10px;display:flex}.ngx-mat-color-palette .actions .left{display:flex;flex-direction:column;margin-right:15px}.ngx-mat-color-palette .actions .left .preview{flex:2 1 auto;margin-bottom:10px}.ngx-mat-color-palette .actions .right{display:flex;width:60px;flex-direction:column}\n"], dependencies: [{ kind: "component", type: NgxMatColorCollectionComponent, selector: "ngx-mat-color-collection", inputs: ["color"], outputs: ["colorChanged"] }, { kind: "component", type: NgxMatColorCanvasComponent, selector: "ngx-mat-color-canvas" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
561
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
562
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: NgxMatColorPaletteComponent, isStandalone: true, selector: "ngx-mat-color-palette", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged" }, host: { classAttribute: "ngx-mat-color-palette" }, ngImport: i0, template: "<ngx-mat-color-canvas\n (colorChanged)=\"handleColorChanged($event)\"\n [color]=\"color()\"\n [theme]=\"theme()\"\n/>\n\n<ngx-mat-color-collection\n (colorChanged)=\"handleColorChanged($event)\"\n [color]=\"color()\"\n/>\n", styles: [".ngx-mat-color-palette .actions{margin-top:10px;display:flex}.ngx-mat-color-palette .actions .left{display:flex;flex-direction:column;margin-right:15px}.ngx-mat-color-palette .actions .left .preview{flex:2 1 auto;margin-bottom:10px}.ngx-mat-color-palette .actions .right{display:flex;width:60px;flex-direction:column}\n"], dependencies: [{ kind: "component", type: NgxMatColorCollectionComponent, selector: "ngx-mat-color-collection", inputs: ["color"], outputs: ["colorChanged"] }, { kind: "component", type: NgxMatColorCanvasComponent, selector: "ngx-mat-color-canvas" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
563
563
  }
564
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorPaletteComponent, decorators: [{
564
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorPaletteComponent, decorators: [{
565
565
  type: Component,
566
566
  args: [{ selector: 'ngx-mat-color-palette', encapsulation: ViewEncapsulation.None, host: {
567
567
  class: 'ngx-mat-color-palette',
@@ -586,10 +586,10 @@ class ColorAdapter {
586
586
  }
587
587
  return null;
588
588
  }
589
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ColorAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
590
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ColorAdapter });
589
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ColorAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
590
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ColorAdapter });
591
591
  }
592
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ColorAdapter, decorators: [{
592
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ColorAdapter, decorators: [{
593
593
  type: Injectable
594
594
  }] });
595
595
 
@@ -642,10 +642,10 @@ class NgxMatColorPickerContentComponent {
642
642
  this._animationDone.next();
643
643
  }
644
644
  }
645
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorPickerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
646
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: NgxMatColorPickerContentComponent, isStandalone: true, selector: "ngx-mat-color-picker-content", inputs: { color: "color" }, outputs: { _animationDone: "_animationDone" }, host: { listeners: { "animationend": "_onAnimationEnd($event)" }, properties: { "class.ngx-mat-colorpicker-content-touch": "picker?.touchUi", "class.panel-enter-dropdown": "this.isEnterDropdown", "class.panel-enter-dialog": "this.isEnterDialog", "class.panel-leave": "this.isLeaving" }, classAttribute: "ngx-mat-colorpicker-content" }, viewQueries: [{ propertyName: "_palette", first: true, predicate: NgxMatColorPaletteComponent, descendants: true, isSignal: true }], exportAs: ["ngxMatColorPickerContent"], ngImport: i0, template: "<ngx-mat-color-palette\n (colorChanged)=\"picker?.select($event)\"\n [color]=\"picker!._selected\"\n [theme]=\"color\"></ngx-mat-color-palette>\n", styles: ["@keyframes panelDropdownEnter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scale(1)}}@keyframes panelDialogEnter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes panelLeave{0%{opacity:1}to{opacity:0}}.panel-enter-dropdown{animation:panelDropdownEnter .12s cubic-bezier(0,0,.2,1)}.panel-enter-dialog{animation:panelDialogEnter .15s cubic-bezier(0,0,.2,1)}.panel-leave{animation:panelLeave .1s linear forwards;pointer-events:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.calendar-fade-enter{animation:fadeIn .12s .1s cubic-bezier(.55,0,.55,.2) forwards}\n", ".ngx-mat-colorpicker-content{display:block;border-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;background-color:#fff;color:#000000de;padding:16px}.ngx-mat-colorpicker-content .ngx-mat-color-palette{width:296px;height:354px}.ngx-mat-colorpicker-content-touch{display:block;max-height:80vh;overflow:auto}.ngx-mat-colorpicker-content-touch .ngx-mat-color-palette{min-width:250px;min-height:312px;max-width:750px;max-height:788px}@media all and (orientation:landscape){.mat-colorpicker-content-touch .ngx-mat-color-palette{width:64vh;height:80vh}}@media all and (orientation:portrait){.mat-colorpicker-content-touch .ngx-mat-color-palette{width:80vw;height:100vw}}\n"], dependencies: [{ kind: "component", type: NgxMatColorPaletteComponent, selector: "ngx-mat-color-palette", inputs: ["color", "theme"], outputs: ["colorChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
645
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorPickerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
646
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: NgxMatColorPickerContentComponent, isStandalone: true, selector: "ngx-mat-color-picker-content", inputs: { color: "color" }, outputs: { _animationDone: "_animationDone" }, host: { listeners: { "animationend": "_onAnimationEnd($event)" }, properties: { "class.ngx-mat-colorpicker-content-touch": "picker?.touchUi", "class.panel-enter-dropdown": "this.isEnterDropdown", "class.panel-enter-dialog": "this.isEnterDialog", "class.panel-leave": "this.isLeaving" }, classAttribute: "ngx-mat-colorpicker-content" }, viewQueries: [{ propertyName: "_palette", first: true, predicate: NgxMatColorPaletteComponent, descendants: true, isSignal: true }], exportAs: ["ngxMatColorPickerContent"], ngImport: i0, template: "<ngx-mat-color-palette\n (colorChanged)=\"picker?.select($event)\"\n [color]=\"picker!._selected\"\n [theme]=\"color\"></ngx-mat-color-palette>\n", styles: ["@keyframes panelDropdownEnter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scale(1)}}@keyframes panelDialogEnter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}@keyframes panelLeave{0%{opacity:1}to{opacity:0}}.panel-enter-dropdown{animation:panelDropdownEnter .12s cubic-bezier(0,0,.2,1)}.panel-enter-dialog{animation:panelDialogEnter .15s cubic-bezier(0,0,.2,1)}.panel-leave{animation:panelLeave .1s linear forwards;pointer-events:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.calendar-fade-enter{animation:fadeIn .12s .1s cubic-bezier(.55,0,.55,.2) forwards}\n", ".ngx-mat-colorpicker-content{display:block;border-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;background-color:#fff;color:#000000de;padding:16px}.ngx-mat-colorpicker-content .ngx-mat-color-palette{width:296px;height:354px}.ngx-mat-colorpicker-content-touch{display:block;max-height:80vh;overflow:auto}.ngx-mat-colorpicker-content-touch .ngx-mat-color-palette{min-width:250px;min-height:312px;max-width:750px;max-height:788px}@media all and (orientation:landscape){.mat-colorpicker-content-touch .ngx-mat-color-palette{width:64vh;height:80vh}}@media all and (orientation:portrait){.mat-colorpicker-content-touch .ngx-mat-color-palette{width:80vw;height:100vw}}\n"], dependencies: [{ kind: "component", type: NgxMatColorPaletteComponent, selector: "ngx-mat-color-palette", inputs: ["color", "theme"], outputs: ["colorChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
647
647
  }
648
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorPickerContentComponent, decorators: [{
648
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorPickerContentComponent, decorators: [{
649
649
  type: Component,
650
650
  args: [{ selector: 'ngx-mat-color-picker-content', host: {
651
651
  class: 'ngx-mat-colorpicker-content',
@@ -979,10 +979,10 @@ class NgxMatColorPickerComponent {
979
979
  },
980
980
  ]);
981
981
  }
982
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
983
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: NgxMatColorPickerComponent, isStandalone: true, selector: "ngx-mat-color-picker", inputs: { id: "id", disabled: "disabled", touchUi: "touchUi", opened: "opened", defaultColor: "defaultColor", color: "color" }, outputs: { openedStream: "opened", closedStream: "closed" }, host: { properties: { "class.mat-primary": "this.isPrimary", "class.mat-accent": "this.isAccent", "class.mat-warn": "this.isWarn" } }, providers: [ColorAdapter, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], exportAs: ["ngxMatColorPicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
982
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
983
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: NgxMatColorPickerComponent, isStandalone: true, selector: "ngx-mat-color-picker", inputs: { id: "id", disabled: "disabled", touchUi: "touchUi", opened: "opened", defaultColor: "defaultColor", color: "color" }, outputs: { openedStream: "opened", closedStream: "closed" }, host: { properties: { "class.mat-primary": "this.isPrimary", "class.mat-accent": "this.isAccent", "class.mat-warn": "this.isWarn" } }, providers: [ColorAdapter, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], exportAs: ["ngxMatColorPicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
984
984
  }
985
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorPickerComponent, decorators: [{
985
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorPickerComponent, decorators: [{
986
986
  type: Component,
987
987
  args: [{
988
988
  selector: 'ngx-mat-color-picker',
@@ -1210,15 +1210,15 @@ class NgxMatColorPickerInput {
1210
1210
  this._validatorOnChange();
1211
1211
  }
1212
1212
  }
1213
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorPickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1214
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: NgxMatColorPickerInput, isStandalone: true, selector: "input[ngxMatColorPicker]", inputs: { ngxMatColorPicker: "ngxMatColorPicker", disabled: "disabled", value: "value" }, outputs: { colorChange: "colorChange", colorInput: "colorInput" }, host: { listeners: { "input": "_onInput($event)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_picker ? \"dialog\" : null", "attr.aria-owns": "(_picker?.opened && _picker?.id) || null", "disabled": "disabled" } }, providers: [
1213
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorPickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1214
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: NgxMatColorPickerInput, isStandalone: true, selector: "input[ngxMatColorPicker]", inputs: { ngxMatColorPicker: "ngxMatColorPicker", disabled: "disabled", value: "value" }, outputs: { colorChange: "colorChange", colorInput: "colorInput" }, host: { listeners: { "input": "_onInput($event)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_picker ? \"dialog\" : null", "attr.aria-owns": "(_picker?.opened && _picker?.id) || null", "disabled": "disabled" } }, providers: [
1215
1215
  { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: NgxMatColorPickerInput },
1216
1216
  ColorAdapter,
1217
1217
  MAT_COLORPICKER_VALIDATORS,
1218
1218
  MAT_COLORPICKER_VALUE_ACCESSOR,
1219
1219
  ], exportAs: ["ngxMatColorPickerInput"], ngImport: i0 });
1220
1220
  }
1221
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorPickerInput, decorators: [{
1221
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorPickerInput, decorators: [{
1222
1222
  type: Directive,
1223
1223
  args: [{
1224
1224
  selector: 'input[ngxMatColorPicker]',
@@ -1248,10 +1248,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
1248
1248
  }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], colorInput: [{ type: i0.Output, args: ["colorInput"] }] } });
1249
1249
 
1250
1250
  class NgxMatColorpickerToggleIcon {
1251
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1252
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: NgxMatColorpickerToggleIcon, isStandalone: true, selector: "[ngxMatColorpickerToggleIcon]", ngImport: i0 });
1251
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1252
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: NgxMatColorpickerToggleIcon, isStandalone: true, selector: "[ngxMatColorpickerToggleIcon]", ngImport: i0 });
1253
1253
  }
1254
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorpickerToggleIcon, decorators: [{
1254
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorpickerToggleIcon, decorators: [{
1255
1255
  type: Directive,
1256
1256
  args: [{
1257
1257
  selector: '[ngxMatColorpickerToggleIcon]',
@@ -1305,10 +1305,10 @@ class NgxMatColorToggleComponent {
1305
1305
  this._stateChanges.unsubscribe();
1306
1306
  this._stateChanges = merge(disabled$, inputDisabled$, pickerToggled$).subscribe(() => this._cd.markForCheck());
1307
1307
  }
1308
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1309
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.1", type: NgxMatColorToggleComponent, isStandalone: true, selector: "ngx-mat-color-toggle", inputs: { picker: { classPropertyName: "picker", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "_button()?.focus()" }, properties: { "attr.tabindex": "-1", "class.ngx-mat-color-toggle-active": "picker()?.opened", "class.mat-accent": "picker()?.color === \"accent\"", "class.mat-warn": "picker()?.color === \"warn\"" }, classAttribute: "ngx-mat-color-toggle" }, viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true, isSignal: true }], exportAs: ["ngxMatColorPickerToggle"], ngImport: i0, template: "<button\n #button\n mat-icon-button\n type=\"button\"\n [attr.aria-haspopup]=\"picker() ? 'dialog' : null\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex()\"\n [disabled]=\"disabled\"\n (click)=\"open($event)\"\n [disableRipple]=\"disableRipple()\"\n>\n <ng-content select=\"[ngxMatColorpickerToggleIcon]\">\n <mat-icon [style.color]=\"picker()?._selected?.rgba\">palette</mat-icon>\n </ng-content>\n</button>\n", styles: [".mat-form-field-appearance .mat-form-field-prefix .ngx-mat-color-toggle-default-icon,.mat-form-field-appearance .mat-form-field-suffix .ngx-mat-color-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-prefix .ngx-mat-color-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-suffix .ngx-mat-color-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-prefix .mat-icon-button .ngx-mat-color-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-suffix .mat-icon-button .ngx-mat-color-toggle-default-icon{margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
1308
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1309
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: NgxMatColorToggleComponent, isStandalone: true, selector: "ngx-mat-color-toggle", inputs: { picker: { classPropertyName: "picker", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "_button()?.focus()" }, properties: { "attr.tabindex": "-1", "class.ngx-mat-color-toggle-active": "picker()?.opened", "class.mat-accent": "picker()?.color === \"accent\"", "class.mat-warn": "picker()?.color === \"warn\"" }, classAttribute: "ngx-mat-color-toggle" }, viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true, isSignal: true }], exportAs: ["ngxMatColorPickerToggle"], ngImport: i0, template: "<button\n #button\n mat-icon-button\n type=\"button\"\n [attr.aria-haspopup]=\"picker() ? 'dialog' : null\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex()\"\n [disabled]=\"disabled\"\n (click)=\"open($event)\"\n [disableRipple]=\"disableRipple()\"\n>\n <ng-content select=\"[ngxMatColorpickerToggleIcon]\">\n <mat-icon [style.color]=\"picker()?._selected?.rgba\">palette</mat-icon>\n </ng-content>\n</button>\n", styles: [".mat-form-field-appearance .mat-form-field-prefix .ngx-mat-color-toggle-default-icon,.mat-form-field-appearance .mat-form-field-suffix .ngx-mat-color-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-prefix .ngx-mat-color-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-suffix .ngx-mat-color-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-prefix .mat-icon-button .ngx-mat-color-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-suffix .mat-icon-button .ngx-mat-color-toggle-default-icon{margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
1310
1310
  }
1311
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NgxMatColorToggleComponent, decorators: [{
1311
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxMatColorToggleComponent, decorators: [{
1312
1312
  type: Component,
1313
1313
  args: [{ selector: 'ngx-mat-color-toggle', host: {
1314
1314
  class: 'ngx-mat-color-toggle',
@@ -1337,10 +1337,10 @@ class NumericColorInputDirective {
1337
1337
  val = isNaN(val) ? 0 : val;
1338
1338
  input.value = val;
1339
1339
  }
1340
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NumericColorInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1341
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: NumericColorInputDirective, isStandalone: true, selector: "[ngxMatNumericColorInput]", host: { listeners: { "input": "onInput($event)" } }, ngImport: i0 });
1340
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NumericColorInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1341
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: NumericColorInputDirective, isStandalone: true, selector: "[ngxMatNumericColorInput]", host: { listeners: { "input": "onInput($event)" } }, ngImport: i0 });
1342
1342
  }
1343
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: NumericColorInputDirective, decorators: [{
1343
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NumericColorInputDirective, decorators: [{
1344
1344
  type: Directive,
1345
1345
  args: [{
1346
1346
  selector: '[ngxMatNumericColorInput]',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ngx-mce/color-picker",
3
- "version": "22.0.2-next.2",
3
+ "version": "22.0.2-next.4",
4
4
  "description": "Angular Material Color Picker",
5
5
  "author": "Felipe B.",
6
6
  "repository": {