Skip to content

Commit d2b7f10

Browse files
kamilmysliwieckamilmysliwiec
authored
Merge pull request nestjs#969 from BrunnerLivio/refactor/code-component
[Refactor] TabsComponent to CodeComponent custom element
2 parents e686d14 + da50f64 commit d2b7f10

File tree

24 files changed

+1065
-2119
lines changed

24 files changed

+1065
-2119
lines changed

‎package-lock.json‎

Lines changed: 893 additions & 1997 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@angular/common": "9.1.2",
2626
"@angular/compiler": "9.1.2",
2727
"@angular/core": "9.1.2",
28+
"@angular/elements": "9.1.2",
2829
"@angular/flex-layout": "8.0.0-beta.27",
2930
"@angular/forms": "9.1.2",
3031
"@angular/http": "7.2.16",

‎src/app/app.module.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { HttpClientModule } from '@angular/common/http';
2-
import { NgModule } from '@angular/core';
2+
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
33
import { BrowserModule } from '@angular/platform-browser';
44
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
55
import {
@@ -35,20 +35,23 @@ import { BasePageComponent } from './homepage/pages/page/page.component';
3535
import { PipesComponent } from './homepage/pages/pipes/pipes.component';
3636
import { SupportComponent } from './homepage/pages/support/support.component';
3737
import { SharedModule } from './shared/shared.module';
38+
import { CustomElementsModule } from './custom-elements/custom-elements.module';
3839

3940
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
4041
suppressScrollX: true,
4142
wheelPropagation: true,
4243
};
4344

4445
@NgModule({
46+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
4547
imports: [
4648
BrowserModule,
4749
BrowserAnimationsModule,
4850
AppRoutingModule,
4951
HttpClientModule,
5052
PerfectScrollbarModule,
5153
SharedModule,
54+
CustomElementsModule,
5255
],
5356
declarations: [
5457
AppComponent,

‎src/app/custom-elements/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Custom Elements
2+
3+
## <code-element>
4+
5+
### Attributes
6+
7+
| Attribute | Type |
8+
|-----------|---------|
9+
| filename | string |
10+
11+
### Usage
12+
13+
```html
14+
<code-element filename="cat.service">
15+
<pre slot="ts" class="language-typescript">
16+
<code class="language-typescript">
17+
console.log("Hello");
18+
</code>
19+
</pre>
20+
<pre slot="js" class="language-javascript">
21+
<code class="language-javascript">
22+
console.log("Hello");
23+
</code>
24+
</pre>
25+
</code-element>
26+
```

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div class="code-wrapper" [ngClass]="{ 'has-switcher': hasSwitcher }">
2+
<div class="filename" *ngIf="hasSwitcher">
3+
<span> {{ filename }}{{ isJsActive ? '.js' : '.ts' }} </span>
4+
<div class="tabs-wrapper">
5+
<span class="tab" [class.active]="isJsActive" (click)="isJsActive = true">
6+
JS
7+
</span>
8+
<span
9+
class="tab active"
10+
[class.active]="!isJsActive"
11+
(click)="isJsActive = false"
12+
>
13+
TS
14+
</span>
15+
</div>
16+
</div>
17+
<slot name="ts" *ngIf="!isJsActive"></slot>
18+
<slot name="js" *ngIf="isJsActive"></slot>
19+
</div>

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@import './../../../scss/utils.scss';
2+
3+
.tabs-wrapper {
4+
position: absolute;
5+
right: 0;
6+
top: 0;
7+
bottom: 0;
8+
}
9+
10+
.tab {
11+
color: #dfdfdf;
12+
cursor: pointer;
13+
margin: 0;
14+
float: right;
15+
font-weight: 600;
16+
height: 100%;
17+
padding: 12px 20px;
18+
box-sizing: border-box;
19+
-webkit-box-sizing: border-box;
20+
&:hover:not(.active) {
21+
color: #efefef;
22+
}
23+
&.active {
24+
display: none;
25+
}
26+
}
27+
28+
.filename {
29+
background: #151515;
30+
color: #fff;
31+
padding: 12px 30px;
32+
margin: 35px 0 -35px;
33+
display: block;
34+
min-height: 25px;
35+
position: relative;
36+
border-top-left-radius: 6px;
37+
border-top-right-radius: 6px;
38+
overflow: hidden;
39+
font-size: 15px;
40+
}
41+
42+
:host .has-switcher ::slotted(pre) {
43+
border-top-left-radius: 0 !important;
44+
border-top-right-radius: 0 !important;
45+
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {
2+
Component,
3+
Input,
4+
ViewEncapsulation,
5+
AfterViewInit,
6+
ElementRef,
7+
} from '@angular/core';
8+
9+
@Component({
10+
selector: 'app-code',
11+
templateUrl: './code.component.html',
12+
styleUrls: ['./code.component.scss'],
13+
encapsulation: ViewEncapsulation.ShadowDom,
14+
})
15+
export class CodeComponent implements AfterViewInit {
16+
constructor(public element: ElementRef) {}
17+
18+
public isJsActive = false;
19+
public hasSwitcher: boolean;
20+
21+
@Input() public filename: string;
22+
23+
ngAfterViewInit() {
24+
this.hasSwitcher = this.element.nativeElement.children.length > 1;
25+
}
26+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { NgModule, Injector, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { CodeComponent } from './code/code.component';
4+
import { createCustomElement } from '@angular/elements';
5+
6+
@NgModule({
7+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
8+
declarations: [CodeComponent],
9+
imports: [CommonModule],
10+
entryComponents: [CodeComponent],
11+
exports: [CodeComponent],
12+
})
13+
export class CustomElementsModule {
14+
constructor(injector: Injector) {
15+
const CodeElement = createCustomElement(CodeComponent, { injector });
16+
customElements.define('code-element', CodeElement);
17+
}
18+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { CommonModule } from '@angular/common';
2-
import { NgModule } from '@angular/core';
2+
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
33
import { RouterModule, Routes } from '@angular/router';
44
import { SharedModule } from './../../../shared/shared.module';
55
import { CliLibrariesComponent } from './libraries/libaries.component';
@@ -51,6 +51,7 @@ const routes: Routes = [
5151
];
5252

5353
@NgModule({
54+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
5455
imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
5556
declarations: [
5657
CliOverviewComponent,

‎src/app/homepage/pages/faq/faq.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { CommonModule } from '@angular/common';
2-
import { NgModule } from '@angular/core';
2+
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
33
import { RouterModule, Routes } from '@angular/router';
44
import { SharedModule } from '../../../shared/shared.module';
55
import { GlobalPrefixComponent } from './global-prefix/global-prefix.component';
@@ -37,6 +37,7 @@ const routes: Routes = [
3737
];
3838

3939
@NgModule({
40+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
4041
imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
4142
declarations: [
4243
GlobalPrefixComponent,

0 commit comments

Comments
 (0)