@nuralyui/skeleton 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/skeleton",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "NuralyUI Skeleton Component - Placeholder for loading content",
     "author": "Nuraly, Laabidi Aymen",
     "license": "MIT",
@@ -26,6 +26,6 @@
     ],
     "repository": {
         "type": "git",
-        "url": "https://github.com/NuralyUI/NuralyUI.git"
+        "url": "https://github.com/Nuralyio/NuralyUI.git"
     }
 }

package/skeleton.component.d.ts

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { SkeletonShape, SkeletonSize, SkeletonElementType, SkeletonAvatarConfig, SkeletonTitleConfig, SkeletonParagraphConfig, SkeletonButtonConfig, SkeletonInputConfig, SkeletonImageConfig } from './skeleton.types.js';
-declare const NrSkeletonElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrSkeletonElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
 /**
  * # Skeleton Component
  *

package/skeleton.component.js

@@ -14,7 +14,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { styles } from './skeleton.style.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 /**
  * # Skeleton Component
  *

package/skeleton.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.component.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { styles } from './skeleton.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport {\n    SkeletonShape,\n    SkeletonSize,\n    SkeletonElementType,\n    SkeletonAvatarConfig,\n    SkeletonTitleConfig,\n    SkeletonParagraphConfig,\n    SkeletonButtonConfig,\n    SkeletonInputConfig,\n    SkeletonImageConfig,\n} from './skeleton.types.js';\n\n/**\n * # Skeleton Component\n *\n * Provides a placeholder while content is loading, or to visualize content that doesn't exist yet.\n * Improves perceived performance and user experience during data fetching.\n *\n * ## Features\n * - Multiple skeleton elements (Avatar, Title, Paragraph, Button, Input, Image)\n * - Active animation effect\n * - Customizable shapes (circle, square, round)\n * - Configurable sizes (small, default, large)\n * - Loading state management\n * - Theme-aware styling\n * - Flexible configuration options\n *\n * ## Usage\n * ```html\n * <!-- Basic skeleton -->\n * <nr-skeleton></nr-skeleton>\n *\n * <!-- With active animation -->\n * <nr-skeleton active></nr-skeleton>\n *\n * <!-- Complex skeleton with avatar -->\n * <nr-skeleton avatar active></nr-skeleton>\n *\n * <!-- Loading state with content -->\n * <nr-skeleton loading>\n *   <div slot=\"content\">\n *     <h3>Article Title</h3>\n *     <p>Article content goes here...</p>\n *   </div>\n * </nr-skeleton>\n *\n * <!-- Skeleton button -->\n * <nr-skeleton element=\"button\" active></nr-skeleton>\n *\n * <!-- Skeleton input -->\n * <nr-skeleton element=\"input\" block></nr-skeleton>\n * ```\n *\n * @element nr-skeleton\n *\n * @slot content - Content to show when loading is false\n *\n * @cssproperty --nuraly-skeleton-background - Background color of skeleton elements\n * @cssproperty --nuraly-skeleton-gradient-from - Start color of active animation gradient\n * @cssproperty --nuraly-skeleton-gradient-to - End color of active animation gradient\n * @cssproperty --nuraly-skeleton-icon-color - Color of image placeholder icon\n */\n@customElement('nr-skeleton')\nexport class NrSkeletonElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  /**\n   * Show animation effect\n   */\n  @property({ type: Boolean }) active = false;\n\n  /**\n   * Show avatar placeholder\n   */\n  @property({ type: Boolean }) avatar = false;\n\n  /**\n   * Avatar configuration\n   */\n  @property({ type: Object, attribute: 'avatar-config' }) avatarConfig: SkeletonAvatarConfig = {};\n\n  /**\n   * Display the skeleton when true\n   */\n  @property({ type: Boolean }) loading = true;\n\n  /**\n   * Show paragraph placeholder\n   */\n  @property({ type: Boolean }) paragraph = true;\n\n  /**\n   * Paragraph configuration\n   */\n  @property({ type: Object, attribute: 'paragraph-config' }) paragraphConfig: SkeletonParagraphConfig = {};\n\n  /**\n   * Show paragraph and title radius when true\n   */\n  @property({ type: Boolean }) round = false;\n\n  /**\n   * Show title placeholder\n   */\n  @property({ type: Boolean, attribute: 'show-title' }) showTitle = true;\n\n  /**\n   * Title configuration\n   */\n  @property({ type: Object, attribute: 'title-config' }) titleConfig: SkeletonTitleConfig = {};\n\n  /**\n   * Element type for standalone skeleton elements\n   */\n  @property({ type: String }) element?: SkeletonElementType;\n\n  /**\n   * Button configuration\n   */\n  @property({ type: Object, attribute: 'button-config' }) buttonConfig: SkeletonButtonConfig = {};\n\n  /**\n   * Input configuration\n   */\n  @property({ type: Object, attribute: 'input-config' }) inputConfig: SkeletonInputConfig = {};\n\n  /**\n   * Image configuration\n   */\n  @property({ type: Object, attribute: 'image-config' }) imageConfig: SkeletonImageConfig = {};\n\n  /**\n   * Block style for button/input\n   */\n  @property({ type: Boolean }) block = false;\n\n  /**\n   * Shape for standalone elements\n   */\n  @property({ type: String }) shape: SkeletonShape = SkeletonShape.Default;\n\n  /**\n   * Size for standalone elements\n   */\n  @property({ type: String }) size: SkeletonSize = SkeletonSize.Default;\n\n  /**\n   * Render avatar skeleton\n   */\n  private renderAvatar() {\n    const config = typeof this.avatar === 'object' ? this.avatar : this.avatarConfig;\n    const shape = config.shape || SkeletonShape.Circle;\n    const size = config.size || SkeletonSize.Default;\n    \n    const sizeClass = typeof size === 'number' ? '' : size;\n    const customSize = typeof size === 'number' ? { width: `${size}px`, height: `${size}px` } : {};\n\n    return html`\n      <div\n        class=${classMap({\n          'skeleton-avatar': true,\n          [`skeleton-avatar--${shape}`]: true,\n          [`skeleton-avatar--${sizeClass}`]: !!sizeClass,\n        })}\n        style=${styleMap(customSize)}></div>\n    `;\n  }\n\n  /**\n   * Render title skeleton\n   */\n  private renderTitle() {\n    const config = typeof this.showTitle === 'object' ? this.showTitle as any : this.titleConfig;\n    const width = config.width;\n    const customWidth = width ? { width: typeof width === 'number' ? `${width}px` : width } : { width: '38%' };\n\n    return html`\n      <div\n        class=${classMap({\n          'skeleton-title': true,\n          'skeleton-title--round': this.round,\n        })}\n        style=${styleMap(customWidth)}></div>\n    `;\n  }\n\n  /**\n   * Render paragraph skeleton\n   */\n  private renderParagraph() {\n    const config = typeof this.paragraph === 'object' ? this.paragraph : this.paragraphConfig;\n    const rows = config.rows || 3;\n    const widthConfig = config.width;\n\n    const getLineWidth = (index: number): Record<string, string> => {\n      if (Array.isArray(widthConfig)) {\n        const width = widthConfig[index];\n        return width ? { width: typeof width === 'number' ? `${width}px` : width } : {};\n      }\n      \n      // Last line uses custom width or 61%\n      if (index === rows - 1) {\n        if (widthConfig) {\n          return { width: typeof widthConfig === 'number' ? `${widthConfig}px` : widthConfig };\n        }\n        return { width: '61%' };\n      }\n      \n      return {};\n    };\n\n    return html`\n      <div class=\"skeleton-paragraph\">\n        ${Array.from({ length: rows }, (_, i) => html`\n          <div\n            class=${classMap({\n              'skeleton-paragraph-line': true,\n              'skeleton-paragraph-line--round': this.round,\n            })}\n            style=${styleMap(getLineWidth(i))}></div>\n        `)}\n      </div>\n    `;\n  }\n\n  /**\n   * Render button skeleton\n   */\n  private renderButton() {\n    const config = this.buttonConfig;\n    const buttonShape = config.shape || this.shape;\n    const buttonSize = config.size || this.size;\n    const buttonBlock = config.block !== undefined ? config.block : this.block;\n\n    return html`\n      <div\n        class=${classMap({\n          'skeleton-button': true,\n          [`skeleton-button--${buttonShape}`]: true,\n          [`skeleton-button--${buttonSize}`]: true,\n          'skeleton-button--block': buttonBlock,\n        })}></div>\n    `;\n  }\n\n  /**\n   * Render input skeleton\n   */\n  private renderInput() {\n    const config = this.inputConfig;\n    const inputSize = config.size || this.size;\n    const inputBlock = config.block !== undefined ? config.block : this.block;\n\n    return html`\n      <div\n        class=${classMap({\n          'skeleton-input': true,\n          [`skeleton-input--${inputSize}`]: true,\n          'skeleton-input--block': inputBlock,\n        })}></div>\n    `;\n  }\n\n  /**\n   * Render image skeleton\n   */\n  private renderImage() {\n    return html`\n      <div class=\"skeleton-image\">\n        <svg\n          class=\"skeleton-image-icon\"\n          viewBox=\"0 0 1024 1024\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"48\"\n          height=\"48\">\n          <path\n            d=\"M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM338 304c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm513.9 437.1c-2.1 2.1-4.5 3.8-7 5.1-5.2 2.7-11.1 4.1-17.1 4.1H196.2c-6 0-11.9-1.4-17.1-4.1-2.5-1.3-4.9-3-7-5.1-4.4-4.4-7.1-10.5-7.1-17.1 0-3.7.8-7.4 2.5-10.8 1.6-3.4 4.1-6.4 7.1-8.8l112.3-97.5c8.8-7.6 22.1-7.6 30.9 0l148.5 129 203.9-177c8.8-7.6 22.1-7.6 30.9 0l179.8 156.1c3 2.6 5.5 5.7 7.1 9.3 1.7 3.7 2.5 7.6 2.5 11.6-.1 6.6-2.8 12.7-7.2 17.1z\"\n            fill=\"currentColor\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  /**\n   * Render standalone element\n   */\n  private renderStandaloneElement() {\n    switch (this.element) {\n      case SkeletonElementType.Button:\n        return this.renderButton();\n      case SkeletonElementType.Input:\n        return this.renderInput();\n      case SkeletonElementType.Image:\n        return this.renderImage();\n      case SkeletonElementType.Avatar:\n        return this.renderAvatar();\n      default:\n        return html``;\n    }\n  }\n\n  /**\n   * Render full skeleton\n   */\n  private renderSkeleton() {\n    // If element type is specified, render standalone element\n    if (this.element) {\n      return html`\n        <div\n          class=${classMap({\n            'skeleton': true,\n            'skeleton--active': this.active || (this.element === SkeletonElementType.Avatar && !!this.avatarConfig.active),\n          })}>\n          ${this.renderStandaloneElement()}\n        </div>\n      `;\n    }\n\n    // Render full skeleton layout\n    return html`\n      <div\n        class=${classMap({\n          'skeleton': true,\n          'skeleton--active': this.active,\n        })}>\n        ${this.avatar || this.showTitle || this.paragraph\n          ? html`\n              ${this.avatar\n                ? html`\n                    <div class=\"skeleton-header\">\n                      ${this.renderAvatar()}\n                      ${this.showTitle || this.paragraph\n                        ? html`\n                            <div class=\"skeleton-content\">\n                              ${this.showTitle ? this.renderTitle() : ''}\n                              ${this.paragraph ? this.renderParagraph() : ''}\n                            </div>\n                          `\n                        : ''}\n                    </div>\n                  `\n                : html`\n                    <div class=\"skeleton-content\">\n                      ${this.showTitle ? this.renderTitle() : ''}\n                      ${this.paragraph ? this.renderParagraph() : ''}\n                    </div>\n                  `}\n            `\n          : ''}\n      </div>\n    `;\n  }\n\n  override render() {\n    // If loading is false, show slotted content\n    if (!this.loading) {\n      return html`\n        <div class=\"skeleton-wrapper\">\n          <slot name=\"content\"><slot></slot></slot>\n        </div>\n      `;\n    }\n\n    // Show skeleton\n    return this.renderSkeleton();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-skeleton': NrSkeletonElement;\n  }\n}\n"]}
+{"version":3,"file":"skeleton.component.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { styles } from './skeleton.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n    SkeletonShape,\n    SkeletonSize,\n    SkeletonElementType,\n    SkeletonAvatarConfig,\n    SkeletonTitleConfig,\n    SkeletonParagraphConfig,\n    SkeletonButtonConfig,\n    SkeletonInputConfig,\n    SkeletonImageConfig,\n} from './skeleton.types.js';\n\n/**\n * # Skeleton Component\n *\n * Provides a placeholder while content is loading, or to visualize content that doesn't exist yet.\n * Improves perceived performance and user experience during data fetching.\n *\n * ## Features\n * - Multiple skeleton elements (Avatar, Title, Paragraph, Button, Input, Image)\n * - Active animation effect\n * - Customizable shapes (circle, square, round)\n * - Configurable sizes (small, default, large)\n * - Loading state management\n * - Theme-aware styling\n * - Flexible configuration options\n *\n * ## Usage\n * ```html\n * <!-- Basic skeleton -->\n * <nr-skeleton></nr-skeleton>\n *\n * <!-- With active animation -->\n * <nr-skeleton active></nr-skeleton>\n *\n * <!-- Complex skeleton with avatar -->\n * <nr-skeleton avatar active></nr-skeleton>\n *\n * <!-- Loading state with content -->\n * <nr-skeleton loading>\n *   <div slot=\"content\">\n *     <h3>Article Title</h3>\n *     <p>Article content goes here...</p>\n *   </div>\n * </nr-skeleton>\n *\n * <!-- Skeleton button -->\n * <nr-skeleton element=\"button\" active></nr-skeleton>\n *\n * <!-- Skeleton input -->\n * <nr-skeleton element=\"input\" block></nr-skeleton>\n * ```\n *\n * @element nr-skeleton\n *\n * @slot content - Content to show when loading is false\n *\n * @cssproperty --nuraly-skeleton-background - Background color of skeleton elements\n * @cssproperty --nuraly-skeleton-gradient-from - Start color of active animation gradient\n * @cssproperty --nuraly-skeleton-gradient-to - End color of active animation gradient\n * @cssproperty --nuraly-skeleton-icon-color - Color of image placeholder icon\n */\n@customElement('nr-skeleton')\nexport class NrSkeletonElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  /**\n   * Show animation effect\n   */\n  @property({ type: Boolean }) active = false;\n\n  /**\n   * Show avatar placeholder\n   */\n  @property({ type: Boolean }) avatar = false;\n\n  /**\n   * Avatar configuration\n   */\n  @property({ type: Object, attribute: 'avatar-config' }) avatarConfig: SkeletonAvatarConfig = {};\n\n  /**\n   * Display the skeleton when true\n   */\n  @property({ type: Boolean }) loading = true;\n\n  /**\n   * Show paragraph placeholder\n   */\n  @property({ type: Boolean }) paragraph = true;\n\n  /**\n   * Paragraph configuration\n   */\n  @property({ type: Object, attribute: 'paragraph-config' }) paragraphConfig: SkeletonParagraphConfig = {};\n\n  /**\n   * Show paragraph and title radius when true\n   */\n  @property({ type: Boolean }) round = false;\n\n  /**\n   * Show title placeholder\n   */\n  @property({ type: Boolean, attribute: 'show-title' }) showTitle = true;\n\n  /**\n   * Title configuration\n   */\n  @property({ type: Object, attribute: 'title-config' }) titleConfig: SkeletonTitleConfig = {};\n\n  /**\n   * Element type for standalone skeleton elements\n   */\n  @property({ type: String }) element?: SkeletonElementType;\n\n  /**\n   * Button configuration\n   */\n  @property({ type: Object, attribute: 'button-config' }) buttonConfig: SkeletonButtonConfig = {};\n\n  /**\n   * Input configuration\n   */\n  @property({ type: Object, attribute: 'input-config' }) inputConfig: SkeletonInputConfig = {};\n\n  /**\n   * Image configuration\n   */\n  @property({ type: Object, attribute: 'image-config' }) imageConfig: SkeletonImageConfig = {};\n\n  /**\n   * Block style for button/input\n   */\n  @property({ type: Boolean }) block = false;\n\n  /**\n   * Shape for standalone elements\n   */\n  @property({ type: String }) shape: SkeletonShape = SkeletonShape.Default;\n\n  /**\n   * Size for standalone elements\n   */\n  @property({ type: String }) size: SkeletonSize = SkeletonSize.Default;\n\n  /**\n   * Render avatar skeleton\n   */\n  private renderAvatar() {\n    const config = typeof this.avatar === 'object' ? this.avatar : this.avatarConfig;\n    const shape = config.shape || SkeletonShape.Circle;\n    const size = config.size || SkeletonSize.Default;\n    \n    const sizeClass = typeof size === 'number' ? '' : size;\n    const customSize = typeof size === 'number' ? { width: `${size}px`, height: `${size}px` } : {};\n\n    return html`\n      <div\n        class=${classMap({\n          'skeleton-avatar': true,\n          [`skeleton-avatar--${shape}`]: true,\n          [`skeleton-avatar--${sizeClass}`]: !!sizeClass,\n        })}\n        style=${styleMap(customSize)}></div>\n    `;\n  }\n\n  /**\n   * Render title skeleton\n   */\n  private renderTitle() {\n    const config = typeof this.showTitle === 'object' ? this.showTitle as any : this.titleConfig;\n    const width = config.width;\n    const customWidth = width ? { width: typeof width === 'number' ? `${width}px` : width } : { width: '38%' };\n\n    return html`\n      <div\n        class=${classMap({\n          'skeleton-title': true,\n          'skeleton-title--round': this.round,\n        })}\n        style=${styleMap(customWidth)}></div>\n    `;\n  }\n\n  /**\n   * Render paragraph skeleton\n   */\n  private renderParagraph() {\n    const config = typeof this.paragraph === 'object' ? this.paragraph : this.paragraphConfig;\n    const rows = config.rows || 3;\n    const widthConfig = config.width;\n\n    const getLineWidth = (index: number): Record<string, string> => {\n      if (Array.isArray(widthConfig)) {\n        const width = widthConfig[index];\n        return width ? { width: typeof width === 'number' ? `${width}px` : width } : {};\n      }\n      \n      // Last line uses custom width or 61%\n      if (index === rows - 1) {\n        if (widthConfig) {\n          return { width: typeof widthConfig === 'number' ? `${widthConfig}px` : widthConfig };\n        }\n        return { width: '61%' };\n      }\n      \n      return {};\n    };\n\n    return html`\n      <div class=\"skeleton-paragraph\">\n        ${Array.from({ length: rows }, (_, i) => html`\n          <div\n            class=${classMap({\n              'skeleton-paragraph-line': true,\n              'skeleton-paragraph-line--round': this.round,\n            })}\n            style=${styleMap(getLineWidth(i))}></div>\n        `)}\n      </div>\n    `;\n  }\n\n  /**\n   * Render button skeleton\n   */\n  private renderButton() {\n    const config = this.buttonConfig;\n    const buttonShape = config.shape || this.shape;\n    const buttonSize = config.size || this.size;\n    const buttonBlock = config.block !== undefined ? config.block : this.block;\n\n    return html`\n      <div\n        class=${classMap({\n          'skeleton-button': true,\n          [`skeleton-button--${buttonShape}`]: true,\n          [`skeleton-button--${buttonSize}`]: true,\n          'skeleton-button--block': buttonBlock,\n        })}></div>\n    `;\n  }\n\n  /**\n   * Render input skeleton\n   */\n  private renderInput() {\n    const config = this.inputConfig;\n    const inputSize = config.size || this.size;\n    const inputBlock = config.block !== undefined ? config.block : this.block;\n\n    return html`\n      <div\n        class=${classMap({\n          'skeleton-input': true,\n          [`skeleton-input--${inputSize}`]: true,\n          'skeleton-input--block': inputBlock,\n        })}></div>\n    `;\n  }\n\n  /**\n   * Render image skeleton\n   */\n  private renderImage() {\n    return html`\n      <div class=\"skeleton-image\">\n        <svg\n          class=\"skeleton-image-icon\"\n          viewBox=\"0 0 1024 1024\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"48\"\n          height=\"48\">\n          <path\n            d=\"M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM338 304c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm513.9 437.1c-2.1 2.1-4.5 3.8-7 5.1-5.2 2.7-11.1 4.1-17.1 4.1H196.2c-6 0-11.9-1.4-17.1-4.1-2.5-1.3-4.9-3-7-5.1-4.4-4.4-7.1-10.5-7.1-17.1 0-3.7.8-7.4 2.5-10.8 1.6-3.4 4.1-6.4 7.1-8.8l112.3-97.5c8.8-7.6 22.1-7.6 30.9 0l148.5 129 203.9-177c8.8-7.6 22.1-7.6 30.9 0l179.8 156.1c3 2.6 5.5 5.7 7.1 9.3 1.7 3.7 2.5 7.6 2.5 11.6-.1 6.6-2.8 12.7-7.2 17.1z\"\n            fill=\"currentColor\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  /**\n   * Render standalone element\n   */\n  private renderStandaloneElement() {\n    switch (this.element) {\n      case SkeletonElementType.Button:\n        return this.renderButton();\n      case SkeletonElementType.Input:\n        return this.renderInput();\n      case SkeletonElementType.Image:\n        return this.renderImage();\n      case SkeletonElementType.Avatar:\n        return this.renderAvatar();\n      default:\n        return html``;\n    }\n  }\n\n  /**\n   * Render full skeleton\n   */\n  private renderSkeleton() {\n    // If element type is specified, render standalone element\n    if (this.element) {\n      return html`\n        <div\n          class=${classMap({\n            'skeleton': true,\n            'skeleton--active': this.active || (this.element === SkeletonElementType.Avatar && !!this.avatarConfig.active),\n          })}>\n          ${this.renderStandaloneElement()}\n        </div>\n      `;\n    }\n\n    // Render full skeleton layout\n    return html`\n      <div\n        class=${classMap({\n          'skeleton': true,\n          'skeleton--active': this.active,\n        })}>\n        ${this.avatar || this.showTitle || this.paragraph\n          ? html`\n              ${this.avatar\n                ? html`\n                    <div class=\"skeleton-header\">\n                      ${this.renderAvatar()}\n                      ${this.showTitle || this.paragraph\n                        ? html`\n                            <div class=\"skeleton-content\">\n                              ${this.showTitle ? this.renderTitle() : ''}\n                              ${this.paragraph ? this.renderParagraph() : ''}\n                            </div>\n                          `\n                        : ''}\n                    </div>\n                  `\n                : html`\n                    <div class=\"skeleton-content\">\n                      ${this.showTitle ? this.renderTitle() : ''}\n                      ${this.paragraph ? this.renderParagraph() : ''}\n                    </div>\n                  `}\n            `\n          : ''}\n      </div>\n    `;\n  }\n\n  override render() {\n    // If loading is false, show slotted content\n    if (!this.loading) {\n      return html`\n        <div class=\"skeleton-wrapper\">\n          <slot name=\"content\"><slot></slot></slot>\n        </div>\n      `;\n    }\n\n    // Show skeleton\n    return this.renderSkeleton();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-skeleton': NrSkeletonElement;\n  }\n}\n"]}