npm - @wavemaker-ai/app-ng-runtime - Versions diffs - 1.0.0-rc.314 → 1.0.0-rc.319 - Mend

@wavemaker-ai/app-ng-runtime 1.0.0-rc.314 → 1.0.0-rc.319

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 (106) hide show

package/components/data/list/index.d.ts CHANGED Viewed

@@ -76,6 +76,7 @@ declare class ListComponent extends StylableComponent implements OnInit, AfterVi
     selectfirstitem: boolean;
     orderby: string;
     loadingicon: string;
+    loadingiconurl: string;
     paginationclass: string;
     ondemandmessage: string;
     loadingdatamsg: string;
@@ -104,6 +105,7 @@ declare class ListComponent extends StylableComponent implements OnInit, AfterVi
     title: string;
     subheading: string;
     iconclass: string;
+    iconurl: string;
     listclass: any;
     statehandler: any;
     currentIndex: number;

package/components/data/table/bundles/index.umd.js CHANGED Viewed

@@ -58,6 +58,7 @@
             ['gridclass', { value: 'table-hover', ...i4.PROP_STRING }],
             ['gridfirstrowselect', i4.PROP_BOOLEAN],
             ['iconclass', i4.PROP_STRING],
+            ['iconurl', i4.PROP_STRING],
             ['insertmessage', { value: 'Record added successfully', ...i4.PROP_STRING }],
             ['isdynamictable', i4.PROP_BOOLEAN], // internal property to determine dynamic table
             ['isrowexpansionenabled', i4.PROP_BOOLEAN],
