ngx-strata 0.6.1 → 0.7.0

package/package.json

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

package/skills/ngx-strata/SKILL.md

@@ -99,6 +99,8 @@ for each component are stored in separate files.
 - **Button** (`[stButton]`): Read [`components/button.md`](components/button.md)
 - **Calendar** (`st-calendar`): Read [`components/calendar.md`](components/calendar.md)
 - **Card** (`st-card`): Read [`components/card.md`](components/card.md)
+- **Chat** (`st-chat`, `st-chat-message`, `st-chat-group`, `st-chat-separator`, `st-chat-typing`): Read
+  [`components/chat.md`](components/chat.md)
 - **Checkbox** (`st-checkbox`): Read
   [`components/checkbox.md`](components/checkbox.md)
 - **Datepicker** (`st-datepicker`): Read [`components/datepicker.md`](components/datepicker.md)

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

@@ -0,0 +1,100 @@
+# ngx-strata: chat Feature
+
+This file contains the AI documentation for the `chat` feature suite and its components.
+
+## Chat (`<st-chat>`)
+Flex container providing message flow direction and spacing scale.
+
+- **Selector**: `st-chat`
+- **Imports**: `StrataChatComponent`
+- **Inputs**:
+  - `[spacing] (ChatSpacing)`: `'comfortable' | 'compact'` (default: `'comfortable'`)
+
+## Chat Message (`<st-chat-message>`)
+Individual message bubble supporting sender variants, timestamps, status ticks, and media attachments.
+
+- **Selector**: `st-chat-message`
+- **Imports**: `StrataChatMessageComponent`
+- **Inputs**:
+  - `[variant] (ChatMessageVariant)`: `'incoming' | 'outgoing'` (default: `'incoming'`)
+  - `[timestamp] (string | null)`: Timestamp text displayed below message (default: `null`)
+  - `[status] (ChatMessageStatus | null)`: Status indicator for outgoing messages: `'sent' | 'delivered' | 'read'` (default: `null`)
+  - `[showAvatar] (boolean)`: Whether projected avatar is visible. Supports boolean attribute (default: `true`)
+  - `[position] ('single' | 'first' | 'middle' | 'last')`: Positional curvature. Automatically handled inside `st-chat-group` (default: `'single'`)
+- **Content Slots**:
+  - Default: Text body of the message
+  - `[slot="avatar"]`: User avatar element (`<st-avatar>`)
+  - `[slot="media"]`: Image or media preview element (`<img>`, `<video>`)
+  - `[slot="footer"]`: Custom footer overriding default timestamp/status layout
+
+## Chat Group (`<st-chat-group>`)
+Groups consecutive messages from the same sender, collapsing adjacent border radii and showing the avatar only on the final message.
+
+- **Selector**: `st-chat-group`
+- **Imports**: `StrataChatGroupComponent`
+- **Inputs**:
+  - `[variant] (ChatMessageVariant)`: `'incoming' | 'outgoing'` (default: `'incoming'`)
+
+## Chat Separator (`<st-chat-separator>`)
+Decorative divider for date marks and system status messages.
+
+- **Selector**: `st-chat-separator`
+- **Imports**: `StrataChatSeparatorComponent`
+- **Content Slots**:
+  - Default: Centered label (e.g. date or system message)
+
+## Chat Typing Indicator (`<st-chat-typing>`)
+Animated three-dot bubble indicator representing active typing.
+
+- **Selector**: `st-chat-typing`
+- **Imports**: `StrataChatTypingComponent`
+- **Inputs**:
+  - `[variant] (ChatMessageVariant)`: `'incoming' | 'outgoing'` (default: `'incoming'`)
+  - `[ariaLabel] (string)`: Accessible label for screen readers (default: `'Typing'`)
+- **Content Slots**:
+  - `[slot="avatar"]`: Optional avatar element (`<st-avatar>`)
+
+---
+
+## Usage Examples
+
+### Basic Conversation
+```html
+<st-chat spacing="comfortable">
+  <st-chat-separator>Today</st-chat-separator>
+
+  <st-chat-message variant="incoming" timestamp="10:14">
+    <st-avatar slot="avatar" size="sm" text="JD" />
+    Hi, is the report ready?
+  </st-chat-message>
+
+  <st-chat-message variant="outgoing" timestamp="10:15" status="read">
+    Yes, just sending it over now!
+  </st-chat-message>
+</st-chat>
+```
+
+### Grouped Messages
+```html
+<st-chat>
+  <st-chat-group variant="incoming">
+    <st-chat-message timestamp="14:20">First point</st-chat-message>
+    <st-chat-message timestamp="14:20">Second point</st-chat-message>
+    <st-chat-message timestamp="14:21">
+      <st-avatar slot="avatar" size="sm" text="AL" />
+      Final point with avatar
+    </st-chat-message>
+  </st-chat-group>
+</st-chat>
+```
+
+### Media Attachment
+```html
+<st-chat>
+  <st-chat-message variant="incoming" timestamp="16:00">
+    <st-avatar slot="avatar" size="sm" text="AL" />
+    <img slot="media" src="/path/to/image.png" alt="Screenshot" />
+    Here is the requested screenshot.
+  </st-chat-message>
+</st-chat>
+```

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`, `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.
+> 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`, `image`, `check-single`, or `check-double`<!-- 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/types/ngx-strata.d.ts

@@ -473,6 +473,58 @@ declare class StrataCheckboxComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataCheckboxComponent, "st-checkbox", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "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": "valueChange"; }, never, never, true, never>;
 }
 
+type ChatMessageVariant = 'incoming' | 'outgoing';
+type ChatMessageStatus = 'sent' | 'delivered' | 'read';
+type ChatSpacing = 'compact' | 'comfortable';
+
+declare class StrataChatComponent {
+    spacing: _angular_core.InputSignal<ChatSpacing>;
+    hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataChatComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataChatComponent, "st-chat", never, { "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class StrataChatMessageComponent {
+    variant: _angular_core.InputSignal<ChatMessageVariant>;
+    timestamp: _angular_core.InputSignal<string | null>;
+    status: _angular_core.InputSignal<ChatMessageStatus | null>;
+    showAvatar: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    position: _angular_core.InputSignal<"single" | "first" | "middle" | "last">;
+    groupVariant: _angular_core.WritableSignal<ChatMessageVariant | null>;
+    groupPosition: _angular_core.WritableSignal<"single" | "first" | "middle" | "last" | null>;
+    groupShowAvatar: _angular_core.WritableSignal<boolean | null>;
+    groupPreserveAvatarSpace: _angular_core.WritableSignal<boolean>;
+    effectiveVariant: _angular_core.Signal<ChatMessageVariant>;
+    effectivePosition: _angular_core.Signal<"single" | "first" | "middle" | "last">;
+    effectiveShowAvatar: _angular_core.Signal<boolean>;
+    hostClasses: _angular_core.Signal<string>;
+    setGroupConfig(variant: ChatMessageVariant, position: 'single' | 'first' | 'middle' | 'last', showAvatar: boolean, preserveAvatarSpace: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataChatMessageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataChatMessageComponent, "st-chat-message", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "showAvatar": { "alias": "showAvatar"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=avatar]", "[slot=media]", "*", "[slot=footer]", "[slot=avatar]"], true, never>;
+}
+
+declare class StrataChatGroupComponent {
+    variant: _angular_core.InputSignal<ChatMessageVariant>;
+    messages: _angular_core.Signal<readonly StrataChatMessageComponent[]>;
+    hostClasses: _angular_core.Signal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataChatGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataChatGroupComponent, "st-chat-group", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, ["messages"], ["*"], true, never>;
+}
+
+declare class StrataChatSeparatorComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataChatSeparatorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataChatSeparatorComponent, "st-chat-separator", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class StrataChatTypingComponent {
+    variant: _angular_core.InputSignal<ChatMessageVariant>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataChatTypingComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataChatTypingComponent, "st-chat-typing", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=avatar]", "[slot=avatar]"], true, never>;
+}
+
 type CalendarSize = 'sm' | 'md';
 type DatePickerSize = 'sm' | 'md' | 'lg';
 type CalendarMode = 'single' | 'range';
@@ -1909,5 +1961,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, 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 };
+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, StrataChatComponent, StrataChatGroupComponent, StrataChatMessageComponent, StrataChatSeparatorComponent, StrataChatTypingComponent, 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, ChatMessageStatus, ChatMessageVariant, ChatSpacing, 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 };