otimus-library 0.3.49 → 0.3.50

package/fesm2022/otimus-library.mjs

@@ -942,14 +942,14 @@ class OcAutocompleteDropdownComponent {
         this.incrementCounter = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteDropdownComponent, isStandalone: true, selector: "oc-autocomplete-dropdown", inputs: { filteredData: "filteredData", ocLoading: "ocLoading", ocDisabled: "ocDisabled", ocNoAvailableOptionsText: "ocNoAvailableOptionsText", ocMaxResults: "ocMaxResults", ocTypeForMoreResultsText: "ocTypeForMoreResultsText", ocType: "ocType", selectedIndex: "selectedIndex", ocOptionsMaxHeight: "ocOptionsMaxHeight", ocOptionsWidth: "ocOptionsWidth" }, outputs: { selectValue: "selectValue", decrementCounter: "decrementCounter", incrementCounter: "incrementCounter" }, host: { styleAttribute: "width: 100%; display: block;", classAttribute: "oc-autocomplete-dropdown-container" }, ngImport: i0, template: "@if (!ocLoading && !ocDisabled) {\n  <ul\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 $index; let i = $index) {\n        @if (!ocMaxResults || i < ocMaxResults) {\n          <li class=\"li-option\">\n            <button\n              type=\"button\"\n              (click)=\"selectValue.emit(data.value ?? data.id)\"\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.emit(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.emit(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 (ocLoading && !ocDisabled) {\n  <div class=\"oc-options loader\">\n    <span class=\"material-symbols-outlined loading\"> progress_activity </span>\n  </div>\n}\n", styles: [".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;margin:0;border-radius:.5rem;overflow:hidden;width:100%;min-width:100%;max-width:100%;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}.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}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteDropdownComponent, isStandalone: true, selector: "oc-autocomplete-dropdown", inputs: { filteredData: "filteredData", ocLoading: "ocLoading", ocDisabled: "ocDisabled", ocNoAvailableOptionsText: "ocNoAvailableOptionsText", ocMaxResults: "ocMaxResults", ocTypeForMoreResultsText: "ocTypeForMoreResultsText", ocType: "ocType", selectedIndex: "selectedIndex", ocOptionsMaxHeight: "ocOptionsMaxHeight", ocOptionsWidth: "ocOptionsWidth" }, outputs: { selectValue: "selectValue", decrementCounter: "decrementCounter", incrementCounter: "incrementCounter" }, host: { styleAttribute: "width: 100%; display: block;", classAttribute: "oc-autocomplete-dropdown-container" }, ngImport: i0, template: "@if (!ocLoading && !ocDisabled) {\r\n  <ul\r\n    class=\"oc-options\"\r\n    [ngStyle]=\"{\r\n      'max-height': ocOptionsMaxHeight,\r\n      width: ocOptionsWidth,\r\n    }\"\r\n  >\r\n    @if (!filteredData.length) {\r\n      <li class=\"no-options\">\r\n        {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\r\n      </li>\r\n    } @else {\r\n      @for (data of filteredData; track data.value; let i = $index) {\r\n        @if (!ocMaxResults || i < ocMaxResults) {\r\n          <li class=\"li-option\">\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"selectValue.emit(data.value)\"\r\n              [class.hover]=\"ocType !== 'counterSelect'\"\r\n              [class.highlight]=\"selectedIndex === i\"\r\n            >\r\n              @if (data.icon) {\r\n                <span\r\n                  class=\"material-symbols-outlined\"\r\n                  [ngStyle]=\"{\r\n                    'font-size': data.iconSize || '1.2rem',\r\n                  }\"\r\n                >\r\n                  {{ data.icon }}\r\n                </span>\r\n              }\r\n              {{ data.name }}\r\n            </button>\r\n            @if (ocType === 'counterSelect') {\r\n              <div class=\"oc-counter-select\">\r\n                <button\r\n                  class=\"subtract\"\r\n                  (click)=\"decrementCounter.emit(data)\"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">remove</span>\r\n                </button>\r\n                <p class=\"counter\">{{ data.counter || 0 }}</p>\r\n                <button\r\n                  class=\"add\"\r\n                  (click)=\"incrementCounter.emit(data)\"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">add</span>\r\n                </button>\r\n              </div>\r\n            }\r\n          </li>\r\n        }\r\n      }\r\n      @if (ocMaxResults && filteredData.length > ocMaxResults) {\r\n        <li class=\"no-options\">\r\n          {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\r\n        </li>\r\n      }\r\n    }\r\n  </ul>\r\n} @else if (ocLoading && !ocDisabled) {\r\n  <div class=\"oc-options loader\">\r\n    <span class=\"material-symbols-outlined loading\"> progress_activity </span>\r\n  </div>\r\n}", styles: [".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;margin:0;border-radius:.5rem;overflow:hidden;width:100%;min-width:100%;max-width:100%;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}.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}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'oc-autocomplete-dropdown', imports: [CommonModule, FormsModule], standalone: true, host: {
                         'class': 'oc-autocomplete-dropdown-container',
                         'style': 'width: 100%; display: block;'
-                    }, template: "@if (!ocLoading && !ocDisabled) {\n  <ul\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 $index; let i = $index) {\n        @if (!ocMaxResults || i < ocMaxResults) {\n          <li class=\"li-option\">\n            <button\n              type=\"button\"\n              (click)=\"selectValue.emit(data.value ?? data.id)\"\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.emit(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.emit(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 (ocLoading && !ocDisabled) {\n  <div class=\"oc-options loader\">\n    <span class=\"material-symbols-outlined loading\"> progress_activity </span>\n  </div>\n}\n", styles: [".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;margin:0;border-radius:.5rem;overflow:hidden;width:100%;min-width:100%;max-width:100%;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}.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}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+                    }, template: "@if (!ocLoading && !ocDisabled) {\r\n  <ul\r\n    class=\"oc-options\"\r\n    [ngStyle]=\"{\r\n      'max-height': ocOptionsMaxHeight,\r\n      width: ocOptionsWidth,\r\n    }\"\r\n  >\r\n    @if (!filteredData.length) {\r\n      <li class=\"no-options\">\r\n        {{ ocNoAvailableOptionsText || 'Nenhum resultado dispon\u00EDvel' }}\r\n      </li>\r\n    } @else {\r\n      @for (data of filteredData; track data.value; let i = $index) {\r\n        @if (!ocMaxResults || i < ocMaxResults) {\r\n          <li class=\"li-option\">\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"selectValue.emit(data.value)\"\r\n              [class.hover]=\"ocType !== 'counterSelect'\"\r\n              [class.highlight]=\"selectedIndex === i\"\r\n            >\r\n              @if (data.icon) {\r\n                <span\r\n                  class=\"material-symbols-outlined\"\r\n                  [ngStyle]=\"{\r\n                    'font-size': data.iconSize || '1.2rem',\r\n                  }\"\r\n                >\r\n                  {{ data.icon }}\r\n                </span>\r\n              }\r\n              {{ data.name }}\r\n            </button>\r\n            @if (ocType === 'counterSelect') {\r\n              <div class=\"oc-counter-select\">\r\n                <button\r\n                  class=\"subtract\"\r\n                  (click)=\"decrementCounter.emit(data)\"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">remove</span>\r\n                </button>\r\n                <p class=\"counter\">{{ data.counter || 0 }}</p>\r\n                <button\r\n                  class=\"add\"\r\n                  (click)=\"incrementCounter.emit(data)\"\r\n                >\r\n                  <span class=\"material-symbols-outlined\">add</span>\r\n                </button>\r\n              </div>\r\n            }\r\n          </li>\r\n        }\r\n      }\r\n      @if (ocMaxResults && filteredData.length > ocMaxResults) {\r\n        <li class=\"no-options\">\r\n          {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}\r\n        </li>\r\n      }\r\n    }\r\n  </ul>\r\n} @else if (ocLoading && !ocDisabled) {\r\n  <div class=\"oc-options loader\">\r\n    <span class=\"material-symbols-outlined loading\"> progress_activity </span>\r\n  </div>\r\n}", styles: [".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;margin:0;border-radius:.5rem;overflow:hidden;width:100%;min-width:100%;max-width:100%;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}.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}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filteredData: [{
                 type: Input
             }], ocLoading: [{
@@ -1022,18 +1022,11 @@ class OcAutocompleteComponent {
         this.dropdownComponentRef = null;
         this.clickOutListener = null;
     }
-    /**
-     * Helper to get the identifier value from a data item.
-     * Supports both 'value' and 'id' properties for backwards compatibility.
-     */
-    getItemValue(item) {
-        return item.value ?? item.id;
-    }
     set ocData(value) {
         this._ocData = value;
         this.filteredData = value;
         if (this.ocSelectByTyping && this.ocValue) {
-            const found = value.find((el) => this.getItemValue(el) == this.ocValue);
+            const found = value.find((el) => el.value == this.ocValue);
             if (found) {
                 this.selectedValue = found;
                 this.ocValue = found.name;
@@ -1121,7 +1114,7 @@ class OcAutocompleteComponent {
             this.filteredData = this.ocData;
             const inputBox = this.el.nativeElement;
             if (this.ocSelectByTyping && this.ocValue) {
-                const found = this.ocData.find((el) => this.getItemValue(el) == this.ocValue);
+                const found = this.ocData.find((el) => el.value == this.ocValue);
                 if (found) {
                     this.selectedValue = found;
                     this.ocValue = found.name;
@@ -1165,8 +1158,8 @@ class OcAutocompleteComponent {
         if (!this.ocSelectByTyping) {
             return;
         }
-        const foundValue = this.ocData.find((data) => data.name?.toString().toLowerCase() === this.ocValue?.toString().toLowerCase() ||
-            this.getItemValue(data)?.toString().toLowerCase() === this.ocValue?.toString().toLowerCase());
+        const foundValue = this.ocData.find((data) => data.name.toString().toLowerCase() === this.ocValue?.toString().toLowerCase() ||
+            data.value.toString().toLowerCase() === this.ocValue?.toString().toLowerCase());
         if (!foundValue) {
             this.selectedValue = {
                 name: '',
@@ -1350,7 +1343,7 @@ class OcAutocompleteComponent {
         this.cdr.detectChanges();
     }
     selectValue(value) {
-        const foundValue = this.ocData.find((data) => this.getItemValue(data) == value);
+        const foundValue = this.ocData.find((data) => data.value == value);
         if (!foundValue) {
             this.selectedValue = {
                 name: '',
@@ -1377,8 +1370,7 @@ class OcAutocompleteComponent {
         }
         this.isOptionsShown = false;
         this.selectedIndex = this.filteredData.indexOf(foundValue);
-        const emitValue = this.getItemValue(this.selectedValue);
-        this.ocChange.emit(emitValue);
+        this.ocChange.emit(this.selectedValue.value);
         this.cdr.detectChanges();
         // Force UI update
         this.cdr.detectChanges();
@@ -1444,7 +1436,7 @@ class OcAutocompleteComponent {
         this.closeOverlay();
     }
     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 }, { token: i3.Overlay }], 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", ocShowBackdrop: "ocShowBackdrop", 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    [(ngModel)]=\"ocValue\"\n    (ngModelChange)=\"ocValueChange.emit($event); filterData($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</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}.cdk-overlay-transparent-backdrop{background:none}.cdk-overlay-connected-position-bounding-box{max-width:90vw!important;left:auto!important;top:auto!important}.cdk-overlay-pane{max-width:90vw!important}.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}.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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", ocShowBackdrop: "ocShowBackdrop", 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\r\n  [ngClass]=\"{\r\n    'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\r\n    small: ocSize === 'small',\r\n    large: ocSize === 'large',\r\n    error: !!ocError,\r\n    prefix: hasPrefix,\r\n    suffix: hasSuffix || ocHasDeleteButton,\r\n    shui: ocStyle === 'shui',\r\n    'shui-input-box': ocStyle === 'shui',\r\n  }\"\r\n>\r\n  <ng-content></ng-content>\r\n  <input\r\n    [placeholder]=\"ocPlaceholder\"\r\n    #input\r\n    (click)=\"toggleOptions(); ocClick.emit()\"\r\n    type=\"text\"\r\n    (input)=\"filterData(ocValue)\"\r\n    [(ngModel)]=\"ocValue\"\r\n    (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\r\n    [ngClass]=\"{\r\n      'semantic-input': ocSemanticLike || ocStyle === 'semantic',\r\n    }\"\r\n    [tabindex]=\"ocTabIndex\"\r\n    [disabled]=\"ocDisabled\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n  />\r\n  @if (!ocSemanticLike && ocStyle !== 'semantic') {\r\n    <label>\r\n      <span [innerHTML]=\"ocPlaceholder || ''\"></span>\r\n      @if (ocRequired) {\r\n        <span class=\"oc color error\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n  <small\r\n    *ngIf=\"ocError\"\r\n    class=\"error-msg\"\r\n    >{{ ocError }}</small\r\n  >\r\n  <ng-content select=\"ocPrefix\"></ng-content>\r\n  @if (ocHasDeleteButton && !ocDisabled) {\r\n    <button\r\n      class=\"oc-has-close-button oc suffix\"\r\n      (click)=\"clearValue(); ocChange.emit(null)\"\r\n      [disabled]=\"ocDisabled\"\r\n    >\r\n      <span class=\"material-symbols-outlined\">backspace</span>\r\n    </button>\r\n  }\r\n  <ng-content select=\"ocSuffix\"></ng-content>\r\n</div>\r\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}.cdk-overlay-transparent-backdrop{background:none}.cdk-overlay-connected-position-bounding-box{max-width:90vw!important;left:auto!important;top:auto!important}.cdk-overlay-pane{max-width:90vw!important}.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}.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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,
@@ -1452,7 +1444,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    [(ngModel)]=\"ocValue\"\n    (ngModelChange)=\"ocValueChange.emit($event); filterData($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</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}.cdk-overlay-transparent-backdrop{background:none}.cdk-overlay-connected-position-bounding-box{max-width:90vw!important;left:auto!important;top:auto!important}.cdk-overlay-pane{max-width:90vw!important}.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}.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\r\n  [ngClass]=\"{\r\n    'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\r\n    small: ocSize === 'small',\r\n    large: ocSize === 'large',\r\n    error: !!ocError,\r\n    prefix: hasPrefix,\r\n    suffix: hasSuffix || ocHasDeleteButton,\r\n    shui: ocStyle === 'shui',\r\n    'shui-input-box': ocStyle === 'shui',\r\n  }\"\r\n>\r\n  <ng-content></ng-content>\r\n  <input\r\n    [placeholder]=\"ocPlaceholder\"\r\n    #input\r\n    (click)=\"toggleOptions(); ocClick.emit()\"\r\n    type=\"text\"\r\n    (input)=\"filterData(ocValue)\"\r\n    [(ngModel)]=\"ocValue\"\r\n    (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\r\n    [ngClass]=\"{\r\n      'semantic-input': ocSemanticLike || ocStyle === 'semantic',\r\n    }\"\r\n    [tabindex]=\"ocTabIndex\"\r\n    [disabled]=\"ocDisabled\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n  />\r\n  @if (!ocSemanticLike && ocStyle !== 'semantic') {\r\n    <label>\r\n      <span [innerHTML]=\"ocPlaceholder || ''\"></span>\r\n      @if (ocRequired) {\r\n        <span class=\"oc color error\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n  <small\r\n    *ngIf=\"ocError\"\r\n    class=\"error-msg\"\r\n    >{{ ocError }}</small\r\n  >\r\n  <ng-content select=\"ocPrefix\"></ng-content>\r\n  @if (ocHasDeleteButton && !ocDisabled) {\r\n    <button\r\n      class=\"oc-has-close-button oc suffix\"\r\n      (click)=\"clearValue(); ocChange.emit(null)\"\r\n      [disabled]=\"ocDisabled\"\r\n    >\r\n      <span class=\"material-symbols-outlined\">backspace</span>\r\n    </button>\r\n  }\r\n  <ng-content select=\"ocSuffix\"></ng-content>\r\n</div>\r\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}.cdk-overlay-transparent-backdrop{background:none}.cdk-overlay-connected-position-bounding-box{max-width:90vw!important;left:auto!important;top:auto!important}.cdk-overlay-pane{max-width:90vw!important}.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}.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 }, { type: i3.Overlay }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
@@ -2292,11 +2284,11 @@ class OcTabsComponent {
         this.ocClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTabsComponent, deps: [{ token: StyleThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcTabsComponent, isStandalone: true, selector: "oc-tabs", inputs: { ocStyle: "ocStyle" }, outputs: { ocClick: "ocClick" }, queries: [{ propertyName: "ocTabs", predicate: OcTabComponent }], ngImport: i0, template: "<div class=\"oc-tabs\" [ngClass]=\"{\r\n  shui: ocStyle === 'shui'\r\n}\">\r\n  <div class=\"row\">\r\n    @for(tab of ocTabs; track $index) {\r\n    <button [ngClass]=\"{\r\n        'oc-selected': tab.tabIndex === activeTabIndex\r\n      }\" class=\"oc-tab\" (click)=\"selectTab(tab.tabIndex); \r\n      handleTabClick()\" type=\"button\">{{tab.ocTitle}}</button>\r\n    }\r\n    <div class=\"row-content\">\r\n      <ng-content select=\"[row]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</div>", styles: [".oc-tabs .row{display:flex;gap:1px}.oc-tab{border:none;padding:.75rem 1.3rem;cursor:pointer;border-radius:8px 8px 0 0;background-color:transparent;border-bottom:2px solid #f7f7f7;transition:.15s ease;color:#7e8485}.oc-tab:hover{background-color:#f8f9ff}.oc-tab.oc-selected{border-bottom:2px solid #5505a2;background-color:#f8f9ff;color:#5505a2}.row{max-width:100%;transform:rotateX(180deg);overflow-x:auto}.row .oc-tab{transform:rotateX(180deg);white-space:nowrap}.row .row-content{width:100%;transform:rotateX(180deg)}::-webkit-scrollbar{height:3px}.oc-tabs.shui .row{display:flex;gap:1rem}.oc-tabs.shui .oc-tab{border-bottom:3px solid transparent;font-weight:600;color:#00000080}.oc-tabs.shui .oc-tab:hover{background-color:transparent;border-bottom:3px solid #0169b2}.oc-tabs.shui .oc-tab.oc-selected{border-bottom:3px solid #0169b2;background-color:transparent;color:#00000080}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcTabsComponent, isStandalone: true, selector: "oc-tabs", inputs: { ocStyle: "ocStyle" }, outputs: { ocClick: "ocClick" }, queries: [{ propertyName: "ocTabs", predicate: OcTabComponent }], ngImport: i0, template: "<div\r\n  class=\"oc-tabs\"\r\n  [ngClass]=\"{\r\n    shui: ocStyle === 'shui',\r\n  }\"\r\n>\r\n  <div class=\"row\">\r\n    @for (tab of ocTabs; track $index) {\r\n      <button\r\n        [ngClass]=\"{\r\n          'oc-selected': tab.tabIndex === activeTabIndex,\r\n        }\"\r\n        class=\"oc-tab\"\r\n        (click)=\"selectTab(tab.tabIndex); handleTabClick()\"\r\n        type=\"button\"\r\n      >\r\n        {{ tab.ocTitle }}\r\n      </button>\r\n    }\r\n    <div class=\"row-content\">\r\n      <ng-content select=\"[row]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".oc-tabs .row{display:flex;gap:1px}.oc-tab{border:none;padding:.75rem 1.3rem;cursor:pointer;border-radius:8px 8px 0 0;background-color:transparent;border-bottom:2px solid #f7f7f7;transition:.15s ease;color:#7e8485}.oc-tab:hover{background-color:#f8f9ff}.oc-tab.oc-selected{border-bottom:2px solid #5505a2;background-color:#f8f9ff;color:#5505a2}.row{max-width:100%;transform:rotateX(180deg);overflow-x:auto}.row .oc-tab{transform:rotateX(180deg);white-space:nowrap}.row .row-content{width:100%;transform:rotateX(180deg)}::-webkit-scrollbar{height:3px}.oc-tabs.shui .row{display:flex;gap:1rem}.oc-tabs.shui .oc-tab{border-bottom:3px solid transparent;font-weight:600;color:#00000080}.oc-tabs.shui .oc-tab:hover{background-color:transparent;border-bottom:3px solid #0169b2}.oc-tabs.shui .oc-tab.oc-selected{border-bottom:3px solid #0169b2;background-color:transparent;color:#00000080}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oc-tabs', imports: [CommonModule], template: "<div class=\"oc-tabs\" [ngClass]=\"{\r\n  shui: ocStyle === 'shui'\r\n}\">\r\n  <div class=\"row\">\r\n    @for(tab of ocTabs; track $index) {\r\n    <button [ngClass]=\"{\r\n        'oc-selected': tab.tabIndex === activeTabIndex\r\n      }\" class=\"oc-tab\" (click)=\"selectTab(tab.tabIndex); \r\n      handleTabClick()\" type=\"button\">{{tab.ocTitle}}</button>\r\n    }\r\n    <div class=\"row-content\">\r\n      <ng-content select=\"[row]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</div>", styles: [".oc-tabs .row{display:flex;gap:1px}.oc-tab{border:none;padding:.75rem 1.3rem;cursor:pointer;border-radius:8px 8px 0 0;background-color:transparent;border-bottom:2px solid #f7f7f7;transition:.15s ease;color:#7e8485}.oc-tab:hover{background-color:#f8f9ff}.oc-tab.oc-selected{border-bottom:2px solid #5505a2;background-color:#f8f9ff;color:#5505a2}.row{max-width:100%;transform:rotateX(180deg);overflow-x:auto}.row .oc-tab{transform:rotateX(180deg);white-space:nowrap}.row .row-content{width:100%;transform:rotateX(180deg)}::-webkit-scrollbar{height:3px}.oc-tabs.shui .row{display:flex;gap:1rem}.oc-tabs.shui .oc-tab{border-bottom:3px solid transparent;font-weight:600;color:#00000080}.oc-tabs.shui .oc-tab:hover{background-color:transparent;border-bottom:3px solid #0169b2}.oc-tabs.shui .oc-tab.oc-selected{border-bottom:3px solid #0169b2;background-color:transparent;color:#00000080}\n"] }]
+            args: [{ selector: 'oc-tabs', imports: [CommonModule], standalone: true, template: "<div\r\n  class=\"oc-tabs\"\r\n  [ngClass]=\"{\r\n    shui: ocStyle === 'shui',\r\n  }\"\r\n>\r\n  <div class=\"row\">\r\n    @for (tab of ocTabs; track $index) {\r\n      <button\r\n        [ngClass]=\"{\r\n          'oc-selected': tab.tabIndex === activeTabIndex,\r\n        }\"\r\n        class=\"oc-tab\"\r\n        (click)=\"selectTab(tab.tabIndex); handleTabClick()\"\r\n        type=\"button\"\r\n      >\r\n        {{ tab.ocTitle }}\r\n      </button>\r\n    }\r\n    <div class=\"row-content\">\r\n      <ng-content select=\"[row]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".oc-tabs .row{display:flex;gap:1px}.oc-tab{border:none;padding:.75rem 1.3rem;cursor:pointer;border-radius:8px 8px 0 0;background-color:transparent;border-bottom:2px solid #f7f7f7;transition:.15s ease;color:#7e8485}.oc-tab:hover{background-color:#f8f9ff}.oc-tab.oc-selected{border-bottom:2px solid #5505a2;background-color:#f8f9ff;color:#5505a2}.row{max-width:100%;transform:rotateX(180deg);overflow-x:auto}.row .oc-tab{transform:rotateX(180deg);white-space:nowrap}.row .row-content{width:100%;transform:rotateX(180deg)}::-webkit-scrollbar{height:3px}.oc-tabs.shui .row{display:flex;gap:1rem}.oc-tabs.shui .oc-tab{border-bottom:3px solid transparent;font-weight:600;color:#00000080}.oc-tabs.shui .oc-tab:hover{background-color:transparent;border-bottom:3px solid #0169b2}.oc-tabs.shui .oc-tab.oc-selected{border-bottom:3px solid #0169b2;background-color:transparent;color:#00000080}\n"] }]
         }], ctorParameters: () => [{ type: StyleThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { ocTabs: [{
                 type: ContentChildren,
                 args: [OcTabComponent]