ku4web-components 6.4.80 → 6.4.83

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

@@ -0,0 +1,112 @@
+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('keyup', this.handleChange);
+          control.addEventListener('mouseup', 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('keyup', this.handleChange);
+      control.removeEventListener('mouseup', 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

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

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

@@ -0,0 +1,159 @@
+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": []
+      }
+    }
+  }; }
+}