release: v17.2.0

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 17.2.0
+
+- feat(timepicker): add touchUi property to make some elements bigger ([#128](https://github.com/dhutaryan/ngx-mat-timepicker/pull/128))
+
 # 17.1.0
 
 - fix(timepicker): disable timepicker toggle if input is disabled ([#124](https://github.com/dhutaryan/ngx-mat-timepicker/pull/124))

projects/docs/src/app/usage/index.md

@@ -92,10 +92,16 @@ As with any standard `<input>`, it is possible to disable the timepicker input b
 
 ## Confirmation action buttons
 
-By default, the timepicker uses "OK" and "Cancel" buttons. If you want to change default buttons, you can `<mat-timepicker-actions>` element inside `<mat-timepicker>` with with own buttons marked with the matTimepickerCancel and matTimepickerApply attributes respectively. Doing so will replace default buttons by yours.
+By default, the timepicker uses "OK" and "Cancel" buttons. If you want to change default buttons, you can `<mat-timepicker-actions>` element inside `<mat-timepicker>` with with own buttons marked with the `matTimepickerCancel` and `matTimepickerApply` attributes respectively. Doing so will replace default buttons by yours.
 
 {{ NgDocActions.demo("ActionButtonsComponent") }}
 
+## Touch UI mode
+
+The timepicker normally opens as a popup under the input. However this is not ideal for touch devices that don't have as much screen real estate and need bigger click targets. For this reason `<mat-timepicker>` has a touchUi property that can be set to true in order to enable a more touch friendly UI where the timepicker opens in a dialog and has a larger elements. Applied for dial mode only.
+
+{{ NgDocActions.demo("TouchUiComponent") }}
+
 ## Manually open and close the timepicker
 
 The timepicker popup can be programmatically controlled using the `open` and `close` methods on the `<mat-timepicker>`. It also has an opened property that reflects the status of the popup.

projects/docs/src/app/usage/ng-doc.page.ts

@@ -14,6 +14,7 @@ import { DisablingComponent } from './disabling/disabling.component';
 import { ActionButtonsComponent } from './action-buttons/action-buttons.component';
 import { ManuallyToggleComponent } from './manually-toggle/manually-toggle.component';
 import { InlineComponent } from './inline/inline.component';
+import { TouchUiComponent } from './touch-ui/touch-ui.component';
 
 const Usage: NgDocPage = {
   title: `Usage`,
@@ -34,6 +35,7 @@ const Usage: NgDocPage = {
     ActionButtonsComponent,
     ManuallyToggleComponent,
     InlineComponent,
+    TouchUiComponent,
   },
 };
 

projects/docs/src/app/usage/touch-ui/touch-ui.component.html

@@ -0,0 +1,7 @@
+<mat-form-field>
+  <mat-label>Choose a time</mat-label>
+  <input type="text" matInput [matTimepicker]="timepicker" />
+  <mat-timepicker-toggle matSuffix [for]="timepicker"></mat-timepicker-toggle>
+  <mat-timepicker #timepicker touchUi></mat-timepicker>
+  <mat-hint>hh:mm</mat-hint>
+</mat-form-field>

projects/docs/src/app/usage/touch-ui/touch-ui.component.ts

@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'docs-touch-ui',
+  templateUrl: './touch-ui.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TouchUiComponent {}

projects/docs/src/app/usage/usage.module.ts

@@ -24,6 +24,7 @@ import { DisablingComponent } from './disabling/disabling.component';
 import { ActionButtonsComponent } from './action-buttons/action-buttons.component';
 import { ManuallyToggleComponent } from './manually-toggle/manually-toggle.component';
 import { InlineComponent } from './inline/inline.component';
+import { TouchUiComponent } from './touch-ui/touch-ui.component';
 
 @NgModule({
   declarations: [
@@ -40,6 +41,7 @@ import { InlineComponent } from './inline/inline.component';
     ActionButtonsComponent,
     ManuallyToggleComponent,
     InlineComponent,
+    TouchUiComponent,
   ],
   imports: [
     CommonModule,

projects/mat-timepicker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dhutaryan/ngx-mat-timepicker",
   "description": "Angular timepicker to add time which is based on material design and Angular material.",
-  "version": "17.1.0",
+  "version": "17.2.0",
   "license": "MIT",
   "author": {
     "name": "Dzmitry Hutaryan"