@siemens/ix 2.0.0-beta.1 → 2.0.0

package/dist/types/components.d.ts

@@ -8,6 +8,7 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { ActionCardVariant } from "./components/action-card/action-card";
 import { IxTheme } from "./components/utils/theme-switcher";
 import { Breakpoint } from "./components/utils/breakpoints";
+import { BlindVariant } from "./components/blind/blind";
 import { ButtonVariant } from "./components/button/button";
 import { CardVariant } from "./components/card/card";
 import { CardAccordionExpandChangeEvent } from "./components/card-accordion/card-accordion";
@@ -30,6 +31,7 @@ import { ButtonVariant as ButtonVariant1 } from "./components/button/button";
 import { KeyValueLabelPosition } from "./components/key-value/key-value";
 import { IxModalSize } from "./components/modal/modal";
 import { PushCardVariant } from "./components/push-card/push-card";
+import { SliderMarker } from "./components/slider/slider";
 import { SplitButtonVariant } from "./components/split-button/split-button";
 import { TabClickDetail } from "./components/tab-item/tab-item";
 import { TimePickerCorners } from "./components/time-picker/time-picker";
@@ -41,6 +43,7 @@ import { UploadFileState } from "./components/upload/upload-file-state";
 export { ActionCardVariant } from "./components/action-card/action-card";
 export { IxTheme } from "./components/utils/theme-switcher";
 export { Breakpoint } from "./components/utils/breakpoints";
+export { BlindVariant } from "./components/blind/blind";
 export { ButtonVariant } from "./components/button/button";
 export { CardVariant } from "./components/card/card";
 export { CardAccordionExpandChangeEvent } from "./components/card-accordion/card-accordion";
@@ -63,6 +66,7 @@ export { ButtonVariant as ButtonVariant1 } from "./components/button/button";
 export { KeyValueLabelPosition } from "./components/key-value/key-value";
 export { IxModalSize } from "./components/modal/modal";
 export { PushCardVariant } from "./components/push-card/push-card";
+export { SliderMarker } from "./components/slider/slider";
 export { SplitButtonVariant } from "./components/split-button/split-button";
 export { TabClickDetail } from "./components/tab-item/tab-item";
 export { TimePickerCorners } from "./components/time-picker/time-picker";
