osl-base-extended 1.0.6 → 1.0.8
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.
|
@@ -1336,8 +1336,13 @@ class OslAutocomplete extends baseComponent {
|
|
|
1336
1336
|
methodName = '';
|
|
1337
1337
|
configMethodName = '';
|
|
1338
1338
|
service;
|
|
1339
|
-
object
|
|
1339
|
+
set object(val) {
|
|
1340
|
+
if (val) {
|
|
1341
|
+
this.datasource = [val];
|
|
1342
|
+
}
|
|
1343
|
+
}
|
|
1340
1344
|
skeletonLoading = false;
|
|
1345
|
+
isLister = false;
|
|
1341
1346
|
modelChange = new EventEmitter();
|
|
1342
1347
|
changeEv = new EventEmitter();
|
|
1343
1348
|
listerComponent = inject(AUTOCOMPLETE_LISTER_COMPONENT);
|
|
@@ -1369,7 +1374,12 @@ class OslAutocomplete extends baseComponent {
|
|
|
1369
1374
|
}
|
|
1370
1375
|
ngOnInit() {
|
|
1371
1376
|
if (this.searchType == 'Api' && this.methodName && this.service) {
|
|
1372
|
-
this.
|
|
1377
|
+
if (this.isLister) {
|
|
1378
|
+
this.placeholder = 'Type to Search Or Press Enter';
|
|
1379
|
+
}
|
|
1380
|
+
else {
|
|
1381
|
+
this.placeholder = 'Type to Search';
|
|
1382
|
+
}
|
|
1373
1383
|
this.inputControl.valueChanges
|
|
1374
1384
|
.pipe(debounceTime(500), distinctUntilChanged())
|
|
1375
1385
|
.subscribe(async (value) => {
|
|
@@ -1466,11 +1476,11 @@ class OslAutocomplete extends baseComponent {
|
|
|
1466
1476
|
}
|
|
1467
1477
|
}
|
|
1468
1478
|
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 });
|
|
1469
|
-
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" }, outputs: { 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\">\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\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n <input\n [value]=\"inputValue\"\n (input)=\"onInput($any($event.target).value)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\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(inputValue && !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' && !disabled) {\n <button type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\n <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\n <mat-icon>manage_search</mat-icon>\n </button>\n }\n }\n @if(showDropdown && !loading) {\n <div class=\"dropdown\">\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{position:absolute;top:100%;left:0;right:0;z-index:1000;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$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"] }] });
|
|
1479
|
+
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", 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\">\n @if(label){\n <div [oslSkeleton]=\"skeletonLoading\">\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\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n <input\n [value]=\"inputValue\"\n (input)=\"onInput($any($event.target).value)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\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(inputValue && !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 <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\n <mat-icon>manage_search</mat-icon>\n </button>\n }\n }\n @if(showDropdown && !loading) {\n <div class=\"dropdown\">\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{position:absolute;top:100%;left:0;right:0;z-index:1000;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$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"] }] });
|
|
1470
1480
|
}
|
|
1471
1481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocomplete, decorators: [{
|
|
1472
1482
|
type: Component,
|
|
1473
|
-
args: [{ selector: 'osl-autocomplete', standalone: false, template: "<div class=\"d-flex flex-column\">\n @if(label){\n <div [oslSkeleton]=\"skeletonLoading\">\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\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n <input\n [value]=\"inputValue\"\n (input)=\"onInput($any($event.target).value)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\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(inputValue && !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' && !disabled) {\n <button type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\n <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\n <mat-icon>manage_search</mat-icon>\n </button>\n }\n }\n @if(showDropdown && !loading) {\n <div class=\"dropdown\">\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{position:absolute;top:100%;left:0;right:0;z-index:1000;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"] }]
|
|
1483
|
+
args: [{ selector: 'osl-autocomplete', standalone: false, template: "<div class=\"d-flex flex-column\">\n @if(label){\n <div [oslSkeleton]=\"skeletonLoading\">\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\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n <input\n [value]=\"inputValue\"\n (input)=\"onInput($any($event.target).value)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\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(inputValue && !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 <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\n <mat-icon>manage_search</mat-icon>\n </button>\n }\n }\n @if(showDropdown && !loading) {\n <div class=\"dropdown\">\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{position:absolute;top:100%;left:0;right:0;z-index:1000;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"] }]
|
|
1474
1484
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
|
|
1475
1485
|
type: Input,
|
|
1476
1486
|
args: ['label']
|
|
@@ -1516,6 +1526,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1516
1526
|
}], skeletonLoading: [{
|
|
1517
1527
|
type: Input,
|
|
1518
1528
|
args: ['skeletonLoading']
|
|
1529
|
+
}], isLister: [{
|
|
1530
|
+
type: Input,
|
|
1531
|
+
args: ['isLister']
|
|
1519
1532
|
}], modelChange: [{
|
|
1520
1533
|
type: Output
|
|
1521
1534
|
}], changeEv: [{
|
|
@@ -1870,11 +1883,11 @@ class DynamicForm {
|
|
|
1870
1883
|
this.modelChange.emit(this.model);
|
|
1871
1884
|
}
|
|
1872
1885
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicForm, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1873
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DynamicForm, isStandalone: false, selector: "osl-dynamic-form", inputs: { elements: "elements", model: "model", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0, template: "@if(elements && elements.length > 0) {\n <div class=\"row align-items-center w-100\">\n @for(elem of elements; track elem) {\n @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n }\n }\n </div>\n}\n\n<ng-template #formField let-elem>\n @if(elem.hideIf ? !elem.hideIf(model) : true) {\n @switch (elem.elementType) {\n\n @case (\"textbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-input\n [skeletonLoading]=\"skeletonLoading\"\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [type]=\"elem.inputType || 'text'\"\n [placeholder]=\"elem.placeholder || ''\"\n [mask]=\"elem.mask || ''\"\n [min]=\"elem.min ?? ''\"\n [max]=\"elem.max ?? ''\"\n [minLength]=\"elem.minLength ?? null\"\n [maxLength]=\"elem.maxLength ?? null\"\n [prefixIcon]=\"elem.prefixIcon || ''\"\n [suffixIcon]=\"elem.suffixIcon || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-input>\n </div>\n }\n\n @case (\"textarea\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-textarea\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [rows]=\"elem.textareaRows || 3\"\n [placeholder]=\"elem.placeholder || ''\"\n [maxLength]=\"elem.maxLength ?? null\"\n [minLength]=\"elem.minLength ?? null\"\n [characterCounter]=\"!!elem.characterCounter\"\n [resize]=\"elem.resize || 'none'\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-textarea>\n </div>\n }\n\n @case (\"select\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-select\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n [clearable]=\"!!elem.clearable\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-select>\n </div>\n }\n\n @case (\"radio\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-radio\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [inline]=\"!!elem.inline\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-radio>\n </div>\n }\n\n @case (\"slide-toggle\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-slide-toggle\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [labelPosition]=\"elem.labelPosition || 'after'\"\n [trueLabel]=\"elem.trueLabel || ''\"\n [falseLabel]=\"elem.falseLabel || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-slide-toggle>\n </div>\n }\n\n @case (\"autocomplete\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-autocomplete\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n [methodName]=\"elem.apiMethod\"\n [service]=\"elem.apiService\"\n [object]=\"model[elem.objectName]\"\n [searchType]=\"elem.searchType\"\n [configMethodName]=\"elem.apiConfigMethod\"\n \n \n ></osl-autocomplete>\n </div>\n }\n\n @case (\"file-uploader\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-file-upload\n [skeletonLoading]=\"skeletonLoading\"\n\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [accept]=\"elem.accept || ''\"\n [multiple]=\"!!elem.multiple\"\n [maxSize]=\"elem.maxFileSize || 0\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-file-upload>\n </div>\n }\n\n @case (\"datepicker\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-datepicker\n [skeletonLoading]=\"skeletonLoading\"\n\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [dateType]=\"elem.dateType || 'date'\"\n [placeholder]=\"elem.placeholder || ''\"\n [minDate]=\"elem.minDate || ''\"\n [maxDate]=\"elem.maxDate || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-datepicker>\n </div>\n }\n\n @case (\"checkbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-checkbox\n [skeletonLoading]=\"skeletonLoading\"\n\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [indeterminate]=\"!!elem.indeterminate\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-checkbox>\n </div>\n }\n\n @case (\"button\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-button\n \n [label]=\"elem.label\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n variant=\"secondary\"\n (clickEv)=\"elem.change ? elem.change(model) : null\"\n ></osl-button>\n </div>\n }\n\n @case (\"fieldset\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <fieldset class=\"osl-fieldset\">\n @if(elem.label) {\n <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\">\n <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n </legend>\n }\n <div class=\"row w-100 osl-fieldset-body\">\n @for(innerElem of elem.rows; track innerElem) {\n @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n }\n }\n </div>\n </fieldset>\n </div>\n }\n\n @case (\"templateRef\"){\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n\n \n </div>\n }\n @case (\"spacer\"){\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <!-- <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container> -->\n\n \n </div>\n }\n\n }\n }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "skeletonLoading", "maxDate"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslButton, selector: "osl-button", inputs: ["label", "icon", "variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clickEv"] }] });
|
|
1886
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DynamicForm, isStandalone: false, selector: "osl-dynamic-form", inputs: { elements: "elements", model: "model", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0, template: "@if(elements && elements.length > 0) {\n <div class=\"row align-items-center w-100\">\n @for(elem of elements; track elem) {\n @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n }\n }\n </div>\n}\n\n<ng-template #formField let-elem>\n @if(elem.hideIf ? !elem.hideIf(model) : true) {\n @switch (elem.elementType) {\n\n @case (\"textbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-input\n [skeletonLoading]=\"skeletonLoading\"\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [type]=\"elem.inputType || 'text'\"\n [placeholder]=\"elem.placeholder || ''\"\n [mask]=\"elem.mask || ''\"\n [min]=\"elem.min ?? ''\"\n [max]=\"elem.max ?? ''\"\n [minLength]=\"elem.minLength ?? null\"\n [maxLength]=\"elem.maxLength ?? null\"\n [prefixIcon]=\"elem.prefixIcon || ''\"\n [suffixIcon]=\"elem.suffixIcon || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-input>\n </div>\n }\n\n @case (\"textarea\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-textarea\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [rows]=\"elem.textareaRows || 3\"\n [placeholder]=\"elem.placeholder || ''\"\n [maxLength]=\"elem.maxLength ?? null\"\n [minLength]=\"elem.minLength ?? null\"\n [characterCounter]=\"!!elem.characterCounter\"\n [resize]=\"elem.resize || 'none'\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-textarea>\n </div>\n }\n\n @case (\"select\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-select\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n [clearable]=\"!!elem.clearable\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-select>\n </div>\n }\n\n @case (\"radio\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-radio\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [inline]=\"!!elem.inline\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-radio>\n </div>\n }\n\n @case (\"slide-toggle\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-slide-toggle\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [labelPosition]=\"elem.labelPosition || 'after'\"\n [trueLabel]=\"elem.trueLabel || ''\"\n [falseLabel]=\"elem.falseLabel || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-slide-toggle>\n </div>\n }\n\n @case (\"autocomplete\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-autocomplete\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n [methodName]=\"elem.apiMethod\"\n [service]=\"elem.apiService\"\n [object]=\"model[elem.objectName]\"\n [searchType]=\"elem.searchType\"\n [configMethodName]=\"elem.apiConfigMethod\"\n [isLister]=\"elem.isListerAutocomplete\"\n \n \n ></osl-autocomplete>\n </div>\n }\n\n @case (\"file-uploader\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-file-upload\n [skeletonLoading]=\"skeletonLoading\"\n\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [accept]=\"elem.accept || ''\"\n [multiple]=\"!!elem.multiple\"\n [maxSize]=\"elem.maxFileSize || 0\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-file-upload>\n </div>\n }\n\n @case (\"datepicker\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-datepicker\n [skeletonLoading]=\"skeletonLoading\"\n\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [dateType]=\"elem.dateType || 'date'\"\n [placeholder]=\"elem.placeholder || ''\"\n [minDate]=\"elem.minDate || ''\"\n [maxDate]=\"elem.maxDate || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-datepicker>\n </div>\n }\n\n @case (\"checkbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-checkbox\n [skeletonLoading]=\"skeletonLoading\"\n\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [indeterminate]=\"!!elem.indeterminate\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-checkbox>\n </div>\n }\n\n @case (\"button\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-button\n \n [label]=\"elem.label\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n variant=\"secondary\"\n (clickEv)=\"elem.change ? elem.change(model) : null\"\n ></osl-button>\n </div>\n }\n\n @case (\"fieldset\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <fieldset class=\"osl-fieldset\">\n @if(elem.label) {\n <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\">\n <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n </legend>\n }\n <div class=\"row w-100 osl-fieldset-body\">\n @for(innerElem of elem.rows; track innerElem) {\n @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n }\n }\n </div>\n </fieldset>\n </div>\n }\n\n @case (\"templateRef\"){\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n\n \n </div>\n }\n @case (\"spacer\"){\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <!-- <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container> -->\n\n \n </div>\n }\n\n }\n }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading", "isLister"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "skeletonLoading", "maxDate"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslButton, selector: "osl-button", inputs: ["label", "icon", "variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clickEv"] }] });
|
|
1874
1887
|
}
|
|
1875
1888
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicForm, decorators: [{
|
|
1876
1889
|
type: Component,
|
|
1877
|
-
args: [{ selector: 'osl-dynamic-form', standalone: false, template: "@if(elements && elements.length > 0) {\n <div class=\"row align-items-center w-100\">\n @for(elem of elements; track elem) {\n @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n }\n }\n </div>\n}\n\n<ng-template #formField let-elem>\n @if(elem.hideIf ? !elem.hideIf(model) : true) {\n @switch (elem.elementType) {\n\n @case (\"textbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-input\n [skeletonLoading]=\"skeletonLoading\"\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [type]=\"elem.inputType || 'text'\"\n [placeholder]=\"elem.placeholder || ''\"\n [mask]=\"elem.mask || ''\"\n [min]=\"elem.min ?? ''\"\n [max]=\"elem.max ?? ''\"\n [minLength]=\"elem.minLength ?? null\"\n [maxLength]=\"elem.maxLength ?? null\"\n [prefixIcon]=\"elem.prefixIcon || ''\"\n [suffixIcon]=\"elem.suffixIcon || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-input>\n </div>\n }\n\n @case (\"textarea\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-textarea\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [rows]=\"elem.textareaRows || 3\"\n [placeholder]=\"elem.placeholder || ''\"\n [maxLength]=\"elem.maxLength ?? null\"\n [minLength]=\"elem.minLength ?? null\"\n [characterCounter]=\"!!elem.characterCounter\"\n [resize]=\"elem.resize || 'none'\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-textarea>\n </div>\n }\n\n @case (\"select\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-select\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n [clearable]=\"!!elem.clearable\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-select>\n </div>\n }\n\n @case (\"radio\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-radio\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [inline]=\"!!elem.inline\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-radio>\n </div>\n }\n\n @case (\"slide-toggle\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-slide-toggle\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [labelPosition]=\"elem.labelPosition || 'after'\"\n [trueLabel]=\"elem.trueLabel || ''\"\n [falseLabel]=\"elem.falseLabel || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-slide-toggle>\n </div>\n }\n\n @case (\"autocomplete\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-autocomplete\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n [methodName]=\"elem.apiMethod\"\n [service]=\"elem.apiService\"\n [object]=\"model[elem.objectName]\"\n [searchType]=\"elem.searchType\"\n [configMethodName]=\"elem.apiConfigMethod\"\n \n \n ></osl-autocomplete>\n </div>\n }\n\n @case (\"file-uploader\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-file-upload\n [skeletonLoading]=\"skeletonLoading\"\n\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [accept]=\"elem.accept || ''\"\n [multiple]=\"!!elem.multiple\"\n [maxSize]=\"elem.maxFileSize || 0\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-file-upload>\n </div>\n }\n\n @case (\"datepicker\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-datepicker\n [skeletonLoading]=\"skeletonLoading\"\n\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [dateType]=\"elem.dateType || 'date'\"\n [placeholder]=\"elem.placeholder || ''\"\n [minDate]=\"elem.minDate || ''\"\n [maxDate]=\"elem.maxDate || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-datepicker>\n </div>\n }\n\n @case (\"checkbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-checkbox\n [skeletonLoading]=\"skeletonLoading\"\n\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [indeterminate]=\"!!elem.indeterminate\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-checkbox>\n </div>\n }\n\n @case (\"button\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-button\n \n [label]=\"elem.label\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n variant=\"secondary\"\n (clickEv)=\"elem.change ? elem.change(model) : null\"\n ></osl-button>\n </div>\n }\n\n @case (\"fieldset\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <fieldset class=\"osl-fieldset\">\n @if(elem.label) {\n <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\">\n <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n </legend>\n }\n <div class=\"row w-100 osl-fieldset-body\">\n @for(innerElem of elem.rows; track innerElem) {\n @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n }\n }\n </div>\n </fieldset>\n </div>\n }\n\n @case (\"templateRef\"){\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n\n \n </div>\n }\n @case (\"spacer\"){\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <!-- <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container> -->\n\n \n </div>\n }\n\n }\n }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"] }]
|
|
1890
|
+
args: [{ selector: 'osl-dynamic-form', standalone: false, template: "@if(elements && elements.length > 0) {\n <div class=\"row align-items-center w-100\">\n @for(elem of elements; track elem) {\n @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n }\n }\n </div>\n}\n\n<ng-template #formField let-elem>\n @if(elem.hideIf ? !elem.hideIf(model) : true) {\n @switch (elem.elementType) {\n\n @case (\"textbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-input\n [skeletonLoading]=\"skeletonLoading\"\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [type]=\"elem.inputType || 'text'\"\n [placeholder]=\"elem.placeholder || ''\"\n [mask]=\"elem.mask || ''\"\n [min]=\"elem.min ?? ''\"\n [max]=\"elem.max ?? ''\"\n [minLength]=\"elem.minLength ?? null\"\n [maxLength]=\"elem.maxLength ?? null\"\n [prefixIcon]=\"elem.prefixIcon || ''\"\n [suffixIcon]=\"elem.suffixIcon || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-input>\n </div>\n }\n\n @case (\"textarea\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-textarea\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [rows]=\"elem.textareaRows || 3\"\n [placeholder]=\"elem.placeholder || ''\"\n [maxLength]=\"elem.maxLength ?? null\"\n [minLength]=\"elem.minLength ?? null\"\n [characterCounter]=\"!!elem.characterCounter\"\n [resize]=\"elem.resize || 'none'\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-textarea>\n </div>\n }\n\n @case (\"select\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-select\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n [clearable]=\"!!elem.clearable\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-select>\n </div>\n }\n\n @case (\"radio\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-radio\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [inline]=\"!!elem.inline\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-radio>\n </div>\n }\n\n @case (\"slide-toggle\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-slide-toggle\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [labelPosition]=\"elem.labelPosition || 'after'\"\n [trueLabel]=\"elem.trueLabel || ''\"\n [falseLabel]=\"elem.falseLabel || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-slide-toggle>\n </div>\n }\n\n @case (\"autocomplete\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-autocomplete\n [label]=\"elem.label\"\n [skeletonLoading]=\"skeletonLoading\"\n\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n [methodName]=\"elem.apiMethod\"\n [service]=\"elem.apiService\"\n [object]=\"model[elem.objectName]\"\n [searchType]=\"elem.searchType\"\n [configMethodName]=\"elem.apiConfigMethod\"\n [isLister]=\"elem.isListerAutocomplete\"\n \n \n ></osl-autocomplete>\n </div>\n }\n\n @case (\"file-uploader\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-file-upload\n [skeletonLoading]=\"skeletonLoading\"\n\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [accept]=\"elem.accept || ''\"\n [multiple]=\"!!elem.multiple\"\n [maxSize]=\"elem.maxFileSize || 0\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-file-upload>\n </div>\n }\n\n @case (\"datepicker\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-datepicker\n [skeletonLoading]=\"skeletonLoading\"\n\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [dateType]=\"elem.dateType || 'date'\"\n [placeholder]=\"elem.placeholder || ''\"\n [minDate]=\"elem.minDate || ''\"\n [maxDate]=\"elem.maxDate || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-datepicker>\n </div>\n }\n\n @case (\"checkbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-checkbox\n [skeletonLoading]=\"skeletonLoading\"\n\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [indeterminate]=\"!!elem.indeterminate\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-checkbox>\n </div>\n }\n\n @case (\"button\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-button\n \n [label]=\"elem.label\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n variant=\"secondary\"\n (clickEv)=\"elem.change ? elem.change(model) : null\"\n ></osl-button>\n </div>\n }\n\n @case (\"fieldset\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <fieldset class=\"osl-fieldset\">\n @if(elem.label) {\n <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\">\n <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n </legend>\n }\n <div class=\"row w-100 osl-fieldset-body\">\n @for(innerElem of elem.rows; track innerElem) {\n @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n }\n }\n </div>\n </fieldset>\n </div>\n }\n\n @case (\"templateRef\"){\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n\n \n </div>\n }\n @case (\"spacer\"){\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <!-- <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container> -->\n\n \n </div>\n }\n\n }\n }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"] }]
|
|
1878
1891
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { elements: [{
|
|
1879
1892
|
type: Input,
|
|
1880
1893
|
args: ['elements']
|
|
@@ -2375,7 +2388,7 @@ class OslFormGrid {
|
|
|
2375
2388
|
return !!col.formElem?.required || !!col.formElem?.requiredIf;
|
|
2376
2389
|
}
|
|
2377
2390
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFormGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2378
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslFormGrid, isStandalone: false, selector: "osl-form-grid", inputs: { columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", canAdd: "canAdd", canDelete: "canDelete", loading: "loading", tableHeight: "tableHeight" }, outputs: { datasourceChange: "datasourceChange", rowAdd: "rowAdd", rowDelete: "rowDelete" }, ngImport: i0, template: "<div class=\"osl-fg-wrapper\">\n\n <div class=\"osl-fg-table-container\" [style.height]=\"tableHeight\">\n <table class=\"osl-fg-table\">\n\n <thead class=\"osl-fg-thead\">\n <tr>\n <!-- Actions column: + add button in header -->\n @if (hasActions) {\n <th class=\"osl-fg-th osl-fg-th--actions\">\n @if (canAdd) {\n <button class=\"osl-grid-icon-btn\" (click)=\"addRow()\" [disabled]=\"loading\" title=\"Add row\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </th>\n }\n @for (col of columns; track col.key) {\n <th class=\"osl-fg-th\" [style.width]=\"col.width\">\n {{ col.displayName }}\n @if (colRequired(col)) {\n <span class=\"osl-fg-th-required\">*</span>\n }\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n\n @if (loading) {\n @for (sk of skeletonRows; track $index) {\n <tr class=\"osl-fg-row osl-fg-row--skeleton\">\n @if (hasActions) {\n <td class=\"osl-fg-td osl-fg-td--actions\">\n <div class=\"osl-fg-skeleton osl-fg-skeleton--sm\"></div>\n </td>\n }\n @for (col of columns; track col.key) {\n <td class=\"osl-fg-td\"><div class=\"osl-fg-skeleton\"></div></td>\n }\n </tr>\n }\n\n } @else if (pagedData.length === 0) {\n <tr>\n <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\" class=\"osl-fg-empty\">\n <div class=\"osl-fg-empty-inner\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\n <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\n <line x1=\"9\" y1=\"9\" x2=\"9\" y2=\"21\"/>\n </svg>\n <p>No rows yet.{{ canAdd ? ' Use + to get started.' : '' }}</p>\n </div>\n </td>\n </tr>\n\n } @else {\n @for (row of pagedData; track $index; let i = $index) {\n <tr class=\"osl-fg-row\">\n\n <!-- Delete button first -->\n @if (hasActions) {\n <td class=\"osl-fg-td osl-fg-td--actions\">\n @if (canDelete) {\n <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"deleteRow(i)\" title=\"Delete\">\n <mat-icon>delete_outline</mat-icon>\n </button>\n <!-- <button class=\"osl-fg-delete-btn\" (click)=\"deleteRow(i)\" title=\"Delete row\">\n <mat-icon>delete_outline</mat-icon>\n </button> -->\n }\n </td>\n }\n\n @for (col of columns; track col.key) {\n <td class=\"osl-fg-td\" [style.width]=\"col.width\">\n @if (col.formElem) {\n <div class=\"osl-fg-cell-form\">\n @switch (col.formElem.elementType) {\n\n @case ('textbox') {\n <osl-input\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [type]=\"col.formElem.inputType || 'text'\"\n [placeholder]=\"col.formElem.placeholder || col.displayName\"\n [mask]=\"col.formElem.mask || ''\"\n [min]=\"col.formElem.min ?? ''\"\n [max]=\"col.formElem.max ?? ''\"\n [minLength]=\"col.formElem.minLength ?? null\"\n [maxLength]=\"col.formElem.maxLength ?? null\"\n [prefixIcon]=\"col.formElem.prefixIcon || ''\"\n [suffixIcon]=\"col.formElem.suffixIcon || ''\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-input>\n }\n\n @case ('textarea') {\n <osl-textarea\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [rows]=\"col.formElem.textareaRows || 3\"\n [placeholder]=\"col.formElem.placeholder || col.displayName\"\n [maxLength]=\"col.formElem.maxLength ?? null\"\n [minLength]=\"col.formElem.minLength ?? null\"\n [characterCounter]=\"!!col.formElem.characterCounter\"\n [resize]=\"col.formElem.resize || 'none'\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-textarea>\n }\n\n @case ('select') {\n <osl-select\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [datasource]=\"col.formElem.datasource || []\"\n [displayField]=\"col.formElem.displayField || ''\"\n [valueField]=\"col.formElem.valueField || ''\"\n [placeholder]=\"col.formElem.selectPlaceholder || col.displayName\"\n [loading]=\"isLoading(row, col.formElem)\"\n [clearable]=\"!!col.formElem.clearable\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-select>\n }\n\n @case ('autocomplete') {\n <osl-autocomplete\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [datasource]=\"col.formElem.datasource || []\"\n [displayField]=\"col.formElem.displayField || ''\"\n [valueField]=\"col.formElem.valueField || ''\"\n [placeholder]=\"col.formElem.autocompletePlaceholder || col.displayName\"\n [loading]=\"isLoading(row, col.formElem)\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-autocomplete>\n }\n\n @case ('radio') {\n <osl-radio\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [datasource]=\"col.formElem.datasource || []\"\n [displayField]=\"col.formElem.displayField || ''\"\n [valueField]=\"col.formElem.valueField || ''\"\n [inline]=\"!!col.formElem.inline\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-radio>\n }\n\n @case ('checkbox') {\n <osl-checkbox\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [indeterminate]=\"!!col.formElem.indeterminate\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-checkbox>\n }\n\n @case ('slide-toggle') {\n <osl-slide-toggle\n [label]=\"''\"\n [disabled]=\"isDisabled(col.formElem)\"\n [labelPosition]=\"col.formElem.labelPosition || 'after'\"\n [trueLabel]=\"col.formElem.trueLabel || ''\"\n [falseLabel]=\"col.formElem.falseLabel || ''\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-slide-toggle>\n }\n\n @case ('datepicker') {\n <osl-datepicker\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [dateType]=\"col.formElem.dateType || 'date'\"\n [placeholder]=\"col.formElem.placeholder || col.displayName\"\n [minDate]=\"col.formElem.minDate || ''\"\n [maxDate]=\"col.formElem.maxDate || ''\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-datepicker>\n }\n\n @case ('file-uploader') {\n <osl-file-upload\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [accept]=\"col.formElem.accept || ''\"\n [multiple]=\"!!col.formElem.multiple\"\n [maxSize]=\"col.formElem.maxFileSize || 0\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-file-upload>\n }\n\n }\n </div>\n } @else {\n <span class=\"osl-fg-cell-text\">{{ row[col.key] ?? '--' }}</span>\n }\n </td>\n }\n\n </tr>\n }\n }\n\n </tbody>\n </table>\n </div>\n\n @if (isPaginated) {\n <div class=\"osl-fg-pagination\">\n\n <span class=\"osl-fg-pagination__info\">\n @if (loading) {\n Loading...\n } @else if (_total > 0) {\n {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} rows\n } @else {\n No rows\n }\n </span>\n\n <div class=\"osl-fg-pagination__controls\">\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\">\u00AB</button>\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\">\u2039 Prev</button>\n\n @for (page of pageNumbers; track $index) {\n @if (page === -1) {\n <span class=\"osl-fg-page-ellipsis\">\u2026</span>\n } @else {\n <button\n class=\"osl-fg-page-btn osl-fg-page-btn--num\"\n [class.osl-fg-page-btn--active]=\"page === currentPage\"\n [disabled]=\"loading\"\n (click)=\"goToPage(page)\">\n {{ page }}\n </button>\n }\n }\n\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\">Next \u203A</button>\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\">\u00BB</button>\n </div>\n\n <div class=\"osl-fg-pagination__size\">\n <select class=\"osl-fg-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\n @for (opt of pageSizeOptions; track opt) {\n <option [value]=\"opt\">{{ opt }} per page</option>\n }\n </select>\n </div>\n\n </div>\n }\n\n</div>\n", styles: [".osl-fg-wrapper{display:flex;flex-direction:column;width:100%;font-size:var(--osl-text-font-size);font-family:inherit;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 8px);overflow:hidden;background:#fff}.osl-fg-table-container{overflow-x:auto;overflow-y:auto;min-height:120px}.osl-fg-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-fg-thead{position:sticky;top:0;z-index:2}.osl-fg-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;text-align:left;border-bottom:2px solid var(--osl-border-color, #e5e7eb);border-right:1px solid var(--osl-border-color, #e5e7eb);white-space:nowrap;vertical-align:middle}.osl-fg-th:last-child{border-right:none}.osl-fg-th--actions{width:44px;min-width:44px;text-align:center;padding:6px}.osl-fg-th-required{color:#ef4444;margin-left:2px;font-size:14px;line-height:1;vertical-align:middle}.osl-fg-row{border-bottom:1px solid #f0f0f0;transition:background .1s}.osl-fg-row:nth-child(odd){background:#f8fafc}.osl-fg-row:nth-child(2n){background:#fff}.osl-fg-row:hover{background:#eef2ff!important}.osl-fg-row:last-child{border-bottom:none}.osl-fg-row--skeleton{pointer-events:none}.osl-fg-td{padding:4px 10px;vertical-align:middle;border-right:1px solid #f0f0f0}.osl-fg-td:last-child{border-right:none}.osl-fg-td--actions{width:44px;min-width:44px;text-align:center;padding:4px 6px}.osl-fg-cell-form{min-width:100px}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field,.osl-fg-cell-form ::ng-deep mat-form-field{width:100%}.osl-fg-cell-form ::ng-deep .mat-mdc-text-field-wrapper{padding-top:0}.osl-fg-cell-text{color:#111827;font-size:var(--osl-text-font-size)}.osl-fg-add-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:6px;background:var(--osl-primary, #6366f1);color:#fff;cursor:pointer;padding:0;box-shadow:0 1px 4px #6366f159;transition:background .15s,box-shadow .15s,transform .1s}.osl-fg-add-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.osl-fg-add-btn:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);box-shadow:0 2px 8px #6366f173;transform:scale(1.05)}.osl-fg-add-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.osl-fg-delete-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid transparent;border-radius:6px;background:transparent;color:#d1d5db;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s}.osl-fg-delete-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-fg-delete-btn:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2}.osl-fg-empty{padding:40px 16px;text-align:center}.osl-fg-empty-inner{display:flex;flex-direction:column;align-items:center;gap:10px;color:#9ca3af}.osl-fg-empty-inner svg{opacity:.4}.osl-fg-empty-inner p{margin:0;font-size:13px}@keyframes osl-fg-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-fg-skeleton{height:36px;border-radius:6px;background:#e5e7eb;animation:osl-fg-pulse 1.4s ease-in-out infinite}.osl-fg-skeleton--sm{height:28px;width:28px;border-radius:4px;margin:0 auto}.osl-fg-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color, #e5e7eb);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-fg-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-fg-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-fg-pagination__size{display:flex;align-items:center;justify-content:flex-end;min-width:120px}.osl-fg-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-fg-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-fg-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-fg-page-btn--nav{font-size:12px;color:#6b7280}.osl-fg-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-fg-page-btn--active{background:var(--osl-primary, #6366f1);border-color:var(--osl-primary, #6366f1);color:#fff;font-weight:600}.osl-fg-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);border-color:var(--osl-primary-hover, #4f46e5)}.osl-fg-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-fg-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-fg-page-size:focus{border-color:var(--osl-primary, #6366f1)}.osl-fg-page-size:disabled{opacity:.4;cursor:not-allowed}.osl-grid-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:transparent;color:#6b7280;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s;margin:0 2px}.osl-grid-icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-grid-icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.osl-grid-icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "skeletonLoading", "maxDate"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }] });
|
|
2391
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslFormGrid, isStandalone: false, selector: "osl-form-grid", inputs: { columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", canAdd: "canAdd", canDelete: "canDelete", loading: "loading", tableHeight: "tableHeight" }, outputs: { datasourceChange: "datasourceChange", rowAdd: "rowAdd", rowDelete: "rowDelete" }, ngImport: i0, template: "<div class=\"osl-fg-wrapper\">\n\n <div class=\"osl-fg-table-container\" [style.height]=\"tableHeight\">\n <table class=\"osl-fg-table\">\n\n <thead class=\"osl-fg-thead\">\n <tr>\n <!-- Actions column: + add button in header -->\n @if (hasActions) {\n <th class=\"osl-fg-th osl-fg-th--actions\">\n @if (canAdd) {\n <button class=\"osl-grid-icon-btn\" (click)=\"addRow()\" [disabled]=\"loading\" title=\"Add row\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </th>\n }\n @for (col of columns; track col.key) {\n <th class=\"osl-fg-th\" [style.width]=\"col.width\">\n {{ col.displayName }}\n @if (colRequired(col)) {\n <span class=\"osl-fg-th-required\">*</span>\n }\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n\n @if (loading) {\n @for (sk of skeletonRows; track $index) {\n <tr class=\"osl-fg-row osl-fg-row--skeleton\">\n @if (hasActions) {\n <td class=\"osl-fg-td osl-fg-td--actions\">\n <div class=\"osl-fg-skeleton osl-fg-skeleton--sm\"></div>\n </td>\n }\n @for (col of columns; track col.key) {\n <td class=\"osl-fg-td\"><div class=\"osl-fg-skeleton\"></div></td>\n }\n </tr>\n }\n\n } @else if (pagedData.length === 0) {\n <tr>\n <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\" class=\"osl-fg-empty\">\n <div class=\"osl-fg-empty-inner\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\n <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\n <line x1=\"9\" y1=\"9\" x2=\"9\" y2=\"21\"/>\n </svg>\n <p>No rows yet.{{ canAdd ? ' Use + to get started.' : '' }}</p>\n </div>\n </td>\n </tr>\n\n } @else {\n @for (row of pagedData; track $index; let i = $index) {\n <tr class=\"osl-fg-row\">\n\n <!-- Delete button first -->\n @if (hasActions) {\n <td class=\"osl-fg-td osl-fg-td--actions\">\n @if (canDelete) {\n <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"deleteRow(i)\" title=\"Delete\">\n <mat-icon>delete_outline</mat-icon>\n </button>\n <!-- <button class=\"osl-fg-delete-btn\" (click)=\"deleteRow(i)\" title=\"Delete row\">\n <mat-icon>delete_outline</mat-icon>\n </button> -->\n }\n </td>\n }\n\n @for (col of columns; track col.key) {\n <td class=\"osl-fg-td\" [style.width]=\"col.width\">\n @if (col.formElem) {\n <div class=\"osl-fg-cell-form\">\n @switch (col.formElem.elementType) {\n\n @case ('textbox') {\n <osl-input\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [type]=\"col.formElem.inputType || 'text'\"\n [placeholder]=\"col.formElem.placeholder || col.displayName\"\n [mask]=\"col.formElem.mask || ''\"\n [min]=\"col.formElem.min ?? ''\"\n [max]=\"col.formElem.max ?? ''\"\n [minLength]=\"col.formElem.minLength ?? null\"\n [maxLength]=\"col.formElem.maxLength ?? null\"\n [prefixIcon]=\"col.formElem.prefixIcon || ''\"\n [suffixIcon]=\"col.formElem.suffixIcon || ''\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-input>\n }\n\n @case ('textarea') {\n <osl-textarea\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [rows]=\"col.formElem.textareaRows || 3\"\n [placeholder]=\"col.formElem.placeholder || col.displayName\"\n [maxLength]=\"col.formElem.maxLength ?? null\"\n [minLength]=\"col.formElem.minLength ?? null\"\n [characterCounter]=\"!!col.formElem.characterCounter\"\n [resize]=\"col.formElem.resize || 'none'\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-textarea>\n }\n\n @case ('select') {\n <osl-select\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [datasource]=\"col.formElem.datasource || []\"\n [displayField]=\"col.formElem.displayField || ''\"\n [valueField]=\"col.formElem.valueField || ''\"\n [placeholder]=\"col.formElem.selectPlaceholder || col.displayName\"\n [loading]=\"isLoading(row, col.formElem)\"\n [clearable]=\"!!col.formElem.clearable\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-select>\n }\n\n @case ('autocomplete') {\n <osl-autocomplete\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [datasource]=\"col.formElem.datasource || []\"\n [displayField]=\"col.formElem.displayField || ''\"\n [valueField]=\"col.formElem.valueField || ''\"\n [placeholder]=\"col.formElem.autocompletePlaceholder || col.displayName\"\n [loading]=\"isLoading(row, col.formElem)\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-autocomplete>\n }\n\n @case ('radio') {\n <osl-radio\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [datasource]=\"col.formElem.datasource || []\"\n [displayField]=\"col.formElem.displayField || ''\"\n [valueField]=\"col.formElem.valueField || ''\"\n [inline]=\"!!col.formElem.inline\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-radio>\n }\n\n @case ('checkbox') {\n <osl-checkbox\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [indeterminate]=\"!!col.formElem.indeterminate\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-checkbox>\n }\n\n @case ('slide-toggle') {\n <osl-slide-toggle\n [label]=\"''\"\n [disabled]=\"isDisabled(col.formElem)\"\n [labelPosition]=\"col.formElem.labelPosition || 'after'\"\n [trueLabel]=\"col.formElem.trueLabel || ''\"\n [falseLabel]=\"col.formElem.falseLabel || ''\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-slide-toggle>\n }\n\n @case ('datepicker') {\n <osl-datepicker\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [dateType]=\"col.formElem.dateType || 'date'\"\n [placeholder]=\"col.formElem.placeholder || col.displayName\"\n [minDate]=\"col.formElem.minDate || ''\"\n [maxDate]=\"col.formElem.maxDate || ''\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-datepicker>\n }\n\n @case ('file-uploader') {\n <osl-file-upload\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [accept]=\"col.formElem.accept || ''\"\n [multiple]=\"!!col.formElem.multiple\"\n [maxSize]=\"col.formElem.maxFileSize || 0\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-file-upload>\n }\n\n }\n </div>\n } @else {\n <span class=\"osl-fg-cell-text\">{{ row[col.key] ?? '--' }}</span>\n }\n </td>\n }\n\n </tr>\n }\n }\n\n </tbody>\n </table>\n </div>\n\n @if (isPaginated) {\n <div class=\"osl-fg-pagination\">\n\n <span class=\"osl-fg-pagination__info\">\n @if (loading) {\n Loading...\n } @else if (_total > 0) {\n {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} rows\n } @else {\n No rows\n }\n </span>\n\n <div class=\"osl-fg-pagination__controls\">\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\">\u00AB</button>\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\">\u2039 Prev</button>\n\n @for (page of pageNumbers; track $index) {\n @if (page === -1) {\n <span class=\"osl-fg-page-ellipsis\">\u2026</span>\n } @else {\n <button\n class=\"osl-fg-page-btn osl-fg-page-btn--num\"\n [class.osl-fg-page-btn--active]=\"page === currentPage\"\n [disabled]=\"loading\"\n (click)=\"goToPage(page)\">\n {{ page }}\n </button>\n }\n }\n\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\">Next \u203A</button>\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\">\u00BB</button>\n </div>\n\n <div class=\"osl-fg-pagination__size\">\n <select class=\"osl-fg-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\n @for (opt of pageSizeOptions; track opt) {\n <option [value]=\"opt\">{{ opt }} per page</option>\n }\n </select>\n </div>\n\n </div>\n }\n\n</div>\n", styles: [".osl-fg-wrapper{display:flex;flex-direction:column;width:100%;font-size:var(--osl-text-font-size);font-family:inherit;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 8px);overflow:hidden;background:#fff}.osl-fg-table-container{overflow-x:auto;overflow-y:auto;min-height:120px}.osl-fg-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-fg-thead{position:sticky;top:0;z-index:2}.osl-fg-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;text-align:left;border-bottom:2px solid var(--osl-border-color, #e5e7eb);border-right:1px solid var(--osl-border-color, #e5e7eb);white-space:nowrap;vertical-align:middle}.osl-fg-th:last-child{border-right:none}.osl-fg-th--actions{width:44px;min-width:44px;text-align:center;padding:6px}.osl-fg-th-required{color:#ef4444;margin-left:2px;font-size:14px;line-height:1;vertical-align:middle}.osl-fg-row{border-bottom:1px solid #f0f0f0;transition:background .1s}.osl-fg-row:nth-child(odd){background:#f8fafc}.osl-fg-row:nth-child(2n){background:#fff}.osl-fg-row:hover{background:#eef2ff!important}.osl-fg-row:last-child{border-bottom:none}.osl-fg-row--skeleton{pointer-events:none}.osl-fg-td{padding:4px 10px;vertical-align:middle;border-right:1px solid #f0f0f0}.osl-fg-td:last-child{border-right:none}.osl-fg-td--actions{width:44px;min-width:44px;text-align:center;padding:4px 6px}.osl-fg-cell-form{min-width:100px}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field,.osl-fg-cell-form ::ng-deep mat-form-field{width:100%}.osl-fg-cell-form ::ng-deep .mat-mdc-text-field-wrapper{padding-top:0}.osl-fg-cell-text{color:#111827;font-size:var(--osl-text-font-size)}.osl-fg-add-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:6px;background:var(--osl-primary, #6366f1);color:#fff;cursor:pointer;padding:0;box-shadow:0 1px 4px #6366f159;transition:background .15s,box-shadow .15s,transform .1s}.osl-fg-add-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.osl-fg-add-btn:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);box-shadow:0 2px 8px #6366f173;transform:scale(1.05)}.osl-fg-add-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.osl-fg-delete-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid transparent;border-radius:6px;background:transparent;color:#d1d5db;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s}.osl-fg-delete-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-fg-delete-btn:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2}.osl-fg-empty{padding:40px 16px;text-align:center}.osl-fg-empty-inner{display:flex;flex-direction:column;align-items:center;gap:10px;color:#9ca3af}.osl-fg-empty-inner svg{opacity:.4}.osl-fg-empty-inner p{margin:0;font-size:13px}@keyframes osl-fg-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-fg-skeleton{height:36px;border-radius:6px;background:#e5e7eb;animation:osl-fg-pulse 1.4s ease-in-out infinite}.osl-fg-skeleton--sm{height:28px;width:28px;border-radius:4px;margin:0 auto}.osl-fg-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color, #e5e7eb);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-fg-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-fg-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-fg-pagination__size{display:flex;align-items:center;justify-content:flex-end;min-width:120px}.osl-fg-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-fg-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-fg-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-fg-page-btn--nav{font-size:12px;color:#6b7280}.osl-fg-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-fg-page-btn--active{background:var(--osl-primary, #6366f1);border-color:var(--osl-primary, #6366f1);color:#fff;font-weight:600}.osl-fg-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);border-color:var(--osl-primary-hover, #4f46e5)}.osl-fg-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-fg-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-fg-page-size:focus{border-color:var(--osl-primary, #6366f1)}.osl-fg-page-size:disabled{opacity:.4;cursor:not-allowed}.osl-grid-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:transparent;color:#6b7280;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s;margin:0 2px}.osl-grid-icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-grid-icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.osl-grid-icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading", "isLister"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "skeletonLoading", "maxDate"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading"], outputs: ["modelChange", "changeEv"] }] });
|
|
2379
2392
|
}
|
|
2380
2393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFormGrid, decorators: [{
|
|
2381
2394
|
type: Component,
|