@ng-matero/extensions 19.2.0 → 19.3.0

package/fesm2022/mtxCheckboxGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mtxCheckboxGroup.mjs","sources":["../../../projects/extensions/checkbox-group/checkbox-group.ts","../../../projects/extensions/checkbox-group/checkbox-group.html","../../../projects/extensions/checkbox-group/checkbox-group-module.ts","../../../projects/extensions/checkbox-group/mtxCheckboxGroup.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { AsyncPipe } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  TrackByFunction,\n  ViewEncapsulation,\n  booleanAttribute,\n  forwardRef,\n  inject,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\n\nimport { MtxToObservablePipe } from '@ng-matero/extensions/core';\nimport { MtxCheckboxGroupOption } from './interfaces';\n\nexport class MtxCheckboxBase {\n  constructor(\n    public label?: any,\n    public value?: any\n  ) {}\n}\n\n@Component({\n  selector: 'mtx-checkbox-group',\n  exportAs: 'mtxCheckboxGroup',\n  host: {\n    class: 'mtx-checkbox-group',\n  },\n  templateUrl: './checkbox-group.html',\n  styleUrl: './checkbox-group.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => MtxCheckboxGroup),\n      multi: true,\n    },\n  ],\n  imports: [FormsModule, MatCheckbox, MtxToObservablePipe, AsyncPipe],\n})\nexport class MtxCheckboxGroup implements AfterViewInit, OnDestroy, ControlValueAccessor {\n  private _changeDetectorRef = inject(ChangeDetectorRef);\n  private _focusMonitor = inject(FocusMonitor);\n  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  // TODO: support ng-content for checkbox-group\n  @ContentChildren(forwardRef(() => MatCheckbox), { descendants: true })\n  _checkboxes!: QueryList<MatCheckbox>;\n\n  /**\n   * Tracking function that will be used to check the differences in data changes. Used similarly\n   * to `ngFor` `trackBy` function. Optimize row operations by identifying a row based on its data\n   * relative to the function to know if a row should be added/removed/moved.\n   * Accepts a function that takes two parameters, `index` and `item`.\n   */\n  @Input()\n  get trackBy() {\n    return this._trackByFn;\n  }\n  set trackBy(fn: TrackByFunction<any> | undefined) {\n    if (fn != null && typeof fn !== 'function') {\n      console.warn(`trackBy must be a function, but received ${JSON.stringify(fn)}.`);\n    }\n    this._trackByFn = fn;\n  }\n  private _trackByFn?: TrackByFunction<any>;\n\n  @Input()\n  get items() {\n    return this._items;\n  }\n  set items(value: any[]) {\n    // store the original data with deep clone\n    this._originalItems = JSON.parse(JSON.stringify(value));\n    this._items = value.map(option => {\n      return option instanceof Object ? { ...option } : new MtxCheckboxBase(option, option);\n    });\n  }\n  private _items: any[] = [];\n  private _originalItems: any[] = [];\n\n  @Input() bindLabel = 'label';\n\n  @Input() bindValue = 'value';\n\n  @Input({ transform: booleanAttribute }) showSelectAll = false;\n\n  @Input() selectAllLabel = 'Select All';\n\n  @Input()\n  get compareWith() {\n    return this._compareWith;\n  }\n  set compareWith(fn: ((o1: any, o2: any) => boolean) | undefined) {\n    if (fn != null && typeof fn !== 'function') {\n      throw Error('`compareWith` must be a function.');\n    }\n\n    this._compareWith = fn;\n  }\n  private _compareWith?: (o1: any, o2: any) => boolean;\n\n  @Input({ transform: booleanAttribute }) disabled = false;\n\n  @Output() change = new EventEmitter<{ model: MtxCheckboxGroupOption[]; index: number }>();\n\n  selectAll = false;\n  selectAllIndeterminate = false;\n\n  selectedItems: MtxCheckboxGroupOption[] = [];\n\n  _onChange: (value: MtxCheckboxGroupOption[]) => void = () => null;\n  _onTouched: () => void = () => null;\n\n  ngAfterViewInit() {\n    this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {\n      if (!focusOrigin) {\n        // When a focused element becomes disabled, the browser *immediately* fires a blur event.\n        // Angular does not expect events to be raised during change detection, so any state change\n        // (such as a form control's 'ng-touched') will cause a changed-after-checked error.\n        // See https://github.com/angular/angular/issues/17793. To work around this, we defer\n        // telling the form control it has been touched until the next tick.\n        Promise.resolve().then(() => {\n          this._onTouched();\n          this._changeDetectorRef.markForCheck();\n        });\n      }\n    });\n  }\n\n  ngOnDestroy() {\n    this._focusMonitor.stopMonitoring(this._elementRef);\n  }\n\n  /**\n   * Finds and selects and option based on its value.\n   * @returns Option that has the corresponding value.\n   */\n  private _selectValue(value: MtxCheckboxGroupOption) {\n    const correspondingOption = (this.items as MtxCheckboxGroupOption[]).find(option => {\n      try {\n        const compareValue = option[this.bindValue] === value;\n        return this._compareWith ? this._compareWith(option, value) : compareValue;\n      } catch (error) {\n        console.warn(error);\n        return false;\n      }\n    });\n\n    if (correspondingOption) {\n      correspondingOption.checked = true;\n    }\n\n    return correspondingOption;\n  }\n\n  /**\n   * Sets the model value. Implemented as part of ControlValueAccessor.\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: any[]): void {\n    this.items.forEach(item => (item.checked = false));\n\n    if (value) {\n      if (!Array.isArray(value)) {\n        throw Error('Value must be an array.');\n      }\n\n      value.forEach(currentValue => this._selectValue(currentValue));\n      this.selectedItems = value;\n    }\n\n    this._checkMasterCheckboxState();\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Registers a callback to be triggered when the model value changes.\n   * Implemented as part of ControlValueAccessor.\n   * @param fn Callback to be registered.\n   */\n  registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => Record<string, unknown>): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Registers a callback to be triggered when the control is touched.\n   * Implemented as part of ControlValueAccessor.\n   * @param fn Callback to be registered.\n   */\n  registerOnTouched(fn: () => Record<string, unknown>): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n   * @param isDisabled Whether the control should be disabled.\n   */\n  setDisabledState(isDisabled: boolean) {\n    this.disabled = isDisabled;\n    this._changeDetectorRef.markForCheck();\n  }\n\n  private _checkMasterCheckboxState() {\n    if (\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .every(option => !option.checked)\n    ) {\n      this.selectAll = false;\n      this.selectAllIndeterminate = false;\n    } else if (\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .every(option => option.checked)\n    ) {\n      this.selectAll = true;\n      this.selectAllIndeterminate = false;\n    } else {\n      this.selectAllIndeterminate = true;\n    }\n  }\n\n  private _getSelectedItems(index: number) {\n    this.selectedItems = (this.items as MtxCheckboxGroupOption[]).filter(option => option.checked);\n\n    if (this._compareWith) {\n      this.selectedItems = (this._originalItems as MtxCheckboxGroupOption[]).filter(option =>\n        this.selectedItems.find(selectedOption => this._compareWith!(option, selectedOption))\n      );\n    } else {\n      this.selectedItems = this.selectedItems.map(option => option[this.bindValue]);\n    }\n\n    this._onChange(this.selectedItems);\n\n    this.change.emit({ model: this.selectedItems, index });\n  }\n\n  /** Handle normal checkbox toggle */\n  _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void {\n    this._checkMasterCheckboxState();\n    this._getSelectedItems(index);\n  }\n\n  /** Handle master checkbox toggle */\n  _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void {\n    this.selectAll = !this.selectAll;\n    this.selectAllIndeterminate = false;\n\n    if (this.selectAll) {\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .forEach(option => (option.checked = true));\n    } else {\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .forEach(option => (option.checked = !!option.disabled));\n    }\n\n    this._getSelectedItems(index);\n  }\n\n  _trackBy = (index: number, item: any) => {\n    return this.trackBy ? this.trackBy(index, item) : item;\n  };\n}\n","@if (showSelectAll) {\n  <mat-checkbox\n    class=\"mtx-checkbox-master\"\n    [checked]=\"selectAll\"\n    [(indeterminate)]=\"selectAllIndeterminate\"\n    [disabled]=\"disabled\"\n    (change)=\"_updateMasterCheckboxState($event, -1)\"\n  >\n    {{ selectAllLabel }}\n  </mat-checkbox>\n}\n\n@for (option of items; track _trackBy(i, option); let i = $index) {\n  <mat-checkbox\n    class=\"mtx-checkbox-normal\"\n    [(ngModel)]=\"option.checked\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [aria-describedby]=\"option.ariaDescribedby\"\n    [aria-label]=\"option.ariaLabel\"\n    [aria-labelledby]=\"option.ariaLabelledby\"\n    [color]=\"option.color\"\n    [disabled]=\"option.disabled || disabled\"\n    [disableRipple]=\"option.disableRipple\"\n    [labelPosition]=\"option.labelPosition\"\n    [required]=\"option.required\"\n    (change)=\"_updateNormalCheckboxState($event, i)\"\n  >\n    {{ option[bindLabel] | toObservable | async }}\n  </mat-checkbox>\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\nimport { MtxPipesModule } from '@ng-matero/extensions/core';\nimport { MtxCheckboxGroup } from './checkbox-group';\n\n@NgModule({\n  imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup],\n  exports: [MtxCheckboxGroup, MtxPipesModule],\n})\nexport class MtxCheckboxGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"mtxCheckboxGroup.mjs","sources":["../../../projects/extensions/checkbox-group/checkbox-group.ts","../../../projects/extensions/checkbox-group/checkbox-group.html","../../../projects/extensions/checkbox-group/checkbox-group-module.ts","../../../projects/extensions/checkbox-group/mtxCheckboxGroup.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { AsyncPipe } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  TrackByFunction,\n  ViewEncapsulation,\n  booleanAttribute,\n  forwardRef,\n  inject,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\n\nimport { MtxToObservablePipe } from '@ng-matero/extensions/core';\nimport { MtxCheckboxGroupOption } from './interfaces';\n\nexport class MtxCheckboxBase {\n  constructor(\n    public label?: any,\n    public value?: any\n  ) {}\n}\n\n@Component({\n  selector: 'mtx-checkbox-group',\n  exportAs: 'mtxCheckboxGroup',\n  host: {\n    class: 'mtx-checkbox-group',\n  },\n  templateUrl: './checkbox-group.html',\n  styleUrl: './checkbox-group.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => MtxCheckboxGroup),\n      multi: true,\n    },\n  ],\n  imports: [FormsModule, MatCheckbox, MtxToObservablePipe, AsyncPipe],\n})\nexport class MtxCheckboxGroup implements AfterViewInit, OnDestroy, ControlValueAccessor {\n  private _changeDetectorRef = inject(ChangeDetectorRef);\n  private _focusMonitor = inject(FocusMonitor);\n  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  // TODO: support ng-content for checkbox-group\n  @ContentChildren(forwardRef(() => MatCheckbox), { descendants: true })\n  _checkboxes!: QueryList<MatCheckbox>;\n\n  /**\n   * Tracking function that will be used to check the differences in data changes. Used similarly\n   * to `ngFor` `trackBy` function. Optimize row operations by identifying a row based on its data\n   * relative to the function to know if a row should be added/removed/moved.\n   * Accepts a function that takes two parameters, `index` and `item`.\n   */\n  @Input()\n  get trackBy() {\n    return this._trackByFn;\n  }\n  set trackBy(fn: TrackByFunction<any> | undefined) {\n    if (fn != null && typeof fn !== 'function') {\n      console.warn(`trackBy must be a function, but received ${JSON.stringify(fn)}.`);\n    }\n    this._trackByFn = fn;\n  }\n  private _trackByFn?: TrackByFunction<any>;\n\n  @Input()\n  get items() {\n    return this._items;\n  }\n  set items(value: any[]) {\n    // store the original data with deep clone\n    this._originalItems = JSON.parse(JSON.stringify(value));\n    this._items = value.map(option => {\n      return option instanceof Object ? { ...option } : new MtxCheckboxBase(option, option);\n    });\n\n    // update the state of selectAll when items changed\n    this.writeValue(this.selectedItems);\n  }\n  private _items: any[] = [];\n  private _originalItems: any[] = [];\n\n  @Input() bindLabel = 'label';\n\n  @Input() bindValue = 'value';\n\n  @Input({ transform: booleanAttribute }) showSelectAll = false;\n\n  @Input() selectAllLabel = 'Select All';\n\n  @Input()\n  get compareWith() {\n    return this._compareWith;\n  }\n  set compareWith(fn: ((o1: any, o2: any) => boolean) | undefined) {\n    if (fn != null && typeof fn !== 'function') {\n      throw Error('`compareWith` must be a function.');\n    }\n\n    this._compareWith = fn;\n  }\n  private _compareWith?: (o1: any, o2: any) => boolean;\n\n  @Input({ transform: booleanAttribute }) disabled = false;\n\n  @Output() change = new EventEmitter<{ model: MtxCheckboxGroupOption[]; index: number }>();\n\n  selectAll = false;\n  selectAllIndeterminate = false;\n\n  selectedItems: MtxCheckboxGroupOption[] = [];\n\n  _onChange: (value: MtxCheckboxGroupOption[]) => void = () => null;\n  _onTouched: () => void = () => null;\n\n  ngAfterViewInit() {\n    this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {\n      if (!focusOrigin) {\n        // When a focused element becomes disabled, the browser *immediately* fires a blur event.\n        // Angular does not expect events to be raised during change detection, so any state change\n        // (such as a form control's 'ng-touched') will cause a changed-after-checked error.\n        // See https://github.com/angular/angular/issues/17793. To work around this, we defer\n        // telling the form control it has been touched until the next tick.\n        Promise.resolve().then(() => {\n          this._onTouched();\n          this._changeDetectorRef.markForCheck();\n        });\n      }\n    });\n  }\n\n  ngOnDestroy() {\n    this._focusMonitor.stopMonitoring(this._elementRef);\n  }\n\n  /**\n   * Finds and selects and option based on its value.\n   * @returns Option that has the corresponding value.\n   */\n  private _selectValue(value: MtxCheckboxGroupOption) {\n    const correspondingOption = (this.items as MtxCheckboxGroupOption[]).find(option => {\n      try {\n        const compareValue = option[this.bindValue] === value;\n        return this._compareWith ? this._compareWith(option, value) : compareValue;\n      } catch (error) {\n        console.warn(error);\n        return false;\n      }\n    });\n\n    if (correspondingOption) {\n      correspondingOption.checked = true;\n    }\n\n    return correspondingOption;\n  }\n\n  /**\n   * Sets the model value. Implemented as part of ControlValueAccessor.\n   * @param value New value to be written to the model.\n   */\n  writeValue(value: any[]): void {\n    this.items.forEach(item => (item.checked = false));\n\n    if (value) {\n      if (!Array.isArray(value)) {\n        throw Error('Value must be an array.');\n      }\n\n      value.forEach(currentValue => this._selectValue(currentValue));\n      this.selectedItems = value;\n    }\n\n    this._checkMasterCheckboxState();\n    this._changeDetectorRef.markForCheck();\n  }\n\n  /**\n   * Registers a callback to be triggered when the model value changes.\n   * Implemented as part of ControlValueAccessor.\n   * @param fn Callback to be registered.\n   */\n  registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => Record<string, unknown>): void {\n    this._onChange = fn;\n  }\n\n  /**\n   * Registers a callback to be triggered when the control is touched.\n   * Implemented as part of ControlValueAccessor.\n   * @param fn Callback to be registered.\n   */\n  registerOnTouched(fn: () => Record<string, unknown>): void {\n    this._onTouched = fn;\n  }\n\n  /**\n   * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n   * @param isDisabled Whether the control should be disabled.\n   */\n  setDisabledState(isDisabled: boolean) {\n    this.disabled = isDisabled;\n    this._changeDetectorRef.markForCheck();\n  }\n\n  private _checkMasterCheckboxState() {\n    if (\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .every(option => !option.checked)\n    ) {\n      this.selectAll = false;\n      this.selectAllIndeterminate = false;\n    } else if (\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .every(option => option.checked)\n    ) {\n      this.selectAll = true;\n      this.selectAllIndeterminate = false;\n    } else {\n      this.selectAllIndeterminate = true;\n    }\n  }\n\n  private _getSelectedItems(index: number) {\n    this.selectedItems = (this.items as MtxCheckboxGroupOption[]).filter(option => option.checked);\n\n    if (this._compareWith) {\n      this.selectedItems = (this._originalItems as MtxCheckboxGroupOption[]).filter(option =>\n        this.selectedItems.find(selectedOption => this._compareWith!(option, selectedOption))\n      );\n    } else {\n      this.selectedItems = this.selectedItems.map(option => option[this.bindValue]);\n    }\n\n    this._onChange(this.selectedItems);\n\n    this.change.emit({ model: this.selectedItems, index });\n  }\n\n  /** Handle normal checkbox toggle */\n  _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void {\n    this._checkMasterCheckboxState();\n    this._getSelectedItems(index);\n  }\n\n  /** Handle master checkbox toggle */\n  _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void {\n    this.selectAll = !this.selectAll;\n    this.selectAllIndeterminate = false;\n\n    if (this.selectAll) {\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .forEach(option => (option.checked = true));\n    } else {\n      (this.items as MtxCheckboxGroupOption[])\n        .filter(option => option.checked || !option.disabled)\n        .forEach(option => (option.checked = !!option.disabled));\n    }\n\n    this._getSelectedItems(index);\n  }\n\n  _trackBy = (index: number, item: any) => {\n    return this.trackBy ? this.trackBy(index, item) : item;\n  };\n}\n","@if (showSelectAll) {\n  <mat-checkbox\n    class=\"mtx-checkbox-master\"\n    [checked]=\"selectAll\"\n    [(indeterminate)]=\"selectAllIndeterminate\"\n    [disabled]=\"disabled\"\n    (change)=\"_updateMasterCheckboxState($event, -1)\"\n  >\n    {{ selectAllLabel }}\n  </mat-checkbox>\n}\n\n@for (option of items; track _trackBy(i, option); let i = $index) {\n  <mat-checkbox\n    class=\"mtx-checkbox-normal\"\n    [(ngModel)]=\"option.checked\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [aria-describedby]=\"option.ariaDescribedby\"\n    [aria-label]=\"option.ariaLabel\"\n    [aria-labelledby]=\"option.ariaLabelledby\"\n    [color]=\"option.color\"\n    [disabled]=\"option.disabled || disabled\"\n    [disableRipple]=\"option.disableRipple\"\n    [labelPosition]=\"option.labelPosition\"\n    [required]=\"option.required\"\n    (change)=\"_updateNormalCheckboxState($event, i)\"\n  >\n    {{ option[bindLabel] | toObservable | async }}\n  </mat-checkbox>\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\nimport { MtxPipesModule } from '@ng-matero/extensions/core';\nimport { MtxCheckboxGroup } from './checkbox-group';\n\n@NgModule({\n  imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup],\n  exports: [MtxCheckboxGroup, MtxPipesModule],\n})\nexport class MtxCheckboxGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/mtxColorpicker.mjs

@@ -3,7 +3,7 @@ import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { NgTemplateOutlet, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ChangeDetectorRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewContainerRef, EventEmitter, Injector, afterNextRender, booleanAttribute, Output, forwardRef, ElementRef, Directive, HostAttributeToken, ContentChild, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, ANIMATION_MODULE_TYPE, ChangeDetectorRef, NgZone, Renderer2, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewContainerRef, EventEmitter, Injector, afterNextRender, booleanAttribute, Output, forwardRef, Directive, HostAttributeToken, ContentChild, ViewChild, NgModule } from '@angular/core';
 import { MatIconButton, MatButtonModule } from '@angular/material/button';
 import * as i1 from 'ngx-color/chrome';
 import { ColorChromeModule } from 'ngx-color/chrome';
@@ -12,26 +12,10 @@ import { ESCAPE, hasModifierKey, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keyco
 import { Subject, Subscription, merge, of } from 'rxjs';
 import { take, filter } from 'rxjs/operators';
 import { TinyColor } from '@ctrl/tinycolor';
-import { trigger, transition, animate, keyframes, style } from '@angular/animations';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
 import { MatFormField } from '@angular/material/form-field';
 import { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
 
-/**
- * Animations used by the colorpicker.
- * @docs-private
- */
-const mtxColorpickerAnimations = {
-    /** Transforms the height of the colorpicker's panel. */
-    transformPanel: trigger('transformPanel', [
-        transition('void => enter-dropdown', animate('120ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
-            style({ opacity: 0, transform: 'scale(1, 0.8)' }),
-            style({ opacity: 1, transform: 'scale(1, 1)' }),
-        ]))),
-        transition('* => void', animate('100ms linear', style({ opacity: 0 }))),
-    ]),
-};
-
 /** Used to generate a unique ID for each colorpicker instance. */
 let colorpickerUid = 0;
 /** Injection token that determines the scroll handling while the panel is open. */
@@ -42,9 +26,19 @@ const MTX_COLORPICKER_SCROLL_STRATEGY = new InjectionToken('mtx-colorpicker-scro
         return () => overlay.scrollStrategies.reposition();
     },
 });
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
 function MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY(overlay) {
     return () => overlay.scrollStrategies.reposition();
 }
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
 const MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
     provide: MTX_COLORPICKER_SCROLL_STRATEGY,
     deps: [Overlay],
