From cbd44f9efe96a7fe42397d04ebbdee56bfc7cae9 Mon Sep 17 00:00:00 2001 From: Dzmitry Hutaryan Date: Thu, 28 Dec 2023 00:23:10 +0100 Subject: [PATCH] release: v17.2.0 --- CHANGELOG.md | 4 ++++ projects/docs/src/app/usage/index.md | 8 +++++++- projects/docs/src/app/usage/ng-doc.page.ts | 2 ++ .../docs/src/app/usage/touch-ui/touch-ui.component.html | 7 +++++++ .../docs/src/app/usage/touch-ui/touch-ui.component.ts | 8 ++++++++ projects/docs/src/app/usage/usage.module.ts | 2 ++ projects/mat-timepicker/package.json | 2 +- 7 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 projects/docs/src/app/usage/touch-ui/touch-ui.component.html create mode 100644 projects/docs/src/app/usage/touch-ui/touch-ui.component.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index cce45d8..cd4a1f5 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/projects/docs/src/app/usage/index.md b/projects/docs/src/app/usage/index.md index 1fc5982..e6df2fe 100644 --- a/projects/docs/src/app/usage/index.md +++ b/projects/docs/src/app/usage/index.md @@ -92,10 +92,16 @@ As with any standard ``, 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 `` element inside `` 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 `` element inside `` 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 `` 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 ``. It also has an opened property that reflects the status of the popup. diff --git a/projects/docs/src/app/usage/ng-doc.page.ts b/projects/docs/src/app/usage/ng-doc.page.ts index 6cc4d51..5606bdc 100644 --- a/projects/docs/src/app/usage/ng-doc.page.ts +++ b/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, }, }; diff --git a/projects/docs/src/app/usage/touch-ui/touch-ui.component.html b/projects/docs/src/app/usage/touch-ui/touch-ui.component.html new file mode 100644 index 0000000..a98a884 --- /dev/null +++ b/projects/docs/src/app/usage/touch-ui/touch-ui.component.html @@ -0,0 +1,7 @@ + + Choose a time + + + + hh:mm + diff --git a/projects/docs/src/app/usage/touch-ui/touch-ui.component.ts b/projects/docs/src/app/usage/touch-ui/touch-ui.component.ts new file mode 100644 index 0000000..5963d39 --- /dev/null +++ b/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 {} diff --git a/projects/docs/src/app/usage/usage.module.ts b/projects/docs/src/app/usage/usage.module.ts index 9f68597..92a6cc8 100644 --- a/projects/docs/src/app/usage/usage.module.ts +++ b/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, diff --git a/projects/mat-timepicker/package.json b/projects/mat-timepicker/package.json index 3212f8b..8b8db9d 100644 --- a/projects/mat-timepicker/package.json +++ b/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"