otimus-library 0.3.23 → 0.3.25

package/fesm2022/otimus-library.mjs

@@ -792,11 +792,11 @@ class OcChipComponent {
         this.ocRemove.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcChipComponent, isStandalone: true, selector: "oc-chip", inputs: { ocSelected: "ocSelected", ocType: "ocType", ocBg: "ocBg", ocBgHexColor: "ocBgHexColor", ocText: "ocText", ocFontSize: "ocFontSize" }, outputs: { ocClick: "ocClick", ocRemove: "ocRemove" }, ngImport: i0, template: "<button\n  [ngClass]=\"{\n    'oc-chip': true,\n    selected: ocSelected,\n    'not-selectable': ocType !== 'select' && ocType !== 'select_remove',\n    tag: ocType === 'tag',\n    remove: ocType === 'remove' || ocType === 'select_remove',\n    'green-bg': ocBg === 'green' && !ocBgHexColor,\n    'red-bg': ocBg === 'red' && !ocBgHexColor,\n    'yellow-bg': ocBg === 'yellow' && !ocBgHexColor,\n    'custom-hex-color': !!ocBgHexColor,\n  }\"\n  type=\"button\"\n  [ngStyle]=\"{\n    'font-size': ocFontSize,\n    'background-color': ocBgHexColor || null,\n  }\"\n  [title]=\"ocText\"\n  (click)=\"ocType.includes('select') ? ocEvent($event) : null\"\n>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  @if (ocType.includes('remove')) {\n    <span\n      class=\"material-symbols-outlined\"\n      (click)=\"ocRemoveEvent($event)\"\n      >close</span\n    >\n  }\n</button>\n", styles: [".oc-chip{background-color:#f7f7f7;color:#8f9596;border:2px solid #d1d5db;border-radius:16px;font-size:14px;font-weight:500;padding:3px 14px;transition:.3s ease!important;cursor:pointer;display:flex;align-items:center}.oc-chip:hover{filter:brightness(.95)}.oc-chip:active{filter:brightness(.85)}.oc-chip.custom-hex-color{border:none;color:#fff;padding:.375rem .75rem;border-radius:1rem;white-space:nowrap}:host-context(body.shui) .oc-chip.custom-hex-color{box-shadow:0 2px 4px #0000001a}:host-context(body.shui) .oc-chip.custom-hex-color:hover{filter:brightness(1.1);box-shadow:0 3px 6px #00000026}:host-context(body.shui) .oc-chip.custom-hex-color:active{filter:brightness(.95);box-shadow:0 1px 2px #0000001a}.selected{background-color:#ccfbe6dc;border:2px solid #00dda3;color:#00dda3}.selected.red-bg{color:#ed3a3a;border-color:#ed3a3a;background-color:#ffcaca}.selected.green-bg{color:#00dda3;border-color:#00dda3;background-color:#ccfbe6dc}.selected.yellow-bg{color:#ebbc2e;border-color:#ebbc2e;background-color:#fffaea}.not-selectable{border:none;background-color:#f7f7f7;color:#8f9596;cursor:default}.not-selectable:active{cursor:not-allowed}.material-symbols-outlined{font-size:.9rem;width:10px;height:10px}.remove{display:flex;align-items:center;gap:.5rem;padding-right:.5rem}.remove:hover{filter:brightness(1)}.remove span{display:flex;align-items:center;justify-content:center;padding:5px;cursor:pointer;border-radius:50%;transition:.1s ease}.remove span:hover{background-color:#d1d5db}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcChipComponent, isStandalone: true, selector: "oc-chip", inputs: { ocSelected: "ocSelected", ocType: "ocType", ocBg: "ocBg", ocBgHexColor: "ocBgHexColor", ocText: "ocText", ocFontSize: "ocFontSize" }, outputs: { ocClick: "ocClick", ocRemove: "ocRemove" }, ngImport: i0, template: "<button\n  [ngClass]=\"{\n    'oc-chip': true,\n    selected: ocSelected,\n    'not-selectable': ocType !== 'select' && ocType !== 'select_remove',\n    tag: ocType === 'tag',\n    remove: ocType === 'remove' || ocType === 'select_remove',\n    'green-bg': ocBg === 'green' && !ocBgHexColor,\n    'red-bg': ocBg === 'red' && !ocBgHexColor,\n    'yellow-bg': ocBg === 'yellow' && !ocBgHexColor,\n    'custom-hex-color': !!ocBgHexColor,\n  }\"\n  type=\"button\"\n  [ngStyle]=\"{\n    'font-size': ocFontSize,\n    'background-color': ocBgHexColor || null,\n  }\"\n  [title]=\"ocText\"\n  (click)=\"ocType.includes('select') ? ocEvent($event) : null\"\n>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  @if (ocType.includes('remove')) {\n    <span\n      class=\"material-symbols-outlined\"\n      (click)=\"ocRemoveEvent($event)\"\n      >close</span\n    >\n  }\n</button>\n", styles: [".oc-chip{background-color:#f7f7f7;color:#8f9596;border:2px solid #d1d5db;border-radius:16px;font-size:14px!important;font-weight:500;padding:3px 14px;transition:.3s ease!important;cursor:pointer;display:flex;align-items:center}.oc-chip:hover{filter:brightness(.95)}.oc-chip:active{filter:brightness(.85)}.oc-chip.custom-hex-color{border:none;color:#fff;padding:.375rem .75rem;border-radius:1rem;white-space:nowrap}:host-context(body.shui) .oc-chip.custom-hex-color{box-shadow:0 2px 4px #0000001a}:host-context(body.shui) .oc-chip.custom-hex-color:hover{filter:brightness(1.1);box-shadow:0 3px 6px #00000026}:host-context(body.shui) .oc-chip.custom-hex-color:active{filter:brightness(.95);box-shadow:0 1px 2px #0000001a}.selected{background-color:#ccfbe6dc;border:2px solid #00dda3;color:#00dda3}.selected.red-bg{color:#ed3a3a;border-color:#ed3a3a;background-color:#ffcaca}.selected.green-bg{color:#00dda3;border-color:#00dda3;background-color:#ccfbe6dc}.selected.yellow-bg{color:#ebbc2e;border-color:#ebbc2e;background-color:#fffaea}.not-selectable{border:none;background-color:#f7f7f7;color:#8f9596;cursor:default}.not-selectable:active{cursor:not-allowed}.material-symbols-outlined{font-size:.9rem;width:10px;height:10px}.remove{display:flex;align-items:center;gap:.5rem;padding-right:.5rem}.remove:hover{filter:brightness(1)}.remove span{display:flex;align-items:center;justify-content:center;padding:5px;cursor:pointer;border-radius:50%;transition:.1s ease}.remove span:hover{background-color:#d1d5db}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oc-chip', standalone: true, imports: [CommonModule], template: "<button\n  [ngClass]=\"{\n    'oc-chip': true,\n    selected: ocSelected,\n    'not-selectable': ocType !== 'select' && ocType !== 'select_remove',\n    tag: ocType === 'tag',\n    remove: ocType === 'remove' || ocType === 'select_remove',\n    'green-bg': ocBg === 'green' && !ocBgHexColor,\n    'red-bg': ocBg === 'red' && !ocBgHexColor,\n    'yellow-bg': ocBg === 'yellow' && !ocBgHexColor,\n    'custom-hex-color': !!ocBgHexColor,\n  }\"\n  type=\"button\"\n  [ngStyle]=\"{\n    'font-size': ocFontSize,\n    'background-color': ocBgHexColor || null,\n  }\"\n  [title]=\"ocText\"\n  (click)=\"ocType.includes('select') ? ocEvent($event) : null\"\n>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  @if (ocType.includes('remove')) {\n    <span\n      class=\"material-symbols-outlined\"\n      (click)=\"ocRemoveEvent($event)\"\n      >close</span\n    >\n  }\n</button>\n", styles: [".oc-chip{background-color:#f7f7f7;color:#8f9596;border:2px solid #d1d5db;border-radius:16px;font-size:14px;font-weight:500;padding:3px 14px;transition:.3s ease!important;cursor:pointer;display:flex;align-items:center}.oc-chip:hover{filter:brightness(.95)}.oc-chip:active{filter:brightness(.85)}.oc-chip.custom-hex-color{border:none;color:#fff;padding:.375rem .75rem;border-radius:1rem;white-space:nowrap}:host-context(body.shui) .oc-chip.custom-hex-color{box-shadow:0 2px 4px #0000001a}:host-context(body.shui) .oc-chip.custom-hex-color:hover{filter:brightness(1.1);box-shadow:0 3px 6px #00000026}:host-context(body.shui) .oc-chip.custom-hex-color:active{filter:brightness(.95);box-shadow:0 1px 2px #0000001a}.selected{background-color:#ccfbe6dc;border:2px solid #00dda3;color:#00dda3}.selected.red-bg{color:#ed3a3a;border-color:#ed3a3a;background-color:#ffcaca}.selected.green-bg{color:#00dda3;border-color:#00dda3;background-color:#ccfbe6dc}.selected.yellow-bg{color:#ebbc2e;border-color:#ebbc2e;background-color:#fffaea}.not-selectable{border:none;background-color:#f7f7f7;color:#8f9596;cursor:default}.not-selectable:active{cursor:not-allowed}.material-symbols-outlined{font-size:.9rem;width:10px;height:10px}.remove{display:flex;align-items:center;gap:.5rem;padding-right:.5rem}.remove:hover{filter:brightness(1)}.remove span{display:flex;align-items:center;justify-content:center;padding:5px;cursor:pointer;border-radius:50%;transition:.1s ease}.remove span:hover{background-color:#d1d5db}\n"] }]
+            args: [{ selector: 'oc-chip', standalone: true, imports: [CommonModule], template: "<button\n  [ngClass]=\"{\n    'oc-chip': true,\n    selected: ocSelected,\n    'not-selectable': ocType !== 'select' && ocType !== 'select_remove',\n    tag: ocType === 'tag',\n    remove: ocType === 'remove' || ocType === 'select_remove',\n    'green-bg': ocBg === 'green' && !ocBgHexColor,\n    'red-bg': ocBg === 'red' && !ocBgHexColor,\n    'yellow-bg': ocBg === 'yellow' && !ocBgHexColor,\n    'custom-hex-color': !!ocBgHexColor,\n  }\"\n  type=\"button\"\n  [ngStyle]=\"{\n    'font-size': ocFontSize,\n    'background-color': ocBgHexColor || null,\n  }\"\n  [title]=\"ocText\"\n  (click)=\"ocType.includes('select') ? ocEvent($event) : null\"\n>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  @if (ocType.includes('remove')) {\n    <span\n      class=\"material-symbols-outlined\"\n      (click)=\"ocRemoveEvent($event)\"\n      >close</span\n    >\n  }\n</button>\n", styles: [".oc-chip{background-color:#f7f7f7;color:#8f9596;border:2px solid #d1d5db;border-radius:16px;font-size:14px!important;font-weight:500;padding:3px 14px;transition:.3s ease!important;cursor:pointer;display:flex;align-items:center}.oc-chip:hover{filter:brightness(.95)}.oc-chip:active{filter:brightness(.85)}.oc-chip.custom-hex-color{border:none;color:#fff;padding:.375rem .75rem;border-radius:1rem;white-space:nowrap}:host-context(body.shui) .oc-chip.custom-hex-color{box-shadow:0 2px 4px #0000001a}:host-context(body.shui) .oc-chip.custom-hex-color:hover{filter:brightness(1.1);box-shadow:0 3px 6px #00000026}:host-context(body.shui) .oc-chip.custom-hex-color:active{filter:brightness(.95);box-shadow:0 1px 2px #0000001a}.selected{background-color:#ccfbe6dc;border:2px solid #00dda3;color:#00dda3}.selected.red-bg{color:#ed3a3a;border-color:#ed3a3a;background-color:#ffcaca}.selected.green-bg{color:#00dda3;border-color:#00dda3;background-color:#ccfbe6dc}.selected.yellow-bg{color:#ebbc2e;border-color:#ebbc2e;background-color:#fffaea}.not-selectable{border:none;background-color:#f7f7f7;color:#8f9596;cursor:default}.not-selectable:active{cursor:not-allowed}.material-symbols-outlined{font-size:.9rem;width:10px;height:10px}.remove{display:flex;align-items:center;gap:.5rem;padding-right:.5rem}.remove:hover{filter:brightness(1)}.remove span{display:flex;align-items:center;justify-content:center;padding:5px;cursor:pointer;border-radius:50%;transition:.1s ease}.remove span:hover{background-color:#d1d5db}\n"] }]
         }], propDecorators: { ocSelected: [{
                 type: Input
             }], ocType: [{
@@ -1068,8 +1068,8 @@ class OcAutocompleteComponent {
         const searchTerms = name
             .trim()
             .split(/\s+/)
-            .filter(term => term.length > 0)
-            .map(term => this.getFormattedName(term));
+            .filter((term) => term.length > 0)
+            .map((term) => this.getFormattedName(term));
         // If no search terms, show all data
         if (searchTerms.length === 0) {
             this.filteredData = this.ocData;
@@ -1078,7 +1078,7 @@ class OcAutocompleteComponent {
         // Filter data where ALL search terms are found in the name
         this.filteredData = this.ocData.filter((data) => {
             const formattedName = this.getFormattedName(data.name);
-            return searchTerms.every(term => formattedName?.includes(term));
+            return searchTerms.every((term) => formattedName?.includes(term));
         });
     }
     getFormattedName(str) {
@@ -1127,6 +1127,8 @@ class OcAutocompleteComponent {
         };
         this.ocValue = '';
         this.filteredData = this.ocData;
+        // TODO: validate if this can be emitted here
+        // this.ocChange.emit(null)
     }
     incrementCounter(option) {
         if (!option.counter) {
@@ -1176,7 +1178,7 @@ class OcAutocompleteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: InternationalizationService }, { token: StyleThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocData: "ocData", ocPlaceholder: "ocPlaceholder", ocError: "ocError", ocSize: "ocSize", 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", iconSize: "iconSize", ocSelectByTyping: "ocSelectByTyping", ocDisabled: "ocDisabled", ocType: "ocType", ocHasDeleteButton: "ocHasDeleteButton", ocEnableKeyboard: "ocEnableKeyboard" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocCounterSelectChange: "ocCounterSelectChange", 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 }, { propertyName: "listOptionsElements", predicate: ["listOptionsRef"], 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 || ocHasDeleteButton,\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    [disabled]=\"ocDisabled\"\n    (keydown)=\"onKeyDown($event)\"\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  @if (ocHasDeleteButton && !ocDisabled) {\n    <button\n      class=\"oc-has-close-button oc suffix\"\n      (click)=\"clearValue()\"\n      [disabled]=\"ocDisabled\"\n    >\n      <span class=\"material-symbols-outlined\">backspace</span>\n    </button>\n  }\n  <ng-content select=\"ocSuffix\"></ng-content>\n\n  <div class=\"oc-options-div\">\n    @if (isOptionsShown && !ocLoading && !ocDisabled) {\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 class=\"li-option\" #listOptionsRef>\n                <button\n                  type=\"button\"\n                  (click)=\"selectValue(data.value)\"\n                  [class.hover]=\"ocType !== 'counterSelect'\"\n                  [class.highlight]=\"selectedIndex === i\"\n                >\n                  @if (data.icon) {\n                    <span\n                      class=\"material-symbols-outlined\"\n                      [ngStyle]=\"{\n                        'font-size': data.iconSize || '1.2rem',\n                      }\"\n                    >\n                      {{ data.icon }}\n                    </span>\n                  }\n                  {{ data.name }}\n                </button>\n                @if (ocType === 'counterSelect') {\n                  <div class=\"oc-counter-select\">\n                    <button\n                      class=\"subtract\"\n                      (click)=\"decrementCounter(data)\"\n                    >\n                      <span class=\"material-symbols-outlined\">remove</span>\n                    </button>\n                    <p class=\"counter\">{{ data.counter || 0 }}</p>\n                    <button\n                      class=\"add\"\n                      (click)=\"incrementCounter(data)\"\n                    >\n                      <span class=\"material-symbols-outlined\">add</span>\n                    </button>\n                  </div>\n                }\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 && !ocDisabled) {\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: ["@charset \"UTF-8\";.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}.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}.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.oc-options-div{position:absolute;width:100%}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.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;display:flex;justify-content:space-between}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer;display:flex;align-items:center}.oc-options>li button span.material-symbols-outlined{line-height:0;color:#8f9596;margin:0 8px 0 0;padding:0}.oc-options>li button.hover:hover{filter:brightness(.9)}.oc-options>li button.highlight{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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocData: "ocData", ocPlaceholder: "ocPlaceholder", ocError: "ocError", ocSize: "ocSize", 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", iconSize: "iconSize", ocSelectByTyping: "ocSelectByTyping", ocDisabled: "ocDisabled", ocType: "ocType", ocHasDeleteButton: "ocHasDeleteButton", ocEnableKeyboard: "ocEnableKeyboard" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocCounterSelectChange: "ocCounterSelectChange", 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 }, { propertyName: "listOptionsElements", predicate: ["listOptionsRef"], 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 || ocHasDeleteButton,\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    [disabled]=\"ocDisabled\"\n    (keydown)=\"onKeyDown($event)\"\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  @if (ocHasDeleteButton && !ocDisabled) {\n    <button\n      class=\"oc-has-close-button oc suffix\"\n      (click)=\"clearValue(); ocChange.emit(null)\"\n      [disabled]=\"ocDisabled\"\n    >\n      <span class=\"material-symbols-outlined\">backspace</span>\n    </button>\n  }\n  <ng-content select=\"ocSuffix\"></ng-content>\n\n  <div class=\"oc-options-div\">\n    @if (isOptionsShown && !ocLoading && !ocDisabled) {\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                class=\"li-option\"\n                #listOptionsRef\n              >\n                <button\n                  type=\"button\"\n                  (click)=\"selectValue(data.value)\"\n                  [class.hover]=\"ocType !== 'counterSelect'\"\n                  [class.highlight]=\"selectedIndex === i\"\n                >\n                  @if (data.icon) {\n                    <span\n                      class=\"material-symbols-outlined\"\n                      [ngStyle]=\"{\n                        'font-size': data.iconSize || '1.2rem',\n                      }\"\n                    >\n                      {{ data.icon }}\n                    </span>\n                  }\n                  {{ data.name }}\n                </button>\n                @if (ocType === 'counterSelect') {\n                  <div class=\"oc-counter-select\">\n                    <button\n                      class=\"subtract\"\n                      (click)=\"decrementCounter(data)\"\n                    >\n                      <span class=\"material-symbols-outlined\">remove</span>\n                    </button>\n                    <p class=\"counter\">{{ data.counter || 0 }}</p>\n                    <button\n                      class=\"add\"\n                      (click)=\"incrementCounter(data)\"\n                    >\n                      <span class=\"material-symbols-outlined\">add</span>\n                    </button>\n                  </div>\n                }\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 && !ocDisabled) {\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: ["@charset \"UTF-8\";.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}.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}.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.oc-options-div{position:absolute;width:100%}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.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;display:flex;justify-content:space-between}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer;display:flex;align-items:center}.oc-options>li button span.material-symbols-outlined{line-height:0;color:#8f9596;margin:0 8px 0 0;padding:0}.oc-options>li button.hover:hover{filter:brightness(.9)}.oc-options>li button.highlight{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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteComponent, decorators: [{
             type: Component,
@@ -1184,7 +1186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         '[style.width]': 'computedWidth',
                         '[style.min-width]': 'computedMinWidth',
                         '[style.max-width]': 'computedMaxWidth',
-                    }, 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 || ocHasDeleteButton,\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    [disabled]=\"ocDisabled\"\n    (keydown)=\"onKeyDown($event)\"\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  @if (ocHasDeleteButton && !ocDisabled) {\n    <button\n      class=\"oc-has-close-button oc suffix\"\n      (click)=\"clearValue()\"\n      [disabled]=\"ocDisabled\"\n    >\n      <span class=\"material-symbols-outlined\">backspace</span>\n    </button>\n  }\n  <ng-content select=\"ocSuffix\"></ng-content>\n\n  <div class=\"oc-options-div\">\n    @if (isOptionsShown && !ocLoading && !ocDisabled) {\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 class=\"li-option\" #listOptionsRef>\n                <button\n                  type=\"button\"\n                  (click)=\"selectValue(data.value)\"\n                  [class.hover]=\"ocType !== 'counterSelect'\"\n                  [class.highlight]=\"selectedIndex === i\"\n                >\n                  @if (data.icon) {\n                    <span\n                      class=\"material-symbols-outlined\"\n                      [ngStyle]=\"{\n                        'font-size': data.iconSize || '1.2rem',\n                      }\"\n                    >\n                      {{ data.icon }}\n                    </span>\n                  }\n                  {{ data.name }}\n                </button>\n                @if (ocType === 'counterSelect') {\n                  <div class=\"oc-counter-select\">\n                    <button\n                      class=\"subtract\"\n                      (click)=\"decrementCounter(data)\"\n                    >\n                      <span class=\"material-symbols-outlined\">remove</span>\n                    </button>\n                    <p class=\"counter\">{{ data.counter || 0 }}</p>\n                    <button\n                      class=\"add\"\n                      (click)=\"incrementCounter(data)\"\n                    >\n                      <span class=\"material-symbols-outlined\">add</span>\n                    </button>\n                  </div>\n                }\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 && !ocDisabled) {\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: ["@charset \"UTF-8\";.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}.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}.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.oc-options-div{position:absolute;width:100%}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.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;display:flex;justify-content:space-between}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer;display:flex;align-items:center}.oc-options>li button span.material-symbols-outlined{line-height:0;color:#8f9596;margin:0 8px 0 0;padding:0}.oc-options>li button.hover:hover{filter:brightness(.9)}.oc-options>li button.highlight{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"] }]
+                    }, 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 || ocHasDeleteButton,\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    [disabled]=\"ocDisabled\"\n    (keydown)=\"onKeyDown($event)\"\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  @if (ocHasDeleteButton && !ocDisabled) {\n    <button\n      class=\"oc-has-close-button oc suffix\"\n      (click)=\"clearValue(); ocChange.emit(null)\"\n      [disabled]=\"ocDisabled\"\n    >\n      <span class=\"material-symbols-outlined\">backspace</span>\n    </button>\n  }\n  <ng-content select=\"ocSuffix\"></ng-content>\n\n  <div class=\"oc-options-div\">\n    @if (isOptionsShown && !ocLoading && !ocDisabled) {\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                class=\"li-option\"\n                #listOptionsRef\n              >\n                <button\n                  type=\"button\"\n                  (click)=\"selectValue(data.value)\"\n                  [class.hover]=\"ocType !== 'counterSelect'\"\n                  [class.highlight]=\"selectedIndex === i\"\n                >\n                  @if (data.icon) {\n                    <span\n                      class=\"material-symbols-outlined\"\n                      [ngStyle]=\"{\n                        'font-size': data.iconSize || '1.2rem',\n                      }\"\n                    >\n                      {{ data.icon }}\n                    </span>\n                  }\n                  {{ data.name }}\n                </button>\n                @if (ocType === 'counterSelect') {\n                  <div class=\"oc-counter-select\">\n                    <button\n                      class=\"subtract\"\n                      (click)=\"decrementCounter(data)\"\n                    >\n                      <span class=\"material-symbols-outlined\">remove</span>\n                    </button>\n                    <p class=\"counter\">{{ data.counter || 0 }}</p>\n                    <button\n                      class=\"add\"\n                      (click)=\"incrementCounter(data)\"\n                    >\n                      <span class=\"material-symbols-outlined\">add</span>\n                    </button>\n                  </div>\n                }\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 && !ocDisabled) {\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: ["@charset \"UTF-8\";.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}.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}.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.oc-options-div{position:absolute;width:100%}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.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;display:flex;justify-content:space-between}.oc-options>li button{width:100%;text-align:left;padding:.6rem;border:none;background-color:#f8f9ff;cursor:pointer;display:flex;align-items:center}.oc-options>li button span.material-symbols-outlined{line-height:0;color:#8f9596;margin:0 8px 0 0;padding:0}.oc-options>li button.hover:hover{filter:brightness(.9)}.oc-options>li button.highlight{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"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: InternationalizationService }, { type: StyleThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']