Issue/bounding client rect

apps/components-testing-app/.eslintrc.json

@@ -17,8 +17,7 @@
           {
             "type": "attribute",
             "prefix": [
-              "app",
-              "e2e"
+              "app"
             ],
             "style": "camelCase"
           }
@@ -28,8 +27,7 @@
           {
             "type": "element",
             "prefix": [
-              "app",
-              "e2e"
+              "app"
             ],
             "style": "kebab-case"
           }

apps/components-testing-app/src/app/app.component.scss

@@ -0,0 +1,10 @@
+:host {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  padding: 1em;
+
+  > router-outlet {
+    position: absolute; // out of the document flow
+  }
+}

apps/components-testing-app/src/app/app.component.ts

@@ -14,6 +14,7 @@ import {RouterOutlet} from '@angular/router';
 @Component({
   selector: 'app-root',
   template: '<router-outlet></router-outlet>',
+  styleUrl: './app.component.scss',
   standalone: true,
   imports: [RouterOutlet],
 })

apps/components-testing-app/src/app/app.routes.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2023 Swiss Federal Railways
+ * Copyright (c) 2018-2024 Swiss Federal Railways
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -12,7 +12,11 @@ import {Routes} from '@angular/router';
 
 export const routes: Routes = [
   {
-    path: 'sci-viewport',
-    loadChildren: () => import('./sci-viewport/routes'),
+    path: 'components',
+    loadChildren: () => import('./components/routes'),
+  },
+  {
+    path: 'toolkit',
+    loadChildren: () => import('./toolkit/routes'),
   },
 ];

apps/components-testing-app/src/app/components/routes.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import {Routes} from '@angular/router';
+
+export default [
+  {
+    path: 'sci-viewport',
+    loadChildren: () => import('./sci-viewport/routes'),
+  },
+  {
+    path: 'sci-sashbox',
+    loadChildren: () => import('./sci-sashbox/routes'),
+  },
+] satisfies Routes;

apps/components-testing-app/src/app/components/sci-sashbox/routes.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import {Routes} from '@angular/router';
+import SciSashboxPageComponent from './sci-sashbox-page/sci-sashbox-page.component';
+
+export default [
+  {path: '', component: SciSashboxPageComponent},
+] satisfies Routes;

apps/components-testing-app/src/app/components/sci-sashbox/sci-sashbox-page/sci-sashbox-page.component.html

@@ -0,0 +1,35 @@
+<sci-sashbox [direction]="directionFormControl.value">
+  @for (sash of sashes; track sash; let i = $index) {
+    <ng-template sciSash [size]="sash.size" [minSize]="sash.minSize">
+      <section class="sash e2e-sash-{{i + 1}}">Sash {{i + 1}}</section>
+    </ng-template>
+  }
+</sci-sashbox>
+
+<aside class="e2e-properties">
+  <sci-tabbar>
+    <ng-template sciTab label="Settings" [cssClass]="'e2e-settings'">
+      <div class="tab e2e-tab">
+        <sci-form-field label="Direction">
+          <select [formControl]="directionFormControl" class="e2e-direction">
+            <option value="column">column</option>
+            <option value="row">row</option>
+          </select>
+        </sci-form-field>
+      </div>
+    </ng-template>
+
+    @for (sash of sashes; track sash; let i = $index) {
+      <ng-template sciTab [label]="'Sash ' + (i + 1)" [cssClass]="'e2e-sash-' + (i + 1)">
+        <div class="tab e2e-tab">
+          <sci-form-field label="Size">
+            <input [(ngModel)]="sash.size" placeholder="Value in any CSS unit or unitless as a ratio" class="e2e-size">
+          </sci-form-field>
+          <sci-form-field label="Min size">
+            <input [(ngModel)]="sash.minSize" placeholder="Value in pixel or percent" class="e2e-min-size">
+          </sci-form-field>
+        </div>
+      </ng-template>
+    }
+  </sci-tabbar>
+</aside>

apps/components-testing-app/src/app/components/sci-sashbox/sci-sashbox-page/sci-sashbox-page.component.scss

