@firestitch/list 9.12.0 → 9.12.3

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.
Files changed (28) hide show
  1. package/app/components/body/row/menu-action/menu-action.component.d.ts +2 -2
  2. package/app/interfaces/listconfig.interface.d.ts +12 -5
  3. package/app/models/row-action.model.d.ts +2 -4
  4. package/bundles/firestitch-list.umd.js +12 -15
  5. package/bundles/firestitch-list.umd.js.map +1 -1
  6. package/bundles/firestitch-list.umd.min.js +1 -1
  7. package/bundles/firestitch-list.umd.min.js.map +1 -1
  8. package/esm2015/app/classes/list-controller.js +2 -2
  9. package/esm2015/app/components/body/row/actions/actions.component.js +2 -2
  10. package/esm2015/app/components/body/row/inline-action/inline-action.component.js +2 -2
  11. package/esm2015/app/components/body/row/menu-action/menu-action.component.js +3 -7
  12. package/esm2015/app/interfaces/listconfig.interface.js +1 -1
  13. package/esm2015/app/models/row-action.model.js +8 -7
  14. package/esm2015/public_api.js +1 -1
  15. package/esm5/app/classes/list-controller.js +2 -2
  16. package/esm5/app/components/body/row/actions/actions.component.js +2 -2
  17. package/esm5/app/components/body/row/inline-action/inline-action.component.js +2 -2
  18. package/esm5/app/components/body/row/menu-action/menu-action.component.js +3 -7
  19. package/esm5/app/interfaces/listconfig.interface.js +1 -1
  20. package/esm5/app/models/row-action.model.js +9 -8
  21. package/esm5/public_api.js +1 -1
  22. package/fesm2015/firestitch-list.js +12 -15
  23. package/fesm2015/firestitch-list.js.map +1 -1
  24. package/fesm5/firestitch-list.js +12 -15
  25. package/fesm5/firestitch-list.js.map +1 -1
  26. package/firestitch-list.metadata.json +1 -1
  27. package/package.json +1 -1
  28. package/public_api.d.ts +1 -1
