invensys-ng 21.4.2 → 21.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "invensys-ng",
-  "version": "21.4.2",
+  "version": "21.5.0",
   "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/src/lib/themes/_option-field.scss

@@ -0,0 +1,99 @@
+@use './color-variables.scss' as colors;
+@use './variables' as vars;
+@use './floating-label' as floating;
+
+@mixin option-field() {
+  :host { display: block; min-width: 0; max-width: 100%; }
+  .i-option-field { position: relative; width: 100%; }
+  .i-option-field--float { margin-top: floating.$space; }
+  .i-option-control {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: vars.$component-input-height;
+    box-sizing: border-box;
+    border: 1px solid colors.$color-surface-border;
+    border-radius: vars.$componentBorderRadius;
+    color: colors.$color-text-primary;
+    background: colors.$color-component-background;
+    &:focus-within { border-color: colors.$color-primary; box-shadow: colors.$color-box-shadow; }
+  }
+  .i-option-value { flex: 1; min-width: 0; padding: 4px 0 4px 12px; pointer-events: none; }
+  .i-option-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .i-option-placeholder { color: colors.$color-text-secondary; }
+  .i-option-trigger, .i-native-select {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    cursor: pointer;
+    z-index: 1;
+  }
+  .i-option-trigger:focus-visible { outline: 2px solid colors.$color-primary; outline-offset: 2px; }
+  .i-native-select { display: none; opacity: 0; font-size: 16px; }
+  .i-option-actions { display: flex; align-items: center; flex-shrink: 0; pointer-events: none; }
+  .i-option-clear {
+    position: relative;
+    z-index: 2;
+    pointer-events: auto;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    padding: 0;
+    border: 0;
+    border-radius: vars.$componentBorderRadius;
+    background: transparent;
+    color: colors.$color-text-secondary;
+    cursor: pointer;
+    &:focus-visible { outline: 2px solid colors.$color-primary; outline-offset: -2px; }
+  }
+  .i-option-arrow { width: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
+  .i-option-arrow i { transition: transform 0.15s ease; }
+  .i-option-arrow .flipped { transform: rotate(180deg); }
+  .i-option-label { @include floating.base; position: absolute; top: 21px; left: 12px; transform: translateY(-50%); pointer-events: none; color: colors.$color-text-secondary; }
+  .i-option-field--open .i-option-label, .i-option-field--filled .i-option-label, .i-option-field:focus-within .i-option-label { @include floating.floated; }
+  .i-option-field--invalid {
+    .i-option-control { border-color: colors.$color-danger; }
+    .i-option-label { color: colors.$color-danger; }
+  }
+  .i-option-field--disabled {
+    .i-option-control { background: colors.$color-disabled-background; color: colors.$color-text-disabled; }
+    .i-option-trigger, .i-native-select { cursor: not-allowed; }
+  }
+  .i-option-error { margin-top: 4px; font-size: 12px; color: colors.$color-danger; }
+  .i-option-panel {
+    width: 100%; min-width: 0; box-sizing: border-box;
+    max-height: min(360px, calc(100dvh - 24px));
+    display: flex; flex-direction: column; overflow: hidden;
+    border: 1px solid colors.$color-surface-border; border-radius: vars.$componentBorderRadius;
+    background: colors.$color-component-background; color: colors.$color-text-primary;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+  .i-option-filter { padding: 8px; flex-shrink: 0; }
+  .i-option-search { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: 8px; font: inherit; border: 1px solid colors.$color-surface-border; border-radius: vars.$componentBorderRadius; color: inherit; background: colors.$color-component-background; }
+  .i-option-search:focus-visible { outline: 2px solid colors.$color-primary; outline-offset: -2px; }
+  .i-option-list { overflow: auto; min-height: 0; overscroll-behavior: contain; }
+  .i-option { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 12px; border: 0; font: inherit; text-align: left; overflow-wrap: anywhere; background: transparent; color: inherit; cursor: pointer; }
+  .i-option:hover, .i-option.selected { background: colors.$color-surface-hover; }
+  .i-option:focus-visible { outline: 2px solid colors.$color-primary; outline-offset: -2px; }
+  .i-option-check { flex-shrink: 0; color: colors.$color-primary; }
+  .i-option-empty { padding: 12px; color: colors.$color-text-secondary; }
+  @media (pointer: coarse) {
+    .i-option-control, .i-option { min-height: 44px; }
+    .i-option-clear { width: 44px; height: 44px; }
+    .i-option-search { min-height: 44px; font-size: 16px; }
+  }
+  @media (max-width: 991px) and (pointer: coarse) {
+    .native-on-mobile .i-option-trigger { display: none; }
+    .native-on-mobile .i-native-select { display: block; }
+  }
+}

package/types/invensys-ng.d.ts

@@ -5,6 +5,7 @@ import { ControlValueAccessor, NgControl, AbstractControl } from '@angular/forms
 import { UrlTree, Params, Router } from '@angular/router';
 import * as rxjs from 'rxjs';
 import { Observable, Subscription } from 'rxjs';
+import * as _angular_cdk_overlay from '@angular/cdk/overlay';
 import { IPosition } from '@shared/enums/IPosition';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { LegendItem } from 'chart.js';
@@ -924,9 +925,9 @@ declare class IChipsComponent implements OnChanges, AfterViewInit, OnDestroy {
     /** Render chips inside a boxed input-like container */
     boxed: boolean;
     allowCloseAll: boolean;
-    /** Label text for float label */
+    /** Accessible name for the chip collection (not a visible field label). */
     label?: string;
-    /** Whether to use floating label style */
+    /** @deprecated Chips are a collection, so no floating label is rendered. */
     useFloatLabel: boolean;
     /** Show error state styling */
     showError: boolean;
@@ -2313,6 +2314,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 +2965,11 @@ declare class IMultiSelect implements ControlValueAccessor {
      * @default true
      */
     readonly: boolean;
+    useFloatLabel: boolean;
+    /** Use the platform multiple-option picker on small touch screens. */
+    nativeOnMobile: boolean;
+    onNativeChange(event: Event): void;
+    touch(): void;
     /**
      * Event emitted when selection changes
      */
@@ -2986,6 +2993,14 @@ declare class IMultiSelect implements ControlValueAccessor {
      * @internal
      */
     isOpen: boolean;
+    readonly overlayPositions: _angular_cdk_overlay.ConnectedPosition[];
+    triggerRef?: ElementRef<HTMLButtonElement>;
+    panelRef?: ElementRef<HTMLDivElement>;
+    openDropdown(): void;
+    closeDropdown(restoreFocus?: boolean): void;
+    focusControl(): void;
+    focusOptions(): void;
+    onPanelKeydown(event: KeyboardEvent): void;
     /**
      * Current filter/search value
      * @internal
@@ -3146,7 +3161,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; }; "useFloatLabel": { "alias": "useFloatLabel"; "required": false; }; "nativeOnMobile": { "alias": "nativeOnMobile"; "required": false; }; }, { "onChange": "onChange"; "onClear": "onClear"; }, never, never, true, never>;
 }
 
 /**
@@ -3432,6 +3447,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
      */
@@ -3460,6 +3481,14 @@ declare class ISelect implements ControlValueAccessor {
      * @internal
      */
     isOpen: boolean;
+    readonly overlayPositions: _angular_cdk_overlay.ConnectedPosition[];
+    triggerRef?: ElementRef<HTMLButtonElement>;
+    panelRef?: ElementRef<HTMLDivElement>;
+    openDropdown(): void;
+    closeDropdown(restoreFocus?: boolean): void;
+    focusControl(): void;
+    focusOptions(): void;
+    onPanelKeydown(event: KeyboardEvent): void;
     /**
      * Current filter/search value
      * @internal
@@ -3598,7 +3627,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}. */