@siemens/ix 2.5.0 → 2.6.0

package/components/input.util.js

@@ -0,0 +1,181 @@
+import { h } from '@stencil/core/internal/client';
+import { a as a11yBoolean } from './a11y.js';
+import { s as shouldSuppressInternalValidation } from './validation.js';
+import { a as convertToRemString } from './rwd.util.js';
+import { a as anime } from './anime.es.js';
+
+/*
+ * 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.
+ */
+function TextareaElement(props) {
+    return (h("textarea", Object.assign({ readOnly: props.readonly, disabled: props.disabled, maxLength: props.maxLength, minLength: props.minLength, cols: props.textareaCols, rows: props.textareaRows, ref: props.textAreaRef, class: {
+            'is-invalid': props.isInvalid,
+        }, required: props.required, value: props.value, placeholder: props.placeholder, onChange: (changeEvent) => {
+            const target = changeEvent.target;
+            props.valueChange(target.value);
+        }, onInput: (inputEvent) => {
+            const target = inputEvent.target;
+            props.updateFormInternalValue(target.value);
+        }, onBlur: () => props.onBlur(), style: {
+            resize: props.resizeBehavior,
+            height: props.textareaHeight,
+            width: props.textareaWidth,
+        } }, props.ariaAttributes)));
+}
+function InputElement(props) {
+    return (h("input", Object.assign({ id: props.id, autoComplete: "off", readOnly: props.readonly, disabled: props.disabled, min: props.min, max: props.max, maxLength: props.maxLength ? Number(props.maxLength) : undefined, minLength: props.maxLength ? Number(props.minLength) : undefined, ref: props.inputRef, pattern: props.pattern, type: props.type, class: {
+            'is-invalid': props.isInvalid,
+        }, required: props.required, value: props.value, placeholder: props.placeholder, onKeyPress: (event) => props.onKeyPress(event), onChange: (changeEvent) => {
+            const target = changeEvent.target;
+            props.valueChange(target.value);
+        }, onInput: (inputEvent) => {
+            const target = inputEvent.target;
+            props.updateFormInternalValue(target.value);
+        }, onBlur: () => props.onBlur() }, props.ariaAttributes)));
+}
+const SlotEnd = (props, children) => {
+    return (h("div", { class: "end-container", ref: props.slotEndRef },
+        h("slot", { name: "end", onSlotchange: props.onSlotChange }),
+        children));
+};
+const SlotStart = (props) => {
+    return (h("div", { class: "start-container", ref: props.slotStartRef },
+        h("slot", { name: "start", onSlotchange: props.onSlotChange })));
+};
+
+/*
+ * 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.
+ */
+function shakeInput(input) {
+    const xMax = 5;
+    anime({
+        targets: input,
+        duration: 200,
+        easing: 'easeInOutSine',
+        loop: 2,
+        translateX: [
+            {
+                value: xMax * -1,
+            },
+            {
+                value: xMax,
+            },
+            {
+                value: xMax / -2,
+            },
+            {
+                value: xMax / 2,
+            },
+            {
+                value: 0,
+            },
+        ],
+    });
+}
+
+/*
+ * 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.
+ */
+function mapValidationResult(ref, result) {
+    ref.isInvalid = result.isInvalid || result.isInvalidByRequired;
+    ref.isValid = result.isValid;
+    ref.isInfo = result.isInfo;
+    ref.isWarning = result.isWarning;
+}
+function checkAllowedKeys(comp, event) {
+    if (comp.allowedCharactersPattern) {
+        const regex = new RegExp(comp.allowedCharactersPattern);
+        if (!regex.test(event.key)) {
+            event.preventDefault();
+            shakeInput(comp.inputRef.current);
+        }
+    }
+}
+async function checkInternalValidity(comp, input) {
+    const validityState = input.validity;
+    const eventResult = comp.validityStateChange.emit(validityState);
+    if (eventResult.defaultPrevented) {
+        return;
+    }
+    if (!comp.value) {
+        return;
+    }
+    const skipValidation = await shouldSuppressInternalValidation(comp);
+    if (skipValidation) {
+        return;
+    }
+    const { valid } = validityState;
+    comp.hostElement.classList.toggle('ix-invalid', !valid);
+}
+function onInputBlur(comp, input) {
+    comp.ixBlur.emit();
+    if (!input) {
+        throw new Error('Input element is not available');
+    }
+    checkInternalValidity(comp, input);
+}
+function applyPaddingEnd(inputElement, width, options) {
+    var _a;
+    if (!inputElement) {
+        return;
+    }
+    const remInPixels = 16;
+    const padding = convertToRemString(width + remInPixels / 2);
+    if (options.slotEnd) {
+        inputElement.style.paddingRight = `calc(${padding} + ${(_a = options.additionalPaddingRight) !== null && _a !== void 0 ? _a : '0rem'})`;
+    }
+    else {
+        inputElement.style.paddingLeft = padding;
+    }
+}
+function adjustPaddingForStartAndEnd(startElement, endElement, inputElement) {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            if (startElement) {
+                const startBoundingRect = startElement.getBoundingClientRect();
+                if (startBoundingRect) {
+                    applyPaddingEnd(inputElement, startBoundingRect.width, {
+                        slotEnd: false,
+                    });
+                }
+            }
+            if (endElement) {
+                const endBoundingRect = endElement.getBoundingClientRect();
+                if (endBoundingRect) {
+                    applyPaddingEnd(inputElement, endBoundingRect.width, {
+                        slotEnd: true,
+                    });
+                }
+            }
+        });
+    });
+}
+function getAriaAttributesForInput(component) {
+    const inputAria = {
+        'aria-invalid': `${a11yBoolean(component.isInvalid)}`,
+        'aria-required': `${a11yBoolean(component.required)}`,
+    };
+    if (component.isInvalid && component.invalidText) {
+        inputAria['aria-errormessage'] = component.invalidText;
+    }
+    return inputAria;
+}
+
+export { InputElement as I, SlotStart as S, TextareaElement as T, adjustPaddingForStartAndEnd as a, SlotEnd as b, checkAllowedKeys as c, checkInternalValidity as d, getAriaAttributesForInput as g, mapValidationResult as m, onInputBlur as o };
+
+//# sourceMappingURL=input.util.js.map

