@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b577eb08ea34aa81e7d1054220d0f31ca92579a9.0 → 39.4.4-canary.0

package/dist/components/p-BNfoBOb0.js.map

@@ -0,0 +1 @@
+{"file":"p-BNfoBOb0.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,mvBAAmvB;;MCWzvB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;AASU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAwClC;AArCC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,aAAa,EAAE,MAAM,SAAS,CAAC;;;IAIlD,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,gBACN,IAAI,CAAC,SAAS,IAAI,SAAS,EACrC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAQ,CAAA,EACnG,IAAI,CAAC,OAAO,KAAK;eACb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,YAAY,EAAE,CAAE,CAAA,EAAA,EACtF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,mBAAmB,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,EAAA,CAAG,CAC3wC,CACA,CACF,CACJ;;IAIV,YAAY,GAAA;AACV,QAAA,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA,CAAE,KAAK;AACxB,cAAE;cACA,EAAE;;IAGR,aAAa,GAAA;AACX,QAAA,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,CAAA,QAAA,EAAW,IAAI,CAAC,YAAY,EAAE,CAAA,CAAE,CAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n  display: inline-block;\r\n\r\n}\r\n\r\n.spinner {\r\n  position: relative;\r\n  width: tokens.$ifxSize500;\r\n  height: tokens.$ifxSize500;\r\n\r\n}\r\n\r\n.spinner.s {\r\n  width: tokens.$ifxSize300;\r\n  height: tokens.$ifxSize300;\r\n}\r\n\r\n.border {\r\n  box-sizing: border-box;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  border: 4px solid transparent;\r\n  border-top-color: tokens.$ifxColorOcean500;\r\n  border-left-color: tokens.$ifxColorOcean500;\r\n  border-right-color: tokens.$ifxColorOcean500;\r\n  border-top-left-radius: 1px;\r\n  border-top-right-radius: 1px;\r\n  border-radius: 50%;\r\n  animation: spin 2s linear infinite;\r\n\r\n  &.inverted {\r\n    border-top-color: tokens.$ifxColorBaseWhite;\r\n    border-left-color: tokens.$ifxColorBaseWhite;\r\n    border-right-color: tokens.$ifxColorBaseWhite;\r\n  }\r\n}\r\n\r\n.semiconductor {\r\n  width: 100%;\r\n  height: 100%;\r\n  animation: spin 2s linear infinite;\r\n\r\n  & svg {\r\n    fill: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  &.inverted {\r\n    & svg {\r\n      fill: tokens.$ifxColorBaseWhite;\r\n    }\r\n  }\r\n\r\n  &.s {\r\n    & svg {\r\n      width: tokens.$ifxSize300;\r\n      height: tokens.$ifxSize300;\r\n    }\r\n  }\r\n}\r\n\r\n\r\n@keyframes spin {\r\n  0% {\r\n    transform: rotate(0deg);\r\n  }\r\n\r\n  100% {\r\n    transform: rotate(360deg);\r\n  }\r\n}","import { Component, h, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n \r\n@Component({\r\n  tag: 'ifx-spinner',\r\n  styleUrl: 'spinner.scss',\r\n  shadow: true,\r\n})\r\nexport class Spinner {\r\n  @Element() el;\r\n  @Prop() size: string;\r\n  @Prop() variant: string;\r\n  @Prop() inverted: boolean = false;\r\n  @Prop() ariaLabel: string | null;\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-spinner', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div role=\"status\" \r\n      aria-label={this.ariaLabel || \"Loading\"}\r\n        class={this.getClassNames()}>\r\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\r\n        {this.variant === 'brand'\r\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\r\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <g id=\"spinner/conductor\">\r\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\r\n              </g>\r\n            </svg>\r\n          </div>}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  getSizeClass() {\r\n    return `${this.size}` === \"s\"\r\n      ? \"s\"\r\n      : \"\";\r\n  }\r\n\r\n  getClassNames() {\r\n    return classNames(\r\n      'spinner',\r\n      this.size && `spinner ${this.getSizeClass()}`\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-C12r4j5b.js → p-BODyHBnq.js}

@@ -45,7 +45,7 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends H {
         }
     }
     render() {
-        return (h("a", { key: '8b3aaa77c9de243e5a6c8c25eb1173ddb4cb0aef', tabindex: "0", role: "link", "aria-label": this.ariaLabel, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '5ed92a06a4564b6c94324117edc49420a2dd21be' })));
+        return (h("a", { key: '77c50e018c3f0c00e93b95dcc72107290a453270', tabindex: "0", role: "link", "aria-label": this.ariaLabel, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: 'e3d7984a41848a749fb3b7fee28c5b1ec41fe27e' })));
     }
     getSizeClass() {
         const small = this.size === 's' ? 'small' : null;
@@ -122,6 +122,6 @@ function defineCustomElement() {
 }
 
 export { Link as L, defineCustomElement as d };
-//# sourceMappingURL=p-C12r4j5b.js.map
+//# sourceMappingURL=p-BODyHBnq.js.map
 
-//# sourceMappingURL=p-C12r4j5b.js.map
+//# sourceMappingURL=p-BODyHBnq.js.map

package/dist/components/p-BODyHBnq.js.map

@@ -0,0 +1 @@
+{"file":"p-BODyHBnq.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: inline-flex;\r\n}\r\n\r\n.link {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  font-weight: 400;\r\n  font-size: tokens.$ifxFontSizeM;\r\n  text-decoration: none;\r\n  color: tokens.$ifxColorOcean500;\r\n  gap: tokens.$ifxSpace100;\r\n  line-height: 1.6;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n  &:hover { \r\n    cursor: pointer;\r\n  }\r\n\r\n  &:focus {\r\n    outline-width: 2px;\r\n    outline-style: solid;\r\n    outline-color: #0A8276;\r\n    outline-offset: 4px;\r\n    border-radius: 3px;\r\n  }\r\n\r\n  &.bold {\r\n    font-weight: tokens.$ifxFontWeightSemibold;\r\n\r\n    &:hover {\r\n      text-decoration: underline;\r\n    }\r\n\r\n    &:active {\r\n      color: #08665C;\r\n      font-style: normal;\r\n      font-weight: 600;\r\n      text-decoration: underline;\r\n    }\r\n\r\n  }\r\n\r\n  &.underlined {\r\n    text-decoration: underline;\r\n    text-decoration-color: tokens.$ifxColorOcean500;\r\n    color: #1D1D1D;\r\n    text-underline-offset: 8px;\r\n    \r\n    &:hover {\r\n      color: tokens.$ifxColorOcean500;;\r\n    }\r\n    \r\n    &:active {\r\n      color: #0A8276;\r\n    }\r\n\r\n    &:disabled,\r\n    &.disabled {\r\n      text-decoration-color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n\r\n  &.title {\r\n    text-decoration: none;\r\n    font-weight: tokens.$ifxFontWeightSemibold;\r\n    color: #1D1D1D;\r\n\r\n    &:hover {\r\n      color: tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:active {\r\n      color: #08665C;\r\n    }\r\n  }\r\n\r\n  &.menu {\r\n    font-weight: 400;\r\n    font-style: normal;\r\n    line-height: 26px;\r\n    color: #1D1D1D;\r\n\r\n    &:hover {\r\n      color: tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:active {\r\n      color: #08665C;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: tokens.$ifxFontSizeS;\r\n  }\r\n\r\n  &.medium {\r\n    font-size: tokens.$ifxFontSizeM;\r\n  }\r\n\r\n  &.large {\r\n    font-size: tokens.$ifxFontSizeL;\r\n  }\r\n\r\n  &.extraLarge {\r\n    font-size: tokens.$ifxFontSizeXl;\r\n  }\r\n\r\n  &.underline {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:disabled,\r\n  &.disabled {\r\n    color: tokens.$ifxColorEngineering300;\r\n    cursor: default;\r\n    pointer-events:  none;\r\n  }\r\n\r\n}","import { Component, Prop, h, State, Element } from \"@stencil/core\";\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n \r\n@Component({\r\n  tag: 'ifx-link',\r\n  styleUrl: 'link.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class Link {\r\n  @Element() el;\r\n  @Prop() href: string = undefined;\r\n  @Prop() target: string = '_self';\r\n  @Prop() variant: string = 'bold';\r\n  @Prop() size: string;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() download: string;\r\n  @Prop() ariaLabel: string | null;\r\n  @State() internalHref: string ='';\r\n  @State() internalTarget: string = '';\r\n  @State() internalVariant: string = '';\r\n\r\n  setInternalStates() {\r\n    if(this.href){\r\n      this.internalHref = this.href.trim();\r\n    }else{\r\n      this.internalHref = undefined;\r\n    }\r\n    this.internalTarget = this.target.trim();\r\n    this.internalVariant = this.variant.trim().toLowerCase();\r\n  }\r\n\r\n  componentWillRender(){\r\n    this.setInternalStates();\r\n  }\r\n\r\n  handleKeyDown(event: KeyboardEvent) {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n    } else if (event.key === 'Enter') {\r\n      event.preventDefault();\r\n    }\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-link', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <a\r\n      tabindex=\"0\"\r\n        role=\"link\"\r\n        aria-label={this.ariaLabel}\r\n        aria-disabled={this.disabled || !this.internalHref}\r\n        href={this.disabled ? undefined : this.internalHref}\r\n        download={this.download}\r\n        target={this.internalTarget}\r\n        class={this.linkClassNames()}>\r\n        <slot></slot>\r\n      </a>)\r\n  }\r\n\r\n  getSizeClass() {\r\n    const small = this.size === 's' ? 'small' : null;\r\n    const medium = this.size === 'm' ? 'medium' : null;\r\n    const large = this.size === 'l' ? 'large' : null;\r\n    const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\r\n\r\n    if (small) {\r\n      return small;\r\n    } else if (medium) {\r\n      return medium;\r\n    } else if (large) {\r\n      return large;\r\n    } else if (extraLarge && this.internalVariant === 'underlined') {\r\n      return 'large';\r\n    } else if (extraLarge && this.internalVariant !== 'underlined') {\r\n      return extraLarge;\r\n    } else return \"\";\r\n  }\r\n\r\n  getVariantClass() {\r\n    const bold = this.internalVariant === 'bold' ? 'bold' : null;\r\n    const title = this.internalVariant === 'title' ? 'title' : null;\r\n    const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\r\n    const menu = this.internalVariant === 'menu' ? 'menu' : null;\r\n\r\n    if (bold) {\r\n      return bold\r\n    } else if (title) {\r\n      return title;\r\n    } else if (underlined) {\r\n      return underlined;\r\n    } else if (menu) {\r\n      return menu;\r\n    } else return bold;\r\n  }\r\n\r\n  linkClassNames() {\r\n    return classNames(\r\n      'link',\r\n      'primary',\r\n      this.getVariantClass(),\r\n      this.getSizeClass(),\r\n      this.disabled ? 'disabled' : '',\r\n    );\r\n  }\r\n}"],"version":3}

