cmat 0.0.89 → 0.0.90

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.
Files changed (89) hide show
  1. package/fesm2022/cmat-components-adapter.mjs +9 -9
  2. package/fesm2022/cmat-components-breadcrumb.mjs +9 -9
  3. package/fesm2022/cmat-components-card.mjs +3 -3
  4. package/fesm2022/cmat-components-carousel.mjs +12 -12
  5. package/fesm2022/cmat-components-cascade.mjs +9 -9
  6. package/fesm2022/cmat-components-chip-input.mjs +3 -3
  7. package/fesm2022/cmat-components-code-editor.mjs +3 -3
  8. package/fesm2022/cmat-components-color-picker.mjs +27 -27
  9. package/fesm2022/cmat-components-custom-formly.mjs +96 -96
  10. package/fesm2022/cmat-components-data-picker.mjs +15 -15
  11. package/fesm2022/cmat-components-date-range.mjs +3 -3
  12. package/fesm2022/cmat-components-date-time-display.mjs +3 -3
  13. package/fesm2022/cmat-components-drawer.mjs +6 -6
  14. package/fesm2022/cmat-components-empty-state.mjs +3 -3
  15. package/fesm2022/cmat-components-file-preview.mjs +3 -3
  16. package/fesm2022/cmat-components-filter-toolbar.mjs +3 -3
  17. package/fesm2022/cmat-components-form-actions.mjs +3 -3
  18. package/fesm2022/cmat-components-fullscreen.mjs +3 -3
  19. package/fesm2022/cmat-components-highlight.mjs +6 -6
  20. package/fesm2022/cmat-components-image-viewer.mjs +3 -3
  21. package/fesm2022/cmat-components-inline-loading.mjs +3 -3
  22. package/fesm2022/cmat-components-json-editor.mjs +3 -3
  23. package/fesm2022/cmat-components-knob-input.mjs +3 -3
  24. package/fesm2022/cmat-components-masonry.mjs +3 -3
  25. package/fesm2022/cmat-components-material-color-picker.mjs +3 -3
  26. package/fesm2022/cmat-components-material-datetimepicker.mjs +42 -42
  27. package/fesm2022/cmat-components-navigation.mjs +39 -39
  28. package/fesm2022/cmat-components-opt-input.mjs +3 -3
  29. package/fesm2022/cmat-components-org-chart.mjs +9 -9
  30. package/fesm2022/cmat-components-page-header.mjs +3 -3
  31. package/fesm2022/cmat-components-pagination.mjs +12 -12
  32. package/fesm2022/cmat-components-password-strength.mjs +9 -9
  33. package/fesm2022/cmat-components-popover.mjs +9 -9
  34. package/fesm2022/cmat-components-progress-bar.mjs +3 -3
  35. package/fesm2022/cmat-components-qrcode.mjs +3 -3
  36. package/fesm2022/cmat-components-rating.mjs +3 -3
  37. package/fesm2022/cmat-components-rich-text-editor.mjs +3 -3
  38. package/fesm2022/cmat-components-select-search.mjs +9 -9
  39. package/fesm2022/cmat-components-select-table.mjs +3 -3
  40. package/fesm2022/cmat-components-select-tree.mjs +3 -3
  41. package/fesm2022/cmat-components-skeleton.mjs +3 -3
  42. package/fesm2022/cmat-components-speed-dial.mjs +9 -9
  43. package/fesm2022/cmat-components-status-tag.mjs +3 -3
  44. package/fesm2022/cmat-components-table-toolbar.mjs +3 -3
  45. package/fesm2022/cmat-components-timeline.mjs +12 -12
  46. package/fesm2022/cmat-components-toast.mjs +11 -10
  47. package/fesm2022/cmat-components-toast.mjs.map +1 -1
  48. package/fesm2022/cmat-components-transfer-picker.mjs +18 -18
  49. package/fesm2022/cmat-components-treetable.mjs +6 -6
  50. package/fesm2022/cmat-components-upload.mjs +9 -9
  51. package/fesm2022/cmat-directives-animate-on-scroll.mjs +6 -6
  52. package/fesm2022/cmat-directives-arrow-cursor.mjs +3 -3
  53. package/fesm2022/cmat-directives-autofocus.mjs +3 -3
  54. package/fesm2022/cmat-directives-data-exporter.mjs +21 -21
  55. package/fesm2022/cmat-directives-debounce.mjs +9 -9
  56. package/fesm2022/cmat-directives-digit-only.mjs +6 -6
  57. package/fesm2022/cmat-directives-equal-validator.mjs +3 -3
  58. package/fesm2022/cmat-directives-seamless-auto-scroll.mjs +3 -3
  59. package/fesm2022/cmat-lib-mock-api.mjs +6 -6
  60. package/fesm2022/cmat-pipes-bytes.mjs +3 -3
  61. package/fesm2022/cmat-pipes-date-format.mjs +3 -3
  62. package/fesm2022/cmat-pipes-find-by-key.mjs +3 -3
  63. package/fesm2022/cmat-pipes-group-by.mjs +3 -3
  64. package/fesm2022/cmat-pipes-keys.mjs +3 -3
  65. package/fesm2022/cmat-pipes-secure.mjs +3 -3
  66. package/fesm2022/cmat-pipes-uppercase.mjs +3 -3
  67. package/fesm2022/cmat-services-alert.mjs +17 -6
  68. package/fesm2022/cmat-services-alert.mjs.map +1 -1
  69. package/fesm2022/cmat-services-config.mjs +6 -6
  70. package/fesm2022/cmat-services-confirmation.mjs +6 -6
  71. package/fesm2022/cmat-services-data.mjs +3 -3
  72. package/fesm2022/cmat-services-export-as.mjs +3 -3
  73. package/fesm2022/cmat-services-loading.mjs +6 -6
  74. package/fesm2022/cmat-services-local-storage.mjs +3 -3
  75. package/fesm2022/cmat-services-media-watcher.mjs +3 -3
  76. package/fesm2022/cmat-services-platform.mjs +3 -3
  77. package/fesm2022/cmat-services-splash-screen.mjs +3 -3
  78. package/fesm2022/cmat-services-title.mjs +3 -3
  79. package/fesm2022/cmat-services-translation.mjs +3 -3
  80. package/fesm2022/cmat-services-utils.mjs +3 -3
  81. package/fesm2022/cmat.mjs +571 -559
  82. package/fesm2022/cmat.mjs.map +1 -1
  83. package/package.json +1 -3
  84. package/styles/user-themes.scss +1 -1
  85. package/types/cmat-components-material-datetimepicker.d.ts +5 -5
  86. package/types/cmat-components-toast.d.ts +1 -1
  87. package/types/cmat-services-alert.d.ts +3 -0
  88. package/types/cmat.d.ts +9 -6
  89. package/styles/overrides/fullcalendar.scss +0 -552
