@infineon/infineon-design-system-stencil 33.5.1--canary.1867.a435cc98156979ea6fc74d165a793008afc333b5.0 → 34.0.0--canary.1868.cd40a6d3fd1d626bd827183ec464ed539769887e.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 (119) hide show
  1. package/dist/cjs/ifx-indicator.cjs.entry.js +37 -0
  2. package/dist/cjs/ifx-indicator.cjs.entry.js.map +1 -0
  3. package/dist/cjs/ifx-link.cjs.entry.js +1 -1
  4. package/dist/cjs/ifx-modal.cjs.entry.js +2 -2
  5. package/dist/cjs/ifx-navbar-item.cjs.entry.js +5 -5
  6. package/dist/cjs/ifx-navbar-profile.cjs.entry.js +3 -3
  7. package/dist/cjs/ifx-navbar.cjs.entry.js +3 -3
  8. package/dist/cjs/ifx-notification.cjs.entry.js +2 -2
  9. package/dist/cjs/ifx-sidebar-item.cjs.entry.js +5 -5
  10. package/dist/cjs/ifx-sidebar-title.cjs.entry.js +1 -1
  11. package/dist/cjs/ifx-sidebar.cjs.entry.js +5 -5
  12. package/dist/cjs/index-c9480f70.js +4 -4
  13. package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
  14. package/dist/cjs/loader.cjs.js +1 -1
  15. package/dist/collection/collection-manifest.json +1 -1
  16. package/dist/collection/components/{number-indicator/number-indicator.css → indicator/indicator.css} +14 -8
  17. package/dist/collection/components/indicator/indicator.js +125 -0
  18. package/dist/collection/components/indicator/indicator.js.map +1 -0
  19. package/dist/collection/components/indicator/indicator.stories.js +44 -0
  20. package/dist/collection/components/indicator/indicator.stories.js.map +1 -0
  21. package/dist/collection/components/link/link.js +1 -1
  22. package/dist/collection/components/modal/modal.js +2 -2
  23. package/dist/collection/components/navigation/navbar/navbar-item.js +5 -5
  24. package/dist/collection/components/navigation/navbar/navbar-profile.js +3 -3
  25. package/dist/collection/components/navigation/navbar/navbar.js +3 -3
  26. package/dist/collection/components/navigation/sidebar/sidebar-item.js +5 -5
  27. package/dist/collection/components/navigation/sidebar/sidebar-title.js +1 -1
  28. package/dist/collection/components/navigation/sidebar/sidebar.js +5 -5
  29. package/dist/collection/components/notification/notification.js +2 -2
  30. package/dist/components/ifx-chip.js +1 -1
  31. package/dist/components/ifx-download.js +1 -1
  32. package/dist/components/ifx-filter-accordion.js +2 -8
  33. package/dist/components/ifx-filter-accordion.js.map +1 -1
  34. package/dist/components/ifx-icons-preview.js +2 -2
  35. package/dist/components/{ifx-number-indicator.d.ts → ifx-indicator.d.ts} +4 -4
  36. package/dist/components/ifx-indicator.js +57 -0
  37. package/dist/components/ifx-indicator.js.map +1 -0
  38. package/dist/components/ifx-link.js +1 -1
  39. package/dist/components/ifx-list.js +1 -1
  40. package/dist/components/ifx-modal.js +2 -2
  41. package/dist/components/ifx-navbar-item.js +7 -13
  42. package/dist/components/ifx-navbar-item.js.map +1 -1
  43. package/dist/components/ifx-navbar-profile.js +3 -3
  44. package/dist/components/ifx-navbar.js +3 -3
  45. package/dist/components/ifx-notification.js +1 -1
  46. package/dist/components/ifx-overview-table.js +4 -10
  47. package/dist/components/ifx-overview-table.js.map +1 -1
  48. package/dist/components/ifx-sidebar-item.js +7 -13
  49. package/dist/components/ifx-sidebar-item.js.map +1 -1
  50. package/dist/components/ifx-sidebar-title.js +1 -1
  51. package/dist/components/ifx-sidebar.js +5 -5
  52. package/dist/components/ifx-table.js +12 -18
  53. package/dist/components/ifx-table.js.map +1 -1
  54. package/dist/components/ifx-template.js +1 -1
  55. package/dist/components/ifx-templates-ui.js +2 -2
  56. package/dist/components/{p-f8ce0088.js → p-367583db.js} +2 -2
  57. package/dist/components/{p-f8ce0088.js.map → p-367583db.js.map} +1 -1
  58. package/dist/components/{p-23a993bc.js → p-b7fabe3a.js} +3 -9
  59. package/dist/components/p-b7fabe3a.js.map +1 -0
  60. package/dist/components/{p-d64e5297.js → p-c93b457e.js} +2 -2
  61. package/dist/components/{p-d64e5297.js.map → p-c93b457e.js.map} +1 -1
  62. package/dist/components/{p-681bd5b1.js → p-fdd33ff0.js} +4 -4
  63. package/dist/components/{p-681bd5b1.js.map → p-fdd33ff0.js.map} +1 -1
  64. package/dist/esm/ifx-indicator.entry.js +33 -0
  65. package/dist/esm/ifx-indicator.entry.js.map +1 -0
  66. package/dist/esm/ifx-link.entry.js +1 -1
  67. package/dist/esm/ifx-modal.entry.js +2 -2
  68. package/dist/esm/ifx-navbar-item.entry.js +5 -5
  69. package/dist/esm/ifx-navbar-profile.entry.js +3 -3
  70. package/dist/esm/ifx-navbar.entry.js +3 -3
  71. package/dist/esm/ifx-notification.entry.js +2 -2
  72. package/dist/esm/ifx-sidebar-item.entry.js +5 -5
  73. package/dist/esm/ifx-sidebar-title.entry.js +1 -1
  74. package/dist/esm/ifx-sidebar.entry.js +5 -5
  75. package/dist/esm/index-c77e25a0.js +4 -4
  76. package/dist/esm/infineon-design-system-stencil.js +1 -1
  77. package/dist/esm/loader.js +1 -1
  78. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  79. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
  80. package/dist/infineon-design-system-stencil/{p-7e55680a.entry.js → p-03fa0935.entry.js} +2 -2
  81. package/dist/infineon-design-system-stencil/{p-2fb84e5d.entry.js → p-1fa2e0b9.entry.js} +2 -2
  82. package/dist/infineon-design-system-stencil/{p-723cace7.entry.js → p-3e934879.entry.js} +2 -2
  83. package/dist/infineon-design-system-stencil/p-5ccb387d.entry.js +2 -0
  84. package/dist/infineon-design-system-stencil/p-5ccb387d.entry.js.map +1 -0
  85. package/dist/infineon-design-system-stencil/{p-5a5df7de.entry.js → p-6e425cdf.entry.js} +2 -2
  86. package/dist/infineon-design-system-stencil/{p-8a733ad7.entry.js → p-9da1bc82.entry.js} +2 -2
  87. package/dist/infineon-design-system-stencil/{p-c2cc54c0.entry.js → p-a689375c.entry.js} +2 -2
  88. package/dist/infineon-design-system-stencil/{p-7bbaff92.entry.js → p-ddd69ae4.entry.js} +2 -2
  89. package/dist/infineon-design-system-stencil/{p-007f032b.entry.js → p-e78cb27b.entry.js} +2 -2
  90. package/dist/infineon-design-system-stencil/{p-d5936509.entry.js → p-fcc575f4.entry.js} +2 -2
  91. package/dist/types/components/indicator/indicator.d.ts +12 -0
  92. package/dist/types/components/{number-indicator/number-indicator.stories.d.ts → indicator/indicator.stories.d.ts} +15 -2
  93. package/dist/types/components.d.ts +21 -15
  94. package/package.json +1 -1
  95. package/dist/cjs/ifx-number-indicator.cjs.entry.js +0 -31
  96. package/dist/cjs/ifx-number-indicator.cjs.entry.js.map +0 -1
  97. package/dist/collection/components/number-indicator/number-indicator.js +0 -59
  98. package/dist/collection/components/number-indicator/number-indicator.js.map +0 -1
  99. package/dist/collection/components/number-indicator/number-indicator.stories.js +0 -31
  100. package/dist/collection/components/number-indicator/number-indicator.stories.js.map +0 -1
  101. package/dist/components/ifx-number-indicator.js +0 -8
  102. package/dist/components/ifx-number-indicator.js.map +0 -1
  103. package/dist/components/p-23a993bc.js.map +0 -1
  104. package/dist/components/p-8824ca83.js +0 -45
  105. package/dist/components/p-8824ca83.js.map +0 -1
  106. package/dist/esm/ifx-number-indicator.entry.js +0 -27
  107. package/dist/esm/ifx-number-indicator.entry.js.map +0 -1
  108. package/dist/infineon-design-system-stencil/p-1a29bbb2.entry.js +0 -2
  109. package/dist/infineon-design-system-stencil/p-1a29bbb2.entry.js.map +0 -1
  110. package/dist/types/components/number-indicator/number-indicator.d.ts +0 -7
  111. /package/dist/infineon-design-system-stencil/{p-7e55680a.entry.js.map → p-03fa0935.entry.js.map} +0 -0
  112. /package/dist/infineon-design-system-stencil/{p-2fb84e5d.entry.js.map → p-1fa2e0b9.entry.js.map} +0 -0
  113. /package/dist/infineon-design-system-stencil/{p-723cace7.entry.js.map → p-3e934879.entry.js.map} +0 -0
  114. /package/dist/infineon-design-system-stencil/{p-5a5df7de.entry.js.map → p-6e425cdf.entry.js.map} +0 -0
  115. /package/dist/infineon-design-system-stencil/{p-8a733ad7.entry.js.map → p-9da1bc82.entry.js.map} +0 -0
  116. /package/dist/infineon-design-system-stencil/{p-c2cc54c0.entry.js.map → p-a689375c.entry.js.map} +0 -0
  117. /package/dist/infineon-design-system-stencil/{p-7bbaff92.entry.js.map → p-ddd69ae4.entry.js.map} +0 -0
  118. /package/dist/infineon-design-system-stencil/{p-007f032b.entry.js.map → p-e78cb27b.entry.js.map} +0 -0
  119. /package/dist/infineon-design-system-stencil/{p-d5936509.entry.js.map → p-fcc575f4.entry.js.map} +0 -0
