@siemens/ix 2.4.1 → 2.6.0

package/dist/cjs/index.cjs.js

@@ -2,15 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const logicalFilterOperator = require('./logical-filter-operator-5564322e.js');
+const logicalFilterOperator = require('./logical-filter-operator-4917393f.js');
 const flipTileState = require('./flip-tile-state-92223109.js');
 const defaultTreeItem = require('./default-tree-item-309a50cd.js');
 const uploadFileState = require('./upload-file-state-3e9d929d.js');
-const modal = require('./modal-828cb80a.js');
+const modal = require('./modal-a49409aa.js');
 const animation = require('./animation-99234008.js');
+const typedEvent = require('./typed-event-8032c0c0.js');
 const rwd_util = require('./rwd.util-ee53cbd1.js');
-const themeSwitcher = require('./theme-switcher-2d2bde85.js');
-require('./typed-event-8032c0c0.js');
+const themeSwitcher = require('./theme-switcher-88b70d73.js');
+const setup = require('./setup-86b7d543.js');
+require('./index-757233c7.js');
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
@@ -91,6 +93,21 @@ function showModalLoading(message) {
     };
 }
 
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+async function applyPolyfills() {
+    /**
+     * Placeholder to not break existing applications
+     * https://github.com/ionic-team/stencil/issues/5780
+     */
+}
+
 exports.InputState = logicalFilterOperator.InputState;
 Object.defineProperty(exports, 'LogicalFilterOperator', {
     enumerable: true,
@@ -118,11 +135,14 @@ exports.registerFrameworkDelegate = modal.registerFrameworkDelegate;
 exports.resolveDelegate = modal.resolveDelegate;
 exports.showMessage = modal.showMessage;
 exports.showModal = modal.showModal;
+exports.TypedEvent = typedEvent.TypedEvent;
 exports.convertToAbbreviationString = rwd_util.convertToAbbreviationString;
 exports.convertToRemString = rwd_util.convertToRemString;
 exports.getCurrentSystemAppearance = themeSwitcher.getCurrentSystemAppearance;
 exports.themeSwitcher = themeSwitcher.themeSwitcher;
+exports.handlePlatformHelpers = setup.handlePlatformHelpers;
 exports.FilterState = FilterState;
+exports.applyPolyfills = applyPolyfills;
 exports.getToastContainer = getToastContainer;
 exports.setToastPosition = setToastPosition;
 exports.showModalLoading = showModalLoading;

package/dist/cjs/index.cjs.js.map

@@ -1 +1 @@
-{"file":"index.cjs.js","mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;MAUa,WAAW;;;SCYR,iBAAiB;IAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC;IAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;QAC5B,OAAO,CAAC,IAAI,CACV,wEAAwE,CACzE,CAAC;QACF,OAAO,SAAS,CAAC;KAClB;IACD,IAAI,CAAC,SAAS,EAAE;QACd,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAE1C,OAAO,cAAc,CAAC;KACvB;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;SAEe,gBAAgB,CAAC,QAAuB;IACtD,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAChC,CAAC;AAED,SAAS,KAAK,CAAC,MAAmB;IAChC,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,OAAO,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;AACrC,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB;IAC/B,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,MAAM,IACZ,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB;IAChC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,OAAO,IACb,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;IAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;IAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC;;AC9ED;;;;;;;;SAYgB,gBAAgB,CAAC,OAAe;IAC9C,MAAMA,OAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACjDA,OAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;IAEvB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC3D,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;IAC5BA,OAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE3BC,qBAAe,EAAE,CAAC,UAAU,CAACD,OAAK,CAAC,CAAC;IACpCA,OAAK,CAAC,SAAS,EAAE,CAAC;IAElB,OAAO;QACL,MAAM,EAAE,CAAC,IAAY,MAAM,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;QACpD,MAAM,EAAE,CAAC,IAAa,EAAE,UAAkB,GAAG;YAC3C,IAAI,IAAI,KAAK,SAAS,EAAE;gBACtB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;aAC1B;iBAAM;gBACL,OAAO,GAAG,CAAC,CAAC;aACb;YACD,UAAU,CAAC;gBACTA,OAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;gBACvB,UAAU,CACR,YAAY,MAAMC,qBAAe,EAAE,CAAC,UAAU,CAACD,OAAK,CAAC,EACrDE,mBAAS,CAAC,UAAU,CACrB,CAAC;aACH,EAAE,OAAO,CAAC,CAAC;SACb;KACF,CAAC;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["modal","getCoreDelegate","Animation"],"sources":["src/components/category-filter/filter-state.ts","src/components/toast/toast-utils.ts","src/components/utils/modal/loading.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LogicalFilterOperator } from './logical-filter-operator';\nexport class FilterState {\n  public tokens: string[];\n  public categories: {\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }[];\n}\n","/*\n * SPDX-FileCopyrightText: 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 */\nimport { ShowToastResult } from './toast-container';\nexport type ToastType = 'info' | 'success' | 'error' | 'warning';\nexport type ToastPosition = 'bottom-right' | 'top-right';\n\nexport interface ToastConfig {\n  title?: string;\n  message: string | HTMLElement;\n  type?: ToastType;\n  autoClose?: boolean;\n  autoCloseDelay?: number;\n  icon?: string;\n  iconColor?: string;\n}\n\nexport function getToastContainer() {\n  const containerList = Array.from(\n    document.querySelectorAll('ix-toast-container')\n  );\n  const [container] = containerList;\n  if (containerList.length > 1) {\n    console.warn(\n      'Multiple toast containers were found. Only the first one will be used.'\n    );\n    return container;\n  }\n  if (!container) {\n    const toastContainer = document.createElement('ix-toast-container');\n    document.body.appendChild(toastContainer);\n\n    return toastContainer;\n  }\n  return container;\n}\n\nexport function setToastPosition(position: ToastPosition) {\n  const container = getToastContainer();\n  container.position = position;\n}\n\nfunction toast(config: ToastConfig): Promise<ShowToastResult> {\n  const container = getToastContainer();\n  return container.showToast(config);\n}\n\ntoast.info = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'info',\n  });\n};\n\ntoast.error = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'error',\n  });\n};\n\ntoast.success = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'success',\n  });\n};\n\ntoast.warning = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'warning',\n  });\n};\n\nexport { toast };\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport Animation from '../animation';\nimport { getCoreDelegate } from '../delegate';\n\nexport function showModalLoading(message: string) {\n  const modal = document.createElement('ix-modal');\n  modal.keyboard = false;\n\n  const loading = document.createElement('ix-modal-loading');\n  loading.innerText = message;\n  modal.appendChild(loading);\n\n  getCoreDelegate().attachView(modal);\n  modal.showModal();\n\n  return {\n    update: (text: string) => (loading.innerHTML = text),\n    finish: (text?: string, timeout: number = 250) => {\n      if (text !== undefined) {\n        loading.innerText = text;\n      } else {\n        timeout = 0;\n      }\n      setTimeout(() => {\n        modal.closeModal(null);\n        setTimeout(\n          async () => await getCoreDelegate().removeView(modal),\n          Animation.mediumTime\n        );\n      }, timeout);\n    },\n  };\n}\n"],"version":3}
+{"file":"index.cjs.js","mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;MAUa,WAAW;;;SCYR,iBAAiB;IAC/B,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC;IAClC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;QAC5B,OAAO,CAAC,IAAI,CACV,wEAAwE,CACzE,CAAC;QACF,OAAO,SAAS,CAAC;KAClB;IACD,IAAI,CAAC,SAAS,EAAE;QACd,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAE1C,OAAO,cAAc,CAAC;KACvB;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;SAEe,gBAAgB,CAAC,QAAuB;IACtD,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAChC,CAAC;AAED,SAAS,KAAK,CAAC,MAAmB;IAChC,MAAM,SAAS,GAAG,iBAAiB,EAAE,CAAC;IACtC,OAAO,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;AACrC,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,MAAmB;IAC/B,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,MAAM,IACZ,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,KAAK,GAAG,CAAC,MAAmB;IAChC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,OAAO,IACb,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;IAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC,CAAC;AAEF,KAAK,CAAC,OAAO,GAAG,CAAC,MAAmB;IAClC,OAAO,KAAK,iCACP,MAAM,KACT,IAAI,EAAE,SAAS,IACf,CAAC;AACL,CAAC;;AC9ED;;;;;;;;SAYgB,gBAAgB,CAAC,OAAe;IAC9C,MAAMA,OAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACjDA,OAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;IAEvB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC3D,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;IAC5BA,OAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE3BC,qBAAe,EAAE,CAAC,UAAU,CAACD,OAAK,CAAC,CAAC;IACpCA,OAAK,CAAC,SAAS,EAAE,CAAC;IAElB,OAAO;QACL,MAAM,EAAE,CAAC,IAAY,MAAM,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;QACpD,MAAM,EAAE,CAAC,IAAa,EAAE,UAAkB,GAAG;YAC3C,IAAI,IAAI,KAAK,SAAS,EAAE;gBACtB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;aAC1B;iBAAM;gBACL,OAAO,GAAG,CAAC,CAAC;aACb;YACD,UAAU,CAAC;gBACTA,OAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;gBACvB,UAAU,CACR,YAAY,MAAMC,qBAAe,EAAE,CAAC,UAAU,CAACD,OAAK,CAAC,EACrDE,mBAAS,CAAC,UAAU,CACrB,CAAC;aACH,EAAE,OAAO,CAAC,CAAC;SACb;KACF,CAAC;AACJ;;ACxCA;;;;;;;;AA6BO,eAAe,cAAc;;;;;AAKpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["modal","getCoreDelegate","Animation"],"sources":["src/components/category-filter/filter-state.ts","src/components/toast/toast-utils.ts","src/components/utils/modal/loading.ts","src/index.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LogicalFilterOperator } from './logical-filter-operator';\nexport class FilterState {\n  public tokens: string[];\n  public categories: {\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }[];\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { ShowToastResult } from './toast-container';\nexport type ToastType = 'info' | 'success' | 'error' | 'warning';\nexport type ToastPosition = 'bottom-right' | 'top-right';\n\nexport interface ToastConfig {\n  title?: string;\n  message: string | HTMLElement;\n  type?: ToastType;\n  autoClose?: boolean;\n  autoCloseDelay?: number;\n  icon?: string;\n  iconColor?: string;\n}\n\nexport function getToastContainer() {\n  const containerList = Array.from(\n    document.querySelectorAll('ix-toast-container')\n  );\n  const [container] = containerList;\n  if (containerList.length > 1) {\n    console.warn(\n      'Multiple toast containers were found. Only the first one will be used.'\n    );\n    return container;\n  }\n  if (!container) {\n    const toastContainer = document.createElement('ix-toast-container');\n    document.body.appendChild(toastContainer);\n\n    return toastContainer;\n  }\n  return container;\n}\n\nexport function setToastPosition(position: ToastPosition) {\n  const container = getToastContainer();\n  container.position = position;\n}\n\nfunction toast(config: ToastConfig): Promise<ShowToastResult> {\n  const container = getToastContainer();\n  return container.showToast(config);\n}\n\ntoast.info = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'info',\n  });\n};\n\ntoast.error = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'error',\n  });\n};\n\ntoast.success = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'success',\n  });\n};\n\ntoast.warning = (config: ToastConfig) => {\n  return toast({\n    ...config,\n    type: 'warning',\n  });\n};\n\nexport { toast };\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport Animation from '../animation';\nimport { getCoreDelegate } from '../delegate';\n\nexport function showModalLoading(message: string) {\n  const modal = document.createElement('ix-modal');\n  modal.keyboard = false;\n\n  const loading = document.createElement('ix-modal-loading');\n  loading.innerText = message;\n  modal.appendChild(loading);\n\n  getCoreDelegate().attachView(modal);\n  modal.showModal();\n\n  return {\n    update: (text: string) => (loading.innerHTML = text),\n    finish: (text?: string, timeout: number = 250) => {\n      if (text !== undefined) {\n        loading.innerText = text;\n      } else {\n        timeout = 0;\n      }\n      setTimeout(() => {\n        modal.closeModal(null);\n        setTimeout(\n          async () => await getCoreDelegate().removeView(modal),\n          Animation.mediumTime\n        );\n      }, timeout);\n    },\n  };\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport * from './components/category-filter/filter-state';\nexport * from './components/category-filter/input-state';\nexport * from './components/category-filter/logical-filter-operator';\nexport { FlipTileState } from './components/flip-tile/flip-tile-state';\nexport * from './components/toast/toast-utils';\nexport * from './components/tree-item/default-tree-item';\nexport * from './components/tree/tree-model';\nexport * from './components/upload/upload-file-state';\nexport * from './components/utils/delegate';\nexport { ElementReference } from './components/utils/element-reference';\nexport * from './components/utils/modal';\nexport * from './components/utils/typed-event';\nexport { NotificationColor } from './components/utils/notification-color';\nexport {\n  convertToAbbreviationString,\n  convertToRemString,\n} from './components/utils/rwd.util';\nexport * from './components/utils/theme-switcher';\nexport { handlePlatformHelpers, IxConfig } from './setup';\n\nexport async function applyPolyfills() {\n  /**\n   * Placeholder to not break existing applications\n   * https://github.com/ionic-team/stencil/issues/5780\n   */\n}\n"],"version":3}

package/dist/cjs/input.util-1c2fa43d.js

@@ -0,0 +1,192 @@
+'use strict';
+
+const index = require('./index-757233c7.js');
+const a11y = require('./a11y-ae470f01.js');
+const validation = require('./validation-1e3dd5ee.js');
+const rwd_util = require('./rwd.util-ee53cbd1.js');
+const anime_es = require('./anime.es-e2814360.js');
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function TextareaElement(props) {
+    return (index.h("textarea", Object.assign({ readOnly: props.readonly, disabled: props.disabled, maxLength: props.maxLength, minLength: props.minLength, cols: props.textareaCols, rows: props.textareaRows, ref: props.textAreaRef, class: {
+            'is-invalid': props.isInvalid,
+        }, required: props.required, value: props.value, placeholder: props.placeholder, onChange: (changeEvent) => {
+            const target = changeEvent.target;
+            props.valueChange(target.value);
+        }, onInput: (inputEvent) => {
+            const target = inputEvent.target;
+            props.updateFormInternalValue(target.value);
+        }, onBlur: () => props.onBlur(), style: {
+            resize: props.resizeBehavior,
+            height: props.textareaHeight,
+            width: props.textareaWidth,
+        } }, props.ariaAttributes)));
+}
+function InputElement(props) {
+    return (index.h("input", Object.assign({ id: props.id, autoComplete: "off", readOnly: props.readonly, disabled: props.disabled, min: props.min, max: props.max, maxLength: props.maxLength ? Number(props.maxLength) : undefined, minLength: props.maxLength ? Number(props.minLength) : undefined, ref: props.inputRef, pattern: props.pattern, type: props.type, class: {
+            'is-invalid': props.isInvalid,
+        }, required: props.required, value: props.value, placeholder: props.placeholder, onKeyPress: (event) => props.onKeyPress(event), onChange: (changeEvent) => {
+            const target = changeEvent.target;
+            props.valueChange(target.value);
+        }, onInput: (inputEvent) => {
+            const target = inputEvent.target;
+            props.updateFormInternalValue(target.value);
+        }, onBlur: () => props.onBlur() }, props.ariaAttributes)));
+}
+const SlotEnd = (props, children) => {
+    return (index.h("div", { class: "end-container", ref: props.slotEndRef },
+        index.h("slot", { name: "end", onSlotchange: props.onSlotChange }),
+        children));
+};
+const SlotStart = (props) => {
+    return (index.h("div", { class: "start-container", ref: props.slotStartRef },
+        index.h("slot", { name: "start", onSlotchange: props.onSlotChange })));
+};
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function shakeInput(input) {
+    const xMax = 5;
+    anime_es.anime({
+        targets: input,
+        duration: 200,
+        easing: 'easeInOutSine',
+        loop: 2,
+        translateX: [
+            {
+                value: xMax * -1,
+            },
+            {
+                value: xMax,
+            },
+            {
+                value: xMax / -2,
+            },
+            {
+                value: xMax / 2,
+            },
+            {
+                value: 0,
+            },
+        ],
+    });
+}
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function mapValidationResult(ref, result) {
+    ref.isInvalid = result.isInvalid || result.isInvalidByRequired;
+    ref.isValid = result.isValid;
+    ref.isInfo = result.isInfo;
+    ref.isWarning = result.isWarning;
+}
+function checkAllowedKeys(comp, event) {
+    if (comp.allowedCharactersPattern) {
+        const regex = new RegExp(comp.allowedCharactersPattern);
+        if (!regex.test(event.key)) {
+            event.preventDefault();
+            shakeInput(comp.inputRef.current);
+        }
+    }
+}
+async function checkInternalValidity(comp, input) {
+    const validityState = input.validity;
+    const eventResult = comp.validityStateChange.emit(validityState);
+    if (eventResult.defaultPrevented) {
+        return;
+    }
+    if (!comp.value) {
+        return;
+    }
+    const skipValidation = await validation.shouldSuppressInternalValidation(comp);
+    if (skipValidation) {
+        return;
+    }
+    const { valid } = validityState;
+    comp.hostElement.classList.toggle('ix-invalid', !valid);
+}
+function onInputBlur(comp, input) {
+    comp.ixBlur.emit();
+    if (!input) {
+        throw new Error('Input element is not available');
+    }
+    checkInternalValidity(comp, input);
+}
+function applyPaddingEnd(inputElement, width, options) {
+    var _a;
+    if (!inputElement) {
+        return;
+    }
+    const remInPixels = 16;
+    const padding = rwd_util.convertToRemString(width + remInPixels / 2);
+    if (options.slotEnd) {
+        inputElement.style.paddingRight = `calc(${padding} + ${(_a = options.additionalPaddingRight) !== null && _a !== void 0 ? _a : '0rem'})`;
+    }
+    else {
+        inputElement.style.paddingLeft = padding;
+    }
+}
+function adjustPaddingForStartAndEnd(startElement, endElement, inputElement) {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            if (startElement) {
+                const startBoundingRect = startElement.getBoundingClientRect();
+                if (startBoundingRect) {
+                    applyPaddingEnd(inputElement, startBoundingRect.width, {
+                        slotEnd: false,
+                    });
+                }
+            }
+            if (endElement) {
+                const endBoundingRect = endElement.getBoundingClientRect();
+                if (endBoundingRect) {
+                    applyPaddingEnd(inputElement, endBoundingRect.width, {
+                        slotEnd: true,
+                    });
+                }
+            }
+        });
+    });
+}
+function getAriaAttributesForInput(component) {
+    const inputAria = {
+        'aria-invalid': `${a11y.a11yBoolean(component.isInvalid)}`,
+        'aria-required': `${a11y.a11yBoolean(component.required)}`,
+    };
+    if (component.isInvalid && component.invalidText) {
+        inputAria['aria-errormessage'] = component.invalidText;
+    }
+    return inputAria;
+}
+
+exports.InputElement = InputElement;
+exports.SlotEnd = SlotEnd;
+exports.SlotStart = SlotStart;
+exports.TextareaElement = TextareaElement;
+exports.adjustPaddingForStartAndEnd = adjustPaddingForStartAndEnd;
+exports.checkAllowedKeys = checkAllowedKeys;
+exports.checkInternalValidity = checkInternalValidity;
+exports.getAriaAttributesForInput = getAriaAttributesForInput;
+exports.mapValidationResult = mapValidationResult;
+exports.onInputBlur = onInputBlur;
+
+//# sourceMappingURL=input.util-1c2fa43d.js.map

