ku4web-components 6.4.84 → 6.4.88

package/dist/collection/components/ku4-carousel/ku4-carousel.js

@@ -1,369 +0,0 @@
-import { Component, Host, Prop, State, Method, Element, h, Event } from '@stencil/core';
-import { Rolodex, Interval, wait } from 'ku4es-kernel';
-import { Swipe } from 'ku4es-ui-kernel';
-/**
- * @description ku4-carousel
- */
-export class Ku4Carousel {
-  constructor() {
-    /**
-     * Sets the distance, in pixels, a touch must travel
-     * before activating a swipe.
-     */
-    this.swipeTolerance = 44;
-    /**
-     * Will start this carousel in auto scroll mode
-     */
-    this.auto = false;
-    /**
-     * Prevents touch swiping
-     */
-    this.noSwipe = false;
-    /**
-     * Delay in millisecond between slide changes
-     * when running in auto
-     */
-    this.delay = 8000;
-    this.interval = new Interval(this.delay).onInterval(() => {
-      if (this.host.isConnected) {
-        this.display('next');
-      }
-      else {
-        this.disconnectedCallback();
-      }
-    });
-    this.handleMouse = this.handleMouse.bind(this);
-  }
-  /**
-   * Display the next ku4-carousel-slide
-   */
-  async next() {
-    if (!this.hasSlides) {
-      return this;
-    }
-    await this.pause();
-    return this.display('next');
-  }
-  /**
-   * Display the previous ku4-carousel-slide
-   */
-  async previous() {
-    if (!this.hasSlides) {
-      return this;
-    }
-    await this.pause();
-    return this.display('prev');
-  }
-  /**
-   * Slide to the slide number specified.
-   * @param {number|string} slide - Slide number or slide name to slide to.
-   */
-  async slideTo(slide) {
-    await this.pause();
-    const { slides } = this;
-    const value = isNaN(slide)
-      ? slides.findIndex(s => s.getAttribute('name') === slide) + 1
-      : parseInt(slide);
-    if (!(value === this.currentSlideNumber || value < 1 || this.rolodex.length < value)) {
-      const move = value - this.currentSlideNumber;
-      const slide = move < 0 ? 'prev' : 'next';
-      let count = Math.abs(move);
-      while (0 < --count) {
-        await wait(10).then(() => this.rolodex[slide]);
-      }
-      this.display(slide);
-    }
-  }
-  /**
-   * Pause auto slide change
-   */
-  async pause() {
-    this.interval.clear();
-  }
-  /**
-   * Start auto slide change
-   */
-  async play() {
-    const { auto, interval } = this;
-    auto && interval.start();
-  }
-  get slides() {
-    return [].slice.call(this.host.children);
-  }
-  get hasSlides() {
-    return this.rolodex && (this.rolodex.length > 1);
-  }
-  get currentSlideNumber() {
-    const { rolodex } = this;
-    return rolodex && (rolodex.isEmpty ? 0 : rolodex.index + 1);
-  }
-  display(slide) {
-    window.requestAnimationFrame(() => {
-      const { previous, current } = this.slideState;
-      const next = this.rolodex[slide];
-      if (previous) {
-        previous.deactivate();
-      }
-      current.slideOut(slide);
-      next.slideIn(slide);
-      this.slideState = {
-        previous: current,
-        current: next,
-      };
-      this.didSlide.emit(this.currentSlideNumber);
-    });
-    return this;
-  }
-  handleMouse(e) {
-    if (!this.host.contains(e.relatedTarget)) {
-      this.play();
-    }
-  }
-  componentWillLoad() {
-    if (!this.noSwipe) {
-      this.swipe = new Swipe(this.host, this.swipeTolerance)
-        .onLeft(() => this.next())
-        .onRight(() => this.previous());
-    }
-    let slides;
-    try {
-      slides = this.host.querySelectorAll(':scope > ku4-carousel-slide');
-    }
-    catch (e) {
-      slides = [].slice.call(this.host.querySelectorAll('ku4-carousel-slide'))
-        .reduce((acc, item) => {
-        if (item.parentNode === this.host) {
-          acc.push(item);
-        }
-        return acc;
-      }, []);
-    }
-    this.rolodex = new Rolodex(slides);
-    (this.rolodex.current &&
-      this.rolodex.current.activate) &&
-      this.rolodex.current.activate();
-    this.slideState = { current: this.rolodex.current };
-    if (this.auto) {
-      this.host.addEventListener('mouseout', this.handleMouse);
-      this.play();
-    }
-  }
-  connectedCallback() {
-    if (this.swipe) {
-      this.swipe.destroy();
-    }
-    this.host.removeEventListener('mouseout', this.handleMouse);
-    this.interval.clear();
-  }
-  disconnectedCallback() {
-    if (this.swipe) {
-      this.swipe.destroy();
-    }
-    this.host.removeEventListener('mouseout', this.handleMouse);
-    this.interval.clear();
-  }
-  render() {
-    const { hasSlides, currentSlideNumber = 1 } = this;
-    return (h(Host, { "aria-roledescription": "carousel", current: currentSlideNumber },
-      hasSlides && (h("section", { class: "controls" },
-        h("button", { type: "button", class: "prev", onClick: () => this.previous(), "aria-label": "previous slide" }),
-        h("button", { type: "button", class: "next", onClick: () => this.next(), "aria-label": "next slide" }))),
-      h("section", { class: "slide-container", "aria-live": "polite" },
-        h("slot", null)),
-      hasSlides && (h("section", { class: "pages" },
-        h("span", { class: "pages-text" }, `${currentSlideNumber} of ${this.rolodex.length}`)))));
-  }
-  static get is() { return "ku4-carousel"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ku4-carousel.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ku4-carousel.css"]
-  }; }
-  static get properties() { return {
-    "swipeTolerance": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the distance, in pixels, a touch must travel\nbefore activating a swipe."
-      },
-      "attribute": "swipe-tolerance",
-      "reflect": false,
-      "defaultValue": "44"
-    },
-    "auto": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Will start this carousel in auto scroll mode"
-      },
-      "attribute": "auto",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "noSwipe": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Prevents touch swiping"
-      },
-      "attribute": "no-swipe",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "delay": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Delay in millisecond between slide changes\nwhen running in auto"
-      },
-      "attribute": "delay",
-      "reflect": false,
-      "defaultValue": "8000"
-    }
-  }; }
-  static get states() { return {
-    "slideState": {}
-  }; }
-  static get events() { return [{
-      "method": "didSlide",
-      "name": "slide",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event fired when slide changes"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "next": {
-      "complexType": {
-        "signature": "() => Promise<this>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<this>"
-      },
-      "docs": {
-        "text": "Display the next ku4-carousel-slide",
-        "tags": []
-      }
-    },
-    "previous": {
-      "complexType": {
-        "signature": "() => Promise<this>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<this>"
-      },
-      "docs": {
-        "text": "Display the previous ku4-carousel-slide",
-        "tags": []
-      }
-    },
-    "slideTo": {
-      "complexType": {
-        "signature": "(slide: any) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "slide - Slide number or slide name to slide to."
-              }],
-            "text": "- Slide number or slide name to slide to."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Slide to the slide number specified.",
-        "tags": [{
-            "name": "param",
-            "text": "slide - Slide number or slide name to slide to."
-          }]
-      }
-    },
-    "pause": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Pause auto slide change",
-        "tags": []
-      }
-    },
-    "play": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Start auto slide change",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/ku4-carousel-controls/ku4-carousel-controls.css

