@siemens/ix 0.0.0-pr-1373-20240705054533 → 0.0.0-pr-1522-20241022123832

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

@@ -5,13 +5,13 @@ import { h, Host } from "@stencil/core";
 export class Card {
     constructor() {
         this.variant = 'insight';
-        this.selected = undefined;
+        this.selected = false;
     }
     render() {
-        return (h(Host, { key: 'f91df8c114ec01e95ae0eba29c8acf3cacbdec25', class: {
+        return (h(Host, { key: '47a06ae7be967b6077ec9851b22724f39f08bdb5', class: {
                 selected: this.selected,
                 [`card-${this.variant}`]: true,
-            } }, h("div", { key: '24c775b7ae7b2940df9e101b702b91a17a0f6749', class: "card-content" }, h("slot", { key: '57bfc8eb49985aae6aff8ea277475b2012ac8ba2' })), h("div", { key: '8eac7eefd8020827e0ebf38be231de2c7b934797', class: "card-footer" }, h("slot", { key: '207dc0b0ce6279ecb9dfda76e3d03a145a5ff168', name: "card-accordion" }))));
+            } }, h("div", { key: '3bd791183108512f4f150e4223c6b3487104d9f6', class: "card-content" }, h("slot", { key: '7b500f330a7c751385deadaabf9f0a4fbaff7444' })), h("div", { key: '700082bfb35c5ecb56d70502500112e1232f2afb', class: "card-footer" }, h("slot", { key: 'bd156f9ac6728f9cf5a92bb8a454083a50a40cce', name: "card-accordion" }))));
     }
     static get is() { return "ix-card"; }
     static get encapsulation() { return "shadow"; }
@@ -32,7 +32,7 @@ export class Card {
                 "mutable": false,
                 "complexType": {
                     "original": "CardVariant",
-                    "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
+                    "resolved": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"",
                     "references": {
                         "CardVariant": {
                             "location": "local",
@@ -44,7 +44,10 @@ export class Card {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead."
+                        }],
                     "text": "Card variant"
                 },
                 "attribute": "variant",
@@ -69,7 +72,8 @@ export class Card {
                     "text": ""
                 },
                 "attribute": "selected",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAalE;;GAEG;AAMH,MAAM,OAAO,IAAI;;uBAMgB,SAAS;;;IAOxC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;aAC/B;YAED,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAa,CACT;YACN,4DAAK,KAAK,EAAC,aAAa;gBACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: CardVariant = 'insight';\n\n  /**\n   * @since 2.1.0\n   */\n  @Prop() selected: boolean;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n          [`card-${this.variant}`]: true,\n        }}\n      >\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAgBlE;;GAEG;AAMH,MAAM,OAAO,IAAI;;uBAOgB,SAAS;wBAKZ,KAAK;;IAEjC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;aAC/B;YAED,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAa,CACT;YACN,4DAAK,KAAK,EAAC,aAAa;gBACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n//TODO(IX-1601): Remove insight, notification in 3.0\nexport type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary'\n  | 'outline'\n  | 'filled';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement!: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   * @deprecated variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead.\n   */\n  @Prop() variant: CardVariant = 'insight';\n\n  /**\n   * @since 2.1.0\n   */\n  @Prop() selected: boolean = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n          [`card-${this.variant}`]: true,\n        }}\n      >\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -89,11 +89,11 @@
   align-items: center;
   justify-content: flex-start;
 }
-:host .expand-action:not(.disabled):not(:disabled).hover, :host .expand-action:not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-ghost--background--hover);
+:host .expand-action:hover {
+  background: var(--theme-color-component-1--hover);
 }
