@siemens/ix 1.6.2 → 2.0.0-beta.0

package/dist/collection/components/menu-settings/menu-settings.css

@@ -178,6 +178,14 @@ a {
   color: var(--theme-color-primary);
 }
 
+/*
+ * 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.
+ */
 :host {
   display: block;
   background-color: var(--theme-nav-overlay--background);
@@ -187,6 +195,11 @@ a {
   width: 100%;
   height: 100%;
 }
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
 :host .settings-header {
   display: flex;
   justify-content: space-between;

package/dist/collection/components/menu-settings/menu-settings.js

@@ -44,14 +44,15 @@ export class MenuAbout {
     });
   }
   render() {
-    return (h(Host, { class: {
-        animate__animated: true,
-        animate__fadeInLeft: this.show,
-        animate__fadeOutLeft: !this.show,
-      } }, h("div", { class: "settings-header" }, h("h2", { class: "text-h2" }, this.label), h("ix-icon-button", { ghost: true, size: "24", icon: "close", onClick: (e) => this.close.emit(e) })), h("ix-tabs", null, this.getTabItems()), h("slot", null)));
+    return (h(Host, { slot: "ix-menu-settings", class: {
+        show: this.show,
+      } }, h("div", { class: "settings-header" }, h("h2", { class: "text-h2" }, this.label), h("ix-icon-button", { ghost: true, size: "24", icon: "close", onClick: (e) => this.close.emit({
+        nativeEvent: e,
+        name: 'ix-menu-settings',
+      }) })), h("ix-tabs", null, this.getTabItems()), h("slot", null)));
   }
   static get is() { return "ix-menu-settings"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["menu-settings.scss"]
@@ -131,8 +132,8 @@ export class MenuAbout {
           "text": "Popover closed"
         },
         "complexType": {
-          "original": "MouseEvent",
-          "resolved": "MouseEvent",
+          "original": "{\n    nativeEvent: MouseEvent;\n    name: string;\n  }",
+          "resolved": "{ nativeEvent: MouseEvent; name: string; }",
           "references": {
             "MouseEvent": {
               "location": "global"

package/dist/collection/components/menu-settings/menu-settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-settings.js","sourceRoot":"","sources":["../../../src/components/menu-settings/menu-settings.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,WAAW,EACX,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,SAAS;;;iBASJ,UAAU;gBAKX,KAAK;;EASpB,IAAI,aAAa;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC;EACvE,CAAC;EAEO,MAAM,CAAC,KAAa;IAC1B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;MAC/B,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MAEzB,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,EAAE;QACnC,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;OAC3B;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;MAC7B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;KACjE;EACH,CAAC;EAED,gBAAgB;IACd,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EACvB,CAAC;EAGD,mBAAmB,CAAC,KAAa;IAC/B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;EACrB,CAAC;EAEO,WAAW;IACjB,OAAO,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;MAC1C,OAAO,CACL,mBACE,KAAK,EAAE;UACL,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,cAAc;SACtC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAEhC,KAAK,CACM,CACf,CAAC;IACJ,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,mBAAmB,EAAE,IAAI,CAAC,IAAI;QAC9B,oBAAoB,EAAE,CAAC,IAAI,CAAC,IAAI;OACjC;MAED,WAAK,KAAK,EAAC,iBAAiB;QAC1B,UAAI,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAM;QACrC,sBACE,KAAK,QACL,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAClB,CACd;MACN,mBAAU,IAAI,CAAC,WAAW,EAAE,CAAW;MACvC,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  scoped: true,\n})\nexport class MenuAbout {\n  /**\n   * active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label\n   */\n  @Prop() label = 'Settings';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Popover closed\n   */\n  @Event() close: EventEmitter<MouseEvent>;\n\n  get settingsItems(): HTMLIxMenuSettingsItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-settings-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.settingsItems.forEach((i) => {\n      i.style.display = 'none';\n\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.settingsItems.length) {\n      this.setTab(this.activeTabLabel || this.settingsItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    this.setTab(value);\n  }\n\n  private getTabItems() {\n    return this.settingsItems.map(({ label }) => {\n      return (\n        <ix-tab-item\n          class={{\n            active: label === this.activeTabLabel,\n          }}\n          onClick={() => this.setTab(label)}\n        >\n          {label}\n        </ix-tab-item>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          animate__animated: true,\n          animate__fadeInLeft: this.show,\n          animate__fadeOutLeft: !this.show,\n        }}\n      >\n        <div class=\"settings-header\">\n          <h2 class=\"text-h2\">{this.label}</h2>\n          <ix-icon-button\n            ghost\n            size=\"24\"\n            icon=\"close\"\n            onClick={(e) => this.close.emit(e)}\n          ></ix-icon-button>\n        </div>\n        <ix-tabs>{this.getTabItems()}</ix-tabs>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-settings.js","sourceRoot":"","sources":["../../../src/components/menu-settings/menu-settings.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,WAAW,EACX,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,SAAS;;;iBASJ,UAAU;gBAKX,KAAK;;EAYpB,IAAI,aAAa;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC;EACvE,CAAC;EAEO,MAAM,CAAC,KAAa;IAC1B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;MAC/B,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MAEzB,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,EAAE;QACnC,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;OAC3B;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;MAC7B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;KACjE;EACH,CAAC;EAED,gBAAgB;IACd,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EACvB,CAAC;EAGD,mBAAmB,CAAC,KAAa;IAC/B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;EACrB,CAAC;EAEO,WAAW;IACjB,OAAO,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;MAC1C,OAAO,CACL,mBACE,KAAK,EAAE;UACL,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,cAAc;SACtC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAEhC,KAAK,CACM,CACf,CAAC;IACJ,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB;MAED,WAAK,KAAK,EAAC,iBAAiB;QAC1B,UAAI,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAM;QACrC,sBACE,KAAK,QACL,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;YACd,WAAW,EAAE,CAAC;YACd,IAAI,EAAE,kBAAkB;WACzB,CAAC,GAEY,CACd;MACN,mBAAU,IAAI,CAAC,WAAW,EAAE,CAAW;MACvC,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  /**\n   * active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label\n   */\n  @Prop() label = 'Settings';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Popover closed\n   */\n  @Event() close: EventEmitter<{\n    nativeEvent: MouseEvent;\n    name: string;\n  }>;\n\n  get settingsItems(): HTMLIxMenuSettingsItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-settings-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.settingsItems.forEach((i) => {\n      i.style.display = 'none';\n\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.settingsItems.length) {\n      this.setTab(this.activeTabLabel || this.settingsItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    this.setTab(value);\n  }\n\n  private getTabItems() {\n    return this.settingsItems.map(({ label }) => {\n      return (\n        <ix-tab-item\n          class={{\n            active: label === this.activeTabLabel,\n          }}\n          onClick={() => this.setTab(label)}\n        >\n          {label}\n        </ix-tab-item>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"ix-menu-settings\"\n        class={{\n          show: this.show,\n        }}\n      >\n        <div class=\"settings-header\">\n          <h2 class=\"text-h2\">{this.label}</h2>\n          <ix-icon-button\n            ghost\n            size=\"24\"\n            icon=\"close\"\n            onClick={(e) =>\n              this.close.emit({\n                nativeEvent: e,\n                name: 'ix-menu-settings',\n              })\n            }\n          ></ix-icon-button>\n        </div>\n        <ix-tabs>{this.getTabItems()}</ix-tabs>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/menu-settings-item/menu-settings-item.css

@@ -9,5 +9,4 @@
 
 :host {
   display: block;
-
 }

package/dist/collection/components/menu-settings-item/menu-settings-item.js

@@ -15,7 +15,7 @@ export class MenuSettingsItem {
     return (h(Host, null, h("slot", null)));
   }
   static get is() { return "ix-menu-settings-item"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["menu-settings-item.css"]

package/dist/collection/components/menu-settings-item/menu-settings-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-settings-item.js","sourceRoot":"","sources":["../../../src/components/menu-settings-item/menu-settings-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,gBAAgB;;;;EAM3B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings-item',\n  styleUrl: 'menu-settings-item.css',\n  scoped: true,\n})\nexport class MenuSettingsItem {\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-settings-item.js","sourceRoot":"","sources":["../../../src/components/menu-settings-item/menu-settings-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,gBAAgB;;;;EAM3B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings-item',\n  styleUrl: 'menu-settings-item.css',\n  shadow: true,\n})\nexport class MenuSettingsItem {\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/modal/modal.css

@@ -6,93 +6,76 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/*
- * 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.
- */
-/* Dimensions */
-/* Font sizes */
-/* Line heights */
-/* Animation timings */
-:host {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
+::backdrop {
+  --ix-dialog-backdrop: var(--theme-color-lightbox, #0000008c);
 }
-:host .modal {
-  display: flex;
+
+:focus-visible {
+  outline: none !important;
 }
-:host .modal.animation {
-  animation: modal-fade 300ms ease-in-out;
+
+:host dialog {
+  margin: 0;
+  left: 50%;
 }
-:host .modal.backdrop {
-  background-color: var(--theme-color-lightbox);
-  -webkit-backdrop-filter: blur(4px);
-          backdrop-filter: blur(4px);
-  transition: none;
+:host dialog::backdrop {
+  -webkit-backdrop-filter: blur(2.7182817459px);
+          backdrop-filter: blur(2.7182817459px);
 }
-:host .modal.backdrop.animation {
-  transition: -webkit-backdrop-filter 0ms ease-in-out;
-  transition: backdrop-filter 0ms ease-in-out;
-  transition: backdrop-filter 0ms ease-in-out, -webkit-backdrop-filter 0ms ease-in-out;
+:host .modal {
+  display: grid;
+  position: relative;
+  flex-direction: column;
+  border: none;
+  border-radius: var(--theme-default-border-radius);
+  background: var(--theme-modal--background);
+  box-shadow: var(--theme-shadow-4);
+  color: var(--theme-color-std-text);
+  max-height: 80vh;
+  overflow: hidden;
+  pointer-events: all;
 }
-:host .modal .modal-dialog {
-  flex-grow: 1;
+:host .modal-size-360 {
+  width: 22.5rem;
 }
-:host .modal.scrollable .modal-content {
-  max-height: 100%;
+:host .modal-size-480 {
+  width: 30rem;
 }
-:host .modal.scrollable .modal-content .modal-body {
-  overflow-y: auto;
+:host .modal-size-600 {
+  width: 37.5rem;
 }
-:host .modal .modal-content {
-  box-shadow: var(--theme-modal--box-shadow);
-  flex-direction: row;
-  background-color: var(--theme-modal--background);
-  border: var(--modal--border-thickness) solid var(--theme-modal--border-color);
-  padding: 1.5rem;
-  max-height: 100vh;
-  border-radius: var(--theme-default-border-radius);
+:host .modal-size-720 {
+  width: 45rem;
 }
-:host .modal .modal-content .state-icon-container {
-  -webkit-margin-end: 1rem;
-          margin-inline-end: 1rem;
+:host .modal-size-840 {
+  width: 52.5rem;
 }
-:host .modal .modal-content .slot-container {
-  flex-grow: 1;
+:host .modal-size-full-width {
+  width: 95%;
 }
-@media (min-width: 576px) {
-  :host .modal .modal-dialog:not(.modal-dialog-centered) {
-    margin: 2.5rem auto;
-  }
+:host .dialog-backdrop {
+  display: block;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0px;
+  left: 0px;
+  pointer-events: none;
 }
-@media (max-width: 575.98px) {
-  :host .modal .modal-dialog {
-    height: 100%;
-    margin: 0;
-  }
-  :host .modal .modal-dialog .modal-content {
-    height: 100%;
-    border-radius: 0;
-  }
+
+:host(.align-center) dialog {
+  margin: 0;
+  left: 50%;
+  top: 50%;
 }
-@keyframes modal-fade {
-  from {
-    opacity: 0%;
-  }
-  to {
-    opacity: 100%;
-  }
+
+:host(.no-backdrop) dialog::backdrop {
+  background-color: transparent !important;
+  -webkit-backdrop-filter: none !important;
+          backdrop-filter: none !important;
 }
-@keyframes slide-down {
-  from {
-    top: -100%;
-  }
-  to {
-    top: 32px;
-  }
+
+:host(.with-icon) ::slotted(ix-modal-footer),
+:host(.with-icon) ::slotted(ix-modal-content) {
+  margin-left: 2.5rem;
 }