feat(file-upload): add framework core bindings

Co-authored-by: Ryan Bower <rbower@qti.qualcomm.com>
Signed-off-by: Dustin Pham <dustinpham95@gmail.com>

Author: DustinPham

packages/frameworks/angular-core/src/file-upload/core-file-upload-clear-trigger.directive.ts

@@ -0,0 +1,21 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {Directive, type OnInit} from "@angular/core"
+
+import {useTrackBindings} from "@qualcomm-ui/angular-core/machine"
+
+import {useFileUploadContext} from "./file-upload-context.service"
+
+@Directive()
+export class CoreFileUploadClearTriggerDirective implements OnInit {
+  protected readonly fileUploadContext = useFileUploadContext()
+
+  protected readonly trackBindings = useTrackBindings(() =>
+    this.fileUploadContext().getClearTriggerBindings(),
+  )
+
+  ngOnInit() {
+    this.trackBindings()
+  }
+}

packages/frameworks/angular-core/src/file-upload/core-file-upload-dropzone.directive.ts

@@ -0,0 +1,50 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {
+  booleanAttribute,
+  computed,
+  Directive,
+  input,
+  type OnInit,
+} from "@angular/core"
+
+import {useId, useOnDestroy} from "@qualcomm-ui/angular-core/common"
+import {useTrackBindings} from "@qualcomm-ui/angular-core/machine"
+import type {SignalifyInput} from "@qualcomm-ui/angular-core/signals"
+import type {DropzoneProps} from "@qualcomm-ui/core/file-upload"
+import type {Booleanish} from "@qualcomm-ui/utils/coercion"
+
+import {useFileUploadContext} from "./file-upload-context.service"
+
+@Directive()
+export class CoreFileUploadDropzoneDirective
+  implements SignalifyInput<DropzoneProps>, OnInit
+{
+  /**
+   * Whether to disable the click event on the dropzone
+   */
+  readonly disableClick = input<boolean | undefined, Booleanish>(undefined, {
+    transform: booleanAttribute,
+  })
+
+  readonly id = input<string>()
+
+  private readonly hostId = computed(() => useId(this, this.id()))
+
+  protected readonly fileUploadContext = useFileUploadContext()
+
+  protected readonly onDestroy = useOnDestroy()
+
+  protected readonly trackBindings = useTrackBindings(() =>
+    this.fileUploadContext().getDropzoneBindings({
+      disableClick: this.disableClick(),
+      id: this.hostId(),
+      onDestroy: this.onDestroy,
+    }),
+  )
+
+  ngOnInit() {
+    this.trackBindings()
+  }
+}

packages/frameworks/angular-core/src/file-upload/core-file-upload-error-text.directive.ts

@@ -0,0 +1,31 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {computed, Directive, input, type OnInit} from "@angular/core"
+
+import {useId, useOnDestroy} from "@qualcomm-ui/angular-core/common"
+import {useTrackBindings} from "@qualcomm-ui/angular-core/machine"
+
+import {useFileUploadContext} from "./file-upload-context.service"
+
+@Directive()
+export class CoreFileUploadErrorTextDirective implements OnInit {
+  readonly id = input<string>()
+
+  protected readonly fileUploadContext = useFileUploadContext()
+
+  private readonly hostId = computed(() => useId(this, this.id()))
+
+  protected readonly onDestroy = useOnDestroy()
+
+  protected readonly trackBindings = useTrackBindings(() =>
+    this.fileUploadContext().getErrorTextBindings({
+      id: this.hostId(),
+      onDestroy: this.onDestroy,
+    }),
+  )
+
+  ngOnInit() {
+    this.trackBindings()
+  }
+}

packages/frameworks/angular-core/src/file-upload/core-file-upload-hidden-input.directive.ts

@@ -0,0 +1,33 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {computed, Directive, input, type OnInit} from "@angular/core"
+
+import {useId, useOnDestroy} from "@qualcomm-ui/angular-core/common"
+import {useTrackBindings} from "@qualcomm-ui/angular-core/machine"
+
+import {useFileUploadContext} from "./file-upload-context.service"
+
+@Directive()
+export class CoreFileUploadHiddenInputDirective implements OnInit {
+  /**
+   * {@link https://www.w3schools.com/html/html_id.asp id attribute}. If
+   * omitted, a unique identifier will be generated for accessibility.
+   */
+  readonly id = input<string>()
+
+  protected readonly fileUploadContext = useFileUploadContext()
+
+  protected readonly onDestroy = useOnDestroy()
+  private readonly hostId = computed(() => useId(this, this.id()))
+
+  protected readonly trackBindings = useTrackBindings(() =>
+    this.fileUploadContext().getHiddenInputBindings({
+      id: this.hostId(),
+    }),
+  )
+
+  ngOnInit() {
+    this.trackBindings()
+  }
+}

packages/frameworks/angular-core/src/file-upload/core-file-upload-item-delete-trigger.directive.ts

@@ -0,0 +1,25 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {Directive, type OnInit} from "@angular/core"
+
+import {useTrackBindings} from "@qualcomm-ui/angular-core/machine"
+
+import {useFileUploadContext} from "./file-upload-context.service"
+import {useFileUploadItemContext} from "./file-upload-item-context.service"
+
+@Directive()
+export class CoreFileUploadItemDeleteTriggerDirective implements OnInit {
+  protected readonly fileUploadContext = useFileUploadContext()
+  protected readonly fileUploadItemContext = useFileUploadItemContext()
+
+  protected readonly trackBindings = useTrackBindings(() =>
+    this.fileUploadContext().getItemDeleteTriggerBindings(
+      this.fileUploadItemContext(),
+    ),
+  )
+
+  ngOnInit() {
+    this.trackBindings()
+  }
+}

