fix: address comments

web/projects/ui/src/app/routes/portal/components/form/containers/control.component.ts

@@ -2,29 +2,19 @@ import { AsyncPipe } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
-  DestroyRef,
   inject,
   Input,
-  TemplateRef,
-  ViewChild,
 } from '@angular/core'
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
-import { i18nPipe } from '@start9labs/shared'
+import { DialogService, i18nPipe } from '@start9labs/shared'
 import { IST } from '@start9labs/start-sdk'
 import { tuiAsControl, TuiControl } from '@taiga-ui/cdk'
-import {
-  TuiAlertService,
-  TuiButton,
-  TuiDialogContext,
-  TuiError,
-} from '@taiga-ui/core'
+import { TuiError } from '@taiga-ui/core'
 import {
   TUI_FORMAT_ERROR,
   TUI_VALIDATION_ERRORS,
   TuiFieldErrorPipe,
 } from '@taiga-ui/kit'
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus'
-import { filter } from 'rxjs'
 
 import { ControlSpec } from '../controls/control'
 import { CONTROLS } from '../controls/controls'
@@ -46,35 +36,6 @@ export const ERRORS = [
   template: `
     <ng-container *polymorpheusOutlet="controls[spec.type]" />
     <tui-error [error]="order | tuiFieldError | async" />
-    @if (spec.warning || immutable) {
-      <ng-template #warning let-completeWith="completeWith">
-        {{ spec.warning }}
-        @if (immutable) {
-          <p>{{ 'This value cannot be changed once set' | i18n }}!</p>
-        }
-        <div [style.margin-top.rem]="0.5">
-          <button
-            tuiButton
-            type="button"
-            appearance="secondary-grayscale"
-            size="s"
-            [style.margin-inline-end.rem]="0.5"
-            (click)="completeWith(false)"
-          >
-            {{ 'Continue' | i18n }}
-          </button>
-          <button
-            tuiButton
-            type="button"
-            appearance="flat-grayscale"
-            size="s"
-            (click)="completeWith(true)"
-          >
-            {{ 'Cancel' | i18n }}
-          </button>
-        </div>
-      </ng-template>
-    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
@@ -92,52 +53,43 @@ export const ERRORS = [
     },
   ],
   hostDirectives: [ControlDirective],
-  imports: [
-    AsyncPipe,
-    i18nPipe,
-    PolymorpheusOutlet,
-    TuiError,
-    TuiFieldErrorPipe,
-    TuiButton,
-  ],
+  imports: [AsyncPipe, PolymorpheusOutlet, TuiError, TuiFieldErrorPipe],
 })
 export class FormControlComponent<
   T extends ControlSpec,
   V,
 > extends TuiControl<V | null> {
-  private readonly destroyRef = inject(DestroyRef)
-  private readonly alerts = inject(TuiAlertService)
+  private readonly dialogs = inject(DialogService)
   private readonly i18n = inject(i18nPipe)
 
   protected readonly controls = CONTROLS
 
   @Input({ required: true })
   spec!: T
 
-  @ViewChild('warning')
-  warning?: TemplateRef<TuiDialogContext<boolean>>
-
   warned = false
   readonly order = ERRORS
 
-  get immutable(): boolean {
-    return 'immutable' in this.spec && this.spec.immutable
-  }
-
   onInput(value: V | null) {
     const previous = this.value()
+    const immutable =
+      'immutable' in this.spec && this.spec.immutable
+        ? `<p>${this.i18n.transform('This value cannot be changed once set')}</p>`
+        : ''
+    const warning = this.spec.warning + immutable
 
-    if (!this.warned && this.warning) {
-      this.alerts
-        .open<boolean>(this.warning, {
-          label: this.i18n.transform('Warning'),
-          appearance: 'warning',
+    if (!this.warned && warning) {
+      this.dialogs
+        .openConfirm({
+          label: 'Warning',
+          data: { content: warning as any, yes: 'Confirm', no: 'Cancel' },
           closeable: false,
-          autoClose: 0,
+          dismissible: false,
         })
-        .pipe(filter(Boolean), takeUntilDestroyed(this.destroyRef))
-        .subscribe(() => {
-          this.onChange(previous)
+        .subscribe(confirm => {
+          if (!confirm) {
+            this.onChange(previous)
+          }
         })
     }
 

web/projects/ui/src/app/routes/portal/components/form/controls/number.component.ts

@@ -21,14 +21,14 @@ import { HintPipe } from '../pipes/hint.pipe'
       }
       <input
         tuiInputNumber
-        [postfix]="spec.units ? ' ' + spec.units : ''"
+        [postfix]="postfix"
         [min]="spec.min"
         [max]="spec.max"
         [step]="spec.step || 0"
         [invalid]="control.invalid()"
         [disabled]="!!spec.disabled"
         [readOnly]="readOnly"
-        [placeholder]="spec.placeholder || ''"
+        [placeholder]="placeholder"
         [(ngModel)]="value"
         (blur)="control.onTouched()"
       />
@@ -51,4 +51,16 @@ export class FormNumberComponent extends Control<IST.ValueSpecNumber, number> {
   get precision(): number {
     return this.spec.integer ? 0 : Infinity
   }
+
+  get postfix(): string {
+    return this.spec.units && (this.value !== null || !this.spec.placeholder)
+      ? ` ${this.spec.units}`
+      : ''
+  }
+
+  get placeholder(): string {
+    const units = this.spec.units ? ` (${this.spec.units})` : ''
+
+    return this.spec.placeholder ? this.spec.placeholder + units : ''
+  }
 }

web/projects/ui/src/app/routes/portal/components/form/controls/select.component.ts

@@ -3,8 +3,14 @@ import { FormsModule } from '@angular/forms'
 import { invert } from '@start9labs/shared'
 import { IST } from '@start9labs/start-sdk'
 import { TUI_IS_MOBILE } from '@taiga-ui/cdk'
-import { TuiIcon, TuiTextfield } from '@taiga-ui/core'
-import { TuiDataListWrapper, TuiSelect, TuiTooltip } from '@taiga-ui/kit'
+import { TuiDataList, TuiIcon, TuiTextfield } from '@taiga-ui/core'
+import {
+  TuiDataListWrapper,
+  TuiFluidTypography,
+  tuiFluidTypographyOptionsProvider,
+  TuiSelect,
+  TuiTooltip,
+} from '@taiga-ui/kit'
 
 import { Control } from './control'
 import { HintPipe } from '../pipes/hint.pipe'
@@ -41,18 +47,32 @@ import { HintPipe } from '../pipes/hint.pipe'
         />
       }
       @if (!mobile) {
-        <tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items" />
+        <tui-data-list *tuiTextfieldDropdown>
+          @for (item of items; track $index) {
+            <button
+              tuiOption
+              new
+              tuiFluidTypography
+              [style.white-space]="'nowrap'"
+              [value]="item"
+            >
+              {{ item }}
+            </button>
+          }
+        </tui-data-list>
       }
       @if (spec | hint; as hint) {
         <tui-icon [tuiTooltip]="hint" />
       }
     </tui-textfield>
   `,
+  providers: [tuiFluidTypographyOptionsProvider({ max: 1 })],
   imports: [
     FormsModule,
     TuiTextfield,
     TuiSelect,
-    TuiDataListWrapper,
+    TuiDataList,
+    TuiFluidTypography,
     TuiIcon,
     TuiTooltip,
     HintPipe,