@lightworkai.official/debug-capture-angular 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightworkai.official/debug-capture-angular",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Angular bindings for @lightworkai.official/debug-capture",
   "type": "module",
   "module": "./dist/index.mjs",
@@ -27,7 +27,7 @@
     "@angular/common": ">=16",
     "@angular/forms": ">=16",
     "@angular/platform-browser": ">=16",
-    "@lightworkai.official/debug-capture": "^0.6.0",
+    "@lightworkai.official/debug-capture": "^0.7.0",
     "@tiptap/core": "^3",
     "@tiptap/starter-kit": "^3",
     "@tiptap/extension-image": "^3",

package/src/index.ts

@@ -10,21 +10,8 @@
  * never sees an unknown tag to complain about. That awkwardness is the
  * wrapper's to absorb, which is most of the reason the wrapper exists.
  */
-import {
-  APP_INITIALIZER,
-  Component,
-  Input,
-  type EnvironmentProviders,
-  makeEnvironmentProviders,
-} from "@angular/core";
-import {
-  configureDebugCapture,
-  installDebugCapture,
-  launch,
-  setErroredQueriesSource,
-  type DebugCaptureConfig,
-  type ErroredQuery,
-} from "@lightworkai.official/debug-capture";
+import { APP_INITIALIZER, Component, Input, type EnvironmentProviders, makeEnvironmentProviders, Output, EventEmitter } from "@angular/core";
+import { configureDebugCapture, installDebugCapture, launch, setErroredQueriesSource, type DebugCaptureConfig, type ErroredQuery, openSupportPortal, showToast } from "@lightworkai.official/debug-capture";
 
 export interface DebugCaptureProviderOptions extends DebugCaptureConfig {
   /** Failed queries from the app's data layer, if it has one. */
@@ -98,6 +85,50 @@ export class ReportProblemButtonComponent {
   }
 }
 
+/**
+ * "ดูปัญหาที่แจ้ง" — hands the current user to their tickets on the support host,
+ * already signed in.
+ *
+ * Unlike the reporter button this one awaits, so it CAN be routed through a
+ * Promise: the token comes from the host's own server at click time, because it
+ * lives about two minutes and is spent on arrival. Hence a pending state, and a
+ * failure path — most often "nobody is signed in", which the host answers.
+ */
+@Component({
+  selector: "lw-support-portal-button",
+  standalone: true,
+  template: `
+    <button type="button" [attr.aria-label]="label" [attr.title]="label" [disabled]="pending" (click)="open()">
+      <ng-content>{{ label }}</ng-content>
+    </button>
+  `,
+  styles: [":host { display: inline-flex; }"],
+})
+export class SupportPortalButtonComponent {
+  @Input() label = "ดูปัญหาที่แจ้ง";
+  /** Open in a new tab instead of navigating away. */
+  @Input() newTab = false;
+  @Output() failed = new EventEmitter<unknown>();
+
+  pending = false;
+
+  async open(): Promise<void> {
+    if (this.pending) return;
+    this.pending = true;
+    try {
+      await openSupportPortal(this.newTab ? { target: "_blank" } : {});
+    } catch (err) {
+      // A host that listens says it its own way; one that does not still gets
+      // told, rather than a button that looks broken.
+      this.failed.emit(err);
+      showToast("เปิดรายการปัญหาไม่สำเร็จ", "error");
+    } finally {
+      // Only reached when navigation did not happen.
+      this.pending = false;
+    }
+  }
+}
+
 /**
  * Real standalone components now, not a web element mounted from a wrapper.
  * The core package holds the logic every framework shares — the ingest client,
@@ -108,12 +139,15 @@ export class ReportProblemButtonComponent {
  *
  *   @import "@lightworkai.official/debug-capture/style.css";
  */
-export { MyTicketsPanelComponent } from "./components/my-tickets-panel.component";
-export { TicketTableComponent } from "./components/ticket-table.component";
-export { TicketDetailComponent } from "./components/ticket-detail.component";
-export { RichReplyEditorComponent } from "./components/rich-reply-editor.component";
-export { TicketBodyComponent } from "./components/ticket-body.component";
-export { ImageAnnotatorDialogComponent } from "./components/image-annotator-dialog.component";
+/*
+ * The reporter's own tickets are no longer components this package ships.
+ *
+ * They were: a list, a thread, a reply editor and an annotator dialog, in three
+ * frameworks, over a read API. It worked, and it meant every change to the way
+ * a ticket looks had to land in four repositories. The support host already
+ * renders that screen, so the library hands people to it instead — one button.
+ * See SupportPortalButton, and the core's `openSupportPortal`.
+ */
 
 export { configureDebugCapture, launch, onCrash } from "@lightworkai.official/debug-capture";
