@ngx-stoui/core 20.0.16 → 21.0.1

package/README.md

@@ -1,6 +1,147 @@
-# core
+# @ngx-stoui/core
 
-This library was generated with [Nx](https://nx.dev).
+Core packages like styling, pipes and common directives for Angular, based on EDS design styles.
+
+## Installation
+
+```bash
+npm install @ngx-stoui/core
+```
+
+## Public API
+
+### Compiled Stylesheets
+
+Import these in your `styles.scss` or `angular.json`:
+
+```scss
+// Main stylesheet with all components and utilities
+@import '@ngx-stoui/core/ngx-stoui.css';
+
+// Datatable stylesheet (optional, if using datatables)
+@import '@ngx-stoui/core/ngx-datatable.css';
+```
+
+### SCSS Utilities (for advanced usage)
+
+#### Grid System
+
+Use the grid mixin to create responsive grid layouts:
+
+```scss
+@use '@ngx-stoui/core/style/grid' as grid;
+
+.my-grid {
+  @include grid.grid(12); // 12-column grid
+}
+
+.my-compact-grid {
+  @include grid.grid(4, 'column', 0); // 4-column grid with custom class name
+}
+```
+
+#### Theme Variables and Mixins
+
+Access theme variables, typography, and create custom themed components:
+
+```scss
+@use 'sass:map';
+@import '@ngx-stoui/core/style/theme/theme';
+
+// Access theme variables
+@mixin my-component-theme($theme, $variables) {
+  $primary: map.get($variables, primary);
+  $accent: map.get($variables, accent);
+
+  .my-component {
+    background: $primary;
+    color: $accent;
+  }
+}
+
+// Apply to light and dark themes
+.light-theme {
+  @include my-component-theme($sto-theme, $variables);
+}
+
+.dark-theme {
+  @include my-component-theme($sto-dark-theme, $dark-variables);
+}
+```
+
+#### Typography Only
+
+If you only need typography definitions:
+
+```scss
+@import '@ngx-stoui/core/style/theme/typography';
+
+// Access typography variables:
+// - $sto-typography (default 13px)
+// - $sto-sm-typography (small 10px)
+// - $sto-l-typography (large 16px)
+```
+
+## Available Exports
+
+### Compiled CSS
+
+- `ngx-stoui.css` - Main stylesheet
+- `ngx-datatable.css` - Datatable styles
+
+### SCSS Utilities
+
+- `style/grid.scss` - Grid mixin system
+- `style/theme/theme.scss` - Complete theme with variables and components
+- `style/theme/_typography.scss` - Typography configurations
+- `style/theme/_theme.scss` - Theme color palettes
+- `style/theme/_colors.scss` - Color definitions
+- `style/theme/_theme-variables.scss` - Theme variable functions
+- `style/theme/components.scss` - All component styles
+
+### Fonts
+
+- Equinor font files (`.woff`, `.woff2`)
+
+## Usage Examples
+
+### Basic Setup
+
+```scss
+// styles.scss
+@import '@ngx-stoui/core/ngx-stoui.css';
+```
+
+### With Grid System
+
+```scss
+// styles.scss
+@use '@ngx-stoui/core/style/grid' as grid;
+@import '@ngx-stoui/core/ngx-stoui.css';
+
+.product-grid {
+  @include grid.grid(6); // 6-column grid
+}
+```
+
+### With Custom Theming
+
+```scss
+// styles.scss
+@use 'sass:map';
+@import '@ngx-stoui/core/ngx-stoui.css';
+@import '@ngx-stoui/core/style/theme/theme';
+
+@mixin app-theme($theme, $variables) {
+  // Your custom theme styles using $variables
+}
+
+@include app-theme($sto-theme, $variables);
+
+.sto-dark-theme {
+  @include app-theme($sto-dark-theme, $dark-variables);
+}
+```
 
 ## Running unit tests
 

package/fesm2022/ngx-stoui-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, HostListener, Directive, ContentChildren, inject, ElementRef, HostBinding, Input, NgModule, Pipe } from '@angular/core';
+import { input, output, HostListener, Directive, ContentChildren, inject, ElementRef, HostBinding, NgModule, Pipe } from '@angular/core';
 import { MatInput } from '@angular/material/input';
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil, switchMap, take } from 'rxjs/operators';
@@ -207,15 +207,15 @@ class QuickKeysDirective {
             this.quickSubmit.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: QuickKeysDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: QuickKeysDirective, isStandalone: true, selector: "[stoQuickKeys]", inputs: { quickKeys: { classPropertyName: "quickKeys", publicName: "quickKeys", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { quickSubmit: "quickSubmit", quickCancel: "quickCancel" }, host: { listeners: { "keyup": "onKeyUp($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: QuickKeysDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: QuickKeysDirective, isStandalone: true, selector: "[stoQuickKeys]", inputs: { quickKeys: { classPropertyName: "quickKeys", publicName: "quickKeys", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { quickSubmit: "quickSubmit", quickCancel: "quickCancel" }, host: { listeners: { "keyup": "onKeyUp($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: QuickKeysDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: QuickKeysDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stoQuickKeys]',
                 }]
-        }], propDecorators: { onKeyUp: [{
+        }], propDecorators: { quickKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickKeys", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }], quickSubmit: [{ type: i0.Output, args: ["quickSubmit"] }], quickCancel: [{ type: i0.Output, args: ["quickCancel"] }], onKeyUp: [{
                 type: HostListener,
                 args: ['keyup', ['$event']]
             }] } });
