ngx-skeleton-loader - npm Package Compare versions

Comparing version 6.0.0 to 7.0.0

CHANGELOG.md

@@ -10,2 +10,50 @@ # Change Log
 
+## [7.0.0][] - 2023-02-04
+
+### Added
+
+- Adding support for extending global theme added via `NgxSkeletonLoaderModule.forRoot({ theme: /* ...list of CSS atributes */} })`
+
+By default when using `NgxSkeletonLoaderModule.forRoot({ theme: /* ...list of CSS atributes */} })` the application is using this value as source of truth, overriding any local theming passed to `<ngx-skeleton-loader>` component via `[theme]` input.
+
+By using `NgxSkeletonLoaderModule.forRoot({ theme: { extendsFromRoot: true, /* ...list of CSS atributes */} })` in your application, you should also be aware that:
+
+- By default, every `<ngx-skeleton-loader>` component will use `theme` coming from `NgxSkeletonLoaderModule.forRoot()` as the source of truth
+- If there's any CSS attribute on the component locally which overrides the CSS spec, it combines both themes, but overriding global CSS attributes in favor of local ones.
+
+```html
+<!-- 
+  // ... E.G: App is using this configuration below
+
+  NgxSkeletonLoaderModule.forRoot({
+    theme: {
+      // Enabliong theme combination
+      extendsFromRoot: true,
+      // ... list of CSS theme attributes
+      height: '30px',
+    },
+  }),
+-->
+
+<div class="item">
+  <ngx-skeleton-loader></ngx-skeleton-loader>
+  <!-- above line will produce a skeleton component using `height: 30px;`" -->
+  <ngx-skeleton-loader [theme]="{background: 'blue'}"></ngx-skeleton-loader>
+  <!-- above line will produce a skeleton component using `height: 30px; background: blue;`" -->
+  <ngx-skeleton-loader [theme]="{height: '50px', background: 'red'}"></ngx-skeleton-loader>
+  <!-- above line will produce a skeleton component using `height: 50px; background: red;`" -->
+</div>
+```
+
+- Adding new `custom-content` appearance. From now on, consumers can now add their own content inside `<ng-skeleton-loader></ng-skeleton-loader>` component. So that, they can add some custom content, such as SVG, as an example
+- Adding examples for `custom-content` usage
+
+### Updated
+
+- Updagrading module to Angular v15
+
+### Fixed
+
+- Removing build warnings
+
 ## [6.0.0][] - 2022-08-18
@@ -510,5 +558,7 @@
 [5.0.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v5.0.0
+[unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v6.0.0...HEAD
+[6.0.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v6.0.0
 
 
-[Unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v6.0.0...HEAD
-[6.0.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v6.0.0
+[Unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v7.0.0...HEAD
+[7.0.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v7.0.0

lib/ngx-skeleton-loader-config.types.d.ts

 import { InjectionToken } from '@angular/core';
 export declare type NgxSkeletonLoaderConfigTheme = {
+    extendsFromRoot?: boolean;
     [k: string]: any;
 } | null;
 export interface NgxSkeletonLoaderConfig {
-    appearance: 'circle' | 'line' | '';
+    appearance: 'circle' | 'line' | 'custom-content' | '';
     animation: 'progress' | 'progress-dark' | 'pulse' | 'false' | false;
@@ -8,0 +9,0 @@ theme: NgxSkeletonLoaderConfigTheme;

lib/ngx-skeleton-loader.component.d.ts

@@ -5,2 +5,3 @@ import { OnInit, OnDestroy, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
 export declare class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+    private config?;
     static ngAcceptInputType_count: number | string;
@@ -15,3 +16,3 @@ static ngAcceptInputType_animation: boolean | string;
     items: Array<any>;
-    constructor(config?: NgxSkeletonLoaderConfig);
+    constructor(config?: NgxSkeletonLoaderConfig | undefined);
     ngOnInit(): void;
@@ -23,3 +24,3 @@ private validateInputValues;
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxSkeletonLoaderComponent, "ngx-skeleton-loader", never, { "count": "count"; "loadingText": "loadingText"; "appearance": "appearance"; "animation": "animation"; "ariaLabel": "ariaLabel"; "theme": "theme"; }, {}, never, ["*"], false, never>;
 }

package.json

 {
   "name": "ngx-skeleton-loader",
   "description": "Make beautiful, animated loading skeletons that automatically adapt to your Angular apps",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "peerDependencies": {
@@ -40,3 +40,3 @@ "@angular/common": ">=8.0.0",
   "fesm2015": "fesm2015/ngx-skeleton-loader.mjs",
-  "typings": "ngx-skeleton-loader.d.ts",
+  "typings": "index.d.ts",
   "exports": {
@@ -47,3 +47,3 @@ "./package.json": {
     ".": {
-      "types": "./ngx-skeleton-loader.d.ts",
+      "types": "./index.d.ts",
       "esm2020": "./esm2020/ngx-skeleton-loader.mjs",
@@ -50,0 +50,0 @@ "es2020": "./fesm2020/ngx-skeleton-loader.mjs",

README.md

@@ -121,2 +121,55 @@ # NGX Skeleton loader
 
+#### Extending `theme` via `NgxSkeletonLoaderModule.forRoot()`
+
+> By default when using `NgxSkeletonLoaderModule.forRoot({ theme: /* ...list of CSS atributes */} })` the application is using this value as source of truth, overriding any local theming passed to `<ngx-skeleton-loader>` component via `[theme]` input. Check these steps in case you need to change this behaviour in your app
+
+This method is also accepting the option of having a global theme and local theme inputs. You can enable it by passing `NgxSkeletonLoaderModule.forRoot({ theme: { extendsFromRoot: true, /* ...list of CSS atributes */} })` in your module. Quite simple, right? 😄
+
+By using that configuration in your application, you should also be aware that:
+
+- By default, every `<ngx-skeleton-loader>` component will use `theme` coming from `NgxSkeletonLoaderModule.forRoot()` as the source of truth
+- If there's any CSS attribute on the component locally which overrides the CSS spec, it combines both themes, but overriding global CSS attributes in favor of local ones.
+
+As an example:
+
+```typescript
+...
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+...
+
+@NgModule({
+  declarations: [
+    YourAppComponent
+  ],
+  imports: [
+    ...
+    NgxSkeletonLoaderModule.forRoot({
+      theme: {
+        // Enabliong theme combination
+        extendsFromRoot: true,
+        // ... list of CSS theme attributes
+        height: '30px',
+      },
+    }),
+    ...
+  ],
+  providers: [],
+  bootstrap: [YourAppComponent]
+})
+
+export class YourAppComponent {}
+
+```
+
+```html
+<div class="item">
+  <ngx-skeleton-loader></ngx-skeleton-loader>
+  <!-- above line will produce a skeleton component using `height: 30px;`" -->
+  <ngx-skeleton-loader [theme]="{background: 'blue'}"></ngx-skeleton-loader>
+  <!-- above line will produce a skeleton component using `height: 30px; background: blue;`" -->
+  <ngx-skeleton-loader [theme]="{height: '50px', background: 'red'}"></ngx-skeleton-loader>
+  <!-- above line will produce a skeleton component using `height: 50px; background: red;`" -->
+</div>
+```
+
 ## WAI-ARIA values
@@ -136,2 +189,3 @@
 - `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;
 
@@ -138,0 +192,0 @@ ## Animations

New alerts

Long strings

Supply chain risk

Contains 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 risk

Contains 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

122074

increased by13.99%

Lines of code

511

increased by8.26%

Number of lines in readme file

346

increased by18.49%

No dependency changes