@siemens/ix 2.6.0 → 2.7.0

package/components/input.util.js

@@ -1,6 +1,7 @@
 import { h } from '@stencil/core/internal/client';
 import { a as a11yBoolean } from './a11y.js';
 import { s as shouldSuppressInternalValidation } from './validation.js';
+import { c as createMutationObserver } from './mutation-observer.js';
 import { a as convertToRemString } from './rwd.util.js';
 import { a as anime } from './anime.es.js';
 
@@ -15,12 +16,10 @@ import { a as anime } from './anime.es.js';
 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) => {
+        }, required: props.required, value: props.value, placeholder: props.placeholder, onInput: (inputEvent) => {
             const target = inputEvent.target;
             props.updateFormInternalValue(target.value);
+            props.valueChange(target.value);
         }, onBlur: () => props.onBlur(), style: {
             resize: props.resizeBehavior,
             height: props.textareaHeight,
@@ -30,12 +29,10 @@ function TextareaElement(props) {
 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) => {
+        }, required: props.required, value: props.value, placeholder: props.placeholder, onKeyPress: (event) => props.onKeyPress(event), onInput: (inputEvent) => {
             const target = inputEvent.target;
             props.updateFormInternalValue(target.value);
+            props.valueChange(target.value);
         }, onBlur: () => props.onBlur() }, props.ariaAttributes)));
 }
 const SlotEnd = (props, children) => {
@@ -120,7 +117,7 @@ async function checkInternalValidity(comp, input) {
         return;
     }
     const { valid } = validityState;
-    comp.hostElement.classList.toggle('ix-invalid', !valid);
+    comp.hostElement.classList.toggle('ix-invalid--validity-invalid', !valid);
 }
 function onInputBlur(comp, input) {
     comp.ixBlur.emit();
@@ -175,7 +172,30 @@ function getAriaAttributesForInput(component) {
     }
     return inputAria;
 }
+const addDisposableChangesAndVisibilityObservers = (element, callback) => {
+    const intersectionObserver = observeElementUntilVisible(element, callback);
+    const mutationObserver = createMutationObserver(callback);
+    mutationObserver.observe(element, {
+        subtree: true,
+        attributes: true,
+    });
+    return () => {
+        intersectionObserver.disconnect();
+        mutationObserver.disconnect();
+    };
+};
+function observeElementUntilVisible(hostElement, updateCallback) {
+    const intersectionObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                updateCallback();
+            }
+        });
+    });
+    intersectionObserver.observe(hostElement);
+    return intersectionObserver;
+}
 
-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 };
+export { InputElement as I, SlotStart as S, TextareaElement as T, addDisposableChangesAndVisibilityObservers as a, adjustPaddingForStartAndEnd as b, SlotEnd as c, checkAllowedKeys as d, checkInternalValidity as e, getAriaAttributesForInput as g, mapValidationResult as m, onInputBlur as o };
 
 //# sourceMappingURL=input.util.js.map

package/components/input.util.js.map

