feat: add theme switch module + docs

.github/workflows/pull-request.yml

@@ -11,6 +11,10 @@ on:
       - 'README.md'
       - 'LICENSE'
 
+concurrency:
+  group: 'pull-request-build-${{ github.event.pull_request.number }}'
+  cancel-in-progress: true
+
 jobs:
   generate_infos:
     uses: fullstack-devops/git-workflows/.github/workflows/generate-build-infos.yml@main

.github/workflows/release.yml

@@ -13,6 +13,10 @@ on:
       - 'CHANGELOG.md'
       - 'LICENSE'
 
+concurrency:
+  group: 'release-build-${{ github.run_id }}'
+  cancel-in-progress: false
+
 jobs:
   create_release:
     uses: fullstack-devops/git-workflows/.github/workflows/create-release.yml@main

.vscode/extensions.json

@@ -5,7 +5,6 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "PKief.material-icon-theme",
-    "Mikael.Angular-BeastCode",
-    "bradlc.vscode-tailwindcss"
+    "Mikael.Angular-BeastCode"
   ]
 }

README.md

@@ -37,28 +37,8 @@ add to your local `.npmrc` the following line to be able to use this package:
 
 Live Demo with all current modules at https://fullstack-devops.github.io/ngx-mat-components
 
-Api Documentation: https://fullstack-devops.github.io/libraries/ngx-mat-components.
+- [Navigation and Toolbar Frame](https://github.com/fullstack-devops/ngx-mat-components/blob/main/docs/fs-nav-frame.md)
+- [Theme Switcher](https://github.com/fullstack-devops/ngx-mat-components/blob/main/docs/fs-theme-switcher.md)
+- [Calendar](https://github.com/fullstack-devops/ngx-mat-components/blob/main/docs/fs-calendar.md)
 
-## 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.
+> Note: Sometimes I cannot document everything in the `docs/`, so please check the `workspace application` and source code for more information. Or sumbit an [Issue](https://github.com/fullstack-devops/ngx-mat-components/issues)

docs/calendar.md

@@ -0,0 +1,173 @@
+# FsCalendarModule Documentation
+
+The `FsCalendarModule` provides advanced, flexible calendar components for Angular Material applications. It includes both calendar panels and table views, supporting custom data, range selection, and Material 3 theming.
+
+---
+
+## Features
+
+- **Calendar Panels** for monthly or annual views
+- **Calendar Table** for tabular, multi-entry calendar data
+- **Range and single date selection** support
+- **Custom day rendering** (colors, tooltips, badges, etc.)
+- **Material 3 theming** and accessibility
+- **Highly configurable** via inputs
+
+---
+
+## Module Import
+
+```ts
+import { FsCalendarModule } from '@fullstack-devops/ngx-mat-components';
+```
+
+---
+
+## Main Components & Directives
+
+- [`FsCalendarPanelsComponent`](../projects/ngx-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts)
+- [`FsCalendarTableComponent`](../projects/ngx-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.ts)
+- [`FsCalendarTableNameDirective`](../projects/ngx-mat-components/src/fs-calendar/directives/fs-calendar-table-name.directive.ts)
+
+---
+
+## Usage Examples
+
+### Calendar Panels
+
+```html
+<fs-calendar-panels
+  [dataSource]="calendarPanelsData"
+  [year]="year"
+  [month]="month"
+  [monthsBefore]="monthsBefore"
+  [monthsAfter]="monthsAfter"
+  [placeholderDay]="placeholder"
+  (selection)="onSelection($event)">
+</fs-calendar-panels>
+```
+
+### Calendar Table
+
+```html
+<fs-calendar-table [(month)]="month" [(year)]="year" [dataSource]="calendarTableData">
+  <fs-calendar-table-name>Persons</fs-calendar-table-name>
+</fs-calendar-table>
+```
+
+---
+
+## Configuration
+
+### Calendar Panels Data
+
+[`CalendarPanels`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts):
+
+```ts
+export interface CalendarPanels<T = void> {
+  config: CalendarPanelsConfig;
+  data: CalendarExtendedDay<T>[];
+}
+```
+
+#### Example Config
+
+[`CalendarPanelsConfig`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts):
+
+```ts
+export interface CalendarPanelsConfig {
+  renderMode: 'monthly' | 'annual';
+  selectMode: 'click' | 'range';
+  calendarWeek: boolean;
+  displayYear?: boolean;
+  switches?: boolean;
+  bluredDays?: boolean;
+  markWeekend?: boolean;
+  firstDayOfWeekMonday?: boolean;
+  panelWidth?: string;
+}
+```
+
+#### Example Data
+
+[`CalendarExtendedDay`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts):
+
+```ts
+export interface CalendarExtendedDay<T = void> {
+  date: Date;
+  char?: string;
+  colors?: {
+    backgroundColor: string;
+    color?: string;
+  };
+  toolTip?: string;
+  badge?: {
+    badgeMode: 'int' | 'icon';
+    badgeInt?: number;
+    badgeIcon?: string;
+  };
+  _meta?: CalendarExtendedDayMeta;
+  customData?: T;
+}
+```
+
+### Calendar Table Data
+
+[`CalendarTableEntry`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts):
+
+```ts
+export interface CalendarTableEntry {
+  name: string;
+  data: CalendarExtendedDay[];
+}
+```
+
+---
+
+## Selection Events
+
+- The panels emit a `(selection)` event with a [`CalendarEvent`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts):
+  - Range selection: `{ type: 'range', start, end, affectedDays }`
+  - Single date: `{ type: 'click', date }`
+
+---
+
+## Theming & Styling
+
+- The module supports Material 3 theming.
+- SCSS mixin: `fs-calendar-theme` ([styles/fs-calendar/_theming.scss](../projects/ngx-mat-components/styles/fs-calendar/_theming.scss))
+- To use the theme in your styles:
+  ```scss
+  @use '@fullstack-devops/ngx-mat-components' as fsc;
+  @include fsc.core();
+  ```
+
+---
+
+## API Reference
+
+- [`FsCalendarPanelsComponent`](../projects/ngx-mat-components/src/fs-calendar/calendar-panels/calendar-panels.component.ts)
+- [`FsCalendarTableComponent`](../projects/ngx-mat-components/src/fs-calendar/calendar-table/fs-calendar-table.component.ts)
+- [`FsCalendarTableNameDirective`](../projects/ngx-mat-components/src/fs-calendar/directives/fs-calendar-table-name.directive.ts)
+- [`CalendarPanels`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts)
+- [`CalendarPanelsConfig`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts)
+- [`CalendarExtendedDay`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts)
+- [`CalendarTableEntry`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts)
+- [`CalendarEvent`](../projects/ngx-mat-components/src/fs-calendar/calendar.models.ts)
+- [`FsCalendarService`](../projects/ngx-mat-components/src/fs-calendar/services/fs-calendar.service.ts)
+
+---
+
+## Example Screenshots
+
+![Calendar Panels Example](../projects/lib-workspace/src/assets/calendar-panels-shot.png)
+![Calendar Table Example](../projects/lib-workspace/src/assets/calendar-table-shot.png)
+
+---
+
+## See Also
+
+- [Live Demo](https://fullstack-devops.github.io/ngx-mat-components)
+- Workspace Examples:
+  - [showcase-calendar-panels](https://github.com/fullstack-devops/ngx-mat-components/tree/main/projects/lib-workspace/src/app/content/showcase-calendar-panels)
+  - [showcase-calendar-table](https://github.com/fullstack-devops/ngx-mat-components/tree/main/projects/lib-workspace/src/app/content/showcase-calendar-table)