otimus-library 0.2.33 → 0.2.35
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.
- package/esm2022/lib/components/oc-autocomplete/oc-autocomplete.component.mjs +4 -4
- package/esm2022/lib/components/oc-checkbox/oc-checkbox.component.mjs +34 -10
- package/esm2022/lib/components/oc-menu/oc-menu.component.mjs +1 -1
- package/esm2022/lib/components/oc-toast/oc-toast.component.mjs +4 -4
- package/esm2022/lib/services/oc-toast.service.mjs +23 -6
- package/fesm2022/otimus-library.mjs +60 -19
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/lib/components/oc-checkbox/oc-checkbox.component.d.ts +7 -5
- package/lib/services/oc-toast.service.d.ts +3 -0
- package/package.json +1 -1
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { Injectable } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class OcToastService {
|
|
4
|
-
constructor() {
|
|
4
|
+
constructor(cdr) {
|
|
5
|
+
this.cdr = cdr;
|
|
5
6
|
this.toastList = [];
|
|
6
7
|
this.isRunning = false;
|
|
7
8
|
this.openToast = (toastStatus, toastMessage, toastCounter, promiseKey) => {
|
|
@@ -16,8 +17,9 @@ export class OcToastService {
|
|
|
16
17
|
const toastExists = this.toastList.some((to) => {
|
|
17
18
|
return to.status === toastStatus && to.message === toastMessage;
|
|
18
19
|
});
|
|
19
|
-
if (toastExists)
|
|
20
|
+
if (toastExists) {
|
|
20
21
|
return;
|
|
22
|
+
}
|
|
21
23
|
const keyExists = this.toastList.find((to) => to.promiseKey === toast.promiseKey);
|
|
22
24
|
if (keyExists) {
|
|
23
25
|
this.toastList = this.toastList.map((to) => {
|
|
@@ -31,6 +33,9 @@ export class OcToastService {
|
|
|
31
33
|
if (!this.isRunning) {
|
|
32
34
|
this.renderToasts();
|
|
33
35
|
}
|
|
36
|
+
this.cdr.markForCheck();
|
|
37
|
+
this.cdr.detectChanges();
|
|
38
|
+
setTimeout(() => this.cdr.detectChanges(), 200);
|
|
34
39
|
};
|
|
35
40
|
}
|
|
36
41
|
closeToast(id) {
|
|
@@ -41,10 +46,16 @@ export class OcToastService {
|
|
|
41
46
|
return to;
|
|
42
47
|
});
|
|
43
48
|
this.currentToast = this.toastList[0];
|
|
49
|
+
this.cdr.markForCheck();
|
|
50
|
+
this.cdr.detectChanges();
|
|
51
|
+
setTimeout(() => this.cdr.detectChanges(), 200);
|
|
44
52
|
}
|
|
45
53
|
renderToasts() {
|
|
46
54
|
if (this.toastList.length === 0) {
|
|
47
55
|
this.isRunning = false;
|
|
56
|
+
this.cdr.markForCheck();
|
|
57
|
+
this.cdr.detectChanges();
|
|
58
|
+
setTimeout(() => this.cdr.detectChanges(), 200);
|
|
48
59
|
return;
|
|
49
60
|
}
|
|
50
61
|
this.isRunning = true;
|
|
@@ -53,6 +64,9 @@ export class OcToastService {
|
|
|
53
64
|
if (this.toastList.length === 0) {
|
|
54
65
|
clearInterval(toastInterval);
|
|
55
66
|
this.isRunning = false;
|
|
67
|
+
this.cdr.markForCheck();
|
|
68
|
+
this.cdr.detectChanges();
|
|
69
|
+
setTimeout(() => this.cdr.detectChanges(), 200);
|
|
56
70
|
return;
|
|
57
71
|
}
|
|
58
72
|
this.currentToast = this.toastList[0];
|
|
@@ -66,15 +80,18 @@ export class OcToastService {
|
|
|
66
80
|
clearInterval(toastInterval);
|
|
67
81
|
this.renderToasts();
|
|
68
82
|
}
|
|
83
|
+
this.cdr.markForCheck();
|
|
84
|
+
this.cdr.detectChanges();
|
|
85
|
+
setTimeout(() => this.cdr.detectChanges(), 200);
|
|
69
86
|
}, 1000);
|
|
70
87
|
}
|
|
71
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
88
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToastService, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
72
89
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToastService, providedIn: 'root' }); }
|
|
73
90
|
}
|
|
74
91
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToastService, decorators: [{
|
|
75
92
|
type: Injectable,
|
|
76
93
|
args: [{
|
|
77
|
-
providedIn: 'root'
|
|
94
|
+
providedIn: 'root',
|
|
78
95
|
}]
|
|
79
|
-
}] });
|
|
80
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
96
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
|
|
97
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2MtdG9hc3Quc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL290aW11cy1saWJyYXJ5L3NyYy9saWIvc2VydmljZXMvb2MtdG9hc3Quc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQXFCLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQTs7QUFvQjdELE1BQU0sT0FBTyxjQUFjO0lBQ3pCLFlBQW9CLEdBQXNCO1FBQXRCLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBQzFDLGNBQVMsR0FBZ0IsRUFBRSxDQUFBO1FBQzNCLGNBQVMsR0FBWSxLQUFLLENBQUE7UUFpQjFCLGNBQVMsR0FBRyxDQUNWLFdBQTRCLEVBQzVCLFlBQW9CLEVBQ3BCLFlBQXFCLEVBQ3JCLFVBQW1CLEVBQ2IsRUFBRTtZQUNSLE1BQU0sS0FBSyxHQUFHO2dCQUNaLEVBQUUsRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLEdBQUcsQ0FBQztnQkFDdEYsT0FBTyxFQUFFLFlBQVksSUFBSSxDQUFDO2dCQUMxQixNQUFNLEVBQUUsV0FBVztnQkFDbkIsT0FBTyxFQUFFLFlBQVk7Z0JBQ3JCLFVBQVU7Z0JBQ1YsWUFBWSxFQUFFLElBQUk7YUFDbkIsQ0FBQTtZQUVELE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUU7Z0JBQzdDLE9BQU8sRUFBRSxDQUFDLE1BQU0sS0FBSyxXQUFXLElBQUksRUFBRSxDQUFDLE9BQU8sS0FBSyxZQUFZLENBQUE7WUFDakUsQ0FBQyxDQUFDLENBQUE7WUFFRixJQUFJLFdBQVcsRUFBRSxDQUFDO2dCQUNoQixPQUFNO1lBQ1IsQ0FBQztZQUVELE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLENBQUMsVUFBVSxLQUFLLEtBQUssQ0FBQyxVQUFVLENBQUMsQ0FBQTtZQUVqRixJQUFJLFNBQVMsRUFBRSxDQUFDO2dCQUNkLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLEVBQUUsRUFBRTtvQkFDekMsSUFBSSxFQUFFLENBQUMsVUFBVSxLQUFLLFVBQVUsRUFBRSxDQUFDO3dCQUNqQyxPQUFPLEVBQUUsR0FBRyxLQUFLLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxDQUFBO29CQUMxQyxDQUFDO29CQUNELE9BQU8sRUFBRSxDQUFBO2dCQUNYLENBQUMsQ0FBQyxDQUFBO1lBQ0osQ0FBQztZQUVELElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFBO1lBRTFCLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7Z0JBQ3BCLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQTtZQUNyQixDQUFDO1lBQ0QsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQTtZQUN2QixJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFBO1lBQ3hCLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxFQUFFLEdBQUcsQ0FBQyxDQUFBO1FBQ2pELENBQUMsQ0FBQTtJQTdEMkMsQ0FBQztJQUs3QyxVQUFVLENBQUMsRUFBVTtRQUNuQixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUU7WUFDekMsSUFBSSxFQUFFLENBQUMsRUFBRSxLQUFLLEVBQUUsRUFBRSxDQUFDO2dCQUNqQixPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFBO1lBQzlCLENBQUM7WUFDRCxPQUFPLEVBQUUsQ0FBQTtRQUNYLENBQUMsQ0FBQyxDQUFBO1FBRUYsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFBO1FBQ3JDLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUE7UUFDdkIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsQ0FBQTtRQUN4QixVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsRUFBRSxHQUFHLENBQUMsQ0FBQTtJQUNqRCxDQUFDO0lBOENELFlBQVk7UUFDVixJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ2hDLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFBO1lBQ3RCLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUE7WUFDdkIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsQ0FBQTtZQUN4QixVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsRUFBRSxHQUFHLENBQUMsQ0FBQTtZQUMvQyxPQUFNO1FBQ1IsQ0FBQztRQUVELElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFBO1FBQ3JCLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQTtRQUVyQyxNQUFNLGFBQWEsR0FBRyxXQUFXLENBQUMsR0FBRyxFQUFFO1lBQ3JDLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7Z0JBQ2hDLGFBQWEsQ0FBQyxhQUFhLENBQUMsQ0FBQTtnQkFDNUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUE7Z0JBQ3RCLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUE7Z0JBQ3ZCLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxFQUFFLENBQUE7Z0JBQ3hCLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxFQUFFLEdBQUcsQ0FBQyxDQUFBO2dCQUMvQyxPQUFNO1lBQ1IsQ0FBQztZQUVELElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQTtZQUNyQyxJQUFJLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxLQUFLLFlBQVksRUFBRSxDQUFDO2dCQUM5QyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxDQUFBO1lBQzdCLENBQUM7WUFFRCxJQUFJLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxJQUFJLENBQUMsRUFBRSxDQUFDO2dCQUNuQyxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUU7b0JBQzVDLE9BQU8sRUFBRSxDQUFDLE1BQU0sS0FBSyxJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sSUFBSSxFQUFFLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFBO2dCQUMzRixDQUFDLENBQUMsQ0FBQTtnQkFDRixhQUFhLENBQUMsYUFBYSxDQUFDLENBQUE7Z0JBQzVCLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQTtZQUNyQixDQUFDO1lBQ0QsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQTtZQUN2QixJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFBO1lBQ3hCLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxFQUFFLEdBQUcsQ0FBQyxDQUFBO1FBQ2pELENBQUMsRUFBRSxJQUFJLENBQUMsQ0FBQTtJQUNWLENBQUM7K0dBdEdVLGNBQWM7bUhBQWQsY0FBYyxjQUhiLE1BQU07OzRGQUdQLGNBQWM7a0JBSjFCLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBRW5CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0b3JSZWYsIEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJ1xuaW1wb3J0IHsgVG9hc3RUeXBlIH0gZnJvbSAnLi4vaW50ZXJmYWNlcy9vYy10b2FzdCdcblxudHlwZSBUb2FzdFN0YXR1c1R5cGUgPVxuICB8ICdlcnJvJ1xuICB8ICdlcnJvcidcbiAgfCAnc3VjY2VzcydcbiAgfCAnw6l4aXRvJ1xuICB8ICdzdWNlc3NvJ1xuICB8ICdjYXJyZWdhbmRvJ1xuICB8ICdjYXJnYW5kbydcbiAgfCAnbG9hZGluZydcbiAgfCAnaW5mb3JtYcOnw6NvJ1xuICB8ICdpbmZvcm1hY2nDs24nXG4gIHwgJ2luZm9ybWF0aW9uJ1xuXG5ASW5qZWN0YWJsZSh7XG4gIHByb3ZpZGVkSW46ICdyb290JyxcbiAgXG59KVxuZXhwb3J0IGNsYXNzIE9jVG9hc3RTZXJ2aWNlIHtcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmKXt9XG4gIHRvYXN0TGlzdDogVG9hc3RUeXBlW10gPSBbXVxuICBpc1J1bm5pbmc6IGJvb2xlYW4gPSBmYWxzZVxuICBjdXJyZW50VG9hc3QhOiBUb2FzdFR5cGVcblxuICBjbG9zZVRvYXN0KGlkOiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLnRvYXN0TGlzdCA9IHRoaXMudG9hc3RMaXN0Lm1hcCgodG8pID0+IHtcbiAgICAgIGlmICh0by5pZCA9PT0gaWQpIHtcbiAgICAgICAgcmV0dXJuIHsgLi4udG8sIGNvdW50ZXI6IDAgfVxuICAgICAgfVxuICAgICAgcmV0dXJuIHRvXG4gICAgfSlcblxuICAgIHRoaXMuY3VycmVudFRvYXN0ID0gdGhpcy50b2FzdExpc3RbMF1cbiAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKVxuICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKVxuICAgIHNldFRpbWVvdXQoKCkgPT4gdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpLCAyMDApXG4gIH1cblxuICBvcGVuVG9hc3QgPSAoXG4gICAgdG9hc3RTdGF0dXM6IFRvYXN0U3RhdHVzVHlwZSxcbiAgICB0b2FzdE1lc3NhZ2U6IHN0cmluZyxcbiAgICB0b2FzdENvdW50ZXI/OiBudW1iZXIsXG4gICAgcHJvbWlzZUtleT86IHN0cmluZ1xuICApOiB2b2lkID0+IHtcbiAgICBjb25zdCB0b2FzdCA9IHtcbiAgICAgIGlkOiB0aGlzLnRvYXN0TGlzdC5sZW5ndGggPT09IDAgPyAxIDogdGhpcy50b2FzdExpc3RbdGhpcy50b2FzdExpc3QubGVuZ3RoIC0gMV0uaWQgKyAxLFxuICAgICAgY291bnRlcjogdG9hc3RDb3VudGVyIHx8IDUsXG4gICAgICBzdGF0dXM6IHRvYXN0U3RhdHVzLFxuICAgICAgbWVzc2FnZTogdG9hc3RNZXNzYWdlLFxuICAgICAgcHJvbWlzZUtleSxcbiAgICAgIGhhc0FuaW1hdGlvbjogdHJ1ZSxcbiAgICB9XG5cbiAgICBjb25zdCB0b2FzdEV4aXN0cyA9IHRoaXMudG9hc3RMaXN0LnNvbWUoKHRvKSA9PiB7XG4gICAgICByZXR1cm4gdG8uc3RhdHVzID09PSB0b2FzdFN0YXR1cyAmJiB0by5tZXNzYWdlID09PSB0b2FzdE1lc3NhZ2VcbiAgICB9KVxuXG4gICAgaWYgKHRvYXN0RXhpc3RzKSB7XG4gICAgICByZXR1cm5cbiAgICB9XG5cbiAgICBjb25zdCBrZXlFeGlzdHMgPSB0aGlzLnRvYXN0TGlzdC5maW5kKCh0bykgPT4gdG8ucHJvbWlzZUtleSA9PT0gdG9hc3QucHJvbWlzZUtleSlcblxuICAgIGlmIChrZXlFeGlzdHMpIHtcbiAgICAgIHRoaXMudG9hc3RMaXN0ID0gdGhpcy50b2FzdExpc3QubWFwKCh0bykgPT4ge1xuICAgICAgICBpZiAodG8ucHJvbWlzZUtleSA9PT0gcHJvbWlzZUtleSkge1xuICAgICAgICAgIHJldHVybiB7IC4uLnRvYXN0LCBoYXNBbmltYXRpb246IGZhbHNlIH1cbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gdG9cbiAgICAgIH0pXG4gICAgfVxuXG4gICAgdGhpcy50b2FzdExpc3QucHVzaCh0b2FzdClcblxuICAgIGlmICghdGhpcy5pc1J1bm5pbmcpIHtcbiAgICAgIHRoaXMucmVuZGVyVG9hc3RzKClcbiAgICB9XG4gICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKClcbiAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKClcbiAgICBzZXRUaW1lb3V0KCgpID0+IHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKSwgMjAwKVxuICB9XG5cbiAgcmVuZGVyVG9hc3RzKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnRvYXN0TGlzdC5sZW5ndGggPT09IDApIHtcbiAgICAgIHRoaXMuaXNSdW5uaW5nID0gZmFsc2VcbiAgICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpXG4gICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKClcbiAgICAgIHNldFRpbWVvdXQoKCkgPT4gdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpLCAyMDApXG4gICAgICByZXR1cm5cbiAgICB9XG5cbiAgICB0aGlzLmlzUnVubmluZyA9IHRydWVcbiAgICB0aGlzLmN1cnJlbnRUb2FzdCA9IHRoaXMudG9hc3RMaXN0WzBdXG5cbiAgICBjb25zdCB0b2FzdEludGVydmFsID0gc2V0SW50ZXJ2YWwoKCkgPT4ge1xuICAgICAgaWYgKHRoaXMudG9hc3RMaXN0Lmxlbmd0aCA9PT0gMCkge1xuICAgICAgICBjbGVhckludGVydmFsKHRvYXN0SW50ZXJ2YWwpXG4gICAgICAgIHRoaXMuaXNSdW5uaW5nID0gZmFsc2VcbiAgICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKClcbiAgICAgICAgdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpXG4gICAgICAgIHNldFRpbWVvdXQoKCkgPT4gdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpLCAyMDApXG4gICAgICAgIHJldHVyblxuICAgICAgfVxuXG4gICAgICB0aGlzLmN1cnJlbnRUb2FzdCA9IHRoaXMudG9hc3RMaXN0WzBdXG4gICAgICBpZiAodGhpcy5jdXJyZW50VG9hc3Quc3RhdHVzICE9PSAnY2FycmVnYW5kbycpIHtcbiAgICAgICAgdGhpcy5jdXJyZW50VG9hc3QuY291bnRlci0tXG4gICAgICB9XG5cbiAgICAgIGlmICh0aGlzLmN1cnJlbnRUb2FzdC5jb3VudGVyIDw9IDApIHtcbiAgICAgICAgdGhpcy50b2FzdExpc3QgPSB0aGlzLnRvYXN0TGlzdC5maWx0ZXIoKHRvKSA9PiB7XG4gICAgICAgICAgcmV0dXJuIHRvLnN0YXR1cyAhPT0gdGhpcy5jdXJyZW50VG9hc3Quc3RhdHVzICYmIHRvLm1lc3NhZ2UgIT09IHRoaXMuY3VycmVudFRvYXN0Lm1lc3NhZ2VcbiAgICAgICAgfSlcbiAgICAgICAgY2xlYXJJbnRlcnZhbCh0b2FzdEludGVydmFsKVxuICAgICAgICB0aGlzLnJlbmRlclRvYXN0cygpXG4gICAgICB9XG4gICAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKVxuICAgICAgdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpXG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKSwgMjAwKVxuICAgIH0sIDEwMDApXG4gIH1cbn1cbiJdfQ==
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, Input, Directive, HostListener, ViewEncapsulation, ContentChild, HostBinding, EventEmitter, Output, ViewChild, forwardRef, ContentChildren } from '@angular/core';
|
|
2
|
+
import { Injectable, Component, Input, Directive, HostListener, ViewEncapsulation, ContentChild, HostBinding, EventEmitter, Output, ChangeDetectionStrategy, ViewChild, forwardRef, ContentChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i4 from '@angular/forms';
|
|
@@ -38,7 +38,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
38
38
|
}] });
|
|
39
39
|
|
|
40
40
|
class OcToastService {
|
|
41
|
-
constructor() {
|
|
41
|
+
constructor(cdr) {
|
|
42
|
+
this.cdr = cdr;
|
|
42
43
|
this.toastList = [];
|
|
43
44
|
this.isRunning = false;
|
|
44
45
|
this.openToast = (toastStatus, toastMessage, toastCounter, promiseKey) => {
|
|
@@ -53,8 +54,9 @@ class OcToastService {
|
|
|
53
54
|
const toastExists = this.toastList.some((to) => {
|
|
54
55
|
return to.status === toastStatus && to.message === toastMessage;
|
|
55
56
|
});
|
|
56
|
-
if (toastExists)
|
|
57
|
+
if (toastExists) {
|
|
57
58
|
return;
|
|
59
|
+
}
|
|
58
60
|
const keyExists = this.toastList.find((to) => to.promiseKey === toast.promiseKey);
|
|
59
61
|
if (keyExists) {
|
|
60
62
|
this.toastList = this.toastList.map((to) => {
|
|
@@ -68,6 +70,9 @@ class OcToastService {
|
|
|
68
70
|
if (!this.isRunning) {
|
|
69
71
|
this.renderToasts();
|
|
70
72
|
}
|
|
73
|
+
this.cdr.markForCheck();
|
|
74
|
+
this.cdr.detectChanges();
|
|
75
|
+
setTimeout(() => this.cdr.detectChanges(), 200);
|
|
71
76
|
};
|
|
72
77
|
}
|
|
73
78
|
closeToast(id) {
|
|
@@ -78,10 +83,16 @@ class OcToastService {
|
|
|
78
83
|
return to;
|
|
79
84
|
});
|
|
80
85
|
this.currentToast = this.toastList[0];
|
|
86
|
+
this.cdr.markForCheck();
|
|
87
|
+
this.cdr.detectChanges();
|
|
88
|
+
setTimeout(() => this.cdr.detectChanges(), 200);
|
|
81
89
|
}
|
|
82
90
|
renderToasts() {
|
|
83
91
|
if (this.toastList.length === 0) {
|
|
84
92
|
this.isRunning = false;
|
|
93
|
+
this.cdr.markForCheck();
|
|
94
|
+
this.cdr.detectChanges();
|
|
95
|
+
setTimeout(() => this.cdr.detectChanges(), 200);
|
|
85
96
|
return;
|
|
86
97
|
}
|
|
87
98
|
this.isRunning = true;
|
|
@@ -90,6 +101,9 @@ class OcToastService {
|
|
|
90
101
|
if (this.toastList.length === 0) {
|
|
91
102
|
clearInterval(toastInterval);
|
|
92
103
|
this.isRunning = false;
|
|
104
|
+
this.cdr.markForCheck();
|
|
105
|
+
this.cdr.detectChanges();
|
|
106
|
+
setTimeout(() => this.cdr.detectChanges(), 200);
|
|
93
107
|
return;
|
|
94
108
|
}
|
|
95
109
|
this.currentToast = this.toastList[0];
|
|
@@ -103,17 +117,20 @@ class OcToastService {
|
|
|
103
117
|
clearInterval(toastInterval);
|
|
104
118
|
this.renderToasts();
|
|
105
119
|
}
|
|
120
|
+
this.cdr.markForCheck();
|
|
121
|
+
this.cdr.detectChanges();
|
|
122
|
+
setTimeout(() => this.cdr.detectChanges(), 200);
|
|
106
123
|
}, 1000);
|
|
107
124
|
}
|
|
108
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
125
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToastService, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
109
126
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToastService, providedIn: 'root' }); }
|
|
110
127
|
}
|
|
111
128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToastService, decorators: [{
|
|
112
129
|
type: Injectable,
|
|
113
130
|
args: [{
|
|
114
|
-
providedIn: 'root'
|
|
131
|
+
providedIn: 'root',
|
|
115
132
|
}]
|
|
116
|
-
}] });
|
|
133
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
|
|
117
134
|
|
|
118
135
|
class OcBadgeComponent {
|
|
119
136
|
constructor() {
|
|
@@ -808,7 +825,7 @@ class OcAutocompleteComponent {
|
|
|
808
825
|
this.filteredData = this.ocData;
|
|
809
826
|
}
|
|
810
827
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcAutocompleteComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: InternationalizationService }, { token: StyleThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
811
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocPlaceholder: "ocPlaceholder", ocError: "ocError", ocSize: "ocSize", ocData: "ocData", ocValue: "ocValue", ocClearOnChange: "ocClearOnChange", ocWidth: "ocWidth", ocMinWidth: "ocMinWidth", ocMaxWidth: "ocMaxWidth", ocOptionsMaxHeight: "ocOptionsMaxHeight", ocOptionsWidth: "ocOptionsWidth", ocRequired: "ocRequired", ocMaxResults: "ocMaxResults", ocAllowNotListedValue: "ocAllowNotListedValue", ocNoAvailableOptionsText: "ocNoAvailableOptionsText", ocTypeForMoreResultsText: "ocTypeForMoreResultsText", ocLoading: "ocLoading", ocSemanticLike: "ocSemanticLike", ocStyle: "ocStyle", ocTabIndex: "ocTabIndex" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick" }, host: { properties: { "style.width": "this.computedWidth", "style.min-width": "this.computedMinWidth", "style.max-width": "this.computedMaxWidth" } }, providers: [InternationalizationService], queries: [{ propertyName: "ocPrefix", first: true, predicate: ["ocPrefix"], descendants: true }, { propertyName: "ocSuffix", first: true, predicate: ["ocSuffix"], descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "options", first: true, predicate: ["options"], descendants: true }, { propertyName: "outerDiv", first: true, predicate: ["outerDiv"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n }\"\n>\n <ng-content></ng-content>\n <input\n [placeholder]=\"ocPlaceholder\"\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\"\n [tabindex]=\"ocTabIndex\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n <ng-content select=\"ocSuffix\"></ng-content>\n\n <div class=\"oc-options-div\">\n @if (isOptionsShown && !ocLoading) {\n <ul\n #options\n class=\"oc-options\"\n [ngStyle]=\"{\n 'max-height': ocOptionsMaxHeight,\n width: ocOptionsWidth,\n }\"\n >\n @if (!filteredData.length) {\n <li class=\"no-options\">\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\n </li>\n } @else {\n @for (data of filteredData; track data.value; let i = $index) {\n @if (!ocMaxResults || i < ocMaxResults) {\n <li>\n <button\n type=\"button\"\n (click)=\"selectValue(data.value)\"\n >\n {{ data.name }}\n </button>\n </li>\n }\n }\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\n <li class=\"no-options\">\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\n </li>\n }\n }\n </ul>\n } @else if (isOptionsShown && ocLoading) {\n <div class=\"oc-options loader\">\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\n </div>\n }\n </div>\n</div>\n", styles: [".oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box{position:relative}.oc-options-div{position:absolute;width:100%}.oc-options{display:flex;flex-direction:column;list-style:none;max-height:40vh;background-color:#f8f9ff;border:2px solid #ffffff;box-shadow:0 4px 8.7px #00000021;padding:0;margin-block-start:0;border-radius:.5rem;overflow:hidden;width:100%;position:absolute;top:50%;overflow-y:auto;z-index:15}.oc-options>li{padding:0;margin:0}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer}.oc-options>li button:hover{filter:brightness(.9)}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
828
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocPlaceholder: "ocPlaceholder", ocError: "ocError", ocSize: "ocSize", ocData: "ocData", ocValue: "ocValue", ocClearOnChange: "ocClearOnChange", ocWidth: "ocWidth", ocMinWidth: "ocMinWidth", ocMaxWidth: "ocMaxWidth", ocOptionsMaxHeight: "ocOptionsMaxHeight", ocOptionsWidth: "ocOptionsWidth", ocRequired: "ocRequired", ocMaxResults: "ocMaxResults", ocAllowNotListedValue: "ocAllowNotListedValue", ocNoAvailableOptionsText: "ocNoAvailableOptionsText", ocTypeForMoreResultsText: "ocTypeForMoreResultsText", ocLoading: "ocLoading", ocSemanticLike: "ocSemanticLike", ocStyle: "ocStyle", ocTabIndex: "ocTabIndex" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick" }, host: { properties: { "style.width": "this.computedWidth", "style.min-width": "this.computedMinWidth", "style.max-width": "this.computedMaxWidth" } }, providers: [InternationalizationService], queries: [{ propertyName: "ocPrefix", first: true, predicate: ["ocPrefix"], descendants: true }, { propertyName: "ocSuffix", first: true, predicate: ["ocSuffix"], descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "options", first: true, predicate: ["options"], descendants: true }, { propertyName: "outerDiv", first: true, predicate: ["outerDiv"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n }\"\n>\n <ng-content></ng-content>\n <input\n [placeholder]=\"ocPlaceholder\"\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\"\n [tabindex]=\"ocTabIndex\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n <ng-content select=\"ocSuffix\"></ng-content>\n\n <div class=\"oc-options-div\">\n @if (isOptionsShown && !ocLoading) {\n <ul\n #options\n class=\"oc-options\"\n [ngStyle]=\"{\n 'max-height': ocOptionsMaxHeight,\n width: ocOptionsWidth,\n }\"\n >\n @if (!filteredData.length) {\n <li class=\"no-options\">\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\n </li>\n } @else {\n @for (data of filteredData; track data.value; let i = $index) {\n @if (!ocMaxResults || i < ocMaxResults) {\n <li>\n <button\n type=\"button\"\n (click)=\"selectValue(data.value)\"\n >\n {{ data.name }}\n </button>\n </li>\n }\n }\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\n <li class=\"no-options\">\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\n </li>\n }\n }\n </ul>\n } @else if (isOptionsShown && ocLoading) {\n <div class=\"oc-options loader\">\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\n </div>\n }\n </div>\n</div>\n", styles: [".oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box{position:relative}.oc-options-div{position:absolute;width:100%}.oc-options{display:flex;flex-direction:column;list-style:none;max-height:40vh;background-color:#f8f9ff;border:2px solid #ffffff;box-shadow:0 4px 8.7px #00000021;padding:0;margin-block-start:0;border-radius:.5rem;overflow:hidden;width:100%;position:absolute;top:50%;overflow-y:auto;z-index:15}.oc-options>li{padding:0;margin:0}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer}.oc-options>li button:hover{filter:brightness(.9)}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
812
829
|
}
|
|
813
830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcAutocompleteComponent, decorators: [{
|
|
814
831
|
type: Component,
|
|
@@ -816,7 +833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
816
833
|
'[style.width]': 'computedWidth',
|
|
817
834
|
'[style.min-width]': 'computedMinWidth',
|
|
818
835
|
'[style.max-width]': 'computedMaxWidth',
|
|
819
|
-
}, template: "<div\n [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n }\"\n>\n <ng-content></ng-content>\n <input\n [placeholder]=\"ocPlaceholder\"\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\"\n [tabindex]=\"ocTabIndex\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n <ng-content select=\"ocSuffix\"></ng-content>\n\n <div class=\"oc-options-div\">\n @if (isOptionsShown && !ocLoading) {\n <ul\n #options\n class=\"oc-options\"\n [ngStyle]=\"{\n 'max-height': ocOptionsMaxHeight,\n width: ocOptionsWidth,\n }\"\n >\n @if (!filteredData.length) {\n <li class=\"no-options\">\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\n </li>\n } @else {\n @for (data of filteredData; track data.value; let i = $index) {\n @if (!ocMaxResults || i < ocMaxResults) {\n <li>\n <button\n type=\"button\"\n (click)=\"selectValue(data.value)\"\n >\n {{ data.name }}\n </button>\n </li>\n }\n }\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\n <li class=\"no-options\">\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\n </li>\n }\n }\n </ul>\n } @else if (isOptionsShown && ocLoading) {\n <div class=\"oc-options loader\">\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\n </div>\n }\n </div>\n</div>\n", styles: [".oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box{position:relative}.oc-options-div{position:absolute;width:100%}.oc-options{display:flex;flex-direction:column;list-style:none;max-height:40vh;background-color:#f8f9ff;border:2px solid #ffffff;box-shadow:0 4px 8.7px #00000021;padding:0;margin-block-start:0;border-radius:.5rem;overflow:hidden;width:100%;position:absolute;top:50%;overflow-y:auto;z-index:15}.oc-options>li{padding:0;margin:0}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer}.oc-options>li button:hover{filter:brightness(.9)}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
836
|
+
}, changeDetection: ChangeDetectionStrategy.Default, template: "<div\n [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n }\"\n>\n <ng-content></ng-content>\n <input\n [placeholder]=\"ocPlaceholder\"\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\"\n [tabindex]=\"ocTabIndex\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n <ng-content select=\"ocSuffix\"></ng-content>\n\n <div class=\"oc-options-div\">\n @if (isOptionsShown && !ocLoading) {\n <ul\n #options\n class=\"oc-options\"\n [ngStyle]=\"{\n 'max-height': ocOptionsMaxHeight,\n width: ocOptionsWidth,\n }\"\n >\n @if (!filteredData.length) {\n <li class=\"no-options\">\n {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\n </li>\n } @else {\n @for (data of filteredData; track data.value; let i = $index) {\n @if (!ocMaxResults || i < ocMaxResults) {\n <li>\n <button\n type=\"button\"\n (click)=\"selectValue(data.value)\"\n >\n {{ data.name }}\n </button>\n </li>\n }\n }\n @if (ocMaxResults && filteredData.length > ocMaxResults) {\n <li class=\"no-options\">\n {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\n </li>\n }\n }\n </ul>\n } @else if (isOptionsShown && ocLoading) {\n <div class=\"oc-options loader\">\n <span class=\"material-symbols-outlined loading\"> progress_activity </span>\n </div>\n }\n </div>\n</div>\n", styles: [".oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box{position:relative}.oc-options-div{position:absolute;width:100%}.oc-options{display:flex;flex-direction:column;list-style:none;max-height:40vh;background-color:#f8f9ff;border:2px solid #ffffff;box-shadow:0 4px 8.7px #00000021;padding:0;margin-block-start:0;border-radius:.5rem;overflow:hidden;width:100%;position:absolute;top:50%;overflow-y:auto;z-index:15}.oc-options>li{padding:0;margin:0}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer}.oc-options>li button:hover{filter:brightness(.9)}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
820
837
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: InternationalizationService }, { type: StyleThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
|
|
821
838
|
type: ViewChild,
|
|
822
839
|
args: ['input']
|
|
@@ -997,8 +1014,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
997
1014
|
}] });
|
|
998
1015
|
|
|
999
1016
|
class OcCheckboxComponent {
|
|
1000
|
-
constructor(styleThemeService) {
|
|
1017
|
+
constructor(styleThemeService, cdr) {
|
|
1001
1018
|
this.styleThemeService = styleThemeService;
|
|
1019
|
+
this.cdr = cdr;
|
|
1002
1020
|
this.checkBoxId = `oc-${Math.random()}`;
|
|
1003
1021
|
this.ocChange = new EventEmitter();
|
|
1004
1022
|
this.ocChecked = false;
|
|
@@ -1009,24 +1027,35 @@ class OcCheckboxComponent {
|
|
|
1009
1027
|
this.ocBorderColor = 'white';
|
|
1010
1028
|
this.ocStyle = 'otimus';
|
|
1011
1029
|
this.ocDoubleClick = new EventEmitter();
|
|
1012
|
-
this.
|
|
1030
|
+
this.disableDoubleClickCheck = true;
|
|
1013
1031
|
this.onTouched = () => { };
|
|
1014
1032
|
this.doubleClickCounter = 0;
|
|
1015
1033
|
this.timeoutId = null;
|
|
1016
1034
|
}
|
|
1017
1035
|
ngAfterViewInit() {
|
|
1018
1036
|
this.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle;
|
|
1037
|
+
this.cdr.markForCheck();
|
|
1038
|
+
setTimeout(() => this.cdr.detectChanges(), 100);
|
|
1019
1039
|
}
|
|
1020
1040
|
writeValue(value) {
|
|
1021
1041
|
this.ocChecked = value;
|
|
1042
|
+
this.cdr.markForCheck();
|
|
1043
|
+
setTimeout(() => this.cdr.detectChanges(), 100);
|
|
1022
1044
|
}
|
|
1023
1045
|
registerOnChange(fn) {
|
|
1024
1046
|
this.onChange = fn;
|
|
1047
|
+
this.cdr.markForCheck();
|
|
1048
|
+
setTimeout(() => this.cdr.detectChanges(), 100);
|
|
1025
1049
|
}
|
|
1026
1050
|
registerOnTouched(fn) {
|
|
1027
1051
|
this.onTouched = fn;
|
|
1052
|
+
this.cdr.markForCheck();
|
|
1053
|
+
setTimeout(() => this.cdr.detectChanges(), 100);
|
|
1028
1054
|
}
|
|
1029
1055
|
onDoubleClick() {
|
|
1056
|
+
if (this.disableDoubleClickCheck) {
|
|
1057
|
+
return;
|
|
1058
|
+
}
|
|
1030
1059
|
if (this.timeoutId) {
|
|
1031
1060
|
clearTimeout(this.timeoutId);
|
|
1032
1061
|
this.timeoutId = null;
|
|
@@ -1035,6 +1064,8 @@ class OcCheckboxComponent {
|
|
|
1035
1064
|
this.doubleClickCounter = 1;
|
|
1036
1065
|
this.timeoutId = setTimeout(() => {
|
|
1037
1066
|
this.doubleClickCounter = 0;
|
|
1067
|
+
this.cdr.markForCheck();
|
|
1068
|
+
setInterval(() => this.cdr.detectChanges(), 100);
|
|
1038
1069
|
}, 500);
|
|
1039
1070
|
}
|
|
1040
1071
|
else {
|
|
@@ -1043,27 +1074,35 @@ class OcCheckboxComponent {
|
|
|
1043
1074
|
this.ocDoubleClick.emit(this.ocChecked);
|
|
1044
1075
|
}
|
|
1045
1076
|
}
|
|
1077
|
+
this.cdr.markForCheck();
|
|
1078
|
+
setTimeout(() => this.cdr.detectChanges(), 100);
|
|
1046
1079
|
}
|
|
1047
1080
|
toggleChecked() {
|
|
1048
1081
|
if (this.doubleClickCounter === 1) {
|
|
1082
|
+
this.cdr.markForCheck();
|
|
1083
|
+
setTimeout(() => this.cdr.detectChanges(), 100);
|
|
1049
1084
|
return;
|
|
1050
1085
|
}
|
|
1051
1086
|
this.ocChecked = !this.ocChecked;
|
|
1052
|
-
this.onChange
|
|
1087
|
+
if (this.onChange) {
|
|
1088
|
+
this.onChange(this.ocChecked);
|
|
1089
|
+
}
|
|
1053
1090
|
this.onTouched();
|
|
1054
1091
|
this.ocChange.emit(this.ocChecked);
|
|
1055
1092
|
if (this.formControl) {
|
|
1056
1093
|
this.formControl.setValue(this.ocChecked);
|
|
1057
1094
|
}
|
|
1095
|
+
this.cdr.markForCheck();
|
|
1096
|
+
setTimeout(() => this.cdr.detectChanges(), 100);
|
|
1058
1097
|
}
|
|
1059
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcCheckboxComponent, deps: [{ token: StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1060
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcCheckboxComponent, isStandalone: true, selector: "oc-checkbox", inputs: { ocChecked: "ocChecked", ocSize: "ocSize", ocLabel: "ocLabel", ocName: "ocName", ocColor: "ocColor", ocBorderColor: "ocBorderColor", ocStyle: "ocStyle", formControl: "formControl", ocTabIndex: "ocTabIndex" }, outputs: { ocChange: "ocChange", ocDoubleClick: "ocDoubleClick" }, providers: [
|
|
1098
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcCheckboxComponent, deps: [{ token: StyleThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1099
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcCheckboxComponent, isStandalone: true, selector: "oc-checkbox", inputs: { ocChecked: "ocChecked", ocSize: "ocSize", ocLabel: "ocLabel", ocName: "ocName", ocColor: "ocColor", ocBorderColor: "ocBorderColor", ocStyle: "ocStyle", formControl: "formControl", ocTabIndex: "ocTabIndex", disableDoubleClickCheck: "disableDoubleClickCheck" }, outputs: { ocChange: "ocChange", ocDoubleClick: "ocDoubleClick" }, providers: [
|
|
1061
1100
|
{
|
|
1062
1101
|
provide: NG_VALUE_ACCESSOR,
|
|
1063
1102
|
useExisting: forwardRef(() => OcCheckboxComponent),
|
|
1064
1103
|
multi: true,
|
|
1065
1104
|
},
|
|
1066
|
-
], ngImport: i0, template: "<button class=\"oc-checkbox-content cbx\" type=\"button\" (click)=\"toggleChecked();\nonDoubleClick()\" [ngClass]=\"{\n shui: ocStyle === 'shui'\n}\" [tabIndex]=\"ocTabIndex\">\n\n <div class=\"oc-checkbox cbx\" [ngClass]=\"{\n 'checked': ocChecked,\n 'tiny': ocSize === 'tiny',\n purple: ocColor === 'purple',\n 'gray-border': ocBorderColor === 'gray'\n }\">\n\n <span class=\"check-icon material-symbols-outlined\">check_small</span>\n </div>\n\n @if(ocLabel) {\n <span class=\"oc-checkbox-label cbx\">\n {{ocLabel}}\n </span>\n }\n\n <ng-content>\n </ng-content>\n\n @if(formControl) {\n <input [formControl]=\"formControl\" [name]=\"ocName\" [checked]=\"ocChecked\" type=\"checkbox\" hidden>\n } @else {\n <input [name]=\"ocName\" [checked]=\"ocChecked\" type=\"checkbox\" hidden>\n }\n</button>", styles: [".oc-checkbox-content{display:flex;align-items:center;padding:0;margin:0;border:none;background-color:transparent;gap:.3rem}.oc-checkbox-content .oc-checkbox-label{background-color:transparent;border:none;color:#8f9596;font-weight:500;text-align:left}.oc-checkbox{min-width:1rem;width:1.2rem;height:1.2rem;border-radius:.3rem;background-color:#f7f7f7;border:2px solid #ffffff;display:flex;align-items:center;justify-content:center;transition:.15s ease;cursor:pointer;overflow:hidden}.oc-checkbox:hover{filter:brightness(.95)}.oc-checkbox .check-icon{font-weight:700;color:#f8f9ff;opacity:0;pointer-events:none;margin:0;font-size:1.15rem;transition:.2s ease;transform:translateY(15px) scale(.5)}.oc-checkbox.gray-border{border:2px solid #d1d5db}.oc-checkbox.tiny{width:1rem;height:1rem;border:1px solid #ffffff}.oc-checkbox.tiny.gray{border:1px solid #d1d5db}.checked{background-color:#00dda3;box-shadow:0 2px 10px #00dda32b;border:none!important}.checked .check-icon{transform:translateY(0) scale(1);opacity:1;color:#f8f9ff}.checked.purple{background-color:#5505a2;box-shadow:0 2px 10px #5505a233}.label{width:18.4px!important;height:18.4px!important}.oc-checkbox-content.shui .oc-checkbox,.oc-checkbox-content.shui .purple{border-radius:.15rem;background-color:#f5f5f5}.oc-checkbox-content.shui .oc-checkbox.gray-border,.oc-checkbox-content.shui .purple.gray-border{border:2px solid #009999;background-color:transparent}.oc-checkbox-content.shui .oc-checkbox.checked,.oc-checkbox-content.shui .purple.checked{background-color:#099}.oc-checkbox-content.shui span.cbx{color:#000000bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
1105
|
+
], ngImport: i0, template: "<button class=\"oc-checkbox-content cbx\" type=\"button\" (click)=\"toggleChecked();\nonDoubleClick()\" [ngClass]=\"{\n shui: ocStyle === 'shui'\n}\" [tabIndex]=\"ocTabIndex\">\n\n <div class=\"oc-checkbox cbx\" [ngClass]=\"{\n 'checked': ocChecked,\n 'tiny': ocSize === 'tiny',\n purple: ocColor === 'purple',\n 'gray-border': ocBorderColor === 'gray'\n }\">\n\n <span class=\"check-icon material-symbols-outlined\">check_small</span>\n </div>\n\n @if(ocLabel) {\n <span class=\"oc-checkbox-label cbx\">\n {{ocLabel}}\n </span>\n }\n\n <ng-content>\n </ng-content>\n\n @if(formControl) {\n <input [formControl]=\"formControl\" [name]=\"ocName\" [checked]=\"ocChecked\" type=\"checkbox\" hidden>\n } @else {\n <input [name]=\"ocName\" [checked]=\"ocChecked\" type=\"checkbox\" hidden>\n }\n</button>", styles: [".oc-checkbox-content{display:flex;align-items:center;padding:0;margin:0;border:none;background-color:transparent;gap:.3rem}.oc-checkbox-content .oc-checkbox-label{background-color:transparent;border:none;color:#8f9596;font-weight:500;text-align:left}.oc-checkbox{min-width:1rem;width:1.2rem;height:1.2rem;border-radius:.3rem;background-color:#f7f7f7;border:2px solid #ffffff;display:flex;align-items:center;justify-content:center;transition:.15s ease;cursor:pointer;overflow:hidden}.oc-checkbox:hover{filter:brightness(.95)}.oc-checkbox .check-icon{font-weight:700;color:#f8f9ff;opacity:0;pointer-events:none;margin:0;font-size:1.15rem;transition:.2s ease;transform:translateY(15px) scale(.5)}.oc-checkbox.gray-border{border:2px solid #d1d5db}.oc-checkbox.tiny{width:1rem;height:1rem;border:1px solid #ffffff}.oc-checkbox.tiny.gray{border:1px solid #d1d5db}.checked{background-color:#00dda3;box-shadow:0 2px 10px #00dda32b;border:none!important}.checked .check-icon{transform:translateY(0) scale(1);opacity:1;color:#f8f9ff}.checked.purple{background-color:#5505a2;box-shadow:0 2px 10px #5505a233}.label{width:18.4px!important;height:18.4px!important}.oc-checkbox-content.shui .oc-checkbox,.oc-checkbox-content.shui .purple{border-radius:.15rem;background-color:#f5f5f5}.oc-checkbox-content.shui .oc-checkbox.gray-border,.oc-checkbox-content.shui .purple.gray-border{border:2px solid #009999;background-color:transparent}.oc-checkbox-content.shui .oc-checkbox.checked,.oc-checkbox-content.shui .purple.checked{background-color:#099}.oc-checkbox-content.shui span.cbx{color:#000000bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
1067
1106
|
}
|
|
1068
1107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcCheckboxComponent, decorators: [{
|
|
1069
1108
|
type: Component,
|
|
@@ -1073,8 +1112,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1073
1112
|
useExisting: forwardRef(() => OcCheckboxComponent),
|
|
1074
1113
|
multi: true,
|
|
1075
1114
|
},
|
|
1076
|
-
], template: "<button class=\"oc-checkbox-content cbx\" type=\"button\" (click)=\"toggleChecked();\nonDoubleClick()\" [ngClass]=\"{\n shui: ocStyle === 'shui'\n}\" [tabIndex]=\"ocTabIndex\">\n\n <div class=\"oc-checkbox cbx\" [ngClass]=\"{\n 'checked': ocChecked,\n 'tiny': ocSize === 'tiny',\n purple: ocColor === 'purple',\n 'gray-border': ocBorderColor === 'gray'\n }\">\n\n <span class=\"check-icon material-symbols-outlined\">check_small</span>\n </div>\n\n @if(ocLabel) {\n <span class=\"oc-checkbox-label cbx\">\n {{ocLabel}}\n </span>\n }\n\n <ng-content>\n </ng-content>\n\n @if(formControl) {\n <input [formControl]=\"formControl\" [name]=\"ocName\" [checked]=\"ocChecked\" type=\"checkbox\" hidden>\n } @else {\n <input [name]=\"ocName\" [checked]=\"ocChecked\" type=\"checkbox\" hidden>\n }\n</button>", styles: [".oc-checkbox-content{display:flex;align-items:center;padding:0;margin:0;border:none;background-color:transparent;gap:.3rem}.oc-checkbox-content .oc-checkbox-label{background-color:transparent;border:none;color:#8f9596;font-weight:500;text-align:left}.oc-checkbox{min-width:1rem;width:1.2rem;height:1.2rem;border-radius:.3rem;background-color:#f7f7f7;border:2px solid #ffffff;display:flex;align-items:center;justify-content:center;transition:.15s ease;cursor:pointer;overflow:hidden}.oc-checkbox:hover{filter:brightness(.95)}.oc-checkbox .check-icon{font-weight:700;color:#f8f9ff;opacity:0;pointer-events:none;margin:0;font-size:1.15rem;transition:.2s ease;transform:translateY(15px) scale(.5)}.oc-checkbox.gray-border{border:2px solid #d1d5db}.oc-checkbox.tiny{width:1rem;height:1rem;border:1px solid #ffffff}.oc-checkbox.tiny.gray{border:1px solid #d1d5db}.checked{background-color:#00dda3;box-shadow:0 2px 10px #00dda32b;border:none!important}.checked .check-icon{transform:translateY(0) scale(1);opacity:1;color:#f8f9ff}.checked.purple{background-color:#5505a2;box-shadow:0 2px 10px #5505a233}.label{width:18.4px!important;height:18.4px!important}.oc-checkbox-content.shui .oc-checkbox,.oc-checkbox-content.shui .purple{border-radius:.15rem;background-color:#f5f5f5}.oc-checkbox-content.shui .oc-checkbox.gray-border,.oc-checkbox-content.shui .purple.gray-border{border:2px solid #009999;background-color:transparent}.oc-checkbox-content.shui .oc-checkbox.checked,.oc-checkbox-content.shui .purple.checked{background-color:#099}.oc-checkbox-content.shui span.cbx{color:#000000bf}\n"] }]
|
|
1077
|
-
}], ctorParameters: () => [{ type: StyleThemeService }], propDecorators: { ocChange: [{
|
|
1115
|
+
], changeDetection: ChangeDetectionStrategy.Default, template: "<button class=\"oc-checkbox-content cbx\" type=\"button\" (click)=\"toggleChecked();\nonDoubleClick()\" [ngClass]=\"{\n shui: ocStyle === 'shui'\n}\" [tabIndex]=\"ocTabIndex\">\n\n <div class=\"oc-checkbox cbx\" [ngClass]=\"{\n 'checked': ocChecked,\n 'tiny': ocSize === 'tiny',\n purple: ocColor === 'purple',\n 'gray-border': ocBorderColor === 'gray'\n }\">\n\n <span class=\"check-icon material-symbols-outlined\">check_small</span>\n </div>\n\n @if(ocLabel) {\n <span class=\"oc-checkbox-label cbx\">\n {{ocLabel}}\n </span>\n }\n\n <ng-content>\n </ng-content>\n\n @if(formControl) {\n <input [formControl]=\"formControl\" [name]=\"ocName\" [checked]=\"ocChecked\" type=\"checkbox\" hidden>\n } @else {\n <input [name]=\"ocName\" [checked]=\"ocChecked\" type=\"checkbox\" hidden>\n }\n</button>", styles: [".oc-checkbox-content{display:flex;align-items:center;padding:0;margin:0;border:none;background-color:transparent;gap:.3rem}.oc-checkbox-content .oc-checkbox-label{background-color:transparent;border:none;color:#8f9596;font-weight:500;text-align:left}.oc-checkbox{min-width:1rem;width:1.2rem;height:1.2rem;border-radius:.3rem;background-color:#f7f7f7;border:2px solid #ffffff;display:flex;align-items:center;justify-content:center;transition:.15s ease;cursor:pointer;overflow:hidden}.oc-checkbox:hover{filter:brightness(.95)}.oc-checkbox .check-icon{font-weight:700;color:#f8f9ff;opacity:0;pointer-events:none;margin:0;font-size:1.15rem;transition:.2s ease;transform:translateY(15px) scale(.5)}.oc-checkbox.gray-border{border:2px solid #d1d5db}.oc-checkbox.tiny{width:1rem;height:1rem;border:1px solid #ffffff}.oc-checkbox.tiny.gray{border:1px solid #d1d5db}.checked{background-color:#00dda3;box-shadow:0 2px 10px #00dda32b;border:none!important}.checked .check-icon{transform:translateY(0) scale(1);opacity:1;color:#f8f9ff}.checked.purple{background-color:#5505a2;box-shadow:0 2px 10px #5505a233}.label{width:18.4px!important;height:18.4px!important}.oc-checkbox-content.shui .oc-checkbox,.oc-checkbox-content.shui .purple{border-radius:.15rem;background-color:#f5f5f5}.oc-checkbox-content.shui .oc-checkbox.gray-border,.oc-checkbox-content.shui .purple.gray-border{border:2px solid #009999;background-color:transparent}.oc-checkbox-content.shui .oc-checkbox.checked,.oc-checkbox-content.shui .purple.checked{background-color:#099}.oc-checkbox-content.shui span.cbx{color:#000000bf}\n"] }]
|
|
1116
|
+
}], ctorParameters: () => [{ type: StyleThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { ocChange: [{
|
|
1078
1117
|
type: Output
|
|
1079
1118
|
}], ocChecked: [{
|
|
1080
1119
|
type: Input
|
|
@@ -1096,6 +1135,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1096
1135
|
type: Input
|
|
1097
1136
|
}], ocTabIndex: [{
|
|
1098
1137
|
type: Input
|
|
1138
|
+
}], disableDoubleClickCheck: [{
|
|
1139
|
+
type: Input
|
|
1099
1140
|
}] } });
|
|
1100
1141
|
|
|
1101
1142
|
class OcMenuComponent {
|
|
@@ -1158,7 +1199,7 @@ class OcMenuComponent {
|
|
|
1158
1199
|
return typeof key;
|
|
1159
1200
|
}
|
|
1160
1201
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcMenuComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1161
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcMenuComponent, isStandalone: true, selector: "oc-menu", inputs: { ocMenu: "ocMenu" }, outputs: { ocChange: "ocChange" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["ocMenuEl"], descendants: true }], ngImport: i0, template: "<div class=\"oc-menu\" *ngIf=\"isMenuShown\" cdkMenu #ocMenuEl>\n <ul>\n @for(option of ocMenu; track $index) {\n <li\n [ngClass]=\"{\n 'checkbox-option cbx': typeof(option.checked) === 'boolean'\n }\"\n >\n @if(typeof(option.checked) === 'boolean'){\n <div class=\"checkbox-opt cbx\">\n <oc-checkbox (ocChange)=\"changeCheckbox(option.name, $event)\" [ocChecked]=\"option.checked!\" class=\"cbx\" ocSize=\"tiny\" [ocLabel]=\"option.name\" ocBorderColor=\"gray\"/>\n </div>\n }\n @if(option.icon) {\n <span class=\"material-symbols-outlined\">\n {{option.icon}}\n </span>\n } \n @if(option.callback){\n <button (click)=\"option.callback()\">{{option.name}}</button>\n }\n @if(option.url){\n <a [href]=\"option.url\" [target]=\"option.targetBlank ? '_blank' : ''\">{{option.name}}</a>\n }\n @if (!option.callback && !option.url && typeof(option.checked) !== 'boolean') {\n <span>{{option.name}}</span>\n }\n </li>\n }\n </ul>\n</div>\n", styles: ["*{box-sizing:border-box}.oc-menu{display:flex;flex-direction:column;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid #ffffff;position:absolute;z-index:1000;max-height:800px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease}.oc-menu ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;width:100%}.oc-menu ul li{text-align:left;text-decoration:none;width:100%;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap}.oc-menu ul li .checkbox-opt{min-width:1.3rem}.oc-menu ul li a,.oc-menu ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc-menu ul li a,.oc-menu ul li button,.oc-menu ul li span,.oc-menu ul li .checkbox-opt{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:400;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;height:100%;cursor:pointer}.oc-menu ul li .material-symbols-outlined{width:.3rem;font-size:1.1rem;pointer-events:none}.oc-menu ul li:hover{background-color:#fff}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "component", type: OcCheckboxComponent, selector: "oc-checkbox", inputs: ["ocChecked", "ocSize", "ocLabel", "ocName", "ocColor", "ocBorderColor", "ocStyle", "formControl", "ocTabIndex"], outputs: ["ocChange", "ocDoubleClick"] }] }); }
|
|
1202
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OcMenuComponent, isStandalone: true, selector: "oc-menu", inputs: { ocMenu: "ocMenu" }, outputs: { ocChange: "ocChange" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["ocMenuEl"], descendants: true }], ngImport: i0, template: "<div class=\"oc-menu\" *ngIf=\"isMenuShown\" cdkMenu #ocMenuEl>\n <ul>\n @for(option of ocMenu; track $index) {\n <li\n [ngClass]=\"{\n 'checkbox-option cbx': typeof(option.checked) === 'boolean'\n }\"\n >\n @if(typeof(option.checked) === 'boolean'){\n <div class=\"checkbox-opt cbx\">\n <oc-checkbox (ocChange)=\"changeCheckbox(option.name, $event)\" [ocChecked]=\"option.checked!\" class=\"cbx\" ocSize=\"tiny\" [ocLabel]=\"option.name\" ocBorderColor=\"gray\"/>\n </div>\n }\n @if(option.icon) {\n <span class=\"material-symbols-outlined\">\n {{option.icon}}\n </span>\n } \n @if(option.callback){\n <button (click)=\"option.callback()\">{{option.name}}</button>\n }\n @if(option.url){\n <a [href]=\"option.url\" [target]=\"option.targetBlank ? '_blank' : ''\">{{option.name}}</a>\n }\n @if (!option.callback && !option.url && typeof(option.checked) !== 'boolean') {\n <span>{{option.name}}</span>\n }\n </li>\n }\n </ul>\n</div>\n", styles: ["*{box-sizing:border-box}.oc-menu{display:flex;flex-direction:column;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid #ffffff;position:absolute;z-index:1000;max-height:800px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease}.oc-menu ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;width:100%}.oc-menu ul li{text-align:left;text-decoration:none;width:100%;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap}.oc-menu ul li .checkbox-opt{min-width:1.3rem}.oc-menu ul li a,.oc-menu ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc-menu ul li a,.oc-menu ul li button,.oc-menu ul li span,.oc-menu ul li .checkbox-opt{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:400;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;height:100%;cursor:pointer}.oc-menu ul li .material-symbols-outlined{width:.3rem;font-size:1.1rem;pointer-events:none}.oc-menu ul li:hover{background-color:#fff}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "component", type: OcCheckboxComponent, selector: "oc-checkbox", inputs: ["ocChecked", "ocSize", "ocLabel", "ocName", "ocColor", "ocBorderColor", "ocStyle", "formControl", "ocTabIndex", "disableDoubleClickCheck"], outputs: ["ocChange", "ocDoubleClick"] }] }); }
|
|
1162
1203
|
}
|
|
1163
1204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcMenuComponent, decorators: [{
|
|
1164
1205
|
type: Component,
|
|
@@ -1177,11 +1218,11 @@ class OcToastComponent {
|
|
|
1177
1218
|
this.toast = toast;
|
|
1178
1219
|
}
|
|
1179
1220
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToastComponent, deps: [{ token: OcToastService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1180
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OcToastComponent, isStandalone: true, selector: "oc-toast", ngImport: i0, template: "<div\n class=\"toast\"\n [ngClass]=\"{\n 'close-toast': toast.currentToast.counter === 1,\n error: ['erro', 'error'].includes(toast.currentToast.status.toLowerCase()),\n success: ['sucesso', 'success', '\u00E9xito'].includes(toast.currentToast.status.toLowerCase()),\n loading: ['carregando', 'cargando', 'loading'].includes(toast.currentToast.status.toLowerCase()),\n animation: toast.currentToast.hasAnimation\n }\"\n *ngIf=\"toast.currentToast && toast.currentToast.counter > 0\"\n>\n <header>\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n <h4 class=\"status\">\n {{ toast.currentToast.status[0].toUpperCase() + toast.currentToast.status.slice(1) }}\n </h4>\n <button (click)=\"toast.closeToast(toast.currentToast.id)\">\n <span class=\"material-symbols-outlined\">close</span>\n </button>\n </header>\n <p>{{ toast.currentToast.message }}</p>\n</div>\n\n<ng-template #iconTemplate>\n <span\n class=\"material-symbols-outlined\"\n *ngIf=\"['erro', 'error'].includes(toast.currentToast.status.toLowerCase())\"\n >error</span\n >\n\n <span\n class=\"material-symbols-outlined\"\n *ngIf=\"['sucesso', 'success', '\u00E9xito'].includes(toast.currentToast.status.toLowerCase())\"\n >check_circle</span\n >\n\n <span\n class=\"material-symbols-outlined\"\n *ngIf=\"['information', 'informa\u00E7\u00E3o', 'informaci\u00F3n'].includes(toast.currentToast.status.toLowerCase())\"\n >info</span\n >\n\n <svg *ngIf=\"['carregando', 'cargando', 'loading'].includes(toast.currentToast.status.toLowerCase())\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><style>rect{fill:#00DDA3}.spinner_zWVm{animation:spinner_5QiW 1.2s linear infinite,spinner_PnZo 1.2s linear infinite}.spinner_gfyD{animation:spinner_5QiW 1.2s linear infinite,spinner_4j7o 1.2s linear infinite;animation-delay:.1s}.spinner_T5JJ{animation:spinner_5QiW 1.2s linear infinite,spinner_fLK4 1.2s linear infinite;animation-delay:.1s}.spinner_E3Wz{animation:spinner_5QiW 1.2s linear infinite,spinner_tDji 1.2s linear infinite;animation-delay:.2s}.spinner_g2vs{animation:spinner_5QiW 1.2s linear infinite,spinner_CMiT 1.2s linear infinite;animation-delay:.2s}.spinner_ctYB{animation:spinner_5QiW 1.2s linear infinite,spinner_cHKR 1.2s linear infinite;animation-delay:.2s}.spinner_BDNj{animation:spinner_5QiW 1.2s linear infinite,spinner_Re6e 1.2s linear infinite;animation-delay:.3s}.spinner_rCw3{animation:spinner_5QiW 1.2s linear infinite,spinner_EJmJ 1.2s linear infinite;animation-delay:.3s}.spinner_Rszm{animation:spinner_5QiW 1.2s linear infinite,spinner_YJOP 1.2s linear infinite;animation-delay:.4s}@keyframes spinner_5QiW{0%,50%{width:7.33px;height:7.33px}25%{width:1.33px;height:1.33px}}@keyframes spinner_PnZo{0%,50%{x:1px;y:1px}25%{x:4px;y:4px}}@keyframes spinner_4j7o{0%,50%{x:8.33px;y:1px}25%{x:11.33px;y:4px}}@keyframes spinner_fLK4{0%,50%{x:1px;y:8.33px}25%{x:4px;y:11.33px}}@keyframes spinner_tDji{0%,50%{x:15.66px;y:1px}25%{x:18.66px;y:4px}}@keyframes spinner_CMiT{0%,50%{x:8.33px;y:8.33px}25%{x:11.33px;y:11.33px}}@keyframes spinner_cHKR{0%,50%{x:1px;y:15.66px}25%{x:4px;y:18.66px}}@keyframes spinner_Re6e{0%,50%{x:15.66px;y:8.33px}25%{x:18.66px;y:11.33px}}@keyframes spinner_EJmJ{0%,50%{x:8.33px;y:15.66px}25%{x:11.33px;y:18.66px}}@keyframes spinner_YJOP{0%,50%{x:15.66px;y:15.66px}25%{x:18.66px;y:18.66px}}</style><rect class=\"spinner_zWVm\" x=\"1\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_gfyD\" x=\"8.33\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_T5JJ\" x=\"1\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_E3Wz\" x=\"15.66\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_g2vs\" x=\"8.33\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_ctYB\" x=\"1\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_BDNj\" x=\"15.66\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_rCw3\" x=\"8.33\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_Rszm\" x=\"15.66\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/></svg>\n \n\n</ng-template>\n", styles: [".toast{position:fixed;bottom:30px;right:30px;width:370px!important;min-height:116px!important;display:flex;flex-direction:column;justify-content:space-between;border-radius:17px;padding:1rem 1rem 1.5rem;box-shadow:8px 16px 32px #0000004d;background-color:#fff;z-index:50}.toast p{color:#625270;font-size:13px}.toast>header{color:#5505a2;display:flex;align-items:center;gap:.5rem}.toast>header>button{position:absolute;right:20px;border:none;background-color:transparent;color:#d1d5db;padding:10px 0 10px 10px;cursor:pointer;transition:.3s ease}.toast>header>button:hover{color:#ed3a3a}.toast>header>.icon{border:4px solid #5505a2;border-radius:50%;width:30px;height:30px}.toast>header h4{margin:0;padding:0;font-size:20px}.animation{animation:show-up .5s ease}.error>header{color:#ed3a3a}.error>header h4{color:#ed3a3a}.success>header{color:#4ab858}.success>header h4{color:#4ab858}.loading>header h4{color:#786b84}.loading>header>img,.loading>header svg{transform:rotate(45deg)}.close-toast{animation:close 1.1s ease}@keyframes show-up{0%{opacity:0;transform:translateY(100vw)}to{opacity:1;transform:translate(0)}}@keyframes close{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100vw)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
1221
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OcToastComponent, isStandalone: true, selector: "oc-toast", ngImport: i0, template: "<div\n class=\"toast\"\n [ngClass]=\"{\n 'close-toast': toast.currentToast.counter === 1,\n error: ['erro', 'error'].includes(toast.currentToast.status.toLowerCase()),\n success: ['sucesso', 'success', '\u00E9xito'].includes(toast.currentToast.status.toLowerCase()),\n loading: ['carregando', 'cargando', 'loading'].includes(toast.currentToast.status.toLowerCase()),\n animation: toast.currentToast.hasAnimation\n }\"\n *ngIf=\"toast.currentToast && toast.currentToast.counter > 0\"\n>\n <header>\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n <h4 class=\"status\">\n {{ toast.currentToast.status[0].toUpperCase() + toast.currentToast.status.slice(1) }}\n </h4>\n <button (click)=\"toast.closeToast(toast.currentToast.id)\">\n <span class=\"material-symbols-outlined\">close</span>\n </button>\n </header>\n <p>{{ toast.currentToast.message }}</p>\n</div>\n\n<ng-template #iconTemplate>\n <span\n class=\"material-symbols-outlined\"\n *ngIf=\"['erro', 'error'].includes(toast.currentToast.status.toLowerCase())\"\n >error</span\n >\n\n <span\n class=\"material-symbols-outlined\"\n *ngIf=\"['sucesso', 'success', '\u00E9xito'].includes(toast.currentToast.status.toLowerCase())\"\n >check_circle</span\n >\n\n <span\n class=\"material-symbols-outlined\"\n *ngIf=\"['information', 'informa\u00E7\u00E3o', 'informaci\u00F3n'].includes(toast.currentToast.status.toLowerCase())\"\n >info</span\n >\n\n <svg *ngIf=\"['carregando', 'cargando', 'loading'].includes(toast.currentToast.status.toLowerCase())\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><style>rect{fill:#00DDA3}.spinner_zWVm{animation:spinner_5QiW 1.2s linear infinite,spinner_PnZo 1.2s linear infinite}.spinner_gfyD{animation:spinner_5QiW 1.2s linear infinite,spinner_4j7o 1.2s linear infinite;animation-delay:.1s}.spinner_T5JJ{animation:spinner_5QiW 1.2s linear infinite,spinner_fLK4 1.2s linear infinite;animation-delay:.1s}.spinner_E3Wz{animation:spinner_5QiW 1.2s linear infinite,spinner_tDji 1.2s linear infinite;animation-delay:.2s}.spinner_g2vs{animation:spinner_5QiW 1.2s linear infinite,spinner_CMiT 1.2s linear infinite;animation-delay:.2s}.spinner_ctYB{animation:spinner_5QiW 1.2s linear infinite,spinner_cHKR 1.2s linear infinite;animation-delay:.2s}.spinner_BDNj{animation:spinner_5QiW 1.2s linear infinite,spinner_Re6e 1.2s linear infinite;animation-delay:.3s}.spinner_rCw3{animation:spinner_5QiW 1.2s linear infinite,spinner_EJmJ 1.2s linear infinite;animation-delay:.3s}.spinner_Rszm{animation:spinner_5QiW 1.2s linear infinite,spinner_YJOP 1.2s linear infinite;animation-delay:.4s}@keyframes spinner_5QiW{0%,50%{width:7.33px;height:7.33px}25%{width:1.33px;height:1.33px}}@keyframes spinner_PnZo{0%,50%{x:1px;y:1px}25%{x:4px;y:4px}}@keyframes spinner_4j7o{0%,50%{x:8.33px;y:1px}25%{x:11.33px;y:4px}}@keyframes spinner_fLK4{0%,50%{x:1px;y:8.33px}25%{x:4px;y:11.33px}}@keyframes spinner_tDji{0%,50%{x:15.66px;y:1px}25%{x:18.66px;y:4px}}@keyframes spinner_CMiT{0%,50%{x:8.33px;y:8.33px}25%{x:11.33px;y:11.33px}}@keyframes spinner_cHKR{0%,50%{x:1px;y:15.66px}25%{x:4px;y:18.66px}}@keyframes spinner_Re6e{0%,50%{x:15.66px;y:8.33px}25%{x:18.66px;y:11.33px}}@keyframes spinner_EJmJ{0%,50%{x:8.33px;y:15.66px}25%{x:11.33px;y:18.66px}}@keyframes spinner_YJOP{0%,50%{x:15.66px;y:15.66px}25%{x:18.66px;y:18.66px}}</style><rect class=\"spinner_zWVm\" x=\"1\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_gfyD\" x=\"8.33\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_T5JJ\" x=\"1\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_E3Wz\" x=\"15.66\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_g2vs\" x=\"8.33\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_ctYB\" x=\"1\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_BDNj\" x=\"15.66\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_rCw3\" x=\"8.33\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_Rszm\" x=\"15.66\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/></svg>\n \n\n</ng-template>\n", styles: [".toast{position:fixed;bottom:30px;right:30px;width:370px!important;min-height:116px!important;display:flex;flex-direction:column;justify-content:space-between;border-radius:17px;padding:1rem 1rem 1.5rem;box-shadow:8px 16px 32px #0000004d;background-color:#fff;z-index:50}.toast p{color:#625270;font-size:13px}.toast>header{color:#5505a2;display:flex;align-items:center;gap:.5rem}.toast>header>button{position:absolute;right:20px;border:none;background-color:transparent;color:#d1d5db;padding:10px 0 10px 10px;cursor:pointer;transition:.3s ease}.toast>header>button:hover{color:#ed3a3a}.toast>header>.icon{border:4px solid #5505a2;border-radius:50%;width:30px;height:30px}.toast>header h4{margin:0;padding:0;font-size:20px}.animation{animation:show-up .5s ease}.error>header{color:#ed3a3a}.error>header h4{color:#ed3a3a}.success>header{color:#4ab858}.success>header h4{color:#4ab858}.loading>header h4{color:#786b84}.loading>header>img,.loading>header svg{transform:rotate(45deg)}.close-toast{animation:close 1.1s ease}@keyframes show-up{0%{opacity:0;transform:translateY(100vw)}to{opacity:1;transform:translate(0)}}@keyframes close{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100vw)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
1181
1222
|
}
|
|
1182
1223
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToastComponent, decorators: [{
|
|
1183
1224
|
type: Component,
|
|
1184
|
-
args: [{ selector: 'oc-toast', standalone: true, imports: [CommonModule], template: "<div\n class=\"toast\"\n [ngClass]=\"{\n 'close-toast': toast.currentToast.counter === 1,\n error: ['erro', 'error'].includes(toast.currentToast.status.toLowerCase()),\n success: ['sucesso', 'success', '\u00E9xito'].includes(toast.currentToast.status.toLowerCase()),\n loading: ['carregando', 'cargando', 'loading'].includes(toast.currentToast.status.toLowerCase()),\n animation: toast.currentToast.hasAnimation\n }\"\n *ngIf=\"toast.currentToast && toast.currentToast.counter > 0\"\n>\n <header>\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n <h4 class=\"status\">\n {{ toast.currentToast.status[0].toUpperCase() + toast.currentToast.status.slice(1) }}\n </h4>\n <button (click)=\"toast.closeToast(toast.currentToast.id)\">\n <span class=\"material-symbols-outlined\">close</span>\n </button>\n </header>\n <p>{{ toast.currentToast.message }}</p>\n</div>\n\n<ng-template #iconTemplate>\n <span\n class=\"material-symbols-outlined\"\n *ngIf=\"['erro', 'error'].includes(toast.currentToast.status.toLowerCase())\"\n >error</span\n >\n\n <span\n class=\"material-symbols-outlined\"\n *ngIf=\"['sucesso', 'success', '\u00E9xito'].includes(toast.currentToast.status.toLowerCase())\"\n >check_circle</span\n >\n\n <span\n class=\"material-symbols-outlined\"\n *ngIf=\"['information', 'informa\u00E7\u00E3o', 'informaci\u00F3n'].includes(toast.currentToast.status.toLowerCase())\"\n >info</span\n >\n\n <svg *ngIf=\"['carregando', 'cargando', 'loading'].includes(toast.currentToast.status.toLowerCase())\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><style>rect{fill:#00DDA3}.spinner_zWVm{animation:spinner_5QiW 1.2s linear infinite,spinner_PnZo 1.2s linear infinite}.spinner_gfyD{animation:spinner_5QiW 1.2s linear infinite,spinner_4j7o 1.2s linear infinite;animation-delay:.1s}.spinner_T5JJ{animation:spinner_5QiW 1.2s linear infinite,spinner_fLK4 1.2s linear infinite;animation-delay:.1s}.spinner_E3Wz{animation:spinner_5QiW 1.2s linear infinite,spinner_tDji 1.2s linear infinite;animation-delay:.2s}.spinner_g2vs{animation:spinner_5QiW 1.2s linear infinite,spinner_CMiT 1.2s linear infinite;animation-delay:.2s}.spinner_ctYB{animation:spinner_5QiW 1.2s linear infinite,spinner_cHKR 1.2s linear infinite;animation-delay:.2s}.spinner_BDNj{animation:spinner_5QiW 1.2s linear infinite,spinner_Re6e 1.2s linear infinite;animation-delay:.3s}.spinner_rCw3{animation:spinner_5QiW 1.2s linear infinite,spinner_EJmJ 1.2s linear infinite;animation-delay:.3s}.spinner_Rszm{animation:spinner_5QiW 1.2s linear infinite,spinner_YJOP 1.2s linear infinite;animation-delay:.4s}@keyframes spinner_5QiW{0%,50%{width:7.33px;height:7.33px}25%{width:1.33px;height:1.33px}}@keyframes spinner_PnZo{0%,50%{x:1px;y:1px}25%{x:4px;y:4px}}@keyframes spinner_4j7o{0%,50%{x:8.33px;y:1px}25%{x:11.33px;y:4px}}@keyframes spinner_fLK4{0%,50%{x:1px;y:8.33px}25%{x:4px;y:11.33px}}@keyframes spinner_tDji{0%,50%{x:15.66px;y:1px}25%{x:18.66px;y:4px}}@keyframes spinner_CMiT{0%,50%{x:8.33px;y:8.33px}25%{x:11.33px;y:11.33px}}@keyframes spinner_cHKR{0%,50%{x:1px;y:15.66px}25%{x:4px;y:18.66px}}@keyframes spinner_Re6e{0%,50%{x:15.66px;y:8.33px}25%{x:18.66px;y:11.33px}}@keyframes spinner_EJmJ{0%,50%{x:8.33px;y:15.66px}25%{x:11.33px;y:18.66px}}@keyframes spinner_YJOP{0%,50%{x:15.66px;y:15.66px}25%{x:18.66px;y:18.66px}}</style><rect class=\"spinner_zWVm\" x=\"1\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_gfyD\" x=\"8.33\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_T5JJ\" x=\"1\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_E3Wz\" x=\"15.66\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_g2vs\" x=\"8.33\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_ctYB\" x=\"1\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_BDNj\" x=\"15.66\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_rCw3\" x=\"8.33\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_Rszm\" x=\"15.66\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/></svg>\n \n\n</ng-template>\n", styles: [".toast{position:fixed;bottom:30px;right:30px;width:370px!important;min-height:116px!important;display:flex;flex-direction:column;justify-content:space-between;border-radius:17px;padding:1rem 1rem 1.5rem;box-shadow:8px 16px 32px #0000004d;background-color:#fff;z-index:50}.toast p{color:#625270;font-size:13px}.toast>header{color:#5505a2;display:flex;align-items:center;gap:.5rem}.toast>header>button{position:absolute;right:20px;border:none;background-color:transparent;color:#d1d5db;padding:10px 0 10px 10px;cursor:pointer;transition:.3s ease}.toast>header>button:hover{color:#ed3a3a}.toast>header>.icon{border:4px solid #5505a2;border-radius:50%;width:30px;height:30px}.toast>header h4{margin:0;padding:0;font-size:20px}.animation{animation:show-up .5s ease}.error>header{color:#ed3a3a}.error>header h4{color:#ed3a3a}.success>header{color:#4ab858}.success>header h4{color:#4ab858}.loading>header h4{color:#786b84}.loading>header>img,.loading>header svg{transform:rotate(45deg)}.close-toast{animation:close 1.1s ease}@keyframes show-up{0%{opacity:0;transform:translateY(100vw)}to{opacity:1;transform:translate(0)}}@keyframes close{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100vw)}}\n"] }]
|
|
1225
|
+
args: [{ selector: 'oc-toast', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n class=\"toast\"\n [ngClass]=\"{\n 'close-toast': toast.currentToast.counter === 1,\n error: ['erro', 'error'].includes(toast.currentToast.status.toLowerCase()),\n success: ['sucesso', 'success', '\u00E9xito'].includes(toast.currentToast.status.toLowerCase()),\n loading: ['carregando', 'cargando', 'loading'].includes(toast.currentToast.status.toLowerCase()),\n animation: toast.currentToast.hasAnimation\n }\"\n *ngIf=\"toast.currentToast && toast.currentToast.counter > 0\"\n>\n <header>\n <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\n <h4 class=\"status\">\n {{ toast.currentToast.status[0].toUpperCase() + toast.currentToast.status.slice(1) }}\n </h4>\n <button (click)=\"toast.closeToast(toast.currentToast.id)\">\n <span class=\"material-symbols-outlined\">close</span>\n </button>\n </header>\n <p>{{ toast.currentToast.message }}</p>\n</div>\n\n<ng-template #iconTemplate>\n <span\n class=\"material-symbols-outlined\"\n *ngIf=\"['erro', 'error'].includes(toast.currentToast.status.toLowerCase())\"\n >error</span\n >\n\n <span\n class=\"material-symbols-outlined\"\n *ngIf=\"['sucesso', 'success', '\u00E9xito'].includes(toast.currentToast.status.toLowerCase())\"\n >check_circle</span\n >\n\n <span\n class=\"material-symbols-outlined\"\n *ngIf=\"['information', 'informa\u00E7\u00E3o', 'informaci\u00F3n'].includes(toast.currentToast.status.toLowerCase())\"\n >info</span\n >\n\n <svg *ngIf=\"['carregando', 'cargando', 'loading'].includes(toast.currentToast.status.toLowerCase())\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><style>rect{fill:#00DDA3}.spinner_zWVm{animation:spinner_5QiW 1.2s linear infinite,spinner_PnZo 1.2s linear infinite}.spinner_gfyD{animation:spinner_5QiW 1.2s linear infinite,spinner_4j7o 1.2s linear infinite;animation-delay:.1s}.spinner_T5JJ{animation:spinner_5QiW 1.2s linear infinite,spinner_fLK4 1.2s linear infinite;animation-delay:.1s}.spinner_E3Wz{animation:spinner_5QiW 1.2s linear infinite,spinner_tDji 1.2s linear infinite;animation-delay:.2s}.spinner_g2vs{animation:spinner_5QiW 1.2s linear infinite,spinner_CMiT 1.2s linear infinite;animation-delay:.2s}.spinner_ctYB{animation:spinner_5QiW 1.2s linear infinite,spinner_cHKR 1.2s linear infinite;animation-delay:.2s}.spinner_BDNj{animation:spinner_5QiW 1.2s linear infinite,spinner_Re6e 1.2s linear infinite;animation-delay:.3s}.spinner_rCw3{animation:spinner_5QiW 1.2s linear infinite,spinner_EJmJ 1.2s linear infinite;animation-delay:.3s}.spinner_Rszm{animation:spinner_5QiW 1.2s linear infinite,spinner_YJOP 1.2s linear infinite;animation-delay:.4s}@keyframes spinner_5QiW{0%,50%{width:7.33px;height:7.33px}25%{width:1.33px;height:1.33px}}@keyframes spinner_PnZo{0%,50%{x:1px;y:1px}25%{x:4px;y:4px}}@keyframes spinner_4j7o{0%,50%{x:8.33px;y:1px}25%{x:11.33px;y:4px}}@keyframes spinner_fLK4{0%,50%{x:1px;y:8.33px}25%{x:4px;y:11.33px}}@keyframes spinner_tDji{0%,50%{x:15.66px;y:1px}25%{x:18.66px;y:4px}}@keyframes spinner_CMiT{0%,50%{x:8.33px;y:8.33px}25%{x:11.33px;y:11.33px}}@keyframes spinner_cHKR{0%,50%{x:1px;y:15.66px}25%{x:4px;y:18.66px}}@keyframes spinner_Re6e{0%,50%{x:15.66px;y:8.33px}25%{x:18.66px;y:11.33px}}@keyframes spinner_EJmJ{0%,50%{x:8.33px;y:15.66px}25%{x:11.33px;y:18.66px}}@keyframes spinner_YJOP{0%,50%{x:15.66px;y:15.66px}25%{x:18.66px;y:18.66px}}</style><rect class=\"spinner_zWVm\" x=\"1\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_gfyD\" x=\"8.33\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_T5JJ\" x=\"1\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_E3Wz\" x=\"15.66\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_g2vs\" x=\"8.33\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_ctYB\" x=\"1\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_BDNj\" x=\"15.66\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_rCw3\" x=\"8.33\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_Rszm\" x=\"15.66\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/></svg>\n \n\n</ng-template>\n", styles: [".toast{position:fixed;bottom:30px;right:30px;width:370px!important;min-height:116px!important;display:flex;flex-direction:column;justify-content:space-between;border-radius:17px;padding:1rem 1rem 1.5rem;box-shadow:8px 16px 32px #0000004d;background-color:#fff;z-index:50}.toast p{color:#625270;font-size:13px}.toast>header{color:#5505a2;display:flex;align-items:center;gap:.5rem}.toast>header>button{position:absolute;right:20px;border:none;background-color:transparent;color:#d1d5db;padding:10px 0 10px 10px;cursor:pointer;transition:.3s ease}.toast>header>button:hover{color:#ed3a3a}.toast>header>.icon{border:4px solid #5505a2;border-radius:50%;width:30px;height:30px}.toast>header h4{margin:0;padding:0;font-size:20px}.animation{animation:show-up .5s ease}.error>header{color:#ed3a3a}.error>header h4{color:#ed3a3a}.success>header{color:#4ab858}.success>header h4{color:#4ab858}.loading>header h4{color:#786b84}.loading>header>img,.loading>header svg{transform:rotate(45deg)}.close-toast{animation:close 1.1s ease}@keyframes show-up{0%{opacity:0;transform:translateY(100vw)}to{opacity:1;transform:translate(0)}}@keyframes close{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100vw)}}\n"] }]
|
|
1185
1226
|
}], ctorParameters: () => [{ type: OcToastService }] });
|
|
1186
1227
|
|
|
1187
1228
|
class OcToggleComponent {
|