upgrade angular 18 version and support new material css

angular.json

@@ -36,7 +36,9 @@
                         "outputPath": "docs",
                         "index": "src/index.html",
                         "main": "src/main.ts",
-                        "polyfills": "src/polyfills.ts",
+                        "polyfills": [
+                            "zone.js"
+                        ],
                         "tsConfig": "tsconfig.app.json",
                         "assets": [
                             "src/favicon.ico",

src/assets/asw-theming.scss

@@ -1,4 +1,4 @@
-// @import "./../../node_modules/@angular/material/prebuilt-themes/indigo-pink";
+// @import "./../../node_modules/@angular/material/prebuilt-themes/azure-blue";
 // @import "./../../node_modules/bootstrap/scss/bootstrap";
 
 // Core Components

src/components/form-builder/form-builder.ts

@@ -32,7 +32,7 @@ export class AswFormBuilder implements OnInit, OnChanges {
     @Input() isShowPreviewButton = true;
     @Input() isShowJsonDataButton = true;
     @Input() isShowPublishButton = true;
-    @Input() allowedTypes: 'number' | 'text' | 'all' = 'text';
+    @Input() allowedTypes: 'number' | 'text' | 'all' = 'all';
 
     @Output() previewClick = new EventEmitter<any[]>();
     @Output() publishClick = new EventEmitter<any[]>();

src/components/form-control/autocomplete/autocomplete.ts

@@ -77,7 +77,8 @@ export class AswAutocomplete implements OnInit {
         });
         const dialogRef = this.dialog.open(AswSingleSelectDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/button/button-dialog.html

@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditButtonForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">        
         <div class="asw-full-width"><br>

src/components/form-control/button/button.ts

@@ -58,7 +58,7 @@ export class AswButton {
     editButtonDialog(control: ButtonControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswButtonDialog, {
             disableClose: true,
-            width: '744px',
+            width: '50%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/calculation/calculation-dialog.html

@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditCalculationForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>

src/components/form-control/calculation/calculation.ts

@@ -81,7 +81,8 @@ export class AswCalculation {
 
         const dialogRef = this.dialog.open(AswCalculationDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: { control, numberControls }
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/checkbox/checkbox.ts

@@ -46,7 +46,8 @@ export class AswCheckbox {
     editCheckboxDialog(control: CheckboxControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswMultiSelectDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/core/shared-dialog/digital/digital-dialog.html

@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswDigitalForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>

src/components/form-control/core/shared-dialog/multi-select/multi-select-dialog.html

@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit multiselect property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditMultiselectForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>

src/components/form-control/core/shared-dialog/single-select/single-select-dialog.html

@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditSingleSelectForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>

src/components/form-control/core/shared-dialog/text/text-dialog.html

@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditTextForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>

src/components/form-control/datepicker/datepicker-dialog.html

@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswDatepickerForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>

src/components/form-control/datepicker/datepicker.ts

@@ -58,7 +58,8 @@ export class AswDatepicker {
     editDatepickerDialog(control: DateControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswDatepickerDialog, {
             disableClose: true,
-            width: '744px',
+            width: '60%',
+            minWidth: '60vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/drawing/drawing.ts

@@ -46,7 +46,8 @@ export class AswDrawing {
     drawingImageDialog(control: any, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswImageDrawing, {
             disableClose: true,
-            width: '744px',
+            width: '60%',
+            minWidth: '60vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
@@ -59,7 +60,7 @@ export class AswDrawing {
     editDrawingDialog(control: any, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswDigitalDialog, {
             disableClose: true,
-            width: '744px',
+            width: '50%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/gps/gps-dialog.html

@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditGpsForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>

src/components/form-control/gps/gps.ts

@@ -74,7 +74,7 @@ export class AswGps implements OnInit {
     editGpsDialog(control: GpsControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswGpsDialog, {
             disableClose: true,
-            width: '744px',
+            width: '60%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/header/header-dialog.html

@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswHeaderForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>

src/components/form-control/header/header.ts

@@ -57,7 +57,7 @@ export class AswHeader {
     editHeaderDialog(control: HeaderControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswHeaderDialog, {
             disableClose: true,
-            width: '744px',
+            width: '50%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/image/image-dialog.html

@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswImageForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>

src/components/form-control/image/image-upload-dialog.html

@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Crop Uploaded Image</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswImageCropForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="row">

src/components/form-control/image/image.ts

@@ -47,7 +47,7 @@ export class AswImage {
     editImageDialog(control: any, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswImageDialog, {
             disableClose: true,
-            width: '744px',
+            width: '50%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
@@ -60,7 +60,8 @@ export class AswImage {
     uploadImageDialog(control: any, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswImageUploadDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/multi-select/multi-select.ts

@@ -55,7 +55,8 @@ export class AswMultiSelect {
         });
         const dialogRef = this.dialog.open(AswMultiSelectDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/number/number.ts

@@ -73,7 +73,8 @@ export class AswNumber implements OnInit, AfterViewInit {
     editNumberDialog(control: NumberControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswNumberDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/paragraph/paragraph.ts

@@ -52,7 +52,8 @@ export class AswParagraph {
     editParagraphDialog(control: ParagraphControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswParagraphDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/qrcode/qrcode-dialog.html

@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <mat-dialog-content class="mat-typography">
     <div class="row p-2">
         <div class="col-md-4">

src/components/form-control/qrcode/qrcode.ts

@@ -55,6 +55,7 @@ export class AswQrCode {
         const dialogRef = this.dialog.open(AswQrCodeDialog, {
             disableClose: true,
             width: '80%',
+            minWidth: '80vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/radio-button/radio-button.ts

@@ -55,7 +55,8 @@ export class AswRadioButton {
         });
         const dialogRef = this.dialog.open(AswSingleSelectDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/select/select.ts

@@ -55,7 +55,8 @@ export class AswSelect {
         });
         const dialogRef = this.dialog.open(AswSingleSelectDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/signature/signature.ts

@@ -47,7 +47,8 @@ export class AswSignature {
     signatureDialog(control: any, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswImageDrawing, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '60vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {
@@ -60,7 +61,7 @@ export class AswSignature {
     editSignatureDialog(control: any, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswDigitalDialog, {
             disableClose: true,
-            width: '744px',
+            width: '50%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/slide-toggle/slide-toggle-dialog.html

@@ -1,5 +1,4 @@
 <h4 mat-dialog-title>Edit Property</h4>
-<mat-divider></mat-divider>
 <form [formGroup]="aswEditSlideToggleForm" (ngSubmit)="onSubmit()">
     <mat-dialog-content class="mat-typography">
         <div class="asw-full-width"><br>

src/components/form-control/slide-toggle/slide-toggle.ts

@@ -54,7 +54,7 @@ export class AswSlideToggle {
     editSlideToggleDialog(control: SlideToggleControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswSlideToggleDialog, {
             disableClose: true,
-            width: '744px',
+            width: '50%',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/textarea/textarea.ts

@@ -52,7 +52,8 @@ export class AswTextarea {
     editTextAreaDialog(control: TextareaControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswTextDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/components/form-control/textfield/textfield.ts

@@ -54,7 +54,8 @@ export class AswTextField {
     editTextFieldDialog(control: TextFieldControl, controlIndex: number): void {
         const dialogRef = this.dialog.open(AswTextDialog, {
             disableClose: true,
-            width: '744px',
+            width: '80%',
+            minWidth: '70vw',
             data: control
         });
         dialogRef.afterClosed().subscribe(result => {

src/demo/components/home/home.component.ts

@@ -31,9 +31,9 @@ export class HomeComponent implements OnInit {
     }
 
     ngOnInit(): void {
-        this.username = USERNAME;
-        this.firstname = FIRSTNAME;
-        this.jsonData = this.aswSettingsService.previewData;
+        // this.username = USERNAME;
+        // this.firstname = FIRSTNAME;
+        //this.jsonData = this.aswSettingsService.previewData;
        // this.getJson();
     }
 

src/polyfills.ts

@@ -57,7 +57,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************

src/styles.scss

@@ -1,5 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+@import "~@angular/material/prebuilt-themes/azure-blue.css";
 body {
     background-color: #F7F7F8;
 }