@siemens/ix 2.0.3 → 2.0.4-beta.0

package/dist/collection/components/blind/blind.css

@@ -42,76 +42,154 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * 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 {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: flex;
   flex-direction: column;
   border-radius: var(--theme-blind--border-radius);
   overflow: hidden;
 }
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .blind-header-wrapper {
+  display: block;
+  position: relative;
+  width: 100%;
+  min-height: 3rem;
+  height: 3rem;
+  overflow: hidden;
+}
+:host .blind-header-content {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+  padding-left: 0.5rem;
+}
+:host .blind-header-title {
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-grow: 1;
+  flex-shrink: 0;
+  margin-right: 1rem;
+}
 :host .blind-header {
   all: unset;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: flex;
-  align-items: center;
+  display: block;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  pointer-events: all;
+  padding-left: 2.5rem;
   min-height: 3rem;
   height: 3rem;
+  width: calc(100% - 2 * var(--theme-blind--border-thickness));
   border: solid var(--theme-blind--border-thickness) transparent;
   border-radius: var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;
-  padding-right: 0.5rem;
   cursor: pointer;
-  z-index: 1;
 }
-:host .blind-header .collapse-icon {
-  padding: 0.25rem 0.5rem;
+:host .blind-header:not(.disabled):not(:disabled):focus-visible {
+  border-color: var(--theme-color-focus-bdr);
+  outline: none;
 }
-:host .blind-header .blind-header-title-col {
+:host .blind-header-title-icon,
+:host .collapse-icon {
+  margin-right: 0.5rem;
+}
+:host .blind-header-title-row {
+  display: flex;
+  flex-grow: 1;
+}
+:host .blind-header-title-col {
   flex-grow: 1;
   flex-basis: 0;
   display: inline-flex;
   align-items: center;
   min-width: 0;
 }
-:host .blind-header ix-typography {
+:host .blind-header-title-col:not(:first-of-type) {
+  justify-content: flex-end;
+}
+:host ix-typography {
   flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-:host .blind-header .blind-header-title-col:not(:first-of-type) {
-  justify-content: flex-end;
-}
-:host .blind-header .blind-header-title-label {
+:host .blind-header-title-label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  -webkit-padding-end: 0.5rem;
-          padding-inline-end: 0.5rem;
+  padding-inline-end: 0.5rem;
 }
-:host .blind-header .blind-header-title-sublabel {
+:host .blind-header-title-sublabel {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding-inline: 0.5rem;
 }
-:host .blind-header .blind-header-title,
-:host .blind-header .blind-header-title-basic {
+:host .blind-header-title {
   display: flex;
   align-items: center;
   flex-grow: 1;
   height: 100%;
   min-width: 0;
 }
-:host .blind-header .blind-header-title-basic ix-icon {
-  -webkit-margin-end: 0.5rem;
-          margin-inline-end: 0.5rem;
-}
-:host .blind-header:not(.disabled):not(:disabled):focus-visible {
-  border-color: var(--theme-color-focus-bdr);
-  outline: none;
-}
-:host .blind-header .blind-header-labels {
+:host .blind-header-labels {
   display: inline-flex;
   flex-grow: 1;
   min-width: 0;
@@ -128,6 +206,9 @@
   padding-top: 0px;
   padding-bottom: 0px;
 }
+:host .header-actions {
+  pointer-events: all;
+}
 
 :host(.blind-alarm) {
   background-color: var(--theme-blind-base--background);
@@ -135,10 +216,6 @@
 :host(.blind-alarm) .blind-header {
   background-color: var(--theme-color-alarm);
 }
-:host(.blind-alarm) .blind-header .blind-header-title-label,
-:host(.blind-alarm) .blind-header .blind-header-title-sublabel {
-  color: var(--theme-color-alarm--contrast);
-}
 :host(.blind-alarm) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
@@ -151,6 +228,10 @@
 :host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active {
   background-color: var(--theme-color-alarm--active);
 }
+:host(.blind-alarm) .blind-header-title-label,
+:host(.blind-alarm) .blind-header-title-sublabel {
+  color: var(--theme-color-alarm--contrast);
+}
 
 :host(.blind-critical) {
   background-color: var(--theme-blind-base--background);
@@ -158,10 +239,6 @@
 :host(.blind-critical) .blind-header {
   background-color: var(--theme-color-critical);
 }
-:host(.blind-critical) .blind-header .blind-header-title-label,
-:host(.blind-critical) .blind-header .blind-header-title-sublabel {
-  color: var(--theme-color-critical--contrast);
-}
 :host(.blind-critical) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
@@ -174,6 +251,10 @@
 :host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active {
   background-color: var(--theme-color-critical--active);
 }
+:host(.blind-critical) .blind-header-title-label,
+:host(.blind-critical) .blind-header-title-sublabel {
+  color: var(--theme-color-critical--contrast);
+}
 
 :host(.blind-info) {
   background-color: var(--theme-blind-base--background);
@@ -181,10 +262,6 @@
 :host(.blind-info) .blind-header {
   background-color: var(--theme-color-info);
 }
-:host(.blind-info) .blind-header .blind-header-title-label,
-:host(.blind-info) .blind-header .blind-header-title-sublabel {
-  color: var(--theme-color-info--contrast);
-}
 :host(.blind-info) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
@@ -197,6 +274,10 @@
 :host(.blind-info) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-info) .blind-header:not(.disabled):not(:disabled).active {
   background-color: var(--theme-color-info--active);
 }
+:host(.blind-info) .blind-header-title-label,
+:host(.blind-info) .blind-header-title-sublabel {
+  color: var(--theme-color-info--contrast);
+}
 
 :host(.blind-insight) {
   background-color: var(--theme-blind-base--background);
@@ -204,18 +285,18 @@
 :host(.blind-insight) .blind-header {
   background-color: var(--theme-color-insight);
 }
-:host(.blind-insight) .blind-header .blind-header-title-label {
-  color: var(--theme-color-std-text);
-}
-:host(.blind-insight) .blind-header .blind-header-title-sublabel {
-  color: var(--theme-color-soft-text);
-}
 :host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover, :host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover {
   background-color: var(--theme-ghost--background--hover);
 }
 :host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active, :host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active {
   background-color: var(--theme-ghost--background--active);
 }
+:host(.blind-insight) .blind-header-title-label {
+  color: var(--theme-color-std-text);
+}
+:host(.blind-insight) .blind-header-title-sublabel {
+  color: var(--theme-color-soft-text);
+}
 
 :host(.blind-neutral) {
   background-color: var(--theme-blind-base--background);
@@ -223,10 +304,6 @@
 :host(.blind-neutral) .blind-header {
   background-color: var(--theme-color-neutral);
 }
-:host(.blind-neutral) .blind-header .blind-header-title-label,
-:host(.blind-neutral) .blind-header .blind-header-title-sublabel {
-  color: var(--theme-color-neutral--contrast);
-}
 :host(.blind-neutral) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
@@ -239,6 +316,10 @@
 :host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active {
   background-color: var(--theme-color-neutral--active);
 }
+:host(.blind-neutral) .blind-header-title-label,
+:host(.blind-neutral) .blind-header-title-sublabel {
+  color: var(--theme-color-neutral--contrast);
+}
 
 :host(.blind-notification) {
   background-color: var(--theme-blind-base--background);
@@ -246,10 +327,6 @@
 :host(.blind-notification) .blind-header {
   background-color: var(--theme-color-notification);
 }
-:host(.blind-notification) .blind-header .blind-header-title-label,
-:host(.blind-notification) .blind-header .blind-header-title-sublabel {
-  color: var(--theme-color-notification--contrast);
-}
 :host(.blind-notification) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
@@ -262,6 +339,10 @@
 :host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active {
   background-color: var(--theme-color-notification--active);
 }
+:host(.blind-notification) .blind-header-title-label,
+:host(.blind-notification) .blind-header-title-sublabel {
+  color: var(--theme-color-notification--contrast);
+}
 
 :host(.blind-success) {
   background-color: var(--theme-blind-base--background);
@@ -269,10 +350,6 @@
 :host(.blind-success) .blind-header {
   background-color: var(--theme-color-success);
 }
-:host(.blind-success) .blind-header .blind-header-title-label,
-:host(.blind-success) .blind-header .blind-header-title-sublabel {
-  color: var(--theme-color-success--contrast);
-}
 :host(.blind-success) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
@@ -285,6 +362,10 @@
 :host(.blind-success) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-success) .blind-header:not(.disabled):not(:disabled).active {
   background-color: var(--theme-color-success--active);
 }
+:host(.blind-success) .blind-header-title-label,
+:host(.blind-success) .blind-header-title-sublabel {
+  color: var(--theme-color-success--contrast);
+}
 
 :host(.blind-warning) {
   background-color: var(--theme-blind-base--background);
@@ -292,10 +373,6 @@
 :host(.blind-warning) .blind-header {
   background-color: var(--theme-color-warning);
 }
-:host(.blind-warning) .blind-header .blind-header-title-label,
-:host(.blind-warning) .blind-header .blind-header-title-sublabel {
-  color: var(--theme-color-warning--contrast);
-}
 :host(.blind-warning) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
@@ -308,6 +385,10 @@
 :host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active {
   background-color: var(--theme-color-warning--active);
 }
+:host(.blind-warning) .blind-header-title-label,
+:host(.blind-warning) .blind-header-title-sublabel {
+  color: var(--theme-color-warning--contrast);
+}
 
 :host(.blind-primary) {
   background-color: var(--theme-blind-base--background);
@@ -315,10 +396,6 @@
 :host(.blind-primary) .blind-header {
   background-color: var(--theme-color-primary);
 }
-:host(.blind-primary) .blind-header .blind-header-title-label,
-:host(.blind-primary) .blind-header .blind-header-title-sublabel {
-  color: var(--theme-color-primary--contrast);
-}
 :host(.blind-primary) .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
@@ -331,6 +408,10 @@
 :host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active, :host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active {
   background-color: var(--theme-color-primary--active);
 }
+:host(.blind-primary) .blind-header-title-label,
+:host(.blind-primary) .blind-header-title-sublabel {
+  color: var(--theme-color-primary--contrast);
+}
 
 :host(.blind-outline) {
   border: solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);
@@ -339,15 +420,15 @@
 :host(.blind-outline) .blind-header {
   background-color: var(--theme-color-ghost);
 }
-:host(.blind-outline) .blind-header .blind-header-title-label {
-  color: var(--theme-color-std-text);
-}
-:host(.blind-outline) .blind-header .blind-header-title-sublabel {
-  color: var(--theme-color-soft-text);
-}
 :host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover, :host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover {
   background-color: var(--theme-ghost--background--hover);
 }
 :host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active, :host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active {
   background-color: var(--theme-ghost--background--active);
+}
+:host(.blind-outline) .blind-header-title-label {
+  color: var(--theme-color-std-text);
+}
+:host(.blind-outline) .blind-header-title-sublabel {
+  color: var(--theme-color-soft-text);
 }

package/dist/collection/components/blind/blind.js

@@ -6,7 +6,7 @@
  * 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';
+import { Fragment, h, Host, } from '@stencil/core';
 import anime from 'animejs';
 import { a11yBoolean } from '../utils/a11y';
 let sequentialInstanceId = 0;
@@ -19,12 +19,7 @@ export class Blind {
     this.icon = undefined;
     this.variant = 'insight';
   }
-  onHeaderClick(e) {
-    if (e.target.closest('.header-actions')) {
-      return;
-    }
-    e.preventDefault();
-    e.stopImmediatePropagation();
+  onHeaderClick() {
     this.collapsed = !this.collapsed;
     this.collapsedChange.emit(this.collapsed);
   }
@@ -76,15 +71,15 @@ export class Blind {
   render() {
     return (h(Host, { class: {
         [`blind-${this.variant}`]: true,
-      } }, h("button", { class: {
+      } }, h("div", { class: 'blind-header-wrapper' }, h("div", { class: 'blind-header-content' }, h("ix-icon", { class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || this.variant === 'outline'
+        ? 'color-primary'
+        : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'insight' || this.variant === 'outline'
+        ? 'color-std-text'
+        : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null)), h("button", { class: {
         'blind-header': true,
         [`blind-${this.variant}`]: true,
         closed: this.collapsed,
-      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("ix-icon", { class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || this.variant === 'outline'
-        ? 'color-primary'
-        : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, h("div", { class: "blind-header-title-col" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon, color: this.variant === 'insight' || this.variant === 'outline'
-        ? 'color-std-text'
-        : `color-${this.variant}--contrast` })) : (''), h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), h("div", { class: "blind-header-title-col" }, this.sublabel !== undefined ? (h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))) : (''), h("span", { class: "header-actions", onClick: (e) => e.stopImmediatePropagation() }, h("slot", { name: "header-actions" }))))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { class: {
+      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { name: "custom-header" }))), h("section", { id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { class: {
         'blind-content': true,
         hide: this.collapsed,
       } }, !this.collapsed ? h("slot", null) : null))));

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

@@ -1 +1 @@
-{"version":3,"file":"blind.js","sourceRoot":"","sources":["../../../src/components/blind/blind.tsx"],"names":[],"mappings":"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","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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant | 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  shadow: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Secondary label inside blind header\n   * @since 2.0.0\n   */\n  @Prop() sublabel: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Blind variant\n   * @since 2.0.0\n   */\n  @Prop() variant: BlindVariant = 'insight';\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private blindId = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick(e: Event) {\n    if ((e.target as Element).closest('.header-actions')) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.shadowRoot.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`blind-${this.variant}`]: true,\n        }}\n      >\n        <button\n          class={{\n            'blind-header': true,\n            [`blind-${this.variant}`]: true,\n            closed: this.collapsed,\n          }}\n          type=\"button\"\n          aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n          aria-controls={`ix-blind-content-section-${this.blindId}`}\n          aria-expanded={a11yBoolean(!this.collapsed)}\n          onClick={(e) => this.onHeaderClick(e)}\n        >\n          <ix-icon\n            class=\"collapse-icon\"\n            name={'chevron-right-small'}\n            color={\n              this.variant === 'insight' || this.variant === 'outline'\n                ? 'color-primary'\n                : `color-${this.variant}--contrast`\n            }\n            ref={(ref) => (this.chevronRef = ref)}\n          ></ix-icon>\n          <div\n            class=\"blind-header-title\"\n            id={`ix-blind-header-title-${this.blindId}`}\n          >\n            {this.label !== undefined ? (\n              <span class=\"blind-header-title-basic\">\n                <div class=\"blind-header-title-col\">\n                  {this.icon !== undefined ? (\n                    <ix-icon\n                      name={this.icon}\n                      color={\n                        this.variant === 'insight' || this.variant === 'outline'\n                          ? 'color-std-text'\n                          : `color-${this.variant}--contrast`\n                      }\n                    ></ix-icon>\n                  ) : (\n                    ''\n                  )}\n                  <ix-typography title={this.label} format=\"label-lg\" bold>\n                    <div class=\"blind-header-title-label\" title={this.label}>\n                      {this.label}\n                    </div>\n                  </ix-typography>\n                </div>\n\n                <div class=\"blind-header-title-col\">\n                  {this.sublabel !== undefined ? (\n                    <ix-typography title={this.sublabel}>\n                      <div class=\"blind-header-title-sublabel\">\n                        {this.sublabel}\n                      </div>\n                    </ix-typography>\n                  ) : (\n                    ''\n                  )}\n                  <span\n                    class=\"header-actions\"\n                    onClick={(e) => e.stopImmediatePropagation()}\n                  >\n                    <slot name=\"header-actions\"></slot>\n                  </span>\n                </div>\n              </span>\n            ) : (\n              <slot name=\"custom-header\"></slot>\n            )}\n          </div>\n        </button>\n        <section\n          id={`ix-blind-content-section-${this.blindId}`}\n          aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            {!this.collapsed ? <slot></slot> : null}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"blind.js","sourceRoot":"","sources":["../../../src/components/blind/blind.tsx"],"names":[],"mappings":"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","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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant | 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  shadow: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Secondary label inside blind header\n   * @since 2.0.0\n   */\n  @Prop() sublabel: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Blind variant\n   * @since 2.0.0\n   */\n  @Prop() variant: BlindVariant = 'insight';\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private blindId = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick() {\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.shadowRoot.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`blind-${this.variant}`]: true,\n        }}\n      >\n        <div class={'blind-header-wrapper'}>\n          <div class={'blind-header-content'}>\n            <ix-icon\n              class=\"collapse-icon\"\n              name={'chevron-right-small'}\n              color={\n                this.variant === 'insight' || this.variant === 'outline'\n                  ? 'color-primary'\n                  : `color-${this.variant}--contrast`\n              }\n              ref={(ref) => (this.chevronRef = ref)}\n            ></ix-icon>\n            <div\n              class=\"blind-header-title\"\n              id={`ix-blind-header-title-${this.blindId}`}\n            >\n              {this.label !== undefined ? (\n                <Fragment>\n                  {this.icon && (\n                    <ix-icon\n                      class=\"blind-header-title-icon\"\n                      name={this.icon}\n                      color={\n                        this.variant === 'insight' || this.variant === 'outline'\n                          ? 'color-std-text'\n                          : `color-${this.variant}--contrast`\n                      }\n                    ></ix-icon>\n                  )}\n                  <div class={'blind-header-title-row'}>\n                    <div class=\"blind-header-title-col\">\n                      <ix-typography title={this.label} format=\"label-lg\" bold>\n                        <div\n                          class=\"blind-header-title-label\"\n                          title={this.label}\n                        >\n                          {this.label}\n                        </div>\n                      </ix-typography>\n                    </div>\n\n                    {this.sublabel && (\n                      <div class=\"blind-header-title-col\">\n                        <ix-typography title={this.sublabel}>\n                          <div class=\"blind-header-title-sublabel\">\n                            {this.sublabel}\n                          </div>\n                        </ix-typography>\n                      </div>\n                    )}\n                  </div>\n                  <div class=\"header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                  </div>\n                </Fragment>\n              ) : null}\n            </div>\n          </div>\n\n          <button\n            class={{\n              'blind-header': true,\n              [`blind-${this.variant}`]: true,\n              closed: this.collapsed,\n            }}\n            type=\"button\"\n            aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n            aria-controls={`ix-blind-content-section-${this.blindId}`}\n            aria-expanded={a11yBoolean(!this.collapsed)}\n            onClick={() => this.onHeaderClick()}\n          >\n            <slot name=\"custom-header\"></slot>\n          </button>\n        </div>\n        <section\n          id={`ix-blind-content-section-${this.blindId}`}\n          aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            {!this.collapsed ? <slot></slot> : null}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/blind/test/blind.ct.js

@@ -0,0 +1,16 @@
+/*
+ * 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 { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`<ix-blind label="Example label">Some content</ix-blind>`);
+  const blindElement = page.locator('ix-blind');
+  await expect(blindElement).toHaveClass(/hydrated/);
+});
+//# sourceMappingURL=blind.ct.js.map

package/dist/collection/components/blind/test/blind.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blind.ct.js","sourceRoot":"","sources":["../../../../src/components/blind/test/blind.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CAAC,yDAAyD,CAAC,CAAC;EACvE,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;EAC9C,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AACrD,CAAC,CAAC,CAAC","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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-blind label=\"Example label\">Some content</ix-blind>`);\n  const blindElement = page.locator('ix-blind');\n  await expect(blindElement).toHaveClass(/hydrated/);\n});\n"]}

package/dist/collection/components/breadcrumb-item/breadcrumb-item.css

@@ -209,6 +209,9 @@
 :host .content-start {
   width: 100%;
 }
+:host .icon {
+  pointer-events: none;
+}
 
 :host(.disabled) {
   cursor: default;
@@ -655,6 +658,9 @@
 :host .content-start {
   width: 100%;
 }
+:host .icon {
+  pointer-events: none;
+}
 
 :host(.disabled) {
   cursor: default;

package/dist/collection/components/button/base-button.js

@@ -31,7 +31,7 @@ export const getButtonClasses = (variant, outline, ghost, iconOnly = false, icon
 export function BaseButton(props, children) {
   var _a, _b;
   const extraClasses = (_a = props.extraClasses) !== null && _a !== void 0 ? _a : {};
-  return (h("button", Object.assign({}, props.ariaAttributes, { onClick: (e) => (props.onClick ? props.onClick(e) : undefined), tabindex: props.disabled ? -1 : (_b = props.tabIndex) !== null && _b !== void 0 ? _b : 0, type: props.type, class: Object.assign(Object.assign({}, getButtonClasses(props.variant, props.outline, props.ghost, props.iconOnly, props.iconOval, props.selected, props.disabled || props.loading)), extraClasses) }), props.loading ? h("ix-spinner", { size: "small", hideTrack: true }) : null, props.icon && !props.loading ? (h("ix-icon", { name: props.icon, size: props.iconSize, color: props.iconColor })) : null, h("div", { class: {
+  return (h("button", Object.assign({}, props.ariaAttributes, { onClick: (e) => (props.onClick ? props.onClick(e) : undefined), tabindex: props.disabled ? -1 : (_b = props.tabIndex) !== null && _b !== void 0 ? _b : 0, type: props.type, class: Object.assign(Object.assign({}, getButtonClasses(props.variant, props.outline, props.ghost, props.iconOnly, props.iconOval, props.selected, props.disabled || props.loading)), extraClasses) }), props.loading ? h("ix-spinner", { size: "small", hideTrack: true }) : null, props.icon && !props.loading ? (h("ix-icon", { class: "icon", name: props.icon, size: props.iconSize, color: props.iconColor })) : null, h("div", { class: {
       content: true,
       [`content-${props.alignment}`]: !!props.alignment,
     } }, children), props.afterContent ? props.afterContent : null));

package/dist/collection/components/button/base-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.js","sourceRoot":"","sources":["../../../src/components/button/base-button.tsx"],"names":[],"mappings":"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","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 */\nimport { h } from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport { ButtonVariant } from './button';\n\nexport type ButtonAlignment = 'center' | 'start';\n\nconst isPrimary = (variant: string) => {\n  return variant.toUpperCase() === 'Primary'.toUpperCase();\n};\n\nconst isSecondary = (variant: string) => {\n  return variant.toUpperCase() === 'Secondary'.toUpperCase();\n};\n\nexport const getButtonClasses = (\n  variant: ButtonVariant,\n  outline: boolean,\n  ghost: boolean,\n  iconOnly = false,\n  iconOval = false,\n  selected: boolean,\n  disabled: boolean\n) => {\n  return {\n    btn: true,\n    'btn-primary': isPrimary(variant) && !outline && !ghost,\n    'btn-outline-primary': isPrimary(variant) && outline && !ghost,\n    'btn-invisible-primary': isPrimary(variant) && !outline && ghost,\n    'btn-secondary': isSecondary(variant) && !outline && !ghost,\n    'btn-outline-secondary': isSecondary(variant) && outline && !ghost,\n    'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,\n    'btn-icon': iconOnly,\n    'btn-oval': iconOval,\n    selected: selected,\n    disabled: disabled,\n  };\n};\n\nexport type BaseButtonProps = {\n  type: string;\n  variant: ButtonVariant;\n  outline: boolean;\n  ghost: boolean;\n  iconOnly: boolean;\n  iconOval: boolean;\n  selected: boolean;\n  disabled: boolean;\n  loading: boolean;\n  icon: string;\n  onClick?: Function;\n  ariaAttributes?: A11yAttributes;\n  extraClasses?: { [key: string]: boolean };\n  iconSize?: string;\n  iconColor?: string;\n  alignment?: ButtonAlignment;\n  tabIndex?: number;\n  afterContent?: any;\n};\n\nexport function BaseButton(props: BaseButtonProps, children) {\n  const extraClasses = props.extraClasses ?? {};\n\n  return (\n    <button\n      {...props.ariaAttributes}\n      onClick={(e: Event) => (props.onClick ? props.onClick(e) : undefined)}\n      tabindex={props.disabled ? -1 : props.tabIndex ?? 0}\n      type={props.type}\n      class={{\n        ...getButtonClasses(\n          props.variant,\n          props.outline,\n          props.ghost,\n          props.iconOnly,\n          props.iconOval,\n          props.selected,\n          props.disabled || props.loading\n        ),\n        ...extraClasses,\n      }}\n    >\n      {props.loading ? <ix-spinner size=\"small\" hideTrack></ix-spinner> : null}\n      {props.icon && !props.loading ? (\n        <ix-icon\n          name={props.icon}\n          size={props.iconSize as any}\n          color={props.iconColor}\n        ></ix-icon>\n      ) : null}\n      <div\n        class={{\n          content: true,\n          [`content-${props.alignment}`]: !!props.alignment,\n        }}\n      >\n        {children}\n      </div>\n      {props.afterContent ? props.afterContent : null}\n    </button>\n  );\n}\n"]}
+{"version":3,"file":"base-button.js","sourceRoot":"","sources":["../../../src/components/button/base-button.tsx"],"names":[],"mappings":"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","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 */\nimport { h } from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport { ButtonVariant } from './button';\n\nexport type ButtonAlignment = 'center' | 'start';\n\nconst isPrimary = (variant: string) => {\n  return variant.toUpperCase() === 'Primary'.toUpperCase();\n};\n\nconst isSecondary = (variant: string) => {\n  return variant.toUpperCase() === 'Secondary'.toUpperCase();\n};\n\nexport const getButtonClasses = (\n  variant: ButtonVariant,\n  outline: boolean,\n  ghost: boolean,\n  iconOnly = false,\n  iconOval = false,\n  selected: boolean,\n  disabled: boolean\n) => {\n  return {\n    btn: true,\n    'btn-primary': isPrimary(variant) && !outline && !ghost,\n    'btn-outline-primary': isPrimary(variant) && outline && !ghost,\n    'btn-invisible-primary': isPrimary(variant) && !outline && ghost,\n    'btn-secondary': isSecondary(variant) && !outline && !ghost,\n    'btn-outline-secondary': isSecondary(variant) && outline && !ghost,\n    'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,\n    'btn-icon': iconOnly,\n    'btn-oval': iconOval,\n    selected: selected,\n    disabled: disabled,\n  };\n};\n\nexport type BaseButtonProps = {\n  type: string;\n  variant: ButtonVariant;\n  outline: boolean;\n  ghost: boolean;\n  iconOnly: boolean;\n  iconOval: boolean;\n  selected: boolean;\n  disabled: boolean;\n  loading: boolean;\n  icon: string;\n  onClick?: Function;\n  ariaAttributes?: A11yAttributes;\n  extraClasses?: { [key: string]: boolean };\n  iconSize?: string;\n  iconColor?: string;\n  alignment?: ButtonAlignment;\n  tabIndex?: number;\n  afterContent?: any;\n};\n\nexport function BaseButton(props: BaseButtonProps, children) {\n  const extraClasses = props.extraClasses ?? {};\n\n  return (\n    <button\n      {...props.ariaAttributes}\n      onClick={(e: Event) => (props.onClick ? props.onClick(e) : undefined)}\n      tabindex={props.disabled ? -1 : props.tabIndex ?? 0}\n      type={props.type}\n      class={{\n        ...getButtonClasses(\n          props.variant,\n          props.outline,\n          props.ghost,\n          props.iconOnly,\n          props.iconOval,\n          props.selected,\n          props.disabled || props.loading\n        ),\n        ...extraClasses,\n      }}\n    >\n      {props.loading ? <ix-spinner size=\"small\" hideTrack></ix-spinner> : null}\n      {props.icon && !props.loading ? (\n        <ix-icon\n          class=\"icon\"\n          name={props.icon}\n          size={props.iconSize as any}\n          color={props.iconColor}\n        ></ix-icon>\n      ) : null}\n      <div\n        class={{\n          content: true,\n          [`content-${props.alignment}`]: !!props.alignment,\n        }}\n      >\n        {children}\n      </div>\n      {props.afterContent ? props.afterContent : null}\n    </button>\n  );\n}\n"]}

package/dist/collection/components/button/button.css

@@ -133,6 +133,9 @@
 :host .content-start {
   width: 100%;
 }
+:host .icon {
+  pointer-events: none;
+}
 
 :host(.disabled) {
   cursor: default;

package/dist/collection/components/button/test/button.ct.js

@@ -37,6 +37,6 @@ test('should not fire event when disabled', async ({ mount, page }) => {
   await mount(`<ix-button disabled>Content</ix-button>`);
   const button = page.locator('ix-button');
   await expect(button).toHaveClass(/hydrated/);
-  expect(button).toHaveCSS('pointer-events', 'none');
+  await expect(button).toHaveCSS('pointer-events', 'none');
 });
 //# sourceMappingURL=button.ct.js.map

package/dist/collection/components/button/test/button.ct.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.ct.js","sourceRoot":"","sources":["../../../../src/components/button/test/button.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CAAC,gCAAgC,CAAC,CAAC;EAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAC/C,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EAC1C,MAAM,KAAK,CAAC,8CAA8C,CAAC,CAAC;EAC5D,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACzC,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AACxD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,4BAA4B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EAC3D,MAAM,KAAK,CAAC,gCAAgC,CAAC,CAAC;EAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EAEzC,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;EAC7D,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAwB,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;EAC1E,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAC3D,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,yCAAyC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxE,MAAM,KAAK,CAAC,8CAA8C,CAAC,CAAC;EAC5D,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EAEzC,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;EAC7D,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAwB,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;EAC1E,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;EACzD,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,qCAAqC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACpE,MAAM,KAAK,CAAC,yCAAyC,CAAC,CAAC;EACvD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EAEzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC7C,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;AACrD,CAAC,CAAC,CAAC","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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-button>Content</ix-button>`);\n  const button = page.locator('ix-button');\n  await expect(button).toHaveClass(/hydrated/);\n});\n\ntest('show icon', async ({ mount, page }) => {\n  await mount(`<ix-button icon=\"rocket\">Content</ix-button>`);\n  const button = page.locator('ix-button');\n  await expect(button.locator('ix-icon')).toBeVisible();\n});\n\ntest('show spinner while loading', async ({ mount, page }) => {\n  await mount(`<ix-button>Content</ix-button>`);\n  const button = page.locator('ix-button');\n\n  await expect(button.locator('ix-spinner')).not.toBeVisible();\n  await button.evaluate((btn: HTMLIxButtonElement) => (btn.loading = true));\n  await expect(button.locator('ix-spinner')).toBeVisible();\n});\n\ntest('replace icon with spinner while loading', async ({ mount, page }) => {\n  await mount(`<ix-button icon=\"rocket\">Content</ix-button>`);\n  const button = page.locator('ix-button');\n\n  await expect(button.locator('ix-spinner')).not.toBeVisible();\n  await button.evaluate((btn: HTMLIxButtonElement) => (btn.loading = true));\n  await expect(button.locator('ix-spinner')).toBeVisible();\n  await expect(button.locator('ix-icon')).not.toBeVisible();\n});\n\ntest('should not fire event when disabled', async ({ mount, page }) => {\n  await mount(`<ix-button disabled>Content</ix-button>`);\n  const button = page.locator('ix-button');\n\n  await expect(button).toHaveClass(/hydrated/);\n  expect(button).toHaveCSS('pointer-events', 'none');\n});\n"]}
+{"version":3,"file":"button.ct.js","sourceRoot":"","sources":["../../../../src/components/button/test/button.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CAAC,gCAAgC,CAAC,CAAC;EAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAC/C,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EAC1C,MAAM,KAAK,CAAC,8CAA8C,CAAC,CAAC;EAC5D,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACzC,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AACxD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,4BAA4B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EAC3D,MAAM,KAAK,CAAC,gCAAgC,CAAC,CAAC;EAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EAEzC,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;EAC7D,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAwB,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;EAC1E,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAC3D,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,yCAAyC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxE,MAAM,KAAK,CAAC,8CAA8C,CAAC,CAAC;EAC5D,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EAEzC,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;EAC7D,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAwB,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;EAC1E,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;EACzD,MAAM,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,qCAAqC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACpE,MAAM,KAAK,CAAC,yCAAyC,CAAC,CAAC;EACvD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EAEzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;AAC3D,CAAC,CAAC,CAAC","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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-button>Content</ix-button>`);\n  const button = page.locator('ix-button');\n  await expect(button).toHaveClass(/hydrated/);\n});\n\ntest('show icon', async ({ mount, page }) => {\n  await mount(`<ix-button icon=\"rocket\">Content</ix-button>`);\n  const button = page.locator('ix-button');\n  await expect(button.locator('ix-icon')).toBeVisible();\n});\n\ntest('show spinner while loading', async ({ mount, page }) => {\n  await mount(`<ix-button>Content</ix-button>`);\n  const button = page.locator('ix-button');\n\n  await expect(button.locator('ix-spinner')).not.toBeVisible();\n  await button.evaluate((btn: HTMLIxButtonElement) => (btn.loading = true));\n  await expect(button.locator('ix-spinner')).toBeVisible();\n});\n\ntest('replace icon with spinner while loading', async ({ mount, page }) => {\n  await mount(`<ix-button icon=\"rocket\">Content</ix-button>`);\n  const button = page.locator('ix-button');\n\n  await expect(button.locator('ix-spinner')).not.toBeVisible();\n  await button.evaluate((btn: HTMLIxButtonElement) => (btn.loading = true));\n  await expect(button.locator('ix-spinner')).toBeVisible();\n  await expect(button.locator('ix-icon')).not.toBeVisible();\n});\n\ntest('should not fire event when disabled', async ({ mount, page }) => {\n  await mount(`<ix-button disabled>Content</ix-button>`);\n  const button = page.locator('ix-button');\n\n  await expect(button).toHaveClass(/hydrated/);\n  await expect(button).toHaveCSS('pointer-events', 'none');\n});\n"]}