@life-cockpit/angular-ui-kit 2.4.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@life-cockpit/angular-ui-kit",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Life Cockpit Design System - Angular UI component library",
   "license": "MIT",
   "repository": {

package/types/life-cockpit-angular-ui-kit.d.ts

@@ -6732,6 +6732,10 @@ interface MarkdownLinkClick {
 interface MarkdownRendered {
     headings: MarkdownHeading[];
 }
+interface MarkdownChangesHighlighted {
+    /** Number of changed/added blocks highlighted in the current render. */
+    changedBlocks: number;
+}
 interface RenderPart {
     type: 'html' | 'code' | 'mermaid';
     index: number;
@@ -6745,16 +6749,27 @@ interface RenderPart {
  * Renders GitHub-Flavored Markdown (GFM) to sanitized HTML with
  * optional syntax highlighting via `<lc-code-block>`.
  *
+ * Optionally highlights *changed* blocks in place: pass the pre-edit markdown as
+ * `previousContent` and set `highlightChanges` — added/edited blocks (diffed at
+ * block / list-item level) gain a left accent bar + subtle tint, can auto-fade
+ * (`changeHighlightFadeMs`) and scroll into view (`scrollToFirstChange`).
+ *
  * @example
  * ```html
  * <lc-markdown [content]="'# Hello World'" />
  * <lc-markdown [src]="'/docs/readme.md'" />
+ * <lc-markdown
+ *   [content]="current" [previousContent]="prev"
+ *   [highlightChanges]="true" [changeHighlightFadeMs]="3000" />
  * ```
  */
 declare class MarkdownComponent implements OnDestroy {
     private readonly sanitizer;
     private readonly http;
+    private readonly host;
     private httpSub?;
+    private fadeTimer?;
+    private scrollTimer?;
     private mermaidApiPromise?;
     private mermaidInitialized;
     private mermaidRenderRun;
@@ -6774,14 +6789,39 @@ declare class MarkdownComponent implements OnDestroy {
     readonly showHeadingAnchors: _angular_core.InputSignal<boolean>;
     /** Base URL for resolving relative links/images */
     readonly baseUrl: _angular_core.InputSignal<string | undefined>;
+    /** Enable change highlighting (requires `previousContent` to compute a diff). */
+    readonly highlightChanges: _angular_core.InputSignal<boolean>;
+    /**
+     * The prior Markdown. When it differs from `content`, the changed/added blocks
+     * in `content` are highlighted. The caller passes the pre-edit markdown.
+     */
+    readonly previousContent: _angular_core.InputSignal<string | undefined>;
+    /** Auto-fade the highlight after N ms. 0 / undefined ⇒ persist until content changes. */
+    readonly changeHighlightFadeMs: _angular_core.InputSignal<number | undefined>;
+    /** Scroll the first changed block into view when highlights appear. */
+    readonly scrollToFirstChange: _angular_core.InputSignal<boolean>;
     /** Emitted when a link is clicked */
     readonly linkClick: _angular_core.OutputEmitterRef<MarkdownLinkClick>;
     /** Emitted after rendering with heading TOC */
     readonly rendered: _angular_core.OutputEmitterRef<MarkdownRendered>;
+    /** Emitted after a render that produced change highlights. */
+    readonly changesHighlighted: _angular_core.OutputEmitterRef<MarkdownChangesHighlighted>;
     /** Internal resolved markdown source */
     protected resolvedMarkdown: _angular_core.WritableSignal<string>;
     /** Parsed result (computed once from resolvedMarkdown) */
     private parsed;
+    /**
+     * Rendered HTML after applying change highlights. When highlighting is off (or
+     * there is no differing `previousContent`) this returns the parsed HTML
+     * unchanged, so the non-highlight path is byte-for-byte identical to before.
+     */
+    private readonly highlightResult;
+    /** Number of changed/added blocks highlighted in the current render. */
+    protected readonly changedCount: _angular_core.Signal<number>;
+    /** Visually-hidden polite summary announced when highlights appear. */
+    protected readonly changeSummary: _angular_core.Signal<string>;
+    /** Whether the current highlights have faded out (after `changeHighlightFadeMs`). */
+    protected readonly highlightsFaded: _angular_core.WritableSignal<boolean>;
     /** Computed render parts (HTML chunks + code blocks interleaved) */
     protected renderParts: _angular_core.Signal<RenderPart[]>;
     protected containerClasses: _angular_core.Signal<string>;
@@ -6791,6 +6831,25 @@ declare class MarkdownComponent implements OnDestroy {
     constructor();
     ngOnDestroy(): void;
     protected onLinkClick(event: MouseEvent): void;
+    /** Side-effects for a render: emit, (re)arm the fade timer, optional scroll. */
+    private onHighlightResult;
+    private scrollToFirstChanged;
+    /**
+     * Wraps the changed/added top-level blocks of `html` with
+     * `.lc-markdown__block--changed`. A block is "changed" when its normalized
+     * text is not present among the blocks of `prevMarkdown`. Lists are diffed
+     * per `<li>` and tables per `<tr>` so a single edited item highlights alone.
+     */
+    private applyChangeHighlights;
+    /** Normalized text set of the logical blocks within an HTML fragment. */
+    private collectBlockKeys;
+    /**
+     * Visits each diffable block under `root`: top-level elements, but descending
+     * into `<ul>`/`<ol>` (per `<li>`) and `<table>` (per `<tr>`).
+     */
+    private eachLogicalBlock;
+    private blockTextKey;
+    private htmlToElement;
     private loadFromUrl;
     private splitIntoParts;
     private parseMarkdown;
@@ -6801,7 +6860,7 @@ declare class MarkdownComponent implements OnDestroy {
     private renderMermaidParts;
     private getMermaidApi;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MarkdownComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MarkdownComponent, "lc-markdown", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "linkTarget": { "alias": "linkTarget"; "required": false; "isSignal": true; }; "sanitize": { "alias": "sanitize"; "required": false; "isSignal": true; }; "syntaxHighlight": { "alias": "syntaxHighlight"; "required": false; "isSignal": true; }; "showHeadingAnchors": { "alias": "showHeadingAnchors"; "required": false; "isSignal": true; }; "baseUrl": { "alias": "baseUrl"; "required": false; "isSignal": true; }; }, { "linkClick": "linkClick"; "rendered": "rendered"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MarkdownComponent, "lc-markdown", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "linkTarget": { "alias": "linkTarget"; "required": false; "isSignal": true; }; "sanitize": { "alias": "sanitize"; "required": false; "isSignal": true; }; "syntaxHighlight": { "alias": "syntaxHighlight"; "required": false; "isSignal": true; }; "showHeadingAnchors": { "alias": "showHeadingAnchors"; "required": false; "isSignal": true; }; "baseUrl": { "alias": "baseUrl"; "required": false; "isSignal": true; }; "highlightChanges": { "alias": "highlightChanges"; "required": false; "isSignal": true; }; "previousContent": { "alias": "previousContent"; "required": false; "isSignal": true; }; "changeHighlightFadeMs": { "alias": "changeHighlightFadeMs"; "required": false; "isSignal": true; }; "scrollToFirstChange": { "alias": "scrollToFirstChange"; "required": false; "isSignal": true; }; }, { "linkClick": "linkClick"; "rendered": "rendered"; "changesHighlighted": "changesHighlighted"; }, never, never, true, never>;
 }
 
 type LogLevel = 'debug' | 'info' | 'warn' | 'error';
@@ -7171,4 +7230,4 @@ declare class StageListComponent {
 }
 
 export { AccordionComponent, AccordionGroupComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PageLayoutComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, resolveFileIcon };
-export type { ActionClickEvent, AlertVariant, AreaChartSeries, AvatarGroupItem, AvatarSize, AvatarStatus, BadgeSize, BadgeVariant, BarChartItem, BarChartOrientation, BreadcrumbItem, BreadcrumbSize, ButtonSize, ButtonType, ButtonVariant, CalendarEvent, CalendarView, CalloutVariant, CellEditEvent, ChatAttachment, ChatFileAttachEvent, ChatMessage, ChatMessageRole, ChatMessageStatus, ChatRenderMarkdown, ChatSendEvent, CheckboxSize, ChipSize, ChipVariant, CodeBlockLanguage, ComboboxOption, ComboboxSize, ComboboxValue, ConfirmDialogVariant, ConfirmOptions, ContainerSize, DateRange, DateValue, DependencyDirection, DependencyEdgeDef, DependencyNode, DependencyNodeStatus, DependencyRelation, DiffViewMode, DividerOrientation, DividerSpacing, DividerVariant, DocumentType, DonutChartSize, DonutSegment, DrawerPosition, DrawerSize, EmptyStateSize, ErrorSeverity, FileUploadFile, FilterConfig, FilterOption, FilterValues, FooterLink, FooterSection, FooterVariant, FunnelStep, GalleryItem, GalleryLayout, GallerySize, GanttDependency, GanttTask, GaugeColor, GaugeSize, HeatmapCell, HeroColor, HeroSize, HeroVariant, IconSize, IconVariant, KanbanCard, KanbanColumn, KanbanLabel, KanbanMoveEvent, LineChartSeries, ListItem, ListOrientation, ListSize, ListVariant, LogLevel, LogLine, LogViewerVariant, MarkdownHeading, MarkdownLinkClick, MarkdownRendered, MenuItem, ModalSize, NavigationItem, Notification, NotificationPriority, NotificationType, PageLayoutFill, PaginationSize, PasswordRequirement, PasswordStrength, PieChartSize, PieSegment, PopoverPosition, PopoverTrigger, ProgressBarColor, ProgressBarSize, ProgressBarVariant, ProgressRingColor, ProgressRingSize, RadarChartSeries, RadioSize, RatingSize, RenderPart, RequireTextConfig, RichTextEditorMode, RowToggleEvent, ScatterPoint, ScatterSeries, SearchInputSize, SectionBackground, SectionSpacing, SelectOption, SelectOptionGroup, SelectValue, SelectionChangeEvent, SidenavMode, SidenavPosition, SkeletonVariant, SortEvent, SpacerSize, SparklineColor, SparklineCurve, SpinnerSize, StackAlign, StackDirection, StackGap, StackJustify, StackedBarCategory, StackedBarLegend, StackedBarOrientation, StageItem, StageListSize, StatTrendDirection, StepState, StepperStep, TabOrientation, TableAction, TableActionsAlign, TableColumn, TableSize, TableTreeConfig, TableVariant, ThemeConfig, ThemeMode, ThemeState, TimelineItem, TimelineOrientation, Toast, ToastAction, ToastConfig, ToastPosition, ToastVariant, ToggleOption, ToolbarAction, ToolbarConfig, TooltipPosition, TreeNode, TreeNodeType, WaterfallItem };
+export type { ActionClickEvent, AlertVariant, AreaChartSeries, AvatarGroupItem, AvatarSize, AvatarStatus, BadgeSize, BadgeVariant, BarChartItem, BarChartOrientation, BreadcrumbItem, BreadcrumbSize, ButtonSize, ButtonType, ButtonVariant, CalendarEvent, CalendarView, CalloutVariant, CellEditEvent, ChatAttachment, ChatFileAttachEvent, ChatMessage, ChatMessageRole, ChatMessageStatus, ChatRenderMarkdown, ChatSendEvent, CheckboxSize, ChipSize, ChipVariant, CodeBlockLanguage, ComboboxOption, ComboboxSize, ComboboxValue, ConfirmDialogVariant, ConfirmOptions, ContainerSize, DateRange, DateValue, DependencyDirection, DependencyEdgeDef, DependencyNode, DependencyNodeStatus, DependencyRelation, DiffViewMode, DividerOrientation, DividerSpacing, DividerVariant, DocumentType, DonutChartSize, DonutSegment, DrawerPosition, DrawerSize, EmptyStateSize, ErrorSeverity, FileUploadFile, FilterConfig, FilterOption, FilterValues, FooterLink, FooterSection, FooterVariant, FunnelStep, GalleryItem, GalleryLayout, GallerySize, GanttDependency, GanttTask, GaugeColor, GaugeSize, HeatmapCell, HeroColor, HeroSize, HeroVariant, IconSize, IconVariant, KanbanCard, KanbanColumn, KanbanLabel, KanbanMoveEvent, LineChartSeries, ListItem, ListOrientation, ListSize, ListVariant, LogLevel, LogLine, LogViewerVariant, MarkdownChangesHighlighted, MarkdownHeading, MarkdownLinkClick, MarkdownRendered, MenuItem, ModalSize, NavigationItem, Notification, NotificationPriority, NotificationType, PageLayoutFill, PaginationSize, PasswordRequirement, PasswordStrength, PieChartSize, PieSegment, PopoverPosition, PopoverTrigger, ProgressBarColor, ProgressBarSize, ProgressBarVariant, ProgressRingColor, ProgressRingSize, RadarChartSeries, RadioSize, RatingSize, RenderPart, RequireTextConfig, RichTextEditorMode, RowToggleEvent, ScatterPoint, ScatterSeries, SearchInputSize, SectionBackground, SectionSpacing, SelectOption, SelectOptionGroup, SelectValue, SelectionChangeEvent, SidenavMode, SidenavPosition, SkeletonVariant, SortEvent, SpacerSize, SparklineColor, SparklineCurve, SpinnerSize, StackAlign, StackDirection, StackGap, StackJustify, StackedBarCategory, StackedBarLegend, StackedBarOrientation, StageItem, StageListSize, StatTrendDirection, StepState, StepperStep, TabOrientation, TableAction, TableActionsAlign, TableColumn, TableSize, TableTreeConfig, TableVariant, ThemeConfig, ThemeMode, ThemeState, TimelineItem, TimelineOrientation, Toast, ToastAction, ToastConfig, ToastPosition, ToastVariant, ToggleOption, ToolbarAction, ToolbarConfig, TooltipPosition, TreeNode, TreeNodeType, WaterfallItem };