otimus-library 0.4.80 → 0.4.82

package/fesm2022/otimus-library.mjs

@@ -10,6 +10,8 @@ import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/fo
 import * as i1$1 from '@angular/common/http';
 import * as i3 from '@angular/cdk/overlay';
 import * as i2$2 from '@angular/platform-browser';
+import * as i2$3 from '@angular/cdk/table';
+import { CdkTableModule } from '@angular/cdk/table';
 
 class OtimusLibraryComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OtimusLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -1430,8 +1432,17 @@ class OcAutocompleteComponent {
         };
         this.ocValue = '';
         this.filteredData = this.ocData;
-        // TODO: validate if this can be emitted here
-        // this.ocChange.emit(null)
+        if (this.ocType === 'multipleSelect') {
+            this.selectedValues = [];
+            this.ocMultipleSelectChange.emit([]);
+        }
+        if (this.ocType === 'counterSelect') {
+            this.ocData.forEach((item) => (item.counter = 0));
+            this.ocCounterSelectChange.emit([]);
+        }
+        this.updateDropdownPortal();
+        this.updateInputPaddingForChips();
+        this.cdr.detectChanges();
     }
     incrementCounter(option) {
         if (!option.counter) {
@@ -1561,7 +1572,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", ocSelectionEllipsisAt: "ocSelectionEllipsisAt", ocMaxVisibleChips: "ocMaxVisibleChips" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocCounterSelectChange: "ocCounterSelectChange", ocMultipleSelectChange: "ocMultipleSelectChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick", ocHiddenChipsCountChange: "ocHiddenChipsCountChange" }, host: { properties: { "style.width": "computedWidth", "style.min-width": "computedMinWidth", "style.max-width": "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  class=\"oc-input-box\"\n  [ngClass]=\"{\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    'multiple-select': ocType === 'multipleSelect' || ocType === 'counterSelect',\n  }\"\n>\n  <ng-content></ng-content>\n  @if (ocType === 'multipleSelect' && selectedValues.length > 0) {\n    <div class=\"oc-chips-container\">\n      @for (item of visibleChips; track item.value) {\n        <oc-chip\n          ocType=\"tag\"\n          (ocRemove)=\"removeSelectedValue(item)\"\n        >\n          <p\n            ocTooltip\n            [content]=\"\n              ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n            \"\n          >\n            @if (ocSelectionEllipsisAt) {\n              {{ item.name | slice: 0 : ocSelectionEllipsisAt\n              }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n            } @else {\n              {{ item.name }}\n            }\n          </p>\n        </oc-chip>\n      }\n      @if (hiddenChipsCountByInput > 0) {\n        <oc-chip ocType=\"tag\" class=\"oc-more-chip\">\n          <p>+{{ hiddenChipsCountByInput }}</p>\n        </oc-chip>\n      }\n    </div>\n  }\n  @if (ocType === 'counterSelect' && getCounterItems().length > 0) {\n    <div class=\"oc-chips-container\">\n      @for (item of visibleCounterChips; track item.value) {\n        <oc-chip\n          ocType=\"tag\"\n          (ocRemove)=\"decrementCounter(item)\"\n        >\n          <p\n            ocTooltip\n            [content]=\"\n              ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n            \"\n          >\n            @if (ocSelectionEllipsisAt) {\n              {{ item.name | slice: 0 : ocSelectionEllipsisAt\n              }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n            } @else {\n              {{ item.name }}\n            }\n            ({{ item.counter }})\n          </p>\n        </oc-chip>\n      }\n      @if (hiddenCounterChipsCount > 0) {\n        <oc-chip ocType=\"tag\" class=\"oc-more-chip\">\n          <p>+{{ hiddenCounterChipsCount }}</p>\n        </oc-chip>\n      }\n    </div>\n  }\n  <input\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      'has-chips':\n        (ocType === 'multipleSelect' && selectedValues.length > 0) ||\n        (ocType === 'counterSelect' && getCounterItems().length > 0),\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\";.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{border-radius:0;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%}.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}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.shui .prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .suffix .material-symbols-outlined,.shui .suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .oc-input-box{position:relative;margin-top:.5rem}.shui .oc-input-box select *{background-color:#f5f5f5}.shui .oc-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 .oc-input-box.prefix{z-index:5}.shui .oc-input-box.prefix .material-symbols-outlined,.shui .oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.prefix input{padding-left:1.75rem}.shui .oc-input-box.prefix label{padding:.7rem 2.5rem}.shui .oc-input-box.suffix{z-index:5}.shui .oc-input-box.suffix .material-symbols-outlined,.shui .oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.suffix input{padding-right:1.75rem}.shui .oc-input-box.suffix label{padding:.7rem}.shui .oc-input-box input,.shui .oc-input-box textarea,.shui .oc-input-box select{border-radius:0;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 .oc-input-box textarea{height:inherit;padding-top:20px}.shui .oc-input-box input:not(:placeholder-shown)~label,.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:not(:placeholder-shown)~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{color:#0169b2}.shui .oc-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 .oc-input-box:focus-within:before{width:100%}.shui .oc-input-box.small input,.shui .oc-input-box.small textarea,.shui .oc-input-box.small select{max-height:36px;padding-top:1rem}.shui .oc-input-box.small.prefix{z-index:5}.shui .oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui .oc-input-box.small.prefix label{padding:.45rem 2.5rem}.shui .oc-input-box.small.suffix{z-index:5}.shui .oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui .oc-input-box.small.suffix label{padding:.45rem .7rem}.shui .oc-input-box.large input,.shui .oc-input-box.large textarea,.shui .oc-input-box.large select{height:46px}.shui .oc-input-box.large label{padding:1rem .7rem}.shui .oc-input-box.large.prefix{z-index:5}.shui .oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui .oc-input-box.large.prefix input{padding-left:2.5rem}.shui .oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui .oc-input-box.large.suffix{z-index:5}.shui .oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui .oc-input-box.large.suffix input{padding-right:2.5rem}.shui .oc-input-box.large.suffix label{padding:1.1rem .7rem}.shui .error input,.shui .error textarea,.shui .error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.shui .error:before{width:0!important}.shui .error small,.shui .error label{color:#ed3a3a!important;font-weight:600}.oc.suffix,.oc.prefix,.material-symbols-outlined,.shui .oc.suffix,.shui .oc.prefix,.shui .material-symbols-outlined{z-index:5!important}.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box{position:relative}.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}.oc-input-box.multiple-select{position:relative}.oc-input-box.multiple-select input{padding-left:.9rem;text-indent:0}.oc-input-box.multiple-select.small input{padding-left:.7rem}.oc-input-box.multiple-select.large input{padding-left:1rem}.oc-input-box.multiple-select input.has-chips~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.oc-input-box.multiple-select.shui input.has-chips~label,.oc-input-box.multiple-select.shui-input-box input.has-chips~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500;color:#0169b2}.oc-chips-container{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);display:flex;flex-wrap:nowrap;gap:.1rem;align-items:center;pointer-events:none;max-width:calc(100% - 1.8rem);overflow:hidden}.oc-chips-container oc-chip{cursor:pointer;pointer-events:auto;flex-shrink:0}.oc-chips-container oc-chip p{font-size:12px!important;margin:0;padding:0}.oc-chips-container oc-chip:hover{opacity:.8}.oc-chips-container oc-chip.oc-more-chip{cursor:default;pointer-events:none}.oc-chips-container oc-chip.oc-more-chip p{font-weight:600;color:#7e8485}.oc-input-box.multiple-select .oc-chips-container~input{padding-left:calc(.9rem + var(--chips-width, 0px))}@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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OcChipComponent, selector: "oc-chip", inputs: ["ocSelected", "ocType", "ocBg", "ocBgHexColor", "ocTextHexColor", "ocText", "ocFontSize"], outputs: ["ocClick", "ocRemove"] }, { kind: "directive", type: OcTooltipDirective, selector: "[ocTooltip]", inputs: ["content", "side"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    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", ocSelectionEllipsisAt: "ocSelectionEllipsisAt", ocMaxVisibleChips: "ocMaxVisibleChips" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocCounterSelectChange: "ocCounterSelectChange", ocMultipleSelectChange: "ocMultipleSelectChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick", ocHiddenChipsCountChange: "ocHiddenChipsCountChange" }, host: { properties: { "style.width": "computedWidth", "style.min-width": "computedMinWidth", "style.max-width": "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  class=\"oc-input-box\"\n  [ngClass]=\"{\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    'multiple-select': ocType === 'multipleSelect' || ocType === 'counterSelect',\n  }\"\n>\n  <ng-content></ng-content>\n  @if (ocType === 'multipleSelect' && selectedValues.length > 0) {\n    <div class=\"oc-chips-container\">\n      @for (item of visibleChips; track item.value) {\n        <oc-chip\n          ocType=\"tag\"\n          (ocRemove)=\"removeSelectedValue(item)\"\n        >\n          <p\n            ocTooltip\n            [content]=\"\n              ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n            \"\n          >\n            @if (ocSelectionEllipsisAt) {\n              {{ item.name | slice: 0 : ocSelectionEllipsisAt\n              }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n            } @else {\n              {{ item.name }}\n            }\n          </p>\n        </oc-chip>\n      }\n      @if (hiddenChipsCountByInput > 0) {\n        <oc-chip ocType=\"tag\" class=\"oc-more-chip\">\n          <p>+{{ hiddenChipsCountByInput }}</p>\n        </oc-chip>\n      }\n    </div>\n  }\n  @if (ocType === 'counterSelect' && getCounterItems().length > 0) {\n    <div class=\"oc-chips-container\">\n      @for (item of visibleCounterChips; track item.value) {\n        <oc-chip\n          ocType=\"tag\"\n          (ocRemove)=\"decrementCounter(item)\"\n        >\n          <p\n            ocTooltip\n            [content]=\"\n              ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n            \"\n          >\n            @if (ocSelectionEllipsisAt) {\n              {{ item.name | slice: 0 : ocSelectionEllipsisAt\n              }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n            } @else {\n              {{ item.name }}\n            }\n            ({{ item.counter }})\n          </p>\n        </oc-chip>\n      }\n      @if (hiddenCounterChipsCount > 0) {\n        <oc-chip ocType=\"tag\" class=\"oc-more-chip\">\n          <p>+{{ hiddenCounterChipsCount }}</p>\n        </oc-chip>\n      }\n    </div>\n  }\n  <input\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      'has-chips':\n        (ocType === 'multipleSelect' && selectedValues.length > 0) ||\n        (ocType === 'counterSelect' && getCounterItems().length > 0),\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\";.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{border-radius:0;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:-webkit-autofill~label,.shui-input-box input:autofill~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 input:-webkit-autofill~label,.shui-input-box input:autofill~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%}.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}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.shui .prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .suffix .material-symbols-outlined,.shui .suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .oc-input-box{position:relative;margin-top:.5rem}.shui .oc-input-box select *{background-color:#f5f5f5}.shui .oc-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 .oc-input-box.prefix{z-index:5}.shui .oc-input-box.prefix .material-symbols-outlined,.shui .oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.prefix input{padding-left:1.75rem}.shui .oc-input-box.prefix label{padding:.7rem 2.5rem}.shui .oc-input-box.suffix{z-index:5}.shui .oc-input-box.suffix .material-symbols-outlined,.shui .oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.suffix input{padding-right:1.75rem}.shui .oc-input-box.suffix label{padding:.7rem}.shui .oc-input-box input,.shui .oc-input-box textarea,.shui .oc-input-box select{border-radius:0;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 .oc-input-box textarea{height:inherit;padding-top:20px}.shui .oc-input-box input:not(:placeholder-shown)~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:not(:placeholder-shown)~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui .oc-input-box input:focus~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{color:#0169b2}.shui .oc-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 .oc-input-box:focus-within:before{width:100%}.shui .oc-input-box.small input,.shui .oc-input-box.small textarea,.shui .oc-input-box.small select{max-height:36px;padding-top:1rem}.shui .oc-input-box.small.prefix{z-index:5}.shui .oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui .oc-input-box.small.prefix label{padding:.45rem 2.5rem}.shui .oc-input-box.small.suffix{z-index:5}.shui .oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui .oc-input-box.small.suffix label{padding:.45rem .7rem}.shui .oc-input-box.large input,.shui .oc-input-box.large textarea,.shui .oc-input-box.large select{height:46px}.shui .oc-input-box.large label{padding:1rem .7rem}.shui .oc-input-box.large.prefix{z-index:5}.shui .oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui .oc-input-box.large.prefix input{padding-left:2.5rem}.shui .oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui .oc-input-box.large.suffix{z-index:5}.shui .oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui .oc-input-box.large.suffix input{padding-right:2.5rem}.shui .oc-input-box.large.suffix label{padding:1.1rem .7rem}.shui .error input,.shui .error textarea,.shui .error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.shui .error:before{width:0!important}.shui .error small,.shui .error label{color:#ed3a3a!important;font-weight:600}.oc.suffix,.oc.prefix,.material-symbols-outlined,.shui .oc.suffix,.shui .oc.prefix,.shui .material-symbols-outlined{z-index:5!important}.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:-webkit-autofill~label,.oc-input-box input:autofill~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small input:-webkit-autofill~label,.oc-input-box.small input:autofill~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 input:-webkit-autofill~label,.oc-input-box.large input:autofill~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box{position:relative}.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}.oc-input-box.multiple-select{position:relative}.oc-input-box.multiple-select input{padding-left:.9rem;text-indent:0}.oc-input-box.multiple-select.small input{padding-left:.7rem}.oc-input-box.multiple-select.large input{padding-left:1rem}.oc-input-box.multiple-select input.has-chips~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.oc-input-box.multiple-select.shui input.has-chips~label,.oc-input-box.multiple-select.shui-input-box input.has-chips~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500;color:#0169b2}.oc-chips-container{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);display:flex;flex-wrap:nowrap;gap:.1rem;align-items:center;pointer-events:none;max-width:calc(100% - 1.8rem);overflow:hidden}.oc-chips-container oc-chip{cursor:pointer;pointer-events:auto;flex-shrink:0}.oc-chips-container oc-chip p{font-size:12px!important;margin:0;padding:0}.oc-chips-container oc-chip:hover{opacity:.8}.oc-chips-container oc-chip.oc-more-chip{cursor:default;pointer-events:none}.oc-chips-container oc-chip.oc-more-chip p{font-weight:600;color:#7e8485}.oc-input-box.multiple-select .oc-chips-container~input{padding-left:calc(.9rem + var(--chips-width, 0px))}@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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OcChipComponent, selector: "oc-chip", inputs: ["ocSelected", "ocType", "ocBg", "ocBgHexColor", "ocTextHexColor", "ocText", "ocFontSize"], outputs: ["ocClick", "ocRemove"] }, { kind: "directive", type: OcTooltipDirective, selector: "[ocTooltip]", inputs: ["content", "side"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteComponent, decorators: [{
             type: Component,
@@ -1569,7 +1580,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, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"oc-input-box\"\n  [ngClass]=\"{\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    'multiple-select': ocType === 'multipleSelect' || ocType === 'counterSelect',\n  }\"\n>\n  <ng-content></ng-content>\n  @if (ocType === 'multipleSelect' && selectedValues.length > 0) {\n    <div class=\"oc-chips-container\">\n      @for (item of visibleChips; track item.value) {\n        <oc-chip\n          ocType=\"tag\"\n          (ocRemove)=\"removeSelectedValue(item)\"\n        >\n          <p\n            ocTooltip\n            [content]=\"\n              ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n            \"\n          >\n            @if (ocSelectionEllipsisAt) {\n              {{ item.name | slice: 0 : ocSelectionEllipsisAt\n              }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n            } @else {\n              {{ item.name }}\n            }\n          </p>\n        </oc-chip>\n      }\n      @if (hiddenChipsCountByInput > 0) {\n        <oc-chip ocType=\"tag\" class=\"oc-more-chip\">\n          <p>+{{ hiddenChipsCountByInput }}</p>\n        </oc-chip>\n      }\n    </div>\n  }\n  @if (ocType === 'counterSelect' && getCounterItems().length > 0) {\n    <div class=\"oc-chips-container\">\n      @for (item of visibleCounterChips; track item.value) {\n        <oc-chip\n          ocType=\"tag\"\n          (ocRemove)=\"decrementCounter(item)\"\n        >\n          <p\n            ocTooltip\n            [content]=\"\n              ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n            \"\n          >\n            @if (ocSelectionEllipsisAt) {\n              {{ item.name | slice: 0 : ocSelectionEllipsisAt\n              }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n            } @else {\n              {{ item.name }}\n            }\n            ({{ item.counter }})\n          </p>\n        </oc-chip>\n      }\n      @if (hiddenCounterChipsCount > 0) {\n        <oc-chip ocType=\"tag\" class=\"oc-more-chip\">\n          <p>+{{ hiddenCounterChipsCount }}</p>\n        </oc-chip>\n      }\n    </div>\n  }\n  <input\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      'has-chips':\n        (ocType === 'multipleSelect' && selectedValues.length > 0) ||\n        (ocType === 'counterSelect' && getCounterItems().length > 0),\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\";.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{border-radius:0;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%}.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}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.shui .prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .suffix .material-symbols-outlined,.shui .suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .oc-input-box{position:relative;margin-top:.5rem}.shui .oc-input-box select *{background-color:#f5f5f5}.shui .oc-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 .oc-input-box.prefix{z-index:5}.shui .oc-input-box.prefix .material-symbols-outlined,.shui .oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.prefix input{padding-left:1.75rem}.shui .oc-input-box.prefix label{padding:.7rem 2.5rem}.shui .oc-input-box.suffix{z-index:5}.shui .oc-input-box.suffix .material-symbols-outlined,.shui .oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.suffix input{padding-right:1.75rem}.shui .oc-input-box.suffix label{padding:.7rem}.shui .oc-input-box input,.shui .oc-input-box textarea,.shui .oc-input-box select{border-radius:0;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 .oc-input-box textarea{height:inherit;padding-top:20px}.shui .oc-input-box input:not(:placeholder-shown)~label,.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:not(:placeholder-shown)~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{color:#0169b2}.shui .oc-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 .oc-input-box:focus-within:before{width:100%}.shui .oc-input-box.small input,.shui .oc-input-box.small textarea,.shui .oc-input-box.small select{max-height:36px;padding-top:1rem}.shui .oc-input-box.small.prefix{z-index:5}.shui .oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui .oc-input-box.small.prefix label{padding:.45rem 2.5rem}.shui .oc-input-box.small.suffix{z-index:5}.shui .oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui .oc-input-box.small.suffix label{padding:.45rem .7rem}.shui .oc-input-box.large input,.shui .oc-input-box.large textarea,.shui .oc-input-box.large select{height:46px}.shui .oc-input-box.large label{padding:1rem .7rem}.shui .oc-input-box.large.prefix{z-index:5}.shui .oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui .oc-input-box.large.prefix input{padding-left:2.5rem}.shui .oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui .oc-input-box.large.suffix{z-index:5}.shui .oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui .oc-input-box.large.suffix input{padding-right:2.5rem}.shui .oc-input-box.large.suffix label{padding:1.1rem .7rem}.shui .error input,.shui .error textarea,.shui .error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.shui .error:before{width:0!important}.shui .error small,.shui .error label{color:#ed3a3a!important;font-weight:600}.oc.suffix,.oc.prefix,.material-symbols-outlined,.shui .oc.suffix,.shui .oc.prefix,.shui .material-symbols-outlined{z-index:5!important}.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box{position:relative}.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}.oc-input-box.multiple-select{position:relative}.oc-input-box.multiple-select input{padding-left:.9rem;text-indent:0}.oc-input-box.multiple-select.small input{padding-left:.7rem}.oc-input-box.multiple-select.large input{padding-left:1rem}.oc-input-box.multiple-select input.has-chips~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.oc-input-box.multiple-select.shui input.has-chips~label,.oc-input-box.multiple-select.shui-input-box input.has-chips~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500;color:#0169b2}.oc-chips-container{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);display:flex;flex-wrap:nowrap;gap:.1rem;align-items:center;pointer-events:none;max-width:calc(100% - 1.8rem);overflow:hidden}.oc-chips-container oc-chip{cursor:pointer;pointer-events:auto;flex-shrink:0}.oc-chips-container oc-chip p{font-size:12px!important;margin:0;padding:0}.oc-chips-container oc-chip:hover{opacity:.8}.oc-chips-container oc-chip.oc-more-chip{cursor:default;pointer-events:none}.oc-chips-container oc-chip.oc-more-chip p{font-weight:600;color:#7e8485}.oc-input-box.multiple-select .oc-chips-container~input{padding-left:calc(.9rem + var(--chips-width, 0px))}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"oc-input-box\"\n  [ngClass]=\"{\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    'multiple-select': ocType === 'multipleSelect' || ocType === 'counterSelect',\n  }\"\n>\n  <ng-content></ng-content>\n  @if (ocType === 'multipleSelect' && selectedValues.length > 0) {\n    <div class=\"oc-chips-container\">\n      @for (item of visibleChips; track item.value) {\n        <oc-chip\n          ocType=\"tag\"\n          (ocRemove)=\"removeSelectedValue(item)\"\n        >\n          <p\n            ocTooltip\n            [content]=\"\n              ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n            \"\n          >\n            @if (ocSelectionEllipsisAt) {\n              {{ item.name | slice: 0 : ocSelectionEllipsisAt\n              }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n            } @else {\n              {{ item.name }}\n            }\n          </p>\n        </oc-chip>\n      }\n      @if (hiddenChipsCountByInput > 0) {\n        <oc-chip ocType=\"tag\" class=\"oc-more-chip\">\n          <p>+{{ hiddenChipsCountByInput }}</p>\n        </oc-chip>\n      }\n    </div>\n  }\n  @if (ocType === 'counterSelect' && getCounterItems().length > 0) {\n    <div class=\"oc-chips-container\">\n      @for (item of visibleCounterChips; track item.value) {\n        <oc-chip\n          ocType=\"tag\"\n          (ocRemove)=\"decrementCounter(item)\"\n        >\n          <p\n            ocTooltip\n            [content]=\"\n              ocSelectionEllipsisAt && item.name.length > ocSelectionEllipsisAt ? item.name : ''\n            \"\n          >\n            @if (ocSelectionEllipsisAt) {\n              {{ item.name | slice: 0 : ocSelectionEllipsisAt\n              }}{{ item.name.length > ocSelectionEllipsisAt ? '...' : '' }}\n            } @else {\n              {{ item.name }}\n            }\n            ({{ item.counter }})\n          </p>\n        </oc-chip>\n      }\n      @if (hiddenCounterChipsCount > 0) {\n        <oc-chip ocType=\"tag\" class=\"oc-more-chip\">\n          <p>+{{ hiddenCounterChipsCount }}</p>\n        </oc-chip>\n      }\n    </div>\n  }\n  <input\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      'has-chips':\n        (ocType === 'multipleSelect' && selectedValues.length > 0) ||\n        (ocType === 'counterSelect' && getCounterItems().length > 0),\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\";.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{border-radius:0;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:-webkit-autofill~label,.shui-input-box input:autofill~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 input:-webkit-autofill~label,.shui-input-box input:autofill~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%}.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}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.shui .prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .suffix .material-symbols-outlined,.shui .suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .oc-input-box{position:relative;margin-top:.5rem}.shui .oc-input-box select *{background-color:#f5f5f5}.shui .oc-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 .oc-input-box.prefix{z-index:5}.shui .oc-input-box.prefix .material-symbols-outlined,.shui .oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.prefix input{padding-left:1.75rem}.shui .oc-input-box.prefix label{padding:.7rem 2.5rem}.shui .oc-input-box.suffix{z-index:5}.shui .oc-input-box.suffix .material-symbols-outlined,.shui .oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.suffix input{padding-right:1.75rem}.shui .oc-input-box.suffix label{padding:.7rem}.shui .oc-input-box input,.shui .oc-input-box textarea,.shui .oc-input-box select{border-radius:0;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 .oc-input-box textarea{height:inherit;padding-top:20px}.shui .oc-input-box input:not(:placeholder-shown)~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:not(:placeholder-shown)~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui .oc-input-box input:focus~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{color:#0169b2}.shui .oc-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 .oc-input-box:focus-within:before{width:100%}.shui .oc-input-box.small input,.shui .oc-input-box.small textarea,.shui .oc-input-box.small select{max-height:36px;padding-top:1rem}.shui .oc-input-box.small.prefix{z-index:5}.shui .oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui .oc-input-box.small.prefix label{padding:.45rem 2.5rem}.shui .oc-input-box.small.suffix{z-index:5}.shui .oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui .oc-input-box.small.suffix label{padding:.45rem .7rem}.shui .oc-input-box.large input,.shui .oc-input-box.large textarea,.shui .oc-input-box.large select{height:46px}.shui .oc-input-box.large label{padding:1rem .7rem}.shui .oc-input-box.large.prefix{z-index:5}.shui .oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui .oc-input-box.large.prefix input{padding-left:2.5rem}.shui .oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui .oc-input-box.large.suffix{z-index:5}.shui .oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui .oc-input-box.large.suffix input{padding-right:2.5rem}.shui .oc-input-box.large.suffix label{padding:1.1rem .7rem}.shui .error input,.shui .error textarea,.shui .error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.shui .error:before{width:0!important}.shui .error small,.shui .error label{color:#ed3a3a!important;font-weight:600}.oc.suffix,.oc.prefix,.material-symbols-outlined,.shui .oc.suffix,.shui .oc.prefix,.shui .material-symbols-outlined{z-index:5!important}.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:-webkit-autofill~label,.oc-input-box input:autofill~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small input:-webkit-autofill~label,.oc-input-box.small input:autofill~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 input:-webkit-autofill~label,.oc-input-box.large input:autofill~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box{position:relative}.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}.oc-input-box.multiple-select{position:relative}.oc-input-box.multiple-select input{padding-left:.9rem;text-indent:0}.oc-input-box.multiple-select.small input{padding-left:.7rem}.oc-input-box.multiple-select.large input{padding-left:1rem}.oc-input-box.multiple-select input.has-chips~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.oc-input-box.multiple-select.shui input.has-chips~label,.oc-input-box.multiple-select.shui-input-box input.has-chips~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500;color:#0169b2}.oc-chips-container{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);display:flex;flex-wrap:nowrap;gap:.1rem;align-items:center;pointer-events:none;max-width:calc(100% - 1.8rem);overflow:hidden}.oc-chips-container oc-chip{cursor:pointer;pointer-events:auto;flex-shrink:0}.oc-chips-container oc-chip p{font-size:12px!important;margin:0;padding:0}.oc-chips-container oc-chip:hover{opacity:.8}.oc-chips-container oc-chip.oc-more-chip{cursor:default;pointer-events:none}.oc-chips-container oc-chip.oc-more-chip p{font-weight:600;color:#7e8485}.oc-input-box.multiple-select .oc-chips-container~input{padding-left:calc(.9rem + var(--chips-width, 0px))}@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']
@@ -2453,7 +2464,7 @@ class OcInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: StyleThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcInputComponent, isStandalone: true, selector: "oc-input", inputs: { ocError: "ocError", ocSize: "ocSize", ocPlaceholder: "ocPlaceholder", ocWidth: "ocWidth", ocMinWidth: "ocMinWidth", ocMaxWidth: "ocMaxWidth", ocRequired: "ocRequired", ocStyle: "ocStyle" }, host: { properties: { "style.width": "this.computedWidth", "style.min-width": "this.computedMinWidth", "style.max-width": "this.computedMaxWidth" } }, queries: [{ propertyName: "ocPrefix", first: true, predicate: ["ocPrefix"], descendants: true }, { propertyName: "ocSuffix", first: true, predicate: ["ocSuffix"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"oc-input-box\"\n  [ngClass]=\"{\n    small: ocSize === 'small',\n    large: ocSize === 'large',\n    error: !!ocError,\n    prefix: hasPrefix,\n    suffix: hasSuffix,\n    shui: ocStyle === 'shui',\n    'shui-input-box': ocStyle === 'shui',\n  }\"\n  [id]=\"inputId\"\n>\n  <ng-content></ng-content>\n  <ng-content select=\"ocPrefix\"></ng-content>\n  <ng-content select=\"ocSuffix\"></ng-content>\n  <label>\n    <span [innerHTML]=\"ocPlaceholder\"></span>\n    @if (ocRequired) {\n      <span class=\"oc color error\">*</span>\n    }\n  </label>\n  <small\n    *ngIf=\"ocError\"\n    class=\"error-msg\"\n    >{{ ocError }}</small\n  >\n</div>\n", styles: [".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{border-radius:0;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%}.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}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.shui .prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .suffix .material-symbols-outlined,.shui .suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .oc-input-box{position:relative;margin-top:.5rem}.shui .oc-input-box select *{background-color:#f5f5f5}.shui .oc-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 .oc-input-box.prefix{z-index:5}.shui .oc-input-box.prefix .material-symbols-outlined,.shui .oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.prefix input{padding-left:1.75rem}.shui .oc-input-box.prefix label{padding:.7rem 2.5rem}.shui .oc-input-box.suffix{z-index:5}.shui .oc-input-box.suffix .material-symbols-outlined,.shui .oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.suffix input{padding-right:1.75rem}.shui .oc-input-box.suffix label{padding:.7rem}.shui .oc-input-box input,.shui .oc-input-box textarea,.shui .oc-input-box select{border-radius:0;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 .oc-input-box textarea{height:inherit;padding-top:20px}.shui .oc-input-box input:not(:placeholder-shown)~label,.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:not(:placeholder-shown)~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{color:#0169b2}.shui .oc-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 .oc-input-box:focus-within:before{width:100%}.shui .oc-input-box.small input,.shui .oc-input-box.small textarea,.shui .oc-input-box.small select{max-height:36px;padding-top:1rem}.shui .oc-input-box.small.prefix{z-index:5}.shui .oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui .oc-input-box.small.prefix label{padding:.45rem 2.5rem}.shui .oc-input-box.small.suffix{z-index:5}.shui .oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui .oc-input-box.small.suffix label{padding:.45rem .7rem}.shui .oc-input-box.large input,.shui .oc-input-box.large textarea,.shui .oc-input-box.large select{height:46px}.shui .oc-input-box.large label{padding:1rem .7rem}.shui .oc-input-box.large.prefix{z-index:5}.shui .oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui .oc-input-box.large.prefix input{padding-left:2.5rem}.shui .oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui .oc-input-box.large.suffix{z-index:5}.shui .oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui .oc-input-box.large.suffix input{padding-right:2.5rem}.shui .oc-input-box.large.suffix label{padding:1.1rem .7rem}.shui .error input,.shui .error textarea,.shui .error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.shui .error:before{width:0!important}.shui .error small,.shui .error label{color:#ed3a3a!important;font-weight:600}.oc.suffix,.oc.prefix,.material-symbols-outlined,.shui .oc.suffix,.shui .oc.prefix,.shui .material-symbols-outlined{z-index:5!important}.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.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}\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcInputComponent, isStandalone: true, selector: "oc-input", inputs: { ocError: "ocError", ocSize: "ocSize", ocPlaceholder: "ocPlaceholder", ocWidth: "ocWidth", ocMinWidth: "ocMinWidth", ocMaxWidth: "ocMaxWidth", ocRequired: "ocRequired", ocStyle: "ocStyle" }, host: { properties: { "style.width": "this.computedWidth", "style.min-width": "this.computedMinWidth", "style.max-width": "this.computedMaxWidth" } }, queries: [{ propertyName: "ocPrefix", first: true, predicate: ["ocPrefix"], descendants: true }, { propertyName: "ocSuffix", first: true, predicate: ["ocSuffix"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"oc-input-box\"\n  [ngClass]=\"{\n    small: ocSize === 'small',\n    large: ocSize === 'large',\n    error: !!ocError,\n    prefix: hasPrefix,\n    suffix: hasSuffix,\n    shui: ocStyle === 'shui',\n    'shui-input-box': ocStyle === 'shui',\n  }\"\n  [id]=\"inputId\"\n>\n  <ng-content></ng-content>\n  <ng-content select=\"ocPrefix\"></ng-content>\n  <ng-content select=\"ocSuffix\"></ng-content>\n  <label>\n    <span [innerHTML]=\"ocPlaceholder\"></span>\n    @if (ocRequired) {\n      <span class=\"oc color error\">*</span>\n    }\n  </label>\n  <small\n    *ngIf=\"ocError\"\n    class=\"error-msg\"\n    >{{ ocError }}</small\n  >\n</div>\n", styles: [".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{border-radius:0;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:-webkit-autofill~label,.shui-input-box input:autofill~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 input:-webkit-autofill~label,.shui-input-box input:autofill~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%}.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}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.shui .prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .suffix .material-symbols-outlined,.shui .suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .oc-input-box{position:relative;margin-top:.5rem}.shui .oc-input-box select *{background-color:#f5f5f5}.shui .oc-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 .oc-input-box.prefix{z-index:5}.shui .oc-input-box.prefix .material-symbols-outlined,.shui .oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.prefix input{padding-left:1.75rem}.shui .oc-input-box.prefix label{padding:.7rem 2.5rem}.shui .oc-input-box.suffix{z-index:5}.shui .oc-input-box.suffix .material-symbols-outlined,.shui .oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.suffix input{padding-right:1.75rem}.shui .oc-input-box.suffix label{padding:.7rem}.shui .oc-input-box input,.shui .oc-input-box textarea,.shui .oc-input-box select{border-radius:0;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 .oc-input-box textarea{height:inherit;padding-top:20px}.shui .oc-input-box input:not(:placeholder-shown)~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:not(:placeholder-shown)~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui .oc-input-box input:focus~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{color:#0169b2}.shui .oc-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 .oc-input-box:focus-within:before{width:100%}.shui .oc-input-box.small input,.shui .oc-input-box.small textarea,.shui .oc-input-box.small select{max-height:36px;padding-top:1rem}.shui .oc-input-box.small.prefix{z-index:5}.shui .oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui .oc-input-box.small.prefix label{padding:.45rem 2.5rem}.shui .oc-input-box.small.suffix{z-index:5}.shui .oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui .oc-input-box.small.suffix label{padding:.45rem .7rem}.shui .oc-input-box.large input,.shui .oc-input-box.large textarea,.shui .oc-input-box.large select{height:46px}.shui .oc-input-box.large label{padding:1rem .7rem}.shui .oc-input-box.large.prefix{z-index:5}.shui .oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui .oc-input-box.large.prefix input{padding-left:2.5rem}.shui .oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui .oc-input-box.large.suffix{z-index:5}.shui .oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui .oc-input-box.large.suffix input{padding-right:2.5rem}.shui .oc-input-box.large.suffix label{padding:1.1rem .7rem}.shui .error input,.shui .error textarea,.shui .error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.shui .error:before{width:0!important}.shui .error small,.shui .error label{color:#ed3a3a!important;font-weight:600}.oc.suffix,.oc.prefix,.material-symbols-outlined,.shui .oc.suffix,.shui .oc.prefix,.shui .material-symbols-outlined{z-index:5!important}.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:-webkit-autofill~label,.oc-input-box input:autofill~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small input:-webkit-autofill~label,.oc-input-box.small input:autofill~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 input:-webkit-autofill~label,.oc-input-box.large input:autofill~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}.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}\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcInputComponent, decorators: [{
             type: Component,
@@ -2461,7 +2472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         '[style.width]': 'computedWidth',
                         '[style.min-width]': 'computedMinWidth',
                         '[style.max-width]': 'computedMaxWidth',
-                    }, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"oc-input-box\"\n  [ngClass]=\"{\n    small: ocSize === 'small',\n    large: ocSize === 'large',\n    error: !!ocError,\n    prefix: hasPrefix,\n    suffix: hasSuffix,\n    shui: ocStyle === 'shui',\n    'shui-input-box': ocStyle === 'shui',\n  }\"\n  [id]=\"inputId\"\n>\n  <ng-content></ng-content>\n  <ng-content select=\"ocPrefix\"></ng-content>\n  <ng-content select=\"ocSuffix\"></ng-content>\n  <label>\n    <span [innerHTML]=\"ocPlaceholder\"></span>\n    @if (ocRequired) {\n      <span class=\"oc color error\">*</span>\n    }\n  </label>\n  <small\n    *ngIf=\"ocError\"\n    class=\"error-msg\"\n    >{{ ocError }}</small\n  >\n</div>\n", styles: [".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{border-radius:0;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%}.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}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.shui .prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .suffix .material-symbols-outlined,.shui .suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .oc-input-box{position:relative;margin-top:.5rem}.shui .oc-input-box select *{background-color:#f5f5f5}.shui .oc-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 .oc-input-box.prefix{z-index:5}.shui .oc-input-box.prefix .material-symbols-outlined,.shui .oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.prefix input{padding-left:1.75rem}.shui .oc-input-box.prefix label{padding:.7rem 2.5rem}.shui .oc-input-box.suffix{z-index:5}.shui .oc-input-box.suffix .material-symbols-outlined,.shui .oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.suffix input{padding-right:1.75rem}.shui .oc-input-box.suffix label{padding:.7rem}.shui .oc-input-box input,.shui .oc-input-box textarea,.shui .oc-input-box select{border-radius:0;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 .oc-input-box textarea{height:inherit;padding-top:20px}.shui .oc-input-box input:not(:placeholder-shown)~label,.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:not(:placeholder-shown)~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{color:#0169b2}.shui .oc-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 .oc-input-box:focus-within:before{width:100%}.shui .oc-input-box.small input,.shui .oc-input-box.small textarea,.shui .oc-input-box.small select{max-height:36px;padding-top:1rem}.shui .oc-input-box.small.prefix{z-index:5}.shui .oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui .oc-input-box.small.prefix label{padding:.45rem 2.5rem}.shui .oc-input-box.small.suffix{z-index:5}.shui .oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui .oc-input-box.small.suffix label{padding:.45rem .7rem}.shui .oc-input-box.large input,.shui .oc-input-box.large textarea,.shui .oc-input-box.large select{height:46px}.shui .oc-input-box.large label{padding:1rem .7rem}.shui .oc-input-box.large.prefix{z-index:5}.shui .oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui .oc-input-box.large.prefix input{padding-left:2.5rem}.shui .oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui .oc-input-box.large.suffix{z-index:5}.shui .oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui .oc-input-box.large.suffix input{padding-right:2.5rem}.shui .oc-input-box.large.suffix label{padding:1.1rem .7rem}.shui .error input,.shui .error textarea,.shui .error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.shui .error:before{width:0!important}.shui .error small,.shui .error label{color:#ed3a3a!important;font-weight:600}.oc.suffix,.oc.prefix,.material-symbols-outlined,.shui .oc.suffix,.shui .oc.prefix,.shui .material-symbols-outlined{z-index:5!important}.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.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}\n"] }]
+                    }, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"oc-input-box\"\n  [ngClass]=\"{\n    small: ocSize === 'small',\n    large: ocSize === 'large',\n    error: !!ocError,\n    prefix: hasPrefix,\n    suffix: hasSuffix,\n    shui: ocStyle === 'shui',\n    'shui-input-box': ocStyle === 'shui',\n  }\"\n  [id]=\"inputId\"\n>\n  <ng-content></ng-content>\n  <ng-content select=\"ocPrefix\"></ng-content>\n  <ng-content select=\"ocSuffix\"></ng-content>\n  <label>\n    <span [innerHTML]=\"ocPlaceholder\"></span>\n    @if (ocRequired) {\n      <span class=\"oc color error\">*</span>\n    }\n  </label>\n  <small\n    *ngIf=\"ocError\"\n    class=\"error-msg\"\n    >{{ ocError }}</small\n  >\n</div>\n", styles: [".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{border-radius:0;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:-webkit-autofill~label,.shui-input-box input:autofill~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 input:-webkit-autofill~label,.shui-input-box input:autofill~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%}.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}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.shui .prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .suffix .material-symbols-outlined,.shui .suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui .oc-input-box{position:relative;margin-top:.5rem}.shui .oc-input-box select *{background-color:#f5f5f5}.shui .oc-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 .oc-input-box.prefix{z-index:5}.shui .oc-input-box.prefix .material-symbols-outlined,.shui .oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.prefix input{padding-left:1.75rem}.shui .oc-input-box.prefix label{padding:.7rem 2.5rem}.shui .oc-input-box.suffix{z-index:5}.shui .oc-input-box.suffix .material-symbols-outlined,.shui .oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui .oc-input-box.suffix input{padding-right:1.75rem}.shui .oc-input-box.suffix label{padding:.7rem}.shui .oc-input-box input,.shui .oc-input-box textarea,.shui .oc-input-box select{border-radius:0;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 .oc-input-box textarea{height:inherit;padding-top:20px}.shui .oc-input-box input:not(:placeholder-shown)~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box input:focus~label,.shui .oc-input-box textarea:not(:placeholder-shown)~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui .oc-input-box input:focus~label,.shui .oc-input-box input:-webkit-autofill~label,.shui .oc-input-box input:autofill~label,.shui .oc-input-box textarea:focus~label,.shui .oc-input-box select:valid~label,.shui .oc-input-box select:focus~label{color:#0169b2}.shui .oc-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 .oc-input-box:focus-within:before{width:100%}.shui .oc-input-box.small input,.shui .oc-input-box.small textarea,.shui .oc-input-box.small select{max-height:36px;padding-top:1rem}.shui .oc-input-box.small.prefix{z-index:5}.shui .oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui .oc-input-box.small.prefix label{padding:.45rem 2.5rem}.shui .oc-input-box.small.suffix{z-index:5}.shui .oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui .oc-input-box.small.suffix label{padding:.45rem .7rem}.shui .oc-input-box.large input,.shui .oc-input-box.large textarea,.shui .oc-input-box.large select{height:46px}.shui .oc-input-box.large label{padding:1rem .7rem}.shui .oc-input-box.large.prefix{z-index:5}.shui .oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui .oc-input-box.large.prefix input{padding-left:2.5rem}.shui .oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui .oc-input-box.large.suffix{z-index:5}.shui .oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui .oc-input-box.large.suffix input{padding-right:2.5rem}.shui .oc-input-box.large.suffix label{padding:1.1rem .7rem}.shui .error input,.shui .error textarea,.shui .error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.shui .error:before{width:0!important}.shui .error small,.shui .error label{color:#ed3a3a!important;font-weight:600}.oc.suffix,.oc.prefix,.material-symbols-outlined,.shui .oc.suffix,.shui .oc.prefix,.shui .material-symbols-outlined{z-index:5!important}.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:-webkit-autofill~label,.oc-input-box input:autofill~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small input:-webkit-autofill~label,.oc-input-box.small input:autofill~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 input:-webkit-autofill~label,.oc-input-box.large input:autofill~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}.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}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: StyleThemeService }], propDecorators: { ocPrefix: [{
                 type: ContentChild,
                 args: ['ocPrefix']
@@ -3364,6 +3375,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }] } });
 
