carriera-intern-components 0.0.1

package/README.md

@@ -0,0 +1,63 @@
+# CarrieraInternComponents
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build carriera-intern-components
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/carriera-intern-components
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/app/components/document-preview/document-preview.component.d.ts

@@ -0,0 +1,41 @@
+import { AppFile } from '../../models/appFile.model';
+import * as i0 from "@angular/core";
+/**
+ * This component displays a preview of a document, including its name, size,
+ * and provides actions to delete, download, and tag the document.
+ */
+export declare class DocumentPreviewComponent {
+    showDeleteModal: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * The application file to be displayed in the preview. This is a required input.
+     * @type {InputSignal<AppFile>}
+     */
+    file: import("@angular/core").InputSignal<AppFile>;
+    /**
+     * An output event that emits the file name when the delete action is triggered.
+     * @type {OutputEmitterRef<string>}
+     */
+    onDelete: import("@angular/core").OutputEmitterRef<string>;
+    /**
+     * An output event that emits the file name when the download action is triggered.
+     * @type {OutputEmitterRef<string>}
+     */
+    onDownload: import("@angular/core").OutputEmitterRef<string>;
+    /**
+     * Handles the delete action. Emits the `fileName` of the current `file` via the `onDelete` output.
+     */
+    handleDelete(): void;
+    /**
+     * Handles the download action. Emits the `fileName` of the current `file` via the `onDownload` output.
+     */
+    handleDownload(): void;
+    /**
+     * Handles the tag action. Currently, it logs a message to the console.
+     * A "TODO" indicates that further logic for tagging needs to be implemented here.
+     */
+    handleTag(): void;
+    cancelDelete(): void;
+    confirmDelete(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocumentPreviewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocumentPreviewComponent, "app-document-preview", never, { "file": { "alias": "file"; "required": true; "isSignal": true; }; }, { "onDelete": "onDelete"; "onDownload": "onDownload"; }, never, never, true, never>;
+}

package/app/components/drop-zone/drop-zone.component.d.ts

@@ -0,0 +1,120 @@
+import { ElementRef } from '@angular/core';
+import { AppFile } from '../../models/appFile.model';
+import * as i0 from "@angular/core";
+/**
+ * A component that provides a user interface for file uploading via
+ * drag-and-drop or a file input dialog. It displays previews of the
+ * selected files in a carousel.
+ */
+export declare class DropZoneComponent {
+    /**
+     * Injects the DocumentService for file processing tasks like
+     * thumbnail generation and PDF page counting.
+     * @private
+     */
+    private documentService;
+    /**
+     * An array of file extensions that should be excluded from the supported list.
+     * @defaultValue `[]` (an empty array)
+     * @type {FileExtension[]}
+     */
+    excludedFileTypes: import("@angular/core").InputSignal<("mp4" | "mov" | "avi" | "pdf" | "jpg" | "jpeg" | "png" | "gif")[]>;
+    /**
+     * The base array of all file extensions that are generally allowed.
+     * Supported file types will be derived from this list, after excluding
+     * any types specified in `excludedFileTypes`.
+     *
+     * @defaultValue `['avi', 'mov', 'mp4', 'pdf', 'gif', 'png', 'jpg', 'jpeg']`
+     * @type {FileExtension[]}
+     */
+    fileTypes: import("@angular/core").InputSignal<("mp4" | "mov" | "avi" | "pdf" | "jpg" | "jpeg" | "png" | "gif")[]>;
+    /**
+     * A computed signal that derives the list of currently supported file extensions.
+     * It filters the base `fileTypes` array, removing any extensions present
+     * in the `excludedFileTypes` input.
+     */
+    supportedFileTypes: import("@angular/core").Signal<("mp4" | "mov" | "avi" | "pdf" | "jpg" | "jpeg" | "png" | "gif")[]>;
+    /**
+     * A signal that holds an array of `AppFile` objects representing the files
+     * that have been selected or dropped by the user.
+     */
+    docs: import("@angular/core").WritableSignal<AppFile[]>;
+    /**
+     * A signal that acts as a boolean flag. It is set to `true` when the user
+     * attempts to upload a file with an unsupported extension.
+     */
+    unsupported: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * Handles the 'change' event from the hidden file input. It extracts the
+     * selected files and passes them to the `processFiles` method.
+     * @param event The `Event` object from the file input element.
+     */
+    onInput(event: Event): void;
+    /**
+     * Handles the 'drop' event on the component. It prevents the browser's
+     * default file handling, extracts the dropped files, and passes them to
+     * the `processFiles` method.
+     * @param event The `DragEvent` object containing the dropped files.
+     */
+    onDrop(event: DragEvent): void;
+    /**
+     * Asynchronously processes a list of files. For each file, it validates
+     * the extension against `supportedFileTypes`. If valid, it generates a
+     * thumbnail, counts pages for PDFs, creates an `AppFile` object, and adds
+     * it to the `docs` signal. If any file is unsupported, the `unsupported`
+     * flag is set.
+     * @param files The `FileList` object to be processed.
+     */
+    processFiles(files: FileList): Promise<void>;
+    /**
+     * Handles the download action for a specific file.
+     * Note: This is a placeholder and currently only logs the file name.
+     * @param fileName The name of the file to be downloaded.
+     */
+    handleDownload(fileName: string): void;
+    /**
+     * A ViewChild reference to the native `<input type='file'>` element.
+     * Used to programmatically trigger the file selection dialog.
+     */
+    inputRef: ElementRef<HTMLInputElement>;
+    /**
+     * Resets the component's state after an unsupported file type error
+     * by setting the `unsupported` signal to `false`.
+     */
+    cancel(): void;
+    /**
+     * Programmatically triggers a click on the hidden file input element,
+     * which opens the system's file selection dialog.
+     */
+    handleClickToAdd(): void;
+    /**
+     * Deletes a file from the preview list. It filters the `docs` array to
+     * remove the specified file and adjusts the carousel position.
+     * @param fileName The name of the file to be deleted.
+     */
+    handleDelete(fileName: string): void;
+    /**
+     * A signal that stores the current index for the file preview carousel.
+     * This determines which part of the carousel is visible.
+     */
+    carouselIndex: import("@angular/core").WritableSignal<number>;
+    /**
+     * A computed signal that calculates the CSS `translateX` value for the
+     * carousel container. This creates the sliding effect based on the
+     * `carouselIndex`.
+     */
+    carouselTransform: import("@angular/core").Signal<string>;
+    /**
+     * Navigates the carousel one step to the left by decrementing the
+     * `carouselIndex`. The index will not go below 0.
+     */
+    carouselLeft(): void;
+    /**
+     * Navigates the carousel one step to the right by incrementing the
+     * `carouselIndex`. The index will not exceed the maximum possible value
+     * based on the number of documents.
+     */
+    carouselRight(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropZoneComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropZoneComponent, "app-drop-zone", never, { "excludedFileTypes": { "alias": "excludedFileTypes"; "required": false; "isSignal": true; }; "fileTypes": { "alias": "fileTypes"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/app/components/input/input.component.d.ts

@@ -0,0 +1,222 @@
+import { ElementRef } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { PasswordDirective } from '../../directives/password.directive';
+import { NumberFormatDirective } from '../../directives/number-format.directive';
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
+import * as i0 from "@angular/core";
+export interface InputConfig {
+    type?: 'text' | 'password' | 'number';
+    name?: string;
+    required?: boolean;
+    alignment?: 'left' | 'right';
+    inverse?: boolean;
+    reveal?: number;
+    icon?: string | null;
+    dropdown?: boolean;
+    search?: boolean;
+}
+/**
+ * A reusable input component that integrates with Angular Forms and supports
+ * various input types, including text, password (with reveal functionality),
+ * and numbers (with formatting and step controls). It also provides error
+ * message display and icon support.
+ */
+export declare class InputComponent implements ControlValueAccessor {
+    ngControl: NgControl | null;
+    /**
+     * Defines the unique identifier for the input element.
+     * This ID is crucial for accessibility, linking the `<label>` to the
+     * native `<input>` via the `for` attribute.
+     * It is provided by the parent component as an Angular `input()` signal.
+     */
+    id: import("@angular/core").InputSignal<string>;
+    /**
+     * Configuration object for the input's behavior and appearance.
+     * This `input()` signal accepts an `InputConfig` object to customize
+     * properties like the input type (`text`, `password`, `number`),
+     * placeholder/label text (`name`), validation (`required`), and other
+     * special behaviors.
+     */
+    config: import("@angular/core").InputSignal<InputConfig>;
+    /**
+     * Internal signal to track the disabled state of the input.
+     * This state is managed by the `ControlValueAccessor`'s `setDisabledState`
+     * method, which is called by Angular's Forms API when the associated
+     * form control's status changes. Defaults to `false`.
+     */
+    disabled: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * Holds the internal, unmasked, and unformatted value of the input.
+     * This signal represents the component's "source of truth" for its value.
+     * It is updated by user input (via `onInput` or `onRealValueChange`) and
+     * programmatically by the `ControlValueAccessor`'s `writeValue` method.
+     * The value from this signal is what is propagated back to the parent `FormControl`.
+     */
+    value: import("@angular/core").WritableSignal<string>;
+    /**
+     * Tracks the visibility state for inputs of `type='password'`.
+     * When `true`, the password's characters are shown; when `false`, they are
+     * masked. This is toggled by the `toggleVisibility` method.
+     * Defaults to `false`.
+     */
+    visible: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * A computed signal that dynamically calculates the step value for number inputs.
+     * The step value changes based on the magnitude of the current `value()`.
+     * This allows for more intuitive incrementing and decrementing (e.g., smaller
+     * steps for smaller numbers, larger steps for larger numbers). It derives its
+     * value from the `getStepValue` method and automatically updates when the
+     * input's `value` signal changes.
+     */
+    step: import("@angular/core").Signal<number>;
+    inputRef: ElementRef<HTMLInputElement>;
+    PasswordDirective: PasswordDirective;
+    NumberFormatDirective: NumberFormatDirective;
+    dropdown: NgbPopover;
+    /**
+     * Constructor for the InputComponent.
+     * It injects NgControl to integrate with Angular's forms API.
+     * If NgControl is present, it sets this component as the value accessor
+     * for the form control.
+     * @param ngControl - Optional NgControl instance for form integration.
+     */
+    constructor(ngControl: NgControl | null);
+    /**
+     * Handles the native 'input' event from the HTMLInputElement.
+     * Updates the component's internal value and notifies Angular forms
+     * about the change.
+     * For 'password' type (when not visible) and 'number' type, it relies
+     * on associated directives (PasswordDirective, NumberFormatDirective)
+     * to get the real value, as the displayed value might be
+     * masked or formatted.
+     * @param event - The input event object.
+     */
+    onInput(event: Event): void;
+    /**
+     * Listens for a custom 'realValueChange' event.
+     * This event is expected to be emitted by child directives (PasswordDirective, NumberFormatDirective)
+     * when their internal "real" value changes, allowing the parent input component
+     * to stay in sync.
+     * @param event - A CustomEvent containing the new real value in `event.detail`.
+     */
+    onRealValueChange(event: CustomEvent): void;
+    /**
+     * Increments the value of a number input by the current step.
+     * If the current value is not a valid number, it starts from the `min` input.
+     * After updating, it notifies forms, updates the view, and focuses the input.
+     * @param event - The MouseEvent that triggered the increment.
+     */
+    increment(event: MouseEvent): void;
+    /**
+     * Decrements the value of a number input by the current step.
+     * If the current value is not a valid number, it starts from the `min` input.
+     * The value will not go below the minimum value.
+     * After updating, it notifies forms, updates the view, and focuses the input.
+     * @param event - The MouseEvent that triggered the decrement.
+     */
+    decrement(event: MouseEvent): void;
+    /**
+     * Calculates the step value for number inputs based on the current value.
+     * The step dynamically adjusts:
+     * - 1000 if value < 20000
+     * - 5000 if value < 50000
+     * - 10000 if value < 100000
+     * - 20000 otherwise
+     * Uses `min()` as a fallback if the current value is not a valid number.
+     * @returns The calculated step value.
+     */
+    getStepValue(): number;
+    /**
+     * Toggles the visibility of the password input.
+     * Toggles the `visible` state and updates the input's displayed value.
+     * @param event - The MouseEvent that triggered the toggle.
+     */
+    toggleVisibility(event: MouseEvent): void;
+    /**
+     * Sets the value in the actual HTML input element or updates the
+     * "real" value in the associated directive.
+     * - For 'password' type: If not visible, it updates the PasswordDirective's real value.
+     *   If visible, it falls through to the default behavior.
+     * - For 'number' type: It updates the NumberFormatDirective's real value.
+     * - For other types (or visible password): It sets the `value` property of the native input element.
+     */
+    setValue(): void;
+    /**
+     * Focuses the input element.
+     * Prevents the default action of the mouse event to avoid unintended behaviors
+     * like double focus or focus loss.
+     * @param event - The MouseEvent that initiated the focus action.
+     */
+    focus(event: MouseEvent): void;
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    /**
+     * Writes a new value to the element. (ControlValueAccessor)
+     * This method is called by the Forms API to update the view when
+     * the form control's value changes programmatically.
+     * Uses `setTimeout` to ensure that `setValue` is called after the
+     * view (and potentially child directives) has been initialized,
+     * especially relevant if `writeValue` is called early in the component lifecycle.
+     * @param value - The new value to write.
+     */
+    writeValue(value: string): void;
+    /**
+     * Registers a callback function that should be called when the
+     * control's value changes in the UI. (ControlValueAccessor)
+     * @param fn - The callback function to register.
+     */
+    registerOnChange(fn: any): void;
+    /**
+     * Registers a callback function that should be called when the
+     * control receives a blur event. (ControlValueAccessor)
+     * @param fn - The callback function to register.
+     */
+    registerOnTouched(fn: any): void;
+    /**
+     * This function is called by the Forms API when the control's disabled
+     * state changes. (ControlValueAccessor)
+     * @param isDisabled - True if the control should be disabled, false otherwise.
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Called when the input element loses focus (blur event).
+     * Triggers the `onTouched` callback to notify Angular Forms that the
+     * input has been interacted with.
+     */
+    onBlur(): void;
+    /**
+     * Resets the input field's value to an empty string.
+     * Notifies Angular Forms of the change and updates the view.
+     */
+    reset(): void;
+    /**
+     * Represents the base list of options available for the dropdown.
+     * This is an input signal, meaning its value can be set from a parent component.
+     * @type {Signal<string[]>}
+     */
+    dropdownOptions: import("@angular/core").InputSignal<string[]>;
+    /**
+     * A computed signal that provides the current list of options to display in the dropdown.
+     *
+     * If `search` is `false`, it returns the full `dropdownOptions`.
+     * If `search` is `true`, it filters `dropdownOptions` based on the `value` signal,
+     * performing a case-insensitive partial text match.
+     *
+     * @type {Signal<string[]>}
+     */
+    options: import("@angular/core").Signal<string[]>;
+    /**
+     * Formats an option for the dropdown by highlighting the search value if it exists in the option.
+     * @param option - The option to format.
+     * @returns The formatted option.
+     */
+    formatOption(option: string): string;
+    /**
+     * Handles when an option is selected from the dropdown.
+     * @param option - The selected option.
+     * @param event - The MouseEvent that initiated the selection action.
+     */
+    handleOption(option: string, event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, [{ optional: true; self: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "app-input", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "dropdownOptions": { "alias": "dropdownOptions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/app/directives/number-format.directive.d.ts

@@ -0,0 +1,105 @@
+import { ElementRef, OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class NumberFormatDirective implements OnInit {
+    private el;
+    /**
+     * Input property to enable or disable the number formatting.
+     * Defaults to true, meaning formatting is active by default.
+     */
+    appNumberFormat: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Stores the unformatted, "real" numeric value of the input.
+     * This is the value that should be used for calculations or form submissions,
+     * as opposed to the formatted display value.
+     */
+    private realValue;
+    constructor(el: ElementRef<HTMLInputElement>);
+    /**
+     * Lifecycle hook that is called after Angular has initialized all data-bound
+     * properties of a directive.
+     * If number formatting is enabled, it sets up the initial formatting.
+     */
+    ngOnInit(): void;
+    /**
+     * Initializes the number formatting on the input element.
+     * It extracts the initial numeric value from the input's current value
+     * and then updates the display with the formatted version.
+     */
+    private setupNumberFormatting;
+    /**
+     * HostListener for the 'input' event on the host element.
+     * This triggers whenever the user types or pastes content into the input.
+     * It extracts the numeric value from the current input, updates the
+     * display with the formatted number, moves the cursor to the end,
+     * and dispatches a 'realValueChange' event with the unformatted numeric value.
+     * @param event - The InputEvent object.
+     */
+    onInput(event: InputEvent): void;
+    /**
+     * HostListener for the 'cut' event.
+     * Prevents the default cut behavior to manually handle the value change.
+     * It reconstructs the value after the cut, extracts the numeric part,
+     * updates the display, sets the cursor, and dispatches the real value.
+     * @param event - The ClipboardEvent object.
+     */
+    onCut(event: ClipboardEvent): void;
+    /**
+     * HostListener for the 'copy' event.
+     * Prevents the default copy behavior if there's a selection to ensure
+     * that the copied text is the unformatted numeric value of the selection,
+     * rather than the potentially formatted display text.
+     * @param event - The ClipboardEvent object.
+     */
+    onCopy(event: ClipboardEvent): void;
+    /**
+     * HostListener for the 'keydown' event.
+     * Filters key presses to allow only digits, a single decimal point,
+     * and control keys (Backspace, Arrows, Tab, etc.).
+     * This helps maintain a valid numeric input format before the 'input' event fires.
+     * @param event - The KeyboardEvent object.
+     */
+    onKeydown(event: KeyboardEvent): void;
+    /**
+     * Extracts a clean numeric string from a given value.
+     * It removes any non-digit characters except for a single decimal point.
+     * It also ensures that there's only one decimal point and limits
+     * the decimal part to two digits.
+     * @param value - The string value to clean.
+     * @returns A string representing the extracted numeric value.
+     */
+    private extractNumericValue;
+    /**
+     * Updates the input element's display value with the formatted version
+     * of the current `realValue`.
+     * It uses the `NumberFormatPipe` for formatting.
+     */
+    private updateDisplayValue;
+    /**
+     * Sets the cursor position to the end of the input field.
+     * This is typically called after the input value is reformatted to prevent
+     * the cursor from jumping to an unexpected position.
+     * Uses `setTimeout` to ensure the operation occurs after Angular's view update.
+     */
+    private setCursorToEnd;
+    /**
+     * Dispatches a custom event named 'realValueChange' from the host element.
+     * The event's `detail` property contains the unformatted `realValue`.
+     * This allows parent components or other directives to listen for changes
+     * to the underlying numeric value.
+     */
+    private dispatchRealValueChange;
+    /**
+     * Public method to get the current unformatted "real" numeric value.
+     * @returns The real numeric value as a string.
+     */
+    getRealValue(): string;
+    /**
+     * Public method to set the "real" numeric value from outside the directive.
+     * It extracts the numeric part from the provided value and updates the
+     * input's display with the formatted version.
+     * @param value - The new value to set (can be formatted or unformatted).
+     */
+    setRealValue(value: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NumberFormatDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NumberFormatDirective, "[appNumberFormat]", never, { "appNumberFormat": { "alias": "appNumberFormat"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/app/directives/password.directive.d.ts

@@ -0,0 +1,94 @@
+import { ElementRef, OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class PasswordDirective implements OnInit {
+    private el;
+    /**
+     * Input property to enable or disable the password masking behavior.
+     */
+    appPassword: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Input property to hide or show the password
+     */
+    visible: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Input property to specify how many characters from the end of the
+     * password should be revealed. Defaults to 0 (fully masked).
+     */
+    reveal: import("@angular/core").InputSignal<number>;
+    /**
+     * Stores the actual, unmasked password value,
+     * while the input element displays a masked version.
+     */
+    private realValue;
+    constructor(el: ElementRef<HTMLInputElement>);
+    /**
+     * Lifecycle hook called after Angular initializes the directive's data-bound properties.
+     * If password masking is enabled, it sets up the initial masking.
+     */
+    ngOnInit(): void;
+    /**
+     * Sets up the initial state for password masking.
+     * It reads the initial value from the input (if any) as the `realValue`
+     * and then updates the input's display to show the masked version.
+     */
+    private setupPasswordMasking;
+    /**
+     * HostListener for the 'input' event on the host element.
+     * This is the core logic for synchronizing `realValue` with user input
+     * on the masked field. It infers changes to `realValue`
+     * based on `event.data`, cursor position, and the difference in length
+     * between the input's current display value and the previous `realValue`.
+     * @param event - The InputEvent object.
+     */
+    onInput(event: InputEvent): void;
+    /**
+     * HostListener for the 'cut' event.
+     * Prevents default cut behavior to operate on `realValue`.
+     * It copies the corresponding part of `realValue` to the clipboard
+     * and updates `realValue` and the display.
+     * @param event - The ClipboardEvent object.
+     */
+    onCut(event: ClipboardEvent): void;
+    /**
+     * HostListener for the 'copy' event.
+     * Prevents default copy behavior to ensure the unmasked `realValue` segment is copied.
+     * @param event - The ClipboardEvent object.
+     */
+    onCopy(event: ClipboardEvent): void;
+    /**
+     * Updates the input element's display value with a masked version of `realValue`.
+     * Uses '•' for masked characters. Respects the `reveal` input to show
+     * a specified number of characters from the end of the password.
+     * This method is responsible for creating the visual masking.
+     */
+    private updateDisplayValue;
+    /**
+     * Sets the cursor position within the input field.
+     * This is crucial after `updateDisplayValue` changes the entire input value,
+     * to maintain a natural cursor behavior for the user.
+     * Uses `setTimeout` to ensure the operation occurs after Angular's view update.
+     * @param position - The desired cursor position.
+     */
+    private setCursorPosition;
+    /**
+     * Dispatches a custom event named 'realValueChange' from the host element.
+     * The event's `detail` property contains the unmasked `realValue`.
+     * This allows parent components (like your `InputComponent`) to listen for
+     * changes to the actual password.
+     */
+    private dispatchRealValueChange;
+    /**
+     * Public method to get the current unmasked "real" password value.
+     * @returns The real password value as a string.
+     */
+    getRealValue(): string;
+    /**
+     * Public method to set the "real" password value from outside the directive
+     * (e.g., when the parent form control's value is changed programmatically).
+     * It updates the internal `realValue` and then refreshes the masked display.
+     * @param value - The new real password value to set.
+     */
+    setRealValue(value: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PasswordDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PasswordDirective, "[appPassword]", never, { "appPassword": { "alias": "appPassword"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "reveal": { "alias": "reveal"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/app/models/appFile.model.d.ts

@@ -0,0 +1,12 @@
+declare const supportedFileTypes: readonly ["mp4", "mov", "avi", "pdf", "jpg", "jpeg", "png", "gif"];
+export type FileExtension = (typeof supportedFileTypes)[number];
+export interface AppFile {
+    fileName: string;
+    baseName: string;
+    type: FileExtension;
+    size: number;
+    imagePreviewUrl?: string;
+    pageCount?: number;
+    file: File;
+}
+export {};

package/app/pipes/bytes-to-human-readable.pipe.d.ts

@@ -0,0 +1,7 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class BytesToHumanReadablePipe implements PipeTransform {
+    transform(bytes: number | null | undefined, precision?: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BytesToHumanReadablePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<BytesToHumanReadablePipe, "bytesToHumanReadable", true>;
+}