invensys-ng 21.0.1

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "invensys-ng",
+  "version": "21.0.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ulbrichFrauendorf/invensys-ng.git"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.2.12",
+    "@angular/core": "^21.2.12",
+    "chart.js": "^4.5.1",
+    "primeicons": "^7.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/invensys-ng.mjs",
+  "typings": "types/invensys-ng.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/invensys-ng.d.ts",
+      "default": "./fesm2022/invensys-ng.mjs"
+    }
+  }
+}

package/src/lib/themes/_variables.scss

@@ -0,0 +1,8 @@
+/* General */
+$scale: 14px; /* main font size */
+$borderRadius: 8px; /* border radius of layout element e.g. card, sidebar */
+$componentBorderRadius: 4px; /* border radius of components e.g. buttons, inputs */
+$transitionDuration: 0.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
+/* Standardized component input height (useful for input-text, chips, select triggers)
+	Set this to match the visual height of inputs across the library. */
+$component-input-height: 42px; /* default: matches float-label input (14px font + 14px padding top+bottom) */

package/src/lib/themes/color-palette.scss

@@ -0,0 +1,158 @@
+// This file contains the color variables used throughout the application.
+$colors: (
+  "blue": (
+    50: #f5f9ff,
+    100: #d0e1fd,
+    200: #abc9fb,
+    300: #85b2f9,
+    400: #609af8,
+    500: #3b82f6,
+    600: #326fd1,
+    700: #295bac,
+    800: #204887,
+    900: #183462,
+  ),
+  "green": (
+    50: #f4fcf7,
+    100: #caf1d8,
+    200: #a0e6ba,
+    300: #76db9b,
+    400: #4cd07d,
+    500: #22c55e,
+    600: #1da750,
+    700: #188a42,
+    800: #136c34,
+    900: #0e4f26,
+  ),
+  "yellow": (
+    50: #fefbf3,
+    100: #faedc4,
+    200: #f6de95,
+    300: #f2d066,
+    400: #eec137,
+    500: #eab308,
+    600: #c79807,
+    700: #a47d06,
+    800: #816204,
+    900: #5e4803,
+  ),
+  "cyan": (
+    50: #f3fbfd,
+    100: #c3edf5,
+    200: #94e0ed,
+    300: #65d2e4,
+    400: #35c4dc,
+    500: #06b6d4,
+    600: #059bb4,
+    700: #047f94,
+    800: #036475,
+    900: #024955,
+  ),
+  "pink": (
+    50: #fef6fa,
+    100: #fad3e7,
+    200: #f7b0d3,
+    300: #f38ec0,
+    400: #f06bac,
+    500: #ec4899,
+    600: #c93d82,
+    700: #a5326b,
+    800: #822854,
+    900: #5e1d3d,
+  ),
+  "indigo": (
+    50: #f7f7fe,
+    100: #dadafc,
+    200: #bcbdf9,
+    300: #9ea0f6,
+    400: #8183f4,
+    500: #6366f1,
+    600: #5457cd,
+    700: #4547a9,
+    800: #363885,
+    900: #282960,
+  ),
+  "teal": (
+    50: #f3fbfb,
+    100: #c7eeea,
+    200: #9ae0d9,
+    300: #6dd3c8,
+    400: #41c5b7,
+    500: #14b8a6,
+    600: #119c8d,
+    700: #0e8174,
+    800: #0b655b,
+    900: #084a42,
+  ),
+  "orange": (
+    50: #fff7ed,
+    100: #ffedd5,
+    200: #fed7aa,
+    300: #fdba74,
+    400: #fb923c,
+    500: #f59e0b,
+    600: #d97706,
+    700: #b45309,
+    800: #92400e,
+    900: #78350f,
+  ),
+  "bluegray": (
+    50: #f7f8f9,
+    100: #dadee3,
+    200: #bcc3cd,
+    300: #9fa9b7,
+    400: #818ea1,
+    500: #64748b,
+    600: #556376,
+    700: #465161,
+    800: #37404c,
+    900: #282e38,
+  ),
+  "purple": (
+    50: #fbf7ff,
+    100: #ead6fd,
+    200: #dab6fc,
+    300: #c996fa,
+    400: #b975f9,
+    500: #a855f7,
+    600: #8f48d2,
+    700: #763cad,
+    800: #5c2f88,
+    900: #432263,
+  ),
+  "red": (
+    50: #fff5f5,
+    100: #ffd0ce,
+    200: #ffaca7,
+    300: #ff8780,
+    400: #ff6259,
+    500: #ff3d32,
+    600: #d9342b,
+    700: #b32b23,
+    800: #8c221c,
+    900: #661814,
+  ),
+  "sky": (
+    base: #38bdf8,
+    dark: #0ea5e9,
+    darker: #0369a1,
+    light: #7dd3fc,
+    lighter: #e0f2fe,
+    contrast: #fff,
+    contrast-dark: #0f172a,
+  ),
+  "gray": (
+    0: #ffffff,
+    50: #f8fafc,
+    100: #f1f5f9,
+    200: #e2e8f0,
+    300: #cbd5e1,
+    400: #94a3b8,
+    500: #64748b,
+    600: #475569,
+    700: #334155,
+    800: #1e293b,
+    900: #111827,
+    950: #020617,
+  ),
+);

