@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/collection/components/utils/menu-service/menu-service.js

@@ -6,11 +6,29 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m")
+    throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _MenuService_isPinned;
 import { TypedEvent } from '../typed-event';
 class MenuService {
   constructor() {
     this.menuElement = null;
     this.menuExpandChange = new TypedEvent();
+    _MenuService_isPinned.set(this, false);
   }
   register(menuElement) {
     if (this.menuElement) {
@@ -22,6 +40,9 @@ class MenuService {
       this.menuExpandChange.emit(event.detail);
     });
   }
+  setIsPinned(pinned) {
+    __classPrivateFieldSet(this, _MenuService_isPinned, pinned, "f");
+  }
   async open() {
     if (this.menuElement) {
       this.menuElement.toggleMenu(true);
@@ -49,6 +70,10 @@ class MenuService {
   get expandChange() {
     return this.menuExpandChange;
   }
+  get isPinned() {
+    return __classPrivateFieldGet(this, _MenuService_isPinned, "f");
+  }
 }
+_MenuService_isPinned = new WeakMap();
 export const menuController = new MenuService();
 //# sourceMappingURL=menu-service.js.map

package/dist/collection/components/utils/menu-service/menu-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-service.js","sourceRoot":"","sources":["../../../../src/components/utils/menu-service/menu-service.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW;EAAjB;IACE,gBAAW,GAA6B,IAAI,CAAC;IAC7C,qBAAgB,GAAG,IAAI,UAAU,EAAW,CAAC;EAkD/C,CAAC;EAhDC,QAAQ,CAAC,WAA8B;IACrC,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;MACrC,OAAO;KACR;IACD,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC/B,cAAc,EACd,CAAC,KAA2B,EAAE,EAAE;MAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3C,CAAC,CACF,CAAC;EACJ,CAAC;EAEM,KAAK,CAAC,IAAI;IACf,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;MAClC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;EACf,CAAC;EAEM,KAAK,CAAC,KAAK;IAChB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;MACnC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;EACf,CAAC;EAEM,KAAK,CAAC,MAAM;IACjB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC;MAC9B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;EACf,CAAC;EAED,IAAI,aAAa;IACf,OAAO,IAAI,CAAC,WAAW,CAAC;EAC1B,CAAC;EAED,IAAI,YAAY;IACd,OAAO,IAAI,CAAC,gBAAgB,CAAC;EAC/B,CAAC;CACF;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,WAAW,EAAE,CAAC","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 { TypedEvent } from '../typed-event';\n\nclass MenuService {\n  menuElement: HTMLIxMenuElement | null = null;\n  menuExpandChange = new TypedEvent<boolean>();\n\n  register(menuElement: HTMLIxMenuElement) {\n    if (this.menuElement) {\n      console.warn('Menu already defined');\n      return;\n    }\n    this.menuElement = menuElement;\n    this.menuElement.addEventListener(\n      'expandChange',\n      (event: CustomEvent<boolean>) => {\n        this.menuExpandChange.emit(event.detail);\n      }\n    );\n  }\n\n  public async open() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu(true);\n      return true;\n    }\n\n    return false;\n  }\n\n  public async close() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu(false);\n      return true;\n    }\n\n    return false;\n  }\n\n  public async toggle() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu();\n      return true;\n    }\n\n    return false;\n  }\n\n  get nativeElement() {\n    return this.menuElement;\n  }\n\n  get expandChange() {\n    return this.menuExpandChange;\n  }\n}\n\nexport const menuController = new MenuService();\n"]}
+{"version":3,"file":"menu-service.js","sourceRoot":"","sources":["../../../../src/components/utils/menu-service/menu-service.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;;;;;;;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW;EAAjB;IACE,gBAAW,GAA6B,IAAI,CAAC;IAC7C,qBAAgB,GAAG,IAAI,UAAU,EAAW,CAAC;IAC7C,gCAAY,KAAK,EAAC;EA0DpB,CAAC;EAxDC,QAAQ,CAAC,WAA8B;IACrC,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;MACrC,OAAO;KACR;IACD,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC/B,cAAc,EACd,CAAC,KAA2B,EAAE,EAAE;MAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3C,CAAC,CACF,CAAC;EACJ,CAAC;EAEM,WAAW,CAAC,MAAe;IAChC,uBAAA,IAAI,yBAAa,MAAM,MAAA,CAAC;EAC1B,CAAC;EAEM,KAAK,CAAC,IAAI;IACf,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;MAClC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;EACf,CAAC;EAEM,KAAK,CAAC,KAAK;IAChB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;MACnC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;EACf,CAAC;EAEM,KAAK,CAAC,MAAM;IACjB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC;MAC9B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;EACf,CAAC;EAED,IAAI,aAAa;IACf,OAAO,IAAI,CAAC,WAAW,CAAC;EAC1B,CAAC;EAED,IAAI,YAAY;IACd,OAAO,IAAI,CAAC,gBAAgB,CAAC;EAC/B,CAAC;EAED,IAAI,QAAQ;IACV,OAAO,uBAAA,IAAI,6BAAU,CAAC;EACxB,CAAC;CACF;;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,WAAW,EAAE,CAAC","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 { TypedEvent } from '../typed-event';\n\nclass MenuService {\n  menuElement: HTMLIxMenuElement | null = null;\n  menuExpandChange = new TypedEvent<boolean>();\n  #isPinned = false;\n\n  register(menuElement: HTMLIxMenuElement) {\n    if (this.menuElement) {\n      console.warn('Menu already defined');\n      return;\n    }\n    this.menuElement = menuElement;\n    this.menuElement.addEventListener(\n      'expandChange',\n      (event: CustomEvent<boolean>) => {\n        this.menuExpandChange.emit(event.detail);\n      }\n    );\n  }\n\n  public setIsPinned(pinned: boolean) {\n    this.#isPinned = pinned;\n  }\n\n  public async open() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu(true);\n      return true;\n    }\n\n    return false;\n  }\n\n  public async close() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu(false);\n      return true;\n    }\n\n    return false;\n  }\n\n  public async toggle() {\n    if (this.menuElement) {\n      this.menuElement.toggleMenu();\n      return true;\n    }\n\n    return false;\n  }\n\n  get nativeElement() {\n    return this.menuElement;\n  }\n\n  get expandChange() {\n    return this.menuExpandChange;\n  }\n\n  get isPinned() {\n    return this.#isPinned;\n  }\n}\n\nexport const menuController = new MenuService();\n"]}