@@ -1,32 +0,0 @@
-:host {
-  position: relative;
-  display: block;
-}
-
-input[type=radio] {
-  appearance: none;
-  position: relative;
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  padding: 0;
-  border: solid 1px #888;
-  border-radius: 50%;
-  box-sizing: border-box;
-  vertical-align: middle;
-}
-input[type=radio]:checked:after {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 14px;
-  height: 14px;
-  margin: 0;
-  padding: 0;
-  border: solid 1px #888;
-  border-radius: 50%;
-  box-sizing: border-box;
-  text-align: center;
-  background-color: #333;
-}

package/dist/collection/components/ku4-carousel-controls/ku4-carousel-controls.js

@@ -1,112 +0,0 @@
-import { Component, Prop, Element, h } from '@stencil/core';
-import { Assert } from 'ku4es-kernel';
-/**
- * @description ku4-carousel-controls
- */
-export class Ku4CarouselControls {
-  constructor() {
-    this.carousel = document.getElementById(this.for);
-    this.handleSlide = this.handleSlide.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-  }
-  get slides() {
-    return [].slice.call(this.carousel.children);
-  }
-  get controls() {
-    return [].slice.call(this.host.children);
-  }
-  handleSlide(e) {
-    this.controls.forEach((control) => {
-      control.removeAttribute('current');
-      control.checked = false;
-    });
-    try {
-      const current = this.controls[e.detail - 1];
-      current.setAttribute('current', e.detail);
-      current.checked = true;
-    }
-    catch (e) {
-      /* Fail silently */
-    }
-  }
-  async handleChange(e) {
-    const { carousel, slides, controls } = this;
-    const slideValue = e.target.getAttribute('slide');
-    const n = isNaN(slideValue)
-      ? slides.findIndex(slide => slide.getAttribute('name') === slideValue) + 1
-      : parseInt(slideValue);
-    const slide = isNaN(n) ? controls.indexOf(e.target) + 1 : n;
-    await carousel.slideTo(slide);
-    try {
-      e.target.setAttribute('current', slide);
-    }
-    catch (e) {
-      /* Fail silently */
-    }
-  }
-  componentWillLoad() {
-    const { carousel, controls } = this;
-    try {
-      carousel.addEventListener('slide', this.handleSlide, { passive: true });
-      controls.forEach((control, i) => {
-        if (i === 0) {
-          control.setAttribute('current', i + 1);
-        }
-        if (control.nodeName === 'INPUT') {
-          control.addEventListener('change', this.handleChange);
-        }
-        else {
-          control.addEventListener('keydown', this.handleChange);
-          control.addEventListener('mousedown', this.handleChange, { passive: true });
-          control.addEventListener('touchstart', this.handleChange, { passive: true });
-        }
-      });
-    }
-    catch (e) {
-      if (!Assert.exists(carousel)) {
-        throw new ReferenceError('ku4-carousel-controls must connect to a ku4-carousel.');
-      }
-    }
-  }
-  disconnectedCallback() {
-    const { carousel, controls } = this;
-    carousel.removeEventListener('slide', this.handleSlide);
-    controls.forEach((control) => {
-      control.removeEventListener('change', this.handleChange);
-      control.removeEventListener('keydown', this.handleChange);
-      control.removeEventListener('mousedown', this.handleChange);
-      control.removeEventListener('touchstart', this.handleChange);
-    });
-  }
-  render() {
-    return h("slot", null);
-  }
-  static get is() { return "ku4-carousel-controls"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ku4-carousel-controls.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ku4-carousel-controls.css"]
-  }; }
-  static get properties() { return {
-    "for": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls for carousel having id of value"
-      },
-      "attribute": "for",
-      "reflect": false
-    }
-  }; }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/ku4-carousel-slide/ku4-carousel-slide.css

