@itcenteratunihelsinki/huds-lib 0.8.41 → 0.8.43

package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.js

@@ -0,0 +1,211 @@
+import { h } from '@stencil/core';
+import { jsonParserWorker } from '../../global/globalScript';
+import Swiper, { Navigation, Pagination, A11y } from '../../../node_modules/swiper';
+import { CtaLinkButtonVariants } from '../../utils/utils';
+export class HyHeroCarousel {
+  constructor() {
+    this.itemCount = undefined;
+    this.ariaLabelNext = 'Next slide';
+    this.ariaLabelPrev = 'Previous slide';
+    this.ariaLabelFirstSlide = 'This is the first slide';
+    this.ariaLabelLastSlide = 'This is the first slide';
+    this.ariaLabelBulletMessage = 'Go to slide';
+    this.data = undefined;
+  }
+  async componentWillLoad() {
+    this._data = await jsonParserWorker(this.data);
+  }
+  componentDidLoad() {
+    new Swiper('.swiper', {
+      modules: [Navigation, Pagination, A11y],
+      enabled: true,
+      direction: 'horizontal',
+      loop: true,
+      spaceBetween: 50,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        bulletClass: 'hero-carousel--pagination__bullet',
+        bulletActiveClass: 'hero-carousel--pagination__bullet--active',
+        clickable: true,
+        renderBullet: function (index, className) {
+          return `<span aria-label="${this.ariaLabelBulletMessage} ${index}" data-index="${index}" class="${className}"></span>`;
+        },
+      },
+      a11y: {
+        enabled: true,
+        firstSlideMessage: this.ariaLabelFirstSlide,
+        lastSlideMessage: this.ariaLabelLastSlide,
+        nextSlideMessage: this.ariaLabelNext,
+        prevSlideMessage: this.ariaLabelPrev,
+        paginationBulletMessage: `${this.ariaLabelBulletMessage} {{index}}`,
+      },
+    });
+  }
+  handleSlideChangeFromButtons(index) {
+    const swiperEl = document.querySelector('.swiper');
+    swiperEl.swiper.slideTo(index, 300, null);
+  }
+  render() {
+    const carouselContentClasses = ['hero-carousel--item__content', this.itemCount > 1 ? 'has-pagination' : ''].join(' ');
+    return (h("div", { class: "hero-carousel-container" }, h("div", { class: "swiper" }, h("div", { class: "swiper-wrapper" }, this._data['items'] &&
+      this._data['items'].map((i, index) => {
+        const currentIndex = index;
+        const srcSet = JSON.parse(i.image_sources);
+        return (h("div", { class: "swiper-slide", "data-title": i.title, "data-desc": i.desc }, h("div", { class: "swiper-slide hero-carousel--item" }, h("div", { class: carouselContentClasses }, h("h2", { class: "hero-carousel--item__title" }, i.title), h("div", { class: "hero-carousel--item__desc" }, i.desc), i.uri && (h("hy-cta-button", { "link-content": i.uri_title, "sc-label": i.uri_title, url: i.uri, "is-external": "false", variant: CtaLinkButtonVariants.heroBlue })), this.itemCount > 1 ? (h("div", { class: "hero-carousel--item__pagination" }, h("ul", null, this._data['items'].map((i, index) => {
+          const paginationButtonClasses = [
+            'hero-carousel--item__pagination__button',
+            index === currentIndex ? 'is-current' : '',
+          ].join(' ');
+          return (h("li", { class: paginationButtonClasses }, h("button", { "aria-label": `${this.ariaLabelBulletMessage} ${index}`, onClick: () => this.handleSlideChangeFromButtons(index), "data-index": index, "aria-current": index === currentIndex ? 'true' : 'false' }, h("span", { class: "hero-carousel--item__pagination__button__theme" }, i.theme_text), i.title)));
+        })))) : null), h("div", { class: "hero-carousel--item__image" }, srcSet.length > 0 ? (h("picture", null, srcSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : '' }))), h("img", { "aria-hidden": "true", loading: 'eager', alt: i.image_alt, class: `hy-image__image`, src: i.image_fallback }))) : (h("img", { "aria-hidden": "true", loading: 'eager', alt: i.image_alt, class: `hy-image__image`, src: i.image_fallback }))))));
+      })), this.itemCount > 1 ? (h("div", { class: "hero-carousel--controls" }, h("div", { class: "swiper-pagination hero-carousel--pagination--mobile" }), h("div", { class: "hero-carousel--controls__buttons" }, h("div", { class: "swiper-button-prev" }, h("hy-icon", { class: "arrow", icon: "hy-icon-arrow-left" }), h("hy-icon", { class: "caret", icon: "hy-icon-caret-left" })), h("div", { class: "swiper-button-next" }, h("hy-icon", { class: "arrow", icon: "hy-icon-arrow-right" }), h("hy-icon", { class: "caret", icon: "hy-icon-caret-right" }))))) : null)));
+  }
+  static get is() { return "hy-hero-carousel"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["./hy-hero-carousel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-hero-carousel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "itemCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "item-count",
+        "reflect": false
+      },
+      "ariaLabelNext": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label-next",
+        "reflect": false,
+        "defaultValue": "'Next slide'"
+      },
+      "ariaLabelPrev": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label-prev",
+        "reflect": false,
+        "defaultValue": "'Previous slide'"
+      },
+      "ariaLabelFirstSlide": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label-first-slide",
+        "reflect": false,
+        "defaultValue": "'This is the first slide'"
+      },
+      "ariaLabelLastSlide": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label-last-slide",
+        "reflect": false,
+        "defaultValue": "'This is the first slide'"
+      },
+      "ariaLabelBulletMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label-bullet-message",
+        "reflect": false,
+        "defaultValue": "'Go to slide'"
+      },
+      "data": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CarouselItem[] | string",
+          "resolved": "CarouselItem[] | string",
+          "references": {
+            "CarouselItem": {
+              "location": "local",
+              "path": "/builds/julkiset-sivut/design-system-lib/src/components/hy-hero-carousel/hy-hero-carousel.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data",
+        "reflect": false
+      }
+    };
+  }
+}