francescoborzi/ngx-duration-picker

Angular component for ISO_8601 durations

ngx-duration-picker's Issues

Numeric input/output

We store durations on our APIs in terms of seconds/minutes/etc and not ISO durations. It would be nice if the component would allow something like "seconds in, seconds out". Example:

<app-duration-picker [(ngModel)]="durationInSeconds" type="seconds/ISO/minutes/etc"></app-duration-picker>

Also, it would be nice to change the prefix of this project from app-duration-picker to something like ngx-duration-picker to avoid confusion with first and third party components.

Add negative duration

It would be nice to allow negative timeshift. At leaste the ISO8601 allows a negative notation.

Not compatible with angular 16

StaticInjectorError

Hi,

I just tried this component in my project but when I try it I get the following error:

ERROR Error: StaticInjectorError(MystaffAppModule)[NgIf -> ViewContainerRef]: 
  StaticInjectorError(Platform: core)[NgIf -> ViewContainerRef]: 
    NullInjectorError: No provider for ViewContainerRef!

Apprently the error is here:

      <tr *ngIf="config.showLetters">     <<===== Error
        <td *ngIf="config.showNegative"></td>
        <td *ngIf="config.showYears">Y</td>
        <td *ngIf="config.showMonths">M</td>
        <td *ngIf="config.showWeeks">W</td>
        <td *ngIf="config.showDays">D</td>
        <td *ngIf="config.showHours">H</td>
        <td *ngIf="config.showMinutes">M</td>
        <td *ngIf="config.showSeconds">S</td>
      </tr>

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	tslint

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency @types/jasminewd2 to v2.0.13
• chore(deps): update dependency @types/node to v14.18.63
• chore(deps): update dependency karma-jasmine to v4.0.2
• chore(deps): update dependency jasmine-core to v3.99.1
• chore(deps): update dependency karma-chrome-launcher to v3.2.0
• chore(deps): update dependency ts-node to v10.9.2
• fix(deps): update dependency tslib to v2.6.3
• chore(deps): update actions/cache action to v4
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency @types/jasmine to v5
• chore(deps): update dependency @types/node to v20
• chore(deps): update dependency jasmine-core to v5
• chore(deps): update dependency karma-jasmine to v5
• chore(deps): update dependency karma-jasmine-html-reporter to v2
• chore(deps): update dependency ng-packagr to v18
• chore(deps): update dependency typescript to v5
• chore(deps): update nick-invision/retry action to v3
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency karma to v6.3.16 [security]
• chore(deps): update dependency karma-firefox-launcher to v2.1.3
• chore(deps): update dependency ng-packagr to v12.2.7

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update angular-cli monorepo to v12.2.18 (@angular-devkit/build-angular, @angular-devkit/core, @angular/cli)
• chore(deps): update dependency @types/jasmine to v3.10.18
• chore(deps): update dependency bootstrap to v4.6.2
• fix(deps): update angular monorepo (@angular/animations, @angular/common, @angular/compiler, @angular/compiler-cli, @angular/core, @angular/forms, @angular/language-service, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, zone.js)
• chore(deps): update dependency typescript to v4.9.5
• chore(deps): update angular-cli monorepo to v18 (major) (@angular-devkit/build-angular, @angular-devkit/core, @angular/cli)
• fix(deps): update angular monorepo to v18 (major) (@angular/animations, @angular/common, @angular/compiler, @angular/compiler-cli, @angular/core, @angular/forms, @angular/language-service, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router)
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency bootstrap to v5
• fix(deps): update dependency rxjs to v7

Detected dependencies

github-actions

.github/workflows/main.yml

• actions/checkout v2
• actions/setup-node v2
• actions/cache v2
• nick-invision/retry v2
• nick-invision/retry v2
• nick-invision/retry v2
• nick-invision/retry v2

npm

package.json

