kempo 4.2.4 → 4.2.5

package/src/components/tableControls/Edit.js

@@ -1,84 +0,0 @@
-import TableControl from './TableControl.js';
-import { offEvent, onEvent } from '../../utils/element.js';
-
-const editRecord = Symbol('editRecord'),
-      saveRecord = Symbol('saveRecord'),
-      cancelEdit = Symbol('cancelEdit');
-export default class Edit extends TableControl {
-  constructor() {
-    super();
-
-    
-    /* Private Methods */
-    this[editRecord] = this.editRecord.bind(this);
-    this[saveRecord] = this.saveRecord.bind(this);
-    this[cancelEdit] = this.cancelEdit.bind(this);
-
-    /* Init */
-    this.registerAttributes({
-      editing: false
-    });
-    this.maxWidth = 80;
-  }
-  async render(force = false) {
-    if (await super.render(force)) {
-      const record = this.record;
-      if(record){
-        this.editing = this.table.recordIsEditing(record)
-      }
-      onEvent(this.shadowRoot.getElementById('editButton'), 'click', this[editRecord]);
-      onEvent(this.shadowRoot.getElementById('saveButton'), 'click', this[saveRecord]);
-      onEvent(this.shadowRoot.getElementById('cancelButton'), 'click', this[cancelEdit]);
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    offEvent(this.shadowRoot.getElementById('editButton'), 'click', this[editRecord]);
-    offEvent(this.shadowRoot.getElementById('saveButton'), 'click', this[saveRecord]);
-    offEvent(this.shadowRoot.getElementById('cancelButton'), 'click', this[cancelEdit]);
-  }
-
-  /* Public Methods */
-  editRecord() {
-    this.table.editRecord(this.record);
-  }
-  saveRecord() {
-    this.table.saveEditedRecord(this.record);
-  }
-  cancelEdit() {
-    this.table.cancelEditedRecord(this.record);
-  }
-
-  get shadowTemplate() {
-    return /*html*/`
-      <button id="editButton" class="icon-btn no-btn">
-        <k-icon name="edit"></k-icon>
-      </button>
-      <button id="saveButton" class="icon-btn no-btn bg-success">
-        <k-icon name="check"></k-icon>
-      </button>
-      <button id="cancelButton" class="icon-btn no-btn bg-danger">
-        <k-icon name="close"></k-icon>
-      </button>
-    `;
-  }
-
-  get shadowStyles() {
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        display: inline-flex;
-        width: max-content;
-        align-items: baseline;
-      }
-      :host([editing]) #editButton,
-      :host(:not([editing])) #cancelButton,
-      :host(:not([editing])) #saveButton {
-        display: none !important;
-      }
-    `;
-  }
-}
-window.customElements.define('k-tc-edit', Edit);

package/src/components/tableControls/ExportCSV.js

@@ -1,91 +0,0 @@
-import TableControl from './TableControl.js';
-import '../Icon.js';
-import { onEvent, offEvent } from '../../utils/element.js';
-
-const clickHandler = Symbol('clickHandler');
-export default class ExportCsv extends TableControl {
-  constructor() {
-    super({
-      maxWidth: 136
-    });
-  
-    /* Private Methods */
-    this[clickHandler] = this.export.bind(this);
-  }
-
-  /* Lifecycle Callbacks */
-  async render(force = false){
-    if(await super.render(force)){
-      onEvent(this.shadowRoot.getElementById('export'), 'click', this[clickHandler]);
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    offEvent(this.shadowRoot.getElementById('export'), 'click', this[clickHandler]);
-  }
-
-  /* Public Methods */
-  getCSV(){
-    const table = this.table;
-    let csv = '';
-    if(table){
-      const fields = [];
-      table.fields.forEach( ({name, calculator}) => {
-        if(!calculator){
-          fields.push(name);
-        }
-      });
-      csv += fields.join(',') + '\n';
-      if(this.record){
-        const record = this.record;
-        const row = [];
-        fields.forEach( field => {
-          row.push(record[field]);
-        });
-        csv += row.join(',') + '\n';
-      } else {
-        table.records.forEach( record => {
-          const row = [];
-          fields.forEach( field => {
-            row.push(record[field]);
-          });
-          csv += row.join(',') + '\n';
-        });
-      }
-    }
-    return csv;
-  }
-  export(){
-    const data = this.getCSV();
-    const record = this.record;
-    if(record){
-      const blob = new Blob([data], {type: 'application/json'});
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'data.json';
-      a.click();
-      URL.revokeObjectURL(url);
-    } else {
-      const blob = new Blob([data], {type: 'application/json'});
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'data.json';
-      a.click();
-      URL.revokeObjectURL(url);
-    }
-  }
-
-  /* Shadow DOM */
-  get shadowTemplate(){
-    return /*html*/`
-      <button id="export" class="no-btn ph">
-        <slot><k-icon name="export-file"></k-icon> Export CSV</slot>
-      </button>
-    `;
-  }
-}
-window.customElements.define('k-tc-export-csv', ExportCsv);

package/src/components/tableControls/ExportJson.js

@@ -1,62 +0,0 @@
-import TableControl from './TableControl.js';
-import '../Icon.js';
-import { onEvent, offEvent } from '../../utils/element.js';
-
-const clickHandler = Symbol('clickHandler');
-export default class ExportJson extends TableControl {
-  constructor() {
-    super({
-      maxWidth: 136
-    });
-  
-    /* Private Methods */
-    this[clickHandler] = this.export.bind(this);
-  }
-
-  /* Lifecycle Callbacks */
-  async render(force = false){
-    if(await super.render(force)){
-      onEvent(this.shadowRoot.getElementById('export'), 'click', this[clickHandler]);
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    offEvent(this.shadowRoot.getElementById('export'), 'click', this[clickHandler]);
-  }
-
-  /* Public Methods */
-  export(){
-    const record = this.record;
-    if(record){
-      const data = JSON.stringify(record);
-      const blob = new Blob([data], {type: 'application/json'});
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'data.json';
-      a.click();
-      URL.revokeObjectURL(url);
-    } else {
-      const data = JSON.stringify(this.table.records);
-      const blob = new Blob([data], {type: 'application/json'});
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'data.json';
-      a.click();
-      URL.revokeObjectURL(url);
-    }
-  }
-
-  /* Shadow DOM */
-  get shadowTemplate(){
-    return /*html*/`
-      <button id="export" class="no-btn ph">
-        <slot><k-icon name="export-file"></k-icon> Export JSON</slot>
-      </button>
-    `;
-  }
-}
-window.customElements.define('k-tc-export-json', ExportJson);

package/src/components/tableControls/FieldSortHide.js

@@ -1,77 +0,0 @@
-import TableControl from './TableControl.js';
-import { onEvent, offEvent } from '../../utils/element.js';
-import Dialog from '../Dialog.js';
-
-const clickHandler = Symbol('clickHandler');
-export default class FieldSortHide extends TableControl {
-  constructor() {
-    super();
-
-    /* Private Methods */
-    this[clickHandler] = this.openDialog.bind(this);
-  }
-  async render(force = false) {
-    if (await super.render(force)) {
-      onEvent(this.shadowRoot.getElementById('sort'), 'click', this[clickHandler]);
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    offEvent(this.shadowRoot.getElementById('sort'), 'click', this[clickHandler]);
-  }
-
-  openDialog() {
-    import('../Sortable.js')
-    const $dialog = Dialog.create(/*html*/`
-      <h3 class="m0 ph" slot="title">Show / Hide Fields</h3>
-      <div class="m">
-        <k-sortable id="sorting">
-          ${this.table.fields.map(field => /*html*/`
-            <k-sortable-item data-field="${field.name}">
-              <label class="field pb0">
-                <input
-                  class="field-visibility"
-                  data-field="${field.name}"
-                  type="checkbox"
-                  ${field.hidden ? '' : 'checked'}
-                  style="height: 1.25rem; width: 1.25rem"
-                />
-                ${field.label}
-              </label>
-            </k-sortable-item>
-          `).join('')}
-        </k-sortable>
-      </div>
-    `, {
-      width: '400px',
-      cancelText: 'Close'
-    });
-    onEvent($dialog, 'click', (event) => {
-      if (!event.target.closest('.field')) return;
-      const $input = event.target.closest('.field-visibility');
-      if ($input) {
-        const fieldName = $input.getAttribute('data-field');
-        this.table.setFieldHiddenState(fieldName, !$input.checked);
-      }
-    });
-    const $sorting = $dialog.querySelector('#sorting');
-    onEvent($sorting, 'sort', () => {
-      const newOrder = Array.from($sorting.querySelectorAll('k-sortable-item')).map(item => item.getAttribute('data-field'));
-      this.table.reorderFields(newOrder);
-    });
-  }
-
-  get shadowTemplate() {
-    return /*html*/`
-      <button
-        id="sort"
-        class="no-btn icon-btn"
-      >
-        <k-icon name="table-visibility"></k-icon>
-      </button>
-    `;
-  }
-}
-window.customElements.define('k-tc-field-sort-hide', FieldSortHide);

package/src/components/tableControls/Filters.js

@@ -1,129 +0,0 @@
-import TableControl from './TableControl.js';
-import Dialog from '../Dialog.js';
-import { offEvent, onEvent } from '../../utils/element.js';
-
-const table = Symbol('table'),
-      clickHandler = Symbol('clickHandler');
-export default class Filters extends TableControl {
-  constructor() {
-    super();
-
-    /* Private Methods */
-    this[clickHandler] = this.revealFilters.bind(this);
-  }
-
-  /* Lifecycle Callbacks */
-  async render(force = false) {
-    if (await super.render(force)) {
-      onEvent(this.shadowRoot.getElementById('filterBtn'), 'click', this[clickHandler]);
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    offEvent(this.shadowRoot.getElementById('filterBtn'), 'click', this[clickHandler]);
-  }
-
-  /* Public Methods */
-  revealFilters() {
-    function formatFilter({field, condition, value}) {
-      const conditionLabel = {
-        eq: 'equals',
-        ne: 'does not equal',
-        gt: 'is greater than',
-        gte: 'is greater than or equal to',
-        lt: 'is less than',
-        lte: 'is less than or equal to',
-        contains: 'contains',
-        starts: 'starts with',
-        ends: 'ends with'
-      }[condition];
-      return /*html*/`<li
-        data-field="${field}"
-        data-condition="${condition}"
-        data-value="${value}"
-      >
-        ${field} ${conditionLabel} ${value}
-        <button class="remove-filter no-btn pq">
-          <k-icon name="close"></k-icon>
-        </button>
-    </li>`;
-    }
-    const $dialog = Dialog.create( /*html*/`
-      <h3 slot="title" class="m0 pyh px">Filters</h3>
-      <div class="p">
-        ${this.table.filters.length === 0 ? /*html*/`
-          <p>No Current Filters.</p>
-        ` :  /*html*/`
-          <h5>Current Filters</h5>
-          <ul id="currentFilters">${
-            this.table.filters.map(formatFilter).join('') 
-          }</ul>
-        `}
-        <hr />
-        <h5>Add A Filter</h5>
-        <form id="addFilter">
-          <select id="filterField" class="mb">${
-            this.table.fields.map(({name, label}) => /*html*/`<option value="${name}">${label}</option>`).join('') 
-          }</select>
-          <select id="filterCondition" class="mb">${
-            Object.entries({
-              eq: 'equals',
-              ne: 'does not equal',
-              gt: 'is greater than',
-              gte: 'is greater than or equal to',
-              lt: 'is less than',
-              lte: 'is less than or equal to',
-              contains: 'contains',
-              starts: 'starts with',
-              ends: 'ends with'
-            }).map(([key, value]) => /*html*/`<option value="${key}" ${key==='contains'?'selected':''}>${value}</option>`).join('') 
-          }</select>
-          <input id="filterValue" type="text" class="mb" />
-          <button type="submit" class="btn primary mb mr">Add Filter</button>
-          ${this.table.filters.length === 0 ? '' : /*html*/`
-            <button type="button" id="clearFilters" class="btn danger mb mr">Clear All Filters</button>
-          `}
-        </form>
-      </div>
-    `, {
-      width: '600px'
-    });
-    const $form = $dialog.querySelector('#addFilter');
-    onEvent($form, 'submit', (e) => {
-      e.preventDefault();
-      this.table.addFilter(
-        $form.filterField.value,
-        $form.filterCondition.value,
-        $form.filterValue.value
-      );
-      $dialog.close();
-      this.revealFilters();
-    });
-    onEvent($dialog, 'click', (e) => {
-      if(e.target.closest('button')?.classList.contains('remove-filter')){
-        const $li = e.target.closest('li');
-        if($li){
-          const {field, condition, value} = $li.dataset;
-          this.table.removeFilter(field, condition, value);
-          $dialog.close();
-          this.revealFilters();
-        }
-      }
-      if(e.target.id === 'clearFilters'){
-        this.table.removeAllFilters();
-        $dialog.close();
-      }
-    });
-  }
-
-  get shadowTemplate() {
-    return /*html*/`
-      <button id="filterBtn" class="no-btn icon-btn">
-        <k-icon name="filter"></k-icon>
-      </button>
-    `;
-  }
-}
-window.customElements.define('k-tc-filters', Filters);

package/src/components/tableControls/FirstPage.js

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

package/src/components/tableControls/HiddenCount.js

@@ -1,37 +0,0 @@
-import TableControl from './TableControl.js';
-import { offEvent, onEvent } from '../../utils/element.js';
-
-const hiddenChangeHandler = Symbol('hiddenChangeHandler');
-export default class HiddenCount extends TableControl {
-  constructor() {
-    super();
-
-    /* Private Methods */
-    this[hiddenChangeHandler] = (()=>{
-      this.shadowRoot.getElementById('hiddenCount').textContent = this.table.getHiddenRecords().length;
-    }).bind(this);
-    
-    /* Init */
-    this.classList.add('mq');
-  }
-  async render(force = false) {
-    if (await super.render(force)) {
-      this[hiddenChangeHandler]()
-      onEvent(this.table, 'recordHidden recordShown', this[hiddenChangeHandler]);
-      return true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    offEvent(this.table, 'recordHidden recordShown', this[hiddenChangeHandler]);
-  }
-
-  /* Shadow DOM */
-  get shadowTemplate() {
-    return /*html*/`
-      <span id="hiddenCount"></span>&nbsp;Hidden Records
-    `;
-  }
-}
-window.customElements.define('k-tc-hidden-count', HiddenCount);

package/src/components/tableControls/Hide.js

@@ -1,40 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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);