@meshmakers/octo-ui 3.3.910 → 3.3.930

package/fesm2022/meshmakers-octo-ui-branding.mjs

@@ -0,0 +1,1026 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, inject, signal, Injector, effect, makeEnvironmentProviders, DOCUMENT, RendererFactory2, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { TitleStrategy } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { firstValueFrom } from 'rxjs';
+import * as i1 from 'apollo-angular';
+import { gql } from 'apollo-angular';
+import * as i1$1 from '@progress/kendo-angular-icons';
+import { SVGIconModule } from '@progress/kendo-angular-icons';
+import { lightbulbOutlineIcon, brightnessContrastIcon } from '@progress/kendo-svg-icons';
+
+const OCTO_BRANDING_DEFAULTS = new InjectionToken('OCTO_BRANDING_DEFAULTS');
+const OCTO_BRANDING_FALLBACK_ASSETS = new InjectionToken('OCTO_BRANDING_FALLBACK_ASSETS');
+// Library defaults carry the Meshmakers brand mint (#65ceaf) as primary so
+// an app that opts into `provideOctoBranding` but never persists a
+// `SystemUIBranding` record renders with the publisher's identity rather
+// than vanilla Kendo. Mint is also non-aggressive in mixed contexts (no
+// alarm/error semantics like Kendo's tomato default), so tenant overrides
+// almost always read as an intentional rebrand rather than a workaround.
+// Apps override per-tenant via Settings page; the override completely
+// replaces these baselines.
+const NEUTRAL_LIGHT_THEME = {
+    primaryColor: '#65ceaf',
+    secondaryColor: '#5ac4be',
+    tertiaryColor: '#0b5c92',
+    neutralColor: '#6c757d',
+    backgroundColor: '#ffffff',
+    headerGradient: { startColor: '#ffffff', endColor: '#f8f9fa' },
+    footerGradient: { startColor: '#65ceaf', endColor: '#5ac4be' },
+};
+const NEUTRAL_DARK_THEME = {
+    primaryColor: '#65ceaf',
+    secondaryColor: '#5ac4be',
+    tertiaryColor: '#4a8eef',
+    neutralColor: '#94a3b8',
+    backgroundColor: '#1a1d20',
+    headerGradient: { startColor: '#1a1d20', endColor: '#2b2f33' },
+    footerGradient: { startColor: '#65ceaf', endColor: '#5ac4be' },
+};
+/**
+ * Library-shipped neutral fallback. Apps that don't supply their own defaults
+ * see a working but visually-neutral baseline ("configure me"), not a crash.
+ */
+const NEUTRAL_BRANDING_DEFAULTS = {
+    rtId: null,
+    appName: 'App',
+    appTitle: 'App',
+    headerLogoUrl: null,
+    footerLogoUrl: null,
+    faviconUrl: null,
+    lightTheme: NEUTRAL_LIGHT_THEME,
+    darkTheme: NEUTRAL_DARK_THEME,
+};
+const NEUTRAL_FALLBACK_ASSETS = {};
+
+const CreateBrandingDocumentDto = gql `
+    mutation createBranding($branding: SystemUIBrandingInput!) {
+  runtime {
+    systemUIBrandings {
+      create(entities: [$branding]) {
+        rtId
+        rtWellKnownName
+        appName
+        appTitle
+        headerLogo
+        footerLogo
+        favicon
+        lightTheme {
+          primaryColor
+          secondaryColor
+          tertiaryColor
+          neutralColor
+          backgroundColor
+          headerGradient {
+            startColor
+            endColor
+          }
+          footerGradient {
+            startColor
+            endColor
+          }
+        }
+        darkTheme {
+          primaryColor
+          secondaryColor
+          tertiaryColor
+          neutralColor
+          backgroundColor
+          headerGradient {
+            startColor
+            endColor
+          }
+          footerGradient {
+            startColor
+            endColor
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+class CreateBrandingDtoGQL extends i1.Mutation {
+    document = CreateBrandingDocumentDto;
+    constructor(apollo) {
+        super(apollo);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CreateBrandingDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CreateBrandingDtoGQL, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CreateBrandingDtoGQL, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Apollo }] });
+
+const GetBrandingDocumentDto = gql `
+    query getBranding {
+  runtime {
+    systemUIBranding(
+      first: 1
+      fieldFilter: [{attributePath: "rtWellKnownName", operator: EQUALS, comparisonValue: "Branding"}]
+    ) {
+      totalCount
+      items {
+        rtId
+        rtWellKnownName
+        appName
+        appTitle
+        headerLogo
+        footerLogo
+        favicon
+        lightTheme {
+          primaryColor
+          secondaryColor
+          tertiaryColor
+          neutralColor
+          backgroundColor
+          headerGradient {
+            startColor
+            endColor
+          }
+          footerGradient {
+            startColor
+            endColor
+          }
+        }
+        darkTheme {
+          primaryColor
+          secondaryColor
+          tertiaryColor
+          neutralColor
+          backgroundColor
+          headerGradient {
+            startColor
+            endColor
+          }
+          footerGradient {
+            startColor
+            endColor
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+class GetBrandingDtoGQL extends i1.Query {
+    document = GetBrandingDocumentDto;
+    constructor(apollo) {
+        super(apollo);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GetBrandingDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GetBrandingDtoGQL, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GetBrandingDtoGQL, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Apollo }] });
+
+const UpdateBrandingDocumentDto = gql `
+    mutation updateBranding($branding: SystemUIBrandingInputUpdate!) {
+  runtime {
+    systemUIBrandings {
+      update(entities: [$branding]) {
+        rtId
+        rtWellKnownName
+        appName
+        appTitle
+        headerLogo
+        footerLogo
+        favicon
+        lightTheme {
+          primaryColor
+          secondaryColor
+          tertiaryColor
+          neutralColor
+          backgroundColor
+          headerGradient {
+            startColor
+            endColor
+          }
+          footerGradient {
+            startColor
+            endColor
+          }
+        }
+        darkTheme {
+          primaryColor
+          secondaryColor
+          tertiaryColor
+          neutralColor
+          backgroundColor
+          headerGradient {
+            startColor
+            endColor
+          }
+          footerGradient {
+            startColor
+            endColor
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+class UpdateBrandingDtoGQL extends i1.Mutation {
+    document = UpdateBrandingDocumentDto;
+    constructor(apollo) {
+        super(apollo);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UpdateBrandingDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UpdateBrandingDtoGQL, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UpdateBrandingDtoGQL, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Apollo }] });
+
+const WELL_KNOWN_NAME = 'Branding';
+/**
+ * Per-tenant branding. Source of truth is the `SystemUIBranding`
+ * CK runtime entity (one record per tenant, `rtWellKnownName = 'Branding'`).
+ * Loaded via GraphQL, mirrored into a signal for consumers.
+ */
+class BrandingDataSource {
+    getBrandingGQL = inject(GetBrandingDtoGQL);
+    createBrandingGQL = inject(CreateBrandingDtoGQL);
+    updateBrandingGQL = inject(UpdateBrandingDtoGQL);
+    defaults = inject(OCTO_BRANDING_DEFAULTS);
+    state = signal({ ...this.defaults }, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    branding = this.state.asReadonly();
+    async load() {
+        // `no-cache` (not `network-only`): Apollo's `InMemoryCache` normalizes
+        // entities by `rtId`, but the singleton `RuntimeModelQuery` type has no
+        // id — cache writes for `runtime.systemUIBranding`
+        // clobber sibling fields (e.g. `runtime.basicTree` used by plant
+        // hierarchy + /location). `no-cache` fetches from network AND skips
+        // writing to cache, so /location keeps its hierarchy cache intact.
+        const result = await firstValueFrom(this.getBrandingGQL.fetch({ fetchPolicy: 'no-cache' }));
+        const item = result.data?.runtime?.systemUIBranding?.items?.[0];
+        if (!item) {
+            this.state.set({ ...this.defaults });
+            return;
+        }
+        this.state.set(await this.mapFromServer(item));
+    }
+    async save(update) {
+        const current = this.state();
+        const input = await this.buildInput(update);
+        const saved = current.rtId
+            ? await this.runUpdate(current.rtId, input)
+            : await this.runCreate(input);
+        const mapped = await this.mapFromServer(saved);
+        this.state.set(mapped);
+        return mapped;
+    }
+    async resetToDefaults() {
+        await this.save({
+            appName: this.defaults.appName,
+            appTitle: this.defaults.appTitle,
+            headerLogoFile: null,
+            footerLogoFile: null,
+            faviconFile: null,
+            lightTheme: this.defaults.lightTheme,
+            darkTheme: this.defaults.darkTheme,
+        });
+    }
+    async buildInput(update) {
+        const [headerLogo, footerLogo, favicon] = await Promise.all([
+            this.prepareBinary(update.headerLogoFile),
+            this.prepareBinary(update.footerLogoFile),
+            this.prepareBinary(update.faviconFile),
+        ]);
+        const input = {
+            rtWellKnownName: WELL_KNOWN_NAME,
+            appName: update.appName,
+            appTitle: update.appTitle,
+            lightTheme: this.paletteToInput(update.lightTheme),
+            darkTheme: update.darkTheme ? this.paletteToInput(update.darkTheme) : null,
+        };
+        // Tri-state: set the field only on replace (bytes) or clear (null);
+        // omit when undefined so the server keeps the current blob.
+        if (headerLogo !== undefined)
+            input.headerLogo = headerLogo;
+        if (footerLogo !== undefined)
+            input.footerLogo = footerLogo;
+        if (favicon !== undefined)
+            input.favicon = favicon;
+        return input;
+    }
+    async runCreate(input) {
+        const result = await firstValueFrom(this.createBrandingGQL.mutate({
+            variables: { branding: input },
+            fetchPolicy: 'no-cache',
+        }));
+        const item = result.data?.runtime?.systemUIBrandings?.create?.[0];
+        if (!item) {
+            throw new Error('createBranding returned no entity');
+        }
+        return item;
+    }
+    async runUpdate(rtId, input) {
+        const result = await firstValueFrom(this.updateBrandingGQL.mutate({
+            variables: { branding: { rtId, item: input } },
+            fetchPolicy: 'no-cache',
+        }));
+        const item = result.data?.runtime?.systemUIBrandings?.update?.[0];
+        if (!item) {
+            throw new Error('updateBranding returned no entity');
+        }
+        return item;
+    }
+    paletteToInput(palette) {
+        return {
+            primaryColor: palette.primaryColor,
+            secondaryColor: palette.secondaryColor,
+            tertiaryColor: palette.tertiaryColor,
+            neutralColor: palette.neutralColor,
+            backgroundColor: palette.backgroundColor,
+            headerGradient: {
+                startColor: palette.headerGradient.startColor,
+                endColor: palette.headerGradient.endColor,
+            },
+            footerGradient: {
+                startColor: palette.footerGradient.startColor,
+                endColor: palette.footerGradient.endColor,
+            },
+        };
+    }
+    async mapFromServer(item) {
+        // `Binary` attribute in the ckType surfaces as GraphQL `[Byte]` (raw byte
+        // array scalar). Client converts to a data URL locally for <img src>.
+        // No second HTTP round-trip like the `BinaryLinked`/`LargeBinaryInfo`
+        // pattern (which would return a downloadUri to fetch).
+        const [headerLogoUrl, footerLogoUrl, faviconUrl] = await Promise.all([
+            this.bytesToDataUrl(item.headerLogo),
+            this.bytesToDataUrl(item.footerLogo),
+            this.bytesToDataUrl(item.favicon),
+        ]);
+        return {
+            rtId: item.rtId,
+            appName: item.appName ?? this.defaults.appName,
+            appTitle: item.appTitle ?? this.defaults.appTitle,
+            headerLogoUrl: headerLogoUrl,
+            footerLogoUrl: footerLogoUrl,
+            faviconUrl: faviconUrl,
+            lightTheme: this.paletteFromServer(item.lightTheme, this.defaults.lightTheme) ??
+                this.defaults.lightTheme,
+            darkTheme: this.paletteFromServer(item.darkTheme, this.defaults.darkTheme ?? this.defaults.lightTheme),
+        };
+    }
+    // Defaults are passed in so light/dark palettes fall back to their own
+    // defaults instead of always using lightTheme defaults (matters when only
+    // partial dark palette comes from server).
+    paletteFromServer(palette, defaults) {
+        if (!palette)
+            return null;
+        const { headerGradient, footerGradient } = palette;
+        return {
+            primaryColor: palette.primaryColor ?? defaults.primaryColor,
+            secondaryColor: palette.secondaryColor ?? defaults.secondaryColor,
+            tertiaryColor: palette.tertiaryColor ?? defaults.tertiaryColor,
+            neutralColor: palette.neutralColor ?? defaults.neutralColor,
+            backgroundColor: palette.backgroundColor ?? defaults.backgroundColor,
+            headerGradient: headerGradient
+                ? { startColor: headerGradient.startColor, endColor: headerGradient.endColor }
+                : defaults.headerGradient,
+            footerGradient: footerGradient
+                ? { startColor: footerGradient.startColor, endColor: footerGradient.endColor }
+                : defaults.footerGradient,
+        };
+    }
+    /**
+     * Convert a byte array from a GraphQL `[Byte]` field into a data URL.
+     * Returns null for null/undefined/empty input. MIME type is detected from
+     * the first few bytes (magic numbers) so <img src> works without a
+     * server-provided content-type.
+     */
+    async bytesToDataUrl(bytes) {
+        if (!bytes || bytes.length === 0)
+            return null;
+        // Codegen types `[Byte]` entries as `number | null`; strip nulls.
+        const clean = bytes.filter((b) => typeof b === 'number');
+        if (clean.length === 0)
+            return null;
+        const uint8 = new Uint8Array(clean);
+        const mime = this.detectImageMime(uint8) ?? 'application/octet-stream';
+        try {
+            return await this.blobToDataUrl(new Blob([uint8], { type: mime }));
+        }
+        catch (error) {
+            console.warn('[BrandingDataSource] Failed to decode image bytes', error);
+            return null;
+        }
+    }
+    detectImageMime(bytes) {
+        if (bytes.length >= 8 && bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47)
+            return 'image/png';
+        if (bytes.length >= 3 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff)
+            return 'image/jpeg';
+        if (bytes.length >= 6 && bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46)
+            return 'image/gif';
+        if (bytes.length >= 12 && bytes[0] === 0x52 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x46 && bytes[8] === 0x57 && bytes[9] === 0x45 && bytes[10] === 0x42 && bytes[11] === 0x50)
+            return 'image/webp';
+        if (bytes.length >= 4 && bytes[0] === 0x00 && bytes[1] === 0x00 && bytes[2] === 0x01 && bytes[3] === 0x00)
+            return 'image/vnd.microsoft.icon';
+        if (bytes.length >= 5 && bytes[0] === 0x3c && bytes[1] === 0x3f && bytes[2] === 0x78 && bytes[3] === 0x6d && bytes[4] === 0x6c)
+            return 'image/svg+xml';
+        // UTF-8 BOM-less SVG starts with '<svg'
+        if (bytes.length >= 4 && bytes[0] === 0x3c && bytes[1] === 0x73 && bytes[2] === 0x76 && bytes[3] === 0x67)
+            return 'image/svg+xml';
+        return null;
+    }
+    blobToDataUrl(blob) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const result = reader.result;
+                if (typeof result === 'string') {
+                    resolve(result);
+                }
+                else {
+                    reject(new Error('FileReader returned non-string result'));
+                }
+            };
+            reader.onerror = () => reject(reader.error ?? new Error('FileReader failed'));
+            reader.readAsDataURL(blob);
+        });
+    }
+    /**
+     * Three-value binary resolution for save():
+     * - `null` → caller wants the asset cleared; forward null to the server.
+     * - `undefined` → caller left the slot untouched; omit the field so the
+     *   server keeps the existing blob.
+     * - `File` → caller uploaded a new asset; serialize to byte array.
+     */
+    async prepareBinary(file) {
+        if (file === null)
+            return null;
+        if (file === undefined)
+            return undefined;
+        const buffer = await file.arrayBuffer();
+        return Array.from(new Uint8Array(buffer));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BrandingDataSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BrandingDataSource, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BrandingDataSource, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const OCTO_TITLE_TRANSLATOR = new InjectionToken('OCTO_TITLE_TRANSLATOR');
+/**
+ * `TitleStrategy` that composes `<branding.appTitle> | <route.breadcrumb>`
+ * into `document.title` on every navigation, and re-applies on
+ * `BrandingDataSource.branding()` changes (e.g. after Settings save).
+ *
+ * Wire as the application's `TitleStrategy`:
+ * ```ts
+ * { provide: TitleStrategy, useExisting: AppTitleService }
+ * ```
+ *
+ * Optional translation of the breadcrumb key is supplied through
+ * {@link OCTO_TITLE_TRANSLATOR}; without it the key from `route.data` is used
+ * as-is.
+ *
+ * `BrandingDataSource` is resolved lazily via `injector.get()` rather than
+ * field-injected. The router constructs `TitleStrategy` eagerly during
+ * `APP_INITIALIZER`, before the host's tenant config has loaded. A direct
+ * field-inject of `BrandingDataSource` here would chain into Apollo's
+ * factory, which reads `tenantId` while it is still `undefined` and bakes
+ * `/tenants/undefined/GraphQL` into the request URI. Lazy resolution defers
+ * the chain to the first navigation, by which time config is loaded.
+ */
+class AppTitleService extends TitleStrategy {
+    title = inject(Title);
+    translator = inject(OCTO_TITLE_TRANSLATOR, {
+        optional: true,
+    });
+    injector = inject(Injector);
+    lastRouterState;
+    brandingEffectInitialized = false;
+    updateTitle(routerState) {
+        this.lastRouterState = routerState;
+        this.applyTitle();
+        this.ensureBrandingSubscription();
+    }
+    ensureBrandingSubscription() {
+        if (this.brandingEffectInitialized)
+            return;
+        this.brandingEffectInitialized = true;
+        effect(() => this.applyTitle(), { injector: this.injector });
+    }
+    applyTitle() {
+        if (!this.lastRouterState)
+            return;
+        const data = this.injector.get(BrandingDataSource).branding();
+        const baseTitle = data.appTitle || data.appName;
+        const breadcrumbKey = this.getDeepestBreadcrumb(this.lastRouterState.root);
+        if (breadcrumbKey) {
+            const resolved = this.translator
+                ? this.translator(breadcrumbKey)
+                : breadcrumbKey;
+            this.title.setTitle(`${baseTitle} | ${resolved}`);
+        }
+        else {
+            this.title.setTitle(baseTitle);
+        }
+    }
+    getDeepestBreadcrumb(route) {
+        let breadcrumb = typeof route.data['breadcrumb'] === 'string'
+            ? route.data['breadcrumb']
+            : undefined;
+        for (const child of route.children) {
+            const childBreadcrumb = this.getDeepestBreadcrumb(child);
+            if (childBreadcrumb) {
+                breadcrumb = childBreadcrumb;
+            }
+        }
+        return breadcrumb;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppTitleService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppTitleService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppTitleService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Registers branding tokens, defaults, fallback assets, and (by default) the
+ * `TitleStrategy` that drives `document.title` from the branding signal.
+ *
+ * Does **not** load the tenant's branding record. Loading must happen after
+ * authentication is settled (Apollo's URI bakes in the tenant ID at the time
+ * the first request fires; loading too early targets
+ * `/tenants/undefined/GraphQL`). The host shell typically does:
+ *
+ * ```ts
+ * inject(BrandingApplicationService); // start the apply effect
+ * effect(() => {
+ *   if (this.auth.isAuthenticated()) {
+ *     this.brandingDataSource.load();
+ *   }
+ * });
+ * ```
+ *
+ * `BrandingApplicationService` is `providedIn: 'root'`, so the host only has
+ * to inject it once to activate the apply effect.
+ */
+function provideOctoBranding(config) {
+    const merged = {
+        ...NEUTRAL_BRANDING_DEFAULTS,
+        ...(config?.defaults ?? {}),
+        lightTheme: {
+            ...NEUTRAL_BRANDING_DEFAULTS.lightTheme,
+            ...(config?.defaults?.lightTheme ?? {}),
+        },
+        darkTheme: config?.defaults?.darkTheme === null
+            ? null
+            : {
+                ...(NEUTRAL_BRANDING_DEFAULTS.darkTheme ??
+                    NEUTRAL_BRANDING_DEFAULTS.lightTheme),
+                ...(config?.defaults?.darkTheme ?? {}),
+            },
+    };
+    const providers = [
+        { provide: OCTO_BRANDING_DEFAULTS, useValue: merged },
+        {
+            provide: OCTO_BRANDING_FALLBACK_ASSETS,
+            useValue: config?.fallbackAssets ?? NEUTRAL_FALLBACK_ASSETS,
+        },
+    ];
+    if (config?.registerTitleStrategy !== false) {
+        providers.push({ provide: TitleStrategy, useExisting: AppTitleService });
+    }
+    return makeEnvironmentProviders(providers);
+}
+
+/** Convenience barrel re-exporting branding model interfaces from ./models/. */
+
+/**
+ * Light/dark mode toggle backed by `localStorage` + `<html data-theme="...">`.
+ * Pure mode toggle; palette generation lives in `BrandingApplicationService`.
+ */
+class ThemeService {
+    document = inject(DOCUMENT);
+    renderer;
+    isDarkSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDarkSignal" }] : /* istanbul ignore next */ []));
+    isDark = this.isDarkSignal.asReadonly();
+    constructor() {
+        this.renderer = inject(RendererFactory2).createRenderer(null, null);
+        this.isDarkSignal.set(this.getInitialThemeIsDark());
+        this.applyTheme();
+    }
+    toggleTheme() {
+        this.setDark(!this.isDarkSignal());
+    }
+    setDark(isDark) {
+        this.isDarkSignal.set(isDark);
+        try {
+            this.document.defaultView?.localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        }
+        catch {
+            // localStorage may be unavailable (private mode, SSR) — degrade silently.
+        }
+        this.applyTheme();
+    }
+    applyTheme() {
+        const html = this.document.documentElement;
+        this.renderer.setAttribute(html, 'data-theme', this.isDarkSignal() ? 'dark' : 'light');
+    }
+    getInitialThemeIsDark() {
+        let stored = null;
+        try {
+            stored = this.document.defaultView?.localStorage.getItem('theme') ?? null;
+        }
+        catch {
+            stored = null;
+        }
+        if (stored === 'dark')
+            return true;
+        if (stored === 'light')
+            return false;
+        return (this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)')
+            .matches ?? false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const DEFAULT_THEME_SWITCHER_MESSAGES = {
+    toggleToDark: 'Switch to dark mode',
+    toggleToLight: 'Switch to light mode',
+    unavailable: 'Theme switching is unavailable for this tenant',
+};
+
+class ThemeSwitcherComponent {
+    messages = input(DEFAULT_THEME_SWITCHER_MESSAGES, ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    themeService = inject(ThemeService);
+    branding = inject(BrandingDataSource);
+    isDark = this.themeService.isDark;
+    available = computed(() => this.branding.branding().darkTheme !== null, ...(ngDevMode ? [{ debugName: "available" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => {
+        if (!this.available())
+            return this.messages().unavailable;
+        return this.isDark()
+            ? this.messages().toggleToLight
+            : this.messages().toggleToDark;
+    }, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    lightIcon = lightbulbOutlineIcon;
+    darkIcon = brightnessContrastIcon;
+    onToggle() {
+        if (!this.available())
+            return;
+        this.themeService.setDark(!this.isDark());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ThemeSwitcherComponent, isStandalone: true, selector: "mm-theme-switcher", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  type=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"isDark()\"\n  [disabled]=\"!available()\"\n  (click)=\"onToggle()\"\n>\n  <kendo-svg-icon [icon]=\"isDark() ? lightIcon : darkIcon\" />\n</button>\n", styles: [":host{display:inline-flex}button{appearance:none;background:transparent;border:0;padding:var(--kendo-spacing-2);cursor:pointer;color:inherit}button[disabled]{cursor:not-allowed;opacity:.5}button:focus-visible{outline:2px solid currentColor;outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i1$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-theme-switcher', standalone: true, imports: [SVGIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"isDark()\"\n  [disabled]=\"!available()\"\n  (click)=\"onToggle()\"\n>\n  <kendo-svg-icon [icon]=\"isDark() ? lightIcon : darkIcon\" />\n</button>\n", styles: [":host{display:inline-flex}button{appearance:none;background:transparent;border:0;padding:var(--kendo-spacing-2);cursor:pointer;color:inherit}button[disabled]{cursor:not-allowed;opacity:.5}button:focus-visible{outline:2px solid currentColor;outline-offset:2px}\n"] }]
+        }], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
+
+/**
+ * Writes tenant branding (Kendo color vars, gradients, favicon, document
+ * title) inline on <html>. An effect re-applies the correct palette when
+ * either the theme mode or the branding data changes, so mode toggles after
+ * a save don't leave stale inline values behind.
+ */
+class BrandingApplicationService {
+    document = inject(DOCUMENT);
+    themeService = inject(ThemeService);
+    brandingDataSource = inject(BrandingDataSource);
+    fallbackAssets = inject(OCTO_BRANDING_FALLBACK_ASSETS, {
+        optional: true,
+    });
+    // Cleared before every apply so unset palette fields fall through to the
+    // static layer-2 brand-default instead of sticking from a prior save.
+    static BRANDED_VARS = [
+        ...['primary', 'secondary', 'tertiary'].flatMap((c) => [
+            `--kendo-color-${c}`,
+            `--kendo-color-${c}-hover`,
+            `--kendo-color-${c}-active`,
+            `--kendo-color-on-${c}`,
+            `--kendo-color-${c}-subtle`,
+            `--kendo-color-${c}-subtle-hover`,
+            `--kendo-color-${c}-subtle-active`,
+            `--kendo-color-${c}-emphasis`,
+            `--kendo-color-${c}-on-subtle`,
+            `--kendo-color-${c}-on-surface`,
+        ]),
+        '--kendo-color-base',
+        '--kendo-color-base-hover',
+        '--kendo-color-base-active',
+        '--kendo-color-on-base',
+        '--kendo-color-base-subtle',
+        '--kendo-color-base-subtle-hover',
+        '--kendo-color-base-subtle-active',
+        '--kendo-color-base-emphasis',
+        '--kendo-color-base-on-subtle',
+        '--kendo-color-subtle',
+        '--kendo-color-border',
+        '--kendo-color-border-alt',
+        '--kendo-color-app-surface',
+        '--kendo-color-on-app-surface',
+        '--app-header-gradient-start',
+        '--app-header-gradient-end',
+        '--app-header-text',
+        '--app-footer-gradient-start',
+        '--app-footer-gradient-end',
+        '--app-footer-text',
+    ];
+    constructor() {
+        effect(() => {
+            const isDark = this.themeService.isDark();
+            const data = this.brandingDataSource.branding();
+            // Tenant disabled dark-theme override (single-theme app) — force light
+            // mode. Without this guard a stale 'dark' in localStorage (or system
+            // prefers-color-scheme) carries over and we'd render light palette
+            // values into html[data-theme='dark']: surface ladder collapses to
+            // white and text becomes unreadable. ThemeSwitcherComponent also
+            // disables the toggle when darkTheme is null so the user can't
+            // re-enter this state interactively.
+            if (data.darkTheme === null && isDark) {
+                this.themeService.setDark(false);
+                return;
+            }
+            const palette = isDark ? data.darkTheme : data.lightTheme;
+            this.apply(data, palette);
+        });
+    }
+    apply(data, palette) {
+        this.clearInlineBrandingVars();
+        this.applyThemeColors(palette);
+        this.applyFavicon(data.faviconUrl);
+        // document.title is owned by AppTitleService (TitleStrategy) — it composes
+        // `${branding().appName} | ${routeBreadcrumb}` per navigation. Setting
+        // title here would race AppTitleService and overwrite the route portion
+        // (e.g. /settings would flicker from "TecLink | Settings" to just "TecLink"
+        // when branding finishes loading). The tab updates on next navigation
+        // after a tenant edits appName/appTitle in Settings — acceptable trade-off.
+    }
+    applyThemeColors(palette) {
+        const root = this.document.documentElement;
+        if (palette.primaryColor) {
+            this.applyColorPalette(root, 'primary', palette.primaryColor);
+        }
+        if (palette.secondaryColor) {
+            this.applyColorPalette(root, 'secondary', palette.secondaryColor);
+        }
+        if (palette.tertiaryColor) {
+            this.applyColorPalette(root, 'tertiary', palette.tertiaryColor);
+        }
+        if (palette.neutralColor) {
+            this.applyNeutralColors(root, palette.neutralColor);
+        }
+        this.setIf(root, '--app-header-gradient-start', palette.headerGradient.startColor);
+        this.setIf(root, '--app-header-gradient-end', palette.headerGradient.endColor);
+        if (palette.headerGradient.startColor) {
+            root.style.setProperty('--app-header-text', this.getContrastColor(palette.headerGradient.startColor));
+        }
+        this.setIf(root, '--app-footer-gradient-start', palette.footerGradient.startColor);
+        this.setIf(root, '--app-footer-gradient-end', palette.footerGradient.endColor);
+        if (palette.footerGradient.startColor) {
+            root.style.setProperty('--app-footer-text', this.getContrastColor(palette.footerGradient.startColor));
+        }
+        if (palette.backgroundColor) {
+            // Only write the root surface — --kendo-color-surface / -surface-alt /
+            // -base / -border are aliased in styles.scss to --color-surface-* shades
+            // that derive from --color-surface (= app-surface) via mode-aware
+            // color-mix. Writing them directly here would collapse the shade ladder
+            // (all surfaces flat = same colour → transparent-looking components).
+            root.style.setProperty('--kendo-color-app-surface', palette.backgroundColor);
+            // Contrast text on the surface — without this, a dark backgroundColor in
+            // light mode (or vice versa) renders text against an inverted surface
+            // and becomes unreadable. --color-on-surface in styles.scss aliases this.
+            root.style.setProperty('--kendo-color-on-app-surface', this.getContrastColor(palette.backgroundColor));
+        }
+    }
+    applyFavicon(faviconUrl) {
+        const href = faviconUrl ?? this.fallbackAssets?.favicon;
+        if (!href)
+            return;
+        let link = this.document.querySelector("link[rel~='icon']");
+        if (!link) {
+            link = this.document.createElement('link');
+            link.rel = 'icon';
+            this.document.head.appendChild(link);
+        }
+        link.href = href;
+    }
+    clearInlineBrandingVars() {
+        const root = this.document.documentElement;
+        for (const name of BrandingApplicationService.BRANDED_VARS) {
+            root.style.removeProperty(name);
+        }
+    }
+    setIf(root, name, value) {
+        if (value)
+            root.style.setProperty(name, value);
+    }
+    applyColorPalette(root, colorName, baseColor) {
+        const palette = this.generatePalette(baseColor);
+        root.style.setProperty(`--kendo-color-${colorName}`, palette[40]);
+        root.style.setProperty(`--kendo-color-${colorName}-hover`, palette[50]);
+        root.style.setProperty(`--kendo-color-${colorName}-active`, palette[60]);
+        root.style.setProperty(`--kendo-color-on-${colorName}`, this.getContrastColor(palette[40]));
+        root.style.setProperty(`--kendo-color-${colorName}-subtle`, palette[90]);
+        root.style.setProperty(`--kendo-color-${colorName}-subtle-hover`, palette[80]);
+        root.style.setProperty(`--kendo-color-${colorName}-subtle-active`, palette[70]);
+        root.style.setProperty(`--kendo-color-${colorName}-emphasis`, palette[70]);
+        root.style.setProperty(`--kendo-color-${colorName}-on-subtle`, palette[20]);
+        root.style.setProperty(`--kendo-color-${colorName}-on-surface`, palette[40]);
+    }
+    applyNeutralColors(root, baseColor) {
+        const palette = this.generatePalette(baseColor);
+        root.style.setProperty('--kendo-color-base', palette[95]);
+        root.style.setProperty('--kendo-color-base-hover', palette[90]);
+        root.style.setProperty('--kendo-color-base-active', palette[80]);
+        root.style.setProperty('--kendo-color-on-base', palette[20]);
+        root.style.setProperty('--kendo-color-base-subtle', palette[90]);
+        root.style.setProperty('--kendo-color-base-subtle-hover', palette[80]);
+        root.style.setProperty('--kendo-color-base-subtle-active', palette[70]);
+        root.style.setProperty('--kendo-color-base-emphasis', palette[70]);
+        root.style.setProperty('--kendo-color-base-on-subtle', palette[20]);
+        root.style.setProperty('--kendo-color-subtle', palette[40]);
+        root.style.setProperty('--kendo-color-border', palette[80]);
+        root.style.setProperty('--kendo-color-border-alt', palette[70]);
+    }
+    // ---------------------------------------------------------------------------
+    // Palette generation (ported from energy-community theme.service.ts)
+    // ---------------------------------------------------------------------------
+    generatePalette(baseColor) {
+        const rgb = this.hexToRgb(baseColor);
+        const hsl = this.rgbToHsl(rgb.r, rgb.g, rgb.b);
+        const palette = {
+            0: '#000000',
+            100: '#ffffff',
+        };
+        palette[40] = baseColor;
+        const baseL = hsl.l;
+        const baseS = hsl.s;
+        const baseH = hsl.h;
+        const lighten = (amount) => Math.min(1, baseL + amount);
+        const darken = (amount) => Math.max(0, baseL - amount);
+        palette[50] = this.hslToHex(baseH, Math.min(1, baseS * 1.15), darken(0.12));
+        palette[60] = this.hslToHex(baseH, Math.min(1, baseS * 1.08), darken(0.08));
+        palette[70] = this.hslToHex(baseH, Math.max(0.25, baseS * 0.85), lighten(0.08));
+        palette[80] = this.hslToHex(baseH, Math.max(0.15, baseS * 0.6), lighten(0.22));
+        palette[90] = this.hslToHex(baseH, Math.max(0.08, baseS * 0.35), lighten(0.38));
+        palette[95] = this.hslToHex(baseH, Math.max(0.04, baseS * 0.2), lighten(0.43));
+        palette[98] = this.hslToHex(baseH, Math.max(0.02, baseS * 0.12), lighten(0.46));
+        palette[99] = this.hslToHex(baseH, Math.max(0.01, baseS * 0.08), lighten(0.47));
+        palette[10] = this.hslToHex(baseH, Math.min(1, baseS * 1.4), darken(0.72));
+        palette[20] = this.hslToHex(baseH, Math.min(1, baseS * 1.25), darken(0.62));
+        palette[25] = this.hslToHex(baseH, Math.min(1, baseS * 1.2), darken(0.57));
+        palette[30] = this.hslToHex(baseH, Math.min(1, baseS * 1.15), darken(0.52));
+        palette[35] = this.hslToHex(baseH, Math.min(1, baseS * 1.1), darken(0.42));
+        return palette;
+    }
+    hexToRgb(color) {
+        const hexResult = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+        if (hexResult) {
+            return {
+                r: parseInt(hexResult[1], 16),
+                g: parseInt(hexResult[2], 16),
+                b: parseInt(hexResult[3], 16),
+            };
+        }
+        const rgbResult = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(color);
+        if (rgbResult) {
+            return {
+                r: parseInt(rgbResult[1], 10),
+                g: parseInt(rgbResult[2], 10),
+                b: parseInt(rgbResult[3], 10),
+            };
+        }
+        return { r: 0, g: 0, b: 0 };
+    }
+    rgbToHsl(r, g, b) {
+        const rn = r / 255;
+        const gn = g / 255;
+        const bn = b / 255;
+        const max = Math.max(rn, gn, bn);
+        const min = Math.min(rn, gn, bn);
+        let h = 0;
+        let s = 0;
+        const l = (max + min) / 2;
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case rn:
+                    h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
+                    break;
+                case gn:
+                    h = ((bn - rn) / d + 2) / 6;
+                    break;
+                case bn:
+                    h = ((rn - gn) / d + 4) / 6;
+                    break;
+            }
+        }
+        return { h, s, l };
+    }
+    hslToHex(h, s, l) {
+        let r;
+        let g;
+        let b;
+        if (s === 0) {
+            r = l;
+            g = l;
+            b = l;
+        }
+        else {
+            const hue2rgb = (p, q, t) => {
+                let tn = t;
+                if (tn < 0)
+                    tn += 1;
+                if (tn > 1)
+                    tn -= 1;
+                if (tn < 1 / 6)
+                    return p + (q - p) * 6 * tn;
+                if (tn < 1 / 2)
+                    return q;
+                if (tn < 2 / 3)
+                    return p + (q - p) * (2 / 3 - tn) * 6;
+                return p;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        return this.rgbToHex(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255));
+    }
+    rgbToHex(r, g, b) {
+        return ('#' +
+            [r, g, b]
+                .map((x) => {
+                const hex = Math.round(x).toString(16);
+                return hex.length === 1 ? '0' + hex : hex;
+            })
+                .join(''));
+    }
+    getContrastColor(hex) {
+        const rgb = this.hexToRgb(hex);
+        const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+        return brightness > 128 ? '#000000' : '#ffffff';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BrandingApplicationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BrandingApplicationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BrandingApplicationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+function createBrandingStub(overrides) {
+    const branding = signal({
+        ...NEUTRAL_BRANDING_DEFAULTS,
+        ...(overrides ?? {}),
+    }, ...(ngDevMode ? [{ debugName: "branding" }] : /* istanbul ignore next */ []));
+    return {
+        branding,
+        load: () => Promise.resolve(),
+        save: () => Promise.resolve(branding()),
+        resetToDefaults: () => Promise.resolve(),
+    };
+}
+/** Convenience: returns a Provider that injects the stub as BrandingDataSource. */
+function provideBrandingTesting(stub = createBrandingStub()) {
+    return { provide: BrandingDataSource, useValue: stub };
+}
+
+// Public API of the branding feature folder. Re-exported by
+// octo-ui/src/public-api.ts to expose under @meshmakers/octo-ui.
+//
+// Note: the heavy admin-only `SettingsPageComponent` (a.k.a.
+// `mm-branding-settings`) and `BRANDING_ROUTES` live in the dedicated
+// secondary entry point `@meshmakers/octo-ui/branding-settings` so apps that
+// only need the lightweight branding pieces (logo, theme switcher, services)
+// don't pull in form/Kendo modules they don't use.
+// Configuration & tokens
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppTitleService, BrandingApplicationService, BrandingDataSource, DEFAULT_THEME_SWITCHER_MESSAGES, NEUTRAL_BRANDING_DEFAULTS, NEUTRAL_FALLBACK_ASSETS, OCTO_BRANDING_DEFAULTS, OCTO_BRANDING_FALLBACK_ASSETS, OCTO_TITLE_TRANSLATOR, ThemeService, ThemeSwitcherComponent, createBrandingStub, provideBrandingTesting, provideOctoBranding };
+//# sourceMappingURL=meshmakers-octo-ui-branding.mjs.map