wickeyappstore
  1. Components
  2. WasAlert

File

projects/wickeyappstore/src/lib/ui/popover/wasalert/wasalert.dialog.ts

Description

Create simple modal popups with btns or input field to get user input.

SIMPLEST USE CASE

 * import { WasAlert } from 'wickeyappstore';
 * import { MatDialog, MatDialogRef } from '@angular/material';
 * ...
 * constructor(public dialog: MatDialog) { } // and Inject MatDialog in the constructor
 * ...
 * this.dialog.open(WasAlert, {data: { title: 'Hi', body: 'This is a WasAlert' } });
 * ```

MORE USE CASES BELOW

<b>Standard Confirm (WasAlertStyleConfirm / WasAlertStyleWarning)</b>
```js
  this.dialog.open(WasAlert, {
    data: {
      title: 'Please confirm.',
      body: 'This is the default WasAlertStyleConfirm alert.', buttons: 'WasAlertStyleConfirm'
    }
  }).afterClosed().subscribe(result => {
    if (result !== undefined) {
      console.log('This is 0 for cancel, and 1 for Confirm', result);
    } else {
      console.log('Dialog was cancelled');
    }
  });
 * ```

<b>With Buttons</b>
```js
  const dialogRef = this.dialog.open(WasAlert, {data: { title: 'Hi', body: 'Confirm?', buttons: ['Cancel', 'Option A', Option B] } });
      dialogRef.afterClosed().subscribe(result => {
     if (result !== undefined) {
       console.log('This is 0 for cancel, and 1 for A, 2 for B', result);
     } else {
       console.log('Dialog was cancelled');
     }
   });
 * ```

<b>With Input field</b>
```js
   const dialogRef = this.dialog.open(WasAlert, {data: { title: 'Password', input: true, input_value: 'text', password: true } });
      dialogRef.afterClosed().subscribe(result => {
     if (result !== undefined) {
       console.log('This is the input captured', result);
     } else {
       console.log('Dialog was cancelled');
     }
   });

With List of choices ---Deprecated

  const dialogRef = this.dialog.open(WasAlert, {data: { title: 'Hi', list: ['item1', 'item2'] } });
      dialogRef.afterClosed().subscribe(result => {
     if (result !== undefined) {
       console.log('This is the index of the selected list item', result);
     } else {
       console.log('Dialog was cancelled');
     }
   });
 *```

<b>ADVANCED Options</b>

Can Pass TWO buttons, TWO button_icons, and TWO button_colors

<i>button_icons</i> can be any material icon -> https://material.io/icons/

<i>button_colors</i> can be any material theme color. primary, accent, warn, or empty string
```js
  const dialogRef = this.dialog.open(WasAlert, {data: { title: 'Hi', body: 'Set Alarm?',
    buttons: ['Cancel', 'Alarm'], button_icons: ['cancel', 'alarm'], button_colors: ['', 'accent'] } });
  dialogRef.afterClosed().subscribe(result => {
    if (result !== undefined) {
      console.log('This is 0 for cancel, and 1 for A, 2 for B', result);
    } else {
      console.log('Dialog was cancelled');
    }
  });

The MatDialog has additional properties. By default, clicking outside the window does not close the dialog. Change by setting to false;

js this.dialogRef.disableClose = false;

Implements

OnInit OnDestroy

Metadata

styleUrls ../was.component.css
templateUrl ./wasalert.dialog.html 
<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>
  <div class="wasup-body">
    {{data.body}}
  </div>
  <mat-list *ngIf="data.list">
    <mat-list-item *ngFor="let item of data.list; let i = index">
      <button mat-button color="primary" [mat-dialog-close]="i">{{ item }}</button>
    </mat-list-item>
  </mat-list>
  <mat-form-field *ngIf="data.input" style="width:100%">
    <input *ngIf="data.password; else normalinput" matInput type="password" [(ngModel)]="data.input_value">
    <ng-template #normalinput>
      <input matInput [(ngModel)]="data.input_value">
    </ng-template>
    <button mat-button *ngIf="data.input_value" matSuffix mat-icon-button aria-label="Clear"
      (click)="data.input_value=''">
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>
</div>
<div mat-dialog-actions *ngIf="data.input || data.list; else normalbuttons">
  <button mat-raised-button (click)="onNoClick()" [color]="data.button_colors[0]">{{data.buttons[0]}}
    <mat-icon *ngIf="data.button_icons[0]" style="margin-left: 10px;">{{data.button_icons[0]}}</mat-icon>
  </button>
  <button *ngIf="data.input" mat-raised-button [mat-dialog-close]="data.input_value" [color]="data.button_colors[1]"
    cdkFocusInitial>{{data.buttons[1]}}
    <mat-icon style="margin-left: 10px">{{data.button_icons[1]}}</mat-icon>
  </button>
