@siemens/ix 1.5.0 → 1.6.0

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

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';\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}) {\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      <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    </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   * 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        ></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.css

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

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, null, h("slot", null), h("div", { class: "title-actions" }, h("slot", { 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;EACrB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa;MACb,WAAK,KAAK,EAAC,eAAe;QACxB,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACD,CACR,CAAC;EACJ,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"]}

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

@@ -0,0 +1,28 @@
+/*
+ * 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;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0px;
+}
+:host .titleGroup {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+}
+:host .subtitle {
+  margin-top: 0.5rem;
+}
+:host .backButton {
+  margin-right: 0.5rem;
+}
+:host .buttons {
+  flex: 0 0 auto;
+}

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

@@ -0,0 +1,131 @@
+/*
+ * 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.
+ */
+import { h, Host } from '@stencil/core';
+export class ContentHeader {
+  constructor() {
+    this.variant = 'Primary';
+    this.headerTitle = undefined;
+    this.headerSubtitle = undefined;
+    this.hasBackButton = false;
+  }
+  render() {
+    return (h(Host, null, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "Primary", icon: "arrow-left", ghost: true, onClick: () => this.backButtonClick.emit() })) : null, h("div", { class: "titleGroup" }, h("ix-typography", { variant: this.variant === 'Secondary' ? 'large-single' : 'h2' }, this.headerTitle), this.headerSubtitle !== undefined ? (h("ix-typography", { variant: 'caption', color: 'soft', class: "subtitle" }, this.headerSubtitle)) : null), h("div", { class: "buttons" }, h("slot", null))));
+  }
+  static get is() { return "ix-content-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["content-header.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["content-header.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ContentHeaderVariant",
+          "resolved": "\"Primary\" | \"Secondary\"",
+          "references": {
+            "ContentHeaderVariant": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/content-header/content-header.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of content header"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'Primary'"
+      },
+      "headerTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Title of Header"
+        },
+        "attribute": "header-title",
+        "reflect": false
+      },
+      "headerSubtitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subtitle of Header"
+        },
+        "attribute": "header-subtitle",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "hasBackButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display a back button"
+        },
+        "attribute": "has-back-button",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "backButtonClick",
+        "name": "backButtonClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Triggered when back button is clicked"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=content-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"content-header.js","sourceRoot":"","sources":["../../../src/components/content-header/content-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS9E,MAAM,OAAO,aAAa;;mBAIgB,SAAS;;0BAUJ,SAAS;yBAKrB,KAAK;;EAOtC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,sBACE,KAAK,EAAE,YAAY,EACnB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,GAC1B,CACnB,CAAC,CAAC,CAAC,IAAI;MAER,WAAK,KAAK,EAAC,YAAY;QACrB,qBACE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,IAE5D,IAAI,CAAC,WAAW,CACH;QACf,IAAI,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CACnC,qBAAe,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAC,UAAU,IAC/D,IAAI,CAAC,cAAc,CACN,CACjB,CAAC,CAAC,CAAC,IAAI,CACJ;MACN,WAAK,KAAK,EAAC,SAAS;QAClB,eAAQ,CACJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type ContentHeaderVariant = 'Primary' | 'Secondary';\n\n@Component({\n  tag: 'ix-content-header',\n  styleUrl: 'content-header.scss',\n  shadow: true,\n})\nexport class ContentHeader {\n  /**\n   * Variant of content header\n   */\n  @Prop() variant: ContentHeaderVariant = 'Primary';\n\n  /**\n   * Title of Header\n   */\n  @Prop() headerTitle: string;\n\n  /**\n   * Subtitle of Header\n   */\n  @Prop() headerSubtitle: string | undefined = undefined;\n\n  /**\n   * Display a back button\n   */\n  @Prop() hasBackButton: boolean = false;\n\n  /**\n   * Triggered when back button is clicked\n   */\n  @Event() backButtonClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host>\n        {this.hasBackButton ? (\n          <ix-icon-button\n            class={'backButton'}\n            variant=\"Primary\"\n            icon=\"arrow-left\"\n            ghost={true}\n            onClick={() => this.backButtonClick.emit()}\n          ></ix-icon-button>\n        ) : null}\n\n        <div class=\"titleGroup\">\n          <ix-typography\n            variant={this.variant === 'Secondary' ? 'large-single' : 'h2'}\n          >\n            {this.headerTitle}\n          </ix-typography>\n          {this.headerSubtitle !== undefined ? (\n            <ix-typography variant={'caption'} color={'soft'} class=\"subtitle\">\n              {this.headerSubtitle}\n            </ix-typography>\n          ) : null}\n        </div>\n        <div class=\"buttons\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}