@siemens/ix 1.5.0-beta.4 → 1.6.0

package/dist/collection/components/card-accordion/card-accordion.js

@@ -0,0 +1,94 @@
+import { h, Host, } from '@stencil/core';
+let accordionControlId = 0;
+const getAriaControlsId = (prefix = 'expand-content') => {
+  return [prefix, accordionControlId++].join('-');
+};
+/**
+ * @since 1.6.0
+ */
+export class CardAccordion {
+  constructor() {
+    this.expandContent = false;
+  }
+  get expandedContent() {
+    return this.hostElement.shadowRoot.querySelector('.expand-content');
+  }
+  onExpandActionClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.expandContent = !this.expandContent;
+    this.accordionExpand.emit({
+      expand: this.expandContent,
+      nativeEvent: event,
+    });
+    if (this.expandContent) {
+      this.scrollExpandedContentIntoView();
+    }
+  }
+  scrollExpandedContentIntoView() {
+    setTimeout(() => {
+      const rect = this.expandedContent.getBoundingClientRect();
+      if (rect.bottom > window.innerHeight) {
+        this.hostElement.shadowRoot
+          .querySelector('.expand-content')
+          .scrollIntoView(false);
+      }
+    }, 150);
+  }
+  render() {
+    return (h(Host, { slot: "card-accordion", class: {
+        show: this.expandContent,
+      } }, h("button", { tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId() }, h("ix-icon", { name: "chevron-right-small", class: {
+        'expand-icon': true,
+        show: this.expandContent,
+      } })), h("div", { class: {
+        'expand-content': true,
+        show: this.expandContent,
+      } }, h("div", { class: 'expand-content-body' }, h("slot", null)), h("div", { class: 'expand-content-footer' }))));
+  }
+  static get is() { return "ix-card-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["card-accordion.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card-accordion.css"]
+    };
+  }
+  static get states() {
+    return {
+      "expandContent": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "accordionExpand",
+        "name": "accordionExpand",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "CardAccordionExpandChangeEvent",
+          "resolved": "{ expand: boolean; nativeEvent: Event; }",
+          "references": {
+            "CardAccordionExpandChangeEvent": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/card-accordion/card-accordion.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=card-accordion.js.map

package/dist/collection/components/card-accordion/card-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-accordion.js","sourceRoot":"","sources":["../../../src/components/card-accordion/card-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,IAAI,kBAAkB,GAAG,CAAC,CAAC;AAC3B,MAAM,iBAAiB,GAAG,CAAC,SAAiB,gBAAgB,EAAE,EAAE;EAC9D,OAAO,CAAC,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,CAAC,CAAC;AAOF;;GAEG;AAMH,MAAM,OAAO,aAAa;;yBAQC,KAAK;;EAE9B,IAAI,eAAe;IACjB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;EACtE,CAAC;EAED,mBAAmB,CAAC,KAAY;IAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;MACxB,MAAM,EAAE,IAAI,CAAC,aAAa;MAC1B,WAAW,EAAE,KAAK;KACnB,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;EACH,CAAC;EAEO,6BAA6B;IACnC,UAAU,CAAC,GAAG,EAAE;MACd,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC;MAC1D,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE;QACpC,IAAI,CAAC,WAAW,CAAC,UAAU;WACxB,aAAa,CAAC,iBAAiB,CAAC;WAChC,cAAc,CAAC,KAAK,CAAC,CAAC;OAC1B;IACH,CAAC,EAAE,GAAG,CAAC,CAAC;EACV,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CAAC,aAAa;OACzB;MAED,cACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,EAC1D,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACnD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,aAAa,mBAClB,iBAAiB,EAAE;QAElC,eACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE;YACL,aAAa,EAAE,IAAI;YACnB,IAAI,EAAE,IAAI,CAAC,aAAa;WACzB,GACQ,CACJ;MACT,WACE,KAAK,EAAE;UACL,gBAAgB,EAAE,IAAI;UACtB,IAAI,EAAE,IAAI,CAAC,aAAa;SACzB;QAED,WAAK,KAAK,EAAE,qBAAqB;UAC/B,eAAa,CACT;QACN,WAAK,KAAK,EAAE,uBAAuB,GAAQ,CACvC,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  State,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n  return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n  expand: boolean;\n  nativeEvent: Event;\n};\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-accordion',\n  styleUrl: 'card-accordion.scss',\n  shadow: true,\n})\nexport class CardAccordion {\n  @Element() hostElement: HTMLIxCardAccordionElement;\n\n  /**\n   * @internal\n   */\n  @Event() accordionExpand: EventEmitter<CardAccordionExpandChangeEvent>;\n\n  @State() expandContent = false;\n\n  get expandedContent() {\n    return this.hostElement.shadowRoot.querySelector('.expand-content');\n  }\n\n  onExpandActionClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.expandContent = !this.expandContent;\n    this.accordionExpand.emit({\n      expand: this.expandContent,\n      nativeEvent: event,\n    });\n\n    if (this.expandContent) {\n      this.scrollExpandedContentIntoView();\n    }\n  }\n\n  private scrollExpandedContentIntoView() {\n    setTimeout(() => {\n      const rect = this.expandedContent.getBoundingClientRect();\n      if (rect.bottom > window.innerHeight) {\n        this.hostElement.shadowRoot\n          .querySelector('.expand-content')\n          .scrollIntoView(false);\n      }\n    }, 150);\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"card-accordion\"\n        class={{\n          show: this.expandContent,\n        }}\n      >\n        <button\n          tabIndex={0}\n          class={{ 'expand-action': true, show: this.expandContent }}\n          onClick={(event) => this.onExpandActionClick(event)}\n          role=\"button\"\n          type=\"button\"\n          aria-expanded={this.expandContent}\n          aria-controls={getAriaControlsId()}\n        >\n          <ix-icon\n            name=\"chevron-right-small\"\n            class={{\n              'expand-icon': true,\n              show: this.expandContent,\n            }}\n          ></ix-icon>\n        </button>\n        <div\n          class={{\n            'expand-content': true,\n            show: this.expandContent,\n          }}\n        >\n          <div class={'expand-content-body'}>\n            <slot></slot>\n          </div>\n          <div class={'expand-content-footer'}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/card-content/card-content.css

@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  height: 100%;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}

package/dist/collection/components/card-content/card-content.js

@@ -0,0 +1,22 @@
+import { h, Host } from '@stencil/core';
+/**
+ * @since 1.6.0
+ */
+export class CardContent {
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "ix-card-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["card-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card-content.css"]
+    };
+  }
+}
+//# sourceMappingURL=card-content.js.map