</div>
<ng-template #normalbuttons>
  <div mat-dialog-actions *ngIf="data.buttons.length === 2; else buttonlist">
    <button mat-raised-button [mat-dialog-close]="0" [color]="data.button_colors[0]">{{data.buttons[0]}}
      <mat-icon *ngIf="data.button_icons[0]" style="margin-left: 10px;">{{data.button_icons[0]}}</mat-icon>
    </button>
    <button mat-raised-button [mat-dialog-close]="1" [color]="data.button_colors[1]" cdkFocusInitial>{{data.buttons[1]}}
      <mat-icon style="margin-left: 10px">{{data.button_icons[1]}}</mat-icon>
    </button>
  </div>
  <ng-template #buttonlist>
    <button mat-raised-button *ngFor="let btn of data.buttons; let indx = index"
      [mat-dialog-close]="indx">{{btn}}</button>
  </ng-template>
</ng-template>

../was.component.css 

.wasup-title {
  text-align: center;
  font-size: 1.4em;
  color: #5b5b65;
  /* text-shadow: 0 1px 0 #fff; */
}
.wasup-title-sso {
  margin-top: inherit;
  margin-bottom: 0px;
}
.wasup-title-sso-m {
  margin-top: -20px;
  margin-bottom: 0px;
}
.wasup-body {
    text-align: center;
    font-weight: 300;
    margin-bottom: 15px;
}
.icon-svg-large {
    width: 80px;
    top: 60px;
    margin: auto;
}
.icon-svg {
    width: 40px;
    margin: auto;
    margin-top: -5px;
}
.icon-large-svg {
    width: 50px;
    margin: auto;
    margin-top: -4px;
}
.wasmenu-title {
    text-align: center;
    font-size: 1.0em;
  }
.was-right-button {
    display: block;
    position: fixed;
    width: 60px;
    height: 60px;
    right: 5px;
    top: 5px;
    z-index: 999;
}
.was-left-button {
    display: block;
    position: fixed;
    width: 60px;
    height: 60px;
    top: 5px;
    left: 5px;
    z-index: 999;
}
.center-block {
    display: block;
    text-align: center;
}
.icon-svg-stars {
    display: inline-block;
    width: 26px;
    margin: auto;
    /*margin-left: 20px;*/
}
.gold-stars {
    color: gold;
}
.gold-star-border {
    color: darkgoldenrod;
}
.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}
.my-header-sidebar {
  width: 40px;
}
.my-header-text    {
  flex: 2;
  text-align: center;
  font-weight: 500;
}
.my-subtitle-text {
  font-weight: lighter;
  padding-top: 5px;
}
.my-items-list {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 100%;
}

.waspay-buttons {
    width: 100%;
    margin-bottom: 10px;
}
.waspay-subtitle {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #5b5b65;
    text-shadow: 0 1px 0 #fff;
    margin-bottom: 25px;
}
#sample-pay-button {
  border: .5px solid black;
  border-radius: 5px;
}
#apple-pay-button {
  display: inline-block;
  /* align-self: flex-end; */
  background-color: white;
  background-image: -webkit-named-image(apple-pay-logo-black);
  background-size: 100% 60%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: 5px;
  padding: 0px;
  box-sizing: border-box;
  border: .5px solid black;
  height: 35px;
  line-height: 35px;
  cursor: pointer;
}
#apple-pay-button:focus,
#apple-pay-button:hover {
background-color:#E7ECF1 !important;
}

/* Pass a panel class to dialog to edit css directly */
.was-dialog-nopadding .mat-dialog-container {
  padding: 0!important;
}

.was-leaderboard-titlebar {
  display: flex;
  box-sizing: border-box;
  padding: 0 16px;
  width: 100%;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  background: white;
  color: rgba(0,0,0,.87);
  margin: 0;
}

.was-leaderboard-table > table {
  width: 100%;
}
.was-leaderboard-content {
  width: 50vw;
}
.was-leaderboard-content-m {
  max-height: 80vh;
  padding: 0px;
}
.was-shop-content-m {
  max-height: 99vh;
  padding-left: 0px;
  padding-right: 0px;
}
.was-leaderboard-modal-m, .was-shop-modal-m, .was-modal-m {
  max-width: 100%!important;
}
.was-leaderboard-modal-m > .mat-dialog-container {
  padding-top: 0px;
}
.was-shop-modal-m > .mat-dialog-container {
  padding-top: 0px;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""