@energycap/components 0.25.1 → 0.26.0

package/bundles/energycap-components.umd.js

@@ -5661,9 +5661,13 @@
             this.el = el;
             /**
              * Number of the current page.
-             * Initial value is 1, can be overriden to change the starting page number.
+             * Initial value is 1, can be overridden to change the starting page number.
              */
             this.pageNumber = 1;
+            /**
+             * Maximum number of page tabs to show
+             */
+            this.maxTabs = 10;
             /**
              * Emits when the page changes.
              *
@@ -5763,14 +5767,15 @@
             //keep building menu items of the form 1-10, 11-20, 21-30, etc until  
             //end >= lastPage, which means we've found the range that contains the last page.
             var start = 1;
-            var end = 10;
+            var maxTabs = this.maxTabs || 10;
+            var end = maxTabs;
             while (end < lastPage) {
                 this.dropdownItems.push({
                     label: start + "-" + end,
                     value: { firstPage: start, lastPage: end }
                 });
-                start = start + 10;
-                end = end + 10;
+                start = start + maxTabs;
+                end = end + maxTabs;
             }
             //add the menu item that contains the last page.
             this.dropdownItems.push({
@@ -5797,6 +5802,7 @@
         totalItems: [{ type: i0.Input }],
         pageSize: [{ type: i0.Input }],
         pageNumber: [{ type: i0.Input }],
+        maxTabs: [{ type: i0.Input }],
         pageChanged: [{ type: i0.Output }]
     };
 
@@ -5922,6 +5928,10 @@
               }
             */
             this.pageable = false;
+            /**
+           * Maximum number of page tabs to show
+           */
+            this.maxTabs = 10;
             /**
              * Makes the searchbox readonly if true.
              */
@@ -6077,7 +6087,7 @@
     SearchableTableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'ec-searchable-table',