package/dist/collection/components/card-content/card-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-content.js","sourceRoot":"","sources":["../../../src/components/card-content/card-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,WAAW;EACtB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/card-list/card-list.css

@@ -0,0 +1,127 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0.5rem;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host .CardList_Title {
+  display: flex;
+  position: relative;
+  height: 1.5rem;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+:host .CardList__Title__Button {
+  margin-right: 1rem;
+  transition: var(--theme-default-time) transform ease-in-out;
+}
+:host .CardList__Title__Button__Collapsed {
+  transform: rotate(-90deg);
+}
+:host .CardList__Title__Show__All {
+  align-self: center;
+  margin-left: auto;
+  margin-right: 0px;
+}
+:host .CardList__Content {
+  display: flex;
+  position: relative;
+  height: calc(100% - 1.5rem);
+  width: 100%;
+  gap: 1.5rem;
+  transition: var(--theme-default-time) ease-in-out;
+  overflow: auto;
+}
+:host .CardList__Content__Collapsed {
+  min-height: 0px;
+  max-height: 0px;
+  overflow: hidden;
+  opacity: 0;
+}
+:host .CardList__Style__Flexbox__Scroll {
+  flex-wrap: wrap;
+}
+:host .CardList__Style__Infinite__Scroll {
+  flex-wrap: nowrap;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar {
+  display: none;
+}
+:host .CardList__Overflow {
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  pointer-events: all;
+  -webkit-mask-image: var(--ix-card-list-overflow, none);
+          mask-image: var(--ix-card-list-overflow, none);
+}
+:host .Show__All__Card {
+  display: flex;
+  position: relative;
+  align-self: flex-start;
+  justify-self: center;
+  max-width: 11.25rem;
+  min-width: 11.25rem;
+  width: 11.25rem;
+  min-height: 11.25rem;
+  max-height: 11.25rem;
+  height: 11.25rem;
+  --ix-card-border-color: var(--theme-color-primary);
+  color: var(--theme-color-primary);
+}
+:host .CardList__Style__Infinite__Scroll .Show__All__Card {
+  margin-top: 2.375rem;
+}
+:host .CardList__Style__Flexbox__Scroll .Show__All__Card {
+  margin-bottom: 2.375rem;
+}
+:host .Show__All__Card:hover {
+  background-color: var(--theme-color-ghost--hover);
+}
+:host .Show__All__Card:active {
+  background-color: var(--theme-color-ghost--active);
+}
+:host .Show__All__Card__Content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+:host .Show__All__Card__Icon {
+  display: flex;
+  position: absolute;
+  height: 4rem;
+  width: 4rem;
+  justify-content: center;
+  align-items: center;
+  transform: scale(2);
+}
+:host .Show__All__Card__Text {
+  margin-bottom: 0px;
+  margin-top: auto;
+}

package/dist/collection/components/card-list/card-list.js

@@ -0,0 +1,387 @@
+import { h, Host, } from '@stencil/core';
+import { createMutationObserver } from '../utils/mutation-observer';
+function CardListTitle(props) {
+  if (props.label === '') {
+    return null;
+  }
+  return (h("div", { class: "CardList_Title" }, h("ix-icon-button", { ghost: true, icon: "chevron-down", onClick: props.onClick, color: "color-primary", class: {
+      CardList__Title__Button: true,
+      CardList__Title__Button__Collapsed: props.isCollapsed,
+    } }), h("ix-typography", { variant: "large-single" }, props.label), h("ix-button", { class: "CardList__Title__Show__All", ghost: true, onClick: props.onShowAllClick }, h("span", null, props.showAllLabel), h("span", null, !isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null))));
+}
+/**
+ * @since 1.6.0
+ */
+export class CardList {
+  constructor() {
+    this.label = undefined;
+    this.collapse = false;
+    this.listStyle = 'stack';
+    this.maxVisibleCards = 12;
+    this.showAllCount = undefined;
+    this.suppressOverflowHandling = false;
+    this.i18nShowAll = 'Show all';
+    this.i18nMoreCards = 'There are more cards available';
+    this.hasOverflowingElements = false;
+    this.numberOfOverflowingElements = 0;
+    this.numberOfAllChildElements = 0;
+    this.leftScrollDistance = 0;
+    this.rightScrollDistance = 0;
+  }
+  onCardListVisibilityToggle() {
+    this.collapse = !this.collapse;
+    this.collapseChanged.emit(this.collapse);
+  }
+  onShowAllClick(event) {
+    this.showAllClick.emit({
+      nativeEvent: event,
+    });
+  }
+  getListChildren() {
+    const slot = this.hostElement.shadowRoot.querySelector('.CardList__Content > slot');
+    return slot.assignedElements({ flatten: true });
+  }
+  changeVisibilityOfSlotChildren() {
+    const childElements = this.getListChildren();
+    childElements.forEach((element, index) => {
+      if (element instanceof HTMLElement) {
+        if (index > this.maxVisibleCards - 1) {
+          element.classList.add('d-none');
+          return;
+        }
+        element.classList.remove('d-none');
+      }
+    });
+    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;
+    this.numberOfOverflowingElements =
+      childElements.length - this.maxVisibleCards;
+    this.numberOfAllChildElements = childElements.length;
+    this.detectOverflow();
+  }
+  registerOverflowHandler() {
+    this.observer = createMutationObserver(() => {
+      this.changeVisibilityOfSlotChildren();
+    });
+    this.observer.observe(this.hostElement.shadowRoot.querySelector('.CardList__Content'), {
+      childList: true,
+      subtree: true,
+    });
+    requestAnimationFrame(() => {
+      this.changeVisibilityOfSlotChildren();
+    });
+  }
+  shouldHandleOverflow() {
+    if (this.suppressOverflowHandling) {
+      return false;
+    }
+    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {
+      return true;
+    }
+  }
+  get listElement() {
+    return this.hostElement.shadowRoot.querySelector('.CardList__Content');
+  }
+  onCardListScroll() {
+    this.detectOverflow();
+  }
+  isShowMoreCardVisible() {
+    return (this.suppressOverflowHandling === false && this.hasOverflowingElements);
+  }
+  getOpacityFromScrollDistance(distance) {
+    if (!this.listElement) {
+      return 0;
+    }
+    if (distance === 0) {
+      return 0;
+    }
+    if (distance > 100) {
+      return 1;
+    }
+    return distance / 100;
+  }
+  computeMaskLayer() {
+    const maxOverflowWidth = 80;
+    const maskLayer = `linear-gradient(
+      90deg,
+      transparent 0px,
+      black ${maxOverflowWidth *
+      (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)}px,
+      black calc(100% - ${maxOverflowWidth *
+      (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0
+        ? 1
+        : 0)}px),
+      transparent 100%
+    )`;
+    return {
+      '--ix-card-list-overflow': maskLayer,
+    };
+  }
+  detectOverflow() {
+    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;
+    this.leftScrollDistance = scrollLeft;
+    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;
+  }
+  componentDidLoad() {
+    if (this.shouldHandleOverflow()) {
+      this.registerOverflowHandler();
+    }
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  render() {
+    return (h(Host, null, h(CardListTitle, { isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        ? this.numberOfAllChildElements
+        : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e) }), h("div", { class: {
+        CardList__Overflow: true,
+      }, style: this.computeMaskLayer() }, h("div", { class: {
+        CardList__Content: true,
+        CardList__Content__Collapsed: this.collapse,
+        CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',
+        CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',
+      }, onScroll: () => this.onCardListScroll() }, h("slot", { onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+        Show__All__Card: true,
+      }, onClick: (event) => this.showMoreCardClick.emit({
+        nativeEvent: event,
+      }) }, h("ix-card-content", { class: "Show__All__Card__Content" }, h("ix-icon", { name: "more-menu", size: '32', class: 'Show__All__Card__Icon' }), h("span", { class: "Show__All__Card__Text" }, this.i18nMoreCards, " (", this.numberOfOverflowingElements, ")")))) : null))));
+  }
+  static get is() { return "ix-card-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["card-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name the card list"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "collapse": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Collapse the list"
+        },
+        "attribute": "collapse",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "listStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'stack' | 'scroll'",
+          "resolved": "\"scroll\" | \"stack\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List style"
+        },
+        "attribute": "list-style",
+        "reflect": false,
+        "defaultValue": "'stack'"
+      },
+      "maxVisibleCards": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Maximal visible cards"
+        },
+        "attribute": "max-visible-cards",
+        "reflect": false,
+        "defaultValue": "12"
+      },
+      "showAllCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number | undefined",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Overwrite the default show all count."
+        },
+        "attribute": "show-all-count",
+        "reflect": false
+      },
+      "suppressOverflowHandling": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Suppress the overflow handling of child elements"
+        },
+        "attribute": "suppress-overflow-handling",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "i18nShowAll": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "i18n Show all button"
+        },
+        "attribute": "i-1-8n-show-all",
+        "reflect": false,
+        "defaultValue": "'Show all'"
+      },
+      "i18nMoreCards": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "i18n More cards available"
+        },
+        "attribute": "i-1-8n-more-cards",
+        "reflect": false,
+        "defaultValue": "'There are more cards available'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasOverflowingElements": {},
+      "numberOfOverflowingElements": {},
+      "numberOfAllChildElements": {},
+      "leftScrollDistance": {},
+      "rightScrollDistance": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "collapseChanged",
+        "name": "collapseChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fire event when the collapse state is changed by the user"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "showAllClick",
+        "name": "showAllClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fire event when the collapse state is changed by the user"
+        },
+        "complexType": {
+          "original": "{\n    nativeEvent: MouseEvent;\n  }",
+          "resolved": "{ nativeEvent: MouseEvent; }",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "showMoreCardClick",
+        "name": "showMoreCardClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fire event when the show more card is clicked."
+        },
+        "complexType": {
+          "original": "{\n    nativeEvent: MouseEvent;\n  }",
+          "resolved": "{ nativeEvent: MouseEvent; }",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "detectOverflow",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}
+//# sourceMappingURL=card-list.js.map