package/components/input.util.js.map

@@ -0,0 +1 @@
+{"file":"input.util.js","mappings":"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","names":[],"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(props: {\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  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      onChange={(changeEvent) => {\n        const target = changeEvent.target as HTMLInputElement;\n        props.valueChange(target.value);\n      }}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(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(props: {\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  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  return (\n    <input\n      id={props.id}\n      autoComplete=\"off\"\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      min={props.min}\n      max={props.max}\n      maxLength={props.maxLength ? Number(props.maxLength) : undefined}\n      minLength={props.maxLength ? 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      onChange={(changeEvent) => {\n        const target = changeEvent.target as HTMLInputElement;\n        props.valueChange(target.value);\n      }}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(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 { 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', !valid);\n}\n\nexport function onInputBlur<T>(\n  comp: IxInputFieldComponent<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  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"],"version":3}

package/components/ix-action-card.js

@@ -27,7 +27,7 @@ const IxActionCard$1 = /*@__PURE__*/ proxyCustomElement(class IxActionCard exten
         }
     }
     render() {
-        return (h(Host, { key: 'd868aba285518ab8a4f7c73261f42f9d35de76ed' }, h("ix-card", { key: '04582ff065c25edf375d19e27aa0e24c9ec6f4ad', selected: this.selected, variant: this.variant, class: 'pointer' }, h("ix-card-content", { key: '789f09e149def95bd03c8c747a95263283672cbe' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("div", { key: 'b29c5aed35ab9cb554a6893cbc5b0e25d0eb5c5e' }, this.heading ? (h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", color: this.getSubheadingColor() }, this.subheading)) : null, h("slot", { key: '4659d8a59ee2bf88be8e1cd73d98e190659387f6' }))))));
+        return (h(Host, { key: '71cb83edc3e9e57a2f8a73e41e819b74e7ce0669' }, h("ix-card", { key: '71d1eb80d2ea03862547845d3cfaae96137d7e77', selected: this.selected, variant: this.variant, class: 'pointer' }, h("ix-card-content", { key: 'f615c68c98ddfd6447bc19b3b3a27008243c909a' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("div", { key: 'b037e8ff7d345f00178c0fb0385e02e4e8738891' }, this.heading ? (h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", color: this.getSubheadingColor() }, this.subheading)) : null, h("slot", { key: 'b4a4fa2b7149d3ac4b95670f233795c29f25b966' }))))));
     }
     static get style() { return IxActionCardStyle0; }
 }, [1, "ix-action-card", {

package/components/ix-action-card.js.map

@@ -1 +1 @@
-{"file":"ix-action-card.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,y6BAAy6B,CAAC;AACh8B,2BAAe,aAAa;;MCsBfA,cAAY;;;;;uBAKc,SAAS;oBAKX,SAAS;;;wBAezB,KAAK;;IAEhB,kBAAkB;QACxB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS,CAAC;YACf,KAAK,cAAc;gBACjB,OAAO,MAAM,CAAC;YAEhB;gBACE,OAAO,SAAS,CAAC;SACpB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,SAAS,IAEhB,0EACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACR,8DACG,IAAI,CAAC,OAAO,IACX,qBAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,IACvD,IAAI,EACP,IAAI,CAAC,UAAU,IACd,qBAAe,MAAM,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,IACxD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACR,8DAAa,CACT,CACU,CACV,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IxActionCard"],"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';\nimport { TypographyColors } from '../typography/typography';\n\nexport type ActionCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\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   * @deprecated variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead.\n   */\n  @Prop() variant: ActionCardVariant = 'insight';\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  private getSubheadingColor(): TypographyColors {\n    switch (this.variant) {\n      case 'insight':\n      case 'notification':\n        return 'soft';\n\n      default:\n        return undefined;\n    }\n  }\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\" color={this.getSubheadingColor()}>\n                  {this.subheading}\n                </ix-typography>\n              ) : null}\n              <slot></slot>\n            </div>\n          </ix-card-content>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-action-card.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,y6BAAy6B,CAAC;AACh8B,2BAAe,aAAa;;MCsBfA,cAAY;;;;;uBAKc,SAAS;oBAKX,SAAS;;;wBAezB,KAAK;;IAEhB,kBAAkB;QACxB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS,CAAC;YACf,KAAK,cAAc;gBACjB,OAAO,MAAM,CAAC;YAEhB;gBACE,OAAO,SAAS,CAAC;SACpB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,SAAS,IAEhB,0EACG,IAAI,CAAC,IAAI,IACR,eAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACR,8DACG,IAAI,CAAC,OAAO,IACX,qBAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,IACvD,IAAI,EACP,IAAI,CAAC,UAAU,IACd,qBAAe,MAAM,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,IACxD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACR,8DAAa,CACT,CACU,CACV,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IxActionCard"],"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';\nimport { TypographyColors } from '../typography/typography';\n\nexport type ActionCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\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   * @deprecated variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead.\n   */\n  @Prop() variant: ActionCardVariant = 'insight';\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  private getSubheadingColor(): TypographyColors | undefined {\n    switch (this.variant) {\n      case 'insight':\n      case 'notification':\n        return 'soft';\n\n      default:\n        return undefined;\n    }\n  }\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\" color={this.getSubheadingColor()}>\n                  {this.subheading}\n                </ix-typography>\n              ) : null}\n              <slot></slot>\n            </div>\n          </ix-card-content>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-application-sidebar.js

@@ -33,7 +33,7 @@ const ApplicationSidebar = /*@__PURE__*/ proxyCustomElement(class ApplicationSid
         anime(animation);
     }
     render() {
-        return (h(Host, { key: '58452e01549d1141ba862068da508cf9cb57ce39', slot: "application-sidebar", class: {
+        return (h(Host, { key: '452d80151fb0e848c50ac7a2551929893fbc31f6', slot: "application-sidebar", class: {
                 visible: this.visible,
             } }, this.visible ? h("slot", null) : null));
     }

package/components/ix-application-switch-modal.js

@@ -47,7 +47,7 @@ const ApplicationSwitchModal = /*@__PURE__*/ proxyCustomElement(class Applicatio
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '13df4ab7564da79469932dcc5bf35eed6970d3c4' }, h("ix-modal-header", { key: '299cbb27124b8f93e24ab45de1a884604a84763b', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), h("ix-modal-content", { key: 'd3ef35dc36431cc1bb0dd203518d01f6cf768aa7', class: "content" }, h("div", { key: 'de19382fb99fe6b871451e62413f43e382a42eb8', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (h("div", { key: '66e1e8ba812abb5ce81798607fb3d93715c4a756', class: "loading" }, h("ix-spinner", { key: '54839567ae56eb47457d73cc4b0f2033f659c88b', size: "medium", variant: "primary" }), h("span", { key: '39c47a980c5d230e8365c70c6957d38385eb80d1' }, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
+        return (h(Host, { key: 'caf7fe96f12fdef398b1316120127157463703e0' }, h("ix-modal-header", { key: '17031f7879a38d312f9520555dae9879d35cdb65', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), h("ix-modal-content", { key: '1664cb4c2b142d8bcd84f723a11016ee883a3684', class: "content" }, h("div", { key: '85d188516ccf77964b47a9592bdb05c872d2c9c8', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (h("div", { key: 'd5b97278041f3c268774ce1345847d3688728931', class: "loading" }, h("ix-spinner", { key: '0b2e26ebb92bc0263bb78fa6a9757a2cf67a59df', size: "medium", variant: "primary" }), h("span", { key: '75845935e375bd8f2ea3e68562acb7fadd3d33b5' }, ((_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/components/ix-application.js

@@ -88,12 +88,12 @@ const Application = /*@__PURE__*/ proxyCustomElement(class Application extends H
         });
     }
     render() {
-        return (h(Host, { key: '4e8314dec7968a3b9b2e00a7852dc53c924d0c53', "data-role": "", class: {
+        return (h(Host, { key: 'f7d9dc242b02f711e6b876a655872eded15acc5a', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: '2f4a52a13679af639648164eff165d5dd37ec951', name: "application-header" }), h("div", { key: 'b316ff04f23e4606d54ddcc5531ed884b988e360', class: "application" }, h("slot", { key: '40f4800917fa9f24cdc50c72543e2c7181878775', name: "menu" }), h("aside", { key: '62e0120b64ad942e7dd991b6fe9912b60e36e04f', class: {
+            } }, h("slot", { key: '42bf6a7646231575b65712fc8ebc05b0d831e379', name: "application-header" }), h("div", { key: '28631a23909254557f65ab0fa78229155e56304c', class: "application" }, h("slot", { key: '803ff42c7a15ebf49a8791983792d51e92d72df2', name: "menu" }), h("aside", { key: '2ae8ed82923ad88b7e90a1efa4e2fa5e9e894fc9', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, h("slot", { key: '211f35df78de174484e914fa646227ba290fb9ae', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: '5913187261ced8e7ff12ee3d352d33b0c5e9f49b', class: "content-area" }, h("main", { key: 'ae580e752d753b0dbbdc4743f538d0a0bf8320eb', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '7954efb9b316bfd53191569e1b5bb32b8fafae2e' })), h("footer", { key: '3c41b12023cfb59373efe0fa88db93236f6f0f01', class: "footer" }, h("slot", { key: '9307b5f999ffcd96b7cd6f7b217f10b94c1a901f', name: "bottom" }))))));
+            }, onClick: () => this.onContentClick() }, h("slot", { key: '672a98eff1ff6438d1b36a487a3d11d0764a7328', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: '1316359455b9ff99f04087ad03f60d71737615eb', class: "content-area" }, h("main", { key: '68885be0f8744603fe40d3ae2ad794918a17f38f', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'e8a443068860fda31e113791ac952f709445c259' })), h("footer", { key: '3fd4378fbe5c40cc0ebdf0f7719c61fb893ec279', class: "footer" }, h("slot", { key: 'ee8482f786f9c322cbafdcab061b43694c1500f4', name: "bottom" }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-basic-navigation.js

@@ -76,10 +76,10 @@ const BasicNavigation = /*@__PURE__*/ proxyCustomElement(class BasicNavigation e
         (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
     }
     render() {
-        return (h(Host, { key: 'b666966827ad02aaf1efeb3c8e80e476279a2416', "data-role": "", class: {
+        return (h(Host, { key: '72bc2871bd83daef65255c91c205f3f56566dd49', "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: '1d470073c3840334f2776e1651672ce896c38609', class: "navigation-content" }, h("slot", { key: '1288c6fb5d71c87ffa78e9407de01e26bd0da896', name: "menu" }), h("div", { key: 'ceb81e26897c1e229746ad65c8ca33cc0412dadc', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '67fa579c656f227d7fa555ceafdf20e07cc2bf0c' })))));
+            } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { key: 'd495335a1b4ccc8c237b409eec6ed43740f6b47b', class: "navigation-content" }, h("slot", { key: '7aa73127e49e60612f9a65cd28eaf50d85cc2e6d', name: "menu" }), h("div", { key: '40886717ca1d36a952c6d2ed1597a5a8495dad2e', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '4c7f0ebbc86a84207f788b5aafd94114ffe4daae' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-blind.js

@@ -70,17 +70,17 @@ const Blind = /*@__PURE__*/ proxyCustomElement(class Blind extends HTMLElement {
         });
     }
     render() {
-        return (h(Host, { key: '5ec247be84e5612134ffec1e53730f61a214cd0b', class: {
+        return (h(Host, { key: '852045a56df78167aee62b39477c9447199f5ba1', class: {
                 [`blind-${this.variant}`]: true,
-            } }, h("div", { key: 'abe3273f7a820cd6481d7f75a174e3c6c332b438', class: 'blind-header-wrapper' }, h("button", { key: '12a572e7145c435451a8a9cc89f66c50d58d3cca', class: {
+            } }, h("div", { key: 'c538e711d23922c1d1dd6401a4a2a352fc931651', class: 'blind-header-wrapper' }, h("button", { key: '1c4825403cda09323d0b79bfb8225dc49373fd22', 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: '11a9cc78537fac060310eeba7f57a147907e2a14', name: "custom-header" })), h("div", { key: '08abe64452f9841fc50951708ffdbb13f594e80b', class: 'blind-header-content' }, h("ix-icon", { key: '67a41dada571459470153b03247bc7f175c206de', class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || 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: '08b70d0e9d9a3d4cff9c792c6cf07aeccb4076b6', name: "custom-header" })), h("div", { key: '9ed5701470d0577f989ac6676a12d3b5d3517f24', class: 'blind-header-content' }, h("ix-icon", { key: '247ffc3016d03d0e010eb3f1e9c2e6d46f0f5844', class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || this.variant === 'outline'
                 ? 'color-primary'
-                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: '6a898defd05378868577745464956fd8ecc67472', 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 === 'insight' || this.variant === 'outline'
+                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: '849fb030a97813e70d13ebb590e99985f20da23a', 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 === 'insight' || 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: '909fdaeec7732c55c81833e6f0212cea5b2174b0', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'ace2f5a2269acc3d0c2c79a0cf31df6283038bec', 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: 'f8614b7c48da9f7eb858737c9fb9d39b1ff77365', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'b08531b9da0da8abeee26fa7e6cf89eb7be49d99', class: {
                 'blind-content': true,
                 hide: this.collapsed,
             } }, !this.collapsed ? h("slot", null) : null))));

package/components/ix-blind.js.map

@@ -1 +1 @@
-{"file":"ix-blind.js","mappings":"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","names":[],"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: 'insight') {\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 == 'insight' 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 == 'insight' 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  insight,\n  neutral,\n  notification,\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';\n\nexport type BlindVariant = CardVariant | 'outline';\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   * @since 2.0.0\n   */\n  @Prop() sublabel: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Blind variant\n   * @since 2.0.0\n   */\n  @Prop() variant: BlindVariant = 'insight';\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={'chevron-right-small'}\n              color={\n                this.variant === 'insight' || this.variant === 'outline'\n                  ? 'color-primary'\n                  : `color-${this.variant}--contrast`\n              }\n              ref={(ref) => (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 === 'insight' || 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"],"version":3}
+{"file":"ix-blind.js","mappings":"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","names":[],"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: 'insight') {\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 == 'insight' 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 == 'insight' 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  insight,\n  neutral,\n  notification,\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';\n\nexport type BlindVariant = CardVariant | 'outline';\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   * @since 2.0.0\n   */\n  @Prop() sublabel?: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Blind variant\n   * @since 2.0.0\n   */\n  @Prop() variant: BlindVariant = 'insight';\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={'chevron-right-small'}\n              color={\n                this.variant === 'insight' || this.variant === 'outline'\n                  ? 'color-primary'\n                  : `color-${this.variant}--contrast`\n              }\n              ref={(ref: HTMLElement) => (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 === 'insight' || 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"],"version":3}

package/components/ix-breadcrumb.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, forceUpdate } from '@stencil/core/internal/client';
 import { b as a11yHostAttributes, a as a11yBoolean } from './a11y.js';
 import { c as createMutationObserver } from './mutation-observer.js';
+import { m as makeRef } from './make-ref.js';
 import { d as defineCustomElement$5 } from './breadcrumb-item.js';
 import { d as defineCustomElement$4 } from './dropdown.js';
 import { d as defineCustomElement$3 } from './dropdown-item.js';
@@ -20,14 +21,14 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
         this.__attachShadow();
         this.itemClick = createEvent(this, "itemClick", 7);
         this.nextClick = createEvent(this, "nextClick", 7);
+        this.previousButtonRef = makeRef();
+        this.nextButtonRef = makeRef();
         this.previousButtonId = createId();
         this.previousDropdownId = createId();
         this.visibleItemCount = 9;
         this.nextItems = [];
         this.ghost = true;
         this.ariaLabelPreviousButton = 'previous';
-        this.previousButtonRef = undefined;
-        this.nextButtonRef = undefined;
         this.items = [];
         this.isPreviousDropdownExpanded = false;
     }
@@ -59,7 +60,7 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
             bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;
             bc.isDropdownTrigger = shouldShowDropdown;
             if (shouldShowDropdown) {
-                this.nextButtonRef = bc;
+                this.nextButtonRef(bc);
             }
             if (updatedItems.length < this.visibleItemCount) {
                 return;
@@ -74,14 +75,14 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
     render() {
         var _a, _b, _c, _d;
         const a11y = a11yHostAttributes(this.hostElement);
-        return (h(Host, { key: '01b7b3c2b8e5b4eccea75ea1ffb85d91516888ab' }, h("ix-dropdown", { key: 'acd5584e3cfcb2b698a36e65a9f706f955f525e7', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
-                ? this.previousButtonRef
-                : null, onShowChanged: ({ detail }) => {
+        return (h(Host, { key: 'ad4b8c147f3478a9cb8f01d5f46b99ff86ee323f' }, h("ix-dropdown", { key: 'b8fa759644e7252e3f25c5805e06196ad7acfeb3', 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;
                 const previousButton = this.hostElement.shadowRoot.getElementById(this.previousButtonId);
                 // Need to force update previous button to change `aria-expanded`
                 if (previousButton) {
-                    forceUpdate(this.hostElement.shadowRoot.getElementById(this.previousButtonId));
+                    forceUpdate(previousButton);
                 }
             } }, this.items
             .slice(0, this.items.length - this.visibleItemCount)
@@ -91,7 +92,7 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
             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: (ref) => (this.previousButtonRef = ref), 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: '5528a34e56c4dbcf8130652b517ca717c3158294', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: '5e74629e99a27aad5140a0bf519db8513adfc5ff' }, h("slot", { key: '4cf1e9f67ca27bd9f8f6e06e6e6a946048306f78' }))), h("ix-dropdown", { key: 'f16070f4edffdef90c32e8f426e492d8b856f5ef', trigger: this.nextButtonRef }, (_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: '894aa6aba077c3154ff4e2f75ea90e044c9dd1b8', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: 'a1bba2fc77e17877306e996373dc6269c7530e48' }, h("slot", { key: '50dea282515e311e37ea48776793cc0aaa6746b2' }))), h("ix-dropdown", { key: '3ebe74020ea3edabcaff09c3840db5fdeef1581d', 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,
@@ -108,8 +109,6 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
         "nextItems": [16],
         "ghost": [4],
         "ariaLabelPreviousButton": [1, "aria-label-previous-button"],
-        "previousButtonRef": [32],
-        "nextButtonRef": [32],
         "items": [32],
         "isPreviousDropdownExpanded": [32]
     }, undefined, {

package/components/ix-breadcrumb.js.map

@@ -1 +1 @@
-{"file":"ix-breadcrumb.js","mappings":"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","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.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 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  justify-content: flex-start;\n  height: 2.5rem;\n  align-items: center;\n  background-color: transparent;\n  overflow: hidden;\n\n  .previous-button {\n    width: 3rem;\n    min-width: 0px;\n  }\n\n  .crumb-dropdown {\n    overflow: visible;\n  }\n\n  .remove-anchor::after {\n    display: none;\n  }\n\n  .more-text {\n    display: flex;\n\n    .more-text-ellipsis {\n      width: 1rem;\n      display: inline-block;\n      font-weight: $font-weight-bold;\n    }\n\n    ix-icon {\n      // line-height: unset; --> Note: 'line-height' can't be applied due to shadow DOM encapsulation at ix-icon\n      // using padding-top to achieve same position as before\n      padding-top: 2px;\n    }\n  }\n\n  nav,\n  ol,\n  .crumb-items {\n    display: contents;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n  return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class Breadcrumb {\n  @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n  /**\n   * Excess items will get hidden inside of dropdown\n   */\n  @Prop() visibleItemCount = 9;\n\n  /**\n   * Items will be accessible through a dropdown\n   */\n  @Prop() nextItems: string[] = [];\n  @Watch('nextItems')\n  onNextItemsChange() {\n    this.onChildMutation();\n  }\n\n  /**\n   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n   */\n  @Prop() ghost = true;\n\n  /**\n   * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n   * with conditionally hidden previous items\n   *\n   * @since 2.0.0\n   */\n  @Prop() ariaLabelPreviousButton = 'previous';\n\n  /**\n   * Crumb item clicked event\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * Next item clicked event\n   */\n  @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>;\n\n  @State() previousButtonRef: HTMLElement;\n  @State() nextButtonRef: HTMLElement;\n  @State() items: HTMLIxBreadcrumbItemElement[] = [];\n  @State() isPreviousDropdownExpanded = false;\n\n  private mutationObserver: MutationObserver;\n\n  private previousButtonId = createId();\n  private previousDropdownId = createId();\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() =>\n      this.onChildMutation()\n    );\n\n    this.mutationObserver.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.onChildMutation();\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async onChildMutation() {\n    const updatedItems = this.getItems();\n\n    updatedItems.forEach((bc, index) => {\n      const shouldShowDropdown =\n        this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n      bc.ghost = this.ghost;\n      bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;\n      bc.isDropdownTrigger = shouldShowDropdown;\n\n      if (shouldShowDropdown) {\n        this.nextButtonRef = bc;\n      }\n\n      if (updatedItems.length < this.visibleItemCount) {\n        return;\n      }\n\n      bc.visible = index >= updatedItems.length - this.visibleItemCount;\n    });\n\n    this.items = updatedItems;\n  }\n\n  private getItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    return (\n      <Host>\n        <ix-dropdown\n          id={this.previousDropdownId}\n          aria-label={this.ariaLabelPreviousButton}\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef\n              : null\n          }\n          onShowChanged={({ detail }) => {\n            this.isPreviousDropdownExpanded = detail;\n\n            const previousButton = this.hostElement.shadowRoot.getElementById(\n              this.previousButtonId\n            );\n\n            // Need to force update previous button to change `aria-expanded`\n            if (previousButton) {\n              forceUpdate(\n                this.hostElement.shadowRoot.getElementById(\n                  this.previousButtonId\n                )\n              );\n            }\n          }}\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => {\n              const label = item.label ?? item.innerText;\n\n              return (\n                <ix-dropdown-item\n                  label={label}\n                  onClick={() => {\n                    this.onItemClick(label);\n                  }}\n                  onItemClick={(event) => event.stopPropagation()}\n                ></ix-dropdown-item>\n              );\n            })}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <ix-breadcrumb-item\n            id={this.previousButtonId}\n            ref={(ref) => (this.previousButtonRef = ref)}\n            label=\"...\"\n            tabIndex={1}\n            onItemClick={(event) => event.stopPropagation()}\n            aria-describedby={this.previousDropdownId}\n            aria-controls={this.previousDropdownId}\n            aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n            class={'previous-button'}\n          ></ix-breadcrumb-item>\n        ) : null}\n        <nav\n          class=\"crumb-items\"\n          aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n        >\n          <ol>\n            <slot></slot>\n          </ol>\n        </nav>\n        <ix-dropdown trigger={this.nextButtonRef}>\n          {this.nextItems?.map((item) => (\n            <ix-dropdown-item\n              label={item}\n              onClick={(e) => {\n                this.nextClick.emit({\n                  event: e,\n                  item,\n                });\n              }}\n              onItemClick={(event) => event.stopPropagation()}\n            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-breadcrumb.js","mappings":"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","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.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 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  justify-content: flex-start;\n  height: 2.5rem;\n  align-items: center;\n  background-color: transparent;\n  overflow: hidden;\n\n  .previous-button {\n    width: 3rem;\n    min-width: 0px;\n  }\n\n  .crumb-dropdown {\n    overflow: visible;\n  }\n\n  .remove-anchor::after {\n    display: none;\n  }\n\n  .more-text {\n    display: flex;\n\n    .more-text-ellipsis {\n      width: 1rem;\n      display: inline-block;\n      font-weight: $font-weight-bold;\n    }\n\n    ix-icon {\n      // line-height: unset; --> Note: 'line-height' can't be applied due to shadow DOM encapsulation at ix-icon\n      // using padding-top to achieve same position as before\n      padding-top: 2px;\n    }\n  }\n\n  nav,\n  ol,\n  .crumb-items {\n    display: contents;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { makeRef } from '../utils/make-ref';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n  return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class Breadcrumb {\n  @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n  /**\n   * Excess items will get hidden inside of dropdown\n   */\n  @Prop() visibleItemCount = 9;\n\n  /**\n   * Items will be accessible through a dropdown\n   */\n  @Prop() nextItems: string[] = [];\n  @Watch('nextItems')\n  onNextItemsChange() {\n    this.onChildMutation();\n  }\n\n  /**\n   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n   */\n  @Prop() ghost = true;\n\n  /**\n   * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n   * with conditionally hidden previous items\n   *\n   * @since 2.0.0\n   */\n  @Prop() ariaLabelPreviousButton = 'previous';\n\n  /**\n   * Crumb item clicked event\n   */\n  @Event() itemClick!: EventEmitter<string>;\n\n  /**\n   * Next item clicked event\n   */\n  @Event() nextClick!: EventEmitter<{ event: UIEvent; item: string }>;\n\n  private readonly previousButtonRef = makeRef<HTMLIxBreadcrumbItemElement>();\n  private readonly nextButtonRef = makeRef<HTMLElement>();\n\n  @State() items: HTMLIxBreadcrumbItemElement[] = [];\n  @State() isPreviousDropdownExpanded = false;\n\n  private mutationObserver?: MutationObserver;\n\n  private previousButtonId = createId();\n  private previousDropdownId = createId();\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() =>\n      this.onChildMutation()\n    );\n\n    this.mutationObserver.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.onChildMutation();\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async onChildMutation() {\n    const updatedItems = this.getItems();\n\n    updatedItems.forEach((bc, index) => {\n      const shouldShowDropdown =\n        this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n      bc.ghost = this.ghost;\n      bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;\n      bc.isDropdownTrigger = shouldShowDropdown;\n\n      if (shouldShowDropdown) {\n        this.nextButtonRef(bc);\n      }\n\n      if (updatedItems.length < this.visibleItemCount) {\n        return;\n      }\n\n      bc.visible = index >= updatedItems.length - this.visibleItemCount;\n    });\n\n    this.items = updatedItems;\n  }\n\n  private getItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    return (\n      <Host>\n        <ix-dropdown\n          id={this.previousDropdownId}\n          aria-label={this.ariaLabelPreviousButton}\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef.waitForCurrent()\n              : undefined\n          }\n          onShowChanged={({ detail }) => {\n            this.isPreviousDropdownExpanded = detail;\n\n            const previousButton = this.hostElement.shadowRoot!.getElementById(\n              this.previousButtonId\n            );\n\n            // Need to force update previous button to change `aria-expanded`\n            if (previousButton) {\n              forceUpdate(previousButton);\n            }\n          }}\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => {\n              const label = item.label ?? item.innerText;\n\n              return (\n                <ix-dropdown-item\n                  label={label}\n                  onClick={() => {\n                    this.onItemClick(label);\n                  }}\n                  onItemClick={(event) => event.stopPropagation()}\n                ></ix-dropdown-item>\n              );\n            })}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <ix-breadcrumb-item\n            id={this.previousButtonId}\n            ref={this.previousButtonRef}\n            label=\"...\"\n            tabIndex={1}\n            onItemClick={(event) => event.stopPropagation()}\n            aria-describedby={this.previousDropdownId}\n            aria-controls={this.previousDropdownId}\n            aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n            class={'previous-button'}\n          ></ix-breadcrumb-item>\n        ) : null}\n        <nav\n          class=\"crumb-items\"\n          aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n        >\n          <ol>\n            <slot></slot>\n          </ol>\n        </nav>\n        <ix-dropdown trigger={this.nextButtonRef.waitForCurrent()}>\n          {this.nextItems?.map((item) => (\n            <ix-dropdown-item\n              label={item}\n              onClick={(e) => {\n                this.nextClick.emit({\n                  event: e,\n                  item,\n                });\n              }}\n              onItemClick={(event) => event.stopPropagation()}\n            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-card-list.js

@@ -7,17 +7,17 @@ import { d as defineCustomElement$4 } from './icon-button.js';
 import { d as defineCustomElement$3 } from './spinner.js';
 import { d as defineCustomElement$2 } from './typography.js';
 
-const cardListCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}: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 .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:0.5rem}:host .CardList_Title__Label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px;flex-shrink:0}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}";
+const cardListCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}: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 .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:1rem}:host .CardList_Title__Label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px;flex-shrink:0}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}";
 const IxCardListStyle0 = cardListCss;
 
 function CardListTitle(props) {
-    if (props.label === '') {
+    if (!props.label) {
         return null;
     }
     return (h("div", { class: "CardList_Title" }, h("ix-icon-button", { ghost: true, icon: 'chevron-down', onClick: props.onClick, color: "color-primary", class: {
             CardList__Title__Button: true,
             CardList__Title__Button__Collapsed: props.isCollapsed,
-        } }), h("ix-typography", { class: "CardList_Title__Label", variant: "large-single" }, props.label), !props.hideShowAll && (h("ix-button", { class: "CardList__Title__Show__All", ghost: true, onClick: props.onShowAllClick }, h("span", null, props.showAllLabel), h("span", null, !isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null)))));
+        } }), h("ix-typography", { class: "CardList_Title__Label", format: "body-lg" }, props.label), !props.hideShowAll && (h("ix-button", { class: "CardList__Title__Show__All", ghost: true, onClick: props.onShowAllClick }, h("span", null, props.showAllLabel), h("span", null, !isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null)))));
 }
 const CardList = /*@__PURE__*/ proxyCustomElement(class CardList extends HTMLElement {
     constructor() {
@@ -131,6 +131,9 @@ const CardList = /*@__PURE__*/ proxyCustomElement(class CardList extends HTMLEle
         };
     }
     detectOverflow() {
+        if (!this.listElement) {
+            return;
+        }
         const { clientWidth, scrollWidth, scrollLeft } = this.listElement;
         this.leftScrollDistance = scrollLeft;
         this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;
@@ -146,16 +149,16 @@ const CardList = /*@__PURE__*/ proxyCustomElement(class CardList extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: '8164956edee5c3fa0d3f68af175c04a653aa7043' }, h(CardListTitle, { key: '4001ba1a1fbc3dd244297380698907902f37932a', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        return (h(Host, { key: '64883990dc81fbb760b407acf886c74ec0d7ec55' }, h(CardListTitle, { key: '3c31997a5f05e8f0a03c384576333b638fb35176', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
                 ? this.numberOfAllChildElements
-                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '0a72db4811cd78f9ba067d592218eafd9e69fc8e', class: {
+                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '1dce56bb96d98b521968a638ef85bf08239f7c40', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, h("div", { key: '4bf8fe61b17c5ab7b4ad4d0cf0bfaf3cd9c83008', class: {
+            }, style: this.computeMaskLayer() }, h("div", { key: '180f78aea31192e7b93d973640928a68e628a2fd', class: {
                 CardList__Content: true,
                 CardList__Content__Collapsed: this.collapse,
                 CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',
                 CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',
-            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: '2ed30ff94867a85b37678cc3fdef28770837d790', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: 'e8b077edebf94df6b740bf2634549f7a7dd40f17', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
                 Show__All__Card: true,
             }, onClick: (event) => this.showMoreCardClick.emit({
                 nativeEvent: event,