-                    template: "<header *ngIf=\"!hideHeader\"\r\n        class=\"d-flex flex-shrink align-items-center mb-3\">\r\n  <ec-textbox id=\"{{id}}_searchbox\"\r\n              *ngIf=\"!hideSearchControl\"\r\n              class=\"mb-0 flex-grow mr-2\"\r\n              [autofocus]=\"autofocus\"\r\n              [formModel]=\"searchModel\"\r\n              [tabindex]=\"searchboxTabIndex\"\r\n              [placeholder]=\"searchboxPlaceholder\"\r\n              [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n  <div class=\"flex-grow\">\r\n    <ng-content select=\".searchable-table-controls\"></ng-content>\r\n  </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n         class=\"card m-0 d-flex flex-column bg-content\"\r\n         [class.is-translucent]=\"status.status !== 'error'\"\r\n         ecOverlay\r\n         [status]=\"status.status\"\r\n         [message]=\"status.message\"\r\n         [displayAsMask]=\"true\">\r\n  <ng-content select=\".card-header\"></ng-content>\r\n  <ec-table id=\"{{id}}_table\"\r\n            class=\"flex-shrink-max {{tableClasses}}\"\r\n            [class.is-fixed]=\"tableLayoutFixed\"\r\n            [sortable]=\"sortable\"\r\n            [sort]=\"sort\"\r\n            (sortChange)=\"onSortChange($event)\"\r\n            [resizable]=\"resizable\"\r\n            [scrollable]=\"true\"\r\n            [selectionContext]=\"selectionContext\"\r\n            [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n            [resizableColumns]=\"resizableColumns\">\r\n    <ng-content></ng-content>\r\n  </ec-table>\r\n\r\n  <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n  <footer *ngIf=\"!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!\" class=\"d-flex flex-shrink align-items-center border-top\">\r\n    <ec-table-pagination id=\"{{id}}_pager\"\r\n                         class=\"font-color-primary\"\r\n                         [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n                         [pageSize]=\"pageSize\"\r\n                         [pageNumber]=\"pageInfo?.pageNumber\"\r\n                         (pageChanged)=\"onPageChange($event)\">\r\n    </ec-table-pagination>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto mr-2 font-color-hint text-truncate\" \r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n\r\n  <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n  <footer *ngIf=\"(!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption\"\r\n          class=\"p-2 d-flex\"\r\n          [class.has-results]=\"searchResults?.items?.length\">\r\n    <ng-content *ngIf=\"!tableCaption\"\r\n                select=\".searchable-table-footer\"></ng-content>\r\n    <div id=\"tableCaption\"\r\n         *ngIf=\"tableCaption\"\r\n         [innerHTML]=\"tableCaption\"></div>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto text-truncate\"\r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n</section>",
+                    template: "<header *ngIf=\"!hideHeader\"\r\n        class=\"d-flex flex-shrink align-items-center mb-3\">\r\n  <ec-textbox id=\"{{id}}_searchbox\"\r\n              *ngIf=\"!hideSearchControl\"\r\n              class=\"mb-0 flex-grow mr-2\"\r\n              [autofocus]=\"autofocus\"\r\n              [formModel]=\"searchModel\"\r\n              [tabindex]=\"searchboxTabIndex\"\r\n              [placeholder]=\"searchboxPlaceholder\"\r\n              [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n  <div class=\"flex-grow\">\r\n    <ng-content select=\".searchable-table-controls\"></ng-content>\r\n  </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n         class=\"card m-0 d-flex flex-column bg-content\"\r\n         [class.is-translucent]=\"status.status !== 'error'\"\r\n         ecOverlay\r\n         [status]=\"status.status\"\r\n         [message]=\"status.message\"\r\n         [displayAsMask]=\"true\">\r\n  <ng-content select=\".card-header\"></ng-content>\r\n  <ec-table id=\"{{id}}_table\"\r\n            class=\"flex-shrink-max {{tableClasses}}\"\r\n            [class.is-fixed]=\"tableLayoutFixed\"\r\n            [sortable]=\"sortable\"\r\n            [sort]=\"sort\"\r\n            (sortChange)=\"onSortChange($event)\"\r\n            [resizable]=\"resizable\"\r\n            [scrollable]=\"true\"\r\n            [selectionContext]=\"selectionContext\"\r\n            [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n            [resizableColumns]=\"resizableColumns\">\r\n    <ng-content></ng-content>\r\n  </ec-table>\r\n\r\n  <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n  <footer *ngIf=\"!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!\" class=\"d-flex flex-shrink align-items-center border-top\">\r\n    <ec-table-pagination id=\"{{id}}_pager\"\r\n                         class=\"font-color-primary\"\r\n                         [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n                         [pageSize]=\"pageSize\"\r\n                         [maxTabs]=\"maxTabs\"\r\n                         [pageNumber]=\"pageInfo?.pageNumber\"\r\n                         (pageChanged)=\"onPageChange($event)\">\r\n    </ec-table-pagination>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto mr-2 font-color-hint text-truncate\" \r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n\r\n  <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n  <footer *ngIf=\"(!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption\"\r\n          class=\"p-2 d-flex\"\r\n          [class.has-results]=\"searchResults?.items?.length\">\r\n    <ng-content *ngIf=\"!tableCaption\"\r\n                select=\".searchable-table-footer\"></ng-content>\r\n    <div id=\"tableCaption\"\r\n         *ngIf=\"tableCaption\"\r\n         [innerHTML]=\"tableCaption\"></div>\r\n    <div id=\"resultsCount\"\r\n         *ngIf=\"searchResults?.items?.length\"\r\n         class=\"ml-auto text-truncate\"\r\n         title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n  </footer>\r\n</section>",
                     styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:flex;flex:1 1;flex-direction:column;min-height:0}footer{font-size:.75rem;line-height:1rem}footer.has-results{border-top:1px solid rgba(26,26,35,.18);color:rgba(26,26,35,.38);text-align:right}"]
                 },] }
     ];
@@ -6113,6 +6123,7 @@
         hideFooter: [{ type: i0.Input }],
         pageable: [{ type: i0.Input }],
         pageSize: [{ type: i0.Input }],
+        maxTabs: [{ type: i0.Input }],
         searchboxReadonly: [{ type: i0.Input }],
         selectionContext: [{ type: i0.Input }],
         selectionToolbarTemplate: [{ type: i0.Input }],
