@seniorsistemas/angular-components 16.1.0 → 16.2.1

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 (35) hide show
  1. package/bundles/seniorsistemas-angular-components.umd.js +63 -13
  2. package/bundles/seniorsistemas-angular-components.umd.js.map +1 -1
  3. package/bundles/seniorsistemas-angular-components.umd.min.js +1 -1
  4. package/bundles/seniorsistemas-angular-components.umd.min.js.map +1 -1
  5. package/components/table/index.d.ts +1 -0
  6. package/components/table/table-paging/index.d.ts +1 -0
  7. package/components/table/table-paging/models/custom-action.interface.d.ts +4 -0
  8. package/components/table/table-paging/models/index.d.ts +1 -0
  9. package/components/table/table-paging/table-paging.component.d.ts +2 -0
  10. package/components/tooltip/models/mobile-behavior.d.ts +4 -0
  11. package/components/tooltip/tooltip.directive.d.ts +6 -1
  12. package/esm2015/components/dynamic-form/components/lookup/lookup.component.js +2 -2
  13. package/esm2015/components/info-sign/info-sign.component.js +3 -3
  14. package/esm2015/components/table/index.js +1 -1
  15. package/esm2015/components/table/table-paging/index.js +1 -0
  16. package/esm2015/components/table/table-paging/models/custom-action.interface.js +1 -0
  17. package/esm2015/components/table/table-paging/models/index.js +1 -0
  18. package/esm2015/components/table/table-paging/table-paging.component.js +19 -4
  19. package/esm2015/components/tooltip/models/mobile-behavior.js +6 -0
  20. package/esm2015/components/tooltip/tooltip.directive.js +38 -8
  21. package/esm5/components/dynamic-form/components/lookup/lookup.component.js +2 -2
  22. package/esm5/components/info-sign/info-sign.component.js +3 -3
  23. package/esm5/components/table/index.js +1 -1
  24. package/esm5/components/table/table-paging/index.js +1 -0
  25. package/esm5/components/table/table-paging/models/custom-action.interface.js +1 -0
  26. package/esm5/components/table/table-paging/models/index.js +1 -0
  27. package/esm5/components/table/table-paging/table-paging.component.js +19 -4
  28. package/esm5/components/tooltip/models/mobile-behavior.js +6 -0
  29. package/esm5/components/tooltip/tooltip.directive.js +38 -8
  30. package/fesm2015/seniorsistemas-angular-components.js +63 -13
  31. package/fesm2015/seniorsistemas-angular-components.js.map +1 -1
  32. package/fesm5/seniorsistemas-angular-components.js +63 -13
  33. package/fesm5/seniorsistemas-angular-components.js.map +1 -1
  34. package/package.json +1 -1
  35. package/seniorsistemas-angular-components.metadata.json +1 -1
