sling-web-component-table - npm Package Compare versions

Comparing version 0.2.24 to 0.2.25

dist/cjs/component/Table.js

@@ -10,8 +10,11 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n      <style>\n        .tabular {\n  width: 100%;\n  text-align: center;\n  font-family: arial;\n  border-spacing: 0;\n  border-collapse: separate;\n}\n\n.tabular__header_hidden {\n  display: none;\n}\n\n.tabular__title {\n  color: #fff;\n  border: var(--header-border, 1px solid #0c9e43);\n  background: var(--header-background, #0db14b);\n  text-transform: uppercase;\n  font-weight: 700;\n  padding: 14px 12px;\n  margin: 0;\n  white-space: nowrap;\n}\n\n.tabular__row {\n  background: var(--row-background, #fff);\n}\n\n.tabular__row:nth-child(2n) {\n  background: var(--even-row-background, #fafafa);\n}\n\n.tabular_clickablerows .tabular__row {\n  cursor: pointer;\n}\n\n.tabular_clickablerows .tabular__row:hover {\n  background: var(--row-clickable-background, #f6fbf4);\n}\n\n.tabular_clickablerows .tabular__row:nth-child(2n):hover {\n  background: var(--row-clickable-background, #f6fbf4);\n}\n\n.tabular__title + .tabular__title {\n  border-left: none;\n}\n\n.tabular__cell {\n  color: var(--cell-color, #666);\n  border: var(--cell-border, solid 1px #ddd);\n  border-top: none;\n  padding: 15px 12px;\n  margin-top: 0;\n}\n\n.tabular__cell + .tabular__cell {\n  border-left: none;\n}\n\n.tabular__header_hidden + .tabular__body .tabular__row:nth-child(1) .tabular__cell {\n  border-top: var(--cell-border, solid 1px #ddd);\n}\n\n:host {\n  display: block;\n}\n\n      </style>\n      <table class$="tabular', '">\n        <colgroup>\n          ', '\n        </colgroup>\n        <thead class$="tabular__header', '">\n          <tr>\n            ', '\n          </tr>\n        </thead>\n        <tbody class="tabular__body">\n          ', '\n        </tbody>\n      </table>\n    '], ['\n      <style>\n        .tabular {\n  width: 100%;\n  text-align: center;\n  font-family: arial;\n  border-spacing: 0;\n  border-collapse: separate;\n}\n\n.tabular__header_hidden {\n  display: none;\n}\n\n.tabular__title {\n  color: #fff;\n  border: var(--header-border, 1px solid #0c9e43);\n  background: var(--header-background, #0db14b);\n  text-transform: uppercase;\n  font-weight: 700;\n  padding: 14px 12px;\n  margin: 0;\n  white-space: nowrap;\n}\n\n.tabular__row {\n  background: var(--row-background, #fff);\n}\n\n.tabular__row:nth-child(2n) {\n  background: var(--even-row-background, #fafafa);\n}\n\n.tabular_clickablerows .tabular__row {\n  cursor: pointer;\n}\n\n.tabular_clickablerows .tabular__row:hover {\n  background: var(--row-clickable-background, #f6fbf4);\n}\n\n.tabular_clickablerows .tabular__row:nth-child(2n):hover {\n  background: var(--row-clickable-background, #f6fbf4);\n}\n\n.tabular__title + .tabular__title {\n  border-left: none;\n}\n\n.tabular__cell {\n  color: var(--cell-color, #666);\n  border: var(--cell-border, solid 1px #ddd);\n  border-top: none;\n  padding: 15px 12px;\n  margin-top: 0;\n}\n\n.tabular__cell + .tabular__cell {\n  border-left: none;\n}\n\n.tabular__header_hidden + .tabular__body .tabular__row:nth-child(1) .tabular__cell {\n  border-top: var(--cell-border, solid 1px #ddd);\n}\n\n:host {\n  display: block;\n}\n\n      </style>\n      <table class$="tabular', '">\n        <colgroup>\n          ', '\n        </colgroup>\n        <thead class$="tabular__header', '">\n          <tr>\n            ', '\n          </tr>\n        </thead>\n        <tbody class="tabular__body">\n          ', '\n        </tbody>\n      </table>\n    ']),
+var _templateObject = _taggedTemplateLiteral(['\n      <style>\n        @import url(\'https://fonts.googleapis.com/css?family=Heebo\');\n\n.emd-table {\n  border: 1px solid #C3C8D2;\n  border-collapse: collapse;\n  border-radius: 2px;\n  color: #424B54;\n  font-family: \'Heebo\', sans-serif;\n  width: 100%;\n}\n\n.emd-table__header_hidden {\n  display: none;\n}\n\n.emd-table__title {\n  background: #FAFAFC;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 24px;\n  padding: 24px;\n  white-space: nowrap;\n}\n\n.emd-table__row {\n  background: #ffffff;\n}\n\n.emd-table_row_success {\n  border-left: 2px #31cd65;\n}\n\n.emd-table_clickablerows .emd-table__row {\n  cursor: pointer;\n}\n\n.emd-table_clickablerows .emd-table__row:hover {\n  background: #f6fbf4;\n}\n\n.emd-table_clickablerows .emd-table__row:nth-child(2n):hover {\n  background: #f6fbf4;\n}\n\n.emd-table__title + .emd-table__title {\n  border-left: none;\n}\n\n.emd-table__cell {\n  border-top: solid 1px #C3C8D2;\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: 400;\n  padding: 24px;\n}\n\n.emd-table__cell + .emd-table__cell {\n  border-left: none;\n}\n\n.emd-table__header_hidden + .emd-table__body .emd-table__row:nth-child(1) .emd-table__cell {\n  border-top: solid 1px #ddd;\n}\n\n.emd-table__currency {\n  white-space: nowrap;\n}\n\n.emd-table__symbol {\n  color: #96A0AF;\n  font-size: 12px;\n  padding: 8px;\n  text-align: left;\n}\n\n.emd-table__content {}\n\n.emd-table__content_secondary {\n  color: #96A0AF;\n  display: block;\n  font-size: 12px;\n  text-align: left;\n  white-space: nowrap;\n}\n\n:host {\n  display: block;\n}\n\n      </style>\n      <table class$="emd-table', '">\n        <colgroup>\n          ', '\n        </colgroup>\n        <thead class$="emd-table__header', '">\n          <tr>\n            ', '\n          </tr>\n        </thead>\n        <tbody class="emd-table__body">\n          ', '\n        </tbody>\n      </table>\n    '], ['\n      <style>\n        @import url(\'https://fonts.googleapis.com/css?family=Heebo\');\n\n.emd-table {\n  border: 1px solid #C3C8D2;\n  border-collapse: collapse;\n  border-radius: 2px;\n  color: #424B54;\n  font-family: \'Heebo\', sans-serif;\n  width: 100%;\n}\n\n.emd-table__header_hidden {\n  display: none;\n}\n\n.emd-table__title {\n  background: #FAFAFC;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 24px;\n  padding: 24px;\n  white-space: nowrap;\n}\n\n.emd-table__row {\n  background: #ffffff;\n}\n\n.emd-table_row_success {\n  border-left: 2px #31cd65;\n}\n\n.emd-table_clickablerows .emd-table__row {\n  cursor: pointer;\n}\n\n.emd-table_clickablerows .emd-table__row:hover {\n  background: #f6fbf4;\n}\n\n.emd-table_clickablerows .emd-table__row:nth-child(2n):hover {\n  background: #f6fbf4;\n}\n\n.emd-table__title + .emd-table__title {\n  border-left: none;\n}\n\n.emd-table__cell {\n  border-top: solid 1px #C3C8D2;\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: 400;\n  padding: 24px;\n}\n\n.emd-table__cell + .emd-table__cell {\n  border-left: none;\n}\n\n.emd-table__header_hidden + .emd-table__body .emd-table__row:nth-child(1) .emd-table__cell {\n  border-top: solid 1px #ddd;\n}\n\n.emd-table__currency {\n  white-space: nowrap;\n}\n\n.emd-table__symbol {\n  color: #96A0AF;\n  font-size: 12px;\n  padding: 8px;\n  text-align: left;\n}\n\n.emd-table__content {}\n\n.emd-table__content_secondary {\n  color: #96A0AF;\n  display: block;\n  font-size: 12px;\n  text-align: left;\n  white-space: nowrap;\n}\n\n:host {\n  display: block;\n}\n\n      </style>\n      <table class$="emd-table', '">\n        <colgroup>\n          ', '\n        </colgroup>\n        <thead class$="emd-table__header', '">\n          <tr>\n            ', '\n          </tr>\n        </thead>\n        <tbody class="emd-table__body">\n          ', '\n        </tbody>\n      </table>\n    ']),
     _templateObject2 = _taggedTemplateLiteral(['\n            <col style$="width: ', ';"></col>\n          '], ['\n            <col style$="width: ', ';"></col>\n          ']),
-    _templateObject3 = _taggedTemplateLiteral(['\n              <th\n                class="tabular__title"\n                style$="text-align: ', ';">\n                ', '\n              </th>\n            '], ['\n              <th\n                class="tabular__title"\n                style$="text-align: ', ';">\n                ', '\n              </th>\n            ']),
-    _templateObject4 = _taggedTemplateLiteral(['\n            <tr onclick="', '" class="tabular__row">\n              ', '\n            </tr>\n          '], ['\n            <tr onclick="', '" class="tabular__row">\n              ', '\n            </tr>\n          ']),
-    _templateObject5 = _taggedTemplateLiteral(['\n                <td\n                  class="tabular__cell"\n                  style$="text-align: ', ';">\n                  ', '\n                  <span\n                    style$="display: ', ';">\n                    ', '\n                  </span>\n                </td>'], ['\n                <td\n                  class="tabular__cell"\n                  style$="text-align: ', ';">\n                  ', '\n                  <span\n                    style$="display: ', ';">\n                    ', '\n                  </span>\n                </td>']),
-    _templateObject6 = _taggedTemplateLiteral(['\n            <sling-brand-icon brandid="', '" width="50px" height="25px">\n            </sling-brand-icon>\n          '], ['\n            <sling-brand-icon brandid="', '" width="50px" height="25px">\n            </sling-brand-icon>\n          ']);
+    _templateObject3 = _taggedTemplateLiteral(['\n              <th\n                class="emd-table__title"\n                style$="text-align: ', ';">\n                ', '\n              </th>\n            '], ['\n              <th\n                class="emd-table__title"\n                style$="text-align: ', ';">\n                ', '\n              </th>\n            ']),
+    _templateObject4 = _taggedTemplateLiteral(['\n            <tr onclick="', '" class="emd-table__row emd-table_row_success">\n              ', '\n            </tr>\n          '], ['\n            <tr onclick="', '" class="emd-table__row emd-table_row_success">\n              ', '\n            </tr>\n          ']),
+    _templateObject5 = _taggedTemplateLiteral(['\n                <td\n                  class="emd-table__cell"\n                  style$="text-align: ', ';">\n                  <span class="emd-table__content emd-table__content_primary">\n                  ', '\n                  </span>\n                  ', '\n                </td>'], ['\n                <td\n                  class="emd-table__cell"\n                  style$="text-align: ', ';">\n                  <span class="emd-table__content emd-table__content_primary">\n                  ', '\n                  </span>\n                  ', '\n                </td>']),
+    _templateObject6 = _taggedTemplateLiteral(['\n                  <span\n                    class="emd-table__content emd-table__content_secondary">\n                    ', '\n                  </span>\n                  '], ['\n                  <span\n                    class="emd-table__content emd-table__content_secondary">\n                    ', '\n                  </span>\n                  ']),
+    _templateObject7 = _taggedTemplateLiteral(['\n            <span>', '</span>\n          '], ['\n            <span>', '</span>\n          ']),
+    _templateObject8 = _taggedTemplateLiteral(['\n            <div class="emd-table__currency">\n              <span class="emd-table__symbol">', '</span>\n              <span>', '</span>\n            </div>          \n          '], ['\n            <div class="emd-table__currency">\n              <span class="emd-table__symbol">', '</span>\n              <span>', '</span>\n            </div>          \n          ']),
+    _templateObject9 = _taggedTemplateLiteral(['\n            <sling-brand-icon brandid="', '" width="50px" height="25px">\n            </sling-brand-icon>\n          '], ['\n            <sling-brand-icon brandid="', '" width="50px" height="25px">\n            </sling-brand-icon>\n          ']);
 
@@ -32,2 +35,4 @@ var _cjs = require('sling-web-framework/dist/cjs');
 
+var formtatCurrencyWithoutSymbol = _cjs2.globalFormatters.formtatCurrencyWithoutSymbol;
+
 var SlingTable = exports.SlingTable = function (_SlingElement) {
@@ -67,7 +72,7 @@ _inherits(SlingTable, _SlingElement);
 
-      return (0, _cjs.html)(_templateObject, clickableRows ? ' tabular_clickablerows' : '', (0, _cjs.repeat)(columns, function (item, index) {
+      return (0, _cjs.html)(_templateObject, clickableRows ? ' emd-table_clickablerows' : '', (0, _cjs.repeat)(columns, function (item, index) {
         return index;
       }, function (item) {
         return (0, _cjs.html)(_templateObject2, item.width || 'auto');
-      }), noHeader ? ' tabular__header_hidden' : '', (0, _cjs.repeat)(columns, function (item, index) {
+      }), noHeader ? ' emd-table__header_hidden' : '', (0, _cjs.repeat)(columns, function (item, index) {
         return index;
@@ -82,3 +87,3 @@ }, function (item) {
         }, function (header) {
-          return (0, _cjs.html)(_templateObject5, header.align || 'left', _this3.constructor.tableCellInfoFormatter(item, header, false), header.secondaryField ? 'block' : 'none', _this3.constructor.tableCellInfoFormatter(item, header, true));
+          return (0, _cjs.html)(_templateObject5, header.align || 'left', _this3.constructor.tableCellInfoFormatter(item, header, false), header.secondaryField ? (0, _cjs.html)(_templateObject6, _this3.constructor.tableCellInfoFormatter(item, header, true)) : '');
         }));
@@ -112,9 +117,29 @@ }));
             }
-          case 'currency':
+          case 'time':
             {
-              cell = Number(fieldItem).toLocaleString('pt-BR', {
-                style: 'currency', currency: 'BRL'
+              cell = new Date(fieldItem).toLocaleTimeString([], {
+                hour: '2-digit', minute: '2-digit'
               });
               break;
             }
+          case 'dateTime':
+            {
+              var date = new Date(fieldItem).toLocaleDateString();
+              var time = new Date(fieldItem).toLocaleTimeString([], {
+                hour: '2-digit', minute: '2-digit'
+              });
+              cell = (0, _cjs.html)(_templateObject7, date.concat(' ás ', time));
+              break;
+            }
+          case 'currency':
+            {
+              var memo = formtatCurrencyWithoutSymbol(fieldItem);
+              cell = (0, _cjs.html)(_templateObject8, 'R$', memo);
+              break;
+            }
+          case 'installment':
+            {
+              cell = (0, _cjs.html)(_templateObject7, fieldItem.toString().concat('x'));
+              break;
+            }
           case 'cpf':
@@ -138,3 +163,3 @@ {
             {
-              cell = (0, _cjs.html)(_templateObject6, fieldItem);
+              cell = (0, _cjs.html)(_templateObject9, fieldItem);
               break;
@@ -141,0 +166,0 @@ }

dist/es/component/Table.js

 import { html, SlingElement, repeat } from 'sling-web-framework/dist/es';
-import { imask } from 'sling-web-helpers/dist/es';
+import { imask, globalFormatters } from 'sling-web-helpers/dist/es';
 import 'sling-web-component-brand-icon/dist/es';
 
+const { formtatCurrencyWithoutSymbol } = globalFormatters;
+
 export class SlingTable extends SlingElement {
@@ -49,9 +51,38 @@ constructor() {
           }
-        case 'currency':
+        case 'time':
           {
-            cell = Number(fieldItem).toLocaleString('pt-BR', {
-              style: 'currency', currency: 'BRL'
+            cell = new Date(fieldItem).toLocaleTimeString([], {
+              hour: '2-digit', minute: '2-digit'
             });
             break;
           }
+        case 'dateTime':
+          {
+            const date = new Date(fieldItem).toLocaleDateString();
+            const time = new Date(fieldItem).toLocaleTimeString([], {
+              hour: '2-digit', minute: '2-digit'
+            });
+            cell = html`
+            <span>${date.concat(' ás ', time)}</span>
+          `;
+            break;
+          }
+        case 'currency':
+          {
+            const memo = formtatCurrencyWithoutSymbol(fieldItem);
+            cell = html`
+            <div class="emd-table__currency">
+              <span class="emd-table__symbol">${'R$'}</span>
+              <span>${memo}</span>
+            </div>          
+          `;
+            break;
+          }
+        case 'installment':
+          {
+            cell = html`
+            <span>${fieldItem.toString().concat('x')}</span>
+          `;
+            break;
+          }
         case 'cpf':
@@ -106,65 +137,87 @@ {
       <style>
-        .tabular {
+        @import url('https://fonts.googleapis.com/css?family=Heebo');
+
+.emd-table {
+  border: 1px solid #C3C8D2;
+  border-collapse: collapse;
+  border-radius: 2px;
+  color: #424B54;
+  font-family: 'Heebo', sans-serif;
   width: 100%;
-  text-align: center;
-  font-family: arial;
-  border-spacing: 0;
-  border-collapse: separate;
 }
 
-.tabular__header_hidden {
+.emd-table__header_hidden {
   display: none;
 }
 
-.tabular__title {
-  color: #fff;
-  border: var(--header-border, 1px solid #0c9e43);
-  background: var(--header-background, #0db14b);
-  text-transform: uppercase;
-  font-weight: 700;
-  padding: 14px 12px;
-  margin: 0;
+.emd-table__title {
+  background: #FAFAFC;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  padding: 24px;
   white-space: nowrap;
 }
 
-.tabular__row {
-  background: var(--row-background, #fff);
+.emd-table__row {
+  background: #ffffff;
 }
 
-.tabular__row:nth-child(2n) {
-  background: var(--even-row-background, #fafafa);
+.emd-table_row_success {
+  border-left: 2px #31cd65;
 }
 
-.tabular_clickablerows .tabular__row {
+.emd-table_clickablerows .emd-table__row {
   cursor: pointer;
 }
 
-.tabular_clickablerows .tabular__row:hover {
-  background: var(--row-clickable-background, #f6fbf4);
+.emd-table_clickablerows .emd-table__row:hover {
+  background: #f6fbf4;
 }
 
-.tabular_clickablerows .tabular__row:nth-child(2n):hover {
-  background: var(--row-clickable-background, #f6fbf4);
+.emd-table_clickablerows .emd-table__row:nth-child(2n):hover {
+  background: #f6fbf4;
 }
 
-.tabular__title + .tabular__title {
+.emd-table__title + .emd-table__title {
   border-left: none;
 }
 
-.tabular__cell {
-  color: var(--cell-color, #666);
-  border: var(--cell-border, solid 1px #ddd);
-  border-top: none;
-  padding: 15px 12px;
-  margin-top: 0;
+.emd-table__cell {
+  border-top: solid 1px #C3C8D2;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  padding: 24px;
 }
 
-.tabular__cell + .tabular__cell {
+.emd-table__cell + .emd-table__cell {
   border-left: none;
 }
 
-.tabular__header_hidden + .tabular__body .tabular__row:nth-child(1) .tabular__cell {
-  border-top: var(--cell-border, solid 1px #ddd);
+.emd-table__header_hidden + .emd-table__body .emd-table__row:nth-child(1) .emd-table__cell {
+  border-top: solid 1px #ddd;
 }
 
+.emd-table__currency {
+  white-space: nowrap;
+}
+
+.emd-table__symbol {
+  color: #96A0AF;
+  font-size: 12px;
+  padding: 8px;
+  text-align: left;
+}
+
+.emd-table__content {}
+
+.emd-table__content_secondary {
+  color: #96A0AF;
+  display: block;
+  font-size: 12px;
+  text-align: left;
+  white-space: nowrap;
+}
+
 :host {
@@ -175,3 +228,3 @@ display: block;
       </style>
-      <table class$="tabular${clickableRows ? ' tabular_clickablerows' : ''}">
+      <table class$="emd-table${clickableRows ? ' emd-table_clickablerows' : ''}">
         <colgroup>
@@ -182,7 +235,7 @@ ${repeat(columns, (item, index) => index, item => html`
         </colgroup>
-        <thead class$="tabular__header${noHeader ? ' tabular__header_hidden' : ''}">
+        <thead class$="emd-table__header${noHeader ? ' emd-table__header_hidden' : ''}">
           <tr>
             ${repeat(columns, (item, index) => index, item => html`
               <th
-                class="tabular__title"
+                class="emd-table__title"
                 style$="text-align: ${item.align || 'left'};">
@@ -194,14 +247,18 @@ ${item.title}
         </thead>
-        <tbody class="tabular__body">
+        <tbody class="emd-table__body">
           ${repeat(dataSource, (item, index) => index, item => html`
-            <tr onclick="${this.handleRowClick(item)}" class="tabular__row">
+            <tr onclick="${this.handleRowClick(item)}" class="emd-table__row emd-table_row_success">
               ${repeat(columns, (header, index) => index, header => html`
                 <td
-                  class="tabular__cell"
+                  class="emd-table__cell"
                   style$="text-align: ${header.align || 'left'};">
+                  <span class="emd-table__content emd-table__content_primary">
                   ${this.constructor.tableCellInfoFormatter(item, header, false)}
+                  </span>
+                  ${header.secondaryField ? html`
                   <span
-                    style$="display: ${header.secondaryField ? 'block' : 'none'};">
+                    class="emd-table__content emd-table__content_secondary">
                     ${this.constructor.tableCellInfoFormatter(item, header, true)}
                   </span>
+                  ` : ''}
                 </td>`)}
@@ -208,0 +265,0 @@ </tr>

package.json

 {
   "name": "sling-web-component-table",
-  "version": "0.2.24",
+  "version": "0.2.25",
   "description": "Sling Table component",
@@ -28,6 +28,6 @@ "author": "Stone Pagamentos",
   "dependencies": {
-    "sling-web-component-brand-icon": "^0.2.24",
-    "sling-web-framework": "^0.2.24",
-    "sling-web-helpers": "^0.2.23"
+    "sling-web-component-brand-icon": "^0.2.25",
+    "sling-web-framework": "^0.2.25",
+    "sling-web-helpers": "^0.2.25"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24330

increased by17.78%

Lines of code

425

increased by22.13%

Dependency changes

• Updatedsling-web-component-brand-icon@^0.2.25

• Updatedsling-web-framework@^0.2.25

• Updatedsling-web-helpers@^0.2.25