Config refactor (#2128)

* prevent excessive nesting for unions, closes #2107, and genrally refactor config

* a littel cleaner

* working but with inefficiencies

* remove warning from union list

* introduce messaging for config with only pointers

* feat(shared): `ElasticContainer` add new component (#2134)

* feat(shared): `ElasticContainer` add new component

* chore: fix imports

* revert to 250 for resize

* remove logs

Co-authored-by: Alex Inkin <alexander@inkin.ru>

frontend/projects/shared/package.json

@@ -6,6 +6,8 @@
     "@angular/core": ">=13.2.0",
     "@angular/router": ">=13.2.0",
     "@ionic/angular": ">=6.0.0",
+    "@ng-web-apis/mutation-observer": ">=2.0.0",
+    "@ng-web-apis/resize-observer": ">=2.0.0",
     "@start9labs/emver": "^0.1.5"
   },
   "exports": {

frontend/projects/shared/src/components/elastic-container/elastic-container.component.html

@@ -0,0 +1,3 @@
+<div (elasticContainer)="height = $event">
+  <ng-content></ng-content>
+</div>

frontend/projects/shared/src/components/elastic-container/elastic-container.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  overflow: hidden;
+  transition: height 0.25s;
+}

frontend/projects/shared/src/components/elastic-container/elastic-container.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'
+
+@Component({
+  selector: 'elastic-container',
+  templateUrl: './elastic-container.component.html',
+  styleUrls: ['./elastic-container.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ElasticContainerComponent {
+  @HostBinding('style.height.px')
+  height = NaN
+}

frontend/projects/shared/src/components/elastic-container/elastic-container.directive.ts

@@ -0,0 +1,35 @@
+import { Directive, ElementRef, inject, Output } from '@angular/core'
+import { ResizeObserverService } from '@ng-web-apis/resize-observer'
+import {
+  MUTATION_OBSERVER_INIT,
+  MutationObserverService,
+} from '@ng-web-apis/mutation-observer'
+import { distinctUntilChanged, map, merge } from 'rxjs'
+
+@Directive({
+  selector: '[elasticContainer]',
+  providers: [
+    ResizeObserverService,
+    MutationObserverService,
+    {
+      provide: MUTATION_OBSERVER_INIT,
+      useValue: {
+        childList: true,
+        characterData: true,
+        subtree: true,
+      },
+    },
+  ],
+})
+export class ElasticContainerDirective {
+  private readonly elementRef = inject(ElementRef)
+
+  @Output()
+  readonly elasticContainer = merge(
+    inject(ResizeObserverService),
+    inject(MutationObserverService),
+  ).pipe(
+    map(() => this.elementRef.nativeElement.clientHeight),
+    distinctUntilChanged(),
+  )
+}

frontend/projects/shared/src/components/elastic-container/elastic-container.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core'
+
+import { ElasticContainerComponent } from './elastic-container.component'
+import { ElasticContainerDirective } from './elastic-container.directive'
+
+@NgModule({
+  declarations: [ElasticContainerComponent, ElasticContainerDirective],
+  exports: [ElasticContainerComponent],
+})
+export class ElasticContainerModule {}

frontend/projects/shared/src/public-api.ts

@@ -9,6 +9,9 @@ export * from './components/alert/alert.component'
 export * from './components/alert/alert.module'
 export * from './components/alert/alert-button.directive'
 export * from './components/alert/alert-input.directive'
+export * from './components/elastic-container/elastic-container.component'
+export * from './components/elastic-container/elastic-container.directive'
+export * from './components/elastic-container/elastic-container.module'
 export * from './components/markdown/markdown.component'
 export * from './components/markdown/markdown.component.module'
 export * from './components/text-spinner/text-spinner.component'