Changing front

front/app/src/components/docs-callout/docs-callout.component.html

@@ -0,0 +1,17 @@
+<c-callout class="bg-white:dark:bg-transparent" color="info">
+  <ng-container *ngTemplateOutlet="default"></ng-container>
+</c-callout>
+
+<ng-template #default>
+  <p *ngIf="!!name">
+  An Angular {{name}} component{{plural ? 's' : ''}} {{plural ? 'have' : 'has'}} been created as a native Angular
+  version
+  of Bootstrap {{name}}. {{name}} {{plural ? 'are' : 'is'}} delivered with some new features,
+  variants, and unique design that matches CoreUI Design System requirements.
+  </p>
+
+  <ng-content></ng-content>
+
+  <br>
+  For more information please visit our official <a href="{{href}}" target="_blank">documentation of CoreUI Components Library for Angular.</a>
+</ng-template>

front/app/src/components/docs-callout/docs-callout.component.spec.ts

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

front/app/src/components/docs-callout/docs-callout.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input } from '@angular/core';
+import packageJson from '../../../package.json';
+
+@Component({
+  selector: 'app-docs-callout',
+  templateUrl: './docs-callout.component.html',
+  styleUrls: ['./docs-callout.component.scss']
+})
+export class DocsCalloutComponent {
+
+  @Input() name: string = '';
+
+  constructor() { }
+
+  private _href: string = 'https://coreui.io/angular/docs/';
+
+  get href(): string {
+    return this._href;
+  }
+
+  @Input()
+  set href(value: string) {
+    const version = packageJson?.config?.coreui_library_short_version;
+    const docsUrl = packageJson?.config?.coreui_library_docs_url ?? 'https://coreui.io/angular/';
+    // const path: string = version ? `${version}/${value}` : `${value}`;
+    const path: string = value;
+    this._href = `${docsUrl}${path}`;
+  }
+
+  get plural() {
+    return this.name?.slice(-1) === 's';
+  }
+
+}

front/app/src/components/docs-components.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { CalloutModule, NavModule, TabsModule, UtilitiesModule } from '@coreui/angular';
+import { IconModule } from '@coreui/icons-angular';
+import { DocsExampleComponent } from './docs-example/docs-example.component';
+import { DocsLinkComponent } from './docs-link/docs-link.component';
+import { DocsCalloutComponent } from './docs-callout/docs-callout.component';
+
+@NgModule({
+  declarations: [
+    DocsExampleComponent,
+    DocsLinkComponent,
+    DocsCalloutComponent
+  ],
+  exports: [
+    DocsExampleComponent,
+    DocsLinkComponent,
+    DocsCalloutComponent
+  ],
+  imports: [
+    CommonModule,
+    NavModule,
+    IconModule,
+    RouterModule,
+    TabsModule,
+    UtilitiesModule,
+    CalloutModule
+  ]
+})
+export class DocsComponentsModule {
+}

front/app/src/components/docs-example/docs-example.component.html

@@ -0,0 +1,21 @@
+<div class="example mb-3">
+  <c-nav variant="tabs">
+    <c-nav-item>
+      <a [active]="true" [fragment]="fragment" [routerLink]="[]" cNavLink>
+        <svg cIcon class="me-2" name="cilMediaPlay"></svg>
+        Preview
+      </a>
+    </c-nav-item>
+    <c-nav-item>
+      <a [href]="href" cNavLink target="_blank">
+        <svg cIcon class="me-2" name="cilCode"></svg>
+        Code
+      </a>
+    </c-nav-item>
+  </c-nav>
+  <div class="tab-content rounded-bottom">
+    <div class="tab-pane active show p-3 preview fade">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>

front/app/src/components/docs-example/docs-example.component.spec.ts

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

front/app/src/components/docs-example/docs-example.component.ts

@@ -0,0 +1,48 @@
+import {
+  AfterContentInit,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input
+} from '@angular/core';
+
+import packageJson from '../../../package.json';
+
+@Component({
+  selector: 'app-docs-example',
+  templateUrl: './docs-example.component.html',
+  styleUrls: ['./docs-example.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DocsExampleComponent implements AfterContentInit, AfterViewInit {
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  @Input() fragment?: string;
+
+  private _href = 'https://coreui.io/angular/docs/';
+
+  get href(): string {
+    return this._href;
+  }
+
+  @Input()
+  set href(value: string) {
+    const version = packageJson?.config?.coreui_library_short_version;
+    const docsUrl = packageJson?.config?.coreui_library_docs_url ?? 'https://coreui.io/angular/';
+    // const path: string = version ? `${version}/#/${value}` : '#';
+    // const path: string = version ? `${version}/${value}` : '';
+    this._href = `${docsUrl}${value}`;
+  }
+
+  ngAfterContentInit(): void {
+    this.changeDetectorRef.detectChanges();
+  }
+
+  ngAfterViewInit(): void {
+    this.changeDetectorRef.markForCheck();
+  }
+}

front/app/src/components/docs-link/docs-link.component.html

@@ -0,0 +1,9 @@
+<div class="float-end">
+  <a href="{{href}}"
+     class="card-header-action"
+     rel="noreferrer noopener"
+     target="_blank"
+  >
+    <small class="text-medium-emphasis">{{text ?? 'docs'}}</small>
+  </a>
+</div>

front/app/src/components/docs-link/docs-link.component.spec.ts

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

front/app/src/components/docs-link/docs-link.component.ts

@@ -0,0 +1,27 @@
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-docs-link',
+  templateUrl: './docs-link.component.html',
+  styleUrls: ['./docs-link.component.scss']
+})
+export class DocsLinkComponent implements OnInit {
+
+  @Input() href?: string = 'https://coreui.io/angular/docs/';
+  @Input() name?: string;
+  @Input() text?: string;
+
+  constructor() { }
+
+  @HostBinding('class')
+  get hostClasses(): any {
+    return {
+      'float-end': true
+    };
+  }
+
+  ngOnInit(): void {
+    this.href = this.name ? `https://coreui.io/angular/docs/components/${this.name}` : this.href;
+  }
+
+}

front/app/src/components/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

front/app/src/components/public-api.ts

@@ -0,0 +1,4 @@
+export { DocsCalloutComponent } from './docs-callout/docs-callout.component'
+export { DocsExampleComponent } from './docs-example/docs-example.component'
+export { DocsLinkComponent } from './docs-link/docs-link.component'
+export * from './docs-components.module';