-export type { DebugCaptureConfig, DebugReason, ErroredQuery, MyTicketListItem, MyTicketDetail } from "@lightworkai.official/debug-capture";
+export type { DebugCaptureConfig, DebugReason, ErroredQuery } from "@lightworkai.official/debug-capture";

package/dist/components/icon.component.d.ts

@@ -1,15 +0,0 @@
-import { DomSanitizer, type SafeHtml } from "@angular/platform-browser";
-/**
- * Renders one of our own SVG constants.
- *
- * `bypassSecurityTrustHtml` is safe HERE and only here: the markup comes from
- * `ICONS`, a frozen table in this package's own source. Nothing a user or a
- * server ever wrote reaches it — the thread's HTML goes through the core's
- * allowlist walker instead.
- */
-export declare class IconComponent {
-    private readonly sanitizer;
-    set svg(value: string);
-    protected safe: SafeHtml;
-    constructor(sanitizer: DomSanitizer);
-}

package/dist/components/icons.d.ts

@@ -1,29 +0,0 @@
-export declare const ICONS: {
-    readonly bold: string;
-    readonly italic: string;
-    readonly underline: string;
-    readonly bulletList: string;
-    readonly orderedList: string;
-    readonly link: string;
-    readonly image: string;
-    readonly send: string;
-    readonly search: string;
-    readonly arrowLeft: string;
-    readonly check: string;
-    readonly message: string;
-    readonly rotate: string;
-    readonly alert: string;
-    readonly inbox: string;
-    readonly clock: string;
-    readonly checkCircle: string;
-    readonly ban: string;
-    readonly wrench: string;
-    readonly square: string;
-    readonly arrowUpRight: string;
-    readonly highlighter: string;
-    readonly type: string;
-    readonly trash: string;
-    readonly pencil: string;
-    readonly checkSmall: string;
-    readonly xSmall: string;
-};

package/dist/components/image-annotator-dialog.component.d.ts

@@ -1,70 +0,0 @@
-/**
- * Draw on an image before it is sent.
- *
- * The original opens this the moment you pick a picture, and the reason is in
- * its own comment: annotating BEFORE upload keeps the canvas same-origin, so
- * `toDataURL` is not tainted by a cross-origin presigned URL. Pointing at the
- * problem is also most of what a screenshot is for.
- *
- * The drawing itself is `createAnnotator` from the core — one canvas engine,
- * shared by all three framework packages, because there is no declarative way
- * to draw on a canvas. What is here is only the chrome.
- */
-import { EventEmitter, type AfterViewInit, type OnDestroy } from "@angular/core";
-import { type Annotator, type AnnotatorTool, type ReporterStrings } from "@lightworkai.official/debug-capture";
-export declare class ImageAnnotatorDialogComponent implements AfterViewInit, OnDestroy {
-    /** The picked image, as a same-origin data URI. */
-    src: string;
-    /** Shown in the description, as the app's dialog does. */
-    filename?: string;
-    locale?: "th" | "en";
-    /** The annotated image, at full resolution. */
-    confirmed: EventEmitter<string>;
-    cancelled: EventEmitter<void>;
-    private canvas;
-    protected annotator: Annotator | null;
-    protected active: AnnotatorTool | null;
-    protected loading: boolean;
-    protected readonly icons: {
-        readonly bold: string;
-        readonly italic: string;
-        readonly underline: string;
-        readonly bulletList: string;
-        readonly orderedList: string;
-        readonly link: string;
-        readonly image: string;
-        readonly send: string;
-        readonly search: string;
-        readonly arrowLeft: string;
-        readonly check: string;
-        readonly message: string;
-        readonly rotate: string;
-        readonly alert: string;
-        readonly inbox: string;
-        readonly clock: string;
-        readonly checkCircle: string;
-        readonly ban: string;
-        readonly wrench: string;
-        readonly square: string;
-        readonly arrowUpRight: string;
-        readonly highlighter: string;
-        readonly type: string;
-        readonly trash: string;
-        readonly pencil: string;
-        readonly checkSmall: string;
-        readonly xSmall: string;
-    };
-    protected readonly tools: {
-        tool: AnnotatorTool;
-        key: keyof ReporterStrings;
-        icon: string;
-    }[];
-    protected get t(): ReporterStrings;
-    protected label(key: keyof ReporterStrings): string;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    protected pick(tool: AnnotatorTool): void;
-    protected clear(): void;
-    protected backdrop(event: MouseEvent): void;
-    protected confirm(): void;
-}

