ngx-skeleton-loader/fesm2022/ngx-skeleton-loader.mjs.map

Make beautiful, animated loading skeletons that automatically adapt to your Angular apps

{"version":3,"file":"ngx-skeleton-loader.mjs","sources":["../../../projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader-config.types.ts","../../../projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.ts","../../../projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.html","../../../projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.module.ts","../../../projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.providers.ts","../../../projects/ngx-skeleton-loader/src/public-api.ts","../../../projects/ngx-skeleton-loader/src/ngx-skeleton-loader.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport type NgxSkeletonLoaderConfigTheme = {\n  /** It enforces a combination of `fromRoot` styles with component `styles` attribute */\n  extendsFromRoot?: boolean;\n  // This is required since [style] is using `any` as well\n  // More details in https://angular.dev/api/common/NgStyle\n  [k: string]: any;\n} | null;\n\nexport interface NgxSkeletonLoaderConfig {\n  appearance: 'circle' | 'line' | 'custom-content' | 'square' | '';\n  animation: 'progress' | 'progress-dark' | 'pulse' | 'pulse-dark' | 'false' | false;\n  theme: NgxSkeletonLoaderConfigTheme;\n  loadingText: string;\n  count: number;\n  ariaLabel: string;\n  size?: number | `${number}` | `${number}px` | null;\n}\n\nexport const NGX_SKELETON_LOADER_CONFIG = new InjectionToken<NgxSkeletonLoaderConfig>('ngx-skeleton-loader.config');\n","import {\n  Component,\n  isDevMode,\n  ChangeDetectionStrategy,\n  input,\n  inject,\n  numberAttribute,\n  computed,\n} from '@angular/core';\nimport {\n  NgxSkeletonLoaderConfig,\n  NgxSkeletonLoaderConfigTheme,\n  NGX_SKELETON_LOADER_CONFIG,\n} from './ngx-skeleton-loader-config.types';\n\n/**\n * The `NgxSkeletonLoaderComponent` is a standalone Angular component that provides a skeleton\n * loader UI element.\n * It can be used to display a loading state before the actual content is available.\n * The component can be configured with various options such as the number of elements, appearance,\n * animation, and theme.\n */\n@Component({\n  selector: 'ngx-skeleton-loader',\n  templateUrl: './ngx-skeleton-loader.html',\n  styleUrls: ['./ngx-skeleton-loader.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class NgxSkeletonLoaderComponent {\n  /**\n   * Injects the `NgxSkeletonLoaderConfig` configuration object, which is optional.\n   * This configuration object provides various options for customizing the behavior\n   * and appearance of the `NgxSkeletonLoaderComponent`.\n   */\n  readonly #config = inject<NgxSkeletonLoaderConfig>(NGX_SKELETON_LOADER_CONFIG, { optional: true});\n  /**\n   * The `count` property is an input that determines the number of skeleton loader elements\n   * to display.\n   * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or 1 if the config\n   * is not provided.\n   * The `transform: numberAttribute` option ensures that the input value is converted to a number.\n   */\n  readonly count = input(this.#config?.count || 1, { transform: numberAttribute });\n  /**\n   * The `loadingText` property is an input that determines the text to display while the content\n   * is loading.\n   * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or 'Loading...'\n   * if the config is not provided.\n   */\n  readonly loadingText = input<NgxSkeletonLoaderConfig['loadingText']>(this.#config?.loadingText || 'Loading...');\n  /**\n   * The `appearance` property is an input that determines the visual appearance of the skeleton\n   * loader.\n   * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or 'line' if the\n   * config is not provided.\n   * The available appearance options are defined in the `NgxSkeletonLoaderConfig['appearance']`\n   * type.\n   */\n  readonly appearance = input<NgxSkeletonLoaderConfig['appearance']>(this.#config?.appearance || 'line');\n  /**\n   * The `animation` property is an input that determines the type of animation to apply to the\n   * skeleton loader.\n   * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or 'progress' if\n   * the config is not provided.\n   * The available animation options are defined in the `NgxSkeletonLoaderConfig['animation']` type.\n   */\n  readonly animation = input<NgxSkeletonLoaderConfig['animation']>(this.#config?.animation || 'progress');\n  /**\n   * The `ariaLabel` property is an input that determines the ARIA label to be used for the skeleton\n   * loader element. This is useful for providing accessibility information to screen readers.\n   * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or 'loading' if the\n   * config is not provided.\n   */\n  readonly ariaLabel = input<NgxSkeletonLoaderConfig['ariaLabel']>(this.#config?.ariaLabel || 'loading');\n  /**\n   * The `theme` property is an input that determines the theme configuration for the skeleton\n   * loader.\n   * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or `null` if the\n   * config is not provided.\n   * The theme configuration is defined by the `NgxSkeletonLoaderConfigTheme` type, which allows\n   * customizing various aspects of the skeleton loader's appearance, such as colors, animation,\n   * etc.\n   */\n  readonly theme = input<NgxSkeletonLoaderConfigTheme>(this.#config?.theme || null);\n  /**\n   * The `size` property is an input that determines the size of the skeleton loader.\n   * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or `null` if the\n   * config is not provided.\n   * The size can be specified as a number (in pixels) or a string (e.g., '50px', '200').\n   */\n  readonly size = input<NgxSkeletonLoaderConfig['size']>(this.#config?.size || null);\n  /**\n   * The `items` property is a computed property that generates an array of indices based on the\n   * `count` input.\n   * If the `appearance` is set to 'custom-content', the `count` is forced to 1 to ensure that the\n   * skeleton loader is displayed as a single DOM node, as required by the 'custom-content'\n   * appearance.\n   * This computed property is used to render the appropriate number of skeleton loader elements.\n   */\n  readonly items = computed(() => {\n    let count = this.count() || 1;\n    // Force count to 1 when custom-content is used\n    if (this.appearance() === 'custom-content') {\n      // Shows error message only in Development\n      if (isDevMode() && count !== 1) {\n        // eslint-disable-next-line no-console\n        console.error(\n          `\\`NgxSkeletonLoaderComponent\\` enforces elements with \"custom-content\" appearance as DOM nodes. Forcing \"count\" to \"1\".`,\n        );\n        count = 1;\n      }\n    }\n    return [...Array(count)].map((_, index) => index);\n  });\n  /**\n   * The `squareSize` property is a computed property that calculates the size of the skeleton\n   * loader when the appearance is set to 'square'.\n   * It checks the `size` input and ensures that it is a valid number or string representing a\n   * valid pixel value. If the `size` is not a valid number or string, it returns `null`.\n   * If the `appearance` is not 'square', it also returns `null`.\n   * This computed property is used to set the width and height of the skeleton loader when it\n   * is displayed as a square.\n   */\n  readonly squareSize = computed(() => {\n    const size = this.size();\n    if (this.appearance() !== 'square' ||\n      (typeof size !== 'number' && typeof size !== 'string')) {\n      return null;\n    }\n\n    const sizeValueInNumbersOnly = Number(size.toString().trim().replace(/\\D/g, ''));\n    if (!Number.isInteger(sizeValueInNumbersOnly)) {\n      return null;\n    }\n    return `${sizeValueInNumbersOnly}px`;\n  });\n  /**\n   * A computed property that returns the final theme configuration for the skeleton loader.\n   * If the `extendsFromRoot` property is set in the `NgxSkeletonLoaderConfig`, the theme is merged\n   * with the root theme configuration. Otherwise, the theme is returned as-is.\n   * This allows the skeleton loader to inherit global theme settings while still allowing for\n   * component-specific theme customization.\n   */\n  readonly styles = computed(() => {\n    const theme = this.theme();\n    const size = this.squareSize();\n\n    if (this.#config?.theme?.extendsFromRoot) {\n      return {\n        ...this.#config?.theme,\n        ...theme,\n        ...(size && { 'width': size, 'height': size })\n      };\n    }\n\n    return {\n      ...theme,\n      ...(size && { 'width': size, 'height': size })\n    };\n  });\n}\n","@let appearanceValue = appearance();\n@let animationValue = animation();\n@for (item of items(); track item) {\n  <div\n    class=\"skeleton-loader\"\n    [attr.aria-label]=\"ariaLabel()\"\n    aria-busy=\"true\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-valuetext]=\"loadingText()\"\n    role=\"progressbar\"\n    tabindex=\"-1\"\n    [class.custom-content]=\"appearanceValue === 'custom-content'\"\n    [class.circle]=\"appearanceValue === 'circle'\"\n    [class.square]=\"appearanceValue === 'square'\"\n    [class.progress]=\"animationValue === 'progress'\"\n    [class.progress-dark]=\"animationValue === 'progress-dark'\"\n    [class.pulse]=\"animationValue === 'pulse'\"\n    [class.pulse-dark]=\"animationValue === 'pulse-dark'\"\n    [style]=\"styles()\"\n    >\n    @if (appearanceValue  === 'custom-content') {\n      <ng-content></ng-content>\n    }\n  </div>\n}\n","import { ModuleWithProviders, NgModule } from '@angular/core';\n\nimport { NgxSkeletonLoaderComponent } from './ngx-skeleton-loader.component';\nimport { NgxSkeletonLoaderConfig, NGX_SKELETON_LOADER_CONFIG } from './ngx-skeleton-loader-config.types';\n\n@NgModule({\n  imports: [NgxSkeletonLoaderComponent],\n  exports: [NgxSkeletonLoaderComponent],\n})\nexport class NgxSkeletonLoaderModule {\n  static forRoot(config?: Partial<NgxSkeletonLoaderConfig>): ModuleWithProviders<NgxSkeletonLoaderModule> {\n    return {\n      ngModule: NgxSkeletonLoaderModule,\n      providers: [{ provide: NGX_SKELETON_LOADER_CONFIG, useValue: config }],\n    };\n  }\n}\n","import { makeEnvironmentProviders } from '@angular/core';\nimport { NgxSkeletonLoaderConfig, NGX_SKELETON_LOADER_CONFIG } from './ngx-skeleton-loader-config.types';\n\nexport function provideNgxSkeletonLoader(config?: Partial<NgxSkeletonLoaderConfig>) {\n  return makeEnvironmentProviders([\n    { provide: NGX_SKELETON_LOADER_CONFIG, useValue: config },\n  ]);\n}\n","/*\n * Public API Surface of ngx-skeleton-loader\n */\n\nexport * from './lib/ngx-skeleton-loader.component';\nexport * from './lib/ngx-skeleton-loader.module';\nexport * from './lib/ngx-skeleton-loader.providers';\nexport * from './lib/ngx-skeleton-loader-config.types';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}