chore: add docs-components and docs-icons, minor cleanups

Author: xidedix

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

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

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

@@ -2,9 +2,9 @@ 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']
+  selector: 'app-default-footer',
+  templateUrl: './default-footer.component.html',
+  styleUrls: ['./default-footer.component.scss']
 })
 export class DefaultFooterComponent extends FooterComponent {
   constructor() {

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

@@ -61,7 +61,7 @@
     <button [caret]="false" cDropdownToggle class="py-0 pe-0" aria-label="Open user menu">
       <c-avatar
         shape="rounded-1"
-        [size]="'md'"
+        size="md"
         src="./assets/images/avatars/8.jpg"
         status="success"
         textColor="primary"

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

@@ -25,8 +25,8 @@ import {
 import { IconDirective } from '@coreui/icons-angular';
 
 @Component({
-    selector: 'app-default-header',
-    templateUrl: './default-header.component.html',
+  selector: 'app-default-header',
+  templateUrl: './default-header.component.html',
   imports: [ContainerComponent, HeaderTogglerDirective, SidebarToggleDirective, IconDirective, HeaderNavComponent, NavItemComponent, NavLinkDirective, RouterLink, RouterLinkActive, NgTemplateOutlet, BreadcrumbRouterComponent, DropdownComponent, DropdownToggleDirective, AvatarComponent, DropdownMenuDirective, DropdownHeaderDirective, DropdownItemDirective, BadgeComponent, DropdownDividerDirective]
 })
 export class DefaultHeaderComponent extends HeaderComponent {
@@ -93,9 +93,9 @@ export class DefaultHeaderComponent extends HeaderComponent {
       message: 'Team, it\'s time for our monthly inventory check. Accurate counts ensure smooth operations. Let\'s nail it...'
     },
     {
-      id: 3,
+      id: 4,
       from: 'Ryan Miller',
-      avatar: '4.jpg',
+      avatar: '3.jpg',
       status: 'info',
       title: 'Customer Feedback Results',
       time: '3 days ago',

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

@@ -1,5 +1,6 @@
 <c-row ngPreserveWhitespaces>
   <c-col xs="12">
+    <app-docs-components href="components/accordion" title="Accordion" />
     <c-card class="mb-4">
       <c-card-header>
         <strong>Angular Accordion</strong>

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

@@ -1,21 +1,31 @@
 import { Component, inject } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, AccordionComponent, AccordionItemComponent, TemplateIdDirective, AccordionButtonDirective, BgColorDirective } from '@coreui/angular';
-import { DocsExampleComponent } from '@docs-components/public-api';
+import {
+  AccordionButtonDirective,
+  AccordionComponent,
+  AccordionItemComponent,
+  BgColorDirective,
+  CardBodyComponent,
+  CardComponent,
+  CardHeaderComponent,
+  ColComponent,
+  RowComponent,
+  TemplateIdDirective
+} from '@coreui/angular';
+import { DocsComponentsComponent, DocsExampleComponent } from '@docs-components/public-api';
 
 @Component({
-    selector: 'app-accordions',
-    templateUrl: './accordions.component.html',
-    styleUrls: ['./accordions.component.scss'],
-    imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, AccordionComponent, AccordionItemComponent, TemplateIdDirective, AccordionButtonDirective, BgColorDirective]
+  selector: 'app-accordions',
+  templateUrl: './accordions.component.html',
+  styleUrls: ['./accordions.component.scss'],
+  imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, AccordionComponent, AccordionItemComponent, TemplateIdDirective, AccordionButtonDirective, BgColorDirective, DocsComponentsComponent]
 })
 export class AccordionsComponent {
   private sanitizer = inject(DomSanitizer);
 
-
   items = [1, 2, 3, 4];
 
-  getAccordionBodyText(value: string|number) {
+  getAccordionBodyText(value: string | number) {
     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

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

@@ -1,5 +1,6 @@
 <c-row ngPreserveWhitespaces>
   <c-col class="mb-4" xs="12">
+    <app-docs-components href="components/breadcrumb" title="Breadcrumbs" />
     <c-card>
       <c-card-header>
         <strong>Angular Breadcrumbs</strong>

src/app/views/base/breadcrumbs/breadcrumbs.component.scss

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { NgClass } from '@angular/common';
-import { DocsExampleComponent } from '@docs-components/public-api';
 import {
   BreadcrumbComponent,
   BreadcrumbItemComponent,
@@ -9,14 +8,13 @@ import {
   CardComponent,
   CardHeaderComponent,
   ColComponent,
-  RowComponent,
-  TextColorDirective
+  RowComponent
 } from '@coreui/angular';
+import { DocsComponentsComponent, DocsExampleComponent } from '@docs-components/public-api';
 
 @Component({
-    templateUrl: './breadcrumbs.component.html',
-    styleUrls: ['./breadcrumbs.component.scss'],
-    imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, BreadcrumbComponent, BreadcrumbItemComponent, NgClass, BreadcrumbRouterComponent]
+  templateUrl: './breadcrumbs.component.html',
+  imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, BreadcrumbComponent, BreadcrumbItemComponent, NgClass, BreadcrumbRouterComponent, DocsComponentsComponent]
 })
 export class BreadcrumbsComponent implements OnInit {
   public items = <any>[];

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

@@ -1,5 +1,6 @@
 <c-row ngPreserveWhitespaces>
   <c-col xs="12">
+    <app-docs-components href="components/card" title="Card" />
     <c-card class="mb-4">
       <c-card-header>
         <strong>Angular Card</strong>