@ngx-stoui/core 20.0.15 → 21.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-stoui/core",
-  "version": "20.0.15",
+  "version": "21.0.0",
   "author": {
     "name": "Ronnie Laugen",
     "email": "rhenri@equinor.com"
@@ -21,8 +21,8 @@
     "equinor"
   ],
   "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
     "date-fns": "^4.1.0"
   },
   "dependencies": {
@@ -31,7 +31,7 @@
   "exports": {
     ".": {
       "default": "./fesm2022/ngx-stoui-core.mjs",
-      "types": "./index.d.ts"
+      "types": "./types/ngx-stoui-core.d.ts"
     },
     "./ngx-stoui.css": {
       "default": "./ngx-stoui.css"
@@ -44,6 +44,6 @@
     }
   },
   "module": "fesm2022/ngx-stoui-core.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/ngx-stoui-core.d.ts",
   "sideEffects": false
 }

package/styles/README.md

@@ -0,0 +1,273 @@
+# Styles Folder Architecture
+
+## Overview
+
+The new `styles/` directory provides a clean, intuitive structure that eliminates the complex import chains of the old `style/` folder. All CSS variables are centralized, and the import path is straightforward.
+
+## Directory Structure
+
+```
+styles/
+├── index.scss                    # Main entry point (import this!)
+├── _tokens.scss                  # Design system tokens and CSS variables
+├── _material-theme.scss          # Material 3 theme configuration
+├── _typography.scss              # Typography scales (normal, small, large)
+├── _utilities.scss               # Utility classes (grid, helpers)
+├── fonts/
+│   └── _fonts.scss               # Font loading from CDN
+└── components/
+    ├── _index.scss               # Component barrel file
+    ├── _action-footer.scss       # Individual component styles
+    ├── _appheader.scss
+    ├── _card.scss
+    ├── _datatable.scss
+    ├── _daterange.scss
+    ├── _dialog.scss
+    ├── _drawer.scss
+    ├── _filterpanel.scss
+    ├── _input-overrides.scss
+    ├── _message-panel.scss
+    ├── _number-input.scss
+    ├── _number-unit-input.scss
+    ├── _preference-manager.scss
+    ├── _select-filter.scss
+    ├── _status-indicators.scss
+    └── _wysiwyg.scss
+```
+
+## Import Flow
+
+### New Structure (Simplified)
+
+```
+ngx-stoui.scss
+  └─> styles/index.scss
+        ├─> _tokens.scss (CSS variables)
+        ├─> _material-theme.scss (Material 3)
+        ├─> _typography.scss (Typography scales)
+        ├─> _utilities.scss (Grid utilities)
+        ├─> fonts/_fonts.scss (Font loading)
+        └─> components/_index.scss
+              └─> All component files
+```
+
+### Old Structure (Complex)
+
+```
+ngx-stoui.scss
+  └─> style/theme/_theme.scss
+        ├─> _colors.scss (M2 palettes)
+        ├─> _theme-variables.scss (M2 functions)
+        ├─> components.scss
+        │     └─> 21 individual component imports
+        └─> Circular dependencies
+```
+
+## Key Files
+
+### `index.scss` - Main Entry Point
+
+Single file to import for all styles. Automatically includes:
+
+- Design tokens
+- Material theme
+- Typography
+- Utilities
+- Component styles
+
+**Usage:**
+
+```scss
+@use './styles' as *;
+```
+
+### `_tokens.scss` - Design System Tokens
+
+**Single source of truth** for all CSS variables:
+
+- Light theme colors (`:root`, `body:not(.sto-dark-theme)`)
+- Dark theme colors (`body.sto-dark-theme`)
+- EDS (Equinor Design System) SCSS maps
+- No dependencies
+
+**Available CSS Variables:**
+
+```scss
+// Primary colors
+--primary-resting, --primary-hover, --primary-text
+
+// Accent colors
+--accent-resting, --accent-hover, --accent-text
+
+// Status colors
+--success-*, --danger-*, --warning-*
+
+// Text colors
+--text, --text-secondary, --text-tertiary, --text-disabled
+
+// Background colors
+--bg-default, --bg-app, --bg-card, --bg-hover, --bg-focus
+
+// UI elements
+--divider, --border-disabled
+```
+
+### `_material-theme.scss` - Material 3 Configuration
+
+Material Design 3 theme setup with `mat.define-theme()`:
+
+- Azure/blue color scheme
+- Component theme includes
+- CSS variable overrides for Material components
+
+**Mixin:**
+
+```scss
+@include material-theme.apply-material-theme();
+```
+
+### `_typography.scss` - Typography Scales
+
+Three typography hierarchies:
+
+- `$sto-typography` - Normal scale (13px base)
+- `$sto-sm-typography` - Small scale (10px base)
+- `$sto-l-typography` - Large scale (16px base)
+
+**Mixin:**
+
+```scss
+@include typography.apply-typography();
+```
+
+### `_utilities.scss` - Utility Classes
+
+Flexible grid system and helper classes:
+
+- `.sto-grid` - Responsive grid using CSS Container Queries (auto 1→2→4 columns based on container width)
+- `.sto-grid--{n}` - Fixed column layouts (`--1`, `--2`, `--3`, `--4`, `--6`, `--12`) that override responsive behavior
+- `.sto-grid__col` - Grid column with span modifiers (`--2`, `--3`, `--4`)
+- `.sto-grid__col--spacer` - Hidden spacer column for layout alignment
+
+### `components/_index.scss` - Component Barrel
+
+Imports all component styles and provides single mixin:
+
+```scss
+@include components.apply-component-styles();
+```
+
+## Migration from Old Structure
+
+### What Changed?
+
+1. **Folder Name**: `style/` → `styles/` (avoids Windows permission issues)
+
+2. **Import Chain**:
+   - Old: 4-5 levels deep with circular dependencies
+   - New: Flat structure, clear hierarchy
+
+3. **CSS Variables**:
+   - Old: Duplicated in `ngx-stoui.scss` and `_colors.scss`
+   - New: Single source in `_tokens.scss`
+
+4. **Material Theme**:
+   - Old: Material 2 with palette extraction
+   - New: Material 3 with direct theme definition
+
+5. **Component Organization**:
+   - Old: Nested in `style/theme/` with barrel file
+   - New: Flat in `styles/components/` with barrel file
+
+### Migration Status
+
+✅ **Completed:**
+
+- Created new `styles/` folder structure
+- Migrated all 16 component files from `style/theme/`
+- Migrated form styles from `style/form/`
+- Migrated datatable styles from `style/datatable/`
+- Centralized CSS variables in `_tokens.scss`
+- Converted to Material 3 in `_material-theme.scss`
+- Updated `ngx-stoui.scss` to use new structure
+- Removed all legacy imports
+- Build successful
+- Lint passing
+
+✅ **Migration Complete!** All files have been moved to the new structure. The old `style/` folder can now be removed.
+
+### Old `style/` Folder (Deprecated)
+
+The old `style/` folder is now deprecated and can be safely deleted. All styles have been migrated to the new `styles/` structure.
+
+## Best Practices
+
+### 1. Use CSS Variables Directly
+
+```scss
+// ✅ CORRECT
+.my-component {
+  color: var(--text);
+  background: var(--bg-card);
+}
+
+// ❌ AVOID (old pattern)
+.my-component {
+  color: $text-color; // SCSS variable wrapper
+}
+```
+
+### 2. Component Styles
+
+Component files should export mixins:
+
+```scss
+@mixin my-component-theme() {
+  .my-component {
+    border: 1px solid var(--divider);
+  }
+}
+```
+
+### 3. Import Order
+
+When creating new files, follow this order:
+
+```scss
+// 1. Design tokens (if needed)
+@use '../tokens';
+
+// 2. Material dependencies (if needed)
+@use '@angular/material' as mat;
+
+// 3. Component styles
+@mixin my-component-theme() {
+  // styles here
+}
+```
+
+### 4. Flat Structure
+
+Keep component files flat - avoid nesting:
+
+- `components/_my-component.scss` ✅
+- `components/feature/_my-component.scss` ❌
+
+## Benefits
+
+1. **Discoverability**: Easy to find where styles are defined
+2. **No Circular Dependencies**: Clear import hierarchy
+3. **Single Source of Truth**: CSS variables in one place
+4. **Modern Material**: Material 3 API
+5. **Clean Separation**: Tokens, theme, typography, components
+6. **Easy Debugging**: Flat structure, clear file names
+7. **Performance**: Removed duplicate CSS variable definitions
+
+## Future Improvements
+
+1. Migrate `style/form/` to `styles/forms/`
+2. Migrate `style/datatable/` to `styles/components/datatable/`
+3. Convert remaining `@import` to `@use`/`@forward`
+4. Remove old `style/` folder
+5. Add Storybook integration for design tokens
+6. Document CSS variable usage in component stories