@@ -52,19 +46,58 @@ const MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
 };
 class MtxColorpickerContent {
     constructor() {
+        this._elementRef = inject(ElementRef);
+        this._animationsDisabled = inject(ANIMATION_MODULE_TYPE, { optional: true }) === 'NoopAnimations';
         this._changeDetectorRef = inject(ChangeDetectorRef);
-        /** Current state of the animation. */
-        this._animationState = 'enter-dropdown';
+        this._ngZone = inject(NgZone);
         /** Emits when an animation has finished. */
         this._animationDone = new Subject();
-    }
-    _startExitAnimation() {
-        this._animationState = 'void';
-        this._changeDetectorRef.markForCheck();
+        /** Whether there is an in-progress animation. */
+        this._isAnimating = false;
+        this._handleAnimationEvent = (event) => {
+            const element = this._elementRef.nativeElement;
+            if (event.target !== element || !event.animationName.startsWith('_mtx-colorpicker-content')) {
+                return;
+            }
+            clearTimeout(this._animationFallback);
+            this._isAnimating = event.type === 'animationstart';
+            element.classList.toggle('mtx-colorpicker-content-animating', this._isAnimating);
+            if (!this._isAnimating) {
+                this._animationDone.next();
+            }
+        };
+        if (!this._animationsDisabled) {
+            const element = this._elementRef.nativeElement;
+            const renderer = inject(Renderer2);
+            this._eventCleanups = this._ngZone.runOutsideAngular(() => [
+                renderer.listen(element, 'animationstart', this._handleAnimationEvent),
+                renderer.listen(element, 'animationend', this._handleAnimationEvent),
+                renderer.listen(element, 'animationcancel', this._handleAnimationEvent),
+            ]);
+        }
     }
     ngOnDestroy() {
+        clearTimeout(this._animationFallback);
+        this._eventCleanups?.forEach(cleanup => cleanup());
         this._animationDone.complete();
     }
+    _startExitAnimation() {
+        this._elementRef.nativeElement.classList.add('mtx-colorpicker-content-exit');
+        if (this._animationsDisabled) {
+            this._animationDone.next();
+        }
+        else {
+            // Some internal apps disable animations in tests using `* {animation: none !important}`.
+            // If that happens, the animation events won't fire and we'll never clean up the overlay.
+            // Add a fallback that will fire if the animation doesn't run in a certain amount of time.
+            clearTimeout(this._animationFallback);
+            this._animationFallback = setTimeout(() => {
+                if (!this._isAnimating) {
+                    this._animationDone.next();
+                }
+            }, 200);
+        }
+    }
     getColorString(e) {
         return {
             hex: e.color.rgb.a === 1 ? e.color.hex : new TinyColor(e.color.rgb).toHex8String(),
@@ -73,18 +106,17 @@ class MtxColorpickerContent {
             hsv: new TinyColor(e.color.hsv).toHsvString(),
         }[this.picker.format];
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: MtxColorpickerContent, isStandalone: true, selector: "mtx-colorpicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "class": "color ? \"mat-\" + color : \"\"", "@transformPanel": "_animationState" }, classAttribute: "mtx-colorpicker-content" }, exportAs: ["mtxColorpickerContent"], ngImport: i0, template: "@if (picker.content) {\n  <ng-template [ngTemplateOutlet]=\"picker.content\"></ng-template>\n} @else {\n  <color-chrome\n    [color]=\"picker.selected\"\n    (onChangeComplete)=\"picker.select(getColorString($event))\"\n  />\n}\n", styles: [".mtx-colorpicker-content{display:block;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: ColorChromeModule }, { kind: "component", type: i1.ChromeComponent, selector: "color-chrome", inputs: ["disableAlpha"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [mtxColorpickerAnimations.transformPanel], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxColorpickerContent, isStandalone: true, selector: "mtx-colorpicker-content", inputs: { color: "color" }, host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mtx-colorpicker-content-animations-enabled": "!_animationsDisabled" }, classAttribute: "mtx-colorpicker-content" }, exportAs: ["mtxColorpickerContent"], ngImport: i0, template: "@if (picker.content) {\n  <ng-template [ngTemplateOutlet]=\"picker.content\"></ng-template>\n} @else {\n  <color-chrome\n    [color]=\"picker.selected\"\n    (onChangeComplete)=\"picker.select(getColorString($event))\"\n  />\n}\n", styles: ["@keyframes _mtx-colorpicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mtx-colorpicker-content-exit{0%{opacity:1}to{opacity:0}}.mtx-colorpicker-content{display:block;border-radius:4px}.mtx-colorpicker-content.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mtx-colorpicker-content-exit.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-exit .1s linear}\n"], dependencies: [{ kind: "ngmodule", type: ColorChromeModule }, { kind: "component", type: i1.ChromeComponent, selector: "color-chrome", inputs: ["disableAlpha"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpickerContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpickerContent, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-colorpicker-content', host: {
                         'class': 'mtx-colorpicker-content',
                         '[class]': 'color ? "mat-" + color : ""',
-                        '[@transformPanel]': '_animationState',
-                        '(@transformPanel.done)': '_animationDone.next()',
-                    }, animations: [mtxColorpickerAnimations.transformPanel], exportAs: 'mtxColorpickerContent', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ColorChromeModule, NgTemplateOutlet], template: "@if (picker.content) {\n  <ng-template [ngTemplateOutlet]=\"picker.content\"></ng-template>\n} @else {\n  <color-chrome\n    [color]=\"picker.selected\"\n    (onChangeComplete)=\"picker.select(getColorString($event))\"\n  />\n}\n", styles: [".mtx-colorpicker-content{display:block;border-radius:4px}\n"] }]
-        }], propDecorators: { color: [{
+                        '[class.mtx-colorpicker-content-animations-enabled]': '!_animationsDisabled',
+                    }, exportAs: 'mtxColorpickerContent', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ColorChromeModule, NgTemplateOutlet], template: "@if (picker.content) {\n  <ng-template [ngTemplateOutlet]=\"picker.content\"></ng-template>\n} @else {\n  <color-chrome\n    [color]=\"picker.selected\"\n    (onChangeComplete)=\"picker.select(getColorString($event))\"\n  />\n}\n", styles: ["@keyframes _mtx-colorpicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mtx-colorpicker-content-exit{0%{opacity:1}to{opacity:0}}.mtx-colorpicker-content{display:block;border-radius:4px}.mtx-colorpicker-content.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mtx-colorpicker-content-exit.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-exit .1s linear}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{
                 type: Input
             }] } });
 class MtxColorpicker {
@@ -208,9 +240,9 @@ class MtxColorpicker {
             return;
         }
         if (this._componentRef) {
-            const instance = this._componentRef.instance;
-            instance._startExitAnimation();
+            const { instance } = this._componentRef;
             instance._animationDone.pipe(take(1)).subscribe(() => this._destroyOverlay());
+            instance._startExitAnimation();
         }
         const completeClose = () => {
             // The `_opened` could've been reset already if
@@ -331,10 +363,10 @@ class MtxColorpicker {
                 (this.pickerInput && hasModifierKey(event, 'altKey') && event.keyCode === UP_ARROW));
         })));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.6", type: MtxColorpicker, isStandalone: true, selector: "mtx-colorpicker", inputs: { content: "content", disabled: ["disabled", "disabled", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute], opened: ["opened", "opened", booleanAttribute], color: "color", format: "format" }, outputs: { openedStream: "opened", closedStream: "closed" }, exportAs: ["mtxColorpicker"], usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: MtxColorpicker, isStandalone: true, selector: "mtx-colorpicker", inputs: { content: "content", disabled: ["disabled", "disabled", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute], opened: ["opened", "opened", booleanAttribute], color: "color", format: "format" }, outputs: { openedStream: "opened", closedStream: "closed" }, exportAs: ["mtxColorpicker"], usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'mtx-colorpicker',
