@infineon/infineon-design-system-stencil 37.13.0--canary.1964.4c0dbe58a38ebf64252c372b89ceb2ea2b5b3aeb.0 → 37.13.0--canary.1964.46dfc755d615c2e9457c944038d41653343e16b0.0

package/dist/types/components.d.ts

@@ -101,6 +101,7 @@ export namespace Components {
         "alignment": 'horizontal' | 'vertical';
         "captionText": string;
         "groupLabelText": string;
+        "required": boolean;
         "setGroupError": (error: boolean) => Promise<void>;
         "showCaption": boolean;
         "showCaptionIcon": boolean;
@@ -400,6 +401,7 @@ export namespace Components {
         "alignment": 'horizontal' | 'vertical';
         "captionText": string;
         "groupLabelText": string;
+        "required": boolean;
         "setGroupError": (error: boolean) => Promise<void>;
         "showCaption": boolean;
         "showCaptionIcon": boolean;
@@ -2040,6 +2042,7 @@ declare namespace LocalJSX {
         "alignment"?: 'horizontal' | 'vertical';
         "captionText"?: string;
         "groupLabelText"?: string;
+        "required"?: boolean;
         "showCaption"?: boolean;
         "showCaptionIcon"?: boolean;
         "showGroupLabel"?: boolean;
@@ -2360,6 +2363,7 @@ declare namespace LocalJSX {
         "alignment"?: 'horizontal' | 'vertical';
         "captionText"?: string;
         "groupLabelText"?: string;
+        "required"?: boolean;
         "showCaption"?: boolean;
         "showCaptionIcon"?: boolean;
         "showGroupLabel"?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "37.13.0--canary.1964.4c0dbe58a38ebf64252c372b89ceb2ea2b5b3aeb.0",
+  "version": "37.13.0--canary.1964.46dfc755d615c2e9457c944038d41653343e16b0.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

package/dist/components/p-54ace5a0.js.map

@@ -1 +0,0 @@
-{"file":"p-54ace5a0.js","mappings":"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","names":[],"sources":["src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.textInput__container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  width: 100%;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  &.disabled {\n    & .textInput__top-wrapper {\n      & label {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    & .textInput__bottom-wrapper {\n      input {\n        border: 1px solid tokens.$ifxColorEngineering500;\n        background-color: tokens.$ifxColorEngineering200;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          color: tokens.$ifxColorEngineering500;\n        }\n      }\n    }\n  }\n\n  & .textInput__top-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 0px;\n    gap: tokens.$ifxSpace50;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & label {\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightRegular;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      font-family: tokens.$ifxFontFamilyBody;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .optional-required {\n        margin-left: 4px;\n      }\n\n      & .optional {\n        margin-left: 4px;\n      }\n\n      & .required {\n        margin-left: 4px;\n        \n        &.error {\n          color: tokens.$ifxColorRed500;\n        }\n      }\n    }\n  }\n\n  .input-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n  }\n\n\n  & .textInput__bottom-wrapper {\n    flex-grow: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    gap: tokens.$ifxSpace50;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & input {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n      gap: tokens.$ifxSpace100;\n      height: tokens.$ifxSize500;\n      background-color: tokens.$ifxColorBaseWhite;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      border: 1px solid tokens.$ifxColorEngineering400;\n      border-radius: tokens.$ifxBorderRadius12;\n      flex: none;\n      order: 0;\n      align-self: stretch;\n      flex-grow: 0;\n      text-overflow: ellipsis;\n\n      &.input-s {\n        height: tokens.$ifxSize450;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          line-height: tokens.$ifxLineHeightS;\n        }\n\n      }\n\n      &.icon {\n        padding-left: tokens.$ifxSpace500;\n      }\n\n      &.error {\n        border: 1px solid tokens.$ifxColorRed500;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &.success {\n        border: 1px solid tokens.$ifxColorGreen500;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n\n      &:focus:not(.error, .success) {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      &:hover:not(:disabled, :focus, .error, .success) {\n        border: 1px solid tokens.$ifxColorEngineering500;\n      }\n\n      &::placeholder {\n        font-style: normal;\n        font-weight: tokens.$ifxFontWeightRegular;\n        font-size: tokens.$ifxFontSizeM;\n        line-height: tokens.$ifxLineHeightM;\n        color: tokens.$ifxColorEngineering400;\n        flex: none;\n        order: 1;\n        flex-grow: 1;\n      }\n    }\n\n    & .input-icon {\n      // Position the icon within the icon container\n      // Adjust the positioning as needed\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: tokens.$ifxSpace200;\n      /* Adjust this value to control the icon's left offset */\n      transition: .3s;\n      color: tokens.$ifxColorEngineering400;\n    }\n\n    & .textInput__bottom-wrapper-caption {\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightRegular;\n      font-size: tokens.$ifxFontSizeXs;\n      line-height: tokens.$ifxLineHeightXs;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: tokens.$ifxFontFamilyBody;\n      flex: none;\n      order: 1;\n      align-self: stretch;\n      flex-grow: 0;\n\n      &.error {\n        color: tokens.$ifxColorRed500;\n\n      }\n\n      &.disabled {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    \n  }\n  .delete-icon {\n    position: absolute;\n    right: tokens.$ifxSpace200;\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class TextField {\n  private inputElement: HTMLInputElement;\n  @Element() el;\n  @Prop() placeholder: string = \"Placeholder\"\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() error: boolean = false;\n  @Prop() label: string = \"\";\n  @Prop() icon: string = \"\";\n  @Prop() caption: string = \"\";\n  @Prop() size: string = 'm';\n  @Prop() required: boolean = false;\n  @Prop() optional: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() maxlength?: number;\n  @Prop() showDeleteIcon: boolean = false;\n  @Prop() autocomplete: string = 'on'\n  @Prop() type: 'text' | 'password' = 'text';\n  @Prop() internalId: string = \"text-field\"\n  @State() internalType: string;\n  @Event() ifxInput: EventEmitter<String>;\n  // @Prop({ reflect: true })\n  // resetOnSubmit: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.value = '';\n    this.inputElement.value = '';\n  }\n\n  handleDeleteContent() {\n    this.reset();\n    this.ifxInput.emit(this.value);\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.internals.setFormValue(query) // update form value\n    this.ifxInput.emit(this.value);\n  }\n\n  handleTypeProp() { \n   this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text'\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  componentWillLoad() { \n    this.handleTypeProp()\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-text-field', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n        <div class=\"textInput__top-wrapper\">\n          <label htmlFor={this.internalId}>\n            <slot></slot>\n            {this.optional && this.required ? (\n              <span class=\"optional-required\">(optional) *</span>\n            ) : this.optional ? (\n              <span class=\"optional\">(optional)</span>\n            ) : this.required ? (\n              <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n            ) : null}\n          </label>\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && (\n              <ifx-icon class='input-icon' icon={this.icon} />\n            )}\n            <input\n              ref={(el) => (this.inputElement = el)}\n              disabled={this.disabled}\n              autocomplete={this.autocomplete}\n              type={this.internalType}\n              id={this.internalId}\n              value={this.value}\n              onInput={() => this.handleInput()}\n              placeholder={this.placeholder}\n              maxlength={this.maxlength}\n              class={\n                `${this.icon ? 'icon' : \"\"}\n                ${this.error ? 'error' : \"\"} \n              ${this.size === \"s\" ? \"input-s\" : \"\"}\n              ${this.success ? \"success\" : \"\"}`} />\n\n              { (this.showDeleteIcon && this.value) && (\n                <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n              )}\n          </div>\n          {this.caption && !this.error &&\n            <div class={`textInput__bottom-wrapper-caption ${this.disabled ? 'disabled' : \"\"}`}>\n              {this.caption}\n            </div>}\n          {this.error &&\n            <div class=\"textInput__bottom-wrapper-caption error\">\n              {this.caption}\n            </div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,2 +0,0 @@
-import{r as e,c as o,h as i,g as t}from"./p-b7a462e5.js";const n=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.dropdown-item:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.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 s=n;const d=class{constructor(i){e(this,i);this.ifxDropdownItem=o(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(){const e=this.href!==undefined&&this.href!==null&&this.href!=="";const o={class:`dropdown-item ${this.size==="s"?"small":""} ${this.hide?"hide":""}`,onClick:()=>this.handleEventEmission(),role:"menuitem"};if(!e)o.tabIndex=0;return i("a",Object.assign({key:"8c3181f70b9263475ece29eb06e6363d8d022d1d"},o,e?{href:this.href,target:this.target}:{}),this.icon&&i("ifx-icon",{key:"39d3b51a44e783e2ddd9cc2ecd105cd527449de9",class:"icon",icon:this.icon}),i("span",{key:"bc073b63fc18557f41143a4e201d93fd3d024a0e"},i("slot",{key:"bc4e3e17a343248dc565a884af34345e191fafa9"})))}get el(){return t(this)}};d.style=s;export{d as ifx_dropdown_item};
-//# sourceMappingURL=p-472d9695.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as e,h as r}from"./p-b7a462e5.js";const s=":host{display:inline-block;cursor:pointer}";const o=s;const t=class{constructor(r){e(this,r);this.isOpen=false}render(){return r("slot",{key:"ef3ea59efc3e4cd4779f4e8dc50fae826c760015"})}};t.style=o;export{t as ifx_dropdown_trigger};
-//# sourceMappingURL=p-571e0df8.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as t,g as o}from"./p-b7a462e5.js";const s=":host{position:relative;z-index:1000}.dropdown-menu{display:none;visibility:hidden;flex-direction:column;width:224px;max-height:289px;min-width:224px;overflow-y:auto;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 4px;font-family:var(--ifx-font-family)}.dropdown-menu.small{max-height:266px;max-width:186px;overflow-y:auto}.dropdown-menu.hideTopPadding{padding-top:0px}.dropdown-menu.show{display:flex;visibility:visible}";const d=s;const n=class{constructor(t){i(this,t);this.menuSize=e(this,"menuSize",7);this.ifxDropdownMenuItem=e(this,"ifxDropdownMenuItem",7);this.isOpen=false;this.size="l";this.hideTopPadding=false;this.filteredItems=[]}handleMenuFilter(i){const e=i.detail;this.filterDropdownItems(e)}handleDropdownItemValueEmission(i){this.ifxDropdownMenuItem.emit(i.detail)}filterDropdownItems(i){const e=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));let t,o;let s=i.toUpperCase();for(let i=0;i<e.length;i++){t=e[i];o=t.textContent||t.innerText;if(o.toUpperCase().indexOf(s)>-1){t.setAttribute("hide",false)}else{t.setAttribute("hide",true)}}}componentWillUpdate(){this.menuSize.emit(this.size)}componentWillLoad(){this.filteredItems=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));const i=this.el.querySelector("ifx-search-field");const e=this.el.querySelector("ifx-dropdown-header");if(i||e){this.hideTopPadding=true}else this.hideTopPadding=false}render(){return t("div",{key:"b9d6e51e53529ca6a57c45f0b9aa432afa8dd8c6",class:`dropdown-menu \n      ${this.isOpen?"show":""} \n      ${this.hideTopPadding?"hideTopPadding":""}\n      ${this.size==="s"?"small":""}`},t("slot",{key:"9d49836883d453647c6c3e146f177cdf00337ffc"}))}get el(){return o(this)}};n.style=d;export{n as ifx_dropdown_menu};
-//# sourceMappingURL=p-8ecd6403.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as a,g as e}from"./p-b7a462e5.js";const o=":host{display:block}";const r=o;const i=class{constructor(a){t(this,a);this.tabHeaderChange=s(this,"tabHeaderChange",7);this.icon="";this.iconPosition="left"}componentWillUpdate(){this.tabHeaderChange.emit(this.header)}render(){return a("slot",{key:"bada6a68fb9100b7744465f11956441664345dc0"})}get el(){return e(this)}};i.style=r;export{i as ifx_tab};
-//# sourceMappingURL=p-96426434.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as e,h as t,g as r}from"./p-b7a462e5.js";const s=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{position:relative}.sidebar__title{width:100%;height:fit-content;border-top:1px solid #EEEDED;padding:12px 0}.sidebar__title.no-top-border{border-top:none}.sidebar__title-label{height:20px;font:600 0.875rem/1.25rem "Source Sans 3";text-transform:uppercase;color:#575352;letter-spacing:3px}';const i=s;const o=class{constructor(t){e(this,t)}render(){return t("div",{key:"c793d744377f6f42ab3bb06af308d618be5b61bc",class:"sidebar__title"},t("div",{key:"4bdab2724a633d02b02ef218ed3894bac28888ed",class:"sidebar__title-label"},t("slot",{key:"8945c7f1d9cdbde7465c121eef6e3c7f7217e9d1"})))}get el(){return r(this)}};o.style=i;export{o as ifx_sidebar_title};
-//# sourceMappingURL=p-a0b60618.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s,g as i}from"./p-b7a462e5.js";import{d as o,t as r}from"./p-08c92877.js";import{i as a}from"./p-1ecafb97.js";const n=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.group{display:flex;flex-direction:column;justify-content:space-between}.group__label{font-size:1rem;line-height:1.5rem;font-weight:400;font-family:"Source Sans 3"}.group__label:empty{display:none}.group__label .required{margin-left:4px}.group__label .required.error{color:#CD002F}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{margin-top:4px;display:flex;align-items:center;gap:8px;font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;color:#1D1D1D;font-family:"Source Sans 3"}.group__caption.error{color:#CD002F}';const l=n;const c=class{constructor(s){e(this,s);this.ifxChange=t(this,"ifxChange",7);this.caption="";this.label="";this.size="regular";this.required=false;this.error=false;this.selectedValue=""}onSegmentSelect(e){const{previousValue:t,selectedValue:s}=this.unselectPreviousSegment(e.detail);this.selectedValue=s;this.ifxChange.emit({previousValue:t,selectedValue:s})}unselectPreviousSegment(e){let t;let s;const i=this.getSegments();i.forEach((i=>{if(i.selected){if(i.segmentIndex!==e){i.selected=false;t=i.value}else{s=i.value}}}));return{previousValue:t,selectedValue:s}}getSegments(){return this.SegmentedControl.querySelectorAll("ifx-segment")}setActiveSegment(){const e=this.getSegments();let t=false;e.forEach(((e,s)=>{e.segmentIndex=s;if(t){if(e.selected)e.selected=false}else{if(e.selected){t=true;this.selectedValue=e.value}}}))}setSegmentSize(){const e=this.getSegments();e.forEach((e=>{e.shadowRoot.querySelector(".segment").classList.add(`segment--${this.size}`)}))}async componentDidLoad(){if(!a(this.SegmentedControl)){const e=o();r("ifx-segmented-control",await e)}this.setActiveSegment()}render(){return s("div",{key:"6d8c987f534974c576c1af95df23f93a121cd2bc","aria-value":this.selectedValue,"aria-label":"segmented control",class:"group"},s("div",{key:"90e5ed0aa1896c6641007b156fa11c18d2bbe51e",class:"group__label"},this.label.trim(),this.required&&s("span",{key:"4ee174ef04055642eda78f6d8a4acfb967ad7e79",class:`required ${this.error?"error":""}`}," * ")),s("div",{key:"7ff6aba58cbcc25d6d8193b6db124eaf617fb94a",class:"group__controls"},s("slot",{key:"b5c4bfe47377a36f68fa147250e68b9931632f9d"})),this.caption.trim()&&s("div",{key:"17ac2cece6749b3ab0e6f1f590b97b2157e45cd4",class:`group__caption ${this.error?"error":""}`},s("ifx-icon",{key:"2094921f25ad602d2c3ef73d6c3797a7378c9837",icon:"c-info-16"})," ",this.caption.trim()))}componentDidRender(){this.setSegmentSize()}get SegmentedControl(){return i(this)}};c.style=l;export{c as ifx_segmented_control};
-//# sourceMappingURL=p-ae34c255.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["segmentedControlCss","IfxSegmentedControlStyle0","SegmentedControl","constructor","hostRef","this","caption","label","size","required","error","selectedValue","onSegmentSelect","event","previousValue","unselectPreviousSegment","detail","ifxChange","emit","newSelectedIndex","segments","getSegments","forEach","control","selected","segmentIndex","value","querySelectorAll","setActiveSegment","activeSegmentedControlFound","idx","setSegmentSize","shadowRoot","querySelector","classList","add","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","key","class","trim","icon","componentDidRender"],"sources":["src/components/segmented-control/segmented-control.scss?tag=ifx-segmented-control&encapsulation=shadow","src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.group {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n\n.group__label {\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    font-weight: tokens.$ifxFontWeightRegular;\n    font-family: tokens.$ifxFontFamilyBody;\n    \n    &:empty {\n        display: none;\n    }\n\n    & .required {\n        margin-left: 4px;\n\n        &.error {\n            color: tokens.$ifxColorRed500;\n        }\n    }\n}\n\n.group__controls {\n    display: flex;\n    flex-wrap: wrap;\n}\n\n.group__controls ::slotted(*) {\n    margin-left: -1px;\n    margin-top: -1px;\n}\n\n.group__caption {\n    margin-top: tokens.$ifxSpace50;\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    font-style: normal;\n    font-weight: tokens.$ifxFontWeightRegular;\n    font-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\n    color: tokens.$ifxColorBaseBlack;\n    font-family: tokens.$ifxFontFamilyBody;\n\n    &.error {\n            color: tokens.$ifxColorRed500;\n        }\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component ({\n    tag: 'ifx-segmented-control',\n    styleUrl: 'segmented-control.scss',\n    shadow: true\n})\n\nexport class SegmentedControl {\n    @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n    @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n    @Prop() caption: string = '';\n    @Prop() label: string = '';\n    @Prop() size: 'regular' | 'small' = 'regular';\n    @Prop() required: boolean = false;\n    @Prop() error: boolean = false;\n\n\n    @Listen('segmentSelect')\n    onSegmentSelect(event: CustomEvent) {\n        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n        this.selectedValue = selectedValue;\n        this.ifxChange.emit({ previousValue, selectedValue });\n    }\n\n    private selectedValue: string = '';\n\n    unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n        let previousValue: string;\n        let selectedValue: string;\n\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            if (control.selected) {\n                if (control.segmentIndex !== newSelectedIndex) {\n                    control.selected = false;\n                    previousValue = control.value;\n                } else {\n                    selectedValue = control.value;\n                }\n            }\n        })\n\n        return { previousValue, selectedValue };\n    }\n\n    getSegments(): NodeList {\n        return this.SegmentedControl.querySelectorAll('ifx-segment');\n    }\n\n    setActiveSegment(): void {\n        const segments: NodeList = this.getSegments();\n        let activeSegmentedControlFound = false;\n        segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n            control.segmentIndex = idx;\n            if (activeSegmentedControlFound) {\n                if (control.selected) control.selected = false;\n            } else {\n                if (control.selected) {\n                    activeSegmentedControlFound = true;\n                    this.selectedValue = control.value;\n                }\n            }\n        });\n    }\n\n    setSegmentSize(): void {\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n        });\n    }\n\n    async componentDidLoad() {\n        if(!isNestedInIfxComponent(this.SegmentedControl)) { \n            const framework = detectFramework();\n            trackComponent('ifx-segmented-control', await framework)\n        }\n        this.setActiveSegment();\n    }\n\n    render() {\n        return (\n            <div aria-value={this.selectedValue} aria-label='segmented control' class=\"group\">\n                <div class='group__label'>\n                    { this.label.trim() }\n                    { this.required && <span class={`required ${this.error ? 'error' : ''}`}> * </span> }\n                </div>\n                \n                <div class='group__controls'>\n                    <slot />\n                </div>\n                \n                {\n                    this.caption.trim() &&\n                    <div class={`group__caption ${this.error ? 'error' : ''}`}>\n                        <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    componentDidRender() {\n        this.setSegmentSize();\n    }\n}"],"mappings":"wIAAA,MAAMA,EAAsB,+pBAC5B,MAAAC,EAAeD,E,MCUFE,EAAgB,MAN7B,WAAAC,CAAAC,G,+CAWYC,KAAAC,QAAkB,GAClBD,KAAAE,MAAgB,GAChBF,KAAAG,KAA4B,UAC5BH,KAAAI,SAAoB,MACpBJ,KAAAK,MAAiB,MAUjBL,KAAAM,cAAwB,E,CANhC,eAAAC,CAAgBC,GACZ,MAAMC,cAAEA,EAAaH,cAAEA,GAAkBN,KAAKU,wBAAwBF,EAAMG,QAC5EX,KAAKM,cAAgBA,EACrBN,KAAKY,UAAUC,KAAK,CAAEJ,gBAAeH,iB,CAKzC,uBAAAI,CAAwBI,GACpB,IAAIL,EACJ,IAAIH,EAEJ,MAAMS,EAAqBf,KAAKgB,cAChCD,EAASE,SAASC,IACd,GAAIA,EAAQC,SAAU,CAClB,GAAID,EAAQE,eAAiBN,EAAkB,CAC3CI,EAAQC,SAAW,MACnBV,EAAgBS,EAAQG,K,KACrB,CACHf,EAAgBY,EAAQG,K,MAKpC,MAAO,CAAEZ,gBAAeH,gB,CAG5B,WAAAU,GACI,OAAOhB,KAAKH,iBAAiByB,iBAAiB,c,CAGlD,gBAAAC,GACI,MAAMR,EAAqBf,KAAKgB,cAChC,IAAIQ,EAA8B,MAClCT,EAASE,SAAQ,CAACC,EAAgCO,KAC9CP,EAAQE,aAAeK,EACvB,GAAID,EAA6B,CAC7B,GAAIN,EAAQC,SAAUD,EAAQC,SAAW,K,KACtC,CACH,GAAID,EAAQC,SAAU,CAClBK,EAA8B,KAC9BxB,KAAKM,cAAgBY,EAAQG,K,MAM7C,cAAAK,GACI,MAAMX,EAAqBf,KAAKgB,cAChCD,EAASE,SAASC,IACdA,EAAQS,WAAWC,cAAc,YAAYC,UAAUC,IAAI,YAAY9B,KAAKG,OAAO,G,CAI3F,sBAAM4B,GACF,IAAIC,EAAuBhC,KAAKH,kBAAmB,CAC/C,MAAMoC,EAAYC,IAClBC,EAAe,8BAA+BF,E,CAElDjC,KAAKuB,kB,CAGT,MAAAa,GACI,OACIC,EAAA,OAAAC,IAAA,wDAAiBtC,KAAKM,cAAa,aAAa,oBAAoBiC,MAAM,SACtEF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACLvC,KAAKE,MAAMsC,OACXxC,KAAKI,UAAYiC,EAAA,QAAAC,IAAA,2CAAMC,MAAO,YAAYvC,KAAKK,MAAQ,QAAU,MAAI,QAG3EgC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACPF,EAAA,QAAAC,IAAA,8CAIAtC,KAAKC,QAAQuC,QACbH,EAAA,OAAAC,IAAA,2CAAKC,MAAO,kBAAkBvC,KAAKK,MAAQ,QAAU,MACjDgC,EAAA,YAAAC,IAAA,2CAAUG,KAAK,cAAuB,IAAGzC,KAAKC,QAAQuC,Q,CAO1E,kBAAAE,GACI1C,KAAK0B,gB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,d as t,h as a,g as s}from"./p-b7a462e5.js";const i="*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}";const r=i;const n=class{constructor(a){e(this,a);this.tableTemplate=t(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);this.wizardTemplate=t(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`)}toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".templates__wrapper").querySelectorAll("ifx-template");t.forEach((t=>{t.toggleTemplate(e)}))}handleError(e){const t=this.el.shadowRoot.querySelector(".alert__wrapper");if(e.detail){t.classList.add("show")}else{t.classList.remove("show")}}filterTemplates(e){const t=this.el.shadowRoot.querySelector(".templates__title");const a=this.el.shadowRoot.querySelector(".back__btn-wrapper");if(e.detail){t.classList.add("hide");if(e.detail!=="details"){a.classList.add("show")}this.toggleTemplate(e.detail)}else{t.classList.remove("hide");a.classList.remove("show");this.toggleTemplate(null)}}closeAlert(){const e=this.el.shadowRoot.querySelector(".alert__wrapper");e.classList.remove("show")}render(){return a("div",{key:"644982178421a6fdd076291a4799a3086132ff58",class:"templates__container"},a("div",{key:"87474b32cbb5bd4eff82368bde5c57ac52c8a125",class:"back__btn-wrapper"},a("ifx-icon-button",{key:"1823cb8f72943e82f8cb2c92b65e9df23cc54254",onClick:()=>this.filterTemplates(false),shape:"round",variant:"tertiary",icon:"arrow-left-16",target:"_blank",size:"m"}),a("div",{key:"9f3cc0376841c0d3339b33767ba02587f13436f4",class:"alert__wrapper"},a("ifx-alert",{key:"89c93f1cd43eb94f786577f2e15b595898f8b708",onClick:()=>this.closeAlert(),"aria-live":"assertive",variant:"danger",icon:"c-info-16"},"All fields are mandatory"))),a("h2",{key:"293283d741b61597cd1a4881f981d5e6b94b9d2a",class:"templates__title"},"Choose your template"),a("div",{key:"4fb6a4006758489861ea43f555ef08020cfab07c",class:"templates__wrapper"},a("ifx-template",{key:"a487b7e7bd52fd7b6d893e498daa98f4a92ff85d",name:"template-01",thumbnail:this.tableTemplate}),a("ifx-template",{key:"60c2179fc2a938912b759bba2620e624864a6a54",name:"template-02",thumbnail:this.wizardTemplate})))}static get assetsDirs(){return["assets"]}get el(){return s(this)}};n.style=r;export{n as ifx_templates_ui};
-//# sourceMappingURL=p-b960034e.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as e,h as o,g as a}from"./p-b7a462e5.js";const i=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.col{display:flex;flex-direction:column;gap:12px;padding-right:8px;color:#1D1D1D;font-family:var(--ifx-font-family)}.col ::slotted([slot=title]){box-sizing:border-box;font-weight:600;font-size:1rem;line-height:1.5rem;margin:0;padding:0}.col span{display:flex;flex-direction:column;gap:12px;color:#1D1D1D}.col span ::slotted([slot=link]){box-sizing:border-box;font-weight:400;font-size:1rem;line-height:1.5rem}';const t=i;const l=class{constructor(o){e(this,o)}render(){return o("div",{key:"7aa95b8a15301c23ac2abc4cc3b3a8b819751094",class:"col"},o("slot",{key:"fa29a8a160f7e1b8630d7265fbcdaa05120299be",name:"title"}),o("span",{key:"eac7c00dbec5752a416df5355f2bf4b1f4980b10","aria-label":"navigation link"},o("slot",{key:"df076a7b986e7318f38916ad6d4e7a24bf2111cc",name:"link"})))}get el(){return a(this)}};l.style=t;export{l as ifx_footer_column};
-//# sourceMappingURL=p-baa14bf5.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as t,h as i,g as o}from"./p-b7a462e5.js";import{d as e,t as n}from"./p-08c92877.js";import{i as r}from"./p-1ecafb97.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;line-height:1.5rem;font-weight:400;font-family:"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-size:0.75rem;line-height:1rem;font-family:"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=a;const c=class{constructor(i){t(this,i);this.errorStates=new Map;this.alignment="vertical";this.groupLabelText="Group Label Text";this.hasErrors=false;this.handleSlotChange=()=>{this.initializeState()}}handleRadioButtonError(t){const i=t.target;if(i.tagName==="ifx-radio-button"){this.errorStates.set(i,t.detail);this.updateHasErrors()}}async setGroupError(t){const i=Array.from(this.el.querySelectorAll("ifx-radio-button"));i.forEach((i=>{i.error=t}))}componentWillLoad(){this.initializeState()}async componentDidLoad(){if(!r(this.el)){const t=e();n("ifx-radio-button-group",await t)}}initializeState(){this.errorStates.clear();const t=Array.from(this.el.querySelectorAll("ifx-radio-button"));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 i("div",{key:"110dd90eedde21f29a02bf7844c046cc1b5de641",class:"radio-button-group-container"},this.showGroupLabel?i("div",{class:"group-label"},this.groupLabelText," *"):"",i("div",{key:"891bd69906ffeefeb2641e72f4d468c100f43b90",class:`radio-button-group ${this.alignment} ${this.size}`},i("slot",{key:"32b754f9b0b47fb53bdaeb825740114b7b6fe737",onSlotchange:this.handleSlotChange})),this.showCaption?i("div",{class:`caption ${this.hasErrors?"error":"default"}`},this.showCaptionIcon?i("div",{class:"caption-icon"},i("ifx-icon",{icon:"c-info-16"})):"",i("div",{class:"caption-text"},this.captionText)):"")}static get formAssociated(){return true}get el(){return o(this)}};c.style=s;export{c as ifx_radio_button_group};
-//# sourceMappingURL=p-c26d6099.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["radioButtonGroupCss","IfxRadioButtonGroupStyle0","RadioButtonGroup","constructor","hostRef","this","errorStates","Map","alignment","groupLabelText","hasErrors","handleSlotChange","initializeState","handleRadioButtonError","event","radioButton","target","tagName","set","detail","updateHasErrors","setGroupError","error","radioButtons","Array","from","el","querySelectorAll","forEach","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","clear","has","values","some","render","h","key","class","showGroupLabel","size","onSlotchange","showCaption","showCaptionIcon","icon","captionText"],"sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.radio-button-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.radio-button-group {\n    display: flex;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\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-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    font-weight: tokens.$ifxFontWeightRegular;\n    font-family: tokens.$ifxFontFamilyBody;\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-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\n    font-family: tokens.$ifxFontFamilyBody;\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';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n    tag: 'ifx-radio-button-group',\n    styleUrl: 'radio-button-group.scss',\n    shadow: true,\n    formAssociated: true\n})\n\nexport class RadioButtonGroup {\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    handleRadioButtonError(event: CustomEvent) {\n        const radioButton = event.target as HTMLElement;\n        if (radioButton.tagName === 'ifx-radio-button') {\n            this.errorStates.set(radioButton, event.detail);\n            this.updateHasErrors();\n        }\n    }\n\n     // Method to set the error state of all radio-butttons in the group\n      @Method()\n      async setGroupError(error: boolean) {\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n          (radioButton as any).error = error;\n        });\n      }\n\n    componentWillLoad() {\n        this.initializeState();\n    }\n\n    async componentDidLoad() { \n        if(!isNestedInIfxComponent(this.el)) { \n            const framework = detectFramework();\n            trackComponent('ifx-radio-button-group', await framework)\n        }\n    }\n\n    handleSlotChange = () => {\n        this.initializeState();\n    };\n\n    private initializeState() {\n        this.errorStates.clear();\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n            if (!this.errorStates.has(radioButton)) {\n                this.errorStates.set(radioButton, (radioButton 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='radio-button-group-container'>\n                {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n                <div class={`radio-button-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":"iIAAA,MAAMA,EAAsB,o5BAC5B,MAAAC,EAAeD,E,MCWFE,EAAgB,MAP7B,WAAAC,CAAAC,G,UAQYC,KAAAC,YAAyC,IAAIC,IAG7CF,KAAAG,UAAuC,WAGvCH,KAAAI,eAAyB,mBAIxBJ,KAAAK,UAAqB,MA+B9BL,KAAAM,iBAAmB,KACfN,KAAKO,iBAAiB,C,CA7B1B,sBAAAC,CAAuBC,GACnB,MAAMC,EAAcD,EAAME,OAC1B,GAAID,EAAYE,UAAY,mBAAoB,CAC5CZ,KAAKC,YAAYY,IAAIH,EAAaD,EAAMK,QACxCd,KAAKe,iB,EAMX,mBAAMC,CAAcC,GAClB,MAAMC,EAAeC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,qBACzDJ,EAAaK,SAASb,IACnBA,EAAoBO,MAAQA,CAAK,G,CAIxC,iBAAAO,GACIxB,KAAKO,iB,CAGT,sBAAMkB,GACF,IAAIC,EAAuB1B,KAAKqB,IAAK,CACjC,MAAMM,EAAYC,IAClBC,EAAe,+BAAgCF,E,EAQ/C,eAAApB,GACJP,KAAKC,YAAY6B,QACjB,MAAMZ,EAAeC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,qBACzDJ,EAAaK,SAASb,IAClB,IAAKV,KAAKC,YAAY8B,IAAIrB,GAAc,CACpCV,KAAKC,YAAYY,IAAIH,EAAcA,EAAoBO,OAAS,M,KAGxEjB,KAAKe,iB,CAGD,eAAAA,GACJf,KAAKK,UAAYc,MAAMC,KAAKpB,KAAKC,YAAY+B,UAAUC,MAAMhB,GAAUA,G,CAG3E,MAAAiB,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gCACNrC,KAAKsC,eAAiBH,EAAA,OAAKE,MAAM,eAAerC,KAAKI,eAAc,MAAY,GAChF+B,EAAA,OAAAC,IAAA,2CAAKC,MAAO,sBAAsBrC,KAAKG,aAAaH,KAAKuC,QACrDJ,EAAA,QAAAC,IAAA,2CAAMI,aAAcxC,KAAKM,oBAE5BN,KAAKyC,YACFN,EAAA,OAAKE,MAAO,WAAWrC,KAAKK,UAAY,QAAU,aAC7CL,KAAK0C,gBAAkBP,EAAA,OAAKE,MAAM,gBAAeF,EAAA,YAAUQ,KAAK,eAC7C,GACpBR,EAAA,OAAKE,MAAM,gBAAgBrC,KAAK4C,cAC1B,G","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,h as e,g as i,c as r}from"./p-b7a462e5.js";import{d as n,t as o}from"./p-08c92877.js";import{i as s}from"./p-1ecafb97.js";import{c as a}from"./p-5cdc6210.js";const p=":host{display:inline-block}.spinner{position:relative;width:40px;height:40px}.spinner.s{width:24px;height:24px}.border{box-sizing:border-box;position:absolute;width:100%;height:100%;border:4px solid transparent;border-top-color:#0A8276;border-left-color:#0A8276;border-right-color:#0A8276;border-top-left-radius:1px;border-top-right-radius:1px;border-radius:50%;animation:spin 2s linear infinite}.border.inverted{border-top-color:#FFFFFF;border-left-color:#FFFFFF;border-right-color:#FFFFFF}.semiconductor{width:100%;height:100%;animation:spin 2s linear infinite}.semiconductor svg{fill:#0A8276}.semiconductor.inverted svg{fill:#FFFFFF}.semiconductor.s svg{width:24px;height:24px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";const l=p;const c=class{constructor(e){t(this,e);this.inverted=false}async componentDidLoad(){if(!s(this.el)){const t=n();o("ifx-spinner",await t)}}render(){return e("div",{key:"18d2d1ce1c863d1c8cfcb6888621ab2ef5f0769f","aria-label":"spinner indicating a loading process",class:this.getClassNames()},e("div",{key:"cd4d27b27c2a3544b746fa6631f5b90ac2140269",class:`${this.variant!=="brand"?"border":""} ${this.inverted?"inverted":""}`}),this.variant==="brand"&&e("div",{key:"5964648d2c5a48ba8992662d7bb5b0fc51379df9",class:`semiconductor ${this.inverted?"inverted":""} ${this.getSizeClass()}`},e("svg",{key:"7f618989815dfed9b44180454a0b8f9f20cd1ebb",width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{key:"4580aaad4463dc35af5ca5b02aade71c4f0cb9c9",id:"spinner/conductor"},e("path",{key:"9d26db625dc6bca17a789e2ca44cec8342171f65",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"})))))}getSizeClass(){return`${this.size}`==="s"?"s":""}getClassNames(){return a("spinner",this.size&&`spinner ${this.getSizeClass()}`)}get el(){return i(this)}};c.style=l;const d=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container.disabled .textInput__top-wrapper label{color:#575352}.textInput__container.disabled .textInput__bottom-wrapper input{border:1px solid #575352;background-color:#EEEDED}.textInput__container.disabled .textInput__bottom-wrapper input::placeholder{font-size:0.875rem;color:#575352}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;font-family:"Source Sans 3";display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.textInput__container .textInput__top-wrapper label .optional-required{margin-left:4px}.textInput__container .textInput__top-wrapper label .optional{margin-left:4px}.textInput__container .textInput__top-wrapper label .required{margin-left:4px}.textInput__container .textInput__top-wrapper label .required.error{color:#CD002F}.textInput__container .input-container{position:relative;display:flex;align-items:center;width:100%}.textInput__container .textInput__bottom-wrapper{flex-grow:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper input{width:100%;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;height:40px;background-color:#FFFFFF;color:#1D1D1D;font-family:var(--ifx-font-family);font-size:1rem;line-height:1.5rem;border:1px solid #8D8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0;text-overflow:ellipsis}.textInput__container .textInput__bottom-wrapper input.input-s{height:36px;font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.input-s::placeholder{font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.icon{padding-left:40px}.textInput__container .textInput__bottom-wrapper input.error{border:1px solid #CD002F}.textInput__container .textInput__bottom-wrapper input.error:focus{outline:none}.textInput__container .textInput__bottom-wrapper input.success{border:1px solid #4CA460}.textInput__container .textInput__bottom-wrapper input.success:focus{outline:none}.textInput__container .textInput__bottom-wrapper input:focus:not(.error,.success){outline:none;border:1px solid #0A8276}.textInput__container .textInput__bottom-wrapper input:hover:not(:disabled,:focus,.error,.success){border:1px solid #575352}.textInput__container .textInput__bottom-wrapper input::placeholder{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#8D8786;flex:none;order:1;flex-grow:1}.textInput__container .textInput__bottom-wrapper .input-icon{position:absolute;top:50%;transform:translateY(-50%);left:16px;transition:0.3s;color:#8D8786}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;color:#1D1D1D;font-family:"Source Sans 3";flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error{color:#CD002F}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled{color:#575352}.textInput__container .delete-icon{position:absolute;right:16px}.textInput__container .delete-icon :hover{cursor:pointer}';const f=d;const h=class{constructor(e){t(this,e);this.ifxInput=r(this,"ifxInput",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.placeholder="Placeholder";this.value="";this.error=false;this.label="";this.icon="";this.caption="";this.size="m";this.required=false;this.optional=false;this.success=false;this.disabled=false;this.showDeleteIcon=false;this.autocomplete="on";this.type="text";this.internalId="text-field"}valueWatcher(t){if(t!==this.inputElement.value){this.inputElement.value=t}}async reset(){this.value="";this.inputElement.value=""}handleDeleteContent(){this.reset();this.ifxInput.emit(this.value)}handleInput(){const t=this.inputElement.value;this.value=t;this.internals.setFormValue(t);this.ifxInput.emit(this.value)}handleTypeProp(){this.internalType=this.type==="text"||this.type==="password"?this.type:"text"}formResetCallback(){this.internals.setValidity({});this.internals.setFormValue("")}componentWillLoad(){this.handleTypeProp()}async componentDidLoad(){if(!s(this.el)){const t=n();o("ifx-text-field",await t)}}render(){return e("div",{key:"b3c76af41654e98bdb7fd7693a6de29900c934e3","aria-label":"a text field for user input","aria-value":this.value,"aria-disabled":this.disabled,class:`textInput__container ${this.disabled?"disabled":""}`},e("div",{key:"30cc8344642dd71627c8e842d53dc9e98d65a190",class:"textInput__top-wrapper"},e("label",{key:"e5c0f480535ce2ae35c64b725b5d22993e832bac",htmlFor:this.internalId},e("slot",{key:"d769bb184a3fe65b0f4e885bcdb2d0a028653d63"}),this.optional&&this.required?e("span",{class:"optional-required"},"(optional) *"):this.optional?e("span",{class:"optional"},"(optional)"):this.required?e("span",{class:`required ${this.error?"error":""}`},"*"):null)),e("div",{key:"f8325fb215c46bfc0ca3c8ff1af0f100160dce99",class:"textInput__bottom-wrapper"},e("div",{key:"60f7ffa56e8fee8d5f3f01b0b1522662889d987e",class:"input-container"},this.icon&&e("ifx-icon",{key:"40bbce1bfc6652b78c5005b27c49b599b7bd8dd7",class:"input-icon",icon:this.icon}),e("input",{key:"960d2fc2ed78171e7850df9d7770e6e8fa686ae6",ref:t=>this.inputElement=t,disabled:this.disabled,autocomplete:this.autocomplete,type:this.internalType,id:this.internalId,value:this.value,onInput:()=>this.handleInput(),placeholder:this.placeholder,maxlength:this.maxlength,class:`${this.icon?"icon":""}\n                ${this.error?"error":""} \n              ${this.size==="s"?"input-s":""}\n              ${this.success?"success":""}`}),this.showDeleteIcon&&this.value&&e("ifx-icon",{key:"6717894cbe25ff5ce78d52d71afabec092ce2fe9",class:"delete-icon",icon:"cRemove16",onClick:()=>this.handleDeleteContent()})),this.caption&&!this.error&&e("div",{key:"3d608700a1af663cbe806e769334a7f4d65cee44",class:`textInput__bottom-wrapper-caption ${this.disabled?"disabled":""}`},this.caption),this.error&&e("div",{key:"25a7b2e58d3b458842a930577f3c027ede116421",class:"textInput__bottom-wrapper-caption error"},this.caption)))}static get formAssociated(){return true}get el(){return i(this)}static get watchers(){return{value:["valueWatcher"]}}};h.style=f;export{c as ifx_spinner,h as ifx_text_field};
-//# sourceMappingURL=p-d1552ee5.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["spinnerCss","IfxSpinnerStyle0","Spinner","constructor","hostRef","this","inverted","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","h","key","class","getClassNames","variant","getSizeClass","width","height","viewBox","fill","xmlns","id","d","size","classNames","textFieldCss","IfxTextFieldStyle0","TextField","placeholder","value","error","label","icon","caption","required","optional","success","disabled","showDeleteIcon","autocomplete","type","internalId","valueWatcher","newValue","inputElement","reset","handleDeleteContent","ifxInput","emit","handleInput","query","internals","setFormValue","handleTypeProp","internalType","formResetCallback","setValidity","componentWillLoad","htmlFor","ref","onInput","maxlength","onClick"],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx","src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n\n}\n\n.spinner {\n  position: relative;\n  width: tokens.$ifxSize500;\n  height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n  width: tokens.$ifxSize300;\n  height: tokens.$ifxSize300;\n}\n\n.border {\n  box-sizing: border-box;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 4px solid transparent;\n  border-top-color: tokens.$ifxColorOcean500;\n  border-left-color: tokens.$ifxColorOcean500;\n  border-right-color: tokens.$ifxColorOcean500;\n  border-top-left-radius: 1px;\n  border-top-right-radius: 1px;\n  border-radius: 50%;\n  animation: spin 2s linear infinite;\n\n  &.inverted {\n    border-top-color: tokens.$ifxColorBaseWhite;\n    border-left-color: tokens.$ifxColorBaseWhite;\n    border-right-color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.semiconductor {\n  width: 100%;\n  height: 100%;\n  animation: spin 2s linear infinite;\n\n  & svg {\n    fill: tokens.$ifxColorOcean500;\n  }\n\n  &.inverted {\n    & svg {\n      fill: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.s {\n    & svg {\n      width: tokens.$ifxSize300;\n      height: tokens.$ifxSize300;\n    }\n  }\n}\n\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() el;\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-spinner', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\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\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.textInput__container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  width: 100%;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  &.disabled {\n    & .textInput__top-wrapper {\n      & label {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    & .textInput__bottom-wrapper {\n      input {\n        border: 1px solid tokens.$ifxColorEngineering500;\n        background-color: tokens.$ifxColorEngineering200;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          color: tokens.$ifxColorEngineering500;\n        }\n      }\n    }\n  }\n\n  & .textInput__top-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 0px;\n    gap: tokens.$ifxSpace50;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & label {\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightRegular;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      font-family: tokens.$ifxFontFamilyBody;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .optional-required {\n        margin-left: 4px;\n      }\n\n      & .optional {\n        margin-left: 4px;\n      }\n\n      & .required {\n        margin-left: 4px;\n        \n        &.error {\n          color: tokens.$ifxColorRed500;\n        }\n      }\n    }\n  }\n\n  .input-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n  }\n\n\n  & .textInput__bottom-wrapper {\n    flex-grow: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    gap: tokens.$ifxSpace50;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & input {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n      gap: tokens.$ifxSpace100;\n      height: tokens.$ifxSize500;\n      background-color: tokens.$ifxColorBaseWhite;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      border: 1px solid tokens.$ifxColorEngineering400;\n      border-radius: tokens.$ifxBorderRadius12;\n      flex: none;\n      order: 0;\n      align-self: stretch;\n      flex-grow: 0;\n      text-overflow: ellipsis;\n\n      &.input-s {\n        height: tokens.$ifxSize450;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          line-height: tokens.$ifxLineHeightS;\n        }\n\n      }\n\n      &.icon {\n        padding-left: tokens.$ifxSpace500;\n      }\n\n      &.error {\n        border: 1px solid tokens.$ifxColorRed500;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &.success {\n        border: 1px solid tokens.$ifxColorGreen500;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n\n      &:focus:not(.error, .success) {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      &:hover:not(:disabled, :focus, .error, .success) {\n        border: 1px solid tokens.$ifxColorEngineering500;\n      }\n\n      &::placeholder {\n        font-style: normal;\n        font-weight: tokens.$ifxFontWeightRegular;\n        font-size: tokens.$ifxFontSizeM;\n        line-height: tokens.$ifxLineHeightM;\n        color: tokens.$ifxColorEngineering400;\n        flex: none;\n        order: 1;\n        flex-grow: 1;\n      }\n    }\n\n    & .input-icon {\n      // Position the icon within the icon container\n      // Adjust the positioning as needed\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: tokens.$ifxSpace200;\n      /* Adjust this value to control the icon's left offset */\n      transition: .3s;\n      color: tokens.$ifxColorEngineering400;\n    }\n\n    & .textInput__bottom-wrapper-caption {\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightRegular;\n      font-size: tokens.$ifxFontSizeXs;\n      line-height: tokens.$ifxLineHeightXs;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: tokens.$ifxFontFamilyBody;\n      flex: none;\n      order: 1;\n      align-self: stretch;\n      flex-grow: 0;\n\n      &.error {\n        color: tokens.$ifxColorRed500;\n\n      }\n\n      &.disabled {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    \n  }\n  .delete-icon {\n    position: absolute;\n    right: tokens.$ifxSpace200;\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class TextField {\n  private inputElement: HTMLInputElement;\n  @Element() el;\n  @Prop() placeholder: string = \"Placeholder\"\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() error: boolean = false;\n  @Prop() label: string = \"\";\n  @Prop() icon: string = \"\";\n  @Prop() caption: string = \"\";\n  @Prop() size: string = 'm';\n  @Prop() required: boolean = false;\n  @Prop() optional: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() maxlength?: number;\n  @Prop() showDeleteIcon: boolean = false;\n  @Prop() autocomplete: string = 'on'\n  @Prop() type: 'text' | 'password' = 'text';\n  @Prop() internalId: string = \"text-field\"\n  @State() internalType: string;\n  @Event() ifxInput: EventEmitter<String>;\n  // @Prop({ reflect: true })\n  // resetOnSubmit: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.value = '';\n    this.inputElement.value = '';\n  }\n\n  handleDeleteContent() {\n    this.reset();\n    this.ifxInput.emit(this.value);\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.internals.setFormValue(query) // update form value\n    this.ifxInput.emit(this.value);\n  }\n\n  handleTypeProp() { \n   this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text'\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  componentWillLoad() { \n    this.handleTypeProp()\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-text-field', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n        <div class=\"textInput__top-wrapper\">\n          <label htmlFor={this.internalId}>\n            <slot></slot>\n            {this.optional && this.required ? (\n              <span class=\"optional-required\">(optional) *</span>\n            ) : this.optional ? (\n              <span class=\"optional\">(optional)</span>\n            ) : this.required ? (\n              <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n            ) : null}\n          </label>\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && (\n              <ifx-icon class='input-icon' icon={this.icon} />\n            )}\n            <input\n              ref={(el) => (this.inputElement = el)}\n              disabled={this.disabled}\n              autocomplete={this.autocomplete}\n              type={this.internalType}\n              id={this.internalId}\n              value={this.value}\n              onInput={() => this.handleInput()}\n              placeholder={this.placeholder}\n              maxlength={this.maxlength}\n              class={\n                `${this.icon ? 'icon' : \"\"}\n                ${this.error ? 'error' : \"\"} \n              ${this.size === \"s\" ? \"input-s\" : \"\"}\n              ${this.success ? \"success\" : \"\"}`} />\n\n              { (this.showDeleteIcon && this.value) && (\n                <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n              )}\n          </div>\n          {this.caption && !this.error &&\n            <div class={`textInput__bottom-wrapper-caption ${this.disabled ? 'disabled' : \"\"}`}>\n              {this.caption}\n            </div>}\n          {this.error &&\n            <div class=\"textInput__bottom-wrapper-caption error\">\n              {this.caption}\n            </div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r,h as o}from"./p-b7a462e5.js";const a=".dropdown-separator{height:1px;background-color:#EEEDED;margin:8px 16px}";const s=a;const e=class{constructor(o){r(this,o)}render(){return o("div",{key:"f842407a72dcfa69c2e05b821bab2f9ec3e2702f",class:"dropdown-separator"})}};e.style=s;export{e as ifx_dropdown_separator};
-//# sourceMappingURL=p-d4eff9d8.entry.js.map