diff --git a/projects/lib-workspace/src/app/app.component.html b/projects/lib-workspace/src/app/app.component.html index a5ba014..f89546c 100644 --- a/projects/lib-workspace/src/app/app.component.html +++ b/projects/lib-workspace/src/app/app.component.html @@ -1,8 +1,8 @@ - - Current App Title + + Current App Title - + @@ -12,20 +12,20 @@ - + - + - + - + - + - + diff --git a/projects/lib-workspace/src/app/app.module.ts b/projects/lib-workspace/src/app/app.module.ts index 0dbcdfa..958e0b4 100644 --- a/projects/lib-workspace/src/app/app.module.ts +++ b/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: [ { diff --git a/projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.ts b/projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.ts index 67b6b25..f22acb2 100644 --- a/projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.ts +++ b/projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.ts @@ -1,7 +1,5 @@ -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', @@ -9,11 +7,7 @@ import { CalendarConfig, calendarSelected, Day, selectedDate } from 'projects/ng 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) } diff --git a/projects/lib-workspace/src/assets/docs/calendar/api.md b/projects/lib-workspace/src/assets/docs/calendar/api.md new file mode 100644 index 0000000..3c899d3 --- /dev/null +++ b/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 diff --git a/projects/lib-workspace/src/styles.scss b/projects/lib-workspace/src/styles.scss index 407711a..372b107 100644 --- a/projects/lib-workspace/src/styles.scss +++ b/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); diff --git a/projects/ng-mat-components/README.md b/projects/ng-mat-components/README.md new file mode 100644 index 0000000..a9382c9 --- /dev/null +++ b/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. diff --git a/projects/ng-mat-components/ng-package.json b/projects/ng-mat-components/ng-package.json index 76069d7..3c7af2d 100644 --- a/projects/ng-mat-components/ng-package.json +++ b/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" ] } diff --git a/projects/ng-mat-components/fs-mat-components-theme.scss b/projects/ng-mat-components/src/fs-mat-components-theme.scss similarity index 96% rename from projects/ng-mat-components/fs-mat-components-theme.scss rename to projects/ng-mat-components/src/fs-mat-components-theme.scss index 8334cdc..43f6362 100644 --- a/projects/ng-mat-components/fs-mat-components-theme.scss +++ b/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%); } diff --git a/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/directives/frame-toolbar-center.directive.ts b/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/directives/frame-toolbar-center.directive.ts deleted file mode 100644 index 30f7306..0000000 --- a/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/directives/frame-toolbar-center.directive.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Directive } from '@angular/core'; - -@Directive({ - selector: 'frame-toolbar-center, [frameToolbarCenter]', - host: {'class': 'frame-toolbar-center'}, -}) -export class FrameToolbarCenterDirective { - - constructor() { } - -} diff --git a/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/directives/frame-toolbar-side.directive.ts b/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/directives/frame-toolbar-side.directive.ts deleted file mode 100644 index 5ef9709..0000000 --- a/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/directives/frame-toolbar-side.directive.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Directive } from '@angular/core'; - -@Directive({ - selector: 'frame-toolbar-side, [frameToolbarSide]', - host: {'class': 'frame-toolbar-side'}, -}) -export class FrameToolbarSideDirective { - - constructor() { } - -} diff --git a/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/directives/frame-toolbar-title.directive.ts b/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/directives/frame-toolbar-title.directive.ts deleted file mode 100644 index 4bf104c..0000000 --- a/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/directives/frame-toolbar-title.directive.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Directive } from '@angular/core'; - -@Directive({ - selector: 'frame-toolbar-title, [frameToolbarTitle]', - host: {'class': 'frame-toolbar-title'}, -}) -export class FrameToolbarTitleDirective { - - constructor() { } - -} diff --git a/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/frame-toolbar.component.html b/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/frame-toolbar.component.html deleted file mode 100644 index e81c9a5..0000000 --- a/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/frame-toolbar.component.html +++ /dev/null @@ -1,11 +0,0 @@ -
-
- -
-
- -
-
- -
-
\ No newline at end of file diff --git a/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/frame-toolbar.component.scss b/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/frame-toolbar.component.scss deleted file mode 100644 index 827c848..0000000 --- a/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/frame-toolbar.component.scss +++ /dev/null @@ -1,19 +0,0 @@ -.frame-toolbar-wrapper { - height: 100%; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 16px; -} - -.mat-badge-medium.mat-badge-above .mat-badge-content { - top: -2px; -} - -.mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content { - right: -2px; -} - -button.mat-badge { - margin: 0 4px; -} diff --git a/projects/ng-mat-components/src/lib/modules/calendar.ts b/projects/ng-mat-components/src/lib/fs-calendar/calendar.models.ts similarity index 100% rename from projects/ng-mat-components/src/lib/modules/calendar.ts rename to projects/ng-mat-components/src/lib/fs-calendar/calendar.models.ts diff --git a/projects/ng-mat-components/src/lib/components/calendar/calendar.component.html b/projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.component.html similarity index 100% rename from projects/ng-mat-components/src/lib/components/calendar/calendar.component.html rename to projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.component.html diff --git a/projects/ng-mat-components/src/lib/components/calendar/calendar.component.scss b/projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.component.scss similarity index 100% rename from projects/ng-mat-components/src/lib/components/calendar/calendar.component.scss rename to projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.component.scss diff --git a/projects/ng-mat-components/src/lib/components/calendar/calendar.component.ts b/projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.component.ts similarity index 94% rename from projects/ng-mat-components/src/lib/components/calendar/calendar.component.ts rename to projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.component.ts index 43665e8..d5f9c84 100644 --- a/projects/ng-mat-components/src/lib/components/calendar/calendar.component.ts +++ b/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 diff --git a/projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.module.ts b/projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.module.ts new file mode 100644 index 0000000..c94ba55 --- /dev/null +++ b/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 { } + + diff --git a/projects/ng-mat-components/src/lib/services/calendar.service.ts b/projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.service.ts similarity index 98% rename from projects/ng-mat-components/src/lib/services/calendar.service.ts rename to projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.service.ts index c2299aa..1d59dd1 100644 --- a/projects/ng-mat-components/src/lib/services/calendar.service.ts +++ b/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) { } diff --git a/projects/ng-mat-components/src/lib/fs-calendar/public-api.ts b/projects/ng-mat-components/src/lib/fs-calendar/public-api.ts new file mode 100644 index 0000000..5a7baa2 --- /dev/null +++ b/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'; diff --git a/projects/ng-mat-components/src/lib/components/ui-frame-content/frame-content.component.html b/projects/ng-mat-components/src/lib/fs-ui-frame-content/fs-ui-frame-content.component.html similarity index 100% rename from projects/ng-mat-components/src/lib/components/ui-frame-content/frame-content.component.html rename to projects/ng-mat-components/src/lib/fs-ui-frame-content/fs-ui-frame-content.component.html diff --git a/projects/ng-mat-components/src/lib/components/ui-frame-content/frame-content.component.scss b/projects/ng-mat-components/src/lib/fs-ui-frame-content/fs-ui-frame-content.component.scss similarity index 100% rename from projects/ng-mat-components/src/lib/components/ui-frame-content/frame-content.component.scss rename to projects/ng-mat-components/src/lib/fs-ui-frame-content/fs-ui-frame-content.component.scss diff --git a/projects/ng-mat-components/src/lib/components/ui-frame-content/frame-content.component.ts b/projects/ng-mat-components/src/lib/fs-ui-frame-content/fs-ui-frame-content.component.ts similarity index 56% rename from projects/ng-mat-components/src/lib/components/ui-frame-content/frame-content.component.ts rename to projects/ng-mat-components/src/lib/fs-ui-frame-content/fs-ui-frame-content.component.ts index c23bdbb..df51d49 100644 --- a/projects/ng-mat-components/src/lib/components/ui-frame-content/frame-content.component.ts +++ b/projects/ng-mat-components/src/lib/fs-ui-frame-content/fs-ui-frame-content.component.ts @@ -1,21 +1,20 @@ -import { UiFrameService } from './../../services/ui-frame.service'; import { ChangeDetectionStrategy, Component, HostBinding, OnInit, ViewEncapsulation } from '@angular/core'; +import { FsUiFrameService } from '../fs-ui-frame/fs-ui-frame.service'; @Component({ - selector: 'frame-content', - templateUrl: './frame-content.component.html', - styleUrls: ['./frame-content.component.scss'], + selector: 'fs-ui-frame-content', + templateUrl: './fs-ui-frame-content.component.html', + styleUrls: ['./fs-ui-frame-content.component.scss'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { - 'class': 'frame-content', + 'class': 'fs-ui-frame-content', }, }) -export class FsFrameContentComponent implements OnInit { - +export class FsUiFrameContentComponent implements OnInit { @HostBinding('class') openedClass = ''; - constructor(private frameService: UiFrameService) { + constructor(private frameService: FsUiFrameService) { this.frameService.isMenuClosed.subscribe((bool: Boolean) => { if (bool) { this.openedClass = "" diff --git a/projects/ng-mat-components/src/lib/fs-ui-frame-content/fs-ui-frame-content.module.ts b/projects/ng-mat-components/src/lib/fs-ui-frame-content/fs-ui-frame-content.module.ts new file mode 100644 index 0000000..5fd2ac8 --- /dev/null +++ b/projects/ng-mat-components/src/lib/fs-ui-frame-content/fs-ui-frame-content.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FsUiFrameContentComponent } from './fs-ui-frame-content.component'; + +@NgModule({ + imports: [ + CommonModule + ], + exports: [FsUiFrameContentComponent], + declarations: [FsUiFrameContentComponent] +}) +export class FsUiFrameContentModule { } diff --git a/projects/ng-mat-components/src/lib/fs-ui-frame-content/public-api.ts b/projects/ng-mat-components/src/lib/fs-ui-frame-content/public-api.ts new file mode 100644 index 0000000..f6d865b --- /dev/null +++ b/projects/ng-mat-components/src/lib/fs-ui-frame-content/public-api.ts @@ -0,0 +1,6 @@ +/* + * Public API Surface of ng-mat-components + */ + +export { FsUiFrameContentModule } from './fs-ui-frame-content.module'; +export { FsUiFrameContentComponent } from './fs-ui-frame-content.component'; diff --git a/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/directives/fs-ui-frame-toolbar-center.directive.ts b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/directives/fs-ui-frame-toolbar-center.directive.ts new file mode 100644 index 0000000..aa6d45d --- /dev/null +++ b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/directives/fs-ui-frame-toolbar-center.directive.ts @@ -0,0 +1,11 @@ +import { Directive } from '@angular/core'; + +@Directive({ + selector: 'fs-ui-frame-toolbar-center, [fsUiFrameToolbarCenter]', + host: {'class': 'fs-ui-frame-toolbar-center'}, +}) +export class FsUiFrameToolbarCenterDirective { + + constructor() { } + +} diff --git a/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/directives/fs-ui-frame-toolbar-side.directive.ts b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/directives/fs-ui-frame-toolbar-side.directive.ts new file mode 100644 index 0000000..8f99621 --- /dev/null +++ b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/directives/fs-ui-frame-toolbar-side.directive.ts @@ -0,0 +1,11 @@ +import { Directive } from '@angular/core'; + +@Directive({ + selector: 'fs-ui-frame-toolbar-side, [fsUiFrameToolbarSide]', + host: {'class': 'fs-ui-frame-toolbar-side'}, +}) +export class FsUiFrameToolbarSideDirective { + + constructor() { } + +} diff --git a/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/directives/fs-ui-frame-toolbar-title.directive.ts b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/directives/fs-ui-frame-toolbar-title.directive.ts new file mode 100644 index 0000000..eab2016 --- /dev/null +++ b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/directives/fs-ui-frame-toolbar-title.directive.ts @@ -0,0 +1,11 @@ +import { Directive } from '@angular/core'; + +@Directive({ + selector: 'fs-ui-frame-toolbar-title, [fsUiFrameToolbarTitle]', + host: {'class': 'fs-ui-frame-toolbar-title'}, +}) +export class FsUiFrameToolbarTitleDirective { + + constructor() { } + +} diff --git a/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.component.html b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.component.html new file mode 100644 index 0000000..7058b40 --- /dev/null +++ b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.component.html @@ -0,0 +1,11 @@ +
+
+ +
+
+ +
+
+ +
+
diff --git a/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.component.scss b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.component.scss new file mode 100644 index 0000000..8592834 --- /dev/null +++ b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.component.scss @@ -0,0 +1,19 @@ +.fs-ui-frame-toolbar-wrapper { + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 16px; +} + +.mat-badge-medium.mat-badge-above .mat-badge-content { + top: -2px; +} + +.mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content { + right: -2px; +} + +button.mat-badge { + margin: 0 4px; +} diff --git a/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/frame-toolbar.component.ts b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.component.ts similarity index 55% rename from projects/ng-mat-components/src/lib/components/ui-frame-toolbar/frame-toolbar.component.ts rename to projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.component.ts index 80c242a..f847fb0 100644 --- a/projects/ng-mat-components/src/lib/components/ui-frame-toolbar/frame-toolbar.component.ts +++ b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.component.ts @@ -1,22 +1,22 @@ -import { UiFrameService } from './../../services/ui-frame.service'; -import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, HostBinding, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { FsUiFrameService } from '../fs-ui-frame/fs-ui-frame.service'; @Component({ - selector: 'frame-toolbar', - templateUrl: './frame-toolbar.component.html', - styleUrls: ['./frame-toolbar.component.scss'], + selector: 'fs-ui-frame-toolbar', + templateUrl: './fs-ui-frame-toolbar.component.html', + styleUrls: ['./fs-ui-frame-toolbar.component.scss'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { - 'class': 'frame-toolbar', + 'class': 'fs-ui-frame-toolbar', }, }) -export class FsFrameToolbarComponent implements OnInit { +export class FsUiFrameToolbarComponent implements OnInit, OnDestroy { @Input() menuOpened: boolean = false; @HostBinding('class') openedClass = ''; - constructor(private frameService: UiFrameService) { + constructor(private frameService: FsUiFrameService) { this.frameService.isMenuClosed.subscribe((bool: boolean) => { if (bool) { this.openedClass = "" diff --git a/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.module.ts b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.module.ts new file mode 100644 index 0000000..bb70182 --- /dev/null +++ b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FsUiFrameToolbarComponent } from './fs-ui-frame-toolbar.component'; +import { FsUiFrameToolbarTitleDirective } from './directives/fs-ui-frame-toolbar-title.directive'; +import { FsUiFrameToolbarCenterDirective } from './directives/fs-ui-frame-toolbar-center.directive'; +import { FsUiFrameToolbarSideDirective } from './directives/fs-ui-frame-toolbar-side.directive'; + +@NgModule({ + declarations: [ + FsUiFrameToolbarComponent, + /* Direktives */ + FsUiFrameToolbarTitleDirective, + FsUiFrameToolbarCenterDirective, + FsUiFrameToolbarSideDirective, + ], + imports: [ + CommonModule + ], + exports: [ + FsUiFrameToolbarComponent, + /* Direktives */ + FsUiFrameToolbarTitleDirective, + FsUiFrameToolbarCenterDirective, + FsUiFrameToolbarSideDirective + ], +}) +export class FsUiFrameToolbarModule { } diff --git a/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/public-api.ts b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/public-api.ts new file mode 100644 index 0000000..453f804 --- /dev/null +++ b/projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/public-api.ts @@ -0,0 +1,9 @@ +/* + * Public API Surface of ng-mat-components + */ + +export { FsUiFrameToolbarModule } from './fs-ui-frame-toolbar.module'; +export { FsUiFrameToolbarComponent } from './fs-ui-frame-toolbar.component'; +export { FsUiFrameToolbarTitleDirective } from './directives/fs-ui-frame-toolbar-title.directive'; +export { FsUiFrameToolbarCenterDirective } from './directives/fs-ui-frame-toolbar-center.directive'; +export { FsUiFrameToolbarSideDirective } from './directives/fs-ui-frame-toolbar-side.directive'; diff --git a/projects/ng-mat-components/src/lib/components/ui-frame/ui-frame.component.html b/projects/ng-mat-components/src/lib/fs-ui-frame/fs-ui-frame.component.html similarity index 92% rename from projects/ng-mat-components/src/lib/components/ui-frame/ui-frame.component.html rename to projects/ng-mat-components/src/lib/fs-ui-frame/fs-ui-frame.component.html index 92b17e0..233c01a 100644 --- a/projects/ng-mat-components/src/lib/components/ui-frame/ui-frame.component.html +++ b/projects/ng-mat-components/src/lib/fs-ui-frame/fs-ui-frame.component.html @@ -1,4 +1,4 @@ -