removing CoreUi bloat

.gitignore

@@ -7,5 +7,6 @@ front/app-back/
 front/app-back2/
 front/app-back3/
 front/app-back4/
+front/app-back5/
 front/paper-dashboard-angular-2.4.0/
 front/app/note_modules

front/app/.github/CODE_OF_CONDUCT.md

@@ -1,46 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment include:
-
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at . The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
-
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/

front/app/.github/COMMIT_CONVENTION.md

@@ -1,83 +0,0 @@
-## Git Commit Message Convention
-
-> This is adapted from [Angular's commit convention](https://github.com/conventional-changelog/conventional-changelog/blob/master/packages/conventional-changelog-angular/convention.md).
-
-#### Examples
-
-Appears under "Features" header, `compiler` subheader:
-
-```
-feat(compiler): add 'comments' option
-```
-
-Appears under "Bug Fixes" header, `sidebar` subheader, with a link to issue #28:
-
-```
-fix(sidebar): handle events on blur
-
-close #28
-```
-
-Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation:
-
-```
-perf(core): improve vdom diffing by removing 'foo' option
-
-BREAKING CHANGE: The 'foo' option has been removed.
-```
-
-The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header.
-
-```
-revert: feat(compiler): add 'comments' option
-
-This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
-```
-
-### Full Message Format
-
-A commit message consists of a **header**, **body** and **footer**.  The header has a **type**, **scope** and **subject**:
-
-```
-<type>(<scope>): <subject>
-<BLANK LINE>
-<body>
-<BLANK LINE>
-<footer>
-```
-
-The **header** is mandatory and the **scope** of the header is optional.
-
-### Revert
-
-If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
-
-### Type
-
-If the prefix is `feat`, `fix` or `perf`, it will appear in the changelog. However if there is any [BREAKING CHANGE](#footer), the commit will always appear in the changelog.
-
-Other prefixes are up to your discretion. Suggested prefixes are `docs`, `chore`, `style`, `refactor`, and `test` for non-changelog related tasks.
-
-### Scope
-
-The scope could be anything specifying place of the commit change. For example `core`, `compiler`, `ssr`, `v-model`, `transition` etc...
-
-### Subject
-
-The subject contains succinct description of the change:
-
-* use the imperative, present tense: "change" not "changed" nor "changes"
-* don't capitalize first letter
-* no dot (.) at the end
-
-### Body
-
-Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
-The body should include the motivation for the change and contrast this with previous behavior.
-
-### Footer
-
-The footer should contain any information about **Breaking Changes** and is also the place to
-reference GitHub issues that this commit **Closes**.
-
-**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.

front/app/.github/CONTRIBUTING.md

@@ -1,178 +0,0 @@
-# Contributing to CoreUI
-
-Looking to contribute something to CoreUI? **Here's how you can help.**
-
-Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved.
-
-Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing
-patches and features.
-
-## Using the issue tracker
-
-The [issue tracker](https://github.com/coreui/coreui-free-angular-admin-template/issues) is
-the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)
-and [submitting pull requests](#pull-requests), but please respect the following
-restrictions:
-
-* Please **do not** use the issue tracker for personal support requests.
-
-* Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
-  Use [GitHub's "reactions" feature](https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/)
-  instead.
-
-## Bug reports
-
-A bug is a _demonstrable problem_ that is caused by the code in the repository.
-Good bug reports are extremely helpful, so thanks!
-
-Guidelines for bug reports:
-
-0. **Validate and lint your code** — to ensure your problem isn't caused by a simple error in your own code.
-
-1. **Use the GitHub issue search** — check if the issue has already been reported.
-
-2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository.
-
-3. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. [This JS Bin](http://jsbin.com/lefey/1/edit?html,output) is a helpful template.
-
-
-A good bug report shouldn't leave others needing to chase you up for more
-information. Please try to be as detailed as possible in your report. What is
-your environment? What steps will reproduce the issue? What browser(s) and OS
-experience the problem? Do other browsers show the bug differently? What
-would you expect to be the outcome? All these details will help people to fix
-any potential bugs.
-
-Example:
-
-> Short and descriptive example bug report title
->
-> A summary of the issue and the browser/OS environment in which it occurs. If
-> suitable, include the steps required to reproduce the bug.
->
-> 1. This is the first step
-> 2. This is the second step
-> 3. Further steps, etc.
->
-> `<url>` - a link to the reduced test case
->
-> Any other information you want to share that is relevant to the issue being
-> reported. This might include the lines of code that you have identified as
-> causing the bug, and potential solutions (and your opinions on their
-> merits).
-
-## Feature requests
-
-Feature requests are welcome. Before opening a feature request, please take a
-moment to find out whether your idea fits with the scope and aims of the
-project. It's up to *you* to make a strong case to convince the project's
-developers of the merits of this feature. Please provide as much detail
-and context as possible.
-
-
-## Pull requests
-
-Good pull requests—patches, improvements, new features—are a fantastic
-help. They should remain focused in scope and avoid containing unrelated
-commits.
-
-**Please ask first** before embarking on any significant pull request (e.g.
-implementing features, refactoring code, porting to a different language),
-otherwise you risk spending a lot of time working on something that the
-project's developers might not want to merge into the project.
-
-Adhering to the following process is the best way to get your work
-included in the project:
-
-1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
-   and configure the remotes:
-
-   ```bash
-   # Clone your fork of the repo into the current directory
-   git clone https://github.com/<your-username>/coreui-vue.git
-   # Navigate to the newly cloned directory
-   cd coreui
-   # Assign the original repo to a remote called "upstream"
-   git remote add upstream https://github.com/coreui/coreui-vue.git
-   ```
-
-2. If you cloned a while ago, get the latest changes from upstream:
-
-   ```bash
-   git checkout master
-   git pull upstream master
-   ```
-
-3. Create a new topic branch (off the main project development branch) to
-   contain your feature, change, or fix:
-
-   ```bash
-   git checkout -b <topic-branch-name>
-   ```
-
-4. Commit your changes in logical chunks. Please adhere to these [git commit
-   message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
-   or your code is unlikely to be merged into the main project. Use Git's
-   [interactive rebase](https://help.github.com/articles/interactive-rebase)
-   feature to tidy up your commits before making them public.
-
-5. Locally merge (or rebase) the upstream development branch into your topic branch:
-
-   ```bash
-   git pull [--rebase] upstream master
-   ```
-
-6. Push your topic branch up to your fork:
-
-   ```bash
-   git push origin <topic-branch-name>
-   ```
-
-7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
-    with a clear title and description against the `master` branch.
-
-**IMPORTANT**: By submitting a patch, you agree to allow the project owners to
-license your work under the terms of the [MIT License](LICENSE).
-
-### Semantic Git commit messages
-
-Inspired by Sparkbox's awesome article on
-[semantic commit messages](http://seesparkbox.com/foundry/semantic_commit_messages).
-Please use following commit message format.
-
-* chore (updating npm tasks etc; no production code change) -> ```git test -m 'chore: commit-message-here'```
-* docs (changes to documentation) -> ```git commit -m 'docs: commit-message-here'```
-* feat (new feature) -> ```git commit -m 'feat: commit-message-here'```
-* fix (bug fix) -> ```git commit -m 'fix: commit-message-here'```
-* refactor (refactoring production code) -> ```git commit -m 'refactor: commit-message-here'```
-* style (formatting, missing semi colons, etc; no code change) -> ```git commit -m 'style: commit-message-here'```
-* test (adding missing tests, refactoring tests; no production code change) -> ```git test -m 'refactor: commit-message-here'```
-
-## Code guidelines
-
-### HTML
-
-[Adhere to the Code Guide.](http://codeguide.co/#html)
-
-- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
-- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
-- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
-
-### CSS
-
-[Adhere to the Code Guide.](http://codeguide.co/#css)
-
-- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
-- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines) for more details.
-
-### JS
-
-- No semicolons (in client-side JS)
-- 2 spaces (no tabs)
-- strict mode
-- "Attractive"
-- Don't use [jQuery event alias convenience methods](https://github.com/jquery/jquery/blob/master/src/event/alias.js) (such as `$().focus()`). Instead, use [`$().trigger(eventType, ...)`](http://api.jquery.com/trigger/) or [`$().on(eventType, ...)`](http://api.jquery.com/on/), depending on whether you're firing an event or listening for an event. (For example, `$().trigger('focus')` or `$().on('focus', function (event) { /* handle focus event */ })`) We do this to be compatible with custom builds of jQuery where the event aliases module has been excluded.
-
-## License
-
-By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).

front/app/.github/FUNDING.yml

@@ -1,4 +0,0 @@
-# These are supported funding model platforms
-
-custom: "https://coreui.io/pricing?support=angular"
-open_collective: coreui

front/app/.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,20 +0,0 @@
----
-name: Bug report
-about: Tell us about a bug you may have identified in CoreUI Free Angular Admin Template.
-title: ''
-labels: ''
-assignees: ''
-
----
-
-Before opening:
-
-- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-angular-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)
-- [Validate](https://html5.validator.nu/) any HTML to avoid common problems
-- Read the [contributing guidelines](https://github.com/coreui/coreui-free-angular-admin-template/blob/v4-dev/.github/CONTRIBUTING.md)
-
-Bug reports must include:
-
-- Operating system and version (Windows, macOS, Android, iOS)
-- Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser)
-- A [reduced test case](https://css-tricks.com/reduced-test-cases/) or suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)

front/app/.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,18 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for a new feature in CoreUI Free Angular Admin Template.
-title: ''
-labels: feature
-assignees: ''
-
----
-
-Before opening:
-
-- [Search for duplicate or closed issues](https://github.com/coreui/coreui-free-angular-admin-template/issues?utf8=%E2%9C%93&q=is%3Aissue)
-- Read the [contributing guidelines](https://github.com/coreui/coreui-free-angular-admin-template/blob/main/.github/CONTRIBUTING.md)
-
-Feature requests must include:
-
-- As much detail as possible for what we should add and why it's important to Bootstrap
-- Relevant links to prior art, screenshots, or live demos whenever possible

front/app/.github/SUPPORT.md

@@ -1,9 +0,0 @@
-### Bug reports
-
-See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports.
-
-### How-to
-
-For general troubleshooting or help getting started:
-
-- Go to [Discussions](https://github.com/coreui/coreui-free-angular-admin-template/discussions).

front/app/.github/workflows/build-check.yml

@@ -1,39 +0,0 @@
-name: Build Check
-
-on:
-  push:
-    branches-ignore:
-      - "dependabot/**"
-  pull_request:
-    branches:
-      - main
-      - v4
-  schedule:
-    - # build runs every weekday at 4:15AM UTC
-    - cron: '15 4 * * *'
-
-env:
-  FORCE_COLOR: 2
-  NODE: 16
-
-jobs:
-  build:
-    strategy:
-      matrix:
-        platform: [ubuntu-latest, windows-latest, macOS-latest]
-        node-version: [16.x, 18.x]
-    runs-on: ${{ matrix.platform }}
-    steps:
-      - name: Clone repository
-        uses: actions/checkout@v3
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ env.node-version }}
-
-      - name: Install npm dependencies
-        run: npm install
-
-      - name: Run build
-        run: npm run build

front/app/.github/workflows/stale.yml

@@ -1,27 +0,0 @@
-# This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time.
-#
-# You can adjust the behavior by modifying this file.
-# For more information, see:
-# https://github.com/actions/stale
-name: Mark stale issues and pull requests
-
-on:
-  schedule:
-  - cron: '34 23 * * 0'
-
-jobs:
-  stale:
-
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-      pull-requests: write
-
-    steps:
-    - uses: actions/stale@v5
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions'
-        stale-pr-message: 'This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions'
-        stale-issue-label: 'no-issue-activity'
-        stale-pr-label: 'no-pr-activity'

front/app/.gitignore

@@ -11,9 +11,6 @@
 npm-debug.log
 yarn-error.log
 
-# profiling files
-chrome-profiler-events*.json
-
 # IDEs and editors
 .idea/
 .project

front/app/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

front/app/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

front/app/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

front/app/CHANGELOG.md

@@ -1,15 +0,0 @@
-### [coreui-free-angular-admin-template](https://coreui.io/angular/) changelog
-
----
-
-#### `4.3.0`
-
-update to:
-- `Angular 15`
-- `TypeScript 4.8`
-- `RxJS 7.5`
-
-refactor: 
-- refactor(AppComponent): change selector to `app-root`
-
----

front/app/README.md

@@ -0,0 +1,27 @@
+# App
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.5.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application 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.

front/app/angular.json

@@ -1,21 +1,11 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "cli": {
-    "analytics": false
-  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "coreui-free-angular-admin-template": {
+    "app": {
       "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        },
-        "@schematics/angular:application": {
-          "strict": true
-        }
-      },
+      "schematics": {},
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
@@ -23,33 +13,30 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/coreui-free-angular-admin-template",
+            "outputPath": "dist/app",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "preserveSymlinks": true,
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
-              "src/scss/styles.scss"
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "src/styles.css"
             ],
-            "scripts": [],
-            "allowedCommonJsDependencies": [
-              "chart.js",
-              "@coreui/chartjs/dist/js/coreui-chartjs.js"
-            ]
+            "scripts": []
           },
           "configurations": {
             "production": {
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "1500kb",
-                  "maximumError": "6mb"
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -57,12 +44,6 @@
                   "maximumError": "4kb"
                 }
               ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
               "outputHashing": "all"
             },
             "development": {
@@ -80,10 +61,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "coreui-free-angular-admin-template:build:production"
+              "browserTarget": "app:build:production"
             },
             "development": {
-              "browserTarget": "coreui-free-angular-admin-template:build:development"
+              "browserTarget": "app:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -91,23 +72,23 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "coreui-free-angular-admin-template:build"
+            "browserTarget": "app:build"
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
             "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
-              "src/scss/styles.scss"
+              "src/styles.css"
             ],
             "scripts": []
           }

front/app/karma.conf.js

@@ -1,44 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/coreui-free-angular-admin-template'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

front/app/package.json

@@ -1,10 +1,6 @@
 {
-  "name": "coreui-free-angular-admin-template",
-  "version": "4.3.0",
-  "config": {
-    "coreui_library_short_version": "4.3",
-    "coreui_library_docs_url": "https://coreui.io/angular/docs/"
-  },
+  "name": "app",
+  "version": "0.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -14,52 +10,36 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.0.4",
-    "@angular/cdk": "^15.0.3",
-    "@angular/common": "^15.0.4",
-    "@angular/compiler": "^15.0.4",
-    "@angular/core": "^15.0.4",
-    "@angular/forms": "^15.0.4",
-    "@angular/language-service": "^15.0.4",
-    "@angular/platform-browser": "^15.0.4",
-    "@angular/platform-browser-dynamic": "^15.0.4",
-    "@angular/router": "^15.0.4",
-    "@coreui/angular": "~4.3.0",
-    "@coreui/angular-chartjs": "~4.3.0",
-    "@coreui/chartjs": "^3.0.0",
-    "@coreui/coreui": "~4.2.4",
-    "@coreui/icons": "^2.1.0",
-    "@coreui/icons-angular": "~4.3.0",
-    "@coreui/utils": "^1.3.1",
+    "@angular/animations": "^15.0.0",
+    "@angular/common": "^15.0.0",
+    "@angular/compiler": "^15.0.0",
+    "@angular/core": "^15.0.0",
+    "@angular/forms": "^15.0.0",
+    "@angular/platform-browser": "^15.0.0",
+    "@angular/platform-browser-dynamic": "^15.0.0",
+    "@angular/router": "^15.0.0",
     "@ng-bootstrap/ng-bootstrap": "^14.0.1",
-    "@ngx-formly/bootstrap": "^6.0.0",
-    "@ngx-formly/core": "^6.0.0",
     "@popperjs/core": "^2.11.6",
-    "bootstrap": "^5.2.3",
-    "chart.js": "^3.9.1",
-    "ngx-perfect-scrollbar": "^10.1.1",
+    "ngx-wig": "^15.1.4",
     "rxjs": "~7.5.0",
-    "tslib": "^2.4.1",
-    "zone.js": "~0.12.0"
+    "tslib": "^2.3.0",
+    "zone.js": "~0.12.0",
+    "@ngx-formly/core": "^6.0.0",
+    "@ngx-formly/bootstrap": "^6.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.4",
-    "@angular/cli": "^15.0.4",
-    "@angular/compiler-cli": "^15.0.4",
-    "@angular/localize": "^15.0.4",
-    "@ngx-formly/schematics": "^6.1.0",
-    "@types/jasmine": "^4.3.1",
-    "@types/node": "^16.18.6",
+    "@angular-devkit/build-angular": "^15.0.5",
+    "@angular/cli": "~15.0.5",
+    "@angular/compiler-cli": "^15.0.0",
+    "@angular/localize": "^15.0.0",
+    "@ngx-formly/schematics": "^6.1.1",
+    "@types/jasmine": "~4.3.0",
     "jasmine-core": "~4.5.0",
-    "karma": "~6.4.1",
-    "karma-chrome-launcher": "~3.1.1",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~4.8.4"
-  },
-  "engines": {
-    "node": "^14.20.0 || ^16.13.0 || ^18.10.0",
-    "npm": ">= 6"
+    "typescript": "~4.8.2"
   }
 }

front/app/src/app/app-routing.module.ts

@@ -1,128 +1,41 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { DefaultLayoutComponent } from './containers';
-import { Page404Component } from './views/pages/page404/page404.component';
-import { Page500Component } from './views/pages/page500/page500.component';
-import { LoginComponent } from './views/pages/login/login.component';
-import { RegisterComponent } from './views/pages/register/register.component';
-
 const routes: Routes = [
-  {
-    path: '',
-    redirectTo: 'dashboard',
-    pathMatch: 'full'
-  },
-  {
-    path: '',
-    component: DefaultLayoutComponent,
-    data: {
-      title: 'Home'
+    {
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full'
     },
-    children: [
-      {
-        path: 'dashboard',
-        loadChildren: () =>
-          import('./views/dashboard/dashboard.module').then((m) => m.DashboardModule)
-      },
-      {
-        path: 'entities',
-        loadChildren: () =>
-          import('./views/entities/entities.module').then((m) => m.EntitiesModule)
-      },
-      {
-        path: 'templates',
-        loadChildren: () =>
-          import('./views/templates/templates.module').then((m) => m.TemplatesModule)
-      },
-      {
-        path: 'theme',
-        loadChildren: () =>
-          import('./views/theme/theme.module').then((m) => m.ThemeModule)
-      },
-      {
-        path: 'base',
-        loadChildren: () =>
-          import('./views/base/base.module').then((m) => m.BaseModule)
-      },
-      {
-        path: 'buttons',
-        loadChildren: () =>
-          import('./views/buttons/buttons.module').then((m) => m.ButtonsModule)
-      },
-      {
-        path: 'forms',
-        loadChildren: () =>
-          import('./views/forms/forms.module').then((m) => m.CoreUIFormsModule)
-      },
-      {
-        path: 'charts',
-        loadChildren: () =>
-          import('./views/charts/charts.module').then((m) => m.ChartsModule)
-      },
-      {
-        path: 'icons',
-        loadChildren: () =>
-          import('./views/icons/icons.module').then((m) => m.IconsModule)
-      },
-      {
-        path: 'notifications',
-        loadChildren: () =>
-          import('./views/notifications/notifications.module').then((m) => m.NotificationsModule)
-      },
-      {
-        path: 'widgets',
-        loadChildren: () =>
-          import('./views/widgets/widgets.module').then((m) => m.WidgetsModule)
-      },
-      {
-        path: 'pages',
-        loadChildren: () =>
-          import('./views/pages/pages.module').then((m) => m.PagesModule)
-      },
-    ]
-  },
-  {
-    path: '404',
-    component: Page404Component,
-    data: {
-      title: 'Page 404'
+    {
+        path: '',
+        //component: DefaultLayoutComponent,
+        data: {
+            title: 'Home'
+        },
+        children: [
+            // {
+            //     path: 'dashboard',
+            //     loadChildren: () =>
+            //         import('./views/dashboard/dashboard.module').then((m) => m.DashboardModule)
+            // },
+            {
+                path: 'entities',
+                loadChildren: () =>
+                    import('./views/entities/entities.module').then((m) => m.EntitiesModule)
+            },
+            {
+                path: 'templates',
+                loadChildren: () =>
+                    import('./views/templates/templates.module').then((m) => m.TemplatesModule)
+            },
+        ]
     }
-  },
-  {
-    path: '500',
-    component: Page500Component,
-    data: {
-      title: 'Page 500'
-    }
-  },
-  {
-    path: 'login',
-    component: LoginComponent,
-    data: {
-      title: 'Login Page'
-    }
-  },
-  {
-    path: 'register',
-    component: RegisterComponent,
-    data: {
-      title: 'Register Page'
-    }
-  },
-  {path: '**', redirectTo: 'dashboard'}
-];
+    ];
+
 
 @NgModule({
-  imports: [
-    RouterModule.forRoot(routes, {
-      scrollPositionRestoration: 'top',
-      anchorScrolling: 'enabled',
-      initialNavigation: 'enabledBlocking'
-      // relativeLinkResolution: 'legacy'
-    })
-  ],
-  exports: [RouterModule]
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
 })
-export class AppRoutingModule {
-}
+export class AppRoutingModule { }

front/app/src/app/app.component.html

@@ -0,0 +1,368 @@
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
+<!-- * * * * * * * to get started with your project! * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+<style>
+  :host {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 14px;
+    color: #333;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
+  .toolbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    background-color: #1976d2;
+    color: white;
+    font-weight: 600;
+  }
+
+  .toolbar img {
+    margin: 0 16px;
+  }
+
+  .toolbar #twitter-logo {
+    height: 40px;
+    margin: 0 8px;
+  }
+
+  .toolbar #youtube-logo {
+    height: 40px;
+    margin: 0 16px;
+  }
+
+  .toolbar #twitter-logo:hover,
+  .toolbar #youtube-logo:hover {
+    opacity: 0.8;
+  }
+
+  .content {
+    display: flex;
+    margin: 82px auto 32px;
+    padding: 0 16px;
+    max-width: 960px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  svg.material-icons {
+    height: 24px;
+    width: auto;
+  }
+
+  svg.material-icons:not(:last-child) {
+    margin-right: 8px;
+  }
+
+  .card svg.material-icons path {
+    fill: #888;
+  }
+
+  .card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 16px;
+  }
+
+  .card {
+    all: unset;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    background-color: #fafafa;
+    height: 40px;
+    width: 200px;
+    margin: 0 8px 16px;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s ease-in-out;
+    line-height: 24px;
+  }
+
+  .card-container .card:not(:last-child) {
+    margin-right: 0;
+  }
+
+  .card.card-small {
+    height: 16px;
+    width: 168px;
+  }
+
+  .card-container .card:not(.highlight-card) {
+    cursor: pointer;
+  }
+
+  .card-container .card:not(.highlight-card):hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
+  }
+
+  .card-container .card:not(.highlight-card):hover .material-icons path {
+    fill: rgb(105, 103, 103);
+  }
+
+  .card.highlight-card {
+    background-color: #1976d2;
+    color: white;
+    font-weight: 600;
+    border: none;
+    width: auto;
+    min-width: 30%;
+    position: relative;
+  }
+
+  .card.card.highlight-card span {
+    margin-left: 60px;
+  }
+
+  svg#rocket {
+    width: 80px;
+    position: absolute;
+    left: -10px;
+    top: -24px;
+  }
+
+  svg#rocket-smoke {
+    height: calc(100vh - 95px);
+    position: absolute;
+    top: 10px;
+    right: 180px;
+    z-index: -10;
+  }
+
+  a,
+  a:visited,
+  a:hover {
+    color: #1976d2;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: #125699;
+  }
+
+  .terminal {
+    position: relative;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 6px;
+    padding-top: 45px;
+    margin-top: 8px;
+    overflow: hidden;
+    background-color: rgb(15, 15, 16);
+  }
+
+  .terminal::before {
+    content: "\2022 \2022 \2022";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 4px;
+    background: rgb(58, 58, 58);
+    color: #c2c3c4;
+    width: 100%;
+    font-size: 2rem;
+    line-height: 0;
+    padding: 14px 0;
+    text-indent: 4px;
+  }
+
+  .terminal pre {
+    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+    color: white;
+    padding: 0 1rem 1rem;
+    margin: 0;
+  }
+
+  .circle-link {
+    height: 40px;
+    width: 40px;
+    border-radius: 40px;
+    margin: 8px;
+    background-color: white;
+    border: 1px solid #eeeeee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: 1s ease-out;
+  }
+
+  .circle-link:hover {
+    transform: translateY(-0.25rem);
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+  }
+
+  footer {
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    line-height: 20px;
+  }
+
+  footer a {
+    display: flex;
+    align-items: center;
+  }
+
+  .github-star-badge {
+    color: #24292e;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    padding: 3px 10px;
+    border: 1px solid rgba(27,31,35,.2);
+    border-radius: 3px;
+    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
+    margin-left: 4px;
+    font-weight: 600;
+  }
+
+  .github-star-badge:hover {
+    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
+    border-color: rgba(27,31,35,.35);
+    background-position: -.5em;
+  }
+
+  .github-star-badge .material-icons {
+    height: 16px;
+    width: 16px;
+    margin-right: 4px;
+  }
+
+  svg#clouds {
+    position: fixed;
+    bottom: -160px;
+    left: -230px;
+    z-index: -10;
+    width: 1920px;
+  }
+
+  /* Responsive Styles */
+  @media screen and (max-width: 767px) {
+    .card-container > *:not(.circle-link) ,
+    .terminal {
+      width: 100%;
+    }
+
+    .card:not(.highlight-card) {
+      height: 16px;
+      margin: 8px 0;
+    }
+
+    .card.highlight-card span {
+      margin-left: 72px;
+    }
+
+    svg#rocket-smoke {
+      right: 120px;
+      transform: rotate(-5deg);
+    }
+  }
+
+  @media screen and (max-width: 575px) {
+    svg#rocket-smoke {
+      display: none;
+      visibility: hidden;
+    }
+  }
+</style>
+
+<!-- Toolbar -->
+<div class="toolbar" role="banner">
+  <img
+    width="40"
+    alt="Angular Logo"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
+  />
+  <span>Welcome</span>
+    <div class="spacer"></div>
+    <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
+      <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
+        <rect width="400" height="400" fill="none"/>
+        <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
+      </svg>
+    </a>
+    <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
+      <svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
+        <path d="M0 0h24v24H0V0z" fill="none"/>
+        <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
+      </svg>
+    </a>
+</div>
+
+<div class="content" role="main">
+
+  <!-- Highlight Card -->
+  <div class="card highlight-card card-small">
+
+    <svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
+      <title>Rocket Ship</title>
+      <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
+        <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
+        <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
+          <path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
+          <path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
+        </g>
+      </g>
+    </svg>
+
+    <span>{{ title }} app is running!</span>
+
+    <svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
+      <title>Rocket Ship Smoke</title>
+      <path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
+    </svg>
+
+  </div>
+
+  <svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
+    <title>Gray Clouds Background</title>
+    <path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
+  </svg>
+
+</div>
+
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+<router-outlet></router-outlet>