package/dist/components/my-tickets-panel.component.d.ts

@@ -1,100 +0,0 @@
-/**
- * "ปัญหาที่แจ้ง" — the reports this person filed, and what became of them.
- *
- * Put it on a route of your own — the reporter-facing counterpart to the
- * agent's ticket list. It needs `identity` in the config, because the widget's
- * realm key is public and can authorise filing a report but never reading one
- * back — see the core README.
- *
- * This component owns fetching and view state and nothing else: the columns,
- * the sorting, the sanitising and the dates all live in the core, shared with
- * the Vue and React packages.
- */
-import { EventEmitter, type OnChanges, type OnInit } from "@angular/core";
-import { type MyTicketDetail, type MyTicketListItem, type RealmConfig, type Sort, type SortKey, type StatusEvent, type StatusMaps, type TicketStrings } from "@lightworkai.official/debug-capture";
-export declare class MyTicketsPanelComponent implements OnInit, OnChanges {
-    /** Change it to re-read the list — after filing a report, say. */
-    refreshKey?: string | number;
-    /** Hide the panel's own heading when the host page already has one. */
-    hideTitle: boolean;
-    replied: EventEmitter<MyTicketDetail>;
-    reopenedTicket: EventEmitter<MyTicketDetail>;
-    errored: EventEmitter<string>;
-    protected readonly icons: {
-        readonly bold: string;
-        readonly italic: string;
-        readonly underline: string;
-        readonly bulletList: string;
-        readonly orderedList: string;
-        readonly link: string;
-        readonly image: string;
-        readonly send: string;
-        readonly search: string;
-        readonly arrowLeft: string;
-        readonly check: string;
-        readonly message: string;
-        readonly rotate: string;
-        readonly alert: string;
-        readonly inbox: string;
-        readonly clock: string;
-        readonly checkCircle: string;
-        readonly ban: string;
-        readonly wrench: string;
-        readonly square: string;
-        readonly arrowUpRight: string;
-        readonly highlighter: string;
-        readonly type: string;
-        readonly trash: string;
-        readonly pencil: string;
-        readonly checkSmall: string;
-        readonly xSmall: string;
-    };
-    protected items: MyTicketListItem[];
-    protected config: RealmConfig | null;
-    protected loading: boolean;
-    protected error: string | null;
-    protected noIdentity: boolean;
-    protected keyword: string;
-    protected applied: string;
-    protected statusFilter: string;
-    protected sort: Sort;
-    protected page: number;
-    protected shown: number;
-    protected detail: MyTicketDetail | null;
-    protected history: StatusEvent[];
-    protected detailError: string | null;
-    protected detailLoading: boolean;
-    protected sending: boolean;
-    protected reopening: boolean;
-    private debounce;
-    private first;
-    protected get locale(): "th" | "en" | undefined;
-    protected get host(): string;
-    protected get t(): TicketStrings;
-    protected get maps(): StatusMaps;
-    ngOnInit(): void;
-    ngOnChanges(): void;
-    protected load(): Promise<void>;
-    /** Debounced: re-filtering per keystroke resets the page under the reader's hands. */
-    protected onKeyword(next: string): void;
-    protected onStatus(next: string): void;
-    /** Open a DIFFERENT ticket: tear the view down, because nothing on screen is its. */
-    protected open(id: string): Promise<MyTicketDetail | null>;
-    /**
-     * Re-read the ticket we are already looking at, in place.
-     *
-     * Deliberately separate from `open()`. That one clears the detail and raises
-     * the loading flag, which destroys the whole view and rebuilds it — so
-     * sending a reply threw the reader back to the top of the page, away from the
-     * conversation they were in the middle of. It reads as the page reloading,
-     * because visually that is what happens.
-     */
-    protected reload(id: string): Promise<MyTicketDetail | null>;
-    protected back(): void;
-    protected toggleSort(key: SortKey): void;
-    protected send(body: string): Promise<void>;
-    protected reopen(note: string): Promise<void>;
-    protected readonly uploadImage: (file: File) => Promise<string>;
-    protected readonly attachmentUrl: (id: string) => Promise<string>;
-    private safe;
-}

