@infineon/infineon-design-system-stencil 32.8.4--canary.1799.2832e1ae59cc5b2c343201ece539e6cc258f1eae.0 → 32.9.0--canary.1690.29340faec4d1b697979085cf1692ed9a1f98de00.0

package/dist/cjs/ifx-notification.cjs.entry.js

@@ -28,8 +28,8 @@ const Notification = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '13f70e0073c405d09ebab6567d0c0729be501764' }, index.h("div", { key: '67959ca0f9ed3f892d73a79c86183b2c0802c515', class: "ifx-notification__wrapper " + this.getClassName() }, index.h("div", { key: 'da287dee65a5bf2960167b0b87a603107190fac8', class: "ifx-notification__icon" }, index.h("ifx-icon", { key: '4e766f32e0ec6d059fc9784745e533b16e577a54', icon: this.icon })), index.h("div", { key: '8356a67bb2b878164a1269f51563c6796aaad919', class: "ifx-notification__body" }, index.h("div", { key: '713a6c1b3948058817eb3fc730f43155a169cdaa', class: "ifx-notification__slot" }, index.h("slot", { key: 'f33ffd81c74fe5def5a18fb1d56619f0cce9c252' })), this.linkText && this.linkHref &&
-            index.h("div", { key: '638730c05712d9d762f56c18390296da07b58081', class: "ifx-notification__link" }, index.h("ifx-link", { key: 'ad0dd0f6451ecce51f97f84f3737b173e162af6f', href: this.linkHref, target: this.linkTarget }, this.linkText, index.h("ifx-icon", { key: 'ba59da60d8661ac92a606c5e2c483e0efab7a0c3', icon: "arrow-right-16" })))))));
+        return (index.h(index.Host, { key: '48ae3443dc099417baaaafbaedfb7735eab8679f' }, index.h("div", { key: 'cec3b3b76f3baaae2b7b7e8a8cef32174ebfe79f', class: "ifx-notification__wrapper " + this.getClassName() }, index.h("div", { key: 'c0616bba0fb9a52eaeb56b34fceab9e7584001ce', class: "ifx-notification__icon" }, index.h("ifx-icon", { key: 'd390856f0339ffb1a86c17560f4d1b14acb95698', icon: this.icon })), index.h("div", { key: '744ffc85e2b629e0f1df727ec44f8dedceee9604', class: "ifx-notification__body" }, index.h("div", { key: 'a432cb13cf9fc867eaaa726c172e554b313e9a4a', class: "ifx-notification__slot" }, index.h("slot", { key: 'ca7d41c48c623deef0df3a303aa5e0dc41d558dd' })), this.linkText && this.linkHref &&
+            index.h("div", { key: '3f34bb836df2aa45118d0046bb0cf0b0d77ed7f4', class: "ifx-notification__link" }, index.h("ifx-link", { key: 'af5e714dfef66cdce1acfd912463fe25866f9b5c', href: this.linkHref, target: this.linkTarget }, this.linkText, index.h("ifx-icon", { key: '9ad209bc71b30df19529ccc14d7c997a70bbeb4f', icon: "arrow-right-16" })))))));
     }
 };
 Notification.style = IfxNotificationStyle0;

package/dist/cjs/ifx-number-indicator.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c9480f70.js');
 
