@infineon/infineon-design-system-stencil 33.1.1--canary.1818.59e7a8854f2402b8ff5f692db1b6747cdf09ddfd.0 → 33.1.1--canary.1827.0eabedc97f4e514129bb536649b389971d5464b1.0

package/dist/infineon-design-system-stencil/p-db9bdd7d.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as o,g as i}from"./p-e6edf72d.js";const s=':root{font-family:"Source Sans 3", sans-serif}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:"Source Sans 3"}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.icon{margin-right:4px}';const n=s;const d=class{constructor(o){e(this,o);this.ifxDropdownItem=t(this,"ifxDropdownItem",7);this.href="";this.target="_self";this.hide=false;this.size="l"}handleMenuSize(e){this.size=e.detail}handleEventEmission(){this.ifxDropdownItem.emit(this.el.textContent)}render(){let e=this.href?{href:this.href,target:this.target}:{};return o("a",Object.assign({key:"5ec61a932268bd6bc279546d2718347deec616f7"},e,{onClick:()=>this.handleEventEmission(),class:`dropdown-item ${this.size==="s"?"small":""} ${this.hide?"hide":""}`}),this.icon&&o("ifx-icon",{key:"f8644bd37348ec718f54657faaf912d48b2b696d",class:"icon",icon:this.icon}),o("span",{key:"c3643953f6fcf084a3d033df50b79bc8de562640"},o("slot",{key:"624c93095768745e9af06b60f7a7f5fcdbe0d05e"})))}get el(){return i(this)}};d.style=n;export{d as ifx_dropdown_item};
-//# sourceMappingURL=p-db9bdd7d.entry.js.map