@@ -1 +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}
+{"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      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(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      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: 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\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"],"version":3}

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: '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) ||
+        return (h(Host, { key: 'dad36a353095fd4fefe76a6e30689c337a386ad9' }, h("ix-modal-header", { key: 'aeecc9cceec3af4229c50f2485192e10b91f2b70', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), h("ix-modal-content", { key: 'b61ec923a488f02bccff232c9da0f3e0f779b48c', class: "content" }, h("div", { key: '12341ea0223935f515eee8809b4f941f1d5e19a7', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (h("div", { key: 'bec8b7c136982629f6700202c2f4add9ae160f36', class: "loading" }, h("ix-spinner", { key: 'd0fa62e5041053ada470731bbdf8a21aa2a08200', size: "medium", variant: "primary" }), h("span", { key: '9fd6f8cbc36c4c74a52f192858d124bd85d481c0' }, ((_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-switch-modal.js.map

@@ -1 +1 @@
-{"file":"ix-application-switch-modal.js","mappings":";;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,62DAA62D,CAAC;AACh5D,uCAAe,yBAAyB;;ACexC,SAAS,eAAe,CAAC,KAQxB;IACC,SAAS,UAAU,CAAC,MAAoC;QACtD,IACE,MAAM,KAAK,QAAQ;YACnB,MAAM,KAAK,SAAS;YACpB,MAAM,KAAK,OAAO;YAClB,MAAM,KAAK,MAAM,EACjB;;;YAGA,OAAO,IAAI,CAAC;SACb;QAED,IAAI,MAAM,KAAK,QAAQ,EAAE;YACvB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,KAAK,CAAC;KACd;IAED,QACE,cACE,KAAK,EAAE;YACL,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,KAAK,CAAC,QAAQ;SACzB,EACD,OAAO,EAAE;YACP,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACzB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;SACtC,IAED,eACE,WAAK,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,KAAK,CAAC,OAAO,GAAQ,CAC3C,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,qBAAe,MAAM,EAAC,IAAI,IACvB,KAAK,CAAC,IAAI,EACV,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KACvB,eACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,iBAAiB,GACd,CACZ,CACa,EAChB,qBAAe,MAAM,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,IAC1C,KAAK,CAAC,WAAW,CACJ,CACZ,CACC,EACT;AACJ,CAAC;MAQY,sBAAsB;;;;;;;IAMjC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,MAAM,KAAK,CAAC,gCAAgC,CAAC,CAAC;SAC/C;KACF;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACH,wEAAiB,IAAI,EAAC,MAAM,IACzB,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,aAAa,KAAI,uBAAuB,CACtC,EAClB,yEAAkB,KAAK,EAAC,SAAS,IAC/B,4DAAK,KAAK,EAAC,cAAc,IACtB,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,MAAM,MAAK,CAAC,MAC9C,4DAAK,KAAK,EAAC,SAAS,IAClB,mEAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,GAAc,EACzD,+DACG,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,eAAe;YAC3B,mCAAmC,CAChC,CACH,CACP,EACA,MAAA,IAAI,CAAC,MAAM;eAAE,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ;;gBAAK,QACnC,EAAC,eAAe,IACd,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,WAAW,EAAE,QAAQ,CAAC,WAAW,EACjC,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,GAAG,EAAE,QAAQ,CAAC,GAAG,EACjB,QAAQ,EAAE,QAAQ,CAAC,EAAE,MAAK,MAAA,IAAI,CAAC,MAAM,0CAAE,YAAY,CAAA,GAClC,EACpB;aAAA,CAAC,CACE,CACW,CACd,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/application-header/application-switch-modal/application-switch-modal.scss?tag=ix-application-switch-modal&encapsulation=shadow","src/components/application-header/application-switch-modal/application-switch-modal.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@import 'mixins/hover';\n\n:host {\n  @include ix-component;\n  display: block;\n\n  .content {\n    padding: 2rem;\n    padding-right: 0;\n  }\n\n  .content-apps {\n    display: flex;\n    position: relative;\n    flex-wrap: wrap;\n    justify-content: space-evenly;\n    max-height: 50vh;\n    margin-right: 0.25rem;\n    gap: 1.5rem;\n  }\n\n  .loading {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    ix-spinner {\n      margin-right: 1rem;\n    }\n  }\n}\n\n:host {\n  .AppEntry {\n    all: unset;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 1rem;\n    padding: 0.5rem;\n    flex: 1 1 calc(45%);\n    cursor: pointer;\n    border: 0.0625rem solid transparent;\n  }\n\n  .AppEntry.Selected {\n    background-color: var(--theme-color-ghost--selected);\n    border: var(--theme-dynamic-bdr-1);\n  }\n\n  .AppEntry {\n    @include ghost-hover-pressed;\n  }\n\n  .AppEntry:focus-visible {\n    border: 1px solid var(--theme-color-focus-bdr);\n  }\n\n  .AppName {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .AppName ix-icon {\n    margin-left: 1rem;\n  }\n\n  .AppIcon {\n    width: 3rem;\n    height: 3rem;\n    border-radius: 0.25rem;\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, Element, h, Host, Prop } from '@stencil/core';\nimport {\n  AppSwitchConfiguration,\n  AppSwitchConfigurationTarget,\n} from '../../utils/application-layout/context';\nimport { dismissModal } from '../../utils/modal';\n\nfunction ApplicationItem(props: {\n  host: HTMLIxApplicationSwitchModalElement;\n  name: string;\n  description: string;\n  iconSrc: string;\n  url: string;\n  target: AppSwitchConfigurationTarget;\n  selected: boolean;\n}) {\n  function isExternal(target: AppSwitchConfigurationTarget) {\n    if (\n      target !== '_blank' &&\n      target !== '_parent' &&\n      target !== '_self' &&\n      target !== '_top'\n    ) {\n      // Check if its one of the target keywords\n      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?retiredLocale=de#target\n      return true;\n    }\n\n    if (target === '_blank') {\n      return true;\n    }\n\n    return false;\n  }\n\n  return (\n    <button\n      class={{\n        AppEntry: true,\n        Selected: props.selected,\n      }}\n      onClick={() => {\n        dismissModal(props.host);\n        window.open(props.url, props.target);\n      }}\n    >\n      <div>\n        <img class=\"AppIcon\" src={props.iconSrc}></img>\n      </div>\n      <div class=\"AppName\">\n        <ix-typography format=\"h4\">\n          {props.name}\n          {isExternal(props.target) && (\n            <ix-icon\n              size=\"12\"\n              name=\"open-external\"\n              color=\"color-soft-text\"\n            ></ix-icon>\n          )}\n        </ix-typography>\n        <ix-typography format=\"label-sm\" color=\"soft\">\n          {props.description}\n        </ix-typography>\n      </div>\n    </button>\n  );\n}\n\n/** @internal */\n@Component({\n  tag: 'ix-application-switch-modal',\n  styleUrl: 'application-switch-modal.scss',\n  shadow: true,\n})\nexport class ApplicationSwitchModal {\n  @Element() hostElement!: HTMLIxApplicationSwitchModalElement;\n\n  /** @internal */\n  @Prop() config: AppSwitchConfiguration;\n\n  componentWillLoad() {\n    if (!this.config) {\n      throw Error('ApplicationConfig not provided');\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-modal-header icon=\"apps\">\n          {this.config?.i18nAppSwitch || 'Switch to application'}\n        </ix-modal-header>\n        <ix-modal-content class=\"content\">\n          <div class=\"content-apps\">\n            {(!this.config || this.config?.apps.length === 0) && (\n              <div class=\"loading\">\n                <ix-spinner size=\"medium\" variant=\"primary\"></ix-spinner>\n                <span>\n                  {this.config?.i18nLoadingApps ||\n                    'Loading available applications...'}\n                </span>\n              </div>\n            )}\n            {this.config?.apps.map((appEntry) => (\n              <ApplicationItem\n                host={this.hostElement}\n                name={appEntry.name}\n                description={appEntry.description}\n                iconSrc={appEntry.iconSrc}\n                target={appEntry.target}\n                url={appEntry.url}\n                selected={appEntry.id === this.config?.currentAppId}\n              ></ApplicationItem>\n            ))}\n          </div>\n        </ix-modal-content>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-application-switch-modal.js","mappings":";;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,62DAA62D,CAAC;AACh5D,uCAAe,yBAAyB;;ACexC,SAAS,eAAe,CAAC,KAQxB;IACC,SAAS,UAAU,CAAC,MAAoC;QACtD,IACE,MAAM,KAAK,QAAQ;YACnB,MAAM,KAAK,SAAS;YACpB,MAAM,KAAK,OAAO;YAClB,MAAM,KAAK,MAAM,EACjB;;;YAGA,OAAO,IAAI,CAAC;SACb;QAED,IAAI,MAAM,KAAK,QAAQ,EAAE;YACvB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,KAAK,CAAC;KACd;IAED,QACE,cACE,KAAK,EAAE;YACL,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,KAAK,CAAC,QAAQ;SACzB,EACD,OAAO,EAAE;YACP,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACzB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;SACtC,IAED,eACE,WAAK,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,KAAK,CAAC,OAAO,GAAQ,CAC3C,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,qBAAe,MAAM,EAAC,IAAI,IACvB,KAAK,CAAC,IAAI,EACV,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KACvB,eACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,iBAAiB,GACd,CACZ,CACa,EAChB,qBAAe,MAAM,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,IAC1C,KAAK,CAAC,WAAW,CACJ,CACZ,CACC,EACT;AACJ,CAAC;MAQY,sBAAsB;;;;;;;IAMjC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,MAAM,KAAK,CAAC,gCAAgC,CAAC,CAAC;SAC/C;KACF;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACH,wEAAiB,IAAI,EAAC,MAAM,IACzB,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,aAAa,KAAI,uBAAuB,CACtC,EAClB,yEAAkB,KAAK,EAAC,SAAS,IAC/B,4DAAK,KAAK,EAAC,cAAc,IACtB,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,MAAM,MAAK,CAAC,MAC9C,4DAAK,KAAK,EAAC,SAAS,IAClB,mEAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,GAAc,EACzD,+DACG,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,eAAe;YAC3B,mCAAmC,CAChC,CACH,CACP,EACA,MAAA,IAAI,CAAC,MAAM;eAAE,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ;;gBAAK,QACnC,EAAC,eAAe,IACd,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,WAAW,EAAE,QAAQ,CAAC,WAAW,EACjC,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,GAAG,EAAE,QAAQ,CAAC,GAAG,EACjB,QAAQ,EAAE,QAAQ,CAAC,EAAE,MAAK,MAAA,IAAI,CAAC,MAAM,0CAAE,YAAY,CAAA,GAClC,EACpB;aAAA,CAAC,CACE,CACW,CACd,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/application-header/application-switch-modal/application-switch-modal.scss?tag=ix-application-switch-modal&encapsulation=shadow","src/components/application-header/application-switch-modal/application-switch-modal.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@import 'mixins/hover';\n\n:host {\n  @include ix-component;\n  display: block;\n\n  .content {\n    padding: 2rem;\n    padding-right: 0;\n  }\n\n  .content-apps {\n    display: flex;\n    position: relative;\n    flex-wrap: wrap;\n    justify-content: space-evenly;\n    max-height: 50vh;\n    margin-right: 0.25rem;\n    gap: 1.5rem;\n  }\n\n  .loading {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    ix-spinner {\n      margin-right: 1rem;\n    }\n  }\n}\n\n:host {\n  .AppEntry {\n    all: unset;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 1rem;\n    padding: 0.5rem;\n    flex: 1 1 calc(45%);\n    cursor: pointer;\n    border: 0.0625rem solid transparent;\n  }\n\n  .AppEntry.Selected {\n    background-color: var(--theme-color-ghost--selected);\n    border: var(--theme-dynamic-bdr-1);\n  }\n\n  .AppEntry {\n    @include ghost-hover-pressed;\n  }\n\n  .AppEntry:focus-visible {\n    border: 1px solid var(--theme-color-focus-bdr);\n  }\n\n  .AppName {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .AppName ix-icon {\n    margin-left: 1rem;\n  }\n\n  .AppIcon {\n    width: 3rem;\n    height: 3rem;\n    border-radius: 0.25rem;\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, Element, h, Host, Prop } from '@stencil/core';\nimport {\n  AppSwitchConfiguration,\n  AppSwitchConfigurationTarget,\n} from '../../utils/application-layout/context';\nimport { dismissModal } from '../../utils/modal';\n\nfunction ApplicationItem(props: {\n  host: HTMLIxApplicationSwitchModalElement;\n  name: string;\n  description: string;\n  iconSrc: string;\n  url: string;\n  target: AppSwitchConfigurationTarget;\n  selected: boolean;\n}) {\n  function isExternal(target: AppSwitchConfigurationTarget) {\n    if (\n      target !== '_blank' &&\n      target !== '_parent' &&\n      target !== '_self' &&\n      target !== '_top'\n    ) {\n      // Check if its one of the target keywords\n      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?retiredLocale=de#target\n      return true;\n    }\n\n    if (target === '_blank') {\n      return true;\n    }\n\n    return false;\n  }\n\n  return (\n    <button\n      class={{\n        AppEntry: true,\n        Selected: props.selected,\n      }}\n      onClick={() => {\n        dismissModal(props.host);\n        window.open(props.url, props.target);\n      }}\n    >\n      <div>\n        <img class=\"AppIcon\" src={props.iconSrc}></img>\n      </div>\n      <div class=\"AppName\">\n        <ix-typography format=\"h4\">\n          {props.name}\n          {isExternal(props.target) && (\n            <ix-icon\n              size=\"12\"\n              name=\"open-external\"\n              color=\"color-soft-text\"\n            ></ix-icon>\n          )}\n        </ix-typography>\n        <ix-typography format=\"label-sm\" color=\"soft\">\n          {props.description}\n        </ix-typography>\n      </div>\n    </button>\n  );\n}\n\n/** @internal */\n@Component({\n  tag: 'ix-application-switch-modal',\n  styleUrl: 'application-switch-modal.scss',\n  shadow: true,\n})\nexport class ApplicationSwitchModal {\n  @Element() hostElement!: HTMLIxApplicationSwitchModalElement;\n\n  /** @internal */\n  @Prop() config?: AppSwitchConfiguration;\n\n  componentWillLoad() {\n    if (!this.config) {\n      throw Error('ApplicationConfig not provided');\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-modal-header icon=\"apps\">\n          {this.config?.i18nAppSwitch || 'Switch to application'}\n        </ix-modal-header>\n        <ix-modal-content class=\"content\">\n          <div class=\"content-apps\">\n            {(!this.config || this.config?.apps.length === 0) && (\n              <div class=\"loading\">\n                <ix-spinner size=\"medium\" variant=\"primary\"></ix-spinner>\n                <span>\n                  {this.config?.i18nLoadingApps ||\n                    'Loading available applications...'}\n                </span>\n              </div>\n            )}\n            {this.config?.apps.map((appEntry) => (\n              <ApplicationItem\n                host={this.hostElement}\n                name={appEntry.name}\n                description={appEntry.description}\n                iconSrc={appEntry.iconSrc}\n                target={appEntry.target}\n                url={appEntry.url}\n                selected={appEntry.id === this.config?.currentAppId}\n              ></ApplicationItem>\n            ))}\n          </div>\n        </ix-modal-content>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-application.js

@@ -80,6 +80,10 @@ const Application = /*@__PURE__*/ proxyCustomElement(class Application extends H
         themeSwitcher.setTheme(`theme-${this.theme}-dark`, this.themeSystemAppearance);
     }
     onApplicationSidebarChange() {
+        if (!this.contextProvider) {
+            console.error('Context provider not available');
+            return;
+        }
         this.contextProvider.emit({
             hideHeader: false,
             host: 'basic-navigation',
@@ -88,12 +92,12 @@ const Application = /*@__PURE__*/ proxyCustomElement(class Application extends H
         });
     }
     render() {
-        return (h(Host, { key: 'f7d9dc242b02f711e6b876a655872eded15acc5a', "data-role": "", class: {
+        return (h(Host, { key: '50ca923e8983045fce768740d5ed1e939f87ab5d', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: '42bf6a7646231575b65712fc8ebc05b0d831e379', name: "application-header" }), h("div", { key: '28631a23909254557f65ab0fa78229155e56304c', class: "application" }, h("slot", { key: '803ff42c7a15ebf49a8791983792d51e92d72df2', name: "menu" }), h("aside", { key: '2ae8ed82923ad88b7e90a1efa4e2fa5e9e894fc9', class: {
+            } }, h("slot", { key: '25816ef9a2ca0755899f548d82422b36bdff0ea2', name: "application-header" }), h("div", { key: 'b6decbb58f86e676b0f38f74d1a0b1cf06a0a047', class: "application" }, h("slot", { key: 'ce9aa0dadca4c0fc457f46175accb2f2463b4f99', name: "menu" }), h("aside", { key: '5bbed7f3373138a202c4ac5c5e53db200ae6c497', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, 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" }))))));
+            }, onClick: () => this.onContentClick() }, h("slot", { key: '0d7177030baeb9798a88b596a051e3189e0f48c7', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: 'fbadd8c31611153d09cb8923a45602ba87066f73', class: "content-area" }, h("main", { key: '1800db092639a1cbcbbc3506a4fe911c3ad8f2df', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'b4f6e4327073f70991b6460a7b300721685e615f' })), h("footer", { key: '83534298e878b0ef312ea138e475057d7a81166f', class: "footer" }, h("slot", { key: 'bafee309d2384d9f358c6940f4e647ae267a866b', name: "bottom" }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-application.js.map

@@ -1 +1 @@
-{"file":"ix-application.js","mappings":"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","names":[],"sources":["src/components/application/application.scss?tag=ix-application&encapsulation=shadow","src/components/application/application.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\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  flex-direction: column;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .logo-wrapper {\n    display: contents;\n  }\n\n  .application {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .content-area {\n    display: flex;\n    position: relative;\n    flex-direction: column;\n    flex-wrap: nowrap;\n    height: calc(100% - var(--ix-safe-area-inset-bottom, 0px));\n    width: 100%;\n    margin-left: var(--ix-application-menu-margin-left);\n  }\n\n  main {\n    display: block;\n    position: relative;\n    flex-grow: 1;\n\n    width: 100%;\n    padding-bottom: var(--ix-safe-area-inset-bottom);\n    overflow: auto;\n  }\n\n  footer {\n    display: block;\n    position: relative;\n    width: 100%;\n  }\n}\n\n:host(.breakpoint-md) {\n  --ix-application-menu-margin-left: calc(\n    3.25rem + var(--ix-application-menu-safe-area-left, 0rem)\n  );\n\n  aside.slotted {\n    margin-left: var(--ix-application-menu-margin-left);\n  }\n\n  aside.slotted + .content-area {\n    margin-left: 0;\n  }\n\n  aside:not(.slotted) + .content-area {\n    margin-left: var(--ix-application-menu-margin-left);\n  }\n}\n\n:host(.breakpoint-lg) {\n  --ix-application-menu-margin-left: 0;\n}\n\n:host(.breakpoint-sm) {\n  --ix-application-menu-margin-left: var(\n    --ix-application-menu-safe-area-left,\n    0rem\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, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport {\n  ApplicationLayoutContext,\n  AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { IxTheme, themeSwitcher } from '../utils/theme-switcher';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-application',\n  styleUrl: 'application.scss',\n  shadow: true,\n})\nexport class Application {\n  @Element() hostElement: HTMLIxApplicationElement;\n\n  /**\n   * Application theme\n   */\n  @Prop() theme: IxTheme;\n\n  /**\n   * Use the system appearance dark or light\n   */\n  @Prop() themeSystemAppearance = false;\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  /**\n   * Define application switch configuration\n   */\n  @Prop() appSwitchConfig: AppSwitchConfiguration;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() applicationSidebarSlotted = false;\n\n  private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  get applicationSidebarSlot() {\n    return this.hostElement.shadowRoot.querySelector(\n      '.application-sidebar slot'\n    ) as HTMLSlotElement;\n  }\n\n  private modeDisposable: Disposable;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: false,\n        host: 'basic-navigation',\n        sidebar: this.applicationSidebarSlotted,\n        appSwitchConfig: this.appSwitchConfig,\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n\n    this.changeTheme();\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  @Watch('theme')\n  @Watch('themeSystemAppearance')\n  private changeTheme() {\n    if (!this.theme) {\n      if (this.themeSystemAppearance) {\n        themeSwitcher.setVariant();\n      }\n\n      return;\n    }\n\n    if (themeSwitcher.hasVariantSuffix(this.theme)) {\n      themeSwitcher.setTheme(`theme-${this.theme}`);\n      return;\n    }\n\n    themeSwitcher.setTheme(\n      `theme-${this.theme}-dark`,\n      this.themeSystemAppearance\n    );\n  }\n\n  @Watch('appSwitchConfig')\n  @Watch('applicationSidebarSlotted')\n  onApplicationSidebarChange() {\n    this.contextProvider.emit({\n      hideHeader: false,\n      host: 'basic-navigation',\n      sidebar: this.applicationSidebarSlotted,\n      appSwitchConfig: this.appSwitchConfig,\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        <slot name=\"application-header\"></slot>\n        <div class=\"application\">\n          <slot name=\"menu\"></slot>\n          <aside\n            class={{\n              'application-sidebar': true,\n              slotted: this.applicationSidebarSlotted,\n            }}\n            onClick={() => this.onContentClick()}\n          >\n            <slot\n              name=\"application-sidebar\"\n              onSlotchange={() =>\n                (this.applicationSidebarSlotted = hasSlottedElements(\n                  this.applicationSidebarSlot\n                ))\n              }\n            ></slot>\n          </aside>\n          <div class=\"content-area\">\n            <main class=\"content\" onClick={() => this.onContentClick()}>\n              <slot></slot>\n            </main>\n            <footer class=\"footer\">\n              <slot name=\"bottom\"></slot>\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-application.js","mappings":"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","names":[],"sources":["src/components/application/application.scss?tag=ix-application&encapsulation=shadow","src/components/application/application.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\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  flex-direction: column;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .logo-wrapper {\n    display: contents;\n  }\n\n  .application {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .content-area {\n    display: flex;\n    position: relative;\n    flex-direction: column;\n    flex-wrap: nowrap;\n    height: calc(100% - var(--ix-safe-area-inset-bottom, 0px));\n    width: 100%;\n    margin-left: var(--ix-application-menu-margin-left);\n  }\n\n  main {\n    display: block;\n    position: relative;\n    flex-grow: 1;\n\n    width: 100%;\n    padding-bottom: var(--ix-safe-area-inset-bottom);\n    overflow: auto;\n  }\n\n  footer {\n    display: block;\n    position: relative;\n    width: 100%;\n  }\n}\n\n:host(.breakpoint-md) {\n  --ix-application-menu-margin-left: calc(\n    3.25rem + var(--ix-application-menu-safe-area-left, 0rem)\n  );\n\n  aside.slotted {\n    margin-left: var(--ix-application-menu-margin-left);\n  }\n\n  aside.slotted + .content-area {\n    margin-left: 0;\n  }\n\n  aside:not(.slotted) + .content-area {\n    margin-left: var(--ix-application-menu-margin-left);\n  }\n}\n\n:host(.breakpoint-lg) {\n  --ix-application-menu-margin-left: 0;\n}\n\n:host(.breakpoint-sm) {\n  --ix-application-menu-margin-left: var(\n    --ix-application-menu-safe-area-left,\n    0rem\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, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport {\n  ApplicationLayoutContext,\n  AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { IxTheme, themeSwitcher } from '../utils/theme-switcher';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-application',\n  styleUrl: 'application.scss',\n  shadow: true,\n})\nexport class Application {\n  @Element() hostElement!: HTMLIxApplicationElement;\n\n  /**\n   * Application theme\n   */\n  @Prop() theme?: IxTheme;\n\n  /**\n   * Use the system appearance dark or light\n   */\n  @Prop() themeSystemAppearance = false;\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  /**\n   * Define application switch configuration\n   */\n  @Prop() appSwitchConfig?: AppSwitchConfiguration;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() applicationSidebarSlotted = false;\n\n  private contextProvider?: ContextProvider<typeof ApplicationLayoutContext>;\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  get applicationSidebarSlot() {\n    return this.hostElement.shadowRoot!.querySelector(\n      '.application-sidebar slot'\n    ) as HTMLSlotElement;\n  }\n\n  private modeDisposable?: Disposable;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: false,\n        host: 'basic-navigation',\n        sidebar: this.applicationSidebarSlotted,\n        appSwitchConfig: this.appSwitchConfig,\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n\n    this.changeTheme();\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  @Watch('theme')\n  @Watch('themeSystemAppearance')\n  private changeTheme() {\n    if (!this.theme) {\n      if (this.themeSystemAppearance) {\n        themeSwitcher.setVariant();\n      }\n\n      return;\n    }\n\n    if (themeSwitcher.hasVariantSuffix(this.theme)) {\n      themeSwitcher.setTheme(`theme-${this.theme}`);\n      return;\n    }\n\n    themeSwitcher.setTheme(\n      `theme-${this.theme}-dark`,\n      this.themeSystemAppearance\n    );\n  }\n\n  @Watch('appSwitchConfig')\n  @Watch('applicationSidebarSlotted')\n  onApplicationSidebarChange() {\n    if (!this.contextProvider) {\n      console.error('Context provider not available');\n      return;\n    }\n    this.contextProvider.emit({\n      hideHeader: false,\n      host: 'basic-navigation',\n      sidebar: this.applicationSidebarSlotted,\n      appSwitchConfig: this.appSwitchConfig,\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        <slot name=\"application-header\"></slot>\n        <div class=\"application\">\n          <slot name=\"menu\"></slot>\n          <aside\n            class={{\n              'application-sidebar': true,\n              slotted: this.applicationSidebarSlotted,\n            }}\n            onClick={() => this.onContentClick()}\n          >\n            <slot\n              name=\"application-sidebar\"\n              onSlotchange={() =>\n                (this.applicationSidebarSlotted = hasSlottedElements(\n                  this.applicationSidebarSlot\n                ))\n              }\n            ></slot>\n          </aside>\n          <div class=\"content-area\">\n            <main class=\"content\" onClick={() => this.onContentClick()}>\n              <slot></slot>\n            </main>\n            <footer class=\"footer\">\n              <slot name=\"bottom\"></slot>\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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: '72bc2871bd83daef65255c91c205f3f56566dd49', "data-role": "", class: {
+        return (h(Host, { key: '9fc90b3779ab68ca24264543cac8229857da780b', "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: 'd495335a1b4ccc8c237b409eec6ed43740f6b47b', class: "navigation-content" }, h("slot", { key: '7aa73127e49e60612f9a65cd28eaf50d85cc2e6d', name: "menu" }), h("div", { key: '40886717ca1d36a952c6d2ed1597a5a8495dad2e', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '4c7f0ebbc86a84207f788b5aafd94114ffe4daae' })))));
+            } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { key: 'd95cb1125f5087059726bfa6d1f7762b2eed666d', class: "navigation-content" }, h("slot", { key: '944934592f09029948d138b57b412261fc194b39', name: "menu" }), h("div", { key: 'b7740bd510330201cd79f8ffa420ecd98fb65018', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '919a58fb4a835848a0ffec81ad215372fbc6a007' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-basic-navigation.js.map

@@ -1 +1 @@
-{"file":"ix-basic-navigation.js","mappings":";;;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,g1CAAg1C,CAAC;AAC52C,gCAAe,kBAAkB;;MCqBpB,eAAe;;;;;;0BAWL,KAAK;;2BA6BU,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;0BAMpB,IAAI;;IAjCtC,kBAAkB;;QAChB,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC;YACzB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,kBAAkB;SACzB,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;KACvD;IAMD,iBAAiB,CAAC,OAA+B;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,wBAAwB,CAAC,yBAAyB,EAAE,CAAC;YACrD,OAAO;SACR;QAED,wBAAwB,CAAC,0BAA0B,EAAE,CAAC;QACtD,wBAAwB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;KACjD;IAQD,mBAAmB,CAAC,WAAyB;QAC3C,wBAAwB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;KACtD;IAID,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;KAClD;IAKO,cAAc;;QACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;YAC3B,OAAO;SACR;QACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,wBAAwB,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE1D,IAAI,CAAC,eAAe,GAAG,kBAAkB,CACvC,IAAI,CAAC,WAAW,EAChB,wBAAwB,EACxB;YACE,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,kBAAkB;SACzB,CACF,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;YAC9D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;QAEtD,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC9C;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;SAClD;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;KAChC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,kEACO,EAAE,EACZ,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI,CAAC,UAAU;gBAC9B,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI;aACxC,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,IAC/C,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACf,IACtB,IAAI,EACR,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,4DAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACvD,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","src/components/basic-navigation/basic-navigation.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\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  flex-direction: column;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .logo-wrapper {\n    display: contents;\n  }\n\n  .content {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    margin-left: 3.25rem;\n    overflow: auto;\n  }\n\n  .navigation-content {\n    display: flex;\n    position: relative;\n\n    flex-direction: row;\n\n    height: calc(100% - 2.75rem);\n    width: 100%;\n  }\n}\n\n:host(.hide-header) {\n  .navigation-content,\n  .content {\n    height: 100%;\n  }\n}\n\n:host(.breakpoint-lg) {\n  .content {\n    margin-left: 0rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .content {\n    margin-left: 0px;\n    width: 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, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  shadow: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n  @Watch('hideHeader')\n  onHideHeaderChange() {\n    this.contextProvider?.emit({\n      hideHeader: this.hideHeader,\n      host: 'basic-navigation',\n    });\n\n    this.breakpoint = applicationLayoutService.breakpoint;\n  }\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   * @example ['sm', 'md']\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  @State() breakpoint: Breakpoint = 'lg';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable: Disposable;\n  private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: this.hideHeader,\n        host: 'basic-navigation',\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\" slot=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div class=\"navigation-content\">\n          <slot name=\"menu\"></slot>\n          <div class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-basic-navigation.js","mappings":";;;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,g1CAAg1C,CAAC;AAC52C,gCAAe,kBAAkB;;MCqBpB,eAAe;;;;;;0BAWL,KAAK;;2BA6BU,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;0BAMpB,IAAI;;IAjCtC,kBAAkB;;QAChB,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC;YACzB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,kBAAkB;SACzB,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;KACvD;IAMD,iBAAiB,CAAC,OAA+B;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,wBAAwB,CAAC,yBAAyB,EAAE,CAAC;YACrD,OAAO;SACR;QAED,wBAAwB,CAAC,0BAA0B,EAAE,CAAC;QACtD,wBAAwB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;KACjD;IAQD,mBAAmB,CAAC,WAAyB;QAC3C,wBAAwB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;KACtD;IAID,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;KAClD;IAKO,cAAc;;QACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;YAC3B,OAAO;SACR;QACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,wBAAwB,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE1D,IAAI,CAAC,eAAe,GAAG,kBAAkB,CACvC,IAAI,CAAC,WAAW,EAChB,wBAAwB,EACxB;YACE,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,kBAAkB;SACzB,CACF,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;YAC9D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;QAEtD,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC9C;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;SAClD;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;KAChC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,kEACO,EAAE,EACZ,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI,CAAC,UAAU;gBAC9B,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI;aACxC,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,IAC/C,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACf,IACtB,IAAI,EACR,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,4DAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACvD,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","src/components/basic-navigation/basic-navigation.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\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  flex-direction: column;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .logo-wrapper {\n    display: contents;\n  }\n\n  .content {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    margin-left: 3.25rem;\n    overflow: auto;\n  }\n\n  .navigation-content {\n    display: flex;\n    position: relative;\n\n    flex-direction: row;\n\n    height: calc(100% - 2.75rem);\n    width: 100%;\n  }\n}\n\n:host(.hide-header) {\n  .navigation-content,\n  .content {\n    height: 100%;\n  }\n}\n\n:host(.breakpoint-lg) {\n  .content {\n    margin-left: 0rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .content {\n    margin-left: 0px;\n    width: 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, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  shadow: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement!: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName?: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n  @Watch('hideHeader')\n  onHideHeaderChange() {\n    this.contextProvider?.emit({\n      hideHeader: this.hideHeader,\n      host: 'basic-navigation',\n    });\n\n    this.breakpoint = applicationLayoutService.breakpoint;\n  }\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   * @example ['sm', 'md']\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  @State() breakpoint: Breakpoint = 'lg';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable?: Disposable;\n  private contextProvider?: ContextProvider<typeof ApplicationLayoutContext>;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: this.hideHeader,\n        host: 'basic-navigation',\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\" slot=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div class=\"navigation-content\">\n          <slot name=\"menu\"></slot>\n          <div class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-card-list.js

@@ -7,7 +7,7 @@ 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: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 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;height:100%}: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) {
@@ -149,20 +149,20 @@ const CardList = /*@__PURE__*/ proxyCustomElement(class CardList extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: '64883990dc81fbb760b407acf886c74ec0d7ec55' }, h(CardListTitle, { key: '3c31997a5f05e8f0a03c384576333b638fb35176', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        return (h(Host, { key: '317a088e7cf0ac2ff01d46fabe293b6dafa55d49' }, h(CardListTitle, { key: '1eb6e1e6c43432737bd9d1718c89539ae9dce42b', 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: '1dce56bb96d98b521968a638ef85bf08239f7c40', class: {
+                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '0c47be401efa5bd5dec00ad948b15d9d46a1a29f', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, h("div", { key: '180f78aea31192e7b93d973640928a68e628a2fd', class: {
+            }, style: this.computeMaskLayer() }, h("div", { key: '32cd8526bf44cef7249b08c8fc68d446ff6962af', 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: 'e8b077edebf94df6b740bf2634549f7a7dd40f17', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: 'a75fd0e0d1a4abd96d00db8bbbe78cc4f9b1c100', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
                 Show__All__Card: true,
             }, onClick: (event) => this.showMoreCardClick.emit({
                 nativeEvent: event,
-            }) }, h("ix-card-content", { class: "Show__All__Card__Content" }, h("ix-icon", { name: 'more-menu', size: '32', class: 'Show__All__Card__Icon' }), h("span", { class: "Show__All__Card__Text" }, this.i18nMoreCards, " (", this.numberOfOverflowingElements, ")")))) : null))));
+            }) }, h("ix-card-content", null, h("div", { class: "Show__All__Card__Content" }, h("ix-icon", { name: 'more-menu', size: '32', class: 'Show__All__Card__Icon' }), h("span", { class: "Show__All__Card__Text" }, this.i18nMoreCards, " (", this.numberOfOverflowingElements, ")"))))) : null))));
     }
     get hostElement() { return this; }
     static get style() { return IxCardListStyle0; }

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

@@ -1 +1 @@
-{"file":"ix-card-list.js","mappings":"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","names":[],"sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.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$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 1rem;\n\n    &__Label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n    flex-shrink: 0;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n  label?: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n  hideShowAll: boolean;\n}) {\n  if (!props.label) {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon={'chevron-down'}\n        onClick={props.onClick}\n        color=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n        {props.label}\n      </ix-typography>\n      {!props.hideShowAll && (\n        <ix-button\n          class=\"CardList__Title__Show__All\"\n          ghost\n          onClick={props.onShowAllClick}\n        >\n          <span>{props.showAllLabel}</span>\n          <span>\n            {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n          </span>\n        </ix-button>\n      )}\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label?: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount?: number;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * Hide the show all button\n   *\n   * @since 2.2.0\n   */\n  @Prop() hideShowAll = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged!: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement!: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer?: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot!.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('d-none');\n          return;\n        }\n        element.classList.remove('d-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot!.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    if (!this.listElement) {\n      return;\n    }\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n          hideShowAll={this.hideShowAll}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content class=\"Show__All__Card__Content\">\n                  <ix-icon\n                    name={'more-menu'}\n                    size={'32'}\n                    class={'Show__All__Card__Icon'}\n                  ></ix-icon>\n                  <span class=\"Show__All__Card__Text\">\n                    {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                  </span>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-card-list.js","mappings":";;;;;;;;;AAAA,MAAM,WAAW,GAAG,s2FAAs2F,CAAC;AAC33F,yBAAe,WAAW;;ACY1B,SAAS,aAAa,CAAC,KAQtB;IACC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;QAChB,OAAO,IAAI,CAAC;KACb;IAED,QACE,WAAK,KAAK,EAAC,gBAAgB,IACzB,sBACE,KAAK,QACL,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE;YACL,uBAAuB,EAAE,IAAI;YAC7B,kCAAkC,EAAE,KAAK,CAAC,WAAW;SACtD,GACe,EAClB,qBAAe,KAAK,EAAC,uBAAuB,EAAC,MAAM,EAAC,SAAS,IAC1D,KAAK,CAAC,KAAK,CACE,EACf,CAAC,KAAK,CAAC,WAAW,KACjB,iBACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,QACL,OAAO,EAAE,KAAK,CAAC,cAAc,IAE7B,gBAAO,KAAK,CAAC,YAAY,CAAQ,EACjC,gBACG,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,KAAK,KAAK,CAAC,cAAc,GAAG,GAAG,IAAI,CAC9D,CACG,CACb,CACG,EACN;AACJ,CAAC;MAUY,QAAQ;;;;;;;;;wBASiB,KAAK;yBAKD,OAAO;+BAOrB,EAAE;;wCAUO,KAAK;2BAOlB,KAAK;2BAKL,UAAU;6BAKR,gCAAgC;sCAuBd,KAAK;2CACA,CAAC;wCACJ,CAAC;kCACP,CAAC;mCACA,CAAC;;IAIhC,0BAA0B;QAChC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC1C;IAEO,cAAc,CAAC,KAAiB;QACtC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC;KACJ;IAEO,eAAe;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CACrD,2BAA2B,CACT,CAAC;QACrB,OAAO,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;KACjD;IAEO,8BAA8B;QACpC,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC7C,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;YACnC,IAAI,OAAO,YAAY,WAAW,EAAE;gBAClC,IAAI,KAAK,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE;oBACpC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;oBAChC,OAAO;iBACR;gBACD,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;aACpC;SACF,CAAC,CAAC;QACH,IAAI,CAAC,sBAAsB,GAAG,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC;QAC1E,IAAI,CAAC,2BAA2B;YAC9B,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC;QAE9C,IAAI,CAAC,wBAAwB,GAAG,aAAa,CAAC,MAAM,CAAC;QACrD,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAEO,uBAAuB;QAC7B,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC;YACrC,IAAI,CAAC,8BAA8B,EAAE,CAAC;SACvC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CACnB,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,oBAAoB,CAAE,EACjE;YACE,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CACF,CAAC;QAEF,qBAAqB,CAAC;YACpB,IAAI,CAAC,8BAA8B,EAAE,CAAC;SACvC,CAAC,CAAC;KACJ;IAEO,oBAAoB;QAC1B,IAAI,IAAI,CAAC,wBAAwB,EAAE;YACjC,OAAO,KAAK,CAAC;SACd;QACD,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE;YAC7D,OAAO,IAAI,CAAC;SACb;KACF;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;KACzE;IAEO,gBAAgB;QACtB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAEO,qBAAqB;QAC3B,QACE,IAAI,CAAC,wBAAwB,KAAK,KAAK,IAAI,IAAI,CAAC,sBAAsB,EACtE;KACH;IAEO,4BAA4B,CAAC,QAAgB;QACnD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAO,CAAC,CAAC;SACV;QAED,IAAI,QAAQ,KAAK,CAAC,EAAE;YAClB,OAAO,CAAC,CAAC;SACV;QAED,IAAI,QAAQ,GAAG,GAAG,EAAE;YAClB,OAAO,CAAC,CAAC;SACV;QAED,OAAO,QAAQ,GAAG,GAAG,CAAC;KACvB;IAEO,gBAAgB;QACtB,MAAM,gBAAgB,GAAG,EAAE,CAAC;QAC5B,MAAM,SAAS,GAAG;;;cAId,gBAAgB;aACf,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CACzE;0BAEE,gBAAgB;aACf,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC;kBAC5D,CAAC;kBACD,CAAC,CACP;;MAEA,CAAC;QACH,OAAO;YACL,yBAAyB,EAAE,SAAS;SACrC,CAAC;KACH;IAGO,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAO;SACR;QACD,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;QAElE,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC;QACrC,IAAI,CAAC,mBAAmB,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW,CAAC;KACnE;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE;YAC/B,IAAI,CAAC,uBAAuB,EAAE,CAAC;SAChC;KACF;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,EAAC,aAAa,qDACZ,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,WAAW,EAC9B,cAAc,EACZ,IAAI,CAAC,YAAY,KAAK,SAAS;kBAC3B,IAAI,CAAC,wBAAwB;kBAC7B,IAAI,CAAC,YAAY,EAEvB,OAAO,EAAE,MAAM,IAAI,CAAC,0BAA0B,EAAE,EAChD,cAAc,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAC7C,WAAW,EAAE,IAAI,CAAC,WAAW,GACd,EACjB,4DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,EACD,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAE9B,4DACE,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI;gBACvB,4BAA4B,EAAE,IAAI,CAAC,QAAQ;gBAC3C,gCAAgC,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO;gBAC5D,iCAAiC,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC/D,EACD,QAAQ,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,IAEvC,6DACE,YAAY,EAAE,MAAM,IAAI,CAAC,8BAA8B,EAAE,GACnD,EACP,IAAI,CAAC,qBAAqB,EAAE,IAC3B,eACE,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI;aACtB,EACD,OAAO,EAAE,CAAC,KAAK,KACb,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBAC1B,WAAW,EAAE,KAAK;aACnB,CAAC,IAGJ,2BACE,WAAK,KAAK,EAAC,0BAA0B,IACnC,eACE,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,uBAAuB,GACrB,EACX,YAAM,KAAK,EAAC,uBAAuB,IAChC,IAAI,CAAC,aAAa,QAAI,IAAI,CAAC,2BAA2B,MAClD,CACH,CACU,CACV,IACR,IAAI,CACJ,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.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$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 1rem;\n\n    &__Label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n    flex-shrink: 0;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n  label?: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n  hideShowAll: boolean;\n}) {\n  if (!props.label) {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon={'chevron-down'}\n        onClick={props.onClick}\n        color=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n        {props.label}\n      </ix-typography>\n      {!props.hideShowAll && (\n        <ix-button\n          class=\"CardList__Title__Show__All\"\n          ghost\n          onClick={props.onShowAllClick}\n        >\n          <span>{props.showAllLabel}</span>\n          <span>\n            {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n          </span>\n        </ix-button>\n      )}\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label?: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount?: number;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * Hide the show all button\n   *\n   * @since 2.2.0\n   */\n  @Prop() hideShowAll = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged!: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement!: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer?: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot!.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('d-none');\n          return;\n        }\n        element.classList.remove('d-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot!.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    if (!this.listElement) {\n      return;\n    }\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n          hideShowAll={this.hideShowAll}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content>\n                  <div class=\"Show__All__Card__Content\">\n                    <ix-icon\n                      name={'more-menu'}\n                      size={'32'}\n                      class={'Show__All__Card__Icon'}\n                    ></ix-icon>\n                    <span class=\"Show__All__Card__Text\">\n                      {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                    </span>\n                  </div>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}