package/{index.d.ts → types/ngx-stoui-core.d.ts}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnDestroy, QueryList, AfterViewInit, ElementRef, PipeTransform } from '@angular/core';
+import { OnInit, OnDestroy, QueryList, PipeTransform } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { MatDatepicker } from '@angular/material/datepicker';
 import { MatInput } from '@angular/material/input';
@@ -217,33 +217,20 @@ declare class StoSelectTextOnFocusDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<StoSelectTextOnFocusDirective, "[stoSelectTextOnFocus]", never, {}, {}, never, never, true, never>;
 }
 
-interface BreakpointConfig {
-    2: number;
-    4: number;
-}
 declare class StoGridSpacerDirective {
-    useClass: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<StoGridSpacerDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<StoGridSpacerDirective, "[stoGridSpacer]", never, {}, {}, never, never, true, never>;
 }
 declare class StoGridColumnDirective {
-    useClass: boolean;
-    stoGridColumnDouble: boolean;
+    readonly stoGridColumnDouble: i0.InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<StoGridColumnDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<StoGridColumnDirective, "[stoGridColumn]", never, { "stoGridColumnDouble": { "alias": "stoGridColumnDouble"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<StoGridColumnDirective, "[stoGridColumn]", never, { "stoGridColumnDouble": { "alias": "stoGridColumnDouble"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-declare class StoGridDirective implements AfterViewInit, OnDestroy {
-    private elRef;
-    maxWidth: number;
-    minWidth: number;
-    baseClass: boolean;
-    columns: QueryList<ElementRef<HTMLElement>>;
-    readonly breakpoints: i0.InputSignal<BreakpointConfig | undefined>;
-    private observer;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+declare class StoGridDirective {
+    readonly maxWidth: i0.InputSignal<number>;
+    readonly minWidth: i0.InputSignal<number>;
     static ɵfac: i0.ɵɵFactoryDeclaration<StoGridDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<StoGridDirective, "[stoGrid]", ["stoGrid"], { "maxWidth": { "alias": "maxWidth"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "breakpoints": { "alias": "breakpoints"; "required": false; "isSignal": true; }; }, {}, ["columns"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<StoGridDirective, "[stoGrid]", ["stoGrid"], { "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class MenuOverlayDirective {
@@ -267,12 +254,6 @@ declare class ContextMenuDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<ContextMenuDirective, "[stoContextMenu]", never, { "menuTrigger": { "alias": "menuTrigger"; "required": true; "isSignal": true; }; "overlayDirective": { "alias": "overlayDirective"; "required": true; "isSignal": true; }; "menuContext": { "alias": "menuContext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class StoDirectivesModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<StoDirectivesModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<StoDirectivesModule, never, [typeof QuickKeysDirective, typeof DateFormFieldClickDirective, typeof StoSelectTextOnFocusDirective, typeof StoGridDirective, typeof StoGridColumnDirective, typeof StoGridSpacerDirective, typeof MenuOverlayDirective, typeof ContextMenuDirective], [typeof QuickKeysDirective, typeof DateFormFieldClickDirective, typeof StoSelectTextOnFocusDirective, typeof StoGridDirective, typeof StoGridColumnDirective, typeof StoGridSpacerDirective, typeof MenuOverlayDirective, typeof ContextMenuDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<StoDirectivesModule>;
-}
-
 /**
  * Pipe used to transform numbers to a currency format
  *
@@ -353,10 +334,4 @@ declare class YesNoPipe implements PipeTransform {
     static ɵpipe: i0.ɵɵPipeDeclaration<YesNoPipe, "yesNo", true>;
 }
 
-declare class StoPipesModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<StoPipesModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<StoPipesModule, never, [typeof DateFormatPipe, typeof KeysPipe, typeof NumberFormatPipe, typeof CurrencyFormatPipe, typeof GetUnit, typeof ExcludeUnit, typeof YesNoPipe], [typeof DateFormatPipe, typeof KeysPipe, typeof NumberFormatPipe, typeof CurrencyFormatPipe, typeof GetUnit, typeof ExcludeUnit, typeof YesNoPipe]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<StoPipesModule>;
-}
-
-export { ContextMenuDirective, CurrencyFormatPipe, DateFormFieldClickDirective, DateFormatPipe, ExcludeUnit, GetUnit, Key, KeysPipe, MenuOverlayDirective, NumberFormatPipe, QuickKeysDirective, StoDirectivesModule, StoGridColumnDirective, StoGridDirective, StoGridSpacerDirective, StoPipesModule, StoSelectTextOnFocusDirective, YesNoPipe };
+export { ContextMenuDirective, CurrencyFormatPipe, DateFormFieldClickDirective, DateFormatPipe, ExcludeUnit, GetUnit, Key, KeysPipe, MenuOverlayDirective, NumberFormatPipe, QuickKeysDirective, StoGridColumnDirective, StoGridDirective, StoGridSpacerDirective, StoSelectTextOnFocusDirective, YesNoPipe };

package/style/_fonts.scss

@@ -1,3 +0,0 @@
-@import url('https://cdn.eds.equinor.com/font/equinor-font.css');
-@import url('https://fonts.googleapis.com/css?family=Material+Icons');
-@import url('https://fonts.googleapis.com/css?family=Material+Icons+Outlined');

package/style/datatable/_ngx-datatable-compact.scss

@@ -1,146 +0,0 @@
-$row-height: 24px;
-$icon-height: 16px;
-
-.sto-compact .imo-overview,
-.sto-compact .sto-drawer--compact {
-  //only in .imo-overview for now
-
-  .sto-datatable,
-  .sto-datatable.inside-card {
-    .datatable-body {
-      .progress-linear {
-        height: 3px;
-        margin: -3px 0 0 0;
-
-        .container {
-          height: 3px;
-
-          .bar {
-            height: 3px;
-          }
-        }
-      }
-
-      .datatable-body-row {
-        .datatable-body-cell {
-          padding: 2px 8px;
-
-          &.date-cell {
-            padding: 0px;
-
-            small {
-              display: none;
-            }
-          }
-
-          .datatable-body-cell-label {
-            .mat-icon-button {
-              margin-left: 0;
-              height: $row-height;
-              width: $row-height;
-              line-height: $row-height;
-            }
-          }
-        }
-      }
-    }
-
-    .datatable-header {
-      .datatable-header-cell {
-        padding: 4px 8px;
-
-        .column-group-header {
-          &-icon {
-            max-width: 8px;
-            margin-right: 8px;
-            flex-grow: 1;
-
-            .mat-icon {
-              height: 12px;
-              line-height: 12px;
-            }
-          }
-        }
-
-        &.sto-datatable__header-column {
-          &--withunit {
-            .sto-datatable__header-column__unit {
-              margin-right: -3px; //Adjusment for weird whitepace
-              font-size: 10px;
-              position: static;
-
-              &::before {
-                content: '(';
-              }
-
-              &::after {
-                content: ')';
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .mat-icon {
-      height: $icon-height;
-      width: $icon-height;
-      font-size: $icon-height;
-      line-height: $icon-height;
-    }
-  }
-
-  sto-datatable-fixed-row-wrapper {
-    margin-top: 8px;
-  }
-
-  .date-status-cell {
-    .month-label {
-      line-height: 20px;
-      position: absolute;
-      left: 2px;
-    }
-  }
-}
-
-.sto-compact
-  .sto-datatable
-  .datatable-body
-  .datatable-body-cell-label
-  .date-status-cell {
-  line-height: 24px;
-}
-
-.sto-compact .sto-datatable {
-  .datatable-footer .datatable-footer-inner {
-    font-size: 11px;
-    line-height: 13px;
-  }
-}
-
-.sto-compact
-  .imo-overview
-  .sto-datatable
-  .datatable-body
-  .datatable-body-row
-  .datatable-body-cell.sto-datatable__column--editable
-  .datatable-body-cell-label {
-  .mat-form-field-prefix {
-    height: 19px;
-    width: 19px;
-
-    button.mat-icon-button {
-      font-size: 18px;
-      height: 18px;
-      width: 18px;
-      line-height: 18px;
-    }
-
-    .mat-icon {
-      font-size: 16px;
-      height: 16px;
-      width: 16px;
-      line-height: 16px;
-    }
-  }
-}

package/style/datatable/_ngx-datatable-form.scss

@@ -1,90 +0,0 @@
-.sto-datatable {
-  .sto-form__field {
-    // width: calc(100% - 4px);
-    min-height: auto;
-    --mat-form-field-container-vertical-padding: 7px;
-    &--readonly,
-    &--disabled {
-      .mat-mdc-form-field-flex {
-        border: 0;
-        color: var(--text-disabled);
-      }
-    }
-    .mat-mdc-form-field-flex {
-      padding: 0 6px;
-    }
-    .mat-mdc-form-field-subscript-wrapper {
-      display: none;
-    }
-
-    input[type='number'] {
-      text-align: right;
-    }
-
-    .mat-select {
-      .mat-select-arrow {
-        margin-top: -5px;
-      }
-    }
-  }
-
-  &__column {
-    &--editable {
-      padding: 2px 0 !important;
-
-      .datatable-body-cell-label .mat-select {
-        height: 14px;
-      }
-
-      .datatable-body-cell-label .mat-icon-button {
-        margin: 0;
-        height: 16px;
-        width: 16px;
-
-        .mat-icon {
-          height: 1.125em;
-          width: 16px;
-        }
-      }
-    }
-  }
-
-  .mat-form-field-placeholder,
-  .mat-mdc-floating-label {
-    top: 0;
-  }
-
-  .mat-mdc-floating-label-wrapper {
-    top: 0;
-    padding: 0;
-  }
-}
-
-.sto-compact {
-  .sto-datatable {
-    .sto-form__field {
-      .mat-mdc-form-field-flex {
-        height: auto;
-      }
-
-      .mat-mdc-form-field-icon-suffix {
-        height: 22px;
-      }
-
-      &.mat-form-field-type-mat-input {
-        .mat-form-field-underline {
-          bottom: 18px;
-
-          .mat-form-field-ripple {
-            height: 2px;
-          }
-        }
-      }
-    }
-
-    .datatable-body .datatable-body-cell-label {
-      line-height: inherit;
-      height: 100%;
-    }
-  }
-}

package/style/datatable/_ngx-datatable-variables.scss

@@ -1,10 +0,0 @@
-//colors: datatable
-
-$datatable-font-size: $font-size;
-$datatable-header-vertical-padding: $space-2x;
-$datatable-header-horizontal-padding: $space-2x;
-$datatable-header-font-size: 11px;
-$datatable-vertical-padding: $space-2x;
-$datatable-horizontal-padding: $space-2x;
-
-$content-height: 20px;