3.0.0 • Published 5 years ago

@terminus/ui-confirmation v3.0.0

Weekly downloads
22
License
MIT
Repository
github
Last release
5 years ago

CI/CD Status Codecov MIT License
NPM version Library size

This directive can be attached to any <ts-button> to enable a confirmation step before triggering the button's action.

Basic flow:

  1. The user clicks the button
  2. A pop-up appears asking user to cancel or confirm
  3. If the user clicks 'confirm', the original ts-button event is emitted
  4. If the user clicks 'cancel' the pop-up is closed and no button event is emitted

Table of Contents

Installation

Packages that need to be installed

  • @angular/cdk
  • @angular/common
  • @angular/core
  • @angular/flex-layout
  • @angular/forms
  • @angular/material
  • @angular/platform-browser
  • @terminus/design-tokens
  • @terminus/fe-utilities
  • @terminus/ui-button
  • @terminus/ui-checkbox
  • @terminus/ui-confirmation
  • @terminus/ui-form-field
  • @terminus/ui-icon
  • @terminus/ui-utilities
  • @terminus/ui-styles
  • @terminus/ui-spacing
  • date-fns

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-confirmation

Modules that need to be in NgModule

  • BrowserAnimationsModule
  • TsConfirmationModule

CSS imports

In your top level stylesheet, add these imports:

@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';

CSS resources

Load the needed font families by adding this link to the <head> of your application:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">

Usage

Add the directive to any ts-button:

<ts-button
  tsConfirmation
  (clicked)="myContinueFn($event)"
>Click me!</ts-button>

Cancelled event

This directive exposes a new event that can be used to determine when a user has chosen 'cancel' from the confirmation pop-up.

<ts-button
  tsConfirmation
  (cancelled)="myCancelEvent($event)"
>Click me!</ts-button>

Text customization

Confirm button

Customizes the confirmation button text in the overlay. This defaults to Confirm.

<ts-button
  tsConfirmation
  confirmationButtonText="Custom Confirmation Button Text"
>Click Me!</ts-button>

Cancel button

Customizes the text in the overlay of the cancel button; default is "Cancel".

<ts-button
  tsConfirmation
  cancelButtonText="Custom Cancel Button Text"
>Click Me!</ts-button>

Explanation text

Optional text to appear inside of the overlay, generally to use as a warning, for example, "Are you sure you want to do this action?". No explanation text exists by default.

<ts-button
  tsConfirmation
  explanationText="This will permanently delete this record."
>Click Me!</ts-button>

Position

The position of the panel is centered below the trigger by default. This position can be changed to any of the
TsConfirmationOverlayPositionTypes (above|below|before|after).

<ts-button
  tsConfirmation
  overlayPosition="before"
>Click Me!</ts-button>
tslib@angular-devkit/schematics@schematics/angular
@zalastax/nolb-_ter@infinitebrahmanuniverse/nolb-_ter@everything-registry/sub-chunk-905
3.0.0

5 years ago

2.1.7

5 years ago

2.1.6

5 years ago

2.1.5

5 years ago

2.1.4

5 years ago

2.1.3

5 years ago

2.1.2

5 years ago

2.1.1

5 years ago

2.1.0

5 years ago

2.0.7

5 years ago

2.0.6

5 years ago

2.0.5

5 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.0.1

6 years ago