package/dist/collection/components/utils/modal/index.js

@@ -0,0 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+export { showModalLoading } from './loading';
+export { showMessage } from './message';
+export { closeModal, dismissModal, showModal, } from './modal';
+//# sourceMappingURL=index.js.map

package/dist/collection/components/utils/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/utils/modal/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EACL,UAAU,EACV,YAAY,EAGZ,SAAS,GACV,MAAM,SAAS,CAAC","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\nexport { showModalLoading } from './loading';\nexport { showMessage } from './message';\nexport {\n  closeModal,\n  dismissModal,\n  ModalConfig,\n  ModalInstance,\n  showModal,\n} from './modal';\n"]}

package/dist/collection/components/utils/modal/loading.js

@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+import Animation from '../animation';
+import { getCoreDelegate } from '../delegate';
+export function showModalLoading(message) {
+  const modal = document.createElement('ix-modal');
+  modal.keyboard = false;
+  const loading = document.createElement('ix-modal-loading');
+  loading.innerText = message;
+  modal.appendChild(loading);
+  getCoreDelegate().attachView(modal);
+  modal.showModal();
+  return {
+    update: (text) => (loading.innerHTML = text),
+    finish: (text, timeout = 250) => {
+      if (text !== undefined) {
+        loading.innerText = text;
+      }
+      else {
+        timeout = 0;
+      }
+      setTimeout(() => {
+        modal.closeModal(null);
+        setTimeout(async () => await getCoreDelegate().removeView(modal), Animation.mediumTime);
+      }, timeout);
+    },
+  };
+}
+//# sourceMappingURL=loading.js.map

package/dist/collection/components/utils/modal/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","sourceRoot":"","sources":["../../../../src/components/utils/modal/loading.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,UAAU,gBAAgB,CAAC,OAAe;EAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;EACjD,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;EAEvB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;EAC3D,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;EAC5B,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;EAE3B,eAAe,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;EACpC,KAAK,CAAC,SAAS,EAAE,CAAC;EAElB,OAAO;IACL,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IACpD,MAAM,EAAE,CAAC,IAAa,EAAE,UAAkB,GAAG,EAAE,EAAE;MAC/C,IAAI,IAAI,KAAK,SAAS,EAAE;QACtB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;OAC1B;WAAM;QACL,OAAO,GAAG,CAAC,CAAC;OACb;MACD,UAAU,CAAC,GAAG,EAAE;QACd,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACvB,UAAU,CACR,KAAK,IAAI,EAAE,CAAC,MAAM,eAAe,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EACrD,SAAS,CAAC,UAAU,CACrB,CAAC;MACJ,CAAC,EAAE,OAAO,CAAC,CAAC;IACd,CAAC;GACF,CAAC;AACJ,CAAC","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 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"]}

package/dist/collection/components/utils/modal/message.js

