Refactor code component into a custom element

Author: BrunnerLivio

src/app/app.module.ts

@@ -35,6 +35,7 @@ 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,
@@ -49,6 +50,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     HttpClientModule,
     PerfectScrollbarModule,
     SharedModule,
+    CustomElementsModule,
   ],
   declarations: [
     AppComponent,

src/app/custom-elements/README.md

@@ -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/code/code.component.html

@@ -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.scss

@@ -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.ts

@@ -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/custom-elements.module.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);
+  }
+}