@siemens/ix 1.2.0 → 1.3.0-beta.0

package/dist/types/components/validation-tooltip/validation-tooltip.d.ts

@@ -1,5 +1,8 @@
-import '@popperjs/core';
-import { Placement } from '@popperjs/core';
+import { Placement } from '../dropdown/placement';
+declare type Position = {
+  x: number;
+  y: number;
+};
 /**
  * @slot tooltip-message - Custom tooltip message with html support
  */
@@ -14,14 +17,18 @@ export declare class ValidationTooltip {
    */
   placement: Placement;
   isInputValid: boolean;
-  private popper?;
+  tooltipPosition: Position;
+  arrowPosition: Position;
   private onSubmitBind;
   private onInputFocusBind;
+  private autoUpdateCleanup;
   private observer;
-  get arrow(): Element;
+  get arrow(): HTMLElement;
   get inputElement(): HTMLInputElement;
   get formElement(): HTMLFormElement;
   get tooltipElement(): HTMLElement;
+  private destoryAutoUpdate;
+  private applyTooltipPosition;
   componentDidLoad(): void;
   private onInputFocus;
   private onSubmit;
@@ -29,3 +36,4 @@ export declare class ValidationTooltip {
   validationChanged(): void;
   render(): any;
 }
+export {};

package/dist/types/components.d.ts

@@ -12,7 +12,7 @@ import { DateTimeCardCorners } from "./components/date-time-card/date-time-card"
 import { DateChangeEvent, LegacyDateChangeEvent } from "./components/date-picker/events";
 import { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card";
 import { DateTimeSelectEvent } from "./components/datetime-picker/event";
-import { Placement, PositioningStrategy } from "@popperjs/core";
+import { Placement } from "./components/dropdown/placement";
 import { FlipTileState } from "./components/flip-tile/flip-tile-state";
 import { NotificationColor } from "./components/utils/notification-color";
 import { ModalConfig, ModalInstance } from "./components/modal/modal-utils";
@@ -111,7 +111,7 @@ export namespace Components {
          */
         "outline": boolean;
         /**
-          * Show button as selected. Should be used with outline or invisible
+          * Show button as selected. Should be used with outline or ghost
          */
         "selected": boolean;
         /**
@@ -180,7 +180,7 @@ export namespace Components {
     }
     interface IxChip {
         /**
-          * Display chip in active state. Only works with `variant="primary"`
+          * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation) will be possible and also the close button will not be present.
          */
         "active": boolean;
         /**
@@ -412,6 +412,7 @@ export namespace Components {
     interface IxDropdown {
         /**
           * Adjust dropdown width to the parent width
+          * @deprecated Will be removed. Not used anymore
          */
         "adjustDropdownWidthToReferenceWidth": boolean;
         /**
@@ -431,6 +432,14 @@ export namespace Components {
           * An optional header shown at the top of the dropdown
          */
         "header"?: string;
+        /**
+          * Move dropdown along main axis of alignment
+         */
+        "offset": {
+    mainAxis?: number;
+    crossAxis?: number;
+    alignmentAxis?: number;
+  };
         /**
           * Placement of the dropdown
          */
@@ -438,7 +447,7 @@ export namespace Components {
         /**
           * Position strategy
          */
-        "positioningStrategy": PositioningStrategy;
+        "positioningStrategy": 'absolute' | 'fixed';
         /**
           * Show dropdown
          */
@@ -452,6 +461,36 @@ export namespace Components {
          */
         "updatePosition": () => Promise<void>;
     }
+    interface IxDropdownButton {
+        /**
+          * Active button
+         */
+        "active": boolean;
+        /**
+          * Disable button
+         */
+        "disabled": boolean;
+        /**
+          * Button with no background or outline
+         */
+        "ghost": boolean;
+        /**
+          * Button icon
+         */
+        "icon": string;
+        /**
+          * Set label
+         */
+        "label": string;
+        /**
+          * Outline button
+         */
+        "outline": boolean;
+        /**
+          * Button varaint
+         */
+        "variant": Buttons;
+    }
     interface IxDropdownItem {
         /**
           * Whether the item is checked or not. If true a checkmark will mark the item as checked.
@@ -1071,16 +1110,12 @@ export namespace Components {
         "selectedIndices": string | string[];
     }
     interface IxSelectItem {
-        /**
-          * ***Internal***
-         */
         "hover": boolean;
         /**
           * Displayed name of the item
          */
         "label": string;
         /**
-          * Internal
           * @param event
          */
         "onItemClick": (event?: CustomEvent<HTMLIxDropdownItemElement>) => Promise<void>;
@@ -1341,7 +1376,7 @@ export namespace Components {
          */
         "context": TreeContext;
         /**
-          * Tree modal
+          * Tree model
          */
         "model": TreeModel<any>;
         /**
@@ -1722,6 +1757,12 @@ declare global {
         prototype: HTMLIxDropdownElement;
         new (): HTMLIxDropdownElement;
     };
+    interface HTMLIxDropdownButtonElement extends Components.IxDropdownButton, HTMLStencilElement {
+    }
+    var HTMLIxDropdownButtonElement: {
+        prototype: HTMLIxDropdownButtonElement;
+        new (): HTMLIxDropdownButtonElement;
+    };
     interface HTMLIxDropdownItemElement extends Components.IxDropdownItem, HTMLStencilElement {
     }
     var HTMLIxDropdownItemElement: {
@@ -2039,6 +2080,7 @@ declare global {
         "ix-datetime-picker": HTMLIxDatetimePickerElement;
         "ix-drawer": HTMLIxDrawerElement;
         "ix-dropdown": HTMLIxDropdownElement;
+        "ix-dropdown-button": HTMLIxDropdownButtonElement;
         "ix-dropdown-item": HTMLIxDropdownItemElement;
         "ix-event-list": HTMLIxEventListElement;
         "ix-event-list-item": HTMLIxEventListItemElement;
@@ -2197,7 +2239,7 @@ declare namespace LocalJSX {
          */
         "outline"?: boolean;
         /**
-          * Show button as selected. Should be used with outline or invisible
+          * Show button as selected. Should be used with outline or ghost
          */
         "selected"?: boolean;
         /**
@@ -2273,7 +2315,7 @@ declare namespace LocalJSX {
     }
     interface IxChip {
         /**
-          * Display chip in active state. Only works with `variant="primary"`
+          * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation) will be possible and also the close button will not be present.
          */
         "active"?: boolean;
         /**
@@ -2547,6 +2589,7 @@ declare namespace LocalJSX {
     interface IxDropdown {
         /**
           * Adjust dropdown width to the parent width
+          * @deprecated Will be removed. Not used anymore
          */
         "adjustDropdownWidthToReferenceWidth"?: boolean;
         /**
@@ -2577,7 +2620,7 @@ declare namespace LocalJSX {
         /**
           * Position strategy
          */
-        "positioningStrategy"?: PositioningStrategy;
+        "positioningStrategy"?: 'absolute' | 'fixed';
         /**
           * Show dropdown
          */
@@ -2587,6 +2630,36 @@ declare namespace LocalJSX {
          */
         "trigger"?: string | HTMLElement;
     }
+    interface IxDropdownButton {
+        /**
+          * Active button
+         */
+        "active"?: boolean;
+        /**
+          * Disable button
+         */
+        "disabled"?: boolean;
+        /**
+          * Button with no background or outline
+         */
+        "ghost"?: boolean;
+        /**
+          * Button icon
+         */
+        "icon"?: string;
+        /**
+          * Set label
+         */
+        "label"?: string;
+        /**
+          * Outline button
+         */
+        "outline"?: boolean;
+        /**
+          * Button varaint
+         */
+        "variant"?: Buttons;
+    }
     interface IxDropdownItem {
         /**
           * Whether the item is checked or not. If true a checkmark will mark the item as checked.
@@ -3249,10 +3322,6 @@ declare namespace LocalJSX {
         "selectedIndices"?: string | string[];
     }
     interface IxSelectItem {
-        /**
-          * ***Internal***
-         */
-        "hover"?: boolean;
         /**
           * Displayed name of the item
          */
@@ -3533,7 +3602,7 @@ declare namespace LocalJSX {
          */
         "context"?: TreeContext;
         /**
-          * Tree modal
+          * Tree model
          */
         "model"?: TreeModel<any>;
         /**
@@ -3708,6 +3777,7 @@ declare namespace LocalJSX {
         "ix-datetime-picker": IxDatetimePicker;
         "ix-drawer": IxDrawer;
         "ix-dropdown": IxDropdown;
+        "ix-dropdown-button": IxDropdownButton;
         "ix-dropdown-item": IxDropdownItem;
         "ix-event-list": IxEventList;
         "ix-event-list-item": IxEventListItem;
@@ -3780,6 +3850,7 @@ declare module "@stencil/core" {
             "ix-datetime-picker": LocalJSX.IxDatetimePicker & JSXBase.HTMLAttributes<HTMLIxDatetimePickerElement>;
             "ix-drawer": LocalJSX.IxDrawer & JSXBase.HTMLAttributes<HTMLIxDrawerElement>;
             "ix-dropdown": LocalJSX.IxDropdown & JSXBase.HTMLAttributes<HTMLIxDropdownElement>;
+            "ix-dropdown-button": LocalJSX.IxDropdownButton & JSXBase.HTMLAttributes<HTMLIxDropdownButtonElement>;
             "ix-dropdown-item": LocalJSX.IxDropdownItem & JSXBase.HTMLAttributes<HTMLIxDropdownItemElement>;
             "ix-event-list": LocalJSX.IxEventList & JSXBase.HTMLAttributes<HTMLIxEventListElement>;
             "ix-event-list-item": LocalJSX.IxEventListItem & JSXBase.HTMLAttributes<HTMLIxEventListItemElement>;

package/dist/types/exports.d.ts

@@ -5,3 +5,4 @@ export * from './components/toast/toast-utils';
 export * from './components/tree-item/default-tree-item';
 export * from './components/tree/tree-model';
 export * from './components/upload/upload-file-state';
+export * from './components/utils/theme-switcher';

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "1.2.0",
+  "version": "1.3.0-beta.0",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "main": "dist/index.cjs.js",
@@ -23,12 +23,11 @@
     "README.md",
     "dist/",
     "loader/",
-    "src/**/*.md",
     "scss/"
   ],
   "scripts": {
-    "build": "stencil build --docs --prod",
-    "build:dev": "stencil build --docs",
+    "build": "stencil build --prod",
+    "build:dev": "stencil build",
     "lint": "eslint src/**/*{.ts,.tsx}",
     "start": "stencil build --dev --watch --serve",
     "dev": "stencil build --watch",
@@ -43,6 +42,7 @@
     "generate:theme": "ts-node -P ./scripts/generate-theme/tsconfig.json ./scripts/generate-theme/generate-theme"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.0.6",
     "@stencil/core": "~2.19.2",
     "animejs": "~3.2.1",
     "hyperlist": "^1.0.0",
@@ -50,7 +50,6 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.24.1",
-    "@popperjs/core": "~2.11.0",
     "@siemens/ix-icons": "~1.0.0",
     "@stencil/angular-output-target": "^0.4.0",
     "@stencil/eslint-plugin": "^0.4.0",
@@ -68,7 +67,7 @@
     "@typescript-eslint/parser": "^4.33.0",
     "animate.css": "~4.1.1",
     "autoprefixer": "10.4.5",
-    "bootstrap": "~5.2.0",
+    "bootstrap": "^5.2.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint-config-ix": "*",
     "eslint-plugin-react": "^7.26.1",

package/scss/components/_buttons.scss

@@ -153,3 +153,26 @@ $button-categories: (primary, secondary);
   border-radius: 6.25rem;
   width: $default-control-height;
 }
+
+.btn-icon-xs,
+.btn-icon-12 {
+  height: $default-space;
+  width: $default-space;
+  min-width: $default-space;
+  min-height: $default-space;
+}
+
+.btn-icon-s,
+.btn-icon-16 {
+  height: $large-space;
+  width: $large-space;
+  min-width: $large-space;
+  min-height: $large-space;
+}
+
+.btn-icon-32 {
+  height: $x-large-space;
+  width: $x-large-space;
+  min-width: $x-large-space;
+  min-height: $x-large-space;
+}

package/scss/components/_dropdown.scss

@@ -60,6 +60,8 @@
 }
 
 .dropdown-menu {
+  position: absolute;
+
   max-height: 50vh;
   overflow-y: auto;