@filip.mazev/blocks 1.0.18 → 1.0.34

package/README.md

@@ -16,7 +16,7 @@ ng add @filip.mazev/blocks
 
 When you run the command above, the Angular CLI will execute our custom schematic to handle the boilerplate for you:
 
-* Interactive Theme Selection: You will be prompted to choose your preferred global theme (Default or Orange Company).
+* Interactive Theme Selection: You will be prompted to choose your preferred global theme (Purple or Orange Company).
 * Dependency Management: Automatically adds the latest versions of the Blocks ecosystem to your package.json and runs npm install.
 * SCSS Injection: Intelligently locates your project's global stylesheet (styles.scss or styles.sass) and injects the required @use statements, mixins, and both light/dark mode CSS variables based on your theme selection.
 
@@ -30,6 +30,8 @@ Running the schematic will automatically install the following libraries:
 
 * @filip.mazev/toastr: A component-driven toast notification system featuring smart queue management, auto-dismissal, and built-in status views.
 
+* @filip.mazev/icons: The icon package used across the blocks components
+
 ## Manual Setup (Without Angular CLI)
 
 If you prefer not to use `ng add` or are in an environment that doesn't support Angular Schematics, you can install the packages manually:
@@ -43,17 +45,15 @@ Then, manually configure your styles.scss:
 ```scss
 @use '@filip.mazev/blocks-core/src/lib/styles/index' as *;
 @use '@filip.mazev/modal/lib/styles/index' as modal;
-@use '@filip.mazev/toastr/lib/styles/index' as toastr;
 
 @layer base {
     :root {
-        @include core-theme($default-light-theme-config);
+        @include core-theme($purple-light-theme);
         @include modal.modal-theme();
-        @include toastr.toastr-theme(());
     }
 
     [data-theme='dark'] {
-        @include core-theme($default-dark-theme-config);
+        @include core-theme($purple-dark-theme);
     }
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filip.mazev/blocks",
-  "version": "1.0.18",
+  "version": "1.0.34",
   "schematics": "./schematics/collection.json",
   "peerDependencies": {
     "@angular/core": "^21.1.1",
@@ -20,6 +20,7 @@
     }
   },
   "sideEffects": false,
+  "type": "module",
   "dependencies": {
     "tslib": "^2.3.0"
   }

package/schematics/ng-add/index.js

@@ -25,7 +25,9 @@ function addDependencies(tree, context) {
     const packages = [
         '@filip.mazev/blocks-core',
         '@filip.mazev/modal',
-        '@filip.mazev/toastr'
+        '@filip.mazev/toastr',
+        '@filip.mazev/icons',
+        '@filip.mazev/button'
     ];
     let dependenciesAdded = false;
     packages.forEach(pkg => {
@@ -77,18 +79,16 @@ function injectStyles(tree, context, options) {
         context.logger.info('Blocks SCSS configuration already exists. Skipping style injection.');
         return;
     }
-    const lightThemeVar = options.theme === 'orange-company' ? '$orange-company-light-theme-config' : '$default-light-theme-config';
-    const darkThemeVar = options.theme === 'orange-company' ? '$orange-company-dark-theme-config' : '$default-dark-theme-config';
+    const lightThemeVar = `$${options.theme}-light-theme`;
+    const darkThemeVar = `$${options.theme}-dark-theme`;
     const blocksThemeSnippet = `
 @use '@filip.mazev/blocks-core/src/lib/styles/index' as *;
 @use '@filip.mazev/modal/lib/styles/index' as modal;
-@use '@filip.mazev/toastr/lib/styles/index' as toastr;
 
 @layer base {
     :root {
         @include core-theme(${lightThemeVar});
         @include modal.modal-theme();
-        @include toastr.toastr-theme(());
     }
 
     [data-theme='dark'] {

package/schematics/ng-add/schema.json

@@ -6,26 +6,26 @@
     "properties": {
         "theme": {
             "type": "string",
-            "description": "Select the default theme for your UI blocks.",
+            "description": "Select the theme for your UI.",
             "enum": [
-                "default",
-                "orange-company"
+                "purple",
+                "orange"
             ],
             "x-prompt": {
                 "message": "Which theme would you like to use?",
                 "type": "list",
                 "items": [
                     {
-                        "value": "default",
-                        "label": "Default Theme"
+                        "value": "purple",
+                        "label": "Purple Theme"
                     },
                     {
-                        "value": "orange-company",
-                        "label": "Orange Company Theme"
+                        "value": "orange",
+                        "label": "Orange Theme"
                     }
                 ]
             },
-            "default": "default"
+            "default": "purple"
         }
     },
     "required": [