-:host .expand-action:not(.disabled):not(:disabled).active, :host .expand-action:not(.disabled):not(:disabled):active {
-  background-color: var(--theme-ghost--background--active);
+:host .expand-action:active {
+  background: var(--theme-color-component-1--active);
 }
 :host .expand-action:not(.disabled):not(:disabled):focus-visible {
   outline: 1px solid var(--theme-color-focus-bdr);

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

@@ -33,8 +33,8 @@ export class CardAccordion {
         setTimeout(() => {
             const rect = this.expandedContent.getBoundingClientRect();
             if (rect.bottom > window.innerHeight) {
-                this.hostElement.shadowRoot
-                    .querySelector('.expand-content')
+                this.hostElement
+                    .shadowRoot.querySelector('.expand-content')
                     .scrollIntoView(false);
             }
         }, 150);
@@ -43,13 +43,13 @@ export class CardAccordion {
         this.onInitialExpandChange();
     }
     render() {
-        return (h(Host, { key: 'bc39054c9b50f4a1de3ebb720553d667f30e7420', slot: "card-accordion" }, h("button", { key: '39a8f4b977ca5d4f797a12f4d06a09e7a2909e80', 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", { key: '2d75d5fc08d4d79e1d70fef36440dba4ee5b62c9', name: 'chevron-right-small', class: {
+        return (h(Host, { key: '73d3ca21554724bf051ca8fe44365815cd2faf64', slot: "card-accordion" }, h("button", { key: 'a3a71b2ebdd46c3e64fcc6b4df96e134701a9662', 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", { key: '3713fc76176dc2b8ee99188a87c3de29851d567b', name: 'chevron-right-small', class: {
                 'expand-icon': true,
                 show: this.expandContent,
-            } })), h("div", { key: 'd2b662f006a69d90e2353922e377a1e83830de70', class: {
+            } })), h("div", { key: '3081275d7694a98b35604cc9b5dd73c203b10426', class: {
                 'expand-content': true,
                 show: this.expandContent,
-            } }, h("div", { key: '7cedf82588afb804a626b1ba1c1cb9147c76306a', class: "expand-content-inner" }, h("div", { key: '04b85a19f6354fd725b634748e7ff7a5c58dd7cb', class: "expand-content-body" }, h("slot", { key: '732c33dbaa591432e14f74eb305b7e7c526d4e49' })), h("div", { key: '83291f55a13f8a8bebddb4d24c81cfc1a090f1f4', class: "expand-content-footer" })))));
+            } }, h("div", { key: 'ebad33d68b17070c4a3c133763279233d8984d1a', class: "expand-content-inner" }, h("div", { key: '32b3e459056717e3653f46e1b08e6f66f87a3143', class: "expand-content-body" }, h("slot", { key: 'dbd2b6a198ca95727f34ae9160ee74dc313296d9' })), h("div", { key: '3d17c4534cf5bcf6366576e33c68292ed2765e06', class: "expand-content-footer" })))));
     }
     static get is() { return "ix-card-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +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,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,IAAI,kBAAkB,GAAG,CAAC,CAAC;AAC3B,MAAM,iBAAiB,GAAG,CAAC,SAAiB,gBAAgB,EAAE,EAAE;IAC9D,OAAO,CAAC,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,CAAC,CAAC;AAOF;;GAEG;AAMH,MAAM,OAAO,aAAa;;wBAKL,KAAK;6BASC,KAAK;;IAG9B,qBAAqB;QACnB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IACtC,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACtE,CAAC;IAED,mBAAmB,CAAC,KAAY;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,MAAM,EAAE,IAAI,CAAC,aAAa;YAC1B,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,6BAA6B,EAAE,CAAC;QACvC,CAAC;IACH,CAAC;IAEO,6BAA6B;QACnC,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC;YAC1D,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;gBACrC,IAAI,CAAC,WAAW,CAAC,UAAU;qBACxB,aAAa,CAAC,iBAAiB,CAAC;qBAChC,cAAc,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,gBAAgB;YACzB,+DACE,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;gBAElC,gEACE,IAAI,EAAE,qBAAqB,EAC3B,KAAK,EAAE;wBACL,aAAa,EAAE,IAAI;wBACnB,IAAI,EAAE,IAAI,CAAC,aAAa;qBACzB,GACQ,CACJ;YACT,4DACE,KAAK,EAAE;oBACL,gBAAgB,EAAE,IAAI;oBACtB,IAAI,EAAE,IAAI,CAAC,aAAa;iBACzB;gBAED,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,4DAAK,KAAK,EAAC,qBAAqB;wBAC9B,8DAAa,CACT;oBACN,4DAAK,KAAK,EAAC,uBAAuB,GAAO,CACrC,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\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  /**\n   * Collapse the card\n   * @since 2.1.0\n   */\n  @Prop() collapse = false;\n\n  @Element() hostElement: HTMLIxCardAccordionElement;\n\n  /**\n   * @internal\n   */\n  @Event() accordionExpand: EventEmitter<CardAccordionExpandChangeEvent>;\n\n  @State() expandContent = false;\n\n  @Watch('collapse')\n  onInitialExpandChange() {\n    this.expandContent = !this.collapse;\n  }\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  componentWillLoad() {\n    this.onInitialExpandChange();\n  }\n\n  render() {\n    return (\n      <Host slot=\"card-accordion\">\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-inner\">\n            <div class=\"expand-content-body\">\n              <slot></slot>\n            </div>\n            <div class=\"expand-content-footer\"></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"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,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,IAAI,kBAAkB,GAAG,CAAC,CAAC;AAC3B,MAAM,iBAAiB,GAAG,CAAC,SAAiB,gBAAgB,EAAE,EAAE;IAC9D,OAAO,CAAC,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,CAAC,CAAC;AAOF;;GAEG;AAMH,MAAM,OAAO,aAAa;;wBAKL,KAAK;6BASC,KAAK;;IAG9B,qBAAqB;QACnB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IACtC,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACvE,CAAC;IAED,mBAAmB,CAAC,KAAY;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,MAAM,EAAE,IAAI,CAAC,aAAa;YAC1B,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,6BAA6B,EAAE,CAAC;QACvC,CAAC;IACH,CAAC;IAEO,6BAA6B;QACnC,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,IAAI,GAAG,IAAI,CAAC,eAAgB,CAAC,qBAAqB,EAAE,CAAC;YAC3D,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;gBACrC,IAAI,CAAC,WAAW;qBACb,UAAW,CAAC,aAAa,CAAC,iBAAiB,CAAE;qBAC7C,cAAc,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,gBAAgB;YACzB,+DACE,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;gBAElC,gEACE,IAAI,EAAE,qBAAqB,EAC3B,KAAK,EAAE;wBACL,aAAa,EAAE,IAAI;wBACnB,IAAI,EAAE,IAAI,CAAC,aAAa;qBACzB,GACQ,CACJ;YACT,4DACE,KAAK,EAAE;oBACL,gBAAgB,EAAE,IAAI;oBACtB,IAAI,EAAE,IAAI,CAAC,aAAa;iBACzB;gBAED,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,4DAAK,KAAK,EAAC,qBAAqB;wBAC9B,8DAAa,CACT;oBACN,4DAAK,KAAK,EAAC,uBAAuB,GAAO,CACrC,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\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  /**\n   * Collapse the card\n   * @since 2.1.0\n   */\n  @Prop() collapse = false;\n\n  @Element() hostElement!: HTMLIxCardAccordionElement;\n\n  /**\n   * @internal\n   */\n  @Event() accordionExpand!: EventEmitter<CardAccordionExpandChangeEvent>;\n\n  @State() expandContent = false;\n\n  @Watch('collapse')\n  onInitialExpandChange() {\n    this.expandContent = !this.collapse;\n  }\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\n          .shadowRoot!.querySelector('.expand-content')!\n          .scrollIntoView(false);\n      }\n    }, 150);\n  }\n\n  componentWillLoad() {\n    this.onInitialExpandChange();\n  }\n\n  render() {\n    return (\n      <Host slot=\"card-accordion\">\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-inner\">\n            <div class=\"expand-content-body\">\n              <slot></slot>\n            </div>\n            <div class=\"expand-content-footer\"></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class CardContent {
     render() {
-        return (h(Host, { key: '17ef18ecf4efe031b707524053d81f91db482696' }, h("slot", { key: '5e91dbb38a4bcc64e36c7bbacb1e2de92f877559' })));
+        return (h(Host, { key: '5aa8feca0f04a5ce7fc449df4eb6410880d12a61' }, h("slot", { key: 'ca5e1a9691c69af3f845b22b4186533d09547734' })));
     }
     static get is() { return "ix-card-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,6 +76,11 @@
   width: 100%;
   margin-bottom: 0.5rem;
 }
+:host .CardList_Title__Label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 :host .CardList__Title__Button {
   margin-right: 1rem;
   transition: var(--theme-default-time) transform ease-in-out;
@@ -87,6 +92,7 @@
   align-self: center;
   margin-left: auto;
   margin-right: 0px;
+  flex-shrink: 0;
 }
 :host .CardList__Content {
   display: flex;

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

@@ -7,7 +7,7 @@ function CardListTitle(props) {
     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), !props.hideShowAll && (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)))));
