@itcenteratunihelsinki/huds-lib 0.8.41 → 0.8.43

package/dist/collection/components/hy-video/hy-video.js

@@ -1,16 +1,37 @@
-import { Component, Prop, h, Element, State } from '@stencil/core';
+import { h } from '@stencil/core';
 import { HeadingVarians } from '../../utils/utils';
 export class HyVideo {
   constructor() {
-    /** Should context label be visible */
+    this.renderPreviewWithLink = () => {
+      return this.linkToVideo ? (h("a", { title: this.videoTitle, href: this.linkToVideo, class: "hy-video__link-to-video" }, h("img", { loading: this.disableLazy ? 'eager' : 'lazy', class: "hy-video__preview-image", src: this.previewImageUrl, alt: this.videoTitle }))) : (h("img", { loading: this.disableLazy ? 'eager' : 'lazy', class: "hy-video__preview-image", src: this.previewImageUrl, alt: this.videoTitle }));
+    };
+    this.renderPlayButton = () => {
+      if (this.simplePlayButton) {
+        return (h("span", { class: "hy-video__play__simple" }, h("button", { type: "button" }, h("hy-icon", { icon: 'hy-icon-video', class: 'hy-video__play-icon', size: 20 }))));
+      }
+      else {
+        return (h("span", { class: "hy-video__play" }, h("button", { type: "button" }, h("hy-icon", { icon: 'hy-icon-video', class: 'hy-video__play-icon', size: 20 }), h("span", { class: "hy-video__button-label" }, this.playButtonLabel))));
+      }
+    };
+    this.truncate = (str, n) => {
+      return str.length > n ? str.substr(0, n - 1) + '...' : str;
+    };
+    this.videoTitle = undefined;
+    this.videoDescription = undefined;
+    this.contextLabel = undefined;
     this.contextLabelVisible = false;
-    /** Should play button be visible */
+    this.previewImageUrl = undefined;
+    this.linkToVideo = undefined;
+    this.playButtonLabel = undefined;
     this.playButtonVisible = false;
-    /** Series label */
     this.seriesLabel = 'In this series';
-    /** Series count */
     this.seriesCount = null;
-    /** Use horizontal layout where metadata is on side */
+    this.views = undefined;
+    this.viewsLabel = undefined;
+    this.duration = undefined;
+    this.durationLabel = undefined;
+    this.dateAdded = undefined;
+    this.dateAddedLabel = undefined;
     this.horizontal = false;
     this.disableLazy = false;
     this.headerstyle = 'default';
@@ -19,26 +40,6 @@ export class HyVideo {
     this.simplePlayButton = false;
     this.styleList = false;
     this.descCollapsed = false;
-    this.renderPreviewWithLink = () => {
-      return this.linkToVideo ? (h("a", { title: this.videoTitle, href: this.linkToVideo, class: "hy-video__link-to-video" },
-        h("img", { loading: this.disableLazy ? 'eager' : 'lazy', class: "hy-video__preview-image", src: this.previewImageUrl, alt: this.videoTitle }))) : (h("img", { loading: this.disableLazy ? 'eager' : 'lazy', class: "hy-video__preview-image", src: this.previewImageUrl, alt: this.videoTitle }));
-    };
-    this.renderPlayButton = () => {
-      if (this.simplePlayButton) {
-        return (h("span", { class: "hy-video__play__simple" },
-          h("button", { type: "button" },
-            h("hy-icon", { icon: 'hy-icon-video', class: 'hy-video__play-icon', size: 20 }))));
-      }
-      else {
-        return (h("span", { class: "hy-video__play" },
-          h("button", { type: "button" },
-            h("hy-icon", { icon: 'hy-icon-video', class: 'hy-video__play-icon', size: 20 }),
-            h("span", { class: "hy-video__button-label" }, this.playButtonLabel))));
-      }
-    };
-    this.truncate = (str, n) => {
-      return str.length > n ? str.substr(0, n - 1) + '...' : str;
-    };
   }
   componentDidLoad() {
     let hyMainDiv = this.el.closest('.hy-main');
@@ -62,488 +63,449 @@ export class HyVideo {
     const charCount = this.videoDescription ? this.videoDescription.match(/\S/g).length : 0;
     if (this.linkToVideo && this.styleList) {
       return [
-        h("a", { href: this.linkToVideo, class: classAttributes },
-          this.videoTitle && !this.horizontal && !this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h2 }, this.videoTitle)),
-          h("div", { class: "hy-video__video-container" },
-            this.previewImageUrl ? (h("div", null,
-              this.renderPreviewWithLink(),
-              h("slot", { name: "video" }))) : (h("slot", { name: "video" })),
-            this.playButtonVisible && this.renderPlayButton()),
-          h("div", { class: "hy-video__meta" },
-            (this.videoTitle && this.horizontal) ||
-              (this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h3 }, this.videoTitle))),
-            this.contextLabelVisible && h("span", { class: "hy-video__label" }, this.contextLabel),
-            (this.duration || this.views || this.dateAdded || this.seriesCount) && (h("div", { class: "hy-video__meta__details" },
-              this.duration && (h("div", { class: "hy-video__meta__details--item" },
-                h("span", { class: "hy-video__meta__label" }, this.durationLabel),
-                h("span", { class: "hy-video__meta__content" }, this.duration))),
-              this.views && (h("div", { class: "hy-video__meta__details--item" },
-                h("span", { class: "hy-video__meta__label" }, this.viewsLabel),
-                h("span", { class: "hy-video__meta__content" }, this.views))),
-              this.dateAdded && (h("div", { class: "hy-video__meta__details--item" },
-                h("span", { class: "hy-video__meta__label" }, this.dateAddedLabel),
-                h("span", { class: "hy-video__meta__content" }, this.dateAdded))),
-              !this.views && this.seriesCount && (h("div", { class: "hy-video__meta__details--item" },
-                h("span", { class: "hy-video__meta__label" }, this.seriesLabel),
-                h("span", { class: "hy-video__meta__content" }, this.seriesCount))))),
-            this.videoDescription && (h("div", { class: "hy-video__meta__description", "aria-expanded": this.descCollapsed ? 'false' : 'true' },
-              h("div", { class: "hy-video__meta__description__content" }, this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription),
-              charCount > maxChars && (h("span", { class: "hy-video__meta__description__more-button", role: "button", tabindex: "0", "aria-expanded": this.descCollapsed ? 'false' : 'true', onClick: () => (this.descCollapsed = !this.descCollapsed), onKeyDown: (e) => {
-                  if (e.key != ' ')
-                    return;
-                  e.preventDefault();
-                  this.descCollapsed = !this.descCollapsed;
-                } }, this.descCollapsed ? this.showMoreLabel : this.showLessLabel)))))),
+        h("a", { href: this.linkToVideo, class: classAttributes }, this.videoTitle && !this.horizontal && !this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h2 }, this.videoTitle)), h("div", { class: "hy-video__video-container" }, this.previewImageUrl ? (h("div", null, this.renderPreviewWithLink(), h("slot", { name: "video" }))) : (h("slot", { name: "video" })), this.playButtonVisible && this.renderPlayButton()), h("div", { class: "hy-video__meta" }, (this.videoTitle && this.horizontal) ||
+          (this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h3 }, this.videoTitle))), this.contextLabelVisible && h("span", { class: "hy-video__label" }, this.contextLabel), (this.duration || this.views || this.dateAdded || this.seriesCount) && (h("div", { class: "hy-video__meta__details" }, this.duration && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.durationLabel), h("span", { class: "hy-video__meta__content" }, this.duration))), this.views && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.viewsLabel), h("span", { class: "hy-video__meta__content" }, this.views))), this.dateAdded && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.dateAddedLabel), h("span", { class: "hy-video__meta__content" }, this.dateAdded))), !this.views && this.seriesCount && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.seriesLabel), h("span", { class: "hy-video__meta__content" }, this.seriesCount))))), this.videoDescription && (h("div", { class: "hy-video__meta__description", "aria-expanded": this.descCollapsed ? 'false' : 'true' }, h("div", { class: "hy-video__meta__description__content" }, this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription), charCount > maxChars && (h("span", { class: "hy-video__meta__description__more-button", role: "button", tabindex: "0", "aria-expanded": this.descCollapsed ? 'false' : 'true', onClick: () => (this.descCollapsed = !this.descCollapsed), onKeyDown: (e) => {
+            if (e.key != ' ')
+              return;
+            e.preventDefault();
+            this.descCollapsed = !this.descCollapsed;
+          } }, this.descCollapsed ? this.showMoreLabel : this.showLessLabel)))))),
       ];
     }
     else {
       return [
-        h("div", { class: classAttributes },
-          this.videoTitle && !this.horizontal && !this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h2 }, this.videoTitle)),
-          h("div", { class: "hy-video__video-container" },
-            this.previewImageUrl ? (h("div", null,
-              this.renderPreviewWithLink(),
-              h("slot", { name: "video" }))) : (h("slot", { name: "video" })),
-            this.playButtonVisible && this.renderPlayButton()),
-          h("div", { class: "hy-video__meta" },
-            (this.videoTitle && this.horizontal) ||
-              (this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h2 }, this.videoTitle))),
-            this.contextLabelVisible && h("span", { class: "hy-video__label" }, this.contextLabel),
-            (this.duration || this.views || this.dateAdded) && (h("div", { class: "hy-video__meta__details" },
-              this.duration && (h("div", { class: "hy-video__meta__details--item" },
-                h("span", { class: "hy-video__meta__label" }, this.durationLabel),
-                h("span", { class: "hy-video__meta__content" }, this.duration))),
-              this.views && (h("div", { class: "hy-video__meta__details--item" },
-                h("span", { class: "hy-video__meta__label" }, this.viewsLabel),
-                h("span", { class: "hy-video__meta__content" }, this.views))),
-              this.dateAdded && (h("div", { class: "hy-video__meta__details--item" },
-                h("span", { class: "hy-video__meta__label" }, this.dateAddedLabel),
-                h("span", { class: "hy-video__meta__content" }, this.dateAdded))))),
-            this.videoDescription && (h("div", { class: "hy-video__meta__description", "aria-expanded": this.descCollapsed ? 'false' : 'true' },
-              h("div", { class: "hy-video__meta__description__content" }, this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription),
-              charCount > maxChars && (h("span", { class: "hy-video__meta__description__more-button", role: "button", tabindex: "0", "aria-expanded": this.descCollapsed ? 'false' : 'true', onClick: () => (this.descCollapsed = !this.descCollapsed), onKeyDown: (e) => {
-                  if (e.key != ' ')
-                    return;
-                  e.preventDefault();
-                  this.descCollapsed = !this.descCollapsed;
-                } }, this.descCollapsed ? this.showMoreLabel : this.showLessLabel)))))),
+        h("div", { class: classAttributes }, this.videoTitle && !this.horizontal && !this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h2 }, this.videoTitle)), h("div", { class: "hy-video__video-container" }, this.previewImageUrl ? (h("div", null, this.renderPreviewWithLink(), h("slot", { name: "video" }))) : (h("slot", { name: "video" })), this.playButtonVisible && this.renderPlayButton()), h("div", { class: "hy-video__meta" }, (this.videoTitle && this.horizontal) ||
+          (this.styleList && (h("hy-heading", { class: "hy-video__meta__title", heading: HeadingVarians.h2 }, this.videoTitle))), this.contextLabelVisible && h("span", { class: "hy-video__label" }, this.contextLabel), (this.duration || this.views || this.dateAdded) && (h("div", { class: "hy-video__meta__details" }, this.duration && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.durationLabel), h("span", { class: "hy-video__meta__content" }, this.duration))), this.views && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.viewsLabel), h("span", { class: "hy-video__meta__content" }, this.views))), this.dateAdded && (h("div", { class: "hy-video__meta__details--item" }, h("span", { class: "hy-video__meta__label" }, this.dateAddedLabel), h("span", { class: "hy-video__meta__content" }, this.dateAdded))))), this.videoDescription && (h("div", { class: "hy-video__meta__description", "aria-expanded": this.descCollapsed ? 'false' : 'true' }, h("div", { class: "hy-video__meta__description__content" }, this.descCollapsed ? this.truncate(this.videoDescription, 255) : this.videoDescription), charCount > maxChars && (h("span", { class: "hy-video__meta__description__more-button", role: "button", tabindex: "0", "aria-expanded": this.descCollapsed ? 'false' : 'true', onClick: () => (this.descCollapsed = !this.descCollapsed), onKeyDown: (e) => {
+            if (e.key != ' ')
+              return;
+            e.preventDefault();
+            this.descCollapsed = !this.descCollapsed;
+          } }, this.descCollapsed ? this.showMoreLabel : this.showLessLabel)))))),
         h("hy-box", { mb: "1.75, 1.75, 2, 2.5" }),
       ];
     }
   }
   static get is() { return "hy-video"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-video.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-video.css"]
-  }; }
-  static get properties() { return {
-    "videoTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Video title"
-      },
-      "attribute": "video-title",
-      "reflect": false
-    },
-    "videoDescription": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Video description"
-      },
-      "attribute": "video-description",
-      "reflect": false
-    },
-    "contextLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Context label"
-      },
-      "attribute": "context-label",
-      "reflect": false
-    },
-    "contextLabelVisible": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Should context label be visible"
-      },
-      "attribute": "context-label-visible",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "previewImageUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Preview image url"
-      },
-      "attribute": "preview-image-url",
-      "reflect": false
-    },
-    "linkToVideo": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Url to video, used with preview image"
-      },
-      "attribute": "link-to-video",
-      "reflect": false
-    },
-    "playButtonLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label for play button if preview image is provided"
-      },
-      "attribute": "play-button-label",
-      "reflect": false
-    },
-    "playButtonVisible": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Should play button be visible"
-      },
-      "attribute": "play-button-visible",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "seriesLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Series label"
-      },
-      "attribute": "series-label",
-      "reflect": false,
-      "defaultValue": "'In this series'"
-    },
-    "seriesCount": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Series count"
-      },
-      "attribute": "series-count",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "views": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Views count number"
-      },
-      "attribute": "views",
-      "reflect": false
-    },
-    "viewsLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label for views number"
-      },
-      "attribute": "views-label",
-      "reflect": false
-    },
-    "duration": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Duration number"
-      },
-      "attribute": "duration",
-      "reflect": false
-    },
-    "durationLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label for duration number"
-      },
-      "attribute": "duration-label",
-      "reflect": false
-    },
-    "dateAdded": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Date added date as string"
-      },
-      "attribute": "date-added",
-      "reflect": false
-    },
-    "dateAddedLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label for date added"
-      },
-      "attribute": "date-added-label",
-      "reflect": false
-    },
-    "horizontal": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use horizontal layout where metadata is on side"
-      },
-      "attribute": "horizontal",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disableLazy": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disable-lazy",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "headerstyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "headerstyle",
-      "reflect": false,
-      "defaultValue": "'default'"
-    },
-    "showMoreLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-more-label",
-      "reflect": false,
-      "defaultValue": "'Show more'"
-    },
-    "showLessLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-less-label",
-      "reflect": false,
-      "defaultValue": "'Show less'"
-    },
-    "simplePlayButton": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "simple-play-button",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "styleList": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "style-list",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "descCollapsed": {}
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-video.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-video.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "videoTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Video title"
+        },
+        "attribute": "video-title",
+        "reflect": false
+      },
+      "videoDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Video description"
+        },
+        "attribute": "video-description",
+        "reflect": false
+      },
+      "contextLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Context label"
+        },
+        "attribute": "context-label",
+        "reflect": false
+      },
+      "contextLabelVisible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Should context label be visible"
+        },
+        "attribute": "context-label-visible",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "previewImageUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Preview image url"
+        },
+        "attribute": "preview-image-url",
+        "reflect": false
+      },
+      "linkToVideo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Url to video, used with preview image"
+        },
+        "attribute": "link-to-video",
+        "reflect": false
+      },
+      "playButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for play button if preview image is provided"
+        },
+        "attribute": "play-button-label",
+        "reflect": false
+      },
+      "playButtonVisible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Should play button be visible"
+        },
+        "attribute": "play-button-visible",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "seriesLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Series label"
+        },
+        "attribute": "series-label",
+        "reflect": false,
+        "defaultValue": "'In this series'"
+      },
+      "seriesCount": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Series count"
+        },
+        "attribute": "series-count",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "views": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Views count number"
+        },
+        "attribute": "views",
+        "reflect": false
+      },
+      "viewsLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for views number"
+        },
+        "attribute": "views-label",
+        "reflect": false
+      },
+      "duration": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Duration number"
+        },
+        "attribute": "duration",
+        "reflect": false
+      },
+      "durationLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for duration number"
+        },
+        "attribute": "duration-label",
+        "reflect": false
+      },
+      "dateAdded": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Date added date as string"
+        },
+        "attribute": "date-added",
+        "reflect": false
+      },
+      "dateAddedLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for date added"
+        },
+        "attribute": "date-added-label",
+        "reflect": false
+      },
+      "horizontal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use horizontal layout where metadata is on side"
+        },
+        "attribute": "horizontal",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disableLazy": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disable-lazy",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "headerstyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "headerstyle",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "showMoreLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-more-label",
+        "reflect": false,
+        "defaultValue": "'Show more'"
+      },
+      "showLessLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-less-label",
+        "reflect": false,
+        "defaultValue": "'Show less'"
+      },
+      "simplePlayButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "simple-play-button",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "styleList": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "style-list",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "descCollapsed": {}
+    };
+  }
   static get elementRef() { return "el"; }
 }