@dhutaryan/ngx-mat-timepicker 0.0.1 → 0.0.2

package/README.md

@@ -3,7 +3,7 @@
 # ngx-mat-timepicker
 
 [![npm](https://img.shields.io/npm/v/@dhutaryan/ngx-mat-timepicker.svg)](https://www.npmjs.com/package/@dhutaryan/ngx-mat-timepicker)
-[![code factor](https://img.shields.io/codefactor/grade/github/dgutoryan/ngx-timepicker)](https://www.codefactor.io/repository/github/dgutoryan/ngx-timepicker)
+[![code factor](https://img.shields.io/codefactor/grade/github/dgutoryan/ngx-mat-timepicker)](https://www.codefactor.io/repository/github/dgutoryan/ngx-mat-timepicker)
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dgutoryan/ngx-timepicker/blob/master/LICENSE)
 
 The timepicker module using Angular material.
@@ -95,6 +95,22 @@ Then you have to define a theme. [More details about theming](https://material.a
 </mat-form-field>
 ```
 
+## Locale
+
+Default locale is `en-US`. You can set your locale as:
+
+```typescript
+import { MAT_TIME_LOCALE } from "@dhutaryan/ngx-mat-timepicker";
+
+@NgModule({
+  imports: [
+    // ...
+  ],
+  providers: [{ provide: MAT_TIME_LOCALE, useValue: "en-GB" }],
+})
+export class MyModule {}
+```
+
 ## License
 
 MIT

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

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/cdk/a11y'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/icon'), require('@angular/material/core'), require('@angular/material/divider'), require('@angular/cdk/coercion'), require('@angular/cdk/keycodes'), require('rxjs'), require('@angular/animations'), require('@angular/cdk/platform'), require('@angular/forms')) :
     typeof define === 'function' && define.amd ? define('@dhutaryan/ngx-mat-timepicker', ['exports', '@angular/core', '@angular/common', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/cdk/a11y', '@angular/material/button', '@angular/material/form-field', '@angular/material/input', '@angular/material/icon', '@angular/material/core', '@angular/material/divider', '@angular/cdk/coercion', '@angular/cdk/keycodes', 'rxjs', '@angular/animations', '@angular/cdk/platform', '@angular/forms'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.dhutaryan = global.dhutaryan || {}, global.dhutaryan["ngx-mat-timepicker"] = {}), global.ng.core, global.ng.common, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.cdk.a11y, global.ng.material.button, global.ng.material.formField, global.ng.material.input, global.ng.material.icon, global.ng.material.core, global.ng.material.divider, global.ng.cdk.coercion, global.ng.cdk.keycodes, global.rxjs, global.ng.animations, global.ng.cdk.platform, global.ng.forms));
-})(this, (function (exports, i0, i2, i1, i8, scrolling, i6, i1$1, i3, i5, icon, i2$1, i1$2, coercion, keycodes, rxjs, animations, platform, forms) { 'use strict';
+})(this, (function (exports, i0, i2, i1, i8, scrolling, i6$1, i1$1, i4, i6, icon, i2$1, i1$2, coercion, keycodes, rxjs, animations, platform, forms) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -26,10 +26,10 @@
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1);
     var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1$1);
-    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$2);
 
@@ -841,6 +841,26 @@
                     type: i0.Output
                 }] } });
 
+    var MatTimepickerIntl = /** @class */ (function () {
+        function MatTimepickerIntl() {
+            /** A label for inputs title. */
+            this.inputsTitle = 'Enter time';
+            /** A label for dials title. */
+            this.dialsTitle = 'Select time';
+            /** A label for hour input hint. */
+            this.hourInputHint = 'Hour';
+            /** A label for minute input hint. */
+            this.minuteInputHint = 'Minute';
+        }
+        return MatTimepickerIntl;
+    }());
+    MatTimepickerIntl.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimepickerIntl, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    MatTimepickerIntl.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimepickerIntl, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimepickerIntl, decorators: [{
+                type: i0.Injectable,
+                args: [{ providedIn: 'root' }]
+            }] });
+
     var MatTimepickerContentLayout = /** @class */ (function () {
         function MatTimepickerContentLayout() {
         }
@@ -929,9 +949,9 @@
         return newValue < 10 ? "0" + newValue : "" + newValue;
     }
     var MatTimeInput = /** @class */ (function () {
-        function MatTimeInput(element, cdr, _document) {
+        function MatTimeInput(element, _cdr, _document) {
             this.element = element;
-            this.cdr = cdr;
+            this._cdr = _cdr;
             this._document = _document;
             this._min = 0;
             this._max = Infinity;
@@ -1002,11 +1022,11 @@
             else {
                 this.inputElement.value = '';
             }
-            this.cdr.markForCheck();
+            this._cdr.markForCheck();
         };
         MatTimeInput.prototype.setInputPlaceholder = function (value) {
             this.inputElement.placeholder = this._withZeroPrefix(value);
-            this.cdr.markForCheck();
+            this._cdr.markForCheck();
         };
         MatTimeInput.prototype._withZeroPrefix = function (value) {
             return withZeroPrefix(value, this.isMeridiem);
@@ -1056,13 +1076,15 @@
                 }] } });
     var MatTimeInputs = /** @class */ (function (_super) {
         __extends(MatTimeInputs, _super);
-        function MatTimeInputs(_timeAdapter) {
-            return _super.call(this, _timeAdapter) || this;
+        function MatTimeInputs(_intl, _timeAdapter) {
+            var _this = _super.call(this, _timeAdapter) || this;
+            _this._intl = _intl;
+            return _this;
         }
         return MatTimeInputs;
     }(MatTimeFaceBase));
-    MatTimeInputs.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimeInputs, deps: [{ token: TimeAdapter, optional: true }], 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=\"Enter time\">\r\n  <mat-form-field class=\"mat-time-inputs-field\" appearance=\"outline\" hours>\r\n    <input\r\n      type=\"text\"\r\n      inputmode=\"numeric\"\r\n      maxlength=\"2\"\r\n      matInput\r\n      matTimeInput\r\n      [isMeridiem]=\"isMeridiem\"\r\n      [value]=\"selectedHour\"\r\n      [min]=\"isMeridiem ? 1 : 0\"\r\n      [max]=\"isMeridiem ? 12 : 23\"\r\n      (timeChanged)=\"_onHourSelected($event)\"\r\n    />\r\n    <mat-hint>Hour</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field class=\"mat-time-inputs-field\" appearance=\"outline\" minutes>\r\n    <input\r\n      type=\"text\"\r\n      inputmode=\"numeric\"\r\n      maxlength=\"2\"\r\n      matInput\r\n      matTimeInput\r\n      [value]=\"selectedMinute\"\r\n      [min]=\"0\"\r\n      [max]=\"59\"\r\n      (timeChanged)=\"_onMinuteSelected($event)\"\r\n    />\r\n    <mat-hint>Minute</mat-hint>\r\n  </mat-form-field>\r\n\r\n  <ng-template mat-time-period [ngIf]=\"isMeridiem\">\r\n    <mat-time-period\r\n      [period]=\"period\"\r\n      (periodChanged)=\"_onPeriodChanged($event)\"\r\n    ></mat-time-period>\r\n  </ng-template>\r\n</mat-timepicker-content-layout>\r\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: i3__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: MatTimePeriod, selector: "mat-time-period", inputs: ["vertical", "period"], outputs: ["periodChanged"] }], directives: [{ type: i5__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: MatTimeInput, selector: "input[matTimeInput]", inputs: ["min", "max", "value", "isMeridiem"], outputs: ["timeChanged"], exportAs: ["matTimeInput"] }, { type: i3__namespace.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    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 }], 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\">\r\n  <mat-form-field class=\"mat-time-inputs-field\" appearance=\"outline\" hours>\r\n    <input\r\n      type=\"text\"\r\n      inputmode=\"numeric\"\r\n      maxlength=\"2\"\r\n      matInput\r\n      matTimeInput\r\n      [isMeridiem]=\"isMeridiem\"\r\n      [value]=\"selectedHour\"\r\n      [min]=\"isMeridiem ? 1 : 0\"\r\n      [max]=\"isMeridiem ? 12 : 23\"\r\n      (timeChanged)=\"_onHourSelected($event)\"\r\n    />\r\n    <mat-hint>{{_intl.hourInputHint}}</mat-hint>\r\n  </mat-form-field>\r\n  <mat-form-field class=\"mat-time-inputs-field\" appearance=\"outline\" minutes>\r\n    <input\r\n      type=\"text\"\r\n      inputmode=\"numeric\"\r\n      maxlength=\"2\"\r\n      matInput\r\n      matTimeInput\r\n      [value]=\"selectedMinute\"\r\n      [min]=\"0\"\r\n      [max]=\"59\"\r\n      (timeChanged)=\"_onMinuteSelected($event)\"\r\n    />\r\n    <mat-hint>{{_intl.minuteInputHint}}</mat-hint>\r\n  </mat-form-field>\r\n\r\n  <ng-template mat-time-period [ngIf]=\"isMeridiem\">\r\n    <mat-time-period\r\n      [period]=\"period\"\r\n      (periodChanged)=\"_onPeriodChanged($event)\"\r\n    ></mat-time-period>\r\n  </ng-template>\r\n</mat-timepicker-content-layout>\r\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"], 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: MatTimeInput, selector: "input[matTimeInput]", inputs: ["min", "max", "value", "isMeridiem"], outputs: ["timeChanged"], exportAs: ["matTimeInput"] }, { type: i4__namespace.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2__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: [{
@@ -1076,7 +1098,7 @@
                         },
                     }]
             }], ctorParameters: function () {
-            return [{ type: TimeAdapter, decorators: [{
+            return [{ type: MatTimepickerIntl }, { type: TimeAdapter, decorators: [{
                             type: i0.Optional
                         }] }];
         } });
@@ -1375,8 +1397,9 @@
 
     var MatClockDials = /** @class */ (function (_super) {
         __extends(MatClockDials, _super);
-        function MatClockDials(_timeAdapter) {
+        function MatClockDials(_intl, _timeAdapter) {
             var _this = _super.call(this, _timeAdapter) || this;
+            _this._intl = _intl;
             _this.isHoursView = true;
             /** Specifies the view of clock dial. */
             _this._view = new rxjs.BehaviorSubject('hours');
@@ -1406,8 +1429,8 @@
         };
         return MatClockDials;
     }(MatTimeFaceBase));
-    MatClockDials.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatClockDials, deps: [{ token: TimeAdapter, optional: true }], 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: { classAttribute: "mat-clock-dials" }, exportAs: ["matClockDials"], usesInheritance: true, ngImport: i0__namespace, template: "<mat-timepicker-content-layout title=\"Select time\">\r\n  <div\r\n    class=\"mat-clock-dial-value\"\r\n    hours\r\n    [class.mat-clock-dial-value-active]=\"isHoursView\"\r\n    (click)=\"onViewChange('hours')\"\r\n  >\r\n    {{ _withZeroPrefix(selectedHour) }}\r\n  </div>\r\n  <div\r\n    class=\"mat-clock-dial-value\"\r\n    minutes\r\n    [class.mat-clock-dial-value-active]=\"!isHoursView\"\r\n    (click)=\"onViewChange('minutes')\"\r\n  >\r\n    {{ _withZeroPrefix(selectedMinute) }}\r\n  </div>\r\n\r\n  <ng-template mat-time-period [ngIf]=\"isMeridiem\">\r\n    <mat-time-period\r\n      [period]=\"period\"\r\n      (periodChanged)=\"_onPeriodChanged($event)\"\r\n    ></mat-time-period>\r\n  </ng-template>\r\n\r\n  <div class=\"mat-clock-dial-faces\">\r\n    <ng-template [ngIf]=\"isHoursView\">\r\n      <mat-hours-clock-dial\r\n        [selectedHour]=\"selectedHour\"\r\n        [isMeridiem]=\"isMeridiem\"\r\n        (selectedChange)=\"_onHourChanged($event)\"\r\n      ></mat-hours-clock-dial>\r\n    </ng-template>\r\n    <ng-template [ngIf]=\"!isHoursView\">\r\n      <mat-minutes-clock-dial\r\n        [selectedMinute]=\"selectedMinute\"\r\n        (selectedChange)=\"_onMinuteSelected($event)\"\r\n      ></mat-minutes-clock-dial>\r\n    </ng-template>\r\n  </div>\r\n</mat-timepicker-content-layout>\r\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"], outputs: ["periodChanged"] }, { type: MatHoursClockDial, selector: "mat-hours-clock-dial", inputs: ["selectedHour", "isMeridiem"], outputs: ["selectedChange"], exportAs: ["matHoursClockDial"] }, { type: MatMinutesClockDial, selector: "mat-minutes-clock-dial", inputs: ["selectedMinute"], outputs: ["selectedChange"], exportAs: ["matMinutesClockDial"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    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 }], 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: { classAttribute: "mat-clock-dials" }, exportAs: ["matClockDials"], usesInheritance: true, ngImport: i0__namespace, template: "<mat-timepicker-content-layout [title]=\"_intl.dialsTitle\">\r\n  <div\r\n    class=\"mat-clock-dial-value\"\r\n    hours\r\n    [class.mat-clock-dial-value-active]=\"isHoursView\"\r\n    (click)=\"onViewChange('hours')\"\r\n  >\r\n    {{ _withZeroPrefix(selectedHour) }}\r\n  </div>\r\n  <div\r\n    class=\"mat-clock-dial-value\"\r\n    minutes\r\n    [class.mat-clock-dial-value-active]=\"!isHoursView\"\r\n    (click)=\"onViewChange('minutes')\"\r\n  >\r\n    {{ _withZeroPrefix(selectedMinute) }}\r\n  </div>\r\n\r\n  <ng-template mat-time-period [ngIf]=\"isMeridiem\">\r\n    <mat-time-period\r\n      [period]=\"period\"\r\n      (periodChanged)=\"_onPeriodChanged($event)\"\r\n    ></mat-time-period>\r\n  </ng-template>\r\n\r\n  <div class=\"mat-clock-dial-faces\">\r\n    <ng-template [ngIf]=\"isHoursView\">\r\n      <mat-hours-clock-dial\r\n        [selectedHour]=\"selectedHour\"\r\n        [isMeridiem]=\"isMeridiem\"\r\n        (selectedChange)=\"_onHourChanged($event)\"\r\n      ></mat-hours-clock-dial>\r\n    </ng-template>\r\n    <ng-template [ngIf]=\"!isHoursView\">\r\n      <mat-minutes-clock-dial\r\n        [selectedMinute]=\"selectedMinute\"\r\n        (selectedChange)=\"_onMinuteSelected($event)\"\r\n      ></mat-minutes-clock-dial>\r\n    </ng-template>\r\n  </div>\r\n</mat-timepicker-content-layout>\r\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"], outputs: ["periodChanged"] }, { type: MatHoursClockDial, selector: "mat-hours-clock-dial", inputs: ["selectedHour", "isMeridiem"], outputs: ["selectedChange"], exportAs: ["matHoursClockDial"] }, { type: MatMinutesClockDial, selector: "mat-minutes-clock-dial", inputs: ["selectedMinute"], outputs: ["selectedChange"], exportAs: ["matMinutesClockDial"] }], directives: [{ type: i2__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: [{
@@ -1422,7 +1445,7 @@
                         },
                     }]
             }], ctorParameters: function () {
-            return [{ type: TimeAdapter, decorators: [{
+            return [{ type: MatTimepickerIntl }, { type: TimeAdapter, decorators: [{
                             type: i0.Optional
                         }] }];
         } });
@@ -1497,7 +1520,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: MatTimeSelectionModel }, { token: i0__namespace.ChangeDetectorRef }, { token: TimeAdapter }], 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" }, exportAs: ["matTimepickerContent"], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"mat-timepicker-content-container\" cdkTrapFocus>\r\n  <ng-container [ngSwitch]=\"mode\">\r\n    <ng-template ngSwitchCase=\"input\">\r\n      <mat-time-inputs\r\n        [isMeridiem]=\"isMeridiem\"\r\n        [selected]=\"_getSelected()\"\r\n        (_userSelection)=\"_handleUserSelection($event)\"\r\n      ></mat-time-inputs>\r\n\r\n      <div class=\"mat-timepicker-content-actions\">\r\n        <button\r\n          class=\"mat-time-toggle-mode-button\"\r\n          mat-icon-button\r\n          (click)=\"onToggleMode('dial')\"\r\n        >\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            height=\"24\"\r\n            width=\"24\"\r\n            viewBox=\"0 0 24 24\"\r\n          >\r\n            <path\r\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\"\r\n            />\r\n          </svg>\r\n        </button>\r\n\r\n        <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template ngSwitchCase=\"dial\">\r\n      <mat-clock-dials\r\n        [isMeridiem]=\"isMeridiem\"\r\n        [selected]=\"_getSelected()\"\r\n        (_userSelection)=\"_handleUserSelection($event)\"\r\n      ></mat-clock-dials>\r\n\r\n      <div class=\"mat-timepicker-content-actions\">\r\n        <button\r\n          class=\"mat-time-toggle-mode-button\"\r\n          mat-icon-button\r\n          (click)=\"onToggleMode('input')\"\r\n        >\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            height=\"24\"\r\n            width=\"24\"\r\n            viewBox=\"0 0 24 24\"\r\n          >\r\n            <path\r\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\"\r\n            />\r\n          </svg>\r\n        </button>\r\n\r\n        <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</div>\r\n", styles: [".mat-timepicker-content{display:block;border-radius:4px}.mat-timepicker-content-container{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}\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.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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" }, exportAs: ["matTimepickerContent"], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"mat-timepicker-content-container\" cdkTrapFocus>\r\n  <ng-container [ngSwitch]=\"mode\">\r\n    <ng-template ngSwitchCase=\"input\">\r\n      <mat-time-inputs\r\n        [isMeridiem]=\"isMeridiem\"\r\n        [selected]=\"_getSelected()\"\r\n        (_userSelection)=\"_handleUserSelection($event)\"\r\n      ></mat-time-inputs>\r\n\r\n      <div class=\"mat-timepicker-content-actions\">\r\n        <button\r\n          class=\"mat-time-toggle-mode-button\"\r\n          mat-icon-button\r\n          (click)=\"onToggleMode('dial')\"\r\n        >\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            height=\"24\"\r\n            width=\"24\"\r\n            viewBox=\"0 0 24 24\"\r\n          >\r\n            <path\r\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\"\r\n            />\r\n          </svg>\r\n        </button>\r\n\r\n        <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template ngSwitchCase=\"dial\">\r\n      <mat-clock-dials\r\n        [isMeridiem]=\"isMeridiem\"\r\n        [selected]=\"_getSelected()\"\r\n        (_userSelection)=\"_handleUserSelection($event)\"\r\n      ></mat-clock-dials>\r\n\r\n      <div class=\"mat-timepicker-content-actions\">\r\n        <button\r\n          class=\"mat-time-toggle-mode-button\"\r\n          mat-icon-button\r\n          (click)=\"onToggleMode('input')\"\r\n        >\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            height=\"24\"\r\n            width=\"24\"\r\n            viewBox=\"0 0 24 24\"\r\n          >\r\n            <path\r\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\"\r\n            />\r\n          </svg>\r\n        </button>\r\n\r\n        <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</div>\r\n", styles: [".mat-timepicker-content{display:block;border-radius:4px}.mat-timepicker-content-container{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}\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: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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 });
@@ -1536,7 +1559,7 @@
             this._opened = false;
             this._openAs = 'popup';
             this._mode = 'dial';
-            this._format = '12';
+            this._format = '12h';
             /** Preferred position of the timepicker in the X axis. */
             this.xPosition = 'start';
             /** Preferred position of the timepicker in the Y axis. */
@@ -1716,7 +1739,7 @@
             instance.timepicker = this;
             instance.color = this.color;
             instance.mode = this.mode;
-            instance.isMeridiem = this.format === '12';
+            instance.isMeridiem = this.format === '12h';
             instance._assignActions(this._actionsPortal || defaultPortal, false);
         };
         /** Opens the overlay with the timepicker. */
@@ -2172,11 +2195,11 @@
         };
         return MatTimepickerInput;
     }(MatTimepickerInputBase));
-    MatTimepickerInput.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimepickerInput, deps: [{ token: i0__namespace.ElementRef }, { token: TimeAdapter, optional: true }, { token: i3.MAT_FORM_FIELD, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    MatTimepickerInput.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimepickerInput, deps: [{ token: i0__namespace.ElementRef }, { token: TimeAdapter, optional: true }, { token: i4.MAT_FORM_FIELD, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     MatTimepickerInput.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MatTimepickerInput, selector: "input[matTimepicker]", inputs: { matTimepicker: "matTimepicker" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()" }, properties: { "disabled": "disabled" }, classAttribute: "mat-timepicker-input" }, providers: [
             MAT_TIMEPICKER_VALUE_ACCESSOR,
             MAT_TIMEPICKER_VALIDATORS,
-            { provide: i5.MAT_INPUT_VALUE_ACCESSOR, useExisting: MatTimepickerInput },
+            { provide: i6.MAT_INPUT_VALUE_ACCESSOR, useExisting: MatTimepickerInput },
         ], exportAs: ["matTimepickerInput"], usesInheritance: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimepickerInput, decorators: [{
                 type: i0.Directive,
@@ -2186,7 +2209,7 @@
                         providers: [
                             MAT_TIMEPICKER_VALUE_ACCESSOR,
                             MAT_TIMEPICKER_VALIDATORS,
-                            { provide: i5.MAT_INPUT_VALUE_ACCESSOR, useExisting: MatTimepickerInput },
+                            { provide: i6.MAT_INPUT_VALUE_ACCESSOR, useExisting: MatTimepickerInput },
                         ],
                         host: {
                             class: 'mat-timepicker-input',
@@ -2199,11 +2222,11 @@
             }], ctorParameters: function () {
             return [{ type: i0__namespace.ElementRef }, { type: TimeAdapter, decorators: [{
                             type: i0.Optional
-                        }] }, { type: i3__namespace.MatFormField, decorators: [{
+                        }] }, { type: i4__namespace.MatFormField, decorators: [{
                             type: i0.Optional
                         }, {
                             type: i0.Inject,
-                            args: [i3.MAT_FORM_FIELD]
+                            args: [i4.MAT_FORM_FIELD]
                         }] }];
         }, propDecorators: { matTimepicker: [{
                     type: i0.Input
@@ -2334,14 +2357,14 @@
             MatTimepickerApply,
             MatTimepickerCancel], imports: [i2.CommonModule,
             i1$1.MatButtonModule,
-            i3.MatFormFieldModule,
-            i5.MatInputModule,
+            i4.MatFormFieldModule,
+            i6.MatInputModule,
             icon.MatIconModule,
             i2$1.MatRippleModule,
             i1$2.MatDividerModule,
             i1.OverlayModule,
             i8.PortalModule,
-            i6.A11yModule], exports: [scrolling.CdkScrollableModule,
+            i6$1.A11yModule], exports: [scrolling.CdkScrollableModule,
             MatTimepickerToggle,
             MatTimepickerToggleIcon,
             MatTimepicker,
@@ -2358,20 +2381,21 @@
             MatTimepickerApply,
             MatTimepickerCancel] });
     MatTimepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimepickerModule, providers: [
+            MatTimepickerIntl,
             MAT_TIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
             { provide: Window, useValue: window },
             { provide: MAT_DEFAULT_ACITONS, useValue: MatTimepickerDefaultActions },
         ], imports: [[
                 i2.CommonModule,
                 i1$1.MatButtonModule,
-                i3.MatFormFieldModule,
-                i5.MatInputModule,
+                i4.MatFormFieldModule,
+                i6.MatInputModule,
                 icon.MatIconModule,
                 i2$1.MatRippleModule,
                 i1$2.MatDividerModule,
                 i1.OverlayModule,
                 i8.PortalModule,
-                i6.A11yModule,
+                i6$1.A11yModule,
             ], scrolling.CdkScrollableModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MatTimepickerModule, decorators: [{
                 type: i0.NgModule,
@@ -2397,14 +2421,14 @@
                         imports: [
                             i2.CommonModule,
                             i1$1.MatButtonModule,
-                            i3.MatFormFieldModule,
-                            i5.MatInputModule,
+                            i4.MatFormFieldModule,
+                            i6.MatInputModule,
                             icon.MatIconModule,
                             i2$1.MatRippleModule,
                             i1$2.MatDividerModule,
                             i1.OverlayModule,
                             i8.PortalModule,
-                            i6.A11yModule,
+                            i6$1.A11yModule,
                         ],
                         exports: [
                             scrolling.CdkScrollableModule,
@@ -2425,6 +2449,7 @@
                             MatTimepickerCancel,
                         ],
                         providers: [
+                            MatTimepickerIntl,
                             MAT_TIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
                             { provide: Window, useValue: window },
                             { provide: MAT_DEFAULT_ACITONS, useValue: MatTimepickerDefaultActions },
@@ -2463,6 +2488,7 @@
     exports.MatTimepickerContentLayout = MatTimepickerContentLayout;
     exports.MatTimepickerDefaultActions = MatTimepickerDefaultActions;
     exports.MatTimepickerInput = MatTimepickerInput;
+    exports.MatTimepickerIntl = MatTimepickerIntl;
     exports.MatTimepickerModule = MatTimepickerModule;
     exports.MatTimepickerToggle = MatTimepickerToggle;
     exports.MatTimepickerToggleIcon = MatTimepickerToggleIcon;