package/dist/components/rich-reply-editor.component.d.ts

@@ -1,89 +0,0 @@
-/**
- * The reporter's reply box — TipTap, the same editor the original gives them.
- *
- * TipTap ships no Angular binding, so this drives `@tiptap/core` directly:
- * create the editor onto an element ref, destroy it on teardown, and ask it for
- * state when Angular renders. That is a dozen lines, and it is still far less
- * than re-implementing selection handling, list nesting and paste sanitising by
- * hand — which is what this was before, and what it should never have been.
- */
-import { ChangeDetectorRef, EventEmitter, type AfterViewInit, type OnDestroy } from "@angular/core";
-/**
- * The toolbar's words.
- *
- * An open map because the toolbar is configurable — a host asking for `strike`
- * needs a label for it, and enumerating every control here would mean editing
- * this type every time one is added.
- */
-export type EditorLabels = Record<string, string>;
-interface Tool {
-    key: keyof EditorLabels;
-    icon: string;
-    mark: string;
-    run: () => void;
-    separatorBefore?: boolean;
-}
-export declare class RichReplyEditorComponent implements AfterViewInit, OnDestroy {
-    private readonly cdr;
-    placeholder: string;
-    /** Support host origin — the sanitiser resolves inline image URLs against it. */
-    host: string;
-    labels: EditorLabels;
-    uploadImage: (file: File) => Promise<string>;
-    set disabledState(value: boolean);
-    /** UI language, for the annotator's own labels. */
-    locale?: "th" | "en";
-    /** Content to start from — editing an existing message rather than writing one. */
-    initial?: string;
-    errored: EventEmitter<string>;
-    /**
-     * The image waiting to be drawn on, as a same-origin data URI. Non-null means
-     * the annotator is open.
-     *
-     * Every route in — the picker, a paste, a drop — lands here first. The
-     * original does the same: pointing at the problem is most of what a
-     * screenshot is for, and annotating BEFORE upload keeps the canvas
-     * same-origin, so `toDataURL` is not tainted by a presigned URL.
-     */
-    protected pending: string | null;
-    protected pendingName: string;
-    protected disabled: boolean;
-    private editor;
-    private mount;
-    private file;
-    protected readonly tools: Tool[];
-    constructor(cdr: ChangeDetectorRef);
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    /**
-     * Fired on `mousedown` with the default prevented, not on `click`: a toolbar
-     * button taking focus collapses the editor's selection, so by the time
-     * `click` fires the command has nothing to apply to.
-     */
-    protected press(event: MouseEvent, tool: Tool): void;
-    protected isActive(mark: string): boolean;
-    protected onFile(event: Event): void;
-    /**
-     * Open the annotator on a picked image rather than inserting it straight away.
-     *
-     * One dialog, everywhere. There was briefly a config hook letting a host swap
-     * in its own — which solved the symptom (two dialogs that looked different)
-     * by blessing the cause (two dialogs).
-     */
-    private addImage;
-    /** The annotated image comes back as a data URI; upload THAT and insert it. */
-    protected commitImage(dataUri: string): Promise<void>;
-    private toggleLink;
-    /**
-     * Sanitised HTML, or "" when there is nothing worth sending.
-     *
-     * `cleanHtml` is not belt-and-braces over TipTap's schema. The schema drops
-     * an `onclick`, but the Image extension takes any `src` it is given — so a
-     * screenshot pasted from a web page arrives with that page's remote image
-     * intact, and posting it would store a tracking pixel in the thread aimed at
-     * every future reader.
-     */
-    value(): string;
-    clear(): void;
-}
-export {};

package/dist/components/ticket-body.component.d.ts