@@ -243,10 +243,10 @@ class DateFormFieldClickDirective {
         this.destroy$.next(true);
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DateFormFieldClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: DateFormFieldClickDirective, isStandalone: true, selector: "[stoDateFormFieldClick]", inputs: { stoDateFormFieldClick: { classPropertyName: "stoDateFormFieldClick", publicName: "stoDateFormFieldClick", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "clickEvent()" } }, queries: [{ propertyName: "inputs", predicate: MatInput }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DateFormFieldClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DateFormFieldClickDirective, isStandalone: true, selector: "[stoDateFormFieldClick]", inputs: { stoDateFormFieldClick: { classPropertyName: "stoDateFormFieldClick", publicName: "stoDateFormFieldClick", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "clickEvent()" } }, queries: [{ propertyName: "inputs", predicate: MatInput }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DateFormFieldClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DateFormFieldClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stoDateFormFieldClick]',
@@ -254,7 +254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }], propDecorators: { inputs: [{
                 type: ContentChildren,
                 args: [MatInput]
-            }], clickEvent: [{
+            }], stoDateFormFieldClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "stoDateFormFieldClick", required: true }] }], clickEvent: [{
                 type: HostListener,
                 args: ['click']
             }] } });
@@ -276,10 +276,10 @@ class StoSelectTextOnFocusDirective {
             this._el.select();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoSelectTextOnFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: StoSelectTextOnFocusDirective, isStandalone: true, selector: "[stoSelectTextOnFocus]", host: { listeners: { "focus": "onFocus()", "dblclick": "onFocus()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoSelectTextOnFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: StoSelectTextOnFocusDirective, isStandalone: true, selector: "[stoSelectTextOnFocus]", host: { listeners: { "focus": "onFocus()", "dblclick": "onFocus()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoSelectTextOnFocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoSelectTextOnFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stoSelectTextOnFocus]',
@@ -293,121 +293,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 args: ['dblclick']
             }] } });
 
