121 - Add locale functionality and locale mixin

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   env: {
-    browser: true,
-    es6: true // All source code is at least ES6 friendly
+    es2020: true,
+    browser: true
   },
   extends: [
     // Import some AirBNB rules and some web component and jsdoc rules
@@ -79,7 +79,7 @@ module.exports = {
     // Allow Arrow functions to be on the next line or below
     'no-useless-constructor': ['off', { }],
     // Allow assignment of properties from items in `forEach` loops
-    'no-param-reassign': ['error', { props: false }],
+    'no-param-reassign': ['off', { props: false }],
     // Allow hasOwnProperty
     'no-prototype-builtins': ['off', { }],
     // Allow functions with no this in them

.github/workflows/ci.yml

@@ -22,6 +22,12 @@ jobs:
     steps:
     - uses: actions/checkout@v2
 
+    - uses: szenius/set-timezone@v1.0
+      with:
+        timezoneLinux: "America/New_York"
+        timezoneMacos: "America/New_York"
+        timezoneWindows: "America/New_York"
+
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:

app/data/books.json

@@ -11,7 +11,10 @@
     "methodSwitch": "Yes",
     "trackDeprecationHistory": "Yes",
     "useForEmployee": "No",
-    "deprecationHistory": "Asset Label"
+    "deprecationHistory": "Asset Label",
+    "publishDate": "2021-04-23T18:25:43.511Z",
+    "price": "12.99",
+    "location": "United States"
 	},
   {
     "book": 102,
@@ -24,7 +27,10 @@
     "methodSwitch": "No",
     "trackDeprecationHistory": "No",
     "useForEmployee": "No",
-    "deprecationHistory": "Asset Label"
+    "deprecationHistory": "Asset Label",
+    "publishDate": "2021-02-23T18:25:43.511Z",
+    "price": "13.99",
+    "location": "Canada"
   },
   {
     "book": 103,
@@ -37,7 +43,9 @@
     "methodSwitch": "Yes",
     "trackDeprecationHistory": "No",
     "useForEmployee": "Yes",
-    "deprecationHistory": "Asset Label"
+    "deprecationHistory": "Asset Label",
+    "publishDate": "2021-12-23T18:25:43.511Z",
+    "location": "United States"
   },
   {
     "book": 104,
@@ -51,7 +59,8 @@
     "methodSwitch": "No",
     "trackDeprecationHistory": "No",
     "useForEmployee": "No",
-    "deprecationHistory": "Asset Label"
+    "deprecationHistory": "Asset Label",
+    "location": "Canada"
   },
   {
     "book": 105,
@@ -65,7 +74,10 @@
     "methodSwitch": "Yes",
     "trackDeprecationHistory": "No",
     "useForEmployee": "Yes",
-    "deprecationHistory": "Asset Label"
+    "deprecationHistory": "Asset Label",
+    "publishDate": "2021-12-12T18:25:43.511Z",
+    "price": "15.99",
+    "location": "United States"
   },
   {
     "book": 106,
@@ -93,7 +105,8 @@
     "methodSwitch": "No",
     "trackDeprecationHistory": "No",
     "useForEmployee": "No",
-    "deprecationHistory": "Asset Label"
+    "deprecationHistory": "Asset Label",
+    "location": "Canada"
   },
   {
     "book": 108,
@@ -107,7 +120,9 @@
     "methodSwitch": "No",
     "trackDeprecationHistory": "Yes",
     "useForEmployee": "Yes",
-    "deprecationHistory": "Asset Label"
+    "deprecationHistory": "Asset Label",
+    "publishDate": "2020-12-12T18:25:43.511Z",
+    "price": "15.50"
   },
   {
     "book": 109,
@@ -121,6 +136,9 @@
     "methodSwitch": "Yes",
     "trackDeprecationHistory": "No",
     "useForEmployee": "No",
-    "deprecationHistory": "Asset Label"
+    "deprecationHistory": "Asset Label",
+    "publishDate": "2019-12-12T18:25:43.511Z",
+    "price": "29.48",
+    "location": "United States"
   }
 ]

app/ids-container/index.html

@@ -0,0 +1,2 @@
+{{> ../layouts/head.html }}
+{{> ../layouts/footer.html }}