@@ -1,25 +0,0 @@
-import { type OnChanges } from "@angular/core";
-/**
- * A message or description body, rendered safely.
- *
- * Deliberately NOT `[innerHTML]`, even though Angular sanitises that: bodies
- * are HTML written by other people, and the core's walker is the one place all
- * three framework packages agree on what an inline image may point at. Angular
- * would keep a remote `<img>`, which is how a ticket becomes a tracking pixel
- * aimed at whoever opens it.
- */
-export declare class TicketBodyComponent implements OnChanges {
-    html: string;
-    host: string;
-    private target;
-    /**
-     * The image being viewed full size, if any.
-     *
-     * Bodies are capped to a thumbnail so one screenshot cannot push a whole
-     * conversation off the screen — which is only reasonable if the full size is
-     * a click away.
-     */
-    protected zoomed: string | null;
-    protected onClick(event: MouseEvent): void;
-    ngOnChanges(): void;
-}

package/dist/components/ticket-detail.component.d.ts

@@ -1,125 +0,0 @@
-/**
- * One report: what was filed, where it stands, what happened, and the thread.
- * The order is the original's.
- */
-import { EventEmitter, type OnChanges } from "@angular/core";
-import { type MyTicketDetail, type RealmConfig, type StatusEvent, type StatusMaps, type TicketStrings } from "@lightworkai.official/debug-capture";
-interface TimelineNode {
-    label: string;
-    time: string;
-    state: "done" | "current" | "pending";
-    reopened: boolean;
-}
-export declare class TicketDetailComponent implements OnChanges {
-    ticket: MyTicketDetail;
-    history: StatusEvent[];
-    config: RealmConfig;
-    maps: StatusMaps;
-    t: TicketStrings;
-    host: string;
-    locale?: "th" | "en";
-    sending: boolean;
-    reopening: boolean;
-    uploadImage: (file: File) => Promise<string>;
-    set attachmentUrl(read: (id: string) => Promise<string>);
-    back: EventEmitter<void>;
-    sent: EventEmitter<string>;
-    reopened: EventEmitter<string>;
-    edited: EventEmitter<void>;
-    errored: EventEmitter<string>;
-    /**
-     * The message being rewritten, if any.
-     *
-     * Only ONE at a time: an open editor per bubble would let someone start three
-     * rewrites and lose track of which are unsaved.
-     */
-    protected editingId: string | null;
-    protected savingEdit: boolean;
-    private draft?;
-    protected saveEdit(messageId: string): Promise<void>;
-    private editor?;
-    private thread?;
-    private seenMessages;
-    /**
-     * Open at the newest message, and stay there when one arrives.
-     *
-     * The thread is a fixed-height window (~320px), so without the first part it
-     * opens showing the OLDEST messages and the reader has to scroll to find out
-     * what has happened since. Every chat opens at the bottom.
-     *
-     * The second part matters because the thread sits above the composer: a reply
-     * pushes the composer down and out of sight, leaving the reader in the middle
-     * of the conversation with no sign their message landed.
-     */
-    ngOnChanges(): void;
-    protected readonly icons: {
-        readonly bold: string;
-        readonly italic: string;
-        readonly underline: string;
-        readonly bulletList: string;
-        readonly orderedList: string;
-        readonly link: string;
-        readonly image: string;
-        readonly send: string;
-        readonly search: string;
-        readonly arrowLeft: string;
-        readonly check: string;
-        readonly message: string;
-        readonly rotate: string;
-        readonly alert: string;
-        readonly inbox: string;
-        readonly clock: string;
-        readonly checkCircle: string;
-        readonly ban: string;
-        readonly wrench: string;
-        readonly square: string;
-        readonly arrowUpRight: string;
-        readonly highlighter: string;
-        readonly type: string;
-        readonly trash: string;
-        readonly pencil: string;
-        readonly checkSmall: string;
-        readonly xSmall: string;
-    };
-    protected reopenOpen: boolean;
-    protected shotUrls: Record<string, string>;
-    private readUrl?;
-    protected get lang(): "th" | "en";
-    protected get key(): string;
-    protected get updated(): boolean;
-    protected get awaiting(): boolean;
-    protected get tone(): {
-        icon: string;
-        border: string;
-        bg: string;
-        fg: string;
-        accent: string;
-    };
-    protected get kicker(): string;
-    /**
-     * Config-first: an awaiting lane's "please reply" wins, then the lane's own
-     * description (so a realm's custom lane carries its own words), then our
-     * default copy, then the bare label.
-     */
-    protected get headline(): string;
-    protected get showNote(): boolean;
-    protected get canReopen(): boolean;
-    protected get reopenPlaceholder(): string;
-    protected get editorLabels(): {
-        bold: string;
-        italic: string;
-        underline: string;
-        bulletList: string;
-        orderedList: string;
-        link: string;
-        linkPrompt: string;
-        attachImage: string;
-    };
-    protected get screenshots(): import("@lightworkai.official/debug-capture").TicketAttachment[];
-    /** The lifecycle, chronologically — reopens included. */
-    protected get timeline(): TimelineNode[];
-    protected when(iso: string | null): string;
-    protected send(): void;
-    private loadShots;
-}
-export {};

