@slickgrid-universal/custom-footer-component - npm Package Compare versions

Comparing version 0.19.2 to 1.1.0

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+# [1.1.0](https://github.com/ghiscoding/slickgrid-universal/compare/v0.19.2...v1.1.0) (2021-12-11)
+
+**Note:** Version bump only for package @slickgrid-universal/custom-footer-component
+
+
+
+
+
+
 ## [0.19.2](https://github.com/ghiscoding/slickgrid-universal/compare/v0.19.1...v0.19.2) (2021-11-19)
@@ -8,0 +17,0 @@

dist/commonjs/slick-footer.component.js

@@ -144,12 +144,14 @@ "use strict";
     createFooterContainer(gridParentContainerElm) {
-        const footerElm = document.createElement('div');
-        footerElm.className = `slick-custom-footer ${this.gridUid}`;
-        footerElm.style.width = '100%';
-        footerElm.style.height = `${this.customFooterOptions.footerHeight || 20}px`;
-        const leftFooterElm = document.createElement('div');
-        leftFooterElm.className = `left-footer ${this.customFooterOptions.leftContainerClass}`;
-        leftFooterElm.innerHTML = (0, common_1.sanitizeTextByAvailableSanitizer)(this.gridOptions, this.customFooterOptions.leftFooterText || '');
-        const rightFooterElm = this.createFooterRightContainer();
-        footerElm.appendChild(leftFooterElm);
-        footerElm.appendChild(rightFooterElm);
+        const footerElm = (0, common_1.createDomElement)('div', {
+            className: `slick-custom-footer ${this.gridUid}`,
+            style: {
+                width: '100%',
+                height: `${this.customFooterOptions.footerHeight || 20}px`,
+            }
+        });
+        footerElm.appendChild((0, common_1.createDomElement)('div', {
+            className: `left-footer ${this.customFooterOptions.leftContainerClass}`,
+            innerHTML: (0, common_1.sanitizeTextByAvailableSanitizer)(this.gridOptions, this.customFooterOptions.leftFooterText || '')
+        }));
+        footerElm.appendChild(this.createFooterRightContainer());
         this._footerElement = footerElm;
@@ -163,4 +165,3 @@ if ((gridParentContainerElm === null || gridParentContainerElm === void 0 ? void 0 : gridParentContainerElm.appendChild) && this._footerElement) {
         var _a, _b, _c, _d, _f, _g, _h, _j;
-        const rightFooterElm = document.createElement('div');
-        rightFooterElm.className = `right-footer ${this.customFooterOptions.rightContainerClass || ''}`;
+        const rightFooterElm = (0, common_1.createDomElement)('div', { className: `right-footer ${this.customFooterOptions.rightContainerClass || ''}` });
         if (!this._isRightFooterOriginallyEmpty) {
@@ -171,4 +172,3 @@ rightFooterElm.innerHTML = (0, common_1.sanitizeTextByAvailableSanitizer)(this.gridOptions, this.customFooterOptions.rightFooterText || '');
             rightFooterElm.classList.add('metrics');
-            const lastUpdateElm = document.createElement('span');
-            lastUpdateElm.className = 'timestamp';
+            const lastUpdateElm = (0, common_1.createDomElement)('span', { className: 'timestamp' });
             if (!this.customFooterOptions.hideLastUpdateTimestamp) {
@@ -180,8 +180,5 @@ const footerLastUpdateElm = this.createFooterLastUpdate();
             }
-            const itemCountElm = document.createElement('span');
-            itemCountElm.className = 'item-count';
-            itemCountElm.textContent = `${(_b = (_a = this.metrics) === null || _a === void 0 ? void 0 : _a.itemCount) !== null && _b !== void 0 ? _b : '0'}`;
             // last update elements
             rightFooterElm.appendChild(lastUpdateElm);
-            rightFooterElm.appendChild(itemCountElm);
+            rightFooterElm.appendChild((0, common_1.createDomElement)('span', { className: 'item-count', textContent: `${(_b = (_a = this.metrics) === null || _a === void 0 ? void 0 : _a.itemCount) !== null && _b !== void 0 ? _b : '0'}` }));
             // total count element (unless hidden)
@@ -191,19 +188,10 @@ if (!this.customFooterOptions.hideTotalItemCount) {
                 rightFooterElm.appendChild(document.createTextNode('\r\n'));
-                const textOfElm = document.createElement('span');
-                textOfElm.className = 'text-of';
-                textOfElm.textContent = ` ${(_d = (_c = this.customFooterOptions.metricTexts) === null || _c === void 0 ? void 0 : _c.of) !== null && _d !== void 0 ? _d : 'of'} `;
-                rightFooterElm.appendChild(textOfElm);
+                rightFooterElm.appendChild((0, common_1.createDomElement)('span', { className: 'text-of', textContent: ` ${(_d = (_c = this.customFooterOptions.metricTexts) === null || _c === void 0 ? void 0 : _c.of) !== null && _d !== void 0 ? _d : 'of'} ` }));
                 // add another carriage return which will add a space after the span
                 rightFooterElm.appendChild(document.createTextNode('\r\n'));
-                const totalCountElm = document.createElement('span');
-                totalCountElm.className = 'total-count';
-                totalCountElm.textContent = `${(_g = (_f = this.metrics) === null || _f === void 0 ? void 0 : _f.totalItemCount) !== null && _g !== void 0 ? _g : '0'}`;
-                rightFooterElm.appendChild(totalCountElm);
+                rightFooterElm.appendChild((0, common_1.createDomElement)('span', { className: 'total-count', textContent: `${(_g = (_f = this.metrics) === null || _f === void 0 ? void 0 : _f.totalItemCount) !== null && _g !== void 0 ? _g : '0'}` }));
             }
             // add carriage return which will add a space before the span
             rightFooterElm.appendChild(document.createTextNode('\r\n'));
-            const textItemsElm = document.createElement('span');
-            textItemsElm.className = 'text-items';
-            textItemsElm.textContent = ` ${(_j = (_h = this.customFooterOptions.metricTexts) === null || _h === void 0 ? void 0 : _h.items) !== null && _j !== void 0 ? _j : 'items'} `;
-            rightFooterElm.appendChild(textItemsElm);
+            rightFooterElm.appendChild((0, common_1.createDomElement)('span', { className: 'text-items', textContent: ` ${(_j = (_h = this.customFooterOptions.metricTexts) === null || _h === void 0 ? void 0 : _h.items) !== null && _j !== void 0 ? _j : 'items'} ` }));
         }
@@ -218,16 +206,7 @@ return rightFooterElm;
         const lastUpdateTimestamp = moment((_d = this.metrics) === null || _d === void 0 ? void 0 : _d.endTime).format(this.customFooterOptions.dateFormat);
-        const lastUpdateElm = document.createElement('span');
-        lastUpdateElm.className = 'text-last-update';
-        lastUpdateElm.textContent = lastUpdateText;
-        const lastUpdateTimestampElm = document.createElement('span');
-        lastUpdateTimestampElm.className = 'last-update-timestamp';
-        lastUpdateTimestampElm.textContent = lastUpdateTimestamp;
-        const separatorElm = document.createElement('span');
-        separatorElm.className = 'separator';
-        separatorElm.textContent = ` ${this.customFooterOptions.metricSeparator || ''} `;
-        const lastUpdateContainerElm = document.createElement('span');
-        lastUpdateContainerElm.appendChild(lastUpdateElm);
+        const lastUpdateContainerElm = (0, common_1.createDomElement)('span');
+        lastUpdateContainerElm.appendChild((0, common_1.createDomElement)('span', { className: 'text-last-update', textContent: lastUpdateText }));
         lastUpdateContainerElm.appendChild(document.createTextNode('\r\n'));
-        lastUpdateContainerElm.appendChild(lastUpdateTimestampElm);
-        lastUpdateContainerElm.appendChild(separatorElm);
+        lastUpdateContainerElm.appendChild((0, common_1.createDomElement)('span', { className: 'last-update-timestamp', textContent: lastUpdateTimestamp }));
+        lastUpdateContainerElm.appendChild((0, common_1.createDomElement)('span', { className: 'separator', textContent: ` ${this.customFooterOptions.metricSeparator || ''} ` }));
         return lastUpdateContainerElm;
@@ -247,4 +226,3 @@ }
             customFooterOptions.leftFooterText = `0 ${selectedCountText}`;
-            const onSelectedRowsChangedHandler = this.grid.onSelectedRowsChanged;
-            this._eventHandler.subscribe(onSelectedRowsChangedHandler, (_e, args) => {
+            this._eventHandler.subscribe(this.grid.onSelectedRowsChanged, (_e, args) => {
                 var _a, _b, _c, _d;
@@ -251,0 +229,0 @@ this._selectedRowCount = args.rows.length;

dist/esm/slick-footer.component.js

 import * as moment_ from 'moment-mini';
 const moment = moment_['default'] || moment_; // patch to fix rollup "moment has no default export" issue, document here https://github.com/rollup/rollup/issues/670
-import { Constants, sanitizeTextByAvailableSanitizer, } from '@slickgrid-universal/common';
+import { Constants, createDomElement, sanitizeTextByAvailableSanitizer, } from '@slickgrid-universal/common';
 import { BindingHelper } from '@slickgrid-universal/binding';
@@ -141,12 +141,14 @@ export class SlickFooterComponent {
     createFooterContainer(gridParentContainerElm) {
-        const footerElm = document.createElement('div');
-        footerElm.className = `slick-custom-footer ${this.gridUid}`;
-        footerElm.style.width = '100%';
-        footerElm.style.height = `${this.customFooterOptions.footerHeight || 20}px`;
-        const leftFooterElm = document.createElement('div');
-        leftFooterElm.className = `left-footer ${this.customFooterOptions.leftContainerClass}`;
-        leftFooterElm.innerHTML = sanitizeTextByAvailableSanitizer(this.gridOptions, this.customFooterOptions.leftFooterText || '');
-        const rightFooterElm = this.createFooterRightContainer();
-        footerElm.appendChild(leftFooterElm);
-        footerElm.appendChild(rightFooterElm);
+        const footerElm = createDomElement('div', {
+            className: `slick-custom-footer ${this.gridUid}`,
+            style: {
+                width: '100%',
+                height: `${this.customFooterOptions.footerHeight || 20}px`,
+            }
+        });
+        footerElm.appendChild(createDomElement('div', {
+            className: `left-footer ${this.customFooterOptions.leftContainerClass}`,
+            innerHTML: sanitizeTextByAvailableSanitizer(this.gridOptions, this.customFooterOptions.leftFooterText || '')
+        }));
+        footerElm.appendChild(this.createFooterRightContainer());
         this._footerElement = footerElm;
@@ -160,4 +162,3 @@ if ((gridParentContainerElm === null || gridParentContainerElm === void 0 ? void 0 : gridParentContainerElm.appendChild) && this._footerElement) {
         var _a, _b, _c, _d, _f, _g, _h, _j;
-        const rightFooterElm = document.createElement('div');
-        rightFooterElm.className = `right-footer ${this.customFooterOptions.rightContainerClass || ''}`;
+        const rightFooterElm = createDomElement('div', { className: `right-footer ${this.customFooterOptions.rightContainerClass || ''}` });
         if (!this._isRightFooterOriginallyEmpty) {
@@ -168,4 +169,3 @@ rightFooterElm.innerHTML = sanitizeTextByAvailableSanitizer(this.gridOptions, this.customFooterOptions.rightFooterText || '');
             rightFooterElm.classList.add('metrics');
-            const lastUpdateElm = document.createElement('span');
-            lastUpdateElm.className = 'timestamp';
+            const lastUpdateElm = createDomElement('span', { className: 'timestamp' });
             if (!this.customFooterOptions.hideLastUpdateTimestamp) {
@@ -177,8 +177,5 @@ const footerLastUpdateElm = this.createFooterLastUpdate();
             }
-            const itemCountElm = document.createElement('span');
-            itemCountElm.className = 'item-count';
-            itemCountElm.textContent = `${(_b = (_a = this.metrics) === null || _a === void 0 ? void 0 : _a.itemCount) !== null && _b !== void 0 ? _b : '0'}`;
             // last update elements
             rightFooterElm.appendChild(lastUpdateElm);
-            rightFooterElm.appendChild(itemCountElm);
+            rightFooterElm.appendChild(createDomElement('span', { className: 'item-count', textContent: `${(_b = (_a = this.metrics) === null || _a === void 0 ? void 0 : _a.itemCount) !== null && _b !== void 0 ? _b : '0'}` }));
             // total count element (unless hidden)
@@ -188,19 +185,10 @@ if (!this.customFooterOptions.hideTotalItemCount) {
                 rightFooterElm.appendChild(document.createTextNode('\r\n'));
-                const textOfElm = document.createElement('span');
-                textOfElm.className = 'text-of';
-                textOfElm.textContent = ` ${(_d = (_c = this.customFooterOptions.metricTexts) === null || _c === void 0 ? void 0 : _c.of) !== null && _d !== void 0 ? _d : 'of'} `;
-                rightFooterElm.appendChild(textOfElm);
+                rightFooterElm.appendChild(createDomElement('span', { className: 'text-of', textContent: ` ${(_d = (_c = this.customFooterOptions.metricTexts) === null || _c === void 0 ? void 0 : _c.of) !== null && _d !== void 0 ? _d : 'of'} ` }));
                 // add another carriage return which will add a space after the span
                 rightFooterElm.appendChild(document.createTextNode('\r\n'));
-                const totalCountElm = document.createElement('span');
-                totalCountElm.className = 'total-count';
-                totalCountElm.textContent = `${(_g = (_f = this.metrics) === null || _f === void 0 ? void 0 : _f.totalItemCount) !== null && _g !== void 0 ? _g : '0'}`;
-                rightFooterElm.appendChild(totalCountElm);
+                rightFooterElm.appendChild(createDomElement('span', { className: 'total-count', textContent: `${(_g = (_f = this.metrics) === null || _f === void 0 ? void 0 : _f.totalItemCount) !== null && _g !== void 0 ? _g : '0'}` }));
             }
             // add carriage return which will add a space before the span
             rightFooterElm.appendChild(document.createTextNode('\r\n'));
-            const textItemsElm = document.createElement('span');
-            textItemsElm.className = 'text-items';
-            textItemsElm.textContent = ` ${(_j = (_h = this.customFooterOptions.metricTexts) === null || _h === void 0 ? void 0 : _h.items) !== null && _j !== void 0 ? _j : 'items'} `;
-            rightFooterElm.appendChild(textItemsElm);
+            rightFooterElm.appendChild(createDomElement('span', { className: 'text-items', textContent: ` ${(_j = (_h = this.customFooterOptions.metricTexts) === null || _h === void 0 ? void 0 : _h.items) !== null && _j !== void 0 ? _j : 'items'} ` }));
         }
@@ -215,16 +203,7 @@ return rightFooterElm;
         const lastUpdateTimestamp = moment((_d = this.metrics) === null || _d === void 0 ? void 0 : _d.endTime).format(this.customFooterOptions.dateFormat);
-        const lastUpdateElm = document.createElement('span');
-        lastUpdateElm.className = 'text-last-update';
-        lastUpdateElm.textContent = lastUpdateText;
-        const lastUpdateTimestampElm = document.createElement('span');
-        lastUpdateTimestampElm.className = 'last-update-timestamp';
-        lastUpdateTimestampElm.textContent = lastUpdateTimestamp;
-        const separatorElm = document.createElement('span');
-        separatorElm.className = 'separator';
-        separatorElm.textContent = ` ${this.customFooterOptions.metricSeparator || ''} `;
-        const lastUpdateContainerElm = document.createElement('span');
-        lastUpdateContainerElm.appendChild(lastUpdateElm);
+        const lastUpdateContainerElm = createDomElement('span');
+        lastUpdateContainerElm.appendChild(createDomElement('span', { className: 'text-last-update', textContent: lastUpdateText }));
         lastUpdateContainerElm.appendChild(document.createTextNode('\r\n'));
-        lastUpdateContainerElm.appendChild(lastUpdateTimestampElm);
-        lastUpdateContainerElm.appendChild(separatorElm);
+        lastUpdateContainerElm.appendChild(createDomElement('span', { className: 'last-update-timestamp', textContent: lastUpdateTimestamp }));
+        lastUpdateContainerElm.appendChild(createDomElement('span', { className: 'separator', textContent: ` ${this.customFooterOptions.metricSeparator || ''} ` }));
         return lastUpdateContainerElm;
@@ -244,4 +223,3 @@ }
             customFooterOptions.leftFooterText = `0 ${selectedCountText}`;
-            const onSelectedRowsChangedHandler = this.grid.onSelectedRowsChanged;
-            this._eventHandler.subscribe(onSelectedRowsChangedHandler, (_e, args) => {
+            this._eventHandler.subscribe(this.grid.onSelectedRowsChanged, (_e, args) => {
                 var _a, _b, _c, _d;
@@ -248,0 +226,0 @@ this._selectedRowCount = args.rows.length;

package.json

 {
   "name": "@slickgrid-universal/custom-footer-component",
-  "version": "0.19.2",
+  "version": "1.1.0",
   "description": "Slick Custom Footer Component - Vanilla Implementation of a Custom Footer Component",
@@ -58,3 +58,3 @@ "main": "dist/commonjs/index.js",
   },
-  "gitHead": "ea7000e3c627584b9a3cc524e44235b2f8652884"
+  "gitHead": "fd29e770b19fc58a0b7fdd08769a03a2e3f5456d"
 }

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

66017

decreased by-4.05%

Lines of code

582

decreased by-7.03%

No dependency changes