Skip to content

Commit 0a3731d

Browse files
eksrhaeksrha
authored
Merge branch 'main' into dependabot/pip/mkdocs-material-8.5.11
2 parents f40bd0a + 326e837 commit 0a3731d

File tree

6 files changed

+370
-3
lines changed

6 files changed

+370
-3
lines changed

‎docs/libraries/index.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Libraries
2+
3+
tbd: introduction
4+
5+
| Name | Technology | Links |
6+
| ------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
7+
| `ng-mat-components` | Angular | [docs](./ng-mat-components) \| [repo](https://github.com/fullstack-devops/ng-mat-components) \| [demo](https://fullstack-devops.github.io/ng-mat-components) |

‎docs/libraries/ng-mat-components/calendar-panels.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
```typescript
2+
import { FsCalendarModule } from "@fullstack-devops/ng-mat-components";
3+
```
4+
5+
## References
6+
7+
- demo: https://fullstack-devops.github.io/ng-mat-components/calendar-panels
8+
- code example:
9+
[app.component.html](https://github.com/fullstack-devops/ng-mat-components/blob/main/projects/lib-workspace/src/app/app.component.html)
10+
[app.component.ts](https://github.com/fullstack-devops/ng-mat-components/blob/main/projects/lib-workspace/src/app/app.component.ts)
11+
12+
---
13+
14+
## Directives
15+
16+
```bash
17+
.
18+
└── fs-calendar-panels
19+
```
20+
21+
---
22+
23+
## Examples
24+
25+
### minimal
26+
27+
=== "HTML"
28+
29+
```html
30+
<div style="height: 80%">
31+
<fs-calendar-panels
32+
[placeholderDay]="placeholder"
33+
[dataSource]="dataSource"
34+
[year]="todayYear"
35+
[month]="todayMonth"
36+
[monthsBefore]="monthsBefore"
37+
[monthsAfter]="monthsAfter"
38+
(selection)="testMethod($event)"
39+
>
40+
</fs-calendar-panels>
41+
</div>
42+
```
43+
44+
=== "TS"
45+
46+
``` typescript
47+
// ...
48+
import {
49+
CalendarEvent,
50+
CalendarPanels,
51+
} from "@fullstack-devops/ng-mat-components";
52+
53+
@Component({
54+
selector: "example",
55+
templateUrl: "example.html",
56+
styleUrls: ["example.css"],
57+
})
58+
export class ExampleComponent implements OnInit {
59+
// this cannot be empty
60+
dataSource: CalendarPanels = {
61+
config: {
62+
renderMode: "monthly", // 'annual' | 'monthly'
63+
selectMode: "range", // 'click' | 'range'
64+
displayYear: true,
65+
firstDayOfWeekMonday: true,
66+
calendarWeek: true,
67+
switches: true,
68+
panelWidth: "300px",
69+
bluredDays: false, // default: false
70+
markWeekend: true, // default: true
71+
},
72+
data: [],
73+
};
74+
75+
constructor() {}
76+
77+
ngOnInit() {}
78+
79+
testMethod(event: CalendarEvent) {
80+
switch (event.type) {
81+
case "range":
82+
this.range = event;
83+
break;
84+
case "click":
85+
this.range = event;
86+
break;
87+
}
88+
console.log(event);
89+
}
90+
}
91+
```
92+
93+
=== "CSS"
94+
95+
``` css
96+
97+
```

‎docs/libraries/ng-mat-components/calendar-table.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
```typescript
2+
import { FsCalendarModule } from "@fullstack-devops/ng-mat-components";
3+
```
4+
5+
## References
6+
7+
- demo: https://fullstack-devops.github.io/ng-mat-components/calendar-table
8+
- code example: https://github.com/fullstack-devops/ng-mat-components/tree/main/projects/lib-workspace/src/app/content/calendar-table
9+
10+
---
11+
12+
## Directives
13+
14+
```bash
15+
.
16+
└── fs-calendar-table
17+
└── fs-calendar-table-name
18+
```
19+
20+
---
21+
22+
## Examples
23+
24+
### ui-frame in form
25+
26+
=== "HTML"
27+
28+
```html
29+
<section class="mat-elevation-z4">
30+
<fs-calendar-table [dataSource]="calTableData">
31+
<fs-calendar-table-name> Persons </fs-calendar-table-name>
32+
</fs-calendar-table>
33+
</section>
34+
```
35+
36+
=== "TS"
37+
38+
``` typescript
39+
// ...
40+
import { CalendarTableEntry } from "@fullstack-devops/ng-mat-components";
41+
42+
@Component({
43+
selector: "example",
44+
templateUrl: "example.html",
45+
styleUrls: ["example.css"],
46+
})
47+
export class ExampleComponent implements OnInit {
48+
// this can also be empty
49+
calTableData: CalendarTableEntry[] = [
50+
{
51+
name: "Test User",
52+
data: [
53+
{
54+
date: new Date(this.today.getFullYear(), this.today.getMonth(), 20),
55+
toolTip: "Some longer text",
56+
char: "",
57+
colors: {
58+
backgroundColor: "#FFFFFF",
59+
color: "#000",
60+
},
61+
},
62+
],
63+
},
64+
];
65+
66+
constructor() {}
67+
68+
ngOnInit() {}
69+
}
70+
```
71+
72+
=== "CSS"
73+
74+
``` css
75+
76+
```

‎docs/libraries/ng-mat-components/index.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# ng-mat-components
2+
3+
Components for @angular/material
4+
5+
## Installation
6+
7+
add to your local `.npmrc` the following line to be able to use this package:
8+
9+
```javascript
10+
@fullstack-devops:registry=https://npm.pkg.github.com
11+
```
12+
13+
And install it:
14+
15+
- yarn
16+
```javascript
17+
yarn add @fullstack-devops/ng-mat-components
18+
```
19+
- npm
20+
```javascript
21+
npm install @fullstack-devops/ng-mat-components
22+
```
23+
24+
## Documentation
25+
26+
Live Demo with all current modules at https://fullstack-devops.github.io/ng-mat-components (still in dev)
27+
28+
The documentation can be found in the following tabs.

‎docs/libraries/ng-mat-components/ui-frame.md‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
```typescript
2+
import { FsUiFrameModule } from "@fullstack-devops/ng-mat-components";
3+
```
4+
5+
## References
6+
7+
- demo: https://fullstack-devops.github.io/ng-mat-components/ui-frame
8+
- code example:
9+
[app.component.html](https://github.com/fullstack-devops/ng-mat-components/blob/main/projects/lib-workspace/src/app/app.component.html)
10+
[app.component.ts](https://github.com/fullstack-devops/ng-mat-components/blob/main/projects/lib-workspace/src/app/app.component.ts)
11+
12+
---
13+
14+
## Directives
15+
16+
```bash
17+
.
18+
├── fs-ui-frame
19+
│ └── settings.json
20+
└── fs-calendar-table
21+
└── Dockerfile
22+
```
23+
24+
## Directives
25+
26+
### fs-ui-frame
27+
28+
Selector: `fs-ui-frame`
29+
30+
#### fs-ui-frame-toolbar
31+
32+
Parent Selector: `fs-ui-frame`
33+
34+
Selector: `fs-ui-frame-toolbar`
35+
36+
##### fs-ui-frame-toolbar-title
37+
38+
Parent Selector: `fs-ui-frame-toolbar`
39+
40+
Selector: `fs-ui-frame-toolbar-title`
41+
42+
##### fs-ui-frame-toolbar-center
43+
44+
Parent Selector: `fs-ui-frame-toolbar`
45+
46+
Selector: `fs-ui-frame-toolbar-center`
47+
48+
##### fs-ui-frame-toolbar-side
49+
50+
Parent Selector: `fs-ui-frame-toolbar`
51+
52+
Selector: `fs-ui-frame-toolbar-side`
53+
54+
#### fs-ui-frame-content
55+
56+
Parent Selector: `fs-ui-frame`
57+
58+
Selector: `fs-ui-frame-content`
59+
60+
---
61+
62+
## Examples
63+
64+
### ui-frame in form
65+
66+
=== "HTML"
67+
68+
```html
69+
<fs-ui-frame [frameConfig]="frameConfig" [navUser]="navUser" [appRoutes]="appRoutes" (event)="onEvent($event)">
70+
<fs-ui-frame-toolbar>
71+
<fs-ui-frame-toolbar-title>Current App Title</fs-ui-frame-toolbar-title>
72+
73+
<fs-ui-frame-toolbar-center>
74+
<button mat-icon-button>
75+
<mat-icon>help</mat-icon>
76+
</button>
77+
<button mat-icon-button matBadge="3">
78+
<mat-icon>article</mat-icon>
79+
</button>
80+
<button mat-icon-button>
81+
<mat-icon>call</mat-icon>
82+
</button>
83+
</fs-ui-frame-toolbar-center>
84+
85+
<fs-ui-frame-toolbar-side>
86+
<mat-form-field appearance="outline">
87+
<input matInput placeholder="Search" type="search" />
88+
</mat-form-field>
89+
</fs-ui-frame-toolbar-side>
90+
</fs-ui-frame-toolbar>
91+
92+
<fs-ui-frame-content>
93+
<router-outlet></router-outlet>
94+
</fs-ui-frame-content>
95+
</fs-ui-frame>
96+
```
97+
98+
=== "TS"
99+
100+
``` typescript
101+
import { Component, OnInit } from '@angular/core';
102+
import { FormBuilder, FormControl, Validators } from '@angular/forms';
103+
import { FrameConfig,
104+
FrameEvent,
105+
FrameEvents,
106+
NavUser, } from '@ite/ng-daimlertruck';
107+
import { routes } from './app-routing.module';
108+
109+
@Component({
110+
selector: 'example',
111+
templateUrl: 'example.html',
112+
styleUrls: ['example.css'],
113+
})
114+
export class ExampleComponent implements OnInit {
115+
title = 'FS DevOps`s ng mat components';
116+
appRoutes = routes;
117+
118+
frameConfig: FrameConfig = {
119+
appName: 'Dummy App',
120+
// appNameShort: stringOfLength('DUMMY', 0, 6),
121+
logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png',
122+
};
123+
navUser: NavUser = {
124+
profilePicture:
125+
'https://material.angular.io/assets/img/examples/shiba1.jpg',
126+
name: 'Some User',
127+
role: 'Engineer',
128+
};
129+
130+
ngOnInit() { }
131+
132+
onEvent(frameEvent: FrameEvent) {
133+
switch (frameEvent.type) {
134+
case FrameEvents.MANAGE_ACCOUNT:
135+
console.log('Manage Account called, do something...');
136+
break;
137+
case FrameEvents.LOGOUT:
138+
console.log('Logout called, do something...');
139+
break;
140+
default:
141+
console.error(`unknown event fetched: ${JSON.stringify(event)}`);
142+
break;
143+
}
144+
}
145+
}
146+
```
147+
148+
=== "CSS"
149+
150+
``` css
151+
152+
```

‎mkdocs.yml‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,16 @@ theme:
2626
features:
2727
# - announce.dismiss
2828
- content.code.annotate
29-
# - content.tabs.link
29+
- content.tabs.link
3030
- content.tooltips
3131
# - header.autohide
32-
- navigation.expand
32+
# - navigation.expand
3333
- navigation.indexes
3434
# - navigation.instant
3535
# - navigation.prune
3636
- navigation.sections
3737
- navigation.tabs
38-
# - navigation.tabs.sticky
38+
- navigation.tabs.sticky
3939
- navigation.top
4040
- navigation.tracking
4141
- search.highlight
@@ -130,6 +130,13 @@ markdown_extensions:
130130
# Page tree
131131
nav:
132132
- Home: index.md
133+
- Libraries:
134+
- libraries/index.md
135+
- ng-mat-components:
136+
- libraries/ng-mat-components/index.md
137+
- ui-frame: libraries/ng-mat-components/ui-frame.md
138+
- calendar-panels: libraries/ng-mat-components/calendar-panels.md
139+
- calendar-table: libraries/ng-mat-components/calendar-table.md
133140
- Repositories:
134141
- repos/index.md
135142
- helm charts:

0 commit comments

Comments
 (0)