front/app/src/app/app.component.spec.ts

@@ -20,9 +20,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'CoreUI Free Angular Admin Template'`, () => {
+  it(`should have as title 'app'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('CoreUI Free Angular Admin Template');
+    expect(app.title).toEqual('app');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('app app is running!');
   });
 });

front/app/src/app/app.component.ts

@@ -1,32 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
-
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from './icons/icon-subset';
-import { Title } from '@angular/platform-browser';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  template: '<router-outlet></router-outlet>',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit {
-  title = 'CoreUI Free Angular Admin Template';
-
-  constructor(
-    private router: Router,
-    private titleService: Title,
-    private iconSetService: IconSetService
-  ) {
-    titleService.setTitle(this.title);
-    // iconSet singleton
-    iconSetService.icons = { ...iconSubset };
-  }
-
-  ngOnInit(): void {
-    this.router.events.subscribe((evt) => {
-      if (!(evt instanceof NavigationEnd)) {
-        return;
-      }
-    });
-  }
+export class AppComponent {
+  title = 'app';
 }

front/app/src/app/app.module.ts

@@ -1,106 +1,20 @@
 import { NgModule } from '@angular/core';
-import { HashLocationStrategy, LocationStrategy, PathLocationStrategy } from '@angular/common';
-import { BrowserModule, Title } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 
-import {
-  PERFECT_SCROLLBAR_CONFIG,
-  PerfectScrollbarConfigInterface,
-  PerfectScrollbarModule,
-} from 'ngx-perfect-scrollbar';
-
-// Import routing module
 import { AppRoutingModule } from './app-routing.module';
-
-// Import app component
 import { AppComponent } from './app.component';
-
-// Import containers
-import {
-  DefaultFooterComponent,
-  DefaultHeaderComponent,
-  DefaultLayoutComponent,
-} from './containers';
-
-import {
-  AvatarModule,
-  BadgeModule,
-  BreadcrumbModule,
-  ButtonGroupModule,
-  ButtonModule,
-  CardModule,
-  DropdownModule,
-  FooterModule,
-  FormModule,
-  GridModule,
-  HeaderModule,
-  ListGroupModule,
-  NavModule,
-  ProgressModule,
-  SharedModule,
-  SidebarModule,
-  TabsModule,
-  UtilitiesModule,
-} from '@coreui/angular';
-
-import { IconModule, IconSetService } from '@coreui/icons-angular';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
-const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
-  suppressScrollX: true,
-};
-
-const APP_CONTAINERS = [
-  DefaultFooterComponent,
-  DefaultHeaderComponent,
-  DefaultLayoutComponent,
-];
-
 @NgModule({
-  declarations: [AppComponent, ...APP_CONTAINERS],
+  declarations: [
+    AppComponent
+  ],
   imports: [
     BrowserModule,
-    BrowserAnimationsModule,
     AppRoutingModule,
-    AvatarModule,
-    BreadcrumbModule,
-    FooterModule,
-    DropdownModule,
-    GridModule,
-    HeaderModule,
-    SidebarModule,
-    IconModule,
-    PerfectScrollbarModule,
-    NavModule,
-    ButtonModule,
-    FormModule,
-    UtilitiesModule,
-    ButtonGroupModule,
-    ReactiveFormsModule,
-    SidebarModule,
-    SharedModule,
-    TabsModule,
-    ListGroupModule,
-    ProgressModule,
-    BadgeModule,
-    ListGroupModule,
-    CardModule,
-    NgbModule,
+    NgbModule
   ],
-  providers: [
-    {
-      provide: LocationStrategy,
-      useClass: HashLocationStrategy,
-    },
-    {
-      provide: PERFECT_SCROLLBAR_CONFIG,
-      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG,
-    },
-    IconSetService,
-    Title
-  ],
-  bootstrap: [AppComponent],
+  providers: [],
+  bootstrap: [AppComponent]
 })
-export class AppModule {
-}
+export class AppModule { }

front/app/src/app/containers/default-layout/_nav.ts

@@ -1,293 +0,0 @@
-import { INavData } from '@coreui/angular';
-
-export const navItems: INavData[] = [
-  {
-    name: 'Dashboard',
-    url: '/dashboard',
-    iconComponent: { name: 'cil-speedometer' },
-    badge: {
-      color: 'info',
-      text: 'NEW'
-    }
-  },
-  {
-    name: 'Entities',
-    url: '/entities',
-    iconComponent: { name: 'cil-cursor' },
-    children: [
-      {
-        name: 'List',
-        url: '/entities/list'
-      },
-      {
-        name: 'New',
-        url: '/entities/new'
-      },
-    ]
-  },
-  {
-    name: 'Templates',
-    title: true
-  },
-  {
-    name: 'Contract Templates',
-    url: '/templates/contracts',
-    iconComponent: { name: 'cil-cursor' },
-    children: [
-      {
-        name: 'List',
-        url: '/templates/contracts/list'
-      },
-      {
-        name: 'New',
-        url: '/templates/contracts/new'
-      },
-    ]
-  },
-  {
-    name: 'Provision Templates',
-    url: '/templates/provisions',
-    iconComponent: { name: 'cil-cursor' },
-    children: [
-      {
-        name: 'List',
-        url: '/templates/provisions/list'
-      },
-      {
-        name: 'New',
-        url: '/templates/provisions/new'
-      },
-    ]
-  },
-  {
-    title: true,
-    name: 'Theme'
-  },
-  {
-    name: 'Colors',
-    url: '/theme/colors',
-    iconComponent: { name: 'cil-drop' }
-  },
-  {
-    name: 'Typography',
-    url: '/theme/typography',
-    linkProps: { fragment: 'someAnchor' },
-    iconComponent: { name: 'cil-pencil' }
-  },
-  {
-    name: 'Components',
-    title: true
-  },
-  {
-    name: 'Base',
-    url: '/base',
-    iconComponent: { name: 'cil-puzzle' },
-    children: [
-      {
-        name: 'Accordion',
-        url: '/base/accordion'
-      },
-      {
-        name: 'Breadcrumbs',
-        url: '/base/breadcrumbs'
-      },
-      {
-        name: 'Cards',
-        url: '/base/cards'
-      },
-      {
-        name: 'Carousel',
-        url: '/base/carousel'
-      },
-      {
-        name: 'Collapse',
-        url: '/base/collapse'
-      },
-      {
-        name: 'List Group',
-        url: '/base/list-group'
-      },
-      {
-        name: 'Navs & Tabs',
-        url: '/base/navs'
-      },
-      {
-        name: 'Pagination',
-        url: '/base/pagination'
-      },
-      {
-        name: 'Placeholder',
-        url: '/base/placeholder'
-      },
-      {
-        name: 'Popovers',
-        url: '/base/popovers'
-      },
-      {
-        name: 'Progress',
-        url: '/base/progress'
-      },
-      {
-        name: 'Spinners',
-        url: '/base/spinners'
-      },
-      {
-        name: 'Tables',
-        url: '/base/tables'
-      },
-      {
-        name: 'Tabs',
-        url: '/base/tabs'
-      },
-      {
-        name: 'Tooltips',
-        url: '/base/tooltips'
-      }
-    ]
-  },
-  {
-    name: 'Buttons',
-    url: '/buttons',
-    iconComponent: { name: 'cil-cursor' },
-    children: [
-      {
-        name: 'Buttons',
-        url: '/buttons/buttons'
-      },
-      {
-        name: 'Button groups',
-        url: '/buttons/button-groups'
-      },
-      {
-        name: 'Dropdowns',
-        url: '/buttons/dropdowns'
-      },
-    ]
-  },
-  {
-    name: 'Forms',
-    url: '/forms',
-    iconComponent: { name: 'cil-notes' },
-    children: [
-      {
-        name: 'Form Control',
-        url: '/forms/form-control'
-      },
-      {
-        name: 'Select',
-        url: '/forms/select'
-      },
-      {
-        name: 'Checks & Radios',
-        url: '/forms/checks-radios'
-      },
-      {
-        name: 'Range',
-        url: '/forms/range'
-      },
-      {
-        name: 'Input Group',
-        url: '/forms/input-group'
-      },
-      {
-        name: 'Floating Labels',
-        url: '/forms/floating-labels'
-      },
-      {
-        name: 'Layout',
-        url: '/forms/layout'
-      },
-      {
-        name: 'Validation',
-        url: '/forms/validation'
-      }
-    ]
-  },
-  {
-    name: 'Charts',
-    url: '/charts',
-    iconComponent: { name: 'cil-chart-pie' }
-  },
-  {
-    name: 'Icons',
-    iconComponent: { name: 'cil-star' },
-    url: '/icons',
-    children: [
-      {
-        name: 'CoreUI Free',
-        url: '/icons/coreui-icons',
-        badge: {
-          color: 'success',
-          text: 'FREE'
-        }
-      },
-      {
-        name: 'CoreUI Flags',
-        url: '/icons/flags'
-      },
-      {
-        name: 'CoreUI Brands',
-        url: '/icons/brands'
-      }
-    ]
-  },
-  {
-    name: 'Notifications',
-    url: '/notifications',
-    iconComponent: { name: 'cil-bell' },
-    children: [
-      {
-        name: 'Alerts',
-        url: '/notifications/alerts'
-      },
-      {
-        name: 'Badges',
-        url: '/notifications/badges'
-      },
-      {
-        name: 'Modal',
-        url: '/notifications/modal'
-      },
-      {
-        name: 'Toast',
-        url: '/notifications/toasts'
-      }
-    ]
-  },
-  {
-    name: 'Widgets',
-    url: '/widgets',
-    iconComponent: { name: 'cil-calculator' },
-    badge: {
-      color: 'info',
-      text: 'NEW'
-    }
-  },
-  {
-    title: true,
-    name: 'Extras'
-  },
-  {
-    name: 'Pages',
-    url: '/login',
-    iconComponent: { name: 'cil-star' },
-    children: [
-      {
-        name: 'Login',
-        url: '/login'
-      },
-      {
-        name: 'Register',
-        url: '/register'
-      },
-      {
-        name: 'Error 404',
-        url: '/404'
-      },
-      {
-        name: 'Error 500',
-        url: '/500'
-      }
-    ]
-  },
-];

front/app/src/app/containers/default-layout/default-footer/default-footer.component.html

@@ -1,12 +0,0 @@
-<!--<c-footer>-->
-  <div>
-    <a href="https://coreui.io/pro/angular/" target="_blank">CoreUI</a>
-    <span> &copy; 2022 creativeLabs</span>
-  </div>
-  <div class="ms-auto">
-    Powered by
-    <a href="https://coreui.io/pro/angular" target="_blank">
-      <span> CoreUI v4 for Angular</span>
-    </a>
-  </div>
-<!--</c-footer>-->

