carriera-intern-components 0.0.1

package/fesm2022/carriera-intern-components.mjs

@@ -0,0 +1,1354 @@
+import * as i0 from '@angular/core';
+import { Pipe, input, HostListener, Directive, signal, computed, ViewChild, Optional, Self, Component, output, Injectable, inject } from '@angular/core';
+import { SvgIconComponent } from 'angular-svg-icon';
+import * as i2 from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i1 from '@angular/forms';
+import * as pdfjsLib from 'pdfjs-dist';
+
+class NumberFormatPipe {
+    transform(value) {
+        if (!value)
+            return '';
+        if (value.includes('.')) {
+            const [integerPart, decimalPart] = value.split('.');
+            // Cap decimal places to maximum 2
+            const cappedDecimalPart = decimalPart ? decimalPart.substring(0, 2) : '';
+            // Format the integer part with commas
+            const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+            // If there's a decimal part, show it (capped at 2 places)
+            if (decimalPart !== undefined) {
+                return `${formattedInteger}.${cappedDecimalPart}`;
+            }
+            // If user just typed a decimal point, show it
+            return `${formattedInteger}.`;
+        }
+        return value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NumberFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NumberFormatPipe, isStandalone: true, name: "numberFormat" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NumberFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'numberFormat',
+                }]
+        }] });
+
+class ErrorMessagePipe {
+    numberFormatPipe = new NumberFormatPipe();
+    transform(errors) {
+        if (!errors)
+            return [];
+        const messages = {
+            required: () => 'Required',
+            minlength: (value) => `Minimum length is ${value.requiredLength}`,
+            maxlength: (value) => `Maximum length is ${value.requiredLength}`,
+            min: (value) => `Minimum value is ${this.numberFormatPipe.transform(String(value.min))}`,
+            max: (value) => `Maximum value is ${this.numberFormatPipe.transform(String(value.max))}`,
+            email: () => 'Invalid email format',
+            pattern: () => 'Invalid format',
+        };
+        return Object.entries(errors).map(([key, value]) => {
+            const getMessage = messages[key];
+            return getMessage ? getMessage(value) : 'Invalid field.';
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: ErrorMessagePipe, isStandalone: true, name: "errorMessage" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorMessagePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'errorMessage'
+                }]
+        }] });
+
+class PasswordDirective {
+    el;
+    /**
+     * Input property to enable or disable the password masking behavior.
+     */
+    appPassword = input(true);
+    /**
+     * Input property to hide or show the password
+     */
+    visible = input(false);
+    /**
+     * Input property to specify how many characters from the end of the
+     * password should be revealed. Defaults to 0 (fully masked).
+     */
+    reveal = input(0);
+    /**
+     * Stores the actual, unmasked password value,
+     * while the input element displays a masked version.
+     */
+    realValue = '';
+    constructor(el) {
+        this.el = el;
+    }
+    /**
+     * Lifecycle hook called after Angular initializes the directive's data-bound properties.
+     * If password masking is enabled, it sets up the initial masking.
+     */
+    ngOnInit() {
+        if (this.appPassword()) {
+            this.setupPasswordMasking();
+        }
+    }
+    /**
+     * 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.
+     */
+    setupPasswordMasking() {
+        const input = this.el.nativeElement;
+        this.realValue = input.value || ''; // Assume initial value is unmasked or is the real one
+        this.updateDisplayValue();
+    }
+    /**
+     * 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) {
+        if (!this.appPassword())
+            return;
+        const input = this.el.nativeElement; // Using el.nativeElement as in original code
+        const cursorPosition = input.selectionStart || 0;
+        const displayValue = input.value; // Value after browser's immediate processing of input
+        // Calculate difference from the *previous* realValue length
+        const lengthDiff = displayValue.length - this.realValue.length;
+        if (event.data && lengthDiff <= 0) {
+            // Text replacement or complex change: e.g., typing over a selection.
+            // `event.data` contains the newly typed character(s).
+            // `lengthDiff` helps determine how many characters were replaced.
+            const deletedCount = Math.abs(lengthDiff) + event.data.length;
+            const replaceStart = cursorPosition - event.data.length;
+            this.realValue =
+                this.realValue.slice(0, Math.max(0, replaceStart)) + // Ensure replaceStart isn't negative
+                    event.data +
+                    this.realValue.slice(Math.max(0, replaceStart) + deletedCount);
+        }
+        else if (lengthDiff > 0) {
+            // Pure addition of characters (typing without prior selection, or pasting).
+            // `event.data` contains the added character(s), or we infer from displayValue.
+            const addedChars = event.data ||
+                displayValue.slice(cursorPosition - lengthDiff, cursorPosition);
+            const insertPosition = cursorPosition - addedChars.length;
+            this.realValue =
+                this.realValue.slice(0, Math.max(0, insertPosition)) +
+                    addedChars +
+                    this.realValue.slice(Math.max(0, insertPosition));
+        }
+        else if (lengthDiff < 0) {
+            // Pure deletion (e.g., Backspace, Delete key).
+            // `event.data` is null for these operations.
+            const deletedCount = Math.abs(lengthDiff);
+            // `cursorPosition` is where the cursor is *after* deletion.
+            // The deletion happened *before* this `cursorPosition`.
+            this.realValue =
+                this.realValue.slice(0, cursorPosition) +
+                    this.realValue.slice(cursorPosition + deletedCount);
+        }
+        // If lengthDiff is 0 and no event.data (e.g. moving cursor with arrow keys inside text), realValue should not change.
+        // The current logic handles this as no branch is taken.
+        this.updateDisplayValue();
+        this.setCursorPosition(cursorPosition); // Restore cursor as displayValue changed
+        this.dispatchRealValueChange();
+    }
+    /**
+     * 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) {
+        if (!this.appPassword())
+            return;
+        const input = this.el.nativeElement;
+        const start = input.selectionStart || 0;
+        const end = input.selectionEnd || 0;
+        if (start !== end) {
+            // If there's a selection
+            event.preventDefault(); // Prevent default cut action
+            const cutText = this.realValue.slice(start, end); // Cut from realValue
+            event.clipboardData?.setData('text/plain', cutText);
+            this.realValue =
+                this.realValue.slice(0, start) + this.realValue.slice(end);
+            this.updateDisplayValue();
+            this.setCursorPosition(start); // Set cursor to the start of the cut area
+            this.dispatchRealValueChange();
+        }
+    }
+    /**
+     * HostListener for the 'copy' event.
+     * Prevents default copy behavior to ensure the unmasked `realValue` segment is copied.
+     * @param event - The ClipboardEvent object.
+     */
+    onCopy(event) {
+        if (!this.appPassword())
+            return;
+        const input = this.el.nativeElement;
+        const start = input.selectionStart || 0;
+        const end = input.selectionEnd || 0;
+        if (start !== end) {
+            // If there's a selection
+            event.preventDefault(); // Prevent default copy action
+            const copiedText = this.realValue.slice(start, end); // Copy from realValue
+            event.clipboardData?.setData('text/plain', copiedText);
+        }
+    }
+    /**
+     * 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.
+     */
+    updateDisplayValue() {
+        if (this.visible()) {
+            this.el.nativeElement.value = this.realValue;
+            return;
+        }
+        const revealCount = this.reveal();
+        const realLength = this.realValue.length;
+        let displayValue = '';
+        if (revealCount > 0 && realLength > revealCount) {
+            const actualRevealCount = Math.min(revealCount, realLength);
+            // Calculate how many characters to mask
+            const maskedCharsCount = realLength - actualRevealCount;
+            if (maskedCharsCount > 0) {
+                // Get the part of the real value that should be revealed
+                const revealedPart = this.realValue.slice(maskedCharsCount); // Corrected from slice(realLength - actualRevealCount)
+                displayValue = '•'.repeat(maskedCharsCount) + revealedPart;
+            }
+            else {
+                // If all characters are to be revealed (revealCount >= realLength)
+                displayValue = this.realValue;
+            }
+        }
+        else {
+            // Fully mask if revealCount is 0 or realValue is lesser than revealCount
+            displayValue = '•'.repeat(realLength);
+        }
+        this.el.nativeElement.value = displayValue;
+    }
+    /**
+     * 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.
+     */
+    setCursorPosition(position) {
+        const input = this.el.nativeElement;
+        // setTimeout ensures this runs after the current browser rendering tick
+        setTimeout(() => {
+            // Clamp position to be within the bounds of the current display value's length
+            const currentLength = input.value.length;
+            const newPosition = Math.max(0, Math.min(position, currentLength));
+            input.setSelectionRange(newPosition, newPosition);
+        }, 0);
+    }
+    /**
+     * 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.
+     */
+    dispatchRealValueChange() {
+        const customEvent = new CustomEvent('realValueChange', {
+            bubbles: true, // Allows event to bubble up the DOM
+            composed: true, // Allows event to cross Shadow DOM boundaries
+            detail: this.realValue,
+        });
+        this.el.nativeElement.dispatchEvent(customEvent);
+    }
+    /**
+     * Public method to get the current unmasked "real" password value.
+     * @returns The real password value as a string.
+     */
+    getRealValue() {
+        return this.realValue;
+    }
+    /**
+     * 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) {
+        this.realValue = value || '';
+        this.updateDisplayValue();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: PasswordDirective, isStandalone: true, selector: "[appPassword]", inputs: { appPassword: { classPropertyName: "appPassword", publicName: "appPassword", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, reveal: { classPropertyName: "reveal", publicName: "reveal", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "cut": "onCut($event)", "copy": "onCopy($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PasswordDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appPassword]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], onCut: [{
+                type: HostListener,
+                args: ['cut', ['$event']]
+            }], onCopy: [{
+                type: HostListener,
+                args: ['copy', ['$event']]
+            }] } });
+
+class NumberFormatDirective {
+    el;
+    /**
+     * Input property to enable or disable the number formatting.
+     * Defaults to true, meaning formatting is active by default.
+     */
+    appNumberFormat = input(true);
+    /**
+     * 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.
+     */
+    realValue = '';
+    constructor(el) {
+        this.el = el;
+    }
+    /**
+     * 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() {
+        if (this.appNumberFormat()) {
+            this.setupNumberFormatting();
+        }
+    }
+    /**
+     * 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.
+     */
+    setupNumberFormatting() {
+        const input = this.el.nativeElement;
+        // Extract numeric value from whatever might be in the input initially
+        this.realValue = this.extractNumericValue(input.value || '');
+        this.updateDisplayValue(); // Format and display it
+    }
+    /**
+     * 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) {
+        if (!this.appNumberFormat())
+            return; // Do nothing if formatting is disabled
+        const input = this.el.nativeElement;
+        const displayValue = input.value;
+        this.realValue = this.extractNumericValue(displayValue);
+        this.updateDisplayValue();
+        this.setCursorToEnd(); // Important for UX after reformatting
+        this.dispatchRealValueChange(); // Notify parent components of the raw value change
+    }
+    /**
+     * 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) {
+        if (!this.appNumberFormat())
+            return;
+        const input = this.el.nativeElement;
+        const start = input.selectionStart || 0;
+        const end = input.selectionEnd || 0;
+        if (start !== end) {
+            // If there's a selection
+            event.preventDefault(); // Prevent default cut
+            const cutText = input.value.slice(start, end);
+            event.clipboardData?.setData('text', this.extractNumericValue(cutText)); // Put numeric part on clipboard
+            // Reconstruct value without the cut part
+            const newValue = input.value.slice(0, start) + input.value.slice(end);
+            this.realValue = this.extractNumericValue(newValue);
+            this.updateDisplayValue();
+            this.setCursorToEnd();
+            this.dispatchRealValueChange();
+        }
+    }
+    /**
+     * 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) {
+        if (!this.appNumberFormat())
+            return;
+        const input = this.el.nativeElement;
+        const start = input.selectionStart || 0;
+        const end = input.selectionEnd || 0;
+        if (start !== end) {
+            // If there's a selection
+            event.preventDefault(); // Prevent default copy
+            const selectedText = input.value.slice(start, end);
+            // Copy the underlying numeric value of the selection
+            event.clipboardData?.setData('text', this.extractNumericValue(selectedText));
+        }
+    }
+    /**
+     * 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) {
+        if (!this.appNumberFormat())
+            return;
+        const controlKeys = [
+            'Backspace',
+            'Delete',
+            'ArrowLeft',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowDown',
+            'Tab',
+            'Enter',
+            'Escape',
+            'Home',
+            'End',
+        ];
+        // Allow control keys, and modifier key combinations (Ctrl+A, Ctrl+C, etc.)
+        if (controlKeys.includes(event.key) ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.altKey) {
+            return; // Don't prevent default for these
+        }
+        // Allow a single decimal point if not already present in the realValue
+        if (event.key === '.' && !this.realValue.includes('.')) {
+            return;
+        }
+        // Prevent non-digit keys
+        if (!/^\d$/.test(event.key)) {
+            event.preventDefault();
+        }
+    }
+    /**
+     * 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.
+     */
+    extractNumericValue(value) {
+        // Remove all non-digit characters except for the decimal point
+        let cleanValue = value.replace(/[^\d.]/g, '');
+        // Handle multiple decimal points: keep only the first one
+        const parts = cleanValue.split('.');
+        if (parts.length > 1) {
+            const integerPart = parts[0];
+            const decimalPart = parts.slice(1).join(''); // Join back any subsequent parts
+            cleanValue = `${integerPart}.${decimalPart}`;
+        }
+        // Limit decimal part to two digits
+        if (cleanValue.includes('.')) {
+            const [integerPart, decimalPart] = cleanValue.split('.');
+            const cappedDecimalPart = decimalPart ? decimalPart.substring(0, 2) : '';
+            cleanValue = `${integerPart}.${cappedDecimalPart}`;
+        }
+        return cleanValue;
+    }
+    /**
+     * Updates the input element's display value with the formatted version
+     * of the current `realValue`.
+     * It uses the `NumberFormatPipe` for formatting.
+     */
+    updateDisplayValue() {
+        const input = this.el.nativeElement;
+        const formattedValue = new NumberFormatPipe().transform(this.realValue);
+        this.el.nativeElement.value = formattedValue;
+    }
+    /**
+     * 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.
+     */
+    setCursorToEnd() {
+        const input = this.el.nativeElement;
+        // setTimeout ensures this runs after the current browser rendering tick,
+        // allowing the value to be fully set in the input before moving the cursor.
+        setTimeout(() => {
+            const length = input.value.length;
+            input.setSelectionRange(length, length);
+        }, 0);
+    }
+    /**
+     * 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.
+     */
+    dispatchRealValueChange() {
+        const customEvent = new CustomEvent('realValueChange', {
+            bubbles: true, // Allows event to bubble up the DOM
+            composed: true, // Allows event to cross Shadow DOM boundaries
+            detail: this.realValue,
+        });
+        this.el.nativeElement.dispatchEvent(customEvent);
+    }
+    /**
+     * Public method to get the current unformatted "real" numeric value.
+     * @returns The real numeric value as a string.
+     */
+    getRealValue() {
+        return this.realValue;
+    }
+    /**
+     * 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) {
+        this.realValue = this.extractNumericValue(value || '');
+        this.updateDisplayValue();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NumberFormatDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: NumberFormatDirective, isStandalone: true, selector: "[appNumberFormat]", inputs: { appNumberFormat: { classPropertyName: "appNumberFormat", publicName: "appNumberFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "cut": "onCut($event)", "copy": "onCopy($event)", "keydown": "onKeydown($event)" } }, providers: [NumberFormatPipe], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NumberFormatDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appNumberFormat]',
+                    providers: [NumberFormatPipe],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], onCut: [{
+                type: HostListener,
+                args: ['cut', ['$event']]
+            }], onCopy: [{
+                type: HostListener,
+                args: ['copy', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * 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.
+ */
+class InputComponent {
+    ngControl;
+    /**
+     * 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 = input('');
+    /**
+     * 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 = input({});
+    /**
+     * 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 = signal(false);
+    /**
+     * 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 = signal('');
+    /**
+     * 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 = signal(false);
+    /**
+     * 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 = computed(() => this.getStepValue());
+    inputRef;
+    PasswordDirective;
+    NumberFormatDirective;
+    dropdown;
+    /**
+     * 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) {
+        this.ngControl = ngControl;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    /**
+     * 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) {
+        const inputElement = event.target;
+        // Handle inputs normally for all inputs other than password and number
+        if (this.config().type === 'password' || this.config().type === 'number') {
+            return;
+        }
+        this.value.set(inputElement.value);
+        if (this.config().search) {
+            return;
+        }
+        this.onChange(this.value());
+    }
+    /**
+     * 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) {
+        this.value.set(event.detail);
+        this.onChange(event.detail);
+    }
+    /**
+     * 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) {
+        this.value.update((v) => String((parseFloat(v) ? parseFloat(v) : 0) + this.step()));
+        this.onChange(this.value());
+        this.setValue(); // Ensure the view (e.g., formatted number) is updated
+        this.focus(event);
+    }
+    /**
+     * 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) {
+        this.value.update((v) => {
+            const currentValue = parseFloat(v) ? parseFloat(v) : 0;
+            const nextValue = currentValue - this.step();
+            return String(nextValue <= 0 ? 0 : nextValue);
+        });
+        this.onChange(this.value());
+        this.setValue(); // Ensure the view (e.g., formatted number) is updated
+        this.focus(event);
+    }
+    /**
+     * 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() {
+        const numericValue = parseFloat(this.value() || '0');
+        const value = numericValue || 0;
+        if (value < 20000)
+            return 1000;
+        else if (value < 50000)
+            return 5000;
+        else if (value < 100000)
+            return 10000;
+        else
+            return 20000;
+    }
+    /**
+     * 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) {
+        if (this.config().type !== 'password') {
+            return;
+        }
+        this.focus(event); // Ensure input remains focused after toggle
+        this.visible.update((v) => !v);
+        setTimeout(() => this.setValue(), 0);
+    }
+    /**
+     * 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() {
+        // Ensure inputRef is available
+        if (!this.inputRef || !this.inputRef.nativeElement) {
+            return;
+        }
+        switch (this.config().type) {
+            case 'password':
+                if (this.PasswordDirective) {
+                    // When password is not visible, the directive handles the masking.
+                    // We set the real value on the directive.
+                    this.PasswordDirective.setRealValue(this.value());
+                }
+                else {
+                    // When password is visible, or no directive, set directly.
+                    this.inputRef.nativeElement.value = this.value();
+                }
+                break;
+            case 'number':
+                if (this.NumberFormatDirective) {
+                    // NumberFormatDirective handles formatting, so we set the real value on it.
+                    this.NumberFormatDirective.setRealValue(this.value());
+                }
+                else {
+                    // If no directive, set directly.
+                    this.inputRef.nativeElement.value = this.value();
+                }
+                break;
+            default:
+                // For text, email, etc., set the value directly on the input element.
+                this.inputRef.nativeElement.value = this.value();
+                break;
+        }
+    }
+    /**
+     * 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) {
+        event.preventDefault();
+        if (this.inputRef && this.inputRef.nativeElement) {
+            this.inputRef.nativeElement.focus();
+        }
+    }
+    // ControlValueAccessor methods
+    onChange = (_) => { };
+    onTouched = () => { };
+    /**
+     * 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) {
+        this.value.set(value || '');
+        // Use setTimeout to ensure directives like PasswordDirective or NumberFormatDirective
+        // are initialized and ready to receive the value, especially during component init.
+        setTimeout(() => {
+            this.setValue();
+        });
+    }
+    /**
+     * 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) {
+        this.onChange = fn;
+    }
+    /**
+     * 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) {
+        this.onTouched = fn;
+    }
+    /**
+     * 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) {
+        this.disabled.set(isDisabled);
+    }
+    /**
+     * 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() {
+        this.onTouched();
+    }
+    /**
+     * Resets the input field's value to an empty string.
+     * Notifies Angular Forms of the change and updates the view.
+     */
+    reset() {
+        this.value.set('');
+        this.onChange(''); // Notify form control of the change
+        this.setValue(); // Update the actual input element
+    }
+    /**
+     * 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 = input([]);
+    /**
+     * 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 = computed(() => {
+        if (!this.config().search) {
+            return this.dropdownOptions();
+        }
+        const searchValue = this.value();
+        const filteredOptions = this.dropdownOptions().filter((option) => option.toLowerCase().includes(searchValue.toLowerCase()));
+        if (filteredOptions.length > 0) {
+            return filteredOptions;
+        }
+        return [];
+    });
+    /**
+     * 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) {
+        if (!this.config().search) {
+            return option;
+        }
+        const searchValue = this.value();
+        if (!searchValue || searchValue.trim() === '') {
+            return option;
+        }
+        const escapedSearchValue = searchValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const regex = new RegExp(escapedSearchValue, 'gi');
+        if (option.toLowerCase().includes(searchValue.toLowerCase())) {
+            return option.replace(regex, '<span class="highlight" >$&</span>');
+        }
+        return option;
+    }
+    /**
+     * 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, event) {
+        this.focus(event);
+        this.value.set(option);
+        this.onChange(option);
+        this.setValue();
+        this.dropdown.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, dropdownOptions: { classPropertyName: "dropdownOptions", publicName: "dropdownOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "realValueChange": "onRealValueChange($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "PasswordDirective", first: true, predicate: PasswordDirective, descendants: true }, { propertyName: "NumberFormatDirective", first: true, predicate: NumberFormatDirective, descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "@let valid = ngControl?.valid && ngControl?.touched && ngControl?.dirty; @let\ninvalid = ngControl?.invalid && ngControl?.touched && ngControl?.dirty; @let\ntype = config().type; @let icon = config().icon; @let alignment =\nconfig().alignment; @let inverse = config().inverse; @let name = config().name;\n@let required = config().required; @let reveal = config().reveal; @let password\n= type === 'password'; @let number = type === 'number'; @let ariaLabel = type\n=== 'password' ? 'Password' : config().name; @let hasDropdown =\nconfig().dropdown;\n\n<div\n  class=\"app-input-container\"\n  [class]=\"{\n    'has-error': invalid,\n    'has-valid': valid,\n    'has-icon': icon,\n    'has-password': password,\n    'has-visible': password && visible(),\n    'has-number': number,\n    'has-right': alignment === 'right',\n    inverse: inverse,\n    'has-dropdown': hasDropdown\n  }\"\n  ngbDropdown\n  [autoClose]=\"'outside'\"\n  #dropdown=\"ngbDropdown\"\n>\n  @if (config().icon && !password && !number) {\n  <div class=\"icon-container\" (mousedown)=\"focus($event)\">\n    <svg-icon class=\"icon\" name=\"{{ icon }}\"></svg-icon>\n    <div class=\"separator\"></div>\n  </div>\n  } @if (password){\n  <div class=\"icon-container\" (mousedown)=\"toggleVisibility($event)\">\n    <div class=\"password-icons\">\n      <svg-icon class=\"icon password-key\" name=\"password-key\"></svg-icon>\n      <svg-icon class=\"icon password-shown\" name=\"password-shown\"></svg-icon>\n      <svg-icon class=\"icon password-hidden\" name=\"password-hidden\"></svg-icon>\n    </div>\n    <div class=\"separator\"></div>\n  </div>\n  }\n\n  <input\n    class=\"app-input\"\n    [type]=\"'text'\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [disabled]=\"disabled()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel\"\n    placeholder=\"\"\n    autocomplete=\"off\"\n    #inputRef\n    [appPassword]=\"password\"\n    [reveal]=\"reveal || 0\"\n    [visible]=\"visible()\"\n    [appNumberFormat]=\"number\"\n    (focus)=\"hasDropdown && dropdown.open()\"\n    (click)=\"hasDropdown && dropdown.open()\"\n    ngbDropdownAnchor\n  />\n  <label class=\"app-input-label\">\n    {{ name }}\n  </label>\n  @if(number){\n  <div class=\"number-container\">\n    <div class=\"number-buttons\">\n      <div class=\"separator\"></div>\n      <svg-icon\n        name=\"plus\"\n        class=\"bg-icon plus-icon\"\n        (mousedown)=\"increment($event)\"\n      ></svg-icon>\n      <svg-icon\n        name=\"minus\"\n        class=\"bg-icon minus-icon\"\n        (mousedown)=\"decrement($event)\"\n      ></svg-icon>\n    </div>\n  </div>\n  }\n  <svg-icon name=\"checkmark\" class=\"app-input-icon positive-icon\"></svg-icon>\n  <svg-icon name=\"warning\" class=\"app-input-icon warning-icon\"></svg-icon>\n  <div class=\"app-input-error\">\n    @if (invalid) { @for (error of ngControl?.errors | errorMessage ; track\n    $index) {\n    {{ error }}\n    } }\n  </div>\n  <button\n    type=\"button\"\n    class=\"app-input-icon cancel-icon bg-icon\"\n    (click)=\"reset()\"\n    [tabIndex]=\"-1\"\n  >\n    <svg-icon name=\"cancel\"></svg-icon>\n  </button>\n  @if(hasDropdown) {\n  <div class=\"dropdown-menu\" ngbDropdownMenu>\n    @if (!options().length) {\n    <p class=\"dropdown-item no-results\">No results</p>\n    } @for(option of options(); track $index ){\n    <button\n      class=\"dropdown-item\"\n      (click)=\"handleOption(option, $event)\"\n      [class]=\"{\n        'selected': value() === option,\n      }\"\n    >\n      <p [innerHTML]=\"formatOption(option)\"></p>\n      <svg-icon name=\"checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n    </button>\n    }\n  </div>\n  <div class=\"icon-container\">\n    <svg-icon name=\"arrow-down\" class=\"dropdown-icon icon\"></svg-icon>\n  </div>\n  }\n</div>\n", styles: [".app-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;position:relative;margin:18px 0;min-width:208px;border-radius:2px;background-color:var(--color-surface-neutral);color:var(--color-text);transition:background-color .2s ease-in-out;display:flex}.app-input-container.inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #ffffff;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.app-input-container.inverse:not(.has-error):not(.has-valid) .app-input:focus-visible{color:#2f2f2f}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon{color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse:has(.app-input:placeholder-shown):has(.app-input:focus-visible) .icon{color:#919191!important}.app-input-container.inverse:has(.app-input:placeholder-shown):has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse:has(.app-input:placeholder-shown):has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse:has(.app-input:disabled.app-input:not(:placeholder-shown)) .app-input-label{color:#424242!important}.app-input-container:hover{background-color:var(--color-surface-neutral-hover)}.app-input-container:has(.app-input:focus-visible){background-color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.app-input-container:has(.app-input:not(:placeholder-shown)) .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container:has(.app-input:disabled){background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):hover{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):focus{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled) .app-input-label{color:var(--color-text-subtle)}.app-input-container:has(.app-input:disabled) .separator{background-color:var(--color-icon-disable)}.app-input-container:has(.app-input:required) .app-input-label:after{content:\"*\";color:var(--color-text-negative)}.app-input-label{position:absolute;left:0;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out;transform:translateY(0)}.app-input{padding:.25rem 6px;width:100%;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .2s ease-in-out;color:var(--color-text)}.app-input:focus-visible{color:var(--color-text-inverse)}.app-input-error{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px)}.app-input-container.has-error{background-color:var(--color-surface-negative)}.app-input-container.has-error:hover{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover:has(.app-input:not(:placeholder-shown)) .cancel-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.app-input-container.has-error:has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus);color:var(--color-text-inverse)}.app-input-container.has-error:has(.app-input:focus-visible):has(.app-input:placeholder-shown){background-color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:focus-visible):has(.app-input:placeholder-shown) .app-input-error{opacity:0}.app-input-container.has-error:has(.app-input:focus-visible):has(.app-input:not(:placeholder-shown)) .cancel-icon{opacity:1}.app-input-container.has-error:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.app-input-container.has-error:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .warning-icon,.app-input-container.has-error:has(.app-input:placeholder-shown:not(:focus-visible)) .warning-icon{opacity:1!important}.app-input-container.has-error .app-input-error{opacity:1;transform:translateY(0);pointer-events:auto}.app-input-container.has-error .app-input::selection{background-color:var(--color-surface-neutral-focus);color:var(--color-text-inverse)}.app-input-container.has-error .icon-container .separator{background-color:var(--color-icon-negative)}.app-input-container.has-error .icon-container .icon{color:var(--color-icon-negative)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)){background-color:var(--color-surface-positive)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):hover{background-color:var(--color-surface-positive-hover)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):hover:has(.app-input:not(:placeholder-shown)) .cancel-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):hover .bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):has(.app-input:focus-visible){background-color:var(--color-surface-positive-focus);color:var(--color-text-inverse)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):has(.app-input:focus-visible):has(.app-input:not(:placeholder-shown)) .cancel-icon{opacity:1}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):has(.app-input:focus-visible):has(.app-input:not(:placeholder-shown)) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):has(.app-input:focus-visible):has(.app-input:placeholder-shown){background-color:var(--color-surface-neutral-focus)!important}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon{opacity:1}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)) .app-input::selection{background-color:var(--color-surface-neutral-focus);color:var(--color-text-inverse)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)) .icon-container .separator{background-color:var(--color-icon-positive)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)) .icon-container .icon{color:var(--color-icon-positive)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)) .icon-container .password-key{opacity:0}.app-input-icon{position:absolute;right:4px;top:50%;transform:translateY(-50%);pointer-events:none;transition:color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out}.cancel-icon{opacity:0;pointer-events:none}.cancel-icon:hover{cursor:pointer}.bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out}.positive-icon{color:var(--color-icon-positive);height:18px;width:18px;display:grid;place-items:center;opacity:0}.warning-icon{color:var(--color-icon-negative);height:18px;width:18px;display:grid;place-items:center;opacity:0}.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon{color:var(--color-icon-inverse)}.app-input-container.has-icon:has(.app-input:disabled.app-input:placeholder-shown) .icon-container .icon,.app-input-container.has-password:has(.app-input:disabled.app-input:placeholder-shown) .icon-container .icon,.app-input-container.has-dropdown:has(.app-input:disabled.app-input:placeholder-shown) .icon-container .icon{color:var(--color-icon-disable)}.app-input-container.has-icon .positive-icon,.app-input-container.has-password .positive-icon,.app-input-container.has-dropdown .positive-icon,.app-input-container.has-icon .warning-icon,.app-input-container.has-password .warning-icon,.app-input-container.has-dropdown .warning-icon{opacity:0!important}.app-input-container.has-icon .icon,.app-input-container.has-password .icon,.app-input-container.has-dropdown .icon{height:18px;width:18px;display:grid;place-items:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out;opacity:1}.app-input-container.has-icon .icon-container,.app-input-container.has-password .icon-container{height:26px;display:flex;justify-items:center;align-items:center;gap:4px;padding:.25rem 0 .25rem 6px}.app-input-container.has-icon .icon-container:hover,.app-input-container.has-password .icon-container:hover{cursor:text}.app-input-container.has-icon .app-input-label,.app-input-container.has-password .app-input-label{left:28px}.app-input-container.has-icon .app-input,.app-input-container.has-password .app-input{padding-left:4px}.separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%}.has-password .password-icons{display:grid;place-items:center;position:relative;height:18px;width:18px}.has-password .password-icons .icon{position:absolute;opacity:0}.has-password:has(.app-input:placeholder-shown.app-input:not(:focus-visible)) .password-key{opacity:1!important}.has-password:has(.app-input:not(:placeholder-shown)) .password-hidden,.has-password:has(.app-input:focus-visible) .password-hidden{opacity:1!important}.has-password:has(.app-input:not(:placeholder-shown)) .password-hidden:hover,.has-password:has(.app-input:focus-visible) .password-hidden:hover{cursor:pointer}.has-visible:has(.app-input:not(:placeholder-shown)) .password-shown,.has-visible:has(.app-input:focus-visible) .password-shown{opacity:1!important}.has-visible:has(.app-input:not(:placeholder-shown)) .password-shown:hover,.has-visible:has(.app-input:focus-visible) .password-shown:hover{cursor:pointer}.has-visible:has(.app-input:not(:placeholder-shown)) .password-hidden,.has-visible:has(.app-input:focus-visible) .password-hidden{opacity:0!important}.has-number .number-container{position:relative;display:flex;justify-content:center;align-items:center;right:4px;pointer-events:none}.has-number .number-buttons{display:flex;gap:4px;position:absolute;right:0;justify-content:center;align-items:center;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.has-number .plus-icon,.has-number .minus-icon{cursor:pointer;pointer-events:none}.has-number:has(.app-input:focus-visible){cursor:text}.has-number:has(.app-input:focus-visible) .number-buttons{opacity:1}.has-number:has(.app-input:focus-visible) .plus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .minus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .cancel-icon{opacity:0!important;pointer-events:none!important}.has-number:has(.app-input:focus-visible) .number-container{width:60px}.has-dropdown .dropdown-menu{width:100%;background-color:#2f2f2f;border:0;border-radius:3px;padding:4px;margin-top:4px;max-height:244px;overflow-y:auto}.has-dropdown .dropdown-menu::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:6px}.has-dropdown .dropdown-menu::-webkit-scrollbar-thumb{background-color:#919191;width:2px;border:2px solid #2f2f2f;border-radius:3px}.has-dropdown .dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px;transition:background-color .2s ease-in-out;border-radius:2px;position:relative}.has-dropdown .dropdown-item:hover{background-color:#424242}.has-dropdown .dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.has-dropdown .dropdown-item:not(:first-child){margin-top:4px}.has-dropdown .no-results{color:#919191;font-weight:700}.has-dropdown .selected{font-weight:700}.has-dropdown .selected .dropdown-item-icon{opacity:1}.has-dropdown .dropdown-item-icon{position:absolute;opacity:0;right:6px;top:50%;transform:translateY(-50%);color:#92b1f5}.has-dropdown .app-input-icon{right:26px}.has-dropdown .icon-container{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;pointer-events:none}.has-dropdown .dropdown-icon{transition:transform .1s ease-in-out,color .2s ease-in-out!important;transform:rotate(0)}.has-dropdown:has(.app-input:focus-visible) .dropdown-icon{transform:rotate(180deg)}.has-right .app-input{text-align:right}.has-right .positive-icon,.has-right .app-input-icon{left:4px;right:auto}.has-right .app-input{order:1}.has-right.has-icon .app-input,.has-right.has-password .app-input{padding-right:0!important}.has-right.has-icon .app-input-label,.has-right.has-password .app-input-label{left:0!important}.has-right.has-icon .icon-container,.has-right.has-password .icon-container{width:30px;padding-left:4px}.has-right.has-icon .icon-container .icon,.has-right.has-password .icon-container .icon{order:2}.has-right.has-dropdown .app-input-icon{left:26px}.has-right.has-dropdown .icon-container{left:4px}.has-right:has(.app-input:placeholder-shown) .warning-icon{display:none!important}.has-right.has-number .separator{order:3}.has-right.has-number .number-buttons{left:0;right:unset}.has-right.has-number .number-container{left:4px;right:unset}.has-right .icon-container{order:2;margin-right:4px}.has-right .icon-container .password-icons{order:2}:host ::ng-deep .highlight{background-color:#3b73ed33!important;color:#92b1f5!important}:host ::ng-deep .selected .highlight{background-color:transparent!important;color:#fff!important}\n"], dependencies: [{ kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "directive", type: PasswordDirective, selector: "[appPassword]", inputs: ["appPassword", "visible", "reveal"] }, { kind: "directive", type: NumberFormatDirective, selector: "[appNumberFormat]", inputs: ["appNumberFormat"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownAnchor, selector: "[ngbDropdownAnchor]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-input', imports: [
+                        ErrorMessagePipe,
+                        SvgIconComponent,
+                        PasswordDirective,
+                        NumberFormatDirective,
+                        NgbDropdownModule,
+                    ], template: "@let valid = ngControl?.valid && ngControl?.touched && ngControl?.dirty; @let\ninvalid = ngControl?.invalid && ngControl?.touched && ngControl?.dirty; @let\ntype = config().type; @let icon = config().icon; @let alignment =\nconfig().alignment; @let inverse = config().inverse; @let name = config().name;\n@let required = config().required; @let reveal = config().reveal; @let password\n= type === 'password'; @let number = type === 'number'; @let ariaLabel = type\n=== 'password' ? 'Password' : config().name; @let hasDropdown =\nconfig().dropdown;\n\n<div\n  class=\"app-input-container\"\n  [class]=\"{\n    'has-error': invalid,\n    'has-valid': valid,\n    'has-icon': icon,\n    'has-password': password,\n    'has-visible': password && visible(),\n    'has-number': number,\n    'has-right': alignment === 'right',\n    inverse: inverse,\n    'has-dropdown': hasDropdown\n  }\"\n  ngbDropdown\n  [autoClose]=\"'outside'\"\n  #dropdown=\"ngbDropdown\"\n>\n  @if (config().icon && !password && !number) {\n  <div class=\"icon-container\" (mousedown)=\"focus($event)\">\n    <svg-icon class=\"icon\" name=\"{{ icon }}\"></svg-icon>\n    <div class=\"separator\"></div>\n  </div>\n  } @if (password){\n  <div class=\"icon-container\" (mousedown)=\"toggleVisibility($event)\">\n    <div class=\"password-icons\">\n      <svg-icon class=\"icon password-key\" name=\"password-key\"></svg-icon>\n      <svg-icon class=\"icon password-shown\" name=\"password-shown\"></svg-icon>\n      <svg-icon class=\"icon password-hidden\" name=\"password-hidden\"></svg-icon>\n    </div>\n    <div class=\"separator\"></div>\n  </div>\n  }\n\n  <input\n    class=\"app-input\"\n    [type]=\"'text'\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [disabled]=\"disabled()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    [id]=\"id()\"\n    [attr.aria-label]=\"ariaLabel\"\n    placeholder=\"\"\n    autocomplete=\"off\"\n    #inputRef\n    [appPassword]=\"password\"\n    [reveal]=\"reveal || 0\"\n    [visible]=\"visible()\"\n    [appNumberFormat]=\"number\"\n    (focus)=\"hasDropdown && dropdown.open()\"\n    (click)=\"hasDropdown && dropdown.open()\"\n    ngbDropdownAnchor\n  />\n  <label class=\"app-input-label\">\n    {{ name }}\n  </label>\n  @if(number){\n  <div class=\"number-container\">\n    <div class=\"number-buttons\">\n      <div class=\"separator\"></div>\n      <svg-icon\n        name=\"plus\"\n        class=\"bg-icon plus-icon\"\n        (mousedown)=\"increment($event)\"\n      ></svg-icon>\n      <svg-icon\n        name=\"minus\"\n        class=\"bg-icon minus-icon\"\n        (mousedown)=\"decrement($event)\"\n      ></svg-icon>\n    </div>\n  </div>\n  }\n  <svg-icon name=\"checkmark\" class=\"app-input-icon positive-icon\"></svg-icon>\n  <svg-icon name=\"warning\" class=\"app-input-icon warning-icon\"></svg-icon>\n  <div class=\"app-input-error\">\n    @if (invalid) { @for (error of ngControl?.errors | errorMessage ; track\n    $index) {\n    {{ error }}\n    } }\n  </div>\n  <button\n    type=\"button\"\n    class=\"app-input-icon cancel-icon bg-icon\"\n    (click)=\"reset()\"\n    [tabIndex]=\"-1\"\n  >\n    <svg-icon name=\"cancel\"></svg-icon>\n  </button>\n  @if(hasDropdown) {\n  <div class=\"dropdown-menu\" ngbDropdownMenu>\n    @if (!options().length) {\n    <p class=\"dropdown-item no-results\">No results</p>\n    } @for(option of options(); track $index ){\n    <button\n      class=\"dropdown-item\"\n      (click)=\"handleOption(option, $event)\"\n      [class]=\"{\n        'selected': value() === option,\n      }\"\n    >\n      <p [innerHTML]=\"formatOption(option)\"></p>\n      <svg-icon name=\"checkmark\" class=\"dropdown-item-icon\"></svg-icon>\n    </button>\n    }\n  </div>\n  <div class=\"icon-container\">\n    <svg-icon name=\"arrow-down\" class=\"dropdown-icon icon\"></svg-icon>\n  </div>\n  }\n</div>\n", styles: [".app-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;position:relative;margin:18px 0;min-width:208px;border-radius:2px;background-color:var(--color-surface-neutral);color:var(--color-text);transition:background-color .2s ease-in-out;display:flex}.app-input-container.inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #ffffff;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.app-input-container.inverse:not(.has-error):not(.has-valid) .app-input:focus-visible{color:#2f2f2f}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .icon{color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse:not(.has-error):not(.has-valid):has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse:has(.app-input:placeholder-shown):has(.app-input:focus-visible) .icon{color:#919191!important}.app-input-container.inverse:has(.app-input:placeholder-shown):has(.app-input:focus-visible) .bg-icon{background-color:#919191!important;color:#dadada}.app-input-container.inverse:has(.app-input:placeholder-shown):has(.app-input:focus-visible) .separator{background-color:#919191!important}.app-input-container.inverse:has(.app-input:disabled.app-input:not(:placeholder-shown)) .app-input-label{color:#424242!important}.app-input-container:hover{background-color:var(--color-surface-neutral-hover)}.app-input-container:has(.app-input:focus-visible){background-color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.app-input-container:has(.app-input:focus-visible) .separator{background-color:var(--color-icon-inverse)!important}.app-input-container:has(.app-input:not(:placeholder-shown)) .app-input-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.app-input-container:has(.app-input:disabled){background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):hover{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled):focus{background-color:var(--color-surface-disable)}.app-input-container:has(.app-input:disabled) .app-input-label{color:var(--color-text-subtle)}.app-input-container:has(.app-input:disabled) .separator{background-color:var(--color-icon-disable)}.app-input-container:has(.app-input:required) .app-input-label:after{content:\"*\";color:var(--color-text-negative)}.app-input-label{position:absolute;left:0;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out;transform:translateY(0)}.app-input{padding:.25rem 6px;width:100%;font-size:14px;line-height:18px;font-weight:400;border:0;outline:none;margin-top:auto;background-color:transparent;transition:color .2s ease-in-out;color:var(--color-text)}.app-input:focus-visible{color:var(--color-text-inverse)}.app-input-error{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px)}.app-input-container.has-error{background-color:var(--color-surface-negative)}.app-input-container.has-error:hover{background-color:var(--color-surface-negative-hover)}.app-input-container.has-error:hover:has(.app-input:not(:placeholder-shown)) .cancel-icon{opacity:1;pointer-events:auto}.app-input-container.has-error:hover .bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.app-input-container.has-error:has(.app-input:focus-visible){background-color:var(--color-surface-negative-focus);color:var(--color-text-inverse)}.app-input-container.has-error:has(.app-input:focus-visible):has(.app-input:placeholder-shown){background-color:var(--color-surface-neutral-focus)!important}.app-input-container.has-error:has(.app-input:focus-visible):has(.app-input:placeholder-shown) .app-input-error{opacity:0}.app-input-container.has-error:has(.app-input:focus-visible):has(.app-input:not(:placeholder-shown)) .cancel-icon{opacity:1}.app-input-container.has-error:has(.app-input:focus-visible) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.app-input-container.has-error:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .warning-icon,.app-input-container.has-error:has(.app-input:placeholder-shown:not(:focus-visible)) .warning-icon{opacity:1!important}.app-input-container.has-error .app-input-error{opacity:1;transform:translateY(0);pointer-events:auto}.app-input-container.has-error .app-input::selection{background-color:var(--color-surface-neutral-focus);color:var(--color-text-inverse)}.app-input-container.has-error .icon-container .separator{background-color:var(--color-icon-negative)}.app-input-container.has-error .icon-container .icon{color:var(--color-icon-negative)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)){background-color:var(--color-surface-positive)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):hover{background-color:var(--color-surface-positive-hover)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):hover:has(.app-input:not(:placeholder-shown)) .cancel-icon{opacity:1;pointer-events:auto}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):hover .bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):has(.app-input:focus-visible){background-color:var(--color-surface-positive-focus);color:var(--color-text-inverse)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):has(.app-input:focus-visible):has(.app-input:not(:placeholder-shown)) .cancel-icon{opacity:1}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):has(.app-input:focus-visible):has(.app-input:not(:placeholder-shown)) .bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):has(.app-input:focus-visible):has(.app-input:placeholder-shown){background-color:var(--color-surface-neutral-focus)!important}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)):has(.app-input:not(:focus-visible)).app-input-container:not(:hover) .positive-icon{opacity:1}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)) .app-input::selection{background-color:var(--color-surface-neutral-focus);color:var(--color-text-inverse)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)) .icon-container .separator{background-color:var(--color-icon-positive)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)) .icon-container .icon{color:var(--color-icon-positive)}.app-input-container.has-valid:has(.app-input:not(:placeholder-shown)) .icon-container .password-key{opacity:0}.app-input-icon{position:absolute;right:4px;top:50%;transform:translateY(-50%);pointer-events:none;transition:color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out}.cancel-icon{opacity:0;pointer-events:none}.cancel-icon:hover{cursor:pointer}.bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out}.positive-icon{color:var(--color-icon-positive);height:18px;width:18px;display:grid;place-items:center;opacity:0}.warning-icon{color:var(--color-icon-negative);height:18px;width:18px;display:grid;place-items:center;opacity:0}.app-input-container.has-icon:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-password:has(.app-input:focus-visible) .icon-container .icon,.app-input-container.has-dropdown:has(.app-input:focus-visible) .icon-container .icon{color:var(--color-icon-inverse)}.app-input-container.has-icon:has(.app-input:disabled.app-input:placeholder-shown) .icon-container .icon,.app-input-container.has-password:has(.app-input:disabled.app-input:placeholder-shown) .icon-container .icon,.app-input-container.has-dropdown:has(.app-input:disabled.app-input:placeholder-shown) .icon-container .icon{color:var(--color-icon-disable)}.app-input-container.has-icon .positive-icon,.app-input-container.has-password .positive-icon,.app-input-container.has-dropdown .positive-icon,.app-input-container.has-icon .warning-icon,.app-input-container.has-password .warning-icon,.app-input-container.has-dropdown .warning-icon{opacity:0!important}.app-input-container.has-icon .icon,.app-input-container.has-password .icon,.app-input-container.has-dropdown .icon{height:18px;width:18px;display:grid;place-items:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out;opacity:1}.app-input-container.has-icon .icon-container,.app-input-container.has-password .icon-container{height:26px;display:flex;justify-items:center;align-items:center;gap:4px;padding:.25rem 0 .25rem 6px}.app-input-container.has-icon .icon-container:hover,.app-input-container.has-password .icon-container:hover{cursor:text}.app-input-container.has-icon .app-input-label,.app-input-container.has-password .app-input-label{left:28px}.app-input-container.has-icon .app-input,.app-input-container.has-password .app-input{padding-left:4px}.separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%}.has-password .password-icons{display:grid;place-items:center;position:relative;height:18px;width:18px}.has-password .password-icons .icon{position:absolute;opacity:0}.has-password:has(.app-input:placeholder-shown.app-input:not(:focus-visible)) .password-key{opacity:1!important}.has-password:has(.app-input:not(:placeholder-shown)) .password-hidden,.has-password:has(.app-input:focus-visible) .password-hidden{opacity:1!important}.has-password:has(.app-input:not(:placeholder-shown)) .password-hidden:hover,.has-password:has(.app-input:focus-visible) .password-hidden:hover{cursor:pointer}.has-visible:has(.app-input:not(:placeholder-shown)) .password-shown,.has-visible:has(.app-input:focus-visible) .password-shown{opacity:1!important}.has-visible:has(.app-input:not(:placeholder-shown)) .password-shown:hover,.has-visible:has(.app-input:focus-visible) .password-shown:hover{cursor:pointer}.has-visible:has(.app-input:not(:placeholder-shown)) .password-hidden,.has-visible:has(.app-input:focus-visible) .password-hidden{opacity:0!important}.has-number .number-container{position:relative;display:flex;justify-content:center;align-items:center;right:4px;pointer-events:none}.has-number .number-buttons{display:flex;gap:4px;position:absolute;right:0;justify-content:center;align-items:center;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.has-number .plus-icon,.has-number .minus-icon{cursor:pointer;pointer-events:none}.has-number:has(.app-input:focus-visible){cursor:text}.has-number:has(.app-input:focus-visible) .number-buttons{opacity:1}.has-number:has(.app-input:focus-visible) .plus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .minus-icon{pointer-events:auto}.has-number:has(.app-input:focus-visible) .cancel-icon{opacity:0!important;pointer-events:none!important}.has-number:has(.app-input:focus-visible) .number-container{width:60px}.has-dropdown .dropdown-menu{width:100%;background-color:#2f2f2f;border:0;border-radius:3px;padding:4px;margin-top:4px;max-height:244px;overflow-y:auto}.has-dropdown .dropdown-menu::-webkit-scrollbar{background-color:#2f2f2f;border-radius:0 3px 3px 0;width:6px}.has-dropdown .dropdown-menu::-webkit-scrollbar-thumb{background-color:#919191;width:2px;border:2px solid #2f2f2f;border-radius:3px}.has-dropdown .dropdown-item{color:#fff;font-weight:400;font-size:14px;line-height:18px;height:26px;padding:4px;transition:background-color .2s ease-in-out;border-radius:2px;position:relative}.has-dropdown .dropdown-item:hover{background-color:#424242}.has-dropdown .dropdown-item:focus-visible{background-color:#424242;border:0;outline:none}.has-dropdown .dropdown-item:not(:first-child){margin-top:4px}.has-dropdown .no-results{color:#919191;font-weight:700}.has-dropdown .selected{font-weight:700}.has-dropdown .selected .dropdown-item-icon{opacity:1}.has-dropdown .dropdown-item-icon{position:absolute;opacity:0;right:6px;top:50%;transform:translateY(-50%);color:#92b1f5}.has-dropdown .app-input-icon{right:26px}.has-dropdown .icon-container{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;pointer-events:none}.has-dropdown .dropdown-icon{transition:transform .1s ease-in-out,color .2s ease-in-out!important;transform:rotate(0)}.has-dropdown:has(.app-input:focus-visible) .dropdown-icon{transform:rotate(180deg)}.has-right .app-input{text-align:right}.has-right .positive-icon,.has-right .app-input-icon{left:4px;right:auto}.has-right .app-input{order:1}.has-right.has-icon .app-input,.has-right.has-password .app-input{padding-right:0!important}.has-right.has-icon .app-input-label,.has-right.has-password .app-input-label{left:0!important}.has-right.has-icon .icon-container,.has-right.has-password .icon-container{width:30px;padding-left:4px}.has-right.has-icon .icon-container .icon,.has-right.has-password .icon-container .icon{order:2}.has-right.has-dropdown .app-input-icon{left:26px}.has-right.has-dropdown .icon-container{left:4px}.has-right:has(.app-input:placeholder-shown) .warning-icon{display:none!important}.has-right.has-number .separator{order:3}.has-right.has-number .number-buttons{left:0;right:unset}.has-right.has-number .number-container{left:4px;right:unset}.has-right .icon-container{order:2;margin-right:4px}.has-right .icon-container .password-icons{order:2}:host ::ng-deep .highlight{background-color:#3b73ed33!important;color:#92b1f5!important}:host ::ng-deep .selected .highlight{background-color:transparent!important;color:#fff!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { inputRef: [{
+                type: ViewChild,
+                args: ['inputRef']
+            }], PasswordDirective: [{
+                type: ViewChild,
+                args: [PasswordDirective]
+            }], NumberFormatDirective: [{
+                type: ViewChild,
+                args: [NumberFormatDirective]
+            }], dropdown: [{
+                type: ViewChild,
+                args: ['dropdown']
+            }], onRealValueChange: [{
+                type: HostListener,
+                args: ['realValueChange', ['$event']]
+            }] } });
+
+// src/app/bytes-to-human-readable.pipe.ts
+class BytesToHumanReadablePipe {
+    transform(bytes, precision = 2) {
+        if (bytes === null || bytes === undefined || isNaN(bytes)) {
+            return '';
+        }
+        if (bytes === 0) {
+            return '0 Bytes';
+        }
+        const units = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(1024));
+        const unitIndex = Math.min(i, units.length - 1);
+        const value = bytes / Math.pow(1024, unitIndex);
+        const formattedValue = parseFloat(value.toFixed(precision));
+        return `${formattedValue} ${units[unitIndex]}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BytesToHumanReadablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: BytesToHumanReadablePipe, isStandalone: true, name: "bytesToHumanReadable" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BytesToHumanReadablePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'bytesToHumanReadable',
+                }]
+        }] });
+
+/**
+ * This component displays a preview of a document, including its name, size,
+ * and provides actions to delete, download, and tag the document.
+ */
+class DocumentPreviewComponent {
+    showDeleteModal = signal(false);
+    /**
+     * The application file to be displayed in the preview. This is a required input.
+     * @type {InputSignal<AppFile>}
+     */
+    file = input.required();
+    /**
+     * An output event that emits the file name when the delete action is triggered.
+     * @type {OutputEmitterRef<string>}
+     */
+    onDelete = output();
+    /**
+     * An output event that emits the file name when the download action is triggered.
+     * @type {OutputEmitterRef<string>}
+     */
+    onDownload = output();
+    /**
+     * Handles the delete action. Emits the `fileName` of the current `file` via the `onDelete` output.
+     */
+    handleDelete() {
+        this.showDeleteModal.set(true);
+    }
+    /**
+     * Handles the download action. Emits the `fileName` of the current `file` via the `onDownload` output.
+     */
+    handleDownload() {
+        this.onDownload.emit(this.file().fileName);
+    }
+    /**
+     * 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() {
+        console.log('Tag event');
+        // TODO: Add tag logic
+    }
+    cancelDelete() {
+        this.showDeleteModal.set(false);
+    }
+    confirmDelete() {
+        this.onDelete.emit(this.file().fileName);
+        this.showDeleteModal.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentPreviewComponent, isStandalone: true, selector: "app-document-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onDelete: "onDelete", onDownload: "onDownload" }, ngImport: i0, template: "@let fileType = file().type; @let documentName = file().baseName; @let fileSize\n= file().size; @let pdf = fileType === 'pdf'; @let video = ['avi', 'mp4',\n'mov'].includes(fileType); @let image = ['jpg', 'png', 'jpeg',\n'gif'].includes(fileType); @let pageCount = file().pageCount; @let\nimagePreviewUrl = file().imagePreviewUrl;\n\n<div class=\"document\" [class.noTouch]=\"showDeleteModal()\"> \n  <div class=\"document-image-container\">\n    <img src=\"{{ imagePreviewUrl }}\" class=\"document-image\" />\n    <div class=\"badge-tag-container\">\n      <div class=\"badges\">\n        <p class=\"tag\">No Tag</p>\n      </div>\n      <div class=\"badges\">\n        <p\n          class=\"badge file-type\"\n          [class]=\"{\n            pdf: pdf,\n            video: video,\n            image: image\n          }\"\n        >\n          {{ fileType }}\n        </p>\n        <p class=\"badge\">\n          @if(pdf && pageCount) {\n          <span>{{ pageCount }} p.</span>\n          }\n          <span class=\"file-size\"> {{ fileSize | bytesToHumanReadable }}</span>\n        </p>\n      </div>\n    </div>\n  </div>\n  <p class=\"document-name\">\n    {{ documentName }}\n  </p>\n  <div class=\"document-actions\">\n    <div class=\"document-actions-container\">\n      <button class=\"document-actions-button\" (click)=\"handleTag()\">\n        <svg-icon name=\"label\" class=\"icon\"></svg-icon>\n      </button>\n    </div>\n    <div class=\"document-actions-container\">\n      <button class=\"document-actions-button\" (click)=\"handleDownload()\">\n        <svg-icon name=\"download\" class=\"icon\"></svg-icon>\n      </button>\n      <button class=\"document-actions-button\" (click)=\"handleDelete()\">\n        <svg-icon name=\"delete\" class=\"icon\"></svg-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"delete-modal\">\n    <div class=\"modal-buttons\">\n      <button class=\"delete-button\" (click)=\"confirmDelete()\">Delete</button>\n      <button class=\"cancel-button\" (click)=\"cancelDelete()\">Cancel</button>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".document-image{height:140px;margin:auto;object-fit:cover;box-shadow:0 0 4px #00000026;max-width:140px}.document-image-container{position:relative}.badge-tag-container{position:absolute;bottom:0}.badges{display:flex;gap:2px}.badges:first-child{margin-bottom:2px}.file-type{text-transform:uppercase}.badge,.tag{font-size:11px;font-weight:800;color:#fff;line-height:14px;padding:2px 4px;border-radius:1px;transition:opacity .2s ease-in-out;text-align:center;background-color:#91919166;transition:background-color .2s ease-in-out}.tag{font-weight:700}.pdf{background-color:#df3c3c66}.video{background-color:#9e47ec66}.image{background-color:#f89b2e66}.document{height:178px;width:148px;padding:4px;background-color:#eee;border-radius:2px;position:relative;opacity:1}.document:hover:not(.noTouch) .badge,.document:hover:not(.noTouch) .tag{background-color:#919191}.document:hover:not(.noTouch) .pdf{background-color:#e66767}.document:hover:not(.noTouch) .video{background-color:#b370f0}.document:hover:not(.noTouch) .image{background-color:#fab15c}.document:hover:not(.noTouch) .document-actions{opacity:1}.document-name{width:140px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:#2f2f2f;font-size:14px;line-height:18px;padding:4px 6px;margin-top:4px}.file-size{font-weight:600}.icon{width:18px;height:18px}.document-actions{display:flex;justify-content:space-between;align-items:center;position:absolute;top:4px;left:4px;width:140px;opacity:0;transition:opacity .2s ease-in-out}.document-actions-container{background-color:#6c6c6ce5;border-radius:1px;display:flex}.document-actions-button{background-color:transparent;border:none;height:30px;width:30px;padding:0;display:grid;place-items:center;cursor:pointer;color:#dadada}.delete-modal{position:absolute;top:50%;left:0;transform:translateY(-50%);pointer-events:none;transition:opacity .2s ease;width:100%;height:100%;opacity:0;display:flex;align-items:center;justify-content:center}.document.noTouch{pointer-events:none}.document.noTouch>*:not(.delete-modal){opacity:.3}.document.noTouch .delete-modal{opacity:1!important;pointer-events:auto!important;z-index:10}.modal-buttons{display:flex;align-items:center;flex-direction:column;gap:6px}.modal-buttons button{border-radius:2px;font-weight:500;padding:6px;vertical-align:middle;color:#fff;cursor:pointer}.delete-button{background-color:#df3c3c}.cancel-button{background-color:#6c6c6c}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "pipe", type: BytesToHumanReadablePipe, name: "bytesToHumanReadable" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-document-preview', imports: [SvgIconComponent, BytesToHumanReadablePipe], template: "@let fileType = file().type; @let documentName = file().baseName; @let fileSize\n= file().size; @let pdf = fileType === 'pdf'; @let video = ['avi', 'mp4',\n'mov'].includes(fileType); @let image = ['jpg', 'png', 'jpeg',\n'gif'].includes(fileType); @let pageCount = file().pageCount; @let\nimagePreviewUrl = file().imagePreviewUrl;\n\n<div class=\"document\" [class.noTouch]=\"showDeleteModal()\"> \n  <div class=\"document-image-container\">\n    <img src=\"{{ imagePreviewUrl }}\" class=\"document-image\" />\n    <div class=\"badge-tag-container\">\n      <div class=\"badges\">\n        <p class=\"tag\">No Tag</p>\n      </div>\n      <div class=\"badges\">\n        <p\n          class=\"badge file-type\"\n          [class]=\"{\n            pdf: pdf,\n            video: video,\n            image: image\n          }\"\n        >\n          {{ fileType }}\n        </p>\n        <p class=\"badge\">\n          @if(pdf && pageCount) {\n          <span>{{ pageCount }} p.</span>\n          }\n          <span class=\"file-size\"> {{ fileSize | bytesToHumanReadable }}</span>\n        </p>\n      </div>\n    </div>\n  </div>\n  <p class=\"document-name\">\n    {{ documentName }}\n  </p>\n  <div class=\"document-actions\">\n    <div class=\"document-actions-container\">\n      <button class=\"document-actions-button\" (click)=\"handleTag()\">\n        <svg-icon name=\"label\" class=\"icon\"></svg-icon>\n      </button>\n    </div>\n    <div class=\"document-actions-container\">\n      <button class=\"document-actions-button\" (click)=\"handleDownload()\">\n        <svg-icon name=\"download\" class=\"icon\"></svg-icon>\n      </button>\n      <button class=\"document-actions-button\" (click)=\"handleDelete()\">\n        <svg-icon name=\"delete\" class=\"icon\"></svg-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"delete-modal\">\n    <div class=\"modal-buttons\">\n      <button class=\"delete-button\" (click)=\"confirmDelete()\">Delete</button>\n      <button class=\"cancel-button\" (click)=\"cancelDelete()\">Cancel</button>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".document-image{height:140px;margin:auto;object-fit:cover;box-shadow:0 0 4px #00000026;max-width:140px}.document-image-container{position:relative}.badge-tag-container{position:absolute;bottom:0}.badges{display:flex;gap:2px}.badges:first-child{margin-bottom:2px}.file-type{text-transform:uppercase}.badge,.tag{font-size:11px;font-weight:800;color:#fff;line-height:14px;padding:2px 4px;border-radius:1px;transition:opacity .2s ease-in-out;text-align:center;background-color:#91919166;transition:background-color .2s ease-in-out}.tag{font-weight:700}.pdf{background-color:#df3c3c66}.video{background-color:#9e47ec66}.image{background-color:#f89b2e66}.document{height:178px;width:148px;padding:4px;background-color:#eee;border-radius:2px;position:relative;opacity:1}.document:hover:not(.noTouch) .badge,.document:hover:not(.noTouch) .tag{background-color:#919191}.document:hover:not(.noTouch) .pdf{background-color:#e66767}.document:hover:not(.noTouch) .video{background-color:#b370f0}.document:hover:not(.noTouch) .image{background-color:#fab15c}.document:hover:not(.noTouch) .document-actions{opacity:1}.document-name{width:140px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:#2f2f2f;font-size:14px;line-height:18px;padding:4px 6px;margin-top:4px}.file-size{font-weight:600}.icon{width:18px;height:18px}.document-actions{display:flex;justify-content:space-between;align-items:center;position:absolute;top:4px;left:4px;width:140px;opacity:0;transition:opacity .2s ease-in-out}.document-actions-container{background-color:#6c6c6ce5;border-radius:1px;display:flex}.document-actions-button{background-color:transparent;border:none;height:30px;width:30px;padding:0;display:grid;place-items:center;cursor:pointer;color:#dadada}.delete-modal{position:absolute;top:50%;left:0;transform:translateY(-50%);pointer-events:none;transition:opacity .2s ease;width:100%;height:100%;opacity:0;display:flex;align-items:center;justify-content:center}.document.noTouch{pointer-events:none}.document.noTouch>*:not(.delete-modal){opacity:.3}.document.noTouch .delete-modal{opacity:1!important;pointer-events:auto!important;z-index:10}.modal-buttons{display:flex;align-items:center;flex-direction:column;gap:6px}.modal-buttons button{border-radius:2px;font-weight:500;padding:6px;vertical-align:middle;color:#fff;cursor:pointer}.delete-button{background-color:#df3c3c}.cancel-button{background-color:#6c6c6c}\n"] }]
+        }] });
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdfjs/pdf.worker.min.mjs';
+class DocumentService {
+    /**
+     * Generates a data URL thumbnail for a given file.
+     * Handles PDFs, videos, and images.
+     * @param file The file to generate a thumbnail for.
+     * @returns A promise that resolves to a data URL string for the thumbnail.
+     */
+    async generateThumbnail(file) {
+        const extension = file.name.split('.').pop()?.toLowerCase();
+        switch (extension) {
+            case 'pdf':
+                try {
+                    return await this.generatePdfThumbnail(file);
+                }
+                catch (error) {
+                    console.error('Error generating PDF thumbnail:', error);
+                    return '/assets/exampledoc.png';
+                }
+            case 'mp4':
+            case 'mov':
+            case 'avi':
+                try {
+                    return await this.generateVideoThumbnail(file);
+                }
+                catch (error) {
+                    console.error('Error generating video thumbnail:', error);
+                    return '/assets/truck.png';
+                }
+            case 'jpg':
+            case 'jpeg':
+            case 'png':
+            case 'gif':
+                return URL.createObjectURL(file);
+            default:
+                return '/assets/exampledoc.png';
+        }
+    }
+    generatePdfThumbnail(file) {
+        const fileReader = new FileReader();
+        return new Promise((resolve, reject) => {
+            fileReader.onload = async () => {
+                const typedArray = new Uint8Array(fileReader.result);
+                try {
+                    const pdf = await pdfjsLib.getDocument(typedArray).promise;
+                    const page = await pdf.getPage(1);
+                    const viewport = page.getViewport({ scale: 1 });
+                    const canvas = document.createElement('canvas');
+                    const context = canvas.getContext('2d');
+                    const desiredWidth = 280;
+                    const scale = desiredWidth / viewport.width;
+                    const scaledViewport = page.getViewport({ scale });
+                    canvas.height = scaledViewport.height;
+                    canvas.width = scaledViewport.width;
+                    if (!context) {
+                        return reject('Could not get canvas context');
+                    }
+                    await page.render({ canvasContext: context, viewport: scaledViewport })
+                        .promise;
+                    resolve(canvas.toDataURL('image/png'));
+                }
+                catch (error) {
+                    reject(error);
+                }
+            };
+            fileReader.onerror = () => reject(fileReader.error);
+            fileReader.readAsArrayBuffer(file);
+        });
+    }
+    generateVideoThumbnail(file) {
+        return new Promise((resolve, reject) => {
+            const video = document.createElement('video');
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+            video.autoplay = true;
+            video.muted = true;
+            video.src = URL.createObjectURL(file);
+            video.onloadeddata = () => {
+                video.currentTime = Math.min(0.1, video.duration / 2);
+            };
+            video.onseeked = () => {
+                const desiredWidth = 280;
+                const scale = desiredWidth / video.videoWidth;
+                canvas.width = desiredWidth;
+                canvas.height = video.videoHeight * scale;
+                if (context) {
+                    context.drawImage(video, 0, 0, canvas.width, canvas.height);
+                    video.pause();
+                    URL.revokeObjectURL(video.src);
+                    resolve(canvas.toDataURL('image/png'));
+                }
+                else {
+                    reject('Could not get canvas context for video thumbnail');
+                }
+            };
+            video.onerror = (e) => {
+                URL.revokeObjectURL(video.src);
+                reject('Error loading video for thumbnail: ' + e);
+            };
+        });
+    }
+    /**
+     * Reads a PDF file and returns the total number of pages.
+     *
+     * @param file The PDF Blob or File.
+     * @returns A promise that resolves to the page count (number).
+     * @throws If the file is not a valid PDF or an error occurs during processing.
+     */
+    async getPdfPageCount(file) {
+        const fileReader = new FileReader();
+        return new Promise((resolve, reject) => {
+            fileReader.onload = async () => {
+                const typedArray = new Uint8Array(fileReader.result);
+                try {
+                    const pdf = await pdfjsLib.getDocument(typedArray).promise;
+                    resolve(pdf.numPages);
+                }
+                catch (error) {
+                    console.error('Error getting PDF page count:', error);
+                    reject(new Error('Failed to load PDF or get page count.'));
+                }
+            };
+            fileReader.onerror = () => {
+                reject(new Error('FileReader error during PDF page count operation.'));
+            };
+            fileReader.readAsArrayBuffer(file);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * 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.
+ */
+class DropZoneComponent {
+    /**
+     * Injects the DocumentService for file processing tasks like
+     * thumbnail generation and PDF page counting.
+     * @private
+     */
+    documentService = inject(DocumentService);
+    /**
+     * An array of file extensions that should be excluded from the supported list.
+     * @defaultValue `[]` (an empty array)
+     * @type {FileExtension[]}
+     */
+    excludedFileTypes = input([]);
+    /**
+     * 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 = input([
+        'pdf',
+        'png',
+        'jpg',
+        'jpeg',
+        'gif',
+        'avi',
+        'mov',
+        'mp4',
+    ]);
+    /**
+     * 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 = computed(() => [
+        ...this.fileTypes().filter((type) => !this.excludedFileTypes().includes(type)),
+    ]);
+    /**
+     * A signal that holds an array of `AppFile` objects representing the files
+     * that have been selected or dropped by the user.
+     */
+    docs = signal([]);
+    /**
+     * 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 = signal(false);
+    /**
+     * 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) {
+        const target = event.target;
+        const files = target.files;
+        this.processFiles(files);
+    }
+    /**
+     * 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) {
+        event.preventDefault();
+        const files = event.dataTransfer?.files;
+        this.processFiles(files);
+    }
+    /**
+     * 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.
+     */
+    async processFiles(files) {
+        this.unsupported.set(false);
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            const fileExtension = file.name.split('.').pop()?.toLowerCase();
+            if (!fileExtension ||
+                !this.supportedFileTypes().includes(fileExtension)) {
+                this.unsupported.set(true);
+                continue;
+            }
+            let pageCount;
+            if (fileExtension === 'pdf') {
+                try {
+                    pageCount = await this.documentService.getPdfPageCount(file);
+                }
+                catch (error) {
+                    console.error(`Failed to get page count for ${file.name}:`, error);
+                }
+            }
+            const imagePreviewUrl = await this.documentService.generateThumbnail(file);
+            const filePreview = {
+                fileName: file.name,
+                baseName: file.name.split('.').slice(0, -1).join('.'),
+                type: fileExtension,
+                size: file.size,
+                imagePreviewUrl: imagePreviewUrl,
+                file: file,
+                pageCount: pageCount,
+            };
+            this.docs.update((docs) => [...docs, filePreview]);
+            if (this.docs().length > 2) {
+                this.carouselIndex.set(this.docs().length - 2);
+            }
+        }
+    }
+    /**
+     * 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) {
+        console.log(fileName);
+    }
+    /**
+     * A ViewChild reference to the native `<input type='file'>` element.
+     * Used to programmatically trigger the file selection dialog.
+     */
+    inputRef;
+    /**
+     * Resets the component's state after an unsupported file type error
+     * by setting the `unsupported` signal to `false`.
+     */
+    cancel() {
+        this.unsupported.set(false);
+    }
+    /**
+     * Programmatically triggers a click on the hidden file input element,
+     * which opens the system's file selection dialog.
+     */
+    handleClickToAdd() {
+        this.inputRef.nativeElement.click();
+    }
+    /**
+     * 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) {
+        this.carouselLeft();
+        this.docs.set(this.docs().filter((doc) => doc.fileName !== fileName));
+        if (this.docs().length === 0) {
+            this.unsupported.set(false);
+        }
+    }
+    // Carousel logic
+    /**
+     * A signal that stores the current index for the file preview carousel.
+     * This determines which part of the carousel is visible.
+     */
+    carouselIndex = signal(0);
+    /**
+     * A computed signal that calculates the CSS `translateX` value for the
+     * carousel container. This creates the sliding effect based on the
+     * `carouselIndex`.
+     */
+    carouselTransform = computed(() => {
+        const offset = (148 + 6) * this.carouselIndex() * -1; // 148px width + 6px gap
+        return `translateX(${offset}px)`;
+    });
+    /**
+     * Navigates the carousel one step to the left by decrementing the
+     * `carouselIndex`. The index will not go below 0.
+     */
+    carouselLeft() {
+        this.carouselIndex.update((i) => Math.max(0, i - 1));
+    }
+    /**
+     * 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() {
+        const maxIndex = Math.max(0, this.docs().length - 2);
+        this.carouselIndex.update((i) => Math.min(maxIndex, i + 1));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DropZoneComponent, isStandalone: true, selector: "app-drop-zone", inputs: { excludedFileTypes: { classPropertyName: "excludedFileTypes", publicName: "excludedFileTypes", isSignal: true, isRequired: false, transformFunction: null }, fileTypes: { classPropertyName: "fileTypes", publicName: "fileTypes", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "@let docCount = docs().length;\n\n<div class=\"container\">\n  <!-- Carousel -->\n  @if(docCount > 0) {\n  <div class=\"docs\">\n    <div class=\"doc-container\" [style.transform]=\"carouselTransform()\">\n      @for (doc of docs(); track $index) {\n      <app-document-preview\n        class=\"doc\"\n        [file]=\"doc\"\n        (onDelete)=\"handleDelete($event)\"\n        (onDownload)=\"handleDownload($event)\"\n      ></app-document-preview>\n      }\n    </div>\n    @if(docCount > 2) {\n    <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\">\n      <svg-icon name=\"arrow-left\" class=\"arrow\"></svg-icon>\n    </button>\n    <button class=\"carousel-button carousel-right\" (click)=\"carouselRight()\">\n      <svg-icon name=\"arrow-right\" class=\"arrow\"></svg-icon>\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Drop Zone -->\n  <div\n    class=\"drop-zone-container\"\n    (drop)=\"onDrop($event)\"\n    (dragover)=\"$event.preventDefault()\"\n    [class]=\"{\n      'more-docs': docCount >= 2,\n      unsupported: unsupported()\n    }\"\n  >\n    <!-- Drop Zone -->\n    <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n      <svg-icon name=\"drop-zone\" class=\"illustration\"></svg-icon>\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          DRAG FILES @if (docCount < 1) {\n          <span>HERE</span>\n          }\n        </p>\n        <p class=\"subtext\">OR CLICK TO ADD</p>\n      </div>\n      <input\n        type=\"file\"\n        aria-hidden=\"true\"\n        multiple\n        class=\"drop-zone-input\"\n        #inputRef\n        (input)=\"onInput($event)\"\n      />\n    </div>\n\n    <!-- Drop Zone Error -->\n    <div class=\"drop-zone-error\">\n      <div class=\"drop-zone-text\">\n        <p class=\"heading invalid\">INVALID FILE TYPE</p>\n        <p class=\"subtext\">SUPPORTED FORMATS</p>\n      </div>\n      <div class=\"file-types\">\n        @for (type of supportedFileTypes(); track $index) {\n        <p\n          class=\"badge\"\n          [class]=\"{\n            pdf: type === 'pdf',\n            video: ['avi', 'mp4', 'mov'].includes(type),\n            image: ['jpg', 'png', 'jpeg', 'gif'].includes(type)\n          }\"\n        >\n          {{ type }}\n        </p>\n        }\n      </div>\n      <button class=\"cancel-button\">\n        <svg-icon name=\"cancel\" (click)=\"cancel()\"></svg-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".container{padding:4px 6px;min-width:468px;display:flex;gap:6px}.docs{flex-shrink:0;height:100%;max-width:302px;overflow:hidden;position:relative;border-radius:2px}.doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#2f2f2f}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;transition:background-color .2s ease-in-out;cursor:pointer}.drop-zone:hover{background-color:#eee}.illustration{width:100px;height:100px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:22px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.unsupported .drop-zone-error{display:flex}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;margin-bottom:4px}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:0;right:0;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.file-types{display:flex;gap:4px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;border-radius:1px;text-align:center;background-color:#919191}.pdf{background-color:#e66767}.video{background-color:#b370f0}.image{background-color:#fab15c}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: DocumentPreviewComponent, selector: "app-document-preview", inputs: ["file"], outputs: ["onDelete", "onDownload"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropZoneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-drop-zone', imports: [SvgIconComponent, DocumentPreviewComponent], template: "@let docCount = docs().length;\n\n<div class=\"container\">\n  <!-- Carousel -->\n  @if(docCount > 0) {\n  <div class=\"docs\">\n    <div class=\"doc-container\" [style.transform]=\"carouselTransform()\">\n      @for (doc of docs(); track $index) {\n      <app-document-preview\n        class=\"doc\"\n        [file]=\"doc\"\n        (onDelete)=\"handleDelete($event)\"\n        (onDownload)=\"handleDownload($event)\"\n      ></app-document-preview>\n      }\n    </div>\n    @if(docCount > 2) {\n    <button class=\"carousel-button carousel-left\" (click)=\"carouselLeft()\">\n      <svg-icon name=\"arrow-left\" class=\"arrow\"></svg-icon>\n    </button>\n    <button class=\"carousel-button carousel-right\" (click)=\"carouselRight()\">\n      <svg-icon name=\"arrow-right\" class=\"arrow\"></svg-icon>\n    </button>\n    }\n  </div>\n  }\n\n  <!-- Drop Zone -->\n  <div\n    class=\"drop-zone-container\"\n    (drop)=\"onDrop($event)\"\n    (dragover)=\"$event.preventDefault()\"\n    [class]=\"{\n      'more-docs': docCount >= 2,\n      unsupported: unsupported()\n    }\"\n  >\n    <!-- Drop Zone -->\n    <div class=\"drop-zone\" (click)=\"handleClickToAdd()\">\n      <svg-icon name=\"drop-zone\" class=\"illustration\"></svg-icon>\n      <div class=\"drop-zone-text\">\n        <p class=\"heading\">\n          DRAG FILES @if (docCount < 1) {\n          <span>HERE</span>\n          }\n        </p>\n        <p class=\"subtext\">OR CLICK TO ADD</p>\n      </div>\n      <input\n        type=\"file\"\n        aria-hidden=\"true\"\n        multiple\n        class=\"drop-zone-input\"\n        #inputRef\n        (input)=\"onInput($event)\"\n      />\n    </div>\n\n    <!-- Drop Zone Error -->\n    <div class=\"drop-zone-error\">\n      <div class=\"drop-zone-text\">\n        <p class=\"heading invalid\">INVALID FILE TYPE</p>\n        <p class=\"subtext\">SUPPORTED FORMATS</p>\n      </div>\n      <div class=\"file-types\">\n        @for (type of supportedFileTypes(); track $index) {\n        <p\n          class=\"badge\"\n          [class]=\"{\n            pdf: type === 'pdf',\n            video: ['avi', 'mp4', 'mov'].includes(type),\n            image: ['jpg', 'png', 'jpeg', 'gif'].includes(type)\n          }\"\n        >\n          {{ type }}\n        </p>\n        }\n      </div>\n      <button class=\"cancel-button\">\n        <svg-icon name=\"cancel\" (click)=\"cancel()\"></svg-icon>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".container{padding:4px 6px;min-width:468px;display:flex;gap:6px}.docs{flex-shrink:0;height:100%;max-width:302px;overflow:hidden;position:relative;border-radius:2px}.doc-container{display:flex;gap:6px;transition:transform .2s ease-out}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:32px;background-color:#ffffffb2;border-radius:2px;box-shadow:0 0 5px #0000004d;cursor:pointer;display:grid;place-items:center;padding:0}.drop-zone-input{display:none}.carousel-left{left:4px}.carousel-right{right:4px}.arrow{width:18px;height:18px;color:#2f2f2f}.doc{flex:0 0 148px;height:178px;display:flex;background-color:#eee;border-radius:2px}.drop-zone-container{position:relative;flex:1 0 auto}.drop-zone{display:flex;justify-content:center;align-items:center;flex-direction:row;outline:4px dashed #eeeeee;border-radius:2px;padding:35px 0;margin:4px;gap:10px;transition:background-color .2s ease-in-out;cursor:pointer}.drop-zone:hover{background-color:#eee}.illustration{width:100px;height:100px}.more-docs .illustration{width:80px;height:80px}.more-docs .drop-zone{padding:22px 0;flex-direction:column}.more-docs .drop-zone-error,.more-docs .drop-zone-error .drop-zone-text{padding:0 12px}.unsupported .drop-zone-error{display:flex}.drop-zone-text{-webkit-user-select:none;user-select:none;text-align:center}.drop-zone-text .heading{color:#424242;font-size:14px;line-height:18px;font-weight:700;margin-bottom:4px}.drop-zone-text .invalid{color:#df3c3c}.drop-zone-text .subtext{color:#424242;font-size:11px;line-height:14px;font-weight:600}.drop-zone-error{position:absolute;inset:0;background-color:#fff;display:none;justify-content:center;align-items:center;flex-direction:column;margin:4px;outline:4px dashed #ed9292;border-radius:2px;padding:52px 12px;gap:12px}.drop-zone-error .cancel-button{cursor:pointer;background-color:transparent;position:absolute;top:0;right:0;height:26px;width:26px;padding:0;display:grid;place-items:center;transition:color .2s ease-in-out;color:#919191}.drop-zone-error .cancel-button:hover{color:#424242}.file-types{display:flex;gap:4px;text-transform:uppercase;max-width:100%;flex-wrap:wrap;justify-content:center}.badge{font-size:11px;font-weight:900;color:#fff;line-height:14px;padding:2px 4px;border-radius:1px;text-align:center;background-color:#919191}.pdf{background-color:#e66767}.video{background-color:#b370f0}.image{background-color:#fab15c}\n"] }]
+        }], propDecorators: { inputRef: [{
+                type: ViewChild,
+                args: ['inputRef']
+            }] } });
+
+/*
+ * Public API Surface of ca-components
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropZoneComponent, InputComponent };
+//# sourceMappingURL=carriera-intern-components.mjs.map