osl-base-extended 1.1.38 → 1.1.40
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.
|
@@ -1552,17 +1552,16 @@ class OslAutocomplete extends baseComponent {
|
|
|
1552
1552
|
label = '';
|
|
1553
1553
|
required = false;
|
|
1554
1554
|
disabled = false;
|
|
1555
|
-
_model;
|
|
1555
|
+
_model = null;
|
|
1556
1556
|
_object;
|
|
1557
|
+
// Fix: removed if(val) guard — _model must be settable to null/0/false
|
|
1557
1558
|
set model(val) {
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
this.datasourceChange.emit(this.datasource);
|
|
1565
|
-
}
|
|
1559
|
+
this._model = val;
|
|
1560
|
+
if (val !== null && val !== undefined && this._object) {
|
|
1561
|
+
this.datasource = [this._object];
|
|
1562
|
+
this.filteredItems = [...this.datasource];
|
|
1563
|
+
this.syncInputFromModel();
|
|
1564
|
+
this.datasourceChange.emit(this.datasource);
|
|
1566
1565
|
}
|
|
1567
1566
|
}
|
|
1568
1567
|
get model() {
|
|
@@ -1585,7 +1584,7 @@ class OslAutocomplete extends baseComponent {
|
|
|
1585
1584
|
this.filteredItems = [...this.datasource];
|
|
1586
1585
|
this.datasourceChange.emit(this.datasource);
|
|
1587
1586
|
}
|
|
1588
|
-
if (this.
|
|
1587
|
+
if (this._model !== null && this._model !== undefined) {
|
|
1589
1588
|
this.syncInputFromModel();
|
|
1590
1589
|
}
|
|
1591
1590
|
}
|
|
@@ -1643,13 +1642,11 @@ class OslAutocomplete extends baseComponent {
|
|
|
1643
1642
|
});
|
|
1644
1643
|
}
|
|
1645
1644
|
ngOnInit() {
|
|
1646
|
-
if (this.searchType
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
this.placeholder = 'Type to Search';
|
|
1652
|
-
}
|
|
1645
|
+
if (this.searchType === 'Api' && this.methodName && this.service) {
|
|
1646
|
+
this.placeholder = this.isLister ? 'Type to Search Or Press Enter' : 'Type to Search';
|
|
1647
|
+
// Fix: [formControl] already updates inputControl on user input, so valueChanges
|
|
1648
|
+
// fires once per keystroke. Do NOT call inputControl.setValue() inside onInput
|
|
1649
|
+
// for API mode to avoid double emission.
|
|
1653
1650
|
this.inputControl.valueChanges
|
|
1654
1651
|
.pipe(debounceTime(500), distinctUntilChanged())
|
|
1655
1652
|
.subscribe(async (value) => {
|
|
@@ -1658,35 +1655,44 @@ class OslAutocomplete extends baseComponent {
|
|
|
1658
1655
|
const res = await this.service[this.methodName](value);
|
|
1659
1656
|
if (!res.isSuccessful)
|
|
1660
1657
|
return;
|
|
1661
|
-
this.datasource = res?.result && Array.isArray(res?.result) ? res
|
|
1658
|
+
this.datasource = res?.result && Array.isArray(res?.result) ? res.result : res?.result?.data;
|
|
1662
1659
|
this.datasourceChange.emit(this.datasource);
|
|
1663
1660
|
this.filteredItems = this.datasource;
|
|
1664
1661
|
this.cdr.markForCheck();
|
|
1665
1662
|
});
|
|
1666
|
-
if (this.
|
|
1667
|
-
this.datasource = [this.
|
|
1663
|
+
if (this._object) {
|
|
1664
|
+
this.datasource = [this._object];
|
|
1668
1665
|
this.datasourceChange.emit(this.datasource);
|
|
1669
1666
|
this.filteredItems = [...this.datasource];
|
|
1670
1667
|
}
|
|
1671
1668
|
}
|
|
1672
|
-
this.cdr.markForCheck();
|
|
1673
1669
|
this.syncInputFromModel();
|
|
1670
|
+
this.cdr.markForCheck();
|
|
1674
1671
|
}
|
|
1675
|
-
ngOnChanges() {
|
|
1676
|
-
|
|
1677
|
-
|
|
1672
|
+
ngOnChanges(changes) {
|
|
1673
|
+
if (changes['datasource']) {
|
|
1674
|
+
this.filteredItems = [...(this.datasource || [])];
|
|
1675
|
+
// Only sync when dropdown is closed (user is not actively typing/searching)
|
|
1676
|
+
if (!this._showDropdown) {
|
|
1677
|
+
this.syncInputFromModel();
|
|
1678
|
+
}
|
|
1679
|
+
}
|
|
1680
|
+
if (changes['model']) {
|
|
1681
|
+
this.syncInputFromModel();
|
|
1682
|
+
}
|
|
1678
1683
|
}
|
|
1679
1684
|
syncInputFromModel() {
|
|
1680
|
-
if (this.
|
|
1681
|
-
const found = this.datasource.find((item) => this.getValue(item) === this.
|
|
1685
|
+
if (this._model !== null && this._model !== undefined) {
|
|
1686
|
+
const found = this.datasource.find((item) => this.getValue(item) === this._model);
|
|
1682
1687
|
if (found) {
|
|
1683
|
-
|
|
1684
|
-
this.
|
|
1688
|
+
const display = this.getDisplay(found);
|
|
1689
|
+
this.inputValue = display;
|
|
1690
|
+
this.inputControl.setValue(display, { emitEvent: false });
|
|
1685
1691
|
}
|
|
1686
1692
|
}
|
|
1687
1693
|
else {
|
|
1688
1694
|
this.inputValue = '';
|
|
1689
|
-
this.inputControl.setValue('');
|
|
1695
|
+
this.inputControl.setValue('', { emitEvent: false });
|
|
1690
1696
|
}
|
|
1691
1697
|
this.cdr.markForCheck();
|
|
1692
1698
|
}
|
|
@@ -1697,18 +1703,31 @@ class OslAutocomplete extends baseComponent {
|
|
|
1697
1703
|
return this.valueField ? item[this.valueField] : item;
|
|
1698
1704
|
}
|
|
1699
1705
|
get isInvalid() {
|
|
1700
|
-
return this.touched && this.required && !this.
|
|
1706
|
+
return this.touched && this.required && !this._model;
|
|
1701
1707
|
}
|
|
1702
1708
|
onInput(val) {
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1709
|
+
// Fix: set _model directly so null is always stored, bypassing the setter's
|
|
1710
|
+
// datasource-refresh side effect which should only run on external model changes
|
|
1711
|
+
this._model = null;
|
|
1712
|
+
this.inputValue = val;
|
|
1713
|
+
if (this.searchType === 'Local') {
|
|
1707
1714
|
this.showDropdown = true;
|
|
1708
1715
|
this.filteredItems = this.datasource.filter((item) => this.getDisplay(item)?.toLowerCase()?.includes(val?.toLowerCase()));
|
|
1709
1716
|
if (!val) {
|
|
1710
|
-
this.model = null;
|
|
1711
1717
|
this.modelChange.emit(null);
|
|
1718
|
+
this.changeEv.emit(null);
|
|
1719
|
+
}
|
|
1720
|
+
}
|
|
1721
|
+
else {
|
|
1722
|
+
// API mode: [formControl] already updated inputControl, valueChanges handles the search
|
|
1723
|
+
if (!val) {
|
|
1724
|
+
this.filteredItems = [];
|
|
1725
|
+
this.showDropdown = false;
|
|
1726
|
+
this.modelChange.emit(null);
|
|
1727
|
+
this.changeEv.emit(null);
|
|
1728
|
+
}
|
|
1729
|
+
else {
|
|
1730
|
+
this.showDropdown = true;
|
|
1712
1731
|
}
|
|
1713
1732
|
}
|
|
1714
1733
|
}
|
|
@@ -1716,33 +1735,42 @@ class OslAutocomplete extends baseComponent {
|
|
|
1716
1735
|
if (this.loading)
|
|
1717
1736
|
return;
|
|
1718
1737
|
this.showDropdown = true;
|
|
1719
|
-
this.
|
|
1720
|
-
|
|
1721
|
-
onFocusOut() {
|
|
1722
|
-
if (this.inputValue && this.filteredItems.length == 1) {
|
|
1723
|
-
this.selectItem(this.filteredItems[0]);
|
|
1724
|
-
}
|
|
1725
|
-
if (!this.model) {
|
|
1726
|
-
this.clearValue();
|
|
1738
|
+
if (this.searchType === 'Local') {
|
|
1739
|
+
this.filteredItems = this.datasource.filter((item) => this.getDisplay(item)?.toLowerCase()?.includes(this.inputValue?.toLowerCase()));
|
|
1727
1740
|
}
|
|
1728
1741
|
}
|
|
1729
|
-
|
|
1742
|
+
onFocusOut() {
|
|
1730
1743
|
this.touched = true;
|
|
1744
|
+
this.showDropdown = false;
|
|
1745
|
+
// Fix: removed auto-select-on-single-match — it caused refill when user
|
|
1746
|
+
// cleared text and datasource had only 1 item.
|
|
1747
|
+
// If no selection was made, clear the typed text.
|
|
1748
|
+
if (this._model === null || this._model === undefined) {
|
|
1749
|
+
this.inputValue = '';
|
|
1750
|
+
this.inputControl.setValue('', { emitEvent: false });
|
|
1751
|
+
}
|
|
1752
|
+
this.cdr.markForCheck();
|
|
1731
1753
|
}
|
|
1732
1754
|
clearValue(event) {
|
|
1733
1755
|
event?.stopPropagation();
|
|
1756
|
+
// Fix: set _model directly to null — using the setter would trigger the
|
|
1757
|
+
// datasource-refresh side effect unnecessarily
|
|
1758
|
+
this._model = null;
|
|
1734
1759
|
this.inputValue = '';
|
|
1735
|
-
this.inputControl.setValue('');
|
|
1736
|
-
this.
|
|
1760
|
+
this.inputControl.setValue('', { emitEvent: false });
|
|
1761
|
+
this.showDropdown = false;
|
|
1737
1762
|
this.modelChange.emit(null);
|
|
1738
1763
|
this.changeEv.emit(null);
|
|
1764
|
+
this.cdr.markForCheck();
|
|
1739
1765
|
}
|
|
1740
1766
|
selectItem(item) {
|
|
1741
|
-
|
|
1742
|
-
this.
|
|
1743
|
-
this.
|
|
1744
|
-
this.
|
|
1745
|
-
this.
|
|
1767
|
+
const display = this.getDisplay(item);
|
|
1768
|
+
const value = this.getValue(item);
|
|
1769
|
+
this.inputValue = display;
|
|
1770
|
+
this.inputControl.setValue(display, { emitEvent: false });
|
|
1771
|
+
this._model = value;
|
|
1772
|
+
this.modelChange.emit(value);
|
|
1773
|
+
this.changeEv.emit(value);
|
|
1746
1774
|
this.showDropdown = false;
|
|
1747
1775
|
}
|
|
1748
1776
|
onDocumentClick(event) {
|
|
@@ -1751,11 +1779,11 @@ class OslAutocomplete extends baseComponent {
|
|
|
1751
1779
|
}
|
|
1752
1780
|
}
|
|
1753
1781
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocomplete, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1754
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslAutocomplete, isStandalone: false, selector: "osl-autocomplete", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", placeholder: "placeholder", loading: "loading", searchType: "searchType", methodName: "methodName", configMethodName: "configMethodName", service: "service", object: "object", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme", isLister: "isLister" }, outputs: { datasourceChange: "datasourceChange", modelChange: "modelChange", changeEv: "changeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\
|
|
1782
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslAutocomplete, isStandalone: false, selector: "osl-autocomplete", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", placeholder: "placeholder", loading: "loading", searchType: "searchType", methodName: "methodName", configMethodName: "configMethodName", service: "service", object: "object", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme", isLister: "isLister" }, outputs: { datasourceChange: "datasourceChange", modelChange: "modelChange", changeEv: "changeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n @if(label){\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n\n </div>\n\n }\n <div class=\"autocomplete-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n <input\n (input)=\"onInput($any($event.target).value)\"\n (focus)=\"onFocus()\"\n (focusout)=\"onFocusOut()\"\n [disabled]=\"disabled || loading\"\n [formControl]=\"inputControl\"\n [class.error]=\"isInvalid\"\n [placeholder]=\"loading ? 'Loading...' : placeholder\"\n autocomplete=\"off\"\n (keyup.enter)=\"searchType == 'Api' ? openLister() : null\"\n >\n @if(loading) {\n <span class=\"ac-spinner\"></span>\n } @else {\n @if(inputControl.value && !disabled) {\n <button type=\"button\" class=\"ac-clear\" [class.ac-clear--shifted]=\"searchType == 'Api'\" (mousedown)=\"clearValue($event)\" tabindex=\"-1\" title=\"Clear\">\n <mat-icon>close</mat-icon>\n </button>\n }\n @if(searchType == 'Api' && isLister && !disabled) {\n <button type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\n <mat-icon>manage_search</mat-icon>\n </button>\n }\n }\n @if(showDropdown && !loading) {\n <div class=\"dropdown\" [ngStyle]=\"dropdownStyle\">\n @if(filteredItems.length > 0) {\n @for(item of filteredItems; track item) {\n <div class=\"dropdown-item\" (mousedown)=\"selectItem(item)\">{{getDisplay(item)}}</div>\n }\n } @else {\n @if(searchType == 'Local'){\n <div class=\"no-results\">No results found</div>\n }\n }\n </div>\n }\n </div>\n @if(isInvalid) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.autocomplete-wrapper{position:relative;display:flex;align-items:center}.autocomplete-wrapper input{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 30px 0 8px;font-size:var(--osl-text-font-size);transition:border-color .5s}.autocomplete-wrapper input:focus{border-color:var(--osl-focus-border-color)}.autocomplete-wrapper input:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}.autocomplete-wrapper input::placeholder{font-size:var(--osl-label-font-size);color:#aaa;font-size:12px}.autocomplete-wrapper input.error{border-color:var(--osl-error-color)}.ac-spinner{position:absolute;right:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:ac-spin .7s linear infinite;pointer-events:none}@keyframes ac-spin{to{transform:rotate(360deg)}}.ac-clear{position:absolute;right:6px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;color:#aaa}.ac-clear mat-icon{font-size:16px;width:16px;height:16px}.ac-clear:hover{color:#333}.ac-clear--shifted{right:40px}.ac-lister-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:2px;cursor:pointer;border-radius:4px;color:#aaa;opacity:.75;transition:opacity .15s,transform .1s}.ac-lister-btn:hover{opacity:1}.ac-lister-btn:active{transform:translateY(calc(-50% + 1px))}.ac-lister-img{width:24px;height:24px;display:block;pointer-events:none}.autocomplete-wrapper--api input{padding-right:64px}.dropdown{z-index:9999;background:#fff;border:1px solid var(--osl-border-color);border-top:none;border-radius:0 0 var(--osl-border-radius) var(--osl-border-radius);max-height:200px;overflow-y:auto;box-shadow:0 4px 8px #00000014}.dropdown-item{padding:8px 10px;font-size:var(--osl-label-font-size);cursor:pointer}.dropdown-item:hover{background:#f5f5f5}.no-results{padding:8px 10px;font-size:var(--osl-label-font-size);color:#aaa;font-style:italic}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }] });
|
|
1755
1783
|
}
|
|
1756
1784
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocomplete, decorators: [{
|
|
1757
1785
|
type: Component,
|
|
1758
|
-
args: [{ selector: 'osl-autocomplete', standalone: false, template: "<div class=\"d-flex flex-column\">\
|
|
1786
|
+
args: [{ selector: 'osl-autocomplete', standalone: false, template: "<div class=\"d-flex flex-column\">\n @if(label){\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n\n </div>\n\n }\n <div class=\"autocomplete-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n <input\n (input)=\"onInput($any($event.target).value)\"\n (focus)=\"onFocus()\"\n (focusout)=\"onFocusOut()\"\n [disabled]=\"disabled || loading\"\n [formControl]=\"inputControl\"\n [class.error]=\"isInvalid\"\n [placeholder]=\"loading ? 'Loading...' : placeholder\"\n autocomplete=\"off\"\n (keyup.enter)=\"searchType == 'Api' ? openLister() : null\"\n >\n @if(loading) {\n <span class=\"ac-spinner\"></span>\n } @else {\n @if(inputControl.value && !disabled) {\n <button type=\"button\" class=\"ac-clear\" [class.ac-clear--shifted]=\"searchType == 'Api'\" (mousedown)=\"clearValue($event)\" tabindex=\"-1\" title=\"Clear\">\n <mat-icon>close</mat-icon>\n </button>\n }\n @if(searchType == 'Api' && isLister && !disabled) {\n <button type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\n <mat-icon>manage_search</mat-icon>\n </button>\n }\n }\n @if(showDropdown && !loading) {\n <div class=\"dropdown\" [ngStyle]=\"dropdownStyle\">\n @if(filteredItems.length > 0) {\n @for(item of filteredItems; track item) {\n <div class=\"dropdown-item\" (mousedown)=\"selectItem(item)\">{{getDisplay(item)}}</div>\n }\n } @else {\n @if(searchType == 'Local'){\n <div class=\"no-results\">No results found</div>\n }\n }\n </div>\n }\n </div>\n @if(isInvalid) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.autocomplete-wrapper{position:relative;display:flex;align-items:center}.autocomplete-wrapper input{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 30px 0 8px;font-size:var(--osl-text-font-size);transition:border-color .5s}.autocomplete-wrapper input:focus{border-color:var(--osl-focus-border-color)}.autocomplete-wrapper input:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}.autocomplete-wrapper input::placeholder{font-size:var(--osl-label-font-size);color:#aaa;font-size:12px}.autocomplete-wrapper input.error{border-color:var(--osl-error-color)}.ac-spinner{position:absolute;right:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:ac-spin .7s linear infinite;pointer-events:none}@keyframes ac-spin{to{transform:rotate(360deg)}}.ac-clear{position:absolute;right:6px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;color:#aaa}.ac-clear mat-icon{font-size:16px;width:16px;height:16px}.ac-clear:hover{color:#333}.ac-clear--shifted{right:40px}.ac-lister-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:2px;cursor:pointer;border-radius:4px;color:#aaa;opacity:.75;transition:opacity .15s,transform .1s}.ac-lister-btn:hover{opacity:1}.ac-lister-btn:active{transform:translateY(calc(-50% + 1px))}.ac-lister-img{width:24px;height:24px;display:block;pointer-events:none}.autocomplete-wrapper--api input{padding-right:64px}.dropdown{z-index:9999;background:#fff;border:1px solid var(--osl-border-color);border-top:none;border-radius:0 0 var(--osl-border-radius) var(--osl-border-radius);max-height:200px;overflow-y:auto;box-shadow:0 4px 8px #00000014}.dropdown-item{padding:8px 10px;font-size:var(--osl-label-font-size);cursor:pointer}.dropdown-item:hover{background:#f5f5f5}.no-results{padding:8px 10px;font-size:var(--osl-label-font-size);color:#aaa;font-style:italic}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
1759
1787
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
|
|
1760
1788
|
type: Input,
|
|
1761
1789
|
args: ['label']
|