@infineon/infineon-design-system-stencil 30.10.0--canary.1683.fe45f72105a11f62b600b213cc47953ca6da983c.0 → 30.10.0--canary.1690.ba52af7b19132ac2e9ab07b1d097d3a0d007941e.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["searchFieldCss","IfxSearchFieldStyle0","SearchField","this","handleInput","query","inputElement","value","ifxInput","emit","handleDelete","handleOutsideClick","event","path","composedPath","includes","isFocused","valueWatcher","newValue","focusInput","focus","componentWillUpdate","showDeleteIconInternalState","render","h","key","disabled","class","getWrapperClassNames","tabindex","onFocus","onClick","icon","ref","el","type","onInput","placeholder","maxlength","showDeleteIcon","getSizeClass","size","classNames"],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: tokens.$ifxColorBaseWhite;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n\n\n  .search-field__wrapper {\n    box-sizing: border-box;\n    height: tokens.$ifxSize500;\n    display: flex;\n    align-items: center;\n    border: 1px solid #8D8786;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    gap: tokens.$ifxSpace150;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n    position: relative;\n    width: 100%;\n    outline: none;\n    color: tokens.$ifxColorEngineering400;\n\n    &.focused {\n      border: 1px solid tokens.$ifxColorOcean500;\n\n      & ifx-icon {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3C3A39;\n    }\n\n    &:focus {\n      outline: none;\n      border: 1px solid #0A8276;\n    }\n\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\n    }\n\n    input[type='text'] {\n      font-style: normal;\n      font-weight: 400;\n      font-size: 16px;\n      //line-height: 24px;\n      color: #8D8786;\n      border: none;\n      width: 100%;\n      outline: none;\n      //height: 100%;\n      height: 16px;\n\n      &:focus {\n        outline: none;\n        color: #1d1d1d;\n      }\n\n      &:disabled {\n        background-color: #EEEDED;\n      }\n    }\n\n    &:has(input[disabled]) {\n      background-color: #EEEDED;\n    }\n  }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\n\n  @Prop() showDeleteIcon: boolean = false;\n  @State() showDeleteIconInternalState: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\n  @Prop() placeholder: string = \"Search...\";\n  @Prop() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n  \n\n\n\n  componentWillUpdate() {\n    if (this.value !== \"\") {\n      this.showDeleteIconInternalState = true;\n    } else this.showDeleteIconInternalState = false;\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\n          onClick={() => this.focusInput()}\n        >\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n          <input\n            ref={(el) => (this.inputElement = el)}\n            type=\"text\"\n            onInput={() => this.handleInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"],"mappings":"sFAAA,MAAMA,EAAiB,61CACvB,MAAAC,EAAeD,E,MCWFE,EAAW,M,4DA+BtBC,KAAAC,YAAc,KACZ,MAAMC,EAAQF,KAAKG,aAAaC,MAChCJ,KAAKI,MAAQF,EACbF,KAAKK,SAASC,KAAKN,KAAKI,MAAM,EAGhCJ,KAAAO,aAAe,KACbP,KAAKG,aAAaC,MAAQ,GAC1BJ,KAAKI,MAAQ,GACbJ,KAAKK,SAASC,KAAKN,KAAKI,MAAM,E,WAtCS,G,oBAGN,M,oBAED,M,iCACc,M,cACpB,M,UACL,I,eACO,M,iBACA,Y,eACD,I,CAG7B,kBAAAI,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,IAAKD,EAAKE,SAASZ,KAAKG,cAAe,CACrCH,KAAKa,UAAY,K,EAKrB,YAAAC,CAAaC,GACX,GAAIA,IAAaf,KAAKG,aAAaC,MAAO,CACxCJ,KAAKG,aAAaC,MAAQW,C,EAiB9B,UAAAC,GACEhB,KAAKG,aAAac,QAClBjB,KAAKa,UAAY,I,CAMnB,mBAAAK,GACE,GAAIlB,KAAKI,QAAU,GAAI,CACrBJ,KAAKmB,4BAA8B,I,MAC9BnB,KAAKmB,4BAA8B,K,CAG5C,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,gCAA+B,gBAAgBtB,KAAKuB,SAAQ,aAAcvB,KAAKI,MAAOoB,MAAM,gBAC1GH,EAAA,OAAAC,IAAA,2CAAKE,MAAOxB,KAAKyB,uBACfC,SAAU,EACVC,QAAS,IAAM3B,KAAKgB,aACpBY,QAAS,IAAM5B,KAAKgB,cAEpBK,EAAA,YAAAC,IAAA,2CAAUO,KAAK,YAAYL,MAAM,gBACjCH,EAAA,SAAAC,IAAA,2CACEQ,IAAMC,GAAQ/B,KAAKG,aAAe4B,EAClCC,KAAK,OACLC,QAAS,IAAMjC,KAAKC,cACpBiC,YAAalC,KAAKkC,YAClBX,SAAUvB,KAAKuB,SACfY,UAAWnC,KAAKmC,UAChB/B,MAAOJ,KAAKI,QAEbJ,KAAKoC,gBAAkBpC,KAAKmB,4BAC3BE,EAAA,YAAUQ,KAAK,YAAYL,MAAM,cAAcI,QAAS5B,KAAKO,eAE3D,M,CAMZ,YAAA8B,GACE,MAAO,GAAGrC,KAAKsC,SAAW,IACtB,0BACA,E,CAIN,oBAAAb,GACE,OAAOc,EACL,wBACA,yBAAyBvC,KAAKqC,iBAC9B,GAAGrC,KAAKa,UAAY,UAAY,K","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as i,h as o,a as n}from"./p-6b122987.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--warning{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--warning .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:flex-start;padding-top:2px}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}';const a=t;const f=class{constructor(o){i(this,o);this.icon=undefined;this.variant="success";this.linkText=undefined;this.linkHref=undefined;this.linkTarget="_blank"}getClassName(){switch(this.variant){case"success":return"ifx-notification__wrapper--success";case"warning":return"ifx-notification__wrapper--warning";case"error":return"ifx-notification__wrapper--error";default:return"ifx-notification__wrapper--success"}}render(){return o(n,{key:"34a1392c2507471c9bf219f7280e509161f50a24"},o("div",{key:"affa76beeb92783511eaa33598ac658aa491717b",class:"ifx-notification__wrapper "+this.getClassName()},o("div",{key:"57d2d2787cb71ac18c806c4511b806020c0518ec",class:"ifx-notification__icon"},o("ifx-icon",{key:"989bd140171ebcd000efb51971ae8d74786302f7",icon:this.icon})),o("div",{key:"d94b62c41921c98abebe7bc7e2d53681545fc83f",class:"ifx-notification__body"},o("div",{key:"5627e0c24b170eea649a37450004c063829ada64",class:"ifx-notification__slot"},o("slot",{key:"2452192f9c2679dd68c6e4eab317c07331dfc6b2"})),this.linkText&&this.linkHref&&o("div",{key:"3b4827404a0895c58bd3dff0fc6cc19d2e6c9fd2",class:"ifx-notification__link"},o("ifx-link",{key:"2eb74961455b1942b6382ec293b723e341112944",href:this.linkHref,target:this.linkTarget},this.linkText,o("ifx-icon",{key:"3bdd8be3b8a2e53b2adf994ceaba4199959840a1",icon:"arrow-right-16"}))))))}};f.style=a;export{f as ifx_notification};
-//# sourceMappingURL=p-775d187b.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["notificationCss","IfxNotificationStyle0","Notification","getClassName","this","variant","render","h","Host","key","class","icon","linkText","linkHref","href","target","linkTarget"],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  color: tokens.$ifxColorBaseBlack;\n\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n  &.ifx-notification__wrapper--success {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.ifx-notification__wrapper--warning {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOrange500;\n    }\n  }\n\n  &.ifx-notification__wrapper--error {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  & .ifx-notification__icon {\n    margin-right: tokens.$ifxSpace100;\n    display: flex;\n    align-self: flex-start;\n    padding-top: 2px;\n  }\n\n  & .ifx-notification__body {\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n\n    & .ifx-notification__slot {\n      flex-grow: 1;\n    }\n  }\n\n  @media (max-width: tokens.$ifxBreakpointXs) {\n    & .ifx-notification__icon {\n      align-self: flex-start;\n    }\n\n    & .ifx-notification__body {\n      flex-direction: column;\n    }\n\n    & .ifx-notification__link {\n      margin-top: tokens.$ifxSpace100;\n    }\n  }\n}","import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' | 'warning' | 'error';\n\n@Component({\n  tag: 'ifx-notification',\n  styleUrl: 'notification.scss',\n  shadow: true\n})\nexport class Notification {\n  @Prop() icon: string;\n  @Prop() variant: NotificationVariant = 'success';\n  @Prop() linkText: string; \n  @Prop() linkHref: string;\n  @Prop() linkTarget: string = '_blank';\n\n\n  private getClassName(): string {\n    switch (this.variant) {\n      case 'success':\n        return 'ifx-notification__wrapper--success';\n      case 'warning':\n        return 'ifx-notification__wrapper--warning';\n      case 'error':\n        return 'ifx-notification__wrapper--error';\n      default:\n        return 'ifx-notification__wrapper--success';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n          <div class=\"ifx-notification__icon\">\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </div>\n          <div class=\"ifx-notification__body\">\n            <div class=\"ifx-notification__slot\">\n              <slot/>\n            </div>\n            { this.linkText && this.linkHref && \n            <div class=\"ifx-notification__link\">\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n              </ifx-icon>\n              </ifx-link>\n            </div>\n          }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"kDAAA,MAAMA,EAAkB,o3CACxB,MAAAC,EAAeD,E,MCQFE,EAAY,M,0DAEgB,U,gEAGV,Q,CAGrB,YAAAC,GACN,OAAQC,KAAKC,SACX,IAAK,UACH,MAAO,qCACT,IAAK,UACH,MAAO,qCACT,IAAK,QACH,MAAO,mCACT,QACE,MAAO,qC,CAIb,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,6BAA+BN,KAAKD,gBAC9CI,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,YAAAE,IAAA,2CAAUE,KAAMP,KAAKO,QAEvBJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,QAAAE,IAAA,8CAEAL,KAAKQ,UAAYR,KAAKS,UACxBN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,YAAAE,IAAA,2CAAUK,KAAMV,KAAKS,SAAUE,OAAQX,KAAKY,YACzCZ,KAAKQ,SAASL,EAAA,YAAAE,IAAA,2CAAUE,KAAK,uB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as a,h as n,g as i}from"./p-6b122987.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.breadcrumb-item-label-container{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1D1D1D}.breadcrumb-item-label-container.margin{margin-left:16px}.breadcrumb-item-label-container ifx-icon:empty{display:none}.breadcrumb-item-label-container .label-icon-wrapper{display:inline-flex}.breadcrumb-item-label-container .menu-icon-wrapper{display:flex;justify-content:center;align-items:center;width:16px;height:16px}.breadcrumb-item-label-container .menu-icon-wrapper.hide{display:none}.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon{transition:0.3s}.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}';const t=r;const c=class{constructor(n){e(this,n);this.breadcrumbMenuIconWrapper=a(this,"breadcrumbMenuIconWrapper",7);this.icon=undefined;this.url=undefined;this.target="_self"}componentDidLoad(){const e=this.el.shadowRoot.querySelector(".breadcrumb-item-label-container");const a=e.querySelector(".menu-icon-wrapper");this.breadcrumbMenuIconWrapper.emit(a)}render(){return n("a",{key:"16ddbc6dfce781d06c5e852423d1646426c6fb04",href:this.url,target:this.target,class:"breadcrumb-item-label-container",role:"link"},n("ifx-icon",{key:"6d62e4f854b7ea735c46a3849a92c09a8d222e54",icon:this.icon,"aria-hidden":"true"}),n("span",{key:"452dc64f08a93f4872f0f033b0b7016073818aab",class:"label-wrapper"},n("slot",{key:"0a522ff8d13c3133367e62b50480af2dc970961d"})),n("span",{key:"7f5d3a5305ad187e312ae20a59610c9cfe4b13cf",class:"menu-icon-wrapper","aria-hiden":"true"},n("ifx-icon",{key:"07dc7f9912e3d87f286273e5758490f39df31d0d",icon:"chevron-down-12"})))}get el(){return i(this)}};c.style=t;export{c as ifx_breadcrumb_item_label};
-//# sourceMappingURL=p-7bef9272.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["breadcrumbItemLabelCss","IfxBreadcrumbItemLabelStyle0","BreadcrumbItemLabel","componentDidLoad","container","this","el","shadowRoot","querySelector","menuWrapper","breadcrumbMenuIconWrapper","emit","render","h","key","href","url","target","class","role","icon"],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n  display: flex;\n  align-items: center;\n  gap: tokens.$ifxSpace100;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.margin {\n    margin-left: 16px;\n  }\n\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  & .label-icon-wrapper {\n    display: inline-flex;\n  }\n\n  & .menu-icon-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n\n    &.hide {\n      display: none;\n    }\n\n    & ifx-icon {\n      transition: .3s;\n    }\n\n    &.show {\n      & ifx-icon {\n        transition: .3s;\n        transform: rotate(180deg);\n      }\n    }\n  }\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb-item-label',\n  styleUrl: 'breadcrumb-item-label.scss',\n  shadow: true,\n})\nexport class BreadcrumbItemLabel {\n  @Prop() icon: string;\n  @Prop() url: string;\n  @Prop() target: string = \"_self\"\n  @Element() el;\n  @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n  componentDidLoad() { \n    const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n    const menuWrapper = container.querySelector('.menu-icon-wrapper')\n    this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n  }\n\n  render() {\n    return (\n      <a href={this.url} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n        <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n        <span class=\"label-wrapper\">\n          <slot />\n        </span>\n       <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n        <ifx-icon icon=\"chevron-down-12\"></ifx-icon>\n       </span>\n      </a>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAyB,qwBAC/B,MAAAC,EAAeD,E,MCMFE,EAAmB,M,iJAGL,O,CAIzB,gBAAAC,GACE,MAAMC,EAAYC,KAAKC,GAAGC,WAAWC,cAAc,oCACnD,MAAMC,EAAcL,EAAUI,cAAc,sBAC5CH,KAAKK,0BAA0BC,KAAKF,E,CAGtC,MAAAG,GACE,OACEC,EAAA,KAAAC,IAAA,2CAAGC,KAAMV,KAAKW,IAAKC,OAAQZ,KAAKY,OAAQC,MAAM,kCAAkCC,KAAK,QACnFN,EAAA,YAAAC,IAAA,2CAAUM,KAAMf,KAAKe,KAAI,cAAc,SACvCP,EAAA,QAAAC,IAAA,2CAAMI,MAAM,iBACVL,EAAA,QAAAC,IAAA,8CAEHD,EAAA,QAAAC,IAAA,2CAAMI,MAAM,oBAAmB,aAAY,QAC1CL,EAAA,YAAAC,IAAA,2CAAUM,KAAK,qB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as r,a}from"./p-6b122987.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex;flex-direction:column}.wrapper__label{color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3"}:host(.wrapper--disabled) .wrapper__label{color:#575352}.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 i=s;const o=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-${++d}`;this.caption=undefined;this.cols=undefined;this.disabled=false;this.error=false;this.label=undefined;this.maxlength=undefined;this.name=undefined;this.placeholder=undefined;this.readOnly=false;this.resize="both";this.rows=undefined;this.value=undefined;this.wrap="soft"}async reset(){this.resetTextarea()}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:"d557bff378899253b1eea26f202a3d934424deac",class:`wrapper \n\t\t\t\t\t\twrapper--${this.error?"error":""}\n\t\t\t\t\t\twrapper--${this.disabled?"disabled":""}`},r("label",{key:"9163e001e0423effcbc9bad56af021acb8fc5229",class:"wrapper__label",htmlFor:this.inputId},(e=this.label)===null||e===void 0?void 0:e.trim()),r("div",{key:"ce7ea7607837c9979a984627fb9d762494a211b8",class:"wrapper__textarea"},r("textarea",{key:"6587f63b3d5ef32db9bf4c25ba03246d31a1120e","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:"96f109dfc94c8563ce9b3aacfae00eef4b6a49b2",class:"wrapper__caption"},this.caption.trim()))}static get formAssociated(){return true}};let d=0;o.style=i;export{o as ifx_textarea};
-//# sourceMappingURL=p-7f59e05a.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["textareaCss","IfxTextareaStyle0","TextArea","this","inputId","textareaId","reset","resetTextarea","formResetCallback","internals","setFormValue","handleOnInput","e","value","target","ifxInput","emit","setValidity","componentWillLoad","render","h","Host","key","class","error","disabled","htmlFor","_a","label","trim","id","style","resize","name","cols","rows","maxlength","wrap","readonly","readOnly","placeholder","onInput","_b","caption"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: flex;\n    flex-direction: column;\n}\n\n.wrapper__label {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n}\n:host(.wrapper--disabled) .wrapper__label {\n    color: tokens.$ifxColorEngineering500;\n}\n\n.wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxSpace12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    \n    transition: all 100ms ease;\n    transition-property: border-color;\n\n    &:hover {\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n    \n    &:focus-within {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n}\n:host(.wrapper--error) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering500;\n\n    background-color: tokens.$ifxColorEngineering200;\n}\n\n.wrapper__caption {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n    color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n    color: tokens.$ifxColorEngineering500;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop } from \"@stencil/core\"\n\n@Component({\n\tformAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\t\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\t\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper \n\t\t\t\t\t\twrapper--${this.error ? 'error' : ''}\n\t\t\t\t\t\twrapper--${this.disabled ? 'disabled': ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={ this.inputId }>\n\t\t\t\t\t{ this.label?.trim() }\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={ this.value }\n\t\t\t\t\t\taria-disabled={ this.disabled }\n\t\t\t\t\t\tid={ this.inputId }\n\t\t\t\t\t\tstyle={ {resize: this.resize} }\n\t\t\t\t\t\tname={ this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={ this.cols }\n\t\t\t\t\t\trows={ this.rows }\n\t\t\t\t\t\tmaxlength={ this.maxlength }\n\t\t\t\t\t\twrap={ this.wrap }\n\t\t\t\t\t\tdisabled={ this.disabled }\n\t\t\t\t\t\treadonly={ this.readOnly }\n\t\t\t\t\t\tplaceholder={ this.placeholder }\n\t\t\t\t\t\tvalue={ this.value }\n\t\t\t\t\t\tonInput={ (e) => this.handleOnInput(e) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{ this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{ this.caption.trim() }\n\t\t\t\t\t</div> \n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"mappings":"oDAAA,MAAMA,EAAc,k9BACpB,MAAAC,EAAeD,E,MCQFE,EAAQ,M,4NAEZC,KAAAC,QAAkB,kBAAkBC,I,yDAQhB,M,WACH,M,2GAKG,M,YACkC,O,mDAGtB,M,CAGxC,WAAMC,GACLH,KAAKI,e,CAGN,iBAAAC,GACCL,KAAKI,gBACLJ,KAAKM,UAAUC,aAAa,G,CAG7B,aAAAC,CAAcC,GACbT,KAAKU,MAASD,EAAEE,OAA+BD,MAC/CV,KAAKM,UAAUC,aAAaP,KAAKU,OACjCV,KAAKY,SAASC,KAAKb,KAAKU,M,CAGzB,aAAAN,GACCJ,KAAKU,MAAQ,GACbV,KAAKM,UAAUQ,YAAY,IAC3Bd,KAAKM,UAAUC,aAAa,G,CAG7B,iBAAAQ,GACCf,KAAKM,UAAUC,aAAaP,KAAKU,M,CAGlC,MAAAM,G,QACC,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,kCACCpB,KAAKqB,MAAQ,QAAU,4BACvBrB,KAAKsB,SAAW,WAAY,MACzCL,EAAA,SAAAE,IAAA,2CAAOC,MAAM,iBAAiBG,QAAUvB,KAAKC,UAC1CuB,EAAAxB,KAAKyB,SAAK,MAAAD,SAAA,SAAAA,EAAEE,QAGfT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACVH,EAAA,YAAAE,IAAA,wDACY,aAAY,aACVnB,KAAKU,MAAK,gBACPV,KAAKsB,SACrBK,GAAK3B,KAAKC,QACV2B,MAAQ,CAACC,OAAQ7B,KAAK6B,QACtBC,KAAO9B,KAAK8B,KAAO9B,KAAK8B,KAAO9B,KAAKC,QACpC8B,KAAO/B,KAAK+B,KACZC,KAAOhC,KAAKgC,KACZC,UAAYjC,KAAKiC,UACjBC,KAAOlC,KAAKkC,KACZZ,SAAWtB,KAAKsB,SAChBa,SAAWnC,KAAKoC,SAChBC,YAAcrC,KAAKqC,YACnB3B,MAAQV,KAAKU,MACb4B,QAAW7B,GAAMT,KAAKQ,cAAcC,QAIpC8B,EAAAvC,KAAKwC,WAAO,MAAAD,SAAA,SAAAA,EAAEb,SACfT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRpB,KAAKwC,QAAQd,Q,2CAQrB,IAAIxB,EAAa,E","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as s}from"./p-6b122987.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}.ifx-slider .range-slider__wrapper{position:relative;width:129px;height:4px;display:flex;align-items:center;justify-content:center;margin:0px 2px;background:linear-gradient(to right, #EEEDED 0%, #EEEDED var(--min-value-percent, 100%), #0A8276 var(--min-value-percent, 100%), #0A8276 var(--max-value-percent, 100%), #EEEDED var(--max-value-percent, 100%), #EEEDED 100%)}.ifx-slider .range-slider__wrapper:has(input[type=range]:disabled){background:#BFBBBB}.ifx-slider .range-slider__wrapper input[type=range]{position:absolute;pointer-events:none;background:none}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-ms-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;border:none;background:none;width:100%}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-track{-webkit-appearance:none;border:none;background:none;width:100%}';const n=a;const r=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.min=0;this.max=100;this.step=1;this.value=undefined;this.minValueHandle=undefined;this.maxValueHandle=undefined;this.disabled=false;this.showPercentage=false;this.leftIcon=undefined;this.rightIcon=undefined;this.leftText=undefined;this.rightText=undefined;this.type="single";this.internalValue=0;this.percentage=0;this.internalMinValue=0;this.internalMaxValue=100}valueChanged(e){this.internalValue=e;this.updateValuePercent()}minValueChanged(e){this.internalMinValue=e;this.updateValuePercent()}maxValueChanged(e){this.internalMaxValue=e;this.updateValuePercent()}getRangeSliderWrapper(){const e=this.el.shadowRoot.querySelector(".range-slider__wrapper");return e}handleInputChangeOfRangeSlider(e){const i=e.target;if(parseFloat(this.maxInputRef.value)-parseFloat(this.minInputRef.value)<=0){if(i.id==="max-slider"){this.maxInputRef.value=this.minInputRef.value}else{this.minInputRef.value=this.maxInputRef.value}}if(i.id==="max-slider"){this.internalMaxValue=parseFloat(this.maxInputRef.value)}else{this.internalMinValue=parseFloat(this.minInputRef.value)}this.ifxChange.emit({minVal:this.internalMinValue,maxVal:this.internalMaxValue});this.updateValuePercent();this.updateZIndexIfRangeSlider(i.id)}handleOnMouseLeaveOfRangeSlider(e){const i=e.target;const t=this.getRangeSliderWrapper();if(i.id==="max-slider"){t.insertBefore(this.maxInputRef,this.minInputRef)}else{t.insertBefore(this.minInputRef,this.maxInputRef)}}calculatePercentageValue(){const e=(this.internalValue-this.min)*1;const i=this.max-this.min;this.percentage=+parseFloat(String(e/i*100)).toFixed(2)}handleInputChange(e){const i=e.target;this.internalValue=parseFloat(i.value);this.ifxChange.emit(this.internalValue);this.calculatePercentageValue();this.updateValuePercent()}roundToValidStep(e){const i=e-this.min;const t=i%this.step;if(t>=this.step/2){return this.min+i+(this.step-t)}else{return this.min+i-t}}updateValuePercent(){const e=this.max-this.min;if(this.type==="double"){if(this.minInputRef){const i=(this.roundToValidStep(this.internalMinValue)-this.min)*1;const t=i/e*100;this.minInputRef.parentElement.style.setProperty("--min-value-percent",`${t}%`)}if(this.maxInputRef){const i=(this.roundToValidStep(this.internalMaxValue)-this.min)*1;const t=i/e*100;this.maxInputRef.parentElement.style.setProperty("--max-value-percent",`${t}%`)}}else{if(this.inputRef){const e=(this.roundToValidStep(this.internalValue)-this.min)*1;const i=this.max-this.min;const t=e/i*100;this.inputRef.style.setProperty("--value-percent",`${t}%`)}}}updateZIndexIfRangeSlider(e=""){if(e==="max-slider"){this.minInputRef.style.zIndex="1";this.maxInputRef.style.zIndex="2"}else{this.minInputRef.style.zIndex="2";this.maxInputRef.style.zIndex="1"}}componentWillLoad(){if(this.value===undefined){this.internalValue=(this.max-this.min)/2}else{this.internalValue=Math.max(this.min,Math.min(this.max,this.value))}this.calculatePercentageValue();if(this.minValueHandle!==undefined)this.internalMinValue=this.minValueHandle;else this.internalMinValue=this.min;if(this.maxValueHandle!==undefined)this.internalMaxValue=this.maxValueHandle;else this.internalMaxValue=this.max}componentDidLoad(){this.updateValuePercent()}render(){return t("div",{key:"b465d077094d60c3bdf74cd5ac862e967841067b",class:"ifx-slider"},this.leftText&&t("span",{key:"5913654492aa7e837b6778935b5cb3a7002308fd",class:`left-text`},this.leftText),this.leftIcon&&t("ifx-icon",{key:"26b106c741836e06e127ef3299f0d433de693ab9",icon:this.leftIcon,class:`left-icon${this.disabled?" disabled":""}`}),this.type!=="double"?t("input",{type:"range",min:this.min,max:this.max,step:this.step,value:this.internalValue,disabled:this.disabled,ref:e=>this.inputRef=e,onInput:e=>this.handleInputChange(e),"aria-label":"a slider","aria-value":this.value,"aria-disabled":this.disabled}):t("div",{class:"range-slider__wrapper","aria-label":"a range slider","aria-value":this.value,"aria-disabled":this.disabled},t("input",{id:"min-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMinValue,disabled:this.disabled,ref:e=>this.minInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e)}),t("input",{id:"max-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMaxValue,disabled:this.disabled,ref:e=>this.maxInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e)})),this.rightIcon&&t("ifx-icon",{key:"4af440423ce265817ecd177c0f74a9ed1d0e5f10",icon:this.rightIcon,class:`right-icon${this.disabled?" disabled":""}`}),this.rightText&&t("span",{key:"627694f955bfc92530e91fdd56ddaa791d7006e7",class:`right-text${this.disabled?" disabled":""}`},this.rightText),this.showPercentage&&this.type!=="double"&&t("span",{key:"6b564afbe80debd694cd325e6719c5fecd40ca66",class:`percentage-display${this.disabled?" disabled":""}`},this.percentage,"%"))}get el(){return s(this)}static get watchers(){return{value:["valueChanged"],minValueHandle:["minValueChanged"],maxValueHandle:["maxValueChanged"]}}};r.style=n;export{r as ifx_slider};
-//# sourceMappingURL=p-7fa8ccd3.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sliderCss","IfxSliderStyle0","IfxSlider","valueChanged","newValue","this","internalValue","updateValuePercent","minValueChanged","internalMinValue","maxValueChanged","internalMaxValue","getRangeSliderWrapper","rangeSliderWrapper","el","shadowRoot","querySelector","handleInputChangeOfRangeSlider","event","target","parseFloat","maxInputRef","value","minInputRef","id","ifxChange","emit","minVal","maxVal","updateZIndexIfRangeSlider","handleOnMouseLeaveOfRangeSlider","sliderWrapper","insertBefore","calculatePercentageValue","num","min","den","max","percentage","String","toFixed","handleInputChange","roundToValidStep","relativeValue","remainder","step","type","minPercent","parentElement","style","setProperty","maxPercent","inputRef","targetId","zIndex","componentWillLoad","undefined","Math","minValueHandle","maxValueHandle","componentDidLoad","render","h","key","class","leftText","leftIcon","icon","disabled","ref","onInput","onMouseUp","rightIcon","rightText","showPercentage"],"sources":["src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n// ifx-slider.scss\n:host {\n  display: inline-block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n  font-size: tokens.$ifxFontSizeS;\n  color: tokens.$ifxColorEngineering500;\n  margin-left: tokens.$ifxSpace100;\n\n  &.disabled {\n    // Add the disabled state for the percentage display\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.left-icon,\n.left-text {\n  margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n  margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n  display: flex;\n  align-items: center;\n  padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n  border-radius: tokens.$ifxBorderRadiusRound;\n\n  input[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n    outline: none;\n    cursor: pointer;\n    transition: 0.2s;\n\n    &::-moz-range-thumb {\n      width: tokens.$ifxSize250;\n      height: tokens.$ifxSize250;\n      border-radius: 50%;\n      background: tokens.$ifxColorOcean500;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n\n    &:not(:disabled)::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 16px;\n      height: 16px;\n      background: tokens.$ifxColorOcean500;\n      border-radius: 50%;\n      cursor: pointer;\n      transition: box-shadow 0.2s;\n\n      &:hover {\n        background: tokens.$ifxColorOcean600;\n      }\n\n      &:active {\n        background: tokens.$ifxColorOcean700;\n      }\n    }\n  }\n\n  input[type='range']:disabled {\n    background: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n\n  input[type='range']:disabled::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 16px;\n    height: 16px;\n    background: tokens.$ifxColorEngineering300;\n    border-radius: 50%;\n    cursor: default;\n  }\n  \n  & .range-slider__wrapper {\n    position: relative;\n    width: 129px;\n    height: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0px 2px;\n    \n    background: linear-gradient(to right, tokens.$ifxColorEngineering200 0%, tokens.$ifxColorEngineering200 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 100%);\n\n    &:has(input[type='range']:disabled) {\n      background: tokens.$ifxColorEngineering300;\n    }\n\n    \n    @mixin thumb() {\n      -webkit-appearance: none;\n      border: none; \n      pointer-events: auto;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n    @mixin track() {\n      -webkit-appearance: none;\n      border: none;\n      background: none; \n      width: 100%;\n    }\n\n    input[type='range'] {\n      position: absolute;\n      pointer-events: none; \n      background: none;\n\n      &::-webkit-slider-thumb { @include thumb; }\n      &::-moz-range-thumb { @include thumb; }\n      &::-ms-thumb { @include thumb; }\n\n      &::-webkit-slider-runnable-track { @include track; }\n      &::-moz-range-track { @include track; }\n    }\n  }\n  \n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IfxSlider {\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() value: number;\n  @Prop() minValueHandle: number;\n  @Prop() maxValueHandle: number;\n  @Prop() disabled: boolean = false;\n  @Prop() showPercentage: boolean = false;\n  @Prop() leftIcon: string;\n  @Prop() rightIcon: string;\n  @Prop() leftText: string;\n  @Prop() rightText: string;\n  @Prop() type: 'single' | 'double' = 'single';\n  @State() internalValue: number = 0;\n  @State() percentage: number = 0;\n  @State() internalMinValue: number = 0;\n  @State() internalMaxValue: number = 100;\n  @Event() ifxChange: EventEmitter;\n\n  @Element() el;\n\n  private inputRef: HTMLInputElement;\n  private minInputRef: HTMLInputElement;\n  private maxInputRef: HTMLInputElement;\n                                             \n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  @Watch('minValueHandle')\n  minValueChanged(newValue: number) {\n    this.internalMinValue = newValue;\n    this.updateValuePercent();\n  }\n  \n  @Watch('maxValueHandle')\n  maxValueChanged(newValue: number) {\n    this.internalMaxValue = newValue;\n    this.updateValuePercent();\n  }\n\n  getRangeSliderWrapper() {\n    const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\n    return rangeSliderWrapper;\n  }\n\n  handleInputChangeOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\n      if(target.id === 'max-slider') {\n        this.maxInputRef.value = this.minInputRef.value;\n      }else{\n        this.minInputRef.value = this.maxInputRef.value;\n      }\n    }\n    if(target.id === 'max-slider') {\n      this.internalMaxValue = parseFloat(this.maxInputRef.value);\n    } else {\n      this.internalMinValue = parseFloat(this.minInputRef.value);\n    }\n    this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\n    this.updateValuePercent();\n    this.updateZIndexIfRangeSlider(target.id)\n  }\n  \n  handleOnMouseLeaveOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const sliderWrapper = this.getRangeSliderWrapper();\n    if(target.id === 'max-slider') {\n      sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\n    } else {\n      sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\n    }\n  }\n\n  calculatePercentageValue() {\n    const num = (this.internalValue - this.min) * 1.0;\n    const den = this.max - this.min;\n    this.percentage = +parseFloat(String((num/den)*100)).toFixed(2);\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseFloat(target.value);\n    this.ifxChange.emit(this.internalValue);\n    this.calculatePercentageValue();\n    this.updateValuePercent();\n  }\n\n  private roundToValidStep(value: number) {\n    const relativeValue = value - this.min;\n    const remainder = relativeValue % this.step;\n    if (remainder >= this.step / 2) {\n      return this.min + relativeValue + (this.step - remainder);\n    } else {\n      return this.min + relativeValue - remainder;\n    }\n  }\n\n  updateValuePercent() {\n    const den = this.max - this.min;\n    if(this.type === 'double'){\n      if (this.minInputRef) {\n        const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;\n        const minPercent = (num/den) * 100;\n        this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\n      }\n\n      if (this.maxInputRef) {\n        const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\n        const maxPercent = (num/den) * 100;\n        this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\n      }\n\n    } else {\n\n      if (this.inputRef) {\n        const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\n        const den = this.max - this.min;\n        const percentage = (num/den) * 100;\n        this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\n      }\n\n    }\n  }  \n  \n  // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \n  // if min and max thumbs take the same value.\n  updateZIndexIfRangeSlider(targetId: string = '') {\n    if (targetId === 'max-slider') {\n      this.minInputRef.style.zIndex = '1';\n      this.maxInputRef.style.zIndex = '2';\n    } else {\n      this.minInputRef.style.zIndex = '2';\n      this.maxInputRef.style.zIndex = '1';\n    }\n  }\n\n  componentWillLoad() {\n    if(this.value === undefined) {\n      this.internalValue = (this.max-this.min) / 2;\n    } else {\n      this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\n    }\n\n    this.calculatePercentageValue();\n\n    if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\n    else this.internalMinValue = this.min;\n    if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\n    else this.internalMaxValue = this.max;\n  }\n\n  componentDidLoad() {\n    this.updateValuePercent();\n\n  }\n\n\n  render() {\n    return (\n      <div class=\"ifx-slider\">\n        {this.leftText && (\n          <span class={`left-text`}>\n            {this.leftText}\n          </span>\n        )}\n        {this.leftIcon && (\n          <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {\n          (this.type !== 'double') ?\n            <input\n              type=\"range\"\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.internalValue}\n              disabled={this.disabled}\n              ref={(el) => (this.inputRef = el as HTMLInputElement)}\n              onInput={(event) => this.handleInputChange(event)}\n              aria-label='a slider'\n              aria-value={this.value}\n              aria-disabled={this.disabled}\n              /> \n              :\n            <div class = 'range-slider__wrapper' aria-label='a range slider' aria-value={this.value} aria-disabled={this.disabled} >\n              <input \n                id='min-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMinValue}\n                disabled={this.disabled}\n                ref={(el) => (this.minInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n              <input \n                id='max-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMaxValue}\n                disabled={this.disabled}\n                ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n\n            </div>\n        }\n        {this.rightIcon && (\n          <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {this.rightText && (\n          <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n            {this.rightText}\n          </span>\n        )}\n\n        {this.showPercentage && (this.type !== \"double\") && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.percentage}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}