@life-cockpit/angular-ui-kit 2.13.0 → 2.13.1

package/fesm2022/life-cockpit-angular-ui-kit.mjs

@@ -533,6 +533,27 @@ const ICON_FALLBACK_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
     '<rect x="3.5" y="3.5" width="17" height="17" rx="3" stroke-dasharray="2.5 2.5" />' +
     '<text x="12" y="16.5" text-anchor="middle" font-size="12" font-weight="700" font-family="system-ui, -apple-system, sans-serif" fill="currentColor" stroke="none">?</text>' +
     '</svg>';
+/**
+ * Icon names already reported to the console. A page with dozens of instances
+ * of the same typo must produce exactly one warning, not one per instance —
+ * and the warning fires in production too (unlike the old dev-only warning,
+ * which left prod incidents invisible in the console).
+ */
+const warnedIconNames = new Set();
+function warnOnce(name, message) {
+    if (warnedIconNames.has(name))
+        return;
+    warnedIconNames.add(name);
+    console.warn(message);
+}
+/**
+ * Clears the warn-once-per-name registry. Only needed by unit tests that
+ * assert on console warnings across multiple cases.
+ * @internal
+ */
+function resetIconWarnings() {
+    warnedIconNames.clear();
+}
 /**
  * Icon component - Tabler Icons wrapper for displaying SVG icons
  *
@@ -543,10 +564,15 @@ const ICON_FALLBACK_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
  * - Custom color support (CSS colors, variables)
  * - Accessibility attributes (ARIA labels, decorative icons)
  * - Dynamic SVG loading from Tabler Icons
- * - Fail-loud on unknown names: a dev-mode warning + a visible placeholder
- *   (never a silent empty space). See {@link ICON_NAMES} / {@link isValidIconName}
- *   for the canonical set of valid names, and {@link ICON_ALIASES} for the
- *   supported Heroicon/Material aliases.
+ * - Fail-loud on unknown names: a console warning (once per name, in dev AND
+ *   prod) + a visible placeholder (never a silent empty space) — and **no
+ *   network request**, because in SPA deployments the server answers missing
+ *   asset paths with the index.html fallback. See {@link ICON_NAMES} /
+ *   {@link isValidIconName} for the canonical set of valid names, and
+ *   {@link ICON_ALIASES} for the supported Heroicon/Material aliases.
+ * - Fetched responses are validated (content-type + parsed `<svg>` root)
+ *   before anything is trusted — a non-SVG response (e.g. the SPA index.html
+ *   fallback) is dropped and replaced by the placeholder.
  *
  * @example
  * ```html
@@ -679,14 +705,18 @@ class IconComponent {
                 return;
             }
             // Fail loud on names outside the canonical set (typos, un-aliased
-            // Heroicon names, …). We still attempt to load below, so anything that
-            // *is* servable keeps working — this only surfaces the problem instead of
-            // silently rendering an empty icon.
-            if (!isValidIconName(rawName) && isDevMode()) {
-                console.warn(`[lc-icon] Unknown icon "${rawName}". Use a Tabler name or a documented alias (see ICON_NAMES / ICON_ALIASES).`);
-                if (this.strict()) {
+            // Heroicon names, …) — in dev AND prod, once per name. Crucially, an
+            // unknown name is never fetched: in SPA deployments the server answers
+            // missing asset paths with the index.html fallback (status 200), so a
+            // fetch for a typo'd name would come back as a full HTML document. The
+            // placeholder is rendered instead.
+            if (!isValidIconName(rawName)) {
+                warnOnce(rawName, `[lc-icon] Unknown icon "${rawName}". Use a Tabler name or a documented alias (see ICON_NAMES / ICON_ALIASES). Rendering a placeholder instead.`);
+                if (isDevMode() && this.strict()) {
                     throw new Error(`[lc-icon] Unknown icon "${rawName}" (strict mode). Use a Tabler name or a documented alias.`);
                 }
+                this.renderFallback();
+                return;
             }
             // Resolve aliases (Heroicon/Material -> Tabler)
             const iconName = ICON_ALIASES[rawName] ?? rawName;
@@ -694,7 +724,12 @@ class IconComponent {
             const inlineSvg = INLINE_ICON_SVGS[iconName]?.[iconVariant];
             if (inlineSvg) {
                 const processed = this.processSvgString(inlineSvg);
-                this.svgContent.set(this.sanitizer.bypassSecurityTrustHtml(processed));
+                if (processed !== null) {
+                    this.setTrustedSvg(processed);
+                }
+                else {
+                    this.renderFallback();
+                }
                 return;
             }
             // Fallback to HTTP loading (may not work in all environments)
@@ -709,7 +744,7 @@ class IconComponent {
             // otherwise-valid icon stuck on the placeholder. A genuine 404 (missing
             // asset) is not retried.
             this.http
-                .get(path, { responseType: 'text' })
+                .get(path, { observe: 'response', responseType: 'text' })
                 .pipe(retry({
                 count: 2,
                 delay: (error, retryCount) => error instanceof HttpErrorResponse && error.status === 404
@@ -717,10 +752,24 @@ class IconComponent {
                     : timer(200 * retryCount),
             }))
                 .subscribe({
-                next: (svgText) => {
-                    // Process SVG to add our attributes
-                    const processed = this.processSvgString(svgText);
-                    this.svgContent.set(this.sanitizer.bypassSecurityTrustHtml(processed));
+                next: (response) => {
+                    // Validate before anything touches the DOM: SPA deployments answer
+                    // missing asset paths with `index.html` and status 200 — that
+                    // document must be dropped, never injected. A text/html content-type
+                    // is rejected outright; everything else must parse as a standalone
+                    // <svg> document (see processSvgString).
+                    const contentType = response.headers.get('content-type') ?? '';
+                    const processed = contentType.includes('text/html')
+                        ? null
+                        : this.processSvgString(response.body ?? '');
+                    if (processed === null) {
+                        warnOnce(rawName, `[lc-icon] "${rawName}": ${path} returned non-SVG content` +
+                            (contentType ? ` (${contentType})` : '') +
+                            ' — dropped. In SPA deployments this is typically the index.html fallback for a missing asset.');
+                        this.renderFallback();
+                        return;
+                    }
+                    this.setTrustedSvg(processed);
                 },
                 error: () => {
                     // Asset missing or unreachable: render a visible placeholder so the
@@ -728,23 +777,53 @@ class IconComponent {
                     // already reported above; a known-but-unloadable name (e.g. offline,
                     // SSR, or unit tests where assets are not served) stays quiet here to
                     // avoid console noise.
-                    const processed = this.processSvgString(ICON_FALLBACK_SVG);
-                    this.svgContent.set(this.sanitizer.bypassSecurityTrustHtml(processed));
+                    this.renderFallback();
                 },
             });
         });
     }
     /**
-     * Process SVG string to add size, color, and accessibility attributes
+     * The single funnel to `bypassSecurityTrustHtml`. The bypass is only safe
+     * because every caller passes the output of {@link processSvgString}, which
+     * guarantees the markup is a parsed and re-serialized standalone `<svg>`
+     * document — never raw fetched text. Do NOT add callers that skip that
+     * validation, and do NOT "simplify" the gates away: without them, a SPA
+     * server's index.html fallback (status 200, text/html) gets injected into
+     * the page once per icon instance.
+     * @private
+     */
+    setTrustedSvg(processedSvg) {
+        this.svgContent.set(this.sanitizer.bypassSecurityTrustHtml(processedSvg));
+    }
+    /**
+     * Renders the visible "?" placeholder for anything that cannot be resolved
+     * to a real icon (unknown name, failed load, non-SVG response).
+     * @private
+     */
+    renderFallback() {
+        this.setTrustedSvg(this.processSvgString(ICON_FALLBACK_SVG) ?? ICON_FALLBACK_SVG);
+    }
+    /**
+     * Parse an SVG string and add size, color, and accessibility attributes.
+     *
+     * Returns `null` when the input is not a standalone SVG document — a parse
+     * error, or a non-`<svg>` root such as an HTML page. Callers must treat
+     * `null` as "do not render"; the raw input is never passed through.
      * @private
      */
     processSvgString(svgText) {
         // Parse as DOM to manipulate
         const parser = new DOMParser();
         const doc = parser.parseFromString(svgText, 'image/svg+xml');
-        const svg = doc.querySelector('svg');
-        if (!svg)
-            return svgText;
+        const svg = doc.documentElement;
+        // Reject anything that is not a clean, standalone <svg> document. On
+        // parse errors DOMParser yields a <parsererror> root (Firefox) or embeds
+        // a <parsererror> element in partially-parsed output (Chromium) — both
+        // must never reach the DOM.
+        if (svg.nodeName.toLowerCase() !== 'svg' ||
+            doc.getElementsByTagName('parsererror').length > 0) {
+            return null;
+        }
         // Set size
         const size = this.sizeInPixels();
         svg.setAttribute('width', size);
@@ -16730,5 +16809,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionContentDirective, AccordionGroupComponent, AccordionHeaderDirective, 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, ColorSidebarDark, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DescriptionListComponent, 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, ICON_ALIASES, ICON_NAMES, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PageLayoutComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PipelineComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeContentMaxWidth, 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, SplitPaneComponent, 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, isValidIconName, resolveFileIcon };
+export { AccordionComponent, AccordionContentDirective, AccordionGroupComponent, AccordionHeaderDirective, 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, ColorSidebarDark, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DescriptionListComponent, 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, ICON_ALIASES, ICON_NAMES, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PageLayoutComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PipelineComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeContentMaxWidth, 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, SplitPaneComponent, 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, isValidIconName, resetIconWarnings, resolveFileIcon };
 //# sourceMappingURL=life-cockpit-angular-ui-kit.mjs.map