@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

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

@@ -0,0 +1,456 @@
+import { h, Host, } from "@stencil/core";
+import { createMutationObserver } from "../utils/mutation-observer";
+import { iconChevronDown, iconMoreMenu } from "@siemens/ix-icons/icons";
+function CardListTitle(props) {
+    if (!props.label) {
+        return null;
+    }
+    return (h("div", { class: "CardList_Title" }, h("ix-icon-button", { ghost: true, icon: iconChevronDown, onClick: props.onClick, iconColor: "color-primary", class: {
+            CardList__Title__Button: true,
+            CardList__Title__Button__Collapsed: props.isCollapsed,
+        } }), 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
+ */
+export class CardList {
+    constructor() {
+        /**
+         * Collapse the list
+         */
+        this.collapse = false;
+        /**
+         * List style
+         */
+        this.listStyle = 'stack';
+        /**
+         * Maximal visible cards
+         *
+         * @internal
+         */
+        this.maxVisibleCards = 12;
+        /**
+         * Suppress the overflow handling of child elements
+         */
+        this.suppressOverflowHandling = false;
+        /**
+         * Hide the show all button
+         *
+         * @since 2.2.0
+         */
+        this.hideShowAll = false;
+        /**
+         * i18n Show all button
+         */
+        this.i18nShowAll = 'Show all';
+        /**
+         * i18n More cards available
+         */
+        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('display-none');
+                    return;
+                }
+                element.classList.remove('display-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() {
+        if (!this.listElement) {
+            return;
+        }
+        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, { key: '2157d907578c112638bdec74ad7be517b24af46d' }, h(CardListTitle, { key: '96769a6c3a4735663f76879d90e2af2f56ddc323', 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: '5a982b69bcacc770709c81edb7e57e901e1ca88c', class: {
+                CardList__Overflow: true,
+            }, style: this.computeMaskLayer() }, h("div", { key: '21c33b91f385f8e80c6ce4b2904ae959d287141c', 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: '5b7e106263dd575f1cbaa8e3272c341958babe7f', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+                Show__All__Card: true,
+            }, onClick: (event) => this.showMoreCardClick.emit({
+                nativeEvent: event,
+            }) }, h("ix-card-content", null, h("div", { class: "Show__All__Card__Content" }, h("ix-icon", { name: iconMoreMenu, 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": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name the card list"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-visible-cards",
+                "reflect": false,
+                "defaultValue": "12"
+            },
+            "showAllCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overwrite the default show all count."
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "suppress-overflow-handling",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hideShowAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.2.0"
+                        }],
+                    "text": "Hide the show all button"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-show-all",
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "detectOverflow",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=card-list.js.map

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

@@ -0,0 +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';\nimport { iconChevronDown, iconMoreMenu } from '@siemens/ix-icons/icons';\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={iconChevronDown}\n        onClick={props.onClick}\n        iconColor=\"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;\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('display-none');\n          return;\n        }\n        element.classList.remove('display-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    if (!this.listElement) {\n      return;\n    }\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>\n                  <div class=\"Show__All__Card__Content\">\n                    <ix-icon\n                      name={iconMoreMenu}\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                  </div>\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.css

@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+:host {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  gap: 1rem;
+  width: 100%;
+}
+:host .title-actions {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  gap: 0.25rem;
+  margin-left: auto;
+  margin-right: 0;
+}

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

@@ -0,0 +1,24 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot title-actions - Place additional actions inside title
+ *
+ * @since 1.6.0
+ */
+export class CardHeader {
+    render() {
+        return (h(Host, { key: '0f4e8785e6861fa9151cece5946a7b33e85bd7fd' }, h("slot", { key: 'd8909ebe344940cda53d4076ccd1291eb1240f8b' }), h("div", { key: 'f87b52b2b467664d6e9d886d358b1c6b5403aae8', class: "title-actions" }, h("slot", { key: '9e45b897368e305f0ce1e66b47424360c44c148d', name: "title-actions" }))));
+    }
+    static get is() { return "ix-card-title"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["card-title.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["card-title.css"]
+        };
+    }
+}
+//# sourceMappingURL=card-title.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-title.js","sourceRoot":"","sources":["../../../src/components/card-title/card-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;GAIG;AAMH,MAAM,OAAO,UAAU;IACrB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa;YACb,4DAAK,KAAK,EAAC,eAAe;gBACxB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * @slot title-actions - Place additional actions inside title\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-title',\n  styleUrl: 'card-title.scss',\n  shadow: true,\n})\nexport class CardHeader {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        <div class=\"title-actions\">\n          <slot name=\"title-actions\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}