packages/frameworks/angular-core/src/file-upload/core-file-upload-item-group.directive.ts

@@ -0,0 +1,34 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {computed, Directive, input, type OnInit} from "@angular/core"
+
+import {useTrackBindings} from "@qualcomm-ui/angular-core/machine"
+import type {SignalifyInput} from "@qualcomm-ui/angular-core/signals"
+import type {ItemGroupProps, ItemType} from "@qualcomm-ui/core/file-upload"
+
+import {useFileUploadContext} from "./file-upload-context.service"
+
+@Directive()
+export class CoreFileUploadItemGroupDirective
+  implements SignalifyInput<ItemGroupProps>, OnInit
+{
+  /**
+   * The type of items in this group (accepted or rejected)
+   */
+  readonly type = input<ItemType | undefined>()
+
+  protected readonly fileUploadContext = useFileUploadContext()
+
+  protected readonly trackBindings = useTrackBindings(() =>
+    this.fileUploadContext().getItemGroupBindings(
+      computed(() => ({
+        type: this.type(),
+      }))(),
+    ),
+  )
+
+  ngOnInit() {
+    this.trackBindings()
+  }
+}

packages/frameworks/angular-core/src/file-upload/core-file-upload-item-name.directive.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {Directive, type OnInit} from "@angular/core"
+
+import {useTrackBindings} from "@qualcomm-ui/angular-core/machine"
+
+import {useFileUploadContext} from "./file-upload-context.service"
+import {useFileUploadItemContext} from "./file-upload-item-context.service"
+
+@Directive()
+export class CoreFileUploadItemNameDirective implements OnInit {
+  protected readonly fileUploadContext = useFileUploadContext()
+  protected readonly fileUploadItemContext = useFileUploadItemContext()
+
+  protected readonly trackBindings = useTrackBindings(() =>
+    this.fileUploadContext().getItemNameBindings(this.fileUploadItemContext()),
+  )
+
+  ngOnInit() {
+    this.trackBindings()
+  }
+}

packages/frameworks/angular-core/src/file-upload/core-file-upload-item-preview-image.directive.ts

@@ -0,0 +1,37 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {Directive, input, type OnInit} from "@angular/core"
+
+import {useTrackBindings} from "@qualcomm-ui/angular-core/machine"
+import type {SignalifyInput} from "@qualcomm-ui/angular-core/signals"
+import type {ItemPreviewImageProps} from "@qualcomm-ui/core/file-upload"
+
+import {useFileUploadContext} from "./file-upload-context.service"
+import {useFileUploadItemContext} from "./file-upload-item-context.service"
+
+@Directive()
+export class CoreFileUploadItemPreviewImageDirective
+  implements
+    Omit<SignalifyInput<ItemPreviewImageProps>, "file" | "fileErrors" | "type">,
+    OnInit
+{
+  /**
+   * The URL of the image to preview
+   */
+  readonly url = input.required<string>()
+
+  protected readonly fileUploadContext = useFileUploadContext()
+  protected readonly fileUploadItemContext = useFileUploadItemContext()
+
+  protected readonly trackBindings = useTrackBindings(() =>
+    this.fileUploadContext().getItemPreviewImageBindings({
+      ...this.fileUploadItemContext(),
+      url: this.url(),
+    }),
+  )
+
+  ngOnInit() {
+    this.trackBindings()
+  }
+}

packages/frameworks/angular-core/src/file-upload/core-file-upload-item-preview.directive.ts

@@ -0,0 +1,25 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {Directive, type OnInit} from "@angular/core"
+
+import {useTrackBindings} from "@qualcomm-ui/angular-core/machine"
+
+import {useFileUploadContext} from "./file-upload-context.service"
+import {useFileUploadItemContext} from "./file-upload-item-context.service"
+
+@Directive()
+export class CoreFileUploadItemPreviewDirective implements OnInit {
+  protected readonly fileUploadContext = useFileUploadContext()
+  protected readonly fileUploadItemContext = useFileUploadItemContext()
+
+  protected readonly trackBindings = useTrackBindings(() =>
+    this.fileUploadContext().getItemPreviewBindings(
+      this.fileUploadItemContext(),
+    ),
+  )
+
+  ngOnInit() {
+    this.trackBindings()
+  }
+}

packages/frameworks/angular-core/src/file-upload/core-file-upload-item-size-text.directive.ts

@@ -0,0 +1,25 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {Directive, type OnInit} from "@angular/core"
+
+import {useTrackBindings} from "@qualcomm-ui/angular-core/machine"
+
+import {useFileUploadContext} from "./file-upload-context.service"
+import {useFileUploadItemContext} from "./file-upload-item-context.service"
+
+@Directive()
+export class CoreFileUploadItemSizeTextDirective implements OnInit {
+  protected readonly fileUploadContext = useFileUploadContext()
+  protected readonly fileUploadItemContext = useFileUploadItemContext()
+
+  protected readonly trackBindings = useTrackBindings(() =>
+    this.fileUploadContext().getItemSizeTextBindings(
+      this.fileUploadItemContext(),
+    ),
+  )
+
+  ngOnInit() {
+    this.trackBindings()
+  }
+}