otimus-library 0.4.84 → 0.4.85
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.
- package/fesm2022/otimus-library.mjs +10 -3
- package/fesm2022/otimus-library.mjs.map +1 -1
- package/index.d.ts +4 -3
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Injectable, Input, Directive, EventEmitter, Output, ContentChildren, forwardRef, ChangeDetectionStrategy, ContentChild, ViewChildren, ViewChild, ViewEncapsulation, HostBinding,
|
|
2
|
+
import { Component, Injectable, Input, Directive, EventEmitter, Output, ContentChildren, forwardRef, ChangeDetectionStrategy, input, effect, ContentChild, ViewChildren, ViewChild, ViewEncapsulation, HostBinding, inject, PLATFORM_ID, RendererFactory2, signal, ElementRef, ViewContainerRef, computed, viewChild, booleanAttribute } from '@angular/core';
|
|
3
3
|
import * as i2$1 from '@angular/cdk/menu';
|
|
4
4
|
import { CdkMenuModule } from '@angular/cdk/menu';
|
|
5
5
|
import * as i1 from '@angular/common';
|
|
@@ -1015,6 +1015,7 @@ class OcAutocompleteComponent {
|
|
|
1015
1015
|
this.ocEnableKeyboard = false;
|
|
1016
1016
|
this.ocSelectionEllipsisAt = null;
|
|
1017
1017
|
this.ocMaxVisibleChips = null;
|
|
1018
|
+
this.ocSelectedValues = input([], ...(ngDevMode ? [{ debugName: "ocSelectedValues" }] : []));
|
|
1018
1019
|
this.ocValueChange = new EventEmitter();
|
|
1019
1020
|
this.ocChange = new EventEmitter();
|
|
1020
1021
|
this.ocCounterSelectChange = new EventEmitter();
|
|
@@ -1037,6 +1038,12 @@ class OcAutocompleteComponent {
|
|
|
1037
1038
|
this.overlayRef = null;
|
|
1038
1039
|
this.dropdownComponentRef = null;
|
|
1039
1040
|
this.clickOutListener = null;
|
|
1041
|
+
effect(() => {
|
|
1042
|
+
const incoming = this.ocSelectedValues();
|
|
1043
|
+
this.selectedValues = incoming.slice();
|
|
1044
|
+
this.updateInputPaddingForChips();
|
|
1045
|
+
this.cdr.detectChanges();
|
|
1046
|
+
});
|
|
1040
1047
|
}
|
|
1041
1048
|
set ocData(value) {
|
|
1042
1049
|
this._ocData = value;
|
|
@@ -1576,7 +1583,7 @@ class OcAutocompleteComponent {
|
|
|
1576
1583
|
this.closeOverlay();
|
|
1577
1584
|
}
|
|
1578
1585
|
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 }); }
|
|
1579
|
-
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 }); }
|
|
1586
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcAutocompleteComponent, isStandalone: true, selector: "oc-autocomplete", inputs: { ocData: { classPropertyName: "ocData", publicName: "ocData", isSignal: false, isRequired: false, transformFunction: null }, ocPlaceholder: { classPropertyName: "ocPlaceholder", publicName: "ocPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, ocError: { classPropertyName: "ocError", publicName: "ocError", isSignal: false, isRequired: false, transformFunction: null }, ocSize: { classPropertyName: "ocSize", publicName: "ocSize", isSignal: false, isRequired: false, transformFunction: null }, ocValue: { classPropertyName: "ocValue", publicName: "ocValue", isSignal: false, isRequired: false, transformFunction: null }, ocClearOnChange: { classPropertyName: "ocClearOnChange", publicName: "ocClearOnChange", isSignal: false, isRequired: false, transformFunction: null }, ocWidth: { classPropertyName: "ocWidth", publicName: "ocWidth", isSignal: false, isRequired: false, transformFunction: null }, ocMinWidth: { classPropertyName: "ocMinWidth", publicName: "ocMinWidth", isSignal: false, isRequired: false, transformFunction: null }, ocMaxWidth: { classPropertyName: "ocMaxWidth", publicName: "ocMaxWidth", isSignal: false, isRequired: false, transformFunction: null }, ocOptionsMaxHeight: { classPropertyName: "ocOptionsMaxHeight", publicName: "ocOptionsMaxHeight", isSignal: false, isRequired: false, transformFunction: null }, ocOptionsWidth: { classPropertyName: "ocOptionsWidth", publicName: "ocOptionsWidth", isSignal: false, isRequired: false, transformFunction: null }, ocRequired: { classPropertyName: "ocRequired", publicName: "ocRequired", isSignal: false, isRequired: false, transformFunction: null }, ocMaxResults: { classPropertyName: "ocMaxResults", publicName: "ocMaxResults", isSignal: false, isRequired: false, transformFunction: null }, ocAllowNotListedValue: { classPropertyName: "ocAllowNotListedValue", publicName: "ocAllowNotListedValue", isSignal: false, isRequired: false, transformFunction: null }, ocNoAvailableOptionsText: { classPropertyName: "ocNoAvailableOptionsText", publicName: "ocNoAvailableOptionsText", isSignal: false, isRequired: false, transformFunction: null }, ocTypeForMoreResultsText: { classPropertyName: "ocTypeForMoreResultsText", publicName: "ocTypeForMoreResultsText", isSignal: false, isRequired: false, transformFunction: null }, ocLoading: { classPropertyName: "ocLoading", publicName: "ocLoading", isSignal: false, isRequired: false, transformFunction: null }, ocSemanticLike: { classPropertyName: "ocSemanticLike", publicName: "ocSemanticLike", isSignal: false, isRequired: false, transformFunction: null }, ocStyle: { classPropertyName: "ocStyle", publicName: "ocStyle", isSignal: false, isRequired: false, transformFunction: null }, ocTabIndex: { classPropertyName: "ocTabIndex", publicName: "ocTabIndex", isSignal: false, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: false, isRequired: false, transformFunction: null }, ocSelectByTyping: { classPropertyName: "ocSelectByTyping", publicName: "ocSelectByTyping", isSignal: false, isRequired: false, transformFunction: null }, ocDisabled: { classPropertyName: "ocDisabled", publicName: "ocDisabled", isSignal: false, isRequired: false, transformFunction: null }, ocType: { classPropertyName: "ocType", publicName: "ocType", isSignal: false, isRequired: false, transformFunction: null }, ocShowBackdrop: { classPropertyName: "ocShowBackdrop", publicName: "ocShowBackdrop", isSignal: false, isRequired: false, transformFunction: null }, ocHasDeleteButton: { classPropertyName: "ocHasDeleteButton", publicName: "ocHasDeleteButton", isSignal: false, isRequired: false, transformFunction: null }, ocEnableKeyboard: { classPropertyName: "ocEnableKeyboard", publicName: "ocEnableKeyboard", isSignal: false, isRequired: false, transformFunction: null }, ocSelectionEllipsisAt: { classPropertyName: "ocSelectionEllipsisAt", publicName: "ocSelectionEllipsisAt", isSignal: false, isRequired: false, transformFunction: null }, ocMaxVisibleChips: { classPropertyName: "ocMaxVisibleChips", publicName: "ocMaxVisibleChips", isSignal: false, isRequired: false, transformFunction: null }, ocSelectedValues: { classPropertyName: "ocSelectedValues", publicName: "ocSelectedValues", isSignal: true, isRequired: false, transformFunction: null } }, 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 }); }
|
|
1580
1587
|
}
|
|
1581
1588
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcAutocompleteComponent, decorators: [{
|
|
1582
1589
|
type: Component,
|
|
@@ -1661,7 +1668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
1661
1668
|
type: Input
|
|
1662
1669
|
}], ocMaxVisibleChips: [{
|
|
1663
1670
|
type: Input
|
|
1664
|
-
}], ocValueChange: [{
|
|
1671
|
+
}], ocSelectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocSelectedValues", required: false }] }], ocValueChange: [{
|
|
1665
1672
|
type: Output
|
|
1666
1673
|
}], ocChange: [{
|
|
1667
1674
|
type: Output
|