@@ -545,14 +577,14 @@ class MtxColorpickerInput {
     _formatValue(value) {
         this._elementRef.nativeElement.value = value ? value : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.6", type: MtxColorpickerInput, isStandalone: true, selector: "input[mtxColorpicker]", inputs: { mtxColorpicker: "mtxColorpicker", disabled: ["disabled", "disabled", booleanAttribute], value: "value", format: "format" }, outputs: { colorChange: "colorChange", colorInput: "colorInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_picker ? \"dialog\" : null", "attr.aria-owns": "(_picker?.opened && _picker.id) || null", "disabled": "disabled" }, classAttribute: "mtx-colorpicker-input" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.2", type: MtxColorpickerInput, isStandalone: true, selector: "input[mtxColorpicker]", inputs: { mtxColorpicker: "mtxColorpicker", disabled: ["disabled", "disabled", booleanAttribute], value: "value", format: "format" }, outputs: { colorChange: "colorChange", colorInput: "colorInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_picker ? \"dialog\" : null", "attr.aria-owns": "(_picker?.opened && _picker.id) || null", "disabled": "disabled" }, classAttribute: "mtx-colorpicker-input" }, providers: [
             MTX_COLORPICKER_VALUE_ACCESSOR,
             MTX_COLORPICKER_VALIDATORS,
             { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MtxColorpickerInput },
         ], exportAs: ["mtxColorpickerInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpickerInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpickerInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mtxColorpicker]',
@@ -590,10 +622,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
 
 /** Can be used to override the icon of a `mtxColorpickerToggle`. */
 class MtxColorpickerToggleIcon {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: MtxColorpickerToggleIcon, isStandalone: true, selector: "[mtxColorpickerToggleIcon]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: MtxColorpickerToggleIcon, isStandalone: true, selector: "[mtxColorpickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpickerToggleIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpickerToggleIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxColorpickerToggleIcon]',
@@ -645,10 +677,10 @@ class MtxColorpickerToggle {
         this._stateChanges.unsubscribe();
         this._stateChanges = merge(pickerDisabled, inputDisabled, pickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: MtxColorpickerToggle, isStandalone: true, selector: "mtx-colorpicker-toggle", inputs: { picker: ["for", "picker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-colorpicker-toggle-active": "picker && picker.opened", "class.mat-accent": "picker && picker.color === \"accent\"", "class.mat-warn": "picker && picker.color === \"warn\"" }, classAttribute: "mtx-colorpicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxColorpickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxColorpickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"picker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\"\n>\n  @if (!_customIcon) {\n    <svg\n      class=\"mtx-colorpicker-toggle-default-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z\"\n      />\n    </svg>\n  }\n\n  <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-colorpicker-toggle{pointer-events:auto;color:var(--mtx-colorpicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-colorpicker-toggle-active{color:var(--mtx-colorpicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media (forced-colors: active){.mtx-colorpicker-toggle-default-icon{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxColorpickerToggle, isStandalone: true, selector: "mtx-colorpicker-toggle", inputs: { picker: ["for", "picker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-colorpicker-toggle-active": "picker && picker.opened", "class.mat-accent": "picker && picker.color === \"accent\"", "class.mat-warn": "picker && picker.color === \"warn\"" }, classAttribute: "mtx-colorpicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxColorpickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxColorpickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"picker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\"\n>\n  @if (!_customIcon) {\n    <svg\n      class=\"mtx-colorpicker-toggle-default-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z\"\n      />\n    </svg>\n  }\n\n  <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-colorpicker-toggle{pointer-events:auto;color:var(--mtx-colorpicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-colorpicker-toggle-active{color:var(--mtx-colorpicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media (forced-colors: active){.mtx-colorpicker-toggle-default-icon{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-colorpicker-toggle', host: {
                         'class': 'mtx-colorpicker-toggle',
@@ -684,8 +716,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
             }] } });
 
 class MtxColorpickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpickerModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpickerModule, imports: [CommonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
@@ -700,7 +732,7 @@ class MtxColorpickerModule {
             MtxColorpickerInput,
             MtxColorpickerToggle,
             MtxColorpickerToggleIcon] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpickerModule, providers: [MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpickerModule, providers: [MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
@@ -709,7 +741,7 @@ class MtxColorpickerModule {
             MtxColorpickerContent,
             MtxColorpickerToggle] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxColorpickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxColorpickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -736,6 +768,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 }]
         }] });
 