@@ -0,0 +1,138 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+import { getCoreDelegate } from '../delegate';
+import { TypedEvent } from '../typed-event';
+function setA11yAttributes(element, config) {
+  const ariaDescribedby = config.ariaDescribedby;
+  const ariaLabelledby = config.ariaLabelledby;
+  delete config['ariaDescribedby'];
+  delete config['ariaLabelledby'];
+  if (ariaDescribedby) {
+    element.setAttribute('aria-describedby', ariaDescribedby);
+  }
+  if (ariaLabelledby) {
+    element.setAttribute('aria-labelledby', ariaLabelledby);
+  }
+}
+function createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel) {
+  let actions = [];
+  if (textCancel !== undefined) {
+    actions = [
+      ...actions,
+      {
+        id: 'cancel',
+        text: textCancel,
+        type: 'cancel',
+        payload: payloadCancel,
+      },
+    ];
+  }
+  return [
+    ...actions,
+    {
+      id: 'okay',
+      text: textOkay,
+      type: 'okay',
+      payload: payloadOkay,
+    },
+  ];
+}
+export async function showMessage(config) {
+  const onMessageAction = new TypedEvent();
+  const dialog = document.createElement('ix-modal');
+  const header = document.createElement('ix-modal-header');
+  const content = document.createElement('ix-modal-content');
+  const footer = document.createElement('ix-modal-footer');
+  setA11yAttributes(dialog, config);
+  Object.assign(header, config);
+  Object.assign(content, config);
+  Object.assign(footer, config);
+  header.innerText = config.messageTitle;
+  content.innerText = config.message;
+  config.actions.forEach(({ id, text, type, payload }) => {
+    const button = document.createElement('ix-button');
+    button.innerText = text;
+    footer.appendChild(button);
+    if (type === 'okay') {
+      button.variant = 'primary';
+      button.addEventListener('click', () => dialog.closeModal({
+        actionId: id,
+        payload,
+      }));
+      return;
+    }
+    if (type === 'cancel') {
+      button.variant = 'primary';
+      button.outline = true;
+      button.addEventListener('click', () => dialog.dismissModal({
+        actionId: id,
+        payload,
+      }));
+      return;
+    }
+  });
+  dialog.appendChild(header);
+  dialog.appendChild(content);
+  dialog.appendChild(footer);
+  const dialogRef = await getCoreDelegate().attachView(dialog);
+  dialogRef.addEventListener('dialogClose', (event) => {
+    onMessageAction.emit(event.detail);
+    dialogRef.remove();
+  });
+  dialogRef.addEventListener('dialogDismiss', (event) => {
+    onMessageAction.emit(event.detail);
+    dialogRef.remove();
+  });
+  dialogRef.showModal();
+  return onMessageAction;
+}
+showMessage.info = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+  return showMessage({
+    message,
+    messageTitle: title,
+    icon: 'info',
+    actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+  });
+};
+showMessage.warning = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+  return showMessage({
+    message,
+    messageTitle: title,
+    icon: 'warning',
+    iconColor: 'color-warning',
+    actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+  });
+};
+showMessage.error = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+  return showMessage({
+    message,
+    messageTitle: title,
+    icon: 'error',
+    iconColor: 'color-alarm',
+    actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+  });
+};
+showMessage.success = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+  return showMessage({
+    message,
+    messageTitle: title,
+    icon: 'success',
+    iconColor: 'color-success',
+    actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+  });
+};
+showMessage.question = (title, message, textOkay, textCancel, payloadOkay, payloadCancel) => {
+  return showMessage({
+    message,
+    messageTitle: title,
+    icon: 'question',
+    actions: createConfirmButtons(textOkay, textCancel, payloadOkay, payloadCancel),
+  });
+};
+//# sourceMappingURL=message.js.map

