Feature: app branding (#5357)

src-ui/src/app/components/common/input/file/file.component.html

@@ -0,0 +1,37 @@
+<div class="mb-3" [class.pb-3]="error">
+    <div class="row">
+      <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+        @if (title) {
+          <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+        }
+        @if (removable) {
+          <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+            <svg class="sidebaricon" fill="currentColor">
+              <use xlink:href="assets/bootstrap-icons.svg#x"/>
+              </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+            </button>
+          }
+        </div>
+        <div class="input-group" [class.col-md-9]="horizontal" [class.is-invalid]="error">
+          <input #fileInput type="file" class="form-control" [id]="inputId" (change)="onFile($event)" [disabled]="disabled">
+          <button class="btn btn-outline-primary py-0" type="button" (click)="uploadClicked()" [disabled]="disabled || !file" i18n>Upload</button>
+        </div>
+        @if (filename) {
+            <div class="form-text d-flex align-items-center">
+              <span class="text-muted">{{filename}}</span>
+              <button type="button" class="btn btn-link btn-sm text-danger ms-2" (click)="clear()">
+                <svg class="sidebaricon" fill="currentColor">
+                  <use xlink:href="assets/bootstrap-icons.svg#x"/>
+                </svg><small class="ms-1" i18n>Remove</small>
+              </button>
+            </div>
+        }
+        <input #inputField type="hidden" class="form-control small" [(ngModel)]="value" [disabled]="true">
+        @if (hint) {
+            <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+        }
+        <div class="invalid-feedback position-absolute top-100">
+            {{error}}
+        </div>
+      </div>
+    </div>

src-ui/src/app/components/common/input/file/file.component.spec.ts

@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { FileComponent } from './file.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+
+describe('FileComponent', () => {
+  let component: FileComponent
+  let fixture: ComponentFixture<FileComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FileComponent],
+      imports: [FormsModule, ReactiveFormsModule, HttpClientTestingModule],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(FileComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should update file on change', () => {
+    const event = { target: { files: [new File([], 'test.png')] } }
+    component.onFile(event as any)
+    expect(component.file.name).toEqual('test.png')
+  })
+
+  it('should get filename', () => {
+    component.value = 'https://example.com:8000/logo/filename.svg'
+    expect(component.filename).toEqual('filename.svg')
+  })
+
+  it('should fire upload event', () => {
+    let firedFile
+    component.file = new File([], 'test.png')
+    component.upload.subscribe((file) => (firedFile = file))
+    component.uploadClicked()
+    expect(firedFile.name).toEqual('test.png')
+    expect(component.file).toBeUndefined()
+  })
+})

src-ui/src/app/components/common/input/file/file.component.ts

@@ -0,0 +1,53 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Output,
+  ViewChild,
+  forwardRef,
+} from '@angular/core'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import { AbstractInputComponent } from '../abstract-input'
+
+@Component({
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FileComponent),
+      multi: true,
+    },
+  ],
+  selector: 'pngx-input-file',
+  templateUrl: './file.component.html',
+  styleUrl: './file.component.scss',
+})
+export class FileComponent extends AbstractInputComponent<string> {
+  @Output()
+  upload = new EventEmitter<File>()
+
+  public file: File
+
+  @ViewChild('fileInput') fileInput: ElementRef
+
+  get filename(): string {
+    return this.value
+      ? this.value.substring(this.value.lastIndexOf('/') + 1)
+      : null
+  }
+
+  onFile(event: Event) {
+    this.file = (event.target as HTMLInputElement).files[0]
+  }
+
+  uploadClicked() {
+    this.upload.emit(this.file)
+    this.clear()
+  }
+
+  clear() {
+    this.file = undefined
+    this.fileInput.nativeElement.value = null
+    this.writeValue(null)
+    this.onChange(null)
+  }
+}