-const getClass = (width, small = 400, large = 800) => {
-    let cols = 1;
-    if (width > small) {
-        cols += 1;
-    }
-    if (width > large) {
-        cols += 2;
-    }
-    return `sto-f-grid--${cols}`;
-};
-const ALL_GRIDS = ['sto-f-grid--1', 'sto-f-grid--2', 'sto-f-grid--4', 'sto-f-grid--6'];
 class StoGridSpacerDirective {
-    constructor() {
-        this.useClass = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoGridSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: StoGridSpacerDirective, isStandalone: true, selector: "[stoGridSpacer]", host: { properties: { "class.sto-f-grid__col": "this.useClass", "class.sto-f-grid__col--spacer": "this.useClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoGridSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: StoGridSpacerDirective, isStandalone: true, selector: "[stoGridSpacer]", host: { classAttribute: "sto-grid__col sto-grid__col--spacer" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoGridSpacerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoGridSpacerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stoGridSpacer]',
-                    standalone: true
+                    host: {
+                        class: 'sto-grid__col sto-grid__col--spacer',
+                    },
                 }]
-        }], propDecorators: { useClass: [{
-                type: HostBinding,
-                args: ['class.sto-f-grid__col']
-            }, {
-                type: HostBinding,
-                args: ['class.sto-f-grid__col--spacer']
-            }] } });
+        }] });
 class StoGridColumnDirective {
     constructor() {
-        this.useClass = true;
+        this.stoGridColumnDouble = input(false, ...(ngDevMode ? [{ debugName: "stoGridColumnDouble" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoGridColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: StoGridColumnDirective, isStandalone: true, selector: "[stoGridColumn]", inputs: { stoGridColumnDouble: "stoGridColumnDouble" }, host: { properties: { "class.sto-f-grid__col": "this.useClass", "class.sto-f-grid__col--2": "this.stoGridColumnDouble" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoGridColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: StoGridColumnDirective, isStandalone: true, selector: "[stoGridColumn]", inputs: { stoGridColumnDouble: { classPropertyName: "stoGridColumnDouble", publicName: "stoGridColumnDouble", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sto-grid__col--2": "stoGridColumnDouble()" }, classAttribute: "sto-grid__col" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoGridColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoGridColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stoGridColumn]',
-                    standalone: true
+                    host: {
+                        class: 'sto-grid__col',
+                        '[class.sto-grid__col--2]': 'stoGridColumnDouble()',
+                    },
                 }]
-        }], propDecorators: { useClass: [{
-                type: HostBinding,
-                args: ['class.sto-f-grid__col']
-            }], stoGridColumnDouble: [{
-                type: HostBinding,
-                args: ['class.sto-f-grid__col--2']
-            }, {
-                type: Input
-            }] } });
+        }], propDecorators: { stoGridColumnDouble: [{ type: i0.Input, args: [{ isSignal: true, alias: "stoGridColumnDouble", required: false }] }] } });
 class StoGridDirective {
     constructor() {
-        this.elRef = inject(ElementRef);
-        // TODO: Skipped for migration because:
-        //  This input is used in combination with `@HostBinding` and migrating would
-        //  break.
-        this.maxWidth = 1000;
-        // TODO: Skipped for migration because:
-        //  This input is used in combination with `@HostBinding` and migrating would
-        //  break.
-        this.minWidth = 250;
-        this.baseClass = true;
-        this.breakpoints = input(...(ngDevMode ? [undefined, { debugName: "breakpoints" }] : []));
+        this.maxWidth = input(1000, ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+        this.minWidth = input(250, ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
     }
-    ngAfterViewInit() {
-        const el = this.elRef.nativeElement;
-        this.observer = new ResizeObserver(entries => {
-            for (const entry of entries) {
-                const cr = entry.contentRect;
-                const { width } = cr;
-                const breakpoints = this.breakpoints() || { 2: 400, 4: 800 };
-                const gridType = getClass(width, breakpoints[2], breakpoints[4]);
-                if (!el.classList.contains(gridType)) {
-                    el.classList.remove(...ALL_GRIDS);
-                    el.classList.add(gridType);
-                }
-            }
-        });
-        this.observer.observe(this.elRef.nativeElement);
-    }
-    ngOnDestroy() {
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoGridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: StoGridDirective, isStandalone: true, selector: "[stoGrid]", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: false, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: false, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.max-width.px": "this.maxWidth", "style.min-width.px": "this.minWidth", "class.sto-f-grid": "this.baseClass" } }, queries: [{ propertyName: "columns", predicate: StoGridColumnDirective, read: ElementRef }], exportAs: ["stoGrid"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoGridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: StoGridDirective, isStandalone: true, selector: "[stoGrid]", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.max-width.px": "maxWidth()", "style.min-width.px": "minWidth()" }, classAttribute: "sto-grid" }, exportAs: ["stoGrid"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoGridDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoGridDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stoGrid]',
                     exportAs: 'stoGrid',
-                    standalone: true
+                    host: {
+                        class: 'sto-grid',
+                        '[style.max-width.px]': 'maxWidth()',
+                        '[style.min-width.px]': 'minWidth()',
+                    },
                 }]