package/dist/components/{p-4wfkxGlJ.js → p-BVontUD4.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$2 } from './p-BQj9WQQe.js';
-import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$2 } from './p-B61ip_5M.js';
+import { d as defineCustomElement$1 } from './p-BnjY2AJX.js';
 
 const chipItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem \"Source Sans 3\"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}";
 
@@ -65,9 +65,9 @@ const ChipItem = /*@__PURE__*/ proxyCustomElement(class ChipItem extends H {
         this.handleSelectedState();
     }
     render() {
-        return (h("div", { key: '4d5ace01c02658ed46fbf42c36138a06c3d46049', class: `chip-item chip-item--${this.chipState.size} 
+        return (h("div", { key: '74bd25551e6ac6bb2ff4d53ffd38120c8941cbcb', class: `chip-item chip-item--${this.chipState.size} 
                     chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`, tabIndex: 0, onClick: () => { this.handleItemClick(); }, onKeyDown: (e) => { this.handleItemKeyDown(e); }, role: "option", "aria-selected": this.selected.toString() }, this.chipState.variant === 'multi' &&
-            h("ifx-checkbox", { key: 'bf1af2aaf0944351eb33ace8c704bbb4973951d6', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '50347975f1554b7a02ef2bde34750b361daad549', class: 'chip-item__label' }, " ", h("slot", { key: '9667dd32c70e5f4a7946499f828883efb10caff2' }), " "), h("div", { key: 'f2fcab283b717837bc8b6c09b6b3c6c72675e40c', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: '84e489e9a638f2165c436b10bea8d826ae6db11c', icon: 'check-16' }, " "))));
+            h("ifx-checkbox", { key: 'e830188223a4a73ccf10bc72af789bb7ea11cc02', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '9c1727d6a29a63102c7e1c2b58c9157e94de6bc3', class: 'chip-item__label' }, " ", h("slot", { key: '45baf75c97c6f4103d8c1ade78e9fafe105c13e9' }), " "), h("div", { key: '265869ea8579f7db834523f3f3c43fee935d1649', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: '39fd063f3b5fb6ef3ca146108067b68c33e71697', icon: 'check-16' }, " "))));
     }
     get chipItem() { return this; }
     static get watchers() { return {
@@ -106,6 +106,6 @@ function defineCustomElement() {
 }
 
 export { ChipItem as C, defineCustomElement as d };
-//# sourceMappingURL=p-4wfkxGlJ.js.map
+//# sourceMappingURL=p-BVontUD4.js.map
 
-//# sourceMappingURL=p-4wfkxGlJ.js.map
+//# sourceMappingURL=p-BVontUD4.js.map

package/dist/components/p-BVontUD4.js.map

@@ -0,0 +1 @@
+{"file":"p-BVontUD4.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,wqBAAwqB;;MCgB/qB,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AANrB,IAAA,WAAA,GAAA;;;;;AAWQ,QAAA,IAAK,CAAA,KAAA,GAAW,SAAS;AACzB,QAAA,IAAA,CAAA,SAAS,GAAc,EAAE,qBAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;AACvD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA4FhE;AAzFD,IAAA,mBAAmB,CAAC,KAAuC,EAAA;QACxD,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,QAAQ,EAAE;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAgC;;AAErD,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,aAAa,KAAK,MAAM,CAAC,aAAa,EAAE;AAClF,gBAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;;;IAMhC,gBAAgB,CAAC,QAAiB,EAAE,QAAiB,EAAA;AAClD,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;;AAEvB,YAAA,IAAI,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAC;gBACrC,IAAI,CAAC,0BAA0B,EAAE;;iBAC9B;AACH,gBAAA,IAAI,CAAC,SAAS,CAAC,qBAAqB,GAAG,IAAI;;;;IAKtD,YAAY,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAmB;;IAG3C,mBAAmB,GAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;;IAIjC,0BAA0B,CAAC,gBAAyB,IAAI,EAAA;QACrD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,aAAa;AAClC,YAAA,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG;AACvB,YAAA,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE;YAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;IAG/C,eAAe,GAAA;QACZ,IAAI,CAAC,mBAAmB,EAAE;;AAG7B,IAAA,iBAAiB,CAAC,KAAoB,EAAA;AACnC,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YAClD,IAAI,CAAC,mBAAmB,EAAE;;;IAIjC,mBAAmB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,YAAA,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC;;;IAK7C,iBAAiB,GAAA;;QAEd,IAAI,CAAC,mBAAmB,EAAE;;IAG7B,MAAM,GAAA;AACH,QAAA,QACI,4DAAK,KAAK,EAAE,CAAA,qBAAA,EAAwB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAA;AAC7B,+BAAA,EAAA,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,MAAM,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAChG,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,QAAO,IAAI,CAAC,eAAe,EAAE,CAAA,EAAC,EACvC,SAAS,EAAE,CAAC,CAAC,OAAM,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAA,EAAC,EAC7C,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAA,EAGnC,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,OAAO;AAClC,YAAA,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,OAAO,EAAE,IAAI,CAAC,QAAQ,EAChC,QAAQ,EAAE,EAAE,EACZ,IAAI,EAAC,GAAG,EACG,CAAA,EAGnB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,OAAE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAAO,GAAA,CAAA,EAG9C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACtC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,UAAU,QAAa,CACpC,CAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.chip-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: tokens.$ifxSpace100;\r\n    \r\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n    \r\n    user-select: none;\r\n    \r\n    transition: all 100ms ease;\r\n    transition-property: background, color;\r\n    \r\n    &:hover {\r\n        cursor: pointer;\r\n        \r\n        background-color: tokens.$ifxColorEngineering200;\r\n    }\r\n    \r\n    &:active {\r\n        background-color: tokens.$ifxColorEngineering300;\r\n    }\r\n\r\n    &:focus {\r\n        outline: 2px solid tokens.$ifxColorOcean500;\r\n    }\r\n    \r\n    &.chip-item--large {\r\n        font: tokens.$ifxBodyBody03;\r\n    }\r\n    \r\n    &.chip-item--small {\r\n        font: tokens.$ifxBodyBody04;\r\n    }\r\n\r\n    &.chip-item--selected {\r\n        color: tokens.$ifxColorOcean500;\r\n\r\n        .chip-item__selected-indicator {\r\n            display: block;\r\n        }\r\n    }\r\n}\r\n\r\n.chip-item__selected-indicator {\r\n    display: none;\r\n    \r\n    margin-left: auto;\r\n}\r\n\r\n","import { h,\r\n    Component,\r\n    Element,\r\n    Event,\r\n    EventEmitter, \r\n    Listen,\r\n    Prop, \r\n    Watch } from '@stencil/core';\r\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\r\n\r\n@Component({\r\ntag: 'ifx-chip-item',\r\nstyleUrl: 'chip-item.scss',\r\nshadow: true\r\n})\r\n\r\nexport class ChipItem {\r\n@Element() chipItem: HTMLIfxChipItemElement;\r\n\r\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\r\n\r\n@Prop() value: string = undefined;\r\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \r\n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\r\n\r\n@Listen('ifxChipItemSelect', { target: 'body' })\r\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\r\n   if (this.chipState.variant === 'single') {\r\n       const target = event.target as HTMLIfxChipItemElement;\r\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\r\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\r\n           this.selected = false;\r\n       }\r\n   }\r\n} \r\n\r\n@Watch('selected')\r\nvalidateSelected(newValue: boolean, oldValue: boolean) {\r\n   if (newValue !== oldValue) {\r\n       /* Do not emit if ChipState does not allow. */\r\n       if (this.chipState.emitIfxChipItemSelect){\r\n           this.emitIfxChipItemSelectEvent();\r\n       } else {\r\n           this.chipState.emitIfxChipItemSelect = true;\r\n       }\r\n   }\r\n} \r\n\r\ngetItemLabel(): string {\r\n   return this.chipItem.innerText as string;\r\n}\r\n\r\ntoggleItemSelection() {\r\n   this.selected = !this.selected;\r\n}\r\n   \r\n\r\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\r\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\r\n                           key: this.chipState.key,\r\n                           label: this.getItemLabel(), \r\n                           selected: this.selected, \r\n                           value: this.value });\r\n}\r\n\r\nhandleItemClick() {\r\n   this.toggleItemSelection();\r\n}\r\n\r\nhandleItemKeyDown(event: KeyboardEvent) {\r\n   if (event.code === 'Enter' || event.code === 'Space') {\r\n       this.toggleItemSelection();\r\n   }\r\n}\r\n\r\nhandleSelectedState() {\r\n   if (this.selected) {\r\n       this.emitIfxChipItemSelectEvent(false);\r\n   }\r\n}\r\n\r\n\r\ncomponentWillLoad() {\r\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\r\n   this.handleSelectedState();\r\n}\r\n\r\nrender() {\r\n   return (\r\n       <div class={`chip-item chip-item--${this.chipState.size} \r\n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \r\n           tabIndex={0}\r\n           onClick={() => {this.handleItemClick()}}\r\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\r\n           role=\"option\"\r\n           aria-selected={this.selected.toString()}>    \r\n           {/* Checkbox; renders only in 'multi' variant. */}\r\n           { \r\n               this.chipState.variant === 'multi' &&\r\n               <ifx-checkbox checked={this.selected}\r\n                   tabIndex={-1} \r\n                   size='s'>\r\n               </ifx-checkbox>\r\n           }\r\n\r\n           <div class='chip-item__label'> <slot /> </div>\r\n\r\n           {/* Selected indicator only visible in 'single' variant. */}\r\n           <div class='chip-item__selected-indicator'> \r\n               <ifx-icon icon='check-16'> </ifx-icon> \r\n           </div>\r\n\r\n       </div>\r\n   );\r\n}\r\n}"],"version":3}

package/dist/components/{p-DhNY6ZGA.js → p-BnjY2AJX.js}

@@ -1340,7 +1340,7 @@ const InfineonIconStencil = /*@__PURE__*/ proxyCustomElement(class InfineonIconS
         }
     }
     render() {
-        return (h(Host, { key: 'e5cab8793c55383813b83e97038545526070d0a7' }, this.constructIcon()));
+        return (h(Host, { key: 'a1e7e069aeae0646c83f65b30aa43ba9454cec52' }, this.constructIcon()));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -1369,6 +1369,6 @@ function defineCustomElement() {
 }
 
 export { InfineonIconStencil as I, defineCustomElement as d, icons as i };
-//# sourceMappingURL=p-DhNY6ZGA.js.map
+//# sourceMappingURL=p-BnjY2AJX.js.map
 
-//# sourceMappingURL=p-DhNY6ZGA.js.map
+//# sourceMappingURL=p-BnjY2AJX.js.map