@@ -0,0 +1,29 @@
+:host {
+  display: flex;
+  gap: 1em;
+
+  > sci-sashbox {
+    flex: auto;
+
+    section.sash {
+      text-wrap: nowrap;
+      background-color: cornflowerblue;
+    }
+  }
+
+  > aside {
+    flex: none;
+    display: grid;
+    border: 1px solid var(--sci-color-border);
+    border-radius: var(--sci-corner);
+    background-color: var(--sci-color-background-secondary);
+    padding: 1em;
+
+    > sci-tabbar div.tab {
+      display: flex;
+      flex-direction: column;
+      gap: 1em;
+      padding: .25em;
+    }
+  }
+}

apps/components-testing-app/src/app/components/sci-sashbox/sci-sashbox-page/sci-sashbox-page.component.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2018-2019 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+import {Component} from '@angular/core';
+import {FormsModule, NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
+import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox';
+import {SciFormFieldComponent} from '@scion/components.internal/form-field';
+import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/tabbar';
+
+@Component({
+  selector: 'app-sashbox-page',
+  templateUrl: './sci-sashbox-page.component.html',
+  styleUrls: ['./sci-sashbox-page.component.scss'],
+  standalone: true,
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    SciSashboxComponent,
+    SciSashDirective,
+    SciFormFieldComponent,
+    SciTabDirective,
+    SciTabbarComponent,
+  ],
+})
+export default class SciSashboxPageComponent {
+
+  public directionFormControl = this._formBuilder.control<'column' | 'row'>('row');
+
+  public sashes: Sash[] = [
+    {size: '1'},
+    {size: '1'},
+    {size: '1'},
+  ];
+
+  constructor(private _formBuilder: NonNullableFormBuilder) {
+  }
+}
+
+export interface Sash {
+  size?: string;
+  minSize?: number;
+}

apps/components-testing-app/src/app/sci-viewport/focus/viewport-focus-page.component.ts → apps/components-testing-app/src/app/components/sci-viewport/focus/viewport-focus-page.component.ts

