Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
ngx-skeleton-loader
Advanced tools
ngx-skeleton-loader - npm Package Compare versions
Comparing version 4.0.0 to 5.0.0
| import { OnInit, OnDestroy, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core'; | ||
| import { NgxSkeletonLoaderConfig, NgxSkeletonLoaderConfigTheme } from './ngx-skeleton-loader-config.types'; | ||
| import * as i0 from "@angular/core"; | ||
| export declare class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges { | ||
@@ -19,2 +20,4 @@ static ngAcceptInputType_count: number | string; | ||
| ngOnDestroy(): void; | ||
| static ɵfac: i0.ɵɵFactoryDeclaration<NgxSkeletonLoaderComponent, [{ optional: true; }]>; | ||
| static ɵcmp: i0.ɵɵComponentDeclaration<NgxSkeletonLoaderComponent, "ngx-skeleton-loader", never, { "count": "count"; "loadingText": "loadingText"; "appearance": "appearance"; "animation": "animation"; "ariaLabel": "ariaLabel"; "theme": "theme"; }, {}, never, never>; | ||
| } |
| import { ModuleWithProviders } from '@angular/core'; | ||
| import { NgxSkeletonLoaderConfig } from './ngx-skeleton-loader-config.types'; | ||
| import * as i0 from "@angular/core"; | ||
| import * as i1 from "./ngx-skeleton-loader.component"; | ||
| import * as i2 from "@angular/common"; | ||
| export declare class NgxSkeletonLoaderModule { | ||
| static forRoot(config?: Partial<NgxSkeletonLoaderConfig>): ModuleWithProviders<NgxSkeletonLoaderModule>; | ||
| static ɵfac: i0.ɵɵFactoryDeclaration<NgxSkeletonLoaderModule, never>; | ||
| static ɵmod: i0.ɵɵNgModuleDeclaration<NgxSkeletonLoaderModule, [typeof i1.NgxSkeletonLoaderComponent], [typeof i2.CommonModule], [typeof i1.NgxSkeletonLoaderComponent]>; | ||
| static ɵinj: i0.ɵɵInjectorDeclaration<NgxSkeletonLoaderModule>; | ||
| } |
| /** | ||
| * Generated bundle index. Do not edit. | ||
| */ | ||
| /// <amd-module name="ngx-skeleton-loader" /> | ||
| export * from './public-api'; |
| { | ||
| "name": "ngx-skeleton-loader", | ||
| "description": "Make beautiful, animated loading skeletons that automatically adapt to your Angular apps", | ||
| "version": "4.0.0", | ||
| "version": "5.0.0", | ||
| "peerDependencies": { | ||
@@ -25,3 +25,3 @@ "@angular/common": ">=8.0.0", | ||
| "perf-marks": "^1.13.4", | ||
| "tslib": "^1.10.0" | ||
| "tslib": "^2.0.0" | ||
| }, | ||
@@ -36,10 +36,22 @@ "repository": { | ||
| "homepage": "https://github.com/willmendesneto/ngx-skeleton-loader#readme", | ||
| "main": "bundles/ngx-skeleton-loader.umd.js", | ||
| "module": "fesm2015/ngx-skeleton-loader.js", | ||
| "es2015": "fesm2015/ngx-skeleton-loader.js", | ||
| "esm2015": "esm2015/ngx-skeleton-loader.js", | ||
| "fesm2015": "fesm2015/ngx-skeleton-loader.js", | ||
| "module": "fesm2015/ngx-skeleton-loader.mjs", | ||
| "es2020": "fesm2020/ngx-skeleton-loader.mjs", | ||
| "esm2020": "esm2020/ngx-skeleton-loader.mjs", | ||
| "fesm2020": "fesm2020/ngx-skeleton-loader.mjs", | ||
| "fesm2015": "fesm2015/ngx-skeleton-loader.mjs", | ||
| "typings": "ngx-skeleton-loader.d.ts", | ||
| "metadata": "ngx-skeleton-loader.metadata.json", | ||
| "exports": { | ||
| "./package.json": { | ||
| "default": "./package.json" | ||
| }, | ||
| ".": { | ||
| "types": "./ngx-skeleton-loader.d.ts", | ||
| "esm2020": "./esm2020/ngx-skeleton-loader.mjs", | ||
| "es2020": "./fesm2020/ngx-skeleton-loader.mjs", | ||
| "es2015": "./fesm2015/ngx-skeleton-loader.mjs", | ||
| "node": "./fesm2015/ngx-skeleton-loader.mjs", | ||
| "default": "./fesm2020/ngx-skeleton-loader.mjs" | ||
| } | ||
| }, | ||
| "sideEffects": false | ||
| } |
293
README.md
@@ -1,291 +0,24 @@ | ||
| # NGX Skeleton loader | ||
| # NgxSkeletonLoader | ||
| [](https://npmjs.org/ngx-skeleton-loader) | ||
| [](https://stackblitz.com/edit/ngx-skeleton-loader-sample) | ||
| [](https://stackblitz.com/edit/ngx-skeleton-loader-user-card-component-sample) | ||
| This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.0. | ||
| [](https://npmjs.org/ngx-skeleton-loader) | ||
| [](https://npmjs.org/ngx-skeleton-loader) | ||
| ## Code scaffolding | ||
| [](https://circleci.com/gh/willmendesneto/ngx-skeleton-loader) | ||
| [](https://coveralls.io/r/willmendesneto/ngx-skeleton-loader?branch=master) | ||
| [](https://bundlephobia.com/result?p=ngx-skeleton-loader) | ||
| [](/LICENSE) | ||
| Run `ng generate component component-name --project ngx-skeleton-loader` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-skeleton-loader`. | ||
| > Note: Don't forget to add `--project ngx-skeleton-loader` or else it will be added to the default project in your `angular.json` file. | ||
|  | ||
| ## Build | ||
| ## Why skeletons? | ||
| Run `ng build ngx-skeleton-loader` to build the project. The build artifacts will be stored in the `dist/` directory. | ||
| > If you want to get more details about that, please read ["NGX-Skeleton-Loader — States, Animations, Performance, and Accessibility for your Angular App"](https://willmendesneto.com/posts/ngx-skeleton-loader-states-animations-performance-and-accessibility-for-your-angular-app) blog post | ||
| ## Publishing | ||
| The idea of this component is make the process transparent and easier. So the main point is integrate this component with other tooling process, such as: | ||
| After building your library with `ng build ngx-skeleton-loader`, go to the dist folder `cd dist/ngx-skeleton-loader` and run `npm publish`. | ||
| - Server-side rendering; | ||
| - Progressive rendering; | ||
| - Any other that you like :) | ||
| ## Running unit tests | ||
| It's totally transparent for you and you can integrate easier in your application, improving your user experience 🎉 | ||
| Run `ng test ngx-skeleton-loader` to execute the unit tests via [Karma](https://karma-runner.github.io). | ||
| - [Demo](#demo) | ||
| - [Install](#install) | ||
| - [Setup](#setup) | ||
| - [Development](#development) | ||
| - [Contribute](#contribute) | ||
| ## Further help | ||
| ## Demo | ||
| Try out our demos on Stackblitz! | ||
| - [Usage: animations, appearance, and themes](https://ngx-skeleton-loader-sample.stackblitz.io) | ||
| - [User Card Component Loading simulation using NGX Skeleton Loader](https://ngx-skeleton-loader-user-card-component-sample.stackblitz.io) | ||
| ## Install | ||
| You can get it on NPM installing `ngx-skeleton-loader` module as a project dependency. | ||
| ```shell | ||
| npm install ngx-skeleton-loader --save | ||
| ``` | ||
| ## Setup | ||
| You'll need to add `NgxSkeletonLoaderModule` to your application module. So that, the `<ngx-skeleton-loader>` components will be accessible in your application. | ||
| ```typescript | ||
| ... | ||
| import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; | ||
| ... | ||
| @NgModule({ | ||
| declarations: [ | ||
| YourAppComponent | ||
| ], | ||
| imports: [ | ||
| ... | ||
| NgxSkeletonLoaderModule, | ||
| ... | ||
| ], | ||
| providers: [], | ||
| bootstrap: [YourAppComponent] | ||
| }) | ||
| export class YourAppComponent {} | ||
| ``` | ||
| After that, you can use the `ngx-skeleton-loader` components in your templates, passing the configuration data into the component itself. | ||
| - `ngx-skeleton-loader`: Handle the skeleton animation and the skeleton styles of your app; | ||
| ```html | ||
| <div class="item"> | ||
| <ngx-skeleton-loader count="5" appearance="circle"></ngx-skeleton-loader> | ||
| </div> | ||
| ``` | ||
| ### Using `NgxSkeletonLoaderModule.forRoot()` | ||
| Also, you can import the module in your app by calling `NgxSkeletonLoaderModule.forRoot()` when adding it. So it will be available across your Angular application. | ||
| Importing the module this way also allows you to globally configure the default values for the `ngx-skeleton-loader` components in your application, in case you need some different default values for your app. | ||
| ```typescript | ||
| ... | ||
| import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; | ||
| ... | ||
| @NgModule({ | ||
| declarations: [ | ||
| YourAppComponent | ||
| ], | ||
| imports: [ | ||
| ... | ||
| NgxSkeletonLoaderModule.forRoot({ animation: 'pulse', loadingText: 'This item is actually loading...' }), | ||
| ... | ||
| ], | ||
| providers: [], | ||
| bootstrap: [YourAppComponent] | ||
| }) | ||
| export class YourAppComponent {} | ||
| ``` | ||
| ```html | ||
| <div class="item"> | ||
| <ngx-skeleton-loader count="5" appearance="circle"></ngx-skeleton-loader> | ||
| <!-- above line will produce the rendering of 5 circles with the pulse animation and the aria-valuetext attribute set with "This item is actually loading..." --> | ||
| </div> | ||
| ``` | ||
| ## WAI-ARIA values | ||
| - loadingText - _default_ `Loading...`: attribute that defines the text value for `aria-valuetext` attribute. Defaults to "Loading..." | ||
| - `aria-label` - _default_ `loading`: you can add `ariaLabel` as input of the component to set a different value. | ||
| ## Appearance | ||
| You can also define which appearance want to use in your skeleton loader by passing the options in your component via `[appearance]` attribute. | ||
| ### Options | ||
| - `''` - _default_: it will use it `''` as appearance. At the end, it will render like a line; | ||
| - `line`: it will render like a line. This is the same behavior as passing an empty string; | ||
| - `circle`: it will use `circle` as appearance. Great for avatar skeletons, for example :); | ||
| ## Animations | ||
| You can also define which CSS animation you want to use - even not use any, if it's the case - in your skeleton loader by passing the options in your component via `[animation]` attribute. | ||
| ### Options | ||
| - `"false"` (as string): it will disable the animation; | ||
| - `false` (as boolean): it will disable the animation. Animation will receive `false` as string when attribute field it's not using binding. Component now can receive `false` (boolean), "false" (string), or any other animation type via binding; | ||
| - `progress` - _default_: it will use it `progress` as animation; | ||
| - `progress-dark`: it will use it `progress-dark` as animation. Recommended if your color schema is darken; | ||
| - `pulse`: it will use `pulse` as animation; | ||
| > `progress` is the default animation, used as the single one previously. If you don't pass the animation attribute, it defaults to `progress`. | ||
| ```html | ||
| <!-- | ||
| If you need to change all the background wrapper | ||
| you need to apply the style changes on the | ||
| `ngx-skeleton-loader` component wrapper | ||
| --> | ||
| <div class="item"> | ||
| <!-- Disables the animation --> | ||
| <ngx-skeleton-loader animation="false"></ngx-skeleton-loader> | ||
| <!-- Disables the animation, but receiving boolean value from binding --> | ||
| <!-- Via binding it can receive `false` (boolean), "false" (string), or any other animation type --> | ||
| <ngx-skeleton-loader [animation]="classAttributeWithBooleanFalseValue"></ngx-skeleton-loader> | ||
| <!-- Uses `progress` as animation --> | ||
| <ngx-skeleton-loader animation="progress"></ngx-skeleton-loader> | ||
| <ngx-skeleton-loader></ngx-skeleton-loader> | ||
| <!-- Uses `pulse` as animation --> | ||
| <ngx-skeleton-loader animation="pulse"></ngx-skeleton-loader> | ||
| </div> | ||
| ``` | ||
| > You can check the code details in the [Stackblitz Live Demo Link](https://stackblitz.com/edit/ngx-skeleton-loader-sample?file=app%2Fapp.component.html) | ||
| ## Theming | ||
| You can also define different styles for the skeleton loader by passing an object with the css styles - in dashed case - into the component via `[theme]` attribute. | ||
| ```html | ||
| <!-- | ||
| If you need to change all the background wrapper | ||
| you need to apply the style changes on the | ||
| `ngx-skeleton-loader` component wrapper | ||
| --> | ||
| <div style="background: #FF0001; padding: 10px;"> | ||
| <ngx-skeleton-loader | ||
| count="5" | ||
| [theme]="{ | ||
| 'border-radius': '5px', | ||
| height: '50px', | ||
| 'background-color': '#992929', | ||
| border: '1px solid white' | ||
| }" | ||
| ></ngx-skeleton-loader> | ||
| </div> | ||
| ``` | ||
| The [theme] attribute now accepts the same configuration as `ngStyle` as well. That means you can manage to use like you're doing with the built-in directive, having a pleasure and beautiful experience | ||
| ```html | ||
| <!-- | ||
| Note that we are using a combination of styles and ngStyle inside theme object, | ||
| having `height.px` receiving a number and `background-color` receiving a HEX Color | ||
| --> | ||
| <div style="background: #FF0001; padding: 10px;"> | ||
| <ngx-skeleton-loader | ||
| count="5" | ||
| [theme]="{ | ||
| 'height.px': 50, | ||
| 'background-color': '#992929' | ||
| }" | ||
| ></ngx-skeleton-loader> | ||
| </div> | ||
| ``` | ||
| ### ⚠️ This is here only as a documentation, but it's not encouraged to be used. Please consider use it with caution ⚠️ | ||
| Also, you can use CSS to add theme styles into your component. However, there are some implications: | ||
| - You're using `:host` in your stylesheet, which means **you are aware of any possible problem `:host` can create for your app at that level since it's based on [`:host` DOM style scoping](https://developer.mozilla.org/en-US/docs/Web/CSS/:host)** | ||
| - You're adding stylesheet based on `<ngx-skeleton-loader>` internal classes. It means that **class naming changes on module's side will be breaking changes for your application as well**. | ||
| As an example, your Component file is like this | ||
| ```typescript | ||
| import { Component } from '@angular/core'; | ||
| @Component({ | ||
| selector: 'my-ngx-skeleton-loader-with-theming', | ||
| templateUrl: './my-ngx-skeleton-loader-with-theming.component.html', | ||
| styleUrls: ['./my-ngx-skeleton-loader-with-theming.component.css'], | ||
| }) | ||
| export class MyNGXSkeletonLoaderWithThemingComponent { | ||
| /* ... code goes here*/ | ||
| } | ||
| ``` | ||
| And your component HTML code is | ||
| ```html | ||
| <!-- | ||
| file: my-ngx-skeleton-loader-with-theming.component.html | ||
| As an example, it's not using themes via [theme] attributes. | ||
| --> | ||
| <ngx-skeleton-loader count="5" animation="pulse"></ngx-skeleton-loader> | ||
| ``` | ||
| You can apply theme changes in our stylesheet. At the end it will be | ||
| ```css | ||
| /* file: `my-ngx-skeleton-loader-with-theming.component.css` | ||
| * | ||
| * You can find more details about `:host` at | ||
| * Angular Component Style Docs https://angular.io/guide/component-styles#host | ||
| */ | ||
| :host >>> ngx-skeleton-loader .loader { | ||
| border-radius: 5px; | ||
| height: 50px; | ||
| background-color: #992929; | ||
| border: 1px solid white; | ||
| } | ||
| ``` | ||
| > You should change the styles on the skeleton wrapper element in case you need to change the background color. You can check the code details in the [Stackblitz Live Demo Link](https://stackblitz.com/edit/ngx-skeleton-loader-sample?file=app%2Fapp.component.html) or check it out a content load simulation [in this Stackblitz Live Demo Link](https://stackblitz.com/edit/ngx-skeleton-loader-user-card-component-sample?file=app%2Fapp.component.html) | ||
| ## Development | ||
| ### Run demo locally | ||
| 1. This project uses [Angular CLI](https://cli.angular.io/) as base. That means you just need to run `npm start` and access the link `http://localhost:4200` in your browser | ||
| ### Run tests | ||
| 1. Run `npm test` for run tests. In case you want to test using watch, please use `npm run tdd` | ||
| ### Publish | ||
| this project is using `np` package to publish, which makes things straightforward. EX: `np <patch|minor|major> --contents=dist/ngx-skeleton-loader` | ||
| > For more details, [please check np package on npmjs.com](https://www.npmjs.com/package/np) | ||
| ## Contribute | ||
| For any type of contribution, please follow the instructions in [CONTRIBUTING.md](https://github.com/willmendesneto/ngx-skeleton-loader/blob/master/CONTRIBUTING.md) and read [CODE_OF_CONDUCT.md](https://github.com/willmendesneto/ngx-skeleton-loader/blob/master/CODE_OF_CONDUCT.md) files. | ||
| ## Author | ||
| **Wilson Mendes (willmendesneto)** | ||
| - <https://twitter.com/willmendesneto> | ||
| - <http://github.com/willmendesneto> | ||
| To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-38.2%
72375
- Number of package files
- decreased by-27.27%
16
- Lines of code
- decreased by-32.17%
466
- Number of lines in readme file
- decreased by-91.44%
25
- Number of low supply chain risk alerts
- increased by50%
6
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
- Removedtslib@1.14.1(transitive)
Updatedtslib@^2.0.0