otimus-library 0.3.32 → 0.3.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1193,13 +1193,15 @@ class OcAutocompleteComponent {
|
|
|
1193
1193
|
overlayX: 'start',
|
|
1194
1194
|
overlayY: 'bottom'
|
|
1195
1195
|
}
|
|
1196
|
-
])
|
|
1196
|
+
])
|
|
1197
|
+
.withFlexibleDimensions(false);
|
|
1197
1198
|
// Create overlay config
|
|
1198
1199
|
const overlayConfig = {
|
|
1199
1200
|
positionStrategy,
|
|
1200
1201
|
width: inputWidth,
|
|
1201
1202
|
hasBackdrop: true,
|
|
1202
1203
|
backdropClass: this.ocShowBackdrop ? undefined : 'cdk-overlay-transparent-backdrop',
|
|
1204
|
+
scrollStrategy: this.overlay.scrollStrategies.reposition()
|
|
1203
1205
|
};
|
|
1204
1206
|
// Create overlay
|
|
1205
1207
|
this.overlayRef = this.overlay.create(overlayConfig);
|
|
@@ -1249,7 +1251,8 @@ class OcAutocompleteComponent {
|
|
|
1249
1251
|
updateOverlayWidth() {
|
|
1250
1252
|
if (this.overlayRef && this.input) {
|
|
1251
1253
|
const inputWidth = this.input.nativeElement.offsetWidth;
|
|
1252
|
-
|
|
1254
|
+
const reasonableWidth = Math.max(50, Math.min(inputWidth, window.innerWidth * 0.9));
|
|
1255
|
+
this.overlayRef.updateSize({ width: reasonableWidth });
|
|
1253
1256
|
this.cdr.detectChanges();
|
|
1254
1257
|
}
|
|
1255
1258
|
}
|
|
@@ -1385,7 +1388,7 @@ class OcAutocompleteComponent {
|
|
|
1385
1388
|
this.closeOverlay();
|
|
1386
1389
|
}
|
|
1387
1390
|
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 }); }
|
|
1388
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocData: "ocData", ocPlaceholder: "ocPlaceholder", ocError: "ocError", ocSize: "ocSize", ocValue: "ocValue", ocClearOnChange: "ocClearOnChange", ocWidth: "ocWidth", ocMinWidth: "ocMinWidth", ocMaxWidth: "ocMaxWidth", ocOptionsMaxHeight: "ocOptionsMaxHeight", ocOptionsWidth: "ocOptionsWidth", ocRequired: "ocRequired", ocMaxResults: "ocMaxResults", ocAllowNotListedValue: "ocAllowNotListedValue", ocNoAvailableOptionsText: "ocNoAvailableOptionsText", ocTypeForMoreResultsText: "ocTypeForMoreResultsText", ocLoading: "ocLoading", ocSemanticLike: "ocSemanticLike", ocStyle: "ocStyle", ocTabIndex: "ocTabIndex", iconSize: "iconSize", ocSelectByTyping: "ocSelectByTyping", ocDisabled: "ocDisabled", ocType: "ocType", ocShowBackdrop: "ocShowBackdrop", ocHasDeleteButton: "ocHasDeleteButton", ocEnableKeyboard: "ocEnableKeyboard" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocCounterSelectChange: "ocCounterSelectChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick" }, host: { properties: { "style.width": "this.computedWidth", "style.min-width": "this.computedMinWidth", "style.max-width": "this.computedMaxWidth" } }, providers: [InternationalizationService], queries: [{ propertyName: "ocPrefix", first: true, predicate: ["ocPrefix"], descendants: true }, { propertyName: "ocSuffix", first: true, predicate: ["ocSuffix"], descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "options", first: true, predicate: ["options"], descendants: true }, { propertyName: "outerDiv", first: true, predicate: ["outerDiv"], descendants: true }, { propertyName: "listOptionsElements", predicate: ["listOptionsRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix || ocHasDeleteButton,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n }\"\n>\n <ng-content></ng-content>\n <input\n [placeholder]=\"ocPlaceholder\"\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\"\n [tabindex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder || ''\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton && !ocDisabled) {\n <button\n class=\"oc-has-close-button oc suffix\"\n (click)=\"clearValue(); ocChange.emit(null)\"\n [disabled]=\"ocDisabled\"\n >\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.cdk-overlay-transparent-backdrop{background:none}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
1391
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocData: "ocData", ocPlaceholder: "ocPlaceholder", ocError: "ocError", ocSize: "ocSize", ocValue: "ocValue", ocClearOnChange: "ocClearOnChange", ocWidth: "ocWidth", ocMinWidth: "ocMinWidth", ocMaxWidth: "ocMaxWidth", ocOptionsMaxHeight: "ocOptionsMaxHeight", ocOptionsWidth: "ocOptionsWidth", ocRequired: "ocRequired", ocMaxResults: "ocMaxResults", ocAllowNotListedValue: "ocAllowNotListedValue", ocNoAvailableOptionsText: "ocNoAvailableOptionsText", ocTypeForMoreResultsText: "ocTypeForMoreResultsText", ocLoading: "ocLoading", ocSemanticLike: "ocSemanticLike", ocStyle: "ocStyle", ocTabIndex: "ocTabIndex", iconSize: "iconSize", ocSelectByTyping: "ocSelectByTyping", ocDisabled: "ocDisabled", ocType: "ocType", ocShowBackdrop: "ocShowBackdrop", ocHasDeleteButton: "ocHasDeleteButton", ocEnableKeyboard: "ocEnableKeyboard" }, outputs: { ocValueChange: "ocValueChange", ocChange: "ocChange", ocCounterSelectChange: "ocCounterSelectChange", ocOptionNotFound: "ocOptionNotFound", ocClick: "ocClick" }, host: { properties: { "style.width": "this.computedWidth", "style.min-width": "this.computedMinWidth", "style.max-width": "this.computedMaxWidth" } }, providers: [InternationalizationService], queries: [{ propertyName: "ocPrefix", first: true, predicate: ["ocPrefix"], descendants: true }, { propertyName: "ocSuffix", first: true, predicate: ["ocSuffix"], descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "options", first: true, predicate: ["options"], descendants: true }, { propertyName: "outerDiv", first: true, predicate: ["outerDiv"], descendants: true }, { propertyName: "listOptionsElements", predicate: ["listOptionsRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix || ocHasDeleteButton,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n }\"\n>\n <ng-content></ng-content>\n <input\n [placeholder]=\"ocPlaceholder\"\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\"\n [tabindex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder || ''\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton && !ocDisabled) {\n <button\n class=\"oc-has-close-button oc suffix\"\n (click)=\"clearValue(); ocChange.emit(null)\"\n [disabled]=\"ocDisabled\"\n >\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.cdk-overlay-transparent-backdrop{background:none}.cdk-overlay-connected-position-bounding-box{max-width:90vw!important;left:auto!important;top:auto!important}.cdk-overlay-pane{max-width:90vw!important}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
1389
1392
|
}
|
|
1390
1393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteComponent, decorators: [{
|
|
1391
1394
|
type: Component,
|
|
@@ -1393,7 +1396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
1393
1396
|
'[style.width]': 'computedWidth',
|
|
1394
1397
|
'[style.min-width]': 'computedMinWidth',
|
|
1395
1398
|
'[style.max-width]': 'computedMaxWidth',
|
|
1396
|
-
}, changeDetection: ChangeDetectionStrategy.Default, template: "<div\n [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix || ocHasDeleteButton,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n }\"\n>\n <ng-content></ng-content>\n <input\n [placeholder]=\"ocPlaceholder\"\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\"\n [tabindex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder || ''\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton && !ocDisabled) {\n <button\n class=\"oc-has-close-button oc suffix\"\n (click)=\"clearValue(); ocChange.emit(null)\"\n [disabled]=\"ocDisabled\"\n >\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.cdk-overlay-transparent-backdrop{background:none}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
1399
|
+
}, changeDetection: ChangeDetectionStrategy.Default, template: "<div\n [ngClass]=\"{\n 'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',\n small: ocSize === 'small',\n large: ocSize === 'large',\n error: !!ocError,\n prefix: hasPrefix,\n suffix: hasSuffix || ocHasDeleteButton,\n shui: ocStyle === 'shui',\n 'shui-input-box': ocStyle === 'shui',\n }\"\n>\n <ng-content></ng-content>\n <input\n [placeholder]=\"ocPlaceholder\"\n #input\n (click)=\"toggleOptions(); ocClick.emit()\"\n type=\"text\"\n (input)=\"filterData(ocValue)\"\n [(ngModel)]=\"ocValue\"\n (ngModelChange)=\"ocValue = $event; ocValueChange.emit($event)\"\n [ngClass]=\"{\n 'semantic-input': ocSemanticLike || ocStyle === 'semantic',\n }\"\n [tabindex]=\"ocTabIndex\"\n [disabled]=\"ocDisabled\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (!ocSemanticLike && ocStyle !== 'semantic') {\n <label>\n <span [innerHTML]=\"ocPlaceholder || ''\"></span>\n @if (ocRequired) {\n <span class=\"oc color error\">*</span>\n }\n </label>\n }\n <small\n *ngIf=\"ocError\"\n class=\"error-msg\"\n >{{ ocError }}</small\n >\n <ng-content select=\"ocPrefix\"></ng-content>\n @if (ocHasDeleteButton && !ocDisabled) {\n <button\n class=\"oc-has-close-button oc suffix\"\n (click)=\"clearValue(); ocChange.emit(null)\"\n [disabled]=\"ocDisabled\"\n >\n <span class=\"material-symbols-outlined\">backspace</span>\n </button>\n }\n <ng-content select=\"ocSuffix\"></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.oc-input-box{position:relative;margin-top:.5rem}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box label .oc.color.error{font-weight:700;margin-left:.2rem}.oc-input-box.prefix .material-symbols-outlined,.oc-input-box.prefix .oc.suffix{padding:.5rem .7rem}.oc-input-box.prefix input{padding-left:1.75rem}.oc-input-box.prefix label{padding:.7rem 2.5rem}.oc-input-box.suffix .material-symbols-outlined,.oc-input-box.suffix .oc.suffix{padding:.5rem .7rem}.oc-input-box.suffix input{padding-right:1.75rem}.oc-input-box.suffix label{padding:.7rem}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.oc-input-box.small input,.oc-input-box.small textarea,.oc-input-box.small select{padding:.3rem .7rem;border-radius:.5rem}.oc-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem}.oc-input-box.small.prefix label{padding:.45rem 2.5rem}.oc-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem}.oc-input-box.small.suffix label{padding:.45rem .7rem}.oc-input-box.small label{padding:.5rem .7rem}.oc-input-box.small input:focus~label,.oc-input-box.small input:not(:placeholder-shown)~label,.oc-input-box.small textarea:focus~label,.oc-input-box.small textarea:not(:placeholder-shown)~label,.oc-input-box.small select:focus~label,.oc-input-box.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.oc-input-box.large input,.oc-input-box.large textarea,.oc-input-box.large select{padding:1rem;border-radius:1rem}.oc-input-box.large label,.oc-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.oc-input-box.large.prefix input{padding-left:2.5rem}.oc-input-box.large.prefix label{padding:1.1rem 2.5rem}.oc-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.oc-input-box.large.suffix input{padding-right:2.5rem}.oc-input-box.large.suffix label{padding:1.1rem .7rem}.oc-input-box.large input:focus~label,.oc-input-box.large input:not(:placeholder-shown)~label,.oc-input-box.large textarea:focus~label,.oc-input-box.large textarea:not(:placeholder-shown)~label,.oc-input-box.large select:focus~label,.oc-input-box.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.shui-input-box.prefix .material-symbols-outlined{position:absolute;left:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{position:absolute;right:0;font-size:1.5rem;-webkit-user-select:none;user-select:none}.shui-input-box{position:relative;margin-top:.5rem}.shui-input-box select *{background-color:#f5f5f5}.shui-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#000;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.shui-input-box.prefix{z-index:5}.shui-input-box.prefix .material-symbols-outlined,.shui-input-box.prefix .oc.suffix{padding:.5rem .7rem}.shui-input-box.prefix input{padding-left:1.75rem}.shui-input-box.prefix label{padding:.7rem 2.5rem}.shui-input-box.suffix{z-index:5}.shui-input-box.suffix .material-symbols-outlined,.shui-input-box.suffix .oc.suffix{padding:.5rem .7rem}.shui-input-box.suffix input{padding-right:1.75rem}.shui-input-box.suffix label{padding:.7rem}.shui-input-box input,.shui-input-box textarea,.shui-input-box select{font-size:1rem;background-color:#f5f5f5;border:none;outline:none;padding:1rem .9rem .2rem;width:100%;transition:.3s ease;color:#000;font-weight:400;height:41px;min-width:100%}.shui-input-box textarea{height:inherit;padding-top:20px}.shui-input-box input:not(:placeholder-shown)~label,.shui-input-box input:focus~label,.shui-input-box textarea:not(:placeholder-shown)~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{transform:translate(.45rem);background-color:#f5f5f5;width:95%;padding:1px 7px 0;font-size:.7rem;font-weight:500}.shui-input-box input:focus~label,.shui-input-box textarea:focus~label,.shui-input-box select:valid~label,.shui-input-box select:focus~label{color:#0169b2}.shui-input-box:before{display:block;content:\"\";position:absolute;bottom:0;height:1px;width:100%;background-color:#7d7d7d;transition:.4s ease;width:0;background-color:#0169b2}.shui-input-box:focus-within:before{width:100%}.error input,.error textarea,.error select{border:1px solid #e7001d;box-shadow:0 4px 6.1px #a1000014}.error:before{width:0!important}.error small,.error label{color:#ed3a3a!important;font-weight:600}.shui-input-box.small input,.shui-input-box.small textarea,.shui-input-box.small select{max-height:36px;padding-top:1rem}.shui-input-box.small.prefix{z-index:5}.shui-input-box.small.prefix .material-symbols-outlined{padding:.35rem .7rem;font-size:1.25rem;color:#0169b2}.shui-input-box.small.prefix label{padding:.45rem 2.5rem}.shui-input-box.small.suffix{z-index:5}.shui-input-box.small.suffix .material-symbols-outlined{padding:.35rem .7rem;color:#0169b2}.shui-input-box.small.suffix label{padding:.45rem .7rem}.shui-input-box.large input,.shui-input-box.large textarea,.shui-input-box.large select{height:46px}.shui-input-box.large label{padding:1rem .7rem}.shui-input-box.large.prefix{z-index:5}.shui-input-box.large.prefix .material-symbols-outlined{padding:1rem .7rem}.shui-input-box.large.prefix input{padding-left:2.5rem}.shui-input-box.large.prefix label{padding:1.1rem 2.5rem}.shui-input-box.large.suffix{z-index:5}.shui-input-box.large.suffix .material-symbols-outlined{padding:.9rem .7rem}.shui-input-box.large.suffix input{padding-right:2.5rem}.shui-input-box.large.suffix label{padding:1.1rem .7rem}.oc.suffix,.oc.prefix,.material-symbols-outlined{z-index:5!important}.oc-input-box{position:relative}.cdk-overlay-transparent-backdrop{background:none}.cdk-overlay-connected-position-bounding-box{max-width:90vw!important;left:auto!important;top:auto!important}.cdk-overlay-pane{max-width:90vw!important}.oc-has-close-button-input{padding-right:60px}.oc-has-close-button{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem!important;top:8%;height:84%;width:2.2rem;border:2px solid transparent;border-radius:.5rem;background-color:transparent;padding:0!important;transition:border-color .2s ease,box-shadow .2s ease}.oc-has-close-button:hover{border:2px solid #8f9596;box-shadow:0 4px 8.7px #00000021;cursor:pointer}.oc-has-close-button span{padding:0!important;margin:.3rem}.oc-counter-select{display:flex;gap:.2rem;align-items:center;float:right;max-height:30px}.oc-counter-select .counter{font-size:.9rem;color:#5505a2;font-weight:600;margin:0;padding:0}.oc-counter-select button{display:flex;justify-content:center;align-items:center;text-align:center;max-width:20px}.oc-counter-select .subtract span,.oc-counter-select .add span{font-size:1rem;font-weight:600;text-align:center}.oc-counter-select span{transition:.2s ease}.oc-counter-select .subtract:hover span{color:#ed3a3a!important}.oc-counter-select .add:hover span{color:#00dda3!important}.shui-option-box .oc-counter-select .counter{color:#0169b2}.no-options{padding:.6rem!important;color:#8f9596}.oc-options.loader{display:flex;align-items:center;justify-content:center}.oc-options.loader span{width:24px;margin:3rem;color:#5505a2}.loading{animation:spinLoad .5s linear infinite}.semantic-input{display:inline-block;width:100%;padding:10px 12px;font-size:14px;line-height:1.5;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 2px #22242626;transition:border-color .2s ease,box-shadow .2s ease}.semantic-input:hover{border-color:#b3b3b3}.semantic-input:focus{border-color:#85b7d9;box-shadow:0 0 0 2px #22242626;outline:none}.semantic-input:disabled{background-color:#f9f9f9;color:#b3b3b3;border-color:#ddd;cursor:not-allowed}@keyframes spinLoad{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
1397
1400
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: InternationalizationService }, { type: StyleThemeService }, { type: i0.ChangeDetectorRef }, { type: i3.Overlay }], propDecorators: { input: [{
|
|
1398
1401
|
type: ViewChild,
|
|
1399
1402
|
args: ['input']
|