@siemens/ix 0.0.0-pr-1974-20250624072317 → 0.0.0-pr-1974-20250627115746

package/dist/esm/index.js

@@ -8,7 +8,7 @@ import { A as Animation } from './animation-Dp15M30K.js';
 export { T as TypedEvent } from './typed-event-BdCnOrqW.js';
 export { a as convertToAbbreviationString, c as convertToRemString } from './rwd.util-pXYAoEyc.js';
 export { g as getCurrentSystemAppearance, t as themeSwitcher } from './theme-switcher-CA3k28fo.js';
-export { e as handlePlatformHelpers } from './index-B6NtGPRE.js';
+export { e as handlePlatformHelpers } from './index-DJsXFBNm.js';
 import './index-DLTnniMb.js';
 
 /*
@@ -94,22 +94,7 @@ function showModalLoading(message) {
     };
 }
 
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-async function applyPolyfills() {
-    /**
-     * Placeholder to not break existing applications
-     * https://github.com/ionic-team/stencil/issues/5780
-     */
-}
-
-export { FilterState, applyPolyfills, getCoreDelegate, getToastContainer, setToastPosition, showModalLoading, toast };
+export { FilterState, getCoreDelegate, getToastContainer, setToastPosition, showModalLoading, toast };
 //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["src/components/category-filter/filter-state.ts","src/components/toast/toast-utils.ts","src/components/utils/modal/loading.ts","src/index.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LogicalFilterOperator } from './logical-filter-operator';\nexport class FilterState {\n  public tokens: string[] = [];\n  public categories: {\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }[] = [];\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { ShowToastResult } from './toast-container';\nexport type ToastType = 'info' | 'success' | 'error' | 'warning';\nexport type ToastPosition = 'bottom-right' | 'top-right';\n\nexport interface ToastConfig {\n  title?: string;\n  message: string | HTMLElement;\n  type?: ToastType;\n  autoClose?: boolean;\n  autoCloseDelay?: number;\n  icon?: string;\n  iconColor?: string;\n}\n\nexport function getToastContainer() {\n  const containerList = Array.from(\n    document.querySelectorAll('ix-toast-container')\n  );\n  const [container] = containerList;\n  if (containerList.length > 1) {\n    console.warn(\n      'Multiple toast containers were found. Only the first one will be used.'\n    );\n    return container;\n  }\n  if (!container) {\n    const toastContainer = document.createElement('ix-toast-container');\n    document.body.appendChild(toastContainer);\n\n    return toastContainer;\n  }\n  return container;\n}\n\nexport function setToastPosition(position: ToastPosition) {\n  const container = getToastContainer();\n  container.setAttribute('position', position);\n}\n\nfunction toast(config: ToastConfig): Promise<ShowToastResult> {\n  const container = getToastContainer();\n  return container.showToast(config);\n}\n\ntoast.info = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'info',\n  });\n};\n\ntoast.error = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'error',\n  });\n};\n\ntoast.success = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'success',\n  });\n};\n\ntoast.warning = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'warning',\n  });\n};\n\nexport { toast };\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport Animation from '../animation';\nimport { getCoreDelegate } from '../delegate';\n\nexport function showModalLoading(message: string) {\n  const modal = document.createElement('ix-modal');\n  modal.closeOnEscape = false;\n\n  const loading = document.createElement('ix-modal-loading');\n  loading.innerText = message;\n  modal.appendChild(loading);\n\n  getCoreDelegate().attachView(modal);\n  modal.showModal();\n\n  return {\n    update: (text: string) => (loading.innerHTML = text),\n    finish: (text?: string, timeout: number = 250) => {\n      if (text !== undefined) {\n        loading.innerText = text;\n      } else {\n        timeout = 0;\n      }\n      setTimeout(() => {\n        modal.closeModal(null);\n        setTimeout(\n          async () => await getCoreDelegate().removeView(modal),\n          Animation.mediumTime\n        );\n      }, timeout);\n    },\n  };\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport * from './components/category-filter/filter-state';\nexport * from './components/category-filter/input-state';\nexport * from './components/category-filter/logical-filter-operator';\nexport { FlipTileState } from './components/flip-tile/flip-tile-state';\nexport * from './components/toast/toast-utils';\nexport * from './components/tree-item/default-tree-item';\nexport * from './components/tree/tree-model';\nexport * from './components/upload/upload-file-state';\nexport * from './components/utils/delegate';\nexport { ElementReference } from './components/utils/element-reference';\nexport * from './components/utils/modal';\nexport * from './components/utils/typed-event';\nexport { NotificationColor } from './components/utils/notification-color';\nexport {\n  convertToAbbreviationString,\n  convertToRemString,\n} from './components/utils/rwd.util';\nexport * from './components/utils/theme-switcher';\nexport { handlePlatformHelpers, IxConfig } from './setup';\n\nexport async function applyPolyfills() {\n  /**\n   * Placeholder to not break existing applications\n   * https://github.com/ionic-team/stencil/issues/5780\n   */\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["src/components/category-filter/filter-state.ts","src/components/toast/toast-utils.ts","src/components/utils/modal/loading.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LogicalFilterOperator } from './logical-filter-operator';\nexport class FilterState {\n  public tokens: string[] = [];\n  public categories: {\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }[] = [];\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport type { ShowToastResult } from './toast-container.types';\nexport type ToastType = 'info' | 'success' | 'error' | 'warning';\nexport type ToastPosition = 'bottom-right' | 'top-right';\n\nexport interface ToastConfig {\n  title?: string;\n  message: string | HTMLElement;\n  type?: ToastType;\n  autoClose?: boolean;\n  autoCloseDelay?: number;\n  icon?: string;\n  iconColor?: string;\n}\n\nexport function getToastContainer() {\n  const containerList = Array.from(\n    document.querySelectorAll('ix-toast-container')\n  );\n  const [container] = containerList;\n  if (containerList.length > 1) {\n    console.warn(\n      'Multiple toast containers were found. Only the first one will be used.'\n    );\n    return container;\n  }\n  if (!container) {\n    const toastContainer = document.createElement('ix-toast-container');\n    document.body.appendChild(toastContainer);\n\n    return toastContainer;\n  }\n  return container;\n}\n\nexport function setToastPosition(position: ToastPosition) {\n  const container = getToastContainer();\n  container.setAttribute('position', position);\n}\n\nfunction toast(config: ToastConfig): Promise<ShowToastResult> {\n  const container = getToastContainer();\n  return container.showToast(config);\n}\n\ntoast.info = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'info',\n  });\n};\n\ntoast.error = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'error',\n  });\n};\n\ntoast.success = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'success',\n  });\n};\n\ntoast.warning = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'warning',\n  });\n};\n\nexport { toast };\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport Animation from '../animation';\nimport { getCoreDelegate } from '../delegate';\n\nexport function showModalLoading(message: string) {\n  const modal = document.createElement('ix-modal');\n  modal.closeOnEscape = false;\n\n  const loading = document.createElement('ix-modal-loading');\n  loading.innerText = message;\n  modal.appendChild(loading);\n\n  getCoreDelegate().attachView(modal);\n  modal.showModal();\n\n  return {\n    update: (text: string) => (loading.innerHTML = text),\n    finish: (text?: string, timeout: number = 250) => {\n      if (text !== undefined) {\n        loading.innerText = text;\n      } else {\n        timeout = 0;\n      }\n      setTimeout(() => {\n        modal.closeModal(null);\n        setTimeout(\n          async () => await getCoreDelegate().removeView(modal),\n          Animation.mediumTime\n        );\n      }, timeout);\n    },\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAA;;;;;;;AAOG;MAGU,WAAW,CAAA;AAAxB,IAAA,WAAA,GAAA;QACS,IAAM,CAAA,MAAA,GAAa,EAAE;QACrB,IAAU,CAAA,UAAA,GAIX,EAAE;;AACT;;SCKe,iBAAiB,GAAA;AAC/B,IAAA,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD;AACD,IAAA,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa;AACjC,IAAA,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;AAC5B,QAAA,OAAO,CAAC,IAAI,CACV,wEAAwE,CACzE;AACD,QAAA,OAAO,SAAS;;IAElB,IAAI,CAAC,SAAS,EAAE;QACd,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC;AACnE,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC;AAEzC,QAAA,OAAO,cAAc;;AAEvB,IAAA,OAAO,SAAS;AAClB;AAEM,SAAU,gBAAgB,CAAC,QAAuB,EAAA;AACtD,IAAA,MAAM,SAAS,GAAG,iBAAiB,EAAE;AACrC,IAAA,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC;AAC9C;AAEA,SAAS,KAAK,CAAC,MAAmB,EAAA;AAChC,IAAA,MAAM,SAAS,GAAG,iBAAiB,EAAE;AACrC,IAAA,OAAO,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC;AACpC;AAEA,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB,KAAI;IACnC,OAAO,KAAK,iCACP,MAAM,CAAA,EAAA,EACT,IAAI,EAAE,MAAM,IACZ;AACJ,CAAC;AAED,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB,KAAI;IACpC,OAAO,KAAK,iCACP,MAAM,CAAA,EAAA,EACT,IAAI,EAAE,OAAO,IACb;AACJ,CAAC;AAED,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB,KAAI;IACtC,OAAO,KAAK,iCACP,MAAM,CAAA,EAAA,EACT,IAAI,EAAE,SAAS,IACf;AACJ,CAAC;AAED,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB,KAAI;IACtC,OAAO,KAAK,iCACP,MAAM,CAAA,EAAA,EACT,IAAI,EAAE,SAAS,IACf;AACJ,CAAC;;AC9ED;;;;;;;AAOG;AAKG,SAAU,gBAAgB,CAAC,OAAe,EAAA;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC;AAChD,IAAA,KAAK,CAAC,aAAa,GAAG,KAAK;IAE3B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC;AAC1D,IAAA,OAAO,CAAC,SAAS,GAAG,OAAO;AAC3B,IAAA,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC;AAE1B,IAAA,eAAe,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC;IACnC,KAAK,CAAC,SAAS,EAAE;IAEjB,OAAO;AACL,QAAA,MAAM,EAAE,CAAC,IAAY,MAAM,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;AACpD,QAAA,MAAM,EAAE,CAAC,IAAa,EAAE,OAAkB,GAAA,GAAG,KAAI;AAC/C,YAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACtB,gBAAA,OAAO,CAAC,SAAS,GAAG,IAAI;;iBACnB;gBACL,OAAO,GAAG,CAAC;;YAEb,UAAU,CAAC,MAAK;AACd,gBAAA,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;AACtB,gBAAA,UAAU,CACR,YAAY,MAAM,eAAe,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EACrD,SAAS,CAAC,UAAU,CACrB;aACF,EAAE,OAAO,CAAC;SACZ;KACF;AACH;;;;"}

package/dist/esm/{input.util-HSoyR1ow.js → input.util-DGHGYsFM.js}