@@ -12,7 +12,7 @@ import {Component} from '@angular/core';
 import {SciViewportComponent} from '@scion/components/viewport';
 
 @Component({
-  selector: 'e2e-viewport-focus-page',
+  selector: 'app-viewport-focus-page',
   templateUrl: './viewport-focus-page.component.html',
   standalone: true,
   imports: [SciViewportComponent],

apps/components-testing-app/src/app/sci-viewport/hover/viewport-hover-page.component.ts → apps/components-testing-app/src/app/components/sci-viewport/hover/viewport-hover-page.component.ts

@@ -12,7 +12,7 @@ import {Component} from '@angular/core';
 import {SciViewportComponent} from '@scion/components/viewport';
 
 @Component({
-  selector: 'e2e-viewport-hover-page',
+  selector: 'app-viewport-hover-page',
   templateUrl: './viewport-hover-page.component.html',
   styleUrls: ['./viewport-hover-page.component.scss'],
   standalone: true,

apps/components-testing-app/src/app/sci-viewport/overlap/viewport-overlap-page.component.ts → apps/components-testing-app/src/app/components/sci-viewport/overlap/viewport-overlap-page.component.ts

@@ -12,7 +12,7 @@ import {Component} from '@angular/core';
 import {SciViewportComponent} from '@scion/components/viewport';
 
 @Component({
-  selector: 'e2e-viewport-overlap-page',
+  selector: 'app-viewport-overlap-page',
   templateUrl: './viewport-overlap-page.component.html',
   styleUrls: ['./viewport-overlap-page.component.scss'],
   standalone: true,

apps/components-testing-app/src/app/toolkit/observable/bounding-client-rect/bounding-client-rect-page.component.html

@@ -0,0 +1,20 @@
+<div class="testee e2e-testee" #testee></div>
+
+<aside>
+  <section class="e2e-properties">
+    <header>Properties:</header>
+    <span>x:</span><input [(ngModel)]="properties.x" class="e2e-x">
+    <span>y:</span><input [(ngModel)]="properties.y" class="e2e-y">
+    <span>width:</span><input [(ngModel)]="properties.width" class="e2e-width">
+    <span>height:</span><input [(ngModel)]="properties.height" class="e2e-height">
+    <button (click)="applyProperties()" class="apply e2e-apply">Apply</button>
+  </section>
+
+  <section class="e2e-testee-bounding-box">
+    <header>Testee Bounding Box:</header>
+    <span>x:</span><span class="e2e-x">{{testeeBoundingBox.x()}}</span>
+    <span>y:</span><span class="e2e-y">{{testeeBoundingBox.y()}}</span>
+    <span>width:</span><span class="e2e-width">{{testeeBoundingBox.width()}}</span>
+    <span>height:</span><span class="e2e-height">{{testeeBoundingBox.height()}}</span>
+  </section>
+</aside>

apps/components-testing-app/src/app/toolkit/observable/bounding-client-rect/bounding-client-rect-page.component.scss

@@ -0,0 +1,30 @@
+:host {
+  > div.testee {
+    position: absolute;
+    background-color: blue;
+  }
+
+  > aside {
+    position: fixed;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2em;
+    padding: 1em;
+
+    > section {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: .25em 1em;
+
+      > header {
+        font-weight: bold;
+      }
+
+      > header, > button.apply {
+        grid-column: 1/-1;
+      }
+    }
+  }
+}

apps/components-testing-app/src/app/toolkit/observable/bounding-client-rect/bounding-client-rect-page.component.ts

@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import {Component, DestroyRef, ElementRef, inject, OnInit, signal, viewChild} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {fromBoundingClientRect$} from '@scion/toolkit/observable';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+
+@Component({
+  selector: 'app-bounding-client-rect-page',
+  templateUrl: './bounding-client-rect-page.component.html',
+  styleUrl: './bounding-client-rect-page.component.scss',
+  standalone: true,
+  imports: [
+    FormsModule,
+  ],
+})
+export class BoundingClientRectPageComponent implements OnInit {
+
+  private _testee = viewChild.required<ElementRef<HTMLElement>>('testee');
+  private _destroyRef = inject(DestroyRef);
+
+  protected properties = {
+    x: signal<string>('0px'),
+    y: signal<string>('0px'),
+    width: signal<string>('100px'),
+    height: signal<string>('100px'),
+  };
+
+  protected testeeBoundingBox = {
+    x: signal<number | undefined>(undefined),
+    y: signal<number | undefined>(undefined),
+    width: signal<number | undefined>(undefined),
+    height: signal<number | undefined>(undefined),
+  };
+
+  public ngOnInit(): void {
+    this.applyProperties();
+
+    fromBoundingClientRect$(this._testee().nativeElement)
+      .pipe(takeUntilDestroyed(this._destroyRef))
+      .subscribe(domRect => {
+        this.testeeBoundingBox.x.set(domRect.x);
+        this.testeeBoundingBox.y.set(domRect.y);
+        this.testeeBoundingBox.width.set(domRect.width);
+        this.testeeBoundingBox.height.set(domRect.height);
+      });
+  }
+
+  public applyProperties(): void {
+    this._testee().nativeElement.style.left = this.properties.x();
+    this._testee().nativeElement.style.top = this.properties.y();
+    this._testee().nativeElement.style.width = this.properties.width();
+    this._testee().nativeElement.style.height = this.properties.height();
+  }
+}

apps/components-testing-app/src/app/toolkit/observable/routes.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import {Routes} from '@angular/router';
+import {BoundingClientRectPageComponent} from './bounding-client-rect/bounding-client-rect-page.component';
+
+export default [
+  {path: 'bounding-client-rect', component: BoundingClientRectPageComponent},
+] satisfies Routes;

apps/components-testing-app/src/app/toolkit/routes.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import {Routes} from '@angular/router';
+
+export default [
+  {
+    path: 'observable', loadChildren: () => import('./observable/routes'),
+  },
+] satisfies Routes;