+/**
+ * Animations used by the colorpicker.
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+const mtxColorpickerAnimations = {
+    // Represents:
+    // transformPanel: trigger('transformPanel', [
+    //   transition(
+    //     'void => enter-dropdown',
+    //     animate(
+    //       '120ms cubic-bezier(0, 0, 0.2, 1)',
+    //       keyframes([
+    //         style({ opacity: 0, transform: 'scale(1, 0.8)' }),
+    //         style({ opacity: 1, transform: 'scale(1, 1)' }),
+    //       ])
+    //     )
+    //   ),
+    //   transition('* => void', animate('100ms linear', style({ opacity: 0 }))),
+    // ]),
+    /** Transforms the height of the colorpicker's panel. */
+    transformPanel: {
+        type: 7,
+        name: 'transformPanel',
+        definitions: [
+            {
+                type: 1,
+                expr: 'void => enter-dropdown',
+                animation: {
+                    type: 4,
+                    styles: {
+                        type: 5,
+                        steps: [
+                            { type: 6, styles: { opacity: 0, transform: 'scale(1, 0.8)' }, offset: null },
+                            { type: 6, styles: { opacity: 1, transform: 'scale(1, 1)' }, offset: null },
+                        ],
+                    },
+                    timings: '120ms cubic-bezier(0, 0, 0.2, 1)',
+                },
+                options: null,
+            },
+            {
+                type: 1,
+                expr: '* => void',
+                animation: {
+                    type: 4,
+                    styles: { type: 6, styles: { opacity: 0 }, offset: null },
+                    timings: '100ms linear',
+                },
+                options: null,
+            },
+        ],
+        options: {},
+    },
+};
+
 /**
  * Generated bundle index. Do not edit.
  */