@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.
- package/dist/cjs/ifx-indicator.cjs.entry.js +37 -0
- package/dist/cjs/ifx-indicator.cjs.entry.js.map +1 -0
- package/dist/cjs/ifx-link.cjs.entry.js +1 -1
- package/dist/cjs/ifx-modal.cjs.entry.js +2 -2
- package/dist/cjs/ifx-navbar-item.cjs.entry.js +5 -5
- package/dist/cjs/ifx-navbar-profile.cjs.entry.js +3 -3
- package/dist/cjs/ifx-navbar.cjs.entry.js +3 -3
- package/dist/cjs/ifx-notification.cjs.entry.js +2 -2
- package/dist/cjs/ifx-sidebar-item.cjs.entry.js +5 -5
- package/dist/cjs/ifx-sidebar-title.cjs.entry.js +1 -1
- package/dist/cjs/ifx-sidebar.cjs.entry.js +5 -5
- package/dist/cjs/index-c9480f70.js +4 -4
- package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/{number-indicator/number-indicator.css → indicator/indicator.css} +14 -8
- package/dist/collection/components/indicator/indicator.js +125 -0
- package/dist/collection/components/indicator/indicator.js.map +1 -0
- package/dist/collection/components/indicator/indicator.stories.js +44 -0
- package/dist/collection/components/indicator/indicator.stories.js.map +1 -0
- package/dist/collection/components/link/link.js +1 -1
- package/dist/collection/components/modal/modal.js +2 -2
- package/dist/collection/components/navigation/navbar/navbar-item.js +5 -5
- package/dist/collection/components/navigation/navbar/navbar-profile.js +3 -3
- package/dist/collection/components/navigation/navbar/navbar.js +3 -3
- package/dist/collection/components/navigation/sidebar/sidebar-item.js +5 -5
- package/dist/collection/components/navigation/sidebar/sidebar-title.js +1 -1
- package/dist/collection/components/navigation/sidebar/sidebar.js +5 -5
- package/dist/collection/components/notification/notification.js +2 -2
- package/dist/components/ifx-chip.js +1 -1
- package/dist/components/ifx-download.js +1 -1
- package/dist/components/ifx-filter-accordion.js +2 -8
- package/dist/components/ifx-filter-accordion.js.map +1 -1
- package/dist/components/ifx-icons-preview.js +2 -2
- package/dist/components/{ifx-number-indicator.d.ts → ifx-indicator.d.ts} +4 -4
- package/dist/components/ifx-indicator.js +57 -0
- package/dist/components/ifx-indicator.js.map +1 -0
- package/dist/components/ifx-link.js +1 -1
- package/dist/components/ifx-list.js +1 -1
- package/dist/components/ifx-modal.js +2 -2
- package/dist/components/ifx-navbar-item.js +7 -13
- package/dist/components/ifx-navbar-item.js.map +1 -1
- package/dist/components/ifx-navbar-profile.js +3 -3
- package/dist/components/ifx-navbar.js +3 -3
- package/dist/components/ifx-notification.js +1 -1
- package/dist/components/ifx-overview-table.js +4 -10
- package/dist/components/ifx-overview-table.js.map +1 -1
- package/dist/components/ifx-sidebar-item.js +7 -13
- package/dist/components/ifx-sidebar-item.js.map +1 -1
- package/dist/components/ifx-sidebar-title.js +1 -1
- package/dist/components/ifx-sidebar.js +5 -5
- package/dist/components/ifx-table.js +12 -18
- package/dist/components/ifx-table.js.map +1 -1
- package/dist/components/ifx-template.js +1 -1
- package/dist/components/ifx-templates-ui.js +2 -2
- package/dist/components/{p-f8ce0088.js → p-367583db.js} +2 -2
- package/dist/components/{p-f8ce0088.js.map → p-367583db.js.map} +1 -1
- package/dist/components/{p-23a993bc.js → p-b7fabe3a.js} +3 -9
- package/dist/components/p-b7fabe3a.js.map +1 -0
- package/dist/components/{p-d64e5297.js → p-c93b457e.js} +2 -2
- package/dist/components/{p-d64e5297.js.map → p-c93b457e.js.map} +1 -1
- package/dist/components/{p-681bd5b1.js → p-fdd33ff0.js} +4 -4
- package/dist/components/{p-681bd5b1.js.map → p-fdd33ff0.js.map} +1 -1
- package/dist/esm/ifx-indicator.entry.js +33 -0
- package/dist/esm/ifx-indicator.entry.js.map +1 -0
- package/dist/esm/ifx-link.entry.js +1 -1
- package/dist/esm/ifx-modal.entry.js +2 -2
- package/dist/esm/ifx-navbar-item.entry.js +5 -5
- package/dist/esm/ifx-navbar-profile.entry.js +3 -3
- package/dist/esm/ifx-navbar.entry.js +3 -3
- package/dist/esm/ifx-notification.entry.js +2 -2
- package/dist/esm/ifx-sidebar-item.entry.js +5 -5
- package/dist/esm/ifx-sidebar-title.entry.js +1 -1
- package/dist/esm/ifx-sidebar.entry.js +5 -5
- package/dist/esm/index-c77e25a0.js +4 -4
- package/dist/esm/infineon-design-system-stencil.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/{p-7e55680a.entry.js → p-03fa0935.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-2fb84e5d.entry.js → p-1fa2e0b9.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-723cace7.entry.js → p-3e934879.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-5ccb387d.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-5ccb387d.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-5a5df7de.entry.js → p-6e425cdf.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-8a733ad7.entry.js → p-9da1bc82.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-c2cc54c0.entry.js → p-a689375c.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-7bbaff92.entry.js → p-ddd69ae4.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-007f032b.entry.js → p-e78cb27b.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-d5936509.entry.js → p-fcc575f4.entry.js} +2 -2
- package/dist/types/components/indicator/indicator.d.ts +12 -0
- package/dist/types/components/{number-indicator/number-indicator.stories.d.ts → indicator/indicator.stories.d.ts} +15 -2
- package/dist/types/components.d.ts +21 -15
- package/package.json +1 -1
- package/dist/cjs/ifx-number-indicator.cjs.entry.js +0 -31
- package/dist/cjs/ifx-number-indicator.cjs.entry.js.map +0 -1
- package/dist/collection/components/number-indicator/number-indicator.js +0 -59
- package/dist/collection/components/number-indicator/number-indicator.js.map +0 -1
- package/dist/collection/components/number-indicator/number-indicator.stories.js +0 -31
- package/dist/collection/components/number-indicator/number-indicator.stories.js.map +0 -1
- package/dist/components/ifx-number-indicator.js +0 -8
- package/dist/components/ifx-number-indicator.js.map +0 -1
- package/dist/components/p-23a993bc.js.map +0 -1
- package/dist/components/p-8824ca83.js +0 -45
- package/dist/components/p-8824ca83.js.map +0 -1
- package/dist/esm/ifx-number-indicator.entry.js +0 -27
- package/dist/esm/ifx-number-indicator.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-1a29bbb2.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-1a29bbb2.entry.js.map +0 -1
- package/dist/types/components/number-indicator/number-indicator.d.ts +0 -7
- /package/dist/infineon-design-system-stencil/{p-7e55680a.entry.js.map → p-03fa0935.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-2fb84e5d.entry.js.map → p-1fa2e0b9.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-723cace7.entry.js.map → p-3e934879.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-5a5df7de.entry.js.map → p-6e425cdf.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-8a733ad7.entry.js.map → p-9da1bc82.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-c2cc54c0.entry.js.map → p-a689375c.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-7bbaff92.entry.js.map → p-ddd69ae4.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-007f032b.entry.js.map → p-e78cb27b.entry.js.map} +0 -0
- /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":[]}
|
/package/dist/infineon-design-system-stencil/{p-7e55680a.entry.js.map → p-03fa0935.entry.js.map}
RENAMED
File without changes
|
/package/dist/infineon-design-system-stencil/{p-2fb84e5d.entry.js.map → p-1fa2e0b9.entry.js.map}
RENAMED
File without changes
|
/package/dist/infineon-design-system-stencil/{p-723cace7.entry.js.map → p-3e934879.entry.js.map}
RENAMED
File without changes
|
/package/dist/infineon-design-system-stencil/{p-5a5df7de.entry.js.map → p-6e425cdf.entry.js.map}
RENAMED
File without changes
|
/package/dist/infineon-design-system-stencil/{p-8a733ad7.entry.js.map → p-9da1bc82.entry.js.map}
RENAMED
File without changes
|
/package/dist/infineon-design-system-stencil/{p-c2cc54c0.entry.js.map → p-a689375c.entry.js.map}
RENAMED
File without changes
|
/package/dist/infineon-design-system-stencil/{p-7bbaff92.entry.js.map → p-ddd69ae4.entry.js.map}
RENAMED
File without changes
|
/package/dist/infineon-design-system-stencil/{p-007f032b.entry.js.map → p-e78cb27b.entry.js.map}
RENAMED
File without changes
|
/package/dist/infineon-design-system-stencil/{p-d5936509.entry.js.map → p-fcc575f4.entry.js.map}
RENAMED
File without changes
|