@@ -358,13 +358,13 @@ var RowAction = /** @class */ (function (_super) {
358
358
  };
359
359
  this._linkFn = value.link;
360
360
  if (value.file) {
361
- if (value.file.select) {
362
- this.fileUploadFn = function (selection, row, index) {
363
- value.file.select(selection, row, index);
361
+ this.fileConfig = __assign({}, value.file);
362
+ if (this.fileConfig.select) {
363
+ var selectFn_1 = this.fileConfig.select;
364
+ this.fileConfig.select = function (selection, row, index) {
365
+ selectFn_1(selection, row, index);
364
366
  };
365
367
  }
366
- this.fileUploadErrorFn = value.file.error;
367
- this.fileMultiple = value.file.multiple;
368
368
  }
369
369
  if (typeof value.label === 'function') {
370
370
  this._labelFn = value.label;
@@ -385,7 +385,8 @@ var RowAction = /** @class */ (function (_super) {
385
385
  this.rowActions.forEach(function (action) {
386
386
  action.checkShowStatus(row, index);
387
387
  });
388
- this.isShown = this.rowActions.some(function (action) { return action.isShown; });
388
+ var groupVisible = !this.show || this.show(row, index);
389
+ this.isShown = groupVisible && this.rowActions.some(function (action) { return action.isShown; });
389
390
  }
390
391
  else if (this.show) {
391
392
  this.isShown = this.show(row, index);
@@ -3444,7 +3445,7 @@ var List = /** @class */ (function (_super) {
3444
3445
  this.selection.selectedRowsIntersection(this.dataController.visibleRowsData);
3445
3446
  }
3446
3447
  if (((_c = this.emptyState) === null || _c === void 0 ? void 0 : _c.validate) && this.emptyStateTemplate) {
3447
- this.emptyStateEnabled = this.emptyState.validate(query, cloneDeep(response.data));
3448
+ this.emptyStateEnabled = this.emptyState.validate(query, cloneDeep(this.dataController.visibleRowsData));
3448
3449
  }
3449
3450
  if (this.afterFetchFn) {
3450
3451
  this.afterFetchFn(query, this.dataController.visibleRowsData);
@@ -5678,7 +5679,7 @@ var FsRowActionsComponent = /** @class */ (function () {
5678
5679
  FsRowActionsComponent = __decorate([
5679
5680
  Component({
5680
5681
  selector: 'fs-list-row-actions',
5681
- template: "<ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n <fs-list-row-inline-action class=\"row-inline-action row-inline-action-{{action.type}}\"\n [action]=\"action\"\n [ngClass]=\"{'mobile-hide': action.menu === undefined}\"\n (clicked)=\"actionClick(action, row, $event)\"\n (fileSelect)=\"action.fileUploadFn($event, row, index)\">\n </fs-list-row-inline-action>\n </ng-container>\n</ng-container>\n\n<!-- Menu -->\n<fs-menu class=\"row-menu-action\"\n *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n (click)=\"clickOnTrigger($event)\"\n #menuRef\n>\n <!-- Case when we have usual menu actions -->\n <ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n <ng-template class=\"hidden-mobile-menu-action\"\n fs-menu-item\n [link]=\"action.routerLink?.link\"\n [queryParams]=\"action.routerLink?.queryParams\"\n [target]=\"action.routerLink?.target\"\n [hidden]=\"action.menu !== undefined && !action.isShown\">\n <fs-list-row-menu-action\n [icon]=\"action.icon\"\n [label]=\"action.label\"\n [file]=\"!!action.fileUploadFn\"\n [fileMultiple]=\"action.fileMultiple\"\n (fileSelect)=\"action.fileUploadFn($event, row, index)\"\n (fileError)=\"action.fileUploadErrorFn && action.fileUploadErrorFn($event)\">\n </fs-list-row-menu-action>\n </ng-template>\n </ng-container>\n\n <ng-container *ngFor=\"let action of menuRowActions; trackBy: trackByFn\">\n <ng-container *ngIf=\"action.isGroup else simpleMenuItem\">\n <fs-menu-group [label]=\"action.label\">\n <ng-container *ngFor=\"let subAction of action.rowActions\">\n <ng-template fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [target]=\"subAction.routerLink?.target\"\n [hidden]=\"!subAction.isShown\"\n (click)=\"actionClick(subAction, row, $event, menuRef);\">\n <fs-list-row-menu-action\n [icon]=\"subAction.icon\"\n [label]=\"subAction.label\"\n [file]=\"!!subAction.fileUploadFn\"\n [fileMultiple]=\"subAction.fileMultiple\"\n (fileSelect)=\"subAction.fileUploadFn($event, row, index)\"\n (fileError)=\"subAction.fileUploadErrorFn && subAction.fileUploadErrorFn($event)\">\n </fs-list-row-menu-action>\n </ng-template>\n </ng-container>\n </fs-menu-group>\n </ng-container>\n <ng-template #simpleMenuItem>\n <ng-template fs-menu-item\n [link]=\"action.routerLink?.link\"\n [queryParams]=\"action.routerLink?.queryParams\"\n [target]=\"action.routerLink?.target\"\n [hidden]=\"!action.isShown\"\n (click)=\"actionClick(action, row, $event, menuRef);\">\n <fs-list-row-menu-action\n [icon]=\"action.icon\"\n [label]=\"action.label\"\n [file]=\"!!action.fileUploadFn\"\n [fileMultiple]=\"action.fileMultiple\"\n (fileSelect)=\"action.fileUploadFn($event, row, index)\"\n (fileError)=\"action.fileUploadErrorFn && action.fileUploadErrorFn($event)\">\n </fs-list-row-menu-action>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Case when we have restore mode enabled and must hide menu actions -->\n <ng-container *ngIf=\"restoreMode && restoreAction\">\n <ng-template fs-menu-item (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n <mat-icon *ngIf=\"restoreAction.icon\">{{restoreAction.icon}}</mat-icon>\n {{restoreAction.label}}\n </ng-template>\n </ng-container>\n</fs-menu>\n",
5682
+ template: "<ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n <fs-list-row-inline-action class=\"row-inline-action row-inline-action-{{action.type}}\"\n [action]=\"action\"\n [ngClass]=\"{'mobile-hide': action.menu === undefined}\"\n (clicked)=\"actionClick(action, row, $event)\"\n (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n </fs-list-row-inline-action>\n </ng-container>\n</ng-container>\n\n<!-- Menu -->\n<fs-menu class=\"row-menu-action\"\n *ngIf=\"menuRowActions.length || (restoreMode && restoreAction)\"\n (click)=\"clickOnTrigger($event)\"\n #menuRef\n>\n <!-- Case when we have usual menu actions -->\n <ng-container *ngIf=\"!restoreMode || (restoreMode && !restoreAction)\">\n <ng-container *ngFor=\"let action of inlineRowActions; trackBy: trackByFn\">\n <ng-template class=\"hidden-mobile-menu-action\"\n fs-menu-item\n [link]=\"action.routerLink?.link\"\n [queryParams]=\"action.routerLink?.queryParams\"\n [target]=\"action.routerLink?.target\"\n [hidden]=\"action.menu !== undefined && !action.isShown\">\n <fs-list-row-menu-action\n [icon]=\"action.icon\"\n [label]=\"action.label\"\n [file]=\"action.fileConfig\"\n (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n </fs-list-row-menu-action>\n </ng-template>\n </ng-container>\n\n <ng-container *ngFor=\"let action of menuRowActions; trackBy: trackByFn\">\n <ng-container *ngIf=\"action.isGroup else simpleMenuItem\">\n <fs-menu-group [label]=\"action.label\">\n <ng-container *ngFor=\"let subAction of action.rowActions\">\n <ng-template fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [target]=\"subAction.routerLink?.target\"\n [hidden]=\"!subAction.isShown\"\n (click)=\"actionClick(subAction, row, $event, menuRef);\">\n <fs-list-row-menu-action\n [icon]=\"subAction.icon\"\n [label]=\"subAction.label\"\n [file]=\"subAction.fileConfig\"\n (fileSelect)=\"subAction.fileConfig.select($event, row, index)\"\n (fileError)=\"subAction.fileConfig.error && subAction.fileConfig.error($event)\">\n </fs-list-row-menu-action>\n </ng-template>\n </ng-container>\n </fs-menu-group>\n </ng-container>\n <ng-template #simpleMenuItem>\n <ng-template fs-menu-item\n [link]=\"action.routerLink?.link\"\n [queryParams]=\"action.routerLink?.queryParams\"\n [target]=\"action.routerLink?.target\"\n [hidden]=\"!action.isShown\"\n (click)=\"actionClick(action, row, $event, menuRef);\">\n <fs-list-row-menu-action\n [icon]=\"action.icon\"\n [label]=\"action.label\"\n [file]=\"action.fileConfig\"\n (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n </fs-list-row-menu-action>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- Case when we have restore mode enabled and must hide menu actions -->\n <ng-container *ngIf=\"restoreMode && restoreAction\">\n <ng-template fs-menu-item (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n <mat-icon *ngIf=\"restoreAction.icon\">{{restoreAction.icon}}</mat-icon>\n {{restoreAction.label}}\n </ng-template>\n </ng-container>\n</fs-menu>\n",
5682
5683
  changeDetection: ChangeDetectionStrategy.OnPush
5683
5684
  }),
5684
5685
  __metadata("design:paramtypes", [FsPrompt])
@@ -5716,7 +5717,7 @@ var FsRowInlineActionComponent = /** @class */ (function () {
5716
5717
  FsRowInlineActionComponent = __decorate([
5717
5718
  Component({
5718
5719
  selector: 'fs-list-row-inline-action',
5719
- template: "<ng-container *ngIf=\"action.isShown\" [ngSwitch]=\"action.type\">\n <!-- Basic button -->\n <ng-container *ngSwitchCase=\"'basic'\">\n <ng-container *ngIf=\"!action.routerLink; else link\">\n <button type=\"button\"\n mat-button\n (click)=\"actionClick($event)\"\n [ngClass]=\"action.classArray\"\n >\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a mat-button\n [routerLink]=\"action.routerLink.link\"\n [queryParams]=\"action.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n\n <!-- Raised button -->\n <ng-container *ngSwitchCase=\"'raised'\">\n <ng-container *ngIf=\"!action.routerLink; else link\">\n <button type=\"button\"\n mat-raised-button\n (click)=\"actionClick($event)\"\n [ngClass]=\"action.classArray\"\n >\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a mat-raised-button\n [routerLink]=\"action.routerLink.link\"\n [queryParams]=\"action.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n\n <!-- Icon button -->\n <ng-container *ngSwitchCase=\"'icon'\">\n <ng-container *ngIf=\"!action.routerLink; else link\">\n <button type=\"button\"\n mat-icon-button\n (click)=\"actionClick($event)\"\n [ngClass]=\"action.classArray\"\n >\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a mat-icon-button\n [routerLink]=\"action.routerLink.link\"\n [queryParams]=\"action.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n\n <!-- Fab button -->\n <ng-container *ngSwitchCase=\"'fab'\">\n <ng-container *ngIf=\"!action.routerLink; else link\">\n <button type=\"button\"\n mat-fab\n (click)=\"actionClick($event)\"\n [ngClass]=\"action.classArray\"\n >\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a mat-fab\n [routerLink]=\"action.routerLink.link\"\n [queryParams]=\"action.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n\n <!-- Mini Fab button -->\n <ng-container *ngSwitchCase=\"'mini-fab'\">\n <ng-container *ngIf=\"!action.routerLink; else link\">\n <button type=\"button\"\n mat-mini-fab\n (click)=\"actionClick($event)\"\n [ngClass]=\"action.classArray\"\n >\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a mat-mini-fab\n [routerLink]=\"action.routerLink.link\"\n [queryParams]=\"action.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n\n <ng-template #buttonContent>\n <ng-container *ngIf=\"!action.fileUploadFn else uploadFileBtn\">\n <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon>\n {{action.label}}\n </ng-container>\n\n <ng-template #uploadFileBtn>\n <fs-file\n class=\"action-button\"\n [multiple]=\"action.fileMultiple\"\n (select)=\"fileSelected($event)\"\n (error)=\"action.fileUploadErrorFn && action.fileUploadErrorFn($event)\">\n <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon>\n {{action.label}}\n </fs-file>\n </ng-template>\n </ng-template>\n</ng-container>\n",
5720
+ template: "<ng-container *ngIf=\"action.isShown\" [ngSwitch]=\"action.type\">\n <!-- Basic button -->\n <ng-container *ngSwitchCase=\"'basic'\">\n <ng-container *ngIf=\"!action.routerLink; else link\">\n <button type=\"button\"\n mat-button\n (click)=\"actionClick($event)\"\n [ngClass]=\"action.classArray\"\n >\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a mat-button\n [routerLink]=\"action.routerLink.link\"\n [queryParams]=\"action.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n\n <!-- Raised button -->\n <ng-container *ngSwitchCase=\"'raised'\">\n <ng-container *ngIf=\"!action.routerLink; else link\">\n <button type=\"button\"\n mat-raised-button\n (click)=\"actionClick($event)\"\n [ngClass]=\"action.classArray\"\n >\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a mat-raised-button\n [routerLink]=\"action.routerLink.link\"\n [queryParams]=\"action.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n\n <!-- Icon button -->\n <ng-container *ngSwitchCase=\"'icon'\">\n <ng-container *ngIf=\"!action.routerLink; else link\">\n <button type=\"button\"\n mat-icon-button\n (click)=\"actionClick($event)\"\n [ngClass]=\"action.classArray\"\n >\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a mat-icon-button\n [routerLink]=\"action.routerLink.link\"\n [queryParams]=\"action.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n\n <!-- Fab button -->\n <ng-container *ngSwitchCase=\"'fab'\">\n <ng-container *ngIf=\"!action.routerLink; else link\">\n <button type=\"button\"\n mat-fab\n (click)=\"actionClick($event)\"\n [ngClass]=\"action.classArray\"\n >\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a mat-fab\n [routerLink]=\"action.routerLink.link\"\n [queryParams]=\"action.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n\n <!-- Mini Fab button -->\n <ng-container *ngSwitchCase=\"'mini-fab'\">\n <ng-container *ngIf=\"!action.routerLink; else link\">\n <button type=\"button\"\n mat-mini-fab\n (click)=\"actionClick($event)\"\n [ngClass]=\"action.classArray\"\n >\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a mat-mini-fab\n [routerLink]=\"action.routerLink.link\"\n [queryParams]=\"action.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n\n <ng-template #buttonContent>\n <ng-container *ngIf=\"!action.fileConfig else uploadFileBtn\">\n <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon>\n {{action.label}}\n </ng-container>\n\n <ng-template #uploadFileBtn>\n <fs-file\n class=\"action-button\"\n [accept]=\"action.fileConfig.accept || '*'\"\n [multiple]=\"action.fileConfig.multiple\"\n [minWidth]=\"action.fileConfig.minWidth\"\n [minHeight]=\"action.fileConfig.minHeight\"\n [imageWidth]=\"action.fileConfig.maxWidth\"\n [imageHeight]=\"action.fileConfig.maxHeight\"\n (select)=\"fileSelected($event)\"\n (error)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon>\n {{action.label}}\n </fs-file>\n </ng-template>\n </ng-template>\n</ng-container>\n",
5720
5721
  changeDetection: ChangeDetectionStrategy.OnPush
5721
5722
  }),
5722
5723
  __metadata("design:paramtypes", [FsPrompt])
@@ -5739,12 +5740,8 @@ var FsRowMenuActionComponent = /** @class */ (function () {
5739
5740
  ], FsRowMenuActionComponent.prototype, "label", void 0);
5740
5741
  __decorate([
5741
5742
  Input(),
5742
- __metadata("design:type", Boolean)
5743
+ __metadata("design:type", Object)
5743
5744
  ], FsRowMenuActionComponent.prototype, "file", void 0);
5744
- __decorate([
5745
- Input(),
5746
- __metadata("design:type", Boolean)
5747
- ], FsRowMenuActionComponent.prototype, "fileMultiple", void 0);
5748
5745
  __decorate([
5749
5746
  Output(),
5750
5747
  __metadata("design:type", Object)
@@ -5756,7 +5753,7 @@ var FsRowMenuActionComponent = /** @class */ (function () {
5756
5753
  FsRowMenuActionComponent = __decorate([
5757
5754
  Component({
5758
5755
  selector: 'fs-list-row-menu-action',
5759
- template: "<ng-container *ngIf=\"!file else withFile\">\n <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n {{label}}\n</ng-container>\n\n<ng-template #withFile>\n <fs-file\n class=\"action-button\"\n [multiple]=\"fileMultiple\"\n (select)=\"fileSelect.emit($event)\"\n (error)=\"fileError.emit($event)\">\n <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n {{label}}\n </fs-file>\n</ng-template>\n",
5756
+ template: "<ng-container *ngIf=\"!file else withFile\">\n <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n {{label}}\n</ng-container>\n\n<ng-template #withFile>\n <fs-file\n class=\"action-button\"\n [accept]=\"file.accept || '*'\"\n [multiple]=\"file.multiple\"\n [minWidth]=\"file.minWidth\"\n [minHeight]=\"file.minHeight\"\n [imageWidth]=\"file.maxWidth\"\n [imageHeight]=\"file.maxHeight\"\n (select)=\"fileSelect.emit($event)\"\n (error)=\"fileError.emit($event)\">\n <mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\n {{label}}\n </fs-file>\n</ng-template>\n",
5760
5757
  changeDetection: ChangeDetectionStrategy.OnPush
5761
5758
  })
5762
5759
  ], FsRowMenuActionComponent);