@@ -173,6 +177,11 @@ export namespace Components {
           * @since 2.0.0
          */
         "sublabel": string;
+        /**
+          * Blind variant
+          * @since 2.0.0
+         */
+        "variant": BlindVariant;
     }
     interface IxBreadcrumb {
         /**
@@ -393,7 +402,7 @@ export namespace Components {
         /**
           * Show icon
          */
-        "icon": string | undefined;
+        "icon": string;
         /**
           * Show chip with outline style
          */
@@ -639,7 +648,7 @@ export namespace Components {
          */
         "anchor": string | HTMLElement;
         /**
-          * Close behavior
+          * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
          */
         "closeBehavior": 'inside' | 'outside' | 'both' | boolean;
         /**
@@ -692,11 +701,6 @@ export namespace Components {
      * @since 1.3.0
      */
     interface IxDropdownButton {
-        /**
-          * Active button (has no effect)
-          * @deprecated Will be removed in 3.0.0
-         */
-        "active": boolean;
         /**
           * Disable button
          */
@@ -826,11 +830,6 @@ export namespace Components {
           * Disable event list item
          */
         "disabled": boolean;
-        /**
-          * Opacity of the status indicator. Defaults to 1.0
-          * @deprecated Will be removed in 2.0.0
-         */
-        "opacity": number;
         /**
           * Show event list item as selected
          */
@@ -894,23 +893,6 @@ export namespace Components {
          */
         "label": string;
     }
-    /**
-     * @since 2.0.0
-     */
-    interface IxGrid {
-        /**
-          * Overwrite the default number of columns. Choose between 2 and 12 columns.
-         */
-        "columns": number;
-        /**
-          * The grid will not have any horizontal padding
-         */
-        "noPadding": boolean;
-        /**
-          * Remove the gap between rows
-         */
-        "noRowGap": boolean;
-    }
     interface IxGroup {
         /**
           * Whether the group is collapsed or expanded. Defaults to true.
@@ -1093,6 +1075,23 @@ export namespace Components {
         "unit": string;
         "value": string | number;
     }
+    /**
+     * @since 2.0.0
+     */
+    interface IxLayoutGrid {
+        /**
+          * Overwrite the default number of columns. Choose between 2 and 12 columns.
+         */
+        "columns": number;
+        /**
+          * Grid gap
+         */
+        "gap": '8' | '12' | '16' | '24';
+        /**
+          * The grid will not have any horizontal padding
+         */
+        "noMargin": boolean;
+    }
     /**
      * @since 2.0.0
      */
@@ -1347,7 +1346,7 @@ export namespace Components {
         "notifications": number;
         /**
           * Icon name from @siemens/ix-icons
-          * @deprecated Use `icon` property. Will be removed in 3.0.0
+          * @deprecated since 2.0.0 use `icon` property. Will be removed in 3.0.0
          */
         "tabIcon": string;
     }
@@ -1630,6 +1629,48 @@ export namespace Components {
          */
         "value": any;
     }
+    /**
+     * @since 2.0.0
+     */
+    interface IxSlider {
+        /**
+          * Show control as disabled
+         */
+        "disabled": boolean;
+        /**
+          * Show error state and message
+         */
+        "error": boolean | string;
+        /**
+          * Define tick marker on the slider. Marker has to be within slider min/max
+         */
+        "marker": SliderMarker;
+        /**
+          * Maximum slider value
+         */
+        "max": number;
+        /**
+          * Minimum slider value
+         */
+        "min": number;
+        /**
+          * Legal number intervals
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step
+         */
+        "step": number;
+        /**
+          * Show a trace line
+         */
+        "trace": boolean;
+        /**
+          * Define the start point of the trace line
+         */
+        "traceReference": number;
+        /**
+          * Current value of the slider
+         */
+        "value": number;
+    }
     interface IxSpinner {
         "hideTrack": boolean;
         /**
@@ -1675,6 +1716,9 @@ export namespace Components {
          */
         "variant": SplitButtonVariant;
     }
+    /**
+     * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.
+     */
     interface IxSplitButtonItem {
         /**
           * Dropdown icon
@@ -1900,10 +1944,12 @@ export namespace Components {
      * @since 1.4.0
      */
     interface IxTooltip {
+        "animationFrame": boolean;
         /**
           * CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"`
          */
         "for": string;
+        "hideTooltip": () => Promise<void>;
         /**
           * Define if the user can access the tooltip via mouse.
          */
@@ -1913,6 +1959,7 @@ export namespace Components {
           * @since 1.5.0
          */
         "placement": 'top' | 'right' | 'bottom' | 'left';
+        "showTooltip": (anchorElement: any) => Promise<void>;
         /**
           * Title of the tooltip
          */
@@ -2227,6 +2274,10 @@ export interface IxSelectItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxSelectItemElement;
 }
+export interface IxSliderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxSliderElement;
+}
 export interface IxSplitButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxSplitButtonElement;
@@ -2565,15 +2616,6 @@ declare global {
         prototype: HTMLIxFormFieldElement;
         new (): HTMLIxFormFieldElement;
     };
-    /**
-     * @since 2.0.0
-     */
-    interface HTMLIxGridElement extends Components.IxGrid, HTMLStencilElement {
-    }
-    var HTMLIxGridElement: {
-        prototype: HTMLIxGridElement;
-        new (): HTMLIxGridElement;
-    };
     interface HTMLIxGroupElement extends Components.IxGroup, HTMLStencilElement {
     }
     var HTMLIxGroupElement: {
@@ -2637,6 +2679,15 @@ declare global {
         prototype: HTMLIxKpiElement;
         new (): HTMLIxKpiElement;
     };
+    /**
+     * @since 2.0.0
+     */
+    interface HTMLIxLayoutGridElement extends Components.IxLayoutGrid, HTMLStencilElement {
+    }
+    var HTMLIxLayoutGridElement: {
+        prototype: HTMLIxLayoutGridElement;
+        new (): HTMLIxLayoutGridElement;
+    };
     /**
      * @since 2.0.0
      */
@@ -2817,6 +2868,15 @@ declare global {
         prototype: HTMLIxSelectItemElement;
         new (): HTMLIxSelectItemElement;
     };
+    /**
+     * @since 2.0.0
+     */
+    interface HTMLIxSliderElement extends Components.IxSlider, HTMLStencilElement {
+    }
+    var HTMLIxSliderElement: {
+        prototype: HTMLIxSliderElement;
+        new (): HTMLIxSliderElement;
+    };
     interface HTMLIxSpinnerElement extends Components.IxSpinner, HTMLStencilElement {
     }
     var HTMLIxSpinnerElement: {
@@ -2829,6 +2889,9 @@ declare global {
         prototype: HTMLIxSplitButtonElement;
         new (): HTMLIxSplitButtonElement;
     };
+    /**
+     * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.
+     */
     interface HTMLIxSplitButtonItemElement extends Components.IxSplitButtonItem, HTMLStencilElement {
     }
     var HTMLIxSplitButtonItemElement: {
@@ -2988,7 +3051,6 @@ declare global {
         "ix-flip-tile": HTMLIxFlipTileElement;
         "ix-flip-tile-content": HTMLIxFlipTileContentElement;
         "ix-form-field": HTMLIxFormFieldElement;
-        "ix-grid": HTMLIxGridElement;
         "ix-group": HTMLIxGroupElement;
         "ix-group-context-menu": HTMLIxGroupContextMenuElement;
         "ix-group-item": HTMLIxGroupItemElement;
@@ -2998,6 +3060,7 @@ declare global {
         "ix-key-value": HTMLIxKeyValueElement;
         "ix-key-value-list": HTMLIxKeyValueListElement;
         "ix-kpi": HTMLIxKpiElement;
+        "ix-layout-grid": HTMLIxLayoutGridElement;
         "ix-link-button": HTMLIxLinkButtonElement;
         "ix-map-navigation": HTMLIxMapNavigationElement;
         "ix-map-navigation-overlay": HTMLIxMapNavigationOverlayElement;
@@ -3024,6 +3087,7 @@ declare global {
         "ix-row": HTMLIxRowElement;
         "ix-select": HTMLIxSelectElement;
         "ix-select-item": HTMLIxSelectItemElement;
+        "ix-slider": HTMLIxSliderElement;
         "ix-spinner": HTMLIxSpinnerElement;
         "ix-split-button": HTMLIxSplitButtonElement;
         "ix-split-button-item": HTMLIxSplitButtonItemElement;
@@ -3152,6 +3216,11 @@ declare namespace LocalJSX {
           * @since 2.0.0
          */
         "sublabel"?: string;
+        /**
+          * Blind variant
+          * @since 2.0.0
+         */
+        "variant"?: BlindVariant;
     }
     interface IxBreadcrumb {
         /**
@@ -3397,12 +3466,7 @@ declare namespace LocalJSX {
         /**
           * Show icon
          */
-        "icon"?: string | undefined;
-        /**
-          * Fire event if close button is clicked
-          * @deprecated Will be removed in 2.0.0. Use `closeChip`
-         */
-        "onClose"?: (event: IxChipCustomEvent<any>) => void;
+        "icon"?: string;
         /**
           * Fire event if close button is clicked
           * @since 1.5.0
@@ -3695,7 +3759,7 @@ declare namespace LocalJSX {
          */
         "anchor"?: string | HTMLElement;
         /**
-          * Close behavior
+          * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
          */
         "closeBehavior"?: 'inside' | 'outside' | 'both' | boolean;
         /**
@@ -3732,11 +3796,6 @@ declare namespace LocalJSX {
      * @since 1.3.0
      */
     interface IxDropdownButton {
-        /**
-          * Active button (has no effect)
-          * @deprecated Will be removed in 3.0.0
-         */
-        "active"?: boolean;
         /**
           * Disable button
          */
@@ -3797,10 +3856,6 @@ declare namespace LocalJSX {
           * Label of dropdown item
          */
         "label"?: string;
-        /**
-          * Click on item
-         */
-        "onItemClick"?: (event: IxDropdownItemCustomEvent<HTMLIxDropdownItemElement>) => void;
     }
     /**
      * @since 1.4.0
@@ -3872,11 +3927,6 @@ declare namespace LocalJSX {
           * Event list item click
          */
         "onItemClick"?: (event: IxEventListItemCustomEvent<any>) => void;
-        /**
-          * Opacity of the status indicator. Defaults to 1.0
-          * @deprecated Will be removed in 2.0.0
-         */
-        "opacity"?: number;
         /**
           * Show event list item as selected
          */
@@ -3944,23 +3994,6 @@ declare namespace LocalJSX {
          */
         "label"?: string;
     }
-    /**
-     * @since 2.0.0
-     */
-    interface IxGrid {
-        /**
-          * Overwrite the default number of columns. Choose between 2 and 12 columns.
-         */
-        "columns"?: number;
-        /**
-          * The grid will not have any horizontal padding
-         */
-        "noPadding"?: boolean;
-        /**
-          * Remove the gap between rows
-         */
-        "noRowGap"?: boolean;
-    }
     interface IxGroup {
         /**
           * Whether the group is collapsed or expanded. Defaults to true.
@@ -4163,6 +4196,23 @@ declare namespace LocalJSX {
         "unit"?: string;
         "value"?: string | number;
     }
+    /**
+     * @since 2.0.0
+     */
+    interface IxLayoutGrid {
+        /**
+          * Overwrite the default number of columns. Choose between 2 and 12 columns.
+         */
+        "columns"?: number;
+        /**
+          * Grid gap
+         */
+        "gap"?: '8' | '12' | '16' | '24';
+        /**
+          * The grid will not have any horizontal padding
+         */
+        "noMargin"?: boolean;
+    }
     /**
      * @since 2.0.0
      */
@@ -4420,7 +4470,7 @@ declare namespace LocalJSX {
         "notifications"?: number;
         /**
           * Icon name from @siemens/ix-icons
-          * @deprecated Use `icon` property. Will be removed in 3.0.0
+          * @deprecated since 2.0.0 use `icon` property. Will be removed in 3.0.0
          */
         "tabIcon"?: string;
     }
@@ -4740,6 +4790,49 @@ declare namespace LocalJSX {
          */
         "value": any;
     }
+    /**
+     * @since 2.0.0
+     */
+    interface IxSlider {
+        /**
+          * Show control as disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * Show error state and message
+         */
+        "error"?: boolean | string;
+        /**
+          * Define tick marker on the slider. Marker has to be within slider min/max
+         */
+        "marker"?: SliderMarker;
+        /**
+          * Maximum slider value
+         */
+        "max"?: number;
+        /**
+          * Minimum slider value
+         */
+        "min"?: number;
+        "onValueChange"?: (event: IxSliderCustomEvent<number>) => void;
+        /**
+          * Legal number intervals
+          * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step
+         */
+        "step"?: number;
+        /**
+          * Show a trace line
+         */
+        "trace"?: boolean;
+        /**
+          * Define the start point of the trace line
+         */
+        "traceReference"?: number;
+        /**
+          * Current value of the slider
+         */
+        "value"?: number;
+    }
     interface IxSpinner {
         /**
           * Size of spinner
@@ -4788,6 +4881,9 @@ declare namespace LocalJSX {
          */
         "variant"?: SplitButtonVariant;
     }
+    /**
+     * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.
+     */
     interface IxSplitButtonItem {
         /**
           * Dropdown icon
@@ -5290,7 +5386,6 @@ declare namespace LocalJSX {
         "ix-flip-tile": IxFlipTile;
         "ix-flip-tile-content": IxFlipTileContent;
         "ix-form-field": IxFormField;
-        "ix-grid": IxGrid;
         "ix-group": IxGroup;
         "ix-group-context-menu": IxGroupContextMenu;
         "ix-group-item": IxGroupItem;
@@ -5300,6 +5395,7 @@ declare namespace LocalJSX {
         "ix-key-value": IxKeyValue;
         "ix-key-value-list": IxKeyValueList;
         "ix-kpi": IxKpi;
+        "ix-layout-grid": IxLayoutGrid;
         "ix-link-button": IxLinkButton;
         "ix-map-navigation": IxMapNavigation;
         "ix-map-navigation-overlay": IxMapNavigationOverlay;
@@ -5326,6 +5422,7 @@ declare namespace LocalJSX {
         "ix-row": IxRow;
         "ix-select": IxSelect;
         "ix-select-item": IxSelectItem;
+        "ix-slider": IxSlider;
         "ix-spinner": IxSpinner;
         "ix-split-button": IxSplitButton;
         "ix-split-button-item": IxSplitButtonItem;
@@ -5432,10 +5529,6 @@ declare module "@stencil/core" {
             "ix-flip-tile": LocalJSX.IxFlipTile & JSXBase.HTMLAttributes<HTMLIxFlipTileElement>;
             "ix-flip-tile-content": LocalJSX.IxFlipTileContent & JSXBase.HTMLAttributes<HTMLIxFlipTileContentElement>;
             "ix-form-field": LocalJSX.IxFormField & JSXBase.HTMLAttributes<HTMLIxFormFieldElement>;
-            /**
-             * @since 2.0.0
-             */
-            "ix-grid": LocalJSX.IxGrid & JSXBase.HTMLAttributes<HTMLIxGridElement>;
             "ix-group": LocalJSX.IxGroup & JSXBase.HTMLAttributes<HTMLIxGroupElement>;
             "ix-group-context-menu": LocalJSX.IxGroupContextMenu & JSXBase.HTMLAttributes<HTMLIxGroupContextMenuElement>;
             "ix-group-item": LocalJSX.IxGroupItem & JSXBase.HTMLAttributes<HTMLIxGroupItemElement>;
@@ -5454,6 +5547,10 @@ declare module "@stencil/core" {
              */
             "ix-key-value-list": LocalJSX.IxKeyValueList & JSXBase.HTMLAttributes<HTMLIxKeyValueListElement>;
             "ix-kpi": LocalJSX.IxKpi & JSXBase.HTMLAttributes<HTMLIxKpiElement>;
+            /**
+             * @since 2.0.0
+             */
+            "ix-layout-grid": LocalJSX.IxLayoutGrid & JSXBase.HTMLAttributes<HTMLIxLayoutGridElement>;
             /**
              * @since 2.0.0
              */
@@ -5504,8 +5601,15 @@ declare module "@stencil/core" {
             "ix-row": LocalJSX.IxRow & JSXBase.HTMLAttributes<HTMLIxRowElement>;
             "ix-select": LocalJSX.IxSelect & JSXBase.HTMLAttributes<HTMLIxSelectElement>;
             "ix-select-item": LocalJSX.IxSelectItem & JSXBase.HTMLAttributes<HTMLIxSelectItemElement>;
+            /**
+             * @since 2.0.0
+             */
+            "ix-slider": LocalJSX.IxSlider & JSXBase.HTMLAttributes<HTMLIxSliderElement>;
             "ix-spinner": LocalJSX.IxSpinner & JSXBase.HTMLAttributes<HTMLIxSpinnerElement>;
             "ix-split-button": LocalJSX.IxSplitButton & JSXBase.HTMLAttributes<HTMLIxSplitButtonElement>;
+            /**
+             * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.
+             */
             "ix-split-button-item": LocalJSX.IxSplitButtonItem & JSXBase.HTMLAttributes<HTMLIxSplitButtonItemElement>;
             "ix-tab-item": LocalJSX.IxTabItem & JSXBase.HTMLAttributes<HTMLIxTabItemElement>;
             "ix-tabs": LocalJSX.IxTabs & JSXBase.HTMLAttributes<HTMLIxTabsElement>;

package/dist/types/index.d.ts

@@ -1,4 +1,3 @@
-import '@siemens/ix-icons';
 import type { Components as IxIconsComponents, JSX as IxIconsJSX } from '@siemens/ix-icons';
 export * from './components';
 export * from './components/category-filter/filter-state';

package/dist/types/setup.d.ts

@@ -0,0 +1 @@
+export default function (): Promise<void>;

package/dist/types/tests/utils/test/index.d.ts

@@ -1 +1,15 @@
 export * from './page';
+export declare const viewPorts: {
+  readonly sm: {
+    readonly height: 800;
+    readonly width: 360;
+  };
+  readonly md: {
+    readonly height: 768;
+    readonly width: 1024;
+  };
+  readonly lg: {
+    readonly height: 1080;
+    readonly width: 1920;
+  };
+};

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "main": "dist/index.cjs.js",
@@ -21,6 +21,7 @@
   "files": [
     "LICENSE",
     "README.md",
+    "components/",
     "dist/",
     "loader/",
     "scss/"
@@ -52,7 +53,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.32.1",
-    "@siemens/ix-icons": "^1.1.0",
+    "@siemens/ix-icons": "^2.0.0",
     "@stencil-community/eslint-plugin": "^0.5.0",
     "@stencil-community/postcss": "^2.1.0",
     "@stencil/angular-output-target": "^0.5.0",
@@ -87,7 +88,8 @@
   },
   "peerDependencies": {
     "@popperjs/core": "^2.11.0",
-    "bootstrap": "~5.2.0"
+    "bootstrap": "~5.2.0",
+    "@siemens/ix-icons": "^2.0.0"
   },
   "config": {
     "commitizen": {

package/scss/_core.scss

@@ -31,6 +31,7 @@
 @import 'legacy/components/button-group';
 @import 'legacy/components/dropdown';
 @import 'legacy/components/forms';
+@import './components/form/input';
 @import './components/links';
 @import './components/checkboxes';
 @import './components/radiobuttons';

package/scss/components/_radiobuttons.scss

@@ -110,7 +110,7 @@
       background-color: var(--theme-radiobtn-checked--color);
       border-radius: 100%;
       position: absolute;
-      top: 0.3125rem;
+      top: 0.4125rem;
       left: 0.3125rem;
     }
 

package/scss/components/form/_input.scss

@@ -59,6 +59,13 @@
         solid
         var(--theme-input--border-color-bottom--readonly);
     }
+
+    &.read-only,
+    &:read-only {
+      &::placeholder {
+        color: transparent;
+      }
+    }
   }
 
   &:disabled {
@@ -70,6 +77,10 @@
     border-bottom: var(--theme-input--border-thickness, 1px) solid
       var(--theme-input--border-color-bottom--disabled);
   }
+
+  &:disabled::placeholder {
+    color: transparent;
+  }
 }
 
 @mixin element-textarea {
@@ -80,6 +91,11 @@
 @mixin form {
   label {
     color: var(--theme-color-soft-text);
+    padding: 2px 0px;
+  }
+
+  label.label-alignment-left {
+    padding: 6px 0px;
   }
 
   input {
@@ -138,14 +154,14 @@
 
     :invalid,
     .is-invalid {
-      ~ .invalid-feedback {
+      & ~ .invalid-feedback {
         display: block;
       }
     }
 
     :valid,
     .is-valid {
-      ~ .valid-feedback {
+      & ~ .valid-feedback {
         display: block;
       }
     }