Merge pull request #5 from fullstack-devops/bugfix/switch-to-modules

switch fs-calendar to module

Author: eksrha

projects/lib-workspace/src/app/app.component.html

@@ -1,8 +1,8 @@
 <fs-ui-frame [frameConfig]="frameConfig" [navUser]="navUser" [appRoutes]="appRoutes" (event)="onEvent($event)">
-  <frame-toolbar>
-    <frame-toolbar-title>Current App Title</frame-toolbar-title>
+  <fs-ui-frame-toolbar>
+    <fs-ui-frame-toolbar-title>Current App Title</fs-ui-frame-toolbar-title>
 
-    <frame-toolbar-center>
+    <fs-ui-frame-toolbar-center>
       <button mat-icon-button>
         <mat-icon>help</mat-icon>
       </button>
@@ -12,20 +12,20 @@
       <button mat-icon-button>
         <mat-icon>call</mat-icon>
       </button>
-    </frame-toolbar-center>
+    </fs-ui-frame-toolbar-center>
 
-    <frame-toolbar-side>
+    <fs-ui-frame-toolbar-side>
       <!-- <a>Test the side</a> -->
       <mat-form-field appearance="outline">
         <input matInput placeholder="Search" type="search">
         <!-- <mat-icon matSuffix>close</mat-icon> -->
       </mat-form-field>
-    </frame-toolbar-side>
+    </fs-ui-frame-toolbar-side>
 
-  </frame-toolbar>
+  </fs-ui-frame-toolbar>
 
-  <frame-content>
+  <fs-ui-frame-content>
     <router-outlet></router-outlet>
-  </frame-content>
+  </fs-ui-frame-content>
 
 </fs-ui-frame>

projects/lib-workspace/src/app/app.module.ts

@@ -9,12 +9,15 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MaterialModule } from './material.module';
 
-import { NgMatComponentsModule } from 'projects/ng-mat-components/src/public-api';
+import {
+  FsCalendarModule,
+  FsUiFrameModule,
+  FsUiFrameContentModule,
+  FsUiFrameToolbarModule
+} from 'projects/ng-mat-components/src/public-api';
 import { HomeComponent } from './content/home/home.component';
 import { SubComponent } from './content/home/sub/sub.component';
 import { TestComponent } from './content/test/test.component';
-import { MatFormFieldModule } from '@angular/material/form-field';
-
 
 @NgModule({
   declarations: [
@@ -25,14 +28,17 @@ import { MatFormFieldModule } from '@angular/material/form-field';
     CalenderShowcaseComponent,
   ],
   imports: [
+    FormsModule,
     BrowserModule,
+    MaterialModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    MaterialModule,
-    FormsModule,
-    MatFormFieldModule,
     ReactiveFormsModule,
-    NgMatComponentsModule,
+    /* Lib modules */
+    FsUiFrameModule,
+    FsUiFrameContentModule,
+    FsUiFrameToolbarModule,
+    FsCalendarModule,
   ],
   providers: [
     {

projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.ts

@@ -1,19 +1,13 @@
-import { OverlayContainer } from '@angular/cdk/overlay';
-import { Component, HostBinding, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { CalendarConfig, calendarSelected, Day, selectedDate } from 'projects/ng-mat-components/src/public-api';
+import { CalendarConfig, Day, calendarSelected } from 'projects/ng-mat-components/src/public-api';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'lib-calender-showcase',
   templateUrl: './calender-showcase.component.html',
   styleUrls: ['./calender-showcase.component.scss']
 })
 export class CalenderShowcaseComponent implements OnInit {
-
-  // Theming
-  toggleControl = new FormControl(false);
-  @HostBinding('class') className = '';
-
+  docsApi = "./assets/docs/calendar/api.md"
   range: any
 
   placeholder = false // boolean
@@ -62,18 +56,8 @@ export class CalenderShowcaseComponent implements OnInit {
     }
   ]
 
-  constructor(private overlay: OverlayContainer) { }
+  constructor() { }
   ngOnInit(): void {
-    this.toggleControl.valueChanges.subscribe((darkMode) => {
-      const darkClassName = 'darkMode';
-      this.className = darkMode ? darkClassName : '';
-      if (darkMode) {
-        this.overlay.getContainerElement().classList.add(darkClassName);
-      } else {
-        this.overlay.getContainerElement().classList.remove(darkClassName);
-      }
-    });
-
     console.log(this.dataSource)
     this.isLoading = false
   }
@@ -82,10 +66,10 @@ export class CalenderShowcaseComponent implements OnInit {
     switch (event.type) {
       case "range":
         this.range = event;
-      break;
+        break;
       case "date":
         this.range = event;
-      break;
+        break;
     }
     console.log(event)
   }

projects/lib-workspace/src/assets/docs/calendar/api.md

@@ -0,0 +1,7 @@
+# API reference for Angular @fullstack-devops calendar
+
+```javascript
+import { MatTabsModule } from '@fullstack-devops/ng-mat-components';
+```
+
+# Test

projects/lib-workspace/src/styles.scss

@@ -16,7 +16,7 @@ body {
 }
 
 @include mat.core();
-@import "../../ng-mat-components/fs-mat-components-theme.scss";
+@import "../../ng-mat-components/src/fs-mat-components-theme.scss";
 
 // Define a light theme
 $light-primary: mat.define-palette(mat.$indigo-palette);

projects/ng-mat-components/README.md

@@ -0,0 +1,50 @@
+# ng-mat-components
+Components for @angular/material
+
+
+## Usage
+
+add to your local `.npmrc` the following line to be able to use this package:
+```javascript
+@fullstack-devops:registry=https://npm.pkg.github.com
+```
+
+And install it:
+ - yarn
+    ```javascript
+    yarn add @fullstack-devops/ng-mat-components
+    ```
+ - npm
+    ```javascript
+    npm install @fullstack-devops/ng-mat-components
+    ```
+
+## Documentation
+
+Live Demo with all current modules at https://fullstack-devops.github.io/ng-mat-components (still in dev)
+
+Documentation will be done later when the api is fixed.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

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

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

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

@@ -15,13 +15,13 @@
     fill: mat-color($foreground, text);
   }
 
-  .frame-toolbar-logo,
-  .frame-toolbar-logo .logo-span {
+  .fs-ui-frame-toolbar-logo,
+  .fs-ui-frame-toolbar-logo .logo-span {
     background-color: mat-color($background, app-bar);
     color: mat-color($foreground, text);
   }
 
-  .frame-toolbar {
+  .fs-ui-frame-toolbar {
     background-color: mat-color($background, background);
     color: mat-color($foreground, text);
   }
@@ -45,7 +45,7 @@
     // background-color: rgba($color:  mat-color($primary, default), $alpha: 0.1);
   }
 
-  .frame-content {
+  .fs-ui-frame-content {
     color: mat-color($foreground, text);
     background-color: lighten($color: mat-color($background, background), $amount: 3%);
   }