Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lazycuh/angular-confirmation-capture
A singleton, global Angular service to programmatically show a confirmation box to capture an user's consent
https://github.com/lazycuh/angular-confirmation-capture
angular angular-confirmation angular-confirmation-component angular-confirmation-service angular-confirmation-ui confirmation-component confirmation-service confirmation-ui
Last synced: 12 days ago
JSON representation
A singleton, global Angular service to programmatically show a confirmation box to capture an user's consent
- Host: GitHub
- URL: https://github.com/lazycuh/angular-confirmation-capture
- Owner: lazycuh
- License: mit
- Created: 2023-11-13T01:09:56.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-18T05:24:03.000Z (5 months ago)
- Last Synced: 2024-10-30T03:36:09.268Z (about 1 month ago)
- Topics: angular, angular-confirmation, angular-confirmation-component, angular-confirmation-service, angular-confirmation-ui, confirmation-component, confirmation-service, confirmation-ui
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@lazycuh/angular-confirmation-capture
- Size: 12.5 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular-confirmation-capture - A singleton, global Angular service to programmatically show a confirmation box to capture an user's consent. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-confirmation-capture - A singleton, global Angular service to programmatically show a confirmation box to capture an user's consent. (Table of contents / Third Party Components)
README
# angular-confirmation-capture [](https://app.circleci.com/pipelines/github/lazycuh/angular-confirmation-capture?branch=main)
A singleton, global Angular service to programmatically show a confirmation box to capture an user's consent.
## Table of contents
- [Angular compatibility](#angular-compatibility)
- [Installation](#installation)
- [Available APIs](#available-apis)
* [`ConfirmationCaptureService`](#confirmationcaptureservice)
* [`ConfirmationCaptureConfiguration`](#confirmationcaptureconfiguration)
* [`Theme`](#theme)
- [Example Usage](#example-usage)
* [Code example](#code-example)
* [Result](#result)
## Angular compatibility
| This library | Angular |
| ------------ | ------- |
| 1.x.x | 16 - 18 |
## Installation
- `npm`
```
npm i -S @lazycuh/angular-confirmation-capture
```
- `pnpm`
```
pnpm i -S @lazycuh/angular-confirmation-capture
```
- `yarn`
```
yarn add @lazycuh/angular-confirmation-capture
```
## Available APIs
### `ConfirmationCaptureService`
A singleton service to programmatically show a confirmation box to capture an user's consent.
```ts
class ConfirmationCaptureService {
/**
* Set the default theme that will be used for all confirmation captures created in the future.
*
* @param theme The new theme to be used as the default.
*/
static setDefaultTheme(theme: Theme): void;
/**
* Set the default label for the cancel button. Default is `Cancel`.
*/
static setDefaultCancelButtonLabel(label: string): void;
/**
* Set the default label for the confirm button. Default is `Confirm`.
*/
static setDefaultConfirmButtonLabel(label: string): void;
/**
* Open a confirmation capture using the provided configuration. Return a promise that
* resolves to `true` if confirm button is clicked, `false` otherwise.
*
* @param confirmationCaptureConfiguration The confirmation capture configuration object.
*/
open(confirmationCaptureConfiguration: ConfirmationCaptureConfiguration): Promise;
}
```
### `ConfirmationCaptureConfiguration`
The configuration object for the confirmation capture to be created.
```ts
interface ConfirmationCaptureConfiguration {
/**
* The optional label for the cancel button. Default is `Cancel`.
*/
cancelButtonLabel?: string;
/**
* The optional class name to add for this confirmation capture.
*/
className?: string;
/**
* The optional label for the confirm button. Default is `Confirm`.
*/
confirmButtonLabel?: string;
/**
* The required confirmation capture's content to show. HTML is supported.
*/
content: string;
/**
* Whether or not the confirmation capture can be closed by clicking the backdrop.
*/
dismissible?: boolean;
/**
* The optional theme for the floating box. Default is `light`.
*/
theme?: Theme;
}
```
### `Theme`
```ts
type Theme = 'dark' | 'light';
```
## Example Usage
### Code example
```typescript
// Import the service into your class to start using it
import { ConfirmationCaptureService } from '@lazycuh/angular-confirmation-capture';
import { NotificationService } from '@lazycuh/angular-notification';
@Component({
selector: 'test-component',
template: `
Click me
`
})
export class TestComponent {
constructor(
private readonly confirmationCaptureService: ConfirmationCaptureService,
private readonly notificationService: NotificationService
) {}
openConfirmationCapture() {
this.confirmationCaptureService
.open({
content: 'Do you want to proceed?'
})
.then(confirmed => {
if (confirmed) {
this.notificationService.open({
content: 'You clicked confirmed'
});
} else {
this.notificationService.open({
content: 'You clicked cancel'
});
}
});
}
}
```
### Result
- Dark theme
- Light theme