@@ -2515,14 +2516,14 @@
         static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: TableComponent, isStandalone: true, selector: "[wmTable]", host: { listeners: { "keypress": "onKeyPress($event)" } }, providers: [
                 i4.provideAs(TableComponent, i1.NG_VALUE_ACCESSOR, true),
                 i4.provideAsWidgetRef(TableComponent)
-            ], queries: [{ propertyName: "rowExpansionTmpl", first: true, predicate: ["rowExpansionTmpl"], descendants: true }, { propertyName: "rowActionTmpl", predicate: ["rowActionTmpl"], descendants: true }, { propertyName: "filterTmpl", predicate: ["filterTmpl"], descendants: true }, { propertyName: "inlineWidgetTmpl", predicate: ["inlineWidgetTmpl"], descendants: true }, { propertyName: "inlineWidgetNewTmpl", predicate: ["inlineWidgetTmplNew"], descendants: true }, { propertyName: "customExprTmpl", predicate: ["customExprTmpl"], descendants: true }, { propertyName: "rowExpansionActionTmpl", predicate: ["rowExpansionActionTmpl"], descendants: true }], viewQueries: [{ propertyName: "dataNavigator", first: true, predicate: pagination.PaginationComponent, descendants: true, static: true }, { propertyName: "_tableElement", first: true, predicate: ["datagridElement"], descendants: true, static: true }, { propertyName: "rowActionsViewRef", first: true, predicate: ["rowActionsView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "filterViewRef", first: true, predicate: ["multiColumnFilterView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "inlineEditViewRef", first: true, predicate: ["inlineEditView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "inlineEditNewViewRef", first: true, predicate: ["inlineEditNewView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "customExprViewRef", first: true, predicate: ["customExprView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "rowDetailViewRef", first: true, predicate: ["rowDetailView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "rowExpansionActionViewRef", first: true, predicate: ["rowExpansionActionView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "dynamicTableRef", first: true, predicate: ["dynamicTable"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "@if (title || subheading || iconclass || exportOptions.length || _actions.header.length) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        @if (iconclass) {\n          <i class=\"app-icon panel-icon {{iconclass}}\"></i>\n        }\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n      @if (exportOptions.length || _actions.header.length) {\n        <div class=\"panel-actions app-datagrid-actions\">\n          @for (btn of _actions.header; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('actions_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (exportOptions.length) {\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n            dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n          }\n        </div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext)) \">\n  <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext)\">\n    <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n      navigationsize.bind=\"navigationSize\"\n      navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n      boundarylinks.bind=\"boundarylinks\"\n    forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n  </div>\n  @if (_actions.footer.length) {\n    <div class=\"app-datagrid-actions\">\n      @for (btn of _actions.footer; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('actions_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n  <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n  type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n  <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n    shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n  hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n  <ng-container #multiColumnFilterView></ng-container>\n\n  <ng-container #inlineEditView></ng-container>\n\n  <ng-container #inlineEditNewView></ng-container>\n\n  <ng-container #rowActionsView></ng-container>\n\n  <ng-container #rowExpansionActionView></ng-container>\n\n  <ng-container #customExprView></ng-container>\n\n  <ng-container #dynamicTable></ng-container>\n\n  <ng-container #rowDetailView></ng-container>\n\n  <div class=\"dynamic-table-container\"></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: i5.CommonModule }, { kind: "directive", type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: anchor.AnchorComponent, selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: pagination.PaginationComponent, selector: "[wmPagination]", outputs: ["resultEmitter", "maxResultsEmitter"] }, { kind: "component", type: button.ButtonComponent, selector: "button[wmButton]", exportAs: ["wmButton"] }, { kind: "ngmodule", type: i6.BsDropdownModule }, { kind: "directive", type: i6__namespace.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: menu.MenuComponent, selector: "[wmMenu]" }] }); }
+            ], queries: [{ propertyName: "rowExpansionTmpl", first: true, predicate: ["rowExpansionTmpl"], descendants: true }, { propertyName: "rowActionTmpl", predicate: ["rowActionTmpl"], descendants: true }, { propertyName: "filterTmpl", predicate: ["filterTmpl"], descendants: true }, { propertyName: "inlineWidgetTmpl", predicate: ["inlineWidgetTmpl"], descendants: true }, { propertyName: "inlineWidgetNewTmpl", predicate: ["inlineWidgetTmplNew"], descendants: true }, { propertyName: "customExprTmpl", predicate: ["customExprTmpl"], descendants: true }, { propertyName: "rowExpansionActionTmpl", predicate: ["rowExpansionActionTmpl"], descendants: true }], viewQueries: [{ propertyName: "dataNavigator", first: true, predicate: pagination.PaginationComponent, descendants: true, static: true }, { propertyName: "_tableElement", first: true, predicate: ["datagridElement"], descendants: true, static: true }, { propertyName: "rowActionsViewRef", first: true, predicate: ["rowActionsView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "filterViewRef", first: true, predicate: ["multiColumnFilterView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "inlineEditViewRef", first: true, predicate: ["inlineEditView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "inlineEditNewViewRef", first: true, predicate: ["inlineEditNewView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "customExprViewRef", first: true, predicate: ["customExprView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "rowDetailViewRef", first: true, predicate: ["rowDetailView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "rowExpansionActionViewRef", first: true, predicate: ["rowExpansionActionView"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "dynamicTableRef", first: true, predicate: ["dynamicTable"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "@if (title || subheading || iconclass || iconurl || exportOptions.length || _actions.header.length) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        @if (iconclass || iconurl) {\n          <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [iconClasses]=\"iconurl ? 'panel-image-icon' : 'panel-icon'\" alt=\"Table icon\"></wm-app-icon>\n        }\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n      @if (exportOptions.length || _actions.header.length) {\n        <div class=\"panel-actions app-datagrid-actions\">\n          @for (btn of _actions.header; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('actions_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (exportOptions.length) {\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n            dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n          }\n        </div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext)) \">\n  <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext)\">\n    <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n      navigationsize.bind=\"navigationSize\"\n      navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n      boundarylinks.bind=\"boundarylinks\"\n    forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n  </div>\n  @if (_actions.footer.length) {\n    <div class=\"app-datagrid-actions\">\n      @for (btn of _actions.footer; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('actions_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n  <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n  type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n  <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n    shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n  hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n  <ng-container #multiColumnFilterView></ng-container>\n\n  <ng-container #inlineEditView></ng-container>\n\n  <ng-container #inlineEditNewView></ng-container>\n\n  <ng-container #rowActionsView></ng-container>\n\n  <ng-container #rowExpansionActionView></ng-container>\n\n  <ng-container #customExprView></ng-container>\n\n  <ng-container #dynamicTable></ng-container>\n\n  <ng-container #rowDetailView></ng-container>\n\n  <div class=\"dynamic-table-container\"></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: i5.CommonModule }, { kind: "directive", type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: anchor.AnchorComponent, selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: pagination.PaginationComponent, selector: "[wmPagination]", outputs: ["resultEmitter", "maxResultsEmitter"] }, { kind: "component", type: button.ButtonComponent, selector: "button[wmButton]", exportAs: ["wmButton"] }, { kind: "ngmodule", type: i6.BsDropdownModule }, { kind: "directive", type: i6__namespace.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: menu.MenuComponent, selector: "[wmMenu]" }, { kind: "component", type: i4.WmAppIconComponent, selector: "wm-app-icon", inputs: ["iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }] }); }
     }
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: TableComponent, decorators: [{
                 type: i0.Component,
-                args: [{ standalone: true, imports: [i5.CommonModule, anchor.AnchorComponent, pagination.PaginationComponent, button.ButtonComponent, i6.BsDropdownModule, menu.MenuComponent], selector: '[wmTable]', providers: [
+                args: [{ standalone: true, imports: [i5.CommonModule, anchor.AnchorComponent, pagination.PaginationComponent, button.ButtonComponent, i6.BsDropdownModule, menu.MenuComponent, i4.WmAppIconComponent], selector: '[wmTable]', providers: [
                             i4.provideAs(TableComponent, i1.NG_VALUE_ACCESSOR, true),
                             i4.provideAsWidgetRef(TableComponent)
-                        ], template: "@if (title || subheading || iconclass || exportOptions.length || _actions.header.length) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        @if (iconclass) {\n          <i class=\"app-icon panel-icon {{iconclass}}\"></i>\n        }\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n      @if (exportOptions.length || _actions.header.length) {\n        <div class=\"panel-actions app-datagrid-actions\">\n          @for (btn of _actions.header; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('actions_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (exportOptions.length) {\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n            dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n          }\n        </div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext)) \">\n  <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext)\">\n    <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n      navigationsize.bind=\"navigationSize\"\n      navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n      boundarylinks.bind=\"boundarylinks\"\n    forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n  </div>\n  @if (_actions.footer.length) {\n    <div class=\"app-datagrid-actions\">\n      @for (btn of _actions.footer; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('actions_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n  <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n  type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n  <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n    shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n  hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n  <ng-container #multiColumnFilterView></ng-container>\n\n  <ng-container #inlineEditView></ng-container>\n\n  <ng-container #inlineEditNewView></ng-container>\n\n  <ng-container #rowActionsView></ng-container>\n\n  <ng-container #rowExpansionActionView></ng-container>\n\n  <ng-container #customExprView></ng-container>\n\n  <ng-container #dynamicTable></ng-container>\n\n  <ng-container #rowDetailView></ng-container>\n\n  <div class=\"dynamic-table-container\"></div>\n</div>\n" }]
+                        ], template: "@if (title || subheading || iconclass || iconurl || exportOptions.length || _actions.header.length) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        @if (iconclass || iconurl) {\n          <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [iconClasses]=\"iconurl ? 'panel-image-icon' : 'panel-icon'\" alt=\"Table icon\"></wm-app-icon>\n        }\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n      @if (exportOptions.length || _actions.header.length) {\n        <div class=\"panel-actions app-datagrid-actions\">\n          @for (btn of _actions.header; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('actions_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (exportOptions.length) {\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n            dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n          }\n        </div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext)) \">\n  <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext)\">\n    <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n      navigationsize.bind=\"navigationSize\"\n      navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n      boundarylinks.bind=\"boundarylinks\"\n    forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n  </div>\n  @if (_actions.footer.length) {\n    <div class=\"app-datagrid-actions\">\n      @for (btn of _actions.footer; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('actions_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n  <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n  type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n  <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n    shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n  hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n  <ng-container #multiColumnFilterView></ng-container>\n\n  <ng-container #inlineEditView></ng-container>\n\n  <ng-container #inlineEditNewView></ng-container>\n\n  <ng-container #rowActionsView></ng-container>\n\n  <ng-container #rowExpansionActionView></ng-container>\n\n  <ng-container #customExprView></ng-container>\n\n  <ng-container #dynamicTable></ng-container>\n\n  <ng-container #rowDetailView></ng-container>\n\n  <div class=\"dynamic-table-container\"></div>\n</div>\n" }]
             }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i0__namespace.EnvironmentInjector }, { type: i1__namespace.FormBuilder }, { type: i2__namespace.App }, { type: i2__namespace.DynamicComponentRefProvider }, { type: i2__namespace.StatePersistence }, { type: i2__namespace.PaginationService }, { type: i2__namespace.Viewport }, { type: i3__namespace.ListComponent, decorators: [{
                         type: i0.Optional
                     }] }, { type: undefined, decorators: [{

package/components/data/table/fesm2022/index.mjs CHANGED Viewed

@@ -11,7 +11,7 @@ import * as i2 from '@wm/core';
 import { isDefined, getClonedObject, closePopover, triggerFn, $appDigest, $unwatch, $watch, muteWatchers, unMuteWatchers, DataSource, isDataSourceEqual, isMobile, $invokeWatchers, getValidJSON, extendProto, getDatasourceFromExpr, $parseEvent, extractCurrentItemExpr, isNumberType, DataType, adjustContainerRightEdges, FormWidgetType, isDateTimeType, getDisplayDateTimeFormat } from '@wm/core';
 import { Subject } from 'rxjs';
 import * as i4 from '@wm/components/base';
-import { register, PROP_BOOLEAN, PROP_STRING, PROP_NUMBER, PROP_ANY, StylableComponent, DEBOUNCE_TIMES, getConditionalClasses, unsupportedStatePersistenceTypes, styler, extractDataSourceName, EDIT_MODE, getRowOperationsColumn, transformData, prepareFieldDefs, getOrderByExpr, NAVIGATION_TYPE, provideAs, provideAsWidgetRef, refreshDataSource, getMatchModeTypesMap, getMatchModeMsgs, isDataSetWidget, BaseComponent, setHeaderConfigForTable, BaseFieldValidations, applyFilterOnField, getDistinctFieldProperties, getDistinctValues, getWatchIdentifier, fetchRelatedFieldData, getDistinctValuesForField, getEditModeWidget, getDataTableFilterWidget, getDefaultValue, Context } from '@wm/components/base';
+import { register, PROP_BOOLEAN, PROP_STRING, PROP_NUMBER, PROP_ANY, StylableComponent, DEBOUNCE_TIMES, getConditionalClasses, unsupportedStatePersistenceTypes, styler, extractDataSourceName, EDIT_MODE, getRowOperationsColumn, transformData, prepareFieldDefs, getOrderByExpr, NAVIGATION_TYPE, WmAppIconComponent, provideAs, provideAsWidgetRef, refreshDataSource, getMatchModeTypesMap, getMatchModeMsgs, isDataSetWidget, BaseComponent, setHeaderConfigForTable, BaseFieldValidations, applyFilterOnField, getDistinctFieldProperties, getDistinctValues, getWatchIdentifier, fetchRelatedFieldData, getDistinctValuesForField, getEditModeWidget, getDataTableFilterWidget, getDefaultValue, Context } from '@wm/components/base';
 import { PaginationComponent } from '@wm/components/data/pagination';
 import * as i3 from '@wm/components/data/list';
 import { debounceTime } from 'rxjs/operators';
@@ -48,6 +48,7 @@ const registerProps$5 = () => {
         ['gridclass', { value: 'table-hover', ...PROP_STRING }],
         ['gridfirstrowselect', PROP_BOOLEAN],
         ['iconclass', PROP_STRING],
+        ['iconurl', PROP_STRING],
         ['insertmessage', { value: 'Record added successfully', ...PROP_STRING }],
         ['isdynamictable', PROP_BOOLEAN], // internal property to determine dynamic table
         ['isrowexpansionenabled', PROP_BOOLEAN],
@@ -2505,14 +2506,14 @@ class TableComponent extends StylableComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: TableComponent, isStandalone: true, selector: "[wmTable]", host: { listeners: { "keypress": "onKeyPress($event)" } }, providers: [
             provideAs(TableComponent, NG_VALUE_ACCESSOR, true),
             provideAsWidgetRef(TableComponent)
-        ], queries: [{ propertyName: "rowExpansionTmpl", first: true, predicate: ["rowExpansionTmpl"], descendants: true }, { propertyName: "rowActionTmpl", predicate: ["rowActionTmpl"], descendants: true }, { propertyName: "filterTmpl", predicate: ["filterTmpl"], descendants: true }, { propertyName: "inlineWidgetTmpl", predicate: ["inlineWidgetTmpl"], descendants: true }, { propertyName: "inlineWidgetNewTmpl", predicate: ["inlineWidgetTmplNew"], descendants: true }, { propertyName: "customExprTmpl", predicate: ["customExprTmpl"], descendants: true }, { propertyName: "rowExpansionActionTmpl", predicate: ["rowExpansionActionTmpl"], descendants: true }], viewQueries: [{ propertyName: "dataNavigator", first: true, predicate: PaginationComponent, descendants: true, static: true }, { propertyName: "_tableElement", first: true, predicate: ["datagridElement"], descendants: true, static: true }, { propertyName: "rowActionsViewRef", first: true, predicate: ["rowActionsView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "filterViewRef", first: true, predicate: ["multiColumnFilterView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inlineEditViewRef", first: true, predicate: ["inlineEditView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inlineEditNewViewRef", first: true, predicate: ["inlineEditNewView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "customExprViewRef", first: true, predicate: ["customExprView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "rowDetailViewRef", first: true, predicate: ["rowDetailView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "rowExpansionActionViewRef", first: true, predicate: ["rowExpansionActionView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "dynamicTableRef", first: true, predicate: ["dynamicTable"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (title || subheading || iconclass || exportOptions.length || _actions.header.length) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        @if (iconclass) {\n          <i class=\"app-icon panel-icon {{iconclass}}\"></i>\n        }\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n      @if (exportOptions.length || _actions.header.length) {\n        <div class=\"panel-actions app-datagrid-actions\">\n          @for (btn of _actions.header; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('actions_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (exportOptions.length) {\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n            dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n          }\n        </div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext)) \">\n  <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext)\">\n    <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n      navigationsize.bind=\"navigationSize\"\n      navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n      boundarylinks.bind=\"boundarylinks\"\n    forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n  </div>\n  @if (_actions.footer.length) {\n    <div class=\"app-datagrid-actions\">\n      @for (btn of _actions.footer; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('actions_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n  <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n  type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n  <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n    shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n  hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n  <ng-container #multiColumnFilterView></ng-container>\n\n  <ng-container #inlineEditView></ng-container>\n\n  <ng-container #inlineEditNewView></ng-container>\n\n  <ng-container #rowActionsView></ng-container>\n\n  <ng-container #rowExpansionActionView></ng-container>\n\n  <ng-container #customExprView></ng-container>\n\n  <ng-container #dynamicTable></ng-container>\n\n  <ng-container #rowDetailView></ng-container>\n\n  <div class=\"dynamic-table-container\"></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AnchorComponent, selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: PaginationComponent, selector: "[wmPagination]", outputs: ["resultEmitter", "maxResultsEmitter"] }, { kind: "component", type: ButtonComponent, selector: "button[wmButton]", exportAs: ["wmButton"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: MenuComponent, selector: "[wmMenu]" }] }); }
+        ], queries: [{ propertyName: "rowExpansionTmpl", first: true, predicate: ["rowExpansionTmpl"], descendants: true }, { propertyName: "rowActionTmpl", predicate: ["rowActionTmpl"], descendants: true }, { propertyName: "filterTmpl", predicate: ["filterTmpl"], descendants: true }, { propertyName: "inlineWidgetTmpl", predicate: ["inlineWidgetTmpl"], descendants: true }, { propertyName: "inlineWidgetNewTmpl", predicate: ["inlineWidgetTmplNew"], descendants: true }, { propertyName: "customExprTmpl", predicate: ["customExprTmpl"], descendants: true }, { propertyName: "rowExpansionActionTmpl", predicate: ["rowExpansionActionTmpl"], descendants: true }], viewQueries: [{ propertyName: "dataNavigator", first: true, predicate: PaginationComponent, descendants: true, static: true }, { propertyName: "_tableElement", first: true, predicate: ["datagridElement"], descendants: true, static: true }, { propertyName: "rowActionsViewRef", first: true, predicate: ["rowActionsView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "filterViewRef", first: true, predicate: ["multiColumnFilterView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inlineEditViewRef", first: true, predicate: ["inlineEditView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inlineEditNewViewRef", first: true, predicate: ["inlineEditNewView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "customExprViewRef", first: true, predicate: ["customExprView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "rowDetailViewRef", first: true, predicate: ["rowDetailView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "rowExpansionActionViewRef", first: true, predicate: ["rowExpansionActionView"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "dynamicTableRef", first: true, predicate: ["dynamicTable"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (title || subheading || iconclass || iconurl || exportOptions.length || _actions.header.length) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        @if (iconclass || iconurl) {\n          <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [iconClasses]=\"iconurl ? 'panel-image-icon' : 'panel-icon'\" alt=\"Table icon\"></wm-app-icon>\n        }\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n      @if (exportOptions.length || _actions.header.length) {\n        <div class=\"panel-actions app-datagrid-actions\">\n          @for (btn of _actions.header; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('actions_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (exportOptions.length) {\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n            dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n          }\n        </div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext)) \">\n  <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext)\">\n    <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n      navigationsize.bind=\"navigationSize\"\n      navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n      boundarylinks.bind=\"boundarylinks\"\n    forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n  </div>\n  @if (_actions.footer.length) {\n    <div class=\"app-datagrid-actions\">\n      @for (btn of _actions.footer; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('actions_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n  <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n  type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n  <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n    shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n  hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n  <ng-container #multiColumnFilterView></ng-container>\n\n  <ng-container #inlineEditView></ng-container>\n\n  <ng-container #inlineEditNewView></ng-container>\n\n  <ng-container #rowActionsView></ng-container>\n\n  <ng-container #rowExpansionActionView></ng-container>\n\n  <ng-container #customExprView></ng-container>\n\n  <ng-container #dynamicTable></ng-container>\n\n  <ng-container #rowDetailView></ng-container>\n\n  <div class=\"dynamic-table-container\"></div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AnchorComponent, selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: PaginationComponent, selector: "[wmPagination]", outputs: ["resultEmitter", "maxResultsEmitter"] }, { kind: "component", type: ButtonComponent, selector: "button[wmButton]", exportAs: ["wmButton"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "component", type: MenuComponent, selector: "[wmMenu]" }, { kind: "component", type: WmAppIconComponent, selector: "wm-app-icon", inputs: ["iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, AnchorComponent, PaginationComponent, ButtonComponent, BsDropdownModule, MenuComponent], selector: '[wmTable]', providers: [
+            args: [{ standalone: true, imports: [CommonModule, AnchorComponent, PaginationComponent, ButtonComponent, BsDropdownModule, MenuComponent, WmAppIconComponent], selector: '[wmTable]', providers: [
                         provideAs(TableComponent, NG_VALUE_ACCESSOR, true),
                         provideAsWidgetRef(TableComponent)
-                    ], template: "@if (title || subheading || iconclass || exportOptions.length || _actions.header.length) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        @if (iconclass) {\n          <i class=\"app-icon panel-icon {{iconclass}}\"></i>\n        }\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n      @if (exportOptions.length || _actions.header.length) {\n        <div class=\"panel-actions app-datagrid-actions\">\n          @for (btn of _actions.header; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('actions_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (exportOptions.length) {\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n            dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n          }\n        </div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext)) \">\n  <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext)\">\n    <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n      navigationsize.bind=\"navigationSize\"\n      navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n      boundarylinks.bind=\"boundarylinks\"\n    forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n  </div>\n  @if (_actions.footer.length) {\n    <div class=\"app-datagrid-actions\">\n      @for (btn of _actions.footer; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('actions_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n  <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n  type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n  <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n    shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n  hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n  <ng-container #multiColumnFilterView></ng-container>\n\n  <ng-container #inlineEditView></ng-container>\n\n  <ng-container #inlineEditNewView></ng-container>\n\n  <ng-container #rowActionsView></ng-container>\n\n  <ng-container #rowExpansionActionView></ng-container>\n\n  <ng-container #customExprView></ng-container>\n\n  <ng-container #dynamicTable></ng-container>\n\n  <ng-container #rowDetailView></ng-container>\n\n  <div class=\"dynamic-table-container\"></div>\n</div>\n" }]
+                    ], template: "@if (title || subheading || iconclass || iconurl || exportOptions.length || _actions.header.length) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        @if (iconclass || iconurl) {\n          <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [iconClasses]=\"iconurl ? 'panel-image-icon' : 'panel-icon'\" alt=\"Table icon\"></wm-app-icon>\n        }\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n      @if (exportOptions.length || _actions.header.length) {\n        <div class=\"panel-actions app-datagrid-actions\">\n          @for (btn of _actions.header; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('actions_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (exportOptions.length) {\n            <div wmMenu dropdown caption.bind=\"appLocale.LABEL_EXPORT\"  autoclose=\"always\" attr.name=\"{{name}}-export\"\n            dataset.bind=\"exportOptions\" select.event=\"export($item)\" menuposition=\"down,left\"></div>\n          }\n        </div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-datagrid\" #datagridElement></div>\n\n<div class=\"panel-footer clearfix\" [hidden]=\"!_actions.footer.length && (!shownavigation || (onDemandLoad && dataNavigator.isDisableNext)) \">\n  <div class=\"app-datagrid-paginator\" [hidden]=\"(!dataNavigator?.dataSize && !dataNavigator.datasource?.pagination?.next) || !shownavigation || (onDemandLoad && dataNavigator.isDisableNext)\">\n    <nav wmPagination show.bind=\"shownavigation\" navigationalign.bind=\"navigationalign\"\n      navigationsize.bind=\"navigationSize\"\n      navigation.bind=\"navControls\" showrecordcount.bind=\"showrecordcount\" maxsize.bind=\"maxsize\"\n      boundarylinks.bind=\"boundarylinks\"\n    forceellipses.bind=\"forceellipses\" directionlinks.bind=\"directionlinks\"></nav>\n  </div>\n  @if (_actions.footer.length) {\n    <div class=\"app-datagrid-actions\">\n      @for (btn of _actions.footer; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('actions_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #buttonRef let-btn=\"btn\">\n  <button wmButton caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n  type=\"button\" shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\" [attr.aria-label]=\"btn.displayName\" disabled.bind=\"btn.disabled\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n  <a wmAnchor caption.bind=\"btn.displayName\" show.bind=\"btn.show\" class.bind=\"btn.class\"  iconclass.bind=\"btn.iconclass\" (click)=\"invokeActionEvent($event, btn.action)\"\n    [ngClass]=\"{'btn-sm': spacing === 'condensed', 'disabled-new': btn.key === 'addNewRow' && (isGridEditMode || isLoading)}\"\n    shortcutkey.bind=\"btn.shortcutkey\" tabindex.bind=\"btn.tabindex\" hint.bind=\"btn.title\"\n  hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\" conditionalclass.bind=\"btn.conditionalclass\" conditionalstyle.bind=\"btn.conditionalstyle\"></a>\n</ng-template>\n\n<div hidden>\n  <ng-container #multiColumnFilterView></ng-container>\n\n  <ng-container #inlineEditView></ng-container>\n\n  <ng-container #inlineEditNewView></ng-container>\n\n  <ng-container #rowActionsView></ng-container>\n\n  <ng-container #rowExpansionActionView></ng-container>\n\n  <ng-container #customExprView></ng-container>\n\n  <ng-container #dynamicTable></ng-container>\n\n  <ng-container #rowDetailView></ng-container>\n\n  <div class=\"dynamic-table-container\"></div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.EnvironmentInjector }, { type: i1.FormBuilder }, { type: i2.App }, { type: i2.DynamicComponentRefProvider }, { type: i2.StatePersistence }, { type: i2.PaginationService }, { type: i2.Viewport }, { type: i3.ListComponent, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{