kempo 4.2.4 → 4.2.5

package/src/components/Collapsible.js

@@ -1,104 +0,0 @@
-import Component from './Component.js';
-import './Icon.js';
-import { onEvent, offEvent, dispatchEvent } from '../utils/element.js';
-
-const clickHandler = Symbol('clickHandler');
-export default class Collapsible extends Component {
-  constructor(opened = false){
-    super();
-
-    /* Private Methods */
-    this[clickHandler] = () => {
-      this.toggle();
-    }
-
-    /* Init */
-    this.registerAttributes({
-      opened
-    });
-  }
-
-  /* Lifecycle Callbacks */
-  async render(force){
-    if(await super.render(force)){
-      onEvent(this.shadowRoot.getElementById('label'), 'click', this[clickHandler]);
-      return  true;
-    }
-    return false;
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    offEvent(this.shadowRoot.getElementById('label'), 'click', this[clickHandler]);
-  }
-  attributeChangedCallback(n, oV, nV){
-    super.attributeChangedCallback(n, oV, nV);
-    if(n === 'opened' && oV !== nV){
-      dispatchEvent(this, `openedchanged ${nV==='true'?'open':'close'}`);
-    }
-  }
-
-  /* Public Methods */
-  open(){
-    this.opened = true;
-  }
-  close(){
-    this.opened = false;
-  }
-  toggle(){
-    this.opened = !this.opened;
-    dispatchEvent(this, 'openedtoggled');
-  }
-
-  /* Shadow DOM */
-  get shadowTemplate(){
-    return /*html*/`
-      <div id="labelContainer">
-        <div id="label">
-          <slot name="label"></slot>
-        </div>
-        <div id="labelIcon">
-          <slot name="labelIcon">
-            <k-icon name="chevron-right"></k-icon>
-          </slot>
-        </div>
-      </div>
-      <div id="content">
-        ${super.shadowTemplate}
-      </div>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        display: block;
-      }
-      #labelContainer {
-        display: flex;
-        cursor: pointer;
-      }
-      #label {
-        flex: 1 1 auto;
-      }
-      #labelIcon {
-        flex: 0 0 none;
-        opacity: 0.5;
-        transform: rotate(90deg);
-        transition: transform var(--animation_ms, 256ms);
-      }
-      #labelContainer:hover #labelIcon {
-        opacity: 1;
-      }
-      :host([opened="true"]) #labelIcon {
-        transform: rotate(-90deg);
-      }
-      :host(:not([opened="true"])) #content {
-        display: none;
-      }
-    `;
-  }
-
-  /* Static Attributes */
-  static observedAttributes = [...super.observedAttributes, 'opened'];
-}
-window.customElements.define('k-collapsible', Collapsible);

package/src/components/Component.js

