@siemens/ix 3.0.0 → 3.1.0

package/dist/collection/components/helper-text/helper-text.js

@@ -65,7 +65,7 @@ export class HelperText {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -84,7 +84,7 @@ export class HelperText {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -103,7 +103,7 @@ export class HelperText {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -122,7 +122,7 @@ export class HelperText {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -141,7 +141,7 @@ export class HelperText {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -160,7 +160,7 @@ export class HelperText {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

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

@@ -252,7 +252,7 @@
 :host .btn-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -266,7 +266,7 @@
 :host .btn-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-danger:not(.disabled):not(:disabled):hover, :host .btn-danger:not(.disabled):not(:disabled):hover {
+:host .btn-danger:not(.disabled):not(:disabled):hover, :host .btn-danger:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-danger--border-color--hover);
   background-color: var(--theme-btn-danger--background--hover);
   color: var(--theme-btn-danger--color--hover);
@@ -314,7 +314,7 @@
 :host .btn-outline-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -328,7 +328,7 @@
 :host .btn-outline-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-danger:not(.disabled):not(:disabled):hover, :host .btn-outline-danger:not(.disabled):not(:disabled):hover {
+:host .btn-outline-danger:not(.disabled):not(:disabled):hover, :host .btn-outline-danger:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-danger--border-color--hover);
   background-color: var(--theme-btn-outline-danger--background--hover);
   color: var(--theme-btn-outline-danger--color--hover);
@@ -374,7 +374,7 @@
 :host .btn-invisible-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -388,7 +388,7 @@
 :host .btn-invisible-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-danger:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-danger:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-danger--background--hover);
   color: var(--theme-btn-invisible-danger--color--hover);
 }
@@ -433,7 +433,7 @@
 :host .btn-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -447,7 +447,7 @@
 :host .btn-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled):hover {
+:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-primary--border-color--hover);
   background-color: var(--theme-btn-primary--background--hover);
   color: var(--theme-btn-primary--color--hover);
@@ -495,7 +495,7 @@
 :host .btn-outline-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -509,7 +509,7 @@
 :host .btn-outline-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled):hover {
+:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-primary--border-color--hover);
   background-color: var(--theme-btn-outline-primary--background--hover);
   color: var(--theme-btn-outline-primary--color--hover);
@@ -555,7 +555,7 @@
 :host .btn-invisible-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -569,7 +569,7 @@
 :host .btn-invisible-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-primary--background--hover);
   color: var(--theme-btn-invisible-primary--color--hover);
 }
@@ -614,7 +614,7 @@
 :host .btn-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -628,7 +628,7 @@
 :host .btn-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-secondary--border-color--hover);
   background-color: var(--theme-btn-secondary--background--hover);
   color: var(--theme-btn-secondary--color--hover);
@@ -676,7 +676,7 @@
 :host .btn-outline-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -690,7 +690,7 @@
 :host .btn-outline-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-secondary--border-color--hover);
   background-color: var(--theme-btn-outline-secondary--background--hover);
   color: var(--theme-btn-outline-secondary--color--hover);
@@ -736,7 +736,7 @@
 :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -750,7 +750,7 @@
 :host .btn-invisible-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-secondary--background--hover);
   color: var(--theme-btn-invisible-secondary--color--hover);
 }

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

@@ -111,7 +111,7 @@ export class IconButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -216,7 +216,7 @@ export class IconButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -255,7 +255,7 @@ export class IconButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/icon-toggle-button/icon-toggle-button.css

@@ -252,7 +252,7 @@
 :host .btn-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -266,7 +266,7 @@
 :host .btn-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-danger:not(.disabled):not(:disabled):hover, :host .btn-danger:not(.disabled):not(:disabled):hover {
+:host .btn-danger:not(.disabled):not(:disabled):hover, :host .btn-danger:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-danger--border-color--hover);
   background-color: var(--theme-btn-danger--background--hover);
   color: var(--theme-btn-danger--color--hover);
@@ -314,7 +314,7 @@
 :host .btn-outline-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -328,7 +328,7 @@
 :host .btn-outline-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-danger:not(.disabled):not(:disabled):hover, :host .btn-outline-danger:not(.disabled):not(:disabled):hover {
+:host .btn-outline-danger:not(.disabled):not(:disabled):hover, :host .btn-outline-danger:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-danger--border-color--hover);
   background-color: var(--theme-btn-outline-danger--background--hover);
   color: var(--theme-btn-outline-danger--color--hover);