@@ -1,6 +1,6 @@
-import { h } from './index-B6NtGPRE.js';
+import { h } from './index-DJsXFBNm.js';
 import { a as a11yBoolean } from './a11y-Bb7pDeaQ.js';
-import { s as shouldSuppressInternalValidation } from './validation-DuPOpjMi.js';
+import { s as shouldSuppressInternalValidation } from './validation-gQpVWmEm.js';
 import { c as createMutationObserver } from './mutation-observer-CX81WQtk.js';
 import { c as convertToRemString } from './rwd.util-pXYAoEyc.js';
 import { a as anime } from './anime.es-Ou74PMQs.js';
@@ -198,6 +198,6 @@ function observeElementUntilVisible(hostElement, updateCallback) {
 }
 
 export { InputElement as I, SlotEnd as S, TextareaElement as T, addDisposableChangesAndVisibilityObservers as a, adjustPaddingForStartAndEnd as b, SlotStart as c, checkAllowedKeys as d, checkInternalValidity as e, getAriaAttributesForInput as g, mapValidationResult as m, onInputBlur as o };
-//# sourceMappingURL=input.util-HSoyR1ow.js.map
+//# sourceMappingURL=input.util-DGHGYsFM.js.map
 
-//# sourceMappingURL=input.util-HSoyR1ow.js.map
+//# sourceMappingURL=input.util-DGHGYsFM.js.map