@@ -7560,6 +7571,7 @@
         function ToastComponent(toastService) {
             this.toastService = toastService;
             this.open = false;
+            this.TOAST_ANIMATION_DURATION = 250;
             this.closed = new i0.EventEmitter();
             this.TIMED_TOAST_DURATION = 4000;
             this.destroyed = new rxjs.Subject();
@@ -7586,8 +7598,11 @@
             this.destroyed.complete();
         };
         ToastComponent.prototype.close = function () {
+            var _this = this;
             this.open = false;
-            this.closed.emit(this.toastItem);
+            rxjs.timer(this.TOAST_ANIMATION_DURATION).subscribe(function () {
+                _this.closed.emit(_this.toastItem);
+            });
         };
         ToastComponent.prototype.closeAfterTimer = function () {
             var _this = this;
@@ -7601,7 +7616,7 @@
         { type: i0.Component, args: [{
                     selector: 'ec-toast',
                     template: "<ec-banner id=\"{{toastItem?.id}}_banner\"\r\n           [type]=\"toastItem?.type\"\r\n           bannerStyle=\"toast\"\r\n           [customIcon]=\"toastItem?.icon\"\r\n           [showCloseBtn]=\"toastItem?.dismissible\"\r\n           [autoHideOnClose]=\"false\"\r\n           (closed)=\"close()\">\r\n  <div class=\"d-flex\">\r\n    <p id=\"{{toastItem?.id}}_message\"\r\n       class=\"mb-0\">{{toastItem?.message}}</p>\r\n    <a id=\"{{toastItem?.id}}_action\"\r\n       *ngIf=\"toastItem?.action && toastItem?.actionLabel\"\r\n       class=\"text-link ml-2\"\r\n       (click)=\"toastItem!.action!()\">{{toastItem?.actionLabel | translate}}</a>\r\n  </div>\r\n</ec-banner>",
-                    styles: [":host{bottom:-100%;display:block;left:50%;position:fixed;transform:translateX(-50%);z-index:1000}:host.open{bottom:calc(var(--toast-bottom, 0rem) + 1.5rem)}"]
+                    styles: [":host{bottom:0;display:block;left:50%;position:fixed;transform:translate(-50%,100%);transition:transform var(--toast-animation-duration,.25s);transition-timing-function:ease-in;z-index:70}:host.is-open{transform:translate(-50%,calc(var(--toast-bottom, 0rem)*-1 - 1.5rem));transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}"]
                 },] }
     ];
     ToastComponent.ctorParameters = function () { return [
@@ -7610,7 +7625,8 @@
     ToastComponent.propDecorators = {
         toastItem: [{ type: i0.Input }],
         id: [{ type: i0.HostBinding, args: ['attr.id',] }],
-        open: [{ type: i0.HostBinding, args: ['class.open',] }],
+        open: [{ type: i0.HostBinding, args: ['class.is-open',] }],
+        TOAST_ANIMATION_DURATION: [{ type: i0.HostBinding, args: ['style.--toast-animation-duration.ms',] }],
         closed: [{ type: i0.Output }]
     };
 
@@ -7683,7 +7699,7 @@
          */
         ToasterComponent.prototype.updateDismissibleToastBottom = function () {
             if (this.currentTimedToast && this.timedToastEl) {
-                this.dismissibleToastBottom = this.timedToastEl.nativeElement.offsetHeight + 8;
+                this.dismissibleToastBottom = (this.timedToastEl.nativeElement.offsetHeight + 8) / 16;
             }
             else {
                 this.dismissibleToastBottom = 0;
@@ -7694,7 +7710,7 @@
     ToasterComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'ec-toaster',
-                    template: "<ec-toast [toastItem]=\"currentDismissibleToast\"\r\n          [style.--toast-bottom.px]=\"dismissibleToastBottom\"\r\n          (closed)=\"updateVisibleToast($event)\">\r\n</ec-toast>\r\n\r\n<ec-toast #timedToast\r\n          [toastItem]=\"currentTimedToast\"\r\n          (closed)=\"updateVisibleToast($event)\">\r\n</ec-toast>\r\n"
+                    template: "<ec-toast [toastItem]=\"currentDismissibleToast\"\r\n          [style.--toast-bottom.rem]=\"dismissibleToastBottom\"\r\n          (closed)=\"updateVisibleToast($event)\">\r\n</ec-toast>\r\n\r\n<ec-toast #timedToast\r\n          [toastItem]=\"currentTimedToast\"\r\n          (closed)=\"updateVisibleToast($event)\">\r\n</ec-toast>"
                 },] }
     ];
     ToasterComponent.ctorParameters = function () { return [