Migrate Angular UI from portmaster-ui to desktop/angular. Update Earthfile to build libs, UI and tauri-builtin

desktop/angular/projects/safing/ui/src/lib/toggle-switch/_toggle-switch.scss

@@ -0,0 +1,35 @@
+sfng-toggle {
+  @apply flex items-center;
+
+  label {
+    @apply inline-block w-10 h-5 relative bg-gray-500 rounded-full;
+  }
+
+  .slider {
+    @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-600 transition-all duration-100 rounded-full shadow-inner-xs;
+  }
+
+  .dot {
+    @apply absolute transition-all duration-200 rounded-full bg-white;
+    height: 18px;
+    width: 18px;
+    bottom: 1px;
+    left: 1px;
+  }
+
+  input:checked:not(:disabled)+.slider {
+    @apply bg-green-300 bg-opacity-50 text-green;
+  }
+
+  input:disabled+.slider {
+    @apply opacity-75 cursor-not-allowed;
+  }
+
+  .dot.checked {
+    transform: translateX(calc(2.5rem - 18px - 2px));
+  }
+
+  .dot.disabled {
+    transform: translateX(calc((2.5rem - 18px - 2px)/2));
+  }
+}

desktop/angular/projects/safing/ui/src/lib/toggle-switch/index.ts

@@ -0,0 +1,3 @@
+export * from './toggle-switch';
+export * from './toggle.module';
+

desktop/angular/projects/safing/ui/src/lib/toggle-switch/toggle-switch.html

@@ -0,0 +1,20 @@
+<label>
+  <input type="checkbox" class="block w-0 h-0 opacity-0" [ngModel]="value" (ngModelChange)="onValueChange($event)" [disabled]="disabled">
+  <span class="slider">
+    <span class="flex items-center justify-center dot" [class.checked]="value && !disabled" [class.disabled]="disabled">
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor" *ngIf="value && !disabled">
+        <path fill-rule="evenodd"
+          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+          clip-rule="evenodd" />
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor" *ngIf="!value && !disabled">
+        <path fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd" />
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor" *ngIf="disabled">
+        <path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd" />
+      </svg>
+    </span>
+  </span>
+</label>

desktop/angular/projects/safing/ui/src/lib/toggle-switch/toggle-switch.ts

@@ -0,0 +1,59 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, HostListener } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'sfng-toggle',
+  templateUrl: './toggle-switch.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SfngToggleSwitchComponent),
+      multi: true,
+    }
+  ]
+})
+export class SfngToggleSwitchComponent implements ControlValueAccessor {
+  @HostListener('blur')
+  onBlur() {
+    this.onTouch();
+  }
+
+  set disabled(v: any) {
+    this.setDisabledState(coerceBooleanProperty(v))
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  private _disabled = false;
+
+  value: boolean = false;
+
+  constructor(private _changeDetector: ChangeDetectorRef) { }
+
+  setDisabledState(isDisabled: boolean) {
+    this._disabled = isDisabled;
+    this._changeDetector.markForCheck();
+  }
+
+  onValueChange(value: boolean) {
+    this.value = value;
+    this.onChange(this.value);
+  }
+
+  writeValue(value: boolean) {
+    this.value = value;
+    this._changeDetector.markForCheck();
+  }
+
+  onChange = (_: any): void => { };
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+
+  onTouch = (): void => { };
+  registerOnTouched(fn: () => void) {
+    this.onTouch = fn;
+  }
+}

desktop/angular/projects/safing/ui/src/lib/toggle-switch/toggle.module.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { SfngToggleSwitchComponent } from "./toggle-switch";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+  ],
+  declarations: [
+    SfngToggleSwitchComponent,
+  ],
+  exports: [
+    SfngToggleSwitchComponent,
+  ]
+})
+export class SfngToggleSwitchModule { }