package/dist/collection/components/utils/modal/message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../../src/components/utils/modal/message.ts"],"names":[],"mappings":"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","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 { getCoreDelegate } from '../delegate';\nimport { TypedEvent } from '../typed-event';\n\nfunction setA11yAttributes(element: HTMLElement, config: MessageContent) {\n  const ariaDescribedby = config.ariaDescribedby;\n  const ariaLabelledby = config.ariaLabelledby;\n\n  delete config['ariaDescribedby'];\n  delete config['ariaLabelledby'];\n\n  if (ariaDescribedby) {\n    element.setAttribute('aria-describedby', ariaDescribedby);\n  }\n\n  if (ariaLabelledby) {\n    element.setAttribute('aria-labelledby', ariaLabelledby);\n  }\n}\n\nfunction createConfirmButtons(\n  textOkay: string,\n  textCancel?: string,\n  payloadOkay?: any,\n  payloadCancel?: any\n) {\n  let actions = [];\n  if (textCancel !== undefined) {\n    actions = [\n      ...actions,\n      {\n        id: 'cancel',\n        text: textCancel,\n        type: 'cancel',\n        payload: payloadCancel,\n      },\n    ];\n  }\n  return [\n    ...actions,\n    {\n      id: 'okay',\n      text: textOkay,\n      type: 'okay',\n      payload: payloadOkay,\n    },\n  ];\n}\n\nexport type MessageContent = {\n  icon: string;\n  iconColor?: string;\n  messageTitle: string;\n  message: string;\n  actions: {\n    id: string;\n    type: 'button-primary' | 'button-secondary' | 'okay' | 'cancel';\n    text: string;\n    payload?: any;\n  }[];\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n};\n\nexport async function showMessage<T>(config: MessageContent) {\n  const onMessageAction = new TypedEvent<{\n    actionId: string;\n    payload: T;\n  }>();\n  const dialog = document.createElement('ix-modal');\n  const header = document.createElement('ix-modal-header');\n  const content = document.createElement('ix-modal-content');\n  const footer = document.createElement('ix-modal-footer');\n\n  setA11yAttributes(dialog, config);\n\n  Object.assign(header, config);\n  Object.assign(content, config);\n  Object.assign(footer, config);\n\n  header.innerText = config.messageTitle;\n  content.innerText = config.message;\n\n  config.actions.forEach(({ id, text, type, payload }) => {\n    const button = document.createElement('ix-button');\n    button.innerText = text;\n    footer.appendChild(button);\n\n    if (type === 'okay') {\n      button.variant = 'primary';\n      button.addEventListener('click', () =>\n        dialog.closeModal({\n          actionId: id,\n          payload,\n        })\n      );\n      return;\n    }\n    if (type === 'cancel') {\n      button.variant = 'primary';\n      button.outline = true;\n      button.addEventListener('click', () =>\n        dialog.dismissModal({\n          actionId: id,\n          payload,\n        })\n      );\n      return;\n    }\n  });\n\n  dialog.appendChild(header);\n  dialog.appendChild(content);\n  dialog.appendChild(footer);\n\n  const dialogRef = await getCoreDelegate().attachView<HTMLIxModalElement>(\n    dialog\n  );\n\n  dialogRef.addEventListener(\n    'dialogClose',\n    (\n      event: CustomEvent<{\n        actionId: string;\n        payload: T;\n      }>\n    ) => {\n      onMessageAction.emit(event.detail);\n      dialogRef.remove();\n    }\n  );\n\n  dialogRef.addEventListener(\n    'dialogDismiss',\n    (\n      event: CustomEvent<{\n        actionId: string;\n        payload: T;\n      }>\n    ) => {\n      onMessageAction.emit(event.detail);\n      dialogRef.remove();\n    }\n  );\n\n  dialogRef.showModal();\n  return onMessageAction;\n}\n\nshowMessage.info = (\n  title: string,\n  message: string,\n  textOkay: string,\n  textCancel?: string,\n  payloadOkay?: any,\n  payloadCancel?: any\n) => {\n  return showMessage({\n    message,\n    messageTitle: title,\n    icon: 'info',\n    actions: createConfirmButtons(\n      textOkay,\n      textCancel,\n      payloadOkay,\n      payloadCancel\n    ),\n  });\n};\n\nshowMessage.warning = (\n  title: string,\n  message: string,\n  textOkay: string,\n  textCancel?: string,\n  payloadOkay?: any,\n  payloadCancel?: any\n) => {\n  return showMessage({\n    message,\n    messageTitle: title,\n    icon: 'warning',\n    iconColor: 'color-warning',\n    actions: createConfirmButtons(\n      textOkay,\n      textCancel,\n      payloadOkay,\n      payloadCancel\n    ),\n  });\n};\n\nshowMessage.error = (\n  title: string,\n  message: string,\n  textOkay: string,\n  textCancel?: string,\n  payloadOkay?: any,\n  payloadCancel?: any\n) => {\n  return showMessage({\n    message,\n    messageTitle: title,\n    icon: 'error',\n    iconColor: 'color-alarm',\n    actions: createConfirmButtons(\n      textOkay,\n      textCancel,\n      payloadOkay,\n      payloadCancel\n    ),\n  });\n};\n\nshowMessage.success = (\n  title: string,\n  message: string,\n  textOkay: string,\n  textCancel?: string,\n  payloadOkay?: any,\n  payloadCancel?: any\n) => {\n  return showMessage({\n    message,\n    messageTitle: title,\n    icon: 'success',\n    iconColor: 'color-success',\n    actions: createConfirmButtons(\n      textOkay,\n      textCancel,\n      payloadOkay,\n      payloadCancel\n    ),\n  });\n};\n\nshowMessage.question = (\n  title: string,\n  message: string,\n  textOkay: string,\n  textCancel?: string,\n  payloadOkay?: any,\n  payloadCancel?: any\n) => {\n  return showMessage({\n    message,\n    messageTitle: title,\n    icon: 'question',\n    actions: createConfirmButtons(\n      textOkay,\n      textCancel,\n      payloadOkay,\n      payloadCancel\n    ),\n  });\n};\n"]}

package/dist/collection/components/utils/modal/modal.js

@@ -0,0 +1,77 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+import { getCoreDelegate, resolveDelegate } from '../delegate';
+import { TypedEvent } from '../typed-event';
+export function setA11yAttributes(element, config) {
+  const ariaDescribedby = config.ariaDescribedby;
+  const ariaLabelledby = config.ariaLabelledby;
+  delete config['ariaDescribedby'];
+  delete config['ariaLabelledby'];
+  if (ariaDescribedby) {
+    element.setAttribute('aria-describedby', ariaDescribedby);
+  }
+  if (ariaLabelledby) {
+    element.setAttribute('aria-labelledby', ariaLabelledby);
+  }
+}
+function getIxModal(element) {
+  return element.closest('ix-modal');
+}
+export function closeModal(element, closeResult) {
+  const dialog = getIxModal(element);
+  if (dialog) {
+    dialog.closeModal(closeResult);
+    return;
+  }
+}
+export function dismissModal(element, dismissResult) {
+  const dialog = getIxModal(element);
+  if (dialog) {
+    dialog.dismissModal(dismissResult);
+    return;
+  }
+}
+export async function showModal(config) {
+  const delegate = resolveDelegate();
+  let dialogRef;
+  const onClose = new TypedEvent();
+  const onDismiss = new TypedEvent();
+  if (typeof config.content === 'string') {
+    const dialog = document.createElement('ix-modal');
+    dialog.innerText = config.content;
+    dialogRef = await getCoreDelegate().attachView(dialog);
+  }
+  if (config.content instanceof HTMLElement &&
+    config.content.tagName !== 'IX-MODAL') {
+    const dialog = document.createElement('ix-modal');
+    dialog.appendChild(config.content);
+    dialogRef = await getCoreDelegate().attachView(dialog);
+  }
+  if (!dialogRef) {
+    dialogRef = await delegate.attachView(config.content);
+  }
+  setA11yAttributes(dialogRef, config);
+  Object.assign(dialogRef, config);
+  dialogRef.setAttribute('ariaDescribedby', 'Test');
+  dialogRef.showModal();
+  dialogRef.addEventListener('dialogClose', async ({ detail }) => {
+    onClose.emit(detail);
+    await delegate.removeView(dialogRef);
+  });
+  dialogRef.addEventListener('dialogDismiss', async ({ detail }) => {
+    onDismiss.emit(detail);
+    await delegate.removeView(dialogRef);
+  });
+  return {
+    htmlElement: dialogRef,
+    onClose,
+    onDismiss,
+  };
+}
+//# sourceMappingURL=modal.js.map