package/src/lib/themes/color-variables.scss

@@ -0,0 +1,38 @@
+$color-white: #ffffff;
+$color-black: #000000;
+$color-primary: var(--color-primary);
+$color-secondary: var(--color-secondary);
+$color-tertiary: var(--color-tertiary);
+$color-success: var(--color-success);
+$color-info: var(--color-info);
+$color-warning: var(--color-warning);
+$color-danger: var(--color-danger);
+$color-contrast: var(--color-contrast);
+$color-contrast-inverse: var(--color-contrast-inverse);
+
+$color-overlay-background: rgba(0, 0, 0, 0.4);
+$color-component-background: var(--color-component-background);
+$color-component-background-secondary: var(
+  --color-component-background-secondary
+);
+$color-component-background-solid: var(--color-component-background-solid);
+$color-disabled-background: var(--color-disabled-background);
+$color-disabled-border: var(--color-disabled-border);
+
+$color-surface-ground: var(--surface-ground);
+$color-surface-elevated: var(--surface-elevated);
+$color-surface-section: var(--surface-section);
+$color-surface-card: var(--surface-card);
+$color-surface-overlay: var(--surface-overlay);
+$color-surface-border: var(--surface-border);
+$color-surface-hover: var(--surface-hover);
+
+$color-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+
+$color-text-primary: var(--color-text-primary);
+$color-text-contrast: var(--color-text-contrast);
+$color-text-secondary: var(--color-text-secondary);
+$color-text-tertiary: var(--color-text-tertiary);
+$color-text-disabled: var(--color-text-disabled);
+
+$color-border: var(--color-border);

package/src/lib/themes/colors.theme.scss