package/dist/components/ticket-table.component.d.ts

@@ -1,75 +0,0 @@
-/**
- * The reporter's list — the original's seven columns.
- *
- * Every decision here is imported: which rows survive the filter, how a column
- * sorts, what "the team replied" means, how a date reads. That is the point of
- * the split. This file arranges them; it decides nothing.
- */
-import { EventEmitter } from "@angular/core";
-import { type MyTicketListItem, type Sort, type SortKey, type StatusMaps, type TicketStrings } from "@lightworkai.official/debug-capture";
-export declare class TicketTableComponent {
-    items: MyTicketListItem[];
-    maps: StatusMaps;
-    t: TicketStrings;
-    slug?: string;
-    timezone: string;
-    locale?: "th" | "en";
-    keyword: string;
-    statusFilter: string;
-    sort: Sort;
-    page: number;
-    opened: EventEmitter<string>;
-    sorted: EventEmitter<SortKey>;
-    paged: EventEmitter<number>;
-    counted: EventEmitter<number>;
-    protected readonly icons: {
-        readonly bold: string;
-        readonly italic: string;
-        readonly underline: string;
-        readonly bulletList: string;
-        readonly orderedList: string;
-        readonly link: string;
-        readonly image: string;
-        readonly send: string;
-        readonly search: string;
-        readonly arrowLeft: string;
-        readonly check: string;
-        readonly message: string;
-        readonly rotate: string;
-        readonly alert: string;
-        readonly inbox: string;
-        readonly clock: string;
-        readonly checkCircle: string;
-        readonly ban: string;
-        readonly wrench: string;
-        readonly square: string;
-        readonly arrowUpRight: string;
-        readonly highlighter: string;
-        readonly type: string;
-        readonly trash: string;
-        readonly pencil: string;
-        readonly checkSmall: string;
-        readonly xSmall: string;
-    };
-    protected readonly columns: {
-        key: SortKey;
-        label: keyof TicketStrings;
-        width?: string;
-    }[];
-    protected get visible(): MyTicketListItem[];
-    protected get pages(): number;
-    /** A filter can strand the reader past the end of the shorter list. */
-    protected get current(): number;
-    protected get rows(): MyTicketListItem[];
-    protected label(key: SortKey): string;
-    protected arrow(key: SortKey): string;
-    protected ariaSort(key: SortKey): string | null;
-    protected key(row: MyTicketListItem): string;
-    protected tone(status: string): {
-        fg: string;
-        bg: string;
-    };
-    protected solved(row: MyTicketListItem): boolean;
-    protected replied(row: MyTicketListItem): boolean;
-    protected when(iso: string | null): string;
-}

package/src/components/icon.component.ts

@@ -1,24 +0,0 @@
-import { Component, Input } from "@angular/core";
-import { DomSanitizer, type SafeHtml } from "@angular/platform-browser";
-
-/**
- * Renders one of our own SVG constants.
- *
- * `bypassSecurityTrustHtml` is safe HERE and only here: the markup comes from
- * `ICONS`, a frozen table in this package's own source. Nothing a user or a
- * server ever wrote reaches it — the thread's HTML goes through the core's
- * allowlist walker instead.
- */
-@Component({
-  selector: "lw-icon",
-  standalone: true,
-  template: `<span [innerHTML]="safe"></span>`,
-  styles: [":host { display: inline-flex; align-items: center; }"],
-})
-export class IconComponent {
-  @Input({ required: true }) set svg(value: string) {
-    this.safe = this.sanitizer.bypassSecurityTrustHtml(value);
-  }
-  protected safe: SafeHtml = "";
-  constructor(private readonly sanitizer: DomSanitizer) {}
-}