package/dist/collection/components/utils/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/utils/modal/modal.ts"],"names":[],"mappings":"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","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 { IxModalSize } from '../../modal/modal';\nimport { getCoreDelegate, resolveDelegate } from '../delegate';\nimport { TypedEvent } from '../typed-event';\n\nexport function setA11yAttributes(element: HTMLElement, config: ModalConfig) {\n  const ariaDescribedby = config.ariaDescribedby;\n  const ariaLabelledby = config.ariaLabelledby;\n\n  delete config['ariaDescribedby'];\n  delete config['ariaLabelledby'];\n\n  if (ariaDescribedby) {\n    element.setAttribute('aria-describedby', ariaDescribedby);\n  }\n\n  if (ariaLabelledby) {\n    element.setAttribute('aria-labelledby', ariaLabelledby);\n  }\n}\n\nexport interface ModalConfig<TReason = any, CONTENT = any> {\n  animation?: boolean;\n  ariaDescribedby?: string;\n  ariaLabelledby?: string;\n  backdrop?: boolean;\n  closeOnBackdropClick?: boolean;\n  beforeDismiss?: (reason?: TReason) => boolean | Promise<boolean>;\n  centered?: boolean;\n  container?: string | HTMLElement;\n  content: CONTENT | string;\n  keyboard?: boolean;\n  size?: IxModalSize;\n  title?: string;\n}\n\nexport interface ModalInstance<TReason = any> {\n  htmlElement: HTMLIxModalElement;\n  onClose: TypedEvent<TReason>;\n  onDismiss: TypedEvent<TReason>;\n}\n\nfunction getIxModal(element: Element) {\n  return element.closest('ix-modal');\n}\n\nexport function closeModal<TClose = any>(\n  element: Element,\n  closeResult: TClose\n) {\n  const dialog = getIxModal(element);\n  if (dialog) {\n    dialog.closeModal(closeResult);\n    return;\n  }\n}\n\nexport function dismissModal(element: Element, dismissResult?: any) {\n  const dialog = getIxModal(element);\n  if (dialog) {\n    dialog.dismissModal(dismissResult);\n    return;\n  }\n}\n\nexport async function showModal<T>(\n  config: ModalConfig<T>\n): Promise<ModalInstance<T>> {\n  const delegate = resolveDelegate();\n  let dialogRef: HTMLIxModalElement;\n  const onClose = new TypedEvent<T>();\n  const onDismiss = new TypedEvent<T>();\n\n  if (typeof config.content === 'string') {\n    const dialog = document.createElement('ix-modal');\n    dialog.innerText = config.content;\n    dialogRef = await getCoreDelegate().attachView(dialog);\n  }\n\n  if (\n    config.content instanceof HTMLElement &&\n    config.content.tagName !== 'IX-MODAL'\n  ) {\n    const dialog = document.createElement('ix-modal');\n    dialog.appendChild(config.content);\n    dialogRef = await getCoreDelegate().attachView(dialog);\n  }\n\n  if (!dialogRef) {\n    dialogRef = await delegate.attachView<HTMLIxModalElement>(config.content);\n  }\n\n  setA11yAttributes(dialogRef, config);\n  Object.assign(dialogRef, config);\n\n  dialogRef.setAttribute('ariaDescribedby', 'Test');\n\n  dialogRef.showModal();\n  dialogRef.addEventListener('dialogClose', async ({ detail }: CustomEvent) => {\n    onClose.emit(detail);\n    await delegate.removeView(dialogRef);\n  });\n\n  dialogRef.addEventListener(\n    'dialogDismiss',\n    async ({ detail }: CustomEvent) => {\n      onDismiss.emit(detail);\n      await delegate.removeView(dialogRef);\n    }\n  );\n\n  return {\n    htmlElement: dialogRef,\n    onClose,\n    onDismiss,\n  };\n}\n"]}

package/dist/collection/components/utils/shadow-dom.js

@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+export function closestElement(selector, el) {
+  if (!el) {
+    return null;
+  }
+  return (el.closest(selector) ||
+    closestElement(selector, el.getRootNode().host));
+}
+export function getSlottedElements(slot) {
+  return slot.assignedElements({ flatten: true });
+}
+export function hasSlottedElements(slot) {
+  if (!slot) {
+    return false;
+  }
+  return slot.assignedElements({ flatten: true }).length !== 0;
+}
+//# sourceMappingURL=shadow-dom.js.map