package/dist/esm/{input.util-HSoyR1ow.js.map → input.util-DGHGYsFM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input.util-HSoyR1ow.js","sources":["src/components/input/input.fc.tsx","src/components/input/input.animation.ts","src/components/input/input.util.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { h, FunctionalComponent } from '@stencil/core';\nimport { MakeRef } from '../utils/make-ref';\nimport { A11yAttributes } from '../utils/a11y';\n\nexport function TextareaElement(\n  props: Readonly<{\n    resizeBehavior: 'both' | 'horizontal' | 'vertical' | 'none';\n    textareaHeight?: string;\n    textareaWidth?: string;\n    textareaRows?: number;\n    textareaCols?: number;\n    disabled: boolean;\n    readonly: boolean;\n    maxLength?: number;\n    minLength?: number;\n    isInvalid: boolean;\n    required: boolean;\n    value: string;\n    placeholder?: string;\n    textAreaRef: (el: HTMLTextAreaElement | undefined) => void;\n    valueChange: (value: string) => void;\n    updateFormInternalValue: (value: string) => void;\n    onBlur: () => void;\n    ariaAttributes?: A11yAttributes;\n  }>\n) {\n  return (\n    <textarea\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      maxLength={props.maxLength}\n      minLength={props.minLength}\n      cols={props.textareaCols}\n      rows={props.textareaRows}\n      ref={props.textAreaRef}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n        props.valueChange(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      style={{\n        resize: props.resizeBehavior,\n        height: props.textareaHeight,\n        width: props.textareaWidth,\n      }}\n      {...props.ariaAttributes}\n    ></textarea>\n  );\n}\n\nexport function InputElement(\n  props: Readonly<{\n    id: string;\n    disabled: boolean;\n    readonly: boolean;\n    maxLength?: string | number;\n    minLength?: string | number;\n    max?: string | number;\n    min?: string | number;\n    step?: string | number;\n    pattern?: string;\n    type: string;\n    isInvalid: boolean;\n    required: boolean;\n    value: string | number;\n    placeholder?: string;\n    inputRef: (el: HTMLInputElement | undefined) => void;\n    onKeyPress: (event: KeyboardEvent) => void;\n    valueChange: (value: string) => void;\n    updateFormInternalValue: (value: string) => void;\n    onBlur: () => void;\n    ariaAttributes?: A11yAttributes;\n  }>\n) {\n  return (\n    <input\n      id={props.id}\n      autoComplete=\"off\"\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      step={props.step}\n      min={props.min}\n      max={props.max}\n      maxLength={props.maxLength ? Number(props.maxLength) : undefined}\n      minLength={props.minLength ? Number(props.minLength) : undefined}\n      ref={props.inputRef}\n      pattern={props.pattern}\n      type={props.type}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onKeyPress={(event) => props.onKeyPress(event)}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n        props.valueChange(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      {...props.ariaAttributes}\n    ></input>\n  );\n}\n\nexport const SlotEnd: FunctionalComponent<{\n  slotEndRef: MakeRef<HTMLDivElement>;\n  onSlotChange?: (e: Event) => void;\n}> = (props, children) => {\n  return (\n    <div class=\"end-container\" ref={props.slotEndRef}>\n      <slot name=\"end\" onSlotchange={props.onSlotChange}></slot>\n      {children}\n    </div>\n  );\n};\n\nexport const SlotStart: FunctionalComponent<{\n  slotStartRef: MakeRef<HTMLDivElement>;\n  onSlotChange?: (e: Event) => void;\n}> = (props) => {\n  return (\n    <div class=\"start-container\" ref={props.slotStartRef}>\n      <slot name=\"start\" onSlotchange={props.onSlotChange}></slot>\n    </div>\n  );\n};\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport anime from 'animejs';\n\nexport function shakeInput(input: HTMLInputElement) {\n  const xMax = 5;\n  anime({\n    targets: input,\n    duration: 200,\n    easing: 'easeInOutSine',\n    loop: 2,\n    translateX: [\n      {\n        value: xMax * -1,\n      },\n      {\n        value: xMax,\n      },\n      {\n        value: xMax / -2,\n      },\n      {\n        value: xMax / 2,\n      },\n      {\n        value: 0,\n      },\n    ],\n  });\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { A11yAttributes, a11yBoolean } from '../utils/a11y';\nimport {\n  IxFormComponent,\n  IxInputFieldComponent,\n  ValidationResults,\n  shouldSuppressInternalValidation,\n} from '../utils/input';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { generateUUID } from '../utils/uuid';\nimport { shakeInput } from './input.animation';\n\nexport function createIdIfNotExists(\n  element: IxFormComponent,\n  idPrefix: string = 'input'\n) {\n  return element.hasAttribute('id')\n    ? element.getAttribute('id')\n    : `${idPrefix}-${generateUUID()}`;\n}\n\nexport function mapValidationResult<T>(\n  ref: IxInputFieldComponent<T>,\n  result: ValidationResults\n) {\n  ref.isInvalid = result.isInvalid || result.isInvalidByRequired;\n  ref.isValid = result.isValid;\n  ref.isInfo = result.isInfo;\n  ref.isWarning = result.isWarning;\n}\n\nexport function checkAllowedKeys<T>(\n  comp: IxInputFieldComponent<T>,\n  event: KeyboardEvent\n) {\n  if (comp.allowedCharactersPattern) {\n    const regex = new RegExp(comp.allowedCharactersPattern);\n    if (!regex.test(event.key)) {\n      event.preventDefault();\n      shakeInput(comp.inputRef.current);\n    }\n  }\n}\n\nexport async function checkInternalValidity<T>(\n  comp: IxFormComponent<T>,\n  input: HTMLInputElement | HTMLTextAreaElement\n) {\n  const validityState = input.validity;\n\n  const eventResult = comp.validityStateChange.emit(validityState);\n\n  if (eventResult.defaultPrevented) {\n    return;\n  }\n\n  if (!comp.value) {\n    return;\n  }\n\n  const skipValidation = await shouldSuppressInternalValidation(comp);\n  if (skipValidation) {\n    return;\n  }\n\n  const { valid } = validityState;\n  comp.hostElement.classList.toggle('ix-invalid--validity-invalid', !valid);\n}\n\nexport function onInputBlur<T>(\n  comp: IxFormComponent<T>,\n  input?: HTMLInputElement | HTMLTextAreaElement | null\n) {\n  comp.ixBlur.emit();\n\n  if (!input) {\n    throw new Error('Input element is not available');\n  }\n\n  input.setAttribute('data-ix-touched', 'true');\n  checkInternalValidity(comp, input);\n}\n\nexport function applyPaddingEnd(\n  inputElement: HTMLElement | null,\n  width: number,\n  options: {\n    slotEnd: boolean;\n    additionalPaddingRight?: string;\n  }\n) {\n  if (!inputElement) {\n    return;\n  }\n\n  const remInPixels = 16;\n  const padding = convertToRemString(width + remInPixels / 2);\n\n  if (options.slotEnd) {\n    inputElement.style.paddingRight = `calc(${padding} + ${\n      options.additionalPaddingRight ?? '0rem'\n    })`;\n  } else {\n    inputElement.style.paddingLeft = padding;\n  }\n}\n\nexport function adjustPaddingForStartAndEnd(\n  startElement: HTMLElement | null,\n  endElement: HTMLElement | null,\n  inputElement: HTMLElement | null\n) {\n  requestAnimationFrame(() => {\n    requestAnimationFrame(() => {\n      if (startElement) {\n        const startBoundingRect = startElement.getBoundingClientRect();\n        if (startBoundingRect) {\n          applyPaddingEnd(inputElement, startBoundingRect.width, {\n            slotEnd: false,\n          });\n        }\n      }\n\n      if (endElement) {\n        const endBoundingRect = endElement.getBoundingClientRect();\n        if (endBoundingRect) {\n          applyPaddingEnd(inputElement, endBoundingRect.width, {\n            slotEnd: true,\n          });\n        }\n      }\n    });\n  });\n}\n\nexport function getAriaAttributesForInput(\n  component: IxInputFieldComponent\n): A11yAttributes {\n  const inputAria: A11yAttributes = {\n    'aria-invalid': `${a11yBoolean(component.isInvalid)}`,\n    'aria-required': `${a11yBoolean(component.required)}`,\n  };\n\n  if (component.isInvalid && component.invalidText) {\n    inputAria['aria-errormessage'] = component.invalidText;\n  }\n  return inputAria;\n}\n\nexport type DisposableChangesAndVisibilityObservers = () => void;\n\nexport const addDisposableChangesAndVisibilityObservers = (\n  element: HTMLElement,\n  callback: () => void\n): DisposableChangesAndVisibilityObservers => {\n  const intersectionObserver = observeElementUntilVisible(element, callback);\n  const mutationObserver = createMutationObserver(callback);\n\n  mutationObserver.observe(element, {\n    subtree: true,\n    attributes: true,\n  });\n\n  return () => {\n    intersectionObserver.disconnect();\n    mutationObserver.disconnect();\n  };\n};\n\nfunction observeElementUntilVisible(\n  hostElement: HTMLElement,\n  updateCallback: () => void\n): IntersectionObserver {\n  const intersectionObserver = new IntersectionObserver((entries) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        updateCallback();\n      }\n    });\n  });\n\n  intersectionObserver.observe(hostElement);\n  return intersectionObserver;\n}\n"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;AAOG;AAKG,SAAU,eAAe,CAC7B,KAmBE,EAAA;IAEF,QACE,8BACE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAE,KAAK,CAAC,YAAY,EACxB,IAAI,EAAE,KAAK,CAAC,YAAY,EACxB,GAAG,EAAE,KAAK,CAAC,WAAW,EACtB,KAAK,EAAE;YACL,YAAY,EAAE,KAAK,CAAC,SAAS;SAC9B,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,CAAC,UAAU,KAAI;AACtB,YAAA,MAAM,MAAM,GAAG,UAAU,CAAC,MAA0B;AACpD,YAAA,KAAK,CAAC,uBAAuB,CAAC,MAAM,CAAC,KAAK,CAAC;AAC3C,YAAA,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC;AACjC,SAAC,EACD,MAAM,EAAE,MAAM,KAAK,CAAC,MAAM,EAAE,EAC5B,KAAK,EAAE;YACL,MAAM,EAAE,KAAK,CAAC,cAAc;YAC5B,MAAM,EAAE,KAAK,CAAC,cAAc;YAC5B,KAAK,EAAE,KAAK,CAAC,aAAa;AAC3B,SAAA,EAAA,EACG,KAAK,CAAC,cAAc,CAAA,CACd;AAEhB;AAEM,SAAU,YAAY,CAC1B,KAqBE,EAAA;IAEF,QACE,2BACE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,YAAY,EAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,SAAS,EAChE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,SAAS,EAChE,GAAG,EAAE,KAAK,CAAC,QAAQ,EACnB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE;YACL,YAAY,EAAE,KAAK,CAAC,SAAS;AAC9B,SAAA,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,UAAU,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,EAC9C,OAAO,EAAE,CAAC,UAAU,KAAI;AACtB,YAAA,MAAM,MAAM,GAAG,UAAU,CAAC,MAA0B;AACpD,YAAA,KAAK,CAAC,uBAAuB,CAAC,MAAM,CAAC,KAAK,CAAC;AAC3C,YAAA,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC;AACjC,SAAC,EACD,MAAM,EAAE,MAAM,KAAK,CAAC,MAAM,EAAE,IACxB,KAAK,CAAC,cAAc,CAAA,CACjB;AAEb;MAEa,OAAO,GAGf,CAAC,KAAK,EAAE,QAAQ,KAAI;IACvB,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,KAAK,CAAC,UAAU,EAAA;QAC9C,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,KAAK,EAAC,YAAY,EAAE,KAAK,CAAC,YAAY,EAAS,CAAA;QACzD,QAAQ,CACL;AAEV;AAEa,MAAA,SAAS,GAGjB,CAAC,KAAK,KAAI;IACb,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,KAAK,CAAC,YAAY,EAAA;AAClD,QAAA,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,KAAK,CAAC,YAAY,EAAA,CAAS,CACxD;AAEV;;AC9IA;;;;;;;AAOG;AAGG,SAAU,UAAU,CAAC,KAAuB,EAAA;IAChD,MAAM,IAAI,GAAG,CAAC;AACd,IAAA,KAAK,CAAC;AACJ,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,QAAQ,EAAE,GAAG;AACb,QAAA,MAAM,EAAE,eAAe;AACvB,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,UAAU,EAAE;AACV,YAAA;AACE,gBAAA,KAAK,EAAE,IAAI,GAAG,EAAE;AACjB,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,IAAI,GAAG,EAAE;AACjB,aAAA;AACD,YAAA;gBACE,KAAK,EAAE,IAAI,GAAG,CAAC;AAChB,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,CAAC;AACT,aAAA;AACF,SAAA;AACF,KAAA,CAAC;AACJ;;ACnCA;;;;;;;AAOG;AAuBa,SAAA,mBAAmB,CACjC,GAA6B,EAC7B,MAAyB,EAAA;IAEzB,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,mBAAmB;AAC9D,IAAA,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO;AAC5B,IAAA,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM;AAC1B,IAAA,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS;AAClC;AAEgB,SAAA,gBAAgB,CAC9B,IAA8B,EAC9B,KAAoB,EAAA;AAEpB,IAAA,IAAI,IAAI,CAAC,wBAAwB,EAAE;QACjC,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,wBAAwB,CAAC;QACvD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YAC1B,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;;;AAGvC;AAEO,eAAe,qBAAqB,CACzC,IAAwB,EACxB,KAA6C,EAAA;AAE7C,IAAA,MAAM,aAAa,GAAG,KAAK,CAAC,QAAQ;IAEpC,MAAM,WAAW,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC;AAEhE,IAAA,IAAI,WAAW,CAAC,gBAAgB,EAAE;QAChC;;AAGF,IAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;QACf;;AAGF,IAAA,MAAM,cAAc,GAAG,MAAM,gCAAgC,CAAC,IAAI,CAAC;IACnE,IAAI,cAAc,EAAE;QAClB;;AAGF,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa;AAC/B,IAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,8BAA8B,EAAE,CAAC,KAAK,CAAC;AAC3E;AAEgB,SAAA,WAAW,CACzB,IAAwB,EACxB,KAAqD,EAAA;AAErD,IAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IAElB,IAAI,CAAC,KAAK,EAAE;AACV,QAAA,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC;;AAGnD,IAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC;AAC7C,IAAA,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC;AACpC;SAEgB,eAAe,CAC7B,YAAgC,EAChC,KAAa,EACb,OAGC,EAAA;;IAED,IAAI,CAAC,YAAY,EAAE;QACjB;;IAGF,MAAM,WAAW,GAAG,EAAE;IACtB,MAAM,OAAO,GAAG,kBAAkB,CAAC,KAAK,GAAG,WAAW,GAAG,CAAC,CAAC;AAE3D,IAAA,IAAI,OAAO,CAAC,OAAO,EAAE;AACnB,QAAA,YAAY,CAAC,KAAK,CAAC,YAAY,GAAG,CAAQ,KAAA,EAAA,OAAO,CAC/C,GAAA,EAAA,CAAA,EAAA,GAAA,OAAO,CAAC,sBAAsB,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,MACpC,GAAG;;SACE;AACL,QAAA,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,OAAO;;AAE5C;SAEgB,2BAA2B,CACzC,YAAgC,EAChC,UAA8B,EAC9B,YAAgC,EAAA;IAEhC,qBAAqB,CAAC,MAAK;QACzB,qBAAqB,CAAC,MAAK;YACzB,IAAI,YAAY,EAAE;AAChB,gBAAA,MAAM,iBAAiB,GAAG,YAAY,CAAC,qBAAqB,EAAE;gBAC9D,IAAI,iBAAiB,EAAE;AACrB,oBAAA,eAAe,CAAC,YAAY,EAAE,iBAAiB,CAAC,KAAK,EAAE;AACrD,wBAAA,OAAO,EAAE,KAAK;AACf,qBAAA,CAAC;;;YAIN,IAAI,UAAU,EAAE;AACd,gBAAA,MAAM,eAAe,GAAG,UAAU,CAAC,qBAAqB,EAAE;gBAC1D,IAAI,eAAe,EAAE;AACnB,oBAAA,eAAe,CAAC,YAAY,EAAE,eAAe,CAAC,KAAK,EAAE;AACnD,wBAAA,OAAO,EAAE,IAAI;AACd,qBAAA,CAAC;;;AAGR,SAAC,CAAC;AACJ,KAAC,CAAC;AACJ;AAEM,SAAU,yBAAyB,CACvC,SAAgC,EAAA;AAEhC,IAAA,MAAM,SAAS,GAAmB;QAChC,cAAc,EAAE,GAAG,WAAW,CAAC,SAAS,CAAC,SAAS,CAAC,CAAE,CAAA;QACrD,eAAe,EAAE,GAAG,WAAW,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAE,CAAA;KACtD;IAED,IAAI,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,WAAW,EAAE;AAChD,QAAA,SAAS,CAAC,mBAAmB,CAAC,GAAG,SAAS,CAAC,WAAW;;AAExD,IAAA,OAAO,SAAS;AAClB;MAIa,0CAA0C,GAAG,CACxD,OAAoB,EACpB,QAAoB,KACuB;IAC3C,MAAM,oBAAoB,GAAG,0BAA0B,CAAC,OAAO,EAAE,QAAQ,CAAC;AAC1E,IAAA,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,QAAQ,CAAC;AAEzD,IAAA,gBAAgB,CAAC,OAAO,CAAC,OAAO,EAAE;AAChC,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,UAAU,EAAE,IAAI;AACjB,KAAA,CAAC;AAEF,IAAA,OAAO,MAAK;QACV,oBAAoB,CAAC,UAAU,EAAE;QACjC,gBAAgB,CAAC,UAAU,EAAE;AAC/B,KAAC;AACH;AAEA,SAAS,0BAA0B,CACjC,WAAwB,EACxB,cAA0B,EAAA;IAE1B,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,KAAI;AAChE,QAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,YAAA,IAAI,KAAK,CAAC,cAAc,EAAE;AACxB,gBAAA,cAAc,EAAE;;AAEpB,SAAC,CAAC;AACJ,KAAC,CAAC;AAEF,IAAA,oBAAoB,CAAC,OAAO,CAAC,WAAW,CAAC;AACzC,IAAA,OAAO,oBAAoB;AAC7B;;;;"}
+{"version":3,"file":"input.util-DGHGYsFM.js","sources":["src/components/input/input.fc.tsx","src/components/input/input.animation.ts","src/components/input/input.util.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { h, FunctionalComponent } from '@stencil/core';\nimport { MakeRef } from '../utils/make-ref';\nimport { A11yAttributes } from '../utils/a11y';\n\nexport function TextareaElement(\n  props: Readonly<{\n    resizeBehavior: 'both' | 'horizontal' | 'vertical' | 'none';\n    textareaHeight?: string;\n    textareaWidth?: string;\n    textareaRows?: number;\n    textareaCols?: number;\n    disabled: boolean;\n    readonly: boolean;\n    maxLength?: number;\n    minLength?: number;\n    isInvalid: boolean;\n    required: boolean;\n    value: string;\n    placeholder?: string;\n    textAreaRef: (el: HTMLTextAreaElement | undefined) => void;\n    valueChange: (value: string) => void;\n    updateFormInternalValue: (value: string) => void;\n    onBlur: () => void;\n    ariaAttributes?: A11yAttributes;\n  }>\n) {\n  return (\n    <textarea\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      maxLength={props.maxLength}\n      minLength={props.minLength}\n      cols={props.textareaCols}\n      rows={props.textareaRows}\n      ref={props.textAreaRef}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n        props.valueChange(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      style={{\n        resize: props.resizeBehavior,\n        height: props.textareaHeight,\n        width: props.textareaWidth,\n      }}\n      {...props.ariaAttributes}\n    ></textarea>\n  );\n}\n\nexport function InputElement(\n  props: Readonly<{\n    id: string;\n    disabled: boolean;\n    readonly: boolean;\n    maxLength?: string | number;\n    minLength?: string | number;\n    max?: string | number;\n    min?: string | number;\n    step?: string | number;\n    pattern?: string;\n    type: string;\n    isInvalid: boolean;\n    required: boolean;\n    value: string | number;\n    placeholder?: string;\n    inputRef: (el: HTMLInputElement | undefined) => void;\n    onKeyPress: (event: KeyboardEvent) => void;\n    valueChange: (value: string) => void;\n    updateFormInternalValue: (value: string) => void;\n    onBlur: () => void;\n    ariaAttributes?: A11yAttributes;\n  }>\n) {\n  return (\n    <input\n      id={props.id}\n      autoComplete=\"off\"\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      step={props.step}\n      min={props.min}\n      max={props.max}\n      maxLength={props.maxLength ? Number(props.maxLength) : undefined}\n      minLength={props.minLength ? Number(props.minLength) : undefined}\n      ref={props.inputRef}\n      pattern={props.pattern}\n      type={props.type}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onKeyPress={(event) => props.onKeyPress(event)}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n        props.valueChange(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      {...props.ariaAttributes}\n    ></input>\n  );\n}\n\nexport const SlotEnd: FunctionalComponent<{\n  slotEndRef: MakeRef<HTMLDivElement>;\n  onSlotChange?: (e: Event) => void;\n}> = (props, children) => {\n  return (\n    <div class=\"end-container\" ref={props.slotEndRef}>\n      <slot name=\"end\" onSlotchange={props.onSlotChange}></slot>\n      {children}\n    </div>\n  );\n};\n\nexport const SlotStart: FunctionalComponent<{\n  slotStartRef: MakeRef<HTMLDivElement>;\n  onSlotChange?: (e: Event) => void;\n}> = (props) => {\n  return (\n    <div class=\"start-container\" ref={props.slotStartRef}>\n      <slot name=\"start\" onSlotchange={props.onSlotChange}></slot>\n    </div>\n  );\n};\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport anime from 'animejs';\n\nexport function shakeInput(input: HTMLInputElement) {\n  const xMax = 5;\n  anime({\n    targets: input,\n    duration: 200,\n    easing: 'easeInOutSine',\n    loop: 2,\n    translateX: [\n      {\n        value: xMax * -1,\n      },\n      {\n        value: xMax,\n      },\n      {\n        value: xMax / -2,\n      },\n      {\n        value: xMax / 2,\n      },\n      {\n        value: 0,\n      },\n    ],\n  });\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { A11yAttributes, a11yBoolean } from '../utils/a11y';\nimport {\n  IxFormComponent,\n  IxInputFieldComponent,\n  ValidationResults,\n  shouldSuppressInternalValidation,\n} from '../utils/input';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { generateUUID } from '../utils/uuid';\nimport { shakeInput } from './input.animation';\n\nexport function createIdIfNotExists(\n  element: IxFormComponent,\n  idPrefix: string = 'input'\n) {\n  return element.hasAttribute('id')\n    ? element.getAttribute('id')\n    : `${idPrefix}-${generateUUID()}`;\n}\n\nexport function mapValidationResult<T>(\n  ref: IxInputFieldComponent<T>,\n  result: ValidationResults\n) {\n  ref.isInvalid = result.isInvalid || result.isInvalidByRequired;\n  ref.isValid = result.isValid;\n  ref.isInfo = result.isInfo;\n  ref.isWarning = result.isWarning;\n}\n\nexport function checkAllowedKeys<T>(\n  comp: IxInputFieldComponent<T>,\n  event: KeyboardEvent\n) {\n  if (comp.allowedCharactersPattern) {\n    const regex = new RegExp(comp.allowedCharactersPattern);\n    if (!regex.test(event.key)) {\n      event.preventDefault();\n      shakeInput(comp.inputRef.current);\n    }\n  }\n}\n\nexport async function checkInternalValidity<T>(\n  comp: IxFormComponent<T>,\n  input: HTMLInputElement | HTMLTextAreaElement\n) {\n  const validityState = input.validity;\n\n  const eventResult = comp.validityStateChange.emit(validityState);\n\n  if (eventResult.defaultPrevented) {\n    return;\n  }\n\n  if (!comp.value) {\n    return;\n  }\n\n  const skipValidation = await shouldSuppressInternalValidation(comp);\n  if (skipValidation) {\n    return;\n  }\n\n  const { valid } = validityState;\n  comp.hostElement.classList.toggle('ix-invalid--validity-invalid', !valid);\n}\n\nexport function onInputBlur<T>(\n  comp: IxFormComponent<T>,\n  input?: HTMLInputElement | HTMLTextAreaElement | null\n) {\n  comp.ixBlur.emit();\n\n  if (!input) {\n    throw new Error('Input element is not available');\n  }\n\n  input.setAttribute('data-ix-touched', 'true');\n  checkInternalValidity(comp, input);\n}\n\nexport function applyPaddingEnd(\n  inputElement: HTMLElement | null,\n  width: number,\n  options: {\n    slotEnd: boolean;\n    additionalPaddingRight?: string;\n  }\n) {\n  if (!inputElement) {\n    return;\n  }\n\n  const remInPixels = 16;\n  const padding = convertToRemString(width + remInPixels / 2);\n\n  if (options.slotEnd) {\n    inputElement.style.paddingRight = `calc(${padding} + ${\n      options.additionalPaddingRight ?? '0rem'\n    })`;\n  } else {\n    inputElement.style.paddingLeft = padding;\n  }\n}\n\nexport function adjustPaddingForStartAndEnd(\n  startElement: HTMLElement | null,\n  endElement: HTMLElement | null,\n  inputElement: HTMLElement | null\n) {\n  requestAnimationFrame(() => {\n    requestAnimationFrame(() => {\n      if (startElement) {\n        const startBoundingRect = startElement.getBoundingClientRect();\n        if (startBoundingRect) {\n          applyPaddingEnd(inputElement, startBoundingRect.width, {\n            slotEnd: false,\n          });\n        }\n      }\n\n      if (endElement) {\n        const endBoundingRect = endElement.getBoundingClientRect();\n        if (endBoundingRect) {\n          applyPaddingEnd(inputElement, endBoundingRect.width, {\n            slotEnd: true,\n          });\n        }\n      }\n    });\n  });\n}\n\nexport function getAriaAttributesForInput(\n  component: IxInputFieldComponent\n): A11yAttributes {\n  const inputAria: A11yAttributes = {\n    'aria-invalid': `${a11yBoolean(component.isInvalid)}`,\n    'aria-required': `${a11yBoolean(component.required)}`,\n  };\n\n  if (component.isInvalid && component.invalidText) {\n    inputAria['aria-errormessage'] = component.invalidText;\n  }\n  return inputAria;\n}\n\nexport type DisposableChangesAndVisibilityObservers = () => void;\n\nexport const addDisposableChangesAndVisibilityObservers = (\n  element: HTMLElement,\n  callback: () => void\n): DisposableChangesAndVisibilityObservers => {\n  const intersectionObserver = observeElementUntilVisible(element, callback);\n  const mutationObserver = createMutationObserver(callback);\n\n  mutationObserver.observe(element, {\n    subtree: true,\n    attributes: true,\n  });\n\n  return () => {\n    intersectionObserver.disconnect();\n    mutationObserver.disconnect();\n  };\n};\n\nfunction observeElementUntilVisible(\n  hostElement: HTMLElement,\n  updateCallback: () => void\n): IntersectionObserver {\n  const intersectionObserver = new IntersectionObserver((entries) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        updateCallback();\n      }\n    });\n  });\n\n  intersectionObserver.observe(hostElement);\n  return intersectionObserver;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ix-action-card.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-B6NtGPRE.js';
+import { r as registerInstance, h, H as Host } from './index-DJsXFBNm.js';
 
 const actionCardCss = ":host{display:block;position:relative;min-width:13.375rem;width:13.375rem;height:7.5rem;min-height:7.5rem;cursor:pointer;margin:0.25rem 0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-card{width:100%;height:100%}";
 
@@ -19,7 +19,7 @@ const IxActionCard = class {
         this.selected = false;
     }
     render() {
-        return (h(Host, { key: '611489a81be0dda6b92579bc5a8b6442f9c8ba14' }, h("ix-card", { key: '442340c0b4dcf3424187966ca06bf4b329cecda7', selected: this.selected, variant: this.variant, class: 'pointer' }, h("ix-card-content", { key: '755a4d6236f9e89e9c7207c6a16cf90696b0a6dc' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("div", { key: '9482063b3546639e35ae0b6ae88c359fa79587d5' }, this.heading ? (h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5" }, this.subheading)) : null, h("slot", { key: '8b2f720026a55e8b40a829f2c93a003b40cc8f3a' }))))));
+        return (h(Host, { key: '8baf09c7b0f2aef34a37dd639fb1d2629d143692' }, h("ix-card", { key: 'f21a1d74d716482bef98cb909da8192a78b8937a', selected: this.selected, variant: this.variant, class: 'pointer' }, h("ix-card-content", { key: '0edcd9783ea5ad0d8471d6aa4c4aa398dc329cf4' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("div", { key: 'be3798858f6fa19d8897d7cefb900fb1e14a4db2' }, this.heading ? (h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5" }, this.subheading)) : null, h("slot", { key: '5014e3efdb43a20519cca4b5c5bfd21d7009983b' }))))));
     }
 };
 IxActionCard.style = actionCardCss;

package/dist/esm/ix-action-card.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-action-card.entry.js","sources":["src/components/action-card/action-card.scss?tag=ix-action-card&encapsulation=shadow","src/components/action-card/action-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  min-width: 13.375rem;\n  width: 13.375rem;\n  height: 7.5rem;\n  min-height: 7.5rem;\n  cursor: pointer;\n\n  margin: 0.25rem 0;\n\n  ix-card {\n    width: 100%;\n    height: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\n\nexport type ActionCardVariant = CardVariant;\n\n@Component({\n  tag: 'ix-action-card',\n  styleUrl: 'action-card.scss',\n  shadow: true,\n})\nexport class IxActionCard {\n  /**\n   * Card variant\n   */\n  @Prop() variant: ActionCardVariant = 'outline';\n\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Card selection\n   */\n  @Prop() selected = false;\n\n  render() {\n    return (\n      <Host>\n        <ix-card\n          selected={this.selected}\n          variant={this.variant}\n          class={'pointer'}\n        >\n          <ix-card-content>\n            {this.icon ? (\n              <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n            ) : null}\n            <div>\n              {this.heading ? (\n                <ix-typography format=\"h4\">{this.heading}</ix-typography>\n              ) : null}\n              {this.subheading ? (\n                <ix-typography format=\"h5\">{this.subheading}</ix-typography>\n              ) : null}\n              <slot></slot>\n            </div>\n          </ix-card-content>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,y6BAAy6B;;MCmBl7B,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAsB,SAAS;AAE9C;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuB,SAAS;AAY5C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA4BzB;IA1BC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,SAAS,EAAA,EAEhB,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,IAAI,IACR,CAAS,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAA,CAAW,IAC3D,IAAI,EACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,OAAO,IACX,qBAAe,MAAM,EAAC,IAAI,EAAE,EAAA,IAAI,CAAC,OAAO,CAAiB,IACvD,IAAI,EACP,IAAI,CAAC,UAAU,IACd,qBAAe,MAAM,EAAC,IAAI,EAAE,EAAA,IAAI,CAAC,UAAU,CAAiB,IAC1D,IAAI,EACR,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACU,CACV,CACL;;;;;;;"}
+{"version":3,"file":"ix-action-card.entry.js","sources":["src/components/action-card/action-card.scss?tag=ix-action-card&encapsulation=shadow","src/components/action-card/action-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  min-width: 13.375rem;\n  width: 13.375rem;\n  height: 7.5rem;\n  min-height: 7.5rem;\n  cursor: pointer;\n\n  margin: 0.25rem 0;\n\n  ix-card {\n    width: 100%;\n    height: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport type { ActionCardVariant } from './action-card.types';\n\n@Component({\n  tag: 'ix-action-card',\n  styleUrl: 'action-card.scss',\n  shadow: true,\n})\nexport class IxActionCard {\n  /**\n   * Card variant\n   */\n  @Prop() variant: ActionCardVariant = 'outline';\n\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Card selection\n   */\n  @Prop() selected = false;\n\n  render() {\n    return (\n      <Host>\n        <ix-card\n          selected={this.selected}\n          variant={this.variant}\n          class={'pointer'}\n        >\n          <ix-card-content>\n            {this.icon ? (\n              <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n            ) : null}\n            <div>\n              {this.heading ? (\n                <ix-typography format=\"h4\">{this.heading}</ix-typography>\n              ) : null}\n              {this.subheading ? (\n                <ix-typography format=\"h5\">{this.subheading}</ix-typography>\n              ) : null}\n              <slot></slot>\n            </div>\n          </ix-card-content>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,y6BAAy6B;;MCiBl7B,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAsB,SAAS;AAE9C;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuB,SAAS;AAY5C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA4BzB;IA1BC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,SAAS,EAAA,EAEhB,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,IAAI,IACR,CAAS,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAA,CAAW,IAC3D,IAAI,EACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,OAAO,IACX,qBAAe,MAAM,EAAC,IAAI,EAAE,EAAA,IAAI,CAAC,OAAO,CAAiB,IACvD,IAAI,EACP,IAAI,CAAC,UAAU,IACd,qBAAe,MAAM,EAAC,IAAI,EAAE,EAAA,IAAI,CAAC,UAAU,CAAiB,IAC1D,IAAI,EACR,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACU,CACV,CACL;;;;;;;"}

package/dist/esm/ix-application-header.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, d as readTask, h, F as Fragment, H as Host, a as getElement } from './index-B6NtGPRE.js';
+import { r as registerInstance, c as createEvent, d as readTask, h, F as Fragment, H as Host, a as getElement } from './index-DJsXFBNm.js';
 import { g as iconMoreMenu, d as iconApps } from './index-DLTnniMb.js';
 import { s as showAppSwitch } from './index-CxG62M3Y.js';
 import { a as applicationLayoutService } from './service-Ca8OHh45.js';
@@ -134,12 +134,12 @@ const ApplicationHeader = class {
         const showApplicationSwitch = ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
             this.breakpoint !== 'sm' &&
             this.suppressResponsive === false;
-        return (h(Host, { key: '161dbff622210f5b288625a53930cd47d391e905', class: {
+        return (h(Host, { key: 'ea35fc68c2e1908c7f54d34f5b2a6d40e1ff6848', class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "application-header" }, (this.showMenu || showMenuByApplicationFrame) && (h("ix-menu-expand-icon", { key: 'ebf7cf5c1738f876e5861148fc91e1e3134d70ac', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (h("ix-icon-button", { key: 'bea36c9c158182230035a7bc28dfbe8779b53b4f', onClick: () => this.showAppSwitch(), icon: iconApps, ghost: true, class: "app-switch" })), h("div", { key: '31b39b17e59c0b20f054d6c2777968d8e0d6ee89', class: { logo: true } }, h("slot", { key: '7c393c6bbbb75afa821f1e354bb90ec93a6b141b', name: "logo" })), h("ix-typography", { key: '79fa346430a1e6ba9ca0a49f16605438aefcf7e7', format: "body-lg", class: "name" }, this.name), h("div", { key: 'e7b337e340bb657178f1f25e7b22dfb050b101b8', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
+            }, slot: "application-header" }, (this.showMenu || showMenuByApplicationFrame) && (h("ix-menu-expand-icon", { key: '23c6315c2dc9fc2bc508f756299303a9ee38d43d', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (h("ix-icon-button", { key: '4fa7d4883123f64a1a9d6305195f6f16117bf3df', onClick: () => this.showAppSwitch(), icon: iconApps, ghost: true, class: "app-switch" })), h("div", { key: '855a8032a50adf8029e926633b5bc35f686344fa', class: { logo: true } }, h("slot", { key: '5dbf947fdeb4d5faefa7746f6f49ba40f2a4b43d', name: "logo" })), h("ix-typography", { key: '75055f9bff04a6dc5703b6126204d8ca172b586d', format: "body-lg", class: "name" }, this.name), h("div", { key: 'df59f3d7bdcbb43461f88564b59f0e3d913686a9', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
                 ['context-menu']: true,
                 ['context-menu-visible']: this.hasSlottedElements,
-            }, "data-context-menu": true, "data-testid": "show-more", icon: iconMoreMenu, ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: '5f4cbe691db23a5be718078b888d58cca5c0e92a', name: "ix-application-header-avatar" }))));
+            }, "data-context-menu": true, "data-testid": "show-more", icon: iconMoreMenu, ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: '257f20905871e368edcfceb9bef84a843df457ed', name: "ix-application-header-avatar" }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ix-application-sidebar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-B6NtGPRE.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-DJsXFBNm.js';
 import { a as anime } from './anime.es-Ou74PMQs.js';
 import { A as Animation } from './animation-Dp15M30K.js';
 
@@ -30,7 +30,7 @@ const ApplicationSidebar = class {
         anime(animation);
     }
     render() {
-        return (h(Host, { key: '1fa8306ba4f3867bb327cf83c444dc85637e8dca', slot: "application-sidebar", class: {
+        return (h(Host, { key: 'c8e82060904c6cdf605fc8330d4c355445bfc578', slot: "application-sidebar", class: {
                 visible: this.visible,
             } }, this.visible ? h("slot", null) : null));
     }

package/dist/esm/ix-application-switch-modal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-B6NtGPRE.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-DJsXFBNm.js';
 import './animation-Dp15M30K.js';
 import { d as dismissModal } from './modal-BldRA6Um.js';
 import { d as iconApps, e as iconOpenExternal } from './index-DLTnniMb.js';
@@ -40,7 +40,7 @@ const ApplicationSwitchModal = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '5443526ea5c044173392e6b855443eea449da4b1' }, h("ix-modal-header", { key: 'abef9c8d6d20923d2f962acbd95c5a591c77ddfb', icon: iconApps }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), h("ix-modal-content", { key: '47bb0edd3ed8624b43a1b21773fd14a8bba9d24f', class: "content" }, h("div", { key: 'b407a67b393307e8e7ca950291fcbbafea96ea69', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (h("div", { key: '1c625f776c2c531c3582d24b1dc72ccf5718f26d', class: "loading" }, h("ix-spinner", { key: '4f2da8b360a49501cc0e294204d7433fcc77e78e', size: "medium", variant: "primary" }), h("span", { key: '25dde483ac94a504b3597f2b7361c968f47754a3' }, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
+        return (h(Host, { key: 'a4279dbad5812faf0833dccc9b872b4618d3b721' }, h("ix-modal-header", { key: '2aeba11eb0d8e2f927a1a454d462aa1d2be8f797', icon: iconApps }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), h("ix-modal-content", { key: 'e9b3da826aad0519a8ce43879f6ac609370c3e0b', class: "content" }, h("div", { key: '89696259fb23ca82f9be6614afa44aa0d4e0955a', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (h("div", { key: '411aaac0b82835301e909b751ee640054b1c7722', class: "loading" }, h("ix-spinner", { key: '3f1580e44ee6306acee76547fe375094a334e421', size: "medium", variant: "primary" }), h("span", { key: '434d97bd9e210b534a3461bf7c5578e13fd4fb3e' }, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
             'Loading available applications...'))), (_d = this.config) === null || _d === void 0 ? void 0 :
             _d.apps.map((appEntry) => {
                 var _a;

package/dist/esm/ix-application.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-B6NtGPRE.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-DJsXFBNm.js';
 import { u as useContextProvider, A as ApplicationLayoutContext } from './context-CKM5pVsv.js';
 import { a as applicationLayoutService } from './service-Ca8OHh45.js';
 import { m as menuController } from './menu-service-Dl5Ra79J.js';
@@ -94,12 +94,12 @@ const Application = class {
         });
     }
     render() {
-        return (h(Host, { key: '8b26645a144ba6f2c50c51f87610133d8269cdcf', "data-role": "", class: {
+        return (h(Host, { key: 'aad0ef5275fe9f1171ae4dce908ddbdd7cdd11f5', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: 'ba69dc7c592f387a06e8a3ce23ba5822d5d168c7', name: "application-header" }), h("div", { key: 'c8d64e916bf16d7d7fd027e7c37be9ea0ad52464', class: "application" }, h("slot", { key: 'ccc75e88f5d1cbba74a8ade1b1de18ea4b843651', name: "menu" }), h("aside", { key: 'cabb98406c6a7b8a5f7fd6d763eb2405f02eb575', class: {
+            } }, h("slot", { key: 'd4316defd6187f58d1985ac6cfbfc8b6c00c8976', name: "application-header" }), h("div", { key: 'c469f5d352f3f3a5076048601d7f971e506b641f', class: "application" }, h("slot", { key: 'c4eb0d2ff1072d219471812327fcea9205ef6a68', name: "menu" }), h("aside", { key: '4a21967366659f686dd6a440f5a49656152c30db', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, h("slot", { key: '0861fa1cd42fa7995318464201d1076a9714d237', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: '5df04c78c631ce070f75d74a92cfb9b03ed29250', class: "content-area" }, h("main", { key: '7338889b7b13642b9b7cea74fd40fb34ac5fb065', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'fb0684d4119c32bce1776ed43b8bc79a980771e6' })), h("footer", { key: '877a59a01185702c52157a2d770202c127822817', class: "footer" }, h("slot", { key: '014009b2aac26f7f9ee90f858aca72826b1fa452', name: "bottom" }))))));
+            }, onClick: () => this.onContentClick() }, h("slot", { key: '8755cb0a44d236370269f6b16efd5d7abe4a65b1', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: 'e3785747895c9088c05a31efcaa23fc24dfa9a1b', class: "content-area" }, h("main", { key: '5851ddbde96f58e34997e1170834fcbd1170788a', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '1f02153bf8b615bf9a2bcba687c355a3556a2269' })), h("footer", { key: 'cd197d08463928e3f99338fb5dc48c17d3478836', class: "footer" }, h("slot", { key: '8b171ae00d0634e38bc36e98be7b7982bd25dbc8', name: "bottom" }))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ix-avatar_2.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, d as readTask, h, F as Fragment, H as Host, a as getElement, c as createEvent } from './index-B6NtGPRE.js';
-import { B as BaseButton } from './base-button-dtdYZqMt.js';
+import { r as registerInstance, d as readTask, h, F as Fragment, H as Host, a as getElement, c as createEvent } from './index-DJsXFBNm.js';
+import { B as BaseButton } from './base-button-CKT5FMT1.js';
 import { c as closestElement, h as hasSlottedElements } from './shadow-dom-i60z1FJC.js';
 import { m as makeRef } from './make-ref-bcj7UEIC.js';
 
@@ -72,7 +72,7 @@ const MenuAvatarItem = class {
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (h("ix-dropdown-item", { key: 'ad3fe91ce8805dce1d694db9405665d99752646c', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (h("ix-dropdown-item", { key: '9283341aa90956527e281ea9a55991765f993cd4', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-basic-navigation.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-B6NtGPRE.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-DJsXFBNm.js';
 import { u as useContextProvider, A as ApplicationLayoutContext } from './context-CKM5pVsv.js';
 import { a as applicationLayoutService } from './service-Ca8OHh45.js';
 import { m as menuController } from './menu-service-Dl5Ra79J.js';
@@ -74,10 +74,10 @@ const BasicNavigation = class {
         (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
     }
     render() {
-        return (h(Host, { key: '554173d72095d06ac3d5513c91174c083f3e35a6', "data-role": "", class: {
+        return (h(Host, { key: '4822db1bf514b124a556e3ad84371ec65c80b79e', "data-role": "", class: {
                 'hide-header': this.hideHeader,
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { key: '7d075b4b4f09e258bf8067ac5faee35777e955d0', class: "navigation-content" }, h("slot", { key: '23e5d833f6aa27e5dd5103e3ef029f274397169e', name: "menu" }), h("div", { key: '1ae544b1a13a03981af145ca73c9320cd93350c3', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '2087065094c3cc5de206d771bcfe5be56adccb70' })))));
+            } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { key: '6dac9e78e5fdfcde1d6ceadb634edf144f92d533', class: "navigation-content" }, h("slot", { key: '32e0ae56a4bd3d71298fd8febf6dab05f352addf', name: "menu" }), h("div", { key: '9c58c183a31ab742153be18d439e44557caa70b3', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '8fba39214e60168b3780d95c1e262b976dc4a5a6' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ix-blind.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, a as getElement } from './index-B6NtGPRE.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, a as getElement } from './index-DJsXFBNm.js';
 import { a as anime } from './anime.es-Ou74PMQs.js';
 import { a as a11yBoolean } from './a11y-Bb7pDeaQ.js';
 import { f as iconChevronRightSmall } from './index-DLTnniMb.js';
@@ -70,17 +70,17 @@ const Blind = class {
         });
     }
     render() {
-        return (h(Host, { key: 'e8e3003bc174e573bee19e97f6f4bc3ff44f6d1b', class: {
+        return (h(Host, { key: '00b4ab66bca51be1fca9bc6e2546d8ffef6e971f', class: {
                 [`blind-${this.variant}`]: true,
-            } }, h("div", { key: '1034566a12454369ca3bb8dcbaa9c7e41d0cbc7c', class: 'blind-header-wrapper' }, h("button", { key: 'f93ac381f2ec7f063c731633e4229b5f7bac7513', class: {
+            } }, h("div", { key: '4536c0666dff1a7f592e2b82f174275388081f16', class: 'blind-header-wrapper' }, h("button", { key: '2813220b43b8b24e314ec45afa052b48f2d1c0d4', class: {
                 'blind-header': true,
                 [`blind-${this.variant}`]: true,
                 closed: this.collapsed,
-            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '0868ac1e3339ac2404b0da95e6745c1beb53eeed', name: "custom-header" })), h("div", { key: '7f9788cbf860557cf024742f4bc775df60d73eb4', class: 'blind-header-content' }, h("ix-icon", { key: '0003ec2962bbba971116895effeaf93d0aac5307', class: "collapse-icon", name: iconChevronRightSmall, color: this.variant === 'filled' || this.variant === 'outline'
+            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '46a63c9003246ec317b3395f67a9d44e26d537fc', name: "custom-header" })), h("div", { key: '0077a2dcf44af78b231e5945c2cbb3d4d6657890', class: 'blind-header-content' }, h("ix-icon", { key: 'a4896c1311dfabee19992141a114761bca66d4ce', class: "collapse-icon", name: iconChevronRightSmall, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-primary'
-                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: 'cc6d991f8405799fca6110f33217b821598709b2', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
+                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: 'c9bf3d7cad6eb8c5c1c5838e13fd2ef93dfa9460', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-std-text'
-                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: '82898718f59f80a28bef0ead436e957d5e729ae2', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: '0847aa3c59174d278cef6f85eb7a8aa537192449', class: {
+                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: '33094dfc62a23ae50b28a37f44cf820f6cd9461b', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'af22eeede3d3093d7b0ab24db17f335a02a430a2', class: {
                 'blind-content': true,
                 hide: this.collapsed,
             } }, !this.collapsed ? h("slot", null) : null))));

package/dist/esm/ix-blind.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-blind.entry.js","sources":["src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","src/components/blind/blind.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n@mixin blind($variant: 'filled') {\n  :host(.blind-#{$variant}) {\n    @if $variant == 'outline' {\n      border: solid\n        var(--theme-blind--border-thickness)\n        var(--theme-blind-base--border-color);\n    }\n\n    .blind-header {\n      @if $variant == 'outline' {\n        background-color: var(--theme-color-ghost);\n      } @else {\n        background-color: var(--theme-color-#{$variant});\n      }\n\n      @if $variant == 'filled' or $variant == 'outline' {\n        @include ghost-hover-pressed;\n      } @else {\n        @include hover {\n          background-color: var(--theme-color-#{$variant}--hover);\n        }\n\n        @include active {\n          background-color: var(--theme-color-#{$variant}--active);\n        }\n      }\n    }\n\n    @if $variant == 'filled' or $variant == 'outline' {\n      .blind-header-title-label {\n        color: var(--theme-color-std-text);\n      }\n      .blind-header-title-sublabel {\n        color: var(--theme-color-soft-text);\n      }\n    } @else {\n      .blind-header-title-label,\n      .blind-header-title-sublabel {\n        color: var(--theme-color-#{$variant}--contrast);\n      }\n    }\n\n    @if $variant == 'outline' {\n      border-color: var(--theme-color-soft-bdr);\n    } @else {\n      background-color: var(--theme-blind-base--background);\n    }\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--theme-blind--border-radius);\n  overflow: hidden;\n\n  .blind-header-wrapper {\n    position: relative;\n    min-height: 3rem;\n    height: 3rem;\n    overflow: hidden;\n  }\n\n  .blind-header-content {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n\n    width: 100%;\n    height: 100%;\n\n    pointer-events: none;\n    padding-left: 0.5rem;\n  }\n\n  .blind-header-title {\n    display: flex;\n    position: relative;\n    align-items: center;\n    flex-grow: 1;\n    margin-right: 0.5rem;\n  }\n\n  .blind-header {\n    all: unset;\n    @include ellipsis;\n\n    display: block;\n    position: absolute;\n\n    top: 0px;\n    left: 0px;\n\n    pointer-events: all;\n\n    padding-left: 2.5rem;\n    min-height: 3rem;\n    height: 3rem;\n    width: calc(100% - 2 * var(--theme-blind--border-thickness));\n    border: solid var(--theme-blind--border-thickness) transparent;\n    border-radius: var(--theme-blind--border-radius)\n      var(--theme-blind--border-radius) 0 0;\n    cursor: pointer;\n\n    @include focus-visible {\n      border-color: var(--theme-color-focus-bdr);\n      outline: none;\n    }\n  }\n\n  .blind-header-title-icon,\n  .collapse-icon {\n    margin-right: $small-space;\n  }\n\n  .blind-header-title-row {\n    display: flex;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .blind-header-title-col {\n    display: inline-flex;\n    align-items: center;\n    width: calc(100% - 1rem);\n    overflow: hidden;\n  }\n\n  .blind-header-title-col:not(:first-of-type) {\n    justify-content: flex-end;\n  }\n  ix-typography {\n    flex-grow: 1;\n    @include ellipsis;\n  }\n\n  .blind-header-title-label {\n    @include ellipsis;\n    padding-inline-end: 0.5rem;\n  }\n\n  .blind-header-title-sublabel {\n    @include ellipsis;\n    padding-inline: 0.5rem;\n  }\n\n  .blind-header-title {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n    min-width: 0;\n  }\n\n  .blind-header-labels {\n    display: inline-flex;\n    flex-grow: 1;\n    min-width: 0;\n  }\n\n  .blind-content {\n    display: block;\n    padding: 1rem;\n    transition-property: padding;\n    transition-duration: var(--theme-default-time);\n    transition-timing-function: ease-in;\n\n    &.hide {\n      max-height: 0;\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n  }\n\n  .header-actions {\n    pointer-events: all;\n    margin-left: auto;\n  }\n}\n\n$blind-variants: (\n  alarm,\n  critical,\n  info,\n  neutral,\n  filled,\n  success,\n  warning,\n  primary,\n  outline\n);\n\n@each $variant in $blind-variants {\n  @include blind($variant);\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\n\nexport type BlindVariant = CardVariant;\n\nlet sequentialInstanceId = 0;\n\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  shadow: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label?: string;\n\n  /**\n   * Secondary label inside blind header\n   */\n  @Prop() sublabel?: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Blind variant\n   */\n  @Prop() variant: BlindVariant = 'filled';\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange!: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef?: HTMLElement;\n  private blindId = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick() {\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.shadowRoot!.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`blind-${this.variant}`]: true,\n        }}\n      >\n        <div class={'blind-header-wrapper'}>\n          <button\n            class={{\n              'blind-header': true,\n              [`blind-${this.variant}`]: true,\n              closed: this.collapsed,\n            }}\n            type=\"button\"\n            aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n            aria-controls={`ix-blind-content-section-${this.blindId}`}\n            aria-expanded={a11yBoolean(!this.collapsed)}\n            onClick={() => this.onHeaderClick()}\n          >\n            <slot name=\"custom-header\"></slot>\n          </button>\n\n          <div class={'blind-header-content'}>\n            <ix-icon\n              class=\"collapse-icon\"\n              name={iconChevronRightSmall}\n              color={\n                this.variant === 'filled' || this.variant === 'outline'\n                  ? 'color-primary'\n                  : `color-${this.variant}--contrast`\n              }\n              ref={(ref: HTMLElement | undefined) => (this.chevronRef = ref)}\n            ></ix-icon>\n            <div\n              class=\"blind-header-title\"\n              id={`ix-blind-header-title-${this.blindId}`}\n            >\n              {this.label !== undefined ? (\n                <Fragment>\n                  {this.icon && (\n                    <ix-icon\n                      class=\"blind-header-title-icon\"\n                      name={this.icon}\n                      color={\n                        this.variant === 'filled' || this.variant === 'outline'\n                          ? 'color-std-text'\n                          : `color-${this.variant}--contrast`\n                      }\n                    ></ix-icon>\n                  )}\n                  <div class={'blind-header-title-row'}>\n                    <div class=\"blind-header-title-col\">\n                      <ix-typography title={this.label} format=\"label-lg\" bold>\n                        <div\n                          class=\"blind-header-title-label\"\n                          title={this.label}\n                        >\n                          {this.label}\n                        </div>\n                      </ix-typography>\n                    </div>\n\n                    {this.sublabel && (\n                      <div class=\"blind-header-title-col\">\n                        <ix-typography title={this.sublabel}>\n                          <div class=\"blind-header-title-sublabel\">\n                            {this.sublabel}\n                          </div>\n                        </ix-typography>\n                      </div>\n                    )}\n                  </div>\n                  <div class=\"header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                  </div>\n                </Fragment>\n              ) : null}\n            </div>\n          </div>\n        </div>\n        <section\n          id={`ix-blind-content-section-${this.blindId}`}\n          aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            {!this.collapsed ? <slot></slot> : null}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ix-blind.entry.js","sources":["src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","src/components/blind/blind.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n@mixin blind($variant: 'filled') {\n  :host(.blind-#{$variant}) {\n    @if $variant == 'outline' {\n      border: solid\n        var(--theme-blind--border-thickness)\n        var(--theme-blind-base--border-color);\n    }\n\n    .blind-header {\n      @if $variant == 'outline' {\n        background-color: var(--theme-color-ghost);\n      } @else {\n        background-color: var(--theme-color-#{$variant});\n      }\n\n      @if $variant == 'filled' or $variant == 'outline' {\n        @include ghost-hover-pressed;\n      } @else {\n        @include hover {\n          background-color: var(--theme-color-#{$variant}--hover);\n        }\n\n        @include active {\n          background-color: var(--theme-color-#{$variant}--active);\n        }\n      }\n    }\n\n    @if $variant == 'filled' or $variant == 'outline' {\n      .blind-header-title-label {\n        color: var(--theme-color-std-text);\n      }\n      .blind-header-title-sublabel {\n        color: var(--theme-color-soft-text);\n      }\n    } @else {\n      .blind-header-title-label,\n      .blind-header-title-sublabel {\n        color: var(--theme-color-#{$variant}--contrast);\n      }\n    }\n\n    @if $variant == 'outline' {\n      border-color: var(--theme-color-soft-bdr);\n    } @else {\n      background-color: var(--theme-blind-base--background);\n    }\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--theme-blind--border-radius);\n  overflow: hidden;\n\n  .blind-header-wrapper {\n    position: relative;\n    min-height: 3rem;\n    height: 3rem;\n    overflow: hidden;\n  }\n\n  .blind-header-content {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n\n    width: 100%;\n    height: 100%;\n\n    pointer-events: none;\n    padding-left: 0.5rem;\n  }\n\n  .blind-header-title {\n    display: flex;\n    position: relative;\n    align-items: center;\n    flex-grow: 1;\n    margin-right: 0.5rem;\n  }\n\n  .blind-header {\n    all: unset;\n    @include ellipsis;\n\n    display: block;\n    position: absolute;\n\n    top: 0px;\n    left: 0px;\n\n    pointer-events: all;\n\n    padding-left: 2.5rem;\n    min-height: 3rem;\n    height: 3rem;\n    width: calc(100% - 2 * var(--theme-blind--border-thickness));\n    border: solid var(--theme-blind--border-thickness) transparent;\n    border-radius: var(--theme-blind--border-radius)\n      var(--theme-blind--border-radius) 0 0;\n    cursor: pointer;\n\n    @include focus-visible {\n      border-color: var(--theme-color-focus-bdr);\n      outline: none;\n    }\n  }\n\n  .blind-header-title-icon,\n  .collapse-icon {\n    margin-right: $small-space;\n  }\n\n  .blind-header-title-row {\n    display: flex;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .blind-header-title-col {\n    display: inline-flex;\n    align-items: center;\n    width: calc(100% - 1rem);\n    overflow: hidden;\n  }\n\n  .blind-header-title-col:not(:first-of-type) {\n    justify-content: flex-end;\n  }\n  ix-typography {\n    flex-grow: 1;\n    @include ellipsis;\n  }\n\n  .blind-header-title-label {\n    @include ellipsis;\n    padding-inline-end: 0.5rem;\n  }\n\n  .blind-header-title-sublabel {\n    @include ellipsis;\n    padding-inline: 0.5rem;\n  }\n\n  .blind-header-title {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n    min-width: 0;\n  }\n\n  .blind-header-labels {\n    display: inline-flex;\n    flex-grow: 1;\n    min-width: 0;\n  }\n\n  .blind-content {\n    display: block;\n    padding: 1rem;\n    transition-property: padding;\n    transition-duration: var(--theme-default-time);\n    transition-timing-function: ease-in;\n\n    &.hide {\n      max-height: 0;\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n  }\n\n  .header-actions {\n    pointer-events: all;\n    margin-left: auto;\n  }\n}\n\n$blind-variants: (\n  alarm,\n  critical,\n  info,\n  neutral,\n  filled,\n  success,\n  warning,\n  primary,\n  outline\n);\n\n@each $variant in $blind-variants {\n  @include blind($variant);\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\nimport type { BlindVariant } from './blind.types';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  shadow: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label?: string;\n\n  /**\n   * Secondary label inside blind header\n   */\n  @Prop() sublabel?: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Blind variant\n   */\n  @Prop() variant: BlindVariant = 'filled';\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange!: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef?: HTMLElement;\n  private blindId = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick() {\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.shadowRoot!.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`blind-${this.variant}`]: true,\n        }}\n      >\n        <div class={'blind-header-wrapper'}>\n          <button\n            class={{\n              'blind-header': true,\n              [`blind-${this.variant}`]: true,\n              closed: this.collapsed,\n            }}\n            type=\"button\"\n            aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n            aria-controls={`ix-blind-content-section-${this.blindId}`}\n            aria-expanded={a11yBoolean(!this.collapsed)}\n            onClick={() => this.onHeaderClick()}\n          >\n            <slot name=\"custom-header\"></slot>\n          </button>\n\n          <div class={'blind-header-content'}>\n            <ix-icon\n              class=\"collapse-icon\"\n              name={iconChevronRightSmall}\n              color={\n                this.variant === 'filled' || this.variant === 'outline'\n                  ? 'color-primary'\n                  : `color-${this.variant}--contrast`\n              }\n              ref={(ref: HTMLElement | undefined) => (this.chevronRef = ref)}\n            ></ix-icon>\n            <div\n              class=\"blind-header-title\"\n              id={`ix-blind-header-title-${this.blindId}`}\n            >\n              {this.label !== undefined ? (\n                <Fragment>\n                  {this.icon && (\n                    <ix-icon\n                      class=\"blind-header-title-icon\"\n                      name={this.icon}\n                      color={\n                        this.variant === 'filled' || this.variant === 'outline'\n                          ? 'color-std-text'\n                          : `color-${this.variant}--contrast`\n                      }\n                    ></ix-icon>\n                  )}\n                  <div class={'blind-header-title-row'}>\n                    <div class=\"blind-header-title-col\">\n                      <ix-typography title={this.label} format=\"label-lg\" bold>\n                        <div\n                          class=\"blind-header-title-label\"\n                          title={this.label}\n                        >\n                          {this.label}\n                        </div>\n                      </ix-typography>\n                    </div>\n\n                    {this.sublabel && (\n                      <div class=\"blind-header-title-col\">\n                        <ix-typography title={this.sublabel}>\n                          <div class=\"blind-header-title-sublabel\">\n                            {this.sublabel}\n                          </div>\n                        </ix-typography>\n                      </div>\n                    )}\n                  </div>\n                  <div class=\"header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                  </div>\n                </Fragment>\n              ) : null}\n            </div>\n          </div>\n        </div>\n        <section\n          id={`ix-blind-content-section-${this.blindId}`}\n          aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            {!this.collapsed ? <slot></slot> : null}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ix-breadcrumb-item.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, a as getElement } from './index-B6NtGPRE.js';
+import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, a as getElement } from './index-DJsXFBNm.js';
 import { a as anime } from './anime.es-Ou74PMQs.js';
-import { B as BaseButton } from './base-button-dtdYZqMt.js';
+import { B as BaseButton } from './base-button-CKT5FMT1.js';
 import { b as a11yHostAttributes } from './a11y-Bb7pDeaQ.js';
 import { f as iconChevronRightSmall } from './index-DLTnniMb.js';
 

package/dist/esm/ix-breadcrumb-item.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-breadcrumb-item.entry.js","sources":["src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n@import '../button/button-mixin';\n@import '../button/button';\n\n@include all-btn-variants;\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin-right: 0.25rem;\n  max-width: 15rem;\n  min-width: 0;\n\n  li {\n    display: contents;\n  }\n\n  .btn {\n    pointer-events: all;\n    width: fit-content;\n    padding-right: 0;\n    padding-left: 0.25rem;\n  }\n\n  .chevron {\n    pointer-events: none;\n    margin-left: 0.5rem;\n    margin-right: 0rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(a[href]) {\n    text-decoration: none !important;\n  }\n\n  ::slotted(a[href]:active) {\n    text-decoration: none !important;\n  }\n}\n\n:host(:last-child) {\n  .btn:not(.dropdown-trigger) {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.hide-chevron) {\n  cursor: default;\n\n  .btn {\n    padding-right: 0.5rem;\n    pointer-events: none;\n  }\n}\n\n:host(.invisible) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\n\nexport type BreadcrumbItemLinkTarget =\n  | '_self'\n  | '_blank'\n  | '_parent'\n  | '_top'\n  | string;\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem {\n  @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon?: string;\n\n  /**@internal */\n  @Prop() ghost: boolean = true;\n\n  /**@internal */\n  @Prop() visible = true;\n\n  /**@internal */\n  @Prop() showChevron = true;\n\n  /** @internal */\n  @Prop() isDropdownTrigger = false;\n\n  /**@internal */\n  @Event() itemClick!: EventEmitter<string>;\n\n  @State() a11y: any;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  componentWillLoad() {\n    this.a11y = a11yHostAttributes(this.hostElement, [\n      'aria-describedby',\n      'aria-controls',\n      'aria-expanded',\n    ]);\n  }\n\n  animationFadeIn() {\n    animejs({\n      targets: this.hostElement,\n      duration: 150,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  render() {\n    const props: BaseButtonProps = {\n      variant: this.ghost ? 'primary' : 'secondary',\n      outline: false,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      disabled: false,\n      icon: this.icon,\n      iconSize: '16',\n      loading: false,\n      selected: false,\n      type: 'button',\n      tabIndex:\n        this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n      extraClasses: {\n        'dropdown-trigger': this.isDropdownTrigger,\n      },\n      ariaAttributes: this.a11y,\n    };\n\n    if (!this.visible) {\n      return <Host class={'invisible'}></Host>;\n    }\n\n    return (\n      <Host\n        class={{\n          'hide-chevron': !this.showChevron,\n        }}\n        onClick={() => this.itemClick.emit(this.label)}\n      >\n        <li>\n          <BaseButton\n            {...props}\n            afterContent={\n              <Fragment>\n                {this.showChevron ? (\n                  <ix-icon\n                    name={iconChevronRightSmall}\n                    size=\"16\"\n                    class={'chevron'}\n                  ></ix-icon>\n                ) : null}\n              </Fragment>\n            }\n          >\n            {this.label}\n            <slot></slot>\n          </BaseButton>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"names":["animejs"],"mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,s0wCAAs0wC;;MCqCn1wC,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAmBU,QAAA,IAAK,CAAA,KAAA,GAAY,IAAI;;AAGrB,QAAA,IAAO,CAAA,OAAA,GAAG,IAAI;;AAGd,QAAA,IAAW,CAAA,WAAA,GAAG,IAAI;;AAGlB,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK;AAmFlC;IA5EC,gBAAgB,GAAA;QACd,IAAI,CAAC,eAAe,EAAE;;IAGxB,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE;YAC/C,kBAAkB;YAClB,eAAe;YACf,eAAe;AAChB,SAAA,CAAC;;IAGJ,eAAe,GAAA;AACb,QAAAA,KAAO,CAAC;YACN,OAAO,EAAE,IAAI,CAAC,WAAW;AACzB,YAAA,QAAQ,EAAE,GAAG;AACb,YAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,YAAA,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;AAC3B,YAAA,MAAM,EAAE,QAAQ;AACjB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAoB;YAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,WAAW;AAC7C,YAAA,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,IAAI,EAAE,QAAQ;YACd,QAAQ,EACN,IAAI,CAAC,WAAW,CAAC,QAAQ,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,CAAC;AAClE,YAAA,YAAY,EAAE;gBACZ,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;AAC3C,aAAA;YACD,cAAc,EAAE,IAAI,CAAC,IAAI;SAC1B;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,OAAO,EAAC,IAAI,EAAA,EAAC,KAAK,EAAE,WAAW,GAAS;;AAG1C,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,CAAC,IAAI,CAAC,WAAW;aAClC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAE9C,CAAA,CAAA,IAAA,EAAA,IAAA,EACE,CAAA,CAAC,UAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACL,KAAK,EAAA,EACT,YAAY,EACV,CAAA,CAAC,QAAQ,EAAA,IAAA,EACN,IAAI,CAAC,WAAW,IACf,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,GACP,IACT,IAAI,CACC,EAAA,CAAA,EAGZ,IAAI,CAAC,KAAK,EACX,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACF,CACV,CACA;;;;;;;;"}
+{"version":3,"file":"ix-breadcrumb-item.entry.js","sources":["src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n@import '../button/button-mixin';\n@import '../button/button';\n\n@include all-btn-variants;\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin-right: 0.25rem;\n  max-width: 15rem;\n  min-width: 0;\n\n  li {\n    display: contents;\n  }\n\n  .btn {\n    pointer-events: all;\n    width: fit-content;\n    padding-right: 0;\n    padding-left: 0.25rem;\n  }\n\n  .chevron {\n    pointer-events: none;\n    margin-left: 0.5rem;\n    margin-right: 0rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(a[href]) {\n    text-decoration: none !important;\n  }\n\n  ::slotted(a[href]:active) {\n    text-decoration: none !important;\n  }\n}\n\n:host(:last-child) {\n  .btn:not(.dropdown-trigger) {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.hide-chevron) {\n  cursor: default;\n\n  .btn {\n    padding-right: 0.5rem;\n    pointer-events: none;\n  }\n}\n\n:host(.invisible) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem {\n  @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon?: string;\n\n  /**@internal */\n  @Prop() ghost: boolean = true;\n\n  /**@internal */\n  @Prop() visible = true;\n\n  /**@internal */\n  @Prop() showChevron = true;\n\n  /** @internal */\n  @Prop() isDropdownTrigger = false;\n\n  /**@internal */\n  @Event() itemClick!: EventEmitter<string>;\n\n  @State() a11y: any;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  componentWillLoad() {\n    this.a11y = a11yHostAttributes(this.hostElement, [\n      'aria-describedby',\n      'aria-controls',\n      'aria-expanded',\n    ]);\n  }\n\n  animationFadeIn() {\n    animejs({\n      targets: this.hostElement,\n      duration: 150,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  render() {\n    const props: BaseButtonProps = {\n      variant: this.ghost ? 'primary' : 'secondary',\n      outline: false,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      disabled: false,\n      icon: this.icon,\n      iconSize: '16',\n      loading: false,\n      selected: false,\n      type: 'button',\n      tabIndex:\n        this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n      extraClasses: {\n        'dropdown-trigger': this.isDropdownTrigger,\n      },\n      ariaAttributes: this.a11y,\n    };\n\n    if (!this.visible) {\n      return <Host class={'invisible'}></Host>;\n    }\n\n    return (\n      <Host\n        class={{\n          'hide-chevron': !this.showChevron,\n        }}\n        onClick={() => this.itemClick.emit(this.label)}\n      >\n        <li>\n          <BaseButton\n            {...props}\n            afterContent={\n              <Fragment>\n                {this.showChevron ? (\n                  <ix-icon\n                    name={iconChevronRightSmall}\n                    size=\"16\"\n                    class={'chevron'}\n                  ></ix-icon>\n                ) : null}\n              </Fragment>\n            }\n          >\n            {this.label}\n            <slot></slot>\n          </BaseButton>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"names":["animejs"],"mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,s0wCAAs0wC;;MC8Bn1wC,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAmBU,QAAA,IAAK,CAAA,KAAA,GAAY,IAAI;;AAGrB,QAAA,IAAO,CAAA,OAAA,GAAG,IAAI;;AAGd,QAAA,IAAW,CAAA,WAAA,GAAG,IAAI;;AAGlB,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK;AAmFlC;IA5EC,gBAAgB,GAAA;QACd,IAAI,CAAC,eAAe,EAAE;;IAGxB,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE;YAC/C,kBAAkB;YAClB,eAAe;YACf,eAAe;AAChB,SAAA,CAAC;;IAGJ,eAAe,GAAA;AACb,QAAAA,KAAO,CAAC;YACN,OAAO,EAAE,IAAI,CAAC,WAAW;AACzB,YAAA,QAAQ,EAAE,GAAG;AACb,YAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,YAAA,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;AAC3B,YAAA,MAAM,EAAE,QAAQ;AACjB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAoB;YAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,WAAW;AAC7C,YAAA,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,IAAI,EAAE,QAAQ;YACd,QAAQ,EACN,IAAI,CAAC,WAAW,CAAC,QAAQ,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,CAAC;AAClE,YAAA,YAAY,EAAE;gBACZ,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;AAC3C,aAAA;YACD,cAAc,EAAE,IAAI,CAAC,IAAI;SAC1B;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,OAAO,EAAC,IAAI,EAAA,EAAC,KAAK,EAAE,WAAW,GAAS;;AAG1C,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,CAAC,IAAI,CAAC,WAAW;aAClC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAE9C,CAAA,CAAA,IAAA,EAAA,IAAA,EACE,CAAA,CAAC,UAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACL,KAAK,EAAA,EACT,YAAY,EACV,CAAA,CAAC,QAAQ,EAAA,IAAA,EACN,IAAI,CAAC,WAAW,IACf,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,GACP,IACT,IAAI,CACC,EAAA,CAAA,EAGZ,IAAI,CAAC,KAAK,EACX,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACF,CACV,CACA;;;;;;;;"}

package/dist/esm/ix-breadcrumb.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, f as forceUpdate, H as Host, a as getElement } from './index-B6NtGPRE.js';
+import { r as registerInstance, c as createEvent, h, f as forceUpdate, H as Host, a as getElement } from './index-DJsXFBNm.js';
 import { b as a11yHostAttributes, a as a11yBoolean } from './a11y-Bb7pDeaQ.js';
 import { c as createMutationObserver } from './mutation-observer-CX81WQtk.js';
 import { m as makeRef } from './make-ref-bcj7UEIC.js';
@@ -81,7 +81,7 @@ const Breadcrumb = class {
     render() {
         var _a, _b, _c, _d;
         const a11y = a11yHostAttributes(this.hostElement);
-        return (h(Host, { key: '5a11e3322ff26cb7e57d828ddc3eef3769acbdd3' }, h("ix-dropdown", { key: '524eaf6b1d507876fced96ebeb2cfdb47bb32925', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+        return (h(Host, { key: '4a6b862b1db0e8e7849061463f139be7c4639fcd' }, h("ix-dropdown", { key: '8cef2dff858029949dfea14b4a77c0c00e8a3efa', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
                 ? this.previousButtonRef.waitForCurrent()
                 : undefined, onShowChanged: ({ detail }) => {
                 this.isPreviousDropdownExpanded = detail;
@@ -98,7 +98,7 @@ const Breadcrumb = class {
             return (h("ix-dropdown-item", { label: label, onClick: () => {
                     this.onItemClick(label);
                 }, onItemClick: (event) => event.stopPropagation() }));
-        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("ix-breadcrumb-item", { id: this.previousButtonId, ref: this.previousButtonRef, label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, h("nav", { key: 'c48b488cb7ea5823b7ed0d45247b7da7bda675a4', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: 'dc8f0d4a08ce647a2bec31230d8464daca40bdc5' }, h("slot", { key: 'ddc547de71a1f4ca9c4be838547f9cc889f505b8' }))), h("ix-dropdown", { key: 'dbf0ead59000611d1c992a5bee82b98571d40f18', trigger: this.nextButtonRef.waitForCurrent() }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
+        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("ix-breadcrumb-item", { id: this.previousButtonId, ref: this.previousButtonRef, label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, h("nav", { key: '8112c1329362ff4ffe1d689d6b20ae550888dcba', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: '2db2e27473f900774d18b7ef1466adad55aadf79' }, h("slot", { key: '506d6a2a60cf265768e84b17f135260a6e063158' }))), h("ix-dropdown", { key: 'bae2ef6fb599375c20b534a4a58fa15582f51460', trigger: this.nextButtonRef.waitForCurrent() }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
                 this.nextClick.emit({
                     event: e,
                     item,