@c8y/bootstrap 1024.5.1 → 1024.8.3

package/dist/icon-customization/custom-icon-bootstrap.d.ts

@@ -0,0 +1,50 @@
+/** Context path of the tenant-owned hosted app that stores icon definitions. */
+export declare const ICON_OPTIONS_CONTEXT_PATH = "public-icon-options";
+/** Filename of the icon manifest inside the hosted app. */
+export declare const ICON_OPTIONS_FILE = "icons.json";
+export type CustomIconDefinition = {
+    /** Unique name used as CSS class suffix. E.g. 'my-icon' → 'dlt-c8y-icon-my-icon' or 'c8y-icon-my-icon' */
+    name: string;
+    /** 'dlt' = single-color (dlt-c8y-icon-*), 'c8y' = duocolor (c8y-icon-*) */
+    family: IconFamily;
+    /** Display group in the icon selector */
+    category: string;
+    /** Indicates whether a secondary SVG file exists; used for URL-reference CSS without loading the file */
+    hasSecondary?: boolean;
+    /** When true, this icon replaces a built-in */
+    isOverride: boolean;
+    /** Name of the built-in icon being replaced */
+    overriddenIconName?: string;
+    /** Transient in-memory SVG content (never persisted to icons.json). When present,
+     * the CSS embeds it as a data URI — renders immediately, no dependency on the
+     * hosted app having propagated the file yet. */
+    svgContentPrimary?: string;
+    /** Transient in-memory light-layer SVG content — see svgContentPrimary. */
+    svgContentSecondary?: string;
+};
+export type CustomIconSet = {
+    icons: Array<CustomIconDefinition>;
+    lastModified?: string;
+};
+/** Determines CSS rendering strategy and class prefix for a custom icon. */
+export type IconFamily = 'dlt' | 'c8y';
+type FetchFn = (url: string, options?: RequestInit) => Promise<Pick<Response, 'status' | 'json'>>;
+export declare function getIconManifestPath(): string;
+export declare function getIconSet(fetchFn?: FetchFn): Promise<CustomIconSet>;
+/**
+ * Fetches custom icons from the tenant's hosted app and injects their CSS into
+ * the document before Angular starts — ensures icons render correctly on first paint.
+ * Called in parallel during bootstrap alongside branding and options loading.
+ *
+ * CSS is embedded in icons.json as a pre-built data-URI style string.
+ * C8Y hosted apps only reliably serve .json files — separate CSS/SVG files return 404.
+ */
+export declare function loadCustomIconStyles(fetchFn?: FetchFn): Promise<void>;
+/** Builds and injects the CSS for the given icon set. The style tag is always
+ * written — an empty set clears previously injected rules, so removed overrides
+ * revert to the built-in rendering immediately. */
+export declare function applyCustomIconStyles(set: CustomIconSet): void;
+export declare function convertRelativePathToAbsolutePath(relativePath: string): string;
+export declare function getIconFileName(icon: CustomIconDefinition, isSecondary?: boolean): string;
+export declare function buildCssForCustomIcon(icon: CustomIconDefinition, lastModified?: string): string;
+export {};

package/dist/icon-customization/custom-icon-bootstrap.js