package/dist/collection/components/utils/shadow-dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow-dom.js","sourceRoot":"","sources":["../../../src/components/utils/shadow-dom.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,QAAgB,EAAE,EAAO;EACtD,IAAI,CAAC,EAAE,EAAE;IACP,OAAO,IAAI,CAAC;GACb;EACD,OAAO,CACL,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACpB,cAAc,CAAC,QAAQ,EAAG,EAAE,CAAC,WAAW,EAAU,CAAC,IAAI,CAAC,CACzD,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAU,IAAS;EACnD,OAAO,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAClD,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,IAAS;EAC1C,IAAI,CAAC,IAAI,EAAE;IACT,OAAO,KAAK,CAAC;GACd;EACD,OAAO,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC;AAC/D,CAAC","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 */\nexport function closestElement(selector: string, el: any) {\n  if (!el) {\n    return null;\n  }\n  return (\n    el.closest(selector) ||\n    closestElement(selector, (el.getRootNode() as any).host)\n  );\n}\n\nexport function getSlottedElements<R = any>(slot: any): R[] {\n  return slot.assignedElements({ flatten: true });\n}\n\nexport function hasSlottedElements(slot: any) {\n  if (!slot) {\n    return false;\n  }\n  return slot.assignedElements({ flatten: true }).length !== 0;\n}\n"]}

package/dist/collection/components/utils/theme-switcher.js

@@ -1,5 +1,5 @@
 import { TypedEvent } from './typed-event';
