kempo 2.10.0 → 2.10.2

package/src/components/tableControls/Hide.js

@@ -1,24 +1,20 @@
-import Component from '../Component.js';
+import TableControl from './TableControl.js';
 import { offEvent, onEvent } from '../../utils/element.js';
 
-const table = Symbol('table'),
-      record = Symbol('record'),
-      clickHandler = Symbol('clickHandler');
+const clickHandler = Symbol('clickHandler');
 
-export default class Hide extends Component {
-  constructor(_table, _record) {
+export default class Hide extends TableControl {
+  constructor() {
     super();
-
-    /* Private Members */
-    this[table] = _table;
-    this[record] = _record;
     
     /* Private Methods */
     this[clickHandler] = (()=>{
-      this[table].hideRecord(this[record]);
+      const table = this.table;
+      const record = this.record;
+      if(table && record){
+        table.hideRecord(record);
+      }
     }).bind(this);
-
-    this.classList.add('mxq');
   }
   async render(force = false) {
     if (await super.render(force)) {
@@ -32,12 +28,13 @@ export default class Hide extends Component {
     offEvent(this.shadowRoot.getElementById('hideButton'), 'click', this[clickHandler]);
   }
 
+  /* Shadow DOM */
   get shadowTemplate() {
     return /*html*/`
-      <button id="hideButton" class="pq no-btn">
+      <button id="hideButton" class="no-btn icon-btn">
         <k-icon name="hide"></k-icon>
       </button>
     `;
   }
 }
-window.customElements.define('k-table-hide', Hide);
+window.customElements.define('k-tc-hide', Hide);

package/src/components/tableControls/LastPage.js

@@ -0,0 +1,67 @@
+import TableControl from './TableControl.js';
+import { onEvent, offEvent } from '../../utils/element.js';
+
+const clickHandler = Symbol('clickHandler'),
+      handlePageChange = Symbol('handlePageChange');
+export default class LastPage extends TableControl {
+  constructor() {
+    super();
+
+    /* Private Methods */
+    this[clickHandler] = this.lastPage.bind(this);
+    this[handlePageChange] = (()=>{
+      const table = this.table;
+      if(!table || table.getCurrentPage() === table.getTotalPages()){
+        this.shadowRoot.getElementById('lastPage').disabled = true;
+      } else {
+        this.shadowRoot.getElementById('lastPage').disabled = false;
+      }
+    }).bind(this);
+  }
+
+  /* Lifecycle Callback */
+  async render(force = false) {
+    if(await super.render(force)) {
+      onEvent(this.shadowRoot.getElementById('lastPage'), 'click', this[clickHandler]);
+      this[handlePageChange]();
+      onEvent(this.table, 'pageChange', this[handlePageChange]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('lastPage'), 'click', this[clickHandler]);
+    offEvent(this.table, 'pageChange', this[handlePageChange]);
+  }
+
+  /* Public Methods */
+  lastPage(){
+    const table = this.table;
+    if(table){
+      table.lastPage();
+    }
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <button
+        id="lastPage"
+        class="no-btn icon-btn"
+      >
+        <slot><k-icon name="last"></k-icon></slot>
+      </button>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      #lastPage[disabled] {
+        cursor: inherit;
+        opacity: 0.5;
+      }
+    `;
+  }
+}
+window.customElements.define('k-tc-last-page', LastPage);

package/src/components/tableControls/NextPage.js

@@ -0,0 +1,69 @@
+import TableControl from './TableControl.js';
+import { onEvent, offEvent } from '../../utils/element.js';
+
+const clickHandler = Symbol('clickHandler'),
+      handlePageChange = Symbol('handlePageChange');
+export default class NextPage extends TableControl {
+  constructor() {
+    super();
+
+    /* Private Methods */
+    this[clickHandler] = this.nextPage.bind(this);
+    this[handlePageChange] = (()=>{
+      const table = this.table;
+      if(!table || table.getCurrentPage() === table.getTotalPages()){
+        this.shadowRoot.getElementById('nextPage').disabled = true;
+      } else {
+        this.shadowRoot.getElementById('nextPage').disabled = false;
+      }
+    }).bind(this);
+  }
+
+  /* Lifecycle Callback */
+  async render(force = false) {
+    if(await super.render(force)) {
+      onEvent(this.shadowRoot.getElementById('nextPage'), 'click', this[clickHandler]);
+      this[handlePageChange]();
+      onEvent(this.table, 'pageChange', this[handlePageChange]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('nextPage'), 'click', this[clickHandler]);
+    offEvent(this.table, 'pageChange', this[handlePageChange]);
+  }
+
+  /* Public Methods */
+  nextPage(){
+    const table = this.table;
+    if(table){
+      table.nextPage();
+    }
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <button
+        id="nextPage"
+        class="no-btn icon-btn"
+      >
+        <slot><k-icon name="chevron-right"></k-icon></slot>
+      </button>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      #nextPage[disabled] {
+        cursor: inherit;
+        opacity: 0.5;
+      }
+    `;
+  }
+
+
+}
+window.customElements.define('k-tc-next-page', NextPage);

package/src/components/tableControls/PageSelect.js

@@ -1,58 +1,54 @@
-import Component from '../Component.js';
+import TableControl from './TableControl.js';
 import { onEvent } from '../../utils/element.js';
 
-const table = Symbol('table'),
-      updateOptions = Symbol('updateOptions'),
+const updateOptions = Symbol('updateOptions'),
       handleSelectChange = Symbol('handleSelectChange'),
       handlePageSizeChange = Symbol('handlePageSizeChange'),
       handlePageChange = Symbol('handlePageChange'),
       handlePageCountChange = Symbol('handlePageCountChange');
-export default class PageSelect extends Component {
-  constructor(_table) {
+export default class PageSelect extends TableControl {
+  constructor() {
     super();
 
-    /* Private Members */
-    this[table] = _table;
-
     /* Private Methods */
     this[updateOptions] = (()=>{
       const $select = this.shadowRoot.getElementById('pageSelect');
       $select.innerHTML = '';
-      for (let i = 1; i <= this[table].getTotalPages(); i++) {
+      for (let i = 1; i <= this.table.getTotalPages(); i++) {
         const $option = document.createElement('option');
         $option.value = i;
         $option.textContent = i;
         $select.appendChild($option);
       }
-      $select.value = this[table].getCurrentPage();
-      this.shadowRoot.getElementById('totalPages').textContent = this[table].getTotalPages();
+      $select.value = this.table.getCurrentPage();
+      this.shadowRoot.getElementById('totalPages').textContent = this.table.getTotalPages();
     }).bind(this);
     this[handleSelectChange] = (() => {
-      this[table].setPage(parseInt(this.shadowRoot.getElementById('pageSelect').value));
+      this.table.setPage(parseInt(this.shadowRoot.getElementById('pageSelect').value));
     }).bind(this);
     this[handlePageSizeChange] = (() => {
       this[updateOptions]();
-      this.shadowRoot.getElementById('pageSelect').value = this[table].getCurrentPage();
+      this.shadowRoot.getElementById('pageSelect').value = this.table.getCurrentPage();
     }).bind(this);
     this[handlePageChange] = (() => {
-      this.shadowRoot.getElementById('pageSelect').value = this[table].getCurrentPage();
+      this.shadowRoot.getElementById('pageSelect').value = this.table.getCurrentPage();
     }).bind(this);
     this[handlePageCountChange] = (() => {
-      this.shadowRoot.getElementById('totalPages').textContent = this[table].getTotalPages();
+      this.shadowRoot.getElementById('totalPages').textContent = this.table.getTotalPages();
       this[updateOptions]();
     }).bind(this);
     
     /* Init */
-    this.classList.add('mxq');
+    
   }
 
   async render(force = false) {
     if(await super.render(force)){
       const $select = this.shadowRoot.getElementById('pageSelect');
       onEvent($select, 'change', this[handleSelectChange]);
-      onEvent(this[table], 'pageSizeChange', this[handlePageSizeChange]);
-      onEvent(this[table], 'pageChange pageCountChanged', this[handlePageChange]);
-      onEvent(this[table], 'pageCountChanged',  this[handlePageCountChange]);
+      onEvent(this.table, 'pageSizeChange', this[handlePageSizeChange]);
+      onEvent(this.table, 'pageChange pageCountChanged', this[handlePageChange]);
+      onEvent(this.table, 'pageCountChanged',  this[handlePageCountChange]);
       this[updateOptions]();
       return true;
     }
@@ -61,11 +57,12 @@ export default class PageSelect extends Component {
   disconnectedCallback(){
     super.disconnectedCallback();
     offEvent(this.shadowRoot.getElementById('pageSelect'), 'change', this[handleSelectChange]);
-    offEvent(this[table], 'pageSizeChange', this[handlePageSizeChange]);
-    offEvent(this[table], 'pageChange pageCountChanged', this[handlePageChange]);
-    offEvent(this[table], 'pageCountChanged',  this[handlePageCountChange]);
+    offEvent(this.table, 'pageSizeChange', this[handlePageSizeChange]);
+    offEvent(this.table, 'pageChange pageCountChanged', this[handlePageChange]);
+    offEvent(this.table, 'pageCountChanged',  this[handlePageCountChange]);
   }
 
+  /* Shadow DOM */
   get shadowTemplate() {
     return /*html*/`
       <select id="pageSelect" class="mxq"></select>
@@ -89,4 +86,4 @@ export default class PageSelect extends Component {
     `;
   }
 }
-window.customElements.define('k-table-page-select', PageSelect);
+window.customElements.define('k-tc-page-select', PageSelect);

package/src/components/tableControls/PageSize.js

@@ -1,44 +1,40 @@
-import Component from '../Component.js';
+import TableControl from './TableControl.js';
 import { onEvent, offEvent } from '../../utils/element.js';
 
-const table = Symbol('table'),
-      updateOptions = Symbol('updateOptions'),
+const updateOptions = Symbol('updateOptions'),
       changeHandler = Symbol('changeHandler'),
       pageSizeChangeHandler = Symbol('pageSizeChangeHandler');
-export default class PageSize extends Component {
+export default class PageSize extends TableControl {
   constructor(_table) {
     super();
 
-    /* Private Members */
-    this[table] = _table;
-
     /* Private Methods */
     this[updateOptions] = (()=>{
       const $select = this.shadowRoot.getElementById('pageSizeSelect');
-      const options = this[table].pageSizeOptions;
+      const options = this.table.pageSizeOptions;
       options.forEach(size => {
         const $option = document.createElement('option');
         $option.value = size;
         $option.textContent = size;
         $select.appendChild($option);
       });
-      $select.value = this[table].pageSize;
+      $select.value = this.table.pageSize;
     }).bind(this);
     this[changeHandler] = (()=>{
-      this[table].setPageSize(parseInt(this.shadowRoot.getElementById('pageSizeSelect').value));
+      this.table.setPageSize(parseInt(this.shadowRoot.getElementById('pageSizeSelect').value));
     }).bind(this);
     this[pageSizeChangeHandler] = (()=>{
-      this.shadowRoot.getElementById('pageSizeSelect').value = this[table].pageSize;
+      this.shadowRoot.getElementById('pageSizeSelect').value = this.table.pageSize;
     }).bind(this);
 
     /* Init */
-    this.classList.add('mxq');
+    
   }
 
   async render(force = false) {
     if(await super.render(force)){
       onEvent(this.shadowRoot.getElementById('pageSizeSelect'), 'change', this[changeHandler]);
-      onEvent(this[table], 'pageSizeChange', this[pageSizeChangeHandler]);
+      onEvent(this.table, 'pageSizeChange', this[pageSizeChangeHandler]);
       this[updateOptions]();
       return true;
     }
@@ -47,9 +43,10 @@ export default class PageSize extends Component {
   disconnectedCallback(){
     super.disconnectedCallback();
     offEvent(this.shadowRoot.getElementById('pageSizeSelect'), 'change', this[changeHandler]);
-    offEvent(this[table], 'pageSizeChange', this[pageSizeChangeHandler]);
+    offEvent(this.table, 'pageSizeChange', this[pageSizeChangeHandler]);
   }
 
+  /* Shadow DOM */
   get shadowTemplate() {
     return /*html*/`
       <label for="pageSizeSelect">Page Size: </label>
@@ -70,4 +67,4 @@ export default class PageSize extends Component {
     `;
   }
 }
-window.customElements.define('k-table-page-size', PageSize);
+window.customElements.define('k-tc-page-size', PageSize);

package/src/components/tableControls/PrevPage.js

@@ -0,0 +1,69 @@
+import TableControl from './TableControl.js';
+import { onEvent, offEvent } from '../../utils/element.js';
+
+const clickHandler = Symbol('clickHandler'),
+      handlePageChange = Symbol('handlePageChange');
+export default class PrevPage extends TableControl {
+  constructor() {
+    super();
+
+    /* Private Methods */
+    this[clickHandler] = this.prevPage.bind(this);
+    this[handlePageChange] = (()=>{
+      const table = this.table;
+      if(!table || table.getCurrentPage() === 1){
+        this.shadowRoot.getElementById('prevPage').disabled = true;
+      } else {
+        this.shadowRoot.getElementById('prevPage').disabled = false;
+      }
+    }).bind(this);
+  }
+
+  /* Lifecycle Callback */
+  async render(force = false) {
+    if(await super.render(force)) {
+      onEvent(this.shadowRoot.getElementById('prevPage'), 'click', this[clickHandler]);
+      this[handlePageChange]();
+      onEvent(this.table, 'pageChange', this[handlePageChange]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('prevPage'), 'click', this[clickHandler]);
+    offEvent(this.table, 'pageChange', this[handlePageChange]);
+  }
+
+  /* Public Methods */
+  prevPage(){
+    const table = this.table;
+    if(table){
+      table.prevPage();
+    }
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <button
+        id="prevPage"
+        class="no-btn icon-btn"
+      >
+        <slot><k-icon name="chevron-left"></k-icon></slot>
+      </button>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      #prevPage[disabled] {
+        cursor: inherit;
+        opacity: 0.5;
+      }
+    `;
+  }
+
+
+}
+window.customElements.define('k-tc-prev-page', PrevPage);

package/src/components/tableControls/Search.js

@@ -0,0 +1,49 @@
+import TableControl from './TableControl.js';
+import { offEvent, onEvent } from '../../utils/element.js';
+import debounce from '../../utils/debounce.js';
+
+const changeHandler = Symbol('changeHandler');
+export default class Search extends TableControl {
+  constructor() {
+    super();
+
+    /* Private Methods */
+    this[changeHandler] = debounce(this.search.bind(this), 200);
+  }
+
+  /* Lifecycle Callbacks */
+  async render(force = false) {
+    if (await super.render(force)) {
+      onEvent(this.shadowRoot.getElementById('search'), 'input', this[changeHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('search'), 'input', this[changeHandler]);
+  }
+
+  /* Public Methods */
+  search() {
+    const term = this.shadowRoot.getElementById('search').value;
+    if (term.length < 3) {
+      this.table.showAllRecords();
+    } else {
+      this.table.search(term);
+    }
+  }
+
+  get shadowTemplate(){
+    return /*html*/`
+      <input
+        id="search"
+        type="search"
+        placeholder="Search"
+        class="px pyh"
+      />
+      ${super.shadowTemplate}
+    `;
+  }
+}
+window.customElements.define('k-tc-search', Search);

package/src/components/tableControls/SelectCount.js

@@ -1,15 +1,9 @@
-import Component from '../Component.js';
+import TableControl from './TableControl.js';
 import { onEvent } from '../../utils/element.js';
 
-export default class SelectCount extends Component {
-  constructor(table) {
-    super();
-    this.table = table;
-    this.classList.add('mxq');
-  }
-
-  async render() {
-    if (await super.render()) {
+export default class SelectCount extends TableControl {
+  async render(forced = false) {
+    if (await super.render(forced)) {
       this.updateCount();
       onEvent(this.table, 'selectionChange', () => {
         this.updateCount();
@@ -24,6 +18,7 @@ export default class SelectCount extends Component {
     $count.textContent = this.table.getSelectedRecords().length;
   }
 
+  /* Shadow DOM */
   get shadowTemplate() {
     return /*html*/`
       Selected: <span id="selectCount"></span>

package/src/components/tableControls/ShowAll.js

@@ -1,21 +1,17 @@
-import Component from '../Component.js';
+import TableControl from './TableControl.js';
 import { offEvent, onEvent } from '../../utils/element.js';
 
-const table = Symbol('table'),
-      clickHandler = Symbol('clickHandler');
-export default class HiddenCount extends Component {
-  constructor(_table) {
+const clickHandler = Symbol('clickHandler');
+export default class HiddenCount extends TableControl {
+  constructor() {
     super();
 
-    /* Private Members */
-    this[table] = _table;
-
     /* Private Methods */
     this[clickHandler] = (()=>{
-      this[table].showAllRecords();
+      this.table.showAllRecords();
     }).bind(this);
 
-    this.classList.add('mxq');
+    
   }
   async render(force = false) {
     if (await super.render(force)) {
@@ -29,12 +25,13 @@ export default class HiddenCount extends Component {
     offEvent(this.shadowRoot.getElementById('showAllButton'), 'click', this[clickHandler]);
   }
 
+  /* Shadow DOM */
   get shadowTemplate() {
     return /*html*/`
-      <button id="showAllButton" class="pq no-btn">
+      <button id="showAllButton" class="no-btn icon-btn">
         <k-icon name="show"></k-icon>
       </button>
     `;
   }
 }
-window.customElements.define('k-table-show-all', HiddenCount);
+window.customElements.define('k-tc-show-all', HiddenCount);

package/src/components/tableControls/TableControl.js

@@ -0,0 +1,51 @@
+import Component from '../Component.js';
+
+export default class TableControl extends Component {
+  constructor({
+    maxWidth = 40
+  } = {}){
+    super();
+
+    this.registerAttributes({
+      maxWidth
+    });
+  }
+
+  /* Protected Members */
+  get table(){
+    if (this.getRootNode() instanceof ShadowRoot) {
+      return this.getRootNode().host.closest('k-table');
+    } else {
+      return this.closest('k-table');
+    }
+  }
+  get record(){
+    if (this.getRootNode() instanceof ShadowRoot) {
+      const $record = this.closest('.record');
+      if($record){
+        const index = $record.dataset.index;
+        if(index){
+          return this.table.records[index];
+        }
+      }
+    }
+    return false;
+  }
+
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        display: inline-flex;
+      }
+      .icon-btn {
+        display: inline-flex !important;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+      }
+    `;
+  }
+}
+// we do not need to register this component as a custom element because it is only used as a base class for other components