@@ -2408,7 +2408,7 @@ var LookupComponent = /** @class */ (function () {
2408
2408
  LookupComponent = LookupComponent_1 = __decorate([
2409
2409
  Component({
2410
2410
  selector: "s-lookup",
2411
- template: "<div [ngClass]=\"{ inputgroup: showSearch }\">\n <p-autoComplete\n #autocomplete\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [dataKey]=\"dataKey\"\n [multiple]=\"multiple\"\n [inputId]=\"id + '-autocomplete'\"\n [forceSelection]=\"true\"\n [suggestions]=\"getLookupSuggestions()\"\n (completeMethod)=\"lazyLoadLookup($event)\"\n (onSelect)=\"onSelect.next($event)\"\n (onBlur)=\"onBlur.next($event)\"\n (onFocus)=\"onFocus.next($event)\"\n (onUnselect)=\"onUnselect.next($event)\"\n (onClear)=\"onClear.next($event)\"\n (onKeyUp)=\"onKeyUp.next($event)\"\n [field]=\"lookupDisplayField\"\n [emptyMessage]=\"lookupEmptyMessage\"\n [dropdown]=\"!showSearch\"\n [appendTo]=\"lookupAppendTo\"\n [placeholder]=\"placeholder || ' '\"\n [autoHighlight]=\"true\"\n inputStyleClass=\"mousetrap\">\n <ng-template let-item pTemplate=\"selectedItem\">\n <span\n class=\"ui-autocomplete-token-label ng-tns-c65-43 ng-star-inserted\"\n [sTooltip]=\"lookupDisplayFieldTooltip ? item[lookupDisplayField] : null\"\n tooltipPosition=\"top\">\n {{item[lookupDisplayField]}}\n </span>\n </ng-template>\n </p-autoComplete>\n <button\n *ngIf=\"showSearch\"\n pButton\n type=\"button\"\n icon=\"fa fa-search\"\n class=\"button-addon\"\n [disabled]=\"disabled\"\n (click)=\"showDialog()\">\n </button>\n</div>\n<p-dialog\n appendTo=\"body\"\n styleClass=\"s-lookup-modal\"\n [header]=\"searchTitle\"\n [(visible)]=\"dialogVisible\"\n [modal]=\"true\"\n (onHide)=\"hideDialog()\"\n [blockScroll]=\"true\"\n [focusOnShow]=\"true\"\n [draggable]=\"false\"\n [resizable]=\"false\"\n #dialog>\n <div\n *ngIf=\"dialogVisible\"\n class=\"s-lookup-modal-container\">\n <div\n *ngIf=\"searchFields && searchFields.length\"\n class=\"filter\"\n [@collapseContent]=\"collapsed \n ? { value: 'hidden', params: { transitionParams: transitionOptions } }\n : { value: 'visible', params: { transitionParams: transitionOptions } }\"\n (@collapseContent.done)=\"onToggleDone()\">\n <form\n [formGroup]=\"formGroupDialog\"\n novalidate\n autocomplete=\"off\">\n <div\n *ngIf=\"!collapsed\"\n class=\"form-content\"\n [@childCollapseContent]=\"collapsed\n ? { value: ':leave', params: { transitionParams: transitionOptions } }\n : { value: ':enter', params: { transitionParams: transitionOptions } }\">\n <div class=\"filter-title sds-section-title\">{{ filterTitle }}</div>\n <div class=\"form-fields\">\n <s-dynamic-form\n [fields]=\"searchFields\"\n [form]=\"formGroupDialog\">\n </s-dynamic-form>\n </div>\n <div class=\"ui-g\">\n <div class=\"ui-g-12\">\n <s-button\n [id]=\"id + '-filter-button'\"\n type=\"submit\"\n [label]=\"filterLabel\"\n (onClick)=\"search()\"\n sTooltip=\"(ALT + SHIFT + F)\"\n showDelay=\"500\">\n </s-button>\n <s-button\n [id]=\"id + '-clear-button'\"\n type=\"button\"\n [label]=\"clearLabel\"\n (onClick)=\"clear()\"\n priority=\"link\"\n sTooltip=\"(ALT + SHIFT + L)\"\n showDelay=\"500\">\n </s-button>\n </div>\n </div>\n </div>\n </form>\n </div>\n <div\n *ngIf=\"searchFields && searchFields.length\"\n class=\"filter-toggle\">\n <div class=\"filter-toggle--start-border-mask\"></div>\n <button\n [id]=\"id + '-filter-toggle-button'\"\n type=\"button\"\n (click)=\"filterToggle()\">\n <span\n class=\"fa\"\n [ngClass]=\"{'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed}\"\n aria-hidden=\"true\">\n </span>\n </button>\n <div class=\"filter-toggle--end-border-mask\"></div>\n </div>\n <div\n class=\"content\"\n [ngClass]=\"{'empty-content': !searchTotalRecords && !loading}\">\n <s-empty-state\n [id]=\"id + '-empty-state'\"\n *ngIf=\"!searchTotalRecords && !loading\"\n [title]=\"searchEmptyTitle\"\n [description]=\"searchEmptyDescription\"\n iconClass=\"fa fa-search\">\n </s-empty-state>\n <p-table\n [dataKey]=\"dataKey\"\n [value]=\"getGridData()\"\n [columns]=\"searchGridFields\"\n [lazy]=\"true\"\n [scrollable]=\"true\"\n [paginator]=\"true\"\n sortMode=\"multiple\"\n [totalRecords]=\"searchTotalRecords\"\n [rows]=\"10\"\n [selection]=\"selected\"\n (onLazyLoad)=\"lazyLoadGrid($event)\"\n *sLoadingState=\"loading\"\n [multiSortMeta]=\"multiSortMeta\"\n [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n (selectionChange)=\"onSelectionChange($event)\">\n <ng-template pTemplate=\"colgroup\" let-columns>\n <colgroup>\n <col\n *ngIf=\"multiple\"\n style=\"width: 50px\" />\n <col\n *ngFor=\"let col of columns\"\n [style.width]=\"col.width\" />\n </colgroup>\n </ng-template>\n <ng-template pTemplate=\"header\" let-columns>\n <tr>\n <th\n *ngIf=\"multiple\"\n style=\"width: 50px\">\n <s-table-header-checkbox\n [useAllObject]=\"lookupRowProps ? false : true\"\n [rowProps]=\"lookupRowProps\">\n </s-table-header-checkbox>\n </th>\n <th\n [style.width]=\"col.width\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.name\"\n [pSortableColumnDisabled]=\"sortableColumnsDisabled?.includes(col.name)\">\n <div class=\"senior-header\">\n <span class=\"senior-header-title\">{{ col.label }}</span>\n <p-sortIcon\n [field]=\"col.name\"\n *ngIf=\"!sortableColumnsDisabled?.includes(col.name)\">\n </p-sortIcon>\n </div>\n </th>\n </tr>\n </ng-template>\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns\n let-rowIndex=\"rowIndex\">\n <tr\n sNavigation\n [pSelectableRow]=\"rowData\"\n [pSelectableRowIndex]=\"rowIndex\"\n sDoubleClick (onDoubleClick)=\"onTableRowDoubleClick(rowData)\">\n <td\n *ngIf=\"multiple\"\n style=\"width: 50px\"\n tabindex=\"0\">\n <p-tableCheckbox\n [value]=\"rowData\"\n [pSelectableRow]=\"rowData\">\n </p-tableCheckbox>\n </td>\n <td\n [style.width]=\"col['width']\"\n *ngFor=\"let col of searchGridFields\"\n [ngSwitch]=\"col.type\"\n tabindex=\"0\">\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <ng-container *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\">\n <span>{{ getBooleanLabel(rowData, col.name, col.optionsLabel) }}</span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Date'\">\n <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n <span>{{ getFieldValue(rowData, col.name) | localizedDate: col.calendarLocaleOptions?.dateFormat || \"L\" | async }}</span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'LocalDateTime'\">\n <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Time'\">\n <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n <span>{{ getFieldValue(rowData, col.name) | localizedTime: col.calendarLocaleOptions?.dateFormat || \"LTS\" | async }}</span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Double'\">\n <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n <span> {{ getFieldValue(rowData, col.name) | localizedNumber: getScale(col.scale) | async }} </span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Money'\">\n <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n <span> {{ getFieldValue(rowData, col.name) | localizedCurrency | async }} </span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Number'\">\n <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getNumberMaskConfig(col) | async }} </span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Enum'\">\n <ng-container\n *ngIf=\"getLabelForValue(getFieldValue(rowData, col.name), col.options); else emptyTemplate\"\n >\n <span> {{ getLabelForValue(getFieldValue(rowData, col.name), col.options) }} </span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"col.mask && col.mask()\">\n <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name))\">\n <span>{{ getFieldValue(rowData, col.name) | sMaskFormatter: col.mask() }}</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!(col.mask && col.mask())\">\n <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name)); else emptyTemplate\">\n <span>{{ getFieldValue(rowData, col.name) }}</span>\n </ng-container>\n </ng-container>\n </ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"paginatorright\">\n <span [attr.data-hidden]=\"loading\">\n {{\n searchTotalRecordsLabel ||\n searchTotalRecords?.toString() + (searchTotalRecords === 1 ? recordLabel : recordsLabel)\n }}\n </span>\n </ng-template>\n </p-table>\n </div>\n </div>\n <p-footer>\n <s-button\n [id]=\"id + '-select-button'\"\n type=\"button\"\n [label]=\"selectLabel\"\n (onClick)=\"select()\"\n sTooltip=\"(ALT + SHIFT + S)\"\n showDelay=\"500\"\n [disabled]=\"!selected?.length\">\n </s-button>\n <s-button\n [id]=\"id + '-cancel-button'\"\n type=\"button\"\n priority=\"link\"\n [label]=\"cancelLabel\"\n (onClick)=\"hideDialog()\"\n sTooltip=\"(ALT + SHIFT + C)\"\n showDelay=\"500\">\n </s-button>\n </p-footer>\n</p-dialog>\n<ng-template #emptyTemplate>\n <span [ngClass]=\"'sds-empty-value'\">{{ emptyFieldLabel }}</span>\n</ng-template>\n",
2411
+ template: "<div [ngClass]=\"{ inputgroup: showSearch }\">\n <p-autoComplete\n #autocomplete\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [dataKey]=\"dataKey\"\n [multiple]=\"multiple\"\n [inputId]=\"id + '-autocomplete'\"\n [forceSelection]=\"true\"\n [suggestions]=\"getLookupSuggestions()\"\n (completeMethod)=\"lazyLoadLookup($event)\"\n (onSelect)=\"onSelect.next($event)\"\n (onBlur)=\"onBlur.next($event)\"\n (onFocus)=\"onFocus.next($event)\"\n (onUnselect)=\"onUnselect.next($event)\"\n (onClear)=\"onClear.next($event)\"\n (onKeyUp)=\"onKeyUp.next($event)\"\n [field]=\"lookupDisplayField\"\n [emptyMessage]=\"lookupEmptyMessage\"\n [dropdown]=\"!showSearch\"\n [appendTo]=\"lookupAppendTo\"\n [placeholder]=\"placeholder || ' '\"\n [autoHighlight]=\"true\"\n inputStyleClass=\"mousetrap\">\n <ng-template let-item pTemplate=\"selectedItem\">\n <span\n class=\"ui-autocomplete-token-label ng-tns-c65-43 ng-star-inserted\"\n [sTooltip]=\"lookupDisplayFieldTooltip ? item[lookupDisplayField] : null\"\n tooltipPosition=\"top\">\n {{item[lookupDisplayField]}}\n </span>\n </ng-template>\n </p-autoComplete>\n <button\n *ngIf=\"showSearch\"\n pButton\n type=\"button\"\n icon=\"fa fa-search\"\n class=\"button-addon\"\n [disabled]=\"disabled\"\n (click)=\"showDialog()\">\n </button>\n</div>\n<p-dialog\n appendTo=\"body\"\n styleClass=\"s-lookup-modal\"\n [header]=\"searchTitle\"\n [(visible)]=\"dialogVisible\"\n [modal]=\"true\"\n (onHide)=\"hideDialog()\"\n [blockScroll]=\"true\"\n [focusOnShow]=\"true\"\n [draggable]=\"false\"\n [resizable]=\"false\"\n #dialog>\n <div\n *ngIf=\"dialogVisible\"\n class=\"s-lookup-modal-container\">\n <div\n *ngIf=\"searchFields && searchFields.length\"\n class=\"filter\"\n [@collapseContent]=\"collapsed \n ? { value: 'hidden', params: { transitionParams: transitionOptions } }\n : { value: 'visible', params: { transitionParams: transitionOptions } }\"\n (@collapseContent.done)=\"onToggleDone()\">\n <form\n [formGroup]=\"formGroupDialog\"\n novalidate\n autocomplete=\"off\">\n <div\n *ngIf=\"!collapsed\"\n class=\"form-content\"\n [@childCollapseContent]=\"collapsed\n ? { value: ':leave', params: { transitionParams: transitionOptions } }\n : { value: ':enter', params: { transitionParams: transitionOptions } }\">\n <div class=\"filter-title sds-section-title\">{{ filterTitle }}</div>\n <div class=\"form-fields\">\n <s-dynamic-form\n [fields]=\"searchFields\"\n [form]=\"formGroupDialog\">\n </s-dynamic-form>\n </div>\n <div class=\"ui-g\">\n <div class=\"ui-g-12\">\n <s-button\n [id]=\"id + '-filter-button'\"\n type=\"submit\"\n [label]=\"filterLabel\"\n (onClick)=\"search()\"\n sTooltip=\"(ALT + SHIFT + F)\"\n tooltipPosition=\"top\"\n showDelay=\"500\">\n </s-button>\n <s-button\n [id]=\"id + '-clear-button'\"\n type=\"button\"\n [label]=\"clearLabel\"\n (onClick)=\"clear()\"\n priority=\"link\"\n sTooltip=\"(ALT + SHIFT + L)\"\n tooltipPosition=\"top\"\n showDelay=\"500\">\n </s-button>\n </div>\n </div>\n </div>\n </form>\n </div>\n <div\n *ngIf=\"searchFields && searchFields.length\"\n class=\"filter-toggle\">\n <div class=\"filter-toggle--start-border-mask\"></div>\n <button\n [id]=\"id + '-filter-toggle-button'\"\n type=\"button\"\n (click)=\"filterToggle()\">\n <span\n class=\"fa\"\n [ngClass]=\"{'fa-chevron-left': !collapsed, 'fa-chevron-right': collapsed}\"\n aria-hidden=\"true\">\n </span>\n </button>\n <div class=\"filter-toggle--end-border-mask\"></div>\n </div>\n <div\n class=\"content\"\n [ngClass]=\"{'empty-content': !searchTotalRecords && !loading}\">\n <s-empty-state\n [id]=\"id + '-empty-state'\"\n *ngIf=\"!searchTotalRecords && !loading\"\n [title]=\"searchEmptyTitle\"\n [description]=\"searchEmptyDescription\"\n iconClass=\"fa fa-search\">\n </s-empty-state>\n <p-table\n [dataKey]=\"dataKey\"\n [value]=\"getGridData()\"\n [columns]=\"searchGridFields\"\n [lazy]=\"true\"\n [scrollable]=\"true\"\n [paginator]=\"true\"\n sortMode=\"multiple\"\n [totalRecords]=\"searchTotalRecords\"\n [rows]=\"10\"\n [selection]=\"selected\"\n (onLazyLoad)=\"lazyLoadGrid($event)\"\n *sLoadingState=\"loading\"\n [multiSortMeta]=\"multiSortMeta\"\n [attr.data-hidden]=\"!searchTotalRecords && !loading\"\n [selectionMode]=\"multiple ? 'multiple' : 'single'\"\n (selectionChange)=\"onSelectionChange($event)\">\n <ng-template pTemplate=\"colgroup\" let-columns>\n <colgroup>\n <col\n *ngIf=\"multiple\"\n style=\"width: 50px\" />\n <col\n *ngFor=\"let col of columns\"\n [style.width]=\"col.width\" />\n </colgroup>\n </ng-template>\n <ng-template pTemplate=\"header\" let-columns>\n <tr>\n <th\n *ngIf=\"multiple\"\n style=\"width: 50px\">\n <s-table-header-checkbox\n [useAllObject]=\"lookupRowProps ? false : true\"\n [rowProps]=\"lookupRowProps\">\n </s-table-header-checkbox>\n </th>\n <th\n [style.width]=\"col.width\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.name\"\n [pSortableColumnDisabled]=\"sortableColumnsDisabled?.includes(col.name)\">\n <div class=\"senior-header\">\n <span class=\"senior-header-title\">{{ col.label }}</span>\n <p-sortIcon\n [field]=\"col.name\"\n *ngIf=\"!sortableColumnsDisabled?.includes(col.name)\">\n </p-sortIcon>\n </div>\n </th>\n </tr>\n </ng-template>\n <ng-template\n pTemplate=\"body\"\n let-rowData\n let-columns\n let-rowIndex=\"rowIndex\">\n <tr\n sNavigation\n [pSelectableRow]=\"rowData\"\n [pSelectableRowIndex]=\"rowIndex\"\n sDoubleClick (onDoubleClick)=\"onTableRowDoubleClick(rowData)\">\n <td\n *ngIf=\"multiple\"\n style=\"width: 50px\"\n tabindex=\"0\">\n <p-tableCheckbox\n [value]=\"rowData\"\n [pSelectableRow]=\"rowData\">\n </p-tableCheckbox>\n </td>\n <td\n [style.width]=\"col['width']\"\n *ngFor=\"let col of searchGridFields\"\n [ngSwitch]=\"col.type\"\n tabindex=\"0\">\n <ng-container *ngSwitchCase=\"'Boolean'\">\n <ng-container *ngIf=\"isBooleanValue(rowData, col.name); else emptyTemplate\">\n <span>{{ getBooleanLabel(rowData, col.name, col.optionsLabel) }}</span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Date'\">\n <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n <span>{{ getFieldValue(rowData, col.name) | localizedDate: col.calendarLocaleOptions?.dateFormat || \"L\" | async }}</span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'DateTime'\">\n <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'LocalDateTime'\">\n <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n <span>{{ getFieldValue(rowData, col.name) | localizedDate | async }}</span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Time'\">\n <ng-container *ngIf=\"getFieldValue(rowData, col.name); else emptyTemplate\">\n <span>{{ getFieldValue(rowData, col.name) | localizedTime: col.calendarLocaleOptions?.dateFormat || \"LTS\" | async }}</span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Double'\">\n <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n <span> {{ getFieldValue(rowData, col.name) | localizedNumber: getScale(col.scale) | async }} </span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Money'\">\n <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n <span> {{ getFieldValue(rowData, col.name) | localizedCurrency | async }} </span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Number'\">\n <ng-container *ngIf=\"isNumber(rowData, col.name); else emptyTemplate\">\n <span> {{ getFieldValue(rowData, col.name) | localizedBignumber: getNumberMaskConfig(col) | async }} </span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Enum'\">\n <ng-container\n *ngIf=\"getLabelForValue(getFieldValue(rowData, col.name), col.options); else emptyTemplate\"\n >\n <span> {{ getLabelForValue(getFieldValue(rowData, col.name), col.options) }} </span>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ng-container *ngIf=\"col.mask && col.mask()\">\n <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name))\">\n <span>{{ getFieldValue(rowData, col.name) | sMaskFormatter: col.mask() }}</span>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!(col.mask && col.mask())\">\n <ng-container *ngIf=\"(isNumber(rowData, col.name) || getFieldValue(rowData, col.name)); else emptyTemplate\">\n <span>{{ getFieldValue(rowData, col.name) }}</span>\n </ng-container>\n </ng-container>\n </ng-container>\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"paginatorright\">\n <span [attr.data-hidden]=\"loading\">\n {{\n searchTotalRecordsLabel ||\n searchTotalRecords?.toString() + (searchTotalRecords === 1 ? recordLabel : recordsLabel)\n }}\n </span>\n </ng-template>\n </p-table>\n </div>\n </div>\n <p-footer>\n <s-button\n [id]=\"id + '-select-button'\"\n type=\"button\"\n [label]=\"selectLabel\"\n (onClick)=\"select()\"\n sTooltip=\"(ALT + SHIFT + S)\"\n tooltipPosition=\"top\"\n showDelay=\"500\"\n [disabled]=\"!selected?.length\">\n </s-button>\n <s-button\n [id]=\"id + '-cancel-button'\"\n type=\"button\"\n priority=\"link\"\n [label]=\"cancelLabel\"\n (onClick)=\"hideDialog()\"\n sTooltip=\"(ALT + SHIFT + C)\"\n tooltipPosition=\"top\"\n showDelay=\"500\">\n </s-button>\n </p-footer>\n</p-dialog>\n<ng-template #emptyTemplate>\n <span [ngClass]=\"'sds-empty-value'\">{{ emptyFieldLabel }}</span>\n</ng-template>\n",
2412
2412
  providers: [
2413
2413
  {
2414
2414
  provide: NG_VALUE_ACCESSOR,
@@ -3102,6 +3102,12 @@ var TooltipComponent = /** @class */ (function () {
3102
3102
  return TooltipComponent;
3103
3103
  }());
3104
3104
 
3105
+ var MobileBehavior;
3106
+ (function (MobileBehavior) {
3107
+ MobileBehavior["Pressing"] = "pressing";
3108
+ MobileBehavior["Tap"] = "tap";
3109
+ })(MobileBehavior || (MobileBehavior = {}));
3110
+
3105
3111
  var TooltipDirective = /** @class */ (function () {
3106
3112
  function TooltipDirective(elementRef, appRef, componentFactoryResolver, injector) {
3107
3113
  this.elementRef = elementRef;
@@ -3111,6 +3117,7 @@ var TooltipDirective = /** @class */ (function () {
3111
3117
  this.position = TooltipPosition.Top;
3112
3118
  this.showDelay = 500;
3113
3119
  this.escape = false;
3120
+ this.mobileBehavior = MobileBehavior.Pressing;
3114
3121
  this.componentRef = null;
3115
3122
  }
3116
3123
  TooltipDirective.prototype.ngOnInit = function () {
@@ -3119,20 +3126,32 @@ var TooltipDirective = /** @class */ (function () {
3119
3126
  TooltipDirective.prototype.ngOnDestroy = function () {
3120
3127
  this.destroy();
3121
3128
  };
3129
+ // whenever the component with the tooltip is clicked I destroy the tooltip.
3130
+ // whenever a key is pressed on the component with the tooltip I destroy the tooltip.
3131
+ TooltipDirective.prototype.onClick = function () {
3132
+ if (!navigator.userAgent.match(/Android/i) && !navigator.userAgent.match(/iPhone/i)) {
3133
+ this.destroy();
3134
+ }
3135
+ };
3136
+ // whenever you touch outside the component with the tooltip I destroy the tooltip.
3137
+ TooltipDirective.prototype.onDocumentTouchStart = function () {
3138
+ this.destroy();
3139
+ };
3122
3140
  TooltipDirective.prototype.onMouseEnter = function () {
3123
3141
  this.createTootip();
3124
3142
  };
3125
3143
  TooltipDirective.prototype.onMouseLeave = function () {
3126
3144
  this.setHideTooltipTimeout();
3127
3145
  };
3128
- TooltipDirective.prototype.onTouchStart = function ($event) {
3129
- $event.preventDefault();
3146
+ TooltipDirective.prototype.onTouchStart = function () {
3130
3147
  window.clearTimeout(this.touchTimeout);
3131
- this.touchTimeout = window.setTimeout(this.createTootip.bind(this), 500);
3148
+ this.touchTimeout = window.setTimeout(this.createTootip.bind(this), this.mobileBehavior === MobileBehavior.Pressing ? this.showDelay : 0);
3132
3149
  };
3133
3150
  TooltipDirective.prototype.onTouchEnd = function () {
3134
- window.clearTimeout(this.touchTimeout);
3135
- this.setHideTooltipTimeout();
3151
+ if (this.mobileBehavior === MobileBehavior.Pressing) {
3152
+ window.clearTimeout(this.touchTimeout);
3153
+ this.setHideTooltipTimeout();
3154
+ }
3136
3155
  };
3137
3156
  TooltipDirective.prototype.validatePosition = function () {
3138
3157
  var containsPosition = [
@@ -3159,6 +3178,9 @@ var TooltipDirective = /** @class */ (function () {
3159
3178
  document.body.appendChild(domElem);
3160
3179
  this.setTooltipComponentProperties();
3161
3180
  this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);
3181
+ if (this.displayTime) {
3182
+ window.setTimeout(this.destroy.bind(this), this.displayTime);
3183
+ }
3162
3184
  }
3163
3185
  };
3164
3186
  TooltipDirective.prototype.showTooltip = function () {
@@ -3167,7 +3189,7 @@ var TooltipDirective = /** @class */ (function () {
3167
3189
  }
3168
3190
  };
3169
3191
  TooltipDirective.prototype.setTooltipComponentProperties = function () {
3170
- var margin = 8;
3192
+ var margin = 20;
3171
3193
  var anchorSize = 5;
3172
3194
  if (this.componentRef !== null) {
3173
3195
  this.componentRef.instance.tooltip = this.tooltip;
@@ -3285,9 +3307,22 @@ var TooltipDirective = /** @class */ (function () {
3285
3307
  __decorate([
3286
3308
  Input()
3287
3309
  ], TooltipDirective.prototype, "showDelay", void 0);
3310
+ __decorate([
3311
+ Input()
3312
+ ], TooltipDirective.prototype, "displayTime", void 0);
3288
3313
  __decorate([
3289
3314
  Input()
3290
3315
  ], TooltipDirective.prototype, "escape", void 0);
3316
+ __decorate([
3317
+ Input()
3318
+ ], TooltipDirective.prototype, "mobileBehavior", void 0);
3319
+ __decorate([
3320
+ HostListener("click"),
3321
+ HostListener("keydown")
3322
+ ], TooltipDirective.prototype, "onClick", null);
3323
+ __decorate([
3324
+ HostListener("document:touchstart")
3325
+ ], TooltipDirective.prototype, "onDocumentTouchStart", null);
3291
3326
  __decorate([
3292
3327
  HostListener("mouseenter")
3293
3328
  ], TooltipDirective.prototype, "onMouseEnter", null);
@@ -3295,7 +3330,7 @@ var TooltipDirective = /** @class */ (function () {
3295
3330
  HostListener("mouseleave")
3296
3331
  ], TooltipDirective.prototype, "onMouseLeave", null);
3297
3332
  __decorate([
3298
- HostListener("touchstart", ["$event"])
3333
+ HostListener("touchstart")
3299
3334
  ], TooltipDirective.prototype, "onTouchStart", null);
3300
3335
  __decorate([
3301
3336
  HostListener("touchend")
@@ -3330,8 +3365,8 @@ var InfoSignComponent = /** @class */ (function () {
3330
3365
  InfoSignComponent = __decorate([
3331
3366
  Component({
3332
3367
  selector: "s-info-sign-component",
3333
- template: "<span class=\"info-sign\">\n <span *ngTemplateOutlet=\"templateRef\"></span>\n <i\n class=\"info-sign__icon fa fa-info-circle\"\n aria-hidden=\"true\"\n [sTooltip]=\"tooltip\"\n [escape]=\"false\"\n tooltipPosition=\"right\"\n showDelay=\"0\">\n </i>\n</span>",
3334
- styles: [".info-sign{-ms-flex-align:baseline;align-items:baseline;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:start;justify-content:flex-start}.info-sign .info-sign__icon{padding-left:12px}"]
3368
+ template: "<span class=\"info-sign\">\n <span *ngTemplateOutlet=\"templateRef\"></span>\n <i\n class=\"info-sign__icon fa fa-info-circle\"\n aria-hidden=\"true\"\n [sTooltip]=\"tooltip\"\n [escape]=\"false\"\n tooltipPosition=\"top\"\n [displayTime]=\"5000\"\n mobileBehavior=\"tap\"\n showDelay=\"0\">\n </i>\n</span>",
3369
+ styles: [".info-sign{-ms-flex-align:baseline;align-items:baseline;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:start;justify-content:flex-start}.info-sign .info-sign__icon{padding:0 12px}"]
3335
3370
  })
3336
3371
  ], InfoSignComponent);
3337
3372
  return InfoSignComponent;
@@ -4738,9 +4773,12 @@ var TablePagingComponent = /** @class */ (function () {
4738
4773
  this.enableExportSelectedRecords = true;
4739
4774
  }
4740
4775
  TablePagingComponent.prototype.ngOnChanges = function (changes) {
4741
- this.totalRecordsText = this.translate.instant(this.getTranslatePrefix() + "total_records", {
4742
- value: changes.totalRecords.currentValue
4743
- });
4776
+ var _a;
4777
+ if ((_a = changes.totalRecords) === null || _a === void 0 ? void 0 : _a.currentValue) {
4778
+ this.totalRecordsText = this.translate.instant(this.getTranslatePrefix() + "total_records", {
4779
+ value: changes.totalRecords.currentValue
4780
+ });
4781
+ }
4744
4782
  };
4745
4783
  TablePagingComponent.prototype.getTranslatePrefix = function () {
4746
4784
  return this.hostProjectConfigs.domain + "." + this.hostProjectConfigs.service + ".";
@@ -4750,6 +4788,7 @@ var TablePagingComponent = /** @class */ (function () {
4750
4788
  };
4751
4789
  TablePagingComponent.prototype.getActions = function () {
4752
4790
  var _this = this;
4791
+ var _a;
4753
4792
  var actions = [
4754
4793
  {
4755
4794
  id: "exportCurrentPage",
@@ -4771,6 +4810,14 @@ var TablePagingComponent = /** @class */ (function () {
4771
4810
  command: function () { return _this.exportAllRecords(); }
4772
4811
  });
4773
4812
  }
4813
+ if ((_a = this.customActions) === null || _a === void 0 ? void 0 : _a.length) {
4814
+ var customMenus = this.customActions.map(function (p, index) { return ({
4815
+ id: "customAction_" + index,
4816
+ label: p.label,
4817
+ command: p.command
4818
+ }); });
4819
+ actions.push.apply(actions, __spread(customMenus));
4820
+ }
4774
4821
  return actions;
4775
4822
  };
4776
4823
  TablePagingComponent.prototype.validateComponent = function () {
@@ -4917,6 +4964,9 @@ var TablePagingComponent = /** @class */ (function () {
4917
4964
  __decorate([
4918
4965
  Input()
4919
4966
  ], TablePagingComponent.prototype, "enableExportSelectedRecords", void 0);
4967
+ __decorate([
4968
+ Input()
4969
+ ], TablePagingComponent.prototype, "customActions", void 0);
4920
4970
  __decorate([
4921
4971
  Output()
4922
4972
  ], TablePagingComponent.prototype, "totalRecordsText", void 0);