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

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

@@ -0,0 +1 @@
+{"version":3,"names":["spinnerCss","Spinner","constructor","hostRef","this","inverted","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","h","key","role","ariaLabel","class","getClassNames","variant","getSizeClass","width","height","viewBox","fill","xmlns","id","d","size","classNames","textFieldCss","TextField","placeholder","value","error","label","icon","caption","required","success","disabled","readOnly","showDeleteIcon","autocomplete","type","internalId","valueWatcher","newValue","inputElement","reset","handleDeleteContent","ifxInput","emit","handleInput","query","handleTypeProp","internalType","componentWillLoad","htmlFor","ref","onInput","readonly","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\";\r\n\r\n:host {\r\n  display: inline-block;\r\n\r\n}\r\n\r\n.spinner {\r\n  position: relative;\r\n  width: tokens.$ifxSize500;\r\n  height: tokens.$ifxSize500;\r\n\r\n}\r\n\r\n.spinner.s {\r\n  width: tokens.$ifxSize300;\r\n  height: tokens.$ifxSize300;\r\n}\r\n\r\n.border {\r\n  box-sizing: border-box;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  border: 4px solid transparent;\r\n  border-top-color: tokens.$ifxColorOcean500;\r\n  border-left-color: tokens.$ifxColorOcean500;\r\n  border-right-color: tokens.$ifxColorOcean500;\r\n  border-top-left-radius: 1px;\r\n  border-top-right-radius: 1px;\r\n  border-radius: 50%;\r\n  animation: spin 2s linear infinite;\r\n\r\n  &.inverted {\r\n    border-top-color: tokens.$ifxColorBaseWhite;\r\n    border-left-color: tokens.$ifxColorBaseWhite;\r\n    border-right-color: tokens.$ifxColorBaseWhite;\r\n  }\r\n}\r\n\r\n.semiconductor {\r\n  width: 100%;\r\n  height: 100%;\r\n  animation: spin 2s linear infinite;\r\n\r\n  & svg {\r\n    fill: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  &.inverted {\r\n    & svg {\r\n      fill: tokens.$ifxColorBaseWhite;\r\n    }\r\n  }\r\n\r\n  &.s {\r\n    & svg {\r\n      width: tokens.$ifxSize300;\r\n      height: tokens.$ifxSize300;\r\n    }\r\n  }\r\n}\r\n\r\n\r\n@keyframes spin {\r\n  0% {\r\n    transform: rotate(0deg);\r\n  }\r\n\r\n  100% {\r\n    transform: rotate(360deg);\r\n  }\r\n}","import { Component, h, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n \r\n@Component({\r\n  tag: 'ifx-spinner',\r\n  styleUrl: 'spinner.scss',\r\n  shadow: true,\r\n})\r\nexport class Spinner {\r\n  @Element() el;\r\n  @Prop() size: string;\r\n  @Prop() variant: string;\r\n  @Prop() inverted: boolean = false;\r\n  @Prop() ariaLabel: string | null;\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-spinner', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div role=\"status\" \r\n      aria-label={this.ariaLabel || \"Loading\"}\r\n        class={this.getClassNames()}>\r\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\r\n        {this.variant === 'brand'\r\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\r\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <g id=\"spinner/conductor\">\r\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\r\n              </g>\r\n            </svg>\r\n          </div>}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  getSizeClass() {\r\n    return `${this.size}` === \"s\"\r\n      ? \"s\"\r\n      : \"\";\r\n  }\r\n\r\n  getClassNames() {\r\n    return classNames(\r\n      'spinner',\r\n      this.size && `spinner ${this.getSizeClass()}`\r\n    );\r\n  }\r\n}\r\n","@use '~@infineon/design-system-tokens/dist/tokens';\r\n@use '../../global/font.scss';\r\n\r\n:host {\r\n  display: flex;\r\n}\r\n\r\n.textInput__container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  padding: 0px;\r\n  width: 100%;\r\n  flex: none;\r\n  order: 0;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n  & .delete-icon {\r\n    position: absolute;\r\n    right: tokens.$ifxSpace200;\r\n  }\r\n\r\n  &:not(.readonly, .disabled) .delete-icon {\r\n    &:hover {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  &.disabled:not(.readonly) {\r\n\r\n    & #text-field { \r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n\r\n    & .delete-icon { \r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n    \r\n    & .textInput__top-wrapper {\r\n      & label {\r\n        color: tokens.$ifxColorEngineering300;\r\n      }\r\n\r\n      & .required {\r\n        color: tokens.$ifxColorEngineering300;\r\n      }\r\n    }\r\n\r\n    & .textInput__bottom-wrapper {\r\n      input {\r\n        border: 1px solid tokens.$ifxColorEngineering300;\r\n        background-color: tokens.$ifxColorEngineering300;\r\n\r\n        &::placeholder {\r\n          font-size: tokens.$ifxFontSizeM;\r\n          color: tokens.$ifxColorBaseWhite;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  & .textInput__top-wrapper {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: flex-start;\r\n    padding: 0px;\r\n    gap: tokens.$ifxSpace50;\r\n    flex: none;\r\n    order: 0;\r\n    align-self: stretch;\r\n    flex-grow: 0;\r\n\r\n    & label {\r\n      font-style: normal;\r\n      font-weight: tokens.$ifxFontWeightRegular;\r\n      font-size: tokens.$ifxFontSizeM;\r\n      line-height: tokens.$ifxLineHeightM;\r\n      display: flex;\r\n      align-items: center;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      flex: none;\r\n      order: 0;\r\n      flex-grow: 0;\r\n\r\n      & .optional-required {\r\n        margin-left: tokens.$ifxSpace50;\r\n      }\r\n\r\n      & .optional {\r\n        margin-left: tokens.$ifxSpace50;\r\n      }\r\n\r\n      & .required {\r\n        color: tokens.$ifxColorEngineering500;\r\n        margin-left: tokens.$ifxSpace50;\r\n\r\n        &.error {\r\n          color: tokens.$ifxColorRed500;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .input-container {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n  }\r\n\r\n  & .textInput__bottom-wrapper {\r\n    flex-grow: 1;\r\n    position: relative;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    padding: 0px;\r\n    gap: tokens.$ifxSpace50;\r\n    flex: none;\r\n    order: 1;\r\n    align-self: stretch;\r\n    flex-grow: 0;\r\n\r\n    & input {\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n      gap: tokens.$ifxSpace100;\r\n      height: tokens.$ifxSize500;\r\n      background-color: tokens.$ifxColorBaseWhite;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n      font-size: tokens.$ifxFontSizeM;\r\n      line-height: tokens.$ifxLineHeightM;\r\n      border: 1px solid tokens.$ifxColorEngineering400;\r\n      border-radius: tokens.$ifxBorderRadius12;\r\n      flex: none;\r\n      order: 0;\r\n      align-self: stretch;\r\n      flex-grow: 0;\r\n      text-overflow: ellipsis;\r\n\r\n      &.input-s {\r\n        height: tokens.$ifxSize450;\r\n        font-size: tokens.$ifxFontSizeS;\r\n        line-height: tokens.$ifxLineHeightS;\r\n\r\n        &::placeholder {\r\n          font-size: tokens.$ifxFontSizeM;\r\n          line-height: tokens.$ifxLineHeightS;\r\n        }\r\n      }\r\n\r\n      &.icon {\r\n        padding-left: tokens.$ifxSpace500;\r\n      }\r\n\r\n      &.error {\r\n        border: 1px solid tokens.$ifxColorRed500;\r\n\r\n        &:focus {\r\n          outline: none;\r\n        }\r\n      }\r\n\r\n      &.readonly {\r\n        border: none;\r\n        border-radius: var(--borderRadius-12, 1px);\r\n        border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);\r\n        background: var(--color-base-white, #fff);\r\n        padding-left: 0;\r\n\r\n        &::placeholder {\r\n          color: tokens.$ifxColorBaseBlack;\r\n        }\r\n      }\r\n\r\n      &.success {\r\n        border: 1px solid tokens.$ifxColorGreen500;\r\n\r\n        &:focus {\r\n          outline: none;\r\n        }\r\n      }\r\n\r\n      &:focus:not(.error, .success):not(.readonly) {\r\n        outline: none;\r\n        border: 1px solid tokens.$ifxColorOcean500;\r\n      }\r\n\r\n      &.readonly:focus,\r\n      &[readonly]:focus {\r\n        outline: none;\r\n        box-shadow: none;\r\n        border: none;\r\n        border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);\r\n      }\r\n\r\n      &:hover:not(:disabled, :focus, .error, .success):not(.readonly) {\r\n        border: 1px solid tokens.$ifxColorEngineering500;\r\n      }\r\n    }\r\n\r\n    & .input-icon {\r\n      // Position the icon within the icon container\r\n      // Adjust the positioning as needed\r\n      position: absolute;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      left: tokens.$ifxSpace200;\r\n      /* Adjust this value to control the icon's left offset */\r\n      transition: 0.3s;\r\n      color: tokens.$ifxColorEngineering400;\r\n    }\r\n\r\n    & .textInput__bottom-wrapper-caption {\r\n      font-style: normal;\r\n      font-weight: tokens.$ifxFontWeightRegular;\r\n      font-size: tokens.$ifxFontSizeXs;\r\n      line-height: tokens.$ifxLineHeightXs;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      flex: none;\r\n      order: 1;\r\n      align-self: stretch;\r\n      flex-grow: 0;\r\n\r\n      &.error {\r\n        color: tokens.$ifxColorRed500;\r\n      }\r\n\r\n      &.disabled {\r\n        color: tokens.$ifxColorEngineering300;\r\n      }\r\n    }\r\n  }\r\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-text-field',\r\n  styleUrl: 'text-field.scss',\r\n  shadow: true,\r\n  // formAssociated: true\r\n})\r\nexport class TextField {\r\n  private inputElement: HTMLInputElement;\r\n  @Element() el;\r\n  @Prop() placeholder: string = 'Placeholder';\r\n  @Prop({ mutable: true }) value: string = '';\r\n  @Prop() error: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() icon: string = '';\r\n  @Prop() caption: string = '';\r\n  @Prop() size: string = 'm';\r\n  @Prop() required: boolean = false;\r\n  @Prop() success: boolean = false;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() readOnly: boolean = false;\r\n  @Prop() maxlength?: number;\r\n  @Prop() showDeleteIcon: boolean = false;\r\n  @Prop() autocomplete: string = 'on';\r\n  @Prop() type: 'text' | 'password' = 'text';\r\n  @Prop() internalId: string = 'text-field';\r\n  @State() internalType: string;\r\n  @Event() ifxInput: EventEmitter<String>;\r\n  // @Prop({ reflect: true })\r\n  // resetOnSubmit: boolean = false;\r\n\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  @Watch('value')\r\n  valueWatcher(newValue: string) {\r\n    if (newValue !== this.inputElement.value) {\r\n      this.inputElement.value = newValue;\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async reset() {\r\n    this.value = '';\r\n    this.inputElement.value = '';\r\n  }\r\n\r\n  handleDeleteContent() {\r\n    if (!this.disabled && !this.readOnly) {\r\n      this.reset();\r\n      this.ifxInput.emit(this.value);\r\n    }\r\n  }\r\n\r\n  handleInput() {\r\n    const query = this.inputElement.value;\r\n    this.value = query;\r\n    //this.internals.setFormValue(query) // update form value\r\n    this.ifxInput.emit(this.value);\r\n  }\r\n\r\n  handleTypeProp() {\r\n    this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text';\r\n  }\r\n\r\n  // formResetCallback() {\r\n  //   this.internals.setValidity({});\r\n  //   this.internals.setFormValue(\"\");\r\n  // }\r\n\r\n  componentWillLoad() {\r\n    this.handleTypeProp();\r\n  }\r\n\r\n  async componentDidLoad() {\r\n    if (!isNestedInIfxComponent(this.el)) {\r\n      const framework = detectFramework();\r\n      trackComponent('ifx-text-field', await framework);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        aria-label=\"a text field for user input\"\r\n        aria-value={this.value}\r\n        aria-disabled={this.disabled}\r\n        class={`textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}`}\r\n      >\r\n        <div class=\"textInput__top-wrapper\">\r\n          {this.label && (\r\n            <label htmlFor={this.internalId}>\r\n              <span>{this.label}</span>\r\n              {this.required && <span class={`required ${this.error && !this.readOnly ? 'error' : ''}`}>*</span>}\r\n            </label>\r\n          )}\r\n        </div>\r\n\r\n        <div class=\"textInput__bottom-wrapper\">\r\n          <div class=\"input-container\">\r\n            {this.icon && <ifx-icon class=\"input-icon\" icon={this.icon} />}\r\n            <input\r\n              ref={el => (this.inputElement = el)}\r\n              disabled={this.disabled && !this.error}\r\n              autocomplete={this.autocomplete}\r\n              type={this.internalType}\r\n              id={this.internalId}\r\n              value={this.value}\r\n              onInput={() => this.handleInput()}\r\n              placeholder={this.placeholder}\r\n              readonly={this.readOnly}\r\n              maxlength={this.maxlength}\r\n              class={`${this.icon ? 'icon' : ''}\r\n                ${this.error ? 'error' : ''} \r\n                ${this.readOnly ? 'readonly' : ''} \r\n              ${this.size === 's' ? 'input-s' : ''}\r\n              ${this.success ? 'success' : ''}`}\r\n            />\r\n\r\n            {this.showDeleteIcon && this.value && <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon>}\r\n          </div>\r\n          {this.caption && (\r\n            <div class={`textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}`}>\r\n              {this.caption}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,F as s,a}from"./p-PqnYwNKt.js";const n='.tree-item{position:relative;cursor:pointer;list-style:none}.tree-item.tree-item--expanded{position:relative}.tree-item.tree-item--has-children{position:relative}.tree-item.tree-item--has-children .tree-item__header>.tree-item__chevron-container{display:flex}.tree-item.tree-item--has-children.tree-item--expanded .tree-item__header>.tree-item__chevron-container::after{display:block}.tree-item--disabled{cursor:not-allowed;pointer-events:none;color:#BFBBBB}.tree-item__content{display:flex;flex-direction:row}.tree-item__content:hover .tree-item__checkbox-container,.tree-item__content:hover .tree-item__header{background-color:#F7F7F7}.tree-item__checkbox-container{position:sticky;left:0;z-index:10;padding:4px;background-color:#FFFFFF}.tree-item__header{flex-grow:1;display:flex;align-items:center;white-space:nowrap;height:20px;padding-top:4px;padding-right:16px;padding-bottom:4px;padding-left:8px}.tree-item__chevron-container{display:none;align-items:center;margin-right:8px;height:20px}.tree-item__chevron-container::after{--height-line-start:28px;display:none;content:"";position:absolute;z-index:1;top:var(--height-line-start);left:auto;margin-left:8px;width:1px;height:calc(100% - var(--height-line-start));background-color:#EEEDED}.tree-item--disabled .tree-item__chevron-container::after{color:#EEEDED}.tree-item__chevron.chevron-down{transform:rotate(90deg)}.tree-item__chevron.chevron-right{transform:rotate(0)}.tree-item__label-icon-container{display:flex;align-items:center}.tree-item__label-icon-container:focus{outline:none}.tree-item__label-icon-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.tree-item__icon-container{position:relative;width:16px;height:16px}.tree-item__icon-container ifx-icon{position:absolute;left:0;top:0;opacity:1;transition:opacity 0.2s ease-in-out}.tree-item__icon-container ifx-icon.icon--hidden{opacity:0}.tree-item__label{padding-left:8px}.tree-item__children{display:none}.tree-item[aria-expanded=true]>.tree-item__children{display:block}';const r=class{constructor(i){e(this,i);this.ifxTreeViewItemExpandChange=t(this,"ifxTreeViewItemExpandChange",7);this.ifxTreeViewItemCheckChange=t(this,"ifxTreeViewItemCheckChange",7);this.ifxTreeViewItemDisableChange=t(this,"ifxTreeViewItemDisableChange",7);this.expanded=false;this.initiallyExpanded=false;this.disableItem=false;this.initiallySelected=false;this.hasChildren=false;this.isChecked=false;this.partialChecked=false;this.level=0;this.disableAllItems=false;this.expandAllItems=false;this.suppressExpandEvents=false;this.findChildren=()=>Array.from(this.host.children).filter((e=>e instanceof HTMLElement&&e.tagName==="IFX-TREE-VIEW-ITEM"));this.calculateNodeLevel=()=>{let e=0,t=this.host.parentElement;while(t){if(t.tagName==="IFX-TREE-VIEW-ITEM")e++;t=t.parentElement}return e};this.handleStateChange=e=>{if(this.disabled)return;e.stopPropagation();this.updateCheckState(e.detail.checked)};this.handleCheckboxChange=e=>{var t,i;if(this.disabled)return;this.updateCheckState((i=(t=e.detail)===null||t===void 0?void 0:t.checked)!==null&&i!==void 0?i:!this.isChecked)};this.handleHeaderClick=({target:e})=>{if(this.disabled)return;if(!e.closest(".tree-item__checkbox-container, .tree-item__chevron-container")){if(this.hasChildren){const e=!this.isChecked;this.updateCheckState(e);const t=e?this.expandOrCollapseAllDescendants(true):this.expandOrCollapseAllDescendants(false);this.ifxTreeViewItemExpandChange.emit({expanded:e,affectedItems:t,component:this})}else{this.updateCheckState(!this.isChecked)}}};this.toggleExpand=()=>{if(this.disabled||!this.hasChildren)return;this.expanded=!this.expanded};this.handleKeyDown=e=>{var t,i,s,a,n,r;const h=Array.from(((t=this.host.closest("ifx-tree-view"))===null||t===void 0?void 0:t.querySelectorAll("ifx-tree-view-item"))||[]);const o=h.filter((e=>{var t,i;let s=(t=e.parentElement)===null||t===void 0?void 0:t.closest("ifx-tree-view-item");while(s){const e=s;if(!(e.expandAllItems||e.expanded))return false;s=(i=s.parentElement)===null||i===void 0?void 0:i.closest("ifx-tree-view-item")}return true}));const c=o.findIndex((e=>e===this.host));const l=e=>e===null||e===void 0?void 0:e.focus();switch(e.key){case"ArrowDown":{e.preventDefault();for(let e=c+1;e<o.length;e++){const t=o[e];if(!t.disabled){l((i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".tree-item__label-icon-container"));break}}break}case"ArrowUp":{e.preventDefault();for(let e=c-1;e>=0;e--){const t=o[e];if(!t.disabled){l((s=t.shadowRoot)===null||s===void 0?void 0:s.querySelector(".tree-item__label-icon-container"));break}}break}case"ArrowRight":{e.preventDefault();if(!this.isExpanded&&this.hasChildren){this.expanded=true}else if(this.isExpanded&&this.hasChildren){const e=this.host.querySelector("ifx-tree-view-item");if(e&&!e.disabled){l((a=e.shadowRoot)===null||a===void 0?void 0:a.querySelector(".tree-item__label-icon-container"))}}break}case"ArrowLeft":{e.preventDefault();if(this.isExpanded&&this.hasChildren){this.expanded=false}else{const e=(n=this.host.parentElement)===null||n===void 0?void 0:n.closest("ifx-tree-view-item");if(e&&!e.disabled){l((r=e.shadowRoot)===null||r===void 0?void 0:r.querySelector(".tree-item__label-icon-container"))}}break}case" ":case"Enter":{e.preventDefault();if(this.hasChildren){const e=!this.isChecked;this.updateCheckState(e);const t=e?this.expandOrCollapseAllDescendants(true):this.expandOrCollapseAllDescendants(false);this.ifxTreeViewItemExpandChange.emit({expanded:e,affectedItems:t,component:this})}else{this.updateCheckState(!this.isChecked)}break}}}}get disabled(){return this.disableAllItems||this.disableItem}get isExpanded(){return this.expandAllItems||this.expanded}componentWillLoad(){this.expanded=this.initiallyExpanded;this.hasChildren=this.findChildren().length>0;this.level=this.calculateNodeLevel();this.host.setAttribute("data-level",this.level.toString());this.isChecked=this.initiallySelected;this.host.addEventListener("internal-check-state-change",this.handleStateChange)}componentDidLoad(){this.observeParentAttribute("disable-all-items",(e=>this.disableAllItems=e));this.observeParentAttribute("data-expand-all-items",(e=>this.expandAllItems=e),true);if(this.shouldExpandFromParent())this.expandAllDescendants();this.host["__stencil_instance"]=this;if(this.initiallySelected)setTimeout((()=>this.updateParentState()),0)}observeParentAttribute(e,t,i=false){let s=this.host.parentElement;while(s){if(s.tagName==="IFX-TREE-VIEW"||i&&s.hasAttribute(e)){const i=new MutationObserver((()=>t(s.hasAttribute(e))));i.observe(s,{attributes:true});t(s.hasAttribute(e));break}s=s.parentElement}}shouldExpandFromParent(){let e=this.host.parentElement;while(e){if(e.tagName==="IFX-TREE-VIEW"&&(e.hasAttribute("expand-all-items")||e.hasAttribute("data-expand-all-items")))return true;e=e.parentElement}return false}expandAllDescendants(){this.expanded=true;this.findChildren().forEach((e=>{var t,i;e.expanded=true;(i=(t=e).expandAllDescendants)===null||i===void 0?void 0:i.call(t)}))}expandOrCollapseAllDescendants(e){this.suppressExpandEvents=true;const t=[];this.expanded=e;if(this.hasChildren)t.push({expanded:e,value:this.value});this.findChildren().forEach((i=>{const s=i["__stencil_instance"];if(s&&s.hasChildren){s.suppressExpandEvents=true;s.expanded=e;t.push({expanded:e,value:s.value});if(s.hasChildren){const i=s.expandOrCollapseAllDescendants(e);t.push(...i)}}}));this.suppressExpandEvents=false;return t}async updateCheckState(e,t=false){if(this.disabled)return;if(!t&&this.hasChildren){const t=this.collectDescendantStates(e);this.setNodeState({isChecked:e,partialChecked:false},false);await this.updateChildrenSilently(e);this.ifxTreeViewItemCheckChange.emit({checked:e,indeterminate:false,value:this.value,affectedChildItems:t,component:this});this.updateParentState()}else if(t){this.setNodeState({isChecked:e,partialChecked:false},false)}else{this.setNodeState({isChecked:e,partialChecked:false});await this.updateChildrenState(e);this.updateParentState()}}async updateChildrenSilently(e){for(const t of this.findChildren()){const i=t["__stencil_instance"];if(i&&!i.disabled){i.setNodeState({isChecked:e,partialChecked:false},false);await i.updateChildrenSilently(e)}}}handleExpandedChange(e){if(!this.suppressExpandEvents){this.ifxTreeViewItemExpandChange.emit({expanded:e,value:this.value,affectedItems:[{expanded:e,value:this.value}],component:this})}}handleDisableItemChange(e){this.ifxTreeViewItemDisableChange.emit({disabled:e,component:this})}setNodeState(e,t=true){this.isChecked=e.isChecked;this.partialChecked=e.partialChecked;if(t){this.ifxTreeViewItemCheckChange.emit({checked:this.isChecked,indeterminate:this.partialChecked,value:this.value,level:this.level,disabled:this.disabled,component:this})}}collectDescendantStates(e){const t=[];const i=(s,a=false)=>{let n=s===this.host?this:s["__stencil_instance"];if(!a&&!(n===null||n===void 0?void 0:n.disabled)){t.push({checked:e,indeterminate:false,value:n===null||n===void 0?void 0:n.value})}Array.from(s.children).forEach((e=>{if(e.tagName==="IFX-TREE-VIEW-ITEM")i(e,false)}))};Array.from(this.host.children).forEach((e=>{if(e.tagName==="IFX-TREE-VIEW-ITEM")i(e,false)}));return t}async updateChildrenState(e){for(const t of this.findChildren()){const i=t["__stencil_instance"];if(i&&!i.disabled){await t.componentOnReady();t.dispatchEvent(new CustomEvent("internal-check-state-change",{detail:{checked:e},bubbles:false,composed:true}))}}}findSiblingNodes(e){return Array.from(e.children).filter((e=>e instanceof HTMLElement&&e.tagName==="IFX-TREE-VIEW-ITEM"))}updateParentState(){var e;const t=(e=this.host.parentElement)===null||e===void 0?void 0:e.closest("ifx-tree-view-item");if(!t)return;setTimeout((()=>{const e=t["__stencil_instance"];if(!e)return;const i=this.findSiblingNodes(t);const{allChecked:s,someChecked:a}=this.calculateSiblingStates(i);e.setNodeState({isChecked:s,partialChecked:!s&&a},false);e.updateParentState()}),0)}calculateSiblingStates(e){const t=e.map((e=>{const t=e["__stencil_instance"];return{checked:t===null||t===void 0?void 0:t.isChecked,partial:t===null||t===void 0?void 0:t.partialChecked}}));const i=t.filter((e=>e.checked)).length;const s=t.filter((e=>e.partial)).length;return{allChecked:t.length>0&&i===t.length&&s===0,someChecked:i>0||s>0}}render(){return i("div",{key:"cec7573a072effbec3e579314dbc856800167c04",class:{"tree-item":true,"tree-item--expanded":this.isExpanded,"tree-item--has-children":this.hasChildren,"tree-item--disabled":this.disabled},role:"treeitem","aria-expanded":this.isExpanded?"true":"false","data-level":this.level,"aria-disabled":this.disabled?"true":undefined,"aria-label":this.ariaLabel},i("div",{key:"f0846c5a21a769ddbce8fad581faa35b418007fd",class:"tree-item__content"},i("div",{key:"9550350aa5e56bb2651746575d2433f24461dd7a",class:"tree-item__checkbox-container",onClick:e=>e.stopPropagation()},i("ifx-checkbox",{key:"33dbd5c3e261ac6993620228d91f7dd58fbbac63",size:"s",checked:this.partialChecked?false:this.isChecked,indeterminate:this.partialChecked,onIfxChange:this.handleCheckboxChange,disabled:this.disabled})),i("div",{key:"4ef28c7b9b5390bcfe60db2745abfd14c23be9b0",class:"tree-item__header",style:{paddingLeft:`${this.level*24+10}px`},onClick:this.handleHeaderClick,tabIndex:-1,"aria-disabled":this.disabled?"true":undefined},this.hasChildren&&i("div",{key:"60be80051ed37101c43875e88a8a1bad388fc658",class:"tree-item__chevron-container",onClick:this.toggleExpand},i("ifx-icon",{key:"1881571f0b36fc09e7b0919f164b583ed082ee3c",class:`tree-item__chevron ${this.isExpanded?"chevron-down":"chevron-right"}`,icon:"chevron-right-16"}),i("div",{key:"1cbdef30e9a4f2b55520b9c9a2ee638199cb7a23",class:"tree-item__line"})),i("div",{key:"f1d2f18c6a1573d07eb5450ad63296c6bf535533",class:"tree-item__label-icon-container",tabIndex:this.disabled?-1:0,onKeyDown:this.handleKeyDown},i("div",{key:"972df68ce75bb5173715095ce7fb597fc537cd73",class:"tree-item__icon-container"},this.hasChildren?i(s,null,i("ifx-icon",{class:{"icon--hidden":this.isExpanded},icon:"folder-16"}),i("ifx-icon",{class:{"icon--hidden":!this.isExpanded},icon:"folder-open-16"})):i("ifx-icon",{icon:"file-16"})),i("span",{key:"19c43a81a85c58357bcac941533dd01db549d2fa",class:"tree-item__label"},i("slot",{key:"a840c5d9595c1a7697e199e02ea5c2adec7286f8"}))))),this.isExpanded&&i("div",{key:"6787296ba279e142c2af6c9a47df469900040109",class:"tree-item__children"},i("slot",{key:"43bdfa1c0b3a86724ff5de26b853914298abb182",name:"children"})))}get host(){return a(this)}static get watchers(){return{expanded:["handleExpandedChange"],disableItem:["handleDisableItemChange"]}}};r.style=n;export{r as ifx_tree_view_item};
+//# sourceMappingURL=p-b83f33e2.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["treeViewItemCss","TreeViewItem","constructor","hostRef","this","expanded","initiallyExpanded","disableItem","initiallySelected","hasChildren","isChecked","partialChecked","level","disableAllItems","expandAllItems","suppressExpandEvents","findChildren","Array","from","host","children","filter","child","HTMLElement","tagName","calculateNodeLevel","parent","parentElement","handleStateChange","event","disabled","stopPropagation","updateCheckState","detail","checked","handleCheckboxChange","_b","_a","handleHeaderClick","target","closest","newCheckedState","affectedItems","expandOrCollapseAllDescendants","ifxTreeViewItemExpandChange","emit","component","toggleExpand","handleKeyDown","allItems","querySelectorAll","visibleItems","item","parentCmp","currentIndex","findIndex","el","focusLabelIcon","focus","key","preventDefault","i","length","next","shadowRoot","querySelector","prev","_c","isExpanded","firstChild","_d","_e","_f","componentWillLoad","setAttribute","toString","addEventListener","componentDidLoad","observeParentAttribute","val","shouldExpandFromParent","expandAllDescendants","setTimeout","updateParentState","attr","cb","breakOnAttr","hasAttribute","observer","MutationObserver","observe","attributes","forEach","call","expand","push","value","childInstance","childAffected","fromParent","affected","collectDescendantStates","setNodeState","updateChildrenSilently","ifxTreeViewItemCheckChange","indeterminate","affectedChildItems","updateChildrenState","handleExpandedChange","newValue","handleDisableItemChange","ifxTreeViewItemDisableChange","state","emitEvent","descendants","collect","skipSelf","instance","componentOnReady","dispatchEvent","CustomEvent","bubbles","composed","findSiblingNodes","parentInstance","siblings","allChecked","someChecked","calculateSiblingStates","states","map","sib","partial","checkedCount","partialCount","render","h","class","role","undefined","ariaLabel","onClick","e","size","onIfxChange","style","paddingLeft","tabIndex","icon","onKeyDown","Fragment","name"],"sources":["src/components/tree-view/tree-view-item.scss?tag=ifx-tree-view-item&encapsulation=shadow","src/components/tree-view/tree-view-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n.tree-item {\r\n  position: relative;\r\n  cursor: pointer;\r\n  list-style: none;\r\n\r\n  &.tree-item--expanded {\r\n    position: relative;\r\n  }\r\n\r\n  &.tree-item--has-children {\r\n    position: relative;\r\n\r\n    .tree-item__header > .tree-item__chevron-container {\r\n      display: flex;\r\n    }\r\n\r\n    &.tree-item--expanded {\r\n      .tree-item__header > .tree-item__chevron-container::after {\r\n        display: block;\r\n      }\r\n    }\r\n  }\r\n\r\n  &--disabled {\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n    color: tokens.$ifxColorEngineering300;\r\n  }\r\n\r\n  &__content {\r\n    display: flex;\r\n    flex-direction: row;\r\n\r\n    &:hover {\r\n      .tree-item__checkbox-container,\r\n      .tree-item__header {\r\n        background-color: tokens.$ifxColorEngineering100;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__checkbox-container {\r\n    position: sticky;\r\n    left: 0;\r\n    z-index: 10;\r\n    padding: tokens.$ifxSpace50;\r\n    background-color: tokens.$ifxColorBaseWhite;\r\n  }\r\n\r\n  &__header {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    align-items: center;\r\n    white-space: nowrap;\r\n    height: tokens.$ifxSize250;\r\n    padding-top: tokens.$ifxSpace50;\r\n    padding-right: tokens.$ifxSpace200;\r\n    padding-bottom: tokens.$ifxSpace50;\r\n    padding-left: tokens.$ifxSpace100;\r\n  }\r\n\r\n  &__chevron-container {\r\n    display: none;\r\n    align-items: center;\r\n    margin-right: tokens.$ifxSpace100;\r\n    height: tokens.$ifxSize250;\r\n\r\n    &::after {\r\n      --height-line-start: 28px;\r\n\r\n      display: none;\r\n      content: '';\r\n      position: absolute;\r\n      z-index: 1;\r\n      top: var(--height-line-start);\r\n      left: auto;\r\n      margin-left: tokens.$ifxSpace100;\r\n      width: tokens.$ifxSize12;\r\n      height: calc(100% - var(--height-line-start));\r\n      background-color: tokens.$ifxColorEngineering200;\r\n\r\n      .tree-item--disabled & {\r\n        color: tokens.$ifxColorEngineering200;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__chevron {\r\n    &.chevron-down {\r\n      transform: rotate(90deg);\r\n    }\r\n\r\n    &.chevron-right {\r\n      transform: rotate(0);\r\n    }\r\n  }\r\n\r\n  &__label-icon-container {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    &:focus {\r\n      outline: none;\r\n    }\r\n\r\n    &:focus-visible {\r\n      outline: 2px solid tokens.$ifxColorOcean500;\r\n      outline-offset: 2px;\r\n      border-radius: tokens.$ifxBorderRadius12;\r\n    }\r\n  }\r\n\r\n  &__icon-container {\r\n    position: relative;\r\n    width: tokens.$ifxSize200;\r\n    height: tokens.$ifxSize200;\r\n\r\n    ifx-icon {\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      opacity: 1;\r\n      transition: opacity 0.2s ease-in-out;\r\n\r\n      &.icon--hidden {\r\n        opacity: 0;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__label {\r\n    padding-left: tokens.$ifxSpace100;\r\n  }\r\n\r\n  &__children {\r\n    display: none;\r\n\r\n    .tree-item[aria-expanded=\"true\"] > & {\r\n      display: block;\r\n    }\r\n  }\r\n}\r\n\r\n","import { Component, h, Prop, State, Element, Fragment, Event, EventEmitter, Watch } from '@stencil/core';\r\n\r\nexport interface TreeViewCheckChangeEvent {\r\n  checked: boolean;\r\n  indeterminate: boolean;\r\n  value?: string;\r\n  affectedChildItems?: Array<{ checked: boolean; indeterminate: boolean; value?: string }>;\r\n  component?: TreeViewItem;\r\n}\r\n\r\nexport interface TreeViewExpandChangeEvent {\r\n  expanded: boolean;\r\n  value?: string;\r\n  affectedItems?: Array<{ expanded: boolean; value?: string }>;\r\n  component?: TreeViewItem;\r\n}\r\n\r\nexport interface TreeViewDisableChangeEvent {\r\n  disabled: boolean;\r\n  component?: TreeViewItem;\r\n}\r\n\r\ninterface TreeState {\r\n  isChecked: boolean;\r\n  partialChecked: boolean;\r\n}\r\n\r\ntype HTMLIfxTreeViewItemElement = HTMLElement & { componentOnReady: () => Promise<unknown> };\r\n\r\n@Component({\r\n  tag: 'ifx-tree-view-item',\r\n  styleUrl: 'tree-view-item.scss',\r\n  shadow: true,\r\n})\r\nexport class TreeViewItem {\r\n  @Element() host: HTMLElement;\r\n  @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\r\n  @Prop() initiallyExpanded: boolean = false;\r\n  @Prop() disableItem: boolean = false;\r\n  @Prop() ariaLabel: string | null;\r\n  @Prop() initiallySelected: boolean = false;\r\n  @Prop() value: string;\r\n\r\n  @Event() ifxTreeViewItemExpandChange: EventEmitter<TreeViewExpandChangeEvent>;\r\n  @Event() ifxTreeViewItemCheckChange: EventEmitter<TreeViewCheckChangeEvent>;\r\n  @Event() ifxTreeViewItemDisableChange: EventEmitter<TreeViewDisableChangeEvent>;\r\n\r\n  @State() private hasChildren: boolean = false;\r\n  @State() private isChecked: boolean = false;\r\n  @State() private partialChecked: boolean = false;\r\n  @State() private level: number = 0;\r\n  @State() private disableAllItems: boolean = false;\r\n  @State() private expandAllItems: boolean = false;\r\n  @State() private suppressExpandEvents: boolean = false;\r\n\r\n  private get disabled() {\r\n    return this.disableAllItems || this.disableItem;\r\n  }\r\n\r\n  private get isExpanded() {\r\n    return this.expandAllItems || this.expanded;\r\n  }\r\n\r\n  private findChildren = () =>\r\n    Array.from(this.host.children)\r\n      .filter((child): child is HTMLElement => child instanceof HTMLElement && child.tagName === 'IFX-TREE-VIEW-ITEM');\r\n\r\n  private calculateNodeLevel = (): number => {\r\n    let level = 0, parent = this.host.parentElement;\r\n    while (parent) {\r\n      if (parent.tagName === 'IFX-TREE-VIEW-ITEM') level++;\r\n      parent = parent.parentElement;\r\n    }\r\n    return level;\r\n  };\r\n\r\n  componentWillLoad() {\r\n    this.expanded = this.initiallyExpanded;\r\n    this.hasChildren = this.findChildren().length > 0;\r\n    this.level = this.calculateNodeLevel();\r\n    this.host.setAttribute('data-level', this.level.toString());\r\n    this.isChecked = this.initiallySelected;\r\n    this.host.addEventListener('internal-check-state-change', this.handleStateChange);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.observeParentAttribute('disable-all-items', val => this.disableAllItems = val);\r\n    this.observeParentAttribute('data-expand-all-items', val => this.expandAllItems = val, true);\r\n    if (this.shouldExpandFromParent()) this.expandAllDescendants();\r\n    (this.host as any)['__stencil_instance'] = this;\r\n    if (this.initiallySelected) setTimeout(() => this.updateParentState(), 0);\r\n  }\r\n\r\n  private observeParentAttribute(attr: string, cb: (val: boolean) => void, breakOnAttr = false) {\r\n    let parent = this.host.parentElement;\r\n    while (parent) {\r\n      if (parent.tagName === 'IFX-TREE-VIEW' || (breakOnAttr && parent.hasAttribute(attr))) {\r\n        const observer = new MutationObserver(() => cb(parent.hasAttribute(attr)));\r\n        observer.observe(parent, { attributes: true });\r\n        cb(parent.hasAttribute(attr));\r\n        break;\r\n      }\r\n      parent = parent.parentElement;\r\n    }\r\n  }\r\n\r\n  private shouldExpandFromParent(): boolean {\r\n    let parent = this.host.parentElement;\r\n    while (parent) {\r\n      if (\r\n        parent.tagName === 'IFX-TREE-VIEW' &&\r\n        (parent.hasAttribute('expand-all-items') || parent.hasAttribute('data-expand-all-items'))\r\n      ) return true;\r\n      parent = parent.parentElement;\r\n    }\r\n    return false;\r\n  }\r\n\r\n  private expandAllDescendants() {\r\n    this.expanded = true;\r\n    this.findChildren().forEach(child => {\r\n      (child as any).expanded = true;\r\n      (child as any).expandAllDescendants?.();\r\n    });\r\n  }\r\n\r\n  private handleStateChange = (event: CustomEvent) => {\r\n    if (this.disabled) return;\r\n    event.stopPropagation();\r\n    this.updateCheckState(event.detail.checked);\r\n  };\r\n\r\n  private handleCheckboxChange = (event: CustomEvent) => {\r\n    if (this.disabled) return;\r\n    this.updateCheckState(event.detail?.checked ?? !this.isChecked);\r\n  };\r\n\r\n  private handleHeaderClick = ({ target }: MouseEvent) => {\r\n    if (this.disabled) return;\r\n    if (!(target as HTMLElement).closest('.tree-item__checkbox-container, .tree-item__chevron-container')) {\r\n      if (this.hasChildren) {\r\n        const newCheckedState = !this.isChecked;\r\n        this.updateCheckState(newCheckedState);\r\n        const affectedItems = newCheckedState\r\n          ? this.expandOrCollapseAllDescendants(true)\r\n          : this.expandOrCollapseAllDescendants(false);\r\n        this.ifxTreeViewItemExpandChange.emit({\r\n          expanded: newCheckedState,\r\n          affectedItems,\r\n          component: this\r\n        });\r\n      } else {\r\n        this.updateCheckState(!this.isChecked);\r\n      }\r\n    }\r\n  };\r\n\r\n  private expandOrCollapseAllDescendants(expand: boolean) {\r\n    this.suppressExpandEvents = true;\r\n    const affectedItems: Array<{ expanded: boolean; value?: string }> = [];\r\n    this.expanded = expand;\r\n    if (this.hasChildren) affectedItems.push({ expanded: expand, value: this.value });\r\n    this.findChildren().forEach(child => {\r\n      const childInstance = (child as any)['__stencil_instance'];\r\n      if (childInstance && childInstance.hasChildren) {\r\n        childInstance.suppressExpandEvents = true;\r\n        childInstance.expanded = expand;\r\n        affectedItems.push({ expanded: expand, value: childInstance.value });\r\n        if (childInstance.hasChildren) {\r\n          const childAffected = childInstance.expandOrCollapseAllDescendants(expand);\r\n          affectedItems.push(...childAffected);\r\n        }\r\n      }\r\n    });\r\n    this.suppressExpandEvents = false;\r\n    return affectedItems;\r\n  }\r\n\r\n  private async updateCheckState(checked: boolean, fromParent = false) {\r\n    if (this.disabled) return;\r\n    if (!fromParent && this.hasChildren) {\r\n      const affected = this.collectDescendantStates(checked);\r\n      this.setNodeState({ isChecked: checked, partialChecked: false }, false);\r\n      await this.updateChildrenSilently(checked);\r\n      this.ifxTreeViewItemCheckChange.emit({\r\n        checked,\r\n        indeterminate: false,\r\n        value: this.value,\r\n        affectedChildItems: affected,\r\n        component: this,\r\n      });\r\n      this.updateParentState();\r\n    } else if (fromParent) {\r\n      this.setNodeState({ isChecked: checked, partialChecked: false }, false);\r\n    } else {\r\n      this.setNodeState({ isChecked: checked, partialChecked: false });\r\n      await this.updateChildrenState(checked);\r\n      this.updateParentState();\r\n    }\r\n  }\r\n\r\n  private async updateChildrenSilently(checked: boolean) {\r\n    for (const child of this.findChildren()) {\r\n      const childInstance = (child as any)['__stencil_instance'];\r\n      if (childInstance && !childInstance.disabled) {\r\n        childInstance.setNodeState({ isChecked: checked, partialChecked: false }, false);\r\n        await childInstance.updateChildrenSilently(checked);\r\n      }\r\n    }\r\n  }\r\n\r\n  @Watch('expanded')\r\n  handleExpandedChange(newValue: boolean) {\r\n    if (!this.suppressExpandEvents) {\r\n      this.ifxTreeViewItemExpandChange.emit({\r\n        expanded: newValue,\r\n        value: this.value,\r\n        affectedItems: [{ expanded: newValue, value: this.value }],\r\n        component: this\r\n      });\r\n    }\r\n  }\r\n\r\n  @Watch('disableItem')\r\n  handleDisableItemChange(newValue: boolean) {\r\n    this.ifxTreeViewItemDisableChange.emit({ disabled: newValue, component: this });\r\n  }\r\n\r\n  private setNodeState(state: TreeState, emitEvent = true) {\r\n    this.isChecked = state.isChecked;\r\n    this.partialChecked = state.partialChecked;\r\n    if (emitEvent) {\r\n      this.ifxTreeViewItemCheckChange.emit({\r\n        checked: this.isChecked,\r\n        indeterminate: this.partialChecked,\r\n        value: this.value,\r\n        level: this.level,\r\n        disabled: this.disabled,\r\n        component: this\r\n      } as any);\r\n    }\r\n  }\r\n\r\n  private collectDescendantStates(checked: boolean) {\r\n    const descendants: Array<{ checked: boolean; indeterminate: boolean; value?: string }> = [];\r\n    const collect = (el: Element, skipSelf = false) => {\r\n      let instance: any = el === this.host ? this : (el as any)['__stencil_instance'];\r\n      if (!skipSelf && !instance?.disabled) {\r\n        descendants.push({\r\n          checked,\r\n          indeterminate: false,\r\n          value: instance?.value,\r\n        });\r\n      }\r\n      Array.from(el.children)\r\n        .forEach(child => {\r\n          if (child.tagName === 'IFX-TREE-VIEW-ITEM') collect(child, false);\r\n        });\r\n    };\r\n    Array.from(this.host.children)\r\n      .forEach(child => {\r\n        if (child.tagName === 'IFX-TREE-VIEW-ITEM') collect(child, false);\r\n      });\r\n    return descendants;\r\n  }\r\n\r\n  private async updateChildrenState(checked: boolean) {\r\n    for (const child of this.findChildren()) {\r\n      const childInstance = (child as any)['__stencil_instance'];\r\n      if (childInstance && !childInstance.disabled) {\r\n        await (child as HTMLIfxTreeViewItemElement).componentOnReady();\r\n        child.dispatchEvent(new CustomEvent('internal-check-state-change', {\r\n          detail: { checked },\r\n          bubbles: false,\r\n          composed: true\r\n        }));\r\n      }\r\n    }\r\n  }\r\n\r\n  private findSiblingNodes(parent: HTMLElement): HTMLIfxTreeViewItemElement[] {\r\n    return Array.from(parent.children)\r\n      .filter((child): child is HTMLIfxTreeViewItemElement =>\r\n        child instanceof HTMLElement && child.tagName === 'IFX-TREE-VIEW-ITEM'\r\n      );\r\n  }\r\n\r\n  private updateParentState() {\r\n    const parent = this.host.parentElement?.closest('ifx-tree-view-item') as HTMLIfxTreeViewItemElement;\r\n    if (!parent) return;\r\n    setTimeout(() => {\r\n      const parentInstance = (parent as any)['__stencil_instance'] as TreeViewItem;\r\n      if (!parentInstance) return;\r\n      const siblings = this.findSiblingNodes(parent);\r\n      const { allChecked, someChecked } = this.calculateSiblingStates(siblings);\r\n      parentInstance.setNodeState({\r\n        isChecked: allChecked,\r\n        partialChecked: !allChecked && someChecked\r\n      }, false);\r\n      parentInstance.updateParentState();\r\n    }, 0);\r\n  }\r\n\r\n  private calculateSiblingStates(siblings: HTMLIfxTreeViewItemElement[]) {\r\n    const states = siblings.map(sib => {\r\n      const instance = (sib as any)['__stencil_instance'] as TreeViewItem;\r\n      return { checked: instance?.isChecked, partial: instance?.partialChecked };\r\n    });\r\n    const checkedCount = states.filter(state => state.checked).length;\r\n    const partialCount = states.filter(state => state.partial).length;\r\n    return {\r\n      allChecked: states.length > 0 && checkedCount === states.length && partialCount === 0,\r\n      someChecked: checkedCount > 0 || partialCount > 0\r\n    };\r\n  }\r\n\r\n  private toggleExpand = () => {\r\n    if (this.disabled || !this.hasChildren) return;\r\n    this.expanded = !this.expanded;\r\n  };\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    const allItems = Array.from(\r\n      this.host.closest('ifx-tree-view')?.querySelectorAll('ifx-tree-view-item') || []\r\n    );\r\n    const visibleItems = allItems.filter(item => {\r\n      let parent = item.parentElement?.closest('ifx-tree-view-item');\r\n      while (parent) {\r\n        const parentCmp = parent as any;\r\n        if (!(parentCmp.expandAllItems || parentCmp.expanded)) return false;\r\n        parent = parent.parentElement?.closest('ifx-tree-view-item');\r\n      }\r\n      return true;\r\n    });\r\n    const currentIndex = visibleItems.findIndex(el => el === this.host);\r\n    const focusLabelIcon = (el: Element | null) =>\r\n      (el as HTMLElement | null)?.focus();\r\n\r\n    switch (event.key) {\r\n      case 'ArrowDown': {\r\n        event.preventDefault();\r\n        for (let i = currentIndex + 1; i < visibleItems.length; i++) {\r\n          const next = visibleItems[i] as any;\r\n          if (!next.disabled) {\r\n            focusLabelIcon(next.shadowRoot?.querySelector('.tree-item__label-icon-container'));\r\n            break;\r\n          }\r\n        }\r\n        break;\r\n      }\r\n      case 'ArrowUp': {\r\n        event.preventDefault();\r\n        for (let i = currentIndex - 1; i >= 0; i--) {\r\n          const prev = visibleItems[i] as any;\r\n          if (!prev.disabled) {\r\n            focusLabelIcon(prev.shadowRoot?.querySelector('.tree-item__label-icon-container'));\r\n            break;\r\n          }\r\n        }\r\n        break;\r\n      }\r\n      case 'ArrowRight': {\r\n        event.preventDefault();\r\n        if (!this.isExpanded && this.hasChildren) {\r\n          this.expanded = true;\r\n        } else if (this.isExpanded && this.hasChildren) {\r\n          const firstChild = this.host.querySelector('ifx-tree-view-item');\r\n          if (firstChild && !(firstChild as any).disabled) {\r\n            focusLabelIcon((firstChild as HTMLElement).shadowRoot?.querySelector('.tree-item__label-icon-container'));\r\n          }\r\n        }\r\n        break;\r\n      }\r\n      case 'ArrowLeft': {\r\n        event.preventDefault();\r\n        if (this.isExpanded && this.hasChildren) {\r\n          this.expanded = false;\r\n        } else {\r\n          const parent = this.host.parentElement?.closest('ifx-tree-view-item');\r\n          if (parent && !(parent as any).disabled) {\r\n            focusLabelIcon((parent as HTMLElement).shadowRoot?.querySelector('.tree-item__label-icon-container'));\r\n          }\r\n        }\r\n        break;\r\n      }\r\n      case ' ':\r\n      case 'Enter': {\r\n        event.preventDefault();\r\n        if (this.hasChildren) {\r\n          const newCheckedState = !this.isChecked;\r\n          this.updateCheckState(newCheckedState);\r\n          const affectedItems = newCheckedState\r\n            ? this.expandOrCollapseAllDescendants(true)\r\n            : this.expandOrCollapseAllDescendants(false);\r\n          this.ifxTreeViewItemExpandChange.emit({\r\n            expanded: newCheckedState,\r\n            affectedItems,\r\n            component: this\r\n          });\r\n        } else {\r\n          this.updateCheckState(!this.isChecked);\r\n        }\r\n        break;\r\n      }\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        class={{\r\n          'tree-item': true,\r\n          'tree-item--expanded': this.isExpanded,\r\n          'tree-item--has-children': this.hasChildren,\r\n          'tree-item--disabled': this.disabled,\r\n        }}\r\n        role=\"treeitem\"\r\n        aria-expanded={this.isExpanded ? 'true' : 'false'}\r\n        data-level={this.level}\r\n        aria-disabled={this.disabled ? 'true' : undefined}\r\n        aria-label={this.ariaLabel}\r\n      >\r\n        <div class=\"tree-item__content\">\r\n          <div class=\"tree-item__checkbox-container\" onClick={e => e.stopPropagation()}>\r\n            <ifx-checkbox\r\n              size='s'\r\n              checked={this.partialChecked ? false : this.isChecked}\r\n              indeterminate={this.partialChecked}\r\n              onIfxChange={this.handleCheckboxChange}\r\n              disabled={this.disabled}\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"tree-item__header\"\r\n            style={{ paddingLeft: `${this.level * 24 + 10}px` }}\r\n            onClick={this.handleHeaderClick}\r\n            tabIndex={-1}\r\n            aria-disabled={this.disabled ? 'true' : undefined}\r\n          >\r\n            {this.hasChildren && (\r\n              <div class=\"tree-item__chevron-container\" onClick={this.toggleExpand}>\r\n                <ifx-icon class={`tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`}\r\n                          icon=\"chevron-right-16\"/>\r\n                <div class=\"tree-item__line\"/>\r\n              </div>\r\n            )}\r\n            <div\r\n              class=\"tree-item__label-icon-container\"\r\n              tabIndex={this.disabled ? -1 : 0}\r\n              onKeyDown={this.handleKeyDown}\r\n            >\r\n              <div class=\"tree-item__icon-container\">\r\n                {this.hasChildren ? (\r\n                  <Fragment>\r\n                    <ifx-icon class={{'icon--hidden': this.isExpanded}} icon=\"folder-16\"/>\r\n                    <ifx-icon class={{'icon--hidden': !this.isExpanded}} icon=\"folder-open-16\"/>\r\n                  </Fragment>\r\n                ) : (\r\n                  <ifx-icon icon=\"file-16\"/>\r\n                )}\r\n              </div>\r\n              <span class=\"tree-item__label\"><slot/></span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        {this.isExpanded && <div class=\"tree-item__children\"><slot name=\"children\"/></div>}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s}from"./p-PqnYwNKt.js";const e=".card-image{width:100%;height:100%;vertical-align:bottom;object-fit:cover}";const o=class{constructor(s){t(this,s);this.imgPosition=i(this,"imgPosition",7)}handlePosition(t){this.imgPosition.emit(t)}componentWillLoad(){this.handlePosition(this.position)}componentDidUpdate(){this.handlePosition(this.position)}render(){return s("img",{key:"ed999c190110ba94ee2a57d0e7b3097b047cfb1f",src:this.src,alt:this.alt,class:"card-image"})}};o.style=e;export{o as ifx_card_image};
+//# sourceMappingURL=p-c5d6762c.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardImageCss","CardImage","handlePosition","position","this","imgPosition","emit","componentWillLoad","componentDidUpdate","render","h","key","src","alt","class"],"sources":["src/components/card/card-image/card-image.scss?tag=ifx-card-image&encapsulation=shadow","src/components/card/card-image/card-image.tsx"],"sourcesContent":[".card-image {\r\n  width: 100%;\r\n  height: 100%;\r\n  vertical-align: bottom;\r\n  object-fit: cover;\r\n}","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-card-image',\r\n  styleUrl: 'card-image.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class CardImage {\r\n  @Prop() src: string;\r\n  @Prop() alt: string;\r\n  @Prop() position: string;\r\n  @Event() imgPosition: EventEmitter;\r\n\r\n  handlePosition(position) {\r\n    this.imgPosition.emit(position)\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.handlePosition(this.position)\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.handlePosition(this.position)\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <img src={this.src} alt={this.alt} class=\"card-image\" />\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAe,6E,MCQRC,EAAS,M,kEAMpB,cAAAC,CAAeC,GACbC,KAAKC,YAAYC,KAAKH,E,CAGxB,iBAAAI,GACEH,KAAKF,eAAeE,KAAKD,S,CAG3B,kBAAAK,GACEJ,KAAKF,eAAeE,KAAKD,S,CAG3B,MAAAM,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,IAAKR,KAAKQ,IAAKC,IAAKT,KAAKS,IAAKC,MAAM,c","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-d65a334c.entry.js → p-c6013ced.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as a,d as t,a as s}from"./p-PqnYwNKt.js";import{d as i,t as o}from"./p-DcmcuUOA.js";import{i as l}from"./p-Bw2fh5LT.js";const p=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex;flex-direction:column;width:100%}.wrapper__label{color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3"}.wrapper__label .required{margin-left:4px}.wrapper__label .required.error{color:#CD002F}:host(.wrapper--disabled) .wrapper__label{color:#BFBBBB}.wrapper__textarea{width:100%}.wrapper__textarea.fullWidth{width:100%}.wrapper__textarea.fullWidth textarea{width:100%;box-sizing:border-box}.wrapper__textarea textarea{border:1px solid #8D8786;border-radius:1px;padding:8px 16px;background-color:#FFFFFF;color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3";transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:2px solid #0A8276;outline-offset:0}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #CD002F}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #BFBBBB;background-color:#BFBBBB}:host(.wrapper--disabled) .wrapper__textarea textarea::placeholder{color:#FFFFFF}.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:#BFBBBB}';const d=class{constructor(a){e(this,a);this.ifxInput=r(this,"ifxInput",7);if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}this.inputId=`ifx-textarea-${++h}`;this.disabled=false;this.error=false;this.required=false;this.readOnly=false;this.resize="both";this.wrap="soft";this.fullWidth="false"}async reset(){this.resetTextarea()}handleComponentWidth(){const e=this.el.shadowRoot.querySelector(".wrapper__textarea");const r=this.fullWidth.toLowerCase()==="true";if(r){e.classList.add("fullWidth")}else if(e.classList.contains("fullWidth")){e.classList.remove("fullWidth")}}componentDidRender(){this.handleComponentWidth()}formResetCallback(){this.resetTextarea()}handleOnInput(e){this.value=e.target.value;this.ifxInput.emit(this.value)}resetTextarea(){this.value=""}async componentDidLoad(){if(!l(this.el)){const e=i();o("ifx-textarea",await e)}}render(){var e,r;return a(t,{key:"78ee16999292032b82986fe1e356e7f15609f0f4",class:`wrapper--${this.error?"error":""} wrapper--${this.disabled&&!this.error?"disabled":""}`},a("label",{key:"a4faec9c9761ef71c2025d9d5c6f6c8637786bbe",class:"wrapper__label",htmlFor:this.inputId},(e=this.label)===null||e===void 0?void 0:e.trim(),this.required&&a("span",{key:"7dba2fdd58743c379597dc59d839d8cb32dadbc1",class:`required ${this.error?"error":""}`},"*")),a("div",{key:"ce8d1a3c5f53ab7a378ac475b008d033e746db8d",class:"wrapper__textarea"},a("textarea",{key:"ab8d751375870e9293644d6f69c329afac342504","aria-label":"a textarea","aria-value":this.value,"aria-disabled":this.disabled&&!this.error,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&&!this.error,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,onInput:e=>this.handleOnInput(e)})),((r=this.caption)===null||r===void 0?void 0:r.trim())&&a("div",{key:"f9a033dd8fa43d821f0476f38161bb2dbf683432",class:"wrapper__caption"},this.caption.trim()))}get el(){return s(this)}};let h=0;d.style=p;export{d as ifx_textarea};
-//# sourceMappingURL=p-d65a334c.entry.js.map
+import{r as e,c as r,h as a,d as t,a as s}from"./p-PqnYwNKt.js";import{d as i,t as o}from"./p-DcmcuUOA.js";import{i as l}from"./p-Bw2fh5LT.js";const p=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex;flex-direction:column;width:100%}.wrapper__label{color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3"}.wrapper__label .required{margin-left:4px}.wrapper__label .required.error{color:#CD002F}:host(.wrapper--disabled) .wrapper__label{color:#BFBBBB}.wrapper__textarea{width:100%}.wrapper__textarea.fullWidth{width:100%}.wrapper__textarea.fullWidth textarea{width:100%;box-sizing:border-box}.wrapper__textarea textarea{border:1px solid #8D8786;border-radius:1px;padding:8px 16px;background-color:#FFFFFF;color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3";transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:2px solid #0A8276;outline-offset:0}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #CD002F}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #BFBBBB;background-color:#BFBBBB}:host(.wrapper--disabled) .wrapper__textarea textarea::placeholder{color:#FFFFFF}.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:#BFBBBB}';const h=class{constructor(a){e(this,a);this.ifxInput=r(this,"ifxInput",7);if(a.$hostElement$["s-ei"]){this.internals=a.$hostElement$["s-ei"]}else{this.internals=a.$hostElement$.attachInternals();a.$hostElement$["s-ei"]=this.internals}this.inputId=`ifx-textarea-${++d}`;this.disabled=false;this.error=false;this.required=false;this.readOnly=false;this.resize="both";this.wrap="soft";this.fullWidth="false"}async reset(){this.resetTextarea()}handleComponentWidth(){const e=this.el.shadowRoot.querySelector(".wrapper__textarea");const r=this.fullWidth.toLowerCase()==="true";if(r){e.classList.add("fullWidth")}else if(e.classList.contains("fullWidth")){e.classList.remove("fullWidth")}}componentDidRender(){this.handleComponentWidth()}formResetCallback(){this.resetTextarea()}handleOnInput(e){this.value=e.target.value;this.ifxInput.emit(this.value)}resetTextarea(){this.value=""}async componentDidLoad(){if(!l(this.el)){const e=i();o("ifx-textarea",await e)}}render(){var e,r;return a(t,{key:"a9f618b92f2720f7bf197e371af943aa2422f70c",class:`wrapper--${this.error?"error":""} wrapper--${this.disabled&&!this.error?"disabled":""}`},a("label",{key:"52ea7e0eb40c9748083a9773fcc85fd740840e02",class:"wrapper__label",htmlFor:this.inputId},(e=this.label)===null||e===void 0?void 0:e.trim(),this.required&&a("span",{key:"72297526f3f916daed89166c976aaeece30a74cb",class:`required ${this.error?"error":""}`},"*")),a("div",{key:"303064596188f7d41df4006ef017446fe75bfacb",class:"wrapper__textarea"},a("textarea",{key:"8aac393a2ae65d663de9c0abd2a69f823c5ebdd4","aria-label":"a textarea","aria-value":this.value,"aria-disabled":this.disabled&&!this.error,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&&!this.error,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,onInput:e=>this.handleOnInput(e)})),((r=this.caption)===null||r===void 0?void 0:r.trim())&&a("div",{key:"ab644ae0fd95135ec150ebe3cae25bde377133c0",class:"wrapper__caption"},this.caption.trim()))}get el(){return s(this)}};let d=0;h.style=p;export{h as ifx_textarea};
+//# sourceMappingURL=p-c6013ced.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["textareaCss","TextArea","constructor","hostRef","this","inputId","textareaId","disabled","error","required","readOnly","resize","wrap","fullWidth","reset","resetTextarea","handleComponentWidth","textareaWrapper","el","shadowRoot","querySelector","isFullWidth","toLowerCase","classList","add","contains","remove","componentDidRender","formResetCallback","handleOnInput","e","value","target","ifxInput","emit","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","Host","key","class","htmlFor","_a","label","trim","id","style","name","cols","rows","maxlength","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\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n    display: flex;\r\n    flex-direction: column;\r\n    width: 100%;\r\n}\r\n\r\n.wrapper__label {\r\n    color: tokens.$ifxColorBaseBlack;\r\n    font: tokens.$ifxBodyBody03;\r\n    & .required {\r\n        margin-left: 4px;\r\n        \r\n        &.error {\r\n          color: #CD002F;\r\n        }\r\n      }\r\n}\r\n:host(.wrapper--disabled) .wrapper__label {\r\n    color: tokens.$ifxColorEngineering300;\r\n}\r\n\r\n.wrapper__textarea {\r\n    width: 100%;\r\n    &.fullWidth { \r\n        width: 100%;\r\n        & textarea { \r\n            width: 100%;\r\n            box-sizing: border-box; \r\n        }\r\n    }\r\n}\r\n\r\n.wrapper__textarea textarea {\r\n    border: 1px solid tokens.$ifxColorEngineering400;\r\n    border-radius: tokens.$ifxSpace12;\r\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n    \r\n    background-color: tokens.$ifxColorBaseWhite;\r\n    color: tokens.$ifxColorBaseBlack;\r\n    font: tokens.$ifxBodyBody03;\r\n    \r\n    transition: all 100ms ease;\r\n    transition-property: border-color;\r\n\r\n    &:hover {\r\n        border: 1px solid tokens.$ifxColorEngineering500;\r\n    }\r\n    \r\n    &:focus-within {\r\n     outline: 2px solid tokens.$ifxColorOcean500;\r\n     outline-offset: 0; \r\n    }\r\n}\r\n\r\n:host(.wrapper--error) .wrapper__textarea textarea {\r\n    border: 1px solid tokens.$ifxColorRed500;\r\n}\r\n:host(.wrapper--disabled) .wrapper__textarea textarea {\r\n    border: 1px solid tokens.$ifxColorEngineering300;\r\n    background-color: tokens.$ifxColorEngineering300;\r\n\r\n    &::placeholder {\r\n        color: tokens.$ifxColorBaseWhite;\r\n    }\r\n}\r\n\r\n.wrapper__caption {\r\n    color: tokens.$ifxColorBaseBlack;\r\n    font: tokens.$ifxBodyBody05;\r\n}\r\n:host(.wrapper--error) .wrapper__caption {\r\n    color: tokens.$ifxColorRed500;\r\n}\r\n:host(.wrapper--disabled) .wrapper__caption {\r\n    color: tokens.$ifxColorEngineering300;\r\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n\t// formAssociated: true,\r\n\tshadow: true,\r\n\tstyleUrl: 'textarea.scss',\r\n\ttag: 'ifx-textarea'\r\n})\r\n\r\nexport class TextArea {\r\n\r\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\r\n\r\n\t@AttachInternals() internals: ElementInternals;\r\n\r\n\t@Event() ifxInput: EventEmitter<String>;\r\n\t@Element() el;\r\n\t@Prop() caption: string;\r\n\t@Prop() cols: number;\r\n\t@Prop() disabled: boolean = false;\r\n\t@Prop() error: boolean = false;\r\n\t@Prop() label: string;\r\n\t@Prop() maxlength: number;\r\n\t@Prop() name: string;\r\n\t@Prop() placeholder: string;\r\n\t@Prop() required: boolean = false;\r\n\t@Prop() readOnly: boolean = false;\r\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\r\n\t@Prop() rows: number;\r\n\t@Prop({ mutable: true }) value: string;\r\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\r\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\r\n\r\n\t@Method()\r\n\tasync reset() {\r\n\t\tthis.resetTextarea();\r\n\t}\r\n\r\n\thandleComponentWidth() {\r\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\r\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\r\n\r\n\t\tif (isFullWidth) {\r\n\t\t\ttextareaWrapper.classList.add('fullWidth')\r\n\t\t} else if (textareaWrapper.classList.contains('fullWidth')) {\r\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidRender() {\r\n\t\tthis.handleComponentWidth()\r\n\t}\r\n\r\n\tformResetCallback(): void {\r\n\t\tthis.resetTextarea();\r\n\t\t//this.internals.setFormValue(\"\");\r\n\t}\r\n\r\n\thandleOnInput(e: InputEvent): void {\r\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\r\n\t\t//this.internals.setFormValue(this.value);\r\n\t\tthis.ifxInput.emit(this.value);\r\n\t}\r\n\r\n\tresetTextarea() {\r\n\t\tthis.value = '';\r\n\t\t//this.internals.setValidity({});\r\n\t\t//this.internals.setFormValue('');\r\n\t}\r\n\r\n\t// componentWillLoad() {\r\n\t// \tthis.internals.setFormValue(this.value);\r\n\t// }\r\n\r\n\t\tasync componentDidLoad() { \r\n\t\tif(!isNestedInIfxComponent(this.el)) { \r\n\t\t\tconst framework = detectFramework();\r\n\t\t\ttrackComponent('ifx-textarea', await framework)\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled && !this.error ? 'disabled' : ''}`}>\r\n\t\t\t\t<label class='wrapper__label' htmlFor={this.inputId}>\r\n\t\t\t\t\t{this.label?.trim()}\r\n\t\t\t\t\t{this.required && (\r\n\t\t\t\t\t\t<span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</label>\r\n\r\n\t\t\t\t<div class='wrapper__textarea'>\r\n\t\t\t\t\t<textarea\r\n\t\t\t\t\t\taria-label='a textarea'\r\n\t\t\t\t\t\taria-value={this.value}\r\n\t\t\t\t\t\taria-disabled={this.disabled && !this.error}\r\n\t\t\t\t\t\tid={this.inputId}\r\n\t\t\t\t\t\tstyle={{ resize: this.resize }}\r\n\t\t\t\t\t\tname={this.name ? this.name : this.inputId}\r\n\t\t\t\t\t\tcols={this.cols}\r\n\t\t\t\t\t\trows={this.rows}\r\n\t\t\t\t\t\tmaxlength={this.maxlength}\r\n\t\t\t\t\t\twrap={this.wrap}\r\n\t\t\t\t\t\tdisabled={this.disabled && !this.error}\r\n\t\t\t\t\t\treadonly={this.readOnly}\r\n\t\t\t\t\t\tplaceholder={this.placeholder}\r\n\t\t\t\t\t\tvalue={this.value}\r\n\t\t\t\t\t\tonInput={(e) => this.handleOnInput(e)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t{this.caption?.trim() && (\r\n\t\t\t\t\t<div class='wrapper__caption'>\r\n\t\t\t\t\t\t{this.caption.trim()}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n}\r\n\r\nlet textareaId = 0;"],"mappings":"+IAAA,MAAMA,EAAc,8vC,MCYPC,EAAQ,MAPrB,WAAAC,CAAAC,G,6MASSC,KAAAC,QAAkB,kBAAkBC,IAQpCF,KAAQG,SAAY,MACpBH,KAAKI,MAAY,MAKjBJ,KAAQK,SAAY,MACpBL,KAAQM,SAAY,MACpBN,KAAMO,OAAgD,OAGtDP,KAAIQ,KAA4B,OACfR,KAASS,UAAW,OAwF7C,CArFA,WAAMC,GACLV,KAAKW,e,CAGN,oBAAAC,GACC,MAAMC,EAAkBb,KAAKc,GAAGC,WAAWC,cAAc,sBACzD,MAAMC,EAAcjB,KAAKS,UAAUS,gBAAkB,OAErD,GAAID,EAAa,CAChBJ,EAAgBM,UAAUC,IAAI,Y,MACxB,GAAIP,EAAgBM,UAAUE,SAAS,aAAc,CAC3DR,EAAgBM,UAAUG,OAAO,Y,EAInC,kBAAAC,GACCvB,KAAKY,sB,CAGN,iBAAAY,GACCxB,KAAKW,e,CAIN,aAAAc,CAAcC,GACb1B,KAAK2B,MAASD,EAAEE,OAA+BD,MAE/C3B,KAAK6B,SAASC,KAAK9B,KAAK2B,M,CAGzB,aAAAhB,GACCX,KAAK2B,MAAQ,E,CASb,sBAAMI,GACN,IAAIC,EAAuBhC,KAAKc,IAAK,CACpC,MAAMmB,EAAYC,IAClBC,EAAe,qBAAsBF,E,EAIvC,MAAAG,G,QACC,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,YAAYxC,KAAKI,MAAQ,QAAU,eAAeJ,KAAKG,WAAaH,KAAKI,MAAQ,WAAa,MAC1GiC,EAAA,SAAAE,IAAA,2CAAOC,MAAM,iBAAiBC,QAASzC,KAAKC,UAC1CyC,EAAA1C,KAAK2C,SAAK,MAAAD,SAAA,SAAEA,EAAAE,OACZ5C,KAAKK,UACLgC,EAAA,QAAAE,IAAA,2CAAMC,MAAO,YAAYxC,KAAKI,MAAQ,QAAU,MAAc,MAIhEiC,EAAK,OAAAE,IAAA,2CAAAC,MAAM,qBACVH,EACY,YAAAE,IAAA,qEACC,aAAAvC,KAAK2B,MACF,gBAAA3B,KAAKG,WAAaH,KAAKI,MACtCyC,GAAI7C,KAAKC,QACT6C,MAAO,CAAEvC,OAAQP,KAAKO,QACtBwC,KAAM/C,KAAK+C,KAAO/C,KAAK+C,KAAO/C,KAAKC,QACnC+C,KAAMhD,KAAKgD,KACXC,KAAMjD,KAAKiD,KACXC,UAAWlD,KAAKkD,UAChB1C,KAAMR,KAAKQ,KACXL,SAAUH,KAAKG,WAAaH,KAAKI,MACjC+C,SAAUnD,KAAKM,SACf8C,YAAapD,KAAKoD,YAClBzB,MAAO3B,KAAK2B,MACZ0B,QAAU3B,GAAM1B,KAAKyB,cAAcC,QAIpC4B,EAAAtD,KAAKuD,WAAO,MAAAD,SAAA,SAAAA,EAAEV,SACdP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTxC,KAAKuD,QAAQX,Q,2BAQpB,IAAI1C,EAAa,E","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-c6826c1e.entry.js → p-c896414e.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c as s,h as t,a as h}from"./p-PqnYwNKt.js";import{d as e,t as o}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";import{c as n}from"./p-BfP9ezJQ.js";const r=":host{display:inline-block}";const c=class{constructor(t){i(this,t);this.ifxOpen=s(this,"ifxOpen",7);this.ifxClose=s(this,"ifxClose",7);this.ifxDropdown=s(this,"ifxDropdown",7);this.placement="bottom-start";this.defaultOpen=false;this.internalIsOpen=false;this.noAppendToBody=false;this.noCloseOnOutsideClick=false;this.noCloseOnMenuClick=false;this.handleTriggerClick=()=>{if(!this.internalIsOpen)this.openDropdown();else this.closeDropdown()};this.handleTriggerKeyDown=i=>{const s=i.key;if(s==="Tab"&&this.internalIsOpen&&!i.shiftKey){i.preventDefault();this.focusFirstItem()}};this.handleMenuClick=()=>{if(!this.noCloseOnMenuClick)this.closeDropdown()};this.handleMenuKeyDown=i=>{var s,t,h;const e=this.getItemFocusables();if(!e.length)return;const o=e.indexOf(document.activeElement);switch(i.key){case"ArrowDown":i.preventDefault();e[(o+1)%e.length].focus();break;case"ArrowUp":i.preventDefault();e[(o-1+e.length)%e.length].focus();break;case"Home":i.preventDefault();e[0].focus();break;case"End":i.preventDefault();e[e.length-1].focus();break;case"Enter":case" ":case"Spacebar":i.preventDefault();(s=document.activeElement)===null||s===void 0?void 0:s.click();break;case"Escape":i.preventDefault();this.closeDropdown();(t=this.trigger)===null||t===void 0?void 0:t.focus();break;case"Tab":if(i.shiftKey&&o===0){i.preventDefault();this.closeDropdown();(h=this.trigger)===null||h===void 0?void 0:h.focus()}break}}}handleOutsideClick(i){const s=i.target;if(!this.noCloseOnOutsideClick&&!this.el.contains(s)&&!this.menu.contains(s)){this.closeDropdown()}}handleFocusOutside(i){const s=i.target;if(this.internalIsOpen&&!this.el.contains(s)&&!this.menu.contains(s)){this.closeDropdown()}}getItemFocusables(){if(!this.menu)return[];const i=Array.from(this.menu.querySelectorAll("ifx-dropdown-item"));return i.filter((i=>!(i.getAttribute("hide")==="true"||i.classList.contains("hide")))).map((i=>{var s;return(s=i.shadowRoot)===null||s===void 0?void 0:s.querySelector("a")})).filter((i=>!!i))}componentWillLoad(){this.updateSlotContent();this.watchHandlerIsOpen(this.defaultOpen,this.internalIsOpen)}async componentDidLoad(){if(!a(this.el)){const i=e();o("ifx-dropdown",await i)}}watchHandlerIsOpen(i,s){if(i!==s&&i!==this.internalIsOpen){if(i){this.openDropdown()}else{this.closeDropdown()}}}watchHandlerDisabled(i){if(this.trigger){this.trigger.disabled=i}}watchHandlerSlot(){this.updateSlotContent()}focusFirstItem(){const[i]=this.getItemFocusables();i===null||i===void 0?void 0:i.focus()}updateSlotContent(){const i=this.el.querySelector("ifx-dropdown-trigger-button, ifx-dropdown-trigger");if(i!==this.trigger){if(this.trigger){this.trigger.removeEventListener("click",this.handleTriggerClick);this.trigger.removeEventListener("keydown",this.handleTriggerKeyDown)}this.trigger=i;if(this.trigger){this.trigger.disabled=this.disabled;this.trigger.addEventListener("click",this.handleTriggerClick);this.trigger.addEventListener("keydown",this.handleTriggerKeyDown)}}const s=this.el.querySelector("ifx-dropdown-menu");if(!this.noAppendToBody){if(this.menu&&this.menu!==s){this.menu.removeEventListener("click",this.handleMenuClick);this.menu.removeEventListener("keydown",this.handleMenuKeyDown);this.menu.remove()}this.menu=s;if(this.menu&&!document.body.contains(this.menu)){document.body.append(this.menu)}}else{this.menu=s}if(this.menu){this.menu.removeEventListener("click",this.handleMenuClick);this.menu.removeEventListener("keydown",this.handleMenuKeyDown);this.menu.addEventListener("click",this.handleMenuClick);this.menu.addEventListener("keydown",this.handleMenuKeyDown)}}menuClickHandler(){if(!this.noCloseOnMenuClick){this.closeDropdown()}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}if(this.menu){this.menu.remove()}}async isOpen(){return this.internalIsOpen}async closeDropdown(){if(this.internalIsOpen){this.internalIsOpen=false;this.trigger.isOpen=false;this.menu.isOpen=false;this.ifxClose.emit()}if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}async openDropdown(){if(!this.internalIsOpen&&!this.disabled){this.internalIsOpen=true;this.trigger.isOpen=true;this.menu.isOpen=true;this.popperInstance=n(this.el,this.menu,{placement:this.placement});this.ifxOpen.emit()}}render(){return t("div",{key:"98fae8a111b3e91b8a4f2690e0dd462d1c6c4791","aria-label":"dropdown menu",class:"dropdown"},t("slot",{key:"f491cae9545a2d18342efa9f2fb29412d580f643"}))}get el(){return h(this)}static get watchers(){return{defaultOpen:["watchHandlerIsOpen"],disabled:["watchHandlerDisabled"]}}};c.style=r;export{c as ifx_dropdown};
-//# sourceMappingURL=p-c6826c1e.entry.js.map
+import{r as i,c as s,h as t,a as h}from"./p-PqnYwNKt.js";import{d as e,t as o}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";import{c as n}from"./p-BfP9ezJQ.js";const c=":host{display:inline-block}";const r=class{constructor(t){i(this,t);this.ifxOpen=s(this,"ifxOpen",7);this.ifxClose=s(this,"ifxClose",7);this.ifxDropdown=s(this,"ifxDropdown",7);this.placement="bottom-start";this.defaultOpen=false;this.internalIsOpen=false;this.noAppendToBody=false;this.noCloseOnOutsideClick=false;this.noCloseOnMenuClick=false;this.handleTriggerClick=()=>{if(!this.internalIsOpen)this.openDropdown();else this.closeDropdown()};this.handleTriggerKeyDown=i=>{const s=i.key;if(s==="Tab"&&this.internalIsOpen&&!i.shiftKey){i.preventDefault();this.focusFirstItem()}};this.handleMenuClick=()=>{if(!this.noCloseOnMenuClick)this.closeDropdown()};this.handleMenuKeyDown=i=>{var s,t,h;const e=this.getItemFocusables();if(!e.length)return;const o=e.indexOf(document.activeElement);switch(i.key){case"ArrowDown":i.preventDefault();e[(o+1)%e.length].focus();break;case"ArrowUp":i.preventDefault();e[(o-1+e.length)%e.length].focus();break;case"Home":i.preventDefault();e[0].focus();break;case"End":i.preventDefault();e[e.length-1].focus();break;case"Enter":case" ":case"Spacebar":i.preventDefault();(s=document.activeElement)===null||s===void 0?void 0:s.click();break;case"Escape":i.preventDefault();this.closeDropdown();(t=this.trigger)===null||t===void 0?void 0:t.focus();break;case"Tab":if(i.shiftKey&&o===0){i.preventDefault();this.closeDropdown();(h=this.trigger)===null||h===void 0?void 0:h.focus()}break}}}handleOutsideClick(i){const s=i.target;if(!this.noCloseOnOutsideClick&&!this.el.contains(s)&&!this.menu.contains(s)){this.closeDropdown()}}handleFocusOutside(i){const s=i.target;if(this.internalIsOpen&&!this.el.contains(s)&&!this.menu.contains(s)){this.closeDropdown()}}getItemFocusables(){if(!this.menu)return[];const i=Array.from(this.menu.querySelectorAll("ifx-dropdown-item"));return i.filter((i=>!(i.getAttribute("hide")==="true"||i.classList.contains("hide")))).map((i=>{var s;return(s=i.shadowRoot)===null||s===void 0?void 0:s.querySelector("a")})).filter((i=>!!i))}componentWillLoad(){this.updateSlotContent();this.watchHandlerIsOpen(this.defaultOpen,this.internalIsOpen)}async componentDidLoad(){if(!a(this.el)){const i=e();o("ifx-dropdown",await i)}}watchHandlerIsOpen(i,s){if(i!==s&&i!==this.internalIsOpen){if(i){this.openDropdown()}else{this.closeDropdown()}}}watchHandlerDisabled(i){if(this.trigger){this.trigger.disabled=i}}watchHandlerSlot(){this.updateSlotContent()}focusFirstItem(){const[i]=this.getItemFocusables();i===null||i===void 0?void 0:i.focus()}updateSlotContent(){const i=this.el.querySelector("ifx-dropdown-trigger-button, ifx-dropdown-trigger");if(i!==this.trigger){if(this.trigger){this.trigger.removeEventListener("click",this.handleTriggerClick);this.trigger.removeEventListener("keydown",this.handleTriggerKeyDown)}this.trigger=i;if(this.trigger){this.trigger.disabled=this.disabled;this.trigger.addEventListener("click",this.handleTriggerClick);this.trigger.addEventListener("keydown",this.handleTriggerKeyDown)}}const s=this.el.querySelector("ifx-dropdown-menu");if(!this.noAppendToBody){if(this.menu&&this.menu!==s){this.menu.removeEventListener("click",this.handleMenuClick);this.menu.removeEventListener("keydown",this.handleMenuKeyDown);this.menu.remove()}this.menu=s;if(this.menu&&!document.body.contains(this.menu)){document.body.append(this.menu)}}else{this.menu=s}if(this.menu){this.menu.removeEventListener("click",this.handleMenuClick);this.menu.removeEventListener("keydown",this.handleMenuKeyDown);this.menu.addEventListener("click",this.handleMenuClick);this.menu.addEventListener("keydown",this.handleMenuKeyDown)}}menuClickHandler(){if(!this.noCloseOnMenuClick){this.closeDropdown()}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}if(this.menu){this.menu.remove()}}async isOpen(){return this.internalIsOpen}async closeDropdown(){if(this.internalIsOpen){this.internalIsOpen=false;this.trigger.isOpen=false;this.menu.isOpen=false;this.ifxClose.emit()}if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}async openDropdown(){if(!this.internalIsOpen&&!this.disabled){this.internalIsOpen=true;this.trigger.isOpen=true;this.menu.isOpen=true;this.popperInstance=n(this.el,this.menu,{placement:this.placement});this.ifxOpen.emit()}}render(){return t("div",{key:"78b68c1c7dddb7c41b39c6be63acd951c0c888ad","aria-label":"dropdown menu",class:"dropdown"},t("slot",{key:"2605abfa59787f7c135c762ac651c1ccc30fb59b"}))}get el(){return h(this)}static get watchers(){return{defaultOpen:["watchHandlerIsOpen"],disabled:["watchHandlerDisabled"]}}};r.style=c;export{r as ifx_dropdown};
+//# sourceMappingURL=p-c896414e.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","Dropdown","constructor","hostRef","this","placement","defaultOpen","internalIsOpen","noAppendToBody","noCloseOnOutsideClick","noCloseOnMenuClick","handleTriggerClick","openDropdown","closeDropdown","handleTriggerKeyDown","e","key","shiftKey","preventDefault","focusFirstItem","handleMenuClick","handleMenuKeyDown","items","getItemFocusables","length","i","indexOf","document","activeElement","focus","_a","click","_b","trigger","_c","handleOutsideClick","event","target","el","contains","menu","handleFocusOutside","hosts","Array","from","querySelectorAll","filter","h","getAttribute","classList","map","shadowRoot","querySelector","componentWillLoad","updateSlotContent","watchHandlerIsOpen","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","newValue","oldValue","watchHandlerDisabled","disabled","watchHandlerSlot","first","newTrigger","removeEventListener","addEventListener","newMenu","remove","body","append","menuClickHandler","disconnectedCallback","popperInstance","destroy","isOpen","ifxClose","emit","createPopper","ifxOpen","render","class"],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n    display: inline-block;\r\n}","import { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport { createPopper } from '@popperjs/core';\r\n \r\n\r\nimport { IOpenable } from './IOpenable';\r\n\r\nexport type Placement =\r\n  | 'auto'\r\n  | 'auto-start'\r\n  | 'auto-end'\r\n  | 'top'\r\n  | 'top-start'\r\n  | 'top-end'\r\n  | 'bottom'\r\n  | 'bottom-start'\r\n  | 'bottom-end'\r\n  | 'right'\r\n  | 'right-start'\r\n  | 'right-end'\r\n  | 'left'\r\n  | 'left-start'\r\n  | 'left-end';\r\n\r\n@Component({\r\n  tag: 'ifx-dropdown',\r\n  styleUrl: 'dropdown.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class Dropdown {\r\n  @Prop() placement: Placement = 'bottom-start';\r\n  @Prop() defaultOpen: boolean = false;\r\n  @State() internalIsOpen: boolean = false;\r\n  @Prop() noAppendToBody: boolean = false;\r\n  @Event() ifxOpen: EventEmitter;\r\n  @Event() ifxClose: EventEmitter;\r\n  @Event() ifxDropdown: EventEmitter;\r\n  @Prop() disabled: boolean;\r\n  @Prop() noCloseOnOutsideClick: boolean = false;\r\n  @Prop() noCloseOnMenuClick: boolean = false;\r\n  @Element() el;\r\n  @State() trigger: HTMLElement;\r\n  @State() menu: HTMLElement\r\n  // Popper instance for positioning\r\n  popperInstance: any;\r\n\r\n  @Listen('mousedown', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    const target = event.target as HTMLElement;\r\n\r\n    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\r\n      this.closeDropdown();\r\n    }\r\n  }\r\n\r\n  @Listen('focusin', { target: 'document' })\r\n  handleFocusOutside(event: FocusEvent) {\r\n    const target = event.target as HTMLElement;\r\n    if (\r\n      this.internalIsOpen &&\r\n      !this.el.contains(target) &&\r\n      !this.menu.contains(target)\r\n    ) {\r\n      this.closeDropdown();\r\n    }\r\n  }\r\n\r\n  private handleTriggerClick = () => {\r\n    if (!this.internalIsOpen) this.openDropdown();\r\n    else this.closeDropdown();\r\n  };\r\n\r\n  private handleTriggerKeyDown = (e: KeyboardEvent) => {\r\n    const key = e.key;\r\n    if (key === 'Tab' && this.internalIsOpen && !e.shiftKey) {\r\n      e.preventDefault();\r\n      this.focusFirstItem();\r\n    }\r\n  };\r\n\r\n  private handleMenuClick = () => {\r\n  if (!this.noCloseOnMenuClick) this.closeDropdown();\r\n};\r\n\r\n\r\nprivate getItemFocusables(): HTMLElement[] {\r\n  if (!this.menu) return [];\r\n  const hosts = Array.from(this.menu.querySelectorAll('ifx-dropdown-item')) as HTMLElement[];\r\n  return hosts\r\n    .filter(h => !(h.getAttribute('hide') === 'true' || h.classList.contains('hide')))\r\n    .map(h => h.shadowRoot?.querySelector('a') as HTMLElement | null)\r\n    .filter((el): el is HTMLElement => !!el);\r\n}\r\n\r\nprivate handleMenuKeyDown = (e: KeyboardEvent) => {\r\n const items = this.getItemFocusables();\r\n  if (!items.length) return;\r\n\r\n  const i = items.indexOf(document.activeElement as HTMLElement);\r\n\r\n  switch (e.key) {\r\n    case 'ArrowDown':\r\n      e.preventDefault();\r\n      items[(i + 1) % items.length].focus();\r\n      break;\r\n    case 'ArrowUp':\r\n      e.preventDefault();\r\n      items[(i - 1 + items.length) % items.length].focus();\r\n      break;\r\n    case 'Home':\r\n      e.preventDefault();\r\n      items[0].focus();\r\n      break;\r\n    case 'End':\r\n      e.preventDefault();\r\n      items[items.length - 1].focus();\r\n      break;\r\n    case 'Enter':\r\n    case ' ':\r\n    case 'Spacebar':\r\n      e.preventDefault();\r\n      (document.activeElement as HTMLElement)?.click();\r\n      break;\r\n    case 'Escape':\r\n      e.preventDefault();\r\n      this.closeDropdown();\r\n      (this.trigger as HTMLElement)?.focus();\r\n      break;\r\n    case 'Tab':\r\n      if (e.shiftKey && i === 0) {\r\n        e.preventDefault();\r\n        this.closeDropdown();\r\n        (this.trigger as HTMLElement)?.focus();\r\n      }\r\n      break;\r\n  }\r\n};\r\n\r\n  componentWillLoad() {\r\n    //maybe not needed\r\n    this.updateSlotContent();\r\n    this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-dropdown', await framework)\r\n    }\r\n  }\r\n\r\n  @Watch('defaultOpen')\r\n  watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\r\n    if (newValue !== oldValue && newValue !== this.internalIsOpen) {\r\n      if (newValue) {\r\n        this.openDropdown();\r\n      } else {\r\n        this.closeDropdown();\r\n      }\r\n    }\r\n  }\r\n\r\n  @Watch('disabled')\r\n  watchHandlerDisabled(newValue: boolean) {\r\n    if (this.trigger) {\r\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\r\n    }\r\n  }\r\n\r\n  @Listen('slotchange')\r\n  watchHandlerSlot() {\r\n    this.updateSlotContent();\r\n  }\r\n\r\nprivate focusFirstItem() {\r\n  const [first] = this.getItemFocusables();\r\n  first?.focus();\r\n}\r\n\r\n\r\n  updateSlotContent() {\r\n   const newTrigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger') as HTMLElement | null;\r\n\r\n    if (newTrigger !== this.trigger) {\r\n      if (this.trigger) {\r\n        this.trigger.removeEventListener('click', this.handleTriggerClick);\r\n        this.trigger.removeEventListener('keydown', this.handleTriggerKeyDown);\r\n      }\r\n      this.trigger = newTrigger!;\r\n      if (this.trigger) {\r\n        (this.trigger as any).disabled = this.disabled;\r\n        this.trigger.addEventListener('click', this.handleTriggerClick);\r\n        this.trigger.addEventListener('keydown', this.handleTriggerKeyDown);\r\n      }\r\n    }\r\n\r\n  const newMenu = this.el.querySelector('ifx-dropdown-menu') as HTMLElement | null;\r\n\r\n  if (!this.noAppendToBody) {\r\n    if (this.menu && this.menu !== newMenu) {\r\n      this.menu.removeEventListener('click', this.handleMenuClick);\r\n      this.menu.removeEventListener('keydown', this.handleMenuKeyDown);\r\n      this.menu.remove();\r\n    }\r\n    this.menu = newMenu!;\r\n    if (this.menu && !document.body.contains(this.menu)) {\r\n      document.body.append(this.menu);\r\n    }\r\n  } else {\r\n    this.menu = newMenu!;\r\n  }\r\n\r\n  if (this.menu) {\r\n    this.menu.removeEventListener('click', this.handleMenuClick);\r\n    this.menu.removeEventListener('keydown', this.handleMenuKeyDown);\r\n    this.menu.addEventListener('click', this.handleMenuClick);\r\n    this.menu.addEventListener('keydown', this.handleMenuKeyDown);\r\n  }\r\n  }\r\n\r\n  menuClickHandler() {\r\n    if (!this.noCloseOnMenuClick) {\r\n      this.closeDropdown();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    if (this.popperInstance) {\r\n      this.popperInstance.destroy();\r\n      this.popperInstance = null;\r\n    }\r\n\r\n    if (this.menu) {\r\n      this.menu.remove();\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async isOpen() {\r\n    return this.internalIsOpen;\r\n  }\r\n\r\n  @Method()\r\n  async closeDropdown() {\r\n    if (this.internalIsOpen) {\r\n      this.internalIsOpen = false;\r\n    \r\n      (this.trigger as unknown as IOpenable).isOpen = false;\r\n      (this.menu as unknown as IOpenable).isOpen = false;\r\n   \r\n      this.ifxClose.emit();\r\n    }\r\n \r\n    if (this.popperInstance) {\r\n      this.popperInstance.destroy();\r\n      this.popperInstance = null;\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async openDropdown() {\r\n    if (!this.internalIsOpen && !this.disabled) {\r\n      this.internalIsOpen = true;\r\n      (this.trigger as any).isOpen = true;\r\n      (this.menu as any).isOpen = true;\r\n      this.popperInstance = createPopper(this.el, this.menu, { placement: this.placement });\r\n      this.ifxOpen.emit();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div aria-label='dropdown menu' class='dropdown'>\r\n        <slot />\r\n      </div>\r\n    )\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-22e9960d.entry.js → p-c8a488bb.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as s,a as i}from"./p-PqnYwNKt.js";import{d as r,t as o}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";const l=':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;color:#1D1D1D;line-height:1.5rem;font-weight:400}.group__label:empty{display:none}.group__label .required{color:#575352;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-weight:400;font-size:0.75rem;line-height:1rem}.group__caption.error{color:#CD002F}';const n=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=r();o("ifx-segmented-control",await e)}this.setActiveSegment()}render(){return s("div",{key:"74bfd584af640b44d4fdeaa674e0df4003d58383","aria-value":this.selectedValue,"aria-label":"segmented control",class:"group"},s("div",{key:"233e32decc7484857fe34397d10191fa60f101ff",class:"group__label"},this.label.trim(),this.required&&this.label.trim().toLowerCase()!==""&&s("span",{key:"59e000fd4bf388832d2dc31f2487f90a555aedf7",class:`required ${this.error?"error":""}`},"*")),s("div",{key:"4368841e6a763be4407ada54434297b699e8d2b8",class:"group__controls"},s("slot",{key:"f4d60a5f83969042e4198aa67687628b25dbf68b"})),this.caption.trim()&&s("div",{key:"4c46eec275fea48fd95df56519739fd2ba97b807",class:`group__caption ${this.error?"error":""}`},s("ifx-icon",{key:"656b6becac2b36bb32bf7ba8b4b247fe69e1a212",icon:"c-info-16"})," ",this.caption.trim()))}componentDidRender(){this.setSegmentSize()}get SegmentedControl(){return i(this)}};n.style=l;export{n as ifx_segmented_control};
-//# sourceMappingURL=p-22e9960d.entry.js.map
+import{r as e,c as t,h as s,a as i}from"./p-PqnYwNKt.js";import{d as r,t as o}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";const c=':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;color:#1D1D1D;line-height:1.5rem;font-weight:400}.group__label:empty{display:none}.group__label .required{color:#575352;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-weight:400;font-size:0.75rem;line-height:1rem}.group__caption.error{color:#CD002F}';const l=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=r();o("ifx-segmented-control",await e)}this.setActiveSegment()}render(){return s("div",{key:"706d281e237d35c615ef19fc5843bcc1d0f69cd5","aria-value":this.selectedValue,"aria-label":"segmented control",class:"group"},s("div",{key:"1ba15cc20ec7dbe8fd38c7078a6a25f4f6074c7b",class:"group__label"},this.label.trim(),this.required&&this.label.trim().toLowerCase()!==""&&s("span",{key:"1edd2c6760432e9d1e6cea3494e15f0ce61aa833",class:`required ${this.error?"error":""}`},"*")),s("div",{key:"cbcc9f0ec911a27a0adb273cff1c9732ac24b7c3",class:"group__controls"},s("slot",{key:"1d9949d1a9381f688238599f8f084039d22842b3"})),this.caption.trim()&&s("div",{key:"04a9a16afbb6217391a891e4f003f23a454e68b6",class:`group__caption ${this.error?"error":""}`},s("ifx-icon",{key:"9bda23de0c260440d1cfc9d3808b451cc6221253",icon:"c-info-16"})," ",this.caption.trim()))}componentDidRender(){this.setSegmentSize()}get SegmentedControl(){return i(this)}};l.style=c;export{l as ifx_segmented_control};
+//# sourceMappingURL=p-c8a488bb.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["segmentedControlCss","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","toLowerCase","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\";\r\n@use \"../../global/font.scss\";\r\n\r\n.group {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n}\r\n\r\n.group__label {\r\n    font-size: tokens.$ifxFontSizeM;\r\n    color: tokens.$ifxColorBaseBlack;\r\n    line-height: tokens.$ifxLineHeightM;\r\n    font-weight: tokens.$ifxFontWeightRegular;\r\n    \r\n    &:empty {\r\n        display: none;\r\n    }\r\n\r\n    & .required {\r\n        color: tokens.$ifxColorEngineering500;\r\n        margin-left: tokens.$ifxSpace50;\r\n\r\n        &.error {\r\n            color: tokens.$ifxColorRed500;\r\n        }\r\n    }\r\n}\r\n\r\n.group__controls {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.group__controls ::slotted(*) {\r\n    margin-left: -1px;\r\n    margin-top: -1px;\r\n}\r\n\r\n.group__caption {\r\n    margin-top: tokens.$ifxSpace50;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: tokens.$ifxSpace100;\r\n    font-weight: tokens.$ifxFontWeightRegular;\r\n    font-size: tokens.$ifxFontSizeXs;\r\n    line-height: tokens.$ifxLineHeightXs;\r\n\r\n    &.error {\r\n            color: tokens.$ifxColorRed500;\r\n        }\r\n}\r\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component ({\r\n    tag: 'ifx-segmented-control',\r\n    styleUrl: 'segmented-control.scss',\r\n    shadow: true\r\n})\r\n\r\nexport class SegmentedControl {\r\n    @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\r\n\r\n    @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\r\n\r\n    @Prop() caption: string = '';\r\n    @Prop() label: string = '';\r\n    @Prop() size: 'regular' | 'small' = 'regular';\r\n    @Prop() required: boolean = false;\r\n    @Prop() error: boolean = false;\r\n\r\n\r\n    @Listen('segmentSelect')\r\n    onSegmentSelect(event: CustomEvent) {\r\n        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\r\n        this.selectedValue = selectedValue;\r\n        this.ifxChange.emit({ previousValue, selectedValue });\r\n    }\r\n\r\n    private selectedValue: string = '';\r\n\r\n    unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\r\n        let previousValue: string;\r\n        let selectedValue: string;\r\n\r\n        const segments: NodeList = this.getSegments();\r\n        segments.forEach((control: HTMLIfxSegmentElement) => {\r\n            if (control.selected) {\r\n                if (control.segmentIndex !== newSelectedIndex) {\r\n                    control.selected = false;\r\n                    previousValue = control.value;\r\n                } else {\r\n                    selectedValue = control.value;\r\n                }\r\n            }\r\n        })\r\n\r\n        return { previousValue, selectedValue };\r\n    }\r\n\r\n    getSegments(): NodeList {\r\n        return this.SegmentedControl.querySelectorAll('ifx-segment');\r\n    }\r\n\r\n    setActiveSegment(): void {\r\n        const segments: NodeList = this.getSegments();\r\n        let activeSegmentedControlFound = false;\r\n        segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\r\n            control.segmentIndex = idx;\r\n            if (activeSegmentedControlFound) {\r\n                if (control.selected) control.selected = false;\r\n            } else {\r\n                if (control.selected) {\r\n                    activeSegmentedControlFound = true;\r\n                    this.selectedValue = control.value;\r\n                }\r\n            }\r\n        });\r\n    }\r\n\r\n    setSegmentSize(): void {\r\n        const segments: NodeList = this.getSegments();\r\n        segments.forEach((control: HTMLIfxSegmentElement) => {\r\n            control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\r\n        });\r\n    }\r\n\r\n    async componentDidLoad() {\r\n        if(!isNestedInIfxComponent(this.SegmentedControl)) { \r\n            const framework = detectFramework();\r\n            trackComponent('ifx-segmented-control', await framework)\r\n        }\r\n        this.setActiveSegment();\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div aria-value={this.selectedValue} aria-label='segmented control' class=\"group\">\r\n                <div class='group__label'>\r\n                    { this.label.trim() }\r\n                    { this.required && this.label.trim().toLowerCase() !== \"\" && <span class={`required ${this.error ? 'error' : ''}`}>*</span> }\r\n                </div>\r\n                \r\n                <div class='group__controls'>\r\n                    <slot />\r\n                </div>\r\n                \r\n                {\r\n                    this.caption.trim() &&\r\n                    <div class={`group__caption ${this.error ? 'error' : ''}`}>\r\n                        <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\r\n                    </div>\r\n                }\r\n            </div>\r\n        );\r\n    }\r\n\r\n    componentDidRender() {\r\n        this.setSegmentSize();\r\n    }\r\n}"],"mappings":"wIAAA,MAAMA,EAAsB,mmB,MCWfC,EAAgB,MAN7B,WAAAC,CAAAC,G,+CAWYC,KAAOC,QAAW,GAClBD,KAAKE,MAAW,GAChBF,KAAIG,KAAwB,UAC5BH,KAAQI,SAAY,MACpBJ,KAAKK,MAAY,MAUjBL,KAAaM,cAAW,EAiFnC,CAvFG,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,EAAiB,OAAAC,IAAA,wDAAAtC,KAAKM,cAAa,aAAa,oBAAoBiC,MAAM,SACtEF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,gBACLvC,KAAKE,MAAMsC,OACXxC,KAAKI,UAAYJ,KAAKE,MAAMsC,OAAOC,gBAAkB,IAAMJ,EAAA,QAAAC,IAAA,2CAAMC,MAAO,YAAYvC,KAAKK,MAAQ,QAAU,MAAI,MAGrHgC,EAAK,OAAAC,IAAA,2CAAAC,MAAM,mBACPF,EAAA,QAAAC,IAAA,8CAIAtC,KAAKC,QAAQuC,QACbH,EAAA,OAAAC,IAAA,2CAAKC,MAAO,kBAAkBvC,KAAKK,MAAQ,QAAU,MACjDgC,EAAU,YAAAC,IAAA,2CAAAI,KAAK,cAAuB,IAAG1C,KAAKC,QAAQuC,Q,CAO1E,kBAAAG,GACI3C,KAAK0B,gB","ignoreList":[]}