+        } }), h("ix-typography", { class: "CardList_Title__Label", format: "body-lg" }, props.label), !props.hideShowAll && (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
@@ -133,16 +133,16 @@ export class CardList {
         }
     }
     render() {
-        return (h(Host, { key: '59b22287fe21651d515b79a8394b91f600f07a7a' }, h(CardListTitle, { key: '8f81a2633acb901e848c243a51d60752b35e5765', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        return (h(Host, { key: 'af1146a880e7d31e84072a1495baf6c8f71904a2' }, h(CardListTitle, { key: 'ee470eed580f651cc00706bee8c86968af4e4eb8', 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), hideShowAll: this.hideShowAll }), h("div", { key: 'd53f0dcc4707057dedbc08c3b57f9cde8887f225', class: {
+                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '852ebdc56b009729a1767a6a99452475906daea0', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, h("div", { key: '74e389bb906687dff585eabb348fd6265af7d401', class: {
+            }, style: this.computeMaskLayer() }, h("div", { key: 'f2d9411e9123e9c632d98cf0839b0dea2096c6e8', 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", { key: '9a2ce4357b2e065c35c93c9fc24ef21c31ca0827', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: '82ba7fcb51a102081eb363ecf99146b1ab08554a', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
                 Show__All__Card: true,
             }, onClick: (event) => this.showMoreCardClick.emit({
                 nativeEvent: event,

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

@@ -1 +1 @@
-{"version":3,"file":"card-list.js","sourceRoot":"","sources":["../../../src/components/card-list/card-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n  label: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n  hideShowAll: boolean;\n}) {\n  if (props.label === '') {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon={'chevron-down'}\n        onClick={props.onClick}\n        color=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography variant=\"large-single\">{props.label}</ix-typography>\n      {!props.hideShowAll && (\n        <ix-button\n          class=\"CardList__Title__Show__All\"\n          ghost\n          onClick={props.onShowAllClick}\n        >\n          <span>{props.showAllLabel}</span>\n          <span>\n            {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n          </span>\n        </ix-button>\n      )}\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount: number | undefined;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * Hide the show all button\n   *\n   * @since 2.2.0\n   */\n  @Prop() hideShowAll = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('d-none');\n          return;\n        }\n        element.classList.remove('d-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot.querySelector('.CardList__Content'),\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n          hideShowAll={this.hideShowAll}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content class=\"Show__All__Card__Content\">\n                  <ix-icon\n                    name={'more-menu'}\n                    size={'32'}\n                    class={'Show__All__Card__Icon'}\n                  ></ix-icon>\n                  <span class=\"Show__All__Card__Text\">\n                    {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                  </span>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"card-list.js","sourceRoot":"","sources":["../../../src/components/card-list/card-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEpE,SAAS,aAAa,CAAC,KAQtB;IACC,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;QACzB,sBACE,KAAK,QACL,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;gBACL,uBAAuB,EAAE,IAAI;gBAC7B,kCAAkC,EAAE,KAAK,CAAC,WAAW;aACtD,GACe;QAClB,qBAAe,KAAK,EAAC,uBAAuB,EAAC,MAAM,EAAC,SAAS,IAC1D,KAAK,CAAC,KAAK,CACE;QACf,CAAC,KAAK,CAAC,WAAW,IAAI,CACrB,iBACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,QACL,OAAO,EAAE,KAAK,CAAC,cAAc;YAE7B,gBAAO,KAAK,CAAC,YAAY,CAAQ;YACjC,gBACG,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,IAAI,CAC9D,CACG,CACb,CACG,CACP,CAAC;AACJ,CAAC;AAED;;GAEG;AAMH,MAAM,OAAO,QAAQ;;;wBASiB,KAAK;yBAKD,OAAO;+BAOrB,EAAE;;wCAUO,KAAK;2BAOlB,KAAK;2BAKL,UAAU;6BAKR,gCAAgC;sCAuBd,KAAK;2CACA,CAAC;wCACJ,CAAC;kCACP,CAAC;mCACA,CAAC;;IAIhC,0BAA0B;QAChC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAEO,cAAc,CAAC,KAAiB;QACtC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CACpD,2BAA2B,CACT,CAAC;QACrB,OAAO,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAClD,CAAC;IAEO,8BAA8B;QACpC,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC7C,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;YACvC,IAAI,OAAO,YAAY,WAAW,EAAE,CAAC;gBACnC,IAAI,KAAK,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE,CAAC;oBACrC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;oBAChC,OAAO;gBACT,CAAC;gBACD,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YACrC,CAAC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,sBAAsB,GAAG,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC;QAC1E,IAAI,CAAC,2BAA2B;YAC9B,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC;QAE9C,IAAI,CAAC,wBAAwB,GAAG,aAAa,CAAC,MAAM,CAAC;QACrD,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,uBAAuB;QAC7B,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,GAAG,EAAE;YAC1C,IAAI,CAAC,8BAA8B,EAAE,CAAC;QACxC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CACnB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC,EAC/D;YACE,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CACF,CAAC;QAEF,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,8BAA8B,EAAE,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,oBAAoB;QAC1B,IAAI,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAClC,OAAO,KAAK,CAAC;QACf,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;YAC9D,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACzE,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,qBAAqB;QAC3B,OAAO,CACL,IAAI,CAAC,wBAAwB,KAAK,KAAK,IAAI,IAAI,CAAC,sBAAsB,CACvE,CAAC;IACJ,CAAC;IAEO,4BAA4B,CAAC,QAAgB;QACnD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO,CAAC,CAAC;QACX,CAAC;QAED,IAAI,QAAQ,KAAK,CAAC,EAAE,CAAC;YACnB,OAAO,CAAC,CAAC;QACX,CAAC;QAED,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC;YACnB,OAAO,CAAC,CAAC;QACX,CAAC;QAED,OAAO,QAAQ,GAAG,GAAG,CAAC;IACxB,CAAC;IAEO,gBAAgB;QACtB,MAAM,gBAAgB,GAAG,EAAE,CAAC;QAC5B,MAAM,SAAS,GAAG;;;cAId,gBAAgB;YAChB,CAAC,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACzE;0BAEE,gBAAgB;YAChB,CAAC,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC;gBAC9D,CAAC,CAAC,CAAC;gBACH,CAAC,CAAC,CAAC,CACP;;MAEA,CAAC;QACH,OAAO;YACL,yBAAyB,EAAE,SAAS;SACrC,CAAC;IACJ,CAAC;IAGO,cAAc;QACpB,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;QAElE,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC;QACrC,IAAI,CAAC,mBAAmB,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW,CAAC;IACpE,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC;YAChC,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,EAAC,aAAa,qDACZ,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,WAAW,EAC9B,cAAc,EACZ,IAAI,CAAC,YAAY,KAAK,SAAS;oBAC7B,CAAC,CAAC,IAAI,CAAC,wBAAwB;oBAC/B,CAAC,CAAC,IAAI,CAAC,YAAY,EAEvB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,0BAA0B,EAAE,EAChD,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAC7C,WAAW,EAAE,IAAI,CAAC,WAAW,GACd;YACjB,4DACE,KAAK,EAAE;oBACL,kBAAkB,EAAE,IAAI;iBACzB,EACD,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;gBAE9B,4DACE,KAAK,EAAE;wBACL,iBAAiB,EAAE,IAAI;wBACvB,4BAA4B,EAAE,IAAI,CAAC,QAAQ;wBAC3C,gCAAgC,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO;wBAC5D,iCAAiC,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ;qBAC/D,EACD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;oBAEvC,6DACE,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,8BAA8B,EAAE,GACnD;oBACP,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,CAC9B,eACE,KAAK,EAAE;4BACL,eAAe,EAAE,IAAI;yBACtB,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CACjB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;4BAC1B,WAAW,EAAE,KAAK;yBACnB,CAAC;wBAGJ,uBAAiB,KAAK,EAAC,0BAA0B;4BAC/C,eACE,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,uBAAuB,GACrB;4BACX,YAAM,KAAK,EAAC,uBAAuB;gCAChC,IAAI,CAAC,aAAa;;gCAAI,IAAI,CAAC,2BAA2B;oCAClD,CACS,CACV,CACX,CAAC,CAAC,CAAC,IAAI,CACJ,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n  label: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n  hideShowAll: boolean;\n}) {\n  if (props.label === '') {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon={'chevron-down'}\n        onClick={props.onClick}\n        color=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n        {props.label}\n      </ix-typography>\n      {!props.hideShowAll && (\n        <ix-button\n          class=\"CardList__Title__Show__All\"\n          ghost\n          onClick={props.onShowAllClick}\n        >\n          <span>{props.showAllLabel}</span>\n          <span>\n            {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n          </span>\n        </ix-button>\n      )}\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount: number | undefined;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * Hide the show all button\n   *\n   * @since 2.2.0\n   */\n  @Prop() hideShowAll = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('d-none');\n          return;\n        }\n        element.classList.remove('d-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot.querySelector('.CardList__Content'),\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n          hideShowAll={this.hideShowAll}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content class=\"Show__All__Card__Content\">\n                  <ix-icon\n                    name={'more-menu'}\n                    size={'32'}\n                    class={'Show__All__Card__Icon'}\n                  ></ix-icon>\n                  <span class=\"Show__All__Card__Text\">\n                    {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                  </span>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -6,7 +6,7 @@ import { h, Host } from "@stencil/core";
  */
 export class CardHeader {
     render() {
-        return (h(Host, { key: 'c5c2ca3a18e299a6093ad6abbaa1c5249cfa391c' }, h("slot", { key: '6d9c155e807d25a85878f7c10e0e6ca34472f06a' }), h("div", { key: 'd7ce177e5b865646435a794b197f0b7fca89fc5e', class: "title-actions" }, h("slot", { key: '5c44f29c04f0e8960d64dd5b6aa5f4a740d6c175', name: "title-actions" }))));
+        return (h(Host, { key: '162c9e3b08b5508af227dbed91a44d75a614bfa6' }, h("slot", { key: '7466991cc5eebc8eeee323226594dac1e11152a7' }), h("div", { key: 'c7d34debc0ad16c6ea199152d21de34d1a02c1bb', class: "title-actions" }, h("slot", { key: '6e9b53159856a5091fb4cfeb55d4d1b25b8873a2', name: "title-actions" }))));
     }
     static get is() { return "ix-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/category-filter/category-filter.css

@@ -1228,11 +1228,11 @@ input::-moz-placeholder {
 input::placeholder {
   color: var(--theme-input-hint--color);
 }
-input.hover, input:hover {
+input.hover:not(.read-only, .disabled, [readonly], [disabled]), input:hover:not(.read-only, .disabled, [readonly], [disabled]) {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-input.focus, input:focus {
+input.focus:not(.read-only, .disabled, [readonly], [disabled]), input:focus:not(.read-only, .disabled, [readonly], [disabled]) {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
@@ -1260,7 +1260,7 @@ input:-moz-read-only::placeholder {
 input.read-only::placeholder, input:read-only::placeholder {
   color: transparent;
 }
-input:disabled {
+input:disabled, input.disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -1268,10 +1268,10 @@ input:disabled {
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-input:disabled::-moz-placeholder {
+input:disabled::-moz-placeholder, input.disabled::-moz-placeholder {
   color: transparent;
 }
-input:disabled::placeholder {
+input:disabled::placeholder, input.disabled::placeholder {
   color: transparent;
 }
 
@@ -1330,11 +1330,11 @@ textarea::-moz-placeholder {
 textarea::placeholder {
   color: var(--theme-input-hint--color);
 }
-textarea.hover, textarea:hover {
+textarea.hover:not(.read-only, .disabled, [readonly], [disabled]), textarea:hover:not(.read-only, .disabled, [readonly], [disabled]) {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-textarea.focus, textarea:focus {
+textarea.focus:not(.read-only, .disabled, [readonly], [disabled]), textarea:focus:not(.read-only, .disabled, [readonly], [disabled]) {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
@@ -1362,7 +1362,7 @@ textarea:-moz-read-only::placeholder {
 textarea.read-only::placeholder, textarea:read-only::placeholder {
   color: transparent;
 }
-textarea:disabled {
+textarea:disabled, textarea.disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -1370,10 +1370,10 @@ textarea:disabled {
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-textarea:disabled::-moz-placeholder {
+textarea:disabled::-moz-placeholder, textarea.disabled::-moz-placeholder {
   color: transparent;
 }
-textarea:disabled::placeholder {
+textarea:disabled::placeholder, textarea.disabled::placeholder {
   color: transparent;
 }
 
@@ -1538,16 +1538,16 @@ form:not(.was-validated) .valid-feedback {
 :host .input-container:not(.readonly):not(.disabled)::placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container:not(.readonly):not(.disabled).hover, :host .input-container:not(.readonly):not(.disabled):hover {
+:host .input-container:not(.readonly):not(.disabled).hover:not(.read-only, .disabled, [readonly], [disabled]), :host .input-container:not(.readonly):not(.disabled):hover:not(.read-only, .disabled, [readonly], [disabled]) {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container:not(.readonly):not(.disabled).focus, :host .input-container:not(.readonly):not(.disabled):focus {
+:host .input-container:not(.readonly):not(.disabled).focus:not(.read-only, .disabled, [readonly], [disabled]), :host .input-container:not(.readonly):not(.disabled):focus:not(.read-only, .disabled, [readonly], [disabled]) {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
 }
-:host .input-container:not(.readonly):not(.disabled):disabled {
+:host .input-container:not(.readonly):not(.disabled):disabled, :host .input-container:not(.readonly):not(.disabled).disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -1555,10 +1555,10 @@ form:not(.was-validated) .valid-feedback {
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-:host .input-container:not(.readonly):not(.disabled):disabled::-moz-placeholder {
+:host .input-container:not(.readonly):not(.disabled):disabled::-moz-placeholder, :host .input-container:not(.readonly):not(.disabled).disabled::-moz-placeholder {
   color: transparent;
 }
-:host .input-container:not(.readonly):not(.disabled):disabled::placeholder {
+:host .input-container:not(.readonly):not(.disabled):disabled::placeholder, :host .input-container:not(.readonly):not(.disabled).disabled::placeholder {
   color: transparent;
 }
 :host .input-container.disabled {
@@ -1607,11 +1607,11 @@ form:not(.was-validated) .valid-feedback {
 :host .input-container.readonly::placeholder {
   color: var(--theme-input-hint--color);
 }
-:host .input-container.readonly.hover, :host .input-container.readonly:hover {
+:host .input-container.readonly.hover:not(.read-only, .disabled, [readonly], [disabled]), :host .input-container.readonly:hover:not(.read-only, .disabled, [readonly], [disabled]) {
   border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
-:host .input-container.readonly.focus, :host .input-container.readonly:focus {
+:host .input-container.readonly.focus:not(.read-only, .disabled, [readonly], [disabled]), :host .input-container.readonly:focus:not(.read-only, .disabled, [readonly], [disabled]) {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
   border-color: var(--theme-input--border-color--focus) !important;
@@ -1639,7 +1639,7 @@ form:not(.was-validated) .valid-feedback {
 :host .input-container.readonly.read-only::placeholder, :host .input-container.readonly:read-only::placeholder {
   color: transparent;
 }
-:host .input-container.readonly:disabled {
+:host .input-container.readonly:disabled, :host .input-container.readonly.disabled {
   box-shadow: none;
   background-color: transparent;
   outline: none;
@@ -1647,10 +1647,10 @@ form:not(.was-validated) .valid-feedback {
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-:host .input-container.readonly:disabled::-moz-placeholder {
+:host .input-container.readonly:disabled::-moz-placeholder, :host .input-container.readonly.disabled::-moz-placeholder {
   color: transparent;
 }
-:host .input-container.readonly:disabled::placeholder {
+:host .input-container.readonly:disabled::placeholder, :host .input-container.readonly.disabled::placeholder {
   color: transparent;
 }
 :host .input-container.no-icon {