From dd83fb01aea9901bc618d8fd52bf894bc33a76e4 Mon Sep 17 00:00:00 2001 From: eksrha <58111764+eksrha@users.noreply.github.com> Date: Sun, 21 Aug 2022 16:01:37 +0200 Subject: [PATCH 1/2] switch fs-calendar to module --- package.json | 1 + projects/lib-workspace/src/app/app.module.ts | 11 ++- .../calender-showcase.component.html | 67 +++++++++++-------- .../calender-showcase.component.ts | 28 ++------ .../src/assets/docs/calendar/api.md | 7 ++ projects/ng-mat-components/README.md | 50 ++++++++++++++ .../fs-calendar/calendar.models.ts} | 0 .../fs-calendar/fs-calendar.component.html} | 0 .../fs-calendar/fs-calendar.component.scss} | 0 .../fs-calendar/fs-calendar.component.ts} | 11 ++- .../module/fs-calendar/fs-calendar.module.ts | 16 +++++ .../fs-calendar/fs-calendar.service.ts} | 4 +- .../src/lib/module/fs-calendar/public-api.ts | 7 ++ .../src/lib/ng-mat-components.module.ts | 3 - .../src/lib/services/calendar.service.spec.ts | 16 ----- projects/ng-mat-components/src/public-api.ts | 3 +- yarn.lock | 39 +++++++++++ 17 files changed, 181 insertions(+), 82 deletions(-) create mode 100644 projects/lib-workspace/src/assets/docs/calendar/api.md create mode 100644 projects/ng-mat-components/README.md rename projects/ng-mat-components/src/lib/{modules/calendar.ts => module/fs-calendar/calendar.models.ts} (100%) rename projects/ng-mat-components/src/lib/{components/calendar/calendar.component.html => module/fs-calendar/fs-calendar.component.html} (100%) rename projects/ng-mat-components/src/lib/{components/calendar/calendar.component.scss => module/fs-calendar/fs-calendar.component.scss} (100%) rename projects/ng-mat-components/src/lib/{components/calendar/calendar.component.ts => module/fs-calendar/fs-calendar.component.ts} (95%) create mode 100644 projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.module.ts rename projects/ng-mat-components/src/lib/{services/calendar.service.ts => module/fs-calendar/fs-calendar.service.ts} (99%) create mode 100644 projects/ng-mat-components/src/lib/module/fs-calendar/public-api.ts delete mode 100644 projects/ng-mat-components/src/lib/services/calendar.service.spec.ts diff --git a/package.json b/package.json index 85bd351..b2b2abb 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@angular/platform-browser-dynamic": "~13.3.11", "@angular/router": "~13.3.11", "moment": "^2.29.4", + "ngx-markdown": "13.1.0", "rxjs": "~7.5.6", "tslib": "^2.4.0", "zone.js": "~0.11.7" diff --git a/projects/lib-workspace/src/app/app.module.ts b/projects/lib-workspace/src/app/app.module.ts index 0dbcdfa..142fd85 100644 --- a/projects/lib-workspace/src/app/app.module.ts +++ b/projects/lib-workspace/src/app/app.module.ts @@ -9,11 +9,13 @@ 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 { NgMatComponentsModule, FsCalendarModule } 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'; +import { MarkdownModule } from 'ngx-markdown'; +import { HttpClientModule } from '@angular/common/http'; @NgModule({ @@ -25,14 +27,17 @@ import { MatFormFieldModule } from '@angular/material/form-field'; CalenderShowcaseComponent, ], imports: [ + FormsModule, BrowserModule, + MaterialModule, + HttpClientModule, AppRoutingModule, BrowserAnimationsModule, - MaterialModule, - FormsModule, MatFormFieldModule, ReactiveFormsModule, NgMatComponentsModule, + FsCalendarModule, + MarkdownModule.forRoot(), ], providers: [ { diff --git a/projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.html b/projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.html index 0a90982..c049ca2 100644 --- a/projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.html +++ b/projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.html @@ -1,30 +1,41 @@ -
- - Days placeholder - -
+ + -
- - Months before - - {{num}} - - - - Months after - - {{num}} - - -
-

Selected range: {{range | json}}

-
-
+ + +
+ + +
+ + Days placeholder + +
-
- - -
+
+ + Months before + + {{num}} + + + + Months after + + {{num}} + + +
+

Selected range: {{range | json}}