@@ -1,110 +0,0 @@
-import {
-  getCase
-} from '../utils/string.js';
-
-export default class Component extends HTMLElement {
-  constructor(shadowDetails = {}){
-    super();
-    this.attachShadow({mode: 'open', ...shadowDetails});
-    this.registerAttribute('rendered', false);
-  }
-  async connectedCallback(){
-    this.render(true);
-  };
-  async disconnectedCallback(){};
-  async attributeChangedCallback(){};
-  async propChangedCallback(){};
-  async render(force = false){
-    if(force || !this.rendered){
-      this.shadowRoot.innerHTML = `<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.shadowTemplate}<style>${this.shadowStyles}</style>`;
-      this.rendered = true;
-      return true;
-    }
-  }
-  registerAttribute(name, defaultValue = ''){
-    const {
-      camel: camelName,
-      dash: dashName
-    } = getCase(name);
-    const type = typeof(defaultValue);
-    Object.defineProperty(this, camelName, {
-      get: () => {
-        const value = this.getAttribute(dashName);
-        if(type == 'number'){
-          return parseFloat(value);
-        } else if(type === 'object'){
-          return typeof(value)==='string'?JSON.parse(value):value;
-        } else if(type === 'boolean'){
-          return typeof(value)==='string'?value.toLowerCase().trim()==='true':!!value;
-        } else if(type === 'string'){
-          return value || '';
-        } else {
-          return value;
-        }
-      },
-      set: (value) => {
-        if(this[dashName] === value) return; // no change
-        if(type === 'boolean'){
-          if(value){
-            this.setAttribute(dashName, 'true');
-          } else {
-            this.removeAttribute(dashName);
-          }
-        } else if(type === 'object'){
-          this.setAttribute(dashName, JSON.stringify(value || {}));
-        } else if(type === 'number'){
-          if(value || value === 0){
-            this.setAttribute(dashName, value);
-          } else {
-            this.removeAttribute(dashName);
-          }
-        } else {
-          this.setAttribute(dashName, value);
-        }
-      }
-    });
-    if(this.getAttribute(dashName) === null) this[camelName] = defaultValue;
-  }
-  registerAttributes(attrs){
-    for(const key in attrs){
-      this.registerAttribute(key, attrs[key]);
-    }
-  }
-  registerProp(name, value){
-    const propSymbol = Symbol(name);
-    this[propSymbol] = value;
-    Object.defineProperty(this, name, {
-      get: () => {
-        return this[propSymbol];
-      },
-      set: (value) => {
-        if(this[propSymbol] !== value){
-          const oldValue = this[propSymbol];
-          this[propSymbol] = value;
-          this.propChangedCallback(name, oldValue, value);
-        }
-      }
-    });
-  }
-  registerProps(props){
-    for(const key in props){
-      this.registerProp(key, props[key]);
-    }
-  }
-  renderIf(condition, html){
-    return condition?html:''
-  }
-
-  get shadowTemplate(){
-    return /*html*/`
-      <slot></slot>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/``;
-  }
-
-  static observedAttributes = ['rendered'];
-  static pathToKempo = import.meta.url.substring(0, import.meta.url.indexOf('/components/Component.js') );
-}
-window.customElements.define('k-component', Component);

package/src/components/ContentSlider.js

@@ -1,192 +0,0 @@
-import LazyComponent from './LazyComponent.js';
-import {
-  onEvent,
-  offEvent,
-  dispatchEvent
-} from '../utils/element.js';
-
-const content = Symbol(),
-      prevClickHandler = Symbol(),
-      nextClickHandler = Symbol(),
-      keydownHandler = Symbol();
-export default class ContentSlider extends LazyComponent {
-  constructor(_content = [], {
-    index = 0,
-    controls = true,
-    globalControls = false,
-    keyboardControls = true,
-    loop = false
-  } = {}){
-    super();
-
-    /* Private Members */
-    this[content] = [..._content];
-
-    /* Private Methods */
-    this[prevClickHandler] = () => this.previous();
-    this[nextClickHandler] = () => this.next();
-    this[keydownHandler] = (event) => {
-      if(event.code === 'ArrowLeft'){
-        event.preventDefault();
-        dispatchEvent(this, 'keyleft');
-        this.previous();
-      } else if(event.code === 'ArrowRight'){
-        event.preventDefault();
-        dispatchEvent(this, 'keyright');
-        this.next();
-      }
-    }
-
-    /* Init */
-    this.registerAttributes({
-      index,
-      controls,
-      keyboardControls,
-      globalControls,
-      loop
-    });
-    this.tabIndex = 0;
-  }
-
-  /* Lifecycle Callback */
-  connectedCallback(){
-    super.connectedCallback();
-    this[content] = [...this.querySelectorAll(':scope > *')];
-  }
-  async render(force){
-    if(await super.render(force)){
-      if(this.keyboardControls){ // add keyboard controls
-        if(this.globalControls){
-          onEvent(window, 'keydown', this[keydownHandler]);
-        } else {
-          onEvent(this, 'keydown', this[keydownHandler]);
-          onEvent(this.shadowRoot, 'keydown', this[keydownHandler]);
-        }
-      }
-      onEvent(this.shadowRoot.getElementById('prev'), 'click', this[prevClickHandler]);
-      onEvent(this.shadowRoot.getElementById('next'), 'click', this[nextClickHandler]);
-      this.renderContent();
-      return true;
-    }
-    return false;
-  }
-  attributeChangedCallback(n, oV, nV){
-    super.attributeChangedCallback(n, oV, nV);
-    if(n === 'index' && oV !== nV){
-      const newIndex = parseInt(nV);
-      const validNew = Math.max(Math.min(this[content].length-1, newIndex), 0);
-      if(newIndex !== validNew){
-        this.index = validNew;
-      } else {
-        dispatchEvent(this, 'change', {
-          index: validNew
-        });
-        this.renderContent();
-      }
-    } else if(n === 'keyboard-controls' && oV !== nV){
-      if(this.keyboardControls){ // add keyboard controls
-        if(this.globalControls){
-          onEvent(window, 'keydown', this[keydownHandler]);
-        } else {
-          onEvent(this, 'keydown', this[keydownHandler]);
-          onEvent(this.shadowRoot, 'keydown', this[keydownHandler]);
-        }
-      } else { // remove keyboard controls
-        offEvent(this.globalControls?window:this.shadowRoot, 'keydown', this[keydownHandler]);
-      }
-    }
-  }
-  renderContent(){
-    this.innerHTML = '';
-    this.appendChild(this[content][this.index]);
-  }
-  disconnectedCallback(){
-    super.disconnectedCallback();
-    offEvent(this.shadowRoot.getElementById('prev'), 'click', this[prevClickHandler]);
-    offEvent(this.shadowRoot.getElementById('next'), 'click', this[nextClickHandler]);
-    offEvent(window, 'keydown', this[keydownHandler]);
-    offEvent(this.shadowRoot, 'keydown', this[keydownHandler]);
-    offEvent(this, 'keydown', this[keydownHandler]);
-  }
-
-  /* Public Methods */
-  previous(){
-    let newIndex = this.index - 1;
-    if(this.loop){
-      if(newIndex < 0) newIndex = this[content].length - 1;
-    }
-    dispatchEvent(this, 'previous', {index: newIndex});
-    this.index = newIndex;
-  }
-  next(){
-    let newIndex = this.index + 1;
-    if(this.loop){
-      if(newIndex >= this[content].length) newIndex = 0;
-    }
-    dispatchEvent(this, 'next', {index: newIndex});
-    this.index = newIndex;
-  }
-  goto(newIndex){
-    dispatchEvent(this, 'goto', {index: newIndex});
-    this.index = newIndex;
-  }
-
-  /* Shadow DOM */
-  get shadowTemplate(){
-    return /*html*/`
-      <div id="content">
-        ${super.shadowTemplate}
-      </div>
-      <div id="controls">
-        <button
-          id="prev"
-          class="no-btn"
-        >
-          <slot name="prev">
-            <k-icon name="chevron-left"></k-icon>
-          </slot>
-        </button>
-        <button
-          id="next"
-          class="no-btn"
-        >
-          <slot name="next">
-            <k-icon name="chevron-right"></k-icon>
-          </slot>
-        </button>
-      </div>
-    `;
-  }
-  get shadowStyles(){
-    return /*css*/`
-      ${super.shadowStyles}
-      :host {
-        display: block;
-        position: relative;
-        outline: none;
-      }
-      #prev,
-      #next {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        font-size: 2rem;
-      }
-      #next {
-        right: 0;
-      }
-      :host(:not([controls="true"])) #controls {
-        display: none;
-      }
-    `;
-  }
-
-  /* Static Members */
-  static observedAttributes = [
-    ...LazyComponent.observedAttributes,
-    'index',
-    'keyboard-controls',
-    'global-controls'
-  ];
-}
-window.customElements.define('k-content-slider', ContentSlider);