otimus-library 0.2.32 → 0.2.34

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.
Files changed (10) hide show
  1. package/esm2022/lib/components/oc-autocomplete/oc-autocomplete.component.mjs +4 -20
  2. package/esm2022/lib/components/oc-checkbox/oc-checkbox.component.mjs +34 -10
  3. package/esm2022/lib/components/oc-menu/oc-menu.component.mjs +1 -1
  4. package/esm2022/lib/components/oc-toast/oc-toast.component.mjs +4 -4
  5. package/esm2022/lib/services/oc-toast.service.mjs +21 -4
  6. package/fesm2022/otimus-library.mjs +57 -32
  7. package/fesm2022/otimus-library.mjs.map +1 -1
  8. package/lib/components/oc-checkbox/oc-checkbox.component.d.ts +7 -5
  9. package/lib/services/oc-toast.service.d.ts +2 -0
  10. package/package.json +1 -1
package/fesm2022/otimus-library.mjs CHANGED
@@ -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, inject, ChangeDetectorRef, 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';
@@ -41,6 +41,7 @@ class OcToastService {
41
41
  constructor() {
42
42
  this.toastList = [];
43
43
  this.isRunning = false;
44
+ this.cdr = inject(ChangeDetectorRef);
44
45
  this.openToast = (toastStatus, toastMessage, toastCounter, promiseKey) => {
45
46
  const toast = {
46
47
  id: this.toastList.length === 0 ? 1 : this.toastList[this.toastList.length - 1].id + 1,
@@ -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,6 +117,9 @@ 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
125
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -111,7 +128,7 @@ class OcToastService {
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
  }] });
117
134
 
@@ -727,11 +744,7 @@ class OcAutocompleteComponent {
727
744
  this.renderer.setAttribute(inputElement, 'required', this.ocRequired.toString());
728
745
  }
729
746
  }
730
- this.cdr.detectChanges();
731
- setTimeout(() => this.cdr.detectChanges(), 100);
732
747
  }, 50);
733
- this.cdr.detectChanges();
734
- setTimeout(() => this.cdr.detectChanges(), 100);
735
748
  }
736
749
  closeOnClickOut() {
737
750
  this.renderer.listen('window', 'click', (e) => {
@@ -741,8 +754,6 @@ class OcAutocompleteComponent {
741
754
  }
742
755
  }
743
756
  this.findByTyping();
744
- this.cdr.detectChanges();
745
- setTimeout(() => this.cdr.detectChanges(), 100);
746
757
  });
747
758
  }
748
759
  findByTyping() {
@@ -761,21 +772,15 @@ class OcAutocompleteComponent {
761
772
  this.ocValue = '';
762
773
  }
763
774
  this.filteredData = this.ocData;
764
- this.cdr.detectChanges();
765
- setTimeout(() => this.cdr.detectChanges(), 100);
766
775
  return;
767
776
  }
768
777
  this.selectedValue = foundValue;
769
- this.cdr.detectChanges();
770
- setTimeout(() => this.cdr.detectChanges(), 100);
771
778
  }
772
779
  filterData(name) {
773
780
  this.isOptionsShown = true;
774
781
  this.filteredData = this.ocData.filter((data) => {
775
782
  return this.getFormattedName(data.name).includes(this.getFormattedName(name));
776
783
  });
777
- this.cdr.detectChanges();
778
- setTimeout(() => this.cdr.detectChanges(), 100);
779
784
  }
780
785
  getFormattedName(str) {
781
786
  return str
@@ -786,8 +791,6 @@ class OcAutocompleteComponent {
786
791
  toggleOptions() {
787
792
  this.closeOnClickOut();
788
793
  this.isOptionsShown = !this.isOptionsShown;
789
- this.cdr.detectChanges();
790
- setTimeout(() => this.cdr.detectChanges(), 100);
791
794
  }
792
795
  selectValue(value) {
793
796
  const foundValue = this.ocData.find((data) => data.value == value);
@@ -820,11 +823,9 @@ class OcAutocompleteComponent {
820
823
  };
821
824
  this.ocValue = '';
822
825
  this.filteredData = this.ocData;
823
- this.cdr.detectChanges();
824
- setTimeout(() => this.cdr.detectChanges(), 100);
825
826
  }
826
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 }); }
827
- 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 }); }
828
829
  }
829
830
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcAutocompleteComponent, decorators: [{
830
831
  type: Component,
@@ -832,7 +833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
832
833
  '[style.width]': 'computedWidth',
833
834
  '[style.min-width]': 'computedMinWidth',
834
835
  '[style.max-width]': 'computedMaxWidth',
835
- }, 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"] }]
836
837
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: InternationalizationService }, { type: StyleThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
837
838
  type: ViewChild,
838
839
  args: ['input']
@@ -1013,8 +1014,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1013
1014
  }] });
1014
1015
 