@@ -0,0 +1,130 @@
+const STYLE_TAG_ID = 'c8y-custom-icons';
+/** Context path of the tenant-owned hosted app that stores icon definitions. */
+export const ICON_OPTIONS_CONTEXT_PATH = 'public-icon-options';
+/** Filename of the icon manifest inside the hosted app. */
+export const ICON_OPTIONS_FILE = 'icons.json';
+export function getIconManifestPath() {
+    return convertRelativePathToAbsolutePath(ICON_OPTIONS_FILE);
+}
+export async function getIconSet(fetchFn) {
+    const url = getIconManifestPath();
+    const response = await (fetchFn ?? fetch)(url, { cache: 'no-cache' });
+    if (response.status === 200) {
+        const set = await response.json();
+        return set;
+    }
+    if (response.status === 404) {
+        return { icons: [] };
+    }
+    throw new Error(`Failed to load custom icons: HTTP ${response.status}`);
+}
+/**
+ * Fetches custom icons from the tenant's hosted app and injects their CSS into
+ * the document before Angular starts — ensures icons render correctly on first paint.
+ * Called in parallel during bootstrap alongside branding and options loading.
+ *
+ * CSS is embedded in icons.json as a pre-built data-URI style string.
+ * C8Y hosted apps only reliably serve .json files — separate CSS/SVG files return 404.
+ */
+export async function loadCustomIconStyles(fetchFn) {
+    try {
+        const set = await getIconSet(fetchFn);
+        applyCustomIconStyles(set);
+    }
+    catch (e) {
+        // Network error or malformed JSON — non-fatal, app continues without custom icon CSS
+        console.warn('[c8y] Failed to load custom icon styles:', e);
+    }
+}
+/** Builds and injects the CSS for the given icon set. The style tag is always
+ * written — an empty set clears previously injected rules, so removed overrides
+ * revert to the built-in rendering immediately. */
+export function applyCustomIconStyles(set) {
+    const css = Array.isArray(set?.icons)
+        ? set.icons
+            .map(icon => buildCssForCustomIcon(icon, set.lastModified))
+            .filter(Boolean)
+            .join('\n')
+        : '';
+    injectStyleTag(css);
+}
+export function convertRelativePathToAbsolutePath(relativePath) {
+    const basePath = `/apps/public/${ICON_OPTIONS_CONTEXT_PATH}/`;
+    return `${basePath}${relativePath}`;
+}
+export function getIconFileName(icon, isSecondary = false) {
+    // Duocolor names already carry the 'c8y-' prefix — strip it so the family
+    // prefix isn't doubled in the file name (c8y-c8y-*.svg).
+    const name = icon.family === 'c8y' && icon.name.startsWith('c8y-') ? icon.name.slice(4) : icon.name;
+    return `${icon.family}-${name}-${isSecondary ? 'secondary' : 'primary'}.svg`;
+}
+/** Percent-encodes an SVG string for use in a CSS `url()` data URI. */
+function toDataUri(svg) {
+    return `data:image/svg+xml,${encodeURIComponent(svg.trim().replace(/\s+/g, ' '))}`;
+}
+/** Source for a mask-image url(): in-memory SVG content as a data URI when available,
+ * otherwise the (cache-busted) hosted-app file URL. */
+function iconSource(icon, isSecondary, lastModified) {
+    const content = isSecondary ? icon.svgContentSecondary : icon.svgContentPrimary;
+    if (content) {
+        return toDataUri(content);
+    }
+    let fileName = getIconFileName(icon, isSecondary);
+    if (lastModified) {
+        // Append lastModified as cache-buster query param to ensure updated icons are loaded after saving
+        fileName += `?v=${encodeURIComponent(lastModified)}`;
+    }
+    return convertRelativePathToAbsolutePath(fileName);
+}
+export function buildCssForCustomIcon(icon, lastModified) {
+    const absolutePathToPrimary = iconSource(icon, false, lastModified);
+    if (icon.family === 'dlt') {
+        const beforeBase = `  content:"";
+  display:inline-block;
+  width:1.1em;
+  height:1.1em;
+  line-height:1;
+  vertical-align:top;
+  background-color:currentColor;
+  mask-size:contain;
+  mask-repeat:no-repeat;
+  mask-position:center;
+  -webkit-mask-size:contain;
+  -webkit-mask-repeat:no-repeat;
+  -webkit-mask-position:center;`;
+        return `
+.c8y-icon.dlt-c8y-icon-${icon.name}::before{
+${beforeBase}
+  mask-image:url("${absolutePathToPrimary}");
+  -webkit-mask-image:url("${absolutePathToPrimary}");
+}`;
+    }
+    const cssName = icon.name.startsWith('c8y-') ? icon.name.slice(4) : icon.name;
+    const primaryCss = `
+.c8y-icon.c8y-icon-${cssName}::before{
+  mask-image:url("${absolutePathToPrimary}");
+  -webkit-mask-image:url("${absolutePathToPrimary}");
+}`;
+    if (!icon.hasSecondary) {
+        return primaryCss;
+    }
+    const absolutePathToSecondary = iconSource(icon, true, lastModified);
+    return `
+${primaryCss}
+
+.c8y-icon.c8y-icon-${cssName}::after{
+  mask-image:url("${absolutePathToSecondary}");
+  -webkit-mask-image:url("${absolutePathToSecondary}");
+  --_c8y-after-bg:currentColor;
+}`;
+}
+function injectStyleTag(css) {
+    let tag = document.getElementById(STYLE_TAG_ID);
+    if (!tag) {
+        tag = document.createElement('style');
+        tag.id = STYLE_TAG_ID;
+        document.head.appendChild(tag);
+    }
+    tag.textContent = css;
+}
+//# sourceMappingURL=custom-icon-bootstrap.js.map

package/dist/index.d.ts

@@ -4,3 +4,4 @@ export * from './login-check/login-check';
 export * from './plugins/plugins';
 export * from './providers/providers';
 export * from './metadata/metadata';
+export * from './icon-customization/custom-icon-bootstrap';

package/dist/index.js

@@ -4,4 +4,5 @@ export * from './login-check/login-check';
 export * from './plugins/plugins';
 export * from './providers/providers';
 export * from './metadata/metadata';
+export * from './icon-customization/custom-icon-bootstrap';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4CAA4C,CAAC"}

package/dist/metadata/metadata.js

@@ -1,8 +1,12 @@
 import { bootstrapGetRemotes, loadRemotes } from '../plugins/plugins';
 import { ensureLoggedInIfRequired } from '../login-check/login-check';
 import { loadOptions, applyOptions } from '../resolvers/options-resolver';
+import { loadCustomIconStyles } from '../icon-customization/custom-icon-bootstrap';
 export async function loadMetaDataAndPerformBootstrap(loadBootstrapModule) {
-    let options = await loadOptions();
+    let [options] = await Promise.all([
+        loadOptions(),
+        loadCustomIconStyles().catch(() => undefined) // non-critical, must not block bootstrap
+    ]);
     options = await applyOptions({
         ...options
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/bootstrap",
-  "version": "1024.5.1",
+  "version": "1024.8.3",
   "license": "Apache-2.0",
   "author": "Cumulocity",
   "description": "Bootstrap layer",