ku4web-components 6.4.69 → 6.4.74

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

@@ -0,0 +1,221 @@
+@keyframes ku4-carousel-enter-left {
+  0% {
+    top: 0;
+    transform: translate3d(-100%, 0, 0);
+    opacity: 0;
+  }
+  100% {
+    top: 0;
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+@keyframes ku4-carousel-enter-right {
+  0% {
+    top: 0;
+    transform: translate3d(100%, 0, 0);
+    opacity: 0;
+  }
+  100% {
+    top: 0;
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+@keyframes ku4-carousel-exit-left {
+  0% {
+    top: 0;
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    top: 0;
+    transform: translate3d(-100%, 0, 0);
+    opacity: 0;
+  }
+}
+@keyframes ku4-carousel-exit-right {
+  0% {
+    top: 0;
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    top: 0;
+    transform: translate3d(100%, 0, 0);
+    opacity: 0;
+  }
+}
+:host {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  background-color: var(--ku4-carousel-background-color, #fff);
+}
+
+.slide-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.controls .next,
+.controls .prev {
+  position: absolute;
+  display: var(--ku4-carousel-controls-display, block);
+  top: var(--ku4-carousel-controls-top, 0);
+  border: var(--ku4-carousel-controls-border, none);
+  background-color: var(--ku4-carousel-controls-background-color, #fff);
+  font-family: var(--ku4-carousel-controls-font-family, Helvetica, Arial, sans-serif);
+  font-weight: var(--ku4-carousel-controls-font-weight, 400);
+  font-size: var(--ku4-carousel-controls-font-size, 8px);
+  line-height: var(--ku4-carousel-controls-line-height, 12px);
+  opacity: var(--ku4-carousel-controls-opacity, 0.2);
+  z-index: var(--ku4-carousel-controls-z-index, 2);
+}
+.controls .next:focus,
+.controls .prev:focus {
+  background-color: var(--ku4-carousel-controls-focus-background-color, transparent);
+  outline: var(--ku4-carousel-controls-focus-outline, none);
+  opacity: var(--ku4-carousel-controls-focus-opacity, 0.2);
+}
+.controls .next:hover,
+.controls .prev:hover {
+  background-color: var(--ku4-carousel-controls-hover-background-color, transparent);
+  opacity: var(--ku4-carousel-controls-hover-opacity, 1);
+}
+
+.controls .next {
+  right: 0;
+  width: var(--ku4-carousel-controls-next-width, 40px);
+  height: var(--ku4-carousel-controls-next-height, 100%);
+  background-image: var(--ku4-carousel-controls-next-background-image);
+  background-repeat: var(--ku4-carousel-controls-next-background-repeat, no-repeat);
+  background-position-x: var(--ku4-carousel-controls-next-background-position-x, 0);
+  background-position-y: var(--ku4-carousel-controls-next-background-position-y, 50%);
+  background-size: var(--ku4-carousel-controls-next-background-size, 100% 100%);
+}
+.controls .next:focus {
+  background-image: var(--ku4-carousel-controls-next-focus-background-image);
+  background-repeat: var(--ku4-carousel-controls-next-focus-background-repeat, no-repeat);
+  background-position-x: var(--ku4-carousel-controls-next-focus-background-position-x, 0);
+  background-position-y: var(--ku4-carousel-controls-next-focus-background-position-y, 50%);
+  background-size: var(--ku4-carousel-controls-next-focus-background-size, 100% 100%);
+}
+.controls .next:hover {
+  background-image: var(--ku4-carousel-controls-next-hover-background-image);
+  background-repeat: var(--ku4-carousel-controls-next-hover-background-repeat, no-repeat);
+  background-position-x: var(--ku4-carousel-controls-next-hover-background-position-x, 0);
+  background-position-y: var(--ku4-carousel-controls-next-hover-background-position-y, 50%);
+  background-size: var(--ku4-carousel-controls-next-hover-background-size, 100% 100%);
+}
+
+.controls .prev {
+  left: 0;
+  width: var(--ku4-carousel-controls-next-width, 40px);
+  height: var(--ku4-carousel-controls-next-height, 100%);
+  background-image: var(--ku4-carousel-controls-previous-background-image);
+  background-repeat: var(--ku4-carousel-controls-previous-background-repeat, no-repeat);
+  background-position-x: var(--ku4-carousel-controls-previous-background-position-x, 0);
+  background-position-y: var(--ku4-carousel-controls-previous-background-position-y, 50%);
+  background-size: var(--ku4-carousel-controls-previous-background-size, 100% 100%);
+}
+.controls .prev:focus {
+  background-image: var(--ku4-carousel-controls-previous-focus-background-image);
+  background-repeat: var(--ku4-carousel-controls-previous-focus-background-repeat, no-repeat);
+  background-position-x: var(--ku4-carousel-controls-previous-focus-background-position-x, 0);
+  background-position-y: var(--ku4-carousel-controls-previous-focus-background-position-y, 50%);
+  background-size: var(--ku4-carousel-controls-previous-focus-background-size, 100% 100%);
+}
+.controls .prev:hover {
+  background-image: var(--ku4-carousel-controls-previous-hover-background-image);
+  background-repeat: var(--ku4-carousel-controls-previous-hover-background-repeat, no-repeat);
+  background-position-x: var(--ku4-carousel-controls-previous-hover-background-position-x, 0);
+  background-position-y: var(--ku4-carousel-controls-previous-hover-background-position-y, 50%);
+  background-size: var(--ku4-carousel-controls-previous-hover-background-size, 100% 100%);
+}
+
+.pages {
+  position: absolute;
+  display: var(--ku4-carousel-pages-display, block);
+  top: var(--ku4-carousel-pages-top, auto);
+  bottom: var(--ku4-carousel-pages-bottom, 4px);
+  width: var(--ku4-carousel-pages-width, auto);
+  height: var(--ku4-carousel-pages-height, 20px);
+  background-color: var(--ku4-carousel-pages-background-color, transparent);
+  opacity: var(--ku4-carousel-pages-opacity, 0.5);
+  text-align: center;
+  z-index: 3;
+}
+
+.pages-text {
+  display: inline-block;
+  padding: var(--ku4-carousel-pages-text-padding, 4px);
+  font-family: var(--ku4-carousel-pages-text-font-family, Helvetica, Arial, sans-serif);
+  font-weight: var(--ku4-carousel-pages-text-font-weight, 600);
+  font-size: var(--ku4-carousel-pages-text-font-size, 14px);
+  line-height: var(--ku4-carousel-pages-text-line-height, 16px);
+  color: var(--ku4-carousel-pages-text-color, #aaa);
+}
+
+::slotted(*) {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+::slotted(.inactive) {
+  position: absolute;
+  height: 100%;
+  left: 0;
+}
+
+::slotted(.inactive.prev) {
+  animation-name: var(--ku4-carousel-animation-inactive-previous-name, ku4-carousel-exit-right);
+  animation-duration: var(--ku4-carousel-animation-duration, 0.4s);
+  animation-timing-function: var(--ku4-carousel-animation-timing-function);
+  animation-fill-mode: forwards;
+}
+
+::slotted(.inactive.next) {
+  animation-name: var(--ku4-carousel-animation-inactive-next-name, ku4-carousel-exit-left);
+  animation-duration: var(--ku4-carousel-animation-duration, 0.4s);
+  animation-timing-function: var(--ku4-carousel-animation-timing-function);
+  animation-fill-mode: forwards;
+}
+
+::slotted(.active) {
+  position: relative;
+  top: 0;
+  left: 0;
+  width: auto;
+  height: 100%;
+  z-index: 1;
+}
+
+::slotted(.active.prev) {
+  animation-name: var(--ku4-carousel-animation-active-previous-name, ku4-carousel-enter-left);
+  animation-duration: var(--ku4-carousel-animation-duration, 0.4s);
+  animation-timing-function: var(--ku4-carousel-animation-timing-function, ease);
+  animation-fill-mode: forwards;
+}
+
+::slotted(.active.next) {
+  animation-name: var(--ku4-carousel-animation-active-next-name, ku4-carousel-enter-right);
+  animation-duration: var(--ku4-carousel-animation-duration, 0.4s);
+  animation-timing-function: var(--ku4-carousel-animation-timing-function, ease);
+  animation-fill-mode: forwards;
+}
+
+@media (hover: hover) {
+  .controls:hover {
+    background-color: var(--ku4-carousel-controls-focus-background-color, #fff);
+  }
+}

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

@@ -0,0 +1,360 @@
+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} number - Slide number to slide to.
+   */
+  async slideTo(number) {
+    await this.pause();
+    if (!(number === this.currentSlideNumber || number < 1 || this.rolodex.length < number)) {
+      const move = number - 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 hasSlides() {
+    return this.rolodex && (this.rolodex.length > 1);
+  }
+  get currentSlideNumber() {
+    const { rolodex } = this;
+    return rolodex && (rolodex.isEmpty ? 0 : rolodex.index + 1);
+  }
+  display(slide) {
+    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": "(number: any) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "number - Slide number to slide to."
+              }],
+            "text": "- Slide number to slide to."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Slide to the slide number specified.",
+        "tags": [{
+            "name": "param",
+            "text": "number - Slide number 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

@@ -0,0 +1,32 @@
+: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;
+}