+
+
+ +
+ + +
+ + + 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/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/src/lib/modules/calendar.ts b/projects/ng-mat-components/src/lib/module/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/module/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/module/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/module/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/module/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/module/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/module/fs-calendar/fs-calendar.component.ts similarity index 95% rename from projects/ng-mat-components/src/lib/components/calendar/calendar.component.ts rename to projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.component.ts index 43665e8..3ef86c1 100644 --- a/projects/ng-mat-components/src/lib/components/calendar/calendar.component.ts +++ b/projects/ng-mat-components/src/lib/module/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 { CalendarConfig, Day, Calendar, calendarSelected } from './calendar.models'; +import { FsCalendarService } from './fs-calendar.service'; import * as moment from 'moment'; -import { CalendarConfig, Day, Calendar, calendarSelected } from '../../modules/calendar'; -import { CalendarService } from '../../services/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/module/fs-calendar/fs-calendar.module.ts b/projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.module.ts new file mode 100644 index 0000000..c94ba55 --- /dev/null +++ b/projects/ng-mat-components/src/lib/module/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/module/fs-calendar/fs-calendar.service.ts similarity index 99% rename from projects/ng-mat-components/src/lib/services/calendar.service.ts rename to projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.service.ts index c2299aa..383b0c6 100644 --- a/projects/ng-mat-components/src/lib/services/calendar.service.ts +++ b/projects/ng-mat-components/src/lib/module/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_ @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/module/fs-calendar/public-api.ts b/projects/ng-mat-components/src/lib/module/fs-calendar/public-api.ts new file mode 100644 index 0000000..5a7baa2 --- /dev/null +++ b/projects/ng-mat-components/src/lib/module/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/ng-mat-components.module.ts b/projects/ng-mat-components/src/lib/ng-mat-components.module.ts index 3fe8c29..1211cc1 100644 --- a/projects/ng-mat-components/src/lib/ng-mat-components.module.ts +++ b/projects/ng-mat-components/src/lib/ng-mat-components.module.ts @@ -1,4 +1,3 @@ -import { FsCalendarComponent } from './components/calendar/calendar.component'; import { MatInputModule } from '@angular/material/input'; import { FsFrameToolbarComponent } from './components/ui-frame-toolbar/frame-toolbar.component'; import { FsFrameContentComponent } from './components/ui-frame-content/frame-content.component'; @@ -22,7 +21,6 @@ import { MatTooltipModule } from '@angular/material/tooltip'; FsUiFrameComponent, FsFrameContentComponent, FsFrameToolbarComponent, - FsCalendarComponent, /* Direktives */ FrameToolbarTitleDirective, FrameToolbarCenterDirective, @@ -43,7 +41,6 @@ import { MatTooltipModule } from '@angular/material/tooltip'; FsUiFrameComponent, FsFrameContentComponent, FsFrameToolbarComponent, - FsCalendarComponent, /* Direktives */ FrameToolbarTitleDirective, FrameToolbarCenterDirective, diff --git a/projects/ng-mat-components/src/lib/services/calendar.service.spec.ts b/projects/ng-mat-components/src/lib/services/calendar.service.spec.ts deleted file mode 100644 index 18ba1f6..0000000 --- a/projects/ng-mat-components/src/lib/services/calendar.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { CalendarService } from './calendar.service'; - -describe('CalendarService', () => { - let service: CalendarService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(CalendarService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/projects/ng-mat-components/src/public-api.ts b/projects/ng-mat-components/src/public-api.ts index b6c1027..a054941 100644 --- a/projects/ng-mat-components/src/public-api.ts +++ b/projects/ng-mat-components/src/public-api.ts @@ -4,8 +4,7 @@ export * from './lib/ng-mat-components.module'; export * from './lib/modules/ui-frame.modules'; -export * from './lib/modules/calendar'; -export * from './lib/components/calendar/calendar.component'; +export * from './lib/module/fs-calendar/public-api'; export * from './lib/components/ui-frame/ui-frame.component'; export * from './lib/components/ui-frame-content/frame-content.component'; export * from './lib/components/ui-frame-toolbar/frame-toolbar.component'; diff --git a/yarn.lock b/yarn.lock index c3821d3..a9816e8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1643,6 +1643,11 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== +"@types/marked@^4.0.2": + version "4.0.5" + resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.5.tgz#3e900fa331a9b1a98f7a8a50f0f39b4bf2b6469f" + integrity sha512-jMN2moJ+lSf1VZXQo3VXeMCjoXuciVONig8+U0YNBop5aBvQw4qkolx1Nzn1i0T8L2l9IZ3jju6bS1pPwlaY1w== + "@types/mime@*": version "3.0.1" resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10" @@ -2947,6 +2952,11 @@ emoji-regex@^8.0.0: resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37" integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A== +emoji-toolkit@^6.6.0: + version "6.6.0" + resolved "https://registry.yarnpkg.com/emoji-toolkit/-/emoji-toolkit-6.6.0.tgz#e7287c43a96f940ec4c5428cd7100a40e57518f1" + integrity sha512-pEu0kow2p1N8zCKnn/L6H0F3rWUBB3P3hVjr/O5yl1fK7N9jU4vO4G7EFapC5Y3XwZLUCY0FZbOPyTkH+4V2eQ== + emojis-list@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" @@ -4411,6 +4421,13 @@ karma@~6.3.0: ua-parser-js "^0.7.30" yargs "^16.1.1" +katex@^0.15.1: + version "0.15.6" + resolved "https://registry.yarnpkg.com/katex/-/katex-0.15.6.tgz#c4e2f6ced2ac4de1ef6f737fe7c67d3026baa0e5" + integrity sha512-UpzJy4yrnqnhXvRPhjEuLA4lcPn6eRngixW7Q3TJErjg3Aw2PuLFBzTkdUb89UtumxjhHTqL3a5GDGETMSwgJA== + dependencies: + commander "^8.0.0" + kind-of@^6.0.2: version "6.0.3" resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd" @@ -4614,6 +4631,11 @@ make-fetch-happen@^9.1.0: socks-proxy-agent "^6.0.0" ssri "^8.0.0" +marked@^4.0.10: + version "4.0.18" + resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.18.tgz#cd0ac54b2e5610cfb90e8fd46ccaa8292c9ed569" + integrity sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw== + media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" @@ -4919,6 +4941,18 @@ ng-packagr@^13.0.0: optionalDependencies: esbuild "^0.14.0" +ngx-markdown@13.1.0: + version "13.1.0" + resolved "https://registry.yarnpkg.com/ngx-markdown/-/ngx-markdown-13.1.0.tgz#7c5aff7feb591aa4b51d049b55cd7b24d3e21720" + integrity sha512-Bm4WhMI9xSnWTzzQWs/e1+d/l0s3+eFU0Ug/lcePmiWEZAPqiceEe6akjh4+Tjp61SmZ/wmKr8Kvc8mr9moP9A== + dependencies: + "@types/marked" "^4.0.2" + emoji-toolkit "^6.6.0" + katex "^0.15.1" + marked "^4.0.10" + prismjs "^1.25.0" + tslib "^2.3.0" + nice-napi@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/nice-napi/-/nice-napi-1.0.2.tgz#dc0ab5a1eac20ce548802fc5686eaa6bc654927b" @@ -5738,6 +5772,11 @@ pretty-bytes@^5.3.0: resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb" integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg== +prismjs@^1.25.0: + version "1.28.0" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6" + integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw== + process-nextick-args@~2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" From 0c0bc000a063673971734f7e5eddc7dcd0194496 Mon Sep 17 00:00:00 2001 From: eksrha <58111764+eksrha@users.noreply.github.com> Date: Mon, 22 Aug 2022 17:01:11 +0200 Subject: [PATCH 2/2] add ui-frame as well --- package.json | 1 - .../lib-workspace/src/app/app.component.html | 18 ++--- projects/lib-workspace/src/app/app.module.ts | 19 +++--- .../calender-showcase.component.html | 67 ++++++++----------- projects/lib-workspace/src/styles.scss | 2 +- projects/ng-mat-components/ng-package.json | 2 +- .../{ => src}/fs-mat-components-theme.scss | 8 +-- .../frame-toolbar-center.directive.ts | 11 --- .../frame-toolbar-side.directive.ts | 11 --- .../frame-toolbar-title.directive.ts | 11 --- .../frame-toolbar.component.html | 11 --- .../frame-toolbar.component.scss | 19 ------ .../fs-calendar/calendar.models.ts | 0 .../fs-calendar/fs-calendar.component.html | 0 .../fs-calendar/fs-calendar.component.scss | 0 .../fs-calendar/fs-calendar.component.ts | 2 +- .../fs-calendar/fs-calendar.module.ts | 0 .../fs-calendar/fs-calendar.service.ts | 2 +- .../{module => }/fs-calendar/public-api.ts | 0 .../fs-ui-frame-content.component.html} | 0 .../fs-ui-frame-content.component.scss} | 0 .../fs-ui-frame-content.component.ts} | 15 ++--- .../fs-ui-frame-content.module.ts | 12 ++++ .../src/lib/fs-ui-frame-content/public-api.ts | 6 ++ .../fs-ui-frame-toolbar-center.directive.ts | 11 +++ .../fs-ui-frame-toolbar-side.directive.ts | 11 +++ .../fs-ui-frame-toolbar-title.directive.ts | 11 +++ .../fs-ui-frame-toolbar.component.html | 11 +++ .../fs-ui-frame-toolbar.component.scss | 19 ++++++ .../fs-ui-frame-toolbar.component.ts} | 16 ++--- .../fs-ui-frame-toolbar.module.ts | 27 ++++++++ .../src/lib/fs-ui-frame-toolbar/public-api.ts | 9 +++ .../fs-ui-frame.component.html} | 8 +-- .../fs-ui-frame.component.scss} | 22 +++--- .../fs-ui-frame.component.ts} | 12 ++-- .../src/lib/fs-ui-frame/fs-ui-frame.module.ts | 32 +++++++++ .../fs-ui-frame.modules.ts} | 0 .../fs-ui-frame.service.spec.ts} | 6 +- .../fs-ui-frame.service.ts} | 2 +- .../src/lib/fs-ui-frame/public-api.ts | 7 ++ .../src/lib/ng-mat-components.module.ts | 50 -------------- projects/ng-mat-components/src/public-api.ts | 13 ++-- 42 files changed, 255 insertions(+), 229 deletions(-) rename projects/ng-mat-components/{ => src}/fs-mat-components-theme.scss (96%) delete mode 100644 projects/ng-mat-components/src/lib/components/ui-frame-toolbar/directives/frame-toolbar-center.directive.ts delete mode 100644 projects/ng-mat-components/src/lib/components/ui-frame-toolbar/directives/frame-toolbar-side.directive.ts delete mode 100644 projects/ng-mat-components/src/lib/components/ui-frame-toolbar/directives/frame-toolbar-title.directive.ts delete mode 100644 projects/ng-mat-components/src/lib/components/ui-frame-toolbar/frame-toolbar.component.html delete mode 100644 projects/ng-mat-components/src/lib/components/ui-frame-toolbar/frame-toolbar.component.scss rename projects/ng-mat-components/src/lib/{module => }/fs-calendar/calendar.models.ts (100%) rename projects/ng-mat-components/src/lib/{module => }/fs-calendar/fs-calendar.component.html (100%) rename projects/ng-mat-components/src/lib/{module => }/fs-calendar/fs-calendar.component.scss (100%) rename projects/ng-mat-components/src/lib/{module => }/fs-calendar/fs-calendar.component.ts (99%) rename projects/ng-mat-components/src/lib/{module => }/fs-calendar/fs-calendar.module.ts (100%) rename projects/ng-mat-components/src/lib/{module => }/fs-calendar/fs-calendar.service.ts (99%) rename projects/ng-mat-components/src/lib/{module => }/fs-calendar/public-api.ts (100%) rename projects/ng-mat-components/src/lib/{components/ui-frame-content/frame-content.component.html => fs-ui-frame-content/fs-ui-frame-content.component.html} (100%) rename projects/ng-mat-components/src/lib/{components/ui-frame-content/frame-content.component.scss => fs-ui-frame-content/fs-ui-frame-content.component.scss} (100%) rename projects/ng-mat-components/src/lib/{components/ui-frame-content/frame-content.component.ts => fs-ui-frame-content/fs-ui-frame-content.component.ts} (56%) create mode 100644 projects/ng-mat-components/src/lib/fs-ui-frame-content/fs-ui-frame-content.module.ts create mode 100644 projects/ng-mat-components/src/lib/fs-ui-frame-content/public-api.ts create mode 100644 projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/directives/fs-ui-frame-toolbar-center.directive.ts create mode 100644 projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/directives/fs-ui-frame-toolbar-side.directive.ts create mode 100644 projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/directives/fs-ui-frame-toolbar-title.directive.ts create mode 100644 projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.component.html create mode 100644 projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.component.scss rename projects/ng-mat-components/src/lib/{components/ui-frame-toolbar/frame-toolbar.component.ts => fs-ui-frame-toolbar/fs-ui-frame-toolbar.component.ts} (55%) create mode 100644 projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/fs-ui-frame-toolbar.module.ts create mode 100644 projects/ng-mat-components/src/lib/fs-ui-frame-toolbar/public-api.ts rename projects/ng-mat-components/src/lib/{components/ui-frame/ui-frame.component.html => fs-ui-frame/fs-ui-frame.component.html} (92%) rename projects/ng-mat-components/src/lib/{components/ui-frame/ui-frame.component.scss => fs-ui-frame/fs-ui-frame.component.scss} (87%) rename projects/ng-mat-components/src/lib/{components/ui-frame/ui-frame.component.ts => fs-ui-frame/fs-ui-frame.component.ts} (87%) create mode 100644 projects/ng-mat-components/src/lib/fs-ui-frame/fs-ui-frame.module.ts rename projects/ng-mat-components/src/lib/{modules/ui-frame.modules.ts => fs-ui-frame/fs-ui-frame.modules.ts} (100%) rename projects/ng-mat-components/src/lib/{services/ui-frame.service.spec.ts => fs-ui-frame/fs-ui-frame.service.spec.ts} (62%) rename projects/ng-mat-components/src/lib/{services/ui-frame.service.ts => fs-ui-frame/fs-ui-frame.service.ts} (83%) create mode 100644 projects/ng-mat-components/src/lib/fs-ui-frame/public-api.ts delete mode 100644 projects/ng-mat-components/src/lib/ng-mat-components.module.ts diff --git a/package.json b/package.json index b2b2abb..85bd351 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,6 @@ "@angular/platform-browser-dynamic": "~13.3.11", "@angular/router": "~13.3.11", "moment": "^2.29.4", - "ngx-markdown": "13.1.0", "rxjs": "~7.5.6", "tslib": "^2.4.0", "zone.js": "~0.11.7" 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 142fd85..958e0b4 100644 --- a/projects/lib-workspace/src/app/app.module.ts +++ b/projects/lib-workspace/src/app/app.module.ts @@ -9,14 +9,15 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MaterialModule } from './material.module'; -import { NgMatComponentsModule, FsCalendarModule } 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'; -import { MarkdownModule } from 'ngx-markdown'; -import { HttpClientModule } from '@angular/common/http'; - @NgModule({ declarations: [ @@ -30,14 +31,14 @@ import { HttpClientModule } from '@angular/common/http'; FormsModule, BrowserModule, MaterialModule, - HttpClientModule, AppRoutingModule, BrowserAnimationsModule, - MatFormFieldModule, ReactiveFormsModule, - NgMatComponentsModule, + /* Lib modules */ + FsUiFrameModule, + FsUiFrameContentModule, + FsUiFrameToolbarModule, FsCalendarModule, - MarkdownModule.forRoot(), ], providers: [ { diff --git a/projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.html b/projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.html index c049ca2..0a90982 100644 --- a/projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.html +++ b/projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.html @@ -1,41 +1,30 @@ - - +
+ + Days placeholder + +
- - -
- - -
- - Days placeholder - -
+
+ + Months before + + {{num}} + + + + Months after + + {{num}} + + +
+

Selected range: {{range | json}}

+
+
-
- - Months before - - {{num}} - - - - Months after - - {{num}} - - -
-

Selected range: {{range | json}}

-
-
- -
- - -
- - - +
+ + +
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/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/module/fs-calendar/calendar.models.ts b/projects/ng-mat-components/src/lib/fs-calendar/calendar.models.ts similarity index 100% rename from projects/ng-mat-components/src/lib/module/fs-calendar/calendar.models.ts rename to projects/ng-mat-components/src/lib/fs-calendar/calendar.models.ts diff --git a/projects/ng-mat-components/src/lib/module/fs-calendar/fs-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/module/fs-calendar/fs-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/module/fs-calendar/fs-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/module/fs-calendar/fs-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/module/fs-calendar/fs-calendar.component.ts b/projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.component.ts similarity index 99% rename from projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.component.ts rename to projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.component.ts index 3ef86c1..d5f9c84 100644 --- a/projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.component.ts +++ b/projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.component.ts @@ -1,7 +1,7 @@ import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core'; import { CalendarConfig, Day, Calendar, calendarSelected } from './calendar.models'; import { FsCalendarService } from './fs-calendar.service'; -import * as moment from 'moment'; +import { moment } from './fs-calendar.service'; @Component({ selector: 'fs-calendar', diff --git a/projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.module.ts b/projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.module.ts similarity index 100% rename from projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.module.ts rename to projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.module.ts diff --git a/projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.service.ts b/projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.service.ts similarity index 99% rename from projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.service.ts rename to projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.service.ts index 383b0c6..1d59dd1 100644 --- a/projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.service.ts +++ b/projects/ng-mat-components/src/lib/fs-calendar/fs-calendar.service.ts @@ -3,7 +3,7 @@ import * as moment_ from 'moment'; import 'moment/min/locales'; import { Calendar, Month, Day } from './calendar.models'; -export const moment = moment_ +export const moment = moment_; @Injectable({ providedIn: 'root' diff --git a/projects/ng-mat-components/src/lib/module/fs-calendar/public-api.ts b/projects/ng-mat-components/src/lib/fs-calendar/public-api.ts similarity index 100% rename from projects/ng-mat-components/src/lib/module/fs-calendar/public-api.ts rename to projects/ng-mat-components/src/lib/fs-calendar/public-api.ts 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 @@ -