Merge pull request #969 from BrunnerLivio/refactor/code-component

[Refactor] TabsComponent to CodeComponent custom element

Author: kamilmysliwiec

package-lock.json

@@ -25,6 +25,7 @@
     "@angular/common": "9.1.2",
     "@angular/compiler": "9.1.2",
     "@angular/core": "9.1.2",
+    "@angular/elements": "9.1.2",
     "@angular/flex-layout": "8.0.0-beta.27",
     "@angular/forms": "9.1.2",
     "@angular/http": "7.2.16",

package.json

@@ -1,5 +1,5 @@
 import { HttpClientModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
@@ -35,20 +35,23 @@ import { BasePageComponent } from './homepage/pages/page/page.component';
 import { PipesComponent } from './homepage/pages/pipes/pipes.component';
 import { SupportComponent } from './homepage/pages/support/support.component';
 import { SharedModule } from './shared/shared.module';
+import { CustomElementsModule } from './custom-elements/custom-elements.module';
 
 const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
   suppressScrollX: true,
   wheelPropagation: true,
 };
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,
     HttpClientModule,
     PerfectScrollbarModule,
     SharedModule,
+    CustomElementsModule,
   ],
   declarations: [
     AppComponent,

src/app/app.module.ts

@@ -0,0 +1,26 @@
+# Custom Elements
+
+## <code-element>
+
+### Attributes
+
+| Attribute | Type    |
+|-----------|---------|
+| filename  | string  |
+
+### Usage
+
+```html
+<code-element filename="cat.service">
+  <pre slot="ts" class="language-typescript">
+    <code class="language-typescript">
+console.log("Hello");
+    </code>
+  </pre>
+  <pre slot="js" class="language-javascript">
+    <code class="language-javascript">
+console.log("Hello");
+    </code>
+  </pre>
+</code-element>
+```

src/app/custom-elements/README.md

@@ -0,0 +1,19 @@
+<div class="code-wrapper" [ngClass]="{ 'has-switcher': hasSwitcher }">
+  <div class="filename" *ngIf="hasSwitcher">
+    <span> {{ filename }}{{ isJsActive ? '.js' : '.ts' }} </span>
+    <div class="tabs-wrapper">
+      <span class="tab" [class.active]="isJsActive" (click)="isJsActive = true">
+        JS
+      </span>
+      <span
+        class="tab active"
+        [class.active]="!isJsActive"
+        (click)="isJsActive = false"
+      >
+        TS
+      </span>
+    </div>
+  </div>
+  <slot name="ts" *ngIf="!isJsActive"></slot>
+  <slot name="js" *ngIf="isJsActive"></slot>
+</div>

src/app/custom-elements/code/code.component.html

@@ -0,0 +1,45 @@
+@import './../../../scss/utils.scss';
+
+.tabs-wrapper {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.tab {
+  color: #dfdfdf;
+  cursor: pointer;
+  margin: 0;
+  float: right;
+  font-weight: 600;
+  height: 100%;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  &:hover:not(.active) {
+    color: #efefef;
+  }
+  &.active {
+    display: none;
+  }
+}
+
+.filename {
+  background: #151515;
+  color: #fff;
+  padding: 12px 30px;
+  margin: 35px 0 -35px;
+  display: block;
+  min-height: 25px;
+  position: relative;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  overflow: hidden;
+  font-size: 15px;
+}
+
+:host .has-switcher ::slotted(pre) {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}

src/app/custom-elements/code/code.component.scss

@@ -0,0 +1,26 @@
+import {
+  Component,
+  Input,
+  ViewEncapsulation,
+  AfterViewInit,
+  ElementRef,
+} from '@angular/core';
+
+@Component({
+  selector: 'app-code',
+  templateUrl: './code.component.html',
+  styleUrls: ['./code.component.scss'],
+  encapsulation: ViewEncapsulation.ShadowDom,
+})
+export class CodeComponent implements AfterViewInit {
+  constructor(public element: ElementRef) {}
+
+  public isJsActive = false;
+  public hasSwitcher: boolean;
+
+  @Input() public filename: string;
+
+  ngAfterViewInit() {
+    this.hasSwitcher = this.element.nativeElement.children.length > 1;
+  }
+}

src/app/custom-elements/code/code.component.ts

@@ -0,0 +1,18 @@
+import { NgModule, Injector, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CodeComponent } from './code/code.component';
+import { createCustomElement } from '@angular/elements';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [CodeComponent],
+  imports: [CommonModule],
+  entryComponents: [CodeComponent],
+  exports: [CodeComponent],
+})
+export class CustomElementsModule {
+  constructor(injector: Injector) {
+    const CodeElement = createCustomElement(CodeComponent, { injector });
+    customElements.define('code-element', CodeElement);
+  }
+}

src/app/custom-elements/custom-elements.module.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from './../../../shared/shared.module';
 import { CliLibrariesComponent } from './libraries/libaries.component';
@@ -51,6 +51,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
   declarations: [
     CliOverviewComponent,

src/app/homepage/pages/cli/cli.module.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from '../../../shared/shared.module';
 import { GlobalPrefixComponent } from './global-prefix/global-prefix.component';
@@ -37,6 +37,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
   declarations: [
     GlobalPrefixComponent,