@tolle_/tolle-ui 0.0.14-beta → 0.0.15-beta
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,94 @@
|
|
|
1
|
+
// projects/tolle/src/lib/toast-container.component.ts
|
|
2
|
+
import { Component, inject, Input } from '@angular/core';
|
|
3
|
+
import { CommonModule } from '@angular/common';
|
|
4
|
+
import { ToastService } from './toast.service';
|
|
5
|
+
import { cn } from './utils/cn';
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@angular/common";
|
|
8
|
+
export class ToastContainerComponent {
|
|
9
|
+
toastService = inject(ToastService);
|
|
10
|
+
position = 'bottom-right';
|
|
11
|
+
toasts$ = this.toastService.toasts$;
|
|
12
|
+
get positionClasses() {
|
|
13
|
+
const pos = {
|
|
14
|
+
'top-right': 'top-0 right-0 flex-col-reverse',
|
|
15
|
+
'top-left': 'top-0 left-0 flex-col-reverse',
|
|
16
|
+
'bottom-right': 'bottom-0 right-0',
|
|
17
|
+
'bottom-left': 'bottom-0 left-0',
|
|
18
|
+
'top-center': 'top-0 left-1/2 -translate-x-1/2 flex-col-reverse',
|
|
19
|
+
'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2'
|
|
20
|
+
};
|
|
21
|
+
return pos[this.position];
|
|
22
|
+
}
|
|
23
|
+
cn = cn;
|
|
24
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToastContainerComponent, isStandalone: true, selector: "tolle-toaster", inputs: { position: "position" }, ngImport: i0, template: `
|
|
26
|
+
<div [class]="cn('fixed z-[100] flex flex-col gap-2 w-full max-w-[380px] p-4', positionClasses)">
|
|
27
|
+
<div
|
|
28
|
+
*ngFor="let toast of toasts$ | async"
|
|
29
|
+
(mouseenter)="toastService.setPaused(toast.id, true)"
|
|
30
|
+
(mouseleave)="toastService.setPaused(toast.id, false)"
|
|
31
|
+
[class]="cn(
|
|
32
|
+
'relative overflow-hidden p-4 rounded-md border border-border shadow-lg flex items-start justify-between gap-4 transition-all duration-300 bg-background text-foreground',
|
|
33
|
+
toast.variant === 'destructive' && 'border-destructive/50 text-destructive'
|
|
34
|
+
)"
|
|
35
|
+
>
|
|
36
|
+
<div class="grid gap-1">
|
|
37
|
+
<div *ngIf="toast.title" class="text-sm font-semibold">{{ toast.title }}</div>
|
|
38
|
+
<div class="text-xs opacity-90">{{ toast.description }}</div>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<button (click)="toastService.remove(toast.id)" class="opacity-50 hover:opacity-100">
|
|
42
|
+
<i class="ri-close-line"></i>
|
|
43
|
+
</button>
|
|
44
|
+
|
|
45
|
+
<div
|
|
46
|
+
class="absolute bottom-0 left-0 h-1 transition-all duration-100 ease-linear"
|
|
47
|
+
[style.width.%]="(toast.remainingTime / (toast.duration || 3000)) * 100"
|
|
48
|
+
[class.bg-destructive]="toast.variant === 'destructive'"
|
|
49
|
+
[class.bg-primary]="toast.variant !== 'destructive'"
|
|
50
|
+
></div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
|
|
54
|
+
}
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastContainerComponent, decorators: [{
|
|
56
|
+
type: Component,
|
|
57
|
+
args: [{
|
|
58
|
+
selector: 'tolle-toaster',
|
|
59
|
+
standalone: true,
|
|
60
|
+
imports: [CommonModule],
|
|
61
|
+
template: `
|
|
62
|
+
<div [class]="cn('fixed z-[100] flex flex-col gap-2 w-full max-w-[380px] p-4', positionClasses)">
|
|
63
|
+
<div
|
|
64
|
+
*ngFor="let toast of toasts$ | async"
|
|
65
|
+
(mouseenter)="toastService.setPaused(toast.id, true)"
|
|
66
|
+
(mouseleave)="toastService.setPaused(toast.id, false)"
|
|
67
|
+
[class]="cn(
|
|
68
|
+
'relative overflow-hidden p-4 rounded-md border border-border shadow-lg flex items-start justify-between gap-4 transition-all duration-300 bg-background text-foreground',
|
|
69
|
+
toast.variant === 'destructive' && 'border-destructive/50 text-destructive'
|
|
70
|
+
)"
|
|
71
|
+
>
|
|
72
|
+
<div class="grid gap-1">
|
|
73
|
+
<div *ngIf="toast.title" class="text-sm font-semibold">{{ toast.title }}</div>
|
|
74
|
+
<div class="text-xs opacity-90">{{ toast.description }}</div>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<button (click)="toastService.remove(toast.id)" class="opacity-50 hover:opacity-100">
|
|
78
|
+
<i class="ri-close-line"></i>
|
|
79
|
+
</button>
|
|
80
|
+
|
|
81
|
+
<div
|
|
82
|
+
class="absolute bottom-0 left-0 h-1 transition-all duration-100 ease-linear"
|
|
83
|
+
[style.width.%]="(toast.remainingTime / (toast.duration || 3000)) * 100"
|
|
84
|
+
[class.bg-destructive]="toast.variant === 'destructive'"
|
|
85
|
+
[class.bg-primary]="toast.variant !== 'destructive'"
|
|
86
|
+
></div>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
`
|
|
90
|
+
}]
|
|
91
|
+
}], propDecorators: { position: [{
|
|
92
|
+
type: Input
|
|
93
|
+
}] } });
|
|
94
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9hc3Rlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy90b2xsZS9zcmMvbGliL3RvYXN0ZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHNEQUFzRDtBQUN0RCxPQUFPLEVBQUMsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDdkQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBQyxZQUFZLEVBQXVCLE1BQU0saUJBQWlCLENBQUM7QUFDbkUsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQzs7O0FBb0NoQyxNQUFNLE9BQU8sdUJBQXVCO0lBQ2xDLFlBQVksR0FBRyxNQUFNLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDM0IsUUFBUSxHQUFrQixjQUFjLENBQUM7SUFDbEQsT0FBTyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDO0lBQ3BDLElBQUksZUFBZTtRQUNqQixNQUFNLEdBQUcsR0FBRztZQUNWLFdBQVcsRUFBRSxnQ0FBZ0M7WUFDN0MsVUFBVSxFQUFFLCtCQUErQjtZQUMzQyxjQUFjLEVBQUUsa0JBQWtCO1lBQ2xDLGFBQWEsRUFBRSxpQkFBaUI7WUFDaEMsWUFBWSxFQUFFLGtEQUFrRDtZQUNoRSxlQUFlLEVBQUUsb0NBQW9DO1NBQ3RELENBQUM7UUFDRixPQUFPLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDNUIsQ0FBQztJQUNTLEVBQUUsR0FBRyxFQUFFLENBQUM7d0dBZlAsdUJBQXVCOzRGQUF2Qix1QkFBdUIsMkdBOUJ4Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCVCwyREE3QlMsWUFBWTs7NEZBK0JYLHVCQUF1QjtrQkFsQ25DLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGVBQWU7b0JBQ3pCLFVBQVUsRUFBRSxJQUFJO29CQUNoQixPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7b0JBQ3ZCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCVDtpQkFDRjs4QkFHVSxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiLy8gcHJvamVjdHMvdG9sbGUvc3JjL2xpYi90b2FzdC1jb250YWluZXIuY29tcG9uZW50LnRzXG5pbXBvcnQge0NvbXBvbmVudCwgaW5qZWN0LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtUb2FzdFNlcnZpY2UsIFRvYXN0LCBUb2FzdFBvc2l0aW9ufSBmcm9tICcuL3RvYXN0LnNlcnZpY2UnO1xuaW1wb3J0IHsgY24gfSBmcm9tICcuL3V0aWxzL2NuJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndG9sbGUtdG9hc3RlcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgW2NsYXNzXT1cImNuKCdmaXhlZCB6LVsxMDBdIGZsZXggZmxleC1jb2wgZ2FwLTIgdy1mdWxsIG1heC13LVszODBweF0gcC00JywgcG9zaXRpb25DbGFzc2VzKVwiPlxuICAgICAgPGRpdlxuICAgICAgICAqbmdGb3I9XCJsZXQgdG9hc3Qgb2YgdG9hc3RzJCB8IGFzeW5jXCJcbiAgICAgICAgKG1vdXNlZW50ZXIpPVwidG9hc3RTZXJ2aWNlLnNldFBhdXNlZCh0b2FzdC5pZCwgdHJ1ZSlcIlxuICAgICAgICAobW91c2VsZWF2ZSk9XCJ0b2FzdFNlcnZpY2Uuc2V0UGF1c2VkKHRvYXN0LmlkLCBmYWxzZSlcIlxuICAgICAgICBbY2xhc3NdPVwiY24oXG4gICAgICAgICAgJ3JlbGF0aXZlIG92ZXJmbG93LWhpZGRlbiBwLTQgcm91bmRlZC1tZCBib3JkZXIgYm9yZGVyLWJvcmRlciBzaGFkb3ctbGcgZmxleCBpdGVtcy1zdGFydCBqdXN0aWZ5LWJldHdlZW4gZ2FwLTQgdHJhbnNpdGlvbi1hbGwgZHVyYXRpb24tMzAwIGJnLWJhY2tncm91bmQgdGV4dC1mb3JlZ3JvdW5kJyxcbiAgICAgICAgICB0b2FzdC52YXJpYW50ID09PSAnZGVzdHJ1Y3RpdmUnICYmICdib3JkZXItZGVzdHJ1Y3RpdmUvNTAgdGV4dC1kZXN0cnVjdGl2ZSdcbiAgICAgICAgKVwiXG4gICAgICA+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJncmlkIGdhcC0xXCI+XG4gICAgICAgICAgPGRpdiAqbmdJZj1cInRvYXN0LnRpdGxlXCIgY2xhc3M9XCJ0ZXh0LXNtIGZvbnQtc2VtaWJvbGRcIj57eyB0b2FzdC50aXRsZSB9fTwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0ZXh0LXhzIG9wYWNpdHktOTBcIj57eyB0b2FzdC5kZXNjcmlwdGlvbiB9fTwvZGl2PlxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8YnV0dG9uIChjbGljayk9XCJ0b2FzdFNlcnZpY2UucmVtb3ZlKHRvYXN0LmlkKVwiIGNsYXNzPVwib3BhY2l0eS01MCBob3ZlcjpvcGFjaXR5LTEwMFwiPlxuICAgICAgICAgIDxpIGNsYXNzPVwicmktY2xvc2UtbGluZVwiPjwvaT5cbiAgICAgICAgPC9idXR0b24+XG5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNsYXNzPVwiYWJzb2x1dGUgYm90dG9tLTAgbGVmdC0wIGgtMSB0cmFuc2l0aW9uLWFsbCBkdXJhdGlvbi0xMDAgZWFzZS1saW5lYXJcIlxuICAgICAgICAgIFtzdHlsZS53aWR0aC4lXT1cIih0b2FzdC5yZW1haW5pbmdUaW1lIC8gKHRvYXN0LmR1cmF0aW9uIHx8IDMwMDApKSAqIDEwMFwiXG4gICAgICAgICAgW2NsYXNzLmJnLWRlc3RydWN0aXZlXT1cInRvYXN0LnZhcmlhbnQgPT09ICdkZXN0cnVjdGl2ZSdcIlxuICAgICAgICAgIFtjbGFzcy5iZy1wcmltYXJ5XT1cInRvYXN0LnZhcmlhbnQgIT09ICdkZXN0cnVjdGl2ZSdcIlxuICAgICAgICA+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgYFxufSlcbmV4cG9ydCBjbGFzcyBUb2FzdENvbnRhaW5lckNvbXBvbmVudCB7XG4gIHRvYXN0U2VydmljZSA9IGluamVjdChUb2FzdFNlcnZpY2UpO1xuICBASW5wdXQoKSBwb3NpdGlvbjogVG9hc3RQb3NpdGlvbiA9ICdib3R0b20tcmlnaHQnO1xuICB0b2FzdHMkID0gdGhpcy50b2FzdFNlcnZpY2UudG9hc3RzJDtcbiAgZ2V0IHBvc2l0aW9uQ2xhc3NlcygpIHtcbiAgICBjb25zdCBwb3MgPSB7XG4gICAgICAndG9wLXJpZ2h0JzogJ3RvcC0wIHJpZ2h0LTAgZmxleC1jb2wtcmV2ZXJzZScsXG4gICAgICAndG9wLWxlZnQnOiAndG9wLTAgbGVmdC0wIGZsZXgtY29sLXJldmVyc2UnLFxuICAgICAgJ2JvdHRvbS1yaWdodCc6ICdib3R0b20tMCByaWdodC0wJyxcbiAgICAgICdib3R0b20tbGVmdCc6ICdib3R0b20tMCBsZWZ0LTAnLFxuICAgICAgJ3RvcC1jZW50ZXInOiAndG9wLTAgbGVmdC0xLzIgLXRyYW5zbGF0ZS14LTEvMiBmbGV4LWNvbC1yZXZlcnNlJyxcbiAgICAgICdib3R0b20tY2VudGVyJzogJ2JvdHRvbS0wIGxlZnQtMS8yIC10cmFuc2xhdGUteC0xLzInXG4gICAgfTtcbiAgICByZXR1cm4gcG9zW3RoaXMucG9zaXRpb25dO1xuICB9XG4gIHByb3RlY3RlZCBjbiA9IGNuO1xufVxuIl19
|
package/esm2022/public-api.mjs
CHANGED
|
@@ -15,6 +15,7 @@ export * from './lib/skeleton.component';
|
|
|
15
15
|
export * from './lib/checkbox.component';
|
|
16
16
|
export * from './lib/tooltip.directive';
|
|
17
17
|
export * from './lib/toast.service';
|
|
18
|
+
export * from './lib/toaster.component';
|
|
18
19
|
export * from './lib/tolle-config';
|
|
19
20
|
export * from './lib/multi-select.component';
|
|
20
21
|
export * from './lib/calendar.component';
|
|
@@ -39,4 +40,4 @@ export * from './lib/dropdown-label.component';
|
|
|
39
40
|
export * from './lib/dropdown-menu.component';
|
|
40
41
|
export * from './lib/dropdown-separator.component';
|
|
41
42
|
export * from './lib/dropdown-trigger.directive';
|
|
42
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3RvbGxlL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxnQkFBZ0IsQ0FBQztBQUMvQixjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxzQkFBc0IsQ0FBQztBQUNyQyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLGtDQUFrQyxDQUFDO0FBQ2pELGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHFCQUFxQixDQUFBO0FBQ25DLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLDhCQUE4QixDQUFBO0FBQzVDLGNBQWMsMEJBQTBCLENBQUE7QUFDeEMsY0FBYyw4QkFBOEIsQ0FBQTtBQUM1QyxjQUFjLDZCQUE2QixDQUFBO0FBQzNDLGNBQWMsNEJBQTRCLENBQUE7QUFDMUMsY0FBYyw0QkFBNEIsQ0FBQTtBQUMxQyxjQUFjLDRCQUE0QixDQUFBO0FBQzFDLGNBQWMsZ0NBQWdDLENBQUE7QUFDOUMsY0FBYywyQkFBMkIsQ0FBQTtBQUN6QyxjQUFjLHVCQUF1QixDQUFBO0FBQ3JDLGNBQWMsaUJBQWlCLENBQUE7QUFDL0IsY0FBYyxxQkFBcUIsQ0FBQTtBQUNuQyxjQUFjLDJCQUEyQixDQUFBO0FBQ3pDLGNBQWMsYUFBYSxDQUFBO0FBQzNCLGNBQWMsOEJBQThCLENBQUE7QUFDNUMsY0FBYyxtQ0FBbUMsQ0FBQTtBQUNqRCxjQUFjLGdDQUFnQyxDQUFBO0FBQzlDLGNBQWMscUJBQXFCLENBQUE7QUFDbkMsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLGdDQUFnQyxDQUFBO0FBQzlDLGNBQWMsK0JBQStCLENBQUE7QUFDN0MsY0FBYyxvQ0FBb0MsQ0FBQztBQUNuRCxjQUFjLGtDQUFrQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiB0b2xsZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL3V0aWxzL2NuJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2J1dHRvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW5wdXQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NhcmQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlbGVjdC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VsZWN0LWl0ZW0uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlbGVjdC1ncm91cC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VsZWN0LXNlcGFyYXRvci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3dpdGNoLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9iYWRnZS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2tlbGV0b24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NoZWNrYm94LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi90b29sdGlwLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi90b2FzdC5zZXJ2aWNlJ1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdG9hc3Rlci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdG9sbGUtY29uZmlnJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL211bHRpLXNlbGVjdC5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jYWxlbmRhci5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tYXNrZWQtaW5wdXQuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGF0ZS1waWNrZXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvcGFnaW5hdGlvbi5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9kYXRhLXRhYmxlLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL3RvbGxlLWNlbGwuZGlyZWN0aXZlJ1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYWNjb3JkaW9uLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGFsLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGFsLXJlZidcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGFsLnNlcnZpY2UnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tb2RhbC1zdGFjay5zZXJ2aWNlJ1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbW9kYWwnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9idXR0b24tZ3JvdXAuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGF0ZS1yYW5nZS1waWNrZXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvcmFuZ2UtY2FsZW5kYXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdGhlbWUuc2VydmljZSdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2Ryb3Bkb3duLWl0ZW0uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2Ryb3Bkb3duLWxhYmVsLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2Ryb3Bkb3duLW1lbnUuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZHJvcGRvd24tc2VwYXJhdG9yLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9kcm9wZG93bi10cmlnZ2VyLmRpcmVjdGl2ZSc7XG4iXX0=
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import { twMerge } from 'tailwind-merge';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Component, Input, forwardRef, Injectable, Optional, HostListener, ViewChild, ContentChildren, EventEmitter, Output, Directive, PLATFORM_ID, Inject, InjectionToken, APP_INITIALIZER,
|
|
4
|
+
import { Component, Input, forwardRef, Injectable, Optional, HostListener, ViewChild, ContentChildren, EventEmitter, Output, Directive, inject, PLATFORM_ID, Inject, InjectionToken, APP_INITIALIZER, ChangeDetectorRef, ChangeDetectionStrategy, TemplateRef, Injector } from '@angular/core';
|
|
5
5
|
import * as i1 from '@angular/common';
|
|
6
6
|
import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
|
|
7
7
|
import { cva } from 'class-variance-authority';
|
|
@@ -1159,6 +1159,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1159
1159
|
args: [{ providedIn: 'root' }]
|
|
1160
1160
|
}], ctorParameters: () => [] });
|
|
1161
1161
|
|
|
1162
|
+
// projects/tolle/src/lib/toast-container.component.ts
|
|
1163
|
+
class ToastContainerComponent {
|
|
1164
|
+
toastService = inject(ToastService);
|
|
1165
|
+
position = 'bottom-right';
|
|
1166
|
+
toasts$ = this.toastService.toasts$;
|
|
1167
|
+
get positionClasses() {
|
|
1168
|
+
const pos = {
|
|
1169
|
+
'top-right': 'top-0 right-0 flex-col-reverse',
|
|
1170
|
+
'top-left': 'top-0 left-0 flex-col-reverse',
|
|
1171
|
+
'bottom-right': 'bottom-0 right-0',
|
|
1172
|
+
'bottom-left': 'bottom-0 left-0',
|
|
1173
|
+
'top-center': 'top-0 left-1/2 -translate-x-1/2 flex-col-reverse',
|
|
1174
|
+
'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2'
|
|
1175
|
+
};
|
|
1176
|
+
return pos[this.position];
|
|
1177
|
+
}
|
|
1178
|
+
cn = cn;
|
|
1179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToastContainerComponent, isStandalone: true, selector: "tolle-toaster", inputs: { position: "position" }, ngImport: i0, template: `
|
|
1181
|
+
<div [class]="cn('fixed z-[100] flex flex-col gap-2 w-full max-w-[380px] p-4', positionClasses)">
|
|
1182
|
+
<div
|
|
1183
|
+
*ngFor="let toast of toasts$ | async"
|
|
1184
|
+
(mouseenter)="toastService.setPaused(toast.id, true)"
|
|
1185
|
+
(mouseleave)="toastService.setPaused(toast.id, false)"
|
|
1186
|
+
[class]="cn(
|
|
1187
|
+
'relative overflow-hidden p-4 rounded-md border border-border shadow-lg flex items-start justify-between gap-4 transition-all duration-300 bg-background text-foreground',
|
|
1188
|
+
toast.variant === 'destructive' && 'border-destructive/50 text-destructive'
|
|
1189
|
+
)"
|
|
1190
|
+
>
|
|
1191
|
+
<div class="grid gap-1">
|
|
1192
|
+
<div *ngIf="toast.title" class="text-sm font-semibold">{{ toast.title }}</div>
|
|
1193
|
+
<div class="text-xs opacity-90">{{ toast.description }}</div>
|
|
1194
|
+
</div>
|
|
1195
|
+
|
|
1196
|
+
<button (click)="toastService.remove(toast.id)" class="opacity-50 hover:opacity-100">
|
|
1197
|
+
<i class="ri-close-line"></i>
|
|
1198
|
+
</button>
|
|
1199
|
+
|
|
1200
|
+
<div
|
|
1201
|
+
class="absolute bottom-0 left-0 h-1 transition-all duration-100 ease-linear"
|
|
1202
|
+
[style.width.%]="(toast.remainingTime / (toast.duration || 3000)) * 100"
|
|
1203
|
+
[class.bg-destructive]="toast.variant === 'destructive'"
|
|
1204
|
+
[class.bg-primary]="toast.variant !== 'destructive'"
|
|
1205
|
+
></div>
|
|
1206
|
+
</div>
|
|
1207
|
+
</div>
|
|
1208
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
|
|
1209
|
+
}
|
|
1210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastContainerComponent, decorators: [{
|
|
1211
|
+
type: Component,
|
|
1212
|
+
args: [{
|
|
1213
|
+
selector: 'tolle-toaster',
|
|
1214
|
+
standalone: true,
|
|
1215
|
+
imports: [CommonModule],
|
|
1216
|
+
template: `
|
|
1217
|
+
<div [class]="cn('fixed z-[100] flex flex-col gap-2 w-full max-w-[380px] p-4', positionClasses)">
|
|
1218
|
+
<div
|
|
1219
|
+
*ngFor="let toast of toasts$ | async"
|
|
1220
|
+
(mouseenter)="toastService.setPaused(toast.id, true)"
|
|
1221
|
+
(mouseleave)="toastService.setPaused(toast.id, false)"
|
|
1222
|
+
[class]="cn(
|
|
1223
|
+
'relative overflow-hidden p-4 rounded-md border border-border shadow-lg flex items-start justify-between gap-4 transition-all duration-300 bg-background text-foreground',
|
|
1224
|
+
toast.variant === 'destructive' && 'border-destructive/50 text-destructive'
|
|
1225
|
+
)"
|
|
1226
|
+
>
|
|
1227
|
+
<div class="grid gap-1">
|
|
1228
|
+
<div *ngIf="toast.title" class="text-sm font-semibold">{{ toast.title }}</div>
|
|
1229
|
+
<div class="text-xs opacity-90">{{ toast.description }}</div>
|
|
1230
|
+
</div>
|
|
1231
|
+
|
|
1232
|
+
<button (click)="toastService.remove(toast.id)" class="opacity-50 hover:opacity-100">
|
|
1233
|
+
<i class="ri-close-line"></i>
|
|
1234
|
+
</button>
|
|
1235
|
+
|
|
1236
|
+
<div
|
|
1237
|
+
class="absolute bottom-0 left-0 h-1 transition-all duration-100 ease-linear"
|
|
1238
|
+
[style.width.%]="(toast.remainingTime / (toast.duration || 3000)) * 100"
|
|
1239
|
+
[class.bg-destructive]="toast.variant === 'destructive'"
|
|
1240
|
+
[class.bg-primary]="toast.variant !== 'destructive'"
|
|
1241
|
+
></div>
|
|
1242
|
+
</div>
|
|
1243
|
+
</div>
|
|
1244
|
+
`
|
|
1245
|
+
}]
|
|
1246
|
+
}], propDecorators: { position: [{
|
|
1247
|
+
type: Input
|
|
1248
|
+
}] } });
|
|
1249
|
+
|
|
1162
1250
|
class ThemeService {
|
|
1163
1251
|
document;
|
|
1164
1252
|
platformId;
|
|
@@ -3875,5 +3963,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3875
3963
|
* Generated bundle index. Do not edit.
|
|
3876
3964
|
*/
|
|
3877
3965
|
|
|
3878
|
-
export { AccordionComponent, AccordionItemComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, PaginationComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, ThemeService, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
|
|
3966
|
+
export { AccordionComponent, AccordionItemComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, PaginationComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
|
|
3879
3967
|
//# sourceMappingURL=tolle_-tolle-ui.mjs.map
|