kempo 4.2.4 → 4.2.5

package/src/components/tableControls/NextPage.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 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,89 +0,0 @@
-import TableControl from './TableControl.js';
-import { onEvent } from '../../utils/element.js';
-
-const updateOptions = Symbol('updateOptions'),
-      handleSelectChange = Symbol('handleSelectChange'),
-      handlePageSizeChange = Symbol('handlePageSizeChange'),
-      handlePageChange = Symbol('handlePageChange'),
-      handlePageCountChange = Symbol('handlePageCountChange');
-export default class PageSelect extends TableControl {
-  constructor() {
-    super();
-
-    /* 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(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;
-  }
-  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>
-      <label> out of <span id="totalPages"></span></label>
-    `;
-  }
-
-  get shadowStyles() {
-    return /*css*/`
-      :host {
-        display: inline-flex;
-        width: max-content;
-        align-items: baseline;
-      }
-      #pageSelect, label {
-        display: inline;
-      }
-      label {
-        white-space: nowrap;
-      }
-    `;
-  }
-}
-window.customElements.define('k-tc-page-select', PageSelect);

package/src/components/tableControls/PageSize.js

@@ -1,70 +0,0 @@
-import TableControl from './TableControl.js';
-import { onEvent, offEvent } from '../../utils/element.js';
-
-const updateOptions = Symbol('updateOptions'),
-      changeHandler = Symbol('changeHandler'),
-      pageSizeChangeHandler = Symbol('pageSizeChangeHandler');
-export default class PageSize extends TableControl {
-  constructor(_table) {
-    super();
-
-    /* Private Methods */
-    this[updateOptions] = (()=>{
-      const $select = this.shadowRoot.getElementById('pageSizeSelect');
-      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;
-    }).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);
-
-    /* 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>
-      <select id="pageSizeSelect" class="mxq"></select>
-    `;
-  }
-
-  get shadowStyles() {
-    return /*css*/`
-      :host {
-        display: inline-flex;
-        width: max-content;
-        align-items: baseline;
-      }
-      label {
-        white-space: nowrap;
-      }
-    `;
-  }
-}
-window.customElements.define('k-tc-page-size', PageSize);

package/src/components/tableControls/PrevPage.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 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

@@ -1,49 +0,0 @@
-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,42 +0,0 @@
-import TableControl from './TableControl.js';
-import { onEvent } from '../../utils/element.js';
-
-export default class SelectCount extends TableControl {
-  async render(forced = false) {
-    if (await super.render(forced)) {
-      this.updateCount();
-      onEvent(this.table, 'selectionChange', () => {
-        this.updateCount();
-      });
-      return true;
-    }
-    return false;
-  }
-
-  updateCount() {
-    const $count = this.shadowRoot.getElementById('selectCount');
-    $count.textContent = this.table.getSelectedRecords().length;
-  }
-
-  /* Shadow DOM */
-  get shadowTemplate() {
-    return /*html*/`
-      Selected: <span id="selectCount"></span>
-    `;
-  }
-
-  get shadowStyles() {
-    return /*css*/`
-      :host {
-        display: inline-flex;
-        width: max-content;
-        align-items: baseline;
-        align-self: center;
-      }
-      label {
-        white-space: nowrap;
-      }
-    `;
-  }
-}
-window.customElements.define('k-table-select-count', SelectCount);

package/src/components/tableControls/ShowAll.js

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

@@ -1,51 +0,0 @@
-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-hljs.css

@@ -1,146 +0,0 @@
-:root,
-[theme="light"] {
-  --c_text: #000000;
-  --c_keyword: #0000ff;
-  --c_builtin: #00b0e8;
-  --c_number: #709756;
-  --c_string: #a31515;
-  --c_regex: #914525;
-  --c_function: inherit;
-  --c_comment: #008000;
-  --c_doc: #808080;
-  --c_tag: #7d7d7d;
-  --c_var: #b436bf;
-  --c_attr: #ff0000;
-  --c_section: #a31515;
-  --c_selector: #0000ff;
-  --c_addition: #a31515;
-  --c_deletion: #2b91af;
-  --c_caret: black;
-}
-[auto-theme="dark"]:not([theme="light"]),
-[theme="dark"] {
-  --c_text: #DCDCDC;
-  --c_keyword: #569CD6;
-  --c_builtin: #4EC9B0;
-  --c_number: #B8D7A3;
-  --c_string: #D69D85;
-  --c_regex: #9A5334;
-  --c_function: inehrit;
-  --c_comment: #57A64A;
-  --c_doc: #608B4E;
-  --c_tag: #9B9B9B;
-  --c_var: #BD63C5;
-  --c_attr: #9CDCFE;
-  --c_section: #ffd700;
-  --c_selector: #569CD6;
-  --c_addition: #144212;
-  --c_deletion: #600;
-  --c_caret: white;
-}
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  color: var(--c_text);
-}
-
-.hljs-keyword,
-.hljs-literal,
-.hljs-symbol,
-.hljs-name,
-.hljs-link {
-  color: var(--c_keyword);
-}
-
-.hljs-link {
-  text-decoration: underline;
-}
-
-.hljs-built_in,
-.hljs-type {
-  color: var(--c_builtin);
-}
-
-.hljs-number,
-.hljs-class {
-  color: var(--c_number);
-}
-
-.hljs-string,
-.hljs-meta-string {
-  color: var(--c_string);
-}
-
-.hljs-regexp,
-.hljs-template-tag {
-  color: var(--c_regex);
-}
-
-.hljs-subst,
-.hljs-function,
-.hljs-title,
-.hljs-params,
-.hljs-formula {
-  color: var(--c_function);
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: var(--c_comment);
-  font-style: italic
-}
-
-.hljs-doctag {
-  color: var(--c_doc);
-}
-
-.hljs-meta,
-.hljs-meta-keyword,
-.hljs-tag {
-  color: var(--c_tag);
-}
-
-.hljs-variable,
-.hljs-template-variable {
-  color: var(--c_var);
-}
-
-.hljs-attr,
-.hljs-attribute,
-.hljs-builtin-name {
-  color: var(--c_attr);
-}
-
-.hljs-section {
-  color: var(--c_section);
-}
-
-.hljs-emphasis {
-  font-style: italic
-}
-
-.hljs-strong {
-  font-weight: bold
-}
-
-.hljs-bullet,
-.hljs-selector-tag,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-  color: var(--c_selector);
-}
-
-.hljs-addition {
-  background-color: var(--c_addition);
-  display: inline-block;
-  width: 100%
-}
-
-.hljs-deletion {
-  background-color: var(--c_deletion);
-  display: inline-block;
-  width: 100%
-}