chore: update Taiga UI and remove unnecessary styles (#2200)

* chore: update Taiga UI and remove unnecessary styles

* update workflow and package lock

---------

Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>

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

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

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

@@ -1,10 +0,0 @@
-:host {
-  display: block;
-  overflow: hidden;
-  transition: height 0.25s;
-}
-
-.wrapper {
-  padding-top: 1px;
-  margin-top: -1px;
-}

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

@@ -1,12 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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 - 1), // Compensate for padding
-    distinctUntilChanged(),
-  )
-}

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

@@ -1,10 +0,0 @@
-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,9 +9,6 @@ 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'

frontend/projects/ui/src/app/components/form-object/form-object.component.module.ts

@@ -15,7 +15,8 @@ import {
 } from './form-object.pipes'
 import { IonicModule } from '@ionic/angular'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { ElasticContainerModule, SharedPipesModule } from '@start9labs/shared'
+import { SharedPipesModule } from '@start9labs/shared'
+import { TuiElasticContainerModule } from '@taiga-ui/kit'
 import { EnumListPageModule } from 'src/app/modals/enum-list/enum-list.module'
 
 @NgModule({
@@ -37,7 +38,7 @@ import { EnumListPageModule } from 'src/app/modals/enum-list/enum-list.module'
     ReactiveFormsModule,
     SharedPipesModule,
     EnumListPageModule,
-    ElasticContainerModule,
+    TuiElasticContainerModule,
   ],
   exports: [FormObjectComponent, FormLabelComponent],
 })

frontend/projects/ui/src/app/components/form-object/form-union.component.html

@@ -31,7 +31,7 @@
     </ion-select>
   </ion-item-divider>
 
-  <elastic-container [id]="objectId | toElementId: 'union'" class="indent">
+  <tui-elastic-container [id]="objectId | toElementId: 'union'" class="indent">
     <form-object
       [objectSpec]="spec.variants[unionValue]"
       [formGroup]="formGroup"
@@ -39,5 +39,5 @@
       [original]="original"
       (onResize)="resize()"
     ></form-object>
-  </elastic-container>
+  </tui-elastic-container>
 </div>

frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.html

@@ -1,10 +1,10 @@
 <div *ngIf="installed$ | async as installed" class="wrapper">
   <button
     *ngFor="let widget of widgets | tuiFilter: filter:installed; empty: empty"
-    class="tui-island tui-island_size_l"
+    class="button"
     (click)="context.completeWith(widget)"
   >
-    <span class="tui-island__title">{{ widget.meta.name }}</span>
+    {{ widget.meta.name }}
   </button>
   <ng-template #empty>No additional widgets found</ng-template>
 </div>

frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.scss

@@ -4,6 +4,13 @@
   gap: 12px;
 }
 
-.tui-island {
+.button {
+  background: transparent;
   text-align: left;
+  font-size: 18px;
+  font-weight: bold;
+  border: none;
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: inset 0 0 0 1px var(--tui-base-03);
 }