@ng-matero/extensions 18.4.1 → 18.5.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  ViewEncapsulation,\n  booleanAttribute,\n  forwardRef,\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  standalone: true,\n  imports: [FormsModule, MatCheckbox, MtxToObservablePipe, AsyncPipe],\n})\nexport class MtxCheckboxGroup implements AfterViewInit, OnDestroy, ControlValueAccessor {\n  @ContentChildren(forwardRef(() => MatCheckbox), { descendants: true })\n  _checkboxes!: QueryList<MatCheckbox>;\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  constructor(\n    private _changeDetectorRef: ChangeDetectorRef,\n    private _focusMonitor: FocusMonitor,\n    private _elementRef: ElementRef<HTMLElement>\n  ) {}\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","@if (showSelectAll) {\n  <mat-checkbox class=\"mtx-checkbox-master\"\n    [checked]=\"selectAll\"\n    [(indeterminate)]=\"selectAllIndeterminate\"\n    [disabled]=\"disabled\"\n    (change)=\"_updateMasterCheckboxState($event, -1)\">{{selectAllLabel}}</mat-checkbox>\n}\n\n@for (option of items; track option; let i = $index) {\n  <mat-checkbox 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  >{{option[bindLabel] | toObservable | async}}</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":";;;;;;;;;MAwBa,eAAe,CAAA;IAC1B,WACS,CAAA,KAAW,EACX,KAAW,EAAA;QADX,IAAK,CAAA,KAAA,GAAL,KAAK,CAAM;QACX,IAAK,CAAA,KAAA,GAAL,KAAK,CAAM;KAChB;AACL,CAAA;MAsBY,gBAAgB,CAAA;AAI3B,IAAA,IACI,KAAK,GAAA;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;KACpB;IACD,IAAI,KAAK,CAAC,KAAY,EAAA;;AAEpB,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QACxD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,MAAM,IAAG;YAC/B,OAAO,MAAM,YAAY,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,IAAI,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AACxF,SAAC,CAAC,CAAC;KACJ;AAYD,IAAA,IACI,WAAW,GAAA;QACb,OAAO,IAAI,CAAC,YAAY,CAAC;KAC1B;IACD,IAAI,WAAW,CAAC,EAA+C,EAAA;QAC7D,IAAI,EAAE,IAAI,IAAI,IAAI,OAAO,EAAE,KAAK,UAAU,EAAE;AAC1C,YAAA,MAAM,KAAK,CAAC,mCAAmC,CAAC,CAAC;SAClD;AAED,QAAA,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;KACxB;AAeD,IAAA,WAAA,CACU,kBAAqC,EACrC,aAA2B,EAC3B,WAAoC,EAAA;QAFpC,IAAkB,CAAA,kBAAA,GAAlB,kBAAkB,CAAmB;QACrC,IAAa,CAAA,aAAA,GAAb,aAAa,CAAc;QAC3B,IAAW,CAAA,WAAA,GAAX,WAAW,CAAyB;QAvCtC,IAAM,CAAA,MAAA,GAAU,EAAE,CAAC;QACnB,IAAc,CAAA,cAAA,GAAU,EAAE,CAAC;QAE1B,IAAS,CAAA,SAAA,GAAG,OAAO,CAAC;QAEpB,IAAS,CAAA,SAAA,GAAG,OAAO,CAAC;QAEW,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;QAErD,IAAc,CAAA,cAAA,GAAG,YAAY,CAAC;QAeC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAE/C,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAsD,CAAC;QAE1F,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;QAClB,IAAsB,CAAA,sBAAA,GAAG,KAAK,CAAC;QAE/B,IAAa,CAAA,aAAA,GAA6B,EAAE,CAAC;AAE7C,QAAA,IAAA,CAAA,SAAS,GAA8C,MAAM,IAAI,CAAC;AAClE,QAAA,IAAA,CAAA,UAAU,GAAe,MAAM,IAAI,CAAC;KAMhC;IAEJ,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,SAAS,CAAC,WAAW,IAAG;YACzE,IAAI,CAAC,WAAW,EAAE;;;;;;AAMhB,gBAAA,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,MAAK;oBAC1B,IAAI,CAAC,UAAU,EAAE,CAAC;AAClB,oBAAA,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;AACzC,iBAAC,CAAC,CAAC;aACJ;AACH,SAAC,CAAC,CAAC;KACJ;IAED,WAAW,GAAA;QACT,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACrD;AAED;;;AAGG;AACK,IAAA,YAAY,CAAC,KAA6B,EAAA;QAChD,MAAM,mBAAmB,GAAI,IAAI,CAAC,KAAkC,CAAC,IAAI,CAAC,MAAM,IAAG;AACjF,YAAA,IAAI;gBACF,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,CAAC;AACtD,gBAAA,OAAO,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,YAAY,CAAC;aAC5E;YAAC,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACpB,gBAAA,OAAO,KAAK,CAAC;aACd;AACH,SAAC,CAAC,CAAC;QAEH,IAAI,mBAAmB,EAAE;AACvB,YAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;SACpC;AAED,QAAA,OAAO,mBAAmB,CAAC;KAC5B;AAED;;;AAGG;AACH,IAAA,UAAU,CAAC,KAAY,EAAA;AACrB,QAAA,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;QAEnD,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACzB,gBAAA,MAAM,KAAK,CAAC,yBAAyB,CAAC,CAAC;aACxC;AAED,YAAA,KAAK,CAAC,OAAO,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC;AAC/D,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;QAED,IAAI,CAAC,yBAAyB,EAAE,CAAC;AACjC,QAAA,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;KACxC;AAED;;;;AAIG;AACH,IAAA,gBAAgB,CAAC,EAAgE,EAAA;AAC/E,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;KACrB;AAED;;;;AAIG;AACH,IAAA,iBAAiB,CAAC,EAAiC,EAAA;AACjD,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;KACtB;AAED;;;AAGG;AACH,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;AAC3B,QAAA,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;KACxC;IAEO,yBAAyB,GAAA;QAC/B,IACG,IAAI,CAAC,KAAkC;AACrC,aAAA,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;aACpD,KAAK,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EACnC;AACA,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;AACvB,YAAA,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;SACrC;aAAM,IACJ,IAAI,CAAC,KAAkC;AACrC,aAAA,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;aACpD,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,EAClC;AACA,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;AACtB,YAAA,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;SACrC;aAAM;AACL,YAAA,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;SACpC;KACF;AAEO,IAAA,iBAAiB,CAAC,KAAa,EAAA;AACrC,QAAA,IAAI,CAAC,aAAa,GAAI,IAAI,CAAC,KAAkC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC;AAE/F,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,IAAI,CAAC,aAAa,GAAI,IAAI,CAAC,cAA2C,CAAC,MAAM,CAAC,MAAM,IAClF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,YAAa,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CACtF,CAAC;SACH;aAAM;YACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;SAC/E;AAED,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AAEnC,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;KACxD;;IAGD,0BAA0B,CAAC,CAAoB,EAAE,KAAa,EAAA;QAC5D,IAAI,CAAC,yBAAyB,EAAE,CAAC;AACjC,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KAC/B;;IAGD,0BAA0B,CAAC,CAAoB,EAAE,KAAa,EAAA;AAC5D,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;AACjC,QAAA,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;AAEpC,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AACjB,YAAA,IAAI,CAAC,KAAkC;AACrC,iBAAA,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;AACpD,iBAAA,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;SAC/C;aAAM;AACJ,YAAA,IAAI,CAAC,KAAkC;AACrC,iBAAA,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;AACpD,iBAAA,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;SAC5D;AAED,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KAC/B;iIA5MU,gBAAgB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,YAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAsBP,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,eAAA,EAAA,eAAA,EAAA,gBAAgB,CAiBhB,EAAA,cAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAAA,gBAAgB,CAjDzB,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,oBAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,EAAC,MAAM,gBAAgB,EAAC;AAC/C,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;SACF,EAKiC,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,SAAA,EAAA,EAAA,CAAA,UAAA,CAAA,MAAA,WAAW,CCpD/C,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,g6BAuBA,ED0BY,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,WAAW,4jBAAE,WAAW,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,eAAA,EAAA,MAAA,EAAA,OAAA,EAAA,eAAA,EAAA,UAAA,EAAA,OAAA,EAAA,qBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,mBAAmB,EAAA,IAAA,EAAA,cAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FAEvD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBApB5B,SAAS;+BACE,oBAAoB,EAAA,QAAA,EACpB,kBAAkB,EACtB,IAAA,EAAA;AACJ,wBAAA,KAAK,EAAE,oBAAoB;AAC5B,qBAAA,EAAA,aAAA,EAGc,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,EACpC,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,EAAC,sBAAsB,EAAC;AAC/C,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;qBACF,EACW,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,g6BAAA,EAAA,CAAA;0IAInE,WAAW,EAAA,CAAA;sBADV,eAAe;uBAAC,UAAU,CAAC,MAAM,WAAW,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAA;gBAIjE,KAAK,EAAA,CAAA;sBADR,KAAK;gBAcG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBAEG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBAEkC,aAAa,EAAA,CAAA;sBAApD,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAE7B,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBAGF,WAAW,EAAA,CAAA;sBADd,KAAK;gBAakC,QAAQ,EAAA,CAAA;sBAA/C,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAE5B,MAAM,EAAA,CAAA;sBAAf,MAAM;;;MEhFI,sBAAsB,CAAA;iIAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAtB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,sBAAsB,EAHvB,OAAA,EAAA,CAAA,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,cAAc,EAAE,gBAAgB,CAC9E,EAAA,OAAA,EAAA,CAAA,gBAAgB,EAAE,cAAc,CAAA,EAAA,CAAA,CAAA,EAAA;kIAE/B,sBAAsB,EAAA,OAAA,EAAA,CAHvB,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,cAAc,EAAE,gBAAgB,EAC5D,cAAc,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAE/B,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,cAAc,EAAE,gBAAgB,CAAC;AACzF,oBAAA,OAAO,EAAE,CAAC,gBAAgB,EAAE,cAAc,CAAC;AAC5C,iBAAA,CAAA;;;ACXD;;AAEG;;;;"}
+{"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} 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  standalone: true,\n  imports: [FormsModule, MatCheckbox, MtxToObservablePipe, AsyncPipe],\n})\nexport class MtxCheckboxGroup implements AfterViewInit, OnDestroy, ControlValueAccessor {\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  constructor(\n    private _changeDetectorRef: ChangeDetectorRef,\n    private _focusMonitor: FocusMonitor,\n    private _elementRef: ElementRef<HTMLElement>\n  ) {}\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 class=\"mtx-checkbox-master\"\n    [checked]=\"selectAll\"\n    [(indeterminate)]=\"selectAllIndeterminate\"\n    [disabled]=\"disabled\"\n    (change)=\"_updateMasterCheckboxState($event, -1)\">{{selectAllLabel}}</mat-checkbox>\n}\n\n@for (option of items; track _trackBy(i, option); let i = $index) {\n  <mat-checkbox 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  >{{option[bindLabel] | toObservable | async}}</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/mtxDatetimepicker.mjs

@@ -2088,7 +2088,7 @@ class MtxCalendar {
         return ('00' + n).slice(-2);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxCalendar, deps: [{ token: i0.ElementRef }, { token: MtxDatetimepickerIntl }, { token: i0.NgZone }, { token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxCalendar, isStandalone: true, selector: "mtx-calendar", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], startView: "startView", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: "preventSameDateTimeSelection", headerComponent: "headerComponent", actionsPortal: "actionsPortal", type: "type", startAt: "startAt", timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", viewChanged: "viewChanged", _userSelection: "_userSelection" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "_handleCalendarBodyKeydown($event)" }, properties: { "class.mtx-calendar-with-time-input": "timeInput" }, classAttribute: "mtx-calendar" }, exportAs: ["mtxCalendar"], ngImport: i0, template: "<div class=\"mtx-calendar-header\">\n  @if (_calendarHeaderPortal) {\n    <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n  } @else {\n    @if (type !== 'time') {\n      <button\n        mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n        [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n        [attr.aria-label]=\"_yearButtonLabel\"\n        (click)=\"_yearClicked()\">\n        <span>{{ _yearButtonText }}</span>\n        @if (multiYearSelector || type === 'year') {\n          <svg\n            class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M7,10L12,15L17,10H7Z\" />\n          </svg>\n        }\n      </button>\n    }\n    @if (type !== 'year') {\n      <div class=\"mtx-calendar-header-date-time\">\n        @if (type !== 'time') {\n          <button\n            mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n            [class.active]=\"currentView === 'month'\"\n            [class.not-clickable]=\"type === 'month'\"\n            [attr.aria-label]=\"_dateButtonLabel\"\n            (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n        }\n        @if (type.endsWith('time')) {\n          <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n            <span class=\"mtx-calendar-header-hour-minute-container\">\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n                [class.active]=\"_clockView === 'hour'\"\n                [attr.aria-label]=\"_hourButtonLabel\"\n                (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n              <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n                [class.active]=\"_clockView === 'minute'\"\n                [attr.aria-label]=\"_minuteButtonLabel\"\n                (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n            </span>\n            @if (twelvehour) {\n              <span class=\"mtx-calendar-header-ampm-container\">\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n                  (click)=\"_ampmClicked('AM')\">AM</button>\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n                  (click)=\"_ampmClicked('PM')\">PM</button>\n              </span>\n            }\n          </span>\n        }\n      </div>\n    }\n  }\n</div>\n\n<div class=\"mtx-calendar-content\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n    <div class=\"mtx-month-content\">\n      <div class=\"mtx-calendar-controls\">\n        <button mat-icon-button type=\"button\"\n          class=\"mtx-calendar-previous-button\"\n          [class.disabled]=\"!_previousEnabled()\"\n          [attr.aria-disabled]=\"!_previousEnabled()\"\n          [attr.aria-label]=\"_prevButtonLabel\"\n          (click)=\"_previousClicked()\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n          </svg>\n        </button>\n        <div class=\"mtx-calendar-period-button\"\n          [@slideCalendar]=\"_calendarState\"\n          (@slideCalendar.done)=\"_calendarStateDone()\">\n          <strong>{{ _yearPeriodText }}</strong>\n        </div>\n        <button mat-icon-button type=\"button\"\n          class=\"mtx-calendar-next-button\"\n          [class.disabled]=\"!_nextEnabled()\"\n          [attr.aria-disabled]=\"!_nextEnabled()\"\n          [attr.aria-label]=\"_nextButtonLabel\"\n          (click)=\"_nextClicked()\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  }\n\n  @switch (currentView) {\n    @case ('month') {\n      <mtx-month-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_dateSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-month-view>\n    }\n    @case ('year') {\n      <mtx-year-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_monthSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-year-view>\n    }\n    @case ('multi-year') {\n      <mtx-multi-year-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_yearSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-multi-year-view>\n    }\n    @default {\n      @if (timeInput) {\n        <mtx-time\n          (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_timeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          (ampmChange)=\"_ampmClicked($event)\"\n          [clockView]=\"_clockView\"\n          (clockViewChange)=\"_clockView = $event\"\n          [twelvehour]=\"twelvehour\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"_activeDate\"\n          [actionsPortal]=\"actionsPortal\"\n          [autoFocus]=\"timeInputAutoFocus\">\n        </mtx-time>\n      } @else {\n        <mtx-clock (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_dialTimeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"_activeDate\"\n          [startView]=\"_clockView\"\n          [twelvehour]=\"twelvehour\">\n        </mtx-clock>\n      }\n    }\n  }\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-app-body-large-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-app-body-large-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-app-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-app-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-app-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-app-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-app-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MtxMonthView, selector: "mtx-month-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection"], exportAs: ["mtxMonthView"] }, { kind: "component", type: MtxYearView, selector: "mtx-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection"], exportAs: ["mtxYearView"] }, { kind: "component", type: MtxMultiYearView, selector: "mtx-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "_userSelection"], exportAs: ["mtxMultiYearView"] }, { kind: "component", type: MtxTime, selector: "mtx-time", inputs: ["dateFilter", "interval", "actionsPortal", "autoFocus", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "_userSelection", "ampmChange", "clockViewChange"], exportAs: ["mtxTime"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "actionButtons", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxCalendar, isStandalone: true, selector: "mtx-calendar", inputs: { multiYearSelector: ["multiYearSelector", "multiYearSelector", booleanAttribute], twelvehour: ["twelvehour", "twelvehour", booleanAttribute], startView: "startView", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: "preventSameDateTimeSelection", headerComponent: "headerComponent", actionsPortal: "actionsPortal", type: "type", startAt: "startAt", timeInput: ["timeInput", "timeInput", booleanAttribute], timeInputAutoFocus: ["timeInputAutoFocus", "timeInputAutoFocus", booleanAttribute], selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", viewChanged: "viewChanged", _userSelection: "_userSelection" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "_handleCalendarBodyKeydown($event)" }, properties: { "class.mtx-calendar-with-time-input": "timeInput" }, classAttribute: "mtx-calendar" }, exportAs: ["mtxCalendar"], ngImport: i0, template: "<div class=\"mtx-calendar-header\">\n  @if (_calendarHeaderPortal) {\n    <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n  } @else {\n    @if (type !== 'time') {\n      <button\n        mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n        [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n        [attr.aria-label]=\"_yearButtonLabel\"\n        (click)=\"_yearClicked()\">\n        <span>{{ _yearButtonText }}</span>\n        @if (multiYearSelector || type === 'year') {\n          <svg\n            class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M7,10L12,15L17,10H7Z\" />\n          </svg>\n        }\n      </button>\n    }\n    @if (type !== 'year') {\n      <div class=\"mtx-calendar-header-date-time\">\n        @if (type !== 'time') {\n          <button\n            mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n            [class.active]=\"currentView === 'month'\"\n            [class.not-clickable]=\"type === 'month'\"\n            [attr.aria-label]=\"_dateButtonLabel\"\n            (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n        }\n        @if (type.endsWith('time')) {\n          <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n            <span class=\"mtx-calendar-header-hour-minute-container\">\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n                [class.active]=\"_clockView === 'hour'\"\n                [attr.aria-label]=\"_hourButtonLabel\"\n                (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n              <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n                [class.active]=\"_clockView === 'minute'\"\n                [attr.aria-label]=\"_minuteButtonLabel\"\n                (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n            </span>\n            @if (twelvehour) {\n              <span class=\"mtx-calendar-header-ampm-container\">\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n                  (click)=\"_ampmClicked('AM')\">AM</button>\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n                  (click)=\"_ampmClicked('PM')\">PM</button>\n              </span>\n            }\n          </span>\n        }\n      </div>\n    }\n  }\n</div>\n\n<div class=\"mtx-calendar-content\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n    <div class=\"mtx-month-content\">\n      <div class=\"mtx-calendar-controls\">\n        <button mat-icon-button type=\"button\"\n          class=\"mtx-calendar-previous-button\"\n          [class.disabled]=\"!_previousEnabled()\"\n          [attr.aria-disabled]=\"!_previousEnabled()\"\n          [attr.aria-label]=\"_prevButtonLabel\"\n          (click)=\"_previousClicked()\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n          </svg>\n        </button>\n        <div class=\"mtx-calendar-period-button\"\n          [@slideCalendar]=\"_calendarState\"\n          (@slideCalendar.done)=\"_calendarStateDone()\">\n          <strong>{{ _yearPeriodText }}</strong>\n        </div>\n        <button mat-icon-button type=\"button\"\n          class=\"mtx-calendar-next-button\"\n          [class.disabled]=\"!_nextEnabled()\"\n          [attr.aria-disabled]=\"!_nextEnabled()\"\n          [attr.aria-label]=\"_nextButtonLabel\"\n          (click)=\"_nextClicked()\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  }\n\n  @switch (currentView) {\n    @case ('month') {\n      <mtx-month-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_dateSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-month-view>\n    }\n    @case ('year') {\n      <mtx-year-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_monthSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-year-view>\n    }\n    @case ('multi-year') {\n      <mtx-multi-year-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_yearSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-multi-year-view>\n    }\n    @default {\n      @if (timeInput) {\n        <mtx-time\n          (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_timeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          (ampmChange)=\"_ampmClicked($event)\"\n          [clockView]=\"_clockView\"\n          (clockViewChange)=\"_clockView = $event\"\n          [twelvehour]=\"twelvehour\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"_activeDate\"\n          [actionsPortal]=\"actionsPortal\"\n          [autoFocus]=\"timeInputAutoFocus\">\n        </mtx-time>\n      } @else {\n        <mtx-clock (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_dialTimeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"_activeDate\"\n          [startView]=\"_clockView\"\n          [twelvehour]=\"twelvehour\">\n        </mtx-clock>\n      }\n    }\n  }\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-app-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-app-body-medium-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-app-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-app-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-app-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-app-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-app-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MtxMonthView, selector: "mtx-month-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection"], exportAs: ["mtxMonthView"] }, { kind: "component", type: MtxYearView, selector: "mtx-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["selectedChange", "_userSelection"], exportAs: ["mtxYearView"] }, { kind: "component", type: MtxMultiYearView, selector: "mtx-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "_userSelection"], exportAs: ["mtxMultiYearView"] }, { kind: "component", type: MtxTime, selector: "mtx-time", inputs: ["dateFilter", "interval", "actionsPortal", "autoFocus", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "_userSelection", "ampmChange", "clockViewChange"], exportAs: ["mtxTime"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "actionButtons", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxCalendar, decorators: [{
             type: Component,
@@ -2106,7 +2106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MtxMultiYearView,
                         MtxTime,
                         MtxClock,
-                    ], template: "<div class=\"mtx-calendar-header\">\n  @if (_calendarHeaderPortal) {\n    <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n  } @else {\n    @if (type !== 'time') {\n      <button\n        mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n        [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n        [attr.aria-label]=\"_yearButtonLabel\"\n        (click)=\"_yearClicked()\">\n        <span>{{ _yearButtonText }}</span>\n        @if (multiYearSelector || type === 'year') {\n          <svg\n            class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M7,10L12,15L17,10H7Z\" />\n          </svg>\n        }\n      </button>\n    }\n    @if (type !== 'year') {\n      <div class=\"mtx-calendar-header-date-time\">\n        @if (type !== 'time') {\n          <button\n            mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n            [class.active]=\"currentView === 'month'\"\n            [class.not-clickable]=\"type === 'month'\"\n            [attr.aria-label]=\"_dateButtonLabel\"\n            (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n        }\n        @if (type.endsWith('time')) {\n          <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n            <span class=\"mtx-calendar-header-hour-minute-container\">\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n                [class.active]=\"_clockView === 'hour'\"\n                [attr.aria-label]=\"_hourButtonLabel\"\n                (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n              <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n                [class.active]=\"_clockView === 'minute'\"\n                [attr.aria-label]=\"_minuteButtonLabel\"\n                (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n            </span>\n            @if (twelvehour) {\n              <span class=\"mtx-calendar-header-ampm-container\">\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n                  (click)=\"_ampmClicked('AM')\">AM</button>\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n                  (click)=\"_ampmClicked('PM')\">PM</button>\n              </span>\n            }\n          </span>\n        }\n      </div>\n    }\n  }\n</div>\n\n<div class=\"mtx-calendar-content\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n    <div class=\"mtx-month-content\">\n      <div class=\"mtx-calendar-controls\">\n        <button mat-icon-button type=\"button\"\n          class=\"mtx-calendar-previous-button\"\n          [class.disabled]=\"!_previousEnabled()\"\n          [attr.aria-disabled]=\"!_previousEnabled()\"\n          [attr.aria-label]=\"_prevButtonLabel\"\n          (click)=\"_previousClicked()\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n          </svg>\n        </button>\n        <div class=\"mtx-calendar-period-button\"\n          [@slideCalendar]=\"_calendarState\"\n          (@slideCalendar.done)=\"_calendarStateDone()\">\n          <strong>{{ _yearPeriodText }}</strong>\n        </div>\n        <button mat-icon-button type=\"button\"\n          class=\"mtx-calendar-next-button\"\n          [class.disabled]=\"!_nextEnabled()\"\n          [attr.aria-disabled]=\"!_nextEnabled()\"\n          [attr.aria-label]=\"_nextButtonLabel\"\n          (click)=\"_nextClicked()\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  }\n\n  @switch (currentView) {\n    @case ('month') {\n      <mtx-month-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_dateSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-month-view>\n    }\n    @case ('year') {\n      <mtx-year-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_monthSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-year-view>\n    }\n    @case ('multi-year') {\n      <mtx-multi-year-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_yearSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-multi-year-view>\n    }\n    @default {\n      @if (timeInput) {\n        <mtx-time\n          (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_timeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          (ampmChange)=\"_ampmClicked($event)\"\n          [clockView]=\"_clockView\"\n          (clockViewChange)=\"_clockView = $event\"\n          [twelvehour]=\"twelvehour\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"_activeDate\"\n          [actionsPortal]=\"actionsPortal\"\n          [autoFocus]=\"timeInputAutoFocus\">\n        </mtx-time>\n      } @else {\n        <mtx-clock (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_dialTimeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"_activeDate\"\n          [startView]=\"_clockView\"\n          [twelvehour]=\"twelvehour\">\n        </mtx-clock>\n      }\n    }\n  }\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-app-body-large-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-app-body-large-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-app-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-app-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-app-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-app-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-app-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"] }]
+                    ], template: "<div class=\"mtx-calendar-header\">\n  @if (_calendarHeaderPortal) {\n    <ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n  } @else {\n    @if (type !== 'time') {\n      <button\n        mat-button type=\"button\" class=\"mtx-calendar-header-year\"\n        [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n        [attr.aria-label]=\"_yearButtonLabel\"\n        (click)=\"_yearClicked()\">\n        <span>{{ _yearButtonText }}</span>\n        @if (multiYearSelector || type === 'year') {\n          <svg\n            class=\"mtx-calendar-header-year-dropdown\" matButtonIcon iconPositionEnd\n            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M7,10L12,15L17,10H7Z\" />\n          </svg>\n        }\n      </button>\n    }\n    @if (type !== 'year') {\n      <div class=\"mtx-calendar-header-date-time\">\n        @if (type !== 'time') {\n          <button\n            mat-button type=\"button\" class=\"mtx-calendar-header-date\"\n            [class.active]=\"currentView === 'month'\"\n            [class.not-clickable]=\"type === 'month'\"\n            [attr.aria-label]=\"_dateButtonLabel\"\n            (click)=\"_dateClicked()\">{{ _dateButtonText }}</button>\n        }\n        @if (type.endsWith('time')) {\n          <span class=\"mtx-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n            <span class=\"mtx-calendar-header-hour-minute-container\">\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-hours\"\n                [class.active]=\"_clockView === 'hour'\"\n                [attr.aria-label]=\"_hourButtonLabel\"\n                (click)=\"_hoursClicked()\">{{ _hoursButtonText }}</button>\n              <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n              <button mat-button type=\"button\" class=\"mtx-calendar-header-minutes\"\n                [class.active]=\"_clockView === 'minute'\"\n                [attr.aria-label]=\"_minuteButtonLabel\"\n                (click)=\"_minutesClicked()\">{{ _minutesButtonText }}</button>\n            </span>\n            @if (twelvehour) {\n              <span class=\"mtx-calendar-header-ampm-container\">\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'AM'\" aria-label=\"AM\"\n                  (click)=\"_ampmClicked('AM')\">AM</button>\n                <button mat-button type=\"button\" class=\"mtx-calendar-header-ampm\"\n                  [class.active]=\"_AMPM === 'PM'\" aria-label=\"PM\"\n                  (click)=\"_ampmClicked('PM')\">PM</button>\n              </span>\n            }\n          </span>\n        }\n      </div>\n    }\n  }\n</div>\n\n<div class=\"mtx-calendar-content\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n    <div class=\"mtx-month-content\">\n      <div class=\"mtx-calendar-controls\">\n        <button mat-icon-button type=\"button\"\n          class=\"mtx-calendar-previous-button\"\n          [class.disabled]=\"!_previousEnabled()\"\n          [attr.aria-disabled]=\"!_previousEnabled()\"\n          [attr.aria-label]=\"_prevButtonLabel\"\n          (click)=\"_previousClicked()\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\" />\n          </svg>\n        </button>\n        <div class=\"mtx-calendar-period-button\"\n          [@slideCalendar]=\"_calendarState\"\n          (@slideCalendar.done)=\"_calendarStateDone()\">\n          <strong>{{ _yearPeriodText }}</strong>\n        </div>\n        <button mat-icon-button type=\"button\"\n          class=\"mtx-calendar-next-button\"\n          [class.disabled]=\"!_nextEnabled()\"\n          [attr.aria-disabled]=\"!_nextEnabled()\"\n          [attr.aria-label]=\"_nextButtonLabel\"\n          (click)=\"_nextClicked()\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  }\n\n  @switch (currentView) {\n    @case ('month') {\n      <mtx-month-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_dateSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-month-view>\n    }\n    @case ('year') {\n      <mtx-year-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_monthSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-year-view>\n    }\n    @case ('multi-year') {\n      <mtx-multi-year-view\n        (_userSelection)=\"_userSelected()\"\n        (selectedChange)=\"_yearSelected($event)\"\n        [activeDate]=\"_activeDate\"\n        [dateFilter]=\"_dateFilterForViews\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [selected]=\"selected!\"\n        [type]=\"type\">\n      </mtx-multi-year-view>\n    }\n    @default {\n      @if (timeInput) {\n        <mtx-time\n          (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_timeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          (ampmChange)=\"_ampmClicked($event)\"\n          [clockView]=\"_clockView\"\n          (clockViewChange)=\"_clockView = $event\"\n          [twelvehour]=\"twelvehour\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"_activeDate\"\n          [actionsPortal]=\"actionsPortal\"\n          [autoFocus]=\"timeInputAutoFocus\">\n        </mtx-time>\n      } @else {\n        <mtx-clock (_userSelection)=\"_userSelected()\"\n          (activeDateChange)=\"_onActiveDateChange($event)\"\n          (selectedChange)=\"_dialTimeSelected($event)\"\n          [AMPM]=\"_AMPM\"\n          [dateFilter]=\"dateFilter\"\n          [interval]=\"timeInterval\"\n          [maxDate]=\"maxDate\"\n          [minDate]=\"minDate\"\n          [selected]=\"_activeDate\"\n          [startView]=\"_clockView\"\n          [twelvehour]=\"twelvehour\">\n        </mtx-clock>\n      }\n    }\n  }\n</div>\n", styles: [".mtx-calendar{display:block;outline:none;font-family:var(--mtx-datetimepicker-calendar-text-font, var(--mat-app-body-medium-font));font-size:var(--mtx-datetimepicker-calendar-text-size, var(--mat-app-body-medium-size))}.mtx-calendar-header{box-sizing:border-box;padding:8px;border-bottom:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));background-color:var(--mtx-datetimepicker-calendar-header-background-color);color:var(--mtx-datetimepicker-calendar-header-text-color, var(--mat-app-on-surface-variant));--mdc-text-button-container-shape: var(--mtx-datetimepicker-selector-container-shape, var(--mat-app-corner-small))}.mtx-calendar-header .mtx-calendar-header-year,.mtx-calendar-header .mtx-calendar-header-date,.mtx-calendar-header .mtx-calendar-header-hours,.mtx-calendar-header .mtx-calendar-header-minutes,.mtx-calendar-header .mtx-calendar-header-ampm{height:auto;min-width:auto;padding:0 4px;text-align:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;white-space:normal;word-break:break-word}.mtx-calendar-header .mtx-calendar-header-year .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-date .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-hours .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-minutes .mat-mdc-button-touch-target,.mtx-calendar-header .mtx-calendar-header-ampm .mat-mdc-button-touch-target{height:100%}.mtx-calendar-header .mtx-calendar-header-year{line-height:24px}.mtx-calendar-header-date-time{font-size:24px;line-height:36px}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-flex}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{opacity:1}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px;font-size:12px}[mode=landscape] .mtx-calendar{display:flex}[mode=landscape] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=landscape] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[mode=landscape] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=landscape] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=landscape] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=landscape] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=landscape] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=landscape] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=landscape] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}@media all and (orientation: landscape){[mode=auto] .mtx-calendar{display:flex}[mode=auto] .mtx-calendar .mtx-calendar-header{width:144px;min-width:144px;padding:16px 8px;border-bottom-width:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=auto] .mtx-calendar .mtx-calendar-header{border-top-left-radius:0;border-bottom-left-radius:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-top-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[mode=auto] .mtx-calendar .mtx-calendar-header-year+.mtx-calendar-header-date-time,[mode=auto] .mtx-calendar .mtx-calendar-header-date+.mtx-calendar-header-time{margin-top:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-date-time{font-size:28px}[mode=auto] .mtx-calendar .mtx-calendar-header-time{display:flex;flex-direction:column}[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-hours,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-minutes,[mode=auto] .mtx-calendar .mtx-calendar-header-time .mtx-calendar-header-ampm{width:40px;text-align:center}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm-container{flex-direction:row;font-size:20px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm{padding:4px}[mode=auto] .mtx-calendar .mtx-calendar-header-ampm+.mtx-calendar-header-ampm{margin:0 8px}[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar .mtx-calendar-header{border-bottom-left-radius:0;border-bottom-right-radius:0}[mode=auto] .mtx-datetimepicker-actions:before{position:absolute;top:0;left:0;box-sizing:border-box;width:144px;height:100%;content:\"\";border-right:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));background-color:var(--mtx-datetimepicker-calendar-header-background-color);border-bottom-left-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}[dir=rtl] [mode=auto] .mtx-datetimepicker-actions:before{left:auto;right:0;border-right-width:0;border-left:1px solid var(--mtx-datetimepicker-calendar-header-divider-color, var(--mat-app-outline-variant));border-bottom-left-radius:0;border-bottom-right-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large))}}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;align-items:center;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box;font-size:var(--mtx-datetimepicker-calendar-period-button-text-size, var(--mat-app-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-period-button-text-weight, var(--mat-app-title-small-weight))}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none;color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0;color:var(--mtx-datetimepicker-calendar-table-header-text-color, var(--mat-app-on-surface));font-size:var(--mtx-datetimepicker-calendar-table-header-text-size);font-weight:var(--mtx-datetimepicker-calendar-table-header-text-weight)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MtxDatetimepickerIntl }, { type: i0.NgZone }, { type: i1.DatetimeAdapter, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -2229,7 +2229,7 @@ class MtxDatetimepickerContent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxDatetimepickerContent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: MtxDatetimepickerContent, isStandalone: true, selector: "mtx-datetimepicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mtx-datetimepicker-content-touch": "datetimepicker?.touchUi", "attr.mode": "datetimepicker.mode", "@transformPanel": "_animationState" }, classAttribute: "mtx-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MtxCalendar, descendants: true, static: true }], ngImport: i0, template: "<div cdkTrapFocus\n     role=\"dialog\"\n     [attr.aria-modal]=\"true\"\n     [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n     [attr.mode]=\"datetimepicker.mode\"\n     class=\"mtx-datetimepicker-content-container\"\n     [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n     [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n     [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [class]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [timeInput]=\"datetimepicker.timeInput\"\n                [actionsPortal]=\"_actionsPortal\"\n                [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (viewChanged)=\"_viewChanged($event)\"\n                (_userSelection)=\"_handleUserSelection()\"\n                [@fadeInCalendar]=\"'enter'\">\n  </mtx-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-app-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow);color:var(--mtx-datetimepicker-container-text-color, var(--mat-app-on-surface))}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:490px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:432px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:404px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:432px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:404px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow);border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-app-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"], dependencies: [{ kind: "component", type: MtxCalendar, selector: "mtx-calendar", inputs: ["multiYearSelector", "twelvehour", "startView", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "headerComponent", "actionsPortal", "type", "startAt", "timeInput", "timeInputAutoFocus", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "viewChanged", "_userSelection"], exportAs: ["mtxCalendar"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: MtxDatetimepickerContent, isStandalone: true, selector: "mtx-datetimepicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mtx-datetimepicker-content-touch": "datetimepicker?.touchUi", "attr.mode": "datetimepicker.mode", "@transformPanel": "_animationState" }, classAttribute: "mtx-datetimepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MtxCalendar, descendants: true, static: true }], ngImport: i0, template: "<div cdkTrapFocus\n     role=\"dialog\"\n     [attr.aria-modal]=\"true\"\n     [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n     [attr.mode]=\"datetimepicker.mode\"\n     class=\"mtx-datetimepicker-content-container\"\n     [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n     [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n     [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [class]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [timeInput]=\"datetimepicker.timeInput\"\n                [actionsPortal]=\"_actionsPortal\"\n                [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (viewChanged)=\"_viewChanged($event)\"\n                (_userSelection)=\"_handleUserSelection()\"\n                [@fadeInCalendar]=\"'enter'\">\n  </mtx-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-app-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow);color:var(--mtx-datetimepicker-container-text-color, var(--mat-app-on-surface))}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:494px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow);border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-app-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"], dependencies: [{ kind: "component", type: MtxCalendar, selector: "mtx-calendar", inputs: ["multiYearSelector", "twelvehour", "startView", "timeInterval", "dateFilter", "preventSameDateTimeSelection", "headerComponent", "actionsPortal", "type", "startAt", "timeInput", "timeInputAutoFocus", "selected", "minDate", "maxDate"], outputs: ["selectedChange", "viewChanged", "_userSelection"], exportAs: ["mtxCalendar"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
             mtxDatetimepickerAnimations.transformPanel,
             mtxDatetimepickerAnimations.fadeInCalendar,
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -2246,7 +2246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     }, animations: [
                         mtxDatetimepickerAnimations.transformPanel,
                         mtxDatetimepickerAnimations.fadeInCalendar,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MtxCalendar, CdkPortalOutlet], template: "<div cdkTrapFocus\n     role=\"dialog\"\n     [attr.aria-modal]=\"true\"\n     [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n     [attr.mode]=\"datetimepicker.mode\"\n     class=\"mtx-datetimepicker-content-container\"\n     [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n     [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n     [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [class]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [timeInput]=\"datetimepicker.timeInput\"\n                [actionsPortal]=\"_actionsPortal\"\n                [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (viewChanged)=\"_viewChanged($event)\"\n                (_userSelection)=\"_handleUserSelection()\"\n                [@fadeInCalendar]=\"'enter'\">\n  </mtx-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-app-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow);color:var(--mtx-datetimepicker-container-text-color, var(--mat-app-on-surface))}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:490px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:432px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:404px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:432px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:404px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow);border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-app-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MtxCalendar, CdkPortalOutlet], template: "<div cdkTrapFocus\n     role=\"dialog\"\n     [attr.aria-modal]=\"true\"\n     [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n     [attr.mode]=\"datetimepicker.mode\"\n     class=\"mtx-datetimepicker-content-container\"\n     [class.mtx-datetimepicker-content-container-with-custom-header]=\"datetimepicker.calendarHeaderComponent\"\n     [class.mtx-datetimepicker-content-container-with-actions]=\"_actionsPortal\"\n     [class.mtx-datetimepicker-content-container-with-time-input]=\"datetimepicker.timeInput\">\n  <mtx-calendar [id]=\"datetimepicker.id\"\n                [class]=\"datetimepicker.panelClass\"\n                [attr.mode]=\"datetimepicker.mode\"\n                [type]=\"datetimepicker.type\"\n                [startAt]=\"datetimepicker.startAt\"\n                [startView]=\"datetimepicker.startView\"\n                [maxDate]=\"datetimepicker._maxDate\"\n                [minDate]=\"datetimepicker._minDate\"\n                [dateFilter]=\"datetimepicker._dateFilter\"\n                [multiYearSelector]=\"datetimepicker.multiYearSelector\"\n                [preventSameDateTimeSelection]=\"datetimepicker.preventSameDateTimeSelection\"\n                [headerComponent]=\"datetimepicker.calendarHeaderComponent\"\n                [timeInterval]=\"datetimepicker.timeInterval\"\n                [twelvehour]=\"datetimepicker.twelvehour\"\n                [selected]=\"datetimepicker._selected\"\n                [timeInput]=\"datetimepicker.timeInput\"\n                [actionsPortal]=\"_actionsPortal\"\n                [timeInputAutoFocus]=\"datetimepicker.timeInputAutoFocus\"\n                (selectedChange)=\"datetimepicker._select($event)\"\n                (viewChanged)=\"datetimepicker._viewChanged($event)\"\n                (viewChanged)=\"_viewChanged($event)\"\n                (_userSelection)=\"_handleUserSelection()\"\n                [@fadeInCalendar]=\"'enter'\">\n  </mtx-calendar>\n\n  <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n</div>\n", styles: [".mtx-datetimepicker-content{display:block;border-radius:var(--mtx-datetimepicker-container-shape, var(--mat-app-corner-large));background-color:var(--mtx-datetimepicker-container-background-color, var(--mat-app-surface-container-high));box-shadow:var(--mtx-datetimepicker-container-elevation-shadow);color:var(--mtx-datetimepicker-container-text-color, var(--mat-app-on-surface))}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:424px}.mtx-datetimepicker-content .mtx-calendar.mtx-calendar-with-time-input{height:494px}.mtx-datetimepicker-content .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:442px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=landscape] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=landscape] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}@media all and (orientation: landscape){.mtx-datetimepicker-content[mode=auto] .mtx-calendar{width:440px;height:328px}.mtx-datetimepicker-content[mode=auto] .mtx-calendar.mtx-calendar-with-time-input{height:416px}.mtx-datetimepicker-content[mode=auto] .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{height:356px}}.mtx-datetimepicker-content-touch{display:block;max-height:84vh;box-shadow:var(--mtx-datetimepicker-container-touch-elevation-shadow);border-radius:var(--mtx-datetimepicker-container-touch-shape, var(--mat-app-corner-extra-large));position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-clock{width:50vh;max-width:80%;margin:12px auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape].mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto].mtx-datetimepicker-content-container-with-time-input,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-actions,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait].mtx-datetimepicker-content-container-with-time-input{height:124vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _calendar: [{
                 type: ViewChild,
                 args: [MtxCalendar, { static: true }]