ng-hub-ui-skeleton 22.2.0

package/fesm2022/ng-hub-ui-skeleton.mjs

@@ -0,0 +1,754 @@
+import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, computed, Injectable, input, PLATFORM_ID, signal, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+
+/**
+ * Bundled preset catalogue used by the skeleton library.
+ */
+const HUB_SKELETON_DEFAULT_PRESETS = [
+    {
+        name: 'card',
+        description: 'Generic content card with media, title and body lines.',
+        template: 'stack(gap:16)>block(height:{{mediaHeight}},radius:{{radius}})+line(height:{{titleHeight}},width:{{titleWidth}})+stack(gap:{{bodyGap}})>line(height:{{lineHeight}},width:100%)*{{rows}}+line(height:{{lineHeight}},width:{{lastLineWidth}})',
+        defaults: {
+            mediaHeight: 180,
+            radius: 18,
+            titleHeight: 18,
+            titleWidth: '56%',
+            bodyGap: 10,
+            lineHeight: 12,
+            rows: 2,
+            lastLineWidth: '76%'
+        },
+        variants: {
+            compact: {
+                defaults: {
+                    mediaHeight: 120,
+                    radius: 14,
+                    titleHeight: 16,
+                    bodyGap: 8,
+                    lineHeight: 10,
+                    rows: 1,
+                    lastLineWidth: '68%'
+                }
+            }
+        }
+    },
+    {
+        name: 'list-item',
+        description: 'Avatar row with title and subtitle lines.',
+        template: 'stack(direction:row,gap:12,align:center)>circle(size:{{avatarSize}})+stack(gap:{{gap}},grow:1)>line(height:{{titleHeight}},width:{{titleWidth}})+line(height:{{lineHeight}},width:{{lineWidth}})',
+        defaults: {
+            avatarSize: 44,
+            gap: 8,
+            titleHeight: 14,
+            titleWidth: '42%',
+            lineHeight: 10,
+            lineWidth: '68%'
+        },
+        variants: {
+            compact: {
+                defaults: {
+                    avatarSize: 36,
+                    gap: 6,
+                    titleHeight: 12,
+                    lineHeight: 8
+                }
+            }
+        }
+    },
+    {
+        name: 'table-row',
+        description: 'Grid row that adapts to the configured column count.',
+        template: 'grid(columns:{{columns}},gap:12|md=16)>line(height:{{lineHeight}},width:{{cellWidth}})*{{columns}}',
+        defaults: {
+            columns: 4,
+            lineHeight: 12,
+            cellWidth: '88%'
+        }
+    },
+    {
+        name: 'detail-view',
+        description: 'Two-column detail layout with hero block and metadata rows.',
+        template: 'grid(columns:1|lg=2,gap:20)>block(height:220|lg=280,radius:20)+stack(gap:14)>line(height:20,width:48%)+line(height:12,width:78%)+line(height:12,width:92%)+line(height:12,width:70%)+grid(columns:2,gap:12)>block(height:64)*4'
+    },
+    {
+        name: 'form-section',
+        description: 'Grouped form controls with header and responsive fields.',
+        template: 'stack(gap:18)>line(height:18,width:32%)+grid(columns:1|md=2,gap:14)>stack(gap:8)>line(height:10,width:28%)+block(height:44,radius:12)*{{fields}}',
+        defaults: {
+            fields: 4
+        }
+    },
+    {
+        name: 'dashboard-widget',
+        description: 'Panel header with metric rows and footer actions.',
+        template: 'stack(gap:16)>stack(direction:row,gap:12,justify:space-between,align:center)>line(height:16,width:36%)+circle(size:20)+block(height:132,radius:18)+grid(columns:2,gap:12)>line(height:12,width:72%)*4'
+    },
+    {
+        name: 'stat-card',
+        description: 'Metric summary card with title, large value and trend.',
+        template: 'stack(gap:14)>line(height:12,width:34%)+line(height:34,width:44%)+line(height:10,width:28%)+block(height:44,radius:14)'
+    },
+    {
+        name: 'chart-panel',
+        description: 'Chart block with legend rows.',
+        template: 'stack(gap:16)>stack(direction:row,gap:12,justify:space-between,align:center)>line(height:16,width:40%)+line(height:10,width:18%)+block(height:220,radius:18)+grid(columns:2,gap:10)>stack(direction:row,gap:8,align:center)>circle(size:10)+line(height:10,width:60%)*4'
+    },
+    {
+        name: 'profile-summary',
+        description: 'Profile card with avatar, identity and summary metrics.',
+        template: 'stack(gap:16,align:center)>circle(size:88)+line(height:18,width:46%)+line(height:12,width:62%)+grid(columns:3,gap:12)>block(height:56,radius:14)*3'
+    },
+    {
+        name: 'master-detail',
+        description: 'List panel and detail panel skeleton pair.',
+        template: 'grid(columns:1|lg=3,gap:20)>stack(gap:12)>list-item*4+stack(gap:16)>block(height:220,radius:18)+line(height:18,width:42%)+line(height:12,width:92%)*3+line(height:12,width:70%)'
+    },
+    {
+        name: 'kanban-card',
+        description: 'Compact board card with title, metadata and footer chips.',
+        template: 'stack(gap:12)>line(height:14,width:58%)+line(height:10,width:80%)+stack(direction:row,gap:8)>block(height:24,width:76,radius:999)+block(height:24,width:92,radius:999)'
+    },
+    {
+        name: 'feed-item',
+        description: 'Activity feed row with avatar and content snippets.',
+        template: 'stack(direction:row,gap:12,align:flex-start)>circle(size:40)+stack(gap:8,grow:1)>line(height:12,width:34%)+line(height:12,width:94%)+line(height:12,width:74%)'
+    },
+    {
+        name: 'search-result',
+        description: 'Search result card with title, metadata and excerpt.',
+        template: 'stack(gap:12)>line(height:18,width:56%)+stack(direction:row,gap:10)>line(height:10,width:20%)+line(height:10,width:18%)+line(height:10,width:24%)+line(height:12,width:92%)*2+line(height:12,width:76%)'
+    },
+    {
+        name: 'table-toolbar',
+        description: 'Toolbar with title, filters and actions.',
+        template: 'grid(columns:1|md=2,gap:16,align:center)>line(height:18,width:38%)+stack(direction:row,gap:10,justify:flex-end)>block(height:38,width:180,radius:12)+block(height:38,width:110,radius:12)+block(height:38,width:92,radius:12)'
+    },
+    {
+        name: 'filter-bar',
+        description: 'Row of filter controls with mobile stacking.',
+        template: 'grid(columns:1|md=4,gap:12)>block(height:40,radius:12)*{{filters}}',
+        defaults: {
+            filters: 4
+        }
+    },
+    {
+        name: 'empty-state-skeleton',
+        description: 'Illustrative empty-state placeholder with title and actions.',
+        template: 'stack(gap:18,align:center)>block(height:160,width:240,radius:28)+line(height:18,width:36%)+line(height:12,width:64%)+line(height:12,width:52%)+stack(direction:row,gap:12)>block(height:40,width:120,radius:999)+block(height:40,width:84,radius:999)'
+    }
+];
+
+/** Multi-provider token for consumer-defined skeleton preset groups. */
+const HUB_SKELETON_PRESETS = new InjectionToken('HUB_SKELETON_PRESETS', {
+    factory: () => []
+});
+/**
+ * Registers one or more custom presets for the active injector tree.
+ *
+ * @param presets Custom presets to append to the bundled catalogue.
+ * @returns Environment providers ready for app-level registration.
+ */
+function provideHubSkeletonPresets(presets) {
+    return makeEnvironmentProviders([
+        {
+            provide: HUB_SKELETON_PRESETS,
+            multi: true,
+            useValue: presets
+        }
+    ]);
+}
+/**
+ * Resolves the full preset catalogue available to the current injector.
+ */
+class HubSkeletonPresetRegistryService {
+    customPresetGroups = inject(HUB_SKELETON_PRESETS);
+    /** All presets merged by name, where later entries override earlier ones. */
+    presets = computed(() => {
+        const merged = new Map();
+        for (const preset of HUB_SKELETON_DEFAULT_PRESETS) {
+            merged.set(preset.name, preset);
+        }
+        for (const presetGroup of this.customPresetGroups) {
+            for (const preset of presetGroup) {
+                merged.set(preset.name, preset);
+            }
+        }
+        return merged;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    /**
+     * Returns a single preset by name.
+     *
+     * @param name Preset identifier.
+     * @returns Matching preset, when available.
+     */
+    getPreset(name) {
+        return this.presets().get(name);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSkeletonPresetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSkeletonPresetRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSkeletonPresetRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const BUILTIN_NODE_TYPES = new Set(['line', 'block', 'circle', 'stack', 'grid']);
+const BREAKPOINT_ORDER = ['base', 'sm', 'md', 'lg', 'xl'];
+const BREAKPOINT_WIDTHS = {
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1280
+};
+/**
+ * Lightweight DSL parser for the compact skeleton syntax.
+ */
+class HubSkeletonDslParser {
+    source;
+    index = 0;
+    constructor(source) {
+        this.source = source;
+    }
+    /**
+     * Parses the full source string into sibling root nodes.
+     *
+     * @returns Root nodes declared in the DSL.
+     */
+    parse() {
+        const nodes = this.parseSiblings();
+        this.skipWhitespace();
+        if (this.index < this.source.length) {
+            throw new Error(`Unexpected token "${this.source[this.index]}" at position ${this.index}.`);
+        }
+        return nodes;
+    }
+    parseSiblings() {
+        const nodes = [this.parseNode()];
+        while (true) {
+            this.skipWhitespace();
+            if (this.peek() !== '+') {
+                break;
+            }
+            this.index += 1;
+            nodes.push(this.parseNode());
+        }
+        return nodes;
+    }
+    parseNode() {
+        this.skipWhitespace();
+        const name = this.readIdentifier();
+        let variant;
+        if (this.peek() === '@') {
+            this.index += 1;
+            variant = this.readIdentifier();
+        }
+        const props = this.peek() === '(' ? this.readProps() : {};
+        let children = [];
+        this.skipWhitespace();
+        if (this.peek() === '>') {
+            this.index += 1;
+            children = this.parseSiblings();
+        }
+        this.skipWhitespace();
+        let repeat = 1;
+        if (this.peek() === '*') {
+            this.index += 1;
+            const rawRepeat = this.readUntilDelimiter(['+', '>', ')']).trim();
+            repeat = Number.parseInt(rawRepeat, 10);
+            if (!Number.isFinite(repeat) || repeat < 1) {
+                throw new Error(`Invalid repeat value "${rawRepeat}" near position ${this.index}.`);
+            }
+        }
+        return { name, props, variant, children, repeat };
+    }
+    readProps() {
+        const props = {};
+        this.expect('(');
+        let chunk = '';
+        let depth = 1;
+        while (this.index < this.source.length && depth > 0) {
+            const char = this.source[this.index++];
+            if (char === '(') {
+                depth += 1;
+                chunk += char;
+                continue;
+            }
+            if (char === ')') {
+                depth -= 1;
+                if (depth === 0) {
+                    break;
+                }
+                chunk += char;
+                continue;
+            }
+            chunk += char;
+        }
+        if (depth !== 0) {
+            throw new Error('Unclosed modifier block in skeleton DSL.');
+        }
+        for (const entry of this.splitTopLevel(chunk, ',')) {
+            const trimmedEntry = entry.trim();
+            if (!trimmedEntry) {
+                continue;
+            }
+            const [rawKey, ...rawValueParts] = trimmedEntry.split(':');
+            if (!rawKey) {
+                continue;
+            }
+            props[rawKey.trim()] = rawValueParts.length > 0 ? rawValueParts.join(':').trim() : 'true';
+        }
+        return props;
+    }
+    splitTopLevel(value, separator) {
+        const parts = [];
+        let current = '';
+        let depth = 0;
+        for (const char of value) {
+            if (char === '(') {
+                depth += 1;
+            }
+            else if (char === ')') {
+                depth -= 1;
+            }
+            if (char === separator && depth === 0) {
+                parts.push(current);
+                current = '';
+                continue;
+            }
+            current += char;
+        }
+        if (current) {
+            parts.push(current);
+        }
+        return parts;
+    }
+    readIdentifier() {
+        this.skipWhitespace();
+        const start = this.index;
+        while (this.index < this.source.length && /[a-zA-Z0-9-]/.test(this.source[this.index])) {
+            this.index += 1;
+        }
+        if (start === this.index) {
+            throw new Error(`Expected identifier near position ${this.index}.`);
+        }
+        return this.source.slice(start, this.index);
+    }
+    readUntilDelimiter(delimiters) {
+        const start = this.index;
+        while (this.index < this.source.length && !delimiters.includes(this.source[this.index])) {
+            this.index += 1;
+        }
+        return this.source.slice(start, this.index);
+    }
+    expect(char) {
+        this.skipWhitespace();
+        if (this.peek() !== char) {
+            throw new Error(`Expected "${char}" near position ${this.index}.`);
+        }
+        this.index += 1;
+    }
+    skipWhitespace() {
+        while (this.index < this.source.length && /\s/.test(this.source[this.index])) {
+            this.index += 1;
+        }
+    }
+    peek() {
+        return this.source[this.index];
+    }
+}
+/**
+ * Parses a DSL string into a raw AST.
+ *
+ * @param dsl Source template string.
+ * @returns Parsed root nodes.
+ */
+function parseHubSkeletonDsl(dsl) {
+    return new HubSkeletonDslParser(dsl).parse();
+}
+/**
+ * Interpolates `{{param}}` placeholders using a serializable params map.
+ *
+ * @param source Source DSL or modifier value.
+ * @param params Runtime params.
+ * @returns Interpolated string.
+ */
+function interpolateHubSkeletonParams(source, params) {
+    return source.replace(/\{\{\s*([a-zA-Z0-9_-]+)\s*\}\}/g, (_, key) => String(params[key] ?? ''));
+}
+/**
+ * Resolves the concrete DSL string to use for the current breakpoint.
+ *
+ * @param template Source template definition.
+ * @param breakpoint Current active breakpoint.
+ * @returns DSL string to parse.
+ */
+function resolveTemplateDsl(template, breakpoint) {
+    if (typeof template === 'string') {
+        return template;
+    }
+    if (breakpoint !== 'base' && template.responsive?.[breakpoint]) {
+        return template.responsive[breakpoint];
+    }
+    return template.dsl;
+}
+/**
+ * Resolves a primitive or responsive value token to a string for the active breakpoint.
+ *
+ * @param value Raw modifier value.
+ * @param breakpoint Current breakpoint.
+ * @returns Breakpoint-resolved string.
+ */
+function resolveResponsiveToken(value, breakpoint) {
+    const parsed = parseResponsiveToken(value);
+    if (typeof parsed !== 'object' || parsed === null) {
+        return String(parsed);
+    }
+    let resolved = parsed.base;
+    for (const key of BREAKPOINT_ORDER) {
+        if (key === 'base') {
+            continue;
+        }
+        if (BREAKPOINT_ORDER.indexOf(key) <= BREAKPOINT_ORDER.indexOf(breakpoint) && parsed[key] !== undefined) {
+            resolved = parsed[key];
+        }
+    }
+    return String(resolved ?? '');
+}
+/**
+ * Maps the current viewport width to the nearest supported breakpoint id.
+ *
+ * @param width Viewport width in pixels.
+ * @returns Breakpoint identifier.
+ */
+function resolveBreakpointFromWidth(width) {
+    if (width >= BREAKPOINT_WIDTHS.xl) {
+        return 'xl';
+    }
+    if (width >= BREAKPOINT_WIDTHS.lg) {
+        return 'lg';
+    }
+    if (width >= BREAKPOINT_WIDTHS.md) {
+        return 'md';
+    }
+    if (width >= BREAKPOINT_WIDTHS.sm) {
+        return 'sm';
+    }
+    return 'base';
+}
+/**
+ * Resolves an AST into render nodes, expanding preset aliases recursively.
+ *
+ * @param nodes AST nodes to resolve.
+ * @param options Resolution context.
+ * @returns Render nodes ready for the component template.
+ */
+function resolveHubSkeletonNodes(nodes, options) {
+    const counter = { value: 0 };
+    const resolveNode = (node, inheritedParams, inheritedVariant) => {
+        const runtimeVariant = node.variant ?? inheritedVariant;
+        const runtimeParams = {
+            ...inheritedParams,
+            ...convertNodePropsToParams(node.props, options.breakpoint)
+        };
+        if (BUILTIN_NODE_TYPES.has(node.name)) {
+            const props = resolveProps(node.props, options.breakpoint);
+            const builtNode = {
+                id: `hub-skeleton-node-${counter.value++}`,
+                type: node.name,
+                props,
+                children: resolveNodes(node.children, runtimeParams, runtimeVariant),
+                isSurface: node.name === 'line' || node.name === 'block' || node.name === 'circle'
+            };
+            return Array.from({ length: node.repeat }, () => builtNode).map((entry, index) => ({
+                ...entry,
+                id: `${entry.id}-${index}`
+            }));
+        }
+        const preset = options.registry.getPreset(node.name);
+        if (!preset) {
+            throw new Error(`Unknown skeleton node or preset alias "${node.name}".`);
+        }
+        const activeVariant = runtimeVariant ?? options.fallbackVariant;
+        const variantDef = activeVariant ? preset.variants?.[activeVariant] : undefined;
+        const presetParams = {
+            ...preset.defaults,
+            ...variantDef?.defaults,
+            ...runtimeParams
+        };
+        const presetTemplate = variantDef?.template ?? preset.template;
+        const presetDsl = interpolateHubSkeletonParams(resolveTemplateDsl(presetTemplate, options.breakpoint), presetParams);
+        const presetAst = parseHubSkeletonDsl(presetDsl);
+        const resolvedPresetNodes = resolveNodes(presetAst, presetParams, activeVariant);
+        return Array.from({ length: node.repeat }, () => resolvedPresetNodes).flat();
+    };
+    const resolveNodes = (inputNodes, params, variant) => inputNodes.flatMap((node) => resolveNode(node, params, variant));
+    return resolveNodes(nodes, options.params, options.fallbackVariant);
+}
+function resolveProps(props, breakpoint) {
+    return Object.fromEntries(Object.entries(props).map(([key, value]) => [key, resolveResponsiveToken(value, breakpoint)]));
+}
+function convertNodePropsToParams(props, breakpoint) {
+    const entries = Object.entries(props).map(([key, value]) => {
+        const resolvedValue = resolveResponsiveToken(value, breakpoint);
+        return [key, parsePrimitiveToken(resolvedValue)];
+    });
+    return Object.fromEntries(entries);
+}
+function parseResponsiveToken(value) {
+    if (!value.includes('|')) {
+        return parsePrimitiveToken(value);
+    }
+    const responsive = {};
+    for (const part of value.split('|')) {
+        const trimmedPart = part.trim();
+        if (!trimmedPart) {
+            continue;
+        }
+        if (!trimmedPart.includes('=')) {
+            responsive.base = parsePrimitiveToken(trimmedPart);
+            continue;
+        }
+        const [breakpoint, rawToken] = trimmedPart.split('=');
+        const normalizedBreakpoint = breakpoint.trim();
+        if (isBreakpoint(normalizedBreakpoint)) {
+            responsive[normalizedBreakpoint] = parsePrimitiveToken(rawToken.trim());
+        }
+    }
+    return responsive;
+}
+function isBreakpoint(value) {
+    return BREAKPOINT_ORDER.includes(value);
+}
+function parsePrimitiveToken(value) {
+    const trimmedValue = value.trim();
+    if (trimmedValue === 'true') {
+        return true;
+    }
+    if (trimmedValue === 'false') {
+        return false;
+    }
+    if (/^-?\d+(\.\d+)?$/.test(trimmedValue)) {
+        return Number(trimmedValue);
+    }
+    return trimmedValue;
+}
+
+/**
+ * Dynamic skeleton component that renders bundled presets or compact inline DSL templates.
+ */
+class HubSkeletonComponent {
+    /** Built-in or registered preset name. */
+    preset = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
+    /** Inline compact DSL template or template definition object. */
+    template = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    /** Serializable params interpolated before parsing. */
+    params = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "params" }] : /* istanbul ignore next */ []));
+    /** Optional named variant. */
+    variant = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Toggles shimmer animation. */
+    animated = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
+    /** Visual appearance preset. */
+    appearance = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** Optional accessible label applied to the container. */
+    ariaLabel = input('Loading placeholder', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    document = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
+    registry = inject(HubSkeletonPresetRegistryService);
+    resizeCleanup = null;
+    viewportWidth = signal(1200, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportWidth" }] : /* istanbul ignore next */ []));
+    activeBreakpoint = computed(() => resolveBreakpointFromWidth(this.viewportWidth()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeBreakpoint" }] : /* istanbul ignore next */ []));
+    /** Resolved render nodes after preset expansion and breakpoint evaluation. */
+    resolvedNodes = computed(() => {
+        const { template, params, variant } = this.resolveRuntimeTemplate();
+        const dsl = interpolateHubSkeletonParams(resolveTemplateDsl(template, this.activeBreakpoint()), params);
+        const ast = parseHubSkeletonDsl(dsl);
+        return resolveHubSkeletonNodes(ast, {
+            breakpoint: this.activeBreakpoint(),
+            params,
+            registry: this.registry,
+            fallbackVariant: variant ?? undefined
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedNodes" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        if (!isPlatformBrowser(this.platformId) || !this.document.defaultView) {
+            return;
+        }
+        const win = this.document.defaultView;
+        this.viewportWidth.set(win.innerWidth);
+        const listener = () => this.viewportWidth.set(win.innerWidth);
+        win.addEventListener('resize', listener, { passive: true });
+        this.resizeCleanup = () => win.removeEventListener('resize', listener);
+    }
+    ngOnDestroy() {
+        this.resizeCleanup?.();
+    }
+    /**
+     * Converts node props into CSS custom properties consumed by the template.
+     *
+     * @param node Render node.
+     * @returns Style object.
+     */
+    buildStyles(node) {
+        const props = node.props;
+        return {
+            '--hub-skeleton-node-width': props['width'] ?? null,
+            '--hub-skeleton-node-height': this.toCssSize(props['height']),
+            '--hub-skeleton-node-size': this.toCssSize(props['size']),
+            '--hub-skeleton-node-radius': this.toCssSize(props['radius']),
+            '--hub-skeleton-node-gap': this.toCssSize(props['gap']),
+            '--hub-skeleton-node-columns': props['columns'] ?? null,
+            '--hub-skeleton-node-align': props['align'] ?? null,
+            '--hub-skeleton-node-justify': props['justify'] ?? null
+        };
+    }
+    resolveRuntimeTemplate() {
+        const presetName = this.preset();
+        const variantName = this.variant();
+        const inlineTemplate = this.template();
+        if (presetName) {
+            const preset = this.registry.getPreset(presetName);
+            if (!preset) {
+                throw new Error(`Unknown skeleton preset "${presetName}".`);
+            }
+            const activeVariant = variantName ? preset.variants?.[variantName] : undefined;
+            return {
+                template: activeVariant?.template ?? preset.template,
+                params: {
+                    ...preset.defaults,
+                    ...activeVariant?.defaults,
+                    ...this.params()
+                },
+                variant: variantName
+            };
+        }
+        if (!inlineTemplate) {
+            throw new Error('hub-skeleton requires either `preset` or `template`.');
+        }
+        return {
+            template: inlineTemplate,
+            params: this.params(),
+            variant: variantName
+        };
+    }
+    toCssSize(value) {
+        if (!value) {
+            return null;
+        }
+        if (/^-?\d+(\.\d+)?$/.test(value)) {
+            return `${value}px`;
+        }
+        return value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSkeletonComponent, isStandalone: true, selector: "hub-skeleton", inputs: { preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [HubSkeletonPresetRegistryService], ngImport: i0, template: `
+		<div
+			class="hub-skeleton"
+			[class.hub-skeleton--animated]="animated()"
+			[class.hub-skeleton--subtle]="appearance() === 'subtle'"
+			[class.hub-skeleton--contrast]="appearance() === 'contrast'"
+			[attr.aria-label]="ariaLabel()"
+			role="presentation"
+		>
+			<ng-container *ngTemplateOutlet="renderNodes; context: { $implicit: resolvedNodes() }"></ng-container>
+		</div>
+
+		<ng-template #renderNodes let-nodes>
+			@for (node of nodes; track node.id) {
+				<div
+					class="hub-skeleton__node"
+					[class.hub-skeleton__node--surface]="node.isSurface"
+					[class.hub-skeleton__node--line]="node.type === 'line'"
+					[class.hub-skeleton__node--block]="node.type === 'block'"
+					[class.hub-skeleton__node--circle]="node.type === 'circle'"
+					[class.hub-skeleton__node--stack]="node.type === 'stack'"
+					[class.hub-skeleton__node--grid]="node.type === 'grid'"
+					[class.hub-skeleton__node--row]="node.type === 'stack' && node.props['direction'] === 'row'"
+					[class.hub-skeleton__node--grow]="node.props['grow'] === 'true'"
+					[style]="buildStyles(node)"
+					aria-hidden="true"
+				>
+					@if (node.children.length > 0) {
+						<ng-container *ngTemplateOutlet="renderNodes; context: { $implicit: node.children }"></ng-container>
+					}
+				</div>
+			}
+		</ng-template>
+	`, isInline: true, styles: [":host{display:block}.hub-skeleton{--hub-skeleton-bg: rgba(148, 163, 184, .18);--hub-skeleton-highlight: rgba(255, 255, 255, .52);--hub-skeleton-radius: 12px;--hub-skeleton-gap: 12px;--hub-skeleton-animation-duration: 1.35s;display:block;width:100%}.hub-skeleton--subtle{--hub-skeleton-bg: rgba(148, 163, 184, .12);--hub-skeleton-highlight: rgba(255, 255, 255, .38)}.hub-skeleton--contrast{--hub-skeleton-bg: rgba(71, 85, 105, .28);--hub-skeleton-highlight: rgba(255, 255, 255, .28)}.hub-skeleton__node{box-sizing:border-box;min-width:0}.hub-skeleton__node--surface{background:linear-gradient(90deg,var(--hub-skeleton-bg) 0%,var(--hub-skeleton-bg) 32%,var(--hub-skeleton-highlight) 50%,var(--hub-skeleton-bg) 68%,var(--hub-skeleton-bg) 100%);background-size:220% 100%;border-radius:var(--hub-skeleton-node-radius, var(--hub-skeleton-radius))}.hub-skeleton--animated .hub-skeleton__node--surface{animation:hub-skeleton-shimmer var(--hub-skeleton-animation-duration) ease-in-out infinite}.hub-skeleton__node--line,.hub-skeleton__node--block,.hub-skeleton__node--circle{width:var(--hub-skeleton-node-width, 100%);height:var(--hub-skeleton-node-height, 12px)}.hub-skeleton__node--circle{width:var(--hub-skeleton-node-size, var(--hub-skeleton-node-width, 40px));height:var(--hub-skeleton-node-size, var(--hub-skeleton-node-height, 40px));border-radius:999px}.hub-skeleton__node--stack{display:flex;flex-direction:column;gap:var(--hub-skeleton-node-gap, var(--hub-skeleton-gap));align-items:var(--hub-skeleton-node-align, stretch);justify-content:var(--hub-skeleton-node-justify, flex-start)}.hub-skeleton__node--row{flex-direction:row}.hub-skeleton__node--grid{display:grid;grid-template-columns:repeat(var(--hub-skeleton-node-columns, 2),minmax(0,1fr));gap:var(--hub-skeleton-node-gap, var(--hub-skeleton-gap));align-items:var(--hub-skeleton-node-align, stretch)}.hub-skeleton__node--grow{flex:1 1 auto}@keyframes hub-skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-skeleton', standalone: true, imports: [NgTemplateOutlet], providers: [HubSkeletonPresetRegistryService], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+		<div
+			class="hub-skeleton"
+			[class.hub-skeleton--animated]="animated()"
+			[class.hub-skeleton--subtle]="appearance() === 'subtle'"
+			[class.hub-skeleton--contrast]="appearance() === 'contrast'"
+			[attr.aria-label]="ariaLabel()"
+			role="presentation"
+		>
+			<ng-container *ngTemplateOutlet="renderNodes; context: { $implicit: resolvedNodes() }"></ng-container>
+		</div>
+
+		<ng-template #renderNodes let-nodes>
+			@for (node of nodes; track node.id) {
+				<div
+					class="hub-skeleton__node"
+					[class.hub-skeleton__node--surface]="node.isSurface"
+					[class.hub-skeleton__node--line]="node.type === 'line'"
+					[class.hub-skeleton__node--block]="node.type === 'block'"
+					[class.hub-skeleton__node--circle]="node.type === 'circle'"
+					[class.hub-skeleton__node--stack]="node.type === 'stack'"
+					[class.hub-skeleton__node--grid]="node.type === 'grid'"
+					[class.hub-skeleton__node--row]="node.type === 'stack' && node.props['direction'] === 'row'"
+					[class.hub-skeleton__node--grow]="node.props['grow'] === 'true'"
+					[style]="buildStyles(node)"
+					aria-hidden="true"
+				>
+					@if (node.children.length > 0) {
+						<ng-container *ngTemplateOutlet="renderNodes; context: { $implicit: node.children }"></ng-container>
+					}
+				</div>
+			}
+		</ng-template>
+	`, styles: [":host{display:block}.hub-skeleton{--hub-skeleton-bg: rgba(148, 163, 184, .18);--hub-skeleton-highlight: rgba(255, 255, 255, .52);--hub-skeleton-radius: 12px;--hub-skeleton-gap: 12px;--hub-skeleton-animation-duration: 1.35s;display:block;width:100%}.hub-skeleton--subtle{--hub-skeleton-bg: rgba(148, 163, 184, .12);--hub-skeleton-highlight: rgba(255, 255, 255, .38)}.hub-skeleton--contrast{--hub-skeleton-bg: rgba(71, 85, 105, .28);--hub-skeleton-highlight: rgba(255, 255, 255, .28)}.hub-skeleton__node{box-sizing:border-box;min-width:0}.hub-skeleton__node--surface{background:linear-gradient(90deg,var(--hub-skeleton-bg) 0%,var(--hub-skeleton-bg) 32%,var(--hub-skeleton-highlight) 50%,var(--hub-skeleton-bg) 68%,var(--hub-skeleton-bg) 100%);background-size:220% 100%;border-radius:var(--hub-skeleton-node-radius, var(--hub-skeleton-radius))}.hub-skeleton--animated .hub-skeleton__node--surface{animation:hub-skeleton-shimmer var(--hub-skeleton-animation-duration) ease-in-out infinite}.hub-skeleton__node--line,.hub-skeleton__node--block,.hub-skeleton__node--circle{width:var(--hub-skeleton-node-width, 100%);height:var(--hub-skeleton-node-height, 12px)}.hub-skeleton__node--circle{width:var(--hub-skeleton-node-size, var(--hub-skeleton-node-width, 40px));height:var(--hub-skeleton-node-size, var(--hub-skeleton-node-height, 40px));border-radius:999px}.hub-skeleton__node--stack{display:flex;flex-direction:column;gap:var(--hub-skeleton-node-gap, var(--hub-skeleton-gap));align-items:var(--hub-skeleton-node-align, stretch);justify-content:var(--hub-skeleton-node-justify, flex-start)}.hub-skeleton__node--row{flex-direction:row}.hub-skeleton__node--grid{display:grid;grid-template-columns:repeat(var(--hub-skeleton-node-columns, 2),minmax(0,1fr));gap:var(--hub-skeleton-node-gap, var(--hub-skeleton-gap));align-items:var(--hub-skeleton-node-align, stretch)}.hub-skeleton__node--grow{flex:1 1 auto}@keyframes hub-skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
+        }], propDecorators: { preset: [{ type: i0.Input, args: [{ isSignal: true, alias: "preset", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * NgModule wrapper kept for compatibility with module-based Angular apps.
+ */
+class HubSkeletonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: HubSkeletonModule, imports: [HubSkeletonComponent], exports: [HubSkeletonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSkeletonModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSkeletonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [HubSkeletonComponent],
+                    exports: [HubSkeletonComponent]
+                }]
+        }] });
+
+/*
+ * Public API Surface of skeleton
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HUB_SKELETON_DEFAULT_PRESETS, HUB_SKELETON_PRESETS, HubSkeletonComponent, HubSkeletonModule, HubSkeletonPresetRegistryService, provideHubSkeletonPresets };
+//# sourceMappingURL=ng-hub-ui-skeleton.mjs.map