Merge pull request #8 from fullstack-devops/bugfix/scss-location

change scss location

Author: eksrha

projects/lib-workspace/src/styles.scss

@@ -1,6 +1,5 @@
-@use '@angular/material' as mat;
-
-mat.$theme-ignore-duplication-warnings: true;
+@use "@angular/material" as mat;
+@use "../../ng-mat-components" as fs-components;
 
 body {
   margin: 0;
@@ -16,7 +15,7 @@ body {
 }
 
 @include mat.core();
-@import "../../ng-mat-components/src/fs-mat-components-theme.scss";
+@import "../../ng-mat-components";
 
 // Define a light theme
 $light-primary: mat.define-palette(mat.$indigo-palette);
@@ -44,13 +43,13 @@ $dark-theme: mat.define-dark-theme(
 
 // Apply the dark theme by default
 @include mat.all-component-themes($dark-theme);
-@include fs-mat-components-theme($dark-theme);
+@include fs-components.all-component-themes($dark-theme);
 
 // Apply the light theme only when the `.my-light-theme` CSS class is applied
 // to an ancestor element of the components (such as `body`).
 .my-light-theme {
-  @include mat.all-component-themes($light-theme);
-  @include fs-mat-components-theme($light-theme);
+  @include mat.all-component-colors($light-theme);
+  @include fs-components.all-component-themes($light-theme);
 }
 
 .mat-form-field:not(.mat-form-field-has-label) .mat-form-field-infix {
@@ -66,4 +65,3 @@ $dark-theme: mat.define-dark-theme(
 .mat-form-field-label-wrapper {
   padding-top: 0px;
 }
-

projects/ng-mat-components/_index.scss

@@ -0,0 +1,10 @@
+@use "sass:color";
+@use "sass:map";
+
+@use './theming';
+
+@forward "./_theming.scss" show all-component-themes;
+
+@mixin all-component-themes($theme-or-color-config) {
+  @include theming.theme($theme-or-color-config);
+}

projects/ng-mat-components/src/fs-mat-components-theme.scss renamed to projects/ng-mat-components/_theming.scss

@@ -2,7 +2,7 @@
 @import "~@angular/material/theming";
 
 // Define a mixin that accepts a theme and outputs the color styles for the component.
-@mixin fs-mat-components-theme($theme) {
+@mixin theme($theme) {
   // Extract whichever individual palettes you need from the theme.
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);

projects/ng-mat-components/ng-package.json

@@ -5,6 +5,7 @@
     "entryFile": "src/public-api.ts"
   },
   "assets": [
-    "./src/fs-mat-components-theme.scss"
+    "./_index.scss",
+    "./_theming.scss"
   ]
 }

projects/ng-mat-components/package.json

@@ -6,7 +6,7 @@
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0",
     "moment": "^2.29.0",
-    "@angular/material": ">=13.0.0"
+    "@angular/material": "^13.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -24,5 +24,16 @@
   },
   "bugs": {
     "url": "https://github.com/fullstack-devops/ng-mat-components/issues"
+  },
+  "exports": {
+    ".": {
+      "sass": "./_index.scss"
+    },
+    "./theming": {
+      "sass": "./_theming.scss"
+    },
+    "./_theming": {
+      "sass": "./_theming.scss"
+    }
   }
 }

projects/ng-mat-components/src/lib/fs-ui-frame/fs-ui-frame.modules.ts

@@ -1,4 +1,4 @@
-import { Data, Route } from "@angular/router";
+import { Data, Route } from '@angular/router';
 
 /**
  *  @interface NavItem
@@ -8,14 +8,14 @@ import { Data, Route } from "@angular/router";
  *  @logo                {string}     link to logo, can be relative or full URL
  */
 export interface FrameConfig {
-    appName: string
-    appNameShort?: StringOfLength<0, 6>
-    logo: string
+  appName: string;
+  appNameShort?: StringOfLength<0, 6>;
+  logo: string;
 }
 
 export enum FrameEvents {
-    MANAGE_ACCOUNT = 'EVENT_MANAGE_ACCOUNT',
-    LOGOUT = 'EVENT_LOGOUT'
+  MANAGE_ACCOUNT = 'EVENT_MANAGE_ACCOUNT',
+  LOGOUT = 'EVENT_LOGOUT',
 }
 
 /**
@@ -25,8 +25,8 @@ export enum FrameEvents {
  *  @data                {string}     data which get send with event
  */
 export interface FrameEvent {
-    type: string;
-    data: any;
+  type: FrameEvents;
+  data: any;
 }
 
 /**
@@ -37,65 +37,63 @@ export interface FrameEvent {
  *  @profilePicture       {string}     profile Picture (can be empty)
  */
 export interface NavUser {
-    name: string
-    role: string
-    profilePicture: string
+  name: string;
+  role: string;
+  profilePicture: string;
 }
 
 interface FrameRouteData extends Data {
-    /**
-     * sould this route be visable in sidenav
-     */
-    displaySidemenu: boolean;
-    /**
-    * displayed text, shows only in opened mode
-    */
-    sidenavText: string;
-    /**
-    * displayed icon, use **only** material-icons!
-    */
-    sidenavIcon: string;
-    /**
-    * ...
-    */
-    roles?: string[];
-    /**
-    * App title dynamic
-    */
-    title?: string;
+  /**
+   * sould this route be visable in sidenav
+   */
+  displaySidemenu: boolean;
+  /**
+   * displayed text, shows only in opened mode
+   */
+  sidenavText: string;
+  /**
+   * displayed icon, use **only** material-icons!
+   */
+  sidenavIcon: string;
+  /**
+   * ...
+   */
+  roles?: string[];
+  /**
+   * App title dynamic
+   */
+  title?: string;
 }
 interface FrameRoute extends Route {
-    data?: FrameRouteData;
+  data?: FrameRouteData;
 }
 export type FrameRoutes = FrameRoute[];
 
-
-
 type StringOfLength<Min, Max> = string & {
-    readonly StringOfLength: unique symbol // this is the phantom type
+  readonly StringOfLength: unique symbol; // this is the phantom type
 };
 
 // This is a type guard function which can be used to assert that a string
 // is of type StringOfLength<Min,Max>
 const isStringOfLength = <Min extends number, Max extends number>(
-    str: string,
-    min: Min,
-    max: Max
+  str: string,
+  min: Min,
+  max: Max
 ): str is StringOfLength<Min, Max> => str.length >= min && str.length <= max;
 
 // type constructor function
 export const stringOfLength = <Min extends number, Max extends number>(
-    input: unknown,
-    min: Min,
-    max: Max
+  input: unknown,
+  min: Min,
+  max: Max
 ): StringOfLength<Min, Max> => {
-    if (typeof input !== "string") {
-        throw new Error("invalid input");
-    }
+  if (typeof input !== 'string') {
+    throw new Error('invalid input');
+  }
 
-    if (!isStringOfLength(input, min, max)) {
-        throw new Error("input is not between specified min and max");
-    }
+  if (!isStringOfLength(input, min, max)) {
+    throw new Error('input is not between specified min and max');
+  }
 
-    return input; // the type of input here is now StringOfLength<Min,Max>
+  return input; // the type of input here is now StringOfLength<Min,Max>
 };