osl-base-extended 1.0.45 → 1.0.46
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.
|
@@ -5,7 +5,7 @@ import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/d
|
|
|
5
5
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
|
6
6
|
import { Router } from '@angular/router';
|
|
7
7
|
import * as i1$2 from '@angular/common';
|
|
8
|
-
import { NgTemplateOutlet, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
|
|
8
|
+
import { NgTemplateOutlet, NgComponentOutlet, isPlatformBrowser, NgStyle } from '@angular/common';
|
|
9
9
|
import * as i3 from '@angular/material/button';
|
|
10
10
|
import { MatIconButton, MatButtonModule } from '@angular/material/button';
|
|
11
11
|
import * as i2 from '@angular/material/icon';
|
|
@@ -1404,7 +1404,14 @@ class OslAutocomplete extends baseComponent {
|
|
|
1404
1404
|
listerComponent = inject(AUTOCOMPLETE_LISTER_COMPONENT);
|
|
1405
1405
|
inputControl = new FormControl('');
|
|
1406
1406
|
inputValue = '';
|
|
1407
|
-
|
|
1407
|
+
_showDropdown = false;
|
|
1408
|
+
get showDropdown() { return this._showDropdown; }
|
|
1409
|
+
set showDropdown(val) {
|
|
1410
|
+
this._showDropdown = val;
|
|
1411
|
+
if (val)
|
|
1412
|
+
this.updateDropdownPosition();
|
|
1413
|
+
}
|
|
1414
|
+
dropdownStyle = {};
|
|
1408
1415
|
filteredItems = [];
|
|
1409
1416
|
touched = false;
|
|
1410
1417
|
constructor(elRef, cdr) {
|
|
@@ -1412,6 +1419,19 @@ class OslAutocomplete extends baseComponent {
|
|
|
1412
1419
|
this.elRef = elRef;
|
|
1413
1420
|
this.cdr = cdr;
|
|
1414
1421
|
}
|
|
1422
|
+
updateDropdownPosition() {
|
|
1423
|
+
const wrapper = this.elRef.nativeElement.querySelector('.autocomplete-wrapper');
|
|
1424
|
+
if (!wrapper)
|
|
1425
|
+
return;
|
|
1426
|
+
const rect = wrapper.getBoundingClientRect();
|
|
1427
|
+
this.dropdownStyle = {
|
|
1428
|
+
'position': 'fixed',
|
|
1429
|
+
'top': `${rect.bottom + 5}px`,
|
|
1430
|
+
'left': `${rect.left}px`,
|
|
1431
|
+
'width': `${rect.width}px`,
|
|
1432
|
+
};
|
|
1433
|
+
this.cdr.markForCheck();
|
|
1434
|
+
}
|
|
1415
1435
|
openLister() {
|
|
1416
1436
|
const inputLister = {
|
|
1417
1437
|
title: this.label,
|
|
@@ -1534,11 +1554,11 @@ class OslAutocomplete extends baseComponent {
|
|
|
1534
1554
|
}
|
|
1535
1555
|
}
|
|
1536
1556
|
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 });
|
|
1537
|
-
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: { modelChange: "modelChange", changeEv: "changeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n @if(label){\r\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\r\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\r\n </label>\r\n \r\n </div>\r\n\r\n }\r\n <div class=\"autocomplete-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\r\n <input\r\n [value]=\"inputValue\"\r\n (input)=\"onInput($any($event.target).value)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (focusout)=\"onFocusOut()\"\r\n [disabled]=\"disabled || loading\"\r\n [formControl]=\"inputControl\"\r\n [class.error]=\"isInvalid\"\r\n [placeholder]=\"loading ? 'Loading...' : placeholder\"\r\n autocomplete=\"off\"\r\n (keyup.enter)=\"searchType == 'Api' ? openLister() : null\"\r\n >\r\n @if(loading) {\r\n <span class=\"ac-spinner\"></span>\r\n } @else {\r\n @if(inputValue && !disabled) {\r\n <button type=\"button\" class=\"ac-clear\" [class.ac-clear--shifted]=\"searchType == 'Api'\" (mousedown)=\"clearValue($event)\" tabindex=\"-1\" title=\"Clear\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if(searchType == 'Api' && isLister && !disabled) {\r\n <button type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\r\n <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\r\n <mat-icon>manage_search</mat-icon>\r\n </button>\r\n }\r\n }\r\n @if(showDropdown && !loading) {\r\n <div class=\"dropdown\">\r\n @if(filteredItems.length > 0) {\r\n @for(item of filteredItems; track item) {\r\n <div class=\"dropdown-item\" (mousedown)=\"selectItem(item)\">{{getDisplay(item)}}</div>\r\n }\r\n } @else {\r\n @if(searchType == 'Local'){\r\n <div class=\"no-results\">No results found</div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n @if(isInvalid) {\r\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n }\r\n</div>\r\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{
|
|
1557
|
+
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: { modelChange: "modelChange", changeEv: "changeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n @if(label){\r\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\r\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\r\n </label>\r\n \r\n </div>\r\n\r\n }\r\n <div class=\"autocomplete-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\r\n <input\r\n [value]=\"inputValue\"\r\n (input)=\"onInput($any($event.target).value)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (focusout)=\"onFocusOut()\"\r\n [disabled]=\"disabled || loading\"\r\n [formControl]=\"inputControl\"\r\n [class.error]=\"isInvalid\"\r\n [placeholder]=\"loading ? 'Loading...' : placeholder\"\r\n autocomplete=\"off\"\r\n (keyup.enter)=\"searchType == 'Api' ? openLister() : null\"\r\n >\r\n @if(loading) {\r\n <span class=\"ac-spinner\"></span>\r\n } @else {\r\n @if(inputValue && !disabled) {\r\n <button type=\"button\" class=\"ac-clear\" [class.ac-clear--shifted]=\"searchType == 'Api'\" (mousedown)=\"clearValue($event)\" tabindex=\"-1\" title=\"Clear\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if(searchType == 'Api' && isLister && !disabled) {\r\n <button type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\r\n <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\r\n <mat-icon>manage_search</mat-icon>\r\n </button>\r\n }\r\n }\r\n @if(showDropdown && !loading) {\r\n <div class=\"dropdown\" [ngStyle]=\"dropdownStyle\">\r\n @if(filteredItems.length > 0) {\r\n @for(item of filteredItems; track item) {\r\n <div class=\"dropdown-item\" (mousedown)=\"selectItem(item)\">{{getDisplay(item)}}</div>\r\n }\r\n } @else {\r\n @if(searchType == 'Local'){\r\n <div class=\"no-results\">No results found</div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n @if(isInvalid) {\r\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n }\r\n</div>\r\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"] }] });
|
|
1538
1558
|
}
|
|
1539
1559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocomplete, decorators: [{
|
|
1540
1560
|
type: Component,
|
|
1541
|
-
args: [{ selector: 'osl-autocomplete', standalone: false, template: "<div class=\"d-flex flex-column\">\r\n @if(label){\r\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\r\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\r\n </label>\r\n \r\n </div>\r\n\r\n }\r\n <div class=\"autocomplete-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\r\n <input\r\n [value]=\"inputValue\"\r\n (input)=\"onInput($any($event.target).value)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (focusout)=\"onFocusOut()\"\r\n [disabled]=\"disabled || loading\"\r\n [formControl]=\"inputControl\"\r\n [class.error]=\"isInvalid\"\r\n [placeholder]=\"loading ? 'Loading...' : placeholder\"\r\n autocomplete=\"off\"\r\n (keyup.enter)=\"searchType == 'Api' ? openLister() : null\"\r\n >\r\n @if(loading) {\r\n <span class=\"ac-spinner\"></span>\r\n } @else {\r\n @if(inputValue && !disabled) {\r\n <button type=\"button\" class=\"ac-clear\" [class.ac-clear--shifted]=\"searchType == 'Api'\" (mousedown)=\"clearValue($event)\" tabindex=\"-1\" title=\"Clear\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if(searchType == 'Api' && isLister && !disabled) {\r\n <button type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\r\n <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\r\n <mat-icon>manage_search</mat-icon>\r\n </button>\r\n }\r\n }\r\n @if(showDropdown && !loading) {\r\n <div class=\"dropdown\">\r\n @if(filteredItems.length > 0) {\r\n @for(item of filteredItems; track item) {\r\n <div class=\"dropdown-item\" (mousedown)=\"selectItem(item)\">{{getDisplay(item)}}</div>\r\n }\r\n } @else {\r\n @if(searchType == 'Local'){\r\n <div class=\"no-results\">No results found</div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n @if(isInvalid) {\r\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n }\r\n</div>\r\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{
|
|
1561
|
+
args: [{ selector: 'osl-autocomplete', standalone: false, template: "<div class=\"d-flex flex-column\">\r\n @if(label){\r\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\r\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\r\n </label>\r\n \r\n </div>\r\n\r\n }\r\n <div class=\"autocomplete-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\r\n <input\r\n [value]=\"inputValue\"\r\n (input)=\"onInput($any($event.target).value)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n (focusout)=\"onFocusOut()\"\r\n [disabled]=\"disabled || loading\"\r\n [formControl]=\"inputControl\"\r\n [class.error]=\"isInvalid\"\r\n [placeholder]=\"loading ? 'Loading...' : placeholder\"\r\n autocomplete=\"off\"\r\n (keyup.enter)=\"searchType == 'Api' ? openLister() : null\"\r\n >\r\n @if(loading) {\r\n <span class=\"ac-spinner\"></span>\r\n } @else {\r\n @if(inputValue && !disabled) {\r\n <button type=\"button\" class=\"ac-clear\" [class.ac-clear--shifted]=\"searchType == 'Api'\" (mousedown)=\"clearValue($event)\" tabindex=\"-1\" title=\"Clear\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if(searchType == 'Api' && isLister && !disabled) {\r\n <button type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\r\n <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\r\n <mat-icon>manage_search</mat-icon>\r\n </button>\r\n }\r\n }\r\n @if(showDropdown && !loading) {\r\n <div class=\"dropdown\" [ngStyle]=\"dropdownStyle\">\r\n @if(filteredItems.length > 0) {\r\n @for(item of filteredItems; track item) {\r\n <div class=\"dropdown-item\" (mousedown)=\"selectItem(item)\">{{getDisplay(item)}}</div>\r\n }\r\n } @else {\r\n @if(searchType == 'Local'){\r\n <div class=\"no-results\">No results found</div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n @if(isInvalid) {\r\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n }\r\n</div>\r\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"] }]
|
|
1542
1562
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
|
|
1543
1563
|
type: Input,
|
|
1544
1564
|
args: ['label']
|
|
@@ -2698,6 +2718,7 @@ class FormStructureModule {
|
|
|
2698
2718
|
OslGrid,
|
|
2699
2719
|
OslFormGrid,
|
|
2700
2720
|
OslAutocompleteLister], imports: [NgTemplateOutlet,
|
|
2721
|
+
NgStyle,
|
|
2701
2722
|
FormsModule,
|
|
2702
2723
|
ReactiveFormsModule,
|
|
2703
2724
|
MatFormFieldModule,
|
|
@@ -2756,6 +2777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2756
2777
|
],
|
|
2757
2778
|
imports: [
|
|
2758
2779
|
NgTemplateOutlet,
|
|
2780
|
+
NgStyle,
|
|
2759
2781
|
FormsModule,
|
|
2760
2782
|
ReactiveFormsModule,
|
|
2761
2783
|
MatFormFieldModule,
|