-        }], propDecorators: { maxWidth: [{
-                type: HostBinding,
-                args: ['style.max-width.px']
-            }, {
-                type: Input
-            }], minWidth: [{
-                type: HostBinding,
-                args: ['style.min-width.px']
-            }, {
-                type: Input
-            }], baseClass: [{
-                type: HostBinding,
-                args: ['class.sto-f-grid']
-            }], columns: [{
-                type: ContentChildren,
-                args: [StoGridColumnDirective, { read: ElementRef }]
-            }] } });
+        }], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }] } });
 
 class MenuOverlayDirective {
     constructor() {
@@ -433,10 +368,10 @@ class MenuOverlayDirective {
         element.style.height = '1px';
         element.style.width = '1px';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MenuOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MenuOverlayDirective, isStandalone: true, selector: "[stoMenuOverlay]", host: { properties: { "style.left.px": "this.left", "style.top.px": "this.top" } }, exportAs: ["stoMenuOverlay"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MenuOverlayDirective, isStandalone: true, selector: "[stoMenuOverlay]", host: { properties: { "style.left.px": "this.left", "style.top.px": "this.top" } }, exportAs: ["stoMenuOverlay"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MenuOverlayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuOverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stoMenuOverlay]',
@@ -468,22 +403,22 @@ class ContextMenuDirective {
             this.menuTrigger().openMenu();
         }, 150);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: ContextMenuDirective, isStandalone: true, selector: "[stoContextMenu]", inputs: { menuTrigger: { classPropertyName: "menuTrigger", publicName: "menuTrigger", isSignal: true, isRequired: true, transformFunction: null }, overlayDirective: { classPropertyName: "overlayDirective", publicName: "overlayDirective", isSignal: true, isRequired: true, transformFunction: null }, menuContext: { classPropertyName: "menuContext", publicName: "menuContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "contextmenu": "contextMenu($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ContextMenuDirective, isStandalone: true, selector: "[stoContextMenu]", inputs: { menuTrigger: { classPropertyName: "menuTrigger", publicName: "menuTrigger", isSignal: true, isRequired: true, transformFunction: null }, overlayDirective: { classPropertyName: "overlayDirective", publicName: "overlayDirective", isSignal: true, isRequired: true, transformFunction: null }, menuContext: { classPropertyName: "menuContext", publicName: "menuContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "contextmenu": "contextMenu($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ContextMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ContextMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stoContextMenu]',
                 }]
-        }], propDecorators: { contextMenu: [{
+        }], propDecorators: { menuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTrigger", required: true }] }], overlayDirective: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayDirective", required: true }] }], menuContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuContext", required: false }] }], contextMenu: [{
                 type: HostListener,
                 args: ['contextmenu', ['$event']]
             }] } });
 
 class StoDirectivesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: StoDirectivesModule, imports: [QuickKeysDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: StoDirectivesModule, imports: [QuickKeysDirective,
             DateFormFieldClickDirective,
             StoSelectTextOnFocusDirective,
             StoGridDirective,
@@ -498,9 +433,9 @@ class StoDirectivesModule {
             StoGridSpacerDirective,
             MenuOverlayDirective,
             ContextMenuDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoDirectivesModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoDirectivesModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoDirectivesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoDirectivesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -549,10 +484,10 @@ class CurrencyFormatPipe {
         const intl = new Intl.NumberFormat('en-US', { maximumFractionDigits }).format(value);
         return intl.replace(/,/g, ' ').replace('.', ',') + ` ${unit}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CurrencyFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: CurrencyFormatPipe, isStandalone: true, name: "currencyFormat" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CurrencyFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: CurrencyFormatPipe, isStandalone: true, name: "currencyFormat" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CurrencyFormatPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CurrencyFormatPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'currencyFormat',
@@ -600,10 +535,10 @@ class DateFormatPipe {
                 return format(value, 'MMM d, yyyy');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DateFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: DateFormatPipe, isStandalone: true, name: "formatDate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DateFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DateFormatPipe, isStandalone: true, name: "formatDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DateFormatPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DateFormatPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'formatDate',
@@ -626,10 +561,10 @@ class KeysPipe {
         }
         return [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: KeysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: KeysPipe, isStandalone: true, name: "keys" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KeysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: KeysPipe, isStandalone: true, name: "keys" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: KeysPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KeysPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'keys',
@@ -674,15 +609,18 @@ class NumberFormatPipe {
             value = parseFloat(this.toFixed(value, numberOfDecimals));
         }
         // Turn negative numbers back, but only if value is not -0
-        // eslint-disable-next-line no-compare-neg-zero
-        if (isNegativeNumber && value !== -0) {
+        if (isNegativeNumber && value < 0) {
             value = value * -1;
         }
         const localized = this.prettyPrintValue(value, appendDecimals, numberOfDecimals);
-        return localized.replace(/,/g, ' ').replace('.', ',') + `${unit ? ' ' + unit : ''}`;
+        return (localized.replace(/,/g, ' ').replace('.', ',') +
+            `${unit ? ' ' + unit : ''}`);
     }
     prettyPrintValue(value, appendDecimals, numberOfDecimals) {
-        const intlOptions = { minimumFractionDigits: numberOfDecimals, maximumFractionDigits: numberOfDecimals };
+        const intlOptions = {
+            minimumFractionDigits: numberOfDecimals,
+            maximumFractionDigits: numberOfDecimals,
+        };
         const intl = new Intl.NumberFormat('en-US', intlOptions).format(value);
         const split = intl.split('.');
         let localized = split[0];
@@ -697,20 +635,22 @@ class NumberFormatPipe {
     toFixed(num, precision) {
         // This method also has some issues - namely, it's unable to parse negative numbers with huge floating points
         // -8.185452315956354e-12 becomes NaN
-        let returnValue = (+(Math.round(+(num + 'e' + precision)) + 'e' + -precision));
+        let returnValue = +(Math.round(+(num + 'e' + precision)) +
+            'e' +
+            -precision);
         if (isNaN(returnValue)) {
             returnValue = parseFloat(num.toFixed(precision));
         }
         return returnValue.toFixed(precision);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: NumberFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: NumberFormatPipe, isStandalone: true, name: "numberFormat" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NumberFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: NumberFormatPipe, isStandalone: true, name: "numberFormat" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: NumberFormatPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NumberFormatPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'numberFormat',
-                    standalone: true
+                    standalone: true,
                 }]
         }] });
 
@@ -730,10 +670,10 @@ class GetUnit {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GetUnit, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: GetUnit, isStandalone: true, name: "getUnit" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GetUnit, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: GetUnit, isStandalone: true, name: "getUnit" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GetUnit, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GetUnit, decorators: [{
             type: Pipe,
             args: [{ name: 'getUnit', standalone: true }]
         }] });
@@ -747,10 +687,10 @@ class ExcludeUnit {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ExcludeUnit, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: ExcludeUnit, isStandalone: true, name: "excludeUnit" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExcludeUnit, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ExcludeUnit, isStandalone: true, name: "excludeUnit" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ExcludeUnit, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ExcludeUnit, decorators: [{
             type: Pipe,
             args: [{ name: 'excludeUnit', standalone: true }]
         }] });
@@ -766,17 +706,17 @@ class YesNoPipe {
         }
         return valueStr;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: YesNoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: YesNoPipe, isStandalone: true, name: "yesNo" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YesNoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: YesNoPipe, isStandalone: true, name: "yesNo" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: YesNoPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YesNoPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'yesNo', standalone: true }]
         }] });
 
 class StoPipesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: StoPipesModule, imports: [DateFormatPipe,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: StoPipesModule, imports: [DateFormatPipe,
             KeysPipe,
             NumberFormatPipe,
             CurrencyFormatPipe,
@@ -789,9 +729,9 @@ class StoPipesModule {
             GetUnit,
             ExcludeUnit,
             YesNoPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoPipesModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoPipesModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StoPipesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StoPipesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [