osl-base-extended 2.0.13 → 2.0.14
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.
|
@@ -1811,11 +1811,11 @@ class OslAutocomplete extends baseComponent {
|
|
|
1811
1811
|
}
|
|
1812
1812
|
}
|
|
1813
1813
|
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 });
|
|
1814
|
-
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 @if(service?.route && !disabled) {\n <a class=\"ac-hint-link\" (mousedown)=\"$event.preventDefault()\" (click)=\"onHintClick($event)\">\n {
|
|
1814
|
+
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 @if(service?.route && !disabled) {\n <a class=\"ac-hint-link\" (mousedown)=\"$event.preventDefault()\" (click)=\"onHintClick($event)\">\n @if(model) {\n <span class=\"ac-hint-edit\">\u270E Edit {{label}}</span>\n } @else {\n <span class=\"ac-hint-add\">+ Add New</span>\n }\n </a>\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)}.ac-hint-link{display:inline-block;margin-top:3px;font-size:11px;color:var(--osl-focus-border-color, #1976d2);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none;text-decoration:underline}.ac-hint-add{font-weight:600}.ac-hint-edit{font-weight:400;opacity:.85}\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"] }] });
|
|
1815
1815
|
}
|
|
1816
1816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocomplete, decorators: [{
|
|
1817
1817
|
type: Component,
|
|
1818
|
-
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 @if(service?.route && !disabled) {\n <a class=\"ac-hint-link\" (mousedown)=\"$event.preventDefault()\" (click)=\"onHintClick($event)\">\n {
|
|
1818
|
+
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 @if(service?.route && !disabled) {\n <a class=\"ac-hint-link\" (mousedown)=\"$event.preventDefault()\" (click)=\"onHintClick($event)\">\n @if(model) {\n <span class=\"ac-hint-edit\">\u270E Edit {{label}}</span>\n } @else {\n <span class=\"ac-hint-add\">+ Add New</span>\n }\n </a>\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)}.ac-hint-link{display:inline-block;margin-top:3px;font-size:11px;color:var(--osl-focus-border-color, #1976d2);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none;text-decoration:underline}.ac-hint-add{font-weight:600}.ac-hint-edit{font-weight:400;opacity:.85}\n"] }]
|
|
1819
1819
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
|
|
1820
1820
|
type: Input,
|
|
1821
1821
|
args: ['label']
|