@ng-vagabond-lab/ng-dsv 0.0.53 → 0.0.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,40 @@
1
+ import * as i0 from '@angular/core';
2
+
3
+ type ToastType = 'success' | 'error' | 'warning' | 'info';
4
+ interface ToastDto {
5
+ uuid?: string;
6
+ text: string;
7
+ isClose?: boolean;
8
+ type?: ToastType;
9
+ filled?: boolean;
10
+ duration?: number;
11
+ durationLeft?: number;
12
+ }
13
+
14
+ declare const MAX_TOASTS = 10;
15
+ declare const DURATION_DEFAULT = 10000;
16
+ declare const DURATION_TIMEOUT = 10;
17
+ declare class ToastService {
18
+ toastShows: i0.WritableSignal<ToastDto[]>;
19
+ toasts: i0.WritableSignal<ToastDto[]>;
20
+ showToast(toast: ToastDto): void;
21
+ consumeToast(toast: ToastDto): void;
22
+ closeToast(uuid: string): void;
23
+ removeToastFromQueue(uuid: string): void;
24
+ static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
25
+ static ɵprov: i0.ɵɵInjectableDeclaration<ToastService>;
26
+ }
27
+
28
+ type Theme = {
29
+ primary: string;
30
+ text: string;
31
+ };
32
+ declare class DsvToastComponent {
33
+ protected readonly toastService: ToastService;
34
+ constructor();
35
+ static ɵfac: i0.ɵɵFactoryDeclaration<DsvToastComponent, never>;
36
+ static ɵcmp: i0.ɵɵComponentDeclaration<DsvToastComponent, "dsv-toast", never, {}, {}, never, never, true, never>;
37
+ }
38
+
39
+ export { DURATION_DEFAULT, DURATION_TIMEOUT, DsvToastComponent, MAX_TOASTS, ToastService };
40
+ export type { Theme, ToastDto, ToastType };
@@ -0,0 +1,80 @@
1
+ import * as i1 from '@angular/common';
2
+ import { CommonModule } from '@angular/common';
3
+ import * as i0 from '@angular/core';
4
+ import { signal, Injectable, inject, effect, Component } from '@angular/core';
5
+
6
+ const MAX_TOASTS = 10;
7
+ const DURATION_DEFAULT = 10000;
8
+ const DURATION_TIMEOUT = 10;
9
+ class ToastService {
10
+ toastShows = signal([]);
11
+ toasts = signal([]);
12
+ showToast(toast) {
13
+ toast.uuid = crypto.randomUUID();
14
+ toast.type = toast.type ?? 'success';
15
+ toast.duration = toast.duration ?? DURATION_DEFAULT;
16
+ toast.durationLeft = toast.duration;
17
+ toast.filled = toast.filled ?? false;
18
+ this.toasts.update((toasts) => [...toasts, toast]);
19
+ }
20
+ consumeToast(toast) {
21
+ this.toastShows.update((toasts) => [...toasts, toast]);
22
+ let duration = 0;
23
+ const interval = setInterval(() => {
24
+ duration += DURATION_TIMEOUT;
25
+ if (duration > toast.duration) {
26
+ clearInterval(interval);
27
+ this.closeToast(toast.uuid);
28
+ }
29
+ else {
30
+ this.toastShows.update((toasts) => toasts.map((oneToast) => {
31
+ if (oneToast.uuid === toast.uuid) {
32
+ oneToast.durationLeft = toast.duration - duration;
33
+ }
34
+ return oneToast;
35
+ }));
36
+ }
37
+ }, DURATION_TIMEOUT);
38
+ this.removeToastFromQueue(toast.uuid);
39
+ }
40
+ closeToast(uuid) {
41
+ this.toastShows.update((toasts) => toasts.filter((t) => t.uuid !== uuid));
42
+ }
43
+ removeToastFromQueue(uuid) {
44
+ this.toasts.update((toasts) => toasts.filter((t) => t.uuid !== uuid));
45
+ }
46
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
47
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ToastService, providedIn: 'root' });
48
+ }
49
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ToastService, decorators: [{
50
+ type: Injectable,
51
+ args: [{
52
+ providedIn: 'root',
53
+ }]
54
+ }] });
55
+
56
+ class DsvToastComponent {
57
+ toastService = inject(ToastService);
58
+ constructor() {
59
+ effect(() => {
60
+ for (const toast of this.toastService.toasts()) {
61
+ if (this.toastService.toastShows().length < MAX_TOASTS) {
62
+ this.toastService.consumeToast(toast);
63
+ }
64
+ }
65
+ });
66
+ }
67
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DsvToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
68
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: DsvToastComponent, isStandalone: true, selector: "dsv-toast", ngImport: i0, template: "<div class=\"dsv-toast-container\">\n @for (toast of toastService.toastShows(); track toast.uuid) {\n <div\n class=\"dsv-toast\"\n [ngClass]=\"toast.type + ' ' + (toast.filled ? 'filled' : '')\"\n >\n <button\n class=\"close-button\"\n type=\"button\"\n (click)=\"toastService.closeToast(toast.uuid!)\"\n >\n X\n </button>\n @if (toast.type === \"success\") {\n <i class=\"ri-check-fill\"></i>\n } @else if (toast.type === \"info\") {\n <i class=\"ri-information-2-line\"></i>\n } @else if (toast.type === \"warning\") {\n <i class=\"ri-alert-line\"></i>\n } @else if (toast.type === \"error\") {\n <i class=\"ri-close-line\"></i>\n }\n\n {{ toast.text }}\n <div class=\"loader-container\">\n <div\n class=\"loader\"\n [style.width]=\"(toast.durationLeft! / toast.duration!) * 100 + '%'\"\n ></div>\n </div>\n </div>\n }\n</div>\n", styles: [".dsv-toast-container{position:fixed;z-index:100000000;bottom:0;right:0;display:flex;flex-direction:column;gap:8px;overflow:hidden;padding:5px}.dsv-toast-container .dsv-toast{font-size:1.2rem;border-radius:2px;box-shadow:0 0 0 .5px #0006;min-width:300px;padding:10px 15px;pointer-events:all;position:relative;display:flex;align-items:center;flex-direction:row;gap:8px;opacity:0;transform:translate(100%);animation:slideInRight .5s ease-out forwards}@keyframes slideInRight{to{opacity:1;transform:translate(0)}}.dsv-toast-container .dsv-toast.success{border-left:4px solid var(--success)}.dsv-toast-container .dsv-toast.success i{color:var(--success);font-size:1.2rem!important}.dsv-toast-container .dsv-toast.info{border-left:4px solid var(--info)}.dsv-toast-container .dsv-toast.info i{color:var(--info);font-size:1.2rem!important}.dsv-toast-container .dsv-toast.warning{border-left:4px solid var(--warning)}.dsv-toast-container .dsv-toast.warning i{color:var(--warning);font-size:1.2rem!important}.dsv-toast-container .dsv-toast.error{border-left:4px solid var(--error)}.dsv-toast-container .dsv-toast.error i{color:var(--error);font-size:1.2rem!important}.dsv-toast-container .dsv-toast .close-button{position:absolute;top:13px;right:10px;font-size:.75rem;border:0;background-color:inherit;cursor:pointer}.dsv-toast-container .dsv-toast .close-button:hover{background-color:#f9f9f9;border-radius:5px}.dsv-toast-container .dsv-toast .loader-container{position:absolute;bottom:0;left:0;width:100%}.dsv-toast-container .dsv-toast .loader-container .loader{border:1px solid #b8b8b8}::ng-deep .dark .dsv-toast .close-button{color:#fff}::ng-deep .dark .dsv-toast .close-button:hover{background-color:#212121!important}::ng-deep .light .dsv-toast{background-color:#fff;color:#000}::ng-deep .dark .dsv-toast{background-color:#212121;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
69
+ }
70
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DsvToastComponent, decorators: [{
71
+ type: Component,
72
+ args: [{ selector: 'dsv-toast', standalone: true, imports: [CommonModule], template: "<div class=\"dsv-toast-container\">\n @for (toast of toastService.toastShows(); track toast.uuid) {\n <div\n class=\"dsv-toast\"\n [ngClass]=\"toast.type + ' ' + (toast.filled ? 'filled' : '')\"\n >\n <button\n class=\"close-button\"\n type=\"button\"\n (click)=\"toastService.closeToast(toast.uuid!)\"\n >\n X\n </button>\n @if (toast.type === \"success\") {\n <i class=\"ri-check-fill\"></i>\n } @else if (toast.type === \"info\") {\n <i class=\"ri-information-2-line\"></i>\n } @else if (toast.type === \"warning\") {\n <i class=\"ri-alert-line\"></i>\n } @else if (toast.type === \"error\") {\n <i class=\"ri-close-line\"></i>\n }\n\n {{ toast.text }}\n <div class=\"loader-container\">\n <div\n class=\"loader\"\n [style.width]=\"(toast.durationLeft! / toast.duration!) * 100 + '%'\"\n ></div>\n </div>\n </div>\n }\n</div>\n", styles: [".dsv-toast-container{position:fixed;z-index:100000000;bottom:0;right:0;display:flex;flex-direction:column;gap:8px;overflow:hidden;padding:5px}.dsv-toast-container .dsv-toast{font-size:1.2rem;border-radius:2px;box-shadow:0 0 0 .5px #0006;min-width:300px;padding:10px 15px;pointer-events:all;position:relative;display:flex;align-items:center;flex-direction:row;gap:8px;opacity:0;transform:translate(100%);animation:slideInRight .5s ease-out forwards}@keyframes slideInRight{to{opacity:1;transform:translate(0)}}.dsv-toast-container .dsv-toast.success{border-left:4px solid var(--success)}.dsv-toast-container .dsv-toast.success i{color:var(--success);font-size:1.2rem!important}.dsv-toast-container .dsv-toast.info{border-left:4px solid var(--info)}.dsv-toast-container .dsv-toast.info i{color:var(--info);font-size:1.2rem!important}.dsv-toast-container .dsv-toast.warning{border-left:4px solid var(--warning)}.dsv-toast-container .dsv-toast.warning i{color:var(--warning);font-size:1.2rem!important}.dsv-toast-container .dsv-toast.error{border-left:4px solid var(--error)}.dsv-toast-container .dsv-toast.error i{color:var(--error);font-size:1.2rem!important}.dsv-toast-container .dsv-toast .close-button{position:absolute;top:13px;right:10px;font-size:.75rem;border:0;background-color:inherit;cursor:pointer}.dsv-toast-container .dsv-toast .close-button:hover{background-color:#f9f9f9;border-radius:5px}.dsv-toast-container .dsv-toast .loader-container{position:absolute;bottom:0;left:0;width:100%}.dsv-toast-container .dsv-toast .loader-container .loader{border:1px solid #b8b8b8}::ng-deep .dark .dsv-toast .close-button{color:#fff}::ng-deep .dark .dsv-toast .close-button:hover{background-color:#212121!important}::ng-deep .light .dsv-toast{background-color:#fff;color:#000}::ng-deep .dark .dsv-toast{background-color:#212121;color:#fff}\n"] }]
73
+ }], ctorParameters: () => [] });
74
+
75
+ /**
76
+ * Generated bundle index. Do not edit.
77
+ */
78
+
79
+ export { DURATION_DEFAULT, DURATION_TIMEOUT, DsvToastComponent, MAX_TOASTS, ToastService };
80
+ //# sourceMappingURL=ng-vagabond-lab-ng-dsv-ds-toast.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ng-vagabond-lab-ng-dsv-ds-toast.mjs","sources":["../../../projects/ng-dsv/ds/toast/service/toast.service.ts","../../../projects/ng-dsv/ds/toast/component/toast.component.ts","../../../projects/ng-dsv/ds/toast/component/toast.component.html","../../../projects/ng-dsv/ds/toast/ng-vagabond-lab-ng-dsv-ds-toast.ts"],"sourcesContent":["import { Injectable, signal } from '@angular/core';\nimport { ToastDto } from '../dto/toast.dto';\n\nexport const MAX_TOASTS = 10;\nexport const DURATION_DEFAULT = 10000;\nexport const DURATION_TIMEOUT = 10;\n\n@Injectable({\n providedIn: 'root',\n})\nexport class ToastService {\n toastShows = signal<ToastDto[]>([]);\n toasts = signal<ToastDto[]>([]);\n\n showToast(toast: ToastDto) {\n toast.uuid = crypto.randomUUID();\n toast.type = toast.type ?? 'success';\n toast.duration = toast.duration ?? DURATION_DEFAULT;\n toast.durationLeft = toast.duration;\n toast.filled = toast.filled ?? false;\n this.toasts.update((toasts) => [...toasts, toast]);\n }\n\n consumeToast(toast: ToastDto) {\n this.toastShows.update((toasts) => [...toasts, toast]);\n let duration = 0;\n const interval = setInterval(() => {\n duration += DURATION_TIMEOUT;\n if (duration > toast.duration!) {\n clearInterval(interval);\n this.closeToast(toast.uuid!);\n } else {\n this.toastShows.update((toasts) =>\n toasts.map((oneToast) => {\n if (oneToast.uuid === toast.uuid) {\n oneToast.durationLeft = toast.duration! - duration;\n }\n return oneToast;\n })\n );\n }\n }, DURATION_TIMEOUT);\n this.removeToastFromQueue(toast.uuid!);\n }\n\n closeToast(uuid: string) {\n this.toastShows.update((toasts) => toasts.filter((t) => t.uuid !== uuid));\n }\n\n removeToastFromQueue(uuid: string) {\n this.toasts.update((toasts) => toasts.filter((t) => t.uuid !== uuid));\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, effect, inject } from '@angular/core';\nimport { MAX_TOASTS, ToastService } from '../service/toast.service';\n\nexport type Theme = {\n primary: string;\n text: string;\n};\n\n@Component({\n selector: 'dsv-toast',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './toast.component.html',\n styleUrls: ['./toast.component.scss'],\n})\nexport class DsvToastComponent {\n protected readonly toastService = inject(ToastService);\n\n constructor() {\n effect(() => {\n for (const toast of this.toastService.toasts()) {\n if (this.toastService.toastShows().length < MAX_TOASTS) {\n this.toastService.consumeToast(toast);\n }\n }\n });\n }\n}\n","<div class=\"dsv-toast-container\">\n @for (toast of toastService.toastShows(); track toast.uuid) {\n <div\n class=\"dsv-toast\"\n [ngClass]=\"toast.type + ' ' + (toast.filled ? 'filled' : '')\"\n >\n <button\n class=\"close-button\"\n type=\"button\"\n (click)=\"toastService.closeToast(toast.uuid!)\"\n >\n X\n </button>\n @if (toast.type === \"success\") {\n <i class=\"ri-check-fill\"></i>\n } @else if (toast.type === \"info\") {\n <i class=\"ri-information-2-line\"></i>\n } @else if (toast.type === \"warning\") {\n <i class=\"ri-alert-line\"></i>\n } @else if (toast.type === \"error\") {\n <i class=\"ri-close-line\"></i>\n }\n\n {{ toast.text }}\n <div class=\"loader-container\">\n <div\n class=\"loader\"\n [style.width]=\"(toast.durationLeft! / toast.duration!) * 100 + '%'\"\n ></div>\n </div>\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ng-vagabond-lab/ng-dsv",
3
- "version": "0.0.53",
3
+ "version": "0.0.55",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.0.0",
6
6
  "@angular/core": "^20.0.0"