From e60d7267720d6a1eb04f7d529f17a2d22de65cad Mon Sep 17 00:00:00 2001 From: andriikamaldinov1 Date: Wed, 13 Sep 2023 12:07:55 +0300 Subject: [PATCH 1/3] downgrade to v15 --- base-http/base-http.service.ts | 4 ++- chip/chip.component.ts | 2 +- github-buttons/github-buttons.component.html | 2 +- github-buttons/github-buttons.component.ts | 6 ++-- github/github-stars.service.ts | 3 +- input/input.component.ts | 19 +++++------ .../accordion/accordion.component.html | 12 +++---- open-source/accordion/accordion.component.ts | 32 +++++++++++++------ open-source/accordion/accordion.service.ts | 10 +++--- open-source/footer/footer.component.html | 2 +- open-source/footer/footer.component.ts | 3 +- open-source/header/header.component.html | 8 ++--- open-source/header/header.component.ts | 13 ++++++-- open-source/scroll/scroll.service.ts | 11 +++---- .../visit-btn/visit-btn.component.html | 2 +- open-source/visit-btn/visit-btn.component.ts | 3 +- unsubscriber/unsubscriber.service.ts | 16 ++++++++++ 17 files changed, 94 insertions(+), 54 deletions(-) create mode 100644 unsubscriber/unsubscriber.service.ts diff --git a/base-http/base-http.service.ts b/base-http/base-http.service.ts index 3a3c4dc..08ae4d8 100644 --- a/base-http/base-http.service.ts +++ b/base-http/base-http.service.ts @@ -1,6 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { HttpClient } from '@angular/common/http'; -import { inject, Injectable, PLATFORM_ID, StateKey, TransferState } from '@angular/core'; +import { inject, Injectable, PLATFORM_ID } from '@angular/core'; +import { StateKey, TransferState } from '@angular/platform-browser'; + import { catchError, Observable, of, tap } from 'rxjs'; import { DOMAIN } from '../token/token'; diff --git a/chip/chip.component.ts b/chip/chip.component.ts index 817e19b..57dddc2 100644 --- a/chip/chip.component.ts +++ b/chip/chip.component.ts @@ -7,7 +7,7 @@ import { Component, Input } from '@angular/core'; styleUrls: ['./chip.component.scss'], }) export class ChipComponent { - @Input({ required: true }) + @Input() public chip!: string; @Input() public chipBgColor = 'rgba(0,0,0,0.05)'; diff --git a/github-buttons/github-buttons.component.html b/github-buttons/github-buttons.component.html index bc78256..962566c 100644 --- a/github-buttons/github-buttons.component.html +++ b/github-buttons/github-buttons.component.html @@ -4,7 +4,7 @@ [href]="jsdaddyGithub" aria-label="Navigate to github">
- Github + Github {{ title }}
{{ (countOfStarsOnGithub$ | async) || 0 }}
diff --git a/github-buttons/github-buttons.component.ts b/github-buttons/github-buttons.component.ts index 791cfc0..d16460e 100644 --- a/github-buttons/github-buttons.component.ts +++ b/github-buttons/github-buttons.component.ts @@ -1,5 +1,5 @@ import { Component, inject, Input } from '@angular/core'; -import { AsyncPipe } from '@angular/common'; +import { AsyncPipe, NgOptimizedImage } from '@angular/common'; import { Observable } from 'rxjs'; import { AssetPipe } from '../asset/asset.pipe'; import { SharedAssetPath } from '../asset/asset.path'; @@ -10,10 +10,10 @@ import { GithubStarsService } from '../github/github-stars.service'; templateUrl: './github-buttons.component.html', styleUrls: ['./github-buttons.component.scss'], standalone: true, - imports: [AsyncPipe, AssetPipe], + imports: [AsyncPipe, AssetPipe, NgOptimizedImage], }) export class GithubButtonsComponent { - @Input({ required: true }) public title!: string; + @Input() public title!: string; public readonly assetPathShared = SharedAssetPath.ROOT; public readonly jsdaddyGithub = 'https://github.com/JsDaddy/'; public readonly countOfStarsOnGithub$: Observable = diff --git a/github/github-stars.service.ts b/github/github-stars.service.ts index a3dc24b..c228f78 100644 --- a/github/github-stars.service.ts +++ b/github/github-stars.service.ts @@ -1,7 +1,8 @@ import { isPlatformServer } from '@angular/common'; -import { Injectable, PLATFORM_ID, inject, makeStateKey } from '@angular/core'; +import { Injectable, PLATFORM_ID, inject } from '@angular/core'; import { concatAll, of, reduce } from 'rxjs'; import { BaseHttpService } from '../base-http/base-http.service'; +import { makeStateKey } from '@angular/platform-browser'; @Injectable() export class GithubStarsService { diff --git a/input/input.component.ts b/input/input.component.ts index dff7c84..9ad87dd 100644 --- a/input/input.component.ts +++ b/input/input.component.ts @@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, - DestroyRef, EventEmitter, inject, Input, @@ -22,7 +21,8 @@ import { import { AssetPipe } from '../asset/asset.pipe'; import { InputPipe } from './input.pipe'; import { AutofocusDirective } from '../input/auto-focus.directive'; -import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { UnSubscriber } from '@libraries/unsubscriber/unsubscriber.service'; +import { takeUntil } from 'rxjs'; @Component({ selector: 'jsdaddy-input[placeholder]', @@ -48,10 +48,10 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; }, ], }) -export class InputComponent implements ControlValueAccessor, OnInit { +export class InputComponent extends UnSubscriber implements ControlValueAccessor, OnInit { private readonly fb = inject(FormBuilder); - @Input({ required: true }) public placeholder!: string; + @Input() public placeholder!: string; @Input() public label?: string | null; @Input() public isTextarea = false; @Input() public validators: ValidatorFn[] = []; @@ -64,15 +64,12 @@ export class InputComponent implements ControlValueAccessor, OnInit { public control: FormControl = this.fb.control(null); private cdr = inject(ChangeDetectorRef); - private readonly destroyRef = inject(DestroyRef); public ngOnInit(): void { - this.control.valueChanges - .pipe(takeUntilDestroyed(this.destroyRef)) - .subscribe((value: string) => { - this.onChange && this.onChange(value); - this.cdr.detectChanges(); - }); + this.control.valueChanges.pipe(takeUntil(this.unsubscribe$$)).subscribe((value: string) => { + this.onChange && this.onChange(value); + this.cdr.detectChanges(); + }); } // eslint-disable-next-line @typescript-eslint/no-explicit-any diff --git a/open-source/accordion/accordion.component.html b/open-source/accordion/accordion.component.html index 19507ec..d87c3c0 100644 --- a/open-source/accordion/accordion.component.html +++ b/open-source/accordion/accordion.component.html @@ -6,13 +6,13 @@ class="white-chevron" width="18" height="18" - [src]="'white-chevron-down' | asset: openSourceAccordionPath" + [ngSrc]="'white-chevron-down' | asset: openSourceAccordionPath" alt="Chevron white" /> Chevron yellow Navigation @@ -29,13 +29,13 @@ Accordion white Accordion yellow @@ -46,13 +46,13 @@ Chevron white Chevron yellow diff --git a/open-source/accordion/accordion.component.ts b/open-source/accordion/accordion.component.ts index 0f26a17..f3fd5b0 100644 --- a/open-source/accordion/accordion.component.ts +++ b/open-source/accordion/accordion.component.ts @@ -1,7 +1,6 @@ import { AfterViewInit, Component, - DestroyRef, ElementRef, EventEmitter, inject, @@ -12,7 +11,14 @@ import { ViewChild, ViewChildren, } from '@angular/core'; -import { DOCUMENT, isPlatformServer, NgClass, NgFor, NgStyle } from '@angular/common'; +import { + DOCUMENT, + isPlatformServer, + NgClass, + NgFor, + NgOptimizedImage, + NgStyle, +} from '@angular/common'; import { IListItem } from './content.interfaces'; import { AssetPipe } from '../../asset/asset.pipe'; import { HidePipe } from '../hide/hide.pipe'; @@ -20,20 +26,29 @@ import { VisitBtnComponent } from '../visit-btn/visit-btn.component'; import { ColorPipe } from '../color/color.pipe'; import { TrackByService } from '../../track-by/track-by.service'; import { ActivatedRoute, Router } from '@angular/router'; -import { filter, fromEvent } from 'rxjs'; +import { filter, fromEvent, takeUntil } from 'rxjs'; import { BodyStylesService } from '../../body-styles/body-styles.service'; import { OpenSourcePath } from '../path/open-source.path'; -import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { UnSubscriber } from '@libraries/unsubscriber/unsubscriber.service'; @Component({ selector: 'jsdaddy-open-source-accordion', templateUrl: './accordion.component.html', styleUrls: ['./accordion.component.scss'], - imports: [NgClass, NgFor, NgStyle, AssetPipe, HidePipe, VisitBtnComponent, ColorPipe], + imports: [ + NgClass, + NgFor, + NgStyle, + AssetPipe, + HidePipe, + VisitBtnComponent, + ColorPipe, + NgOptimizedImage, + ], standalone: true, providers: [BodyStylesService], }) -export class AccordionComponent implements AfterViewInit { +export class AccordionComponent extends UnSubscriber implements AfterViewInit { @Input() public lists!: IListItem[]; @Output() public switchCardIndex = new EventEmitter(); @@ -52,7 +67,6 @@ export class AccordionComponent implements AfterViewInit { private readonly router = inject(Router); private readonly platformId = inject(PLATFORM_ID); private readonly document = inject(DOCUMENT); - private readonly destroyRef = inject(DestroyRef); public ngAfterViewInit(): void { fromEvent(window, 'click') @@ -62,12 +76,12 @@ export class AccordionComponent implements AfterViewInit { this.showAccordion && event?.target !== this.accordionBlockElement.nativeElement ), - takeUntilDestroyed(this.destroyRef) + takeUntil(this.unsubscribe$$) ) .subscribe(() => this.showAccordionBlock()); this.openFirstAccordion(); this.activatedRoute.fragment - .pipe(filter(Boolean), takeUntilDestroyed(this.destroyRef)) + .pipe(filter(Boolean), takeUntil(this.unsubscribe$$)) .subscribe((itemId) => { this.itemInAccordion = Number(itemId); }); diff --git a/open-source/accordion/accordion.service.ts b/open-source/accordion/accordion.service.ts index 06af597..2c77d43 100644 --- a/open-source/accordion/accordion.service.ts +++ b/open-source/accordion/accordion.service.ts @@ -1,18 +1,18 @@ -import { DestroyRef, ElementRef, inject, Injectable, PLATFORM_ID, QueryList } from '@angular/core'; +import { ElementRef, inject, Injectable, PLATFORM_ID, QueryList } from '@angular/core'; import { DOCUMENT, isPlatformServer } from '@angular/common'; -import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { takeUntil } from 'rxjs'; +import { UnSubscriber } from '@libraries/unsubscriber/unsubscriber.service'; @Injectable() -export class AccordionService { +export class AccordionService extends UnSubscriber { private readonly platformId = inject(PLATFORM_ID); private readonly document = inject(DOCUMENT); - private readonly destroyRef = inject(DestroyRef); public onChangeAccordion(cards: QueryList): void { if (isPlatformServer(this.platformId)) { return; } - cards.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((elementRef) => { + cards.changes.pipe(takeUntil(this.unsubscribe$$)).subscribe((elementRef) => { const firstNativeElement: HTMLElement | null = this.document.getElementById( elementRef.first.nativeElement.id ); diff --git a/open-source/footer/footer.component.html b/open-source/footer/footer.component.html index 40f6a39..95bb38f 100644 --- a/open-source/footer/footer.component.html +++ b/open-source/footer/footer.component.html @@ -2,7 +2,7 @@ All rights reserved diff --git a/open-source/footer/footer.component.ts b/open-source/footer/footer.component.ts index a0d01ec..560e9bf 100644 --- a/open-source/footer/footer.component.ts +++ b/open-source/footer/footer.component.ts @@ -1,13 +1,14 @@ import { Component } from '@angular/core'; import { AssetPipe } from '../../asset/asset.pipe'; import { OpenSourcePath } from '../path/open-source.path'; +import { NgOptimizedImage } from '@angular/common'; @Component({ selector: 'jsdaddy-open-source-footer', templateUrl: './footer.component.html', styleUrls: ['./footer.component.scss'], standalone: true, - imports: [AssetPipe], + imports: [AssetPipe, NgOptimizedImage], }) export class FooterComponent { public readonly openSourceFooterPath = OpenSourcePath.FOOTER; diff --git a/open-source/header/header.component.html b/open-source/header/header.component.html index fdddc4b..debb956 100644 --- a/open-source/header/header.component.html +++ b/open-source/header/header.component.html @@ -8,7 +8,7 @@ @@ -24,19 +24,19 @@
- Burger + Burger
Logo JsDaddy Close
diff --git a/open-source/header/header.component.ts b/open-source/header/header.component.ts index cf15ed0..a7eb738 100644 --- a/open-source/header/header.component.ts +++ b/open-source/header/header.component.ts @@ -1,5 +1,5 @@ import { Component, inject, Input } from '@angular/core'; -import { NgClass, NgFor, NgIf } from '@angular/common'; +import { NgClass, NgFor, NgIf, NgOptimizedImage } from '@angular/common'; import { ColorPipe } from '../color/color.pipe'; import { HidePipe } from '../hide/hide.pipe'; import { VisitBtnComponent } from '../visit-btn/visit-btn.component'; @@ -15,7 +15,16 @@ import { OpenSourcePath } from '../path/open-source.path'; templateUrl: './header.component.html', styleUrls: ['./header.component.scss'], standalone: true, - imports: [NgFor, NgIf, NgClass, AssetPipe, ColorPipe, HidePipe, VisitBtnComponent], + imports: [ + NgFor, + NgIf, + NgClass, + AssetPipe, + ColorPipe, + HidePipe, + VisitBtnComponent, + NgOptimizedImage, + ], providers: [BodyStylesService], }) export class HeaderComponent { diff --git a/open-source/scroll/scroll.service.ts b/open-source/scroll/scroll.service.ts index 3fccf55..17ac685 100644 --- a/open-source/scroll/scroll.service.ts +++ b/open-source/scroll/scroll.service.ts @@ -1,24 +1,23 @@ -import { DestroyRef, ElementRef, inject, Injectable, PLATFORM_ID, QueryList } from '@angular/core'; -import { BehaviorSubject, debounceTime, fromEvent } from 'rxjs'; +import { ElementRef, inject, Injectable, PLATFORM_ID, QueryList } from '@angular/core'; +import { BehaviorSubject, debounceTime, fromEvent, takeUntil } from 'rxjs'; import { Router } from '@angular/router'; import { DOCUMENT, isPlatformServer } from '@angular/common'; -import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { UnSubscriber } from '@libraries/unsubscriber/unsubscriber.service'; @Injectable() -export class ScrollService { +export class ScrollService extends UnSubscriber { private readonly activeCardId$$: BehaviorSubject = new BehaviorSubject(1); private readonly router = inject(Router); private readonly minusTopHeight = 300; private readonly minusTopMobileHeight = 150; private readonly document = inject(DOCUMENT); private readonly platformId = inject(PLATFORM_ID); - private readonly destroyRef = inject(DestroyRef); public readonly activeCard$ = this.activeCardId$$.asObservable(); public onScroll(cards: QueryList): void { fromEvent(document, 'scroll') - .pipe(debounceTime(100), takeUntilDestroyed(this.destroyRef)) + .pipe(debounceTime(100), takeUntil(this.unsubscribe$$)) .subscribe(() => { const scrollIdCard = cards.find((e) => this.isInViewport(e.nativeElement)) ?.nativeElement.id; diff --git a/open-source/visit-btn/visit-btn.component.html b/open-source/visit-btn/visit-btn.component.html index 56e0dd3..12c777b 100644 --- a/open-source/visit-btn/visit-btn.component.html +++ b/open-source/visit-btn/visit-btn.component.html @@ -4,7 +4,7 @@ Chevron button diff --git a/open-source/visit-btn/visit-btn.component.ts b/open-source/visit-btn/visit-btn.component.ts index 296d0ec..3f3ae8f 100644 --- a/open-source/visit-btn/visit-btn.component.ts +++ b/open-source/visit-btn/visit-btn.component.ts @@ -2,13 +2,14 @@ import { Component } from '@angular/core'; import { AssetPipe } from '../../asset/asset.pipe'; import { LinkPath } from '../../link/link.path'; import { OpenSourcePath } from '../path/open-source.path'; +import { NgOptimizedImage } from '@angular/common'; @Component({ selector: 'jsdaddy-open-source-visit-btn', templateUrl: './visit-btn.component.html', styleUrls: ['./visit-btn.component.scss'], standalone: true, - imports: [AssetPipe], + imports: [AssetPipe, NgOptimizedImage], }) export class VisitBtnComponent { public readonly jsDaddyWebsite = LinkPath.WEBSITE_JSDDADY; diff --git a/unsubscriber/unsubscriber.service.ts b/unsubscriber/unsubscriber.service.ts new file mode 100644 index 0000000..942fbb4 --- /dev/null +++ b/unsubscriber/unsubscriber.service.ts @@ -0,0 +1,16 @@ +import { Injectable, OnDestroy } from '@angular/core'; +import { Subject } from 'rxjs'; + +@Injectable() +export class UnSubscriber implements OnDestroy { + public _unsubscribe$$ = new Subject(); + + public get unsubscribe$$() { + return this._unsubscribe$$.asObservable(); + } + + public ngOnDestroy(): void { + this._unsubscribe$$.next(true); + this._unsubscribe$$.complete(); + } +} From 63357c562893a61235be5dc0eb8409dd996a9529 Mon Sep 17 00:00:00 2001 From: andriikamaldinov1 Date: Wed, 13 Sep 2023 12:15:14 +0300 Subject: [PATCH 2/3] downgrade to v15 --- github-buttons/github-buttons.component.html | 2 +- input/input.component.html | 4 ++-- open-source/accordion/accordion.component.html | 14 +++++++------- open-source/footer/footer.component.html | 2 +- open-source/header/header.component.html | 16 ++++++++++------ open-source/visit-btn/visit-btn.component.html | 2 +- 6 files changed, 22 insertions(+), 18 deletions(-) diff --git a/github-buttons/github-buttons.component.html b/github-buttons/github-buttons.component.html index 962566c..86dfef9 100644 --- a/github-buttons/github-buttons.component.html +++ b/github-buttons/github-buttons.component.html @@ -4,7 +4,7 @@ [href]="jsdaddyGithub" aria-label="Navigate to github">
- Github + Github {{ title }}
{{ (countOfStarsOnGithub$ | async) || 0 }}
diff --git a/input/input.component.html b/input/input.component.html index b40ef54..34ee242 100644 --- a/input/input.component.html +++ b/input/input.component.html @@ -1,4 +1,4 @@ -
+
+ [src]="'done-yellow' | asset : additionalPath" />
diff --git a/open-source/accordion/accordion.component.html b/open-source/accordion/accordion.component.html index d87c3c0..d168b19 100644 --- a/open-source/accordion/accordion.component.html +++ b/open-source/accordion/accordion.component.html @@ -6,13 +6,13 @@ class="white-chevron" width="18" height="18" - [ngSrc]="'white-chevron-down' | asset: openSourceAccordionPath" + [ngSrc]="'white-chevron-down' | asset : openSourceAccordionPath" alt="Chevron white" /> Chevron yellow Navigation
@@ -29,13 +29,13 @@ Accordion white Accordion yellow @@ -46,13 +46,13 @@ Chevron white Chevron yellow @@ -61,7 +61,7 @@

{{ item.content }}

diff --git a/open-source/footer/footer.component.html b/open-source/footer/footer.component.html index 95bb38f..7da2417 100644 --- a/open-source/footer/footer.component.html +++ b/open-source/footer/footer.component.html @@ -2,7 +2,7 @@ All rights reserved diff --git a/open-source/header/header.component.html b/open-source/header/header.component.html index debb956..f2acfdc 100644 --- a/open-source/header/header.component.html +++ b/open-source/header/header.component.html @@ -8,14 +8,14 @@
- +
- Burger + Burger
Logo JsDaddy Close
@@ -45,7 +49,7 @@

Repositories

+ [ngClass]="activeLink | color : item.link"> From 353d6584271b60d8a8d32facf7fabac73e365bf2 Mon Sep 17 00:00:00 2001 From: andriikamaldinov1 Date: Mon, 18 Sep 2023 13:44:17 +0300 Subject: [PATCH 3/3] v13 --- asset/asset.pipe.ts | 1 - base-http/base-http.service.ts | 14 ++- chip/chip.component.ts | 3 +- github-buttons/github-buttons.component.html | 22 ++-- github-buttons/github-buttons.component.ts | 14 +-- input/auto-focus.directive.ts | 1 - input/input.component.ts | 15 --- input/input.pipe.ts | 1 - libraries.module.ts | 56 +++++++++ .../accordion/accordion.component.html | 78 ++++++------ open-source/accordion/accordion.component.ts | 58 ++++----- open-source/accordion/content.interfaces.ts | 12 +- open-source/color/color.pipe.ts | 1 - open-source/footer/footer.component.html | 12 +- open-source/footer/footer.component.ts | 4 - open-source/header/header.component.html | 113 +++++++++--------- open-source/header/header.component.ts | 28 ++--- open-source/hide/hide.pipe.ts | 1 - open-source/is-empty/is-empty.pipe.ts | 1 - .../sub-header/sub-header.component.html | 6 +- .../sub-header/sub-header.component.ts | 12 +- .../visit-btn/visit-btn.component.html | 20 ++-- open-source/visit-btn/visit-btn.component.ts | 4 - 23 files changed, 241 insertions(+), 236 deletions(-) create mode 100644 libraries.module.ts diff --git a/asset/asset.pipe.ts b/asset/asset.pipe.ts index 90f7ee9..05fac0b 100644 --- a/asset/asset.pipe.ts +++ b/asset/asset.pipe.ts @@ -2,7 +2,6 @@ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'asset', - standalone: true, }) export class AssetPipe implements PipeTransform { public transform(nameImg: string | undefined, additionalPath = '', isWebp = false): string { diff --git a/base-http/base-http.service.ts b/base-http/base-http.service.ts index 08ae4d8..c357643 100644 --- a/base-http/base-http.service.ts +++ b/base-http/base-http.service.ts @@ -1,6 +1,6 @@ import { isPlatformBrowser } from '@angular/common'; import { HttpClient } from '@angular/common/http'; -import { inject, Injectable, PLATFORM_ID } from '@angular/core'; +import { inject, Injectable, InjectionToken, PLATFORM_ID } from '@angular/core'; import { StateKey, TransferState } from '@angular/platform-browser'; import { catchError, Observable, of, tap } from 'rxjs'; @@ -9,9 +9,15 @@ import { DOMAIN } from '../token/token'; @Injectable() export class BaseHttpService { private readonly domain = inject(DOMAIN); - private readonly http = inject(HttpClient); - private readonly platformId = inject(PLATFORM_ID); - private readonly transferState = inject(TransferState); + // private readonly http = inject(HttpClient); + // private readonly platformId = inject(PLATFORM_ID); + // private readonly transferState = inject(TransferState); + + public constructor( + private readonly http: HttpClient, + private readonly transferState: TransferState, + private readonly platformId: InjectionToken + ) {} public getData(path: string, defaultValue: T, key: StateKey): Observable { if (key) { diff --git a/chip/chip.component.ts b/chip/chip.component.ts index 57dddc2..aa10630 100644 --- a/chip/chip.component.ts +++ b/chip/chip.component.ts @@ -1,8 +1,7 @@ import { Component, Input } from '@angular/core'; @Component({ - selector: 'jsdaddy-chip[chip]', - standalone: true, + selector: 'jsdaddy-chip', templateUrl: './chip.component.html', styleUrls: ['./chip.component.scss'], }) diff --git a/github-buttons/github-buttons.component.html b/github-buttons/github-buttons.component.html index 86dfef9..d406c77 100644 --- a/github-buttons/github-buttons.component.html +++ b/github-buttons/github-buttons.component.html @@ -1,11 +1,11 @@ - -
- Github - {{ title }} -
-
{{ (countOfStarsOnGithub$ | async) || 0 }}
- + + + + + + + + + + + diff --git a/github-buttons/github-buttons.component.ts b/github-buttons/github-buttons.component.ts index d16460e..6c6f29d 100644 --- a/github-buttons/github-buttons.component.ts +++ b/github-buttons/github-buttons.component.ts @@ -1,7 +1,5 @@ -import { Component, inject, Input } from '@angular/core'; -import { AsyncPipe, NgOptimizedImage } from '@angular/common'; +import { Component, Input } from '@angular/core'; import { Observable } from 'rxjs'; -import { AssetPipe } from '../asset/asset.pipe'; import { SharedAssetPath } from '../asset/asset.path'; import { GithubStarsService } from '../github/github-stars.service'; @@ -9,13 +7,15 @@ import { GithubStarsService } from '../github/github-stars.service'; selector: 'jsdaddy-github-buttons[title]', templateUrl: './github-buttons.component.html', styleUrls: ['./github-buttons.component.scss'], - standalone: true, - imports: [AsyncPipe, AssetPipe, NgOptimizedImage], }) export class GithubButtonsComponent { @Input() public title!: string; public readonly assetPathShared = SharedAssetPath.ROOT; public readonly jsdaddyGithub = 'https://github.com/JsDaddy/'; - public readonly countOfStarsOnGithub$: Observable = - inject(GithubStarsService).getAllStars(); + // public readonly countOfStarsOnGithub$: Observable = + // inject(GithubStarsService).getAllStars(); + public readonly countOfStarsOnGithub$: Observable; + public constructor(public readonly githubStarsService: GithubStarsService) { + this.countOfStarsOnGithub$ = this.githubStarsService.getAllStars(); + } } diff --git a/input/auto-focus.directive.ts b/input/auto-focus.directive.ts index 69121d6..b65eb3d 100644 --- a/input/auto-focus.directive.ts +++ b/input/auto-focus.directive.ts @@ -2,7 +2,6 @@ import { Directive, ElementRef, inject, Input } from '@angular/core'; @Directive({ selector: '[jsdaddyAutofocus]', - standalone: true, }) export class AutofocusDirective { @Input() diff --git a/input/input.component.ts b/input/input.component.ts index 9ad87dd..658245a 100644 --- a/input/input.component.ts +++ b/input/input.component.ts @@ -1,4 +1,3 @@ -import { NgClass, NgIf, UpperCasePipe } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, @@ -15,27 +14,13 @@ import { FormBuilder, FormControl, NG_VALUE_ACCESSOR, - ReactiveFormsModule, ValidatorFn, } from '@angular/forms'; -import { AssetPipe } from '../asset/asset.pipe'; -import { InputPipe } from './input.pipe'; -import { AutofocusDirective } from '../input/auto-focus.directive'; import { UnSubscriber } from '@libraries/unsubscriber/unsubscriber.service'; import { takeUntil } from 'rxjs'; @Component({ selector: 'jsdaddy-input[placeholder]', - standalone: true, - imports: [ - NgClass, - NgIf, - ReactiveFormsModule, - UpperCasePipe, - AssetPipe, - InputPipe, - AutofocusDirective, - ], templateUrl: './input.component.html', styleUrls: ['./input.component.scss'], encapsulation: ViewEncapsulation.Emulated, diff --git a/input/input.pipe.ts b/input/input.pipe.ts index a649e84..bca12db 100644 --- a/input/input.pipe.ts +++ b/input/input.pipe.ts @@ -3,7 +3,6 @@ import { FormControl } from '@angular/forms'; @Pipe({ name: 'input', - standalone: true, pure: false, }) export class InputPipe implements PipeTransform { diff --git a/libraries.module.ts b/libraries.module.ts new file mode 100644 index 0000000..82c0da1 --- /dev/null +++ b/libraries.module.ts @@ -0,0 +1,56 @@ +import { NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; + +import { AssetPipe } from '@libraries/asset/asset.pipe'; +import { BaseHttpService } from '@libraries/base-http/base-http.service'; +import { BodyStylesService } from '@libraries/body-styles/body-styles.service'; +import { ChipComponent } from '@libraries/chip/chip.component'; +import { GithubStarsService } from '@libraries/github/github-stars.service'; +import { GithubButtonsComponent } from '@libraries/github-buttons/github-buttons.component'; +import { InputPipe } from '@libraries/input/input.pipe'; +import { InputComponent } from '@libraries/input/input.component'; +import { AutofocusDirective } from '@libraries/input/auto-focus.directive'; +import { TrackByService } from '@libraries/track-by/track-by.service'; +import { UnSubscriber } from '@libraries/unsubscriber/unsubscriber.service'; +import { AccordionService } from '@open-source/accordion/accordion.service'; +import { AccordionComponent } from '@open-source/accordion/accordion.component'; +import { ColorPipe } from '@open-source/color/color.pipe'; +import { FooterComponent } from '@open-source/footer/footer.component'; +import { HeaderComponent } from '@open-source/header/header.component'; +import { HidePipe } from '@open-source/hide/hide.pipe'; +import { IsEmptyPipe } from '@open-source/is-empty/is-empty.pipe'; +import { ScrollService } from '@open-source/scroll/scroll.service'; +import { SubHeaderComponent } from '@open-source/sub-header/sub-header.component'; +import { VisitBtnComponent } from '@open-source/visit-btn/visit-btn.component'; +import { CommonModule } from '@angular/common'; + +@NgModule({ + declarations: [ + AssetPipe, + ChipComponent, + GithubButtonsComponent, + InputPipe, + InputComponent, + AutofocusDirective, + AccordionComponent, + ColorPipe, + FooterComponent, + HeaderComponent, + HidePipe, + IsEmptyPipe, + SubHeaderComponent, + VisitBtnComponent, + ], + imports: [CommonModule, FormsModule, ReactiveFormsModule], + providers: [ + BaseHttpService, + BodyStylesService, + GithubStarsService, + TrackByService, + UnSubscriber, + AccordionService, + ScrollService, + ], + exports: [FooterComponent, SubHeaderComponent, AccordionComponent, HeaderComponent], +}) +export class LibrariesModule {} diff --git a/open-source/accordion/accordion.component.html b/open-source/accordion/accordion.component.html index d168b19..be76454 100644 --- a/open-source/accordion/accordion.component.html +++ b/open-source/accordion/accordion.component.html @@ -2,64 +2,64 @@ class="navigation row jc-sb ai-c bg-black pointer full-white" (click)="showAccordionBlock(); $event.stopPropagation()" [ngClass]="showAccordion | hide"> - Chevron white - Chevron yellow + + + + + + + + + + + + Navigation
- Accordion white - Accordion yellow + + + + + + + + + + + +
- Chevron white - Chevron yellow + + + + + + + + + + + +

@@ -68,7 +68,7 @@

- +
diff --git a/open-source/accordion/accordion.component.ts b/open-source/accordion/accordion.component.ts index f3fd5b0..a2de58d 100644 --- a/open-source/accordion/accordion.component.ts +++ b/open-source/accordion/accordion.component.ts @@ -3,27 +3,13 @@ import { Component, ElementRef, EventEmitter, - inject, Input, Output, - PLATFORM_ID, QueryList, ViewChild, ViewChildren, } from '@angular/core'; -import { - DOCUMENT, - isPlatformServer, - NgClass, - NgFor, - NgOptimizedImage, - NgStyle, -} from '@angular/common'; import { IListItem } from './content.interfaces'; -import { AssetPipe } from '../../asset/asset.pipe'; -import { HidePipe } from '../hide/hide.pipe'; -import { VisitBtnComponent } from '../visit-btn/visit-btn.component'; -import { ColorPipe } from '../color/color.pipe'; import { TrackByService } from '../../track-by/track-by.service'; import { ActivatedRoute, Router } from '@angular/router'; import { filter, fromEvent, takeUntil } from 'rxjs'; @@ -35,18 +21,7 @@ import { UnSubscriber } from '@libraries/unsubscriber/unsubscriber.service'; selector: 'jsdaddy-open-source-accordion', templateUrl: './accordion.component.html', styleUrls: ['./accordion.component.scss'], - imports: [ - NgClass, - NgFor, - NgStyle, - AssetPipe, - HidePipe, - VisitBtnComponent, - ColorPipe, - NgOptimizedImage, - ], - standalone: true, - providers: [BodyStylesService], + providers: [BodyStylesService, TrackByService], }) export class AccordionComponent extends UnSubscriber implements AfterViewInit { @Input() public lists!: IListItem[]; @@ -60,13 +35,22 @@ export class AccordionComponent extends UnSubscriber implements AfterViewInit { public itemInAccordion = 1; public readonly openSourceAccordionPath = OpenSourcePath.ACCORDION; - public readonly trackByPath = inject(TrackByService).trackBy('id'); - public readonly bodyStylesService = inject(BodyStylesService); + // public readonly trackByPath = inject(TrackByService).trackBy('id'); + // public readonly bodyStylesService = inject(BodyStylesService); + // + // private readonly activatedRoute = inject(ActivatedRoute); + // private readonly router = inject(Router); + // private readonly platformId = inject(PLATFORM_ID); + // private readonly document = inject(DOCUMENT); - private readonly activatedRoute = inject(ActivatedRoute); - private readonly router = inject(Router); - private readonly platformId = inject(PLATFORM_ID); - private readonly document = inject(DOCUMENT); + public constructor( + public readonly trackByPath: TrackByService, + public readonly bodyStylesService: BodyStylesService, + private readonly activatedRoute: ActivatedRoute, + private readonly router: Router + ) { + super(); + } public ngAfterViewInit(): void { fromEvent(window, 'click') @@ -104,9 +88,9 @@ export class AccordionComponent extends UnSubscriber implements AfterViewInit { } public anchorScroll(idItem: number, scrollTo: string | undefined): void { - if (isPlatformServer(this.platformId)) { - return; - } + // if (isPlatformServer(this.platformId)) { + // return; + // } this.itemInAccordion = idItem; this.router.navigate(['/'], { fragment: idItem.toString(), @@ -114,7 +98,9 @@ export class AccordionComponent extends UnSubscriber implements AfterViewInit { if (!scrollTo) { return; } - const anchor: HTMLElement | null = this.document.getElementById(scrollTo); + // const anchor: HTMLElement | null = this.document.getElementById(scrollTo); + const anchor: HTMLElement | null = document.getElementById(scrollTo); + if (anchor) { anchor.scrollIntoView({ behavior: 'smooth', block: 'start' }); } diff --git a/open-source/accordion/content.interfaces.ts b/open-source/accordion/content.interfaces.ts index 411f335..3d5ebeb 100644 --- a/open-source/accordion/content.interfaces.ts +++ b/open-source/accordion/content.interfaces.ts @@ -1,5 +1,5 @@ -import { UntypedFormControl } from '@angular/forms'; -import { InputTransformFn, OutputTransformFn } from 'ngx-mask'; +import { FormControl } from '@angular/forms'; +// import { InputTransformFn, OutputTransformFn } from 'ngx-mask'; export interface IComDoc { header: string; @@ -10,7 +10,9 @@ export interface IComDoc { } export interface IControl { - form: UntypedFormControl; + // form: UntypedFormControl; + form: FormControl; + model: string; } @@ -52,8 +54,8 @@ export interface IMaskOptions { _decimalMarker: string | string[]; _thousandSeparator: string; _keepCharacterPositions: boolean; - _inputTransformFn: InputTransformFn; - _outputTransformFn: OutputTransformFn; + // _inputTransformFn: InputTransformFn; + // _outputTransformFn: OutputTransformFn; } export type TExample = { diff --git a/open-source/color/color.pipe.ts b/open-source/color/color.pipe.ts index cdd38c2..db27ee7 100644 --- a/open-source/color/color.pipe.ts +++ b/open-source/color/color.pipe.ts @@ -2,7 +2,6 @@ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'color', - standalone: true, }) export class ColorPipe implements PipeTransform { public transform( diff --git a/open-source/footer/footer.component.html b/open-source/footer/footer.component.html index 7da2417..ed7a521 100644 --- a/open-source/footer/footer.component.html +++ b/open-source/footer/footer.component.html @@ -1,8 +1,8 @@
- All rights reserved + + + + + +
diff --git a/open-source/footer/footer.component.ts b/open-source/footer/footer.component.ts index 560e9bf..2a0b3aa 100644 --- a/open-source/footer/footer.component.ts +++ b/open-source/footer/footer.component.ts @@ -1,14 +1,10 @@ import { Component } from '@angular/core'; -import { AssetPipe } from '../../asset/asset.pipe'; import { OpenSourcePath } from '../path/open-source.path'; -import { NgOptimizedImage } from '@angular/common'; @Component({ selector: 'jsdaddy-open-source-footer', templateUrl: './footer.component.html', styleUrls: ['./footer.component.scss'], - standalone: true, - imports: [AssetPipe, NgOptimizedImage], }) export class FooterComponent { public readonly openSourceFooterPath = OpenSourcePath.FOOTER; diff --git a/open-source/header/header.component.html b/open-source/header/header.component.html index f2acfdc..bef2a45 100644 --- a/open-source/header/header.component.html +++ b/open-source/header/header.component.html @@ -1,64 +1,63 @@ -
-
- -
-
- + +
+ +
+
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + +
+

Repositories

+
+ -
- Burger -
-
- Logo JsDaddy - Close -
-
-

Repositories

-
- -
- -
+
+
+
+ diff --git a/open-source/header/header.component.ts b/open-source/header/header.component.ts index a7eb738..e1f4763 100644 --- a/open-source/header/header.component.ts +++ b/open-source/header/header.component.ts @@ -1,10 +1,6 @@ -import { Component, inject, Input } from '@angular/core'; -import { NgClass, NgFor, NgIf, NgOptimizedImage } from '@angular/common'; -import { ColorPipe } from '../color/color.pipe'; -import { HidePipe } from '../hide/hide.pipe'; -import { VisitBtnComponent } from '../visit-btn/visit-btn.component'; +import { Component, Input } from '@angular/core'; + import { IHeaderITem } from '../header/header.interface'; -import { AssetPipe } from '../../asset/asset.pipe'; import { TrackByService } from '../../track-by/track-by.service'; import { BodyStylesService } from '../../body-styles/body-styles.service'; import { LinkPath } from '../../link/link.path'; @@ -14,17 +10,6 @@ import { OpenSourcePath } from '../path/open-source.path'; selector: 'jsdaddy-open-source-header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'], - standalone: true, - imports: [ - NgFor, - NgIf, - NgClass, - AssetPipe, - ColorPipe, - HidePipe, - VisitBtnComponent, - NgOptimizedImage, - ], providers: [BodyStylesService], }) export class HeaderComponent { @@ -47,10 +32,15 @@ export class HeaderComponent { ]; public readonly jsDaddyWebsite = LinkPath.WEBSITE_JSDDADY; - public readonly trackByPath = inject(TrackByService).trackBy('title'); - public readonly bodyStylesService = inject(BodyStylesService); + // public readonly trackByPath = inject(TrackByService).trackBy('title'); + // public readonly bodyStylesService = inject(BodyStylesService); public readonly openSourceHeaderPath = OpenSourcePath.HEADER; + public constructor( + public readonly bodyStylesService: BodyStylesService, + public readonly trackByPath: TrackByService + ) {} + public toggleNavBlock(): void { this.showNav = !this.showNav; this.bodyStylesService.setOverflowYBodyHtml(this.showNav); diff --git a/open-source/hide/hide.pipe.ts b/open-source/hide/hide.pipe.ts index 1431d00..8e6f432 100644 --- a/open-source/hide/hide.pipe.ts +++ b/open-source/hide/hide.pipe.ts @@ -2,7 +2,6 @@ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'hide', - standalone: true, }) export class HidePipe implements PipeTransform { public transform(value: boolean | undefined): string { diff --git a/open-source/is-empty/is-empty.pipe.ts b/open-source/is-empty/is-empty.pipe.ts index b5486d5..c7a8524 100644 --- a/open-source/is-empty/is-empty.pipe.ts +++ b/open-source/is-empty/is-empty.pipe.ts @@ -2,7 +2,6 @@ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'isEmpty', - standalone: true, }) export class IsEmptyPipe implements PipeTransform { public transform(value: string | undefined): string { diff --git a/open-source/sub-header/sub-header.component.html b/open-source/sub-header/sub-header.component.html index a552ee6..22f6e88 100644 --- a/open-source/sub-header/sub-header.component.html +++ b/open-source/sub-header/sub-header.component.html @@ -2,7 +2,7 @@

{{ title }}

- +
@@ -11,8 +11,8 @@

{{ title }}

diff --git a/open-source/sub-header/sub-header.component.ts b/open-source/sub-header/sub-header.component.ts index 192b40f..d048e0a 100644 --- a/open-source/sub-header/sub-header.component.ts +++ b/open-source/sub-header/sub-header.component.ts @@ -1,21 +1,17 @@ -import { Component, inject, Input } from '@angular/core'; -import { AsyncPipe, NgFor } from '@angular/common'; -import { AssetPipe } from '../../asset/asset.pipe'; +import { Component, Input } from '@angular/core'; + import { TrackByService } from '../../track-by/track-by.service'; -import { ChipComponent } from '../../chip/chip.component'; -import { GithubButtonsComponent } from '../../github-buttons/github-buttons.component'; @Component({ selector: 'jsdaddy-open-source-sub-header', templateUrl: './sub-header.component.html', styleUrls: ['./sub-header.component.scss'], - standalone: true, - imports: [NgFor, AsyncPipe, ChipComponent, AssetPipe, GithubButtonsComponent], }) export class SubHeaderComponent { @Input() public title!: string; @Input() public subtitle!: string; @Input() public chips!: string[]; - public readonly trackByPath = inject(TrackByService).trackBy('chip'); + // public readonly trackByPath = inject(TrackByService).trackBy('chip'); + public constructor(public readonly trackByPath: TrackByService) {} } diff --git a/open-source/visit-btn/visit-btn.component.html b/open-source/visit-btn/visit-btn.component.html index 782fac4..70ae56a 100644 --- a/open-source/visit-btn/visit-btn.component.html +++ b/open-source/visit-btn/visit-btn.component.html @@ -1,10 +1,10 @@ - - - + + + + + + + + + + diff --git a/open-source/visit-btn/visit-btn.component.ts b/open-source/visit-btn/visit-btn.component.ts index 3f3ae8f..cc4b9b3 100644 --- a/open-source/visit-btn/visit-btn.component.ts +++ b/open-source/visit-btn/visit-btn.component.ts @@ -1,15 +1,11 @@ import { Component } from '@angular/core'; -import { AssetPipe } from '../../asset/asset.pipe'; import { LinkPath } from '../../link/link.path'; import { OpenSourcePath } from '../path/open-source.path'; -import { NgOptimizedImage } from '@angular/common'; @Component({ selector: 'jsdaddy-open-source-visit-btn', templateUrl: './visit-btn.component.html', styleUrls: ['./visit-btn.component.scss'], - standalone: true, - imports: [AssetPipe, NgOptimizedImage], }) export class VisitBtnComponent { public readonly jsDaddyWebsite = LinkPath.WEBSITE_JSDDADY;