diff --git a/libs/_internal/controllers/src/lib/destroy.controller.ts b/libs/_internal/controllers/src/lib/destroy.controller.ts index e8884ae..96b5ec9 100644 --- a/libs/_internal/controllers/src/lib/destroy.controller.ts +++ b/libs/_internal/controllers/src/lib/destroy.controller.ts @@ -12,9 +12,10 @@ export class DestroyController implements ReactiveController { /** Public variables */ public readonly destroy = this.destroy$.asObservable(); - /** constructor & lifecylce */ + /** constructor & lifecycle */ constructor(host: ReactiveControllerHost) { - (this._host = host).addController(this); + this._host = host; + this._host.addController(this); } public hostDisconnected() { diff --git a/libs/_internal/directives/src/lib/async-directive.ts b/libs/_internal/directives/src/lib/async-directive.ts index e655a83..30d5d3e 100644 --- a/libs/_internal/directives/src/lib/async-directive.ts +++ b/libs/_internal/directives/src/lib/async-directive.ts @@ -1,10 +1,25 @@ import { noChange } from 'lit'; import { AsyncDirective, directive } from 'lit/async-directive.js'; + import { Observable, Subject, tap } from 'rxjs'; class Async extends AsyncDirective { + /** Private variables */ private readonly destroy$ = new Subject(); + /** Protected variables */ + + /** Public variables */ + + /** constructor & lifecycle */ + protected override disconnected(): void { + super.disconnected(); + + this.destroy$.next(); + this.destroy$.complete(); + } + + /** Public methods */ render(observable: Observable) { observable .pipe( @@ -17,12 +32,9 @@ class Async extends AsyncDirective { return noChange; } - protected override disconnected(): void { - super.disconnected(); + /** Protected methods */ - this.destroy$.next(); - this.destroy$.complete(); - } + /** Private methods */ } export const asyncDirective = directive(Async); diff --git a/libs/_internal/types/.eslintrc.json b/libs/_internal/types/.eslintrc.json new file mode 100644 index 0000000..2b5c48c --- /dev/null +++ b/libs/_internal/types/.eslintrc.json @@ -0,0 +1,42 @@ +{ + "extends": [ + "../../../.eslintrc.json" + ], + "ignorePatterns": [ + "!**/*" + ], + "overrides": [ + { + "files": [ + "*.ts", + "*.tsx", + "*.js", + "*.jsx" + ], + "rules": {} + }, + { + "files": [ + "*.ts", + "*.tsx" + ], + "rules": {} + }, + { + "files": [ + "*.js", + "*.jsx" + ], + "rules": {} + }, + { + "files": [ + "*.json" + ], + "parser": "jsonc-eslint-parser", + "rules": { + "@nx/dependency-checks": "error" + } + } + ] +} diff --git a/libs/_internal/types/README.md b/libs/_internal/types/README.md new file mode 100644 index 0000000..27a8c11 --- /dev/null +++ b/libs/_internal/types/README.md @@ -0,0 +1,13 @@ +# _internal-types + +This library was generated with [Nx](https://nx.dev). + + + +## Building + +Run `nx build _internal-types` to build the library. + + + + diff --git a/libs/_internal/types/package.json b/libs/_internal/types/package.json new file mode 100644 index 0000000..05b5d3c --- /dev/null +++ b/libs/_internal/types/package.json @@ -0,0 +1,10 @@ +{ + "name": "@z-elements/_internal/types", + "version": "0.0.1", + "dependencies": { + "tslib": "^2.3.0" + }, + "type": "commonjs", + "main": "./src/index.js", + "typings": "./src/index.d.ts" +} diff --git a/libs/_internal/types/project.json b/libs/_internal/types/project.json new file mode 100644 index 0000000..b80a218 --- /dev/null +++ b/libs/_internal/types/project.json @@ -0,0 +1,35 @@ +{ + "name": "_internal-types", + "$schema": "../../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "libs/_internal/types/src", + "projectType": "library", + "targets": { + "build": { + "executor": "@nx/js:tsc", + "outputs": [ + "{options.outputPath}" + ], + "options": { + "outputPath": "dist/libs/_internal/types", + "main": "libs/_internal/types/src/index.ts", + "tsConfig": "libs/_internal/types/tsconfig.lib.json", + "assets": [ + "libs/_internal/types/*.md" + ] + } + }, + "lint": { + "executor": "@nx/linter:eslint", + "outputs": [ + "{options.outputFile}" + ], + "options": { + "lintFilePatterns": [ + "libs/_internal/types/**/*.ts", + "libs/_internal/types/package.json" + ] + } + } + }, + "tags": [] +} diff --git a/libs/_internal/types/src/index.ts b/libs/_internal/types/src/index.ts new file mode 100644 index 0000000..ac42fbc --- /dev/null +++ b/libs/_internal/types/src/index.ts @@ -0,0 +1 @@ +export * from './lib/lit' diff --git a/libs/_internal/types/src/lib/lit.ts b/libs/_internal/types/src/lib/lit.ts new file mode 100644 index 0000000..edfb938 --- /dev/null +++ b/libs/_internal/types/src/lib/lit.ts @@ -0,0 +1,5 @@ +import { ReactiveControllerHost as LitReactiveControllerHost } from 'lit'; + +export type ReactiveControllerHost = LitReactiveControllerHost & { + [K in keyof T]: T[K]; +}; diff --git a/libs/_internal/types/tsconfig.json b/libs/_internal/types/tsconfig.json new file mode 100644 index 0000000..f2400ab --- /dev/null +++ b/libs/_internal/types/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "module": "commonjs", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + } + ] +} diff --git a/libs/_internal/types/tsconfig.lib.json b/libs/_internal/types/tsconfig.lib.json new file mode 100644 index 0000000..4befa7f --- /dev/null +++ b/libs/_internal/types/tsconfig.lib.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "declaration": true, + "types": ["node"] + }, + "include": ["src/**/*.ts"], + "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"] +} diff --git a/libs/panels/bottom-panel/src/lib/bottom-panel.component.ts b/libs/panels/bottom-panel/src/lib/bottom-panel.component.ts index 6480381..1861b93 100644 --- a/libs/panels/bottom-panel/src/lib/bottom-panel.component.ts +++ b/libs/panels/bottom-panel/src/lib/bottom-panel.component.ts @@ -21,7 +21,7 @@ export default class BottomPanel extends LitElement { /** Public variables */ @property({ type: Boolean, reflect: true }) public open = false; - /** constructor & lifecylce */ + /** constructor & lifecycle */ override connectedCallback() { super.connectedCallback(); diff --git a/libs/tooltip/src/lib/controllers/position.controller.ts b/libs/tooltip/src/lib/controllers/position.controller.ts index 7a51a8d..0130352 100644 --- a/libs/tooltip/src/lib/controllers/position.controller.ts +++ b/libs/tooltip/src/lib/controllers/position.controller.ts @@ -1,4 +1,6 @@ -import { ReactiveController, ReactiveControllerHost } from 'lit'; +import { ReactiveControllerHost } from '@z-elements/_internal/types'; + +import { ReactiveController } from 'lit'; import { Subject, debounceTime, fromEvent, takeUntil, tap } from 'rxjs'; @@ -15,7 +17,7 @@ import TooltipComponent from '../tooltip.component'; export class PositionController implements ReactiveController { /** Private variables */ private readonly _host: ReactiveControllerHost; - private _hostTarget: HTMLElement | undefined; + private _hostTarget: HTMLElement | null = null; private readonly destroy$ = new Subject(); @@ -24,7 +26,7 @@ export class PositionController implements ReactiveController { /** Public variables */ public top: number = 0; public left: number = 0; - public position: Placement; + public position: Placement | undefined; /** constructor & lifecycle */ constructor(host: ReactiveControllerHost) { @@ -63,13 +65,12 @@ export class PositionController implements ReactiveController { const availablePosition: Placement[] = [Placement.top, Placement.left, Placement.right, Placement.bottom]; this.position = this._host.preferredPlacement; - while (!this.doesPostionFitInScreen(topLeft) && exhaustedPositions.length < 4) { + while (!this.doesPositionFitInScreen(topLeft) && exhaustedPositions.length < 4) { topLeft = this.getPositions(availablePosition.find((p) => !exhaustedPositions.includes(p))!); exhaustedPositions.push(availablePosition.find((p) => !exhaustedPositions.includes(p))!); this.position = availablePosition.find((p) => !exhaustedPositions.includes(p))!; } - console.log(this.position); this.top = topLeft.top; this.left = topLeft.left; @@ -87,7 +88,7 @@ export class PositionController implements ReactiveController { switch (position) { case Placement.top: - topLeft.top = domRect.top - this._host.contentElement?.offsetHeight; + topLeft.top = domRect.top - (this._host.contentElement?.offsetHeight || 0); topLeft.left = domRect.left; break; case 'bottom': @@ -95,11 +96,11 @@ export class PositionController implements ReactiveController { topLeft.left = domRect.left; break; case 'left': - topLeft.top = domRect.top + domRect.height / 2 - this._host.contentElement?.offsetHeight / 2; - topLeft.left = domRect.left - this._host.contentElement?.offsetWidth; + topLeft.top = domRect.top + domRect.height / 2 - (this._host.contentElement?.offsetHeight || 0) / 2; + topLeft.left = domRect.left - (this._host.contentElement?.offsetWidth || 0); break; case 'right': - topLeft.top = domRect.top + domRect.height / 2 - this._host.contentElement?.offsetHeight / 2; + topLeft.top = domRect.top + domRect.height / 2 - (this._host.contentElement?.offsetHeight || 0) / 2; topLeft.left = domRect.right; break; } @@ -112,7 +113,7 @@ export class PositionController implements ReactiveController { return element.getBoundingClientRect(); } - private doesPostionFitInScreen(topLeft: { top: number; left: number }): boolean { + private doesPositionFitInScreen(topLeft: { top: number; left: number }): boolean { if (topLeft.top < 0) { return false; } @@ -121,11 +122,11 @@ export class PositionController implements ReactiveController { return false; } - if (this.top + this._host.contentElement?.offsetHeight > window.innerHeight) { + if (this.top + (this._host.contentElement?.offsetHeight || 0) > window.innerHeight) { return false; } - if (this.left + this._host.contentElement?.offsetWidth > window.innerWidth) { + if (this.left + (this._host.contentElement?.offsetWidth || 0) > window.innerWidth) { return false; } diff --git a/libs/tooltip/src/lib/controllers/visibility.controller.ts b/libs/tooltip/src/lib/controllers/visibility.controller.ts index 83b4936..0198dfe 100644 --- a/libs/tooltip/src/lib/controllers/visibility.controller.ts +++ b/libs/tooltip/src/lib/controllers/visibility.controller.ts @@ -1,4 +1,6 @@ -import { ReactiveController, ReactiveControllerHost } from 'lit'; +import { ReactiveControllerHost } from '@z-elements/_internal/types'; + +import { ReactiveController } from 'lit'; import { BehaviorSubject, @@ -39,7 +41,7 @@ export class VisibilityController implements ReactiveController { public show$ = this.emitShow$.asObservable(); public hide$ = this.emitHide$.asObservable(); - /** constructor & lifecylce */ + /** constructor & lifecycle */ constructor(host: ReactiveControllerHost) { this._host = host; this._host.addController(this); diff --git a/tsconfig.base.json b/tsconfig.base.json index 94f903c..2ba3797 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -30,6 +30,9 @@ "@z-elements/_internal/directives": [ "libs/_internal/directives/src/index.ts" ], + "@z-elements/_internal/types": [ + "libs/_internal/types/src/index.ts" + ], "@z-elements/container": [ "libs/container/src/index.ts" ],