app/ids-container/index.js

@@ -0,0 +1 @@
+import IdsContainer from '../../src/ids-container/ids-container';

app/ids-data-grid/example.js

@@ -1,104 +1,143 @@
 // Example for populating the DataGrid
 const dataGrid = document.querySelector('#data-grid-1');
+const container = document.querySelector('ids-container');
 
-// Do an ajax request
-const xmlhttp = new XMLHttpRequest();
-const url = '/api/books';
-const columns = [];
+(async function init() {
+  // Set Locale and wait for it to load
+  await container.setLocale('en-US');
 
-// Set up columns
-columns.push({
-  id: 'selectionCheckbox',
-  sortable: false,
-  resizable: false,
-  formatter: dataGrid.formatters.text,
-  align: 'center',
-  width: 20
-});
-columns.push({
-  id: 'book',
-  name: 'Book',
-  field: 'book',
-  formatter: dataGrid.formatters.text,
-  sortable: true,
-  width: 65
-});
-columns.push({
-  id: 'description',
-  name: 'Description',
-  field: 'description',
-  sortable: true,
-  formatter: dataGrid.formatters.text
-});
-columns.push({
-  id: 'ledger',
-  name: 'Ledger',
-  field: 'ledger',
-  formatter: dataGrid.formatters.text
-});
-columns.push({
-  id: 'bookCurrency',
-  name: 'Book Currency',
-  field: 'bookCurrency',
-  formatter: dataGrid.formatters.text
-});
-columns.push({
-  id: 'transactionCurrency',
-  name: 'Transaction Currency',
-  field: 'transactionCurrency',
-  formatter: dataGrid.formatters.text,
-});
-columns.push({
-  id: 'postHistory',
-  name: 'Post History',
-  field: 'postHistory',
-  formatter: dataGrid.formatters.text
-});
-columns.push({
-  id: 'active',
-  name: 'Active',
-  field: 'active',
-  formatter: dataGrid.formatters.text
-});
-columns.push({
-  id: 'convention',
-  name: 'Convention',
-  field: 'convention',
-  formatter: dataGrid.formatters.text
-});
-columns.push({
-  id: 'methodSwitch',
-  name: 'Method Switch',
-  field: 'methodSwitch',
-  formatter: dataGrid.formatters.text,
-  filterType: 'select'
-});
-columns.push({
-  id: 'trackDeprecationHistory',
-  name: 'Track Deprecation History',
-  field: 'trackDeprecationHistory',
-  formatter: dataGrid.formatters.dropdown
-});
-columns.push({
-  id: 'useForEmployee',
-  name: 'Use For Employee',
-  field: 'useForEmployee',
-  formatter: dataGrid.formatters.dropdown
-});
-columns.push({
-  id: 'deprecationHistory',
-  name: 'Deprecation History',
-  field: 'deprecationHistory',
-  formatter: dataGrid.formatters.dropdown
-});
+  // Do an ajax request
+  const xmlhttp = new XMLHttpRequest();
+  const url = '/api/books';
+  const columns = [];
 
-xmlhttp.onreadystatechange = function onreadystatechange() {
-  if (this.readyState === 4 && this.status === 200) {
-    dataGrid.data = JSON.parse(this.responseText);
-    dataGrid.columns = columns;
-  }
-};
+  // Set up columns
+  columns.push({
+    id: 'selectionCheckbox',
+    sortable: false,
+    resizable: false,
+    formatter: dataGrid.formatters.text,
+    align: 'center',
+    width: 20
+  });
+  columns.push({
+    id: 'rowNumber',
+    name: '#',
+    formatter: dataGrid.formatters.rowNumber,
+    sortable: false,
+    readonly: true,
+    width: 65
+  });
+  columns.push({
+    id: 'description',
+    name: 'Description',
+    field: 'description',
+    sortable: true,
+    formatter: dataGrid.formatters.text
+  });
+  columns.push({
+    id: 'ledger',
+    name: 'Ledger',
+    field: 'ledger',
+    formatter: dataGrid.formatters.text
+  });
+  columns.push({
+    id: 'publishDate',
+    name: 'Pub. Date',
+    field: 'publishDate',
+    formatter: dataGrid.formatters.date
+  });
+  columns.push({
+    id: 'publishTime',
+    name: 'Pub. Time',
+    field: 'publishDate',
+    formatter: dataGrid.formatters.time
+  });
+  columns.push({
+    id: 'price',
+    name: 'Price',
+    field: 'price',
+    formatter: dataGrid.formatters.decimal,
+    formatOptions: { locale: 'en-US' } // Data Values are in en-US
+  });
+  columns.push({
+    id: 'bookCurrency',
+    name: 'Currency',
+    field: 'bookCurrency',
+    formatter: dataGrid.formatters.text
+  });
+  columns.push({
+    id: 'transactionCurrency',
+    name: 'Transaction Currency',
+    field: 'transactionCurrency',
+    formatter: dataGrid.formatters.text,
+  });
+  columns.push({
+    id: 'integer',
+    name: 'Price (Int)',
+    field: 'price',
+    formatter: dataGrid.formatters.integer,
+    formatOptions: { locale: 'en-US' } // Data Values are in en-US
+  });
+  columns.push({
+    id: 'location',
+    name: 'Location',
+    field: 'location',
+    formatter: dataGrid.formatters.hyperlink,
+    href: '#'
+  });
+  columns.push({
+    id: 'postHistory',
+    name: 'Post History',
+    field: 'postHistory',
+    formatter: dataGrid.formatters.text
+  });
+  columns.push({
+    id: 'active',
+    name: 'Active',
+    field: 'active',
+    formatter: dataGrid.formatters.text
+  });
+  columns.push({
+    id: 'convention',
+    name: 'Convention',
+    field: 'convention',
+    formatter: dataGrid.formatters.text
+  });
+  columns.push({
+    id: 'methodSwitch',
+    name: 'Method Switch',
+    field: 'methodSwitch',
+    formatter: dataGrid.formatters.text,
+    filterType: 'select'
+  });
+  columns.push({
+    id: 'trackDeprecationHistory',
+    name: 'Track Deprecation History',
+    field: 'trackDeprecationHistory',
+    formatter: dataGrid.formatters.dropdown
+  });
+  columns.push({
+    id: 'useForEmployee',
+    name: 'Use For Employee',
+    field: 'useForEmployee',
+    formatter: dataGrid.formatters.password
+  });
+  columns.push({
+    id: 'deprecationHistory',
+    name: 'Deprecation History',
+    field: 'deprecationHistory',
+    formatter: dataGrid.formatters.text
+  });
 
-// Execute the request
-xmlhttp.open('GET', url, true);
-xmlhttp.send();
+  xmlhttp.onreadystatechange = function onreadystatechange() {
+    if (this.readyState === 4 && this.status === 200) {
+      dataGrid.columns = columns;
+      dataGrid.data = JSON.parse(this.responseText);
+    }
+  };
+
+  // Execute the request
+  xmlhttp.open('GET', url, true);
+  xmlhttp.send();
+}());

app/ids-locale/example.html

@@ -0,0 +1,5 @@
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Locale (Translated Strings)</ids-text>
+  <ids-layout-grid cols="4" gap="sm" id="translation-container">
+  </ids-layout-grid>
+</ids-layout-grid>

app/ids-locale/example.js

@@ -0,0 +1,22 @@
+// Use the container to set the language
+const container = document.querySelector('ids-container');
+
+// Asyncronously load a language and display the strings
+(async function loadMessages() {
+  let html = '';
+  // Set language and wait for it to load
+  const initialLocale = 'zh';
+  await container.setLanguage(initialLocale);
+
+  // Show them in the page
+  const keys = Object.keys(container.language.messages);
+  for (let i = 0; i < keys.length; i++) {
+    html += `<ids-layout-grid-cell col-span="1">
+      <ids-text font-weight="bold">${keys[i]}</ids-text>
+    </ids-layout-grid-cell>
+    <ids-layout-grid-cell col-span="3">
+      <ids-text translate-text="true" language="${initialLocale}">${keys[i]}</ids-text>
+      </ids-layout-grid-cell>`;
+  }
+  document.querySelector('#translation-container').innerHTML = html;
+}());