+class OcTableComponent {
+    constructor() {
+        this.ocData = [];
+        // Pagination attributes
+        this.ocPage = 0;
+        this.ocMaxPage = 0;
+        this.ocPerPage = 0;
+        this.ocGetPage = new EventEmitter();
+        this.ocSelect = new EventEmitter();
+        this.columns = [];
+        this.selectable = false;
+        this.keys = [];
+        this.innerComponents = ['oc-chip'];
+    }
+    ngOnInit() {
+        if (!this.ocData.length)
+            return;
+        this.keys = Object.keys(this.ocData[0]);
+        this.columns = Object.keys(this.ocData[0]).map(col => {
+            return col.split('_').join(' ').split('-').join(' ');
+        });
+        this.isAllSelected();
+    }
+    isAllSelected() {
+        this.selectable = this.ocData.every(row => row.selectable);
+    }
+    isObject(column) {
+        if (!column)
+            return false;
+        return !!Object.keys(column).length;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcTableComponent, isStandalone: true, selector: "oc-table", inputs: { ocData: "ocData", ocPage: "ocPage", ocMaxPage: "ocMaxPage", ocPerPage: "ocPerPage" }, outputs: { ocGetPage: "ocGetPage", ocSelect: "ocSelect" }, ngImport: i0, template: "<table class=\"oc table\" cdk-table [dataSource]=\"ocData\">\n\n  <ng-container *ngFor=\"let column of columns; let i = index\" [cdkColumnDef]=\"column\">\n    <!-- Table Columns -->\n    <th cdk-header-cell *cdkHeaderCellDef>\n      @if(!column.includes('oc ')) {\n      {{column}}\n      } @else {\n      @if (ocSelect && i === 0) {\n      <oc-checkbox ocBorderColor=\"gray\" />\n      }\n      }\n    </th>\n\n    <td cdk-cell *cdkCellDef=\"let row\" [ngStyle]=\"{\n      'width': (\n        column === 'oc select' ? '20px' :  \n        row[keys[i]]?.width || 'inherit'\n      )\n    }\">\n\n      @if (!column.includes('oc ')) {\n      @if (isObject(row[keys[i]])) {\n      @if (!row[keys[i]].component) {\n      {{row[keys[i]].value}}\n      } @else {\n\n      @if(row[keys[i]].component.name === 'oc-chip') {\n      <oc-chip [ocType]=\"row[keys[i]].component.ocType\" [ocBg]=\"row[keys[i]].component.ocBg\">\n        {{row[keys[i]].value}}\n      </oc-chip>\n      }\n      }\n      } @else {\n      {{row[keys[i]] || ''}}\n      }\n      } @else {\n\n      @if(column === 'oc select') {\n      <oc-checkbox ocBorderColor=\"gray\"></oc-checkbox>\n      }@else if (column === 'oc actions') {\n      <div class=\"button-row\">\n        @for (action of row.oc_actions; track $index) {\n        <button class=\"oc button icon tiny gray-1\" (click)=\"action.callback()\">\n          <span class=\"material-symbols-outlined oc color\" [ngClass]=\"{\n                  error: action.icon === 'delete'\n                }\">{{action.icon}}</span>\n        </button>\n        }\n      </div>\n      }\n      }\n    </td>\n  </ng-container>\n\n  <tr cdk-header-row *cdkHeaderRowDef=\"columns\"></tr>\n  <tr cdk-row *cdkRowDef=\"let row; columns: columns\"></tr>\n</table>\n\n@if (ocPage) {\n<oc-pagination [ocPage]=\"ocPage\" [ocMaxPage]=\"ocMaxPage\" (ocGetPage)=\"ocGetPage.emit()\" />\n}", styles: [".shui .oc.table,.shui.oc.table{width:100%;border-collapse:collapse;margin:20px 0;font-size:1em;font-family:Arial,sans-serif}.shui .oc.table thead,.shui.oc.table thead{min-height:50px;height:50px}.shui .oc.table tr,.shui.oc.table tr{background-color:#fff;transition:.1s ease;border:none;border-top:0;border-bottom:0}.shui .oc.table tr:hover,.shui.oc.table tr:hover{background-color:#f5f5f54d!important}.shui .oc.table th,.shui .oc.table td,.shui.oc.table th,.shui.oc.table td{padding:15px;text-align:left}.shui .oc.table th,.shui.oc.table th{background-color:transparent;border-bottom:1px solid rgba(125,125,125,.75);color:#000;font-weight:600;padding:12px 15px}.shui .oc.table td,.shui.oc.table td{border-bottom:1px solid rgba(200,200,200,.5);font-size:.9rem}.shui .oc.table.striped tr:nth-child(2n),.shui.oc.table.striped tr:nth-child(2n){background-color:#fff}.oc.table{width:100%;border-collapse:collapse;margin:20px 0;font-size:1em;font-family:Arial,sans-serif}.oc.table thead{min-height:50px;height:50px}.oc.table tr{background-color:#fff;transition:.1s ease;border-top:0;border-bottom:0}.oc.table.refreshing tr{opacity:.3!important;animation:refreshing 1.3s ease-in-out infinite;animation-fill-mode:both}.oc.table.refreshing tr:nth-child(1){animation-delay:0s}.oc.table.refreshing tr:nth-child(2){animation-delay:.2s}.oc.table.refreshing tr:nth-child(3){animation-delay:.4s}.oc.table.refreshing tr:nth-child(4){animation-delay:.6s}.oc.table.refreshing tr:nth-child(5){animation-delay:.8s}.oc.table.refreshing tr:nth-child(6){animation-delay:1s}.oc.table.refreshing tr:nth-child(7){animation-delay:1.2s}.oc.table.refreshing tr:nth-child(8){animation-delay:1.4s}.oc.table.refreshing tr:nth-child(9){animation-delay:1.6s}.oc.table.refreshing tr:nth-child(10){animation-delay:1.8s}.oc.table th,.oc.table td{padding:13px 15px;text-align:left}.oc.table th{background-color:#f8f9ff;color:#5505a2;font-weight:600}.oc.table.striped tr:nth-child(2n){background-color:#f8f9ff80}.oc.table td{border-bottom:1px solid #f7f7f7}.oc.table th:first-child,.oc.table td:first-child{border-top-left-radius:10px}.oc.table th:last-child,.oc.table td:last-child{border-top-right-radius:10px}.oc.table th:first-child,.oc.table td:first-child{border-bottom-left-radius:10px}.oc.table th:last-child,.oc.table td:last-child{border-bottom-right-radius:10px}.oc.table.rounded td{border-radius:0}.oc.table.rounded th:first-child{border-radius:10px 0 0}.oc.table.rounded th:last-child{border-radius:0 10px 0 0}.oc.table.rounded tbody tr:last-child td:last-child{border-radius:0 0 10px}.oc.table.rounded tbody tr:last-child td:first-child{border-radius:0 0 0 10px}.oc.table tr:hover{background-color:#f5f5f5!important}.button-row{display:flex;justify-content:flex-end;gap:.75rem}@keyframes refreshing{0%{opacity:.3}50%{opacity:.5}to{opacity:.3}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: CdkTableModule }, { kind: "component", type: i2$3.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$3.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i2$3.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i2$3.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "component", type: i2$3.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: OcCheckboxComponent, selector: "oc-checkbox", inputs: ["ocChecked", "ocSize", "ocLabel", "ocName", "ocColor", "ocBorderColor", "ocStyle", "formControl", "ocTabIndex", "disableDoubleClickCheck", "ocDisabled"], outputs: ["ocChange", "ocCheckedChange", "ocDoubleClick"] }, { kind: "component", type: OcPaginationComponent, selector: "oc-pagination", inputs: ["ocPage", "ocMaxPage", "ocStyle", "ocItemName"], outputs: ["ocGetPage"] }, { kind: "component", type: OcChipComponent, selector: "oc-chip", inputs: ["ocSelected", "ocType", "ocBg", "ocBgHexColor", "ocTextHexColor", "ocText", "ocFontSize"], outputs: ["ocClick", "ocRemove"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oc-table', imports: [CommonModule, CdkTableModule, OcCheckboxComponent, OcPaginationComponent, OcChipComponent], encapsulation: ViewEncapsulation.None, template: "<table class=\"oc table\" cdk-table [dataSource]=\"ocData\">\n\n  <ng-container *ngFor=\"let column of columns; let i = index\" [cdkColumnDef]=\"column\">\n    <!-- Table Columns -->\n    <th cdk-header-cell *cdkHeaderCellDef>\n      @if(!column.includes('oc ')) {\n      {{column}}\n      } @else {\n      @if (ocSelect && i === 0) {\n      <oc-checkbox ocBorderColor=\"gray\" />\n      }\n      }\n    </th>\n\n    <td cdk-cell *cdkCellDef=\"let row\" [ngStyle]=\"{\n      'width': (\n        column === 'oc select' ? '20px' :  \n        row[keys[i]]?.width || 'inherit'\n      )\n    }\">\n\n      @if (!column.includes('oc ')) {\n      @if (isObject(row[keys[i]])) {\n      @if (!row[keys[i]].component) {\n      {{row[keys[i]].value}}\n      } @else {\n\n      @if(row[keys[i]].component.name === 'oc-chip') {\n      <oc-chip [ocType]=\"row[keys[i]].component.ocType\" [ocBg]=\"row[keys[i]].component.ocBg\">\n        {{row[keys[i]].value}}\n      </oc-chip>\n      }\n      }\n      } @else {\n      {{row[keys[i]] || ''}}\n      }\n      } @else {\n\n      @if(column === 'oc select') {\n      <oc-checkbox ocBorderColor=\"gray\"></oc-checkbox>\n      }@else if (column === 'oc actions') {\n      <div class=\"button-row\">\n        @for (action of row.oc_actions; track $index) {\n        <button class=\"oc button icon tiny gray-1\" (click)=\"action.callback()\">\n          <span class=\"material-symbols-outlined oc color\" [ngClass]=\"{\n                  error: action.icon === 'delete'\n                }\">{{action.icon}}</span>\n        </button>\n        }\n      </div>\n      }\n      }\n    </td>\n  </ng-container>\n\n  <tr cdk-header-row *cdkHeaderRowDef=\"columns\"></tr>\n  <tr cdk-row *cdkRowDef=\"let row; columns: columns\"></tr>\n</table>\n\n@if (ocPage) {\n<oc-pagination [ocPage]=\"ocPage\" [ocMaxPage]=\"ocMaxPage\" (ocGetPage)=\"ocGetPage.emit()\" />\n}", styles: [".shui .oc.table,.shui.oc.table{width:100%;border-collapse:collapse;margin:20px 0;font-size:1em;font-family:Arial,sans-serif}.shui .oc.table thead,.shui.oc.table thead{min-height:50px;height:50px}.shui .oc.table tr,.shui.oc.table tr{background-color:#fff;transition:.1s ease;border:none;border-top:0;border-bottom:0}.shui .oc.table tr:hover,.shui.oc.table tr:hover{background-color:#f5f5f54d!important}.shui .oc.table th,.shui .oc.table td,.shui.oc.table th,.shui.oc.table td{padding:15px;text-align:left}.shui .oc.table th,.shui.oc.table th{background-color:transparent;border-bottom:1px solid rgba(125,125,125,.75);color:#000;font-weight:600;padding:12px 15px}.shui .oc.table td,.shui.oc.table td{border-bottom:1px solid rgba(200,200,200,.5);font-size:.9rem}.shui .oc.table.striped tr:nth-child(2n),.shui.oc.table.striped tr:nth-child(2n){background-color:#fff}.oc.table{width:100%;border-collapse:collapse;margin:20px 0;font-size:1em;font-family:Arial,sans-serif}.oc.table thead{min-height:50px;height:50px}.oc.table tr{background-color:#fff;transition:.1s ease;border-top:0;border-bottom:0}.oc.table.refreshing tr{opacity:.3!important;animation:refreshing 1.3s ease-in-out infinite;animation-fill-mode:both}.oc.table.refreshing tr:nth-child(1){animation-delay:0s}.oc.table.refreshing tr:nth-child(2){animation-delay:.2s}.oc.table.refreshing tr:nth-child(3){animation-delay:.4s}.oc.table.refreshing tr:nth-child(4){animation-delay:.6s}.oc.table.refreshing tr:nth-child(5){animation-delay:.8s}.oc.table.refreshing tr:nth-child(6){animation-delay:1s}.oc.table.refreshing tr:nth-child(7){animation-delay:1.2s}.oc.table.refreshing tr:nth-child(8){animation-delay:1.4s}.oc.table.refreshing tr:nth-child(9){animation-delay:1.6s}.oc.table.refreshing tr:nth-child(10){animation-delay:1.8s}.oc.table th,.oc.table td{padding:13px 15px;text-align:left}.oc.table th{background-color:#f8f9ff;color:#5505a2;font-weight:600}.oc.table.striped tr:nth-child(2n){background-color:#f8f9ff80}.oc.table td{border-bottom:1px solid #f7f7f7}.oc.table th:first-child,.oc.table td:first-child{border-top-left-radius:10px}.oc.table th:last-child,.oc.table td:last-child{border-top-right-radius:10px}.oc.table th:first-child,.oc.table td:first-child{border-bottom-left-radius:10px}.oc.table th:last-child,.oc.table td:last-child{border-bottom-right-radius:10px}.oc.table.rounded td{border-radius:0}.oc.table.rounded th:first-child{border-radius:10px 0 0}.oc.table.rounded th:last-child{border-radius:0 10px 0 0}.oc.table.rounded tbody tr:last-child td:last-child{border-radius:0 0 10px}.oc.table.rounded tbody tr:last-child td:first-child{border-radius:0 0 0 10px}.oc.table tr:hover{background-color:#f5f5f5!important}.button-row{display:flex;justify-content:flex-end;gap:.75rem}@keyframes refreshing{0%{opacity:.3}50%{opacity:.5}to{opacity:.3}}\n"] }]
+        }], propDecorators: { ocData: [{
+                type: Input
+            }], ocPage: [{
+                type: Input
+            }], ocMaxPage: [{
+                type: Input
+            }], ocPerPage: [{
+                type: Input
+            }], ocGetPage: [{
+                type: Output
+            }], ocSelect: [{
+                type: Output
+            }] } });
+
 class OcTabsComponent {
     constructor(styleThemeService, cdr) {
         this.styleThemeService = styleThemeService;
@@ -4054,5 +4116,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcButtonMenuComponent, OcCalendarComponent, OcCardComponent, OcChatComponent, OcChatErrorComponent, OcChatHeaderComponent, OcChatInputComponent, OcChatMessageComponent, OcChatMessageListComponent, OcChatToolProposalComponent, OcChatTypingIndicatorComponent, OcChatWelcomeComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcDrawerComponent, OcDrawerFooterComponent, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcOverlayComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
+export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcButtonMenuComponent, OcCalendarComponent, OcCardComponent, OcChatComponent, OcChatErrorComponent, OcChatHeaderComponent, OcChatInputComponent, OcChatMessageComponent, OcChatMessageListComponent, OcChatToolProposalComponent, OcChatTypingIndicatorComponent, OcChatWelcomeComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcDrawerComponent, OcDrawerFooterComponent, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcOverlayComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTableComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
 //# sourceMappingURL=otimus-library.mjs.map