@dhutaryan/ngx-mat-timepicker 12.1.0 → 12.2.0

package/bundles/dhutaryan-ngx-mat-timepicker.umd.js

@@ -736,6 +736,7 @@
     var MatTimeFaceBase = /** @class */ (function () {
         function MatTimeFaceBase(_timeAdapter) {
             this._timeAdapter = _timeAdapter;
+            this._minuteInterval = 1;
             /** Color palette. */
             this.color = 'primary';
             /** Emits when any hour, minute or period is selected. */
@@ -808,6 +809,17 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MatTimeFaceBase.prototype, "minuteInterval", {
+            /** Step over minutes. */
+            get: function () {
+                return this._minuteInterval;
+            },
+            set: function (value) {
+                this._minuteInterval = coercion.coerceNumberProperty(value) || 1;
+            },
+            enumerable: false,
+            configurable: true
+        });
         MatTimeFaceBase.prototype.ngAfterContentInit = function () {
             if (!this.selected) {
                 this.selected = this._timeAdapter.clampTime(this._timeAdapter.now(), this.minTime, this.maxTime);
@@ -954,7 +966,7 @@
         return MatTimeFaceBase;
     }());
     MatTimeFaceBase.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimeFaceBase, deps: [{ token: TimeAdapter, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    MatTimeFaceBase.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MatTimeFaceBase, inputs: { selected: "selected", minTime: "minTime", maxTime: "maxTime", isMeridiem: "isMeridiem", color: "color" }, outputs: { _userSelection: "_userSelection", selectedChange: "selectedChange" }, ngImport: i0__namespace });
+    MatTimeFaceBase.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MatTimeFaceBase, inputs: { selected: "selected", minTime: "minTime", maxTime: "maxTime", minuteInterval: "minuteInterval", isMeridiem: "isMeridiem", color: "color" }, outputs: { _userSelection: "_userSelection", selectedChange: "selectedChange" }, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimeFaceBase, decorators: [{
                 type: i0.Directive
             }], ctorParameters: function () {
@@ -967,6 +979,8 @@
                     type: i0.Input
                 }], maxTime: [{
                     type: i0.Input
+                }], minuteInterval: [{
+                    type: i0.Input
                 }], isMeridiem: [{
                     type: i0.Input
                 }], color: [{
@@ -1085,11 +1099,13 @@
 
     var MatTimepickerContentLayout = /** @class */ (function () {
         function MatTimepickerContentLayout() {
+            /** Layout orientation. */
+            this.orientation = 'vertical';
         }
         return MatTimepickerContentLayout;
     }());
     MatTimepickerContentLayout.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimepickerContentLayout, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MatTimepickerContentLayout.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatTimepickerContentLayout, selector: "mat-timepicker-content-layout", inputs: { title: "title" }, host: { classAttribute: "mat-timepicker-content-layout" }, exportAs: ["matTimepickerContent"], ngImport: i0__namespace, template: "<h6 class=\"mat-timepicker-content-layout-title\">{{ title }}</h6>\n\n<div class=\"mat-timepicker-content-layout-values\">\n  <div class=\"mat-timepicker-content-layout-hours\">\n    <ng-content select=\"[hours]\"></ng-content>\n  </div>\n  <span class=\"mat-timepicker-content-layout-separator\">&#58;</span>\n  <div class=\"mat-timepicker-content-layout-minutes\">\n    <ng-content select=\"[minutes]\"></ng-content>\n  </div>\n\n  <ng-content select=\"[mat-time-period]\"></ng-content>\n</div>\n\n<ng-content></ng-content>\n", styles: ["h6.mat-timepicker-content-layout-title{margin-top:.3125rem;margin-bottom:1.1875rem;text-transform:uppercase;letter-spacing:.05rem}.mat-timepicker-content-layout-values{display:flex;justify-content:center}.mat-timepicker-content-layout-hours,.mat-timepicker-content-layout-minutes{width:6rem}.mat-timepicker-content-layout-separator{display:flex;justify-content:center;align-self:center;width:1.5rem;height:1.75rem;font-weight:500}.mat-time-period{margin-left:.75rem}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    MatTimepickerContentLayout.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatTimepickerContentLayout, selector: "mat-timepicker-content-layout", inputs: { title: "title", orientation: "orientation" }, host: { properties: { "class.mat-timepicker-content-layout-horizontal": "orientation === \"horizontal\"", "class.mat-timepicker-content-layout-vertical": "orientation === \"vertical\"" }, classAttribute: "mat-timepicker-content-layout" }, exportAs: ["matTimepickerContent"], ngImport: i0__namespace, template: "<h6 class=\"mat-timepicker-content-layout-title\">{{ title }}</h6>\n\n<div class=\"mat-timepicker-content-layout-container\">\n  <div class=\"mat-timepicker-content-layout-values\">\n    <div class=\"mat-timepicker-content-layout-hours\">\n      <ng-content select=\"[hours]\"></ng-content>\n    </div>\n    <span class=\"mat-timepicker-content-layout-separator\">&#58;</span>\n    <div class=\"mat-timepicker-content-layout-minutes\">\n      <ng-content select=\"[minutes]\"></ng-content>\n    </div>\n\n    <ng-content select=\"[mat-time-period]\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</div>\n", styles: ["h6.mat-timepicker-content-layout-title{margin-top:.3125rem;margin-bottom:1.1875rem;text-transform:uppercase;letter-spacing:.05rem}.mat-timepicker-content-layout-values{display:flex;justify-content:center}.mat-time-period{margin-left:.75rem}.mat-timepicker-content-layout-horizontal h6.mat-timepicker-content-layout-title{margin-bottom:0}.mat-timepicker-content-layout-horizontal .mat-timepicker-content-layout-container{display:flex;grid-gap:4rem;gap:4rem;align-items:center}.mat-timepicker-content-layout-horizontal .mat-timepicker-content-layout-values{flex-wrap:wrap}.mat-timepicker-content-layout-horizontal .mat-time-period{margin-top:.75rem;margin-left:0}.mat-timepicker-content-layout-hours,.mat-timepicker-content-layout-minutes{width:6rem}.mat-timepicker-content-layout-separator{display:flex;justify-content:center;align-self:center;width:1.5rem;height:1.75rem;font-weight:500}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimepickerContentLayout, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1101,10 +1117,14 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         host: {
                             class: 'mat-timepicker-content-layout',
+                            '[class.mat-timepicker-content-layout-horizontal]': 'orientation === "horizontal"',
+                            '[class.mat-timepicker-content-layout-vertical]': 'orientation === "vertical"',
                         },
                     }]
             }], propDecorators: { title: [{
                     type: i0.Input
+                }], orientation: [{
+                    type: i0.Input
                 }] } });
 
     var MatTimePeriod = /** @class */ (function () {
@@ -1158,7 +1178,7 @@
         return MatTimePeriod;
     }());
     MatTimePeriod.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimePeriod, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MatTimePeriod.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatTimePeriod, selector: "mat-time-period", inputs: { vertical: "vertical", period: "period", disabledPeriod: "disabledPeriod" }, outputs: { periodChanged: "periodChanged" }, host: { properties: { "class.mat-time-period-vertical": "vertical", "class.mat-time-period-horizontal": "!vertical", "attr.aria-orientation": "vertical ? \"vertical\" : \"horizontal\"" }, classAttribute: "mat-time-period" }, ngImport: i0__namespace, template: "<div\n  tabindex=\"0\"\n  class=\"mat-time-period-item\"\n  matRipple\n  [class.mat-time-period-item-active]=\"period === 'am'\"\n  [class.mat-time-period-item-disabled]=\"_isPeriodDisabled('am')\"\n  (click)=\"setPeriod('am')\"\n  (keyup.enter)=\"setPeriod('am')\"\n>\n  AM\n</div>\n<mat-divider></mat-divider>\n<div\n  tabindex=\"0\"\n  class=\"mat-time-period-item\"\n  matRipple\n  [class.mat-time-period-item-active]=\"period === 'pm'\"\n  [class.mat-time-period-item-disabled]=\"_isPeriodDisabled('pm')\"\n  (click)=\"setPeriod('pm')\"\n  (keyup.enter)=\"setPeriod('pm')\"\n>\n  PM\n</div>\n", styles: [".mat-time-period{display:flex;text-align:center;border-width:1px;border-style:solid;border-radius:.25rem;box-sizing:border-box}.mat-time-period-vertical{flex-direction:column;width:3.25rem;height:4.375rem}.mat-time-period-horizontal{flex-direction:row;width:100%}.mat-time-period-item{display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:100%;font-weight:500;cursor:pointer}.mat-time-period-item-disabled{pointer-events:none}\n"], components: [{ type: i1__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i2__namespace.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    MatTimePeriod.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatTimePeriod, selector: "mat-time-period", inputs: { vertical: "vertical", period: "period", disabledPeriod: "disabledPeriod" }, outputs: { periodChanged: "periodChanged" }, host: { properties: { "class.mat-time-period-vertical": "vertical", "class.mat-time-period-horizontal": "!vertical", "attr.aria-orientation": "vertical ? \"vertical\" : \"horizontal\"" }, classAttribute: "mat-time-period" }, ngImport: i0__namespace, template: "<div\n  tabindex=\"0\"\n  class=\"mat-time-period-item\"\n  matRipple\n  [class.mat-time-period-item-active]=\"period === 'am'\"\n  [class.mat-time-period-item-disabled]=\"_isPeriodDisabled('am')\"\n  (click)=\"setPeriod('am')\"\n  (keyup.enter)=\"setPeriod('am')\"\n>\n  AM\n</div>\n<mat-divider [vertical]=\"!vertical\"></mat-divider>\n<div\n  tabindex=\"0\"\n  class=\"mat-time-period-item\"\n  matRipple\n  [class.mat-time-period-item-active]=\"period === 'pm'\"\n  [class.mat-time-period-item-disabled]=\"_isPeriodDisabled('pm')\"\n  (click)=\"setPeriod('pm')\"\n  (keyup.enter)=\"setPeriod('pm')\"\n>\n  PM\n</div>\n", styles: [".mat-time-period{display:flex;text-align:center;border-width:1px;border-style:solid;border-radius:.25rem;box-sizing:border-box}.mat-time-period-vertical{flex-direction:column;width:3.25rem;height:4.375rem}.mat-time-period-horizontal{flex-direction:row;max-width:13.5rem;width:100%;height:2.5rem}.mat-time-period-item{display:flex;flex-direction:column;justify-content:center;flex-grow:1;height:100%;font-weight:500;cursor:pointer}.mat-time-period-item-disabled{pointer-events:none}\n"], components: [{ type: i1__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i2__namespace.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimePeriod, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1451,6 +1471,7 @@
             this._document = _document;
             this._window = _window;
             this._selectedMinute = 0;
+            this._interval = 1;
             /** Emits selected minute. */
             this.selectedChange = new i0.EventEmitter();
             this.minutes = [];
@@ -1488,6 +1509,17 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MatMinutesClockDial.prototype, "interval", {
+            /** Step over minutes. */
+            get: function () {
+                return this._interval;
+            },
+            set: function (value) {
+                this._interval = coercion.coerceNumberProperty(value) || 1;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(MatMinutesClockDial.prototype, "disabled", {
             get: function () {
                 return (this.selectedMinute < this.minMinute ||
@@ -1548,10 +1580,10 @@
             var pageY = event instanceof MouseEvent ? event.pageY : event.touches[0].pageY;
             var x = width / 2 - (pageX - elementRect.left - this._window.scrollX);
             var y = height / 2 - (pageY - elementRect.top - this._window.scrollY);
-            var unit = Math.PI / 30;
+            var unit = Math.PI / (30 / this.interval);
             var atan2 = Math.atan2(-x, y);
             var radian = atan2 < 0 ? Math.PI * 2 + atan2 : atan2;
-            var initialValue = Math.round(radian / unit);
+            var initialValue = Math.round(radian / unit) * this.interval;
             var value = initialValue === 60 ? 0 : initialValue;
             if ((value >= this.minMinute || isNaN(Number(this.minMinute))) &&
                 (value <= this.maxMinute || isNaN(Number(this.maxMinute)))) {
@@ -1579,7 +1611,7 @@
         return MatMinutesClockDial;
     }());
     MatMinutesClockDial.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatMinutesClockDial, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i7.DOCUMENT }, { token: Window }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MatMinutesClockDial.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatMinutesClockDial, selector: "mat-minutes-clock-dial", inputs: { selectedMinute: "selectedMinute", minMinute: "minMinute", maxMinute: "maxMinute", color: "color" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "mousedown": "_onMouseDown($event)" }, classAttribute: "mat-clock-dial mat-clock-dial-minutes" }, exportAs: ["matMinutesClockDial"], ngImport: i0__namespace, template: "<div\n  class=\"mat-clock-dial-hand\"\n  [class.mat-clock-dial-hand-pointless]=\"isMinutePoint\"\n  [class.mat-clock-dial-hand-disabled]=\"disabled\"\n  [ngStyle]=\"_handStyles()\"\n></div>\n<ng-template ngFor let-minute [ngForOf]=\"minutes\">\n  <button\n    class=\"mat-clock-dial-cell mat-elevation-z0\"\n    mat-mini-fab\n    disableRipple\n    [style.left.px]=\"minute.left\"\n    [style.top.px]=\"minute.top\"\n    [class.mat-clock-dial-cell-active]=\"selectedMinute === minute.value\"\n    [color]=\"selectedMinute === minute.value ? color : undefined\"\n    [disabled]=\"minute.disabled\"\n  >\n    {{ minute.displayValue }}\n  </button>\n</ng-template>\n", styles: [".mat-clock-dial{position:relative;display:block;width:16rem;height:16rem;margin:0 auto;border-radius:50%}.mat-clock-dial:before{position:absolute;top:50%;left:50%;width:.4375rem;height:.4375rem;border-radius:50%;transform:translate(-50%,-50%);content:\"\"}.mat-clock-dial [mat-mini-fab]{box-shadow:none}.mat-clock-dial-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%}.mat-clock-dial-cell:disabled{pointer-events:none}.mat-clock-dial-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mat-clock-dial-hand:before{position:absolute;top:calc(.5rem / -2);left:calc(.5rem / -2);width:calc(.5rem + 1px);height:calc(.5rem + 1px);border-radius:50%;content:\"\"}.mat-clock-dial-hand.mat-clock-dial-hand-pointless:before{content:none}\n"], components: [{ type: i1__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i7__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    MatMinutesClockDial.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatMinutesClockDial, selector: "mat-minutes-clock-dial", inputs: { selectedMinute: "selectedMinute", minMinute: "minMinute", maxMinute: "maxMinute", interval: "interval", color: "color" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "mousedown": "_onMouseDown($event)" }, classAttribute: "mat-clock-dial mat-clock-dial-minutes" }, exportAs: ["matMinutesClockDial"], ngImport: i0__namespace, template: "<div\n  class=\"mat-clock-dial-hand\"\n  [class.mat-clock-dial-hand-pointless]=\"isMinutePoint\"\n  [class.mat-clock-dial-hand-disabled]=\"disabled\"\n  [ngStyle]=\"_handStyles()\"\n></div>\n<ng-template ngFor let-minute [ngForOf]=\"minutes\">\n  <button\n    class=\"mat-clock-dial-cell mat-elevation-z0\"\n    mat-mini-fab\n    disableRipple\n    [style.left.px]=\"minute.left\"\n    [style.top.px]=\"minute.top\"\n    [class.mat-clock-dial-cell-active]=\"selectedMinute === minute.value\"\n    [color]=\"selectedMinute === minute.value ? color : undefined\"\n    [disabled]=\"minute.disabled\"\n  >\n    {{ minute.displayValue }}\n  </button>\n</ng-template>\n", styles: [".mat-clock-dial{position:relative;display:block;width:16rem;height:16rem;margin:0 auto;border-radius:50%}.mat-clock-dial:before{position:absolute;top:50%;left:50%;width:.4375rem;height:.4375rem;border-radius:50%;transform:translate(-50%,-50%);content:\"\"}.mat-clock-dial [mat-mini-fab]{box-shadow:none}.mat-clock-dial-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%}.mat-clock-dial-cell:disabled{pointer-events:none}.mat-clock-dial-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mat-clock-dial-hand:before{position:absolute;top:calc(.5rem / -2);left:calc(.5rem / -2);width:calc(.5rem + 1px);height:calc(.5rem + 1px);border-radius:50%;content:\"\"}.mat-clock-dial-hand.mat-clock-dial-hand-pointless:before{content:none}\n"], components: [{ type: i1__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i7__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatMinutesClockDial, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1608,6 +1640,8 @@
                     type: i0.Input
                 }], maxMinute: [{
                     type: i0.Input
+                }], interval: [{
+                    type: i0.Input
                 }], color: [{
                     type: i0.Input
                 }], selectedChange: [{
@@ -1667,7 +1701,7 @@
         return MatClockDials;
     }(MatTimeFaceBase));
     MatClockDials.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatClockDials, deps: [{ token: MatTimepickerIntl }, { token: TimeAdapter, optional: true }, { token: i0__namespace.NgZone }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MatClockDials.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatClockDials, selector: "mat-clock-dials", host: { attributes: { "role": "dial" }, classAttribute: "mat-clock-dials" }, exportAs: ["matClockDials"], usesInheritance: true, ngImport: i0__namespace, template: "<mat-timepicker-content-layout [title]=\"_intl.dialsTitle\">\n  <div\n    tabindex=\"0\"\n    class=\"mat-clock-dial-value\"\n    hours\n    [class.mat-clock-dial-value-active]=\"isHoursView\"\n    (click)=\"onViewChange('hours')\"\n    (keyup.enter)=\"onViewChange('hours')\"\n  >\n    {{ _withZeroPrefix(selectedHour) }}\n  </div>\n  <div\n    tabindex=\"0\"\n    class=\"mat-clock-dial-value\"\n    minutes\n    [class.mat-clock-dial-value-active]=\"!isHoursView\"\n    (click)=\"onViewChange('minutes')\"\n    (keyup.enter)=\"onViewChange('minutes')\"\n  >\n    {{ _withZeroPrefix(selectedMinute) }}\n  </div>\n\n  <ng-template mat-time-period [ngIf]=\"isMeridiem\">\n    <mat-time-period\n      [period]=\"period\"\n      [disabledPeriod]=\"disabledPeriod\"\n      (periodChanged)=\"_onPeriodChanged($event)\"\n    ></mat-time-period>\n  </ng-template>\n\n  <div class=\"mat-clock-dial-faces\">\n    <ng-template [ngIf]=\"isHoursView\">\n      <mat-hours-clock-dial\n        [color]=\"color\"\n        [selectedHour]=\"selectedHour\"\n        [isMeridiem]=\"isMeridiem\"\n        [minHour]=\"minHour\"\n        [maxHour]=\"maxHour\"\n        [include12Hour]=\"include12Hour\"\n        [exclude12Hour]=\"exclude12Hour\"\n        (selectedChange)=\"_onHourChanged($event)\"\n      ></mat-hours-clock-dial>\n    </ng-template>\n    <ng-template [ngIf]=\"!isHoursView\">\n      <mat-minutes-clock-dial\n        [color]=\"color\"\n        [selectedMinute]=\"selectedMinute\"\n        [minMinute]=\"minMinute\"\n        [maxMinute]=\"maxMinute\"\n        (selectedChange)=\"_onMinuteSelected($event)\"\n      ></mat-minutes-clock-dial>\n    </ng-template>\n  </div>\n</mat-timepicker-content-layout>\n", styles: [".mat-clock-dial-values{display:flex;width:100%}.mat-clock-dial-value{display:flex;align-items:center;justify-content:center;height:4.375rem;border-radius:.25rem;cursor:pointer}.mat-clock-dial-faces{margin-top:2.25rem}\n"], components: [{ type: MatTimepickerContentLayout, selector: "mat-timepicker-content-layout", inputs: ["title"], exportAs: ["matTimepickerContent"] }, { type: MatTimePeriod, selector: "mat-time-period", inputs: ["vertical", "period", "disabledPeriod"], outputs: ["periodChanged"] }, { type: MatHoursClockDial, selector: "mat-hours-clock-dial", inputs: ["selectedHour", "isMeridiem", "minHour", "maxHour", "include12Hour", "exclude12Hour", "color"], outputs: ["selectedChange"], exportAs: ["matHoursClockDial"] }, { type: MatMinutesClockDial, selector: "mat-minutes-clock-dial", inputs: ["selectedMinute", "minMinute", "maxMinute", "color"], outputs: ["selectedChange"], exportAs: ["matMinutesClockDial"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    MatClockDials.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatClockDials, selector: "mat-clock-dials", inputs: { orientation: "orientation" }, host: { attributes: { "role": "dial" }, classAttribute: "mat-clock-dials" }, exportAs: ["matClockDials"], usesInheritance: true, ngImport: i0__namespace, template: "<mat-timepicker-content-layout\n  [title]=\"_intl.dialsTitle\"\n  [orientation]=\"orientation\"\n>\n  <div\n    tabindex=\"0\"\n    class=\"mat-clock-dial-value\"\n    hours\n    [class.mat-clock-dial-value-active]=\"isHoursView\"\n    (click)=\"onViewChange('hours')\"\n    (keyup.enter)=\"onViewChange('hours')\"\n  >\n    {{ _withZeroPrefix(selectedHour) }}\n  </div>\n  <div\n    tabindex=\"0\"\n    class=\"mat-clock-dial-value\"\n    minutes\n    [class.mat-clock-dial-value-active]=\"!isHoursView\"\n    (click)=\"onViewChange('minutes')\"\n    (keyup.enter)=\"onViewChange('minutes')\"\n  >\n    {{ _withZeroPrefix(selectedMinute) }}\n  </div>\n\n  <ng-template mat-time-period [ngIf]=\"isMeridiem\">\n    <mat-time-period\n      [period]=\"period\"\n      [disabledPeriod]=\"disabledPeriod\"\n      [vertical]=\"orientation === 'vertical'\"\n      (periodChanged)=\"_onPeriodChanged($event)\"\n    ></mat-time-period>\n  </ng-template>\n\n  <div\n    class=\"mat-clock-dial-faces\"\n    [class.mat-clock-dial-faces-horizontal]=\"orientation === 'horizontal'\"\n  >\n    <ng-template [ngIf]=\"isHoursView\">\n      <mat-hours-clock-dial\n        [color]=\"color\"\n        [selectedHour]=\"selectedHour\"\n        [isMeridiem]=\"isMeridiem\"\n        [minHour]=\"minHour\"\n        [maxHour]=\"maxHour\"\n        [include12Hour]=\"include12Hour\"\n        [exclude12Hour]=\"exclude12Hour\"\n        (selectedChange)=\"_onHourChanged($event)\"\n      ></mat-hours-clock-dial>\n    </ng-template>\n    <ng-template [ngIf]=\"!isHoursView\">\n      <mat-minutes-clock-dial\n        [color]=\"color\"\n        [selectedMinute]=\"selectedMinute\"\n        [minMinute]=\"minMinute\"\n        [maxMinute]=\"maxMinute\"\n        [interval]=\"minuteInterval\"\n        (selectedChange)=\"_onMinuteSelected($event)\"\n      ></mat-minutes-clock-dial>\n    </ng-template>\n  </div>\n</mat-timepicker-content-layout>\n", styles: [".mat-clock-dial-values{display:flex;width:100%}.mat-clock-dial-value{display:flex;align-items:center;justify-content:center;height:4.375rem;border-radius:.25rem;cursor:pointer}.mat-clock-dial-faces{margin-top:2.25rem}.mat-clock-dial-faces.mat-clock-dial-faces-horizontal{margin-top:0}\n"], components: [{ type: MatTimepickerContentLayout, selector: "mat-timepicker-content-layout", inputs: ["title", "orientation"], exportAs: ["matTimepickerContent"] }, { type: MatTimePeriod, selector: "mat-time-period", inputs: ["vertical", "period", "disabledPeriod"], outputs: ["periodChanged"] }, { type: MatHoursClockDial, selector: "mat-hours-clock-dial", inputs: ["selectedHour", "isMeridiem", "minHour", "maxHour", "include12Hour", "exclude12Hour", "color"], outputs: ["selectedChange"], exportAs: ["matHoursClockDial"] }, { type: MatMinutesClockDial, selector: "mat-minutes-clock-dial", inputs: ["selectedMinute", "minMinute", "maxMinute", "interval", "color"], outputs: ["selectedChange"], exportAs: ["matMinutesClockDial"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatClockDials, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1686,7 +1720,9 @@
             return [{ type: MatTimepickerIntl }, { type: TimeAdapter, decorators: [{
                             type: i0.Optional
                         }] }, { type: i0__namespace.NgZone }, { type: i0__namespace.ElementRef }];
-        } });
+        }, propDecorators: { orientation: [{
+                    type: i0.Input
+                }] } });
 
     var MatHourInput = /** @class */ (function (_super) {
         __extends(MatHourInput, _super);
@@ -1756,8 +1792,21 @@
     var MatMinuteInput = /** @class */ (function (_super) {
         __extends(MatMinuteInput, _super);
         function MatMinuteInput(element, _cdr, _document) {
-            return _super.call(this, element, _cdr, _document) || this;
+            var _this = _super.call(this, element, _cdr, _document) || this;
+            _this._interval = 1;
+            return _this;
         }
+        Object.defineProperty(MatMinuteInput.prototype, "interval", {
+            /** Step over minutes. */
+            get: function () {
+                return this._interval;
+            },
+            set: function (value) {
+                this._interval = coercion.coerceNumberProperty(value) || 1;
+            },
+            enumerable: false,
+            configurable: true
+        });
         MatMinuteInput.prototype._withZeroPrefix = function (value) {
             return withZeroPrefix(value);
         };
@@ -1765,12 +1814,13 @@
             if (this.min > 59 || this.max < 0) {
                 return this.value;
             }
-            return Math.min(Math.max(value, this.min), this.max);
+            var roundedValue = Math.round(value / this.interval) * this.interval;
+            return Math.min(Math.max(roundedValue, this.min), this.max);
         };
         return MatMinuteInput;
     }(MatTimeInputBase));
     MatMinuteInput.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatMinuteInput, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i7.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    MatMinuteInput.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MatMinuteInput, selector: "input[matMinuteInput]", host: { listeners: { "focus": "focus($event)", "blur": "blur($event)" }, classAttribute: "mat-time-input" }, exportAs: ["matTimeInput"], usesInheritance: true, ngImport: i0__namespace });
+    MatMinuteInput.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MatMinuteInput, selector: "input[matMinuteInput]", inputs: { interval: "interval" }, host: { listeners: { "focus": "focus($event)", "blur": "blur($event)" }, classAttribute: "mat-time-input" }, exportAs: ["matTimeInput"], usesInheritance: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatMinuteInput, decorators: [{
                 type: i0.Directive,
                 args: [{
@@ -1787,7 +1837,9 @@
                             type: i0.Inject,
                             args: [i7.DOCUMENT]
                         }] }];
-        } });
+        }, propDecorators: { interval: [{
+                    type: i0.Input
+                }] } });
     var MatTimeInputs = /** @class */ (function (_super) {
         __extends(MatTimeInputs, _super);
         function MatTimeInputs(_intl, _timeAdapter, _ngZone, _elementRef) {
@@ -1826,7 +1878,7 @@
         return MatTimeInputs;
     }(MatTimeFaceBase));
     MatTimeInputs.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimeInputs, deps: [{ token: MatTimepickerIntl }, { token: TimeAdapter, optional: true }, { token: i0__namespace.NgZone }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MatTimeInputs.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatTimeInputs, selector: "mat-time-inputs", host: { classAttribute: "mat-time-inputs" }, usesInheritance: true, ngImport: i0__namespace, template: "<mat-timepicker-content-layout [title]=\"_intl.inputsTitle\">\n  <mat-form-field\n    class=\"mat-time-inputs-field\"\n    appearance=\"outline\"\n    hours\n    [color]=\"color\"\n  >\n    <input\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      matInput\n      matHourInput\n      [isMeridiem]=\"isMeridiem\"\n      [value]=\"selectedHour\"\n      [min]=\"_getMinHour()\"\n      [max]=\"_getMaxHour()\"\n      [include12Hour]=\"include12Hour\"\n      [exclude12Hour]=\"exclude12Hour\"\n      (timeChanged)=\"_onHourSelected($event)\"\n    />\n    <mat-hint>{{_intl.hourInputHint}}</mat-hint>\n  </mat-form-field>\n  <mat-form-field\n    class=\"mat-time-inputs-field\"\n    appearance=\"outline\"\n    minutes\n    [color]=\"color\"\n  >\n    <input\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      matInput\n      matMinuteInput\n      [value]=\"selectedMinute\"\n      [min]=\"minMinute || 0\"\n      [max]=\"maxMinute || 59\"\n      (timeChanged)=\"_onMinuteSelected($event)\"\n    />\n    <mat-hint>{{_intl.minuteInputHint}}</mat-hint>\n  </mat-form-field>\n\n  <ng-template mat-time-period [ngIf]=\"isMeridiem\">\n    <mat-time-period\n      [period]=\"period\"\n      [disabledPeriod]=\"disabledPeriod\"\n      (periodChanged)=\"_onPeriodChanged($event)\"\n    ></mat-time-period>\n  </ng-template>\n</mat-timepicker-content-layout>\n", styles: [".mat-time-inputs{display:block}.mat-time-inputs .mat-timepicker-content-layout-separator{margin-top:-1.25rem}.mat-time-inputs-field{display:block}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-form-field-flex{margin:0}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-form-field-outline{top:0}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-form-field-wrapper{top:0;margin:0;padding-bottom:1.25rem}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:1rem 0}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-form-field-subscript-wrapper{margin-top:.59375rem;padding-left:0;line-height:1;letter-spacing:.05rem}.mat-time-inputs-field .mat-form-field-infix{border-top:none;text-align:center}.mat-time-inputs-field input.mat-input-element{margin-top:0;line-height:normal}\n"], components: [{ type: MatTimepickerContentLayout, selector: "mat-timepicker-content-layout", inputs: ["title"], exportAs: ["matTimepickerContent"] }, { type: i4__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: MatTimePeriod, selector: "mat-time-period", inputs: ["vertical", "period", "disabledPeriod"], outputs: ["periodChanged"] }], directives: [{ type: i6__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: MatHourInput, selector: "input[matHourInput]", inputs: ["isMeridiem", "include12Hour", "exclude12Hour"], exportAs: ["matTimeInput"] }, { type: i4__namespace.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: MatMinuteInput, selector: "input[matMinuteInput]", exportAs: ["matTimeInput"] }, { type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    MatTimeInputs.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatTimeInputs, selector: "mat-time-inputs", host: { classAttribute: "mat-time-inputs" }, usesInheritance: true, ngImport: i0__namespace, template: "<mat-timepicker-content-layout [title]=\"_intl.inputsTitle\">\n  <mat-form-field\n    class=\"mat-time-inputs-field\"\n    appearance=\"outline\"\n    hours\n    [color]=\"color\"\n  >\n    <input\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      matInput\n      matHourInput\n      [isMeridiem]=\"isMeridiem\"\n      [value]=\"selectedHour\"\n      [min]=\"_getMinHour()\"\n      [max]=\"_getMaxHour()\"\n      [include12Hour]=\"include12Hour\"\n      [exclude12Hour]=\"exclude12Hour\"\n      (timeChanged)=\"_onHourSelected($event)\"\n    />\n    <mat-hint>{{_intl.hourInputHint}}</mat-hint>\n  </mat-form-field>\n  <mat-form-field\n    class=\"mat-time-inputs-field\"\n    appearance=\"outline\"\n    minutes\n    [color]=\"color\"\n  >\n    <input\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      matInput\n      matMinuteInput\n      [value]=\"selectedMinute\"\n      [min]=\"minMinute || 0\"\n      [max]=\"maxMinute || 59\"\n      [interval]=\"minuteInterval\"\n      (timeChanged)=\"_onMinuteSelected($event)\"\n    />\n    <mat-hint>{{_intl.minuteInputHint}}</mat-hint>\n  </mat-form-field>\n\n  <ng-template mat-time-period [ngIf]=\"isMeridiem\">\n    <mat-time-period\n      [period]=\"period\"\n      [disabledPeriod]=\"disabledPeriod\"\n      (periodChanged)=\"_onPeriodChanged($event)\"\n    ></mat-time-period>\n  </ng-template>\n</mat-timepicker-content-layout>\n", styles: [".mat-time-inputs{display:block}.mat-time-inputs .mat-timepicker-content-layout-separator{margin-top:-1.25rem}.mat-time-inputs-field{display:block}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-form-field-flex{margin:0}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-form-field-outline{top:0}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-form-field-wrapper{top:0;margin:0;padding-bottom:1.25rem}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:1rem 0}.mat-time-inputs-field.mat-form-field-appearance-outline .mat-form-field-subscript-wrapper{margin-top:.59375rem;padding-left:0;line-height:1;letter-spacing:.05rem}.mat-time-inputs-field .mat-form-field-infix{border-top:none;text-align:center}.mat-time-inputs-field input.mat-input-element{margin-top:0;line-height:normal}\n"], components: [{ type: MatTimepickerContentLayout, selector: "mat-timepicker-content-layout", inputs: ["title", "orientation"], exportAs: ["matTimepickerContent"] }, { type: i4__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: MatTimePeriod, selector: "mat-time-period", inputs: ["vertical", "period", "disabledPeriod"], outputs: ["periodChanged"] }], directives: [{ type: i6__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: MatHourInput, selector: "input[matHourInput]", inputs: ["isMeridiem", "include12Hour", "exclude12Hour"], exportAs: ["matTimeInput"] }, { type: i4__namespace.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: MatMinuteInput, selector: "input[matMinuteInput]", inputs: ["interval"], exportAs: ["matTimeInput"] }, { type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimeInputs, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1989,7 +2041,7 @@
         return MatTimepickerContent;
     }(_MatTimepickerContentBase));
     MatTimepickerContent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimepickerContent, deps: [{ token: i0__namespace.ElementRef }, { token: MatTimepickerIntl }, { token: MatTimeSelectionModel }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MatTimepickerContent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatTimepickerContent, selector: "mat-timepicker-content", host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "@transformPanel": "_animationState" }, classAttribute: "mat-timepicker-content" }, viewQueries: [{ propertyName: "_dials", first: true, predicate: MatClockDials, descendants: true }, { propertyName: "_inputs", first: true, predicate: MatTimeInputs, descendants: true }], exportAs: ["matTimepickerContent"], usesInheritance: true, ngImport: i0__namespace, template: "<div\n  cdkTrapFocus\n  role=\"dialog\"\n  class=\"mat-timepicker-content-container\"\n  [attr.aria-modal]=\"true\"\n  [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n>\n  <ng-container [ngSwitch]=\"mode\">\n    <ng-template ngSwitchCase=\"input\">\n      <mat-time-inputs\n        [id]=\"timepicker.id\"\n        [color]=\"color\"\n        [isMeridiem]=\"isMeridiem\"\n        [selected]=\"_getSelected()\"\n        [minTime]=\"timepicker._getMinTime()\"\n        [maxTime]=\"timepicker._getMaxTime()\"\n        (_userSelection)=\"_handleUserSelection($event)\"\n      ></mat-time-inputs>\n\n      <div class=\"mat-timepicker-content-actions\">\n        <button\n          class=\"mat-time-toggle-mode-button\"\n          mat-icon-button\n          *ngIf=\"showToggleModeButton\"\n          (click)=\"onToggleMode('dial')\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24\"\n            width=\"24\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"m15.175 16.625 1.475-1.45-3.6-3.6V7.1h-2.075v5.3ZM12 21.95q-2.075 0-3.887-.787-1.813-.788-3.15-2.125-1.338-1.338-2.125-3.151Q2.05 14.075 2.05 12t.788-3.887q.787-1.813 2.125-3.15Q6.3 3.625 8.113 2.837 9.925 2.05 12 2.05t3.887.787q1.813.788 3.151 2.126 1.337 1.337 2.125 3.15.787 1.812.787 3.887t-.787 3.887q-.788 1.813-2.125 3.151-1.338 1.337-3.151 2.125-1.812.787-3.887.787ZM12 12Zm0 7.8q3.225 0 5.513-2.275Q19.8 15.25 19.8 12q0-3.25-2.287-5.525Q15.225 4.2 12 4.2T6.488 6.475Q4.2 8.75 4.2 12q0 3.25 2.288 5.525Q8.775 19.8 12 19.8Z\"\n            />\n          </svg>\n        </button>\n\n        <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n      </div>\n    </ng-template>\n    <ng-template ngSwitchCase=\"dial\">\n      <mat-clock-dials\n        [id]=\"timepicker.id\"\n        [color]=\"color\"\n        [isMeridiem]=\"isMeridiem\"\n        [selected]=\"_getSelected()\"\n        [minTime]=\"timepicker._getMinTime()\"\n        [maxTime]=\"timepicker._getMaxTime()\"\n        (_userSelection)=\"_handleUserSelection($event)\"\n      ></mat-clock-dials>\n\n      <div class=\"mat-timepicker-content-actions\">\n        <button\n          class=\"mat-time-toggle-mode-button\"\n          mat-icon-button\n          *ngIf=\"showToggleModeButton\"\n          (click)=\"onToggleMode('input')\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24\"\n            width=\"24\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M4 19q-.825 0-1.412-.587Q2 17.825 2 17V7q0-.825.588-1.412Q3.175 5 4 5h16q.825 0 1.413.588Q22 6.175 22 7v10q0 .825-.587 1.413Q20.825 19 20 19Zm0-2h16V7H4v10Zm4-1h8v-2H8Zm-3-3h2v-2H5Zm3 0h2v-2H8Zm3 0h2v-2h-2Zm3 0h2v-2h-2Zm3 0h2v-2h-2ZM5 10h2V8H5Zm3 0h2V8H8Zm3 0h2V8h-2Zm3 0h2V8h-2Zm3 0h2V8h-2ZM4 17V7v10Z\"\n            />\n          </svg>\n        </button>\n\n        <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- Invisible close button for screen reader users. -->\n  <button\n    type=\"button\"\n    mat-raised-button\n    [color]=\"color || 'primary'\"\n    class=\"mat-timepicker-close-button\"\n    [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n    (focus)=\"_closeButtonFocused = true\"\n    (blur)=\"_closeButtonFocused = false\"\n    (click)=\"timepicker.close()\"\n  >\n    {{ _closeButtonText }}\n  </button>\n</div>\n", styles: [".mat-timepicker-content{display:block;border-radius:4px}.mat-timepicker-content-container{position:relative;display:flex;flex-direction:column;padding:.5rem 1.5rem}.mat-timepicker-content-actions{display:flex;justify-content:space-between;margin-right:-1rem;margin-top:1.5rem}.mat-time-toggle-mode-button{width:3.25rem;height:3.25rem;margin-left:-.75rem;margin-bottom:-.25rem;line-height:3.25rem}.mat-timepicker-close-button{position:absolute;top:100%;left:0;margin-top:.5rem}.ng-animating .mat-timepicker-close-button{display:none}\n"], components: [{ type: MatTimeInputs, selector: "mat-time-inputs" }, { type: i1__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: MatClockDials, selector: "mat-clock-dials", exportAs: ["matClockDials"] }], directives: [{ type: i6__namespace$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i7__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
+    MatTimepickerContent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MatTimepickerContent, selector: "mat-timepicker-content", host: { listeners: { "@transformPanel.done": "_animationDone.next()" }, properties: { "@transformPanel": "_animationState" }, classAttribute: "mat-timepicker-content" }, viewQueries: [{ propertyName: "_dials", first: true, predicate: MatClockDials, descendants: true }, { propertyName: "_inputs", first: true, predicate: MatTimeInputs, descendants: true }], exportAs: ["matTimepickerContent"], usesInheritance: true, ngImport: i0__namespace, template: "<div\n  cdkTrapFocus\n  role=\"dialog\"\n  class=\"mat-timepicker-content-container\"\n  [attr.aria-modal]=\"true\"\n  [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n>\n  <ng-container [ngSwitch]=\"mode\">\n    <ng-template ngSwitchCase=\"input\">\n      <mat-time-inputs\n        [id]=\"timepicker.id\"\n        [color]=\"color\"\n        [isMeridiem]=\"isMeridiem\"\n        [selected]=\"_getSelected()\"\n        [minTime]=\"timepicker._getMinTime()\"\n        [maxTime]=\"timepicker._getMaxTime()\"\n        [minuteInterval]=\"minuteInterval\"\n        (_userSelection)=\"_handleUserSelection($event)\"\n      ></mat-time-inputs>\n\n      <div class=\"mat-timepicker-content-actions\">\n        <button\n          class=\"mat-time-toggle-mode-button\"\n          mat-icon-button\n          *ngIf=\"showToggleModeButton\"\n          (click)=\"onToggleMode('dial')\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24\"\n            width=\"24\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"m15.175 16.625 1.475-1.45-3.6-3.6V7.1h-2.075v5.3ZM12 21.95q-2.075 0-3.887-.787-1.813-.788-3.15-2.125-1.338-1.338-2.125-3.151Q2.05 14.075 2.05 12t.788-3.887q.787-1.813 2.125-3.15Q6.3 3.625 8.113 2.837 9.925 2.05 12 2.05t3.887.787q1.813.788 3.151 2.126 1.337 1.337 2.125 3.15.787 1.812.787 3.887t-.787 3.887q-.788 1.813-2.125 3.151-1.338 1.337-3.151 2.125-1.812.787-3.887.787ZM12 12Zm0 7.8q3.225 0 5.513-2.275Q19.8 15.25 19.8 12q0-3.25-2.287-5.525Q15.225 4.2 12 4.2T6.488 6.475Q4.2 8.75 4.2 12q0 3.25 2.288 5.525Q8.775 19.8 12 19.8Z\"\n            />\n          </svg>\n        </button>\n\n        <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n      </div>\n    </ng-template>\n    <ng-template ngSwitchCase=\"dial\">\n      <mat-clock-dials\n        [id]=\"timepicker.id\"\n        [color]=\"color\"\n        [isMeridiem]=\"isMeridiem\"\n        [selected]=\"_getSelected()\"\n        [minTime]=\"timepicker._getMinTime()\"\n        [maxTime]=\"timepicker._getMaxTime()\"\n        [minuteInterval]=\"minuteInterval\"\n        [orientation]=\"orientation\"\n        (_userSelection)=\"_handleUserSelection($event)\"\n      ></mat-clock-dials>\n\n      <div class=\"mat-timepicker-content-actions\">\n        <button\n          class=\"mat-time-toggle-mode-button\"\n          mat-icon-button\n          *ngIf=\"showToggleModeButton\"\n          (click)=\"onToggleMode('input')\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24\"\n            width=\"24\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"M4 19q-.825 0-1.412-.587Q2 17.825 2 17V7q0-.825.588-1.412Q3.175 5 4 5h16q.825 0 1.413.588Q22 6.175 22 7v10q0 .825-.587 1.413Q20.825 19 20 19Zm0-2h16V7H4v10Zm4-1h8v-2H8Zm-3-3h2v-2H5Zm3 0h2v-2H8Zm3 0h2v-2h-2Zm3 0h2v-2h-2Zm3 0h2v-2h-2ZM5 10h2V8H5Zm3 0h2V8H8Zm3 0h2V8h-2Zm3 0h2V8h-2Zm3 0h2V8h-2ZM4 17V7v10Z\"\n            />\n          </svg>\n        </button>\n\n        <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <!-- Invisible close button for screen reader users. -->\n  <button\n    type=\"button\"\n    mat-raised-button\n    [color]=\"color || 'primary'\"\n    class=\"mat-timepicker-close-button\"\n    [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n    (focus)=\"_closeButtonFocused = true\"\n    (blur)=\"_closeButtonFocused = false\"\n    (click)=\"timepicker.close()\"\n  >\n    {{ _closeButtonText }}\n  </button>\n</div>\n", styles: [".mat-timepicker-content{display:block;border-radius:4px}.mat-timepicker-content-container{position:relative;display:flex;flex-direction:column;padding:.5rem 1.5rem}.mat-timepicker-content-actions{display:flex;justify-content:space-between;margin-right:-1rem;margin-top:1.5rem}.mat-time-toggle-mode-button{width:3.25rem;height:3.25rem;margin-left:-.75rem;margin-bottom:-.25rem;line-height:3.25rem}.mat-timepicker-close-button{position:absolute;top:100%;left:0;margin-top:.5rem}.ng-animating .mat-timepicker-close-button{display:none}\n"], components: [{ type: MatTimeInputs, selector: "mat-time-inputs" }, { type: i1__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: MatClockDials, selector: "mat-clock-dials", inputs: ["orientation"], exportAs: ["matClockDials"] }], directives: [{ type: i6__namespace$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i7__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
             matTimepickerAnimations.transformPanel,
             matTimepickerAnimations.fadeInTimepicker,
         ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
@@ -2059,7 +2111,10 @@
             this._backdropHarnessClass = this.id + "-backdrop";
             this._scrollStrategy = scrollStrategy;
             if (_defaults) {
-                this.showToggleModeButton = _defaults.showToggleModeButton;
+                this.showToggleModeButton =
+                    _defaults.showToggleModeButton !== undefined
+                        ? _defaults.showToggleModeButton
+                        : true;
             }
         }
         Object.defineProperty(MatTimepickerBase.prototype, "disabled", {
@@ -2150,6 +2205,30 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MatTimepickerBase.prototype, "minuteInterval", {
+            /** Step for minutes. */
+            get: function () {
+                var _a;
+                return this._minuteInterval || ((_a = this._defaults) === null || _a === void 0 ? void 0 : _a.minuteInterval) || 1;
+            },
+            set: function (value) {
+                this._minuteInterval = coercion.coerceNumberProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(MatTimepickerBase.prototype, "orientation", {
+            /** Orientation for dial mode. */
+            get: function () {
+                var _a;
+                return this._orientation || ((_a = this._defaults) === null || _a === void 0 ? void 0 : _a.orientation) || 'vertical';
+            },
+            set: function (value) {
+                this._orientation = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         /** The minimum selectable time. */
         MatTimepickerBase.prototype._getMinTime = function () {
             return this.timepickerInput && this.timepickerInput.min;
@@ -2253,6 +2332,8 @@
             instance.mode = this.mode;
             instance.isMeridiem = this.format === '12h';
             instance.showToggleModeButton = this.showToggleModeButton;
+            instance.minuteInterval = this.minuteInterval;
+            instance.orientation = this.orientation;
             instance._dialogLabelId = this.timepickerInput.getOverlayLabelId();
             instance._assignActions(this._actionsPortal || defaultPortal, false);
         };
@@ -2382,7 +2463,7 @@
         return MatTimepickerBase;
     }());
     MatTimepickerBase.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimepickerBase, deps: [{ token: i0__namespace.ViewContainerRef }, { token: i1__namespace$2.Overlay }, { token: i0__namespace.NgZone }, { token: MAT_TIMEPICKER_SCROLL_STRATEGY }, { token: MAT_DEFAULT_ACITONS }, { token: MatTimeSelectionModel }, { token: MAT_TIMEPICKER_DEFAULT_OPTIONS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    MatTimepickerBase.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MatTimepickerBase, inputs: { disabled: "disabled", opened: "opened", openAs: "openAs", color: "color", mode: "mode", format: "format", showToggleModeButton: "showToggleModeButton", xPosition: "xPosition", yPosition: "yPosition" }, outputs: { closedStream: "closed" }, usesOnChanges: true, ngImport: i0__namespace });
+    MatTimepickerBase.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MatTimepickerBase, inputs: { disabled: "disabled", opened: "opened", openAs: "openAs", color: "color", mode: "mode", format: "format", showToggleModeButton: "showToggleModeButton", minuteInterval: "minuteInterval", orientation: "orientation", xPosition: "xPosition", yPosition: "yPosition" }, outputs: { closedStream: "closed" }, usesOnChanges: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimepickerBase, decorators: [{
                 type: i0.Directive
             }], ctorParameters: function () {
@@ -2412,6 +2493,10 @@
                     type: i0.Input
                 }], showToggleModeButton: [{
                     type: i0.Input
+                }], minuteInterval: [{
+                    type: i0.Input
+                }], orientation: [{
+                    type: i0.Input
                 }], xPosition: [{
                     type: i0.Input
                 }], yPosition: [{