package/dist/infineon-design-system-stencil/p-db9bdd7d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownItemCss","IfxDropdownItemStyle0","DropdownItem","constructor","hostRef","this","href","target","hide","size","handleMenuSize","event","detail","handleEventEmission","ifxDropdownItem","emit","el","textContent","render","hrefAttr","h","Object","assign","key","onClick","class","icon"],"sources":["src/components/dropdown/dropdown-item/dropdown-item.scss?tag=ifx-dropdown-item&encapsulation=shadow","src/components/dropdown/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-item {\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n  gap: tokens.$ifxSize100;\n  font-family: tokens.$ifxFontFamilyBody;\n\n  &.hide {\n    display: none;\n  }\n\n  & span {\n    color: tokens.$ifxColorBaseBlack;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    /* 150% */\n  }\n\n  &.small {\n    & span {\n      font-size: 14px;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &:active {\n    background-color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.icon {\n  margin-right: 4px;\n}","// dropdown-item.tsx\nimport { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true\n})\n\nexport class DropdownItem {\n  @Prop() icon: string;\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\"\n  @Prop() hide: boolean = false;\n  @State() size: string = 'l'\n  @Event() ifxDropdownItem: EventEmitter;\n  @Element() el;\n\n  @Listen('menuSize', { target: 'body' })\n  handleMenuSize(event: CustomEvent) {\n    this.size = event.detail;\n  }\n\n  handleEventEmission() {\n    this.ifxDropdownItem.emit(this.el.textContent)\n  }\n\n  render() {\n    let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n    return (\n      <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n        {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n        <span>\n          <slot />\n        </span>\n      </a>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAkB,0eACxB,MAAAC,EAAeD,E,MCQFE,EAAY,MANzB,WAAAC,CAAAC,G,2DAQUC,KAAAC,KAAe,GACfD,KAAAE,OAAiB,QACjBF,KAAAG,KAAgB,MACfH,KAAAI,KAAe,G,CAKxB,cAAAC,CAAeC,GACbN,KAAKI,KAAOE,EAAMC,M,CAGpB,mBAAAC,GACER,KAAKS,gBAAgBC,KAAKV,KAAKW,GAAGC,Y,CAGpC,MAAAC,GACE,IAAIC,EAAWd,KAAKC,KAAO,CAAEA,KAAMD,KAAKC,KAAMC,OAAQF,KAAKE,QAAW,GACtE,OACEa,EAAA,IAAAC,OAAAC,OAAA,CAAAC,IAAA,4CAAOJ,EAAQ,CAAEK,QAAS,IAAMnB,KAAKQ,sBAAuBY,MAAO,iBAAiBpB,KAAKI,OAAS,IAAM,QAAU,MAAMJ,KAAKG,KAAO,OAAS,OAC1IH,KAAKqB,MAAQN,EAAA,YAAAG,IAAA,2CAAUE,MAAM,OAAOC,KAAMrB,KAAKqB,OAChDN,EAAA,QAAAG,IAAA,4CACEH,EAAA,QAAAG,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-dba0c2d2.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t}from"./p-e6edf72d.js";const r=':root{font-family:"Source Sans 3", sans-serif}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem "Source Sans 3"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#8D8786;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem "Source Sans 3"}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem "Source Sans 3"}.step-wrapper .step-label :hover{color:#8D8786}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#8D8786}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#8D8786}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#8D8786}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#8D8786}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#8D8786}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#8D8786;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#8D8786}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}';const p=r;const s=class{constructor(t){e(this,t);this.complete=false;this.disabled=false;this.error=false;this.lastStep=false;this.stepId=1;this.stepperState={activeStep:1,showStepNumber:false,variant:"default",indicatorPosition:"left"};this.clickable=false}onStepChange(e){const t=e.detail.previousActiveStep;if(t===this.stepId&&this.error){this.clickable=true}}updateCurrentStep(e){this.active=e.activeStep===this.stepId}updateErrorState(){if(this.active){this.error=false}}handleStepClick(){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)){this.stepperState.setActiveStep(this.stepId,true)}}handleStepKeyDown(e){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)&&e.key==="Enter"){this.stepperState.setActiveStep(this.stepId,true)}}stopOnClickPropogation(e){if(this.disabled){e.stopPropagation()}}render(){return t("div",{key:"9914ec28d308a59dae9f0f6117b2aece72ac6438","aria-current":this.active?"step":false,"aria-disabled":this.active||this.complete?false:true,onClick:e=>this.stopOnClickPropogation(e),class:`step-wrapper ${this.stepId===1?"first-step":""} \n                        ${this.error?"error":""}\n                        ${this.stepperState.variant}\n                        ${this.complete?"complete":""}\n                        ${this.lastStep?"last-step":""}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active?"active":""}\n                        ${this.clickable?"clickable":""}\n                        ${this.disabled?"disabled":""}`},t("div",{key:"6017ac474bcbc1afa7ed1ec416bf0302fdbd5cdd",class:"step-icon-wrapper"},this.stepperState.variant!=="compact"&&t("span",{key:"0a90ed22e8b55a0a20d463347edd656ece131992",class:"step-connector-l"}),this.stepperState.variant!=="compact"&&(!this.error||this.error&&this.active)&&t("div",{key:"c21888305852d7434847c329a7f7569ff2ac3b7d",class:"step-icon"},this.stepperState.showStepNumber&&!this.complete&&!this.active?this.stepId:"",this.complete&&!this.active&&t("ifx-icon",{key:"1a97cd47db4fe64eda55a1418511bb1e78bc1332",icon:"check16"}),this.active&&t("span",{key:"2b918fa4f3052c7e6c5597f175956802ec2f34bb",class:"active-indic"})),this.stepperState.variant!=="compact"&&this.error&&!this.active&&t("ifx-icon",{key:"b515f8cab0008f14c9e1ba9a5f085792a440a2cc",icon:"warningf24"}),this.stepperState.variant!=="compact"&&t("span",{key:"772ef8271ffb3398a7bcfedb732a12e43250ae98",class:`step-connector-r ${this.active?"active":""}`})),(this.stepperState.variant!=="compact"||this.stepperState.variant==="compact"&&(this.active||this.stepId===this.stepperState.activeStep+1))&&t("div",{key:"b16463d3fb54cafc520cb7799f647884f28989f0",tabIndex:!this.disabled&&this.complete&&!this.active?0:-1,class:`step-label ${this.stepperState.variant==="compact"?this.active?"curr-label":"next-label":""}`,onClick:()=>{this.handleStepClick()},onKeyDown:e=>{this.handleStepKeyDown(e)}},this.stepperState.variant!=="compact"&&t("slot",{key:"81c8b0a1310dcb02c0c668c2ac7ed84902e31a8f"}),this.stepperState.variant==="compact"&&!this.active?"Next: ":"",this.stepperState.variant==="compact"&&t("slot",{key:"c20034f2bee0fea186754be2480b75552f4ea9e9"})))}static get watchers(){return{stepperState:["updateCurrentStep"],active:["updateErrorState"]}}};s.style=p;export{s as ifx_step};
-//# sourceMappingURL=p-dba0c2d2.entry.js.map

package/dist/infineon-design-system-stencil/p-dc5ff11a.entry.js

@@ -1,2 +0,0 @@
-import{r as n,h as e,g as t}from"./p-e6edf72d.js";const a=':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 r=a;const i=class{constructor(e){n(this,e);this.inverted=false}handleSlotChange(n){var e,t;const a=n.target;const r=((t=(e=a.assignedNodes({flatten:true})[0])===null||e===void 0?void 0:e.textContent)===null||t===void 0?void 0:t.trim())||"";const i=parseInt(r,10);this.displayValue=!isNaN(i)&&i>99?"99+":i}render(){return e("div",{key:"16c3170610d742a0a9fe387e82600d48a1a6f065","aria-label":"a number indicator",class:`numberIndicator__container ${this.inverted?"inverted":""}`},e("span",{key:"044f49592dc0532bc0126697973f31b4c96c3dc8",class:"content-wrapper"},e("slot",{key:"b76b3e80fac9cf93e53d50400d6e1fb16fcfe2cd",onSlotchange:n=>this.handleSlotChange(n)})),e("span",{key:"ec745e545fae2a05db0204754af6889b04adc079"},this.displayValue))}get el(){return t(this)}};i.style=r;export{i as ifx_number_indicator};
-//# sourceMappingURL=p-dc5ff11a.entry.js.map

package/dist/infineon-design-system-stencil/p-e52a810f.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,a as n,g as o}from"./p-e6edf72d.js";import{c as d}from"./p-5cdc6210.js";const i=':root{font-family:"Source Sans 3", sans-serif}:host{vertical-align:bottom;display:inline-flex;width:var(--bw, fit-content)}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0px 16px;gap:8px;color:#FFFFFF;font-weight:600;border-radius:1px;line-height:1.5rem;font-family:"Source Sans 3";font-style:normal;text-decoration:none;user-select:none;font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;width:var(--bw, fit-content)}.btn:not(.disabled){cursor:pointer}.btn.disabled{pointer-events:none}.btn-default{color:#FFFFFF;background-color:#0A8276}.btn-default:disabled,.btn-default.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-default{background-color:#FFFFFF;color:#0A8276;border:1px solid #0A8276}.btn-secondary-default:disabled,.btn-secondary-default.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-default{background-color:transparent;color:#0A8276}.btn-tertiary-default:disabled,.btn-tertiary-default.disabled{color:#BFBBBB;pointer-events:none}.btn-danger{color:#FFFFFF;background-color:#CD002F;border-color:#CD002F}.btn-danger:disabled,.btn-danger.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-danger{background-color:#FFFFFF;color:#CD002F;border:1px solid #CD002F}.btn-secondary-danger:disabled,.btn-secondary-danger.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-danger{background-color:transparent;color:#CD002F}.btn-tertiary-danger:disabled,.btn-tertiary-danger.disabled{background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-inverse{color:#0A8276;background-color:#FFFFFF}.btn-inverse:disabled,.btn-inverse.disabled{opacity:1;background-color:#FFFFFF;color:#0A8276;pointer-events:none}.btn-secondary-inverse{color:#FFFFFF;border:1px solid #FFFFFF}.btn-secondary-inverse:disabled,.btn-secondary-inverse.disabled{border:1px solid #FFFFFF;color:#FFFFFF;pointer-events:none}.btn-tertiary-inverse{color:#FFFFFF}.btn-tertiary-inverse:disabled,.btn-tertiary-inverse.disabled{color:#FFFFFF;opacity:1;pointer-events:none}.btn ifx-icon:empty{display:none}.btn.btn-xs{font-size:0.875rem;height:32px;line-height:1rem}.btn.btn-s{font-size:0.875rem;height:36px;line-height:1.25rem}.btn.btn-l{font-size:1.25rem;height:48px;line-height:1.75rem}.btn.btn-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-default:not(:disabled,.disabled):hover{background-color:#08665C}.btn.btn-default:not(:disabled,.disabled):active,.btn.btn-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-default:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#08665C}.btn.btn-secondary-default:not(:disabled,.disabled):active,.btn.btn-secondary-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#9C216E}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#9C216E}.btn.btn-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-danger:not(:disabled,.disabled):hover{background-color:#A2001E}.btn.btn-danger:not(:disabled,.disabled):active,.btn.btn-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-secondary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-danger:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#A2001E}.btn.btn-secondary-danger:not(:disabled,.disabled):active,.btn.btn-secondary-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-inverse:not(:disabled,.disabled):hover{background-color:#EEEDED}.btn.btn-inverse:not(:disabled,.disabled):active,.btn.btn-inverse:not(:disabled,.disabled).active{background-color:#BFBBBB}.btn.btn-secondary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-secondary-inverse:not(:disabled,.disabled):hover{color:#0A8276;background-color:#EEEDED}.btn.btn-secondary-inverse:not(:disabled,.disabled):active,.btn.btn-secondary-inverse:not(:disabled,.disabled).active{color:#0A8276;background-color:#BFBBBB}.btn.btn-tertiary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):hover{color:#08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):active,.btn.btn-tertiary-default:not(:disabled,.disabled).active{color:#06534B}.btn.btn-tertiary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):hover{color:#A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):active,.btn.btn-tertiary-danger:not(:disabled,.disabled).active{color:#900021}.btn.btn-tertiary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-tertiary-inverse:not(:disabled,.disabled):hover{color:#EEEDED}.btn.btn-tertiary-inverse:not(:disabled,.disabled):active,.btn.btn-tertiary-inverse:not(:disabled,.disabled).active{color:#BFBBBB}';const a=i;const r=class{constructor(t){e(this,t);this.variant="primary";this.theme="default";this.size="m";this.disabled=false;this.target="_self";this.type="button";this.fullWidth=false;this.handleClick=e=>{if(this.el.shadowRoot){const t=this.el.closest("form");if(t){e.preventDefault();if(this.type==="reset"){this.resetClickHandler()}else{const e=document.createElement("button");if(this.type){e.type=this.type}e.style.display="none";t.appendChild(e);e.click();e.remove()}}}}}setInternalHref(e){this.internalHref=e}async setFocus(){this.focusableElement.focus()}insertNativeButton(){this.nativeButton=document.createElement("button");this.nativeButton.type=this.type;this.nativeButton.style.display="none";this.el.closest("form").appendChild(this.nativeButton)}handleFormAndInternalHref(){if(this.el.closest("form")){if(this.el.href){this.el.internalHref=undefined}this.insertNativeButton()}else{this.internalHref=this.href}}handleButtonWidth(){if(this.fullWidth){this.el.style.setProperty("--bw","100%")}else{this.el.style.setProperty("--bw","fit-content")}}componentWillLoad(){this.handleFormAndInternalHref()}componentWillRender(){this.handleButtonWidth()}resetClickHandler(){const e=this.el.closest("form");const t=e.querySelectorAll("ifx-text-field, ifx-textarea");t.forEach((e=>{e.reset()}))}handleKeyDown(e){if(e.key===" "||e.key==="Enter"&&!this.disabled){this.focusableElement.click()}}handleHostClick(e){if(this.disabled===true){e.stopImmediatePropagation()}}handleFocus(e){if(this.disabled){e.preventDefault();this.focusableElement.blur()}}render(){return t(n,{key:"7c8fba0e57ae1cdfa075d8e165e694a5fc05b763"},t("a",{key:"dd0d98ba6e5277087d390f5e297d445873826478",role:this.href?"link":"button",tabIndex:this.disabled?-1:0,ref:e=>this.focusableElement=e,class:this.getClassNames(),href:!this.disabled?this.internalHref:undefined,target:this.target,onClick:this.handleClick,rel:this.target==="_blank"?"noopener noreferrer":undefined,onFocus:e=>this.handleFocus(e),"aria-disabled":this.disabled?"true":null,"aria-describedby":this.theme==="danger"?"Dangerous action":undefined,"aria-label":this.AriaLabel||undefined},t("slot",{key:"acfbfb434c7b0f8705b31564a15f59f20c854036"})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary-${this.theme}`:`${this.variant}`==="tertiary"?`tertiary-${this.theme}`:`${this.theme}`}getSizeClass(){if(`${this.size}`==="xs"){return"xs"}else if(`${this.size}`==="s"){return"s"}else if(`${this.size}`==="l"){return"l"}else return""}getClassNames(){return d("btn",this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return o(this)}static get watchers(){return{href:["setInternalHref"]}}};r.style=a;export{r as ifx_button};
-//# sourceMappingURL=p-e52a810f.entry.js.map

package/dist/infineon-design-system-stencil/p-e52a810f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["buttonCss","IfxButtonStyle0","Button","constructor","hostRef","this","variant","theme","size","disabled","target","type","fullWidth","handleClick","ev","el","shadowRoot","parentForm","closest","preventDefault","resetClickHandler","fakeButton","document","createElement","style","display","appendChild","click","remove","setInternalHref","newValue","internalHref","setFocus","focusableElement","focus","insertNativeButton","nativeButton","handleFormAndInternalHref","href","undefined","handleButtonWidth","setProperty","componentWillLoad","componentWillRender","formElement","customElements","querySelectorAll","forEach","element","reset","handleKeyDown","key","handleHostClick","event","stopImmediatePropagation","handleFocus","blur","render","h","Host","role","tabIndex","ref","class","getClassNames","onClick","rel","onFocus","AriaLabel","getVariantClass","getSizeClass","classNames"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  vertical-align: bottom;\n  display: inline-flex;\n  width: var(--bw, fit-content);\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: tokens.$ifxSize500;\n  padding: 0px tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  font-family: tokens.$ifxFontFamilyBody;\n  font-style: normal;\n  text-decoration: none;\n  user-select: none;\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n  width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn.disabled {\n  pointer-events: none;\n}\n\n.btn-default {\n  //default variant=primary; default color=default\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-default {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorOcean500;\n  border: 1px solid tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-default {\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-danger {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorRed500;\n  border-color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-danger {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorRed500;\n  border: 1px solid tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-danger {\n  //combination tertiary + danger not in design\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-inverse {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    opacity: tokens.$ifxOpacity100;\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorOcean500;\n    pointer-events: none;\n  }\n}\n\n.btn-secondary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    border: 1px solid tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-tertiary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorBaseWhite;\n    opacity: tokens.$ifxOpacity100;\n    pointer-events: none;\n\n  }\n}\n\n.btn {\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  &.btn-xs {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize400;\n    line-height: tokens.$ifxLineHeightXs;\n  }\n\n  &.btn-s {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize450;\n    line-height: tokens.$ifxLineHeightS;\n  }\n\n  // &.btn-m { //default\n  //   font-size: tokens.$ifxFontSizeM;\n  //   height: tokens.$ifxSize400;\n  //   line-height: tokens.$ifxLineHeightM;\n  // }\n\n\n  &.btn-l {\n    font-size: tokens.$ifxFontSizeXl;\n    height: tokens.$ifxSize600;\n    line-height: tokens.$ifxLineHeightXl;\n  }\n\n\n\n  &.btn-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary:not(:disabled, .disabled) {\n\n    &:hover {\n      background-color: tokens.$ifxColorBerry500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorBerry500;\n    }\n  }\n\n\n\n  &.btn-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n  &.btn-secondary-danger:not(:disabled, .disabled) {\n\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n\n  &.btn-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.btn-secondary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n\n\n  &.btn-tertiary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean700;\n    }\n\n\n  }\n\n\n\n\n\n  &.btn-tertiary-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorRed700;\n    }\n\n  }\n\n\n  &.btn-tertiary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorEngineering200;\n\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class Button {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n  @Prop() size: string = 'm';\n  @Prop() disabled: boolean = false;\n  @State() internalHref: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  @Prop() fullWidth: boolean = false;\n  @Prop() AriaLabel: string;\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  private nativeButton: HTMLButtonElement | HTMLInputElement;\n\n  @Watch('href')\n  setInternalHref(newValue: string) {\n    this.internalHref = newValue;\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  insertNativeButton() {\n    this.nativeButton = document.createElement('button');\n    this.nativeButton.type = this.type;\n    this.nativeButton.style.display = 'none';\n    this.el.closest('form').appendChild(this.nativeButton);\n  }\n\n  handleFormAndInternalHref() {\n    if (this.el.closest('form')) {\n      if (this.el.href) {\n        this.el.internalHref = undefined;\n      }\n      this.insertNativeButton()\n    } else {\n      this.internalHref = this.href;\n    }\n  }\n\n  handleButtonWidth() {\n    if (this.fullWidth) {\n      this.el.style.setProperty('--bw', '100%');\n    } else {\n      this.el.style.setProperty('--bw', 'fit-content');\n    }\n  }\n\n  componentWillLoad() {\n    this.handleFormAndInternalHref()\n  }\n\n  componentWillRender() {\n    this.handleButtonWidth()\n  }\n\n\n\n  handleClick = (ev: Event) => {\n    if (this.el.shadowRoot) {\n      const parentForm = this.el.closest('form');\n      if (parentForm) {\n        ev.preventDefault();\n\n        if (this.type === 'reset') {\n          // If the button type is 'reset', manually reset all custom form fields\n          this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n        } else {\n          const fakeButton = document.createElement('button');\n          if (this.type) {\n            fakeButton.type = this.type;\n          }\n          fakeButton.style.display = 'none';\n          parentForm.appendChild(fakeButton);\n          fakeButton.click();\n          fakeButton.remove();\n        }\n      }\n    }\n  }\n\n  resetClickHandler() {\n    const formElement = this.el.closest('form');\n    const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n    customElements.forEach(element => {\n      element.reset();\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ( ev.key === \" \" || ev.key === 'Enter' && !this.disabled) {\n      this.focusableElement.click();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleHostClick(event: Event) {\n    if (this.disabled === true) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  handleFocus(event: FocusEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      this.focusableElement.blur();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <a\n          role={this.href ? 'link' : 'button'}\n          tabIndex={this.disabled ? -1 : 0}\n          ref={(el) => (this.focusableElement = el)}\n          class={this.getClassNames()}\n          href={!this.disabled ? this.internalHref : undefined}\n          target={this.target}\n          onClick={this.handleClick}\n          rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          onFocus={(event) => this.handleFocus(event)}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n          aria-label={this.AriaLabel || undefined}\n        >\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary-${this.theme}`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary-${this.theme}`\n        : `${this.theme}`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn',\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"mappings":"6FAAA,MAAMA,EAAY,8sLAClB,MAAAC,EAAeD,E,MCQFE,EAAM,MALnB,WAAAC,CAAAC,G,UAMUC,KAAAC,QAAgD,UAChDD,KAAAE,MAA0C,UAC1CF,KAAAG,KAAe,IACfH,KAAAI,SAAoB,MAGpBJ,KAAAK,OAAiB,QACjBL,KAAAM,KAAsC,SACtCN,KAAAO,UAAqB,MAqD7BP,KAAAQ,YAAeC,IACb,GAAIT,KAAKU,GAAGC,WAAY,CACtB,MAAMC,EAAaZ,KAAKU,GAAGG,QAAQ,QACnC,GAAID,EAAY,CACdH,EAAGK,iBAEH,GAAId,KAAKM,OAAS,QAAS,CAEzBN,KAAKe,mB,KACA,CACL,MAAMC,EAAaC,SAASC,cAAc,UAC1C,GAAIlB,KAAKM,KAAM,CACbU,EAAWV,KAAON,KAAKM,I,CAEzBU,EAAWG,MAAMC,QAAU,OAC3BR,EAAWS,YAAYL,GACvBA,EAAWM,QACXN,EAAWO,Q,KA9DnB,eAAAC,CAAgBC,GACdzB,KAAK0B,aAAeD,C,CAItB,cAAME,GACJ3B,KAAK4B,iBAAiBC,O,CAGxB,kBAAAC,GACE9B,KAAK+B,aAAed,SAASC,cAAc,UAC3ClB,KAAK+B,aAAazB,KAAON,KAAKM,KAC9BN,KAAK+B,aAAaZ,MAAMC,QAAU,OAClCpB,KAAKU,GAAGG,QAAQ,QAAQQ,YAAYrB,KAAK+B,a,CAG3C,yBAAAC,GACE,GAAIhC,KAAKU,GAAGG,QAAQ,QAAS,CAC3B,GAAIb,KAAKU,GAAGuB,KAAM,CAChBjC,KAAKU,GAAGgB,aAAeQ,S,CAEzBlC,KAAK8B,oB,KACA,CACL9B,KAAK0B,aAAe1B,KAAKiC,I,EAI7B,iBAAAE,GACE,GAAInC,KAAKO,UAAW,CAClBP,KAAKU,GAAGS,MAAMiB,YAAY,OAAQ,O,KAC7B,CACLpC,KAAKU,GAAGS,MAAMiB,YAAY,OAAQ,c,EAItC,iBAAAC,GACErC,KAAKgC,2B,CAGP,mBAAAM,GACEtC,KAAKmC,mB,CA4BP,iBAAApB,GACE,MAAMwB,EAAcvC,KAAKU,GAAGG,QAAQ,QACpC,MAAM2B,EAAiBD,EAAYE,iBAAiB,gCACpDD,EAAeE,SAAQC,IACrBA,EAAQC,OAAO,G,CAKnB,aAAAC,CAAcpC,GACZ,GAAKA,EAAGqC,MAAQ,KAAOrC,EAAGqC,MAAQ,UAAY9C,KAAKI,SAAU,CAC3DJ,KAAK4B,iBAAiBN,O,EAK1B,eAAAyB,CAAgBC,GACd,GAAIhD,KAAKI,WAAa,KAAM,CAC1B4C,EAAMC,0B,EAIV,WAAAC,CAAYF,GACV,GAAIhD,KAAKI,SAAU,CACjB4C,EAAMlC,iBACNd,KAAK4B,iBAAiBuB,M,EAI1B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAR,IAAA,4CACHO,EAAA,KAAAP,IAAA,2CACES,KAAMvD,KAAKiC,KAAO,OAAS,SAC3BuB,SAAUxD,KAAKI,UAAY,EAAI,EAC/BqD,IAAM/C,GAAQV,KAAK4B,iBAAmBlB,EACtCgD,MAAO1D,KAAK2D,gBACZ1B,MAAOjC,KAAKI,SAAWJ,KAAK0B,aAAeQ,UAC3C7B,OAAQL,KAAKK,OACbuD,QAAS5D,KAAKQ,YACdqD,IAAK7D,KAAKK,SAAW,SAAW,sBAAwB6B,UACxD4B,QAAUd,GAAUhD,KAAKkD,YAAYF,GAAM,gBAC5BhD,KAAKI,SAAW,OAAS,KAAI,mBAC1BJ,KAAKE,QAAU,SAAW,mBAAqBgC,UAAS,aAC9DlC,KAAK+D,WAAa7B,WAE9BmB,EAAA,QAAAP,IAAA,8C,CAOR,eAAAkB,GACE,MAAO,GAAGhE,KAAKC,YAAc,YACzB,aAAaD,KAAKE,QAClB,GAAGF,KAAKC,YAAc,WACpB,YAAYD,KAAKE,QACjB,GAAGF,KAAKE,O,CAGhB,YAAA+D,GACE,GAAI,GAAGjE,KAAKG,SAAW,KAAM,CAC3B,MAAO,I,MAEJ,GAAI,GAAGH,KAAKG,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,GAAI,GAAGH,KAAKG,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,MAAO,E,CAGd,aAAAwD,GACE,OAAOO,EACL,MACAlE,KAAKG,MAAQ,OAAOH,KAAKiE,iBACzB,OAAOjE,KAAKgE,oBACZhE,KAAKI,SAAW,WAAa,G","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-e93396ed.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,g as o}from"./p-e6edf72d.js";const i=':root{font-family:"Source Sans 3", sans-serif}.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;font-family:"Source Sans 3";gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font:400 0.75rem/1rem "Source Sans 3";margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font:400 0.75rem/1rem "Source Sans 3";flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}';const s=i;const a=class{constructor(e){t(this,e);this.errorStates=new Map;this.alignment="vertical";this.groupLabelText="Group Label Text";this.hasErrors=false;this.handleSlotChange=()=>{this.initializeState()}}handleCheckboxError(t){const e=t.target;if(e.tagName==="ifx-checkbox"){this.errorStates.set(e,t.detail);this.updateHasErrors()}}async setGroupError(t){const e=Array.from(this.el.querySelectorAll("ifx-checkbox"));e.forEach((e=>{e.error=t}))}componentWillLoad(){this.initializeState()}initializeState(){this.errorStates.clear();const t=Array.from(this.el.querySelectorAll("ifx-checkbox"));t.forEach((t=>{if(!this.errorStates.has(t)){this.errorStates.set(t,t.error||false)}}));this.updateHasErrors()}updateHasErrors(){this.hasErrors=Array.from(this.errorStates.values()).some((t=>t))}render(){return e("div",{key:"2f455a4fa40d089e1aafab0b669aa4f4ded80be0",class:"checkbox-group-container"},this.showGroupLabel?e("div",{class:"group-label"},this.groupLabelText," *"):"",e("div",{key:"eb6f16bf53e13620681c87eb7cb4062a37abd068",class:`checkbox-group ${this.alignment} ${this.size}`},e("slot",{key:"00ec08507a2ef1ff8e893b6c8b9aa917a7735224",onSlotchange:this.handleSlotChange})),this.showCaption?e("div",{class:`caption ${this.hasErrors?"error":"default"}`},this.showCaptionIcon?e("div",{class:"caption-icon"},e("ifx-icon",{icon:"c-info-16"})):"",e("div",{class:"caption-text"},this.captionText)):"")}static get formAssociated(){return true}get el(){return o(this)}};a.style=s;export{a as ifx_checkbox_group};
-//# sourceMappingURL=p-e93396ed.entry.js.map

package/dist/infineon-design-system-stencil/p-e93396ed.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxGroupCss","IfxCheckboxGroupStyle0","CheckboxGroup","constructor","hostRef","this","errorStates","Map","alignment","groupLabelText","hasErrors","handleSlotChange","initializeState","handleCheckboxError","event","checkbox","target","tagName","set","detail","updateHasErrors","setGroupError","error","checkboxes","Array","from","el","querySelectorAll","forEach","componentWillLoad","clear","has","values","some","render","h","key","class","showGroupLabel","size","onSlotchange","showCaption","showCaptionIcon","icon","captionText"],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.checkbox-group {\n    display: flex;\n    font-family: tokens.$ifxFontFamilyBody;\n    gap: tokens.$ifxSpace100;\n\n    &.horizontal {\n        flex-direction: row;\n        column-gap: tokens.$ifxSpace150;\n    }\n\n    &.vertical {\n        flex-direction: column;\n        row-gap: tokens.$ifxSpace150;\n    }\n}\n\n.group-label {\n    font: tokens.$ifxBodyBody05;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption {\n    margin-top: tokens.$ifxSpace100;\n    align-self: flex-start;\n    display: flex;\n    width: 100%;\n    column-gap: tokens.$ifxSpace100;\n    justify-content: space-between;\n    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font: tokens.$ifxBodyBody05;\n    flex: 1;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n    flex:0;\n    display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class CheckboxGroup {\n  private errorStates: Map<HTMLElement, boolean> = new Map();\n\n  @Element() el: HTMLElement;\n  @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() size: string;\n  @Prop() showGroupLabel: boolean;\n  @Prop() groupLabelText: string = 'Group Label Text';\n  @Prop() showCaption: boolean;\n  @Prop() captionText: string;\n  @Prop() showCaptionIcon: boolean;\n  @State() hasErrors: boolean = false;\n\n  @Listen('ifxError')\n  handleCheckboxError(event: CustomEvent) {\n    const checkbox = event.target as HTMLElement;\n    if (checkbox.tagName === 'ifx-checkbox') {\n      this.errorStates.set(checkbox, event.detail);\n      this.updateHasErrors();\n    }\n  }\n\n  // Method to set the error state of all checkboxes in the group\n  @Method()\n  async setGroupError(error: boolean) {\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      (checkbox as any).error = error;\n    });\n  }\n\n  componentWillLoad() {\n    this.initializeState();\n  }\n\n  handleSlotChange = () => {\n    this.initializeState();\n  };\n\n  private initializeState() {\n    this.errorStates.clear();\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      if (!this.errorStates.has(checkbox)) {\n        this.errorStates.set(checkbox, (checkbox as any).error || false);\n      }\n    });\n    this.updateHasErrors();\n  }\n\n  private updateHasErrors() {\n    this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n  }\n\n  render() {\n    return (\n      <div class='checkbox-group-container'>\n        {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n        <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n        {this.showCaption ? (\n          <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n            {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n            </ifx-icon></div> : ''}\n            <div class='caption-text'>{this.captionText}</div>\n          </div>) : ''}\n      </div>\n    );\n  }\n}"],"mappings":"kDAAA,MAAMA,EAAmB,6yBACzB,MAAAC,EAAeD,E,MCQFE,EAAa,MAP1B,WAAAC,CAAAC,G,UAQUC,KAAAC,YAAyC,IAAIC,IAG7CF,KAAAG,UAAuC,WAGvCH,KAAAI,eAAyB,mBAIxBJ,KAAAK,UAAqB,MAwB9BL,KAAAM,iBAAmB,KACjBN,KAAKO,iBAAiB,C,CAtBxB,mBAAAC,CAAoBC,GAClB,MAAMC,EAAWD,EAAME,OACvB,GAAID,EAASE,UAAY,eAAgB,CACvCZ,KAAKC,YAAYY,IAAIH,EAAUD,EAAMK,QACrCd,KAAKe,iB,EAMT,mBAAMC,CAAcC,GAClB,MAAMC,EAAaC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,iBACvDJ,EAAWK,SAASb,IACjBA,EAAiBO,MAAQA,CAAK,G,CAInC,iBAAAO,GACExB,KAAKO,iB,CAOC,eAAAA,GACNP,KAAKC,YAAYwB,QACjB,MAAMP,EAAaC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,iBACvDJ,EAAWK,SAASb,IAClB,IAAKV,KAAKC,YAAYyB,IAAIhB,GAAW,CACnCV,KAAKC,YAAYY,IAAIH,EAAWA,EAAiBO,OAAS,M,KAG9DjB,KAAKe,iB,CAGC,eAAAA,GACNf,KAAKK,UAAYc,MAAMC,KAAKpB,KAAKC,YAAY0B,UAAUC,MAAMX,GAAUA,G,CAGzE,MAAAY,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,4BACRhC,KAAKiC,eAAiBH,EAAA,OAAKE,MAAM,eAAehC,KAAKI,eAAc,MAAY,GAChF0B,EAAA,OAAAC,IAAA,2CAAKC,MAAO,kBAAkBhC,KAAKG,aAAaH,KAAKkC,QACnDJ,EAAA,QAAAC,IAAA,2CAAMI,aAAcnC,KAAKM,oBAE1BN,KAAKoC,YACJN,EAAA,OAAKE,MAAO,WAAWhC,KAAKK,UAAY,QAAU,aAC/CL,KAAKqC,gBAAkBP,EAAA,OAAKE,MAAM,gBAAeF,EAAA,YAAUQ,KAAK,eAC7C,GACpBR,EAAA,OAAKE,MAAM,gBAAgBhC,KAAKuC,cACxB,G","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-ebe1aa5f.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as n,a as o,g as e}from"./p-e6edf72d.js";import{c as i}from"./p-5cdc6210.js";const r=':host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:"Source Sans 3";text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}';const s=r;const a=class{constructor(n){t(this,n);this.target="_self";this.shape="round"}handleClick(t){if(this.disabled){t.stopImmediatePropagation()}}async setFocus(){this.focusableElement.focus()}componentWillLoad(){if(this.shape===""){this.shape="round"}}render(){return n(o,{key:"3cc21055a0545976f5375b3e43fe8dec7cc3e28c"},this.href?n("a",{"aria-disabled":this.disabled,"aria-label":"a clickable icon button",ref:t=>this.focusableElement=t,class:this.getClassNames(),href:!this.disabled?this.href:undefined,target:this.target,rel:this.target==="_blank"?"noopener noreferrer":undefined},n("ifx-icon",{icon:this.icon})):n("button",{class:this.getClassNames(),type:"button"},n("ifx-icon",{icon:this.icon})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary`:`${this.variant}`==="tertiary"?`tertiary`:`primary`}getSizeClass(){if(`${this.size}`==="xs"){return"xs"}else if(`${this.size}`==="s"){return"s"}else if(`${this.size}`==="l"){return"l"}else return""}getClassNames(){return i("btn icon-button",`btn-${this.shape}`,this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return e(this)}};a.style=s;export{a as ifx_icon_button};
-//# sourceMappingURL=p-ebe1aa5f.entry.js.map

package/dist/infineon-design-system-stencil/p-ebe1aa5f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["iconButtonCss","IfxIconButtonStyle0","IconButton","constructor","hostRef","this","target","shape","handleClick","event","disabled","stopImmediatePropagation","setFocus","focusableElement","focus","componentWillLoad","render","h","Host","key","href","ref","el","class","getClassNames","undefined","rel","icon","type","getVariantClass","variant","getSizeClass","size","classNames"],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-flex;\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: tokens.$ifxSize500;\n  padding: 8px;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  flex-direction: row;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  outline: none;\n  font-family: tokens.$ifxFontFamilyBody;\n  text-decoration: none;\n  user-select: none;\n  border: 1px solid rgba(0, 0, 0, 0);\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn-primary {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-secondary {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary {\n  background-color: transparent;\n  color: tokens.$ifxColorBaseBlack;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n\n.btn {\n\n  &.icon-button {\n    min-width: initial;\n    min-height: initial;\n    width: tokens.$ifxSize500;\n    height: tokens.$ifxSize500;\n    padding: 0;\n    justify-content: center;\n\n    &.btn-round {\n      border-radius: 100px;\n    }\n\n    &.btn-square {\n      border-radius: tokens.$ifxBorderRadius12;\n    }\n\n    &.btn-s {\n      width: tokens.$ifxSize400;\n      height: tokens.$ifxSize400;\n      padding: 8px;\n    }\n\n\n    &.btn-l {\n      width: tokens.$ifxSize600;\n      height: tokens.$ifxSize600;\n      padding: 8px;\n    }\n  }\n\n  &.btn-primary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n\n  &.btn-secondary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-tertiary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      color: tokens.$ifxColorBaseBlack;\n      box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean600;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\n\nexport class IconButton {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n  @Prop() size: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() shape: string = 'round';\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n\n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.shape === '') {\n      this.shape = 'round';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.href ? (\n          <a\n            aria-disabled={this.disabled}\n            aria-label='a clickable icon button'\n            ref={(el) => (this.focusableElement = el)}\n            class={this.getClassNames()}\n            href={!this.disabled ? this.href : undefined}\n            target={this.target}\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary`\n        : `primary`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn icon-button',\n      `btn-${this.shape}`,\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"mappings":"6FAAA,MAAMA,EAAgB,k4EACtB,MAAAC,EAAeD,E,MCSFE,EAAU,MANvB,WAAAC,CAAAC,G,UAYUC,KAAAC,OAAiB,QACjBD,KAAAE,MAAgB,O,CAMxB,WAAAC,CAAYC,GACV,GAAIJ,KAAKK,SAAU,CACjBD,EAAME,0B,EAKV,cAAMC,GACJP,KAAKQ,iBAAiBC,O,CAGxB,iBAAAC,GACE,GAAIV,KAAKE,QAAU,GAAI,CACrBF,KAAKE,MAAQ,O,EAIjB,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFd,KAAKe,KACJH,EAAA,qBACiBZ,KAAKK,SAAQ,aACjB,0BACXW,IAAMC,GAAQjB,KAAKQ,iBAAmBS,EACtCC,MAAOlB,KAAKmB,gBACZJ,MAAOf,KAAKK,SAAWL,KAAKe,KAAOK,UACnCnB,OAAQD,KAAKC,OACboB,IAAKrB,KAAKC,SAAW,SAAW,sBAAwBmB,WAExDR,EAAA,YAAUU,KAAMtB,KAAKsB,QAGvBV,EAAA,UACEM,MAAOlB,KAAKmB,gBACZI,KAAK,UAELX,EAAA,YAAUU,KAAMtB,KAAKsB,Q,CAO/B,eAAAE,GACE,MAAO,GAAGxB,KAAKyB,YAAc,YACzB,YACA,GAAGzB,KAAKyB,YAAc,WACpB,WACA,S,CAGR,YAAAC,GACE,GAAI,GAAG1B,KAAK2B,SAAW,KAAM,CAC3B,MAAO,I,MAEJ,GAAI,GAAG3B,KAAK2B,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,GAAI,GAAG3B,KAAK2B,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,MAAO,E,CAGd,aAAAR,GACE,OAAOS,EACL,kBACA,OAAO5B,KAAKE,QACZF,KAAK2B,MAAQ,OAAO3B,KAAK0B,iBACzB,OAAO1B,KAAKwB,oBACZxB,KAAKK,SAAW,WAAa,G","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-f88b928c.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as n}from"./p-e6edf72d.js";const o=':root{font-family:"Source Sans 3", sans-serif}:host{display:inline-flex}.badge__container{display:inline-flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;border:1px solid #EEEDED;background-color:#EEEDED;border-radius:100px;font-family:"Source Sans 3";font-size:0.875rem;line-height:1.25rem;font-weight:400;color:#1D1D1D}';const r=o;const a=class{constructor(n){e(this,n)}render(){return n("div",{key:"eaa5be7836515fc284e17ed7fb6acfdcc6ce11f1",class:"badge__container"},n("slot",{key:"f00f0415cb6cdfa25ce8e7b0df798f8a98eb2373"}))}};a.style=r;export{a as ifx_badge};
-//# sourceMappingURL=p-f88b928c.entry.js.map

package/dist/infineon-design-system-stencil/p-fc455450.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as o}from"./p-e6edf72d.js";const a=':root{font-family:"Source Sans 3", sans-serif}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:"Source Sans 3"}.dropdown-header span{color:#575352;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:400;line-height:20px;}';const d=a;const r=class{constructor(o){e(this,o)}render(){return o("div",{key:"5b074bc6dca271a18713c34a4c4f8cb40a2ea265",class:"dropdown-header"},o("span",{key:"69ed109762bf3ae540d1c5489f5bebbd8107b1cd"},o("slot",{key:"b9fe8b98734bd887f25df7a211b5b5587d7bf994"})))}};r.style=d;export{r as ifx_dropdown_header};
-//# sourceMappingURL=p-fc455450.entry.js.map

package/dist/infineon-design-system-stencil/p-fc455450.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownHeaderCss","IfxDropdownHeaderStyle0","DropdownHeader","render","h","key","class"],"sources":["src/components/dropdown/dropdown-header/dropdown-header.scss?tag=ifx-dropdown-header&encapsulation=shadow","src/components/dropdown/dropdown-header/dropdown-header.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-header {\n  display: flex;\n  padding: 8px 16px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n  font-family: tokens.$ifxFontFamilyBody;\n\n\n  & span {\n    color: tokens.$ifxColorEngineering500;\n    font-family: tokens.$ifxFontFamilyBody;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    /* 142.857% */\n  }\n}","// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true\n})\n\nexport class DropdownHeader {\n  render() {\n    return (\n      <div class='dropdown-header'>\n        <span>\n          <slot />\n        </span>\n      </div>\n    )\n  }\n}"],"mappings":"2CAAA,MAAMA,EAAoB,6UAC1B,MAAAC,EAAeD,E,MCQFE,EAAc,M,yBACzB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,QAAAC,IAAA,4CACED,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-fe55dfcd.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as r,a,g as s}from"./p-e6edf72d.js";const i=':root{font-family:"Source Sans 3", sans-serif}:host{display:flex;flex-direction:column;width:100%}.wrapper__label{color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3"}:host(.wrapper--disabled) .wrapper__label{color:#575352}.wrapper__textarea{width:100%}.wrapper__textarea.fullWidth{width:100%}.wrapper__textarea.fullWidth textarea{width:100%;box-sizing:border-box}.wrapper__textarea textarea{border:1px solid #8D8786;border-radius:1px;padding:8px 16px;background-color:#FFFFFF;color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3";transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:none;border:1px solid #0A8276}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #CD002F}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #575352;background-color:#EEEDED}.wrapper__caption{color:#1D1D1D;font:400 0.75rem/1rem "Source Sans 3"}:host(.wrapper--error) .wrapper__caption{color:#CD002F}:host(.wrapper--disabled) .wrapper__caption{color:#575352}';const o=i;const l=class{constructor(r){e(this,r);this.ifxInput=t(this,"ifxInput",7);if(r.$hostElement$["s-ei"]){this.internals=r.$hostElement$["s-ei"]}else{this.internals=r.$hostElement$.attachInternals();r.$hostElement$["s-ei"]=this.internals}this.inputId=`ifx-textarea-${++h}`;this.disabled=false;this.error=false;this.readOnly=false;this.resize="both";this.wrap="soft";this.fullWidth="false"}async reset(){this.resetTextarea()}handleComponentWidth(){const e=this.el.shadowRoot.querySelector(".wrapper__textarea");const t=this.fullWidth.toLowerCase()==="true";if(t){e.classList.add("fullWidth")}else if(e.classList.contains("fullWidth")){e.classList.remove("fullWidth")}}componentDidRender(){this.handleComponentWidth()}formResetCallback(){this.resetTextarea();this.internals.setFormValue("")}handleOnInput(e){this.value=e.target.value;this.internals.setFormValue(this.value);this.ifxInput.emit(this.value)}resetTextarea(){this.value="";this.internals.setValidity({});this.internals.setFormValue("")}componentWillLoad(){this.internals.setFormValue(this.value)}render(){var e,t;return r(a,{key:"c04bd9f6eb75e14607f6b81fb32065752fd814ac",class:`wrapper--${this.error?"error":""} wrapper--${this.disabled?"disabled":""}`},r("label",{key:"bd270704eaedbd3fb127015dd5d9993839a75135",class:"wrapper__label",htmlFor:this.inputId},(e=this.label)===null||e===void 0?void 0:e.trim()),r("div",{key:"2ff0f414ce2209a5f7bdc9400b2c7c2356da39fd",class:"wrapper__textarea"},r("textarea",{key:"65007882cbf52104ee22af96beacb9d882bbf245","aria-label":"a textarea","aria-value":this.value,"aria-disabled":this.disabled,id:this.inputId,style:{resize:this.resize},name:this.name?this.name:this.inputId,cols:this.cols,rows:this.rows,maxlength:this.maxlength,wrap:this.wrap,disabled:this.disabled,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,onInput:e=>this.handleOnInput(e)})),((t=this.caption)===null||t===void 0?void 0:t.trim())&&r("div",{key:"c44b21fd8eef93920228267d9baf51a12bcf08ea",class:"wrapper__caption"},this.caption.trim()))}static get formAssociated(){return true}get el(){return s(this)}};let h=0;l.style=o;export{l as ifx_textarea};
-//# sourceMappingURL=p-fe55dfcd.entry.js.map

package/dist/types/global/font-import.d.ts

@@ -1 +0,0 @@
-import '@infineon/design-system-tokens/dist/fonts/ifx-fonts.css';