invensys-ng 21.4.2 → 21.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "invensys-ng",
-  "version": "21.4.2",
+  "version": "21.4.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/ulbrichFrauendorf/invensys-ng"

package/src/lib/themes/_native-select.scss

@@ -0,0 +1,44 @@
+@use './color-variables.scss' as colors;
+
+// Keep native elements out of desktop keyboard and accessibility navigation.
+@mixin mobile-picker($prefix) {
+  .i-native-field { display: none; }
+
+  @media (max-width: 991px) and (pointer: coarse) {
+    .native-on-mobile {
+      .#{$prefix}-input-container, .#{$prefix}-dropdown { display: none; }
+      .i-native-field { display: flex; flex-direction: column; gap: 6px; }
+    }
+    .i-native-field label { font-size: 0.875rem; color: colors.$color-text-primary; }
+    .i-native-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
+    .i-native-select {
+      flex: 1;
+      min-width: 0;
+      width: 100%;
+      box-sizing: border-box;
+      min-height: 44px;
+      padding: 10px 12px;
+      font: inherit;
+      font-size: 16px;
+      border: 1px solid colors.$color-surface-border;
+      border-radius: 6px;
+      color: colors.$color-text-primary;
+      background: colors.$color-component-background;
+      &[aria-invalid='true'] { border-color: colors.$color-danger; }
+      &:disabled { opacity: 0.6; }
+    }
+    .i-native-clear {
+      flex: 0 0 44px;
+      min-height: 44px;
+      border: 0;
+      border-radius: 6px;
+      background: transparent;
+      color: colors.$color-text-primary;
+    }
+    .i-native-error { color: colors.$color-danger; font-size: 0.875rem; }
+    .i-native-select:focus-visible, .i-native-clear:focus-visible {
+      outline: 2px solid colors.$color-primary;
+      outline-offset: 2px;
+    }
+  }
+}

package/types/invensys-ng.d.ts

@@ -2313,6 +2313,7 @@ declare class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
     protected readonly Math: Math;
     private routerSubscription;
     private touchStartY;
+    private touchStartX;
     private touchCurrentY;
     private isPulling;
     pullDistance: i0.WritableSignal<number>;
@@ -2963,6 +2964,10 @@ declare class IMultiSelect implements ControlValueAccessor {
      * @default true
      */
     readonly: boolean;
+    /** Use the platform multiple-option picker on small touch screens. */
+    nativeOnMobile: boolean;
+    onNativeChange(event: Event): void;
+    touch(): void;
     /**
      * Event emitted when selection changes
      */
@@ -3146,7 +3151,7 @@ declare class IMultiSelect implements ControlValueAccessor {
      */
     getErrorMessage(): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<IMultiSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IMultiSelect, "i-multi-select", never, { "label": { "alias": "label"; "required": false; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterBy": { "alias": "filterBy"; "required": false; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "onChange": "onChange"; "onClear": "onClear"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IMultiSelect, "i-multi-select", never, { "label": { "alias": "label"; "required": false; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterBy": { "alias": "filterBy"; "required": false; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "nativeOnMobile": { "alias": "nativeOnMobile"; "required": false; }; }, { "onChange": "onChange"; "onClear": "onClear"; }, never, never, true, never>;
 }
 
 /**
@@ -3432,6 +3437,12 @@ declare class ISelect implements ControlValueAccessor {
      * @default true
      */
     readonly: boolean;
+    disabled: boolean;
+    /** Use the platform option picker on small touch screens. */
+    nativeOnMobile: boolean;
+    get nativeSelectedIndex(): string;
+    onNativeChange(event: Event): void;
+    touch(): void;
     /**
      * Event emitted when selection changes
      */
@@ -3598,7 +3609,7 @@ declare class ISelect implements ControlValueAccessor {
      */
     getErrorMessage(): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<ISelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ISelect, "i-select", never, { "label": { "alias": "label"; "required": false; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "useFloatLabel": { "alias": "useFloatLabel"; "required": false; }; "id": { "alias": "id"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterBy": { "alias": "filterBy"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "onChange": "onChange"; "onClear": "onClear"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ISelect, "i-select", never, { "label": { "alias": "label"; "required": false; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "useFloatLabel": { "alias": "useFloatLabel"; "required": false; }; "id": { "alias": "id"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterBy": { "alias": "filterBy"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "nativeOnMobile": { "alias": "nativeOnMobile"; "required": false; }; }, { "onChange": "onChange"; "onClear": "onClear"; }, never, never, true, never>;
 }
 
 /** A single step rendered inside an {@link IStepper}. */