diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000..4aab9b38 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,44 @@ +{ + "root": true, + "ignorePatterns": ["projects/**/*"], + "overrides": [ + { + "files": ["*.ts"], + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:@angular-eslint/recommended", + "plugin:@angular-eslint/template/process-inline-templates" + ], + "rules": { + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "sp", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "warn", + { + "type": "element", + "prefix": "sp", + "style": "kebab-case" + } + ], + "@typescript-eslint/explicit-member-accessibility": [ + "error", + { + "accessibility": "no-public" + } + ] + } + }, + { + "files": ["*.html"], + "extends": ["plugin:@angular-eslint/template/recommended"], + "rules": {} + } + ] +} diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 8156055d..1c9601c3 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -29,5 +29,7 @@ jobs: node-version: ${{ matrix.node-version }} - name: Install dependencies run: yarn + - name: Lint + run: yarn lint - name: Run tests run: yarn test_ci diff --git a/.gitignore b/.gitignore index e1859a58..6391d2ba 100644 --- a/.gitignore +++ b/.gitignore @@ -27,6 +27,7 @@ !.vscode/extensions.json # misc +/.nx/* /.angular/cache /.sass-cache /connect.lock diff --git a/angular.json b/angular.json index 3376776a..68330fdf 100644 --- a/angular.json +++ b/angular.json @@ -20,10 +20,18 @@ "outputPath": "dist/angular-split-app", "index": "src/index.html", "main": "src/main.ts", - "polyfills": ["zone.js"], + "polyfills": [ + "zone.js" + ], "tsConfig": "src/tsconfig.app.json", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss"], + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "./node_modules/bootstrap/dist/css/bootstrap.min.css", + "src/styles.scss" + ], "scripts": [] }, "configurations": { @@ -60,6 +68,15 @@ "deploy": { "builder": "angular-cli-ghpages:deploy", "options": {} + }, + "lint": { + "builder": "@angular-eslint/builder:lint", + "options": { + "lintFilePatterns": [ + "src/**/*.ts", + "src/**/*.html" + ] + } } } }, @@ -75,6 +92,15 @@ "tsConfig": "projects/angular-split/tsconfig.lib.json", "project": "projects/angular-split/ng-package.json" } + }, + "lint": { + "builder": "@angular-eslint/builder:lint", + "options": { + "lintFilePatterns": [ + "projects/angular-split/**/*.ts", + "projects/angular-split/**/*.html" + ] + } } } } diff --git a/package.json b/package.json index e3df7bb3..241391e5 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,12 @@ "lib_pub_latest": "wireit", "lib_pub_next": "wireit", "lib_tgz": "wireit", - "lint": "ng lint", + "lint_lib": "wireit", + "lint_app": "wireit", + "lint": "wireit", "ng": "ng", - "start": "wireit" + "start": "wireit", + "prepare": "husky install" }, "private": true, "dependencies": { @@ -39,30 +42,40 @@ "zone.js": "~0.14.2" }, "devDependencies": { - "@angular-devkit/architect": "^0.1701.0", - "@angular-devkit/build-angular": "^17.1.0", - "@angular-devkit/core": "^17.1.0", - "@angular-devkit/schematics": "^17.1.0", - "@angular/cli": "^17.1.0", - "@angular/compiler-cli": "^17.1.0", - "@angular/language-service": "^17.1.0", + "@angular-devkit/architect": "^0.1700.0", + "@angular-devkit/build-angular": "^17.0.0", + "@angular-devkit/core": "^17.0.0", + "@angular-devkit/schematics": "^17.0.0", + "@angular-eslint/builder": "17.2.1", + "@angular-eslint/eslint-plugin": "17.2.1", + "@angular-eslint/eslint-plugin-template": "17.2.1", + "@angular-eslint/schematics": "17.2.1", + "@angular-eslint/template-parser": "17.2.1", + "@angular/cli": "^17.0.0", + "@angular/compiler-cli": "^17.0.2", + "@angular/language-service": "^17.0.2", "@types/marked": "^5.0.1", "@types/node": "20.5.4", + "@typescript-eslint/eslint-plugin": "6.19.0", + "@typescript-eslint/parser": "6.19.0", "codelyzer": "^6.0.2", "concurrently": "8.2.1", "cypress": "12.17.4", + "eslint": "^8.56.0", "ng-packagr": "^17.0.0", "npm-run-all": "4.1.5", "postcss": "8.4.28", "serve": "^14.2.1", "ts-node": "10.9.1", "tslib": "^2.6.2", - "tslint": "~6.1.3", "typescript": "5.2.2", "webpack-bundle-analyzer": "4.9.0", "wireit": "^0.14.3" }, "lint-staged": { + "*.{ts,html}": [ + "yarn lint -- --quiet" + ], "*.{js,json,css,scss,less,md,ts,tsx,html,component.html,graphql}": [ "prettier --write" ] @@ -83,12 +96,29 @@ "dist/angular-split-app" ] }, + "lint_app": { + "command": "ng lint --project angular-split-app --fix", + "files": [ + "**/*.ts", + "**/*.html", + ".eslintignore", + ".eslintrc.cjs", + ".eslintrc.json" + ], + "output": [] + }, "build": { "dependencies": [ "app_build", "lib_build" ] }, + "lint": { + "dependencies": [ + "lint_app", + "lint_lib" + ] + }, "test_ci": { "dependencies": [ "cypress_run", @@ -136,6 +166,17 @@ "dist/angular-split" ] }, + "lint_lib": { + "command": "ng lint --project angular-split --fix", + "files": [ + "**/*.ts", + "**/*.html", + ".eslintignore", + ".eslintrc.cjs", + ".eslintrc.json" + ], + "output": [] + }, "lib_pub_latest": { "command": "npm publish --tag latest ./dist/angular-split", "dependencies": [ diff --git a/projects/angular-split/.eslintrc.json b/projects/angular-split/.eslintrc.json new file mode 100644 index 00000000..76064780 --- /dev/null +++ b/projects/angular-split/.eslintrc.json @@ -0,0 +1,31 @@ +{ + "extends": "../../.eslintrc.json", + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts"], + "rules": { + "@angular-eslint/directive-selector": [ + "error", + { + "type": "attribute", + "prefix": "as", + "style": "camelCase" + } + ], + "@angular-eslint/component-selector": [ + "error", + { + "type": "element", + "prefix": "as", + "style": "kebab-case" + } + ] + } + }, + { + "files": ["*.html"], + "rules": {} + } + ] +} diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index adde3e83..b01b8fae 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -308,7 +308,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private isDragging = false private isWaitingClear = false private isWaitingInitialMove = false - private dragListeners: Array = [] + private dragListeners: Array<() => void> = [] private snapshot: ISplitSnapshot | null = null private startPoint: IPoint | null = null private endPoint: IPoint | null = null @@ -414,8 +414,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { return false } - // @ts-ignore - this.displayedAreas.forEach((area, i) => (area.component._size = formattedSizes[i])) + // @@ts-expect-error + this.displayedAreas.forEach((area, i) => (area.component.size = formattedSizes[i])) this.build(false, true) return true @@ -791,7 +791,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy { // Each gutter side areas can't absorb all offset if (areasBefore.remain !== 0 && areasAfter.remain !== 0) { + // TODO: fix this emty block if (Math.abs(areasBefore.remain) === Math.abs(areasAfter.remain)) { + /* empty */ } else if (Math.abs(areasBefore.remain) > Math.abs(areasAfter.remain)) { areasAfter = getGutterSideAbsorptionCapacity( this.unit, diff --git a/projects/angular-split/src/lib/directive/split-area.directive.ts b/projects/angular-split/src/lib/directive/split-area.directive.ts index da4b0952..87007b6c 100644 --- a/projects/angular-split/src/lib/directive/split-area.directive.ts +++ b/projects/angular-split/src/lib/directive/split-area.directive.ts @@ -5,6 +5,7 @@ import { getInputBoolean, getInputPositiveNumber } from '../utils' import { IAreaSize } from '../interface' @Directive({ + // eslint-disable-next-line @angular-eslint/directive-selector selector: 'as-split-area, [as-split-area]', exportAs: 'asSplitArea', }) @@ -87,10 +88,10 @@ export class SplitAreaDirective implements OnInit, OnDestroy { return this._visible } - private transitionListener: Function + private transitionListener: () => void private dragStartSubscription: Subscription private dragEndSubscription: Subscription - private readonly lockListeners: Array = [] + private readonly lockListeners: Array<() => void> = [] constructor( private ngZone: NgZone, diff --git a/projects/angular-split/src/lib/utils.ts b/projects/angular-split/src/lib/utils.ts index 050c877e..73f23b7b 100644 --- a/projects/angular-split/src/lib/utils.ts +++ b/projects/angular-split/src/lib/utils.ts @@ -1,12 +1,12 @@ import { ElementRef } from '@angular/core' import { IArea, - IPoint, - IAreaSnapshot, - ISplitSideAbsorptionCapacity, IAreaAbsorptionCapacity, IAreaSize, + IAreaSnapshot, + IPoint, ISplitDirection, + ISplitSideAbsorptionCapacity, ISplitUnit, } from './interface' @@ -112,11 +112,11 @@ export function getElementPixelSize(elRef: ElementRef, direction: ISplitDirectio return direction === 'horizontal' ? rect.width : rect.height } -export function getInputBoolean(v: any): boolean { - return typeof v === 'boolean' ? v : v === 'false' ? false : true +export function getInputBoolean(v: boolean | `${boolean}`): boolean { + return typeof v === 'boolean' ? v : v !== 'false' } -export function getInputPositiveNumber(v: any, defaultValue: T): number | T { +export function getInputPositiveNumber(v: number | `${number}` | '*', defaultValue: T): number | T { if (v === null || v === undefined) return defaultValue v = Number(v) @@ -236,7 +236,7 @@ function getAreaAbsorptionCapacity( } if (unit === 'pixel') { - return getAreaAbsorptionCapacityPixel(areaSnapshot, pixels, allAreasSizePixel) + return getAreaAbsorptionCapacityPixel(areaSnapshot, pixels) } } @@ -302,11 +302,7 @@ function getAreaAbsorptionCapacityPercent( } } -function getAreaAbsorptionCapacityPixel( - areaSnapshot: IAreaSnapshot, - pixels: number, - containerSizePixel: number, -): IAreaAbsorptionCapacity { +function getAreaAbsorptionCapacityPixel(areaSnapshot: IAreaSnapshot, pixels: number): IAreaAbsorptionCapacity { const tempPixelSize = areaSnapshot.sizePixelAtStart + pixels // ENLARGE AREA diff --git a/projects/angular-split/src/test.ts b/projects/angular-split/src/test.ts index 63d99a92..f685fafc 100644 --- a/projects/angular-split/src/test.ts +++ b/projects/angular-split/src/test.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ // This file is required by karma.conf.js and loads recursively all the .spec and framework files import 'core-js/es7/reflect' diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5e354b97..85b0087f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -27,7 +27,7 @@ import { filter } from 'rxjs/operators' }) export class AppComponent { constructor(public router: Router) { - this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((event) => { + this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe(() => { window.scrollTo(0, 0) }) } diff --git a/src/app/changelog/changelog.service.ts b/src/app/changelog/changelog.service.ts index 4ff84ff8..11ec082a 100644 --- a/src/app/changelog/changelog.service.ts +++ b/src/app/changelog/changelog.service.ts @@ -25,7 +25,7 @@ export class ChangelogService { this.cachedHtml = marked(md) return this.cachedHtml }), - catchError((error) => + catchError(() => of( `Error:
Unable to retrieve CHANGELOG.md from github..
Please go to ${this.url} to view it.`, ), diff --git a/src/app/documentation/documentation.component.html b/src/app/documentation/documentation.component.html index 9cdae522..ff1c75b2 100644 --- a/src/app/documentation/documentation.component.html +++ b/src/app/documentation/documentation.component.html @@ -1,7 +1,9 @@

- SplitComponent (selector: 'as-split' / exportAs: - 'asSplit') + SplitComponent (selector: 'as-split' / exportAs: 'asSplit')

@@ -62,8 +64,11 @@



- SplitAreaDirective (selector: 'as-split-area, - [as-split-area]' / exportAs: 'asSplitArea') + SplitAreaDirective (selector: 'as-split-area, [as-split-area]' / exportAs: 'asSplitArea')

@@ -88,13 +93,16 @@



- SplitGutterDirective (selector: '[asSplitGutter] - ') + SplitGutterDirective (selector: '[asSplitGutter] ')

Used as structural directive (*asSplitGutter) to customize the gutter.

Mostly requires width: 100% and height: 100% in order to fill the whole gutter.

-

If the custom gutter is wider than the declared gutter size (using gutterSize input) the areas will overflow too. - So attention is required to match the size of the gutter.

+

+ If the custom gutter is wider than the declared gutter size (using gutterSize input) the areas will overflow too. So + attention is required to match the size of the gutter. +

@@ -114,25 +122,29 @@



- SplitGutterDragHandleDirective (selector: '[asSplitGutterDragHandle] - ') + SplitGutterDragHandleDirective (selector: '[asSplitGutterDragHandle] ')

Used to declare an area inside asSplitGutter to be a drag handle

Can be declared on multiple elements which means all of them are drag handles.



- SplitGutterExcludeFromDragDirective (selector: '[asSplitGutterExcludeFromDrag] - ') + SplitGutterExcludeFromDragDirective (selector: '[asSplitGutterExcludeFromDrag] ')

Used to declare an area inside asSplitGutter to be excluded from drag

Can be declared on multiple elements which means all of them are excluded from drag.

-

asSplitGutterExcludeFromDrag inside asSplitGutterDragHandle works as expected (all of the element is a handle - except the excluded area)

-

asSplitGutterDragHandle inside asSplitGutterExcludeFromDrag is ignored and the whole element marked with exclude is - excluded.

+

+ asSplitGutterExcludeFromDrag inside asSplitGutterDragHandle works as expected (all of the element is a handle except + the excluded area) +

+

+ asSplitGutterDragHandle inside asSplitGutterExcludeFromDrag is ignored and the whole element marked with exclude is + excluded. +



CSS classes

@@ -184,4 +196,4 @@

CSS classes

-
\ No newline at end of file + diff --git a/src/app/examples/access-from-class/access-from-class.component.ts b/src/app/examples/access-from-class/access-from-class.component.ts index 53e1d37f..d744cef1 100644 --- a/src/app/examples/access-from-class/access-from-class.component.ts +++ b/src/app/examples/access-from-class/access-from-class.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ViewChildren, QueryList, AfterViewInit, ChangeDetectionStrategy } from '@angular/core' +import { Component, ViewChild, ViewChildren, QueryList, AfterViewInit, ChangeDetectionStrategy, HostBinding } from '@angular/core' import { SplitComponent, SplitAreaDirective } from 'angular-split' import { AComponent } from '../../ui/components/AComponent' @@ -6,9 +6,6 @@ import { AComponent } from '../../ui/components/AComponent' @Component({ selector: 'sp-ex-class-access', changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, styles: [ ` .btns { @@ -114,6 +111,8 @@ import { AComponent } from '../../ui/components/AComponent' `, }) export class AccessFromClassComponent extends AComponent implements AfterViewInit { + @HostBinding('class') class = 'split-example-page'; + @ViewChild(SplitComponent) splitEl: SplitComponent @ViewChildren(SplitAreaDirective) areasEl: QueryList diff --git a/src/app/examples/collapse-expand/collapse-expand.component.ts b/src/app/examples/collapse-expand/collapse-expand.component.ts index 762df0c6..6e739657 100644 --- a/src/app/examples/collapse-expand/collapse-expand.component.ts +++ b/src/app/examples/collapse-expand/collapse-expand.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ViewChildren, QueryList, AfterViewInit, ChangeDetectionStrategy } from '@angular/core' +import { Component, ViewChild, ViewChildren, QueryList, ChangeDetectionStrategy, HostBinding } from '@angular/core' import { SplitComponent, SplitAreaDirective } from 'angular-split' import { AComponent } from '../../ui/components/AComponent' @@ -6,9 +6,6 @@ import { AComponent } from '../../ui/components/AComponent' @Component({ selector: 'sp-ex-class-collapse', changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, styles: [ ` .btns { @@ -77,14 +74,12 @@ import { AComponent } from '../../ui/components/AComponent' `, }) -export class CollapseExpandComponent extends AComponent implements AfterViewInit { +export class CollapseExpandComponent extends AComponent { + @HostBinding('class') class = 'split-example-page'; + @ViewChild(SplitComponent) splitEl: SplitComponent @ViewChildren(SplitAreaDirective) areasEl: QueryList - ngAfterViewInit() { - // console.log('Area Components: ', this.areasEl); - } - onClose1(newSize = 0) { this.areasEl.first.collapse(newSize) } diff --git a/src/app/examples/custom-gutter-style/custom-gutter-style.component.ts b/src/app/examples/custom-gutter-style/custom-gutter-style.component.ts index 95cb3c22..03534a2a 100644 --- a/src/app/examples/custom-gutter-style/custom-gutter-style.component.ts +++ b/src/app/examples/custom-gutter-style/custom-gutter-style.component.ts @@ -1,13 +1,10 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core' +import { Component, ChangeDetectionStrategy, HostBinding } from '@angular/core' import { AComponent } from '../../ui/components/AComponent' import { IAreaSize, IOutputData, ISplitDirection } from 'angular-split' @Component({ selector: 'sp-ex-custom-gutter-style', changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, styleUrls: [`./custom-gutter-style.component.scss`], template: ` {{ testChangeDetectorRun() }} @@ -130,6 +127,8 @@ import { IAreaSize, IOutputData, ISplitDirection } from 'angular-split' `, }) export class CustomGutterStyleComponent extends AComponent { + @HostBinding('class') class = 'split-example-page'; + direction: ISplitDirection = 'horizontal' exampleCSizes: IAreaSize[] = [30, 10, 40, 20] diff --git a/src/app/examples/dir-rtl/dir-rtl.component.ts b/src/app/examples/dir-rtl/dir-rtl.component.ts index 79538339..4782abe7 100644 --- a/src/app/examples/dir-rtl/dir-rtl.component.ts +++ b/src/app/examples/dir-rtl/dir-rtl.component.ts @@ -1,13 +1,10 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core' +import { Component, ChangeDetectionStrategy, HostBinding } from '@angular/core' import { AComponent } from '../../ui/components/AComponent' import { ISplitDir, ISplitDirection } from 'angular-split' @Component({ - selector: 'sp-ex-dir_rtl', + selector: 'sp-ex-dir-rtl', changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, styles: [ ` .btns { @@ -74,6 +71,8 @@ import { ISplitDir, ISplitDirection } from 'angular-split' `, }) export class DirRtlComponent extends AComponent { + @HostBinding('class') class = 'split-example-page'; + dir: ISplitDir = 'rtl' direction: ISplitDirection = 'horizontal' } diff --git a/src/app/examples/geek-demo/geek-demo.component.ts b/src/app/examples/geek-demo/geek-demo.component.ts index 7c684390..7b0c7387 100644 --- a/src/app/examples/geek-demo/geek-demo.component.ts +++ b/src/app/examples/geek-demo/geek-demo.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core' +import { Component, ViewChild, ChangeDetectionStrategy, HostBinding } from '@angular/core' import { SortableComponent } from 'ngx-bootstrap/sortable' import { AComponent } from '../../ui/components/AComponent' import { IAreaSize, ISplitDirection } from 'angular-split' @@ -6,9 +6,6 @@ import { IAreaSize, ISplitDirection } from 'angular-split' @Component({ selector: 'sp-ex-geek-demo', changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, styles: [ ` .as-split-area { @@ -183,6 +180,8 @@ import { IAreaSize, ISplitDirection } from 'angular-split' }) export class GeekDemoComponent extends AComponent { @ViewChild(SortableComponent) sortableComponent: SortableComponent + @HostBinding('class') class = 'split-example-page'; + d: { dir: ISplitDirection @@ -224,7 +223,7 @@ export class GeekDemoComponent extends AComponent { this.sortableComponent.writeValue(this.d.areas) } - removeArea(area: any) { + removeArea(area: { id: number; color: string; size: IAreaSize; present: boolean; visible: boolean }) { this.d.areas.splice(this.d.areas.indexOf(area), 1) this.sortableComponent.writeValue(this.d.areas) diff --git a/src/app/examples/global-options/global-options.component.ts b/src/app/examples/global-options/global-options.component.ts index bf42526d..9f5c889c 100644 --- a/src/app/examples/global-options/global-options.component.ts +++ b/src/app/examples/global-options/global-options.component.ts @@ -1,13 +1,10 @@ -import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core' +import { ChangeDetectionStrategy, Component, HostBinding, ViewChild } from '@angular/core' import { AComponent } from '../../ui/components/AComponent' import { SplitComponent, SplitAreaDirective } from 'angular-split' @Component({ - selector: 'app-global-options', + selector: 'sp-global-options', changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, template: ` {{ testChangeDetectorRun() }}
@@ -41,6 +38,8 @@ import { SplitComponent, SplitAreaDirective } from 'angular-split' `, }) export class GlobalOptionsComponent extends AComponent { + @HostBinding('class') class = 'split-example-page'; + @ViewChild('split') split: SplitComponent @ViewChild('area1') area1: SplitAreaDirective @ViewChild('area2') area2: SplitAreaDirective diff --git a/src/app/examples/gutter-click-roll-unroll/gutter-click-roll-unroll.component.ts b/src/app/examples/gutter-click-roll-unroll/gutter-click-roll-unroll.component.ts index f4962060..0fdd804b 100644 --- a/src/app/examples/gutter-click-roll-unroll/gutter-click-roll-unroll.component.ts +++ b/src/app/examples/gutter-click-roll-unroll/gutter-click-roll-unroll.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core' +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, HostBinding, OnDestroy, ViewChild } from '@angular/core' import { IAreaSize, IOutputAreaSizes, IOutputData, SplitComponent } from 'angular-split' import { Subscription } from 'rxjs' import { AComponent } from '../../ui/components/AComponent' @@ -7,9 +7,6 @@ import { formatDate } from '../../utils/format-date' @Component({ selector: 'sp-ex-gutter-click', changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, styles: [ ` as-split.as-transition.as-init:not(.as-dragging) ::ng-deep > .as-split-gutter, @@ -112,6 +109,8 @@ import { formatDate } from '../../utils/format-date' `, }) export class GutterClickRollUnrollComponent extends AComponent implements AfterViewInit, OnDestroy { + @HostBinding('class') class = 'split-example-page'; + isDisabled = true useTransition = true dblClickTime = 0 @@ -146,7 +145,7 @@ export class GutterClickRollUnrollComponent extends AComponent implements AfterV setTimeout(() => { if (this.logsEl.nativeElement.scroll) { - ;(this.logsEl.nativeElement).scroll({ top: this.logMessages.length * 30 }) + (this.logsEl.nativeElement).scroll({ top: this.logMessages.length * 30 }) } }) diff --git a/src/app/examples/iframes/iframes.component.ts b/src/app/examples/iframes/iframes.component.ts index 83a4864a..3ca0c9f8 100644 --- a/src/app/examples/iframes/iframes.component.ts +++ b/src/app/examples/iframes/iframes.component.ts @@ -1,12 +1,9 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core' +import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core' import { AComponent } from '../../ui/components/AComponent' @Component({ selector: 'sp-ex-nested', changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, template: ` {{ testChangeDetectorRun() }}
@@ -37,4 +34,7 @@ import { AComponent } from '../../ui/components/AComponent'
`, }) -export class IframesComponent extends AComponent {} +export class IframesComponent extends AComponent { + @HostBinding('class') class = 'split-example-page'; + +} diff --git a/src/app/examples/min-max-split/min-max-split.component.ts b/src/app/examples/min-max-split/min-max-split.component.ts index 024614bc..67e4caf7 100644 --- a/src/app/examples/min-max-split/min-max-split.component.ts +++ b/src/app/examples/min-max-split/min-max-split.component.ts @@ -1,11 +1,8 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core' +import { Component, ChangeDetectionStrategy, HostBinding } from '@angular/core' import { AComponent } from '../../ui/components/AComponent' @Component({ changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, styles: [ ` .btns { @@ -134,6 +131,8 @@ import { AComponent } from '../../ui/components/AComponent' `, }) export class MinMaxSplitComponent extends AComponent { + @HostBinding('class') class = 'split-example-page'; + restrictMove = false log(x) { diff --git a/src/app/examples/nested-split/nested-split.component.ts b/src/app/examples/nested-split/nested-split.component.ts index 4953cff7..5f4bd3db 100644 --- a/src/app/examples/nested-split/nested-split.component.ts +++ b/src/app/examples/nested-split/nested-split.component.ts @@ -1,13 +1,10 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core' +import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core' import { AComponent } from '../../ui/components/AComponent' @Component({ selector: 'sp-ex-nested', changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, template: ` {{ testChangeDetectorRun() }}
@@ -72,4 +69,7 @@ import { AComponent } from '../../ui/components/AComponent'
`, }) -export class NestedComponent extends AComponent {} +export class NestedComponent extends AComponent { + @HostBinding('class') class = 'split-example-page'; + +} diff --git a/src/app/examples/simple-split/simple-split.component.ts b/src/app/examples/simple-split/simple-split.component.ts index 44a37126..97f4df0c 100644 --- a/src/app/examples/simple-split/simple-split.component.ts +++ b/src/app/examples/simple-split/simple-split.component.ts @@ -1,13 +1,10 @@ -import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core' +import { Component, ChangeDetectionStrategy, ViewChild, HostBinding } from '@angular/core' import { SplitComponent, SplitAreaDirective, ISplitDirection } from 'angular-split' import { AComponent } from '../../ui/components/AComponent' @Component({ selector: 'sp-ex-simple', changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, styles: [ ` .btns { @@ -167,6 +164,7 @@ export class SimpleSplitComponent extends AComponent { @ViewChild('split') split: SplitComponent @ViewChild('area1') area1: SplitAreaDirective @ViewChild('area2') area2: SplitAreaDirective + @HostBinding('class') class = 'split-example-page'; direction: ISplitDirection = 'horizontal' sizes = { diff --git a/src/app/examples/split-transitions/split-transitions.component.ts b/src/app/examples/split-transitions/split-transitions.component.ts index 41d4eba2..51021352 100644 --- a/src/app/examples/split-transitions/split-transitions.component.ts +++ b/src/app/examples/split-transitions/split-transitions.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core' +import { Component, ViewChild, ElementRef, ChangeDetectionStrategy, HostBinding } from '@angular/core' import { AComponent } from '../../ui/components/AComponent' import { formatDate } from '../../utils/format-date' import { IAreaSize } from 'angular-split' @@ -6,9 +6,6 @@ import { IAreaSize } from 'angular-split' @Component({ selector: 'sp-ex-transitions', changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, styles: [ ` button { @@ -260,12 +257,13 @@ export class SplitTransitionsComponent extends AComponent { logMessages: Array<{ type: string; text: string }> = [] @ViewChild('logs') logsEl: ElementRef + @HostBinding('class') class = 'split-example-page'; log(e) { this.logMessages.push({ type: 'transitionEnd', text: `${formatDate(new Date())} > transitionEnd event > ${e}` }) setTimeout(() => { if (this.logsEl.nativeElement.scroll) { - ;(this.logsEl.nativeElement).scroll({ top: this.logMessages.length * 30 }) + (this.logsEl.nativeElement).scroll({ top: this.logMessages.length * 30 }) } }) } diff --git a/src/app/examples/sync-split/sync-split.component.ts b/src/app/examples/sync-split/sync-split.component.ts index 0488116b..259e40fe 100644 --- a/src/app/examples/sync-split/sync-split.component.ts +++ b/src/app/examples/sync-split/sync-split.component.ts @@ -1,4 +1,4 @@ -import { Component, ChangeDetectionStrategy, ViewChild, AfterViewInit, OnDestroy } from '@angular/core' +import { Component, ChangeDetectionStrategy, ViewChild, AfterViewInit, OnDestroy, HostBinding } from '@angular/core' import { Subscription, merge } from 'rxjs' import { map } from 'rxjs/operators' import { SplitComponent } from 'angular-split' @@ -9,9 +9,6 @@ import { formatDate } from '../../utils/format-date' @Component({ selector: 'sp-ex-sync', changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, template: ` {{ testChangeDetectorRun() }}
@@ -49,6 +46,7 @@ export class SyncSplitComponent extends AComponent implements AfterViewInit, OnD @ViewChild('mySplitA') mySplitAEl: SplitComponent @ViewChild('mySplitB') mySplitBEl: SplitComponent @ViewChild('mySplitC') mySplitCEl: SplitComponent + @HostBinding('class') class = 'split-example-page'; sizes = [25, 75] sub: Subscription diff --git a/src/app/examples/toggling-dom-and-visibility/toggling-dom-and-visibility.component.ts b/src/app/examples/toggling-dom-and-visibility/toggling-dom-and-visibility.component.ts index b60d0af1..b1433a8d 100644 --- a/src/app/examples/toggling-dom-and-visibility/toggling-dom-and-visibility.component.ts +++ b/src/app/examples/toggling-dom-and-visibility/toggling-dom-and-visibility.component.ts @@ -1,13 +1,10 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core' +import { Component, ChangeDetectionStrategy, HostBinding } from '@angular/core' import { AComponent } from '../../ui/components/AComponent' @Component({ selector: 'sp-ex-toggling-dom-and-visible', changeDetection: ChangeDetectionStrategy.OnPush, - host: { - class: 'split-example-page', - }, styles: [ ` .btns { @@ -91,6 +88,8 @@ import { AComponent } from '../../ui/components/AComponent' `, }) export class TogglingDomAndVisibleComponent extends AComponent { + @HostBinding('class') class = 'split-example-page'; + action = { isVisibleA: true, isVisibleB: true, diff --git a/src/app/examples/workspace-localstorage/workspace-localstorage.component.ts b/src/app/examples/workspace-localstorage/workspace-localstorage.component.ts index 67633a98..a8893723 100644 --- a/src/app/examples/workspace-localstorage/workspace-localstorage.component.ts +++ b/src/app/examples/workspace-localstorage/workspace-localstorage.component.ts @@ -171,7 +171,7 @@ export class WorkspaceLocalstorageComponent extends AComponent implements OnInit refreshColumnVisibility() { // Refresh columns visibility based on inside rows visibilities (If no row > hide column) - this.config.columns.forEach((column, index) => { + this.config.columns.forEach((column) => { column.visible = column.rows.some((row) => row.visible === true) }) diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 31bf127e..194bd556 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -70,6 +70,7 @@ import { Component, VERSION } from '@angular/core'
Angular Discord diff --git a/src/app/ui/components/topbar.component.ts b/src/app/ui/components/topbar.component.ts index 62f34002..8ba96962 100644 --- a/src/app/ui/components/topbar.component.ts +++ b/src/app/ui/components/topbar.component.ts @@ -1,4 +1,4 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core' +import { Component, ChangeDetectionStrategy, HostBinding } from '@angular/core' import { Router, NavigationStart, Routes } from '@angular/router' import { DomSanitizer } from '@angular/platform-browser' import { filter } from 'rxjs/operators' @@ -47,9 +47,6 @@ import { exampleRoutes } from '../../examples/examples.routes' } `, ], - host: { - class: 'navbar navbar-expand-lg fixed-top navbar-dark bg-dark', - }, template: `