@@ -1,45 +0,0 @@
1
- import { p as proxyCustomElement, H, h } from './p-2cc378b8.js';
2
-
3
- const numberIndicatorCss = ":root{font-family:\"Source Sans 3\", 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}";
4
- const IfxNumberIndicatorStyle0 = numberIndicatorCss;
5
-
6
- const NumberIndicator = /*@__PURE__*/ proxyCustomElement(class NumberIndicator extends H {
7
- constructor() {
8
- super();
9
- this.__registerHost();
10
- this.__attachShadow();
11
- this.inverted = false;
12
- }
13
- handleSlotChange(e) {
14
- var _a, _b;
15
- const slot = e.target;
16
- 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()) || '';
17
- const num = parseInt(text, 10);
18
- this.displayValue = !isNaN(num) && num > 99 ? '99+' : num;
19
- }
20
- render() {
21
- return (h("div", { key: '58d61ed67e2bde245bd9f23d68268c6355c1143b', "aria-label": 'a number indicator', class: `numberIndicator__container ${this.inverted ? 'inverted' : ""}` }, h("span", { key: '57418c0ed400f456998c13f3aa33294797e504ff', class: "content-wrapper" }, h("slot", { key: '02f34949db9ef3c4c187037ddf267521cb34fca6', onSlotchange: (e) => this.handleSlotChange(e) })), h("span", { key: '59ed49aae36eaf82ab054030d33fee42835a98b6' }, this.displayValue)));
22
- }
23
- get el() { return this; }
24
- static get style() { return IfxNumberIndicatorStyle0; }
25
- }, [1, "ifx-number-indicator", {
26
- "inverted": [4],
27
- "displayValue": [32]
28
- }]);
29
- function defineCustomElement() {
30
- if (typeof customElements === "undefined") {
31
- return;
32
- }
33
- const components = ["ifx-number-indicator"];
34
- components.forEach(tagName => { switch (tagName) {
35
- case "ifx-number-indicator":
36
- if (!customElements.get(tagName)) {
37
- customElements.define(tagName, NumberIndicator);
38
- }
39
- break;
40
- } });
41
- }
42
-
43
- export { NumberIndicator as N, defineCustomElement as d };
44
-
45
- //# sourceMappingURL=p-8824ca83.js.map
@@ -1 +0,0 @@
1
- {"file":"p-8824ca83.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,iiBAAiiB,CAAC;AAC7jB,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,QACE,0EAAgB,oBAAoB,EAAC,KAAK,EAAE,8BAA8B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACzG,6DAAM,KAAK,EAAC,iBAAiB,IAC3B,6DAAM,YAAY,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,CAClD,EACP,+DAAO,IAAI,CAAC,YAAY,CAAQ,CAC5B,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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}
@@ -1,27 +0,0 @@
1
- import { r as registerInstance, h, g as getElement } from './index-c77e25a0.js';
2
-
3
- const numberIndicatorCss = ":root{font-family:\"Source Sans 3\", 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}";
4
- const IfxNumberIndicatorStyle0 = numberIndicatorCss;
5
-
6
- const NumberIndicator = class {
7
- constructor(hostRef) {
8
- registerInstance(this, hostRef);
9
- this.inverted = false;
10
- }
11
- handleSlotChange(e) {
12
- var _a, _b;
13
- const slot = e.target;
14
- 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()) || '';
15
- const num = parseInt(text, 10);
16
- this.displayValue = !isNaN(num) && num > 99 ? '99+' : num;
17
- }
18
- render() {
19
- return (h("div", { key: '58d61ed67e2bde245bd9f23d68268c6355c1143b', "aria-label": 'a number indicator', class: `numberIndicator__container ${this.inverted ? 'inverted' : ""}` }, h("span", { key: '57418c0ed400f456998c13f3aa33294797e504ff', class: "content-wrapper" }, h("slot", { key: '02f34949db9ef3c4c187037ddf267521cb34fca6', onSlotchange: (e) => this.handleSlotChange(e) })), h("span", { key: '59ed49aae36eaf82ab054030d33fee42835a98b6' }, this.displayValue)));
20
- }
21
- get el() { return getElement(this); }
22
- };
23
- NumberIndicator.style = IfxNumberIndicatorStyle0;
24
-
25
- export { NumberIndicator as ifx_number_indicator };
26
-
27
- //# sourceMappingURL=ifx-number-indicator.entry.js.map
@@ -1 +0,0 @@
1
- {"file":"ifx-number-indicator.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,iiBAAiiB,CAAC;AAC7jB,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,QACE,0EAAgB,oBAAoB,EAAC,KAAK,EAAE,8BAA8B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACzG,6DAAM,KAAK,EAAC,iBAAiB,IAC3B,6DAAM,YAAY,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,CAClD,EACP,+DAAO,IAAI,CAAC,YAAY,CAAQ,CAC5B,EACN;KACH;;;;;;;","names":[],"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}
@@ -1,2 +0,0 @@
1
- import{r as n,h as e,g as t}from"./p-e6edf72d.js";const r=':root{font-family:"Source Sans 3", 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 a=r;const i=class{constructor(e){n(this,e);this.inverted=false}handleSlotChange(n){var e,t;const r=n.target;const a=((t=(e=r.assignedNodes({flatten:true})[0])===null||e===void 0?void 0:e.textContent)===null||t===void 0?void 0:t.trim())||"";const i=parseInt(a,10);this.displayValue=!isNaN(i)&&i>99?"99+":i}render(){return e("div",{key:"58d61ed67e2bde245bd9f23d68268c6355c1143b","aria-label":"a number indicator",class:`numberIndicator__container ${this.inverted?"inverted":""}`},e("span",{key:"57418c0ed400f456998c13f3aa33294797e504ff",class:"content-wrapper"},e("slot",{key:"02f34949db9ef3c4c187037ddf267521cb34fca6",onSlotchange:n=>this.handleSlotChange(n)})),e("span",{key:"59ed49aae36eaf82ab054030d33fee42835a98b6"},this.displayValue))}get el(){return t(this)}};i.style=a;export{i as ifx_number_indicator};
2
- //# sourceMappingURL=p-1a29bbb2.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["numberIndicatorCss","IfxNumberIndicatorStyle0","NumberIndicator","constructor","hostRef","this","inverted","handleSlotChange","e","slot","target","text","_b","_a","assignedNodes","flatten","textContent","trim","num","parseInt","displayValue","isNaN","render","h","key","class","onSlotchange"],"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}"],"mappings":"kDAAA,MAAMA,EAAqB,giBAC3B,MAAAC,EAAeD,E,MCOFE,EAAe,MAL5B,WAAAC,CAAAC,G,UAQUC,KAAAC,SAAoB,K,CAEpB,gBAAAC,CAAiBC,G,QACvB,MAAMC,EAAOD,EAAEE,OACf,MAAMC,IAAOC,GAAAC,EAAAJ,EAAKK,cAAc,CAAEC,QAAS,OAAQ,MAAE,MAAAF,SAAA,SAAAA,EAAEG,eAAW,MAAAJ,SAAA,SAAAA,EAAEK,SAAU,GAC9E,MAAMC,EAAMC,SAASR,EAAM,IAC3BN,KAAKe,cAAgBC,MAAMH,IAAQA,EAAM,GAAK,MAAQA,C,CAGxD,MAAAI,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,qBAAqBC,MAAO,8BAA8BpB,KAAKC,SAAW,WAAa,MACrGiB,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBACVF,EAAA,QAAAC,IAAA,2CAAME,aAAelB,GAAMH,KAAKE,iBAAiBC,MAEnDe,EAAA,QAAAC,IAAA,4CAAOnB,KAAKe,c","ignoreList":[]}
@@ -1,7 +0,0 @@
1
- export declare class NumberIndicator {
2
- el: any;
3
- displayValue: string | number;
4
- inverted: boolean;
5
- private handleSlotChange;
6
- render(): any;
7
- }