@siemens/ix 0.0.0-20240419081748 → 0.0.0-20240522073858

package/dist/types/components.d.ts

@@ -14,6 +14,7 @@ import { ButtonVariant } from "./components/button/button";
 import { CardVariant } from "./components/card/card";
 import { CardAccordionExpandChangeEvent } from "./components/card-accordion/card-accordion";
 import { FilterState } from "./components/category-filter/filter-state";
+import { LogicalFilterOperator } from "./components/category-filter/logical-filter-operator";
 import { InputState } from "./components/category-filter/input-state";
 import { ColumnSize } from "./components/col/col";
 import { ContentHeaderVariant } from "./components/content-header/content-header";
@@ -53,6 +54,7 @@ export { ButtonVariant } from "./components/button/button";
 export { CardVariant } from "./components/card/card";
 export { CardAccordionExpandChangeEvent } from "./components/card-accordion/card-accordion";
 export { FilterState } from "./components/category-filter/filter-state";
+export { LogicalFilterOperator } from "./components/category-filter/logical-filter-operator";
 export { InputState } from "./components/category-filter/input-state";
 export { ColumnSize } from "./components/col/col";
 export { ContentHeaderVariant } from "./components/content-header/content-header";
@@ -274,6 +276,7 @@ export namespace Components {
         "type": 'button' | 'submit';
         /**
           * Button variant
+          * @since 2.3.0 - variant danger
          */
         "variant": ButtonVariant;
     }