1015
1016
  class OcCheckboxComponent {
1016
- constructor(styleThemeService) {
1017
+ constructor(styleThemeService, cdr) {
1017
1018
  this.styleThemeService = styleThemeService;
1019
+ this.cdr = cdr;
1018
1020
  this.checkBoxId = `oc-${Math.random()}`;
1019
1021
  this.ocChange = new EventEmitter();
1020
1022
  this.ocChecked = false;
@@ -1025,24 +1027,35 @@ class OcCheckboxComponent {
1025
1027
  this.ocBorderColor = 'white';
1026
1028
  this.ocStyle = 'otimus';
1027
1029
  this.ocDoubleClick = new EventEmitter();
1028
- this.onChange = (value) => { };
1030
+ this.disableDoubleClickCheck = true;
1029
1031
  this.onTouched = () => { };
1030
1032
  this.doubleClickCounter = 0;
1031
1033
  this.timeoutId = null;
1032
1034
  }
1033
1035
  ngAfterViewInit() {
1034
1036
  this.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle;
1037
+ this.cdr.markForCheck();
1038
+ setTimeout(() => this.cdr.detectChanges(), 100);
1035
1039
  }
1036
1040
  writeValue(value) {
1037
1041
  this.ocChecked = value;
1042
+ this.cdr.markForCheck();
1043
+ setTimeout(() => this.cdr.detectChanges(), 100);
1038
1044
  }
1039
1045
  registerOnChange(fn) {
1040
1046
  this.onChange = fn;
1047
+ this.cdr.markForCheck();
1048
+ setTimeout(() => this.cdr.detectChanges(), 100);
1041
1049
  }
1042
1050
  registerOnTouched(fn) {
1043
1051
  this.onTouched = fn;
1052
+ this.cdr.markForCheck();
1053
+ setTimeout(() => this.cdr.detectChanges(), 100);
1044
1054
  }
1045
1055
  onDoubleClick() {
1056
+ if (this.disableDoubleClickCheck) {
1057
+ return;
1058
+ }
1046
1059
  if (this.timeoutId) {
1047
1060
  clearTimeout(this.timeoutId);
1048
1061
  this.timeoutId = null;
@@ -1051,6 +1064,8 @@ class OcCheckboxComponent {
1051
1064
  this.doubleClickCounter = 1;
1052
1065
  this.timeoutId = setTimeout(() => {
1053
1066
  this.doubleClickCounter = 0;
1067
+ this.cdr.markForCheck();
1068
+ setInterval(() => this.cdr.detectChanges(), 100);
1054
1069
  }, 500);
1055
1070
  }
1056
1071
  else {
@@ -1059,27 +1074,35 @@ class OcCheckboxComponent {
1059
1074
  this.ocDoubleClick.emit(this.ocChecked);
1060
1075
  }
1061
1076
  }
1077
+ this.cdr.markForCheck();
1078
+ setTimeout(() => this.cdr.detectChanges(), 100);
1062
1079
  }
1063
1080
  toggleChecked() {
1064
1081
  if (this.doubleClickCounter === 1) {
1082
+ this.cdr.markForCheck();
1083
+ setTimeout(() => this.cdr.detectChanges(), 100);
1065
1084
  return;
1066
1085
  }
1067
1086
  this.ocChecked = !this.ocChecked;
1068
- this.onChange(this.ocChecked);
1087
+ if (this.onChange) {
1088
+ this.onChange(this.ocChecked);
1089
+ }
1069
1090
  this.onTouched();
1070
1091
  this.ocChange.emit(this.ocChecked);
1071
1092
  if (this.formControl) {
1072
1093
  this.formControl.setValue(this.ocChecked);
1073
1094
  }
1095
+ this.cdr.markForCheck();
1096
+ setTimeout(() => this.cdr.detectChanges(), 100);
1074
1097
  }
1075
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcCheckboxComponent, deps: [{ token: StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
1076
- 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: [
1077
1100
  {
1078
1101
  provide: NG_VALUE_ACCESSOR,
1079
1102
  useExisting: forwardRef(() => OcCheckboxComponent),
1080
1103
  multi: true,
1081
1104
  },
1082
- ], 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 }); }
1083
1106
  }
1084
1107
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcCheckboxComponent, decorators: [{
1085
1108
  type: Component,
@@ -1089,8 +1112,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1089
1112
  useExisting: forwardRef(() => OcCheckboxComponent),
1090
1113
  multi: true,
1091
1114
  },
1092
- ], 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"] }]
1093
- }], 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: [{
1094
1117
  type: Output
1095
1118
  }], ocChecked: [{
1096
1119
  type: Input
@@ -1112,6 +1135,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1112
1135
  type: Input
1113
1136
  }], ocTabIndex: [{
1114
1137
  type: Input
1138
+ }], disableDoubleClickCheck: [{
1139
+ type: Input
1115
1140
  }] } });
1116
1141
 
1117
1142
  class OcMenuComponent {
@@ -1174,7 +1199,7 @@ class OcMenuComponent {
1174
1199
  return typeof key;
1175
1200
  }
1176
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 }); }
1177
- 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"] }] }); }
1178
1203
  }
1179
1204
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcMenuComponent, decorators: [{
1180
1205
  type: Component,
@@ -1193,11 +1218,11 @@ class OcToastComponent {
1193
1218
  this.toast = toast;
1194
1219
  }
1195
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 }); }
1196
- 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 }); }
1197
1222
  }
1198
1223
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OcToastComponent, decorators: [{
1199
1224
  type: Component,
1200
- 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"] }]
1201
1226
  }], ctorParameters: () => [{ type: OcToastService }] });
1202
1227
 
1203
1228
  class OcToggleComponent {