package/dist/cjs/input.util-1c2fa43d.js.map

@@ -0,0 +1 @@
+{"file":"input.util-1c2fa43d.js","mappings":"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","names":["h","anime","shouldSuppressInternalValidation","convertToRemString","a11yBoolean"],"sources":["src/components/input/input.fc.tsx","src/components/input/input.animation.ts","src/components/input/input.util.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { h, FunctionalComponent } from '@stencil/core';\nimport { MakeRef } from '../utils/make-ref';\nimport { A11yAttributes } from '../utils/a11y';\n\nexport function TextareaElement(props: {\n  resizeBehavior: 'both' | 'horizontal' | 'vertical' | 'none';\n  textareaHeight?: string;\n  textareaWidth?: string;\n  textareaRows?: number;\n  textareaCols?: number;\n  disabled: boolean;\n  readonly: boolean;\n  maxLength?: number;\n  minLength?: number;\n  isInvalid: boolean;\n  required: boolean;\n  value: string;\n  placeholder?: string;\n  textAreaRef: (el: HTMLTextAreaElement | undefined) => void;\n  valueChange: (value: string) => void;\n  updateFormInternalValue: (value: string) => void;\n  onBlur: () => void;\n  ariaAttributes?: A11yAttributes;\n}) {\n  return (\n    <textarea\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      maxLength={props.maxLength}\n      minLength={props.minLength}\n      cols={props.textareaCols}\n      rows={props.textareaRows}\n      ref={props.textAreaRef}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onChange={(changeEvent) => {\n        const target = changeEvent.target as HTMLInputElement;\n        props.valueChange(target.value);\n      }}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      style={{\n        resize: props.resizeBehavior,\n        height: props.textareaHeight,\n        width: props.textareaWidth,\n      }}\n      {...props.ariaAttributes}\n    ></textarea>\n  );\n}\n\nexport function InputElement(props: {\n  id: string;\n  disabled: boolean;\n  readonly: boolean;\n  maxLength?: string | number;\n  minLength?: string | number;\n  max?: string | number;\n  min?: string | number;\n  pattern?: string;\n  type: string;\n  isInvalid: boolean;\n  required: boolean;\n  value: string | number;\n  placeholder?: string;\n  inputRef: (el: HTMLInputElement | undefined) => void;\n  onKeyPress: (event: KeyboardEvent) => void;\n  valueChange: (value: string) => void;\n  updateFormInternalValue: (value: string) => void;\n  onBlur: () => void;\n  ariaAttributes?: A11yAttributes;\n}) {\n  return (\n    <input\n      id={props.id}\n      autoComplete=\"off\"\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      min={props.min}\n      max={props.max}\n      maxLength={props.maxLength ? Number(props.maxLength) : undefined}\n      minLength={props.maxLength ? Number(props.minLength) : undefined}\n      ref={props.inputRef}\n      pattern={props.pattern}\n      type={props.type}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onKeyPress={(event) => props.onKeyPress(event)}\n      onChange={(changeEvent) => {\n        const target = changeEvent.target as HTMLInputElement;\n        props.valueChange(target.value);\n      }}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      {...props.ariaAttributes}\n    ></input>\n  );\n}\n\nexport const SlotEnd: FunctionalComponent<{\n  slotEndRef: MakeRef<HTMLDivElement>;\n  onSlotChange?: (e: Event) => void;\n}> = (props, children) => {\n  return (\n    <div class=\"end-container\" ref={props.slotEndRef}>\n      <slot name=\"end\" onSlotchange={props.onSlotChange}></slot>\n      {children}\n    </div>\n  );\n};\n\nexport const SlotStart: FunctionalComponent<{\n  slotStartRef: MakeRef<HTMLDivElement>;\n  onSlotChange?: (e: Event) => void;\n}> = (props) => {\n  return (\n    <div class=\"start-container\" ref={props.slotStartRef}>\n      <slot name=\"start\" onSlotchange={props.onSlotChange}></slot>\n    </div>\n  );\n};\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport anime from 'animejs';\n\nexport function shakeInput(input: HTMLInputElement) {\n  const xMax = 5;\n  anime({\n    targets: input,\n    duration: 200,\n    easing: 'easeInOutSine',\n    loop: 2,\n    translateX: [\n      {\n        value: xMax * -1,\n      },\n      {\n        value: xMax,\n      },\n      {\n        value: xMax / -2,\n      },\n      {\n        value: xMax / 2,\n      },\n      {\n        value: 0,\n      },\n    ],\n  });\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { A11yAttributes, a11yBoolean } from '../utils/a11y';\nimport {\n  IxFormComponent,\n  IxInputFieldComponent,\n  ValidationResults,\n  shouldSuppressInternalValidation,\n} from '../utils/input';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { generateUUID } from '../utils/uuid';\nimport { shakeInput } from './input.animation';\n\nexport function createIdIfNotExists(\n  element: IxFormComponent,\n  idPrefix: string = 'input'\n) {\n  return element.hasAttribute('id')\n    ? element.getAttribute('id')\n    : `${idPrefix}-${generateUUID()}`;\n}\n\nexport function mapValidationResult<T>(\n  ref: IxInputFieldComponent<T>,\n  result: ValidationResults\n) {\n  ref.isInvalid = result.isInvalid || result.isInvalidByRequired;\n  ref.isValid = result.isValid;\n  ref.isInfo = result.isInfo;\n  ref.isWarning = result.isWarning;\n}\n\nexport function checkAllowedKeys<T>(\n  comp: IxInputFieldComponent<T>,\n  event: KeyboardEvent\n) {\n  if (comp.allowedCharactersPattern) {\n    const regex = new RegExp(comp.allowedCharactersPattern);\n    if (!regex.test(event.key)) {\n      event.preventDefault();\n      shakeInput(comp.inputRef.current);\n    }\n  }\n}\n\nexport async function checkInternalValidity<T>(\n  comp: IxFormComponent<T>,\n  input: HTMLInputElement | HTMLTextAreaElement\n) {\n  const validityState = input.validity;\n\n  const eventResult = comp.validityStateChange.emit(validityState);\n\n  if (eventResult.defaultPrevented) {\n    return;\n  }\n\n  if (!comp.value) {\n    return;\n  }\n\n  const skipValidation = await shouldSuppressInternalValidation(comp);\n  if (skipValidation) {\n    return;\n  }\n\n  const { valid } = validityState;\n  comp.hostElement.classList.toggle('ix-invalid', !valid);\n}\n\nexport function onInputBlur<T>(\n  comp: IxInputFieldComponent<T>,\n  input?: HTMLInputElement | HTMLTextAreaElement | null\n) {\n  comp.ixBlur.emit();\n\n  if (!input) {\n    throw new Error('Input element is not available');\n  }\n  checkInternalValidity(comp, input);\n}\n\nexport function applyPaddingEnd(\n  inputElement: HTMLElement | null,\n  width: number,\n  options: {\n    slotEnd: boolean;\n    additionalPaddingRight?: string;\n  }\n) {\n  if (!inputElement) {\n    return;\n  }\n\n  const remInPixels = 16;\n  const padding = convertToRemString(width + remInPixels / 2);\n\n  if (options.slotEnd) {\n    inputElement.style.paddingRight = `calc(${padding} + ${\n      options.additionalPaddingRight ?? '0rem'\n    })`;\n  } else {\n    inputElement.style.paddingLeft = padding;\n  }\n}\n\nexport function adjustPaddingForStartAndEnd(\n  startElement: HTMLElement | null,\n  endElement: HTMLElement | null,\n  inputElement: HTMLElement | null\n) {\n  requestAnimationFrame(() => {\n    requestAnimationFrame(() => {\n      if (startElement) {\n        const startBoundingRect = startElement.getBoundingClientRect();\n        if (startBoundingRect) {\n          applyPaddingEnd(inputElement, startBoundingRect.width, {\n            slotEnd: false,\n          });\n        }\n      }\n\n      if (endElement) {\n        const endBoundingRect = endElement.getBoundingClientRect();\n        if (endBoundingRect) {\n          applyPaddingEnd(inputElement, endBoundingRect.width, {\n            slotEnd: true,\n          });\n        }\n      }\n    });\n  });\n}\n\nexport function getAriaAttributesForInput(\n  component: IxInputFieldComponent\n): A11yAttributes {\n  const inputAria: A11yAttributes = {\n    'aria-invalid': `${a11yBoolean(component.isInvalid)}`,\n    'aria-required': `${a11yBoolean(component.required)}`,\n  };\n\n  if (component.isInvalid && component.invalidText) {\n    inputAria['aria-errormessage'] = component.invalidText;\n  }\n  return inputAria;\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-529f21c1.js');
+const index = require('./index-757233c7.js');
 
 const actionCardCss = ":host{display:block;position:relative;min-width:13.375rem;width:13.375rem;height:7.5rem;min-height:7.5rem;cursor:pointer;margin:0.25rem 0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-card{width:100%;height:100%}";
 const IxActionCardStyle0 = actionCardCss;
@@ -26,7 +26,7 @@ const IxActionCard = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f83abb076a856034694fa17014a31c511508ac84' }, index.h("ix-card", { key: 'e21ebb1bc1e27db30872b8c144001ea338c89ce2', selected: this.selected, variant: this.variant, class: 'pointer' }, index.h("ix-card-content", { key: '6074ffb241993674c9b636d2b43c8cf0b76d3437' }, this.icon ? (index.h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, index.h("div", { key: 'ee7c10340f5dd87d397f013de5879caddb37ca5d' }, this.heading ? (index.h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (index.h("ix-typography", { format: "h5", color: this.getSubheadingColor() }, this.subheading)) : null, index.h("slot", { key: '5ba86a041964d413a2f7ff7d323905ba9880543e' }))))));
+        return (index.h(index.Host, { key: '71cb83edc3e9e57a2f8a73e41e819b74e7ce0669' }, index.h("ix-card", { key: '71d1eb80d2ea03862547845d3cfaae96137d7e77', selected: this.selected, variant: this.variant, class: 'pointer' }, index.h("ix-card-content", { key: 'f615c68c98ddfd6447bc19b3b3a27008243c909a' }, this.icon ? (index.h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, index.h("div", { key: 'b037e8ff7d345f00178c0fb0385e02e4e8738891' }, this.heading ? (index.h("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (index.h("ix-typography", { format: "h5", color: this.getSubheadingColor() }, this.subheading)) : null, index.h("slot", { key: 'b4a4fa2b7149d3ac4b95670f233795c29f25b966' }))))));
     }
 };
 IxActionCard.style = IxActionCardStyle0;

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

@@ -1 +1 @@
-{"file":"ix-action-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,y6BAAy6B,CAAC;AACh8B,2BAAe,aAAa;;MCsBf,YAAY;;;uBAIc,SAAS;oBAKX,SAAS;;;wBAezB,KAAK;;IAEhB,kBAAkB;QACxB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS,CAAC;YACf,KAAK,cAAc;gBACjB,OAAO,MAAM,CAAC;YAEhB;gBACE,OAAO,SAAS,CAAC;SACpB;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,sEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,SAAS,IAEhBA,gFACG,IAAI,CAAC,IAAI,IACRA,qBAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACRA,oEACG,IAAI,CAAC,OAAO,IACXA,2BAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,IACvD,IAAI,EACP,IAAI,CAAC,UAAU,IACdA,2BAAe,MAAM,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,IACxD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACRA,oEAAa,CACT,CACU,CACV,CACL,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/action-card/action-card.scss?tag=ix-action-card&encapsulation=shadow","src/components/action-card/action-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  min-width: 13.375rem;\n  width: 13.375rem;\n  height: 7.5rem;\n  min-height: 7.5rem;\n  cursor: pointer;\n\n  margin: 0.25rem 0;\n\n  ix-card {\n    width: 100%;\n    height: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\nimport { TypographyColors } from '../typography/typography';\n\nexport type ActionCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-action-card',\n  styleUrl: 'action-card.scss',\n  shadow: true,\n})\nexport class IxActionCard {\n  /**\n   * Card variant\n   */\n  @Prop() variant: ActionCardVariant = 'insight';\n\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading: string;\n\n  /**\n   * Card selection\n   */\n  @Prop() selected = false;\n\n  private getSubheadingColor(): TypographyColors {\n    switch (this.variant) {\n      case 'insight':\n      case 'notification':\n        return 'soft';\n\n      default:\n        return undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-card\n          selected={this.selected}\n          variant={this.variant}\n          class={'pointer'}\n        >\n          <ix-card-content>\n            {this.icon ? (\n              <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n            ) : null}\n            <div>\n              {this.heading ? (\n                <ix-typography format=\"h4\">{this.heading}</ix-typography>\n              ) : null}\n              {this.subheading ? (\n                <ix-typography format=\"h5\" color={this.getSubheadingColor()}>\n                  {this.subheading}\n                </ix-typography>\n              ) : null}\n              <slot></slot>\n            </div>\n          </ix-card-content>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-action-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,y6BAAy6B,CAAC;AACh8B,2BAAe,aAAa;;MCsBf,YAAY;;;uBAKc,SAAS;oBAKX,SAAS;;;wBAezB,KAAK;;IAEhB,kBAAkB;QACxB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS,CAAC;YACf,KAAK,cAAc;gBACjB,OAAO,MAAM,CAAC;YAEhB;gBACE,OAAO,SAAS,CAAC;SACpB;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,sEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,SAAS,IAEhBA,gFACG,IAAI,CAAC,IAAI,IACRA,qBAAS,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,IAC3D,IAAI,EACRA,oEACG,IAAI,CAAC,OAAO,IACXA,2BAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,IACvD,IAAI,EACP,IAAI,CAAC,UAAU,IACdA,2BAAe,MAAM,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,IACxD,IAAI,CAAC,UAAU,CACF,IACd,IAAI,EACRA,oEAAa,CACT,CACU,CACV,CACL,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/action-card/action-card.scss?tag=ix-action-card&encapsulation=shadow","src/components/action-card/action-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  min-width: 13.375rem;\n  width: 13.375rem;\n  height: 7.5rem;\n  min-height: 7.5rem;\n  cursor: pointer;\n\n  margin: 0.25rem 0;\n\n  ix-card {\n    width: 100%;\n    height: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\nimport { TypographyColors } from '../typography/typography';\n\nexport type ActionCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-action-card',\n  styleUrl: 'action-card.scss',\n  shadow: true,\n})\nexport class IxActionCard {\n  /**\n   * Card variant\n   * @deprecated variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead.\n   */\n  @Prop() variant: ActionCardVariant = 'insight';\n\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Card selection\n   */\n  @Prop() selected = false;\n\n  private getSubheadingColor(): TypographyColors | undefined {\n    switch (this.variant) {\n      case 'insight':\n      case 'notification':\n        return 'soft';\n\n      default:\n        return undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-card\n          selected={this.selected}\n          variant={this.variant}\n          class={'pointer'}\n        >\n          <ix-card-content>\n            {this.icon ? (\n              <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n            ) : null}\n            <div>\n              {this.heading ? (\n                <ix-typography format=\"h4\">{this.heading}</ix-typography>\n              ) : null}\n              {this.subheading ? (\n                <ix-typography format=\"h5\" color={this.getSubheadingColor()}>\n                  {this.subheading}\n                </ix-typography>\n              ) : null}\n              <slot></slot>\n            </div>\n          </ix-card-content>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,24 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-529f21c1.js');
-const index$1 = require('./index-c4629a8d.js');
+const index = require('./index-757233c7.js');
+const index$1 = require('./index-74904d8b.js');
 const service = require('./service-39a8e5fe.js');
-const context = require('./context-98f4a0b3.js');
+const context = require('./context-6644f454.js');
 const menuService = require('./menu-service-9936f670.js');
-const shadowDom = require('./shadow-dom-73f9d553.js');
+const shadowDom = require('./shadow-dom-454acc38.js');
 require('./animation-99234008.js');
-require('./modal-828cb80a.js');
+require('./modal-a49409aa.js');
 require('./typed-event-8032c0c0.js');
 require('./breakpoints-5d1583fb.js');
 
-const applicationHeaderCss = ":host{display:flex;align-items:center;position:relative;width:100%;height:2.75rem;min-height:2.75rem;padding:0 1rem 0 0.625rem;color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);z-index:var(--theme-z-index-fixed)}: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 .app-switch{margin-right:1rem}:host .name{overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:nowrap;max-width:50%;margin-left:1.5rem;margin-right:2.5rem;color:var(--theme-app-header--color)}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color);margin-left:0.375rem}:host .content{display:flex;position:relative;flex-direction:row;margin-left:auto;margin-right:0px}:host .dropdown{overflow:visible}:host .dropdown-content{padding:1rem}:host .context-menu{display:none}:host .context-menu.context-menu-visible{display:block}@media only screen and (max-width: 48em){:host .logo{display:none}}:host ::slotted(ix-avatar){margin-left:1rem}:host(.breakpoint-sm){padding-left:0.625rem}:host(.breakpoint-sm) .logo{margin-left:0.5rem}";
+const applicationHeaderCss = ":host{display:flex;align-items:flex-end;flex-wrap:nowrap;position:relative;width:100%;height:calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));min-height:calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));padding-top:0;padding-right:calc(1rem + var(--ix-safe-area-inset-right, 0rem));padding-bottom:0.3rem;padding-left:calc(0.625rem + var(--ix-safe-area-inset-left, 0rem));color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);z-index:var(--theme-z-index-fixed)}: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 .app-switch{margin-right:1rem}:host .name{overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:nowrap;max-width:50%;margin-left:1.5rem;margin-right:2.5rem;margin-bottom:0.25rem;color:var(--theme-app-header--color)}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color);margin-left:0.375rem}:host .content{display:flex;position:relative;flex-direction:row;margin-left:auto;margin-right:0px}:host .dropdown{overflow:visible}:host .dropdown-content{padding:1rem}:host .context-menu{display:none}:host .context-menu.context-menu-visible{display:block}@media only screen and (max-width: 48em){:host .logo{display:none}}:host ::slotted(ix-avatar){margin-left:1rem}:host(.breakpoint-sm) .logo{margin-left:0.5rem}";
 const IxApplicationHeaderStyle0 = applicationHeaderCss;
 
 const ApplicationHeader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.menuToggle = index.createEvent(this, "menuToggle", 7);
         this.name = undefined;
+        this.showMenu = false;
         this.breakpoint = 'lg';
         this.menuExpanded = false;
         this.suppressResponsive = false;
@@ -45,7 +47,6 @@ const ApplicationHeader = class {
         });
         this.modeDisposable = service.applicationLayoutService.onChange.on((mode) => {
             if (this.suppressResponsive) {
-                this.breakpoint = 'md';
                 return;
             }
             this.breakpoint = mode;
@@ -60,6 +61,14 @@ const ApplicationHeader = class {
         (_a = this.menuDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
         (_b = this.modeDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
     }
+    watchApplicationLayoutContext() {
+        if (this.applicationLayoutContext) {
+            this.showMenu = false;
+        }
+    }
+    watchSuppressResponsive() {
+        this.breakpoint = 'md';
+    }
     isLogoSlotted() {
         const slotElement = this.hostElement.shadowRoot.querySelector('slot[name="logo"]');
         const nodes = slotElement.assignedNodes({
@@ -77,7 +86,13 @@ const ApplicationHeader = class {
         }
     }
     async onMenuClick() {
-        menuService.menuController.toggle();
+        if (this.applicationLayoutContext) {
+            menuService.menuController.toggle();
+        }
+        else {
+            this.menuExpanded = !this.menuExpanded;
+        }
+        this.menuToggle.emit(this.menuExpanded);
     }
     resolveContextMenuButton() {
         return new Promise((resolve) => index.readTask(() => resolve(this.hostElement.shadowRoot.querySelector('[data-context-menu]'))));
@@ -104,14 +119,25 @@ const ApplicationHeader = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'daa15d8fe5e43669a666ff21fa8ec64bfbbf9f74', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (index.h("ix-menu-expand-icon", { key: 'd933cf1ad8cac41c0633cff21029caf9bbcdfd2c', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
+        const hasApplicationContextAvailable = !!this.applicationLayoutContext;
+        const showMenuByApplicationFrame = this.breakpoint === 'sm' &&
+            this.suppressResponsive === false &&
+            hasApplicationContextAvailable;
+        const showApplicationSwitch = ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
             this.breakpoint !== 'sm' &&
-            this.suppressResponsive === false && (index.h("ix-icon-button", { key: 'e229c4af7e86153052d5bd30306c833433ccff8f', onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), index.h("div", { key: '2abd4e6983d4102448c8636952cec2acb869dd12', class: "logo" }, index.h("slot", { key: 'a927c764166256416a9d5d6a64310b54f6aa4ed5', name: "logo" })), index.h("ix-typography", { key: '6443801e36e42c2ae6c48a0efd7b0252d40c1a9e', format: "body-lg", class: "name" }, this.name), index.h("div", { key: '2f1f3681f79bc2a330d8d95deaecc65f855f1434', class: "content" }, this.breakpoint === 'sm' ? (index.h(index.Fragment, null, index.h("ix-icon-button", { class: {
+            this.suppressResponsive === false;
+        return (index.h(index.Host, { key: '1f987dd8ac407207a23ac0821945ba9ad3d47e87', class: {
+                [`breakpoint-${this.breakpoint}`]: true,
+            }, slot: "application-header" }, (this.showMenu || showMenuByApplicationFrame) && (index.h("ix-menu-expand-icon", { key: '60c7aa44d2b294fff9cb51ecaf291d70a33bafbd', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (index.h("ix-icon-button", { key: 'e500c3a98790345840633b8dd0f056fac198f802', onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), index.h("div", { key: 'adba1c9a08be32a07f31a60d42159f996d26a87b', class: { logo: true } }, index.h("slot", { key: '3848321805f42653d8a9c066c8f237c8ec3497bb', name: "logo" })), index.h("ix-typography", { key: '9c312426ee3c2554a9a66aff6b158d36969cefea', format: "body-lg", class: "name" }, this.name), index.h("div", { key: '319969ceeb812f9b18b5ad3f374e16f454c6daf2', class: "content" }, this.breakpoint === 'sm' ? (index.h(index.Fragment, null, index.h("ix-icon-button", { class: {
                 ['context-menu']: true,
                 ['context-menu-visible']: this.hasSlottedElements,
-            }, "data-context-menu": true, icon: "more-menu", ghost: true }), index.h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, index.h("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, index.h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (index.h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), index.h("slot", { key: '260364bf65695be4bf64e80c09d76c96fce192ed', name: "ix-application-header-avatar" }))));
+            }, "data-context-menu": true, icon: "more-menu", ghost: true }), index.h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, index.h("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, index.h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (index.h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), index.h("slot", { key: 'dd03dd49866605c06d6daf09d2ee72692666ee68', name: "ix-application-header-avatar" }))));
     }
     get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "applicationLayoutContext": ["watchApplicationLayoutContext"],
+        "suppressResponsive": ["watchSuppressResponsive"]
+    }; }
 };
 ApplicationHeader.style = IxApplicationHeaderStyle0;
 

package/dist/cjs/ix-application-header.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-application-header.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,26DAA26D,CAAC;AACz8D,kCAAe,oBAAoB;;MCsCtB,iBAAiB;;;;0BAQM,IAAI;4BACd,KAAK;kCACC,KAAK;kCAEL,KAAK;;;IAYnC,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;KACvE;IAED,iBAAiB;QACfA,0BAAkB,CAChB,IAAI,CAAC,WAAW,EAChBC,gCAAwB,EACxB,CAAC,GAAG;YACF,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,MAAK,gBAAgB,EAAE;gBAClC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;gBAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,CAAC,UAAU,GAAGC,gCAAwB,CAAC,UAAU,CAAC;YACtD,IAAI,CAAC,wBAAwB,GAAG,GAAG,CAAC;YAEpC,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B,EACD,IAAI,CACL,CAAC;QAEF,IAAI,CAAC,cAAc,GAAGC,0BAAc,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI;YACxD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,GAAGD,gCAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;YAC9D,IAAI,IAAI,CAAC,kBAAkB,EAAE;gBAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACvB,OAAO;aACR;YAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB,CAAC,CAAC;QAEH,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAED,gBAAgB;QACd,IAAI,CAAC,yBAAyB,EAAE,CAAC;KAClC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;QAC/B,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;KAChC;IAEO,aAAa;QACnB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAC3D,mBAAmB,CACD,CAAC;QACrB,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC;YACtC,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;KAC3B;IAEO,MAAM,yBAAyB;QACrC,MAAM,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAC3D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC9D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;YACzB,IAAI,CAAC,WAAW,CAAC,UAAU;iBACxB,aAAa,CAAC,OAAO,CAAC;iBACtB,WAAW,CAAC,WAAW,CAAC,CAAC;SAC7B;KACF;IAEO,MAAM,WAAW;QACvBC,0BAAc,CAAC,MAAM,EAAE,CAAC;KACzB;IAEO,wBAAwB;QAC9B,OAAO,IAAI,OAAO,CAAc,CAAC,OAAO,KACtCC,cAAQ,CAAC,MACP,OAAO,CACL,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CACvC,qBAAqB,CACP,CACjB,CACF,CACF,CAAC;KACH;IAEO,kBAAkB;;QACxB,IAAI,CAAC,IAAI,CAAC,4BAA4B,EAAE;YACtC,OAAO;SACR;QAED,IAAI,CAAC,4BAA4B,CAC/B,MAAA,IAAI,CAAC,wBAAwB,0CAAE,eAAe,CAC/C,CAAC;KACH;IAEO,MAAM,aAAa;;QACzB,IAAI,CAAC,4BAA4B,GAAG,MAAMC,qBAAa,CACrD,MAAA,IAAI,CAAC,wBAAwB,0CAAE,eAAe,CAC/C,CAAC;KACH;IAEO,sBAAsB;QAC5B,MAAM,WAAW,GACf,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAE7D,IAAI,CAAC,kBAAkB,GAAGC,4BAAkB,CAAC,WAAW,CAAC,CAAC;KAC3D;IAEO,gBAAgB,CAAC,CAAa;QACpC,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,iBAAiB,EAAE;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;SACpB;KACF;IAED,MAAM;;QACJ,QACEC,QAACC,UAAI,qDACH,KAAK,EAAE,EAAE,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,EAAE,EAClD,IAAI,EAAC,oBAAoB,IAExB,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,IAAI,CAAC,kBAAkB,KAAK,KAAK,KAC5DD,kFACE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,GACN,CACxB,EACA,CAAA,MAAA,IAAI,CAAC,wBAAwB,0CAAE,eAAe;YAC7C,IAAI,CAAC,UAAU,KAAK,IAAI;YACxB,IAAI,CAAC,kBAAkB,KAAK,KAAK,KAC/BA,6EACE,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EACnC,IAAI,EAAC,MAAM,EACX,KAAK,QACL,KAAK,EAAC,YAAY,GACF,CACnB,EACHA,kEAAK,KAAK,EAAC,MAAM,IACfA,mEAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACNA,4EAAe,MAAM,EAAC,SAAS,EAAC,KAAK,EAAC,MAAM,IACzC,IAAI,CAAC,IAAI,CACI,EAChBA,kEAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,UAAU,KAAK,IAAI,IACvBA,QAACE,cAAQ,QACPF,4BACE,KAAK,EAAE;gBACL,CAAC,cAAc,GAAG,IAAI;gBACtB,CAAC,sBAAsB,GAAG,IAAI,CAAC,kBAAkB;aAClD,6BAED,IAAI,EAAC,WAAW,EAChB,KAAK,SACW,EAClBA,yDAEE,KAAK,EAAC,UAAU,EAChB,mBAAmB,QACnB,OAAO,EAAE,IAAI,CAAC,wBAAwB,EAAE,IAExCA,iBACE,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAExCA,kBACE,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,CACM,CACL,KAEXA,kBAAM,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAAS,CACjE,EACDA,mEAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC7C,CACD,EACP;KACH;;;;;;;","names":["useContextConsumer","ApplicationLayoutContext","applicationLayoutService","menuController","readTask","showAppSwitch","hasSlottedElements","h","Host","Fragment"],"sources":["src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","src/components/application-header/application-header.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/break-points';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 2.75rem;\n  min-height: 2.75rem;\n  padding: 0 1rem 0 0.625rem;\n\n  color: var(--theme-app-header--color);\n  background-color: var(--theme-app-header--background);\n\n  border-bottom: var(--theme-app-header--border-width) solid\n    var(--theme-app-header--border-color);\n\n  z-index: var(--theme-z-index-fixed);\n\n  .app-switch {\n    margin-right: 1rem;\n  }\n\n  .name {\n    overflow: hidden;\n    overflow-wrap: anywhere;\n    text-overflow: ellipsis;\n    text-wrap: nowrap;\n    max-width: 50%;\n    margin-left: 1.5rem;\n    margin-right: 2.5rem;\n    color: var(--theme-app-header--color);\n  }\n\n  .logo {\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    height: 32px;\n    overflow: hidden;\n    line-height: 0rem;\n    color: var(--theme-app-header-logo--color);\n    margin-left: 0.375rem;\n  }\n\n  .content {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .dropdown {\n    overflow: visible;\n  }\n\n  .dropdown-content {\n    padding: 1rem;\n  }\n\n  .context-menu {\n    display: none;\n  }\n\n  .context-menu.context-menu-visible {\n    display: block;\n  }\n\n  @include media-breakpoint-match('sm') {\n    .logo {\n      display: none;\n    }\n  }\n\n  ::slotted(ix-avatar) {\n    margin-left: 1rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  padding-left: 0.625rem;\n\n  .logo {\n    margin-left: 0.5rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n} from '@stencil/core';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n  ApplicationLayoutContext,\n  AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @slot logo - Location of the logo\n */\n@Component({\n  tag: 'ix-application-header',\n  styleUrl: 'application-header.scss',\n  shadow: true,\n})\nexport class ApplicationHeader {\n  @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n  /**\n   * Application name\n   */\n  @Prop() name?: string;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() menuExpanded = false;\n  @State() suppressResponsive = false;\n\n  @State() hasSlottedElements = false;\n\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n  private callbackUpdateAppSwitchModal?: (\n    config: AppSwitchConfiguration\n  ) => void;\n\n  @State() applicationLayoutContext: ContextType<\n    typeof ApplicationLayoutContext\n  >;\n\n  get contentBackground() {\n    return this.hostElement.shadowRoot.querySelector('.dropdown-content');\n  }\n\n  componentWillLoad() {\n    useContextConsumer(\n      this.hostElement,\n      ApplicationLayoutContext,\n      (ctx) => {\n        if (ctx?.host === 'map-navigation') {\n          this.suppressResponsive = true;\n          this.breakpoint = 'md';\n          return;\n        }\n\n        this.breakpoint = applicationLayoutService.breakpoint;\n        this.applicationLayoutContext = ctx;\n\n        this.tryUpdateAppSwitch();\n      },\n      true\n    );\n\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      if (this.suppressResponsive) {\n        this.breakpoint = 'md';\n        return;\n      }\n\n      this.breakpoint = mode;\n    });\n\n    this.updateIsSlottedContent();\n  }\n\n  componentDidLoad() {\n    this.attachSiemensLogoIfLoaded();\n  }\n\n  disconnectedCallback() {\n    this.menuDisposable?.dispose();\n    this.modeDisposable?.dispose();\n  }\n\n  private isLogoSlotted() {\n    const slotElement = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"logo\"]'\n    ) as HTMLSlotElement;\n    const nodes = slotElement.assignedNodes({\n      flatten: true,\n    });\n\n    return nodes.length !== 0;\n  }\n\n  private async attachSiemensLogoIfLoaded() {\n    await window.customElements.whenDefined('ix-siemens-logo');\n    const logoElement = document.createElement('ix-siemens-logo');\n    if (!this.isLogoSlotted()) {\n      this.hostElement.shadowRoot\n        .querySelector('.logo')\n        .appendChild(logoElement);\n    }\n  }\n\n  private async onMenuClick() {\n    menuController.toggle();\n  }\n\n  private resolveContextMenuButton() {\n    return new Promise<HTMLElement>((resolve) =>\n      readTask(() =>\n        resolve(\n          this.hostElement.shadowRoot.querySelector(\n            '[data-context-menu]'\n          ) as HTMLElement\n        )\n      )\n    );\n  }\n\n  private tryUpdateAppSwitch() {\n    if (!this.callbackUpdateAppSwitchModal) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private async showAppSwitch() {\n    this.callbackUpdateAppSwitchModal = await showAppSwitch(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private updateIsSlottedContent() {\n    const slotElement =\n      this.hostElement.shadowRoot.querySelector('.content slot');\n\n    this.hasSlottedElements = hasSlottedElements(slotElement);\n  }\n\n  private onContentBgClick(e: MouseEvent) {\n    if (e.target === this.contentBackground) {\n      e.preventDefault();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ [`breakpoint-${this.breakpoint}`]: true }}\n        slot=\"application-header\"\n      >\n        {this.breakpoint === 'sm' && this.suppressResponsive === false && (\n          <ix-menu-expand-icon\n            onClick={() => this.onMenuClick()}\n            expanded={this.menuExpanded}\n          ></ix-menu-expand-icon>\n        )}\n        {this.applicationLayoutContext?.appSwitchConfig &&\n          this.breakpoint !== 'sm' &&\n          this.suppressResponsive === false && (\n            <ix-icon-button\n              onClick={() => this.showAppSwitch()}\n              icon=\"apps\"\n              ghost\n              class=\"app-switch\"\n            ></ix-icon-button>\n          )}\n        <div class=\"logo\">\n          <slot name=\"logo\"></slot>\n        </div>\n        <ix-typography format=\"body-lg\" class=\"name\">\n          {this.name}\n        </ix-typography>\n        <div class=\"content\">\n          {this.breakpoint === 'sm' ? (\n            <Fragment>\n              <ix-icon-button\n                class={{\n                  ['context-menu']: true,\n                  ['context-menu-visible']: this.hasSlottedElements,\n                }}\n                data-context-menu\n                icon=\"more-menu\"\n                ghost\n              ></ix-icon-button>\n              <ix-dropdown\n                data-overflow-dropdown\n                class=\"dropdown\"\n                discoverAllSubmenus\n                trigger={this.resolveContextMenuButton()}\n              >\n                <div\n                  class=\"dropdown-content\"\n                  onClick={(e) => this.onContentBgClick(e)}\n                >\n                  <slot\n                    onSlotchange={() => this.updateIsSlottedContent()}\n                  ></slot>\n                </div>\n              </ix-dropdown>\n            </Fragment>\n          ) : (\n            <slot onSlotchange={() => this.updateIsSlottedContent()}></slot>\n          )}\n          <slot name=\"ix-application-header-avatar\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-application-header.entry.cjs.js","mappings":"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","names":["useContextConsumer","ApplicationLayoutContext","applicationLayoutService","menuController","readTask","showAppSwitch","hasSlottedElements","h","Host","Fragment"],"sources":["src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","src/components/application-header/application-header.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/break-points';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: flex-end;\n  flex-wrap: nowrap;\n  position: relative;\n  width: 100%;\n  height: calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));\n  min-height: calc(2.75rem + var(--ix-safe-area-inset-top, 0rem));\n  padding-top: 0;\n  padding-right: calc(1rem + var(--ix-safe-area-inset-right, 0rem));\n  padding-bottom: 0.3rem;\n  padding-left: calc(0.625rem + var(--ix-safe-area-inset-left, 0rem));\n\n  color: var(--theme-app-header--color);\n  background-color: var(--theme-app-header--background);\n\n  border-bottom: var(--theme-app-header--border-width) solid\n    var(--theme-app-header--border-color);\n\n  z-index: var(--theme-z-index-fixed);\n\n  .app-switch {\n    margin-right: 1rem;\n  }\n\n  .name {\n    overflow: hidden;\n    overflow-wrap: anywhere;\n    text-overflow: ellipsis;\n    text-wrap: nowrap;\n    max-width: 50%;\n    margin-left: 1.5rem;\n    margin-right: 2.5rem;\n    margin-bottom: 0.25rem;\n    color: var(--theme-app-header--color);\n  }\n\n  .logo {\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    height: 32px;\n    overflow: hidden;\n    line-height: 0rem;\n    color: var(--theme-app-header-logo--color);\n    margin-left: 0.375rem;\n  }\n\n  .content {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .dropdown {\n    overflow: visible;\n  }\n\n  .dropdown-content {\n    padding: 1rem;\n  }\n\n  .context-menu {\n    display: none;\n  }\n\n  .context-menu.context-menu-visible {\n    display: block;\n  }\n\n  @include media-breakpoint-match('sm') {\n    .logo {\n      display: none;\n    }\n  }\n\n  ::slotted(ix-avatar) {\n    margin-left: 1rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .logo {\n    margin-left: 0.5rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n  ApplicationLayoutContext,\n  AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @slot logo - Location of the logo\n */\n@Component({\n  tag: 'ix-application-header',\n  styleUrl: 'application-header.scss',\n  shadow: true,\n})\nexport class ApplicationHeader {\n  @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n  /**\n   * Application name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Controls the visibility of the menu toggle button based on the context of the application header.\n   *\n   * When the application header is utilized outside the application frame, the menu toggle button is displayed.\n   * Conversely, if the header is within the application frame, this property is ineffective.\n   *\n   * @since 2.5.0\n   */\n  @Prop({ mutable: true }) showMenu?: boolean = false;\n\n  /**\n   * Event emitted when the menu toggle button is clicked\n   *\n   * @since 2.5.0\n   */\n  @Event() menuToggle!: EventEmitter<boolean>;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() menuExpanded = false;\n  @State() suppressResponsive = false;\n\n  @State() hasSlottedElements = false;\n\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n  private callbackUpdateAppSwitchModal?: (\n    config: AppSwitchConfiguration\n  ) => void;\n\n  @State() applicationLayoutContext: ContextType<\n    typeof ApplicationLayoutContext\n  >;\n\n  get contentBackground() {\n    return this.hostElement.shadowRoot.querySelector('.dropdown-content');\n  }\n\n  componentWillLoad() {\n    useContextConsumer(\n      this.hostElement,\n      ApplicationLayoutContext,\n      (ctx) => {\n        if (ctx?.host === 'map-navigation') {\n          this.suppressResponsive = true;\n          this.breakpoint = 'md';\n          return;\n        }\n\n        this.breakpoint = applicationLayoutService.breakpoint;\n        this.applicationLayoutContext = ctx;\n\n        this.tryUpdateAppSwitch();\n      },\n      true\n    );\n\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      if (this.suppressResponsive) {\n        return;\n      }\n\n      this.breakpoint = mode;\n    });\n\n    this.updateIsSlottedContent();\n  }\n\n  componentDidLoad() {\n    this.attachSiemensLogoIfLoaded();\n  }\n\n  disconnectedCallback() {\n    this.menuDisposable?.dispose();\n    this.modeDisposable?.dispose();\n  }\n\n  @Watch('applicationLayoutContext')\n  watchApplicationLayoutContext() {\n    if (this.applicationLayoutContext) {\n      this.showMenu = false;\n    }\n  }\n  @Watch('suppressResponsive')\n  watchSuppressResponsive() {\n    this.breakpoint = 'md';\n  }\n\n  private isLogoSlotted() {\n    const slotElement = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"logo\"]'\n    ) as HTMLSlotElement;\n    const nodes = slotElement.assignedNodes({\n      flatten: true,\n    });\n\n    return nodes.length !== 0;\n  }\n\n  private async attachSiemensLogoIfLoaded() {\n    await window.customElements.whenDefined('ix-siemens-logo');\n    const logoElement = document.createElement('ix-siemens-logo');\n    if (!this.isLogoSlotted()) {\n      this.hostElement.shadowRoot\n        .querySelector('.logo')\n        .appendChild(logoElement);\n    }\n  }\n\n  private async onMenuClick() {\n    if (this.applicationLayoutContext) {\n      menuController.toggle();\n    } else {\n      this.menuExpanded = !this.menuExpanded;\n    }\n\n    this.menuToggle.emit(this.menuExpanded);\n  }\n\n  private resolveContextMenuButton() {\n    return new Promise<HTMLElement>((resolve) =>\n      readTask(() =>\n        resolve(\n          this.hostElement.shadowRoot.querySelector(\n            '[data-context-menu]'\n          ) as HTMLElement\n        )\n      )\n    );\n  }\n\n  private tryUpdateAppSwitch() {\n    if (!this.callbackUpdateAppSwitchModal) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private async showAppSwitch() {\n    this.callbackUpdateAppSwitchModal = await showAppSwitch(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private updateIsSlottedContent() {\n    const slotElement =\n      this.hostElement.shadowRoot.querySelector('.content slot');\n\n    this.hasSlottedElements = hasSlottedElements(slotElement);\n  }\n\n  private onContentBgClick(e: MouseEvent) {\n    if (e.target === this.contentBackground) {\n      e.preventDefault();\n    }\n  }\n\n  render() {\n    const hasApplicationContextAvailable = !!this.applicationLayoutContext;\n\n    const showMenuByApplicationFrame =\n      this.breakpoint === 'sm' &&\n      this.suppressResponsive === false &&\n      hasApplicationContextAvailable;\n\n    const showApplicationSwitch =\n      this.applicationLayoutContext?.appSwitchConfig &&\n      this.breakpoint !== 'sm' &&\n      this.suppressResponsive === false;\n\n    return (\n      <Host\n        class={{\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n        slot=\"application-header\"\n      >\n        {(this.showMenu || showMenuByApplicationFrame) && (\n          <ix-menu-expand-icon\n            onClick={() => this.onMenuClick()}\n            expanded={this.menuExpanded}\n          ></ix-menu-expand-icon>\n        )}\n        {showApplicationSwitch && (\n          <ix-icon-button\n            onClick={() => this.showAppSwitch()}\n            icon=\"apps\"\n            ghost\n            class=\"app-switch\"\n          ></ix-icon-button>\n        )}\n        <div class={{ logo: true }}>\n          <slot name=\"logo\"></slot>\n        </div>\n        <ix-typography format=\"body-lg\" class=\"name\">\n          {this.name}\n        </ix-typography>\n        <div class=\"content\">\n          {this.breakpoint === 'sm' ? (\n            <Fragment>\n              <ix-icon-button\n                class={{\n                  ['context-menu']: true,\n                  ['context-menu-visible']: this.hasSlottedElements,\n                }}\n                data-context-menu\n                icon=\"more-menu\"\n                ghost\n              ></ix-icon-button>\n              <ix-dropdown\n                data-overflow-dropdown\n                class=\"dropdown\"\n                discoverAllSubmenus\n                trigger={this.resolveContextMenuButton()}\n              >\n                <div\n                  class=\"dropdown-content\"\n                  onClick={(e) => this.onContentBgClick(e)}\n                >\n                  <slot\n                    onSlotchange={() => this.updateIsSlottedContent()}\n                  ></slot>\n                </div>\n              </ix-dropdown>\n            </Fragment>\n          ) : (\n            <slot onSlotchange={() => this.updateIsSlottedContent()}></slot>\n          )}\n          <slot name=\"ix-application-header-avatar\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-529f21c1.js');
+const index = require('./index-757233c7.js');
 const anime_es = require('./anime.es-e2814360.js');
 const animation = require('./animation-99234008.js');
 
@@ -35,7 +35,7 @@ const ApplicationSidebar = class {
         anime_es.anime(animation$1);
     }
     render() {
-        return (index.h(index.Host, { key: 'fe0f54c79115877bac6d0032320550ad2e3fe089', slot: "application-sidebar", class: {
+        return (index.h(index.Host, { key: '452d80151fb0e848c50ac7a2551929893fbc31f6', slot: "application-sidebar", class: {
                 visible: this.visible,
             } }, this.visible ? index.h("slot", null) : null));
     }

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-529f21c1.js');
+const index = require('./index-757233c7.js');
 require('./animation-99234008.js');
-const modal = require('./modal-828cb80a.js');
+const modal = require('./modal-a49409aa.js');
 require('./typed-event-8032c0c0.js');
 
 const applicationSwitchModalCss = ":host{display:block}: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 .content{padding:2rem;padding-right:0}:host .content-apps{display:flex;position:relative;flex-wrap:wrap;justify-content:space-evenly;max-height:50vh;margin-right:0.25rem;gap:1.5rem}:host .loading{display:flex;flex-direction:row;align-items:center}:host .loading ix-spinner{margin-right:1rem}:host .AppEntry{all:unset;display:flex;flex-direction:row;align-items:center;gap:1rem;padding:0.5rem;flex:1 1 45%;cursor:pointer;border:0.0625rem solid transparent}:host .AppEntry.Selected{background-color:var(--theme-color-ghost--selected);border:var(--theme-dynamic-bdr-1)}:host .AppEntry:not(.disabled):not(:disabled).hover,:host .AppEntry:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .AppEntry:not(.disabled):not(:disabled).active,:host .AppEntry:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .AppEntry:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host .AppName{display:flex;flex-direction:column}:host .AppName ix-icon{margin-left:1rem}:host .AppIcon{width:3rem;height:3rem;border-radius:0.25rem}";
@@ -45,7 +45,7 @@ const ApplicationSwitchModal = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: '2c9a4d11f697563924effefae0ca86ca826fa9c1' }, index.h("ix-modal-header", { key: '09586fc6d884b175ea95e8f4f42e9017c2874ef4', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), index.h("ix-modal-content", { key: '44be3f676830e44c4450ac9a85280829d2570004', class: "content" }, index.h("div", { key: 'd15e8b91de03f40013cfe94cde3159619b8ee8cc', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (index.h("div", { key: '5d8cc548c1c7adaa83c89ac329d04be5e6f7a59c', class: "loading" }, index.h("ix-spinner", { key: '80c9c4adb4546028848d2b47929527b613152651', size: "medium", variant: "primary" }), index.h("span", { key: 'c06fc0f909d940df03402e360e2a3d64bd9decc4' }, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
+        return (index.h(index.Host, { key: 'caf7fe96f12fdef398b1316120127157463703e0' }, index.h("ix-modal-header", { key: '17031f7879a38d312f9520555dae9879d35cdb65', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), index.h("ix-modal-content", { key: '1664cb4c2b142d8bcd84f723a11016ee883a3684', class: "content" }, index.h("div", { key: '85d188516ccf77964b47a9592bdb05c872d2c9c8', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (index.h("div", { key: 'd5b97278041f3c268774ce1345847d3688728931', class: "loading" }, index.h("ix-spinner", { key: '0b2e26ebb92bc0263bb78fa6a9757a2cf67a59df', size: "medium", variant: "primary" }), index.h("span", { key: '75845935e375bd8f2ea3e68562acb7fadd3d33b5' }, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
             'Loading available applications...'))), (_d = this.config) === null || _d === void 0 ? void 0 :
             _d.apps.map((appEntry) => {
                 var _a;