-const numberIndicatorCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.numberIndicator__container{display:inline-flex;padding:0px 4px;max-height:16px;justify-content:center;align-items:center;border-radius:100px;background-color:#0A8276;font-family:var(--ifx-font-family)}.numberIndicator__container span{color:#FFFFFF;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:16px}.numberIndicator__container.inverted{background-color:#FFFFFF}.numberIndicator__container.inverted span{color:#0A8276}";
+const numberIndicatorCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.numberIndicator__container{height:16px;display:inline-flex;padding:0;min-width:16px;justify-content:center;align-items:center;border-radius:100px;background-color:#0A8276}.numberIndicator__container span{padding:0 4px;color:#FFFFFF;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:16px}.numberIndicator__container.inverted{background-color:#FFFFFF}.numberIndicator__container.inverted span{color:#0A8276}.content-wrapper{display:none}";
 const IfxNumberIndicatorStyle0 = numberIndicatorCss;
 
 const NumberIndicator = class {
@@ -12,9 +12,17 @@ const NumberIndicator = class {
         index.registerInstance(this, hostRef);
         this.inverted = false;
     }
+    handleSlotChange(e) {
+        var _a, _b;
+        const slot = e.target;
+        const text = ((_b = (_a = slot.assignedNodes({ flatten: true })[0]) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+        const num = parseInt(text, 10);
+        this.displayValue = !isNaN(num) && num > 99 ? '99+' : num;
+    }
     render() {
-        return (index.h("div", { key: '9242365a87fe6a8cd08e43c411d41d271a031847', "aria-label": 'a number indicator', class: `numberIndicator__container ${this.inverted ? 'inverted' : ""}` }, index.h("span", { key: 'eee5b9ac92564d64aae37fcfce652e6e38c1df7f' }, index.h("slot", { key: '6b2d395ec7218f63faa727c90ec6b1b443df5599' }))));
+        return (index.h("div", { key: '9f5ee1cd3f4440fa94e4a15cea7446af2171637b', "aria-label": 'a number indicator', class: `numberIndicator__container ${this.inverted ? 'inverted' : ""}` }, index.h("span", { key: '8c2098536aa42b64c6e29a9294564797f790bb86', class: "content-wrapper" }, index.h("slot", { key: '5e976fdbdc026ab6d48dcfffbb6671f49f0bf3eb', onSlotchange: (e) => this.handleSlotChange(e) })), index.h("span", { key: '6543ce0cd2eff1d618d80d04be3a931b23f5a536' }, this.displayValue)));
     }
+    get el() { return index.getElement(this); }
 };
 NumberIndicator.style = IfxNumberIndicatorStyle0;
 

package/dist/cjs/ifx-number-indicator.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-number-indicator.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,4jBAA4jB,CAAC;AACxlB,iCAAe,kBAAkB;;MCOpB,eAAe;IAL5B;;QAMU,aAAQ,GAAY,KAAK,CAAC;KAWnC;IATC,MAAM;QACJ,QACEA,gFAAgB,oBAAoB,EAAC,KAAK,EAAE,8BAA8B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACzGA,qEACEA,oEAAQ,CACH,CACH,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/number-indicator/number-indicator.scss?tag=ifx-number-indicator&encapsulation=shadow","src/components/number-indicator/number-indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.numberIndicator__container {\n  display: inline-flex;\n  padding: 0px 4px;\n  max-height: 16px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n  background-color: tokens.$ifxColorOcean500;\n  font-family: var(--ifx-font-family);\n\n  & span {\n    color: tokens.$ifxColorBaseWhite;\n    text-align: center;\n    font-size: tokens.$ifxFontSizeS;\n    font-style: normal;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    line-height: 16px;\n  }\n\n  &.inverted {\n    background-color: tokens.$ifxColorBaseWhite;\n\n    & span {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n}","import { Component, h, Prop } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-number-indicator',\n  styleUrl: 'number-indicator.scss',\n  shadow: true\n})\nexport class NumberIndicator {\n  @Prop() inverted: boolean = false;\n\n  render() {\n    return (\n      <div aria-label='a number indicator' class={`numberIndicator__container ${this.inverted ? 'inverted' : \"\"}`}>\n        <span>\n          <slot />\n        </span>\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-number-indicator.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,0kBAA0kB,CAAC;AACtmB,iCAAe,kBAAkB;;MCOpB,eAAe;IAL5B;;QAQU,aAAQ,GAAY,KAAK,CAAC;KAmBnC;IAjBS,gBAAgB,CAAC,CAAQ;;QAC/B,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,MAAM,IAAI,GAAG,CAAA,MAAA,MAAA,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,0CAAE,WAAW,0CAAE,IAAI,EAAE,KAAI,EAAE,CAAC;QACjF,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,YAAY,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,GAAG,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,CAAC;KAC3D;IAED,MAAM;QACJ,QACEA,gFAAgB,oBAAoB,EAAC,KAAK,EAAE,8BAA8B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACzGA,mEAAM,KAAK,EAAC,iBAAiB,IAC3BA,mEAAM,YAAY,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,CAClD,EACPA,qEAAO,IAAI,CAAC,YAAY,CAAQ,CAC5B,EACN;KACH;;;;;;;","names":["h"],"sources":["src/components/number-indicator/number-indicator.scss?tag=ifx-number-indicator&encapsulation=shadow","src/components/number-indicator/number-indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.numberIndicator__container {\n  height: 16px;\n  display: inline-flex;\n  padding: 0; // Remove fixed padding\n  min-width: 16px; // Ensure minimum size for small numbers\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n  background-color: tokens.$ifxColorOcean500;\n\n  & span {\n    padding: 0 4px;\n    color: tokens.$ifxColorBaseWhite;\n    text-align: center;\n    font-size: tokens.$ifxFontSizeS;\n    font-style: normal;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    line-height: 16px;\n  }\n\n  &.inverted {\n    background-color: tokens.$ifxColorBaseWhite;\n\n    & span {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n}\n\n.content-wrapper { \n  display: none;\n}","import { Component, h, Prop, Element, State } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-number-indicator',\n  styleUrl: 'number-indicator.scss',\n  shadow: true\n})\nexport class NumberIndicator {\n  @Element() el;\n  @State() displayValue: string | number;\n  @Prop() inverted: boolean = false;\n\n  private handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const text = slot.assignedNodes({ flatten: true })[0]?.textContent?.trim() || '';\n    const num = parseInt(text, 10);\n    this.displayValue = !isNaN(num) && num > 99 ? '99+' : num;\n  }\n\n  render() {\n    return (\n      <div aria-label='a number indicator' class={`numberIndicator__container ${this.inverted ? 'inverted' : \"\"}`}>\n        <span class=\"content-wrapper\">\n          <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n        </span>\n        <span>{this.displayValue}</span>\n      </div>\n    );\n  }\n}"],"version":3}