Clean up internal type usages

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() {

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<void>();
 
+  /** Protected variables */
+
+  /** Public variables */
+
+  /** constructor & lifecycle */
+  protected override disconnected(): void {
+    super.disconnected();
+
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  /** Public methods */
   render(observable: Observable<unknown>) {
     observable
       .pipe(
@@ -17,12 +32,9 @@ class Async extends AsyncDirective {
     return noChange;
   }
 
-  protected override disconnected(): void {
+  /** Protected methods */
-    super.disconnected();
 
-    this.destroy$.next();
+  /** Private methods */
-    this.destroy$.complete();
-  }
 }
 
 export const asyncDirective = directive(Async);

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"
+      }
+    }
+  ]
+}

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.
+
+
+
+

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"
+}

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": []
+}

libs/_internal/types/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/lit'

libs/_internal/types/src/lib/lit.ts

@@ -0,0 +1,5 @@
+import { ReactiveControllerHost as LitReactiveControllerHost } from 'lit';
+
+export type ReactiveControllerHost<T> = LitReactiveControllerHost & {
+  [K in keyof T]: T[K];
+};

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"
+    }
+  ]
+}

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"]
+}

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();
 

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<TooltipComponent>;
-  private _hostTarget: HTMLElement | undefined;
+  private _hostTarget: HTMLElement | null = null;
 
   private readonly destroy$ = new Subject<void>();
 
@@ -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<TooltipComponent>) {
@@ -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.top = domRect.top + domRect.height / 2 - (this._host.contentElement?.offsetHeight || 0) / 2;
-        topLeft.left = domRect.left - this._host.contentElement?.offsetWidth;
+        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;
     }
 

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<TooltipComponent>) {
     this._host = host;
     this._host.addController(this);

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"
       ],