front/app/src/app/containers/default-layout/default-footer/default-footer.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DefaultFooterComponent } from './default-footer.component';
-
-describe('DefaultFooterComponent', () => {
-  let component: DefaultFooterComponent;
-  let fixture: ComponentFixture<DefaultFooterComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ DefaultFooterComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DefaultFooterComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/containers/default-layout/default-footer/default-footer.component.ts

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { FooterComponent } from '@coreui/angular';
-
-@Component({
-  selector: 'app-default-footer',
-  templateUrl: './default-footer.component.html',
-  styleUrls: ['./default-footer.component.scss'],
-})
-export class DefaultFooterComponent extends FooterComponent {
-  constructor() {
-    super();
-  }
-}

front/app/src/app/containers/default-layout/default-header/default-header.component.html

@@ -1,165 +0,0 @@
-<!--<c-header class="mb-4 d-print-none" position="sticky">-->
-<ng-container>
-  <c-container [fluid]="true">
-    <button
-      toggle="visible"
-      cHeaderToggler
-      [cSidebarToggle]="sidebarId"
-      class="ps-1"
-    >
-      <svg cIcon
-        name="cilMenu"
-        size="lg"
-      ></svg>
-    </button>
-    <c-header-nav class="d-none d-lg-flex me-auto">
-      <c-nav-item>
-        <a cNavLink routerLink="/dashboard" routerLinkActive="active">
-          Dashboard
-        </a>
-      </c-nav-item>
-      <c-nav-item>
-        <a cNavLink routerLink="/users" routerLinkActive="active">Users</a>
-      </c-nav-item>
-      <c-nav-item>
-        <a cNavLink routerLink="/settings" routerLinkActive="active">
-          Settings
-        </a>
-      </c-nav-item>
-    </c-header-nav>
-
-    <c-header-nav class="d-none d-lg-flex">
-      <c-nav-item>
-        <a routerLink="./" cNavLink>
-          <svg cIcon name="cilBell" size="lg"></svg>
-        </a>
-      </c-nav-item>
-      <c-nav-item>
-        <a routerLink="./" cNavLink>
-          <svg cIcon name="cilList" size="lg"></svg>
-        </a>
-      </c-nav-item>
-      <c-nav-item>
-        <a routerLink="./" cNavLink>
-          <svg cIcon name="cilEnvelopeOpen" size="lg"></svg>
-        </a>
-      </c-nav-item>
-    </c-header-nav>
-    <c-header-nav class="ms-3">
-      <ng-container *ngTemplateOutlet="userDropdown"></ng-container>
-    </c-header-nav>
-
-  </c-container>
-  <c-header-divider></c-header-divider>
-  <c-container [fluid]="true">
-    <c-breadcrumb-router class="ms-2"></c-breadcrumb-router>
-  </c-container>
-</ng-container>
-<!--</c-header>-->
-
-<ng-template #userDropdown>
-  <c-dropdown alignment="end" variant="nav-item">
-    <button
-      cButton
-      color=""
-      [caret]="false"
-      cDropdownToggle
-      class="py-0"
-    >
-      <c-avatar
-        cTextColor="primary"
-        shape="rounded-1"
-        size="md"
-        src="./assets/img/avatars/8.jpg"
-        status="success"
-      >
-      </c-avatar>
-    </button>
-    <ul cDropdownMenu class="pt-0 pr-5 w-auto">
-      <li>
-        <h6 cDropdownHeader class="bg-light fw-semibold py-2">Account</h6>
-      </li>
-      <li>
-        <a routerLink="./" cDropdownItem>
-          <svg cIcon class="me-2" name="cilBell"></svg>
-          Updates
-          <c-badge class="ms-2 float-end" color="info">
-            42
-          </c-badge>
-        </a>
-      </li>
-      <li>
-        <a routerLink="./" cDropdownItem>
-          <svg cIcon class="me-2" name="cilEnvelopeOpen"></svg>
-          Messages
-          <c-badge class="ms-2 float-end" color="success">
-            42
-          </c-badge>
-        </a>
-      </li>
-      <li>
-        <a routerLink="./" cDropdownItem>
-          <svg cIcon class="me-2" name="cilTask"></svg>
-          Tasks
-          <c-badge class="ms-2 float-end" color="danger">
-            42
-          </c-badge>
-        </a>
-      </li>
-      <li>
-        <a routerLink="./" cDropdownItem>
-          <svg cIcon class="me-2" name='cilCommentSquare'></svg>
-          Comments
-          <c-badge class="ms-auto" color="warning">
-            42
-          </c-badge>
-        </a>
-      </li>
-      <li>
-        <h6 cDropdownHeader class="bg-light fw-semibold py-2">Settings</h6>
-      </li>
-      <li></li>
-      <li>
-        <a routerLink="./" cDropdownItem>
-          <svg cIcon class="me-2" name="cilUser"></svg>
-          Profile
-        </a>
-      </li>
-      <li>
-        <a routerLink="./" cDropdownItem>
-          <svg cIcon class="me-2" name="cilSettings"></svg>
-          Settings
-        </a>
-      </li>
-      <li>
-        <a routerLink="./" cDropdownItem>
-          <svg cIcon class="me-2" name="cilCreditCard"></svg>
-          Payments
-          <c-badge class="ms-2 float-end" color="secondary">
-            42
-          </c-badge>
-        </a>
-      </li>
-      <li>
-        <a routerLink="./" cDropdownItem>
-          <svg cIcon class="me-2" name="cilFile"></svg>
-          Projects
-          <c-badge class="ms-2 float-end" color="primary">
-            42
-          </c-badge>
-        </a>
-      </li>
-      <li>
-        <hr cDropdownDivider/>
-      </li>
-      <li>
-        <a routerLink="./" cDropdownItem>
-          <svg cIcon class="me-2" name="cilLockLocked"></svg>
-          Lock Account
-        </a>
-      </li>
-      <li></li>
-    </ul>
-  </c-dropdown>
-</ng-template>
-

front/app/src/app/containers/default-layout/default-header/default-header.component.spec.ts

@@ -1,43 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import {
-  AvatarModule,
-  BadgeModule,
-  BreadcrumbModule,
-  DropdownModule,
-  GridModule,
-  HeaderModule,
-  NavModule, SidebarModule
-} from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DefaultHeaderComponent } from './default-header.component';
-import { RouterTestingModule } from '@angular/router/testing';
-
-describe('DefaultHeaderComponent', () => {
-  let component: DefaultHeaderComponent;
-  let fixture: ComponentFixture<DefaultHeaderComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [DefaultHeaderComponent],
-      imports: [GridModule, HeaderModule, NavModule, BadgeModule, AvatarModule, DropdownModule, BreadcrumbModule, RouterTestingModule, SidebarModule],
-      providers: [IconSetService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(DefaultHeaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/containers/default-layout/default-header/default-header.component.ts

@@ -1,21 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-
-import { ClassToggleService, HeaderComponent } from '@coreui/angular';
-
-@Component({
-  selector: 'app-default-header',
-  templateUrl: './default-header.component.html',
-})
-export class DefaultHeaderComponent extends HeaderComponent {
-
-  @Input() sidebarId: string = "sidebar";
-
-  public newMessages = new Array(4)
-  public newTasks = new Array(5)
-  public newNotifications = new Array(5)
-
-  constructor(private classToggler: ClassToggleService) {
-    super();
-  }
-}

front/app/src/app/containers/default-layout/default-layout.component.html

@@ -1,51 +0,0 @@
-<!--sidebar-->
-<c-sidebar
-  #sidebar="cSidebar"
-  class="d-print-none sidebar sidebar-fixed"
-  id="sidebar"
-  visible
->
-  <c-sidebar-brand
-    [brandFull]="{
-      src: 'assets/img/brand/coreui-angular.svg',
-      width: 200,
-      height: 46,
-      alt: 'CoreUI Logo'
-    }"
-    [brandNarrow]="{
-      src: 'assets/img/brand/coreui-signet-white.svg',
-      width: 46,
-      height: 46,
-      alt: 'CoreUI Logo'
-    }"
-    routerLink="./"
-  >
-  </c-sidebar-brand>
-    <perfect-scrollbar [config]="perfectScrollbarConfig">
-  <!--  [perfectScrollbar]="perfectScrollbarConfig"-->
-  <c-sidebar-nav
-    [navItems]="navItems"
-    dropdownMode="close"
-  >
-  </c-sidebar-nav>
-    </perfect-scrollbar>
-  <c-sidebar-toggler
-    *ngIf="!sidebar.narrow"
-    toggle="unfoldable"
-    cSidebarToggle="sidebar"
-  ></c-sidebar-toggler>
-</c-sidebar>
-
-<!--main-->
-<div class="wrapper d-flex flex-column min-vh-100 bg-light dark:bg-transparent">
-  <!--app-header-->
-  <app-default-header class="mb-4 d-print-none header header-sticky" position="sticky" sidebarId="sidebar"></app-default-header>
-  <!--app-body-->
-  <div class="body flex-grow-1 px-3">
-    <c-container breakpoint="lg" class="h-auto">
-      <router-outlet></router-outlet>
-    </c-container>
-  </div>
-  <!--app footer-->
-  <app-default-footer></app-default-footer>
-</div>

front/app/src/app/containers/default-layout/default-layout.component.ts

@@ -1,18 +0,0 @@
-import { Component } from '@angular/core';
-
-import { navItems } from './_nav';
-
-@Component({
-  selector: 'app-dashboard',
-  templateUrl: './default-layout.component.html',
-})
-export class DefaultLayoutComponent {
-
-  public navItems = navItems;
-
-  public perfectScrollbarConfig = {
-    suppressScrollX: true,
-  };
-
-  constructor() {}
-}

front/app/src/app/containers/default-layout/index.ts

@@ -1,3 +0,0 @@
-export * from './default-footer/default-footer.component';
-export * from './default-header/default-header.component';
-export * from './default-layout.component';

front/app/src/app/containers/index.ts

@@ -1 +0,0 @@
-export * from './default-layout';

front/app/src/app/icons/icon-subset.ts

@@ -1,275 +0,0 @@
-import {
-  cibCcAmex,
-  cibCcApplePay,
-  cibCcMastercard,
-  cibCcPaypal,
-  cibCcStripe,
-  cibCcVisa,
-  cibFacebook,
-  cibGoogle,
-  cibLinkedin,
-  cibSkype,
-  cibTwitter,
-  cifBr,
-  cifEs,
-  cifFr,
-  cifIn,
-  cifPl,
-  cifUs,
-  cilAlignCenter,
-  cilAlignLeft,
-  cilAlignRight,
-  cilApplicationsSettings,
-  cilArrowBottom,
-  cilArrowRight,
-  cilArrowTop,
-  cilBasket,
-  cilBell,
-  cilBold,
-  cilBookmark,
-  cilCalculator,
-  cilCalendar,
-  cilChart,
-  cilChartPie,
-  cilCheck,
-  cilChevronLeft,
-  cilChevronRight,
-  cilCloudDownload,
-  cilCode,
-  cilCommentSquare,
-  cilCreditCard,
-  cilCursor,
-  cilDollar,
-  cilDrop,
-  cilEnvelopeClosed,
-  cilEnvelopeOpen,
-  cilFile,
-  cilHome,
-  cilInbox,
-  cilIndentDecrease,
-  cilIndentIncrease,
-  cilItalic,
-  cilJustifyCenter,
-  cilLayers,
-  cilList,
-  cilListNumbered,
-  cilLocationPin,
-  cilLockLocked,
-  cilMagnifyingGlass,
-  cilMap,
-  cilMediaPlay,
-  cilMenu,
-  cilMoon,
-  cilNotes,
-  cilOptions,
-  cilPaperclip,
-  cilPaperPlane,
-  cilPen,
-  cilPencil,
-  cilPeople,
-  cilPrint,
-  cilPuzzle,
-  cilReportSlash,
-  cilSave,
-  cilSettings,
-  cilShare,
-  cilShareAll,
-  cilShareBoxed,
-  cilSpeech,
-  cilSpeedometer,
-  cilSpreadsheet,
-  cilStar,
-  cilSun,
-  cilTags,
-  cilTask,
-  cilTrash,
-  cilUnderline,
-  cilUser,
-  cilUserFemale,
-  cilUserFollow,
-  cilUserUnfollow,
-} from '@coreui/icons';
-
-export const iconSubset = {
-  cibCcAmex,
-  cibCcApplePay,
-  cibCcMastercard,
-  cibCcPaypal,
-  cibCcStripe,
-  cibCcVisa,
-  cibFacebook,
-  cibGoogle,
-  cibLinkedin,
-  cibSkype,
-  cibTwitter,
-  cifBr,
-  cifEs,
-  cifFr,
-  cifIn,
-  cifPl,
-  cifUs,
-  cilAlignCenter,
-  cilAlignLeft,
-  cilAlignRight,
-  cilApplicationsSettings,
-  cilArrowBottom,
-  cilArrowRight,
-  cilArrowTop,
-  cilBasket,
-  cilBell,
-  cilBold,
-  cilBookmark,
-  cilCalculator,
-  cilCalendar,
-  cilChart,
-  cilChartPie,
-  cilCheck,
-  cilChevronLeft,
-  cilChevronRight,
-  cilCloudDownload,
-  cilCode,
-  cilCommentSquare,
-  cilCreditCard,
-  cilCursor,
-  cilDollar,
-  cilDrop,
-  cilEnvelopeClosed,
-  cilEnvelopeOpen,
-  cilFile,
-  cilHome,
-  cilInbox,
-  cilIndentDecrease,
-  cilIndentIncrease,
-  cilItalic,
-  cilJustifyCenter,
-  cilLayers,
-  cilList,
-  cilListNumbered,
-  cilLocationPin,
-  cilLockLocked,
-  cilMagnifyingGlass,
-  cilMap,
-  cilMediaPlay,
-  cilMenu,
-  cilMoon,
-  cilNotes,
-  cilOptions,
-  cilPaperclip,
-  cilPaperPlane,
-  cilPen,
-  cilPencil,
-  cilPeople,
-  cilPrint,
-  cilPuzzle,
-  cilReportSlash,
-  cilSave,
-  cilSettings,
-  cilShare,
-  cilShareAll,
-  cilShareBoxed,
-  cilSpeech,
-  cilSpeedometer,
-  cilSpreadsheet,
-  cilStar,
-  cilSun,
-  cilTags,
-  cilTask,
-  cilTrash,
-  cilUnderline,
-  cilUser,
-  cilUserFemale,
-  cilUserFollow,
-  cilUserUnfollow,
-};
-
-export enum IconSubset {
-  cibCcAmex = 'cibCcAmex',
-  cibCcApplePay = 'cibCcApplePay',
-  cibCcMastercard = 'cibCcMastercard',
-  cibCcPaypal = 'cibCcPaypal',
-  cibCcStripe = 'cibCcStripe',
-  cibCcVisa = 'cibCcVisa',
-  cibFacebook = 'cibFacebook',
-  cibGoogle = 'cibGoogle',
-  cibLinkedin = 'cibLinkedin',
-  cibSkype = 'cibSkype',
-  cibTwitter = 'cibTwitter',
-  cifBr = 'cifBr',
-  cifEs = 'cifEs',
-  cifFr = 'cifFr',
-  cifIn = 'cifIn',
-  cifPl = 'cifPl',
-  cifUs = 'cifUs',
-  cilAlignCenter = 'cilAlignCenter',
-  cilAlignLeft = 'cilAlignLeft',
-  cilAlignRight = 'cilAlignRight',
-  cilApplicationsSettings = 'cilApplicationsSettings',
-  cilArrowBottom = 'cilArrowBottom',
-  cilArrowRight = 'cilArrowRight',
-  cilArrowTop = 'cilArrowTop',
-  cilBasket = 'cilBasket',
-  cilBell = 'cilBell',
-  cilBold = 'cilBold',
-  cilBookmark = 'cilBookmark',
-  cilCalculator = 'cilCalculator',
-  cilCalendar = 'cilCalendar',
-  cilChart = 'cilChart',
-  cilChartPie = 'cilChartPie',
-  cilCheck='cilCheck',
-  cilChevronLeft = 'cilChevronLeft',
-  cilChevronRight = 'cilChevronRight',
-  cilCloudDownload = 'cilCloudDownload',
-  cilCode = 'cilCode',
-  cilCommentSquare = 'cilCommentSquare',
-  cilCreditCard = 'cilCreditCard',
-  cilCursor = 'cilCursor',
-  cilDollar = 'cilDollar',
-  cilDrop = 'cilDrop',
-  cilEnvelopeClosed = 'cilEnvelopeClosed',
-  cilEnvelopeOpen = 'cilEnvelopeOpen',
-  cilFile = 'cilFile',
-  cilHome = 'cilHome',
-  cilInbox = 'cilInbox',
-  cilIndentDecrease = 'cilIndentDecrease',
-  cilIndentIncrease = 'cilIndentIncrease',
-  cilItalic = 'cilItalic',
-  cilJustifyCenter = 'cilJustifyCenter',
-  cilLayers = 'cilLayers',
-  cilList = 'cilList',
-  cilListNumbered = 'cilListNumbered',
-  cilLocationPin = 'cilLocationPin',
-  cilLockLocked = 'cilLockLocked',
-  cilMagnifyingGlass = 'cilMagnifyingGlass',
-  cilMap = 'cilMap',
-  cilMediaPlay = 'cilMediaPlay',
-  cilMenu = 'cilMenu',
-  cilMoon = 'cilMoon',
-  cilNotes = 'cilNotes',
-  cilOptions = 'cilOptions',
-  cilPaperclip = 'cilPaperclip',
-  cilPaperPlane = 'cilPaperPlane',
-  cilPen = 'cilPen',
-  cilPencil = 'cilPencil',
-  cilPeople = 'cilPeople',
-  cilPrint = 'cilPrint',
-  cilPuzzle = 'cilPuzzle',
-  cilReportSlash = 'cilReportSlash',
-  cilSave = 'cilSave',
-  cilSettings = 'cilSettings',
-  cilShare = 'cilShare',
-  cilShareAll = 'cilShareAll',
-  cilShareBoxed = 'cilShareBoxed',
-  cilSpeech = 'cilSpeech',
-  cilSpeedometer = 'cilSpeedometer',
-  cilSpreadsheet = 'cilSpreadsheet',
-  cilStar = 'cilStar',
-  cilSun = 'cilSun',
-  cilTags = 'cilTags',
-  cilTask = 'cilTask',
-  cilTrash = 'cilTrash',
-  cilUnderline = 'cilUnderline',
-  cilUser = 'cilUser',
-  cilUserFemale = 'cilUserFemale',
-  cilUserFollow = 'cilUserFollow',
-  cilUserUnfollow = 'cilUserUnfollow',
-}

front/app/src/app/views/base/accordion/accordions.component.html

@@ -1,121 +0,0 @@
-<c-row ngPreserveWhitespaces>
-  <c-col xs="12">
-    <app-docs-callout href="components/accordion" name="Accordion"></app-docs-callout>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Accordion</strong>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Click the accordions below to expand/collapse the accordion content.
-        </p>
-        <app-docs-example href="components/accordion">
-          <c-accordion [alwaysOpen]="false" [flush]="false" class="shadow rounded-2">
-            <c-accordion-item #item0="cAccordionItem" [visible]="false">
-              <ng-template cTemplateId="accordionHeaderTemplate">
-                <button (click)="item0.toggleItem()" [collapsed]="!item0.visible" cAccordionButton cBgColor="info">
-                  Accordion item #0
-                </button>
-              </ng-template>
-              <ng-template cTemplateId="accordionBodyTemplate">
-                <div [innerHTML]="getAccordionBodyText('first')" cBgColor="info" class="accordion-body"></div>
-              </ng-template>
-            </c-accordion-item>
-            <c-accordion-item #item1="cAccordionItem" [visible]="false">
-              <ng-template cTemplateId="accordionHeaderTemplate">
-                <button (click)="item1.toggleItem()" [collapsed]="!item1.visible" cAccordionButton>
-                  Accordion item #1
-                </button>
-              </ng-template>
-              <ng-template cTemplateId="accordionBodyTemplate">
-                <div class="accordion-body">
-                  <strong>This is the
-                    <mark>#second</mark>
-                    item accordion body.</strong> It is hidden by
-                  default, until the collapse plugin adds the appropriate classes that we use to
-                  style each element. These classes control the overall appearance, as well as
-                  the showing and hiding via CSS transitions. You can modify any of this with
-                  custom CSS or overriding our default variables. It&#39;s also worth noting
-                  that just about any HTML can go within the <code>.accordion-body</code>,
-                  though the transition does limit overflow.
-                </div>
-              </ng-template>
-            </c-accordion-item>
-            <c-accordion-item #item2="cAccordionItem" [visible]="false">
-              <ng-template cTemplateId="accordionHeaderTemplate">
-                <button (click)="item2.toggleItem()" [collapsed]="!item2.visible" cAccordionButton>
-                  Accordion item #2
-                </button>
-              </ng-template>
-              <ng-template cTemplateId="accordionBodyTemplate">
-                <div class="accordion-body">
-                  <span [innerHTML]="getAccordionBodyText('third')"></span>
-                </div>
-              </ng-template>
-            </c-accordion-item>
-          </c-accordion>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Accordion</strong> flush
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Click the accordions below to expand/collapse the accordion content.
-        </p>
-        <app-docs-example href="components/accordion#flush">
-          <c-accordion [flush]="true">
-            <c-accordion-item visible>
-              <ng-template cTemplateId="accordionHeader">
-                Accordion item #0
-              </ng-template>
-              <ng-template cTemplateId="accordionBody">
-                <span [innerHTML]="getAccordionBodyText('first')"></span>
-              </ng-template>
-            </c-accordion-item>
-            <c-accordion-item [visible]="false">
-              <ng-template cTemplateId="accordionHeader">
-                Accordion item #1
-              </ng-template>
-              <ng-template cTemplateId="accordionBody">
-                <span [innerHTML]="getAccordionBodyText('second')"></span>
-              </ng-template>
-            </c-accordion-item>
-            <c-accordion-item [visible]="false">
-              <ng-template cTemplateId="accordionHeader">
-                Accordion item #2
-              </ng-template>
-              <ng-template cTemplateId="accordionBody">
-                <span [innerHTML]="getAccordionBodyText('third')"></span>
-              </ng-template>
-            </c-accordion-item>
-          </c-accordion>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Accordion</strong> alwaysOpen
-      </c-card-header>
-      <c-card-body>
-        <app-docs-example href="components/accordion#always-open">
-          <c-accordion [alwaysOpen]="true" class="shadow accordion-custom rounded-2">
-            <c-accordion-item *ngFor="let item of items; let i = index;" [visible]="i===1">
-              <ng-template cTemplateId="accordionHeader">
-                Custom Accordion item #{{i}}
-              </ng-template>
-              <ng-template cTemplateId="accordionBody">
-                <small><i>{{i}}.</i></small>
-                <span [innerHTML]="getAccordionBodyText(i.toString())"></span>
-              </ng-template>
-            </c-accordion-item>
-          </c-accordion>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>

front/app/src/app/views/base/accordion/accordions.component.scss

@@ -1,6 +0,0 @@
-:host ::ng-deep .accordion-custom {
-  .accordion-button {
-    background-color: var(--cui-dark);
-    color: var(--cui-white);
-  }
-}

front/app/src/app/views/base/accordion/accordions.component.spec.ts

@@ -1,37 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { AccordionModule, CardModule, GridModule } from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DocsComponentsModule } from '../../../../components';
-import { AccordionsComponent } from './accordions.component';
-
-describe('AccordionsComponent', () => {
-  let component: AccordionsComponent;
-  let fixture: ComponentFixture<AccordionsComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [AccordionsComponent],
-      imports: [AccordionModule, NoopAnimationsModule, CardModule, GridModule, DocsComponentsModule, RouterTestingModule],
-      providers: [IconSetService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(AccordionsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/accordion/accordions.component.ts

@@ -1,29 +0,0 @@
-import { Component } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-
-@Component({
-  selector: 'app-accordions',
-  templateUrl: './accordions.component.html',
-  styleUrls: ['./accordions.component.scss']
-})
-export class AccordionsComponent {
-
-  items = [1, 2, 3, 4];
-
-  constructor(
-    private sanitizer: DomSanitizer
-  ) { }
-
-  getAccordionBodyText(value: string) {
-    const textSample = `
-      <strong>This is the <mark>#${value}</mark> item accordion body.</strong> It is hidden by
-      default, until the collapse plugin adds the appropriate classes that we use to
-      style each element. These classes control the overall appearance, as well as
-      the showing and hiding via CSS transitions. You can modify any of this with
-      custom CSS or overriding our default variables. It&#39;s also worth noting
-      that just about any HTML can go within the <code>.accordion-body</code>,
-      though the transition does limit overflow.
-    `;
-    return this.sanitizer.bypassSecurityTrustHtml(textSample);
-  }
-}

front/app/src/app/views/base/base-routing.module.ts

@@ -1,146 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { AccordionsComponent } from './accordion/accordions.component';
-import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
-import { CardsComponent } from './cards/cards.component';
-import { CarouselsComponent } from './carousels/carousels.component';
-import { CollapsesComponent } from './collapses/collapses.component';
-import { ListGroupsComponent } from './list-groups/list-groups.component';
-import { NavsComponent } from './navs/navs.component';
-import { PaginationsComponent } from './paginations/paginations.component';
-import { PopoversComponent } from './popovers/popovers.component';
-import { ProgressComponent } from './progress/progress.component';
-import { SpinnersComponent } from './spinners/spinners.component';
-import { TablesComponent } from './tables/tables.component';
-import { TooltipsComponent } from './tooltips/tooltips.component';
-import { TabsComponent } from './tabs/tabs.component';
-import { PlaceholdersComponent } from './placeholders/placeholders.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    data: {
-      title: 'Base',
-    },
-    children: [
-      {
-        path: '',
-        pathMatch: 'full',
-        redirectTo: 'cards',
-      },
-      {
-        path: 'accordion',
-        component: AccordionsComponent,
-        data: {
-          title: 'Accordion',
-        },
-      },
-      {
-        path: 'breadcrumbs',
-        component: BreadcrumbsComponent,
-        data: {
-          title: 'Breadcrumbs',
-        },
-      },
-      {
-        path: 'cards',
-        component: CardsComponent,
-        data: {
-          title: 'Cards',
-        },
-      },
-      {
-        path: 'carousel',
-        component: CarouselsComponent,
-        data: {
-          title: 'Carousel',
-        },
-      },
-      {
-        path: 'collapse',
-        component: CollapsesComponent,
-        data: {
-          title: 'Collapse',
-        },
-      },
-      {
-        path: 'list-group',
-        component: ListGroupsComponent,
-        data: {
-          title: 'List Group',
-        },
-      },
-      {
-        path: 'navs',
-        component: NavsComponent,
-        data: {
-          title: 'Navs & Tabs',
-        },
-      },
-      {
-        path: 'pagination',
-        component: PaginationsComponent,
-        data: {
-          title: 'Pagination',
-        },
-      },
-      {
-        path: 'placeholder',
-        component: PlaceholdersComponent,
-        data: {
-          title: 'Placeholder',
-        },
-      },
-      {
-        path: 'popovers',
-        component: PopoversComponent,
-        data: {
-          title: 'Popovers',
-        },
-      },
-      {
-        path: 'progress',
-        component: ProgressComponent,
-        data: {
-          title: 'Progress',
-        },
-      },
-      {
-        path: 'spinners',
-        component: SpinnersComponent,
-        data: {
-          title: 'Spinners',
-        },
-      },
-      {
-        path: 'tables',
-        component: TablesComponent,
-        data: {
-          title: 'Tables',
-        },
-      },
-      {
-        path: 'tabs',
-        component: TabsComponent,
-        data: {
-          title: 'Tabs',
-        },
-      },
-      {
-        path: 'tooltips',
-        component: TooltipsComponent,
-        data: {
-          title: 'Tooltips',
-        },
-      },
-    ],
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class BaseRoutingModule {}
-

front/app/src/app/views/base/base.module.ts

@@ -1,105 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-
-// CoreUI Modules
-import {
-  AccordionModule,
-  BadgeModule,
-  BreadcrumbModule,
-  ButtonModule,
-  CardModule,
-  CarouselModule,
-  CollapseModule,
-  DropdownModule,
-  FormModule,
-  GridModule,
-  ListGroupModule,
-  NavModule,
-  PaginationModule,
-  PlaceholderModule,
-  PopoverModule,
-  ProgressModule,
-  SharedModule,
-  SpinnerModule,
-  TableModule,
-  TabsModule,
-  TooltipModule,
-  UtilitiesModule
-} from '@coreui/angular';
-
-import { IconModule } from '@coreui/icons-angular';
-
-// utils
-import { DocsComponentsModule } from '@docs-components/docs-components.module';
-
-// views
-import { AccordionsComponent } from './accordion/accordions.component';
-import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
-import { CardsComponent } from './cards/cards.component';
-import { CarouselsComponent } from './carousels/carousels.component';
-import { CollapsesComponent } from './collapses/collapses.component';
-import { ListGroupsComponent } from './list-groups/list-groups.component';
-import { NavsComponent } from './navs/navs.component';
-import { PaginationsComponent } from './paginations/paginations.component';
-import { PlaceholdersComponent } from './placeholders/placeholders.component';
-import { PopoversComponent } from './popovers/popovers.component';
-import { ProgressComponent } from './progress/progress.component';
-import { SpinnersComponent } from './spinners/spinners.component';
-import { TablesComponent } from './tables/tables.component';
-import { TooltipsComponent } from './tooltips/tooltips.component';
-import { TabsComponent } from './tabs/tabs.component';
-
-// Components Routing
-import { BaseRoutingModule } from './base-routing.module';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    BaseRoutingModule,
-    AccordionModule,
-    BadgeModule,
-    BreadcrumbModule,
-    ButtonModule,
-    CardModule,
-    CollapseModule,
-    GridModule,
-    UtilitiesModule,
-    SharedModule,
-    ListGroupModule,
-    IconModule,
-    ListGroupModule,
-    PlaceholderModule,
-    ProgressModule,
-    SpinnerModule,
-    TabsModule,
-    NavModule,
-    TooltipModule,
-    CarouselModule,
-    FormModule,
-    ReactiveFormsModule,
-    DropdownModule,
-    PaginationModule,
-    PopoverModule,
-    TableModule,
-    DocsComponentsModule,
-  ],
-  declarations: [
-    AccordionsComponent,
-    BreadcrumbsComponent,
-    CardsComponent,
-    CarouselsComponent,
-    CollapsesComponent,
-    ListGroupsComponent,
-    NavsComponent,
-    PaginationsComponent,
-    PopoversComponent,
-    ProgressComponent,
-    SpinnersComponent,
-    TablesComponent,
-    TooltipsComponent,
-    TabsComponent,
-    PlaceholdersComponent,
-  ],
-})
-export class BaseModule {}

front/app/src/app/views/base/breadcrumbs/breadcrumbs.component.html

@@ -1,95 +0,0 @@
-<div class="fade-in">
-  <c-row ngPreserveWhitespaces>
-    <c-col xs="12">
-      <app-docs-callout href="components/breadcrumb" name="Breadcrumb"></app-docs-callout>
-    </c-col>
-    <c-col class="mb-4" xs="12">
-      <c-card>
-        <c-card-header>
-          <strong>Angular Breadcrumbs</strong>
-        </c-card-header>
-        <c-card-body>
-          <p class="text-medium-emphasis small">
-            The breadcrumb navigation provides links back to each previous page the user navigated
-            through and shows the current location in a website or an application. You don’t have
-            to add separators, because they automatically added in CSS through
-            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">
-              <code>::before</code>
-            </a>
-            and
-            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">
-              <code>content</code>
-            </a>
-            .
-          </p>
-          <app-docs-example href="components/breadcrumb">
-            <c-breadcrumb class="mb-2">
-              <c-breadcrumb-item *ngFor="let item of items; index as i; last as isLast"
-                                 [active]="isLast"
-                                 [url]="item.url">
-                {{item.label}}
-              </c-breadcrumb-item>
-            </c-breadcrumb>
-            <hr>
-            <c-breadcrumb class="mb-2">
-              <c-breadcrumb-item *ngFor="let item of items.slice(0,1); index as i; last as isLast"
-                                 [active]="isLast"
-                                 [url]="item.url">
-                {{item.label}}
-              </c-breadcrumb-item>
-            </c-breadcrumb>
-            <c-breadcrumb class="mb-2">
-              <c-breadcrumb-item *ngFor="let item of items.slice(0,2); index as i; last as isLast"
-                                 [active]="isLast"
-                                 [url]="item.url">
-                {{item.label}}
-              </c-breadcrumb-item>
-            </c-breadcrumb>
-            <c-breadcrumb class="mb-2">
-              <c-breadcrumb-item *ngFor="let item of items.slice(0,3); index as i; last as isLast"
-                                 [active]="isLast"
-                                 [url]="item.url">
-                {{item.label}}
-              </c-breadcrumb-item>
-            </c-breadcrumb>
-            <c-breadcrumb class="mb-2">
-              <c-breadcrumb-item *ngFor="let item of items.slice(0,4); index as i; last as isLast"
-                                 [active]="isLast"
-                                 [url]="item.url">
-                <span [ngClass]="{'mark': isLast}">{{item.label}}</span>
-              </c-breadcrumb-item>
-            </c-breadcrumb>
-            <hr>
-            <c-breadcrumb class="mb-0">
-              <c-breadcrumb-item url="/">
-                Home
-              </c-breadcrumb-item>
-              <c-breadcrumb-item url="/">
-                Library
-              </c-breadcrumb-item>
-              <c-breadcrumb-item url="/">
-                Data
-              </c-breadcrumb-item>
-              <c-breadcrumb-item [active]="true">
-                Bootstrap
-              </c-breadcrumb-item>
-            </c-breadcrumb>
-          </app-docs-example>
-        </c-card-body>
-      </c-card>
-    </c-col>
-    <c-col xs="12">
-      <c-card>
-        <c-card-header>
-          <strong>Angular Breadcrumbs</strong> <small>router</small>
-        </c-card-header>
-        <c-card-body>
-          <app-docs-example href="components/breadcrumb#router">
-            <c-breadcrumb-router></c-breadcrumb-router>
-            <c-breadcrumb-router [items]="items"></c-breadcrumb-router>
-          </app-docs-example>
-        </c-card-body>
-      </c-card>
-    </c-col>
-  </c-row>
-</div>

front/app/src/app/views/base/breadcrumbs/breadcrumbs.component.spec.ts

@@ -1,35 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { BreadcrumbModule, CardModule, GridModule } from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DocsComponentsModule } from '../../../../components';
-import { BreadcrumbsComponent } from './breadcrumbs.component';
-
-describe('BreadcrumbsComponent', () => {
-  let component: BreadcrumbsComponent;
-  let fixture: ComponentFixture<BreadcrumbsComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [BreadcrumbsComponent],
-      imports: [CardModule, GridModule, BreadcrumbModule, RouterTestingModule, DocsComponentsModule],
-      providers: [IconSetService]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(BreadcrumbsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/breadcrumbs/breadcrumbs.component.ts

@@ -1,29 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  templateUrl: './breadcrumbs.component.html',
-  styleUrls: ['./breadcrumbs.component.scss']
-})
-export class BreadcrumbsComponent implements OnInit {
-  public items = <any>[];
-
-  constructor() {}
-
-  ngOnInit(): void {
-    this.items = [
-      { label: 'Home', url: '/', attributes: { title: 'Home' } },
-      { label: 'Library', url: '/' },
-      { label: 'Data', url: '/dashboard/' },
-      { label: 'CoreUI', url: '/' }
-    ];
-
-    setTimeout(() => {
-      this.items = [
-        { label: 'CoreUI', url: '/' },
-        { label: 'Data', url: '/dashboard/' },
-        { label: 'Library', url: '/' },
-        { label: 'Home', url: '/', attributes: { title: 'Home' } }
-      ];
-    }, 5000);
-  }
-}

front/app/src/app/views/base/cards/cards.component.html

@@ -1,864 +0,0 @@
-<c-row ngPreserveWhitespaces>
-  <c-col xs="12">
-    <app-docs-callout href="components/card" name="Card"></app-docs-callout>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Card</strong>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Cards are built with as little markup and styles as possible but still
-          manage to deliver a bunch of control and customization. Built with
-          flexbox, they offer easy alignment and mix well with other CoreUI
-          components. Cards have no top, left, and right margins by default, so
-          use
-          <a href="https://coreui.io/docs/utilities/spacing"
-          >spacing utilities</a
-          >
-          as needed. They have no fixed width to start, so they&#39;ll fill the
-          full width of its parent.
-        </p>
-        <p class="text-medium-emphasis small">
-          Below is an example of a basic card with mixed content and a fixed
-          width. Cards have no fixed width to start, so they&#39;ll naturally
-          fill the full width of its parent element.
-        </p>
-        <app-docs-example href="components/card">
-          <c-card style="width: 18rem;">
-            <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-            <c-card-body>
-              <h5 cCardTitle>Card title</h5>
-              <p cCardText>
-                Some quick example text to build on the card title and make up the bulk of the card's content.
-              </p>
-              <button cButton color="primary">Go somewhere</button>
-            </c-card-body>
-          </c-card>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Card</strong> <small>Body</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          The main block of a card is the <code>&lt;c-card-body&gt;</code>. Use
-          it whenever you need a padded section within a card.
-        </p>
-        <app-docs-example href="components/card/#body">
-          <c-card style="width: 18rem;">
-            <c-card-body>This is some text within a card body.</c-card-body>
-          </c-card>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Card</strong> <small>Titles, text, and links</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Card titles are managed by <code>cCardTitle</code> directive for
-          <code>&lt;h*&gt;</code>. Identically, links are attached and collected
-          next to each other by <code>cCardLink</code> directive for
-          <code>&lt;a&gt;</code> tag. Subtitles are handled by
-          <code>cCardSubtitle</code> directive.
-        </p>
-        <p class="text-medium-emphasis small">
-          Store <code>cCardTitle</code> and the <code>cCardSubtitle</code> items
-          in a <code>&lt;c-card-body&gt;</code>. The card title, and subtitle
-          are arranged properly.
-        </p>
-        <app-docs-example href="components/card/#body">
-          <c-card style="width: 18rem;">
-            <c-card-body>
-              <h5 cCardTitle>Card title</h5>
-              <h6 cCardSubtitle class="mb-2 text-medium-emphasis">
-                Card subtitle
-              </h6>
-              <p cCardText>
-                Some quick example text to build on the card title and make up the
-                bulk of the card content.
-              </p>
-              <a cCardLink>Card link</a>
-              <a cCardLink>Another link</a>
-            </c-card-body>
-          </c-card>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Card</strong> <small>Images</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          <code>cCardImg="top"</code> places a picture to the top of the card.
-          With <code>cCardText</code>, text can be added to the card. Text
-          within <code>cCardText</code> can additionally be styled with the
-          regular HTML tags.
-        </p>
-        <app-docs-example href="components/card/#images">
-          <c-card style="width: 18rem;">
-            <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-            <c-card-body>
-              <p cCardText>
-                Some quick example <strong>text</strong> to build on the card
-                title and make up the bulk of the card content.
-              </p>
-            </c-card-body>
-          </c-card>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Card</strong> <small>list groups</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Create lists of content in a card with a flush list group.
-        </p>
-        <app-docs-example href="components/card/#list-groups">
-          <c-row>
-            <c-col lg="4">
-              <c-card>
-                <ul [flush]="true" cListGroup>
-                  <li cListGroupItem>Cras justo odio</li>
-                  <li cListGroupItem>Dapibus ac facilisis in</li>
-                  <li cListGroupItem>Vestibulum at eros</li>
-                </ul>
-              </c-card>
-            </c-col>
-            <c-col lg="4">
-              <c-card>
-                <c-card-header>Header</c-card-header>
-                <ul [flush]="true" cListGroup>
-                  <li cListGroupItem>Cras justo odio</li>
-                  <li cListGroupItem>Dapibus ac facilisis in</li>
-                  <li cListGroupItem>Vestibulum at eros</li>
-                </ul>
-              </c-card>
-            </c-col>
-            <c-col lg="4">
-              <c-card>
-                <ul [flush]="true" cListGroup>
-                  <li cListGroupItem>Cras justo odio</li>
-                  <li cListGroupItem>Dapibus ac facilisis in</li>
-                  <li cListGroupItem>Vestibulum at eros</li>
-                </ul>
-                <c-card-footer>Footer</c-card-footer>
-              </c-card>
-            </c-col>
-          </c-row>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Card</strong> <small>kitchen sink</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Combine and match many content types to build the card you need, or
-          throw everything in there. Shown below are image styles, blocks, text
-          styles, and a list group—all wrapped in a fixed-width card.
-        </p>
-        <app-docs-example href="components/card/#kitchen-sink">
-          <c-card style="width: 18rem;">
-            <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-            <c-card-body>
-              <h5 cCardTitle>Card title</h5>
-              <p cCardText>
-                Some quick example text to build on the card title and make up the
-                bulk of the card content.
-              </p>
-            </c-card-body>
-            <ul [flush]="true" cListGroup>
-              <li cListGroupItem>Cras justo odio</li>
-              <li cListGroupItem>Dapibus ac facilisis in</li>
-              <li cListGroupItem>Vestibulum at eros</li>
-            </ul>
-            <c-card-body>
-              <a cCardLink>Card link</a>
-              <a cCardLink>Another link</a>
-            </c-card-body>
-          </c-card>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Card</strong> <small>Header and footer</small>
-      </c-card-header>
-      <c-card-body>
-        <c-row>
-          <c-col>
-            <p class="text-medium-emphasis small">
-              Add an optional header and/or footer within a card.
-            </p>
-            <app-docs-example href="components/card/#header-and-footer">
-              <c-card class="mb-4">
-                <c-card-header>Header</c-card-header>
-                <c-card-body>
-                  <ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
-                </c-card-body>
-              </c-card>
-            </app-docs-example>
-          </c-col>
-          <c-col>
-            <p class="text-medium-emphasis small">
-              Card headers can be styled by adding ex.
-              <code>&#34;h5&#34;</code>.
-            </p>
-            <app-docs-example href="components/card/#header-and-footer">
-              <c-card class="mb-4">
-                <c-card-header>
-                  <h5>Header</h5>
-                </c-card-header>
-                <c-card-body>
-                  <ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
-                </c-card-body>
-              </c-card>
-            </app-docs-example>
-          </c-col>
-        </c-row>
-        <c-row>
-          <c-col>
-            <app-docs-example href="components/card/#header-and-footer">
-              <c-card class="mb-4">
-                <c-card-header>Quote</c-card-header>
-                <c-card-body>
-                  <blockquote class="blockquote mb-0">
-                    <p>
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                      Integer posuere erat a ante.
-                    </p>
-                    <footer class="blockquote-footer">
-                      Someone famous in
-                      <cite title="Source Title">Source Title</cite>
-                    </footer>
-                  </blockquote>
-                </c-card-body>
-              </c-card>
-            </app-docs-example>
-          </c-col>
-          <c-col>
-            <app-docs-example href="components/card/#header-and-footer">
-              <c-card class="text-center mb-4">
-                <c-card-header>Header</c-card-header>
-                <c-card-body>
-                  <ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
-                </c-card-body>
-                <c-card-footer class="text-medium-emphasis"
-                >2 days ago
-                </c-card-footer
-                >
-              </c-card>
-            </app-docs-example>
-          </c-col>
-        </c-row>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Card</strong> <small>Sizing</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Cards assume no specific <code>width</code> to start, so they&#39;ll
-          be 100% wide unless otherwise stated. You can adjust this as required
-          with custom CSS, grid classes, grid Sass mixins, or services.
-        </p>
-        <h3>Using grid markup</h3>
-        <p class="text-medium-emphasis small">
-          Using the grid, wrap cards in columns and rows as needed.
-        </p>
-        <app-docs-example href="components/card/#sizing">
-          <c-row>
-            <c-col sm="6">
-              <c-card class="mb-4">
-                <c-card-body>
-                  <ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
-                </c-card-body>
-              </c-card>
-            </c-col>
-            <c-col sm="6">
-              <c-card class="mb-4">
-                <c-card-body>
-                  <ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
-                </c-card-body>
-              </c-card>
-            </c-col>
-          </c-row>
-        </app-docs-example>
-        <h3>Using utilities</h3>
-        <p class="text-medium-emphasis small">
-          Use some of
-          <a href="https://coreui.io/docs/utilities/sizing/"
-          >available sizing utilities</a
-          >
-          to rapidly set a card width.
-        </p>
-        <app-docs-example href="components/card/#sizing">
-          <c-card class="w-75 mb-4">
-            <c-card-body>
-              <ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
-            </c-card-body>
-          </c-card>
-          <c-card class="w-50 mb-4">
-            <c-card-body>
-              <ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
-            </c-card-body>
-          </c-card>
-        </app-docs-example>
-        <strong>Using custom CSS</strong>
-        <p class="text-medium-emphasis small">
-          Use custom CSS in your stylesheets or as inline styles to set a width.
-        </p>
-        <app-docs-example href="components/card/#sizing">
-          <c-card class="mb-4" style="width: 18rem;">
-            <c-card-body>
-              <ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
-            </c-card-body>
-          </c-card>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Card</strong> <small>Text alignment</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          You can instantly change the text arrangement of any card—in its whole
-          or specific parts—with
-          <a href="https://coreui.io/docs/utilities/text/#text-alignment"
-          >text align</a
-          >
-          classes.
-        </p>
-        <app-docs-example href="components/card/#text-alignment">
-          <c-row>
-            <c-col>
-              <c-card class="mb-4">
-                <c-card-body>
-                  <ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
-                </c-card-body>
-              </c-card>
-            </c-col>
-            <c-col>
-              <c-card class="text-center mb-4">
-                <c-card-body>
-                  <ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
-                </c-card-body>
-              </c-card>
-            </c-col>
-            <c-col>
-              <c-card class="text-end mb-4">
-                <c-card-body>
-                  <ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
-                </c-card-body>
-              </c-card>
-            </c-col>
-          </c-row>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Card</strong> <small>Navigation</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Add some navigation to a <code>&lt;c-card-header&gt;</code> with our
-          <code>&lt;c-nav&gt;</code> component.
-        </p>
-        <c-row>
-          <c-col>
-            <app-docs-example href="components/card/##navigation">
-              <c-card class="text-center mb-4">
-                <c-card-header>
-                  <c-nav class="card-header-tabs" variant="tabs">
-                    <c-nav-item>
-                      <a [active]="true" cNavLink routerLink="./">
-                        Active
-                      </a>
-                    </c-nav-item>
-                    <c-nav-item>
-                      <a cNavLink routerLink="./">Link</a>
-                    </c-nav-item>
-                    <c-nav-item>
-                      <a cNavLink disabled routerLink="./">
-                        Disabled
-                      </a>
-                    </c-nav-item>
-                  </c-nav>
-                </c-card-header>
-                <c-card-body>
-                  <ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
-                </c-card-body>
-              </c-card>
-            </app-docs-example>
-          </c-col>
-          <c-col>
-            <app-docs-example href="components/card/##navigation">
-              <c-card class="text-center mb-4">
-                <c-card-header>
-                  <c-nav class="card-header-pills" variant="pills">
-                    <c-nav-item>
-                      <a [active]="true" cNavLink routerLink="./">
-                        Active
-                      </a>
-                    </c-nav-item>
-                    <c-nav-item>
-                      <a cNavLink routerLink="./">Link</a>
-                    </c-nav-item>
-                    <c-nav-item>
-                      <a cNavLink disabled routerLink="./">
-                        Disabled
-                      </a>
-                    </c-nav-item>
-                  </c-nav>
-                </c-card-header>
-                <c-card-body>
-                  <ng-container *ngTemplateOutlet="cardBodyTemplate"></ng-container>
-                </c-card-body>
-              </c-card>
-            </app-docs-example>
-          </c-col>
-        </c-row>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Card</strong> <small>Image caps</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Similar to headers and footers, cards can include top and bottom &#34;image
-          caps&#34;—images at the top or bottom of a card.
-        </p>
-        <app-docs-example href="components/card/#image-caps">
-          <c-row>
-            <c-col lg="6">
-              <c-card class="mb-3">
-                <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-                <c-card-body>
-                  <h5 cCardTitle>Card title</h5>
-                  <p cCardText>
-                    This is a wider card with supporting text below as a natural lead-in to
-                    additional content. This content is a little bit longer.
-                  </p>
-                  <p cCardText>
-                    <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-                  </p>
-                </c-card-body>
-              </c-card>
-            </c-col>
-            <c-col lg="6">
-              <c-card class="mb-3">
-                <c-card-body>
-                  <h5 cCardTitle>Card title</h5>
-                  <p cCardText>
-                    This is a wider card with supporting text below as a natural lead-in to
-                    additional content. This content is a little bit longer.
-                  </p>
-                  <p cCardText>
-                    <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-                  </p>
-                </c-card-body>
-                <ng-container *ngTemplateOutlet="imgPlaceholderTemplate; context: {$implicit: 'bottom'}"></ng-container>
-              </c-card>
-            </c-col>
-          </c-row>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Card</strong> <small>Styles</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Cards include various options for customizing their backgrounds, borders, and color.
-        </p>
-        <h3>Background and color</h3>
-        <p class="text-medium-emphasis small">
-          Use <code>color</code> property to change the appearance of a card.
-        </p>
-        <app-docs-example href="components/card/#background-and-color">
-          <c-row>
-            <c-col *ngFor="let item of colors; index as i" lg="4">
-              <c-card [color]="item.color"
-                      [textColor]="item.color === 'warning' || item.color === 'light' ? '' :  'white'"
-                      class="mb-3">
-                <c-card-header>Header</c-card-header>
-                <c-card-body class="bg">
-                  <h5 cCardTitle>{{item.color}} card title</h5>
-                  <p cCardText>
-                    Some quick example text to build on the card title and make up the bulk of
-                    the card&#39;s content.
-                  </p>
-                  <button [color]="item.color" cButton class="shadow">Go somewhere</button>
-                </c-card-body>
-              </c-card>
-            </c-col>
-          </c-row>
-        </app-docs-example>
-        <h3>Border</h3>
-        <p class="text-medium-emphasis small">
-          Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
-          just the <code>border-color</code> of a card. Note that you can set
-          <code>textColor</code> property on the <code>&lt;c-card&gt;</code> or a subset of the
-          card&#39;s contents as shown below.
-        </p>
-        <app-docs-example href="components/card/#border">
-          <c-row>
-            <c-col *ngFor="let item of colors; index as i" lg="4">
-              <c-card [cBorder]="item.color" [textColor]="item.textColor" class="mb-3">
-                <c-card-header>Header</c-card-header>
-                <c-card-body>
-                  <h5 cCardTitle>{{item.color}} card title</h5>
-                  <p cCardText>
-                    Some quick example text to build on the card title and make up the bulk of
-                    the card&#39;s content.
-                  </p>
-                  <button [color]="item.color" cButton>Go somewhere</button>
-                </c-card-body>
-              </c-card>
-            </c-col>
-          </c-row>
-        </app-docs-example>
-        <h3>Top border</h3>
-        <p class="text-medium-emphasis small">
-          Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
-          just the <code>border-color</code> of a card. Note that you can set
-          <code>textColor</code> property on the <code>&lt;c-card&gt;</code> or a subset of the
-          card&#39;s contents as shown below.
-        </p>
-        <app-docs-example href="components/card/#top-border">
-          <c-row>
-            <c-col *ngFor="let item of colors; index as i" lg="4">
-              <c-card [cBorder]="{top: {color: item.color, width: 3}}" [textColor]="item.textColor" class="mb-3">
-                <c-card-header>Header</c-card-header>
-                <c-card-body>
-                  <h5 cCardTitle>{{item.color}} card title</h5>
-                  <p cCardText>
-                    Some quick example text to build on the card title and make up the bulk of
-                    the card&#39;s content.
-                  </p>
-                  <button [color]="item.color" cButton>Go somewhere</button>
-                </c-card-body>
-              </c-card>
-            </c-col>
-          </c-row>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <!--***-->
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Card</strong> <small>Card groups</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Use card groups to render cards as a single, attached element with equal width and
-          height columns. Card groups start off stacked and use <code>display: flex;</code> to
-          become attached with uniform dimensions starting at the <code>sm</code> breakpoint.
-        </p>
-        <app-docs-example href="components/card/#card-groups">
-          <c-card-group class="mb-4">
-            <c-card>
-              <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-              <c-card-body>
-                <h5 cCardTitle>Card title</h5>
-                <p cCardText>
-                  This is a wider card with supporting text below as a natural lead-in to
-                  additional content. This content is a little bit longer.
-                </p>
-                <p cCardText>
-                  <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-                </p>
-              </c-card-body>
-            </c-card>
-            <c-card>
-              <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-              <c-card-body>
-                <h5 cCardTitle>Card title</h5>
-                <p cCardText>
-                  This card has supporting text below as a natural lead-in to additional
-                  content.
-                </p>
-                <p cCardText>
-                  <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-                </p>
-              </c-card-body>
-            </c-card>
-            <c-card>
-              <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-              <c-card-body>
-                <h5 cCardTitle>Card title</h5>
-                <p cCardText>
-                  This is a wider card with supporting text below as a natural lead-in to
-                  additional content. This card has even longer content than the first to show
-                  that equal height action.
-                </p>
-                <p cCardText>
-                  <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-                </p>
-              </c-card-body>
-            </c-card>
-          </c-card-group>
-        </app-docs-example>
-        <p class="text-medium-emphasis small">
-          When using card groups with footers, their content will automatically line up.
-        </p>
-        <app-docs-example href="components/card/#card-groups">
-          <c-card-group class="mb-4">
-            <c-card>
-              <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-              <c-card-body>
-                <h5 cCardTitle>Card title</h5>
-                <p cCardText>
-                  This is a wider card with supporting text below as a natural lead-in to
-                  additional content. This content is a little bit longer.
-                </p>
-              </c-card-body>
-              <c-card-footer>
-                <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-              </c-card-footer>
-            </c-card>
-            <c-card>
-              <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-              <c-card-body>
-                <h5 cCardTitle>Card title</h5>
-                <p cCardText>
-                  This card has supporting text below as a natural lead-in to additional
-                  content.
-                </p>
-              </c-card-body>
-              <c-card-footer>
-                <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-              </c-card-footer>
-            </c-card>
-            <c-card>
-              <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-              <c-card-body>
-                <h5 cCardTitle>Card title</h5>
-                <p cCardText>
-                  This is a wider card with supporting text below as a natural lead-in to
-                  additional content. This card has even longer content than the first to show
-                  that equal height action.
-                </p>
-              </c-card-body>
-              <c-card-footer>
-                <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-              </c-card-footer>
-            </c-card>
-          </c-card-group>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Card</strong> <small>Grid cards</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Use the <code>c-row</code> component and set <code>xs|sm|md|lg|xl|xxl</code> property
-          to control how many grid columns (wrapped around your cards) you show per row. For
-          example <code>xs="1"</code> laying out the cards on one column, and <code>md="1"</code> splitting
-          four cards to equal width across multiple rows, from the medium breakpoint up.
-        </p>
-        <app-docs-example href="components/card/#grid-cards">
-          <c-row [gutter]="{g: 4}" class="mb-3" [md]="2" [xs]="1">
-            <c-col>
-              <c-card>
-                <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-                <c-card-body>
-                  <h5 cCardTitle>Card title</h5>
-                  <p cCardText>
-                    This is a wider card with supporting text below as a natural lead-in to
-                    additional content. This content is a little bit longer.
-                  </p>
-                </c-card-body>
-                <c-card-footer>
-                  <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-                </c-card-footer>
-              </c-card>
-            </c-col>
-            <c-col>
-              <c-card>
-                <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-                <c-card-body>
-                  <h5 cCardTitle>Card title</h5>
-                  <p cCardText>
-                    This is a wider card with supporting text below as a natural lead-in to
-                    additional content. This content is a little bit longer.
-                  </p>
-                </c-card-body>
-                <c-card-footer>
-                  <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-                </c-card-footer>
-              </c-card>
-            </c-col>
-            <c-col>
-              <c-card>
-                <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-                <c-card-body>
-                  <h5 cCardTitle>Card title</h5>
-                  <p cCardText>
-                    This is a wider card with supporting text below as a natural lead-in to
-                    additional content. This content is a little bit longer.
-                  </p>
-                </c-card-body>
-                <c-card-footer>
-                  <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-                </c-card-footer>
-              </c-card>
-            </c-col>
-            <c-col>
-              <c-card>
-                <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-                <c-card-body>
-                  <h5 cCardTitle>Card title</h5>
-                  <p cCardText>
-                    This is a wider card with supporting text below as a natural lead-in to
-                    additional content. This content is a little bit longer.
-                  </p>
-                </c-card-body>
-                <c-card-footer>
-                  <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-                </c-card-footer>
-              </c-card>
-            </c-col>
-          </c-row>
-        </app-docs-example>
-        <p class="text-medium-emphasis small">
-          Change it to <code>md="3"</code> and you'll see the fourth card wraps.
-        </p>
-        <app-docs-example href="components/card/#grid-cards">
-          <c-row [gutter]="{g: 4}" [md]="3" [xs]="1">
-            <c-col>
-              <c-card>
-                <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-                <c-card-body>
-                  <h5 cCardTitle>Card title</h5>
-                  <p cCardText>
-                    This is a wider card with supporting text below as a natural lead-in to
-                    additional content. This content is a little bit longer.
-                  </p>
-                </c-card-body>
-                <c-card-footer>
-                  <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-                </c-card-footer>
-              </c-card>
-            </c-col>
-            <c-col>
-              <c-card>
-                <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-                <c-card-body>
-                  <h5 cCardTitle>Card title</h5>
-                  <p cCardText>
-                    This is a wider card with supporting text below as a natural lead-in to
-                    additional content. This content is a little bit longer.
-                  </p>
-                </c-card-body>
-                <c-card-footer>
-                  <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-                </c-card-footer>
-              </c-card>
-            </c-col>
-            <c-col>
-              <c-card>
-                <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-                <c-card-body>
-                  <h5 cCardTitle>Card title</h5>
-                  <p cCardText>
-                    This is a wider card with supporting text below as a natural lead-in to
-                    additional content. This content is a little bit longer.
-                  </p>
-                </c-card-body>
-                <c-card-footer>
-                  <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-                </c-card-footer>
-              </c-card>
-            </c-col>
-            <c-col>
-              <c-card>
-                <ng-container *ngTemplateOutlet="imgPlaceholderTemplate"></ng-container>
-                <c-card-body>
-                  <h5 cCardTitle>Card title</h5>
-                  <p cCardText>
-                    This is a wider card with supporting text below as a natural lead-in to
-                    additional content. This content is a little bit longer.
-                  </p>
-                </c-card-body>
-                <c-card-footer>
-                  <small class="text-medium-emphasis">Last updated 3 mins ago</small>
-                </c-card-footer>
-              </c-card>
-            </c-col>
-          </c-row>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>
-
-
-<ng-template #imgPlaceholderTemplate let-orientation>
-  <svg
-    [cCardImg]="orientation ?? 'top'"
-    aria-label="Placeholder: Image cap"
-    class="docs-placeholder-img"
-    focusable="false"
-    height="180"
-    preserveAspectRatio="xMidYMid slice"
-    role="img"
-    width="100%"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <title>Placeholder</title>
-    <rect fill="#868e96" height="100%" width="100%"></rect>
-    <text dominant-baseline="middle" dy=".3em" fill="#dee2e6" text-anchor="middle" x="50%" y="50%">Image cap</text>
-  </svg>
-</ng-template>
-
-<ng-template #cardBodyTemplate>
-  <h5 cCardTitle>Card title</h5>
-  <p cCardText>
-    Some quick example text to build on the card title and make up the bulk of the card's content.
-  </p>
-  <button cButton color="primary">Go somewhere</button>
-</ng-template>

front/app/src/app/views/base/cards/cards.component.spec.ts

@@ -1,36 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { ButtonModule, CardModule, GridModule, ListGroupModule, NavModule, UtilitiesModule } from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DocsComponentsModule } from '../../../../components';
-import { CardsComponent } from './cards.component';
-
-describe('CardsComponent', () => {
-  let component: CardsComponent;
-  let fixture: ComponentFixture<CardsComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [CardsComponent],
-      imports: [CardModule, NavModule, GridModule, ListGroupModule, UtilitiesModule, ButtonModule, DocsComponentsModule, RouterTestingModule],
-      providers: [IconSetService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(CardsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/cards/cards.component.ts

@@ -1,25 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-cards',
-  templateUrl: './cards.component.html',
-  styleUrls: ['./cards.component.scss']
-})
-export class CardsComponent {
-
-  colors = [
-    { color: 'primary', textColor: 'primary' },
-    { color: 'secondary', textColor: 'secondary' },
-    { color: 'success', textColor: 'success' },
-    { color: 'danger', textColor: 'danger' },
-    { color: 'warning', textColor: 'warning' },
-    { color: 'info', textColor: 'info' },
-    { color: 'light' },
-    { color: 'dark' }
-  ];
-
-  imgContext = { $implicit: 'top', bottom: 'bottom' };
-
-  constructor() { }
-
-}

front/app/src/app/views/base/carousels/carousels.component.html

@@ -1,227 +0,0 @@
-<div class="fade-in">
-  <c-row ngPreserveWhitespaces>
-    <c-col xs="12">
-      <app-docs-callout href="components/carousel" name="Carousel"></app-docs-callout>
-    </c-col>
-    <c-col xs="12">
-      <c-card class="mb-4">
-        <c-card-header>
-          <strong>Angular Carousel</strong> <small>Slide only</small>
-        </c-card-header>
-        <c-card-body>
-          <p class="text-medium-emphasis small">Here’s a carousel with slides</p>
-          <app-docs-example href="components/carousel">
-            <c-carousel (itemChange)="onItemChange($event)" [interval]="7000" transition="slide">
-              <c-carousel-inner>
-                <c-carousel-item *ngFor="let slide of slides[0]">
-                  <img
-                    [src]="slide.src"
-                    alt="{{slide.title}}"
-                    class="d-block w-100"
-                    loading="lazy"
-                  />
-                </c-carousel-item>
-              </c-carousel-inner>
-            </c-carousel>
-          </app-docs-example>
-        </c-card-body>
-      </c-card>
-    </c-col>
-    <c-col xs="12">
-      <c-card class="mb-4">
-        <c-card-header>
-          <strong>Angular Carousel</strong> <small>with controls</small>
-        </c-card-header>
-        <c-card-body>
-          <p class="text-medium-emphasis small">
-            Adding in the previous and next controls with <code>c-carousel-controls</code> component.
-          </p>
-          <app-docs-example href="components/carousel/#with-controls">
-            <c-carousel (itemChange)="onItemChange($event)" [interval]="0">
-              <c-carousel-inner>
-                <c-carousel-item *ngFor="let slide of slides[0]">
-                  <img
-                    [src]="slide.src"
-                    alt="{{slide.title}}"
-                    class="d-block w-100"
-                    loading="lazy"
-                  />
-                </c-carousel-item>
-              </c-carousel-inner>
-              <c-carousel-control [routerLink]="[]" caption="Previous" direction="prev" i18n-caption></c-carousel-control>
-              <c-carousel-control [routerLink]="[]" caption="Next" direction="next" i18n-caption></c-carousel-control>
-            </c-carousel>
-          </app-docs-example>
-        </c-card-body>
-      </c-card>
-    </c-col>
-    <c-col xs="12">
-      <c-card class="mb-4">
-        <c-card-header>
-          <strong>Angular Carousel</strong> <small>with custom controls</small>
-        </c-card-header>
-        <c-card-body>
-          <p class="text-medium-emphasis small">
-            Adding in the previous and next controls with custom content of <code>c-carousel-controls</code> component.
-            <app-docs-example href="components/carousel/#with-controls">
-              <c-carousel (itemChange)="onItemChange($event)" [interval]="0">
-                <c-carousel-inner>
-                  <c-carousel-item *ngFor="let slide of slides[0]">
-                    <img
-                      [src]="slide.src"
-                      alt="{{slide.title}}"
-                      class="d-block w-100"
-                      loading="lazy"
-                    />
-                  </c-carousel-item>
-                </c-carousel-inner>
-                <c-carousel-control [tabIndex]="0" direction="prev">
-                  <svg cIcon name="cil-chevron-left" size="3xl"></svg>
-                  <span class="visually-hidden">Previous</span>
-                </c-carousel-control>
-                <c-carousel-control [tabIndex]="0" direction="next">
-                  <svg cIcon name="cil-chevron-right" size="3xl"></svg>
-                  <span class="visually-hidden">Next</span>
-                </c-carousel-control>
-              </c-carousel>
-            </app-docs-example>
-        </c-card-body>
-      </c-card>
-    </c-col>
-    <c-col xs="12">
-      <c-card class="mb-4">
-        <c-card-header>
-          <strong>Angular Carousel</strong> <small>with indicators</small>
-        </c-card-header>
-        <c-card-body>
-          <p class="text-medium-emphasis small">
-            You can attach the indicators to the carousel, lengthwise the controls, too.
-          </p>
-          <app-docs-example href="components/carousel/#with-indicators">
-            <c-carousel (itemChange)="onItemChange($event)" [activeIndex]="1" [dark]="true" [interval]="5000"
-                        direction="prev">
-              <c-carousel-indicators></c-carousel-indicators>
-              <c-carousel-inner>
-                <c-carousel-item *ngFor="let slide of slides[0]">
-                  <img
-                    [src]="slide.src"
-                    alt="{{slide.title}}"
-                    class="d-block w-100"
-                    loading="lazy"
-                  />
-                </c-carousel-item>
-              </c-carousel-inner>
-            </c-carousel>
-          </app-docs-example>
-        </c-card-body>
-      </c-card>
-    </c-col>
-    <c-col xs="12">
-      <c-card class="mb-4">
-        <c-card-header>
-          Carousel with captions, controls and indicators
-        </c-card-header>
-        <c-card-body>
-          <p class="text-medium-emphasis small">
-            You can add captions to slides with the <code>&lt;c-carousel-caption&gt;</code> element
-            within any <code>&lt;c-carousel-item&gt;</code>. They can be immediately hidden on
-            smaller viewports, as shown below, with optional <a href="https://coreui.io/4.0/utilities/display">display
-            utilities</a>.
-            We hide them with <code>.d-none</code> and draw them back on medium-sized devices with
-            <code>.d-md-block</code>.
-          </p>
-          <app-docs-example href="components/carousel/#with-captions">
-            <c-carousel (itemChange)="onItemChange($event)" [interval]="3000" transition="slide" [wrap]="false">
-              <c-carousel-indicators></c-carousel-indicators>
-              <c-carousel-inner>
-                <c-carousel-item *ngFor="let slide of slides[1]">
-                  <img
-                    alt="{{slide.title}}"
-                    class="d-block w-100"
-                    loading="lazy"
-                    src="{{slide.src}}"
-                  />
-                  <c-carousel-caption class="d-none d-md-block">
-                    <h3>{{slide.title}}</h3>
-                    <p>{{slide.subtitle}}</p>
-                  </c-carousel-caption>
-                </c-carousel-item>
-              </c-carousel-inner>
-              <c-carousel-control [routerLink]="[]" caption="Previous" direction="prev" i18n-caption></c-carousel-control>
-              <c-carousel-control [routerLink]="[]" caption="Next" direction="next" i18n-caption></c-carousel-control>
-            </c-carousel>
-          </app-docs-example>
-        </c-card-body>
-      </c-card>
-    </c-col>
-    <c-col xs="12">
-      <c-card class="mb-4">
-        <c-card-header>
-          <strong>Angular Carousel</strong> <small>Crossfade</small>
-        </c-card-header>
-        <c-card-body>
-          <p class="text-medium-emphasis small">
-            Add <code>transition="crossfade"</code> to your carousel to animate slides
-            with a fade transition instead of a slide.
-          </p>
-          <app-docs-example href="components/carousel/#crossfade">
-            <c-carousel (itemChange)="onItemChange($event)" [animate]="false" [interval]="5000" transition="crossfade">
-              <c-carousel-inner>
-                <c-carousel-item *ngFor="let slide of slides[0]">
-                  <img
-                    [src]="slide.src"
-                    alt="{{slide.title}}"
-                    class="d-block w-100"
-                    loading="lazy"
-                  />
-                  <c-carousel-caption class="d-none d-md-block">
-                    <h3>{{slide.title}}</h3>
-                    <p>{{slide.subtitle}}</p>
-                  </c-carousel-caption>
-                </c-carousel-item>
-              </c-carousel-inner>
-              <c-carousel-control [routerLink]="[]" caption="Previous" direction="prev" i18n-caption></c-carousel-control>
-              <c-carousel-control [routerLink]="[]" caption="Next" direction="next" i18n-caption></c-carousel-control>
-            </c-carousel>
-          </app-docs-example>
-        </c-card-body>
-      </c-card>
-    </c-col>
-    <c-col xs="12">
-      <c-card class="mb-4">
-        <c-card-header>
-          <strong>Angular Carousel</strong> <small>Dark variant</small>
-        </c-card-header>
-        <c-card-body>
-          <p class="text-medium-emphasis small">
-            Add <code>dark</code> property to the <code>c-carousel</code> for darker controls,
-            indicators, and captions. Controls have been inverted from their default white fill
-            with the <code>filter</code> CSS property. Captions and controls have additional Sass
-            variables that customize the <code>color</code> and <code>background-color</code>.
-          </p>
-          <app-docs-example href="components/carousel/#dark-variant">
-            <c-carousel (itemChange)="onItemChange($event)" [dark]="true" [interval]="3000" transition="slide">
-              <c-carousel-indicators></c-carousel-indicators>
-              <c-carousel-inner>
-                <c-carousel-item *ngFor="let slide of slides[2]; index as i;">
-                  <img
-                    [src]="slide.src"
-                    alt="{{slide.title}}"
-                    class="d-block w-100"
-                    loading="lazy"
-                  />
-                  <c-carousel-caption class="d-none d-md-block">
-                    <h3>{{slide.title}}</h3>
-                    <p>{{slide.subtitle}}</p>
-                  </c-carousel-caption>
-                </c-carousel-item>
-              </c-carousel-inner>
-              <c-carousel-control [routerLink]="[]" caption="Previous" direction="prev" i18n-caption></c-carousel-control>
-              <c-carousel-control [routerLink]="[]" caption="Next" direction="next" i18n-caption></c-carousel-control>
-            </c-carousel>
-          </app-docs-example>
-        </c-card-body>
-      </c-card>
-    </c-col>
-  </c-row>
-</div>

front/app/src/app/views/base/carousels/carousels.component.spec.ts

@@ -1,38 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { CardModule, CarouselModule, GridModule } from '@coreui/angular';
-import { IconModule } from '@coreui/icons-angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DocsComponentsModule } from '../../../../components';
-import { CarouselsComponent } from './carousels.component';
-
-describe('CarouselsComponent', () => {
-  let component: CarouselsComponent;
-  let fixture: ComponentFixture<CarouselsComponent>;
-  let iconSetService: IconSetService
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ CarouselsComponent ],
-      imports: [CarouselModule, NoopAnimationsModule, CardModule, GridModule, IconModule, DocsComponentsModule, RouterTestingModule],
-      providers: [IconSetService]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(CarouselsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/carousels/carousels.component.ts

@@ -1,100 +0,0 @@
-import { Component } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-
-@Component({
-  selector: 'app-carousels',
-  templateUrl: './carousels.component.html',
-  styleUrls: ['./carousels.component.scss']
-})
-export class CarouselsComponent {
-
-  imageSrc = [
-    'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
-    'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
-    'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
-    'https://picsum.photos/id/1/800/400',
-    'https://picsum.photos/id/1026/800/400',
-    'https://picsum.photos/id/1031/800/400'
-  ];
-
-  slidesLight = [
-    'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
-    'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23BBB%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
-    'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23E5E5E5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'
-  ];
-
-  slides: any[] = [];
-
-  constructor(
-    private domSanitizer: DomSanitizer
-  ) {
-    this.slides[0] = [
-      {
-        id: 0,
-        src: domSanitizer.bypassSecurityTrustUrl(this.imageSrc[0]),
-        title: 'First slide',
-        subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
-      },
-      {
-        id: 1,
-        src: domSanitizer.bypassSecurityTrustUrl(this.imageSrc[1]),
-        title: 'Second slide',
-        subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-      },
-      {
-        id: 2,
-        src: domSanitizer.bypassSecurityTrustUrl(this.imageSrc[2]),
-        title: 'Third slide',
-        subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
-      }
-    ];
-
-    this.slides[1] = [
-      {
-        id: 0,
-        src: this.imageSrc[3],
-        title: 'First slide',
-        subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
-      },
-      {
-        id: 1,
-        src: this.imageSrc[4],
-        title: 'Second slide',
-        subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-      },
-      {
-        id: 2,
-        src: this.imageSrc[5],
-        title: 'Third slide',
-        subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
-      }
-    ];
-
-    this.slides[2] = [
-      {
-        id: 0,
-        src: domSanitizer.bypassSecurityTrustUrl(this.slidesLight[0]),
-        title: 'First slide',
-        subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
-      },
-      {
-        id: 1,
-        src: domSanitizer.bypassSecurityTrustUrl(this.slidesLight[1]),
-        title: 'Second slide',
-        subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-      },
-      {
-        id: 2,
-        src: domSanitizer.bypassSecurityTrustUrl(this.slidesLight[2]),
-        title: 'Third slide',
-        subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
-      }
-    ];
-
-  }
-
-  onItemChange($event: any): void {
-    console.log('Carousel onItemChange', $event);
-  }
-
-}

front/app/src/app/views/base/collapses/collapses.component.html

@@ -1,134 +0,0 @@
-<c-row ngPreserveWhitespaces>
-  <c-col xs="12">
-    <app-docs-callout href="components/collapse" name="Collapse"></app-docs-callout>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Collapse</strong>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">You can use a link or a button component.</p>
-        <app-docs-example href="components/collapse">
-          <a (click)="toggleCollapse(0)" cButton class="me-1" color="primary">Link</a>
-          <button (click)="toggleCollapse(0)" cButton class="me-1" color="primary">
-            Button
-          </button>
-          <div [visible]="collapses[0]" cCollapse>
-            <c-card class="shadow mt-3">
-              <c-card-body>
-                Anim pariatur cliche reprehenderit, enim eiusmod high life
-                accusamus terry richardson ad squid. Nihil anim keffiyeh
-                helvetica, craft beer labore wes anderson cred nesciunt sapiente
-                ea proident.
-              </c-card-body>
-            </c-card>
-          </div>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header ngPreserveWhitespaces>
-        <strong>Angular Collapse</strong> <small>horizontal</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Add the <code>horizontal</code> property to transition the width
-          instead of height and set a width on the immediate child element.
-        </p>
-        <app-docs-example href="components/collapse">
-          <button
-            (click)="toggleCollapse(1)"
-            cButton
-            class="me-1 mb-3"
-            color="primary"
-            [attr.aria-expanded]="collapses[1]"
-          >
-            Button
-          </button>
-          <div style="min-height: 130px">
-            <div
-              [visible]="collapses[1]"
-              cCollapse
-              horizontal
-              style="max-width: 260px"
-            >
-              <c-card class="shadow">
-                <c-card-body style="width: 260px">
-                  This is some placeholder content for a horizontal collapse.
-                  It's hidden by default and shown when triggered.
-                </c-card-body>
-              </c-card>
-            </div>
-          </div>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Collapse</strong> <small> multi target</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          A <code>&lt;c-button&gt;</code> can show and hide multiple elements.
-        </p>
-        <app-docs-example href="components/collapse#multiple-targets">
-          <button
-            (click)="toggleCollapse(2)"
-            cButton
-            class="me-1"
-            color="primary"
-          >
-            Toggle first element
-          </button>
-          <button
-            (click)="toggleCollapse(3)"
-            cButton
-            class="me-1"
-            color="primary"
-          >
-            Toggle second element
-          </button>
-          <button
-            (click)="toggleCollapse(2); toggleCollapse(3)"
-            cButton
-            class="me-1"
-            color="primary"
-          >
-            Toggle both
-          </button>
-          <c-row style="min-height: 130px">
-            <c-col xs="6">
-              <div [visible]="collapses[2]" cCollapse>
-                <c-card class="mt-3">
-                  <c-card-body>
-                    Anim pariatur cliche reprehenderit, enim eiusmod high life
-                    accusamus terry richardson ad squid. Nihil anim keffiyeh
-                    helvetica, craft beer labore wes anderson cred nesciunt
-                    sapiente ea proident.
-                  </c-card-body>
-                </c-card>
-              </div>
-            </c-col>
-            <c-col xs="6">
-              <div [visible]="collapses[3]" cCollapse>
-                <c-card class="mt-3">
-                  <c-card-body>
-                    Anim pariatur cliche reprehenderit, enim eiusmod high life
-                    accusamus terry richardson ad squid. Nihil anim keffiyeh
-                    helvetica, craft beer labore wes anderson cred nesciunt
-                    sapiente ea proident.
-                  </c-card-body>
-                </c-card>
-              </div>
-            </c-col>
-          </c-row>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>

front/app/src/app/views/base/collapses/collapses.component.spec.ts

@@ -1,37 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { ButtonModule, CardModule, CollapseModule, GridModule } from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DocsComponentsModule } from '../../../../components';
-import { CollapsesComponent } from './collapses.component';
-
-describe('CollapsesComponent', () => {
-  let component: CollapsesComponent;
-  let fixture: ComponentFixture<CollapsesComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [CollapsesComponent],
-      imports: [CardModule, CollapseModule, NoopAnimationsModule, GridModule, ButtonModule, DocsComponentsModule, RouterTestingModule],
-      providers: [IconSetService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(CollapsesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/collapses/collapses.component.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-collapses',
-  templateUrl: './collapses.component.html',
-  styleUrls: ['./collapses.component.scss']
-})
-export class CollapsesComponent {
-
-  collapses = [false, false, false, false];
-
-  constructor() { }
-
-  toggleCollapse(id: number): void {
-    // @ts-ignore
-    this.collapses[id] = !this.collapses[id];
-  }
-
-}

front/app/src/app/views/base/list-groups/list-groups.component.html

@@ -1,364 +0,0 @@
-<c-row ngPreserveWhitespaces>
-  <c-col xs="12">
-    <app-docs-callout href="components/list-group" name="List Group"></app-docs-callout>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular List Group</strong> <small>Basic example</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          The default list group is an unordered list with items and the proper
-          CSS classes. Build upon it with the options that follow, or with your
-          CSS as required.
-        </p>
-        <app-docs-example href="components/list-group">
-          <ul cListGroup>
-            <li cListGroupItem>Cras justo odio</li>
-            <li cListGroupItem>Dapibus ac facilisis in</li>
-            <li cListGroupItem>Morbi leo risus</li>
-            <li cListGroupItem>Porta ac consectetur ac</li>
-            <li cListGroupItem>Vestibulum at eros</li>
-          </ul>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular List Group</strong> <small>Active items</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Add <code>active</code> boolean property to a
-          <code>cListGroupItem</code> to show the current active selection.
-        </p>
-        <app-docs-example href="components/list-group/#active-items">
-          <ul cListGroup>
-            <li [active]="true" cListGroupItem>Cras justo odio</li>
-            <li cListGroupItem>Dapibus ac facilisis in</li>
-            <li cListGroupItem>Morbi leo risus</li>
-            <li cListGroupItem>Porta ac consectetur ac</li>
-            <li cListGroupItem>Vestibulum at eros</li>
-          </ul>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular List Group</strong> <small>Disabled items</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Add <code>disabled</code> boolean property to a
-          <code>cListGroupItem</code> to make it appear disabled.
-        </p>
-        <app-docs-example href="components/list-group/#disabled-items">
-          <div cListGroup>
-            <button cListGroupItem disabled>Cras justo odio</button>
-            <button cListGroupItem>Dapibus ac facilisis in</button>
-            <button cListGroupItem>Morbi leo risus</button>
-            <button cListGroupItem>Porta ac consectetur ac</button>
-            <button cListGroupItem>Vestibulum at eros</button>
-          </div>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular List Group</strong> <small>Links and buttons</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to create
-          <em>actionable</em> list group items with hover, disabled, and active
-          states by adding <code>component=&#34;a|button&#34;</code>. We
-          separate these pseudo-classes to ensure list groups made of
-          non-interactive elements (like <code>&lt;li&gt;</code> or
-          <code>&lt;div&gt;</code>) don't provide a click or tap affordance.
-        </p>
-        <app-docs-example href="components/list-group/#links-and-buttons">
-          <div cListGroup>
-            <a [active]="true" cListGroupItem href>
-              Cras justo odio
-            </a>
-            <a cListGroupItem href>
-              Dapibus ac facilisis in
-            </a>
-            <a cListGroupItem href>
-              Morbi leo risus
-            </a>
-            <a cListGroupItem href>
-              Porta ac consectetur ac
-            </a>
-            <a cListGroupItem disabled href>
-              Vestibulum at eros
-            </a>
-          </div>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular List Group</strong> <small>Flush</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Add <code>flush</code> boolean property to remove some borders and
-          rounded corners to render list group items edge-to-edge in a parent
-          container (e.g., cards).
-        </p>
-        <app-docs-example href="components/list-group/#flush">
-          <ul [flush]="true" cListGroup>
-            <li cListGroupItem>Cras justo odio</li>
-            <li cListGroupItem>Dapibus ac facilisis in</li>
-            <li cListGroupItem>Morbi leo risus</li>
-            <li cListGroupItem>Porta ac consectetur ac</li>
-            <li cListGroupItem>Vestibulum at eros</li>
-          </ul>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular List Group</strong> <small>Horizontal</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Add <code>layout=&#34;horizontal&#34;</code> to change the layout of
-          list group items from vertical to horizontal across all breakpoints.
-          Alternatively, choose a responsive variant
-          <code
-          >.layout=&#34;horizontal-&#123;sm | md | lg | xl |
-            xxl&#125;&#34;</code
-          >
-          to make a list group horizontal starting at that breakpoint's
-          <code>min-width</code>. Currently
-          <strong
-          >horizontal list groups cannot be combined with flush list
-            groups.</strong
-          >
-        </p>
-        <app-docs-example href="components/list-group/#flush">
-          <ul
-            *ngFor="let breakpoint of breakpoints; index as i"
-            [horizontal]="breakpoint"
-            cListGroup
-            class="mb-2"
-          >
-            <li cListGroupItem>Cras justo odio</li>
-            <li cListGroupItem>Dapibus ac facilisis in</li>
-            <li cListGroupItem>Morbi leo risus</li>
-          </ul>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular List Group</strong> <small>Contextual classes</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Use contextual classes to style list items with a stateful background
-          and color.
-        </p>
-        <app-docs-example href="components/list-group/#contextual-classes">
-          <ul cListGroup class="mb-3">
-            <li *ngFor="let color of colors" [color]="color" cListGroupItem>
-              A simple {{ color }} list group item
-            </li>
-          </ul>
-        </app-docs-example>
-        <p class="text-medium-emphasis small mt-1">
-          Contextual classes also work with <code>&lt;a&gt;</code> or
-          <code>&lt;button&gt;</code>. Note the addition of the hover styles
-          here not present in the previous example. Also supported is the
-          <code>active</code> state; apply it to indicate an active selection on
-          a contextual list group item.
-        </p>
-        <app-docs-example href="components/list-group/#contextual-classes">
-          <div cListGroup>
-            <a
-              *ngFor="let color of colors; index as i"
-              [color]="color"
-              cListGroupItem
-              href
-            >A simple {{ color }} list group item</a
-            >
-          </div>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular List Group</strong> <small>With badges</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Add badges to any list group item to show unread counts, activity, and
-          more.
-        </p>
-        <app-docs-example href="components/list-group/#with-badges">
-          <div cListGroup>
-            <button
-              cListGroupItem
-              class="d-flex justify-content-between align-items-center"
-            >
-              Cras justo odio
-              <c-badge color="primary" shape="rounded-pill">14</c-badge>
-            </button>
-            <button
-              cListGroupItem
-              class="d-flex justify-content-between align-items-center"
-            >
-              Dapibus ac facilisis in
-              <c-badge color="primary" shape="rounded-pill">2</c-badge>
-            </button>
-            <button
-              cListGroupItem
-              class="d-flex justify-content-between align-items-center"
-            >
-              Morbi leo risus
-              <c-badge color="primary" shape="rounded-pill">1</c-badge>
-            </button>
-            <button
-              cListGroupItem
-              class="d-flex justify-content-between align-items-center"
-            >
-              Porta ac consectetur
-              <c-badge color="primary" shape="rounded-pill">1</c-badge>
-            </button>
-            <button
-              cListGroupItem
-              class="d-flex justify-content-between align-items-center"
-              disabled
-            >
-              Vestibulum at eros
-              <c-badge color="secondary" shape="rounded-pill">42</c-badge>
-            </button>
-          </div>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular List Group</strong> <small>Custom content</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Add nearly any HTML within, even for linked list groups like the one
-          below, with the help of
-          <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a
-          >.
-        </p>
-        <app-docs-example href="components/list-group/#custom-content">
-          <div cListGroup>
-            <a [active]="true" cListGroupItem href>
-              <div class="d-flex w-100 justify-content-between">
-                <h5 class="mb-1">List group item heading</h5>
-                <small>3 days ago</small>
-              </div>
-              <p class="mb-1">
-                Donec id elit non mi porta gravida at eget metus. Maecenas sed
-                diam eget risus varius blandit.
-              </p>
-              <small>Donec id elit non mi porta.</small>
-            </a>
-            <a cListGroupItem href>
-              <div class="d-flex w-100 justify-content-between">
-                <h5 class="mb-1">List group item heading</h5>
-                <small class="text-medium-emphasis">3 days ago</small>
-              </div>
-              <p class="mb-1">
-                Donec id elit non mi porta gravida at eget metus. Maecenas sed
-                diam eget risus varius blandit.
-              </p>
-              <small class="text-medium-emphasis"
-              >Donec id elit non mi porta.</small
-              >
-            </a>
-            <a cListGroupItem href>
-              <div class="d-flex w-100 justify-content-between">
-                <h5 class="mb-1">List group item heading</h5>
-                <small class="text-medium-emphasis">3 days ago</small>
-              </div>
-              <p class="mb-1">
-                Donec id elit non mi porta gravida at eget metus. Maecenas sed
-                diam eget risus varius blandit.
-              </p>
-              <small class="text-medium-emphasis"
-              >Donec id elit non mi porta.</small
-              >
-            </a>
-          </div>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular List Group</strong> <small>Checkboxes and radios</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Place CoreUI&#39;s checkboxes and radios within list group items and
-          customize as needed.
-        </p>
-        <app-docs-example href="components/list-group/#checkboxes-and-radios">
-          <form [formGroup]="checkBoxes" (ngSubmit)="logValue()" cForm>
-            <ul [flush]="true" cListGroup>
-              <button (click)="setValue('one');" cListGroupItem type="button">
-                <c-form-check>
-                  <input cFormCheckInput formControlName="one" type="checkbox"/>
-                  <label cFormCheckLabel>Cras justo odio</label>
-                </c-form-check>
-              </button>
-              <label cListGroupItem style="cursor: pointer;">
-                <c-form-check>
-                  <input cFormCheckInput formControlName="two" type="checkbox"/>
-                  Dapibus ac facilisis in
-                </c-form-check>
-              </label>
-              <li cListGroupItem>
-                <c-form-check>
-                  <input cFormCheckInput formControlName="three" type="checkbox"/>
-                  <label cFormCheckLabel>Morbi leo risus</label>
-                </c-form-check>
-              </li>
-              <li cListGroupItem>
-                <c-form-check>
-                  <input cFormCheckInput formControlName="four" type="checkbox"/>
-                  <label cFormCheckLabel>Orta ac consectetur ac</label>
-                </c-form-check>
-              </li>
-              <li cListGroupItem>
-                <c-form-check>
-                  <input cFormCheckInput formControlName="five" type="checkbox"/>
-                  <label cFormCheckLabel>Vestibulum at eros</label>
-                </c-form-check>
-              </li>
-            </ul>
-            <button cButton class="mt-3" type="submit">Submit</button>
-          </form>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>

front/app/src/app/views/base/list-groups/list-groups.component.spec.ts

@@ -1,37 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { BadgeModule, ButtonModule, CardModule, FormModule, GridModule, ListGroupModule } from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DocsComponentsModule } from '../../../../components';
-import { ListGroupsComponent } from './list-groups.component';
-
-describe('ListGroupsComponent', () => {
-  let component: ListGroupsComponent;
-  let fixture: ComponentFixture<ListGroupsComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ListGroupsComponent],
-      imports: [ListGroupModule, ButtonModule, ReactiveFormsModule, BadgeModule, FormModule, GridModule, CardModule, DocsComponentsModule, RouterTestingModule],
-      providers: [IconSetService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(ListGroupsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/list-groups/list-groups.component.ts

@@ -1,41 +0,0 @@
-import { Component } from '@angular/core';
-import { UntypedFormBuilder } from '@angular/forms';
-
-@Component({
-  selector: 'app-list-groups',
-  templateUrl: './list-groups.component.html',
-  styleUrls: ['./list-groups.component.scss']
-})
-export class ListGroupsComponent {
-
-  breakpoints = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
-  colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
-
-  checkBoxes = this.formBuilder.group({
-    one: false,
-    two: false,
-    three: true,
-    four: true,
-    five: {value: false, disabled: true}
-  });
-
-  constructor(
-    private formBuilder: UntypedFormBuilder
-  ) { }
-
-  setValue(controlName: string) {
-    const prevValue = this.checkBoxes.get(controlName)?.value;
-    const value = this.checkBoxes.getRawValue();
-    value[controlName] = !prevValue;
-    this.checkBoxes.setValue(value);
-  }
-
-  logValue() {
-    console.log(this.checkBoxes.value);
-    this.checkBoxes.reset();
-  }
-
-  getValue(controlName: string) {
-    return this.checkBoxes.get(controlName);
-  }
-}

front/app/src/app/views/base/navs/navs.component.html

@@ -1,380 +0,0 @@
-<c-row ngPreserveWhitespaces>
-  <c-col xs="12">
-    <app-docs-callout href="components/nav" name="Nav"></app-docs-callout>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Navs</strong> <small>Base navs</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          The base <code>c-nav</code> component is built with flexbox and provide a strong
-          foundation for building all types of navigation components. It includes some style
-          overrides (for working with lists), some link padding for larger hit areas, and basic
-          [disabled]="true" styling.
-        </p>
-        <app-docs-example href="components/nav#base-nav">
-          <c-nav>
-            <c-nav-item>
-              <a [active]="true" cNavLink routerLink="./">
-                Active
-              </a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a [disabled]="true" cNavLink routerLink="./">
-                Disabled
-              </a>
-            </c-nav-item>
-          </c-nav>
-        </app-docs-example>
-        <p class="text-medium-emphasis small mt-3">
-          Classes are used throughout, so your markup can be super flexible. Use
-          <code>c-nav-item</code> like above, or roll your own with a <code>&lt;c-nav&gt;</code> element. Because
-          the <code>.nav</code> uses <code>display: flex</code>, the <code>cNavLink</code> behaves the same as <code>c-nav-item</code> would, but
-          without the extra markup.
-        </p>
-        <app-docs-example href="components/nav#base-nav">
-          <c-nav role="navigation">
-            <a [active]="true" cNavLink routerLink="./">
-              Active
-            </a>
-            <a cNavLink routerLink="./">Link</a>
-            <a cNavLink routerLink="./">Link</a>
-            <a [disabled]="true" cNavLink routerLink="./">
-              Disabled
-            </a>
-          </c-nav>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Navs</strong> <small>Horizontal alignment</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Change the horizontal alignment of your nav with
-          <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
-            flexbox utilities
-          </a>
-          . By default, navs are left-aligned, but you can easily change them to center or right
-          aligned.
-        </p>
-        <p class="text-medium-emphasis small">
-          Centered with <code>.justify-content-center</code>:
-        </p>
-        <app-docs-example href="components/nav#horizontal-alignment">
-          <c-nav class="justify-content-center">
-            <c-nav-item>
-              <a [active]="true" cNavLink routerLink="./">
-                Active
-              </a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a [disabled]="true" cNavLink routerLink="./">
-                Disabled
-              </a>
-            </c-nav-item>
-          </c-nav>
-        </app-docs-example>
-        <p class="text-medium-emphasis small">
-          Right-aligned with <code>.justify-content-end</code>:
-        </p>
-        <app-docs-example href="components/nav#base-nav">
-          <c-nav class="justify-content-end">
-            <c-nav-item>
-              <a [active]="true" cNavLink routerLink="./">
-                Active
-              </a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a [disabled]="true" cNavLink routerLink="./">
-                Disabled
-              </a>
-            </c-nav-item>
-          </c-nav>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Navs</strong> <small>Vertical</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Stack your navigation by changing the flex item direction with the
-          <code>.flex-column</code> utility. Need to stack them on some viewports but not
-          others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
-        </p>
-        <app-docs-example href="components/nav#vertical">
-          <c-nav class="flex-column">
-            <c-nav-item>
-              <a [active]="true" cNavLink routerLink="./">
-                Active
-              </a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a [disabled]="true" cNavLink routerLink="./">
-                Disabled
-              </a>
-            </c-nav-item>
-          </c-nav>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Navs</strong> <small>Tabs</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Take the basic nav from above and add the <code>variant=&#34;tabs&#34;</code> class
-          to generate a tabbed interface
-        </p>
-        <app-docs-example href="components/nav#tabs">
-          <c-nav variant="tabs">
-            <c-nav-item>
-              <a [active]="true" cNavLink routerLink="./">
-                Active
-              </a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a [disabled]="true" cNavLink routerLink="./">
-                Disabled
-              </a>
-            </c-nav-item>
-          </c-nav>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Navs</strong> <small>Pills</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
-        </p>
-        <app-docs-example href="components/nav#pills">
-          <c-nav variant="pills">
-            <c-nav-item>
-              <a [active]="true" cNavLink routerLink="./">
-                Active
-              </a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a [disabled]="true" cNavLink routerLink="./">
-                Disabled
-              </a>
-            </c-nav-item>
-          </c-nav>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Navs</strong> <small>Fill and justify</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Force your <code>.nav</code>&#39;s contents to extend the full available width one of
-          two modifier classes. To proportionately fill all available space with your
-          <code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
-          horizontal space is occupied, but not every nav item has the same width.
-        </p>
-        <app-docs-example href="components/nav#fill-and-justify">
-          <c-nav layout="fill" variant="pills">
-            <c-nav-item>
-              <a [active]="true" cNavLink routerLink="./">
-                Active
-              </a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a [disabled]="true" cNavLink routerLink="./">
-                Disabled
-              </a>
-            </c-nav-item>
-          </c-nav>
-        </app-docs-example>
-        <p class="text-medium-emphasis small">
-          For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
-          space will be occupied by nav links, but unlike the .nav-fill above, every nav item
-          will be the same width.
-        </p>
-        <app-docs-example href="components/nav#fill-and-justify">
-          <c-nav layout="justified" variant="pills">
-            <c-nav-item>
-              <a [active]="true" cNavLink routerLink="./">
-                Active
-              </a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a [disabled]="true" cNavLink routerLink="./">
-                Disabled
-              </a>
-            </c-nav-item>
-          </c-nav>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Navs</strong> <small>Working with flex utilities</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          If you need responsive nav variations, consider using a series of
-          <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
-          verbose, these utilities offer greater customization across responsive breakpoints. In
-          the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
-          horizontal layout that fills the available width starting from the small breakpoint.
-        </p>
-        <app-docs-example href="components/nav#working-with-flex-utilities">
-          <c-nav class="flex-column flex-sm-row" role="navigation" variant="pills">
-            <a [active]="true" cNavLink routerLink="./">
-              Active
-            </a>
-            <a cNavLink routerLink="./">Link</a>
-            <a cNavLink routerLink="./">Link</a>
-            <a [disabled]="true" cNavLink routerLink="./">
-              Disabled
-            </a>
-          </c-nav>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Navs</strong> <small>Tabs with dropdowns</small>
-      </c-card-header>
-      <c-card-body>
-        <app-docs-example href="components/nav#tabs-with-dropdowns">
-          <c-nav variant="tabs">
-            <c-nav-item>
-              <a [active]="true" cNavLink routerLink="./">
-                Active
-              </a>
-            </c-nav-item>
-            <c-dropdown variant="nav-item">
-              <a cDropdownToggle href>
-                Dropdown button
-              </a>
-              <ul cDropdownMenu>
-                <li><a cDropdownItem routerLink="./">Action</a></li>
-                <li><a cDropdownItem routerLink="./">Another action</a></li>
-                <li><a cDropdownItem routerLink="./">Something else here</a></li>
-              </ul>
-            </c-dropdown>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a [disabled]="true" cNavLink routerLink="./">
-                Disabled
-              </a>
-            </c-nav-item>
-          </c-nav>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Navs</strong> <small>Pills with dropdowns</small>
-      </c-card-header>
-      <c-card-body>
-        <app-docs-example href="components/nav#pills-with-dropdowns">
-          <c-nav variant="pills">
-            <c-nav-item>
-              <a [active]="true" cNavLink routerLink="./">
-                Active
-              </a>
-            </c-nav-item>
-            <c-dropdown variant="nav-item">
-              <a cDropdownToggle href>
-                Dropdown button
-              </a>
-              <ul cDropdownMenu>
-                <li><a cDropdownItem routerLink="./">Action</a></li>
-                <li><a cDropdownItem routerLink="./">Another action</a></li>
-                <li><a cDropdownItem routerLink="./">Something else here</a></li>
-              </ul>
-            </c-dropdown>
-            <c-nav-item>
-              <a cNavLink routerLink="./">Link</a>
-            </c-nav-item>
-            <c-nav-item>
-              <a [disabled]="true" cNavLink routerLink="./">
-                Disabled
-              </a>
-            </c-nav-item>
-          </c-nav>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>

front/app/src/app/views/base/navs/navs.component.spec.ts

@@ -1,36 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { CardModule, DropdownModule, GridModule, NavModule } from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { NavsComponent } from './navs.component';
-import { DocsComponentsModule } from '../../../../components';
-
-describe('NavsComponent', () => {
-  let component: NavsComponent;
-  let fixture: ComponentFixture<NavsComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [NavsComponent],
-      imports: [GridModule, CardModule, RouterTestingModule, NavModule, DropdownModule, DocsComponentsModule],
-      providers: [IconSetService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(NavsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/navs/navs.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-navs',
-  templateUrl: './navs.component.html',
-  styleUrls: ['./navs.component.scss']
-})
-export class NavsComponent {
-
-  constructor() { }
-}
-

front/app/src/app/views/base/paginations/paginations.component.html

@@ -1,221 +0,0 @@
-<c-row ngPreserveWhitespaces>
-  <c-col xs="12">
-    <app-docs-callout href="components/pagination" name="Pagination"></app-docs-callout>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Pagination</strong>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          We use a large block of connected links for our pagination, making links hard to miss
-          and easily scalable—all while providing large hit areas. Pagination is built with list
-          HTML elements so screen readers can announce the number of available links. Use a
-          wrapping <code>&lt;nav&gt;</code> element to identify it as a navigation section to
-          screen readers and other assistive technologies.
-        </p>
-        <p class="text-medium-emphasis small">
-          In addition, as pages likely have more than one such navigation section, it&#39;s
-          advisable to provide a descriptive <code>aria-label</code> for the
-          <code>&lt;nav&gt;</code> to reflect its purpose. For example, if the pagination
-          component is used to navigate between a set of search results, an appropriate label
-          could be <code>aria-label=&#34;Search results pages&#34;</code>.
-        </p>
-        <app-docs-example href="components/pagination">
-          <c-pagination aria-label="Page navigation example">
-            <c-page-item>
-              <a cPageLink routerLink="./">Previous</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">1</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">2</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">3</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">Next</a>
-            </c-page-item>
-          </c-pagination>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Pagination</strong> <small>Working with icons</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Looking to use an icon or symbol in place of text for some pagination links? Be sure
-          to provide proper screen reader support with <code>aria</code> attributes.
-        </p>
-        <app-docs-example href="components/pagination#working-with-icons">
-          <c-pagination aria-label="Page navigation example">
-            <c-page-item aria-label="Previous">
-              <a cPageLink routerLink="./"><span aria-hidden="true">&laquo;</span></a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">1</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">2</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">1</a>
-            </c-page-item>
-            <c-page-item aria-label="Next">
-              <a cPageLink routerLink="./"><span aria-hidden="true">&raquo;</span></a>
-            </c-page-item>
-          </c-pagination>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Pagination</strong> <small>Disabled and active states</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Pagination links are customizable for different circumstances. Use
-          <code>disabled</code> for links that appear un-clickable and <code>.active</code> to
-          indicate the current page.
-        </p>
-        <p class="text-medium-emphasis small">
-          While the <code>disabled</code> prop uses <code>pointer-events: none</code> to
-          <em>try</em> to disable the link functionality of <code>&lt;a&gt;</code>s, that CSS
-          property is not yet standardized and doesn&#39;taccount for keyboard navigation. As
-          such, we always add <code>tabindex=&#34;-1&#34;</code> on disabled links and use
-          custom JavaScript to fully disable their functionality.
-        </p>
-        <app-docs-example href="components/pagination#disabled-and-active-states">
-          <c-pagination aria-label="Page navigation example">
-            <c-page-item [disabled]="true" aria-label="Previous">
-              <a cPageLink routerLink="./"><span aria-hidden="true">&laquo;</span></a>
-            </c-page-item>
-            <c-page-item [active]="true">
-              <a routerLink="./" cPageLink>1</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">2</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">3</a>
-            </c-page-item>
-            <c-page-item aria-label="Next">
-              <a cPageLink routerLink="./"><span aria-hidden="true">&raquo;</span></a>
-            </c-page-item>
-          </c-pagination>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Pagination</strong> <small>Sizing</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Fancy larger or smaller pagination? Add <code>sizing=&#34;lg&#34;</code> or
-          <code>sizing=&#34;sm&#34;</code> for additional sizes.
-        </p>
-        <app-docs-example href="components/pagination#sizing">
-          <c-pagination aria-label="Page navigation example" size="lg">
-            <c-page-item>
-              <a cPageLink routerLink="./">Previous</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">1</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">2</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">3</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">Next</a>
-            </c-page-item>
-          </c-pagination>
-        </app-docs-example>
-        <app-docs-example href="components/pagination#sizing">
-          <c-pagination aria-label="Page navigation example" size="sm">
-            <c-page-item>
-              <a cPageLink routerLink="./">Previous</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">1</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">2</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">3</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">Next</a>
-            </c-page-item>
-          </c-pagination>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Pagination</strong> <small>Alignment</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Change the alignment of pagination components with
-          <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
-        </p>
-        <app-docs-example href="components/pagination#aligment">
-          <c-pagination align="center" aria-label="Page navigation example">
-            <c-page-item [disabled]="true">
-              <a cPageLink routerLink="./">Previous</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">1</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">2</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">3</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">Next</a>
-            </c-page-item>
-          </c-pagination>
-        </app-docs-example>
-        <app-docs-example href="components/pagination#aligment">
-          <c-pagination align="end" aria-label="Page navigation example">
-            <c-page-item [disabled]="true">
-              <a cPageLink routerLink="./">Previous</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">1</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">2</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">3</a>
-            </c-page-item>
-            <c-page-item>
-              <a cPageLink routerLink="./">Next</a>
-            </c-page-item>
-          </c-pagination>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>

front/app/src/app/views/base/paginations/paginations.component.spec.ts

@@ -1,36 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { CardModule, GridModule, PaginationModule } from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DocsComponentsModule } from '../../../../components';
-import { PaginationsComponent } from './paginations.component';
-
-describe('PaginationsComponent', () => {
-  let component: PaginationsComponent;
-  let fixture: ComponentFixture<PaginationsComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [PaginationsComponent],
-      imports: [PaginationModule, CardModule, GridModule, DocsComponentsModule, RouterTestingModule],
-      providers: [IconSetService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(PaginationsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/paginations/paginations.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-paginations',
-  templateUrl: './paginations.component.html',
-  styleUrls: ['./paginations.component.scss']
-})
-export class PaginationsComponent {
-
-  constructor() { }
-
-}

front/app/src/app/views/base/placeholders/placeholders.component.html

@@ -1,160 +0,0 @@
-<c-row>
-  <c-col xs="12">
-    <app-docs-callout href="components/placeholder" name="Placeholder"></app-docs-callout>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Placeholder</strong>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          In the example below, we take a typical card component and recreate it with
-          placeholders applied to create a &#34;loading card&#34;. Size and proportions are the
-          same between the two.
-        </p>
-        <app-docs-example href="components/placeholder">
-          <div class="d-flex justify-content-around p-3">
-            <c-card style="width: 18rem;">
-              <img cCardImg="top" loading="lazy" src="./assets/images/angular.jpg" />
-              <c-card-body>
-                <h5 cCardTitle>Card title</h5>
-                <p cCardText>
-                  Some quick example text to build on the card title and make up the bulk of the
-                  card&#39;s content.
-                </p>
-                <a cButton cCol="7" routerLink="./">Go somewhere</a>
-              </c-card-body>
-            </c-card>
-            <c-card style="width: 18rem;">
-              <svg aria-label="Placeholder"
-                   cCardImg="top"
-                   focusable="false"
-                   height="162"
-                   preserveAspectRatio="xMidYMid slice"
-                   role="img"
-                   width="100%"
-                   xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>Placeholder</title>
-                <rect fill="#868e96" height="100%" width="100%"></rect>
-              </svg>
-              <c-card-body>
-                <h5 cCardTitle cPlaceholderAnimation="glow">
-                  <span cCol="6" cPlaceholder></span>
-                </h5>
-                <p cCardText cPlaceholderAnimation="glow">
-                  <span cCol xs="7" cPlaceholder class="me-1"></span>
-                  <span cCol="4" cPlaceholder class="me-1"></span>
-                  <span cCol="4" cPlaceholder class="me-1"></span>
-                  <span cCol="6" cPlaceholder class="me-1"></span>
-                  <span cCol="8" cPlaceholder class="me-1"></span>
-                </p>
-                <p cPlaceholderAnimation="glow">
-                  <a cButton cCol="7" cPlaceholder color="primary" disabled routerLink="./"></a>
-                </p>
-              </c-card-body>
-            </c-card>
-          </div>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Placeholder</strong>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Create placeholders with the <code>cPlaceholder</code> directive and a grid
-          column cCol directive (e.g., <code>cCol="6"</code>) to set the <code>width</code>. They can
-          replace the text inside an element or be added as a modifier to an existing
-          component.
-        </p>
-        <app-docs-example href="components/placeholder">
-          <p aria-hidden="true">
-            <span cCol="6" cPlaceholder></span>
-          </p>
-          <button cButton cCol="4" cPlaceholder disabled></button>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Placeholder</strong> <small> Width</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          You can change the <code>width</code> through grid column classes, width utilities, or
-          inline styles.
-        </p>
-        <app-docs-example href="components/placeholder#width">
-          <span cCol="6" cPlaceholder></span>
-          <span cPlaceholder class="w-75"></span>
-          <span cPlaceholder style="width: 30%;"></span>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Placeholder</strong> <small> Color</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          By default, the <code>cPlaceholder</code> uses <code>currentColor</code>. This
-          can be overridden with a custom color or utility class.
-        </p>
-        <app-docs-example href="components/placeholder#color">
-          <span cCol="12" cPlaceholder></span>
-
-          <span cBgColor="primary" cCol="12" cPlaceholder></span>
-          <span cBgColor="secondary" cCol="12" cPlaceholder></span>
-          <span cBgColor="success" cCol="12" cPlaceholder></span>
-          <span cBgColor="danger" cCol="12" cPlaceholder></span>
-          <span cBgColor="warning" cCol="12" cPlaceholder></span>
-          <span cBgColor="info" cCol="12" cPlaceholder></span>
-          <span cBgColor="light" cCol="12" cPlaceholder></span>
-          <span cBgColor="dark" cCol="12" cPlaceholder></span>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Placeholder</strong> <small> Sizing</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          The size of <code>&lt;CPlaceholder&gt;</code>s are based on the typographic style of
-          the parent element. Customize them with <code>size</code> prop: <code>lg</code>
-          <code>sm</code>, or <code>xs</code>.
-        </p>
-        <app-docs-example href="components/placeholder#sizing">
-          <span cCol="12" cPlaceholder cPlaceholderSize="lg"></span>
-          <span cCol="12" cPlaceholder></span>
-          <span cCol="12" cPlaceholder cPlaceholderSize="sm"></span>
-          <span cCol="12" cPlaceholder cPlaceholderSize="xs"></span>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Placeholder</strong> <small> Animation</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Animate placeholders with <code>cPlaceholderAnimation=&#34;glow&#34;</code> or
-          <code>cPlaceholderAnimation=&#34;wave&#34;</code> to better convey the perception of something
-          being <em>actively</em> loaded.
-        </p>
-        <app-docs-example href="components/placeholder#animation">
-          <p cPlaceholderAnimation="glow">
-            <span cCol="12" cPlaceholder></span>
-          </p>
-
-          <p cPlaceholderAnimation="wave">
-            <span cCol="12" cPlaceholder></span>
-          </p>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>

front/app/src/app/views/base/placeholders/placeholders.component.spec.ts

@@ -1,36 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { ButtonModule, CardModule, GridModule, UtilitiesModule } from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DocsComponentsModule } from '../../../../components';
-import { PlaceholdersComponent } from './placeholders.component';
-
-describe('PlaceholdersComponent', () => {
-  let component: PlaceholdersComponent;
-  let fixture: ComponentFixture<PlaceholdersComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [PlaceholdersComponent],
-      imports: [CardModule, GridModule, UtilitiesModule, ButtonModule, DocsComponentsModule, RouterTestingModule],
-      providers: [IconSetService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(PlaceholdersComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/placeholders/placeholders.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-placeholders',
-  templateUrl: './placeholders.component.html',
-  styleUrls: ['./placeholders.component.scss']
-})
-export class PlaceholdersComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

front/app/src/app/views/base/popovers/popovers.component.html

@@ -1,69 +0,0 @@
-<c-row ngPreserveWhitespaces>
-  <c-col xs="12">
-    <app-docs-callout href="components/popover" name="Popover"></app-docs-callout>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Popover</strong> <small>Basic example</small>
-      </c-card-header>
-      <c-card-body>
-        <app-docs-example href="components/popover">
-          <button [cPopover]="popoverHtml"
-                  cPopoverPlacement="right"
-                  [cPopoverTrigger]="'click'"
-                  [cPopoverVisible]="visible"
-                  cButton
-                  class="m-1"
-                  color="danger"
-                  size="lg">
-            Click to toggle popover
-            <ng-template #popoverHtml>
-              <h3 class="popover-header">
-                Popover Title
-              </h3>
-              <div class="popover-body">
-                And here’s some amazing content. It’s very engaging. Right?
-              </div>
-            </ng-template>
-          </button>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Popover</strong> <small>Four directions</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Four options are available: top, right, bottom, and left aligned.
-        </p>
-        <app-docs-example href="components/popover#four-directions">
-          <button [cPopoverTrigger]="'hover'" cButton [cPopover]="tooltipHtml"
-                  cPopoverPlacement="top" class="me-1"
-                  color="secondary">Popover on top
-            <ng-template #tooltipHtml>
-              <div class="popover-body">
-                Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Top!
-              </div>
-            </ng-template>
-          </button>
-          <button [cPopoverTrigger]="'hover'" cButton cPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Right!"
-                  cPopoverPlacement="right"
-                  class="me-1" color="secondary">Popover on right
-          </button>
-          <button [cPopoverTrigger]="'hover'" cButton cPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Bottom!"
-                  cPopoverPlacement="bottom"
-                  class="me-1" color="secondary">Popover on bottom
-          </button>
-          <button [cPopoverTrigger]="'hover'" cButton cPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Left!"
-                  cPopoverPlacement="left" class="me-1"
-                  color="secondary">Popover on left
-          </button>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>

front/app/src/app/views/base/popovers/popovers.component.spec.ts

@@ -1,36 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { ButtonModule, CardModule, GridModule, PopoverModule } from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DocsComponentsModule } from '../../../../components';
-import { PopoversComponent } from './popovers.component';
-
-describe('PopoversComponent', () => {
-  let component: PopoversComponent;
-  let fixture: ComponentFixture<PopoversComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [PopoversComponent],
-      imports: [CardModule, GridModule, PopoverModule, ButtonModule, DocsComponentsModule, RouterTestingModule],
-      providers: [IconSetService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(PopoversComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/popovers/popovers.component.ts

@@ -1,20 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-popovers',
-  templateUrl: './popovers.component.html',
-  styleUrls: ['./popovers.component.scss']
-})
-export class PopoversComponent implements OnInit {
-
-  visible = true;
-
-  constructor() { }
-
-  ngOnInit(): void {
-    setTimeout(() => {
-      this.visible = !this.visible;
-    }, 3000);
-  }
-
-}

front/app/src/app/views/base/progress/progress.component.html

@@ -1,197 +0,0 @@
-<c-row ngPreserveWhitespaces>
-  <c-col xs="12">
-    <app-docs-callout href="components/progress" name="Progress"></app-docs-callout>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Progress</strong> <small>Basic example</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Progress components are built with two HTML elements, some CSS to set the width, and a
-          few attributes. We don't use
-          <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">
-            the HTML5 <code>&lt;progress&gt;</code> element
-          </a>
-          , ensuring you can stack progress bars, animate them, and place text labels over them.
-        </p>
-        <app-docs-example href="components/progress">
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="0"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="25"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="50"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="75"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="100"></c-progress-bar>
-          </c-progress>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Progress</strong> <small>Labels</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Add labels to your progress bars by placing text within the
-          <code>&lt;c-progress-bar&gt;</code>.
-        </p>
-        <app-docs-example href="components/progress#labels">
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="25">25%</c-progress-bar>
-          </c-progress>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Progress</strong> <small>Height</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          We only set a <code>height</code> [value] on the <code>&lt;c-progress&gt;</code>, so if
-          you change that [value] the inner <code>&lt;c-progress-bar&gt;</code> will automatically
-          resize accordingly.
-        </p>
-        <app-docs-example href="components/progress#height">
-          <c-progress class="mb-3" height="1">
-            <c-progress-bar [value]="25"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3" height="3">
-            <c-progress-bar [value]="25"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3" height="5">
-            <c-progress-bar [value]="25"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3" height="7">
-            <c-progress-bar [value]="25"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3" height="11">
-            <c-progress-bar [value]="25"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3" height="13">
-            <c-progress-bar [value]="25"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3" height="17">
-            <c-progress-bar [value]="25"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3" height="19">
-            <c-progress-bar [value]="25"></c-progress-bar>
-          </c-progress>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Progress</strong> <small>Backgrounds</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Use <code>color</code> prop to change the appearance of individual progress bars.
-        </p>
-        <app-docs-example href="components/progress#backgrounds">
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="25" color="success"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="50" color="info"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="75" color="warning"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="100" color="danger"></c-progress-bar>
-          </c-progress>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Progress</strong> <small>Multiple bars</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Include multiple progress bars in a progress component if you need.
-        </p>
-        <app-docs-example href="components/progress#multiple-bars">
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="15">15</c-progress-bar>
-            <c-progress-bar [value]="30" color="success">30</c-progress-bar>
-            <c-progress-bar [value]="20" color="info">20</c-progress-bar>
-          </c-progress>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Progress</strong> <small>Striped</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Add <code>variant=&#34;striped&#34;</code> to any <code>&lt;c-progress-bar&gt;</code> to
-          apply a stripe via CSS gradient over the progress bar&#39;s background color.
-        </p>
-        <app-docs-example href="components/progress#striped">
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="25" color="success" variant="striped"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="50" color="info" variant="striped"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="75" color="warning" variant="striped"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3">
-            <c-progress-bar [value]="100" color="danger" variant="striped"></c-progress-bar>
-          </c-progress>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Progress</strong> <small>Animated stripes</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          The striped gradient can also be animated. Add <code>[animated]="true"</code> property to
-          <code>&lt;c-progress-bar&gt;</code> to animate the stripes right to left via CSS3
-          animations.
-        </p>
-        <app-docs-example href="components/progress#animated-stripes">
-          <c-progress class="mb-3">
-            <c-progress-bar [animated]="true" [value]="25" color="success" variant="striped"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3">
-            <c-progress-bar [animated]="true" [value]="50" color="info" variant="striped"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3">
-            <c-progress-bar [animated]="true" [value]="75" color="warning" variant="striped"></c-progress-bar>
-          </c-progress>
-          <c-progress class="mb-3">
-            <c-progress-bar [animated]="true" [value]="100" color="danger" variant="striped"></c-progress-bar>
-          </c-progress>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>

front/app/src/app/views/base/progress/progress.component.spec.ts

@@ -1,36 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { CardModule, GridModule, ProgressModule } from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DocsComponentsModule } from '../../../../components';
-import { ProgressComponent } from './progress.component';
-
-describe('ProgressComponent', () => {
-  let component: ProgressComponent;
-  let fixture: ComponentFixture<ProgressComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ProgressComponent],
-      imports: [ProgressModule, CardModule, GridModule, DocsComponentsModule, RouterTestingModule],
-      providers: [IconSetService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(ProgressComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/progress/progress.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-progress',
-  templateUrl: './progress.component.html',
-  styleUrls: ['./progress.component.scss']
-})
-export class ProgressComponent {
-
-  constructor() { }
-
-}

front/app/src/app/views/base/spinners/spinners.component.html

@@ -1,114 +0,0 @@
-<c-row ngPreserveWhitespaces>
-  <c-col xs="12">
-    <app-docs-callout href="components/spinner" name="Spinner"></app-docs-callout>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Spinner</strong> <small>Border</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Use the border spinners for a lightweight loading indicator.
-        </p>
-        <app-docs-example href="components/spinner">
-          <c-spinner></c-spinner>
-        </app-docs-example>
-        <p class="text-medium-emphasis small">
-          The border spinner uses <code>currentColor</code> for its <code>border-color</code>.
-          You can use any of our text color utilities on the standard spinner.
-        </p>
-        <app-docs-example href="components/spinner#colors">
-          <c-spinner color="primary"></c-spinner>
-          <c-spinner color="secondary"></c-spinner>
-          <c-spinner color="success"></c-spinner>
-          <c-spinner color="danger"></c-spinner>
-          <c-spinner color="warning"></c-spinner>
-          <c-spinner color="info"></c-spinner>
-          <c-spinner color="light"></c-spinner>
-          <c-spinner color="dark"></c-spinner>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Spinner</strong> <small>Growing</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          If you don&#39;tfancy a border spinner, switch to the grow spinner. While it
-          doesn&#39;t technically spin, it does repeatedly grow!
-        </p>
-        <app-docs-example href="components/spinner#growing-spinner">
-          <c-spinner variant="grow"></c-spinner>
-        </app-docs-example>
-        <p class="text-medium-emphasis small">
-          Once again, this spinner is built with <code>currentColor</code>, so you can easily
-          change its appearance. Here it is in blue, along with the supported variants.
-        </p>
-        <app-docs-example href="components/spinner#growing-spinner">
-          <c-spinner color="primary" variant="grow"></c-spinner>
-          <c-spinner color="secondary" variant="grow"></c-spinner>
-          <c-spinner color="success" variant="grow"></c-spinner>
-          <c-spinner color="danger" variant="grow"></c-spinner>
-          <c-spinner color="warning" variant="grow"></c-spinner>
-          <c-spinner color="info" variant="grow"></c-spinner>
-          <c-spinner color="light" variant="grow"></c-spinner>
-          <c-spinner color="dark" variant="grow"></c-spinner>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Spinner</strong> <small>Size</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Add <code>size=&#34;sm&#34;</code> property to make a smaller spinner that can quickly
-          be used within other components.
-        </p>
-        <app-docs-example href="components/spinner#size">
-          <c-spinner size="sm"></c-spinner>
-          <c-spinner size="sm" variant="grow"></c-spinner>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header>
-        <strong>Angular Spinner</strong> <small>Buttons</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Use spinners within buttons to indicate an action is currently processing or taking
-          place. You may also swap the text out of the spinner element and utilize button text
-          as needed.
-        </p>
-        <app-docs-example href="components/spinner#buttons">
-          <button cButton class="m-1" disabled>
-            <c-spinner aria-hidden="true" size="sm"></c-spinner>
-          </button>
-          <button cButton class="m-1" disabled>
-            <c-spinner aria-hidden="true" size="sm"></c-spinner>
-            Loading...
-          </button>
-        </app-docs-example>
-        <app-docs-example href="components/spinner#buttons">
-          <br>
-          <button cButton class="m-1" disabled>
-            <c-spinner aria-hidden="true" size="sm" variant="grow"></c-spinner>
-          </button>
-          <button cButton class="m-1" disabled>
-            <c-spinner aria-hidden="true" size="sm" variant="grow"></c-spinner>
-            Loading...
-          </button>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>

front/app/src/app/views/base/spinners/spinners.component.spec.ts

@@ -1,36 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { ButtonModule, CardModule, GridModule, SpinnerModule } from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DocsComponentsModule } from '../../../../components';
-import { SpinnersComponent } from './spinners.component';
-
-describe('SpinnersComponent', () => {
-  let component: SpinnersComponent;
-  let fixture: ComponentFixture<SpinnersComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [SpinnersComponent],
-      imports: [SpinnerModule, CardModule, GridModule, ButtonModule, DocsComponentsModule, RouterTestingModule],
-      providers: [IconSetService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(SpinnersComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/spinners/spinners.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-spinners',
-  templateUrl: './spinners.component.html',
-  styleUrls: ['./spinners.component.scss']
-})
-export class SpinnersComponent {
-
-  constructor() { }
-
-}

front/app/src/app/views/base/tables/tables.component.spec.ts

@@ -1,36 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { CardModule, GridModule, TableModule, UtilitiesModule } from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { TablesComponent } from './tables.component';
-import { DocsComponentsModule } from '../../../../components';
-
-describe('TablesComponent', () => {
-  let component: TablesComponent;
-  let fixture: ComponentFixture<TablesComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ TablesComponent ],
-      imports: [GridModule, CardModule, TableModule, GridModule, UtilitiesModule, DocsComponentsModule, RouterTestingModule],
-      providers: [IconSetService]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(TablesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/tables/tables.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-tables',
-  templateUrl: './tables.component.html',
-  styleUrls: ['./tables.component.scss']
-})
-export class TablesComponent {
-
-  constructor() { }
-
-}

front/app/src/app/views/base/tabs/tabs.component.html

@@ -1,123 +0,0 @@
-<c-row>
-  <c-col xs="12">
-    <app-docs-callout href="components/tabs" name="Tabs"></app-docs-callout>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-3">
-      <c-card-header ngPreserveWhitespaces>
-        <strong>Angular Tabs</strong> <small>underline</small>
-      </c-card-header>
-      <c-card-body>
-        <c-nav variant="tabs">
-          <c-nav-item>
-            <a [cTabContent]="tabContent1" [routerLink] [tabPaneIdx]="0" cNavLink>
-              <svg cIcon class="me-2" name="cilHome"></svg>
-              Home
-            </a>
-          </c-nav-item>
-          <c-nav-item>
-            <a [cTabContent]="tabContent1" [routerLink] [tabPaneIdx]="1" cNavLink>
-              <svg cIcon class="me-2" name="cilUser"></svg>
-              Profile
-            </a>
-          </c-nav-item>
-          <c-nav-item>
-            <a [cTabContent]="tabContent1" [routerLink] [tabPaneIdx]="2" cNavLink [disabled]="tabContent1.activeTabPaneIdx < 1">
-              <svg cIcon class="me-2" name="cilCode"></svg>
-              Contact
-            </a>
-          </c-nav-item>
-        </c-nav>
-        <c-tab-content #tabContent1="cTabContent" [activeTabPaneIdx]="0" cRounded="bottom">
-          <c-tab-pane class="p-3 preview" role="tabpanel">
-            This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
-            will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
-            content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
-          </c-tab-pane>
-          <c-tab-pane class="p-3 preview" role="tabpanel">
-            This is some placeholder content the <strong>Profile</strong> tab's associated content. Clicking another
-            tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
-            content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
-          </c-tab-pane>
-          <c-tab-pane class="p-3 preview" role="tabpanel" *ngIf="tabContent1.activeTabPaneIdx > 0">
-            This is some placeholder content the <strong>Contact</strong> tab's associated content. Clicking another
-            tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
-            content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
-          </c-tab-pane>
-        </c-tab-content>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-3">
-      <c-card-header ngPreserveWhitespaces>
-        <strong>Angular Tabs</strong> <small>tabs</small>
-      </c-card-header>
-      <c-card-body>
-        <c-nav variant="tabs">
-          <c-nav-item *ngFor="let nav of panes; index as i; first as isFirst; last as isLast">
-            <a [cTabContent]="tabContent2" [disabled]="isLast" [routerLink] [tabPaneIdx]="i"
-               cNavLink>
-              <svg cIcon class="me-2" name="cilHome"></svg>
-              {{nav.name}}
-            </a>
-          </c-nav-item>
-        </c-nav>
-        <c-tab-content #tabContent2="cTabContent" [activeTabPaneIdx]="0" cRounded="bottom">
-          <c-tab-pane *ngFor="let pane of panes; index as i;" class="p-3 preview">
-            This is some placeholder content the <strong>{{pane.name}}</strong> tab's associated content. Clicking
-            another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
-            control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered
-            navigation.
-          </c-tab-pane>
-        </c-tab-content>
-      </c-card-body>
-    </c-card>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-3">
-      <c-card-header ngPreserveWhitespaces>
-        <strong>Angular Tabs</strong> <small>pills</small>
-      </c-card-header>
-      <c-card-body>
-        <c-nav variant="pills">
-          <c-nav-item>
-            <a [cTabContent]="tabContent3" [routerLink] [tabPaneIdx]="0" cNavLink>
-              <svg cIcon class="me-2" name="cilHome"></svg>
-              Home
-            </a>
-          </c-nav-item>
-          <c-nav-item>
-            <a [cTabContent]="tabContent3" [routerLink] [tabPaneIdx]="1" cNavLink>
-              <svg cIcon class="me-2" name="cilUser"></svg>
-              Profile
-            </a>
-          </c-nav-item>
-          <c-nav-item>
-            <a [cTabContent]="tabContent3" [routerLink] [tabPaneIdx]="2" cNavLink>
-              <svg cIcon class="me-2" name="cilCode"></svg>
-              Contact
-            </a>
-          </c-nav-item>
-        </c-nav>
-        <c-tab-content #tabContent3="cTabContent" cRounded="bottom" [activeTabPaneIdx]="0">
-          <c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" role="tabpanel">
-            This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
-            will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
-            content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
-          </c-tab-pane>
-          <c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" role="tabpanel">
-            This is some placeholder content the <strong>Profile</strong> tab's associated content. Clicking another
-            tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
-            content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
-          </c-tab-pane>
-          <c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" role="tabpanel">
-            This is some placeholder content the <strong>Contact</strong> tab's associated content. Clicking another
-            tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
-            content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
-          </c-tab-pane>
-        </c-tab-content>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>

front/app/src/app/views/base/tabs/tabs.component.spec.ts

@@ -1,36 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { CardModule, GridModule, NavModule, TabsModule } from '@coreui/angular';
-import { IconModule, IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DocsComponentsModule } from '../../../../components';
-import { TabsComponent } from './tabs.component';
-
-describe('TabsComponent', () => {
-  let component: TabsComponent;
-  let fixture: ComponentFixture<TabsComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [TabsComponent],
-      imports: [TabsModule, GridModule, CardModule, IconModule, RouterTestingModule, NavModule, DocsComponentsModule],
-      providers: [IconSetService]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(TabsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

front/app/src/app/views/base/tabs/tabs.component.ts

@@ -1,18 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-tabs',
-  templateUrl: './tabs.component.html',
-  styleUrls: ['./tabs.component.scss']
-})
-export class TabsComponent {
-
-  public panes = [
-    { name: 'Home 01', id: 'tab-01' },
-    { name: 'Profile 02', id: 'tab-02' },
-    { name: 'Contact 03', id: 'tab-03' }
-  ];
-
-  constructor() { }
-
-}

front/app/src/app/views/base/tooltips/tooltips.component.html

@@ -1,59 +0,0 @@
-<c-row>
-  <c-col xs="12">
-    <app-docs-callout href="components/tooltip" name="Tooltip"></app-docs-callout>
-  </c-col>
-  <c-col xs="12">
-    <c-card class="mb-4">
-      <c-card-header ngPreserveWhitespaces>
-        <strong>Angular Tooltip</strong> <small>Basic example</small>
-      </c-card-header>
-      <c-card-body>
-        <p class="text-medium-emphasis small">
-          Hover over the links below to see tooltips:
-        </p>
-        <app-docs-example href="components/tooltip">
-          <p class="text-medium-emphasis">
-            Tight pants next level keffiyeh
-            <a cTooltip="Tooltip text" routerLink="./" [cTooltipVisible]="true"> you probably </a>
-            haven&#39;theard of them. Photo booth beard raw denim letterpress vegan messenger
-            bag stumptown. Farm-to-table seitan, mcsweeney&#39;s fixie sustainable quinoa 8-bit
-            american apparel
-            <a cTooltip="Tooltip text" routerLink="./"> have a </a>
-            terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo
-            thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney&#39;&#39;s
-            cleanse vegan chambray. A really ironic artisan
-            <a cTooltip="Tooltip text" href> whatever keytar </a>
-            scenester farm-to-table banksy Austin
-            <a cTooltip="Tooltip text" href> twitter handle </a>
-            freegan cred raw denim single-origin coffee viral.
-          </p>
-        </app-docs-example>
-        <p class="text-medium-emphasis small">
-          Hover over the buttons below to see the four tooltips directions: top, right, bottom,
-          and left.
-        </p>
-        <app-docs-example href="components/tooltip">
-          <button cButton cTooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." cTooltipPlacement="top"
-                  class="me-1" color="secondary">Tooltip on
-            top
-          </button>
-          <button cButton cTooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." cTooltipPlacement="right"
-                  class="me-1" color="secondary">Tooltip
-            on right
-          </button>
-          <button cButton cTooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
-                  cTooltipPlacement="bottom"
-                  class="me-1" color="secondary">Tooltip
-            on bottom
-          </button>
-          <button cButton [cTooltip]="tooltipContent" cTooltipPlacement="left"
-                  class="me-1" color="secondary">Tooltip on left
-            <ng-template #tooltipContent>
-              Vivamus sagittis lacus vel augue laoreet rutrum <i cTextColor="warning">faucibus</i>.
-            </ng-template>
-          </button>
-        </app-docs-example>
-      </c-card-body>
-    </c-card>
-  </c-col>
-</c-row>

front/app/src/app/views/base/tooltips/tooltips.component.spec.ts

@@ -1,36 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { ButtonModule, CardModule, GridModule, TooltipModule } from '@coreui/angular';
-import { IconSetService } from '@coreui/icons-angular';
-import { iconSubset } from '../../../icons/icon-subset';
-import { DocsComponentsModule } from '../../../../components';
-import { TooltipsComponent } from './tooltips.component';
-
-describe('TooltipsComponent', () => {
-  let component: TooltipsComponent;
-  let fixture: ComponentFixture<TooltipsComponent>;
-  let iconSetService: IconSetService;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ TooltipsComponent ],
-      imports: [CardModule, GridModule, TooltipModule, ButtonModule, DocsComponentsModule, RouterTestingModule],
-      providers: [IconSetService]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    iconSetService = TestBed.inject(IconSetService);
-    iconSetService.icons = { ...iconSubset };
-
-    fixture = TestBed.createComponent(TooltipsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});