@lukfel/ng-scaffold 22.1.14 → 22.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukfel/ng-scaffold",
-  "version": "22.1.14",
+  "version": "22.2.2",
   "description": "This Angular library provides a basic UI scaffold and services for modern web and mobile apps",
   "license": "MIT",
   "author": {

package/schematics/ng-add/add-styles.d.ts

@@ -2,4 +2,5 @@
  * Check for root style file and add the necessary styles on top
  */
 import { Rule } from '@angular-devkit/schematics';
-export declare function addStyles(): Rule;
+import type { Schema } from './schema';
+export declare function addStyles(options?: Schema): Rule;

package/schematics/ng-add/add-styles.js

@@ -4,9 +4,58 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addStyles = addStyles;
-function addStyles() {
+const M3_SNIPPET = `
+@use "@lukfel/ng-scaffold/styles" as lf;
+@use '@angular/material' as mat;
+
+// Define themes (use Material palettes or create your own)
+// 'theme-type' takes 'light', 'dark' or 'color-scheme' (follows the OS setting)
+$base-theme: (
+  primary: mat.$rose-palette,
+  tertiary: mat.$blue-palette,
+  theme-type: light,
+  font-family: 'Roboto'
+);
+
+$theme2: (
+  primary: mat.$rose-palette,
+  tertiary: mat.$blue-palette,
+  theme-type: dark
+);
+
+// Include themes (use ThemeService to switch between themes)
+@include lf.scaffold-theme-m3($base-theme);
+@include lf.scaffold-colors-m3($theme2, 'theme2');
+
+`;
+const M2_SNIPPET = `
+@use "@lukfel/ng-scaffold/styles" as lf;
+@use '@angular/material' as mat;
+
+// Define themes (use Material palettes or create your own)
+$base-theme: (
+  primary: mat.m2-define-palette(mat.$m2-pink-palette),
+  accent: mat.m2-define-palette(mat.$m2-blue-palette),
+  warn: mat.m2-define-palette(mat.$m2-red-palette),
+  dark: false,
+  font-family: 'Roboto'
+);
+
+$theme2: (
+  primary: mat.m2-define-palette(mat.$m2-pink-palette),
+  accent: mat.m2-define-palette(mat.$m2-blue-palette),
+  dark: true
+);
+
+// Include themes (use ThemeService to switch between themes)
+@include lf.scaffold-theme-m2($base-theme);
+@include lf.scaffold-colors-m2($theme2, 'theme2');
+
+`;
+function addStyles(options = {}) {
     return (tree, context) => {
-        context.logger.info('[Styles] Searching for root styles ...');
+        const useM2 = options.materialVersion === 'm2';
+        context.logger.info(`[Styles] Searching for root styles (Material ${useM2 ? '2' : '3'}) ...`);
         const possiblePaths = ['src/styles.scss', 'src/styles.sass', 'src/styles.css'];
         const path = possiblePaths.find((p) => tree.exists(p));
         if (!path) {
@@ -18,32 +67,8 @@ function addStyles() {
             context.logger.info('[Styles] Styles already added. Skip.');
             return tree;
         }
-        const SNIPPET = `
-@use "@lukfel/ng-scaffold/styles" as lf;
-@use '@angular/material' as mat;
-
-// Define themes (use Material palettes or create your own)
-$base-theme: (
-  primary: mat.m2-define-palette(mat.$m2-pink-palette),
-  accent: mat.m2-define-palette(mat.$m2-blue-palette),
-  warn: mat.m2-define-palette(mat.$m2-red-palette),
-  dark: false,
-  font-family: 'Roboto'
-);
-
-$theme2: (
-  primary: mat.m2-define-palette(mat.$m2-pink-palette),
-  accent: mat.m2-define-palette(mat.$m2-blue-palette),
-  dark: true
-);
-
-// Include themes (use ThemeService to switch between themes)
-@include lf.scaffold-theme($base-theme);
-@include lf.scaffold-colors($theme2, 'theme2');
-
-`;
         const recorder = tree.beginUpdate(path);
-        recorder.insertLeft(0, SNIPPET);
+        recorder.insertLeft(0, useM2 ? M2_SNIPPET : M3_SNIPPET);
         tree.commitUpdate(recorder);
         context.logger.info('[Styles] Successfully added.');
         return tree;

package/schematics/ng-add/add-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"add-styles.js","sourceRoot":"","sources":["../../../../projects/ng-scaffold/schematics/ng-add/add-styles.ts"],"names":[],"mappings":";AAAA;;GAEG;;AAIH,8BAiDC;AAjDD,SAAgB,SAAS;IACvB,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,wCAAwC,CAAC,CAAC;QAE9D,MAAM,aAAa,GAAG,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;QAE/E,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACvD,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;YACnE,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACnD,IAAI,OAAO,CAAC,QAAQ,CAAC,4BAA4B,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC;YAC5F,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,sCAAsC,CAAC,CAAC;YAC5D,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;CAuBnB,CAAC;QAEE,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACxC,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;QAChC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAC5B,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;QACpD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"add-styles.js","sourceRoot":"","sources":["../../../../projects/ng-scaffold/schematics/ng-add/add-styles.ts"],"names":[],"mappings":";AAAA;;GAEG;;AAuDH,8BA0BC;AA5ED,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;CAuBlB,CAAC;AAEF,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;CAuBlB,CAAC;AAEF,SAAgB,SAAS,CAAC,UAAkB,EAAE;IAC5C,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,MAAM,KAAK,GAAG,OAAO,CAAC,eAAe,KAAK,IAAI,CAAC;QAE/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,gDAAgD,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC;QAE9F,MAAM,aAAa,GAAG,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;QAE/E,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACvD,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;YACnE,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACnD,IAAI,OAAO,CAAC,QAAQ,CAAC,4BAA4B,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC;YAC5F,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,sCAAsC,CAAC,CAAC;YAC5D,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACxC,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;QACxD,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAC5B,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;QACpD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC"}

package/schematics/ng-add/index.d.ts

@@ -1,2 +1,3 @@
 import { Rule } from '@angular-devkit/schematics';
-export declare function ngAdd(): Rule;
+import type { Schema } from './schema';
+export declare function ngAdd(options?: Schema): Rule;

package/schematics/ng-add/index.js

@@ -6,7 +6,7 @@ const add_config_1 = require("./add-config");
 const add_component_1 = require("./add-component");
 const add_styles_1 = require("./add-styles");
 const add_template_1 = require("./add-template");
-function ngAdd() {
-    return (0, schematics_1.chain)([(0, add_component_1.addComponent)(), (0, add_config_1.addConfig)(), (0, add_template_1.addTemplate)(), (0, add_styles_1.addStyles)()]);
+function ngAdd(options = {}) {
+    return (0, schematics_1.chain)([(0, add_component_1.addComponent)(), (0, add_config_1.addConfig)(), (0, add_template_1.addTemplate)(), (0, add_styles_1.addStyles)(options)]);
 }
 //# sourceMappingURL=index.js.map

package/schematics/ng-add/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../projects/ng-scaffold/schematics/ng-add/index.ts"],"names":[],"mappings":";;AAMA,sBAEC;AARD,2DAAyD;AACzD,6CAAyC;AACzC,mDAA+C;AAC/C,6CAAyC;AACzC,iDAA6C;AAE7C,SAAgB,KAAK;IACnB,OAAO,IAAA,kBAAK,EAAC,CAAC,IAAA,4BAAY,GAAE,EAAE,IAAA,sBAAS,GAAE,EAAE,IAAA,0BAAW,GAAE,EAAE,IAAA,sBAAS,GAAE,CAAC,CAAC,CAAC;AAC1E,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../projects/ng-scaffold/schematics/ng-add/index.ts"],"names":[],"mappings":";;AAOA,sBAEC;AATD,2DAAyD;AACzD,6CAAyC;AACzC,mDAA+C;AAC/C,6CAAyC;AACzC,iDAA6C;AAG7C,SAAgB,KAAK,CAAC,UAAkB,EAAE;IACxC,OAAO,IAAA,kBAAK,EAAC,CAAC,IAAA,4BAAY,GAAE,EAAE,IAAA,sBAAS,GAAE,EAAE,IAAA,0BAAW,GAAE,EAAE,IAAA,sBAAS,EAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AACjF,CAAC"}

package/schematics/ng-add/schema.d.ts

@@ -0,0 +1,5 @@
+export type MaterialVersion = 'm3' | 'm2';
+export interface Schema {
+    /** Which Angular Material theming API to set up in the global styles. */
+    materialVersion?: MaterialVersion;
+}

package/schematics/ng-add/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/schematics/ng-add/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../projects/ng-scaffold/schematics/ng-add/schema.ts"],"names":[],"mappings":""}

package/schematics/ng-add/schema.json

@@ -1,7 +1,22 @@
-{
-  "$schema": "http://json-schema.org/schema",
-  "$id": "NgAddSchema",
-  "title": "Ng Add Options",
-  "type": "object",
-  "properties": {}
-}
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "NgAddSchema",
+  "title": "Ng Add Options",
+  "type": "object",
+  "properties": {
+    "materialVersion": {
+      "type": "string",
+      "description": "Which Angular Material theming API to set up in the global styles.",
+      "enum": ["m3", "m2"],
+      "default": "m3",
+      "x-prompt": {
+        "message": "Which Angular Material theming API should be used?",
+        "type": "list",
+        "items": [
+          { "value": "m3", "label": "Material 3 (recommended)" },
+          { "value": "m2", "label": "Material 2 (legacy)" }
+        ]
+      }
+    }
+  }
+}

package/schematics/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/styles/_theme.scss

@@ -19,7 +19,7 @@ $lf-default-theme: (
 // Material requires to split up the mat.all-component-themes and mat.all-component-colors
 // since mat.all-component-themes should also be imported once, but mat.all-component-colors
 // can be imported multiple times
-@mixin scaffold-theme($theme: $lf-default-theme) {
+@mixin scaffold-theme-m2($theme: $lf-default-theme) {
   $theme: map-merge($lf-default-theme, $theme);
 
   @if(map-get($theme, 'dark') == false) {
@@ -53,7 +53,7 @@ $lf-default-theme: (
 }
 
 // Set M2 colors
-@mixin scaffold-colors($theme: $lf-default-theme, $class) {
+@mixin scaffold-colors-m2($theme: $lf-default-theme, $class) {
   $theme: map-merge($lf-default-theme, $theme);
 
   .#{$class} {
@@ -115,6 +115,16 @@ $lf-default-theme: (
   }
 }
 
+// Legacy aliases for apps written before the -m2 suffix existed.
+// These always mean M2; never repoint them at M3.
+@mixin scaffold-theme($theme: $lf-default-theme) {
+  @include scaffold-theme-m2($theme);
+}
+
+@mixin scaffold-colors($theme: $lf-default-theme, $class) {
+  @include scaffold-colors-m2($theme, $class);
+}
+
 // ============================================================================
 // Material 3 (M3) Theming
 // ============================================================================
@@ -203,6 +213,7 @@ $lf-default-theme-m3: (
   }
 
   @include shape-variables-m3();
+  @include elevation-compat-m3();
   @include toolbar-color-compat();
   @include container-color-compat($m2);
   @include color-variables-m3('body', $m2);
@@ -289,6 +300,21 @@ $lf-default-theme-m3: (
   }
 }
 
+// Elevation backwards compatibility
+// M3 sets no --mat-app-* tokens and Angular emits the elevation fallbacks
+// malformed ("--mat-sys-shadow" with no var()), so .mat-elevation-z* would
+// resolve to an invalid box-shadow. M2's dp scale lines up with M3's six
+// levels at 0, 1, 3, 6, 8 and 12.
+@mixin elevation-compat-m3() {
+  :root {
+    @each $level, $elevations in (0: (0), 1: (1, 2), 2: (3, 4, 5), 3: (6, 7), 4: (8, 9, 10, 11), 5: (12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24)) {
+      @each $z in $elevations {
+        --mat-app-elevation-shadow-level-#{$z}: var(--mat-sys-level#{$level});
+      }
+    }
+  }
+}
+
 // Container colour backwards compatibility
 // M3 renders FABs and selected chips on a *container* tone, where M2 used the main
 // hue. Container and foreground are restored as a pair: the container alone would