-export class ThemeSwitcher {
+class ThemeSwitcher {
   get themeChanged() {
     return this._themeChanged;
   }
@@ -10,10 +10,19 @@ export class ThemeSwitcher {
   isThemeClass(className) {
     return (className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className));
   }
-  setTheme(themeName) {
-    if (!this.isThemeClass(themeName)) {
+  setTheme(themeName, systemAppearance = false) {
+    if (!this.isThemeClass(themeName) && systemAppearance === false) {
       throw Error(`Provided theme name ${themeName} does not match our naming conventions. (theme-<name>-(dark,light))`);
     }
+    if (systemAppearance) {
+      const currentSystemAppearance = getCurrentSystemAppearance();
+      this.replaceBodyThemeClass(themeName);
+      this.setVariant(currentSystemAppearance);
+      return;
+    }
+    this.replaceBodyThemeClass(themeName);
+  }
+  replaceBodyThemeClass(themeName) {
     const oldThemes = [];
     document.body.classList.forEach((className) => {
       if (this.isThemeClass(className)) {
@@ -38,6 +47,22 @@ export class ThemeSwitcher {
       document.body.classList.replace(themeName, this.getOppositeMode(themeName));
     });
   }
+  getCurrentTheme() {
+    var _a;
+    return ((_a = Array.from(document.body.classList).find((className) => this.isThemeClass(className))) !== null && _a !== void 0 ? _a : `theme-${window
+      .getComputedStyle(document.body)
+      .getPropertyValue('--ix-theme-name')}`);
+  }
+  setVariant(variant = getCurrentSystemAppearance()) {
+    const currentTheme = this.getCurrentTheme();
+    document.body.classList.remove(currentTheme);
+    if (currentTheme.endsWith(this.suffixDark)) {
+      document.body.classList.add(currentTheme.replace(/-dark$/g, `-${variant}`));
+    }
+    if (currentTheme.endsWith(this.suffixLight)) {
+      document.body.classList.add(currentTheme.replace(/-light$/g, `-${variant}`));
+    }
+  }
   getOppositeMode(themeName) {
     if (themeName.endsWith(this.suffixDark)) {
       return themeName.replace(/-dark$/g, this.suffixLight);
@@ -83,5 +108,12 @@ export class ThemeSwitcher {
     this.registerMutationObserver();
   }
 }
+export const getCurrentSystemAppearance = () => {
+  const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+  if (matchMedia.matches) {
+    return 'dark';
+  }
+  return 'light';
+};
 export const themeSwitcher = new ThemeSwitcher();
 //# sourceMappingURL=theme-switcher.js.map

package/dist/collection/components/utils/theme-switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-switcher.js","sourceRoot":"","sources":["../../../src/components/utils/theme-switcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { TypedEvent } from './typed-event';\n\nexport class ThemeSwitcher {\n  readonly prefixTheme = 'theme-';\n  readonly suffixLight = '-light';\n  readonly suffixDark = '-dark';\n  readonly defaultTheme = 'theme-classic-dark';\n\n  mutationObserver: MutationObserver;\n  _themeChanged = new TypedEvent<string>();\n\n  public get themeChanged() {\n    return this._themeChanged;\n  }\n\n  private hasVariantSuffix(className: string) {\n    return (\n      className.endsWith(this.suffixDark) ||\n      className.endsWith(this.suffixLight)\n    );\n  }\n\n  private isThemeClass(className: string) {\n    return (\n      className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className)\n    );\n  }\n\n  public setTheme(themeName: string) {\n    if (!this.isThemeClass(themeName)) {\n      throw Error(\n        `Provided theme name ${themeName} does not match our naming conventions. (theme-<name>-(dark,light))`\n      );\n    }\n\n    const oldThemes: string[] = [];\n\n    document.body.classList.forEach((className) => {\n      if (this.isThemeClass(className)) {\n        oldThemes.push(className);\n      }\n    });\n\n    document.body.classList.remove(...oldThemes);\n    document.body.classList.add(themeName);\n  }\n\n  public toggleMode() {\n    const oldThemes: string[] = [];\n\n    document.body.classList.forEach((className) => {\n      if (this.isThemeClass(className)) {\n        oldThemes.push(className);\n      }\n    });\n\n    if (oldThemes.length === 0) {\n      document.body.classList.add(this.getOppositeMode(this.defaultTheme));\n      return;\n    }\n\n    oldThemes.forEach((themeName) => {\n      document.body.classList.replace(\n        themeName,\n        this.getOppositeMode(themeName)\n      );\n    });\n  }\n\n  private getOppositeMode(themeName: string) {\n    if (themeName.endsWith(this.suffixDark)) {\n      return themeName.replace(/-dark$/g, this.suffixLight);\n    }\n\n    if (themeName.endsWith(this.suffixLight)) {\n      return themeName.replace(/-light$/g, this.suffixDark);\n    }\n  }\n\n  private handleMutations(mutations: MutationRecord[]) {\n    return mutations.forEach((mutation) => {\n      const { target } = mutation;\n      (target as HTMLElement).classList.forEach((className) => {\n        if (\n          this.isThemeClass(className) &&\n          !mutation.oldValue?.includes(className)\n        ) {\n          this._themeChanged.emit(className);\n        }\n      });\n    });\n  }\n\n  private registerMutationObserver() {\n    if (typeof (window as any) === 'undefined') {\n      return;\n    }\n\n    if (!('MutationObserver' in window)) {\n      console.warn(\n        'ThemeSwitcher not supported by your browser. Missing MutationObserver API'\n      );\n      return;\n    }\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      this.handleMutations(mutations);\n    });\n\n    this.mutationObserver.observe(document.body, {\n      attributeFilter: ['class'],\n      attributeOldValue: true,\n    });\n  }\n\n  public constructor() {\n    this.registerMutationObserver();\n  }\n}\n\nexport const themeSwitcher = new ThemeSwitcher();\n"]}
+{"version":3,"file":"theme-switcher.js","sourceRoot":"","sources":["../../../src/components/utils/theme-switcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { TypedEvent } from './typed-event';\n\nexport type ThemeVariant = 'light' | 'dark';\n\nclass ThemeSwitcher {\n  readonly prefixTheme = 'theme-';\n  readonly suffixLight = '-light';\n  readonly suffixDark = '-dark';\n  readonly defaultTheme = 'theme-classic-dark';\n\n  mutationObserver: MutationObserver;\n  _themeChanged = new TypedEvent<string>();\n\n  public get themeChanged() {\n    return this._themeChanged;\n  }\n\n  public hasVariantSuffix(className: string) {\n    return (\n      className.endsWith(this.suffixDark) ||\n      className.endsWith(this.suffixLight)\n    );\n  }\n\n  private isThemeClass(className: string) {\n    return (\n      className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className)\n    );\n  }\n\n  public setTheme(themeName: string, systemAppearance = false) {\n    if (!this.isThemeClass(themeName) && systemAppearance === false) {\n      throw Error(\n        `Provided theme name ${themeName} does not match our naming conventions. (theme-<name>-(dark,light))`\n      );\n    }\n\n    if (systemAppearance) {\n      const currentSystemAppearance = getCurrentSystemAppearance();\n      this.replaceBodyThemeClass(themeName);\n      this.setVariant(currentSystemAppearance);\n      return;\n    }\n\n    this.replaceBodyThemeClass(themeName);\n  }\n\n  private replaceBodyThemeClass(themeName: string) {\n    const oldThemes: string[] = [];\n    document.body.classList.forEach((className) => {\n      if (this.isThemeClass(className)) {\n        oldThemes.push(className);\n      }\n    });\n\n    document.body.classList.remove(...oldThemes);\n    document.body.classList.add(themeName);\n  }\n\n  public toggleMode() {\n    const oldThemes: string[] = [];\n\n    document.body.classList.forEach((className) => {\n      if (this.isThemeClass(className)) {\n        oldThemes.push(className);\n      }\n    });\n\n    if (oldThemes.length === 0) {\n      document.body.classList.add(this.getOppositeMode(this.defaultTheme));\n      return;\n    }\n\n    oldThemes.forEach((themeName) => {\n      document.body.classList.replace(\n        themeName,\n        this.getOppositeMode(themeName)\n      );\n    });\n  }\n\n  public getCurrentTheme() {\n    return (\n      Array.from(document.body.classList).find((className) =>\n        this.isThemeClass(className)\n      ) ??\n      `theme-${window\n        .getComputedStyle(document.body)\n        .getPropertyValue('--ix-theme-name')}`\n    );\n  }\n\n  public setVariant(variant: ThemeVariant = getCurrentSystemAppearance()) {\n    const currentTheme = this.getCurrentTheme();\n    document.body.classList.remove(currentTheme);\n\n    if (currentTheme.endsWith(this.suffixDark)) {\n      document.body.classList.add(\n        currentTheme.replace(/-dark$/g, `-${variant}`)\n      );\n    }\n\n    if (currentTheme.endsWith(this.suffixLight)) {\n      document.body.classList.add(\n        currentTheme.replace(/-light$/g, `-${variant}`)\n      );\n    }\n  }\n\n  private getOppositeMode(themeName: string) {\n    if (themeName.endsWith(this.suffixDark)) {\n      return themeName.replace(/-dark$/g, this.suffixLight);\n    }\n\n    if (themeName.endsWith(this.suffixLight)) {\n      return themeName.replace(/-light$/g, this.suffixDark);\n    }\n  }\n\n  private handleMutations(mutations: MutationRecord[]) {\n    return mutations.forEach((mutation) => {\n      const { target } = mutation;\n      (target as HTMLElement).classList.forEach((className) => {\n        if (\n          this.isThemeClass(className) &&\n          !mutation.oldValue?.includes(className)\n        ) {\n          this._themeChanged.emit(className);\n        }\n      });\n    });\n  }\n\n  private registerMutationObserver() {\n    if (typeof (window as any) === 'undefined') {\n      return;\n    }\n\n    if (!('MutationObserver' in window)) {\n      console.warn(\n        'ThemeSwitcher not supported by your browser. Missing MutationObserver API'\n      );\n      return;\n    }\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      this.handleMutations(mutations);\n    });\n\n    this.mutationObserver.observe(document.body, {\n      attributeFilter: ['class'],\n      attributeOldValue: true,\n    });\n  }\n\n  public constructor() {\n    this.registerMutationObserver();\n  }\n}\n\nexport type IxTheme =\n  | 'classic'\n  | 'classic-dark'\n  | 'classic-light'\n  | (string & {});\n\nexport const getCurrentSystemAppearance = (): ThemeVariant => {\n  const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');\n\n  if (matchMedia.matches) {\n    return 'dark';\n  }\n\n  return 'light';\n};\n\nexport const themeSwitcher = new ThemeSwitcher();\n"]}

package/dist/collection/components/validation-tooltip/validation-tooltip.js

@@ -6,9 +6,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { arrow, autoPlacement, autoUpdate, computePosition, inline, offset, shift, } from '@floating-ui/dom';
+import { arrow, autoUpdate, computePosition, flip, inline, offset, shift, } from '@floating-ui/dom';
 import { h, Host } from '@stencil/core';
-import { getAlignment } from '../dropdown/alignment';
 /**
  * @slot tooltip-message - Custom tooltip message with html support
  */
@@ -18,12 +17,13 @@ export class ValidationTooltip {
     this.onInputFocusBind = this.onInputFocus.bind(this);
     this.message = undefined;
     this.placement = 'top';
+    this.suppressAutomaticPlacement = false;
     this.isInputValid = true;
     this.tooltipPosition = undefined;
     this.arrowPosition = undefined;
   }
   get arrow() {
-    return this.hostElement.querySelector('#arrow');
+    return this.hostElement.shadowRoot.querySelector('#arrow');
   }
   get inputElement() {
     return this.hostElement.querySelector('input');
@@ -32,9 +32,9 @@ export class ValidationTooltip {
     return this.inputElement.form;
   }
   get tooltipElement() {
-    return this.hostElement.querySelector('.validation-tooltip');
+    return this.hostElement.shadowRoot.querySelector('.validation-tooltip');
   }
-  destoryAutoUpdate() {
+  destroyAutoUpdate() {
     this.tooltipElement.style.display = 'none';
     if (this.autoUpdateCleanup) {
       this.autoUpdateCleanup();
@@ -52,14 +52,10 @@ export class ValidationTooltip {
         }),
       ],
     };
-    if (this.placement.includes('auto')) {
-      positionConfig.middleware.push(autoPlacement({
-        alignment: getAlignment(this.placement),
-      }));
-    }
-    else {
-      positionConfig.placement = this.placement;
+    if (!this.suppressAutomaticPlacement) {
+      positionConfig.middleware.push(flip({ fallbackStrategy: 'initialPlacement' }));
     }
+    positionConfig.placement = this.placement;
     this.autoUpdateCleanup = autoUpdate(this.inputElement, this.tooltipElement, async () => {
       positionConfig.middleware = [
         ...positionConfig.middleware,
@@ -122,7 +118,7 @@ export class ValidationTooltip {
   disconnectedCallback() {
     var _a;
     (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-    this.destoryAutoUpdate();
+    this.destroyAutoUpdate();
     this.formElement.removeEventListener('submit', this.onSubmitBind);
     this.inputElement.removeEventListener('focus', this.onInputFocusBind);
   }
@@ -131,7 +127,7 @@ export class ValidationTooltip {
       this.applyTooltipPosition();
     }
     else {
-      this.destoryAutoUpdate();
+      this.destroyAutoUpdate();
     }
   }
   render() {
@@ -145,7 +141,7 @@ export class ValidationTooltip {
       }, class: "validation-tooltip text-default" }, this.message, h("slot", { name: "tooltip-message" }), h("div", { id: "arrow" }))));
   }
   static get is() { return "ix-validation-tooltip"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["validation-tooltip.scss"]
@@ -179,10 +175,10 @@ export class ValidationTooltip {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "Placement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "original": "Side",
+          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
           "references": {
-            "Placement": {
+            "Side": {
               "location": "import",
               "path": "../dropdown/placement"
             }
@@ -197,6 +193,27 @@ export class ValidationTooltip {
         "attribute": "placement",
         "reflect": false,
         "defaultValue": "'top'"
+      },
+      "suppressAutomaticPlacement": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Suppress the automatic placement of the dropdown."
+        },
+        "attribute": "suppress-automatic-placement",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }