switch fs-calendar to module

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 → 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%);
   }

projects/ng-mat-components/src/lib/components/calendar/calendar.component.ts → projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.component.ts

@@ -1,13 +1,12 @@
-import { FormControl, FormGroup } from '@angular/forms';
 import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
-import * as moment from 'moment';
-import { CalendarConfig, Day, Calendar, calendarSelected } from '../../modules/calendar';
-import { CalendarService } from '../../services/calendar.service';
+import { CalendarConfig, Day, Calendar, calendarSelected } from './calendar.models';
+import { FsCalendarService } from './fs-calendar.service';
+import { moment } from './fs-calendar.service';
 
 @Component({
   selector: 'fs-calendar',
-  templateUrl: './calendar.component.html',
-  styleUrls: ['./calendar.component.scss'],
+  templateUrl: './fs-calendar.component.html',
+  styleUrls: ['./fs-calendar.component.scss'],
   host: {
     'class': 'fs-calendar',
   },
@@ -117,7 +116,7 @@ export class FsCalendarComponent implements OnInit {
     }
   }
 
-  constructor(private calendarService: CalendarService) { }
+  constructor(private calendarService: FsCalendarService) { }
 
   ngOnInit() {
     this.isLoading = false

projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FsCalendarComponent } from './fs-calendar.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatTooltipModule
+  ],
+  exports: [FsCalendarComponent],
+  declarations: [FsCalendarComponent]
+})
+export class FsCalendarModule { }
+
+

projects/ng-mat-components/src/lib/services/calendar.service.ts → projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.service.ts

@@ -1,14 +1,14 @@
 import { Injectable, LOCALE_ID, Inject } from '@angular/core';
 import * as moment_ from 'moment';
 import 'moment/min/locales';
-import { Calendar, Month, Day } from '../modules/calendar';
+import { Calendar, Month, Day } from './calendar.models';
 
-export const moment = moment_
+export const moment = moment_;
 
 @Injectable({
   providedIn: 'root'
 })
-export class CalendarService {
+export class FsCalendarService {
 
   constructor(@Inject(LOCALE_ID) public locale: string) { }
 

projects/ng-mat-components/src/lib/fs-calendar/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ng-mat-components
+ */
+
+export { FsCalendarModule } from './fs-calendar.module';
+export { FsCalendarComponent } from './fs-calendar.component';
+export * from './calendar.models';