@siemens/ix 1.3.0 → 1.4.0-beta.1

package/dist/collection/components/basic-navigation/basic-navigation.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,14 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from '@stencil/core';
+import { screenMode } from '../utils/screen/service';
 export class BasicNavigation {
   constructor() {
     this.applicationName = undefined;
     this.hideHeader = false;
+    this.mode = 'desktop';
   }
   get menu() {
     return this.hostElement.querySelector('ix-menu');
   }
+  componentWillLoad() {
+    if (this.hideHeader === false) {
+      this.modeDisposable = screenMode.onChange.on((mode) => (this.mode = mode));
+      this.mode = screenMode.mode;
+    }
+  }
   componentDidRender() {
     if (this.menu) {
       this.appendMenu();
@@ -22,6 +30,10 @@ export class BasicNavigation {
       this.menu.applicationName = this.applicationName;
     }
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+  }
   appendMenu() {
     this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);
   }
@@ -31,8 +43,9 @@ export class BasicNavigation {
     }
   }
   render() {
-    return (h(Host, { class: {
+    return (h(Host, { "data-role": "", class: {
         'hide-header': this.hideHeader,
+        [`mode-${this.mode}`]: true,
       } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo" }))) : null, h("div", { id: "menu-placeholder" }), h("div", { class: "content", onClick: () => this.menu.toggleMenu(false) }, h("slot", null))));
   }
   static get is() { return "ix-basic-navigation"; }
@@ -78,7 +91,7 @@ export class BasicNavigation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Hide application header"
+          "text": "Hide application header. Will disable responsive feature of basic navigation."
         },
         "attribute": "hide-header",
         "reflect": false,
@@ -86,5 +99,10 @@ export class BasicNavigation {
       }
     };
   }
+  static get states() {
+    return {
+      "mode": {}
+    };
+  }
   static get elementRef() { return "hostElement"; }
 }

package/dist/collection/components/blind/blind.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -35,7 +35,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -134,7 +134,6 @@
 :host .blind-content {
   display: block;
   padding: 1rem;
-  max-height: 1;
   transition-property: padding;
   transition-duration: 150ms;
   transition-timing-function: ease-in;

package/dist/collection/components/blind/blind.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/breadcrumb-item/breadcrumb-item.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/breadcrumb-item/breadcrumb-item.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/button/base-button.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/button/button.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -8,8 +8,13 @@
  */
 :host {
   display: inline-block;
+  width: auto;
   height: 2rem;
 }
-:host.button-disabled {
+:host.disabled {
   pointer-events: none;
+}
+:host .btn {
+  width: 100%;
+  height: 100%;
 }

package/dist/collection/components/button/button.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -20,7 +20,7 @@ export class Button {
   }
   render() {
     return (h(Host, { class: {
-        'button-disabled': this.disabled,
+        disabled: this.disabled,
       } }, h("button", { type: this.type, class: getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, false, false, this.selected, this.disabled) }, h("slot", null))));
   }
   static get is() { return "ix-button"; }
@@ -46,7 +46,7 @@ export class Button {
           "references": {
             "Buttons": {
               "location": "import",
-              "path": "../utils/button-variants"
+              "path": "./button-variants"
             }
           }
         },

package/dist/collection/components/category-filter/category-filter.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -19,7 +19,7 @@
 /* Line heights */
 /* Animation timings */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -27,7 +27,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -35,7 +35,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -43,7 +43,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2022 Siemens AG
+ * SPDX-FileCopyrightText: 2023 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -130,20 +130,22 @@
   padding: 0.5rem;
   margin: 2px 0;
 }
-:host .category-selection-container {
-  box-shadow: var(--theme-box-shadow-level-1);
-  background: var(--theme-color-1);
-  position: absolute;
-  top: 2rem;
-  overflow-y: auto;
-  min-width: 10rem;
-  border: var(--theme-std-bdr-1);
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  z-index: 1;
+:host ul {
+  height: 100%;
+}
+:host ul > li,
+:host input {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+:host ix-dropdown {
+  min-width: 10rem !important;
+}
+:host ix-dropdown .dropdown-item-container {
+  display: flex;
+  flex-direction: column;
 }
-:host .category-selection-container .category-item,
-:host .category-selection-container .category-item-header {
+:host ix-dropdown .dropdown-item-container .dropdown-item {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smooting: grayscale;
   font-family: Siemens Sans, sans-serif;
@@ -154,35 +156,20 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  height: 2rem;
-  padding: 0.5rem;
-}
-:host .category-selection-container .category-item-header {
-  color: var(--theme-color-soft-text);
-}
-:host .category-selection-container .category-item-id {
-  border-top-left-radius: 1rem;
-  border-bottom-left-radius: 1rem;
-}
-:host .category-selection-container .category-item-value {
-  border-top-right-radius: 1rem;
-  border-bottom-right-radius: 1rem;
-}
-:host .category-selection-container .category-item {
-  cursor: pointer;
-}
-:host .category-selection-container .category-item:focus {
-  background-color: var(--theme-generic-bg-active);
-  outline: none;
-}
-:host .category-selection-container .plain-text-suggestion {
-  border-radius: 1rem;
-}
-:host ul {
-  height: 100%;
-}
-:host ul > li,
-:host input {
-  padding-top: 2px;
-  padding-bottom: 2px;
+  height: 2.5rem;
+  margin: 0.25rem 0.5rem;
+  padding-inline: 0.5rem;
+  border-radius: 100rem;
+  width: auto;
+}
+:host ix-dropdown .dropdown-item-container .category-item {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+}
+:host ix-dropdown .dropdown-item-container .category-item-value {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+:host ix-dropdown .btn-toggle-operator {
+  margin-inline: 0.5rem;
 }