npm - @siemens/ix - Versions diffs - 1.6.2 → 2.0.0-beta.0 - Mend

@siemens/ix 1.6.2 → 2.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1110) hide show

package/dist/collection/components/chip/chip.css CHANGED Viewed

@@ -26,6 +26,14 @@
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
+/*
+ * 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
  *
@@ -35,75 +43,101 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
+  display: inline-block;
+  position: relative;
+  height: 2rem;
+  max-height: 2rem;
+  margin-left: 0.25rem;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host(.inactive) {
+  pointer-events: none;
+}
+.container {
   display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: inherit;
+  box-sizing: border-box;
   position: relative;
   align-items: center;
   border-radius: 100px;
-  padding: 0.5rem 0.75rem;
+  padding: 0.5rem;
   height: 2rem;
   max-height: 2rem;
   cursor: pointer;
-  margin-left: 0.25rem;
 }
-:host .with-icon {
+.container .with-icon {
   margin-right: 0.25rem;
 }
-:host .hidden {
+.container .hidden {
   width: 0px;
   margin-right: 0px;
 }
-:host .close-button-container {
+.container .close-button-container {
   display: inline-flex;
-  flex-grow: 1;
-  margin-left: 0.75rem;
-}
-:host .close-button {
-  position: relative;
-  width: 1rem;
-  height: 1rem;
-  min-width: unset;
-  min-height: unset;
   margin-left: auto;
-  margin-right: 0;
+  padding-left: 0.5rem;
+}
+.container .slot-container {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.container.icon {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.container.closable {
+  padding-right: 0.25rem;
 }
-:host[variant=primary] {
+.container.primary {
   background-color: var(--theme-color-primary);
   color: var(--theme-chip-primary--color);
 }
-:host[variant=primary] .close-button {
+.container.primary .close-button {
   color: var(--theme-chip-primary--color);
+  --ix-icon-button-color: var(--theme-chip-primary--color);
   pointer-events: auto;
 }
-:host[variant=primary]:hover {
+.container.primary:hover {
   background-color: var(--theme-chip-primary--background--hover);
 }
-:host[variant=primary]:active {
+.container.primary:active {
   background-color: var(--theme-chip-primary--background--active);
 }
-:host[variant=primary]:focus-visible {
+.container.primary:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
-:host[variant=primary].outline {
+.container.primary.outline {
   color: var(--theme-chip-primary-outline--color);
   background-color: transparent;
   border: solid 1px var(--theme-chip-primary-outline--border-color);
 }
-:host[variant=primary].outline .close-button {
+.container.primary.outline .close-button {
   color: var(--theme-chip-primary-outline--color);
+  --ix-icon-button-color: var(--theme-chip-primary-outline--color);
 }
-:host[variant=primary].outline:hover {
+.container.primary.outline:hover {
   background-color: var(--theme-chip-primary-outline--background--hover);
 }
-:host[variant=primary].outline:active {
+.container.primary.outline:active {
   background-color: var(--theme-chip-primary-outline--background--active);
 }
-:host[variant=alarm] {
+.container.alarm {
   color: var(--theme-color-alarm--contrast);
 }
-:host[variant=alarm]:hover::after {
+.container.alarm:hover::after {
   content: "";
   display: block;
   position: absolute;
@@ -114,7 +148,7 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=alarm].active::after, :host[variant=alarm]:active::after {
+.container.alarm.active::after, .container.alarm:active::after {
   content: "";
   display: block;
   position: absolute;
@@ -125,43 +159,45 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=alarm]:not(.outline) {
+.container.alarm:not(.outline) {
   background-color: var(--theme-color-alarm);
 }
-:host[variant=alarm]:not(.outline) .close-button {
+.container.alarm:not(.outline) .close-button {
   color: var(--theme-color-alarm--contrast);
+  --ix-icon-button-color: var(--theme-color-alarm--contrast);
 }
-:host[variant=alarm]:not(.outline):hover::after {
+.container.alarm:not(.outline):hover::after {
   content: "";
   background-color: rgba(0, 0, 0, 0.05);
 }
-:host[variant=alarm]:not(.outline).active::after, :host[variant=alarm]:not(.outline):active::after {
+.container.alarm:not(.outline).active::after, .container.alarm:not(.outline):active::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-:host[variant=alarm].outline {
+.container.alarm.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-alarm);
 }
-:host[variant=alarm].outline:hover::after {
+.container.alarm.outline:hover::after {
   display: none;
 }
-:host[variant=alarm].outline:hover {
+.container.alarm.outline:hover {
   background-color: var(--theme-chip-outline--background--hover);
 }
-:host[variant=alarm].outline.active::after, :host[variant=alarm].outline:active::after {
+.container.alarm.outline.active::after, .container.alarm.outline:active::after {
   display: none;
 }
-:host[variant=alarm].outline.active, :host[variant=alarm].outline:active {
+.container.alarm.outline.active, .container.alarm.outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
-:host[variant=alarm]:focus-visible {
+.container.alarm:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
-:host[variant=critical] {
+.container.critical {
   color: var(--theme-color-critical--contrast);
 }
-:host[variant=critical]:hover::after {
+.container.critical:hover::after {
   content: "";
   display: block;
   position: absolute;
@@ -172,7 +208,7 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=critical].active::after, :host[variant=critical]:active::after {
+.container.critical.active::after, .container.critical:active::after {
   content: "";
   display: block;
   position: absolute;
@@ -183,43 +219,45 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=critical]:not(.outline) {
+.container.critical:not(.outline) {
   background-color: var(--theme-color-critical);
 }
-:host[variant=critical]:not(.outline) .close-button {
+.container.critical:not(.outline) .close-button {
   color: var(--theme-color-critical--contrast);
+  --ix-icon-button-color: var(--theme-color-critical--contrast);
 }
-:host[variant=critical]:not(.outline):hover::after {
+.container.critical:not(.outline):hover::after {
   content: "";
   background-color: rgba(0, 0, 0, 0.05);
 }
-:host[variant=critical]:not(.outline).active::after, :host[variant=critical]:not(.outline):active::after {
+.container.critical:not(.outline).active::after, .container.critical:not(.outline):active::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-:host[variant=critical].outline {
+.container.critical.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-critical);
 }
-:host[variant=critical].outline:hover::after {
+.container.critical.outline:hover::after {
   display: none;
 }
-:host[variant=critical].outline:hover {
+.container.critical.outline:hover {
   background-color: var(--theme-chip-outline--background--hover);
 }
-:host[variant=critical].outline.active::after, :host[variant=critical].outline:active::after {
+.container.critical.outline.active::after, .container.critical.outline:active::after {
   display: none;
 }
-:host[variant=critical].outline.active, :host[variant=critical].outline:active {
+.container.critical.outline.active, .container.critical.outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
-:host[variant=critical]:focus-visible {
+.container.critical:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
-:host[variant=warning] {
+.container.warning {
   color: var(--theme-color-warning--contrast);
 }
-:host[variant=warning]:hover::after {
+.container.warning:hover::after {
   content: "";
   display: block;
   position: absolute;
@@ -230,7 +268,7 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=warning].active::after, :host[variant=warning]:active::after {
+.container.warning.active::after, .container.warning:active::after {
   content: "";
   display: block;
   position: absolute;
@@ -241,43 +279,45 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=warning]:not(.outline) {
+.container.warning:not(.outline) {
   background-color: var(--theme-color-warning);
 }
-:host[variant=warning]:not(.outline) .close-button {
+.container.warning:not(.outline) .close-button {
   color: var(--theme-color-warning--contrast);
+  --ix-icon-button-color: var(--theme-color-warning--contrast);
 }
-:host[variant=warning]:not(.outline):hover::after {
+.container.warning:not(.outline):hover::after {
   content: "";
   background-color: rgba(0, 0, 0, 0.05);
 }
-:host[variant=warning]:not(.outline).active::after, :host[variant=warning]:not(.outline):active::after {
+.container.warning:not(.outline).active::after, .container.warning:not(.outline):active::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-:host[variant=warning].outline {
+.container.warning.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-warning);
 }
-:host[variant=warning].outline:hover::after {
+.container.warning.outline:hover::after {
   display: none;
 }
-:host[variant=warning].outline:hover {
+.container.warning.outline:hover {
   background-color: var(--theme-chip-outline--background--hover);
 }
-:host[variant=warning].outline.active::after, :host[variant=warning].outline:active::after {
+.container.warning.outline.active::after, .container.warning.outline:active::after {
   display: none;
 }
-:host[variant=warning].outline.active, :host[variant=warning].outline:active {
+.container.warning.outline.active, .container.warning.outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
-:host[variant=warning]:focus-visible {
+.container.warning:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
-:host[variant=info] {
+.container.info {
   color: var(--theme-color-info--contrast);
 }
-:host[variant=info]:hover::after {
+.container.info:hover::after {
   content: "";
   display: block;
   position: absolute;
@@ -288,7 +328,7 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=info].active::after, :host[variant=info]:active::after {
+.container.info.active::after, .container.info:active::after {
   content: "";
   display: block;
   position: absolute;
@@ -299,43 +339,45 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=info]:not(.outline) {
+.container.info:not(.outline) {
   background-color: var(--theme-color-info);
 }
-:host[variant=info]:not(.outline) .close-button {
+.container.info:not(.outline) .close-button {
   color: var(--theme-color-info--contrast);
+  --ix-icon-button-color: var(--theme-color-info--contrast);
 }
-:host[variant=info]:not(.outline):hover::after {
+.container.info:not(.outline):hover::after {
   content: "";
   background-color: rgba(0, 0, 0, 0.05);
 }
-:host[variant=info]:not(.outline).active::after, :host[variant=info]:not(.outline):active::after {
+.container.info:not(.outline).active::after, .container.info:not(.outline):active::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-:host[variant=info].outline {
+.container.info.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-info);
 }
-:host[variant=info].outline:hover::after {
+.container.info.outline:hover::after {
   display: none;
 }
-:host[variant=info].outline:hover {
+.container.info.outline:hover {
   background-color: var(--theme-chip-outline--background--hover);
 }
-:host[variant=info].outline.active::after, :host[variant=info].outline:active::after {
+.container.info.outline.active::after, .container.info.outline:active::after {
   display: none;
 }
-:host[variant=info].outline.active, :host[variant=info].outline:active {
+.container.info.outline.active, .container.info.outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
-:host[variant=info]:focus-visible {
+.container.info:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
-:host[variant=neutral] {
+.container.neutral {
   color: var(--theme-color-neutral--contrast);
 }
-:host[variant=neutral]:hover::after {
+.container.neutral:hover::after {
   content: "";
   display: block;
   position: absolute;
@@ -346,7 +388,7 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=neutral].active::after, :host[variant=neutral]:active::after {
+.container.neutral.active::after, .container.neutral:active::after {
   content: "";
   display: block;
   position: absolute;
@@ -357,43 +399,45 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=neutral]:not(.outline) {
+.container.neutral:not(.outline) {
   background-color: var(--theme-color-neutral);
 }
-:host[variant=neutral]:not(.outline) .close-button {
+.container.neutral:not(.outline) .close-button {
   color: var(--theme-color-neutral--contrast);
+  --ix-icon-button-color: var(--theme-color-neutral--contrast);
 }
-:host[variant=neutral]:not(.outline):hover::after {
+.container.neutral:not(.outline):hover::after {
   content: "";
   background-color: rgba(0, 0, 0, 0.05);
 }
-:host[variant=neutral]:not(.outline).active::after, :host[variant=neutral]:not(.outline):active::after {
+.container.neutral:not(.outline).active::after, .container.neutral:not(.outline):active::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-:host[variant=neutral].outline {
+.container.neutral.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-neutral);
 }
-:host[variant=neutral].outline:hover::after {
+.container.neutral.outline:hover::after {
   display: none;
 }
-:host[variant=neutral].outline:hover {
+.container.neutral.outline:hover {
   background-color: var(--theme-chip-outline--background--hover);
 }
-:host[variant=neutral].outline.active::after, :host[variant=neutral].outline:active::after {
+.container.neutral.outline.active::after, .container.neutral.outline:active::after {
   display: none;
 }
-:host[variant=neutral].outline.active, :host[variant=neutral].outline:active {
+.container.neutral.outline.active, .container.neutral.outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
-:host[variant=neutral]:focus-visible {
+.container.neutral:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
-:host[variant=success] {
+.container.success {
   color: var(--theme-color-success--contrast);
 }
-:host[variant=success]:hover::after {
+.container.success:hover::after {
   content: "";
   display: block;
   position: absolute;
@@ -404,7 +448,7 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=success].active::after, :host[variant=success]:active::after {
+.container.success.active::after, .container.success:active::after {
   content: "";
   display: block;
   position: absolute;
@@ -415,81 +459,37 @@
   border-radius: 100px;
   pointer-events: none;
 }
-:host[variant=success]:not(.outline) {
+.container.success:not(.outline) {
   background-color: var(--theme-color-success);
 }
-:host[variant=success]:not(.outline) .close-button {
+.container.success:not(.outline) .close-button {
   color: var(--theme-color-success--contrast);
+  --ix-icon-button-color: var(--theme-color-success--contrast);
 }
-:host[variant=success]:not(.outline):hover::after {
+.container.success:not(.outline):hover::after {
   content: "";
   background-color: rgba(0, 0, 0, 0.05);
 }
-:host[variant=success]:not(.outline).active::after, :host[variant=success]:not(.outline):active::after {
+.container.success:not(.outline).active::after, .container.success:not(.outline):active::after {
   background-color: rgba(0, 0, 0, 0.1);
 }
-:host[variant=success].outline {
+.container.success.outline {
   color: var(--theme-chip-outline--color);
   border: solid 1px var(--theme-color-success);
 }
-:host[variant=success].outline:hover::after {
+.container.success.outline:hover::after {
   display: none;
 }
-:host[variant=success].outline:hover {
+.container.success.outline:hover {
   background-color: var(--theme-chip-outline--background--hover);
 }
-:host[variant=success].outline.active::after, :host[variant=success].outline:active::after {
+.container.success.outline.active::after, .container.success.outline:active::after {
   display: none;
 }
-:host[variant=success].outline.active, :host[variant=success].outline:active {
+.container.success.outline.active, .container.success.outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
-:host[variant=success]:focus-visible {
+.container.success:focus-visible {
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
-}
-:host[variant=custom]:hover::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, var(--theme-l-hover));
-  left: 0;
-  border-radius: 100px;
-  pointer-events: none;
-}
-:host[variant=custom].active::after, :host[variant=custom]:active::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, var(--theme-l-active));
-  left: 0;
-  border-radius: 100px;
-  pointer-events: none;
-}
-:host[variant=custom]:focus-visible {
-  outline: 1px solid #199fff;
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
-:host[variant=custom].outline {
-  border: solid 1px transparent;
-  background-color: transparent;
-}
-:host[variant=custom].outline:hover {
-  background-color: rgba(0, 0, 0, var(--theme-l-hover));
-}
-:host[variant=custom].outline:active {
-  background-color: rgba(0, 0, 0, var(--theme-l-active));
-}
-:host .slot-container {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-:host(.inactive) {
-  pointer-events: none;
 }

package/dist/collection/components/chip/chip.js CHANGED Viewed

@@ -18,37 +18,45 @@ export class Chip {
     this.outline = false;
   }
   getCloseButton() {
-    return (h("div", { class: "close-button-container" }, h("button", { type: "button", class: "btn btn-invisible-secondary btn-icon btn-oval close-button", onClick: (event) => {
+    return (h("div", { class: "close-button-container" }, h("ix-icon-button", { type: "button", variant: "secondary", icon: "close-small", class: "close-button", oval: true, size: "16", style: this.variant === 'custom' ? { color: this.color } : {}, ghost: true, onClick: (event) => {
         this.close.emit(event);
         this.closeChip.emit(event);
         event.stopPropagation();
-      } }, this.variant === 'custom' ? (h("i", { class: "glyph glyph-16 glyph-close-small", style: { color: this.color } })) : (h("ix-icon", { name: 'close-small', size: '16' })))));
+      } })));
   }
   render() {
     const isInactive = this.active === false;
     let customStyle = {};
-    if (this.variant === 'custom' && this.outline === false) {
+    if (this.variant === 'custom') {
       customStyle = {
         color: this.color,
-        backgroundColor: this.background,
+        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
       };
     }
-    if (this.variant === 'custom' && this.outline === true) {
-      customStyle = {
-        color: this.color,
-        borderColor: this.background,
-      };
-    }
-    return (h(Host, { class: {
+    return (h(Host, { tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
+        ? {
+          '--ix-icon-button-color': this.color,
+        }
+        : {} }, h("div", { style: Object.assign({}, customStyle), class: {
+        container: true,
         outline: this.outline,
         inactive: isInactive,
-      }, tabIndex: "-1", title: this.el.textContent, style: Object.assign({}, customStyle) }, h("ix-icon", { class: {
+        alarm: this.variant === 'alarm',
+        critical: this.variant === 'critical',
+        info: this.variant === 'info',
+        neutral: this.variant === 'neutral',
+        primary: this.variant === 'primary',
+        success: this.variant === 'success',
+        warning: this.variant === 'warning',
+        closable: this.closable,
+        icon: !!this.icon,
+      } }, h("ix-icon", { class: {
         'with-icon': true,
         hidden: this.icon === undefined || this.icon === '',
-      }, name: this.icon, size: '24' }), h("span", { class: "slot-container" }, h("slot", null)), isInactive === false && this.closable ? this.getCloseButton() : null));
+      }, name: this.icon, size: '24' }), h("span", { class: "slot-container" }, h("slot", null)), isInactive === false && this.closable ? this.getCloseButton() : null)));
   }
   static get is() { return "ix-chip"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["chip.scss"]

package/dist/collection/components/chip/chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,IAAI;;mBAcA,SAAS;kBAMP,IAAI;oBAKF,KAAK;;;;mBAoBN,KAAK;;EAgBf,cAAc;IACpB,OAAO,CACL,WAAK,KAAK,EAAC,wBAAwB~~;MACjC~~,~~cACE~~,IAAI,EAAC,QAAQ,EACb,~~KAAK~~,EAAC,~~4DAA4D~~,~~EAClE~~,~~OAAO~~,~~EAAE~~,~~CAAC~~,KAAK,~~EAAE~~,~~EAAE;UACjB~~,IAAI,~~CAAC~~,~~KAAK~~,~~CAAC~~,IAAI,~~CAAC~~,KAAK,~~CAAC~~,~~CAAC;UACvB,~~IAAI,CAAC,~~SAAS~~,~~CAAC~~,~~IAAI~~,CAAC,~~KAAK,~~CAAC,CAAC~~;UAC3B~~,KAAK,~~CAAC,eAAe,~~EAAE,~~CAAC;QAC1B,CAAC,IAEA,~~IAAI,CAAC,~~OAAO,~~KAAK,~~QAAQ~~,CAAC,CAAC,CAAC,~~CAC3B~~,~~SACE~~,KAAK,~~EAAC~~,~~kCAAkC~~,~~EACxC~~,KAAK,EAAE,EAAE,KAAK,~~EAAE~~,IAAI,CAAC,KAAK,~~EAAE~~,~~GAC5B~~,~~CACH~~,CAAC,CAAC,CAAC,~~CACF~~,~~eAAS~~,~~IAAI~~,~~EAAE~~,~~aAAa~~,~~EAAE~~,~~IAAI,~~EAAE,~~IAAI~~,~~GAAI~~,~~CAC7C~~,~~CACM~~,~~CACL,~~CACP,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,CAAC;IAEzC,IAAI,WAAW,GAAG,EAAE,CAAC;IAErB,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,~~IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,~~EAAE;~~MACvD~~,WAAW,GAAG;QACZ,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,~~eAAe~~,EAAE,IAAI,CAAC,UAAU;~~OACjC~~,CAAC;KACH;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,~~IAAI~~,IAAI,CAAC,~~OAAO~~,KAAK,IAAI,EAAE;~~MACtD~~,~~WAAW~~,~~GAAG~~;~~QACZ~~,KAAK,EAAE,IAAI,CAAC,KAAK;~~QACjB~~,~~WAAW~~,EAAE,IAAI,CAAC,UAAU;~~OAC7B~~,CAAC;~~KACH;IAED~~,OAAO,~~CACL~~,~~EAAC,~~IAAI,~~IACH~~,KAAK,~~EAAE~~;~~QACL~~,OAAO,EAAE,IAAI,CAAC,OAAO;~~QACrB~~,~~QAAQ~~,EAAE,~~UAAU~~;~~OACrB~~,~~EACD~~,~~QAAQ~~,~~EAAC,~~IAAI,~~EACb~~,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,~~WAAW~~,~~EAC1B~~,~~KAAK~~,~~oBAAO,WAAW~~;~~MAEvB~~,eACE,KAAK,EAAE;~~UACL~~,WAAW,EAAE,IAAI;~~UACjB~~,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;~~SACpD~~,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,GACV;~~MACF~~,YAAM,KAAK,EAAC,gBAAgB;~~QAC1B~~,eAAa,CACR;~~MACN~~,UAAU,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,~~CAChE~~,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 {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-chip',\n styleUrl: 'chip.scss',\n ~~scoped~~: true,\n})\nexport class Chip {\n @Element() el: HTMLIxChipElement;\n\n /\n Chip variant\n /\n @Prop({ reflect: true }) variant:\n \| 'primary'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'custom' = 'primary';\n\n /\n Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\n * will be possible and also the close button will not be present.\n /\n @Prop() active = true;\n\n /\n Show close icon\n /\n @Prop() closable = false;\n\n /\n Show icon\n /\n @Prop() icon: string \| undefined;\n\n /\n Custom color for pill. Only working for `variant='custom'`\n /\n @Prop() background: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n /\n @Prop() color: string \| undefined;\n\n /\n Show chip with outline style\n /\n @Prop() outline = false;\n\n /\n Fire event if close button is clicked\n \n @deprecated Will be removed in 2.0.0. Use `closeChip`\n /\n @Event() close: EventEmitter;\n\n /\n Fire event if close button is clicked\n \n @since 1.5.0\n */\n @Event() closeChip: EventEmitter;\n\n private getCloseButton() {\n return (\n <div class=\"close-button-container\">\n <button\n type=\"button\"\n ~~class~~=\"~~btn btn-invisible-~~secondary ~~btn-~~icon ~~btn~~-~~oval~~ close-button\"\n onClick={(event) => {\n this.close.emit(event);\n this.closeChip.emit(event);\n event.stopPropagation();\n ~~}}\n >\n {this.variant === 'custom' ? (\n~~ ~~<i\n class=\"glyph glyph-16 glyph-close-small\"\n style={{ color: this.color~~ }}\n ~~/>\n~~ ~~) : (\n <~~ix-icon ~~name={'close~~-~~small'} size={'16'} />\~~n )}\n ~~</button>\n~~ </div>\n );\n }\n\n render() {\n const isInactive = this.active === false;\n\n let customStyle = {};\n\n if (this.variant === 'custom' ~~&& this.outline === false~~) {\n customStyle = {\n color: this.color,\n backgroundColor: this.background,\n };\n }\n\n if (this.variant === 'custom' ~~&& this.outline === true) {~~\n ~~customStyle~~ = {\n color: this.color,\n ~~borderColor~~: ~~this.background,\n~~ };\n }\n\n ~~return~~ (\n ~~<Host\n~~ class={{\n outline: this.outline,\n inactive: isInactive,\n ~~}}\~~n ~~tabIndex=\"-1\"\~~n ~~title={~~this.el.~~textContent}\~~n ~~style={{~~ ~~...customStyle~~ }}\n >\n <ix-icon\n class={{\n 'with-icon': true,\n hidden: this.icon === undefined \|\| this.icon === '',\n }}\n name={this.icon}\n size={'24'}\n />\n <span class=\"slot-container\">\n <slot></slot>\n </span>\n {isInactive === false && this.closable ? this.getCloseButton() : null}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.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} from '@stencil/core';\n\n@Component({\n tag: 'ix-chip',\n styleUrl: 'chip.scss',\n shadow: true,\n})\nexport class Chip {\n @Element() el: HTMLIxChipElement;\n\n /\n Chip variant\n /\n @Prop({ reflect: true }) variant:\n \| 'primary'\n \| 'alarm'\n \| 'critical'\n \| 'warning'\n \| 'info'\n \| 'neutral'\n \| 'success'\n \| 'custom' = 'primary';\n\n /\n Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\n * will be possible and also the close button will not be present.\n /\n @Prop() active = true;\n\n /\n Show close icon\n /\n @Prop() closable = false;\n\n /\n Show icon\n /\n @Prop() icon: string \| undefined;\n\n /\n Custom color for pill. Only working for `variant='custom'`\n /\n @Prop() background: string \| undefined;\n\n /\n Custom font color for pill. Only working for `variant='custom'`\n /\n @Prop() color: string \| undefined;\n\n /\n Show chip with outline style\n /\n @Prop() outline = false;\n\n /\n Fire event if close button is clicked\n \n @deprecated Will be removed in 2.0.0. Use `closeChip`\n /\n @Event() close: EventEmitter;\n\n /\n Fire event if close button is clicked\n \n @since 1.5.0\n */\n @Event() closeChip: EventEmitter;\n\n private getCloseButton() {\n return (\n <div class=\"close-button-container\">\n {\n <ix-icon-button\n type=\"button\"\n variant=\"secondary\"\n icon=\"close-small\"\n class=\"close-button\"\n oval\n size=\"16\"\n style={this.variant === 'custom' ? { color: this.color } : {}}\n ghost\n onClick={(event) => {\n this.close.emit(event);\n this.closeChip.emit(event);\n event.stopPropagation();\n }}\n ></ix-icon-button>\n }\n </div>\n );\n }\n\n render() {\n const isInactive = this.active === false;\n\n let customStyle = {};\n\n if (this.variant === 'custom') {\n customStyle = {\n color: this.color,\n [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n };\n }\n\n return (\n <Host\n tabIndex=\"-1\"\n title={this.el.textContent}\n style={\n this.variant === 'custom'\n ? {\n '--ix-icon-button-color': this.color,\n }\n : {}\n }\n >\n <div\n style={{ ...customStyle }}\n class={{\n container: true,\n outline: this.outline,\n inactive: isInactive,\n alarm: this.variant === 'alarm',\n critical: this.variant === 'critical',\n info: this.variant === 'info',\n neutral: this.variant === 'neutral',\n primary: this.variant === 'primary',\n success: this.variant === 'success',\n warning: this.variant === 'warning',\n closable: this.closable,\n icon: !!this.icon,\n }}\n >\n <ix-icon\n class={{\n 'with-icon': true,\n hidden: this.icon === undefined \|\| this.icon === '',\n }}\n name={this.icon}\n size={'24'}\n />\n <span class=\"slot-container\">\n <slot></slot>\n </span>\n {isInactive === false && this.closable ? this.getCloseButton() : null}\n </div>\n </Host>\n );\n }\n}\n"]}