Skip to content

Commit

Permalink
chore: update
Browse files Browse the repository at this point in the history
  • Loading branch information
splincode committed Dec 4, 2023
1 parent 3fc4a28 commit a7b6e51
Show file tree
Hide file tree
Showing 8 changed files with 271 additions and 244 deletions.
2 changes: 1 addition & 1 deletion apps/demo/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"scripts": [],
"server": "apps/demo/src/main.server.ts",
"prerender": {
"discoverRoutes": false,
"discoverRoutes": true,
"routesFile": "apps/demo/src/routes.txt"
},
"ssr": {
Expand Down
157 changes: 1 addition & 156 deletions apps/demo/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,160 +1,5 @@
<tui-root>
<h2 class="title">
Dozens of
<br />
components
</h2>
<tui-input-tag
class="tui-space_vertical-10"
[tuiHintContent]="hint"
[tuiTextfieldLabelOutside]="true"
[(ngModel)]="tags"
></tui-input-tag>

<ng-template #hint>
<span [innerHtml]="purify('Customizable for <b>any use</b> case')"></span>
</ng-template>

<div class="flex">
<div class="date">
<tui-input-date
required
[(ngModel)]="date"
(click.capture.stop)="(0)"
(keydown.capture.stop)="(0)"
(mousedown.capture.stop)="(0)"
>
Choose date
</tui-input-date>
<tui-calendar
class="calendar"
[tuiDropdownOpen]="false"
[value]="date"
(dayClick)="onDay($event)"
(event.prevent.silent)="(0)"
></tui-calendar>
</div>
<div>
<tui-checkbox-labeled
*ngFor="let label of labels"
size="l"
class="tui-space_bottom-4"
[ngModel]="label === labels[1]"
>
{{ label }}
</tui-checkbox-labeled>
</div>
<div class="controls">
<label>
<tui-toggle
size="l"
class="tui-space_right-3"
[showIcons]="true"
[(ngModel)]="notification"
></tui-toggle>
Push notification
</label>
<input
size="m"
step="any"
tuiSlider
type="range"
class="tui-space_vertical-6"
[max]="140"
[(ngModel)]="slider"
/>
<div class="icons">
<button
appearance=""
icon="tuiIconVolumeXLarge"
shape="rounded"
title="Mute speaker"
tuiIconButton
type="button"
class="button"
(click)="slider = 0"
></button>
<button
appearance=""
icon="tuiIconMicOffLarge"
shape="rounded"
title="Mute microphone"
tuiIconButton
type="button"
class="button"
></button>
<button
appearance=""
icon="tuiIconPhoneForwardedLarge"
shape="rounded"
title="Forward call"
tuiIconButton
type="button"
class="error"
(click)="call(callTemplate)"
></button>
</div>
</div>
</div>

<ng-template
#callTemplate
let-observer
>
<div class="call gradient-border">
<div class="person">
<img
alt="author"
loading="lazy"
src="https://avatars.githubusercontent.com/u/11832552"
/>
<h3>Aleksandr Inkin</h3>
</div>

<div class="buttons">
<button
appearance="custom"
iconRight="tuiIconPhone"
size="m"
tuiIconButton
class="missed"
(click)="observer.complete()"
></button>
<button
appearance="custom"
iconRight="tuiIconPhone"
size="m"
tuiIconButton
class="income"
(click)="observer.complete()"
></button>
</div>
</div>
</ng-template>

<tui-push
*tuiPush="notification"
heading="Indiana Jones"
type="Dr. Henry Walton Jones, Jr."
(close)="toggle(false)"
>
<tui-svg src="tuiIconMessageSquareLarge"></tui-svg>
I have a bad feeling about this...
<button
tuiButton
type="button"
(click)="toggle(false)"
>
Fortune
</button>
<button
tuiLink
type="button"
(click)="toggle(false)"
>
Glory
</button>
</tui-push>
<router-outlet></router-outlet>

<ng-container ngProjectAs="tuiOverContent">
<!-- Content over app content -->
Expand Down
92 changes: 5 additions & 87 deletions apps/demo/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,95 +1,13 @@
import {NgForOf} from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
inject,
SecurityContext,
TemplateRef,
ViewEncapsulation,
} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {TuiDay} from '@taiga-ui/cdk';
import {
TuiButtonModule,
TuiCalendarModule,
TuiDialogService,
TuiDropdownModule,
TuiHintModule,
TuiLinkModule,
TuiRootModule,
TuiSvgModule,
TuiTextfieldControllerModule,
} from '@taiga-ui/core';
import {
TuiCheckboxLabeledModule,
TuiInputDateModule,
TuiInputTagModule,
TuiPushModule,
TuiSliderModule,
TuiToggleModule,
} from '@taiga-ui/kit';
import {NgDompurifyModule, NgDompurifySanitizer} from '@tinkoff/ng-dompurify';
import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
import {RouterOutlet} from '@angular/router';
import {TuiRootModule} from '@taiga-ui/core';

@Component({
standalone: true,
selector: 'app',
imports: [
TuiRootModule,
NgForOf,
ReactiveFormsModule,
FormsModule,
TuiInputTagModule,
TuiToggleModule,
TuiCalendarModule,
TuiTextfieldControllerModule,
TuiInputDateModule,
TuiCheckboxLabeledModule,
TuiButtonModule,
TuiHintModule,
TuiSliderModule,
TuiSvgModule,
TuiPushModule,
TuiLinkModule,
TuiDropdownModule,
NgDompurifyModule,
],
imports: [TuiRootModule, RouterOutlet],
templateUrl: './app.component.html',
styleUrls: ['./app.component.less'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
private readonly dompurifySanitizer = inject(NgDompurifySanitizer);
private readonly dialogs = inject(TuiDialogService);
private readonly cd = inject(ChangeDetectorRef);

readonly labels = ['New', 'Read', 'Archived', 'Junk'];
tags = ['Angular', 'Open source'];
date: TuiDay | null = null;
notification = false;
slider = 80;

onDay(date: TuiDay): void {
this.date = date;
}

call(content: TemplateRef<HTMLElement>): void {
this.dialogs
.open(content, {
appearance: 'call',
closeable: false,
dismissible: false,
})
.subscribe();
}

toggle(open: boolean): void {
this.notification = open;
this.cd.detectChanges();
}

purify(value: string): string {
return this.dompurifySanitizer.sanitize(SecurityContext.HTML, value);
}
}
export class AppComponent {}
6 changes: 6 additions & 0 deletions apps/demo/src/app/app.config.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
import {ApplicationConfig, importProvidersFrom, Sanitizer} from '@angular/core';
import {provideClientHydration} from '@angular/platform-browser';
import {provideAnimations} from '@angular/platform-browser/animations';
import {provideRouter} from '@angular/router';
import {TuiDialogModule, TuiRootModule} from '@taiga-ui/core';
import {TuiPushModule} from '@taiga-ui/kit';
import {NgDompurifySanitizer} from '@tinkoff/ng-dompurify';

import {routes} from './app.routes';

export const appConfig: ApplicationConfig = {
providers: [
provideAnimations(),
provideRouter(routes),
provideClientHydration(),
importProvidersFrom(TuiRootModule, TuiDialogModule, TuiPushModule),
{
provide: Sanitizer,
Expand Down
10 changes: 10 additions & 0 deletions apps/demo/src/app/app.routes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import {Routes} from '@angular/router';

export const routes: Routes = [
{
path: ``,
pathMatch: `full`,
loadComponent: async (): Promise<any> =>
import(`./home/home.component`).then(module => module.HomeComponent),
},
];
Loading

0 comments on commit a7b6e51

Please sign in to comment.