ngx-strata 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-strata",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "A simple UI framework for quickly prototyping angular applications with a bit of flair.",
   "license": "MIT",
   "peerDependencies": {

package/skills/ngx-strata/SKILL.md

@@ -89,7 +89,7 @@ for each component are stored in separate files.
 
 - **Accordion** (`st-accordion-group`): Read
   [`components/accordion.md`](components/accordion.md)
-- **Action-menu** (`st-action-menu`): Read
+- **Action-menu** (`st-action-menu`, `[stContextMenu]`): Read
   [`components/action-menu.md`](components/action-menu.md)
 - **Alert** (`st-alert`): Read [`components/alert.md`](components/alert.md)
 - **Avatar** (`st-avatar`): Read [`components/avatar.md`](components/avatar.md)
@@ -152,6 +152,8 @@ for each component are stored in separate files.
   [`components/text-stack.md`](components/text-stack.md)
 - **Theming** (`[stTheme]`): Read
   [`components/theming.md`](components/theming.md)
-- **Time-picker** (`st-time-picker`): Read
-  [`components/time-picker.md`](components/time-picker.md)
+- **Timepicker** (`st-timepicker`): Read
+  [`components/timepicker.md`](components/timepicker.md)
+- **Time-stepper** (`st-time-stepper`): Read
+  [`components/time-stepper.md`](components/time-stepper.md)
 - **Toggle** (`st-toggle`): Read [`components/toggle.md`](components/toggle.md)

package/skills/ngx-strata/components/action-menu.md

@@ -6,9 +6,15 @@ This file contains the AI documentation for the `action-menu` feature and its re
 - **Selector**: `st-action-menu`
 - **Imports**: `StrataActionMenuComponent`
 - **Inputs**:
-  - `[placement] (Placement)`
-  - `[buttonSize] (ButtonSize)`
-  - `[closeOnOutsideClick] (boolean)`
+  - `[placement] (Placement)`: Defaults to `'bottom-end'`.
+  - `[buttonSize] (ButtonSize)`: Defaults to `'md'`.
+  - `[closeOnOutsideClick] (boolean)`: Defaults to `true`.
+  - `[trigger] (boolean)`: Defaults to `true`. When `false`, the button trigger is not rendered (useful for context-only menus).
+- **Methods**:
+  - `open()`: Opens the action menu.
+  - `close()`: Closes the action menu.
+  - `toggle()`: Toggles the action menu state.
+  - `openAt(position: { x: number; y: number } | MouseEvent | PointerEvent, placement?: Placement)`: Opens the menu at mouse/virtual element coordinates.
 
 ## ActionMenuItem (`<st-action-menu-item>`)
 - **Selector**: `st-action-menu-item`
@@ -19,6 +25,16 @@ This file contains the AI documentation for the `action-menu` feature and its re
 - **Outputs**:
   - `(menuItemClicked)`
 
+## ContextMenu Directive (`[stContextMenu]`)
+- **Selector**: `[stContextMenu]`
+- **Imports**: `StrataContextMenuDirective`
+- **Inputs**:
+  - `[stContextMenu] (StrataActionMenuComponent)`: The target action menu to open on right-click.
+  - `[stContextMenuDisabled] (boolean)`: Disables context menu behavior (allows native browser context menu).
+  - `[stContextMenuPlacement] (Placement)`: Placement of menu relative to cursor (defaults to `'bottom-start'`).
+- **Outputs**:
+  - `(contextMenuOpened)`: Emitted with `MouseEvent` when the context menu opens.
+
 ## Usage Example
 
 ```html
@@ -42,6 +58,22 @@ This file contains the AI documentation for the `action-menu` feature and its re
     Export
   </st-action-menu-item>
 </st-action-menu>
+
+<!-- Context Menu Trigger on Element -->
+<div [stContextMenu]="contextMenu" class="right-click-zone">
+  Right-click here to view actions
+</div>
+
+<st-action-menu #contextMenu [trigger]="false">
+  <st-action-menu-item (menuItemClicked)="copy()">
+    <st-icon name="copy" area="start"></st-icon>
+    Copy
+  </st-action-menu-item>
+  <st-action-menu-item (menuItemClicked)="delete()">
+    <st-icon name="trash" area="start"></st-icon>
+    Delete
+  </st-action-menu-item>
+</st-action-menu>
 ```
 
 

package/skills/ngx-strata/components/file-upload.md

@@ -39,6 +39,9 @@ The File Upload component provides a stylish, accessible dropzone for selecting
 | `disabled` | `input<boolean>` | `false` | Disable interactions |
 | `label` | `input<string>` | `'Choose a file or drag & drop it here'` | Primary prompt text |
 | `hint` | `input<string \| undefined>` | `undefined` | Secondary help text |
+| `camera` | `input<boolean \| undefined>` | `undefined` | Tri-state flag: `undefined` auto-enables camera button for image uploads, `false` disables it, `true` forces it |
+| `choosePhotoLabel` | `input<string>` | `'Choose Photo'` | Accessible text label for the gallery/browse button |
+| `takePhotoLabel` | `input<string>` | `'Take Photo'` | Accessible text label for the camera button |
 
 ### Outputs
 
@@ -50,5 +53,6 @@ The File Upload component provides a stylish, accessible dropzone for selecting
 
 ### Methods
 
-- `browse()`: Opens the system file selection dialog.
+- `browse(event?: Event)`: Opens the system file selection dialog.
+- `browseCamera(event?: Event)`: Opens the native camera directly via `capture="environment"`.
 - `clear()`: Clears the native input value.

package/skills/ngx-strata/components/icon.md

@@ -21,6 +21,6 @@ This file contains the AI documentation for the `icon` feature and its related c
 ```
 
 > **CRITICAL RULE FOR AI AGENTS regarding Icons:**
-> NEVER guess an icon name. Before using an `<st-icon>`, you MUST verify that the icon is registered in the host application (usually located in `src/app/shared/icon.config.ts`). Alternatively, you may use one of the **ngx-strata Base Icons**: <!-- BASE_ICONS_START -->`question`, `arrow-right`, `arrow-left`, `arrow-up`, `arrow-down`, `close`, `expand-up-down`, `clipboard`, `more`, `check`, or `calendar`<!-- BASE_ICONS_END -->. If the icon you want to use is NOT registered, you must STOP and ask the user to add it.
+> NEVER guess an icon name. Before using an `<st-icon>`, you MUST verify that the icon is registered in the host application (usually located in `src/app/shared/icon.config.ts`). Alternatively, you may use one of the **ngx-strata Base Icons**: <!-- BASE_ICONS_START -->`question`, `arrow-right`, `arrow-left`, `arrow-up`, `arrow-down`, `close`, `expand-up-down`, `clipboard`, `more`, `check`, `calendar`, `clock`, `upload`, `camera`, or `image`<!-- BASE_ICONS_END -->. If the icon you want to use is NOT registered, you must STOP and ask the user to add it.
 
 > **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Use modern Angular Signals (input(), input.required(), and output()) for all data/event bindings. Do not use legacy @Input() or @Output() decorators.

package/skills/ngx-strata/components/time-stepper.md

@@ -0,0 +1,46 @@
+# ngx-strata: time-stepper Feature
+
+This file contains the AI documentation for the `st-time-stepper` inline component.
+
+## Time Stepper Component (`<st-time-stepper>`)
+The embedded/inline column stepper widget for selecting hours, minutes, and seconds. Ideal for embedding directly into cards, modals, or custom layouts.
+
+- **Selector**: `st-time-stepper`
+- **Imports**: `StrataTimeStepperComponent`
+- **Inputs & Models**:
+  - `[(value)] (string | Date | null)`: Two-way Signal model for time value (e.g., `'14:30'`, `'14:30:00'`, or a `Date` instance).
+  - `[format] ('12h' | '24h')`: Time notation format. Defaults to `'24h'`.
+  - `[showSeconds] (boolean)`: Whether seconds column is visible. Defaults to `false`.
+  - `[minuteStep] (number)`: Step interval for incrementing/decrementing minutes. Defaults to `1`.
+  - `[disabled] (boolean)`: Disables the time stepper controls.
+
+## Forms Integration
+`StrataTimeStepperComponent` implements `ControlValueAccessor` and seamlessly supports both `[(ngModel)]` and Reactive Forms (`formControlName` / `[formControl]`).
+
+## Usage Examples
+
+### 1. 24-Hour Time Stepper
+```html
+<st-time-stepper
+  [(value)]="selectedTime"
+  [minuteStep]="5"
+/>
+```
+
+### 2. Embedded in a Card
+```html
+<st-card>
+  <st-time-stepper [(value)]="alarmTime" />
+</st-card>
+```
+
+### 3. 12-Hour Format with Seconds
+```html
+<st-time-stepper
+  [(value)]="appointmentTime"
+  format="12h"
+  [showSeconds]="true"
+/>
+```
+
+> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Use modern Angular Signals (input(), input.required(), model(), and output()) for all data/event bindings. Do not use legacy @Input() or @Output() decorators.

package/skills/ngx-strata/components/timepicker.md

@@ -0,0 +1,60 @@
+# ngx-strata: timepicker Feature
+
+This file contains the AI documentation for the `st-timepicker` form control component.
+
+## Time Picker Form Control (`<st-timepicker>`)
+A standalone form input component equipped with an input box, clock trigger icon, and dropdown overlay hosting the time selection controls.
+
+- **Selector**: `st-timepicker`
+- **Imports**: `StrataTimepickerComponent`
+- **Inputs & Models**:
+  - `[(value)] (string | Date | null)`: Two-way Signal model for time value (e.g., `'14:30'`, `'14:30:00'`, or a `Date` instance).
+  - `[label] (string | undefined)`: Label text rendered above the input.
+  - `[placeholder] (string)`: Input placeholder text. Defaults to `'Select time'`.
+  - `[format] ('12h' | '24h')`: Display format and parsing mode. Defaults to `'24h'`.
+  - `[size] ('sm' | 'md' | 'lg')`: Visual control size. Defaults to `'md'`.
+  - `[showSeconds] (boolean)`: Whether to include seconds in display and dropdown. Defaults to `false`.
+  - `[minuteStep] (number)`: Step interval for minutes. Defaults to `1`.
+  - `[clearable] (boolean)`: Shows clear button when a value is selected. Defaults to `true`.
+  - `[disabled] (boolean)`: Disables the form control. Defaults to `false`.
+  - `[readonly] (boolean)`: Read-only mode. Defaults to `false`.
+  - `[fullWidth] (boolean)`: Expands control to full container width. Defaults to `false`.
+  - `[state] ('default' | 'error' | 'success' | 'warning')`: Feedback validation state.
+  - `[message] (string | undefined)`: Helper/validation message below the input.
+  - `(timeSelected)`: Emitted when time value changes.
+
+## Forms Integration
+`StrataTimepickerComponent` implements `ControlValueAccessor` and seamlessly supports both `[(ngModel)]` and Reactive Forms (`formControlName` / `[formControl]`).
+
+## Usage Examples
+
+### 1. Basic 24-Hour Timepicker
+```html
+<st-timepicker
+  label="Departure Time"
+  placeholder="Select departure time"
+  [(value)]="departureTime"
+/>
+```
+
+### 2. 12-Hour AM/PM Timepicker with Seconds
+```html
+<st-timepicker
+  label="Appointment Time"
+  [(value)]="appointmentTime"
+  format="12h"
+  [showSeconds]="true"
+/>
+```
+
+### 3. Step Intervals and Size
+```html
+<st-timepicker
+  size="sm"
+  label="Meeting Slot"
+  [minuteStep]="15"
+  [(value)]="meetingSlot"
+/>
+```
+
+> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Use modern Angular Signals (input(), input.required(), model(), and output()) for all data/event bindings. Do not use legacy @Input() or @Output() decorators.

package/types/ngx-strata.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, OnDestroy, AfterContentInit, EnvironmentProviders, InjectionToken, Provider, PipeTransform, ElementRef, OnChanges, TemplateRef, Renderer2, AfterViewInit, AfterContentChecked, SimpleChanges, Type, ViewContainerRef, QueryList, OutputEmitterRef } from '@angular/core';
-import { Placement } from '@floating-ui/dom';
+import { Placement, ReferenceElement } from '@floating-ui/dom';
 import * as _angular_platform_browser from '@angular/platform-browser';
 import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
 import { ControlValueAccessor } from '@angular/forms';
@@ -263,6 +263,7 @@ declare class StrataOverlayDirective implements OnChanges, OnDestroy {
     overlayPlacement: _angular_core.InputSignal<Placement>;
     overlayOffset: _angular_core.InputSignal<number>;
     overlayFitViewport: _angular_core.InputSignal<boolean>;
+    overlayTarget: _angular_core.InputSignal<ReferenceElement | null>;
     private readonly element;
     private readonly viewContainerRef;
     private readonly config;
@@ -270,13 +271,14 @@ declare class StrataOverlayDirective implements OnChanges, OnDestroy {
     private cleanup?;
     private viewRef?;
     ngOnChanges(): void;
+    private getTarget;
     private create;
     private updatePosition;
     private destroy;
     getOverlayElement(): HTMLElement | undefined;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataOverlayDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrataOverlayDirective, "[stOverlay]", never, { "stOverlay": { "alias": "stOverlay"; "required": true; "isSignal": true; }; "overlayOpen": { "alias": "overlayOpen"; "required": false; "isSignal": true; }; "overlayPlacement": { "alias": "overlayPlacement"; "required": false; "isSignal": true; }; "overlayOffset": { "alias": "overlayOffset"; "required": false; "isSignal": true; }; "overlayFitViewport": { "alias": "overlayFitViewport"; "required": false; "isSignal": true; }; }, { "overlayOpen": "overlayOpenChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrataOverlayDirective, "[stOverlay]", never, { "stOverlay": { "alias": "stOverlay"; "required": true; "isSignal": true; }; "overlayOpen": { "alias": "overlayOpen"; "required": false; "isSignal": true; }; "overlayPlacement": { "alias": "overlayPlacement"; "required": false; "isSignal": true; }; "overlayOffset": { "alias": "overlayOffset"; "required": false; "isSignal": true; }; "overlayFitViewport": { "alias": "overlayFitViewport"; "required": false; "isSignal": true; }; "overlayTarget": { "alias": "overlayTarget"; "required": false; "isSignal": true; }; }, { "overlayOpen": "overlayOpenChange"; }, never, never, true, never>;
 }
 
 declare class StrataActionMenuComponent {
@@ -287,12 +289,37 @@ declare class StrataActionMenuComponent {
     placement: _angular_core.InputSignal<Placement>;
     buttonSize: _angular_core.InputSignal<ButtonSize>;
     closeOnOutsideClick: _angular_core.InputSignal<boolean>;
+    trigger: _angular_core.InputSignal<boolean>;
     elementRef: ElementRef<HTMLElement>;
     renderer: Renderer2;
     menuOpen: _angular_core.WritableSignal<boolean>;
+    customTarget: _angular_core.WritableSignal<ReferenceElement | null>;
+    contextMenuPlacement: _angular_core.WritableSignal<Placement | null>;
+    effectivePlacement: _angular_core.Signal<Placement>;
     constructor();
+    open(): void;
+    close(): void;
+    toggle(): void;
+    openAt(position: {
+        x: number;
+        y: number;
+    } | MouseEvent | PointerEvent, placement?: Placement): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataActionMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataActionMenuComponent, "st-action-menu", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "buttonSize": { "alias": "buttonSize"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; }, {}, ["projectedButton", "actionMenuItems"], ["button[stButton]", "st-action-menu-item"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataActionMenuComponent, "st-action-menu", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "buttonSize": { "alias": "buttonSize"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; }, {}, ["projectedButton", "actionMenuItems"], ["button[stButton]", "st-action-menu-item"], true, never>;
+}
+
+declare class StrataContextMenuDirective implements OnInit, OnDestroy {
+    stContextMenu: _angular_core.InputSignal<StrataActionMenuComponent | null | undefined>;
+    stContextMenuDisabled: _angular_core.InputSignal<boolean>;
+    stContextMenuPlacement: _angular_core.InputSignal<Placement>;
+    contextMenuOpened: _angular_core.OutputEmitterRef<MouseEvent>;
+    private readonly elementRef;
+    private readonly renderer;
+    private unlisten?;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataContextMenuDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrataContextMenuDirective, "[stContextMenu]", never, { "stContextMenu": { "alias": "stContextMenu"; "required": true; "isSignal": true; }; "stContextMenuDisabled": { "alias": "stContextMenuDisabled"; "required": false; "isSignal": true; }; "stContextMenuPlacement": { "alias": "stContextMenuPlacement"; "required": false; "isSignal": true; }; }, { "contextMenuOpened": "contextMenuOpened"; }, never, never, true, never>;
 }
 
 declare class StrataAlertComponent {
@@ -472,7 +499,7 @@ interface DateRangePreset {
     };
 }
 
-declare class StrataTimePickerComponent implements ControlValueAccessor {
+declare class StrataTimeStepperComponent implements ControlValueAccessor {
     format: _angular_core.InputSignal<TimeFormat>;
     showSeconds: _angular_core.InputSignal<boolean>;
     minuteStep: _angular_core.InputSignal<number>;
@@ -508,8 +535,61 @@ declare class StrataTimePickerComponent implements ControlValueAccessor {
     registerOnChange(fn: (val: string | Date | null) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataTimePickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataTimePickerComponent, "st-time-picker", never, { "format": { "alias": "format"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataTimeStepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataTimeStepperComponent, "st-time-stepper", never, { "format": { "alias": "format"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+declare class StrataTimepickerComponent implements ControlValueAccessor {
+    private readonly defaultId;
+    label: _angular_core.InputSignal<string | undefined>;
+    id: _angular_core.InputSignal<string | undefined>;
+    name: _angular_core.InputSignal<string | undefined>;
+    placeholder: _angular_core.InputSignal<string>;
+    size: _angular_core.InputSignal<DatePickerSize>;
+    placement: _angular_core.InputSignal<Placement>;
+    format: _angular_core.InputSignal<TimeFormat>;
+    showSeconds: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    minuteStep: _angular_core.InputSignal<number>;
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    state: _angular_core.InputSignal<InputControlState | undefined>;
+    error: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    message: _angular_core.InputSignal<string | undefined>;
+    colorMessage: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    value: _angular_core.ModelSignal<string | Date | null>;
+    timeSelected: _angular_core.OutputEmitterRef<string | Date | null>;
+    open: _angular_core.WritableSignal<boolean>;
+    textInputValue: _angular_core.WritableSignal<string>;
+    private cvaDisabled;
+    effectiveDisabled: _angular_core.Signal<boolean>;
+    effectiveId: _angular_core.Signal<string>;
+    readonly effectiveState: _angular_core.Signal<InputControlState>;
+    readonly isMessageError: _angular_core.Signal<boolean>;
+    readonly isMessageSuccess: _angular_core.Signal<boolean>;
+    readonly isMessageWarning: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    private overlayDirective;
+    private elementRef;
+    private renderer;
+    private destroyRef;
+    constructor();
+    toggle(event?: Event): void;
+    onInputTextChange(value: string): void;
+    onInputBlur(): void;
+    onStepperTimeSelected(val: string | Date | null): void;
+    clear(event: Event): void;
+    private formatTimeValue;
+    private parseTimeString;
+    private updateTimeValue;
+    writeValue(val: string | Date | null): void;
+    registerOnChange(fn: (val: string | Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataTimepickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataTimepickerComponent, "st-timepicker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "timeSelected": "timeSelected"; }, never, never, true, never>;
 }
 
 interface DateRange {
@@ -729,12 +809,16 @@ declare class StrataDividerComponent {
 
 declare class StrataFileUploadComponent {
     fileInput: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    cameraInput: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     accept: _angular_core.InputSignal<string>;
     multiple: _angular_core.InputSignal<boolean>;
     maxFileSize: _angular_core.InputSignal<number | undefined>;
     disabled: _angular_core.InputSignal<boolean>;
     label: _angular_core.InputSignal<string>;
     hint: _angular_core.InputSignal<string | undefined>;
+    camera: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    choosePhotoLabel: _angular_core.InputSignal<string>;
+    takePhotoLabel: _angular_core.InputSignal<string>;
     state: _angular_core.InputSignal<InputControlState | undefined>;
     error: _angular_core.InputSignalWithTransform<boolean, unknown>;
     message: _angular_core.InputSignal<string | undefined>;
@@ -744,6 +828,8 @@ declare class StrataFileUploadComponent {
     readonly isMessageError: _angular_core.Signal<boolean>;
     readonly isMessageSuccess: _angular_core.Signal<boolean>;
     readonly isMessageWarning: _angular_core.Signal<boolean>;
+    readonly isImageAccept: _angular_core.Signal<boolean>;
+    readonly showCamera: _angular_core.Signal<boolean>;
     fileSelect: _angular_core.OutputEmitterRef<File>;
     filesSelect: _angular_core.OutputEmitterRef<File[]>;
     fileRejected: _angular_core.OutputEmitterRef<{
@@ -765,12 +851,13 @@ declare class StrataFileUploadComponent {
     onDragLeave(event: DragEvent): void;
     onDrop(event: DragEvent): void;
     onFileChange(event: Event): void;
-    browse(): void;
+    browse(event?: Event): void;
+    browseCamera(event?: Event): void;
     clear(): void;
     private processFiles;
     private matchesAccept;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataFileUploadComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataFileUploadComponent, "st-file-upload", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; }, { "fileSelect": "fileSelect"; "filesSelect": "filesSelect"; "fileRejected": "fileRejected"; }, never, ["[uploadIcon]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataFileUploadComponent, "st-file-upload", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "camera": { "alias": "camera"; "required": false; "isSignal": true; }; "choosePhotoLabel": { "alias": "choosePhotoLabel"; "required": false; "isSignal": true; }; "takePhotoLabel": { "alias": "takePhotoLabel"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; }, { "fileSelect": "fileSelect"; "filesSelect": "filesSelect"; "fileRejected": "fileRejected"; }, never, ["[uploadIcon]", "*"], true, never>;
 }
 
 declare abstract class IconLoader {
@@ -1822,5 +1909,5 @@ declare class StrataToggleComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataToggleComponent, "st-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, [{ directive: typeof StrataActivatableDirective; inputs: { "disabled": "disabled"; }; outputs: { "activated": "activated"; }; }]>;
 }
 
-export { BreakpointService, CapitalizePipe, DEFAULT_DATE_RANGE_PRESETS, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, DeviceService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBadgeComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCalendarComponent, StrataCardComponent, StrataCheckboxComponent, StrataDatePickerComponent, StrataDateRangePickerComponent, StrataDividerComponent, StrataFileUploadComponent, StrataIconComponent, StrataImageCropperComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalBodyComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalFooterComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataNumberStepperComponent, StrataOtpComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSkeletonComponent, StrataSliderComponent, StrataSpinnerComponent, StrataStepComponent, StrataStepperComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataTimePickerComponent, StrataToggleComponent, StrataTooltipDirective, addDays, addMonths, addYears, createCalendarGrid, disableDateRange, disableDaysOfWeek, disableFutureDates, disablePastDates, disableWeekends, endOfDay, endOfMonth, formatDate, formatMonthTitle, getDayOfWeek, getDaysInMonth, getDefaultShortcutLabels, getLocaleDefaultDateFormat, getMonthNames, getWeekdayNames, isAfterDay, isApplePlatform, isBeforeDay, isSameDay, isSameMonth, isSameYear, isWeekend, isWithinDayRange, parseDate, provideBaseIcons, provideIcons, provideStrata, resolveIsApple, startOfDay, startOfMonth };
+export { BreakpointService, CapitalizePipe, DEFAULT_DATE_RANGE_PRESETS, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, DeviceService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBadgeComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCalendarComponent, StrataCardComponent, StrataCheckboxComponent, StrataContextMenuDirective, StrataDatePickerComponent, StrataDateRangePickerComponent, StrataDividerComponent, StrataFileUploadComponent, StrataIconComponent, StrataImageCropperComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalBodyComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalFooterComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataNumberStepperComponent, StrataOtpComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSkeletonComponent, StrataSliderComponent, StrataSpinnerComponent, StrataStepComponent, StrataStepperComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataTimeStepperComponent, StrataTimepickerComponent, StrataToggleComponent, StrataTooltipDirective, addDays, addMonths, addYears, createCalendarGrid, disableDateRange, disableDaysOfWeek, disableFutureDates, disablePastDates, disableWeekends, endOfDay, endOfMonth, formatDate, formatMonthTitle, getDayOfWeek, getDaysInMonth, getDefaultShortcutLabels, getLocaleDefaultDateFormat, getMonthNames, getWeekdayNames, isAfterDay, isApplePlatform, isBeforeDay, isSameDay, isSameMonth, isSameYear, isWeekend, isWithinDayRange, parseDate, provideBaseIcons, provideIcons, provideStrata, resolveIsApple, startOfDay, startOfMonth };
 export type { AccordionVariant, AlertConfiguration, AvatarSize, AvatarStackSpacing, AvatarVariant, BadgePlacement, BadgeSize, BadgeVariant, ButtonGroupJustification, ButtonSize, ButtonVariant, CalendarDayCell, CalendarMode, CalendarSize, CalendarView, CardVariant, CropPosition, CropResult, CropShape, CurrentDarkmode, DarkmodeSetting, DatePickerSize, DateRange, DateRangePreset, HotkeyOptions, IconConfig, IconSize, InputControlState, InputFieldSize, ModalConfiguration, ModalFooterJustification, ModalPlacement, ModalSize, ModalVariant, NotificationAction, NotificationConfiguration, NotificationsWithIds, NumberStepperLayout, NumberStepperSize, OtpSize, OtpState, OtpType, PaginationItem, ProgressLinearGrowDirection, ProgressLinearLabelFormat, ProgressRadialLabelFormat, SegmentedControlSize, SingleSelectSize, SkeletonAnimation, SkeletonSize, SkeletonVariant, SpinnerSize, StepState, StepperOrientation, StepperSize, StepperTheme, StrataBreakpoint, StrataConfig, StrataNotificationRef, StrataOS, StrataPlatform, TagSize, TextStackOverflow, Theme, TimeFormat, TimePrecision, TooltipPlacement };

package/assets/styles/components/file-upload.scss

@@ -1,168 +0,0 @@
-st-file-upload {
-  --st-file-upload-bg: var(--st-color-bg-default);
-  --st-file-upload-border: var(--st-color-border-default);
-  --st-file-upload-text: var(--st-color-text-primary);
-  --st-file-upload-hint: var(--st-color-text-secondary);
-  --st-file-upload-hover-bg: var(--st-color-bg-raised);
-  --st-file-upload-hover-border: var(--st-color-accent-default);
-  --st-file-upload-active-border: var(--st-color-accent-default);
-  --st-file-upload-active-bg: var(--st-color-accent-subtle, var(--st-color-bg-raised));
-  --st-file-upload-icon-color: var(--st-color-text-secondary);
-  --st-file-upload-radius: var(--st-border-radius-xl);
-
-  display: block;
-  position: relative;
-  box-sizing: border-box;
-  background-color: var(--st-file-upload-bg);
-  border: 2px dashed var(--st-file-upload-border);
-  border-radius: var(--st-file-upload-radius);
-  padding: var(--st-space-6) var(--st-space-4);
-  text-align: center;
-  cursor: pointer;
-  transition:
-    border-color var(--st-transition-fast),
-    background-color var(--st-transition-fast),
-    transform var(--st-transition-fast);
-  user-select: none;
-  outline: none;
-
-  &:hover:not(.st-disabled) {
-    background-color: var(--st-file-upload-hover-bg);
-    border-color: var(--st-file-upload-hover-border);
-
-    .st-file-upload-icon {
-      color: var(--st-color-accent-default);
-      transform: translateY(-2px);
-    }
-  }
-
-  &:focus-visible:not(.st-disabled) {
-    outline: 2px solid var(--st-color-accent-default);
-    outline-offset: 2px;
-  }
-
-  &.st-drag-over {
-    background-color: var(--st-file-upload-active-bg);
-    border-color: var(--st-file-upload-active-border);
-    border-style: solid;
-    transform: scale(1.01);
-
-    .st-file-upload-icon {
-      color: var(--st-color-accent-default);
-      transform: translateY(-4px) scale(1.1);
-    }
-  }
-
-  &.st-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .st-file-upload-input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  .st-file-upload-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--st-space-3);
-  }
-
-  .st-file-upload-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background-color: var(--st-color-bg-raised);
-    transition: transform 0.2s ease;
-  }
-
-  .st-file-upload-icon {
-    width: 24px;
-    height: 24px;
-    color: var(--st-file-upload-icon-color);
-    transition: color 0.2s ease, transform 0.2s ease;
-  }
-
-  .st-file-upload-text {
-    display: flex;
-    flex-direction: column;
-    gap: var(--st-space-1);
-  }
-
-  .st-file-upload-label {
-    font-size: 0.95rem;
-    font-weight: 500;
-    color: var(--st-file-upload-text);
-  }
-
-  &.st-state-error,
-  &.st-error {
-    --st-file-upload-border: var(--st-color-feedback-error-default);
-    --st-file-upload-hover-border: var(--st-color-feedback-error-hover, var(--st-color-feedback-error-default));
-
-    &:hover:not(.st-disabled) .st-file-upload-icon {
-      color: var(--st-color-feedback-error-default);
-    }
-
-    &:focus-visible:not(.st-disabled) {
-      outline-color: var(--st-color-feedback-error-default);
-    }
-  }
-
-  &.st-state-success {
-    --st-file-upload-border: var(--st-color-feedback-success-default);
-    --st-file-upload-hover-border: var(--st-color-feedback-success-hover, var(--st-color-feedback-success-default));
-
-    &:hover:not(.st-disabled) .st-file-upload-icon {
-      color: var(--st-color-feedback-success-default);
-    }
-
-    &:focus-visible:not(.st-disabled) {
-      outline-color: var(--st-color-feedback-success-default);
-    }
-  }
-
-  &.st-state-warning {
-    --st-file-upload-border: var(--st-color-feedback-warning-default);
-    --st-file-upload-hover-border: var(--st-color-feedback-warning-hover, var(--st-color-feedback-warning-default));
-
-    &:hover:not(.st-disabled) .st-file-upload-icon {
-      color: var(--st-color-feedback-warning-default);
-    }
-
-    &:focus-visible:not(.st-disabled) {
-      outline-color: var(--st-color-feedback-warning-default);
-    }
-  }
-
-  .st-file-upload-hint {
-    font-size: 0.8rem;
-    color: var(--st-file-upload-hint);
-
-    &.st-message-error {
-      color: var(--st-color-feedback-error-text);
-    }
-
-    &.st-message-success {
-      color: var(--st-color-feedback-success-text);
-    }
-
-    &.st-message-warning {
-      color: var(--st-color-feedback-warning-text);
-    }
-  }
-}