@ng-matero/extensions 17.1.3 → 17.1.4

package/esm2022/datetimepicker/month-view.mjs

@@ -117,10 +117,10 @@ export class MtxMonthView {
     calendarState(direction) {
         this._calendarState = direction;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxMonthView, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: MtxMonthView, isStandalone: true, selector: "mtx-month-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection" }, exportAs: ["mtxMonthView"], ngImport: i0, template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      @for (day of _weekdays; track day) {\n        <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n      }\n    </tr>\n  </thead>\n  <tbody mtx-calendar-body\n    (@slideCalendar.done)=\"_calendarStateDone()\"\n    [@slideCalendar]=\"_calendarState\"\n    [rows]=\"_weeks\"\n    [todayValue]=\"_todayDate!\"\n    [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n    [selectedValue]=\"_selectedDate!\"\n    (selectedValueChange)=\"_dateSelected($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxMonthView, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MtxMonthView, isStandalone: true, selector: "mtx-month-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection" }, exportAs: ["mtxMonthView"], ngImport: i0, template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      @for (day of _weekdays; track day) {\n        <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n      }\n    </tr>\n  </thead>\n  <tbody mtx-calendar-body\n    (@slideCalendar.done)=\"_calendarStateDone()\"\n    [@slideCalendar]=\"_calendarState\"\n    [rows]=\"_weeks\"\n    [todayValue]=\"_todayDate!\"\n    [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n    [selectedValue]=\"_selectedDate!\"\n    (selectedValueChange)=\"_dateSelected($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxMonthView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxMonthView, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-month-view', exportAs: 'mtxMonthView', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MtxCalendarBody], template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\">\n    <tr>\n      @for (day of _weekdays; track day) {\n        <th [attr.aria-label]=\"day.long\">{{day.narrow}}</th>\n      }\n    </tr>\n  </thead>\n  <tbody mtx-calendar-body\n    (@slideCalendar.done)=\"_calendarStateDone()\"\n    [@slideCalendar]=\"_calendarState\"\n    [rows]=\"_weeks\"\n    [todayValue]=\"_todayDate!\"\n    [activeCell]=\"_adapter.getDate(activeDate) - 1\"\n    [selectedValue]=\"_selectedDate!\"\n    (selectedValueChange)=\"_dateSelected($event)\"></tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: i1.DatetimeAdapter, decorators: [{

package/esm2022/datetimepicker/multi-year-view.mjs

@@ -145,10 +145,10 @@ export class MtxMultiYearView {
     _getValidDateOrNull(obj) {
         return this._adapter.isDateInstance(obj) && this._adapter.isValid(obj) ? obj : null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxMultiYearView, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: MtxMultiYearView, isStandalone: true, selector: "mtx-multi-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection" }, exportAs: ["mtxMultiYearView"], ngImport: i0, template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [todayValue]=\"_todayYear\"\n         [rows]=\"_years\"\n         [numCols]=\"4\"\n         [activeCell]=\"_getActiveCell()\"\n         [allowDisabledSelection]=\"true\"\n         [selectedValue]=\"_selectedYear!\"\n         (selectedValueChange)=\"_yearSelected($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxMultiYearView, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: MtxMultiYearView, isStandalone: true, selector: "mtx-multi-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection" }, exportAs: ["mtxMultiYearView"], ngImport: i0, template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [todayValue]=\"_todayYear\"\n         [rows]=\"_years\"\n         [numCols]=\"4\"\n         [activeCell]=\"_getActiveCell()\"\n         [allowDisabledSelection]=\"true\"\n         [selectedValue]=\"_selectedYear!\"\n         (selectedValueChange)=\"_yearSelected($event)\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxMultiYearView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxMultiYearView, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-multi-year-view', exportAs: 'mtxMultiYearView', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MtxCalendarBody], template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [todayValue]=\"_todayYear\"\n         [rows]=\"_years\"\n         [numCols]=\"4\"\n         [activeCell]=\"_getActiveCell()\"\n         [allowDisabledSelection]=\"true\"\n         [selectedValue]=\"_selectedYear!\"\n         (selectedValueChange)=\"_yearSelected($event)\"></tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: i1.DatetimeAdapter, decorators: [{

package/esm2022/datetimepicker/time.mjs

@@ -163,10 +163,10 @@ export class MtxTimeInput {
         this.inputElement.removeEventListener('keypress', this.keyPressListener);
         this.inputElement.removeEventListener('input', this.inputEventListener);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxTimeInput, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: MtxTimeInput, isStandalone: true, selector: "input.mtx-time-input", inputs: { timeInterval: "timeInterval", timeMin: "timeMin", timeMax: "timeMax", timeValue: "timeValue" }, outputs: { timeValueChanged: "timeValueChanged" }, host: { listeners: { "blur": "blur($event)", "focus": "focus($event)" } }, exportAs: ["mtxTimeInput"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxTimeInput, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: MtxTimeInput, isStandalone: true, selector: "input.mtx-time-input", inputs: { timeInterval: "timeInterval", timeMin: "timeMin", timeMax: "timeMax", timeValue: "timeValue" }, outputs: { timeValueChanged: "timeValueChanged" }, host: { listeners: { "blur": "blur($event)", "focus": "focus($event)" } }, exportAs: ["mtxTimeInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxTimeInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxTimeInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input.mtx-time-input',
@@ -398,14 +398,14 @@ export class MtxTime {
             this.datetimepickerIntlChangesSubscription.unsubscribe();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxTime, deps: [{ token: i1.DatetimeAdapter }, { token: i0.ChangeDetectorRef }, { token: i2.MtxDatetimepickerIntl }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: MtxTime, isStandalone: true, selector: "mtx-time", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { classAttribute: "mtx-time" }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: MtxTimeInput }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: MtxTimeInput }], exportAs: ["mtxTime"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mtx-time-input-wrapper\">\n  <div class=\"mtx-time-input-inner\">\n    <input class=\"mtx-time-input\"\n      [class.mtx-time-input-active]=\"clockView === 'hour'\"\n      [class.mtx-time-input-warning]=\"!hourInput.valid\"\n      #hourInput=\"mtxTimeInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      [timeMin]=\"twelvehour ? 1 : 0\"\n      [timeMax]=\"twelvehour ? 12 : 23\"\n      [timeValue]=\"hour\"\n      (timeValueChanged)=\"handleHourInputChange($event)\"\n      (focus)=\"handleFocus('hour')\" />\n\n    <div class=\"mtx-time-seperator\">:</div>\n\n    <input class=\"mtx-time-input\"\n      [class.mtx-time-input-active]=\"clockView === 'minute'\"\n      [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n      #minuteInput=\"mtxTimeInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      [timeMin]=\"0\"\n      [timeMax]=\"59\"\n      [timeValue]=\"minute\"\n      (timeValueChanged)=\"handleMinuteInputChange($event)\"\n      [timeInterval]=\"interval\"\n      (focus)=\"handleFocus('minute')\" />\n\n    @if (twelvehour) {\n      <div class=\"mtx-time-ampm\">\n        <button mat-button type=\"button\" class=\"mtx-time-am\"\n          [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n          (keydown)=\"$event.stopPropagation()\"\n        (click)=\"ampmChange.emit('AM')\">AM</button>\n        <button mat-button type=\"button\" class=\"mtx-time-pm\"\n          [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n          (keydown)=\"$event.stopPropagation()\"\n        (click)=\"ampmChange.emit('PM')\">PM</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mtx-clock (selectedChange)=\"_timeSelected($event)\"\n  (activeDateChange)=\"_onActiveDateChange($event)\"\n  [AMPM]=\"AMPM\"\n  [dateFilter]=\"dateFilter\"\n  [interval]=\"interval\"\n  [maxDate]=\"maxDate\"\n  [minDate]=\"minDate\"\n  [selected]=\"selected\"\n  [startView]=\"clockView\"\n  [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n<div class=\"mtx-time-button-wrapper\">\n  <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"handleCancel()\">\n    {{ _datetimepickerIntl.cancelLabel }}\n  </button>\n  <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"handleOk()\"\n    [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n    {{ _datetimepickerIntl.okLabel }}\n  </button>\n</div>\n", styles: [".mtx-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;appearance:none;outline:none;background-color:var(--mtx-datetimepicker-time-input-background-color);color:var(--mtx-datetimepicker-time-input-text-color)}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color);color:var(--mtx-datetimepicker-time-input-active-state-text-color)}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-border-color);background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color)}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color)}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-border-color)}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color);border-color:var(--mtx-datetimepicker-time-ampm-border-color);flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color);background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color)}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-radius:8px 8px 0 0}.mtx-time-ampm .mtx-time-pm{border-radius:0 0 8px 8px;border-top:none}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ 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: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }, { kind: "directive", type: MtxTimeInput, selector: "input.mtx-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["mtxTimeInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxTime, deps: [{ token: i1.DatetimeAdapter }, { token: i0.ChangeDetectorRef }, { token: i2.MtxDatetimepickerIntl }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MtxTime, isStandalone: true, selector: "mtx-time", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: ["twelvehour", "twelvehour", booleanAttribute], AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { classAttribute: "mtx-time" }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: MtxTimeInput }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: MtxTimeInput }], exportAs: ["mtxTime"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mtx-time-input-wrapper\">\n  <div class=\"mtx-time-input-inner\">\n    <input class=\"mtx-time-input\"\n      [class.mtx-time-input-active]=\"clockView === 'hour'\"\n      [class.mtx-time-input-warning]=\"!hourInput.valid\"\n      #hourInput=\"mtxTimeInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      [timeMin]=\"twelvehour ? 1 : 0\"\n      [timeMax]=\"twelvehour ? 12 : 23\"\n      [timeValue]=\"hour\"\n      (timeValueChanged)=\"handleHourInputChange($event)\"\n      (focus)=\"handleFocus('hour')\" />\n\n    <div class=\"mtx-time-seperator\">:</div>\n\n    <input class=\"mtx-time-input\"\n      [class.mtx-time-input-active]=\"clockView === 'minute'\"\n      [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n      #minuteInput=\"mtxTimeInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      [timeMin]=\"0\"\n      [timeMax]=\"59\"\n      [timeValue]=\"minute\"\n      (timeValueChanged)=\"handleMinuteInputChange($event)\"\n      [timeInterval]=\"interval\"\n      (focus)=\"handleFocus('minute')\" />\n\n    @if (twelvehour) {\n      <div class=\"mtx-time-ampm\">\n        <button mat-button type=\"button\" class=\"mtx-time-am\"\n          [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n          (keydown)=\"$event.stopPropagation()\"\n        (click)=\"ampmChange.emit('AM')\">AM</button>\n        <button mat-button type=\"button\" class=\"mtx-time-pm\"\n          [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n          (keydown)=\"$event.stopPropagation()\"\n        (click)=\"ampmChange.emit('PM')\">PM</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mtx-clock (selectedChange)=\"_timeSelected($event)\"\n  (activeDateChange)=\"_onActiveDateChange($event)\"\n  [AMPM]=\"AMPM\"\n  [dateFilter]=\"dateFilter\"\n  [interval]=\"interval\"\n  [maxDate]=\"maxDate\"\n  [minDate]=\"minDate\"\n  [selected]=\"selected\"\n  [startView]=\"clockView\"\n  [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n<div class=\"mtx-time-button-wrapper\">\n  <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"handleCancel()\">\n    {{ _datetimepickerIntl.cancelLabel }}\n  </button>\n  <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"handleOk()\"\n    [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n    {{ _datetimepickerIntl.okLabel }}\n  </button>\n</div>\n", styles: [".mtx-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border-radius:4px;border:2px solid transparent;appearance:none;outline:none;background-color:var(--mtx-datetimepicker-time-input-background-color);color:var(--mtx-datetimepicker-time-input-text-color)}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color);color:var(--mtx-datetimepicker-time-input-active-state-text-color)}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-border-color);background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color)}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color)}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-border-color)}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color);border-color:var(--mtx-datetimepicker-time-ampm-border-color);flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color);background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color)}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-radius:4px 4px 0 0}.mtx-time-ampm .mtx-time-pm{border-radius:0 0 4px 4px;border-top:none}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ 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: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }, { kind: "directive", type: MtxTimeInput, selector: "input.mtx-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["mtxTimeInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxTime, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxTime, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-time', exportAs: 'mtxTime', host: {
                         class: 'mtx-time',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButton, MtxClock, MtxTimeInput], template: "<div class=\"mtx-time-input-wrapper\">\n  <div class=\"mtx-time-input-inner\">\n    <input class=\"mtx-time-input\"\n      [class.mtx-time-input-active]=\"clockView === 'hour'\"\n      [class.mtx-time-input-warning]=\"!hourInput.valid\"\n      #hourInput=\"mtxTimeInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      [timeMin]=\"twelvehour ? 1 : 0\"\n      [timeMax]=\"twelvehour ? 12 : 23\"\n      [timeValue]=\"hour\"\n      (timeValueChanged)=\"handleHourInputChange($event)\"\n      (focus)=\"handleFocus('hour')\" />\n\n    <div class=\"mtx-time-seperator\">:</div>\n\n    <input class=\"mtx-time-input\"\n      [class.mtx-time-input-active]=\"clockView === 'minute'\"\n      [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n      #minuteInput=\"mtxTimeInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      [timeMin]=\"0\"\n      [timeMax]=\"59\"\n      [timeValue]=\"minute\"\n      (timeValueChanged)=\"handleMinuteInputChange($event)\"\n      [timeInterval]=\"interval\"\n      (focus)=\"handleFocus('minute')\" />\n\n    @if (twelvehour) {\n      <div class=\"mtx-time-ampm\">\n        <button mat-button type=\"button\" class=\"mtx-time-am\"\n          [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n          (keydown)=\"$event.stopPropagation()\"\n        (click)=\"ampmChange.emit('AM')\">AM</button>\n        <button mat-button type=\"button\" class=\"mtx-time-pm\"\n          [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n          (keydown)=\"$event.stopPropagation()\"\n        (click)=\"ampmChange.emit('PM')\">PM</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mtx-clock (selectedChange)=\"_timeSelected($event)\"\n  (activeDateChange)=\"_onActiveDateChange($event)\"\n  [AMPM]=\"AMPM\"\n  [dateFilter]=\"dateFilter\"\n  [interval]=\"interval\"\n  [maxDate]=\"maxDate\"\n  [minDate]=\"minDate\"\n  [selected]=\"selected\"\n  [startView]=\"clockView\"\n  [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n<div class=\"mtx-time-button-wrapper\">\n  <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"handleCancel()\">\n    {{ _datetimepickerIntl.cancelLabel }}\n  </button>\n  <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"handleOk()\"\n    [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n    {{ _datetimepickerIntl.okLabel }}\n  </button>\n</div>\n", styles: [".mtx-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;appearance:none;outline:none;background-color:var(--mtx-datetimepicker-time-input-background-color);color:var(--mtx-datetimepicker-time-input-text-color)}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color);color:var(--mtx-datetimepicker-time-input-active-state-text-color)}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-border-color);background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color)}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color)}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-border-color)}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color);border-color:var(--mtx-datetimepicker-time-ampm-border-color);flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color);background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color)}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-radius:8px 8px 0 0}.mtx-time-ampm .mtx-time-pm{border-radius:0 0 8px 8px;border-top:none}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButton, MtxClock, MtxTimeInput], template: "<div class=\"mtx-time-input-wrapper\">\n  <div class=\"mtx-time-input-inner\">\n    <input class=\"mtx-time-input\"\n      [class.mtx-time-input-active]=\"clockView === 'hour'\"\n      [class.mtx-time-input-warning]=\"!hourInput.valid\"\n      #hourInput=\"mtxTimeInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      [timeMin]=\"twelvehour ? 1 : 0\"\n      [timeMax]=\"twelvehour ? 12 : 23\"\n      [timeValue]=\"hour\"\n      (timeValueChanged)=\"handleHourInputChange($event)\"\n      (focus)=\"handleFocus('hour')\" />\n\n    <div class=\"mtx-time-seperator\">:</div>\n\n    <input class=\"mtx-time-input\"\n      [class.mtx-time-input-active]=\"clockView === 'minute'\"\n      [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n      #minuteInput=\"mtxTimeInput\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      [timeMin]=\"0\"\n      [timeMax]=\"59\"\n      [timeValue]=\"minute\"\n      (timeValueChanged)=\"handleMinuteInputChange($event)\"\n      [timeInterval]=\"interval\"\n      (focus)=\"handleFocus('minute')\" />\n\n    @if (twelvehour) {\n      <div class=\"mtx-time-ampm\">\n        <button mat-button type=\"button\" class=\"mtx-time-am\"\n          [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n          (keydown)=\"$event.stopPropagation()\"\n        (click)=\"ampmChange.emit('AM')\">AM</button>\n        <button mat-button type=\"button\" class=\"mtx-time-pm\"\n          [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n          (keydown)=\"$event.stopPropagation()\"\n        (click)=\"ampmChange.emit('PM')\">PM</button>\n      </div>\n    }\n  </div>\n</div>\n\n<mtx-clock (selectedChange)=\"_timeSelected($event)\"\n  (activeDateChange)=\"_onActiveDateChange($event)\"\n  [AMPM]=\"AMPM\"\n  [dateFilter]=\"dateFilter\"\n  [interval]=\"interval\"\n  [maxDate]=\"maxDate\"\n  [minDate]=\"minDate\"\n  [selected]=\"selected\"\n  [startView]=\"clockView\"\n  [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n<div class=\"mtx-time-button-wrapper\">\n  <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"handleCancel()\">\n    {{ _datetimepickerIntl.cancelLabel }}\n  </button>\n  <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"handleOk()\"\n    [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n    {{ _datetimepickerIntl.okLabel }}\n  </button>\n</div>\n", styles: [".mtx-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border-radius:4px;border:2px solid transparent;appearance:none;outline:none;background-color:var(--mtx-datetimepicker-time-input-background-color);color:var(--mtx-datetimepicker-time-input-text-color)}.mtx-time-input.mtx-time-input-active{background-color:var(--mtx-datetimepicker-time-input-active-state-background-color);color:var(--mtx-datetimepicker-time-input-active-state-text-color)}.mtx-time-input.mtx-time-input-active:focus{border-color:var(--mtx-datetimepicker-time-input-focus-state-border-color);background-color:var(--mtx-datetimepicker-time-input-focus-state-background-color)}.mtx-time-input.mtx-time-input-active:focus::placeholder{color:var(--mtx-datetimepicker-time-input-focus-state-placeholder-text-color)}.mtx-time-input.mtx-time-input-warning{border-color:var(--mtx-datetimepicker-time-input-warn-state-border-color)}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-text-button-label-text-weight: 400;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-text-color);border-color:var(--mtx-datetimepicker-time-ampm-border-color);flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid}.mtx-time-ampm .mtx-time-am.mtx-time-ampm-active,.mtx-time-ampm .mtx-time-pm.mtx-time-ampm-active{--mdc-text-button-label-text-weight: 500;--mdc-text-button-label-text-color: var(--mtx-datetimepicker-time-ampm-selected-state-text-color);background-color:var(--mtx-datetimepicker-time-ampm-selected-state-background-color)}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-radius:4px 4px 0 0}.mtx-time-ampm .mtx-time-pm{border-radius:0 0 4px 4px;border-top:none}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
         }], ctorParameters: () => [{ type: i1.DatetimeAdapter }, { type: i0.ChangeDetectorRef }, { type: i2.MtxDatetimepickerIntl }], propDecorators: { selectedChange: [{
                 type: Output
             }], activeDateChange: [{

package/esm2022/datetimepicker/year-view.mjs

@@ -108,10 +108,10 @@ export class MtxYearView {
         }
         return false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxYearView, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: MtxYearView, isStandalone: true, selector: "mtx-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection" }, exportAs: ["mtxYearView"], ngImport: i0, template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [activeCell]=\"_adapter.getMonth(activeDate)\"\n         [selectedValue]=\"_selectedMonth!\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         [allowDisabledSelection]=\"true\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxYearView, deps: [{ token: i1.DatetimeAdapter, optional: true }, { token: MTX_DATETIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: MtxYearView, isStandalone: true, selector: "mtx-year-view", inputs: { type: "type", dateFilter: "dateFilter", activeDate: "activeDate", selected: "selected" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection" }, exportAs: ["mtxYearView"], ngImport: i0, template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [activeCell]=\"_adapter.getMonth(activeDate)\"\n         [selectedValue]=\"_selectedMonth!\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         [allowDisabledSelection]=\"true\"></tbody>\n</table>\n", dependencies: [{ kind: "component", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: ["label", "rows", "todayValue", "selectedValue", "labelMinRequiredCells", "numCols", "allowDisabledSelection", "activeCell"], outputs: ["selectedValueChange"], exportAs: ["mtxCalendarBody"] }], animations: [mtxDatetimepickerAnimations.slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxYearView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxYearView, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-year-view', exportAs: 'mtxYearView', animations: [mtxDatetimepickerAnimations.slideCalendar], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MtxCalendarBody], template: "<table class=\"mtx-calendar-table\" role=\"grid\">\n  <thead class=\"mtx-calendar-table-header\"></thead>\n  <tbody mtx-calendar-body\n         (@slideCalendar.done)=\"_calendarStateDone()\"\n         [@slideCalendar]=\"_calendarState\"\n         [label]=\"_yearLabel\"\n         [rows]=\"_months\"\n         [todayValue]=\"_todayMonth!\"\n         [labelMinRequiredCells]=\"2\"\n         [numCols]=\"4\"\n         [activeCell]=\"_adapter.getMonth(activeDate)\"\n         [selectedValue]=\"_selectedMonth!\"\n         (selectedValueChange)=\"_monthSelected($event)\"\n         [allowDisabledSelection]=\"true\"></tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: i1.DatetimeAdapter, decorators: [{

package/esm2022/dialog/dialog-container.mjs

@@ -20,10 +20,10 @@ export class MtxDialogContainer {
     _onClose() {
         this.dialogRef.close();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDialogContainer, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: MtxDialogContainer, isStandalone: true, selector: "mtx-dialog-container", host: { classAttribute: "mtx-dialog-container" }, exportAs: ["mtxDialogContainer"], ngImport: i0, template: "@if (data.title) {\n  <h1 class=\"mtx-dialog-title\">\n    <span>{{data.title | toObservable | async}}</span>\n    @if (data.showCloseIcon) {\n      <button mat-icon-button (click)=\"_onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n  </h1>\n}\n@if (data.description) {\n  <div class=\"mtx-dialog-content\">\n    <p>{{data.description | toObservable | async}}</p>\n  </div>\n}\n<div class=\"mtx-dialog-actions\">\n  @for (btn of data.buttons; track btn) {\n    @switch (btn.type) {\n      @case ('raised') {\n        @if (btn.focusInitial) {\n          <button mat-raised-button cdkFocusInitial\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        } @else {\n          <button mat-raised-button\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        }\n      }\n      @case ('stroked') {\n        @if (btn.focusInitial) {\n          <button mat-stroked-button cdkFocusInitial\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        } @else {\n          <button mat-stroked-button\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        }\n      }\n      @case ('flat') {\n        @if (btn.focusInitial) {\n          <button mat-flat-button cdkFocusInitial\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        } @else {\n          <button mat-flat-button\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        }\n      }\n      @default {\n        @if (btn.focusInitial) {\n          <button mat-button cdkFocusInitial\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        } @else {\n          <button mat-button\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        }\n      }\n    }\n  }\n</div>\n", styles: [".mtx-dialog-title{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;margin:0;line-height:48px;font-weight:500;font-size:20px}.mtx-dialog-title .mat-mdc-button-base{margin-right:-16px}[dir=rtl] .mtx-dialog-title .mat-mdc-button-base{margin-right:0;margin-left:-16px}.mtx-dialog-content{display:block;max-height:65vh;padding:0 24px;overflow:auto;-webkit-overflow-scrolling:touch}.mtx-dialog-content p{margin-top:0}.mtx-dialog-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:8px}.mtx-dialog-actions .mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-dialog-actions .mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDialogContainer, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MtxDialogContainer, isStandalone: true, selector: "mtx-dialog-container", host: { classAttribute: "mtx-dialog-container" }, exportAs: ["mtxDialogContainer"], ngImport: i0, template: "@if (data.title) {\n  <h1 class=\"mtx-dialog-title\">\n    <span>{{data.title | toObservable | async}}</span>\n    @if (data.showCloseIcon) {\n      <button mat-icon-button (click)=\"_onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n  </h1>\n}\n@if (data.description) {\n  <div class=\"mtx-dialog-content\">\n    <p>{{data.description | toObservable | async}}</p>\n  </div>\n}\n<div class=\"mtx-dialog-actions\">\n  @for (btn of data.buttons; track btn) {\n    @switch (btn.type) {\n      @case ('raised') {\n        @if (btn.focusInitial) {\n          <button mat-raised-button cdkFocusInitial\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        } @else {\n          <button mat-raised-button\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        }\n      }\n      @case ('stroked') {\n        @if (btn.focusInitial) {\n          <button mat-stroked-button cdkFocusInitial\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        } @else {\n          <button mat-stroked-button\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        }\n      }\n      @case ('flat') {\n        @if (btn.focusInitial) {\n          <button mat-flat-button cdkFocusInitial\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        } @else {\n          <button mat-flat-button\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        }\n      }\n      @default {\n        @if (btn.focusInitial) {\n          <button mat-button cdkFocusInitial\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        } @else {\n          <button mat-button\n            [color]=\"btn.color\" [ngClass]=\"btn.class!\" (click)=\"_onClick(btn.onClick!)\">\n            {{btn.text | toObservable | async}}\n          </button>\n        }\n      }\n    }\n  }\n</div>\n", styles: [".mtx-dialog-title{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;margin:0;line-height:48px;font-weight:500;font-size:20px}.mtx-dialog-title .mat-mdc-button-base{margin-right:-16px}[dir=rtl] .mtx-dialog-title .mat-mdc-button-base{margin-right:0;margin-left:-16px}.mtx-dialog-content{display:block;max-height:65vh;padding:0 24px;overflow:auto;-webkit-overflow-scrolling:touch}.mtx-dialog-content p{margin-top:0}.mtx-dialog-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:8px}.mtx-dialog-actions .mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-dialog-actions .mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDialogContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDialogContainer, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-dialog-container', exportAs: 'mtxDialogContainer', host: {
                         class: 'mtx-dialog-container',

package/esm2022/dialog/dialog-module.mjs

@@ -8,21 +8,21 @@ import { MtxDialogContainer } from './dialog-container';
 import { MtxDialog } from './dialog';
 import * as i0 from "@angular/core";
 export class MtxDialogModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: MtxDialogModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxDialogModule, imports: [CommonModule,
             MatDialogModule,
             MatButtonModule,
             MatIconModule,
             MtxPipesModule,
             MtxDialogContainer], exports: [MtxDialogContainer] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDialogModule, providers: [MtxDialog], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDialogModule, providers: [MtxDialog], imports: [CommonModule,
             MatDialogModule,
             MatButtonModule,
             MatIconModule,
             MtxPipesModule,
             MtxDialogContainer] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/dialog/dialog.mjs

@@ -65,10 +65,10 @@ export class MtxDialog {
             ],
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDialog, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDialog, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDialog, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDialog, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDialog, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.MatDialog }] });

package/esm2022/drawer/drawer-container.mjs

@@ -224,10 +224,10 @@ export class MtxDrawerContainer extends BasePortalOutlet {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDrawerContainer, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusTrapFactory }, { token: i1.InteractivityChecker }, { token: i0.NgZone }, { token: i2.BreakpointObserver }, { token: DOCUMENT, optional: true }, { token: i3.MtxDrawerConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: MtxDrawerContainer, isStandalone: true, selector: "mtx-drawer-container", host: { attributes: { "tabindex": "-1", "role": "dialog", "aria-modal": "true" }, listeners: { "@state.start": "_onAnimationStart($event)", "@state.done": "_onAnimationDone($event)" }, properties: { "class": "_drawerPosition", "attr.aria-label": "drawerConfig?.ariaLabel", "@state": "_animationState" }, classAttribute: "mtx-drawer-container" }, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mtx-drawer-content-wrapper\" [style]=\"_getDrawerSize()\">\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [".mtx-drawer-container{display:block;outline:0;box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;background-color:var(--mtx-drawer-container-background-color);color:var(--mtx-drawer-container-text-color)}.cdk-high-contrast-active .mtx-drawer-container{outline:1px solid}.mtx-drawer-content-wrapper{box-sizing:border-box;padding:8px 16px;overflow:auto}.mtx-drawer-right{transform:translate(100%);border-top-left-radius:var(--mtx-drawer-container-shape);border-bottom-left-radius:var(--mtx-drawer-container-shape)}.mtx-drawer-left{transform:translate(-100%);border-top-right-radius:var(--mtx-drawer-container-shape);border-bottom-right-radius:var(--mtx-drawer-container-shape)}.mtx-drawer-bottom{transform:translateY(100%);border-top-left-radius:var(--mtx-drawer-container-shape);border-top-right-radius:var(--mtx-drawer-container-shape)}.mtx-drawer-top{transform:translateY(-100%);border-bottom-left-radius:var(--mtx-drawer-container-shape);border-bottom-right-radius:var(--mtx-drawer-container-shape)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [mtxDrawerAnimations.drawerState], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDrawerContainer, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusTrapFactory }, { token: i1.InteractivityChecker }, { token: i0.NgZone }, { token: i2.BreakpointObserver }, { token: DOCUMENT, optional: true }, { token: i3.MtxDrawerConfig }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: MtxDrawerContainer, isStandalone: true, selector: "mtx-drawer-container", host: { attributes: { "tabindex": "-1", "role": "dialog", "aria-modal": "true" }, listeners: { "@state.start": "_onAnimationStart($event)", "@state.done": "_onAnimationDone($event)" }, properties: { "class": "_drawerPosition", "attr.aria-label": "drawerConfig?.ariaLabel", "@state": "_animationState" }, classAttribute: "mtx-drawer-container" }, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mtx-drawer-content-wrapper\" [style]=\"_getDrawerSize()\">\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n", styles: [".mtx-drawer-container{display:block;outline:0;box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;background-color:var(--mtx-drawer-container-background-color);color:var(--mtx-drawer-container-text-color)}.cdk-high-contrast-active .mtx-drawer-container{outline:1px solid}.mtx-drawer-content-wrapper{box-sizing:border-box;padding:8px 16px;overflow:auto}.mtx-drawer-right{transform:translate(100%);border-top-left-radius:var(--mtx-drawer-container-shape);border-bottom-left-radius:var(--mtx-drawer-container-shape)}.mtx-drawer-left{transform:translate(-100%);border-top-right-radius:var(--mtx-drawer-container-shape);border-bottom-right-radius:var(--mtx-drawer-container-shape)}.mtx-drawer-bottom{transform:translateY(100%);border-top-left-radius:var(--mtx-drawer-container-shape);border-top-right-radius:var(--mtx-drawer-container-shape)}.mtx-drawer-top{transform:translateY(-100%);border-bottom-left-radius:var(--mtx-drawer-container-shape);border-bottom-right-radius:var(--mtx-drawer-container-shape)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [mtxDrawerAnimations.drawerState], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDrawerContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDrawerContainer, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-drawer-container', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, animations: [mtxDrawerAnimations.drawerState], host: {
                         'class': 'mtx-drawer-container',

package/esm2022/drawer/drawer-module.mjs

@@ -6,11 +6,11 @@ import { MtxDrawer } from './drawer';
 import { MtxDrawerContainer } from './drawer-container';
 import * as i0 from "@angular/core";
 export class MtxDrawerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: MtxDrawerModule, imports: [OverlayModule, PortalModule, MatCommonModule, MtxDrawerContainer], exports: [MtxDrawerContainer, MatCommonModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDrawerModule, providers: [MtxDrawer], imports: [OverlayModule, PortalModule, MatCommonModule, MatCommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxDrawerModule, imports: [OverlayModule, PortalModule, MatCommonModule, MtxDrawerContainer], exports: [MtxDrawerContainer, MatCommonModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDrawerModule, providers: [MtxDrawer], imports: [OverlayModule, PortalModule, MatCommonModule, MatCommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDrawerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDrawerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [OverlayModule, PortalModule, MatCommonModule, MtxDrawerContainer],

package/esm2022/drawer/drawer.mjs

@@ -139,10 +139,10 @@ export class MtxDrawer {
         }
         return Injector.create({ parent: userInjector || this._injector, providers });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDrawer, deps: [{ token: i1.Overlay }, { token: i0.Injector }, { token: MtxDrawer, optional: true, skipSelf: true }, { token: MTX_DRAWER_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDrawer, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDrawer, deps: [{ token: i1.Overlay }, { token: i0.Injector }, { token: MtxDrawer, optional: true, skipSelf: true }, { token: MTX_DRAWER_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDrawer, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxDrawer, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.Injector }, { type: MtxDrawer, decorators: [{

package/esm2022/grid/cell.mjs

@@ -88,10 +88,10 @@ export class MtxGridCell {
             btn.click?.(rowData);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxGridCell, deps: [{ token: i1.MtxDialog }, { token: i2.MtxGridUtils }, { token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: MtxGridCell, isStandalone: true, selector: "mtx-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["mtxGridCell"], ngImport: i0, template: "@if (summary) {\n  <span\n    [title]=\"_getFormatterTooltip((data | cellSummary: colDef))\"\n    [innerHTML]=\"_getText((data | cellSummary: colDef))\">\n  </span>\n} @else {\n  <!-- Custom formatting -->\n  @if (colDef.formatter) {\n    <span\n      [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n      [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\n    </span>\n  } @else {\n    <!-- Default formatting -->\n    @switch (colDef.type) {\n      <!-- Buttons -->\n      @case ('button') {\n        @for (btn of colDef.buttons | cellActions: rowData: rowChangeRecord: rowChangeRecord?.currentValue; track btn) {\n          @if (!btn.iif || btn.iif(rowData)) {\n            @switch (btn.type) {\n              @case ('raised') {\n                <button mat-raised-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('stroked') {\n                <button mat-stroked-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('flat') {\n                <button mat-flat-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('icon') {\n                <button mat-icon-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @case ('fab') {\n                <button mat-fab [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @case ('mini-fab') {\n                <button mat-mini-fab [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @default {\n                <button mat-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n            }\n          }\n        }\n      }\n      <!-- Tag -->\n      @case ('tag') {\n        @if (colDef.tag && colDef.tag[_value]) {\n          <mat-chip-listbox>\n            <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_value].color]\">\n              {{colDef.tag[_value].text}}\n            </mat-chip>\n          </mat-chip-listbox>\n        } @else {\n          {{_value}}\n        }\n      }\n      <!-- Link -->\n      @case ('link') {\n        <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\n      }\n      <!-- Image -->\n      @case ('image') {\n        <img class=\"mtx-grid-img\" [src]=\"_value\">\n      }\n      <!-- Boolean -->\n      @case ('boolean') {\n        <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n      }\n      <!-- Number -->\n      @case ('number') {\n        <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Currency -->\n      @case ('currency') {\n        <span [title]=\"_getTooltip(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Percent -->\n      @case ('percent') {\n        <span [title]=\"_getTooltip(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Date -->\n      @case ('date') {\n        <span [title]=\"_getTooltip(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)\">\n          {{_getText(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Default -->\n      @default {\n        <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n      }\n    }\n  }\n}\n", styles: [".mtx-grid-img{display:inline-block;width:32px;border-radius:4px;vertical-align:middle}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }, { kind: "pipe", type: MtxGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: MtxGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: MtxGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: MtxGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: MtxGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCell, deps: [{ token: i1.MtxDialog }, { token: i2.MtxGridUtils }, { token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MtxGridCell, isStandalone: true, selector: "mtx-grid-cell", inputs: { rowData: "rowData", colDef: "colDef", data: "data", summary: "summary", placeholder: "placeholder" }, outputs: { rowDataChange: "rowDataChange" }, exportAs: ["mtxGridCell"], ngImport: i0, template: "@if (summary) {\n  <span\n    [title]=\"_getFormatterTooltip((data | cellSummary: colDef))\"\n    [innerHTML]=\"_getText((data | cellSummary: colDef))\">\n  </span>\n} @else {\n  <!-- Custom formatting -->\n  @if (colDef.formatter) {\n    <span\n      [title]=\"_getFormatterTooltip(colDef.formatter(rowData, colDef))\"\n      [innerHTML]=\"_getText(colDef.formatter(rowData, colDef))\">\n    </span>\n  } @else {\n    <!-- Default formatting -->\n    @switch (colDef.type) {\n      <!-- Buttons -->\n      @case ('button') {\n        @for (btn of colDef.buttons | cellActions: rowData: rowChangeRecord: rowChangeRecord?.currentValue; track btn) {\n          @if (!btn.iif || btn.iif(rowData)) {\n            @switch (btn.type) {\n              @case ('raised') {\n                <button mat-raised-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('stroked') {\n                <button mat-stroked-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('flat') {\n                <button mat-flat-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n              @case ('icon') {\n                <button mat-icon-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @case ('fab') {\n                <button mat-fab [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @case ('mini-fab') {\n                <button mat-mini-fab [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                </button>\n              }\n              @default {\n                <button mat-button [color]=\"btn.color || 'primary'\" type=\"button\"\n                  [ngClass]=\"['mtx-grid-action-button', btn.class || '']\"\n                  [disabled]=\"btn | cellActionDisable: rowData: rowChangeRecord: rowChangeRecord?.currentValue\"\n                  [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n                  [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n                  [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n                  [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n                  [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n                  [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n                  [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n                  [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n                  [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n                  [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n                  [matBadgeColor]=\"(btn | cellActionBadge).color\"\n                  [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n                  [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n                  [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n                  [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n                  [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n                  (click)=\"_onActionClick($event, btn, rowData)\">\n                  @if (btn.icon) {\n                    <mat-icon class=\"mtx-grid-icon\">{{btn.icon}}</mat-icon>\n                  }\n                  <span>{{btn.text | toObservable | async}}</span>\n                </button>\n              }\n            }\n          }\n        }\n      }\n      <!-- Tag -->\n      @case ('tag') {\n        @if (colDef.tag && colDef.tag[_value]) {\n          <mat-chip-listbox>\n            <mat-chip color=\"primary\" [ngClass]=\"['bg-' + colDef.tag[_value].color]\">\n              {{colDef.tag[_value].text}}\n            </mat-chip>\n          </mat-chip-listbox>\n        } @else {\n          {{_value}}\n        }\n      }\n      <!-- Link -->\n      @case ('link') {\n        <a [href]=\"_value\" target=\"_blank\">{{_value}}</a>\n      }\n      <!-- Image -->\n      @case ('image') {\n        <img class=\"mtx-grid-img\" [src]=\"_value\">\n      }\n      <!-- Boolean -->\n      @case ('boolean') {\n        <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n      }\n      <!-- Number -->\n      @case ('number') {\n        <span [title]=\"_getTooltip(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | number: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Currency -->\n      @case ('currency') {\n        <span [title]=\"_getTooltip(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | currency: colDef.typeParameter?.currencyCode: colDef.typeParameter?.display: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Percent -->\n      @case ('percent') {\n        <span [title]=\"_getTooltip(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)\">\n          {{_getText(_value | percent: colDef.typeParameter?.digitsInfo: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Date -->\n      @case ('date') {\n        <span [title]=\"_getTooltip(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)\">\n          {{_getText(_value | date: colDef.typeParameter?.format: colDef.typeParameter?.timezone: colDef.typeParameter?.locale)}}\n        </span>\n      }\n      <!-- Default -->\n      @default {\n        <span [title]=\"_getTooltip(_value)\">{{_getText(_value)}}</span>\n      }\n    }\n  }\n}\n", styles: [".mtx-grid-img{display:inline-block;width:32px;border-radius:4px;vertical-align:middle}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }, { kind: "pipe", type: MtxGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: MtxGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: MtxGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: MtxGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: MtxGridCellActionBadgePipe, name: "cellActionBadge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxGridCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridCell, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-grid-cell', exportAs: 'mtxGridCell', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         AsyncPipe,

package/esm2022/grid/column-menu.mjs

@@ -65,10 +65,10 @@ export class MtxGridColumnMenu {
             this.columnChange.emit(this.columns);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxGridColumnMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: MtxGridColumnMenu, isStandalone: true, selector: "mtx-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["mtxGridColumnMenu"], ngImport: i0, template: "@switch (buttonType) {\n  @case ('raised') {\n    <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('stroked') {\n    <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('flat') {\n    <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n    }\n  @case ('icon') {\n    <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n    </button>\n  }\n  @case ('fab') {\n    <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('mini-fab') {\n    <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @default {\n    <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n}\n\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\n  <div class=\"mtx-grid-column-menu-content\"\n    (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n    @if (showHeader) {\n      <div class=\"mtx-grid-column-menu-header\">\n        @if (headerTemplate) {\n          <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n        } @else {\n          {{headerText}}\n        }\n      </div>\n    }\n\n    <div class=\"mtx-grid-column-menu-body\">\n      @if (sortable) {\n        <div class=\"mtx-grid-column-menu-list\"\n          cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\n          @for (col of columns; track col) {\n            <div class=\"mtx-grid-column-menu-item\"\n              cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\n              <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\n                width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                <path d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\" />\n              </svg>\n              <ng-template [ngTemplateOutlet]=\"checkboxList\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\">\n              </ng-template>\n            </div>\n          }\n        </div>\n      }\n\n      @if (!sortable) {\n        <div class=\"mtx-grid-column-menu-list\">\n          @for (col of columns; track col) {\n            <div class=\"mtx-grid-column-menu-item\">\n              <ng-template [ngTemplateOutlet]=\"checkboxList\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\">\n              </ng-template>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    @if (showFooter) {\n      <div class=\"mtx-grid-column-menu-footer\">\n        @if (footerTemplate) {\n          <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n        } @else {\n          {{footerText}}\n        }\n      </div>\n    }\n  </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n  @if (pinnable) {\n    <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\n      [matMenuTriggerFor]=\"pinList\">\n      @if (col.pinned) {\n        <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\"\n          viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n        </svg>\n      }\n      @if (!col.pinned) {\n        <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\"\n          viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\n        </svg>\n      }\n      </button>\n      <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\n        @for (item of pinOptions; track item) {\n          <button class=\"mtx-grid-column-pin-option\" type=\"button\"\n            mat-menu-item\n            (click)=\"_handlePinSelect(col, item.value)\">\n            <span class=\"mtx-grid-column-pin-option-placeholder\">\n              <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n              @if (col.pinned==item.value) {\n                <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\"\n                  viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                  <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n                </svg>\n              }\n            </span>\n            <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n          </button>\n        }\n      </mat-menu>\n  }\n\n  @if (selectable) {\n    <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\n      [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\n      (change)=\"_handleChecked(col)\">{{col.header | toObservable | async}}</mat-checkbox>\n  } @else {\n    <span class=\"mtx-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n  }\n</ng-template>\n", styles: [".mtx-grid-column-menu{color:var(--mtx-grid-column-menu-text-color)}.mtx-grid-column-menu .mat-mdc-menu-content{padding:0}.mtx-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0;border-bottom:1px solid var(--mtx-grid-column-menu-divider-color)}.mtx-grid-column-menu-footer{bottom:0;border-top:1px solid var(--mtx-grid-column-menu-divider-color)}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-pin-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 40px;padding:8px}.mtx-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.mtx-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.mtx-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.mtx-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.mtx-grid-column-drag-handle-icon:hover{cursor:move}.mtx-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridColumnMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MtxGridColumnMenu, isStandalone: true, selector: "mtx-grid-column-menu", inputs: { columns: "columns", selectable: "selectable", selectableChecked: "selectableChecked", sortable: "sortable", pinnable: "pinnable", buttonText: "buttonText", buttonType: "buttonType", buttonColor: "buttonColor", buttonClass: "buttonClass", buttonIcon: "buttonIcon", showHeader: "showHeader", headerText: "headerText", headerTemplate: "headerTemplate", showFooter: "showFooter", footerText: "footerText", footerTemplate: "footerTemplate", pinOptions: "pinOptions" }, outputs: { columnChange: "columnChange" }, viewQueries: [{ propertyName: "menuPanel", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], exportAs: ["mtxGridColumnMenu"], ngImport: i0, template: "@switch (buttonType) {\n  @case ('raised') {\n    <button [ngClass]=\"buttonClass\" mat-raised-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('stroked') {\n    <button [ngClass]=\"buttonClass\" mat-stroked-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('flat') {\n    <button [ngClass]=\"buttonClass\" mat-flat-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n    }\n  @case ('icon') {\n    <button [ngClass]=\"buttonClass\" mat-icon-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n    </button>\n  }\n  @case ('fab') {\n    <button [ngClass]=\"buttonClass\" mat-fab type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @case ('mini-fab') {\n    <button [ngClass]=\"buttonClass\" mat-mini-fab type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n  @default {\n    <button [ngClass]=\"buttonClass\" mat-button type=\"button\" [color]=\"buttonColor\"\n      [matMenuTriggerFor]=\"menu\">\n      @if (buttonIcon) {\n        <mat-icon>{{buttonIcon}}</mat-icon>\n      }\n      {{buttonText}}\n    </button>\n  }\n}\n\n<mat-menu #menu=\"matMenu\" class=\"mtx-grid-column-menu\">\n  <div class=\"mtx-grid-column-menu-content\"\n    (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n    @if (showHeader) {\n      <div class=\"mtx-grid-column-menu-header\">\n        @if (headerTemplate) {\n          <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n        } @else {\n          {{headerText}}\n        }\n      </div>\n    }\n\n    <div class=\"mtx-grid-column-menu-body\">\n      @if (sortable) {\n        <div class=\"mtx-grid-column-menu-list\"\n          cdkDropList (cdkDropListDropped)=\"_handleDroped($event)\">\n          @for (col of columns; track col) {\n            <div class=\"mtx-grid-column-menu-item\"\n              cdkDrag [cdkDragDisabled]=\"selectableChecked === 'show'? !col.show : col.hide\">\n              <svg class=\"mtx-grid-icon mtx-grid-column-drag-handle-icon\" viewBox=\"0 0 24 24\"\n                width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                <path d=\"M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z\" />\n              </svg>\n              <ng-template [ngTemplateOutlet]=\"checkboxList\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\">\n              </ng-template>\n            </div>\n          }\n        </div>\n      }\n\n      @if (!sortable) {\n        <div class=\"mtx-grid-column-menu-list\">\n          @for (col of columns; track col) {\n            <div class=\"mtx-grid-column-menu-item\">\n              <ng-template [ngTemplateOutlet]=\"checkboxList\"\n                [ngTemplateOutletContext]=\"{ $implicit: col }\">\n              </ng-template>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    @if (showFooter) {\n      <div class=\"mtx-grid-column-menu-footer\">\n        @if (footerTemplate) {\n          <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n        } @else {\n          {{footerText}}\n        }\n      </div>\n    }\n  </div>\n</mat-menu>\n\n<ng-template #checkboxList let-col>\n  @if (pinnable) {\n    <button class=\"mtx-grid-column-pin-button\" mat-icon-button type=\"button\"\n      [matMenuTriggerFor]=\"pinList\">\n      @if (col.pinned) {\n        <svg class=\"mtx-grid-icon mtx-grid-column-pin-icon\"\n          viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\" />\n        </svg>\n      }\n      @if (!col.pinned) {\n        <svg class=\"mtx-grid-icon mtx-grid-column-pin-off-icon\"\n          viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z\" />\n        </svg>\n      }\n      </button>\n      <mat-menu #pinList=\"matMenu\" class=\"mtx-grid-column-pin-list\">\n        @for (item of pinOptions; track item) {\n          <button class=\"mtx-grid-column-pin-option\" type=\"button\"\n            mat-menu-item\n            (click)=\"_handlePinSelect(col, item.value)\">\n            <span class=\"mtx-grid-column-pin-option-placeholder\">\n              <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n              @if (col.pinned==item.value) {\n                <svg class=\"mtx-grid-icon mtx-grid-column-pin-check-icon\"\n                  viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n                  <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n                </svg>\n              }\n            </span>\n            <span class=\"mtx-grid-column-pin-option-text\">{{item.label | toObservable | async}}</span>\n          </button>\n        }\n      </mat-menu>\n  }\n\n  @if (selectable) {\n    <mat-checkbox class=\"mtx-grid-column-menu-item-label\"\n      [(ngModel)]=\"col[selectableChecked]\" [disabled]=\"col.disabled\"\n      (change)=\"_handleChecked(col)\">{{col.header | toObservable | async}}</mat-checkbox>\n  } @else {\n    <span class=\"mtx-grid-column-menu-item-label\">{{col.header | toObservable | async}}</span>\n  }\n</ng-template>\n", styles: [".mtx-grid-column-menu{color:var(--mtx-grid-column-menu-text-color)}.mtx-grid-column-menu .mat-mdc-menu-content{padding:0}.mtx-grid-column-menu-body{max-height:65vh;padding:8px 16px;overflow:auto}.mtx-grid-column-menu-header,.mtx-grid-column-menu-footer{position:sticky;z-index:1;padding:8px 16px}.mtx-grid-column-menu-header{top:0;border-bottom:1px solid var(--mtx-grid-column-menu-divider-color)}.mtx-grid-column-menu-footer{bottom:0;border-top:1px solid var(--mtx-grid-column-menu-divider-color)}.mtx-grid-column-menu-list{display:block;max-width:100%}.mtx-grid-column-menu-list.cdk-drop-list-dragging .mtx-grid-column-menu-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-menu-item{display:flex;flex-direction:row;align-items:center}.mtx-grid-column-menu-item.cdk-drag-disabled .cdk-drag-handle{opacity:.35;cursor:no-drop}.mtx-grid-column-menu-item .cdk-drag-handle{cursor:move}.mtx-grid-column-menu-item.cdk-drag-preview{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.mtx-grid-column-menu-item.cdk-drag-placeholder{opacity:0}.mtx-grid-column-menu-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mtx-grid-column-pin-button.mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 40px;padding:8px}.mtx-grid-column-pin-button.mat-mdc-icon-button .mat-mdc-button-touch-target{width:100%;height:100%}.mtx-grid-column-pin-option.mat-menu-item{display:flex;align-items:center;height:32px}.mtx-grid-column-pin-option-placeholder{display:inline-block;width:20px;height:20px;line-height:20px;vertical-align:middle}.mtx-grid-column-pin-option-text{padding:0 8px;vertical-align:middle}.mtx-grid-column-drag-handle-icon:hover{cursor:move}.mtx-grid-column-menu-item-label.mat-mdc-checkbox .mat-mdc-checkbox-touch-target{width:100%;height:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MtxGridColumnMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxGridColumnMenu, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-grid-column-menu', exportAs: 'mtxGridColumnMenu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         AsyncPipe,

package/esm2022/grid/column-resize/column-resize-directives/column-resize-flex.mjs

@@ -23,10 +23,10 @@ export class MatColumnResizeFlex extends AbstractMatColumnResize {
         this.ngZone = ngZone;
         this.notifier = notifier;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MatColumnResizeFlex, deps: [{ token: i1.ColumnResizeNotifier }, { token: i0.ElementRef }, { token: i1.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i1.ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: MatColumnResizeFlex, isStandalone: true, selector: "mat-table[columnResize]", host: { classAttribute: "mat-column-resize-flex" }, providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResizeFlex }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResizeFlex, deps: [{ token: i1.ColumnResizeNotifier }, { token: i0.ElementRef }, { token: i1.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i1.ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: MatColumnResizeFlex, isStandalone: true, selector: "mat-table[columnResize]", host: { classAttribute: "mat-column-resize-flex" }, providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResizeFlex }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MatColumnResizeFlex, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResizeFlex, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-table[columnResize]',

package/esm2022/grid/column-resize/column-resize-directives/column-resize.mjs

@@ -23,10 +23,10 @@ export class MatColumnResize extends AbstractMatColumnResize {
         this.ngZone = ngZone;
         this.notifier = notifier;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MatColumnResize, deps: [{ token: i1.ColumnResizeNotifier }, { token: i0.ElementRef }, { token: i1.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i1.ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: MatColumnResize, isStandalone: true, selector: "table[mat-table][columnResize]", host: { classAttribute: "mat-column-resize-table" }, providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResize }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResize, deps: [{ token: i1.ColumnResizeNotifier }, { token: i0.ElementRef }, { token: i1.HeaderRowEventDispatcher }, { token: i0.NgZone }, { token: i1.ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: MatColumnResize, isStandalone: true, selector: "table[mat-table][columnResize]", host: { classAttribute: "mat-column-resize-table" }, providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResize }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MatColumnResize, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatColumnResize, decorators: [{
             type: Directive,
             args: [{
                     selector: 'table[mat-table][columnResize]',