kempo 2.9.4 → 2.10.1

package/src/components/tableControls/Hide.js

@@ -0,0 +1,40 @@
+import TableControl from './TableControl.js';
+import { offEvent, onEvent } from '../../utils/element.js';
+
+const clickHandler = Symbol('clickHandler');
+
+export default class Hide extends TableControl {
+  constructor() {
+    super();
+    
+    /* Private Methods */
+    this[clickHandler] = (()=>{
+      const table = this.table;
+      const record = this.record;
+      if(table && record){
+        table.hideRecord(record);
+      }
+    }).bind(this);
+  }
+  async render(force = false) {
+    if (await super.render(force)) {
+      onEvent(this.shadowRoot.getElementById('hideButton'), 'click', this[clickHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('hideButton'), 'click', this[clickHandler]);
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate() {
+    return /*html*/`
+      <button id="hideButton" class="no-btn icon-btn">
+        <k-icon name="hide"></k-icon>
+      </button>
+    `;
+  }
+}
+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,47 +1,68 @@
-import Component from '../Component.js';
+import TableControl from './TableControl.js';
 import { onEvent } from '../../utils/element.js';
 
-export default class PageSelect extends Component {
-  constructor(table) {
+const updateOptions = Symbol('updateOptions'),
+      handleSelectChange = Symbol('handleSelectChange'),
+      handlePageSizeChange = Symbol('handlePageSizeChange'),
+      handlePageChange = Symbol('handlePageChange'),
+      handlePageCountChange = Symbol('handlePageCountChange');
+export default class PageSelect extends TableControl {
+  constructor() {
     super();
-    this.table = table;
-    this.classList.add('mxq');
+
+    /* Private Methods */
+    this[updateOptions] = (()=>{
+      const $select = this.shadowRoot.getElementById('pageSelect');
+      $select.innerHTML = '';
+      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();
+    }).bind(this);
+    this[handleSelectChange] = (() => {
+      this.table.setPage(parseInt(this.shadowRoot.getElementById('pageSelect').value));
+    }).bind(this);
+    this[handlePageSizeChange] = (() => {
+      this[updateOptions]();
+      this.shadowRoot.getElementById('pageSelect').value = this.table.getCurrentPage();
+    }).bind(this);
+    this[handlePageChange] = (() => {
+      this.shadowRoot.getElementById('pageSelect').value = this.table.getCurrentPage();
+    }).bind(this);
+    this[handlePageCountChange] = (() => {
+      this.shadowRoot.getElementById('totalPages').textContent = this.table.getTotalPages();
+      this[updateOptions]();
+    }).bind(this);
+    
+    /* Init */
+    
   }
 
-  async render() {
-    if(await super.render()){
-      this.updateOptions();
+  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]);
+      this[updateOptions]();
       return true;
     }
     return false;
   }
-
-  updateOptions() {
-    const $select = this.shadowRoot.getElementById('pageSelect');
-    $select.innerHTML = '';
-    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();
-    const $totalPages = this.shadowRoot.getElementById('totalPages');
-    $totalPages.textContent = this.table.getTotalPages();
-
-    onEvent($select, 'change', () => {
-      this.table.setPage(parseInt($select.value));
-    });
-
-    onEvent(this.table, 'pageSizeChange', () => {
-      this.updateOptions();
-    });
-
-    onEvent(this.table, 'pageChange', () => {
-      $select.value = this.table.getCurrentPage();
-    });
+  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]);
   }
 
+  /* Shadow DOM */
   get shadowTemplate() {
     return /*html*/`
       <select id="pageSelect" class="mxq"></select>
@@ -65,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,15 +1,15 @@
-import Component from '../Component.js';
-import { onEvent } from '../../utils/element.js';
+import TableControl from './TableControl.js';
+import { onEvent, offEvent } from '../../utils/element.js';
 
-export default class PageSize extends Component {
-  constructor(table) {
+const updateOptions = Symbol('updateOptions'),
+      changeHandler = Symbol('changeHandler'),
+      pageSizeChangeHandler = Symbol('pageSizeChangeHandler');
+export default class PageSize extends TableControl {
+  constructor(_table) {
     super();
-    this.table = table;
-    this.classList.add('mxq');
-  }
 
-  async render() {
-    if(await super.render()){
+    /* Private Methods */
+    this[updateOptions] = (()=>{
       const $select = this.shadowRoot.getElementById('pageSizeSelect');
       const options = this.table.pageSizeOptions;
       options.forEach(size => {
@@ -19,20 +19,34 @@ export default class PageSize extends Component {
         $select.appendChild($option);
       });
       $select.value = this.table.pageSize;
+    }).bind(this);
+    this[changeHandler] = (()=>{
+      this.table.setPageSize(parseInt(this.shadowRoot.getElementById('pageSizeSelect').value));
+    }).bind(this);
+    this[pageSizeChangeHandler] = (()=>{
+      this.shadowRoot.getElementById('pageSizeSelect').value = this.table.pageSize;
+    }).bind(this);
 
-      onEvent($select, 'change', () => {
-        this.table.setPageSize(parseInt($select.value));
-      });
-
-      onEvent(this.table, 'pageSizeChange', () => {
-        $select.value = this.table.pageSize;
-      });
+    /* Init */
+    
+  }
 
+  async render(force = false) {
+    if(await super.render(force)){
+      onEvent(this.shadowRoot.getElementById('pageSizeSelect'), 'change', this[changeHandler]);
+      onEvent(this.table, 'pageSizeChange', this[pageSizeChangeHandler]);
+      this[updateOptions]();
       return true;
     }
     return false;
   }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('pageSizeSelect'), 'change', this[changeHandler]);
+    offEvent(this.table, 'pageSizeChange', this[pageSizeChangeHandler]);
+  }
 
+  /* Shadow DOM */
   get shadowTemplate() {
     return /*html*/`
       <label for="pageSizeSelect">Page Size: </label>
@@ -53,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

@@ -0,0 +1,37 @@
+import TableControl from './TableControl.js';
+import { offEvent, onEvent } from '../../utils/element.js';
+
+const clickHandler = Symbol('clickHandler');
+export default class HiddenCount extends TableControl {
+  constructor() {
+    super();
+
+    /* Private Methods */
+    this[clickHandler] = (()=>{
+      this.table.showAllRecords();
+    }).bind(this);
+
+    
+  }
+  async render(force = false) {
+    if (await super.render(force)) {
+      onEvent(this.shadowRoot.getElementById('showAllButton'), 'click', this[clickHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    offEvent(this.shadowRoot.getElementById('showAllButton'), 'click', this[clickHandler]);
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate() {
+    return /*html*/`
+      <button id="showAllButton" class="no-btn icon-btn">
+        <k-icon name="show"></k-icon>
+      </button>
+    `;
+  }
+}
+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

package/src/kempo-styles.css

@@ -724,6 +724,13 @@ input[type="color"]::-webkit-color-swatch {
   border-radius: var(--radius, 0.25rem);
   cursor: pointer;
 }
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="month"]::-webkit-calendar-picker-indicator,
+input[type="time"]::-webkit-calendar-picker-indicator,
+input[type="week"]::-webkit-calendar-picker-indicator,
+input[type="search"]::-webkit-search-cancel-button {
+  filter: var(--date_picker_icon_filter);
+}
 
 /*
   Tables

package/src/kempo-vars.css

@@ -24,6 +24,7 @@
   --input_padding: var(--spacer_h) var(--spacer);
   --input_border_width: 2px;
   --btn_padding: var(--spacer_h) var(--spacer);
+  --date_picker_icon_filter: invert(0);
 }
 
 :root,
@@ -154,4 +155,5 @@
   --drop_shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); 
   --link_decoration: underline;
   --input_border_width: 2px;
+  --date_picker_icon_filter: invert(1)
 }