ngx-skeleton-loader
Advanced tools
ngx-skeleton-loader - npm Package Compare versions
Comparing version
@@ -10,2 +10,9 @@ # Change Log | ||
| ## [11.2.1][] - 2025-06-27 | ||
| ### Changed | ||
| - Adding new appearance `square` | ||
| - Fixing `peerDependencies` install | ||
| ## [11.2.0][] - 2025-06-09 | ||
@@ -17,3 +24,3 @@ | ||
| ### Updated | ||
| ### Changed | ||
@@ -28,3 +35,3 @@ - Upgrading Angular deps to v20 | ||
| ### Updated | ||
| ### Changed | ||
| - Upgrade project to use eslint v9 | ||
@@ -35,3 +42,3 @@ - Updating docs to reflect standalone `provideNgxSkeletonLoader()` support | ||
| ### Updated | ||
| ### Changed | ||
| - Upgrading project to use Node.js v22.14.0 | ||
@@ -46,3 +53,3 @@ - Upgrading project to Angular v19 | ||
| ### Updated | ||
| ### Changed | ||
@@ -59,3 +66,3 @@ > Thanks to @lekhmanrus | ||
| ## [9.0.0][] - 2024-01-13 | ||
| ### Updated | ||
| ### Changed | ||
@@ -71,5 +78,5 @@ - Upgrading `@angular/*` packages to v17 | ||
| ### Updated | ||
| ### Changed | ||
| - Updated input values validation in order to remove optional chaining. Instead, the code is now using object destructuring to get config theme value; | ||
| - Changed input values validation in order to remove optional chaining. Instead, the code is now using object destructuring to get config theme value; | ||
@@ -90,3 +97,3 @@ ## [8.0.2][] - 2023-09-11 | ||
| ### Updated | ||
| ### Changed | ||
@@ -141,3 +148,3 @@ - Updating project to support Angular v16; | ||
| ### Updated | ||
| ### Changed | ||
@@ -152,3 +159,3 @@ - Updagrading module to Angular v15 | ||
| ### Updated | ||
| ### Changed | ||
@@ -164,3 +171,3 @@ - Adding Publishing setup using NPX | ||
| ### Updated | ||
| ### Changed | ||
@@ -221,3 +228,3 @@ > Thanks @yharaskrik | ||
| ### Updated | ||
| ### Changed | ||
@@ -236,3 +243,3 @@ - Updating link in README.md | ||
| ### Updated | ||
| ### Changed | ||
@@ -251,3 +258,3 @@ - Updating examples with new features | ||
| ### Updated | ||
| ### Changed | ||
@@ -264,3 +271,3 @@ - Adding `ngOnChange` to validate `count` input in case of changes via binding | ||
| ### Updated | ||
| ### Changed | ||
@@ -286,3 +293,3 @@ - Updating `perf-marks` to `v1.14.1` | ||
| ### Updated | ||
| ### Changed | ||
@@ -353,3 +360,3 @@ - Using OnPush as changeDetection mechanism into ngx-skeleton-loader component | ||
| ### Updated | ||
| ### Changed | ||
@@ -379,3 +386,3 @@ - Upgrading NodeJS to v14.11.0 | ||
| ### Updated | ||
| ### Changed | ||
@@ -386,3 +393,3 @@ - Bumping `perf-marks` to latest version | ||
| ### Updated | ||
| ### Changed | ||
@@ -397,3 +404,3 @@ - Bumping `perf-marks` to latest version | ||
| ### Updated | ||
| ### Changed | ||
@@ -409,3 +416,3 @@ - Updating examples with new skeleton simulation | ||
| ### Updated | ||
| ### Changed | ||
@@ -421,3 +428,3 @@ - Updating examples with new skeleton simulation | ||
| ### Updated | ||
| ### Changed | ||
@@ -434,3 +441,3 @@ - Updating `npm run postinstall` command to follow the new rules from update.angular.io website | ||
| ### Updated | ||
| ### Changed | ||
@@ -442,3 +449,3 @@ - Upgrading @angular/cli to version 9 | ||
| ### Updated | ||
| ### Changed | ||
@@ -486,3 +493,3 @@ - Upgrading NodeJS to v12.16.2 | ||
| ### Updated | ||
| ### Changed | ||
@@ -506,3 +513,3 @@ - Decreasing bundle size after disable Ivy in production build | ||
| ### Updated | ||
| ### Changed | ||
@@ -526,3 +533,3 @@ - Updating Github templates | ||
| ### Updated | ||
| ### Changed | ||
@@ -533,3 +540,3 @@ - Updating Angular CLI to v8 | ||
| ### Updated | ||
| ### Changed | ||
@@ -544,3 +551,3 @@ - Updating Angular CLI to 7.3.8 | ||
| ### Updated | ||
| ### Changed | ||
@@ -566,3 +573,3 @@ - Removing unnecessary CSS styles for skeleton | ||
| ### Updated | ||
| ### Changed | ||
@@ -672,3 +679,4 @@ - Decreased bundle size | ||
| [6.0.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v6.0.0 | ||
| [Unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v11.2.0...HEAD | ||
| [Unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v11.2.1...HEAD | ||
| [11.2.1]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v11.2.0...v11.2.1 | ||
| [11.2.0]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v11.1.0...v11.2.0 | ||
@@ -675,0 +683,0 @@ [11.1.0]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v11.0.0...v11.1.0 |
@@ -10,3 +10,3 @@ import * as _angular_core from '@angular/core'; | ||
| interface NgxSkeletonLoaderConfig { | ||
| appearance: 'circle' | 'line' | 'custom-content' | ''; | ||
| appearance: 'circle' | 'line' | 'custom-content' | 'square' | ''; | ||
| animation: 'progress' | 'progress-dark' | 'pulse' | 'pulse-dark' | 'false' | false; | ||
@@ -17,2 +17,3 @@ theme: NgxSkeletonLoaderConfigTheme; | ||
| ariaLabel: string; | ||
| size?: number | `${number}` | `${number}px` | null; | ||
| } | ||
@@ -53,3 +54,3 @@ declare const NGX_SKELETON_LOADER_CONFIG: InjectionToken<NgxSkeletonLoaderConfig>; | ||
| */ | ||
| readonly appearance: _angular_core.InputSignal<"" | "circle" | "line" | "custom-content">; | ||
| readonly appearance: _angular_core.InputSignal<"" | "circle" | "line" | "custom-content" | "square">; | ||
| /** | ||
@@ -81,2 +82,9 @@ * The `animation` property is an input that determines the type of animation to apply to the | ||
| /** | ||
| * The `size` property is an input that determines the size of the skeleton loader. | ||
| * It is initialized with the value from the `NgxSkeletonLoaderConfig` object, or `null` if the | ||
| * config is not provided. | ||
| * The size can be specified as a number (in pixels) or a string (e.g., '50px', '200'). | ||
| */ | ||
| readonly size: _angular_core.InputSignal<number | `${number}` | `${number}px` | null | undefined>; | ||
| /** | ||
| * The `items` property is a computed property that generates an array of indices based on the | ||
@@ -91,2 +99,12 @@ * `count` input. | ||
| /** | ||
| * The `squareSize` property is a computed property that calculates the size of the skeleton | ||
| * loader when the appearance is set to 'square'. | ||
| * It checks the `size` input and ensures that it is a valid number or string representing a | ||
| * valid pixel value. If the `size` is not a valid number or string, it returns `null`. | ||
| * If the `appearance` is not 'square', it also returns `null`. | ||
| * This computed property is used to set the width and height of the skeleton loader when it | ||
| * is displayed as a square. | ||
| */ | ||
| readonly squareSize: _angular_core.Signal<string | null>; | ||
| /** | ||
| * A computed property that returns the final theme configuration for the skeleton loader. | ||
@@ -98,5 +116,9 @@ * If the `extendsFromRoot` property is set in the `NgxSkeletonLoaderConfig`, the theme is merged | ||
| */ | ||
| readonly styles: _angular_core.Signal<NgxSkeletonLoaderConfigTheme>; | ||
| readonly styles: _angular_core.Signal<{ | ||
| width?: string | undefined; | ||
| height?: string | undefined; | ||
| extendsFromRoot?: boolean; | ||
| }>; | ||
| static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxSkeletonLoaderComponent, never>; | ||
| static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxSkeletonLoaderComponent, "ngx-skeleton-loader", never, { "count": { "alias": "count"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>; | ||
| static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxSkeletonLoaderComponent, "ngx-skeleton-loader", never, { "count": { "alias": "count"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>; | ||
| } | ||
@@ -103,0 +125,0 @@ |
| { | ||
| "name": "ngx-skeleton-loader", | ||
| "description": "Make beautiful, animated loading skeletons that automatically adapt to your Angular apps", | ||
| "version": "11.2.0", | ||
| "version": "11.2.1", | ||
| "peerDependencies": { | ||
| "@angular/common": ">=20.0.0", | ||
| "@angular/core": ">=20.0.0" | ||
| "@angular/common": ">=19.0.0", | ||
| "@angular/core": ">=19.0.0" | ||
| }, | ||
@@ -9,0 +9,0 @@ "license": "MIT", |
@@ -118,2 +118,5 @@ # NGX Skeleton loader | ||
| </div> | ||
| <div class="item"> | ||
| <ngx-skeleton-loader count="5" appearance="square" size="100px" /> | ||
| </div> | ||
| ``` | ||
@@ -236,3 +239,4 @@ | ||
| - `circle`: it will use `circle` as appearance. Great for avatar skeletons, for example :); | ||
| - `custom-content`: it will NOT add any appearance. Great for custom content, such as SVG, internal components and such; | ||
| - `square`: it will use `square` as appearance and render it appropriately. Great for cards and images, for example; It also requires `size` to be passed through the component - `size` has default size of `40px`; | ||
| - `custom-content`: it will NOT add any appearance. Great for custom content, such as SVG, internal components and such. Although not rendering appearance, animation will be added unless component has `animation="false"` prop; | ||
@@ -239,0 +243,0 @@ ## Animations |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
86960
7.94%- Lines of code
335
20.07%- Number of lines in readme file
398
1.02%