ngx-pmr-duration-picker

Table of contents

• Overview
• How to use it
• Examples
  • NgModel
  • FormsModule
  • Time
  • Increased Font
  • Disable Switch
• Properties
• Run test/docs application
• Testing
• Build
• Deploy
• CI/CD
• Issues

Overview

ngx-pmr-duration-picker is an Angular library to display and manage durations on your application following the standard ISO 8601.

It is able to work with both ngModel and FormsModule, and allows you to customize it to best match your application.

It parses and allows you to edit durations on a pretty and string modes.

Live examples and documentation can be found on the documentation page.

How to use it

You can install this lib with the following command:

npm i --save ngx-pmr-duration-picker

Then you need to import it into your module:

import { NgxPmrDurationPickerModule } from 'ngx-pmr-duration-picker';

Then you can use it on your angular components as described on the following section.

Examples

NgModel

HTML

<pmr-duration-picker [(ngModel)]="duration"></pmr-duration-picker>

TS

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  duration = 'P4DT5H6M7S';
}

FormsModule

HTML

<form [formGroup]="formGroup">
  <pmr-duration-picker formControlName="duration"></pmr-duration-picker>
</form>

TS

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  formGroup = this.formBuilder.group({
    duration: ['P1Y2M3W4DT5H6M7S']
  });

  constructor(private formBuilder: FormBuilder) {
  }
}

Time

HTML

<pmr-duration-picker [displayedItems]="displayedItems" [(ngModel)]="duration"></pmr-duration-picker>

TS

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  displayedItems = ['TH', 'TM', 'TS'];
  duration = 'PT1H2M3S';
}

Increased Font

HTML

<pmr-duration-picker style="font-size: 30px" [(ngModel)]="duration"></pmr-duration-picker>

TS

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  duration = 'PT1H2M3S';
}

Disable switch

HTML

<pmr-duration-picker [disableSwitchMode]="true" [(ngModel)]="duration"></pmr-duration-picker>

TS

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  duration = 'PT1H2M3S';
}

Properties

| Property | Type | Datatype | Description | Default Value | | --- | --- | --- | --- | --- | | displayedItems | Input | string[] | List of duration units to be displayed. Time fields have a T prefix. Possible values are: Y, M, W, D TH, TM, TS. | ['Y', 'M', 'W', 'D', 'TH', 'TM', 'TS'] | | disableLabel | Input | boolean | If set to true, disables the duration label. | false | | disableSwitchMode | Input | boolean | If set to true, disables the switch mode between pretty and string modes. | false | | duration | Input | string | Allows to override form field label text. | Duration | | valid | Output | EventEmitter | Boolean EventEmitter that reports wether the duration string is valid or not. | |

Run test/docs application

In order to run the test/documentation page, you first need to build the library and run it in watched mode to be able to catch automatically catch your changes.

ng build ngx-pmr-duration-picker --watch

Then on another terminal window we just need to run the application:

npm start

Testing

This lib is covered by cypress component tests.

Tests are automatically run after every build, but they can also be run through the following command:

npm run cy:run:component

or by opening cypress tool in headed mode and by choosing component tests.

npm run cy:open

Build

We can build this lib using the following command:

ng build ngx-pmr-duration-picker

In development mode, to see the changes on our test application, we can append the --watch flag.

To build a production artifact, we can add the --configuration=production flag.

Deploy

We can deploy this lib to a npm registry using the following command:

npm publish dist/ngx-pmr-duration-picker

CI/CD

We are using GitHub actions workflows to build this lib, run cypress component unit tests on every pull request commit commit.

We also ensure continuous delivery publishing the artifact to npm registry and drafting a new release when merging the PR to master.

For the documentation/test page, we also have a GitHub actions workflow to deploy it to GitHub pages.

Issues

For issues reporting, please fill one of the following template forms.

To avoid duplicate issues, please have a look on the existing issues first.