@@ -404,6 +407,11 @@ export namespace Components {
           * If set to true allows that a single category can be set more than once. An already set category will not appear in the category dropdown if set to false.  Defaults to true
          */
         "repeatCategories": boolean;
+        /**
+          * If set categories will always be filtered via the respective logical operator. Toggling of the operator will not be available to the user.
+          * @since 2.2.0
+         */
+        "staticOperator"?: LogicalFilterOperator;
         /**
           * A list of strings that will be supplied as typeahead suggestions not tied to any categories.
          */
@@ -524,6 +532,11 @@ export namespace Components {
           * An array of predefined date range options for the date picker. Each option is an object with a label describing the range and a function that returns the start and end dates of the range as a DateRangeOption object.  Example format:   {     id: 'some unique id',     label: 'Name of the range',     from: undefined, to: '2023/03/29'   },   // ... other predefined date range options ...
          */
         "dateRangeOptions": DateDropdownOption[];
+        /**
+          * Disable the button that opens the dropdown containing the date picker.
+          * @since 2.3.0
+         */
+        "disabled": boolean;
         /**
           * Date format string. See
           * @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.
@@ -790,6 +803,7 @@ export namespace Components {
           * An optional header shown at the top of the dropdown
          */
         "header"?: string;
+        "ignoreRelatedSubmenu": boolean;
         /**
           * Move dropdown along main axis of alignment
          */
@@ -1149,6 +1163,7 @@ export namespace Components {
         "type": 'button' | 'submit';
         /**
           * Variant of button
+          * @since 2.3.0 - variant danger
          */
         "variant": IconButtonVariant;
     }
@@ -1398,7 +1413,7 @@ export namespace Components {
          */
         "activeTabLabel": string;
         /**
-          * Label of first tab
+          * Content of the header
          */
         "label": string;
         /**
@@ -1888,6 +1903,7 @@ export namespace Components {
         "value"?: string | string[];
     }
     interface IxSelectItem {
+        "getDropdownItemElement": () => Promise<HTMLIxDropdownItemElement>;
         "hover": boolean;
         /**
           * Displayed name of the item
@@ -4282,6 +4298,7 @@ declare namespace LocalJSX {
         "type"?: 'button' | 'submit';
         /**
           * Button variant
+          * @since 2.3.0 - variant danger
          */
         "variant"?: ButtonVariant;
     }
@@ -4436,6 +4453,11 @@ declare namespace LocalJSX {
           * If set to true allows that a single category can be set more than once. An already set category will not appear in the category dropdown if set to false.  Defaults to true
          */
         "repeatCategories"?: boolean;
+        /**
+          * If set categories will always be filtered via the respective logical operator. Toggling of the operator will not be available to the user.
+          * @since 2.2.0
+         */
+        "staticOperator"?: LogicalFilterOperator;
         /**
           * A list of strings that will be supplied as typeahead suggestions not tied to any categories.
          */
@@ -4564,6 +4586,11 @@ declare namespace LocalJSX {
           * An array of predefined date range options for the date picker. Each option is an object with a label describing the range and a function that returns the start and end dates of the range as a DateRangeOption object.  Example format:   {     id: 'some unique id',     label: 'Name of the range',     from: undefined, to: '2023/03/29'   },   // ... other predefined date range options ...
          */
         "dateRangeOptions"?: DateDropdownOption[];
+        /**
+          * Disable the button that opens the dropdown containing the date picker.
+          * @since 2.3.0
+         */
+        "disabled"?: boolean;
         /**
           * Date format string. See
           * @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.
@@ -5231,6 +5258,7 @@ declare namespace LocalJSX {
         "type"?: 'button' | 'submit';
         /**
           * Variant of button
+          * @since 2.3.0 - variant danger
          */
         "variant"?: IconButtonVariant;
     }
@@ -5464,7 +5492,7 @@ declare namespace LocalJSX {
          */
         "activeTabLabel"?: string;
         /**
-          * Label of first tab
+          * Content of the header
          */
         "label"?: string;
         /**

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "0.0.0-20240419081748",
+  "version": "0.0.0-20240522073858",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "main": "dist/index.cjs.js",

package/scss/components/form/_input.scss

@@ -10,8 +10,7 @@
 @import 'mixins/fonts';
 
 @mixin element-input($feature-read-only: true) {
-  &,
-  &:-webkit-autofill {
+  & {
     @include typography-body;
     min-height: 2rem;
     width: 100%;
@@ -25,10 +24,14 @@
     box-shadow: var(--theme-input--box-shadow);
   }
 
-  &:-webkit-autofill {
-    -webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
-    -webkit-text-fill-color: var(--theme-input--color) !important;
-    border-color: var(--theme-input--border-color) !important;
+  &:-webkit-autofill,
+  &:autofill {
+    -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+    -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+    background-color: var(--theme-input--background--autofill) !important;
+    border: var(--theme-input--border-thickness, 1px) solid
+      var(--theme-input--border-color--autofill) !important;
+    color: var(--theme-input--color--autofill) !important;
   }
 
   &::placeholder {
@@ -37,7 +40,7 @@
 
   &.hover,
   &:hover {
-    border-color: var(--theme-input--border-color--hover);
+    border-color: var(--theme-input--border-color--hover) !important;
     background-color: var(--theme-input--background--hover);
   }
 
@@ -45,7 +48,7 @@
   &:focus {
     outline: 1px solid var(--theme-color-focus-bdr);
     outline-offset: var(--theme-input--focus--outline-offset);
-    border-color: var(--theme-input--border-color--focus);
+    border-color: var(--theme-input--border-color--focus) !important;
   }
 
   @if $feature-read-only == true {

package/scss/theme/classic-dark/_color.scss

@@ -863,5 +863,41 @@
       --theme-btn-outline-primary--border-color--active: var(--theme-color-dynamic);
       --theme-btn-outline-primary--border-color--disabled: var(--theme-color-component-4);
       --theme-table-selection--border-color: var(--theme-color-0);
+      --theme-btn-danger--background: var(--theme-color-alarm);
+      --theme-btn-danger--background--hover: var(--theme-color-alarm--hover);
+      --theme-btn-danger--background--active: var(--theme-color-alarm--active);
+      --theme-btn-danger--background--disabled: var(--theme-color-component-4);
+      --theme-btn-danger--color: var(--theme-color-alarm--contrast);
+      --theme-btn-danger--color--hover: var(--theme-color-alarm--contrast);
+      --theme-btn-danger--color--active: var(--theme-color-alarm--contrast);
+      --theme-btn-danger--color--disabled: var(--theme-color-primary--contrast);
+      --theme-btn-danger--border-color: var(--theme-color-0);
+      --theme-btn-danger--border-color--hover: var(--theme-color-0);
+      --theme-btn-danger--border-color--active: var(--theme-color-0);
+      --theme-btn-danger--border-color--disabled: var(--theme-color-0);
+      --theme-btn-outline-danger--background: var(--theme-color-1);
+      --theme-btn-outline-danger--background--hover: var(--theme-color-1--hover);
+      --theme-btn-outline-danger--background--active: var(--theme-color-1--active);
+      --theme-btn-outline-danger--background--disabled: var(--theme-color-ghost);
+      --theme-btn-outline-danger--color: var(--theme-color-alarm);
+      --theme-btn-outline-danger--color--hover: var(--theme-color-alarm--hover);
+      --theme-btn-outline-danger--color--active: var(--theme-color-alarm--active);
+      --theme-btn-outline-danger--color--disabled: var(--theme-color-weak-text);
+      --theme-btn-outline-danger--border-color: var(--theme-color-alarm);
+      --theme-btn-outline-danger--border-color--hover: var(--theme-color-alarm--hover);
+      --theme-btn-outline-danger--border-color--active: var(--theme-color-alarm--active);
+      --theme-btn-outline-danger--border-color--disabled: var(--theme-color-component-4);
+      --theme-btn-invisible-danger--background: var(--theme-color-ghost);
+      --theme-btn-invisible-danger--background--hover: var(--theme-color-ghost--hover);
+      --theme-btn-invisible-danger--background--active: var(--theme-color-ghost--active);
+      --theme-btn-invisible-danger--background--disabled: var(--theme-color-ghost);
+      --theme-btn-invisible-danger--color: var(--theme-color-alarm-text);
+      --theme-btn-invisible-danger--color--hover: var(--theme-color-alarm-text);
+      --theme-btn-invisible-danger--color--active: var(--theme-color-alarm-text);
+      --theme-btn-invisible-danger--color--disabled: var(--theme-color-weak-text);
+      --theme-btn-invisible-danger--border-color: var(--theme-color-0);
+      --theme-btn-invisible-danger--border-color--hover: var(--theme-color-0);
+      --theme-btn-invisible-danger--border-color--active: var(--theme-color-0);
+      --theme-btn-invisible-danger--border-color--disabled: var(--theme-color-0);
   }
 }

package/scss/theme/classic-light/_color.scss

@@ -863,5 +863,41 @@
       --theme-btn-outline-primary--border-color--active: var(--theme-color-dynamic);
       --theme-btn-outline-primary--border-color--disabled: var(--theme-color-component-4);
       --theme-table-selection--border-color: var(--theme-color-0);
+      --theme-btn-danger--background: var(--theme-color-alarm);
+      --theme-btn-danger--background--hover: var(--theme-color-alarm--hover);
+      --theme-btn-danger--background--active: var(--theme-color-alarm--active);
+      --theme-btn-danger--background--disabled: var(--theme-color-component-4);
+      --theme-btn-danger--color: var(--theme-color-alarm--contrast);
+      --theme-btn-danger--color--hover: var(--theme-color-alarm--contrast);
+      --theme-btn-danger--color--active: var(--theme-color-alarm--contrast);
+      --theme-btn-danger--color--disabled: var(--theme-color-primary--contrast);
+      --theme-btn-danger--border-color: var(--theme-color-0);
+      --theme-btn-danger--border-color--hover: var(--theme-color-0);
+      --theme-btn-danger--border-color--active: var(--theme-color-0);
+      --theme-btn-danger--border-color--disabled: var(--theme-color-0);
+      --theme-btn-outline-danger--background: var(--theme-color-1);
+      --theme-btn-outline-danger--background--hover: var(--theme-color-1--hover);
+      --theme-btn-outline-danger--background--active: var(--theme-color-1--active);
+      --theme-btn-outline-danger--background--disabled: var(--theme-color-ghost);
+      --theme-btn-outline-danger--color: var(--theme-color-alarm);
+      --theme-btn-outline-danger--color--hover: var(--theme-color-alarm--hover);
+      --theme-btn-outline-danger--color--active: var(--theme-color-alarm--active);
+      --theme-btn-outline-danger--color--disabled: var(--theme-color-weak-text);
+      --theme-btn-outline-danger--border-color: var(--theme-color-alarm);
+      --theme-btn-outline-danger--border-color--hover: var(--theme-color-alarm--hover);
+      --theme-btn-outline-danger--border-color--active: var(--theme-color-alarm--active);
+      --theme-btn-outline-danger--border-color--disabled: var(--theme-color-component-4);
+      --theme-btn-invisible-danger--background: var(--theme-color-ghost);
+      --theme-btn-invisible-danger--background--hover: var(--theme-color-ghost--hover);
+      --theme-btn-invisible-danger--background--active: var(--theme-color-ghost--active);
+      --theme-btn-invisible-danger--background--disabled: var(--theme-color-ghost);
+      --theme-btn-invisible-danger--color: var(--theme-color-alarm-text);
+      --theme-btn-invisible-danger--color--hover: var(--theme-color-alarm-text);
+      --theme-btn-invisible-danger--color--active: var(--theme-color-alarm-text);
+      --theme-btn-invisible-danger--color--disabled: var(--theme-color-weak-text);
+      --theme-btn-invisible-danger--border-color: var(--theme-color-0);
+      --theme-btn-invisible-danger--border-color--hover: var(--theme-color-0);
+      --theme-btn-invisible-danger--border-color--active: var(--theme-color-0);
+      --theme-btn-invisible-danger--border-color--disabled: var(--theme-color-0);
   }
 }

package/dist/cjs/base-button-2f74b19d.js.map

@@ -1 +0,0 @@
-{"file":"base-button-2f74b19d.js","mappings":";;;;AAAA;;;;;;;;AAcA,MAAM,SAAS,GAAG,CAAC,OAAe;IAChC,OAAO,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,CAAC,WAAW,EAAE,CAAC;AAC3D,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,OAAe;IAClC,OAAO,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,CAAC,WAAW,EAAE,CAAC;AAC7D,CAAC,CAAC;MAEW,gBAAgB,GAAG,CAC9B,OAAsB,EACtB,OAAgB,EAChB,KAAc,EACd,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAiB,EACjB,QAAiB;IAEjB,OAAO;QACL,GAAG,EAAE,IAAI;QACT,aAAa,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK;QACvD,qBAAqB,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,CAAC,KAAK;QAC9D,uBAAuB,EAAE,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK;QAChE,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK;QAC3D,uBAAuB,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,CAAC,KAAK;QAClE,yBAAyB,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK;QACpE,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,QAAQ;KACnB,CAAC;AACJ,EAAE;SAuBc,UAAU,CAAC,KAAsB,EAAE,QAAQ;;IACzD,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE,CAAC;IAE9C,QACEA,oCACM,KAAK,CAAC,cAAc,IACxB,OAAO,EAAE,CAAC,CAAQ,MAAM,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EACrE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,CAAC,EACnD,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,kCACA,gBAAgB,CACjB,KAAK,CAAC,OAAO,EACb,KAAK,CAAC,OAAO,EACb,KAAK,CAAC,KAAK,EACX,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,CAChC,GACE,YAAY;QAGhB,KAAK,CAAC,OAAO,GAAGA,wBAAY,IAAI,EAAC,OAAO,EAAC,SAAS,SAAc,GAAG,IAAI;QACvE,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAC3BA,qBACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,QAAe,EAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,GACb,IACT,IAAI;QACRA,iBACE,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;gBACb,CAAC,WAAW,KAAK,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,SAAS;aAClD,IAEA,QAAQ,CACL;QACL,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CACxC,EACT;AACJ;;;;;","names":["h"],"sources":["src/components/button/base-button.tsx"],"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 */\nimport { h } from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport { ButtonVariant } from './button';\n\nexport type ButtonAlignment = 'center' | 'start';\n\nconst isPrimary = (variant: string) => {\n  return variant.toUpperCase() === 'Primary'.toUpperCase();\n};\n\nconst isSecondary = (variant: string) => {\n  return variant.toUpperCase() === 'Secondary'.toUpperCase();\n};\n\nexport const getButtonClasses = (\n  variant: ButtonVariant,\n  outline: boolean,\n  ghost: boolean,\n  iconOnly = false,\n  iconOval = false,\n  selected: boolean,\n  disabled: boolean\n) => {\n  return {\n    btn: true,\n    'btn-primary': isPrimary(variant) && !outline && !ghost,\n    'btn-outline-primary': isPrimary(variant) && outline && !ghost,\n    'btn-invisible-primary': isPrimary(variant) && !outline && ghost,\n    'btn-secondary': isSecondary(variant) && !outline && !ghost,\n    'btn-outline-secondary': isSecondary(variant) && outline && !ghost,\n    'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,\n    'btn-icon': iconOnly,\n    'btn-oval': iconOval,\n    selected: selected,\n    disabled: disabled,\n  };\n};\n\nexport type BaseButtonProps = {\n  type: string;\n  variant: ButtonVariant;\n  outline: boolean;\n  ghost: boolean;\n  iconOnly: boolean;\n  iconOval: boolean;\n  selected: boolean;\n  disabled: boolean;\n  loading: boolean;\n  icon: string;\n  onClick?: Function;\n  ariaAttributes?: A11yAttributes;\n  extraClasses?: { [key: string]: boolean };\n  iconSize?: string;\n  iconColor?: string;\n  alignment?: ButtonAlignment;\n  tabIndex?: number;\n  afterContent?: any;\n};\n\nexport function BaseButton(props: BaseButtonProps, children) {\n  const extraClasses = props.extraClasses ?? {};\n\n  return (\n    <button\n      {...props.ariaAttributes}\n      onClick={(e: Event) => (props.onClick ? props.onClick(e) : undefined)}\n      tabindex={props.disabled ? -1 : props.tabIndex ?? 0}\n      type={props.type}\n      class={{\n        ...getButtonClasses(\n          props.variant,\n          props.outline,\n          props.ghost,\n          props.iconOnly,\n          props.iconOval,\n          props.selected,\n          props.disabled || props.loading\n        ),\n        ...extraClasses,\n      }}\n    >\n      {props.loading ? <ix-spinner size=\"small\" hideTrack></ix-spinner> : null}\n      {props.icon && !props.loading ? (\n        <ix-icon\n          class=\"icon\"\n          name={props.icon}\n          size={props.iconSize as any}\n          color={props.iconColor}\n        ></ix-icon>\n      ) : null}\n      <div\n        class={{\n          content: true,\n          [`content-${props.alignment}`]: !!props.alignment,\n        }}\n      >\n        {children}\n      </div>\n      {props.afterContent ? props.afterContent : null}\n    </button>\n  );\n}\n"],"version":3}