@@ -374,7 +374,7 @@
 :host .btn-invisible-danger.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -388,7 +388,7 @@
 :host .btn-invisible-danger:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-danger:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-danger:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-danger--background--hover);
   color: var(--theme-btn-invisible-danger--color--hover);
 }
@@ -433,7 +433,7 @@
 :host .btn-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -447,7 +447,7 @@
 :host .btn-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled):hover {
+:host .btn-primary:not(.disabled):not(:disabled):hover, :host .btn-primary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-primary--border-color--hover);
   background-color: var(--theme-btn-primary--background--hover);
   color: var(--theme-btn-primary--color--hover);
@@ -495,7 +495,7 @@
 :host .btn-outline-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -509,7 +509,7 @@
 :host .btn-outline-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled):hover {
+:host .btn-outline-primary:not(.disabled):not(:disabled):hover, :host .btn-outline-primary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-primary--border-color--hover);
   background-color: var(--theme-btn-outline-primary--background--hover);
   color: var(--theme-btn-outline-primary--color--hover);
@@ -555,7 +555,7 @@
 :host .btn-invisible-primary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -569,7 +569,7 @@
 :host .btn-invisible-primary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host .btn-invisible-primary:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-primary--background--hover);
   color: var(--theme-btn-invisible-primary--color--hover);
 }
@@ -614,7 +614,7 @@
 :host .btn-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -628,7 +628,7 @@
 :host .btn-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-secondary:not(.disabled):not(:disabled):hover, :host .btn-secondary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-secondary--border-color--hover);
   background-color: var(--theme-btn-secondary--background--hover);
   color: var(--theme-btn-secondary--color--hover);
@@ -676,7 +676,7 @@
 :host .btn-outline-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -690,7 +690,7 @@
 :host .btn-outline-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-outline-secondary:not(.disabled):not(:disabled):hover, :host .btn-outline-secondary:not(.disabled):not(:disabled).hover {
   border-color: var(--theme-btn-outline-secondary--border-color--hover);
   background-color: var(--theme-btn-outline-secondary--background--hover);
   color: var(--theme-btn-outline-secondary--color--hover);
@@ -736,7 +736,7 @@
 :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-color-ghost--selected-hover);
   color: var(--theme-color-dynamic);
 }
@@ -750,7 +750,7 @@
 :host .btn-invisible-secondary:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled):hover {
+:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover, :host .btn-invisible-secondary:not(.disabled):not(:disabled).hover {
   background-color: var(--theme-btn-invisible-secondary--background--hover);
   color: var(--theme-btn-invisible-secondary--color--hover);
 }

package/dist/collection/components/icon-toggle-button/icon-toggle-button.js

@@ -24,6 +24,13 @@ export class IconToggleButton {
          * Button with no background or outline
          */
         this.ghost = false;
+        /**
+         * Button in oval shape
+         *
+         * @since 3.1.0
+         *
+         */
+        this.oval = false;
         /**
          * Show button as pressed
          */
@@ -77,7 +84,7 @@ export class IconToggleButton {
             outline: this.outline,
             ghost: this.ghost,
             iconOnly: true,
-            iconOval: false,
+            iconOval: this.oval,
             selected: this.pressed,
             disabled: this.disabled || this.loading,
             icon: this.icon,
@@ -90,7 +97,7 @@ export class IconToggleButton {
             },
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
-        return (h(Host, { key: 'c6ee50eeae6633065e5de88f97596caf8eb0e281', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '7d47806873919e9f74da8531c1fe2b087902c56f' }, baseButtonProps))));
+        return (h(Host, { key: '360f5f27bd0adb80605511c7a70c1f4049d358e6', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '5bb9326f1821130d4240dfe7a5d0ad4c0b4902d4' }, baseButtonProps))));
     }
     static get is() { return "ix-icon-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -178,7 +185,7 @@ export class IconToggleButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -191,6 +198,29 @@ export class IconToggleButton {
                 "setter": false,
                 "reflect": false
             },
+            "oval": {
+                "type": "boolean",
+                "attribute": "oval",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "3.1.0"
+                        }],
+                    "text": "Button in oval shape"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "pressed": {
                 "type": "boolean",
                 "attribute": "pressed",

package/dist/collection/components/icon-toggle-button/icon-toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-toggle-button.js","sourceRoot":"","sources":["../../../src/components/icon-toggle-button/icon-toggle-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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange!: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"icon-toggle-button.js","sourceRoot":"","sources":["../../../src/components/icon-toggle-button/icon-toggle-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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Button in oval shape\n   *\n   * @since 3.1.0\n   *\n   */\n  @Prop() oval: boolean = false;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange!: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"]}