Skip to content

Commit

Permalink
Merge pull request #1 from DesarrolloORT/build/updateLib
Browse files Browse the repository at this point in the history 
feat: update ngx-whats-new to Angular v18
  • Loading branch information
@4gray
4gray authored Oct 28, 2024
2 parents 5e87a8e + 3d28498 commit c726660
Show file tree
Hide file tree
Showing 37 changed files with 31,093 additions and 15,665 deletions.
212 changes: 136 additions & 76 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,107 +12,167 @@ Ngx-whats-new is an angular module with a multi-modal component that is typicall

[Codesandbox example](https://codesandbox.io/s/ngx-whats-new-demo-nxc8b?file=/src/main.ts)

Import the module:

```
import { NgModule } from '@angular/core';
import { NgxWhatsNewModule } from 'ngx-whats-new';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [NgxWhatsNewModule],
bootstrap: [AppComponent],
})
export class AppModule {}
Import the component:

```typescript
import { NgModule } from "@angular/core";
import { NgxWhatsNewComponent } from "ngx-whats-new";
import { AppComponent } from "./app.component";

@NgModule({
declarations: [AppComponent],
imports: [NgxWhatsNewComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
```

Use `<ngx-whats-new>` in your component:

app.component.html
```
<button (click)="showDialog()">Open Dialog</button>
<ngx-whats-new
*ngIf="isDialogVisible"
(closeModal)="closeDialog()"
[items]="modals"
[options]="options"
>
</ngx-whats-new>
```

```html
<button (click)="openDialog()">Open Dialog</button>

<ngx-whats-new
#whatsNew
(opened)="onOpen()"
(closed)="onClose()"
(navigation)="onNavigation($event)"
[items]="modals"
[options]="options"
/>
```

app.component.ts
```
/** initial state of the modal */
isDialogVisible = true;
/** global options */
options = {
disableClose: true,
customStyle: {

```typescript
@ViewChild('whatsNew') private readonly modal?: NgxWhatsNewComponent;

/** Options for the modal */
public options: DialogOptions = {
enableKeyboardNavigation: true,
clickableNavigationDots: true,
disableClose: false,
customStyle: {
width: '500px',
backgroundColor: '#fff',
borderSize: '1px',
textColor: '#222',
borderRadius: '10px',
boxShadow: '0px 0px 10px 5px #999',
},
},
};

/** definition of all modals to show */
modals = [
{
imageHeight: 500,
imageSrc: 'https://placeimg.com/500/500/arch',
title: 'What is new in 5.0',
text:
'Lorem ipsum dolor sit amet, consectetur adipiscing el aspect et just.',
html: 'Hello <b>world!</b>',
button: {
text: 'Okay',
textColor: '#fff',
bgColor: '#333',
},
{
title: 'Whats new in v1.0.0',
html: 'Lorem ipsum dolor sit amet, consectetur adipiscing el aspect et just.<br /><a href="http://google.com">test</a> ',
image: {
height: 500,
src: 'https://picsum.photos/500',
altText:
'In v1.0.0, lorem ipsum dolor sit amet.',
},
{
text:
'Lorem ipsum dolor sit amet, consectetur adipiscing el aspect et just. Spsum dolor sit amet, consectetur adipiscing el aspect et just',
button: {
text: 'Got it!',
textColor: '#fff',
bgColor: '#333',
},
text: 'Okay',
textColor: '#fff',
bgColor: '#333',
position: 'center',
},
];
},
...
];

public openDialog(): void {
this.modal?.open();
}

public onOpen(): void {
console.log('Dialog opened');
}

public onClose(): void {
console.log('Dialog closed');
}

public onNavigation($event: NavigationEvent) {
console.info('Previous item:', $event.previousItem);
console.info('Current item:', $event.currentItem);
}
```

> [!NOTE]
> Optionally, you could use `@if` to conditionally render the component. Like so:
>
> app.component.html
>
> ```html
> @if (isDialogVisible) {
> <ngx-whats-new
> #whatsNew
> (opened)="onOpen()"
> (closed)="onClose()"
> (navigation)="onNavigation($event)"
> [items]="modals"
> [options]="options"
> />
> }
> ```
>
> app.component.ts
>
> ```typescript
> public isDialogVisible: boolean | undefined;
>
> public openDialog(): void {
> isDialogVisible = true;
> }
>
> public onClose(): void {
> isDialogVisible = false;
> }
> ```
## Available Options:
General options:
```
export interface Options {
disableClose?: boolean;
enableKeyboardNavigation?: boolean;
clickableNavigationDots?: boolean;
customStyle: {
width?: string;
boxShadow?: string;
borderRadius?: string;
borderSize?: string;
}
}
```typescript
interface DialogOptions {
disableClose?: boolean;
enableKeyboardNavigation?: boolean;
clickableNavigationDots?: boolean;
customStyle: {
width?: string;
boxShadow?: string;
backgroundColor?: string;
textColor?: string;
borderRadius?: string;
borderSize?: string;
};
}
```
Options of a single modal window:

```typescript
interface WhatsNewItem {
title?: string;
text?: string;
html?: string;
image?: {
src: string;
height?: number;
bgColor?: string;
altText: string;
};
button?: {
text: string;
textColor: string;
bgColor: string;
position?: "left" | "center" | "right";
};
}
```
export interface ModalWindow {
imageSrc?: string;
text: string;
imageHeight?: string;
imageBgColor?: string;
button?: {
text: string;
textColor: string;
bgColor: string;
position: string;
};
}
```
63 changes: 20 additions & 43 deletions angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,10 @@
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"builder": "@angular-devkit/build-angular:jest",
"options": {
"main": "projects/ngx-whats-new/src/test.ts",
"tsConfig": "projects/ngx-whats-new/tsconfig.spec.json",
"karmaConfig": "projects/ngx-whats-new/karma.conf.js"
"polyfills": ["zone.js", "zone.js/testing"]
}
}
}
Expand All @@ -43,27 +42,25 @@
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/test-app",
"outputPath": {
"base": "dist/test-app"
},
"index": "projects/test-app/src/index.html",
"main": "projects/test-app/src/main.ts",
"polyfills": "projects/test-app/src/polyfills.ts",
"polyfills": ["projects/test-app/src/polyfills.ts"],
"tsConfig": "projects/test-app/tsconfig.app.json",
"assets": [
"projects/test-app/src/favicon.ico",
"projects/test-app/src/assets"
],
"styles": [
"projects/test-app/src/styles.scss"
],
"styles": ["projects/test-app/src/styles.scss"],
"scripts": [],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
"namedChunks": true,
"browser": "projects/test-app/src/main.ts"
},
"configurations": {
"production": {
Expand All @@ -78,8 +75,6 @@
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
Expand All @@ -99,50 +94,32 @@
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "test-app:build"
"buildTarget": "test-app:build"
},
"configurations": {
"production": {
"browserTarget": "test-app:build:production"
"buildTarget": "test-app:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "test-app:build"
"buildTarget": "test-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"builder": "@angular-devkit/build-angular:jest",
"options": {
"main": "projects/test-app/src/test.ts",
"polyfills": "projects/test-app/src/polyfills.ts",
"tsConfig": "projects/test-app/tsconfig.spec.json",
"karmaConfig": "projects/test-app/karma.conf.js",
"assets": [
"projects/test-app/src/favicon.ico",
"projects/test-app/src/assets"
],
"styles": [
"projects/test-app/src/styles.scss"
"polyfills": [
"projects/test-app/src/polyfills.ts",
"zone.js",
"zone.js/testing"
],
"scripts": []
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "projects/test-app/e2e/protractor.conf.js",
"devServerTarget": "test-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "test-app:serve:production"
}
"tsConfig": "projects/test-app/tsconfig.spec.json"
}
}
}
}
}
}
}
Loading

0 comments on commit c726660

Please sign in to comment.