@@ -1,3 +0,0 @@
-:host {
-  overflow-x: hidden;
-}

package/dist/collection/components/ku4-carousel-slide/ku4-carousel-slide.js

@@ -1,159 +0,0 @@
-import { Component, Host, State, Method, h, Prop, } from '@stencil/core';
-/**
- * @description ku4-carousel-slide
- */
-export class Ku4CarouselSlide {
-  constructor() {
-    this.classList = '';
-  }
-  /**
-   * Move this slide in to view.
-   * @param {string} direction - Direction to move.
-   */
-  async slideIn(direction) {
-    this.active = true;
-    this.classList = `active ${direction}`;
-  }
-  /**
-   * Move this slide out of view.
-   * @param {string} direction - Direction to move.
-   */
-  async slideOut(direction) {
-    this.active = false;
-    this.classList = `inactive  ${direction}`;
-  }
-  /**
-   * Set this slide to active.
-   */
-  async activate() {
-    this.active = true;
-    this.classList = 'active';
-  }
-  /**
-   * Set this slide to inactive.
-   */
-  async deactivate() {
-    this.active = false;
-    this.classList = '';
-  }
-  render() {
-    const { active, classList } = this;
-    return (h(Host, { class: `${classList}`, "aria-hidden": active ? 'false' : 'true', "aria-roledescription": "slide" },
-      h("slot", null)));
-  }
-  static get is() { return "ku4-carousel-slide"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ku4-carousel-slide.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ku4-carousel-slide.css"]
-  }; }
-  static get properties() { return {
-    "name": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Name of slide. The value of this property can be used as the\nvalue of the \"slide\" attribute of a ku4-carousel-control to\ntarget this slide as the active slide for the target ku4-carousel-control"
-      },
-      "attribute": "name",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "active": {},
-    "classList": {}
-  }; }
-  static get methods() { return {
-    "slideIn": {
-      "complexType": {
-        "signature": "(direction: 'prev' | 'next') => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "direction - Direction to move."
-              }],
-            "text": "- Direction to move."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Move this slide in to view.",
-        "tags": [{
-            "name": "param",
-            "text": "direction - Direction to move."
-          }]
-      }
-    },
-    "slideOut": {
-      "complexType": {
-        "signature": "(direction: 'prev' | 'next') => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "direction - Direction to move."
-              }],
-            "text": "- Direction to move."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Move this slide out of view.",
-        "tags": [{
-            "name": "param",
-            "text": "direction - Direction to move."
-          }]
-      }
-    },
-    "activate": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Set this slide to active.",
-        "tags": []
-      }
-    },
-    "deactivate": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Set this slide to inactive.",
-        "tags": []
-      }
-    }
-  }; }
-}