• @angular/animations 12.2.11
• @angular/common 12.2.11
• @angular/compiler 12.2.11
• @angular/core 12.2.11
• @angular/forms 12.2.11
• @angular/platform-browser 12.2.11
• @angular/platform-browser-dynamic 12.2.11
• @angular/router 12.2.11
• rxjs 6.6.7
• tslib 2.3.1
• zone.js 0.11.4
• @angular-devkit/build-angular 12.2.12
• @angular-devkit/core 12.2.12
• @angular/cli 12.2.12
• @angular/compiler-cli 12.2.11
• @angular/language-service 12.2.11
• @types/jasmine 3.10.1
• @types/jasminewd2 2.0.10
• @types/node 14.18.48
• bootstrap 4.6.0
• codelyzer 6.0.2
• jasmine-core 3.10.1
• jasmine-spec-reporter 7.0.0
• karma 6.3.6
• karma-chrome-launcher 3.1.0
• karma-coverage-istanbul-reporter 3.0.3
• karma-firefox-launcher 2.1.1
• karma-jasmine 4.0.1
• karma-jasmine-html-reporter 1.7.0
• ng-packagr 12.2.4
• ts-node 10.4.0
• tslint 6.1.3
• typescript 4.3.5

projects/ngx-duration-picker/package.json

• tslib 2.3.1
• @angular/common *
• @angular/core *

---

• Check this box to trigger a request for Renovate to run again on this repository

error after updating to Angular 9

ngx-duration-picker version: 3.3.1

ERROR in node_modules/ngx-duration-picker/lib/duration-picker.component.d.ts:60:21 - error TS2694: Namespace '"/home/chris/Desktop/current/Clients/WebUI9/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

I usually see this type of error because of a package version mismatch with the Angular version. But I can't seem to find the correct version for ngx-duration-picker

Only allow numbers as input

The widgets currently allow entering chars as input. According to the input widget this doesn't make sense and seems to result in a null value for the duration.

Maybe it is possible to restrict the user input to numbers to increase the user experience.

The labels are not working

Hi,
You have a cool package but the labels are not working...

I suppose that the unitSteps are not working either: take a look at augury's config on your component: ( Not all the config are there... )

Configurable labels with units

Currently there is option to show letters above unit controls but it would be nice to be able to put there some custom labels.

I'll work on that later.

Output format

Currently only possible output format is default ISO. It would be nice to be able to configure that and get number or custom string as output.
It can go even further and since duration picker default use is to determine duration of some event / annotation etc. it would be great to pass startTime to ngx-duration-picker and get endTime as Date or moment object.

I'll try to work on that later.

Value set to 0

It want to be able to set the duration to 0 (PT0S)
I set all values in the widget to 0.
Expected behaviour: Value is set to PT0S or PT0D...
Current behavior: Value is set to null.

LICENSE file

Could you please add LICENSE file? I can see here that license is MIT, but such a file is sometimes needed for formal verification of libraries used in project. I can submit PR if you don't have time for that.

Thanks for that lib, regards!

Error while trying to use `previewFormat` with AOT

The package has successfully installed and is perfectly running but when i try to add previewFormat in the options i get below error

core.js:4197 ERROR Error: Angular JIT compilation failed: '@angular/compiler' not loaded!

• JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
• Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
• Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
  at getCompilerFacade (core.js:562)
  at Function.get (core.js:26205)
  at getComponentDef (core.js:1826)
  at extractDirectiveDef (core.js:1650)
  at Array.map ()
  at def.directiveDefs (core.js:1633)
  at createTView (core.js:7406)
  at getOrCreateTComponentView (core.js:7355)
  at createRootComponentView (core.js:13413)
  at ComponentFactory$1.create (core.js:22149)

My Code looks like below

    <ngx-duration-picker
          formControlName="period"
          [options]="{ previewFormat: '{{ H }}', customOutputFormat: 'H', showMonths: false, showSeconds: false, showYears: false, showWeeks: false }"></ngx-duration-picker>

showNegative feature not handled in CustomOutput format seconds

Actually is not handled in get valueInSeconds() function.

Step increment / decrement for each time unit

It would be nice to provide the component with step value on each time unit increment / decrement.
For example, in options, pass:
options = {
...,
hourStep: 10,
minuteStep: 5,
...
}

So, when the user click on Up / Down arrows,
update the time unit value according to time step value

Preview format

I understand that current format is a default, ISO-consistent format, but it would be nice to have possibility to pass some text (probably translatable) as preview, so it can show labels like

5 hours 0 minutes 15 seconds

Thanks for that lib, regards!

Possibility to disable duration picker control

Is it possible to disable the control? We have an issue that only an user with a special role is able to change the duration. So, if the user does not have the right permission it must be possible to make the control readonly.

One solution is to render only a Tag when the permission is not give but maybe it can although be possible to disable the control.