@@ -103,10 +103,10 @@ class CmatColorCoordinates {
103
103
  top,
104
104
  });
105
105
  }
106
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorCoordinates, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
107
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: CmatColorCoordinates, isStandalone: true, selector: "[cmat-color-coordinates], [cmatColorCoordinates]", inputs: { percentX: { classPropertyName: "percentX", publicName: "percentX", isSignal: true, isRequired: false, transformFunction: null }, percentY: { classPropertyName: "percentY", publicName: "percentY", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { coordinatesChange: "coordinatesChange" }, host: { listeners: { "pointerdown": "onDragStart($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
106
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorCoordinates, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
107
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: CmatColorCoordinates, isStandalone: true, selector: "[cmat-color-coordinates], [cmatColorCoordinates]", inputs: { percentX: { classPropertyName: "percentX", publicName: "percentX", isSignal: true, isRequired: false, transformFunction: null }, percentY: { classPropertyName: "percentY", publicName: "percentY", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { coordinatesChange: "coordinatesChange" }, host: { listeners: { "pointerdown": "onDragStart($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
108
108
  }
109
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorCoordinates, decorators: [{
109
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorCoordinates, decorators: [{
110
110
  type: Directive,
111
111
  args: [{
112
112
  selector: '[cmat-color-coordinates], [cmatColorCoordinates]',
@@ -172,10 +172,10 @@ class CmatColorAlphaSlider {
172
172
  this.change.emit({ ...hsl, a, source: 'rgb' });
173
173
  }
174
174
  }
175
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorAlphaSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
176
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: CmatColorAlphaSlider, isStandalone: true, selector: "cmat-color-alpha-slider", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.cmat-color-alpha-vertical": "direction()=== \"vertical\"", "class.cmat-color-alpha-horizontal": "direction() === \"horizontal\"" }, classAttribute: "cmat-color-alpha-slider" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div class=\"cmat-color-alpha-slider-track\" cmatColorCoordinates [style.background-image]=\"gradient()\" [percentX]=\"posX()\"\r\n [percentY]=\"posY()\" (coordinatesChange)=\"handleChange($event)\">\r\n <div class=\"cmat-color-alpha-slider-pointer\" [style.left.%]=\"posX()\" [style.top.%]=\"posY()\">\r\n <button class=\"cmat-color-alpha-slider-thumb\" type=\"button\">\r\n <!-- -->\r\n </button>\r\n </div>\r\n</div>", styles: [".cmat-color-alpha-slider{position:relative;display:block;width:var(--cp-slider-width, auto);height:var(--cp-slider-height, 10px);border-radius:var(--cp-slider-shape, 2px);background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:10px 10px}.cmat-color-alpha-slider.cmat-color-alpha-vertical{width:var(--cp-slider-width, 10px);height:var(--cp-slider-height, auto)}.cmat-color-alpha-slider-track{position:relative;width:100%;height:100%;border-radius:var(--cp-slider-shape, 2px);touch-action:none}.cmat-color-alpha-slider-pointer{position:absolute}.cmat-color-alpha-slider-thumb{display:block;width:var(--cp-slider-thumb-width, 12px);height:var(--cp-slider-thumb-height, 12px);padding:0;border:none;border-radius:var(--cp-slider-thumb-shape, 6px);transform:translate(-50%,calc((var(--cp-slider-thumb-height, 12px) - var(--cp-slider-height, 10px)) / -2));background-color:var(--cp-slider-thumb-background-color, #f2f2f2);outline:1px solid var(--cp-slider-thumb-outline-color, rgba(0, 0, 0, .04));box-shadow:var(--cp-slider-thumb-shadow, 0 1px 4px 0 rgba(0, 0, 0, .32), 0 2px 8px 0 rgba(0, 0, 0, .16))}.cmat-color-alpha-slider-thumb:focus-visible{outline-color:var(--cp-slider-thumb-focus-outline-color, var(--cp-input-focus-outline-color, #0d99ff))}.cmat-color-alpha-vertical .cmat-color-alpha-slider-thumb{transform:translate(calc((var(--cp-slider-thumb-width, 12px) - var(--cp-slider-width, 10px)) / -2),-50%)}\n"], dependencies: [{ kind: "directive", type: CmatColorCoordinates, selector: "[cmat-color-coordinates], [cmatColorCoordinates]", inputs: ["percentX", "percentY"], outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
175
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorAlphaSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
176
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: CmatColorAlphaSlider, isStandalone: true, selector: "cmat-color-alpha-slider", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.cmat-color-alpha-vertical": "direction()=== \"vertical\"", "class.cmat-color-alpha-horizontal": "direction() === \"horizontal\"" }, classAttribute: "cmat-color-alpha-slider" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div class=\"cmat-color-alpha-slider-track\" cmatColorCoordinates [style.background-image]=\"gradient()\" [percentX]=\"posX()\"\r\n [percentY]=\"posY()\" (coordinatesChange)=\"handleChange($event)\">\r\n <div class=\"cmat-color-alpha-slider-pointer\" [style.left.%]=\"posX()\" [style.top.%]=\"posY()\">\r\n <button class=\"cmat-color-alpha-slider-thumb\" type=\"button\">\r\n <!-- -->\r\n </button>\r\n </div>\r\n</div>", styles: [".cmat-color-alpha-slider{position:relative;display:block;width:var(--cp-slider-width, auto);height:var(--cp-slider-height, 10px);border-radius:var(--cp-slider-shape, 2px);background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:10px 10px}.cmat-color-alpha-slider.cmat-color-alpha-vertical{width:var(--cp-slider-width, 10px);height:var(--cp-slider-height, auto)}.cmat-color-alpha-slider-track{position:relative;width:100%;height:100%;border-radius:var(--cp-slider-shape, 2px);touch-action:none}.cmat-color-alpha-slider-pointer{position:absolute}.cmat-color-alpha-slider-thumb{display:block;width:var(--cp-slider-thumb-width, 12px);height:var(--cp-slider-thumb-height, 12px);padding:0;border:none;border-radius:var(--cp-slider-thumb-shape, 6px);transform:translate(-50%,calc((var(--cp-slider-thumb-height, 12px) - var(--cp-slider-height, 10px)) / -2));background-color:var(--cp-slider-thumb-background-color, #f2f2f2);outline:1px solid var(--cp-slider-thumb-outline-color, rgba(0, 0, 0, .04));box-shadow:var(--cp-slider-thumb-shadow, 0 1px 4px 0 rgba(0, 0, 0, .32), 0 2px 8px 0 rgba(0, 0, 0, .16))}.cmat-color-alpha-slider-thumb:focus-visible{outline-color:var(--cp-slider-thumb-focus-outline-color, var(--cp-input-focus-outline-color, #0d99ff))}.cmat-color-alpha-vertical .cmat-color-alpha-slider-thumb{transform:translate(calc((var(--cp-slider-thumb-width, 12px) - var(--cp-slider-width, 10px)) / -2),-50%)}\n"], dependencies: [{ kind: "directive", type: CmatColorCoordinates, selector: "[cmat-color-coordinates], [cmatColorCoordinates]", inputs: ["percentX", "percentY"], outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
177
177
  }
178
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorAlphaSlider, decorators: [{
178
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorAlphaSlider, decorators: [{
179
179
  type: Component,
180
180
  args: [{ selector: 'cmat-color-alpha-slider', imports: [CmatColorCoordinates], host: {
181
181
  'class': 'cmat-color-alpha-slider',
@@ -232,10 +232,10 @@ class CmatColorHueSlider {
232
232
  this.change.emit({ ...hsl, h, source: 'rgb' });
233
233
  }
234
234
  }
235
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorHueSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
236
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: CmatColorHueSlider, isStandalone: true, selector: "cmat-color-hue-slider", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.cmat-color-hue-vertical": "direction() === \"vertical\"", "class.cmat-color-hue-horizontal": "direction() === \"horizontal\"" }, classAttribute: "cmat-color-hue-slider" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div class=\"cmat-color-hue-slider-track\" cmatColorCoordinates [percentX]=\"posX()\" [percentY]=\"posY()\"\r\n (coordinatesChange)=\"handleChange($event)\">\r\n <div class=\"cmat-color-hue-slider-pointer\" [style.left.%]=\"posX()\" [style.top.%]=\"posY()\">\r\n <button class=\"cmat-color-hue-slider-thumb\" type=\"button\">\r\n <!-- -->\r\n </button>\r\n </div>\r\n</div>", styles: [".cmat-color-hue-slider{position:relative;display:block;width:var(--cp-slider-width, auto);height:var(--cp-slider-height, 10px);border-radius:var(--cp-slider-shape, 2px);background-image:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cmat-color-hue-slider.cmat-color-hue-vertical{width:var(--cp-slider-width, 10px);height:var(--cp-slider-height, auto);background-image:linear-gradient(to top,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cmat-color-hue-slider-track{position:relative;width:100%;height:100%;border-radius:var(--cp-slider-shape, 2px);touch-action:none}.cmat-color-hue-slider-pointer{position:absolute}.cmat-color-hue-slider-thumb{display:block;width:var(--cp-slider-thumb-width, 12px);height:var(--cp-slider-thumb-height, 12px);padding:0;border:none;border-radius:var(--cp-slider-thumb-shape, 6px);transform:translate(-50%,calc((var(--cp-slider-thumb-height, 12px) - var(--cp-slider-height, 10px)) / -2));background-color:var(--cp-slider-thumb-background-color, #f2f2f2);outline:1px solid var(--cp-slider-thumb-outline-color, rgba(0, 0, 0, .04));box-shadow:var(--cp-slider-thumb-shadow, 0 1px 4px 0 rgba(0, 0, 0, .32), 0 2px 8px 0 rgba(0, 0, 0, .16))}.cmat-color-hue-slider-thumb:focus-visible{outline-color:var(--cp-slider-thumb-focus-outline-color, var(--cp-input-focus-outline-color, #0d99ff))}.cmat-color-hue-vertical .cmat-color-hue-slider-thumb{transform:translate(calc((var(--cp-slider-thumb-width, 12px) - var(--cp-slider-width, 10px)) / -2),-50%)}\n"], dependencies: [{ kind: "directive", type: CmatColorCoordinates, selector: "[cmat-color-coordinates], [cmatColorCoordinates]", inputs: ["percentX", "percentY"], outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
235
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorHueSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
236
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: CmatColorHueSlider, isStandalone: true, selector: "cmat-color-hue-slider", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "class.cmat-color-hue-vertical": "direction() === \"vertical\"", "class.cmat-color-hue-horizontal": "direction() === \"horizontal\"" }, classAttribute: "cmat-color-hue-slider" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div class=\"cmat-color-hue-slider-track\" cmatColorCoordinates [percentX]=\"posX()\" [percentY]=\"posY()\"\r\n (coordinatesChange)=\"handleChange($event)\">\r\n <div class=\"cmat-color-hue-slider-pointer\" [style.left.%]=\"posX()\" [style.top.%]=\"posY()\">\r\n <button class=\"cmat-color-hue-slider-thumb\" type=\"button\">\r\n <!-- -->\r\n </button>\r\n </div>\r\n</div>", styles: [".cmat-color-hue-slider{position:relative;display:block;width:var(--cp-slider-width, auto);height:var(--cp-slider-height, 10px);border-radius:var(--cp-slider-shape, 2px);background-image:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cmat-color-hue-slider.cmat-color-hue-vertical{width:var(--cp-slider-width, 10px);height:var(--cp-slider-height, auto);background-image:linear-gradient(to top,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cmat-color-hue-slider-track{position:relative;width:100%;height:100%;border-radius:var(--cp-slider-shape, 2px);touch-action:none}.cmat-color-hue-slider-pointer{position:absolute}.cmat-color-hue-slider-thumb{display:block;width:var(--cp-slider-thumb-width, 12px);height:var(--cp-slider-thumb-height, 12px);padding:0;border:none;border-radius:var(--cp-slider-thumb-shape, 6px);transform:translate(-50%,calc((var(--cp-slider-thumb-height, 12px) - var(--cp-slider-height, 10px)) / -2));background-color:var(--cp-slider-thumb-background-color, #f2f2f2);outline:1px solid var(--cp-slider-thumb-outline-color, rgba(0, 0, 0, .04));box-shadow:var(--cp-slider-thumb-shadow, 0 1px 4px 0 rgba(0, 0, 0, .32), 0 2px 8px 0 rgba(0, 0, 0, .16))}.cmat-color-hue-slider-thumb:focus-visible{outline-color:var(--cp-slider-thumb-focus-outline-color, var(--cp-input-focus-outline-color, #0d99ff))}.cmat-color-hue-vertical .cmat-color-hue-slider-thumb{transform:translate(calc((var(--cp-slider-thumb-width, 12px) - var(--cp-slider-width, 10px)) / -2),-50%)}\n"], dependencies: [{ kind: "directive", type: CmatColorCoordinates, selector: "[cmat-color-coordinates], [cmatColorCoordinates]", inputs: ["percentX", "percentY"], outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
237
237
  }
238
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorHueSlider, decorators: [{
238
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorHueSlider, decorators: [{
239
239
  type: Component,
240
240
  args: [{ selector: 'cmat-color-hue-slider', imports: [CmatColorCoordinates], host: {
241
241
  'class': 'cmat-color-hue-slider',
@@ -247,12 +247,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
247
247
  }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
248
248
 
249
249
  class CmatColorIconButton {
250
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
251
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: CmatColorIconButton, isStandalone: true, selector: "cmat-color-icon-button", host: { classAttribute: "cmat-color-icon-button" }, ngImport: i0, template: `
250
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
251
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: CmatColorIconButton, isStandalone: true, selector: "cmat-color-icon-button", host: { classAttribute: "cmat-color-icon-button" }, ngImport: i0, template: `
252
252
  <ng-content />
253
253
  `, isInline: true, styles: [".cmat-color-icon-button{display:inline-block;width:24px;height:24px}.cmat-color-icon-button button{width:100%;height:100%;padding:2px;color:var(--cp-icon-button-text-color, inherit);background-color:var(--cp-icon-button-background-color, transparent);border:none;border-radius:var(--cp-icon-button-shape, 4px)}.cmat-color-icon-button button:hover{background-color:var(--cp-icon-button-hover-background-color, rgba(0, 0, 0, .06))}.cmat-color-icon-button button:active{background-color:var(--cp-icon-button-active-background-color, rgba(0, 0, 0, .12))}.cmat-color-icon-button button:focus-visible{background-color:var(--cp-icon-button-focus-background-color, transparent);outline:1px solid var(--cp-icon-button-focus-outline-color, #0d99ff);outline-offset:-1px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
254
254
  }
255
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorIconButton, decorators: [{
255
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorIconButton, decorators: [{
256
256
  type: Component,
257
257
  args: [{ selector: 'cmat-color-icon-button', imports: [], template: `
258
258
  <ng-content />
@@ -352,10 +352,10 @@ class CmatColorInputField {
352
352
  this.valueChange.emit(target.value);
353
353
  }
354
354
  }
355
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorInputField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
356
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatColorInputField, isStandalone: true, selector: "cmat-color-input-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "cmat-color-input-field" }, ngImport: i0, template: "<input spellCheck=\"false\" [value]=\"currentValue()\" [placeholder]=\"placeholder()\" [attr.aria-labelledby]=\"uniqueId\"\r\n (keydown)=\"handleKeydown($event)\" (keyup)=\"handleKeyup($event)\" (focus)=\"handleFocus($event)\"\r\n (focusout)=\"handleFocusOut($event)\" />\r\n@if (label()) {\r\n<span [id]=\"uniqueId\">{{ label() }}</span>\r\n}", styles: [".cmat-color-input-field{font-size:11px;text-align:center}.cmat-color-input-field input{box-sizing:border-box;width:100%;height:24px;border:none;border-radius:var(--cp-input-shape, 4px);background-color:var(--cp-input-background-color, transparent);outline:1px solid var(--cp-input-outline-color, #e6e6e6);font-family:var(--cp-input-text-font, monospace);font-size:inherit;text-align:inherit}.cmat-color-input-field input:hover{outline-color:var(--cp-input-hover-outline-color, #d6d6d6)}.cmat-color-input-field input:focus{outline-color:var(--cp-input-focus-outline-color, #0d99ff)}.cmat-color-input-field span{display:block;margin-top:8px;color:#969696;text-transform:uppercase}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
355
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorInputField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
356
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CmatColorInputField, isStandalone: true, selector: "cmat-color-input-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "cmat-color-input-field" }, ngImport: i0, template: "<input spellCheck=\"false\" [value]=\"currentValue()\" [placeholder]=\"placeholder()\" [attr.aria-labelledby]=\"uniqueId\"\r\n (keydown)=\"handleKeydown($event)\" (keyup)=\"handleKeyup($event)\" (focus)=\"handleFocus($event)\"\r\n (focusout)=\"handleFocusOut($event)\" />\r\n@if (label()) {\r\n<span [id]=\"uniqueId\">{{ label() }}</span>\r\n}", styles: [".cmat-color-input-field{font-size:11px;text-align:center}.cmat-color-input-field input{box-sizing:border-box;width:100%;height:24px;border:none;border-radius:var(--cp-input-shape, 4px);background-color:var(--cp-input-background-color, transparent);outline:1px solid var(--cp-input-outline-color, #e6e6e6);font-family:var(--cp-input-text-font, monospace);font-size:inherit;text-align:inherit}.cmat-color-input-field input:hover{outline-color:var(--cp-input-hover-outline-color, #d6d6d6)}.cmat-color-input-field input:focus{outline-color:var(--cp-input-focus-outline-color, #0d99ff)}.cmat-color-input-field span{display:block;margin-top:8px;color:#969696;text-transform:uppercase}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
357
357
  }
358
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorInputField, decorators: [{
358
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorInputField, decorators: [{
359
359
  type: Component,
360
360
  args: [{ selector: 'cmat-color-input-field', host: {
361
361
  class: 'cmat-color-input-field',
@@ -564,10 +564,10 @@ class CmatColorInputFields {
564
564
  });
565
565
  }
566
566
  }
567
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorInputFields, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
568
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatColorInputFields, isStandalone: true, selector: "cmat-color-input-fields", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, hideAlpha: { classPropertyName: "hideAlpha", publicName: "hideAlpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { format: "formatChange", formatChanged: "formatChanged", valueChange: "valueChange" }, host: { classAttribute: "cmat-color-input-fields" }, ngImport: i0, template: "<div class=\"cmat-color-input-field-wrapper\">\r\n @if (format() === 'hex') {\r\n <cmat-color-input-field label=\"hex\" [value]=\"hex()\" (valueChange)=\"handleChange($event)\" />\r\n }\r\n @if (format() === 'rgb') {\r\n <cmat-color-input-field label=\"r\" [value]=\"rgb()!.r\" (valueChange)=\"handleChange($event)\" />\r\n <cmat-color-input-field label=\"g\" [value]=\"rgb()!.g\" (valueChange)=\"handleChange($event)\" />\r\n <cmat-color-input-field label=\"b\" [value]=\"rgb()!.b\" (valueChange)=\"handleChange($event)\" />\r\n\r\n @if (!hideAlpha()) {\r\n <cmat-color-input-field label=\"a\" [step]=\"0.01\" [value]=\"rgb()!.a\" (valueChange)=\"handleChange($event)\" />\r\n }\r\n }\r\n @if (format() === 'hsl') {\r\n <cmat-color-input-field label=\"h\" [value]=\"round(hsl()!.h)\" (valueChange)=\"handleChange($event)\" />\r\n <cmat-color-input-field label=\"s\" [value]=\"round(hsl()!.s * 100) + '%'\" (valueChange)=\"handleChange($event)\" />\r\n <cmat-color-input-field label=\"l\" [value]=\"round(hsl()!.l * 100) + '%'\" (valueChange)=\"handleChange($event)\" />\r\n\r\n @if (!hideAlpha()) {\r\n <cmat-color-input-field label=\"a\" [step]=\"0.01\" [value]=\"hsl()!.a\" (valueChange)=\"handleChange($event)\" />\r\n }\r\n }\r\n</div>\r\n\r\n<cmat-color-icon-button>\r\n <button type=\"button\" (click)=\"toggleColorFormat()\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path fill=\"currentColor\"\r\n d=\"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z\" />\r\n </svg>\r\n </button>\r\n</cmat-color-icon-button>", styles: [".cmat-color-input-fields{display:flex;align-items:center;gap:8px;width:100%}.cmat-color-input-field-wrapper{flex:1;display:flex;gap:8px}.cmat-color-input-field-wrapper .cmat-color-input-field{flex:1}\n"], dependencies: [{ kind: "component", type: CmatColorInputField, selector: "cmat-color-input-field", inputs: ["label", "step", "placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: CmatColorIconButton, selector: "cmat-color-icon-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
567
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorInputFields, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
568
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CmatColorInputFields, isStandalone: true, selector: "cmat-color-input-fields", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, hideAlpha: { classPropertyName: "hideAlpha", publicName: "hideAlpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { format: "formatChange", formatChanged: "formatChanged", valueChange: "valueChange" }, host: { classAttribute: "cmat-color-input-fields" }, ngImport: i0, template: "<div class=\"cmat-color-input-field-wrapper\">\r\n @if (format() === 'hex') {\r\n <cmat-color-input-field label=\"hex\" [value]=\"hex()\" (valueChange)=\"handleChange($event)\" />\r\n }\r\n @if (format() === 'rgb') {\r\n <cmat-color-input-field label=\"r\" [value]=\"rgb()!.r\" (valueChange)=\"handleChange($event)\" />\r\n <cmat-color-input-field label=\"g\" [value]=\"rgb()!.g\" (valueChange)=\"handleChange($event)\" />\r\n <cmat-color-input-field label=\"b\" [value]=\"rgb()!.b\" (valueChange)=\"handleChange($event)\" />\r\n\r\n @if (!hideAlpha()) {\r\n <cmat-color-input-field label=\"a\" [step]=\"0.01\" [value]=\"rgb()!.a\" (valueChange)=\"handleChange($event)\" />\r\n }\r\n }\r\n @if (format() === 'hsl') {\r\n <cmat-color-input-field label=\"h\" [value]=\"round(hsl()!.h)\" (valueChange)=\"handleChange($event)\" />\r\n <cmat-color-input-field label=\"s\" [value]=\"round(hsl()!.s * 100) + '%'\" (valueChange)=\"handleChange($event)\" />\r\n <cmat-color-input-field label=\"l\" [value]=\"round(hsl()!.l * 100) + '%'\" (valueChange)=\"handleChange($event)\" />\r\n\r\n @if (!hideAlpha()) {\r\n <cmat-color-input-field label=\"a\" [step]=\"0.01\" [value]=\"hsl()!.a\" (valueChange)=\"handleChange($event)\" />\r\n }\r\n }\r\n</div>\r\n\r\n<cmat-color-icon-button>\r\n <button type=\"button\" (click)=\"toggleColorFormat()\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path fill=\"currentColor\"\r\n d=\"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z\" />\r\n </svg>\r\n </button>\r\n</cmat-color-icon-button>", styles: [".cmat-color-input-fields{display:flex;align-items:center;gap:8px;width:100%}.cmat-color-input-field-wrapper{flex:1;display:flex;gap:8px}.cmat-color-input-field-wrapper .cmat-color-input-field{flex:1}\n"], dependencies: [{ kind: "component", type: CmatColorInputField, selector: "cmat-color-input-field", inputs: ["label", "step", "placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: CmatColorIconButton, selector: "cmat-color-icon-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
569
569
  }
570
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorInputFields, decorators: [{
570
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorInputFields, decorators: [{
571
571
  type: Component,
572
572
  args: [{ selector: 'cmat-color-input-fields', imports: [CmatColorInputField, CmatColorIconButton], host: {
573
573
  class: 'cmat-color-input-fields',
@@ -621,10 +621,10 @@ class CmatColorSaturationPicker {
621
621
  el.scrollLeft = 0;
622
622
  }
623
623
  }
624
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorSaturationPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
625
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: CmatColorSaturationPicker, isStandalone: true, selector: "cmat-color-saturation-picker", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "scroll": "onScroll()" }, classAttribute: "cmat-color-saturation-picker" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div class=\"cmat-color-saturation-picker-content\" cmatColorCoordinates [percentX]=\"posX()\" [percentY]=\"posY()\"\r\n [style.background-color]=\"bgColor()\" (coordinatesChange)=\"handleChange($event)\">\r\n <div class=\"cmat-color-saturation-picker-pointer\"\r\n [style.left.%]=\"posX()\" [style.top.%]=\"posY()\">\r\n <button class=\"cmat-color-saturation-picker-thumb\" type=\"button\">\r\n <!-- -->\r\n </button>\r\n </div>\r\n</div>", styles: [".cmat-color-saturation-picker{position:relative;display:block;width:100%;padding-bottom:55%;border-radius:var(--cp-saturation-picker-shape, 4px);overflow:hidden;box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f}.cmat-color-saturation-picker-content{position:absolute;inset:0;touch-action:none;background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.cmat-color-saturation-picker-pointer{position:absolute}.cmat-color-saturation-picker-thumb{display:block;width:var(--cp-saturation-picker-thumb-size, 12px);height:var(--cp-saturation-picker-thumb-size, 12px);padding:0;border-radius:var(--cp-saturation-picker-thumb-shape, 6px);border:none;background:none;outline:1px solid var(--cp-saturation-picker-thumb-outline-color, #fff);outline-offset:-1px;transform:translate(-50%,-50%);box-shadow:var(--cp-saturation-picker-thumb-shadow, 0 2px 6px 0 rgba(0, 0, 0, .32))}.cmat-color-saturation-picker-thumb:focus-visible{outline-color:var(--cp-saturation-picker-thumb-focus-outline-color, var(--cp-input-focus-outline-color, #0d99ff))}\n"], dependencies: [{ kind: "directive", type: CmatColorCoordinates, selector: "[cmat-color-coordinates], [cmatColorCoordinates]", inputs: ["percentX", "percentY"], outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
624
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorSaturationPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
625
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: CmatColorSaturationPicker, isStandalone: true, selector: "cmat-color-saturation-picker", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change" }, host: { listeners: { "scroll": "onScroll()" }, classAttribute: "cmat-color-saturation-picker" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div class=\"cmat-color-saturation-picker-content\" cmatColorCoordinates [percentX]=\"posX()\" [percentY]=\"posY()\"\r\n [style.background-color]=\"bgColor()\" (coordinatesChange)=\"handleChange($event)\">\r\n <div class=\"cmat-color-saturation-picker-pointer\"\r\n [style.left.%]=\"posX()\" [style.top.%]=\"posY()\">\r\n <button class=\"cmat-color-saturation-picker-thumb\" type=\"button\">\r\n <!-- -->\r\n </button>\r\n </div>\r\n</div>", styles: [".cmat-color-saturation-picker{position:relative;display:block;width:100%;padding-bottom:55%;border-radius:var(--cp-saturation-picker-shape, 4px);overflow:hidden;box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f}.cmat-color-saturation-picker-content{position:absolute;inset:0;touch-action:none;background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.cmat-color-saturation-picker-pointer{position:absolute}.cmat-color-saturation-picker-thumb{display:block;width:var(--cp-saturation-picker-thumb-size, 12px);height:var(--cp-saturation-picker-thumb-size, 12px);padding:0;border-radius:var(--cp-saturation-picker-thumb-shape, 6px);border:none;background:none;outline:1px solid var(--cp-saturation-picker-thumb-outline-color, #fff);outline-offset:-1px;transform:translate(-50%,-50%);box-shadow:var(--cp-saturation-picker-thumb-shadow, 0 2px 6px 0 rgba(0, 0, 0, .32))}.cmat-color-saturation-picker-thumb:focus-visible{outline-color:var(--cp-saturation-picker-thumb-focus-outline-color, var(--cp-input-focus-outline-color, #0d99ff))}\n"], dependencies: [{ kind: "directive", type: CmatColorCoordinates, selector: "[cmat-color-coordinates], [cmatColorCoordinates]", inputs: ["percentX", "percentY"], outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
626
626
  }
627
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorSaturationPicker, decorators: [{
627
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorSaturationPicker, decorators: [{
628
628
  type: Component,
629
629
  args: [{ selector: 'cmat-color-saturation-picker', imports: [CmatColorCoordinates], host: {
630
630
  'class': 'cmat-color-saturation-picker',
@@ -767,8 +767,8 @@ class CmatColorPickerComponent {
767
767
  console.warn(err);
768
768
  }
769
769
  }
770
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
771
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatColorPickerComponent, isStandalone: true, selector: "cmat-color-picker", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hideAlpha: { classPropertyName: "hideAlpha", publicName: "hideAlpha", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { format: "formatChange", value: "valueChange", disabled: "disabledChange", formatChanged: "formatChanged", valueChanged: "valueChanged", colorChanged: "colorChanged" }, host: { classAttribute: "cmat-color-picker" }, providers: [
770
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
771
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CmatColorPickerComponent, isStandalone: true, selector: "cmat-color-picker", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hideAlpha: { classPropertyName: "hideAlpha", publicName: "hideAlpha", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { format: "formatChange", value: "valueChange", disabled: "disabledChange", formatChanged: "formatChanged", valueChanged: "valueChanged", colorChanged: "colorChanged" }, host: { classAttribute: "cmat-color-picker" }, providers: [
772
772
  {
773
773
  provide: NG_VALUE_ACCESSOR,
774
774
  useExisting: forwardRef(() => CmatColorPickerComponent),
@@ -776,7 +776,7 @@ class CmatColorPickerComponent {
776
776
  },
777
777
  ], ngImport: i0, template: "<cmat-color-saturation-picker [color]=\"parsedColor()!\" (change)=\"handleChange($event)\" />\r\n\r\n<div class=\"cmat-color-picker-controls\">\r\n @if (supportEyeDropper) {\r\n <cmat-color-icon-button>\r\n <button type=\"button\" (click)=\"openEyeDropper($event)\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path fill=\"currentColor\"\r\n d=\"M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z\" />\r\n </svg>\r\n </button>\r\n </cmat-color-icon-button>\r\n }\r\n\r\n <button class=\"cmat-color-preview\" type=\"button\" (click)=\"copyColor()\">\r\n <div class=\"cmat-color-preview-bg\" [ngStyle]=\"{'background-color':value()}\"></div>\r\n <div class=\"cmat-color-preview-backdrop\">\r\n @if (this.isCopied()) {\r\n <svg viewBox=\"0 0 24 24\">\r\n <path fill=\"currentColor\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n </svg>\r\n } @else {\r\n <svg viewBox=\"0 0 24 24\">\r\n <path fill=\"currentColor\"\r\n d=\"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z\" />\r\n </svg>\r\n }\r\n </div>\r\n </button>\r\n\r\n <div class=\"cmat-color-hue-alpha\">\r\n <cmat-color-hue-slider [color]=\"parsedColor()!\" (change)=\"handleChange($event)\" />\r\n\r\n @if (!hideAlpha()) {\r\n <cmat-color-alpha-slider [color]=\"parsedColor()!\" (change)=\"handleChange($event)\" />\r\n }\r\n </div>\r\n</div>\r\n\r\n<div class=\"cmat-color-picker-controls\">\r\n <cmat-color-input-fields [color]=\"parsedColor()!\" [hideAlpha]=\"hideAlpha()\" [(format)]=\"format\"\r\n (valueChange)=\"handleChange($event)\" (formatChange)=\"handleFormatChange()\" />\r\n</div>", styles: [".cmat-color-picker{--cp-container-text-color: rgba(0, 0, 0, .9);--cp-container-background-color: #fff;--cp-input-outline-color: #e6e6e6;--cp-input-hover-outline-color: #d6d6d6;--cp-input-focus-outline-color: #0d99ff;--cp-icon-button-hover-background-color: rgba(0, 0, 0, .06);--cp-icon-button-active-background-color: rgba(0, 0, 0, .12);--cp-slider-thumb-background-color: #f2f2f2;--cp-slider-thumb-outline-color: rgba(0, 0, 0, .04)}.cmat-color-picker:is(.dark *){--cp-container-text-color: #fff;--cp-container-background-color: #2c2c2c;--cp-input-outline-color: #444;--cp-input-hover-outline-color: #545454;--cp-input-focus-outline-color: #0c8ce9;--cp-icon-button-hover-background-color: rgba(255, 255, 255, .06);--cp-icon-button-active-background-color: rgba(255, 255, 255, .12);--cp-slider-thumb-background-color: #3c3c3c;--cp-slider-thumb-outline-color: rgba(255, 255, 255, .24)}.cmat-color-picker{box-sizing:border-box;display:block;width:var(--cp-container-width, 240px);padding:var(--cp-container-padding, 12px);margin:var(--cp-container-margin, 0);color:var(--cp-container-text-color);background-color:var(--cp-container-background-color);border-radius:var(--cp-container-shape, 8px);box-shadow:var(--cp-container-elevation-shadow, inset 0 0 1px 0 rgba(255, 255, 255, .64), 0 2px 4px 0 rgba(0, 0, 0, .16), 0 8px 16px 0 rgba(0, 0, 0, .12), 0 0 1px 0 rgba(0, 0, 0, .12))}.cmat-color-picker-controls{display:flex;align-items:center;gap:10px;margin-top:16px}.cmat-color-preview{width:32px;height:32px;border-radius:16px;position:relative;overflow:hidden;border:none;outline:none;background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:10px 10px;box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f;cursor:pointer}.cmat-color-preview:hover .cmat-color-preview-backdrop,.cmat-color-preview:focus-visible .cmat-color-preview-backdrop{opacity:1}.cmat-color-preview-bg{position:absolute;inset:0}.cmat-color-preview-backdrop{position:absolute;inset:0;padding:6px;background-color:#00000052;color:#fff;opacity:0;pointer-events:none}.cmat-color-hue-alpha{flex:1;display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "component", type: CmatColorSaturationPicker, selector: "cmat-color-saturation-picker", inputs: ["color"], outputs: ["change"] }, { kind: "component", type: CmatColorHueSlider, selector: "cmat-color-hue-slider", inputs: ["color", "direction"], outputs: ["change"] }, { kind: "component", type: CmatColorAlphaSlider, selector: "cmat-color-alpha-slider", inputs: ["color", "direction"], outputs: ["change"] }, { kind: "component", type: CmatColorInputFields, selector: "cmat-color-input-fields", inputs: ["color", "format", "hideAlpha"], outputs: ["formatChange", "formatChanged", "valueChange"] }, { kind: "component", type: CmatColorIconButton, selector: "cmat-color-icon-button" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
778
778
  }
779
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorPickerComponent, decorators: [{
779
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorPickerComponent, decorators: [{
780
780
  type: Component,
781
781
  args: [{ selector: 'cmat-color-picker', imports: [
782
782
  CmatColorSaturationPicker,
@@ -822,10 +822,10 @@ class CmatColorPickerButtonComponent {
822
822
  closeMenu() {
823
823
  this.isOpen.set(false);
824
824
  }
825
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorPickerButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
826
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: CmatColorPickerButtonComponent, isStandalone: true, selector: "cmat-color-picker-button", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hideAlpha: { classPropertyName: "hideAlpha", publicName: "hideAlpha", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { format: "formatChange", value: "valueChange", disabled: "disabledChange", formatChanged: "formatChanged", valueChanged: "valueChanged", colorChanged: "colorChanged" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<section>\r\n <mat-form-field class=\"w-full\">\r\n <mat-label>{{ label() }}</mat-label>\r\n <input matInput type=\"text\" [placeholder]=\"placeholder()\" [disabled]=\"disabled()\" [(ngModel)]=\"value\"\r\n (ngModelChange)=\"valueChanged.emit($event);colorChanged.emit($event);\" />\r\n <button #trigger=\"cdkOverlayOrigin\" matPrefix cdkOverlayOrigin class=\"ml-2\"\r\n [ngClass]=\"{'pointer-events-none':disabled()}\"\r\n [style.color]=\"value()\" (click)=\"toggleMenu()\">\r\n <span></span>\r\n </button>\r\n </mat-form-field>\r\n</section>\r\n\r\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n (overlayOutsideClick)=\"closeMenu()\" (detach)=\"closeMenu()\">\r\n <cmat-color-picker [format]=\"format()\" [hideAlpha]=\"hideAlpha()\" [disabled]=\"disabled()\" [(value)]=\"value\"\r\n (formatChanged)=\"formatChanged.emit($event)\" (valueChanged)=\"valueChanged.emit($event)\"\r\n (colorChanged)=\"colorChanged.emit($event)\" />\r\n</ng-template>", styles: ["cmat-color-picker-button section{--outline-color: #b4b4b4;--hover-outline-color: var(--cmat-primary)}cmat-color-picker-button section:is(.dark *){--outline-color: #4d4d4d}cmat-color-picker-button section{display:flex;gap:8px}cmat-color-picker-button .input-group{display:flex;gap:8px}cmat-color-picker-button .input-group input{flex:1}cmat-color-picker-button button{display:inline-flex;width:32px;height:32px;padding:4px;background:none;border-radius:8px;border:1px solid var(--outline-color);cursor:pointer}cmat-color-picker-button button:after{content:\"\";display:inline-block;width:100%;height:100%;background-color:currentColor;border-radius:3px}cmat-color-picker-button button:hover,cmat-color-picker-button button:focus{border-color:var(--hover-outline-color)}cmat-color-picker-button input{padding:4px 8px;border-radius:8px;border:1px solid var(--outline-color);display:flex;flex:1 auto}cmat-color-picker-button input:hover,cmat-color-picker-button input:focus{border-color:var(--hover-outline-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: 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: "component", type: CmatColorPickerComponent, selector: "cmat-color-picker", inputs: ["format", "value", "hideAlpha", "disabled"], outputs: ["formatChange", "valueChange", "disabledChange", "formatChanged", "valueChanged", "colorChanged"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
825
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorPickerButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
826
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: CmatColorPickerButtonComponent, isStandalone: true, selector: "cmat-color-picker-button", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hideAlpha: { classPropertyName: "hideAlpha", publicName: "hideAlpha", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { format: "formatChange", value: "valueChange", disabled: "disabledChange", formatChanged: "formatChanged", valueChanged: "valueChanged", colorChanged: "colorChanged" }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<section>\r\n <mat-form-field class=\"w-full\">\r\n <mat-label>{{ label() }}</mat-label>\r\n <input matInput type=\"text\" [placeholder]=\"placeholder()\" [disabled]=\"disabled()\" [(ngModel)]=\"value\"\r\n (ngModelChange)=\"valueChanged.emit($event);colorChanged.emit($event);\" />\r\n <button #trigger=\"cdkOverlayOrigin\" matPrefix cdkOverlayOrigin class=\"ml-2\"\r\n [ngClass]=\"{'pointer-events-none':disabled()}\"\r\n [style.color]=\"value()\" (click)=\"toggleMenu()\">\r\n <span></span>\r\n </button>\r\n </mat-form-field>\r\n</section>\r\n\r\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"isOpen()\"\r\n (overlayOutsideClick)=\"closeMenu()\" (detach)=\"closeMenu()\">\r\n <cmat-color-picker [format]=\"format()\" [hideAlpha]=\"hideAlpha()\" [disabled]=\"disabled()\" [(value)]=\"value\"\r\n (formatChanged)=\"formatChanged.emit($event)\" (valueChanged)=\"valueChanged.emit($event)\"\r\n (colorChanged)=\"colorChanged.emit($event)\" />\r\n</ng-template>", styles: ["cmat-color-picker-button section{--outline-color: #b4b4b4;--hover-outline-color: var(--cmat-primary)}cmat-color-picker-button section:is(.dark *){--outline-color: #4d4d4d}cmat-color-picker-button section{display:flex;gap:8px}cmat-color-picker-button .input-group{display:flex;gap:8px}cmat-color-picker-button .input-group input{flex:1}cmat-color-picker-button button{display:inline-flex;width:32px;height:32px;padding:4px;background:none;border-radius:8px;border:1px solid var(--outline-color);cursor:pointer}cmat-color-picker-button button:after{content:\"\";display:inline-block;width:100%;height:100%;background-color:currentColor;border-radius:3px}cmat-color-picker-button button:hover,cmat-color-picker-button button:focus{border-color:var(--hover-outline-color)}cmat-color-picker-button input{padding:4px 8px;border-radius:8px;border:1px solid var(--outline-color);display:flex;flex:1 auto}cmat-color-picker-button input:hover,cmat-color-picker-button input:focus{border-color:var(--hover-outline-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: 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: "component", type: CmatColorPickerComponent, selector: "cmat-color-picker", inputs: ["format", "value", "hideAlpha", "disabled"], outputs: ["formatChange", "valueChange", "disabledChange", "formatChanged", "valueChanged", "colorChanged"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
827
827
  }
828
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatColorPickerButtonComponent, decorators: [{
828
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CmatColorPickerButtonComponent, decorators: [{
829
829
  type: Component,
830
830
  args: [{ selector: 'cmat-color-picker-button', imports: [
831
831
  FormsModule, CmatColorPickerComponent, CdkConnectedOverlay, CdkOverlayOrigin,