@@ -0,0 +1,87 @@
+@use "sass:map";
+@use "./color-variables.scss" as vars;
+@use "./get-color.scss" as color;
+
+@mixin define-color-palette($mode: light) {
+  @if $mode == light {
+    .light {
+      --color-primary: #{color.get-color("orange", 500)};
+      --color-secondary: #{color.get-color("gray", 700)};
+      --color-tertiary: #{color.get-color("bluegray", 500)};
+      --color-success: #{color.get-color("green", 500)};
+      --color-info: #{color.get-color("sky", "dark")};
+      --color-warning: #{color.get-color("yellow", 500)};
+      --color-danger: #{color.get-color("red", 500)};
+      --color-contrast: #000;
+      --color-contrast-inverse: #fff;
+
+      // Text colors
+      --color-text-primary: #{color.get-color("gray", 700)};
+      --color-text-contrast: #ffffffde;
+      --color-text-secondary: #{color.get-color("gray", 600)};
+      --color-text-tertiary: #{color.get-color("bluegray", 500)};
+
+      // Background colors
+      --color-component-background: #ffffff;
+      --color-component-background-secondary: #ffffff;
+      --color-component-background-solid: #{color.get-color("bluegray", 900)};
+
+      // Border colors
+      --color-border: #{color.get-color("gray", 300)};
+
+      // Disabled state colors
+      --color-disabled-background: #f5f5f5;
+      --color-disabled-border: #e2e8f0;
+      --color-text-disabled: #{color.get-color("gray", 700)};
+
+      // Surface colors
+      --surface-ground: #f8fafc;
+      --surface-elevated: #ffffff;
+      --surface-section: #ffffff;
+      --surface-card: #ffffff;
+      --surface-overlay: #ffffff;
+      --surface-border: #e2e8f0;
+      --surface-hover: #f1f5f9;
+    }
+  } @else if $mode == dark {
+    .dark {
+      --color-primary: #{color.get-color("yellow", 500)};
+      --color-secondary: #{color.get-color("gray", 300)};
+      --color-tertiary: #{color.get-color("bluegray", 500)};
+      --color-success: #{color.get-color("green", 400)};
+      --color-info: #{color.get-color("sky", "base")};
+      --color-warning: #{color.get-color("yellow", 400)};
+      --color-danger: #{color.get-color("red", 400)};
+      --color-contrast: #ffffff;
+      --color-contrast-inverse: #000;
+
+      // Text colors
+      --color-text-primary: #ffffffde;
+      --color-text-contrast: #ffffffde;
+      --color-text-secondary: #{color.get-color("gray", 300)};
+      --color-text-tertiary: #{color.get-color("bluegray", 500)};
+
+      // Background colors
+      --color-component-background: #0b121c;
+      --color-component-background-secondary: #000510;
+      --color-component-background-solid: #{color.get-color("bluegray", 900)};
+
+      // Border colors
+      --color-border: #5e564b;
+
+      // Disabled state colors
+      --color-disabled-background: #1f2937;
+      --color-disabled-border: #4b4e50;
+      --color-text-disabled: #ffffffde;
+
+      // Surface colors
+      --surface-ground: #000510;
+      --surface-elevated: #1f2937;
+      --surface-section: #111827;
+      --surface-card: #0b121c;
+      --surface-overlay: #0b121c;
+      --surface-border: #4b4e50; //625a4e
+      --surface-hover: rgba(255, 255, 255, 0.03);
+    }
+  }
+}

package/src/lib/themes/get-color.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+@use './color-palette.scss' as colors;
+
+@function get-color($name, $shade) {
+  $shades: map.get(colors.$colors, $name);
+  @if $shades == null {
+    @error "Color `#{$name}` not found in \$colors map.";
+  }
+
+  $value: map.get($shades, $shade);
+  @if $value == null {
+    @error "Shade `#{$shade}` not found in `#{$name}` color.";
+  }
+
+  @return $value;
+}

package/src/lib/themes/scrollbar-mixins.scss

@@ -0,0 +1,104 @@
+@use "./color-variables.scss" as colors;
+
+// Mixin for consistent thin scrollbars across components
+@mixin thin-scrollbar() {
+  // Webkit browsers (Chrome, Safari, Edge)
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    transition: background 0.2s ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.35);
+    }
+
+    &:active {
+      background: rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  // Firefox
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+
+  // Smooth scrolling
+  scroll-behavior: smooth;
+}
+
+// Theme-aware scrollbar mixin
+@mixin themed-scrollbar() {
+  @include thin-scrollbar();
+
+  // Override default colors with theme colors
+  &::-webkit-scrollbar-thumb {
+    background: colors.$color-text-secondary;
+    opacity: 0.4;
+
+    &:hover {
+      background: colors.$color-text-primary;
+      opacity: 0.6;
+    }
+
+    &:active {
+      background: colors.$color-primary;
+      opacity: 0.7;
+    }
+  }
+
+  // Firefox with theme colors
+  scrollbar-color: colors.$color-text-secondary transparent;
+}
+
+// Scrollbar for dropdown/overlay components
+@mixin dropdown-scrollbar() {
+  @include themed-scrollbar();
+
+  // Additional styling for dropdown contexts
+  &::-webkit-scrollbar {
+    width: 6px; // Slightly wider for better visibility
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05); // Subtle track background
+    border-radius: 3px;
+    margin: 2px 0; // Add margin to prevent cutoff
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    min-height: 20px; // Ensure minimum thumb size
+
+    // More visible colors for dropdowns
+    background: colors.$color-text-secondary;
+    opacity: 0.6;
+
+    &:hover {
+      background: colors.$color-text-primary;
+      opacity: 0.8;
+    }
+
+    &:active {
+      background: colors.$color-primary;
+      opacity: 0.9;
+    }
+  }
+
+  // Better Firefox scrollbar visibility
+  scrollbar-width: thin;
+  scrollbar-color: colors.$color-text-secondary rgba(0, 0, 0, 0.05);
+}