View dialogs.css
/* DIALOGS */
.cdk-overlay-pane.ss-dialog {
max-width: 95vw !important;
}
.ss-dialog .mat-dialog-container {
padding: 30px;
padding-top: 12px;
padding-right: 12px;
View usage-example.js
constructor(public dialog: MatDialog) { }
openDialogSimple() {
const dialogRef = this.dialog.open(DialogComponent, {
width: '500px',
panelClass: 'ss-dialog', // always include this property of MatDialogConfig!
});
// Listen for which button was pressed and act accordingly
dialogRef.afterClosed().subscribe(result => {
View dialog-example.html
<!-- -1 tabindex: doesn't autofocus this item when opening -->
<button mat-icon-button class="close-btn" tabindex="-1">
<mat-icon svgIcon="close" aria-label="close" (click)="close()"></mat-icon>
</button>
<mat-dialog-content>
<!-- 1. Insert your data here -->
<p>Your bulletin wasn't posted. Are you sure you want to exit?</p>
View reward-snackbar.component.js
import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material';
import { DOCUMENT } from '@angular/common';
import { DefaultSnackbarComponent } from './default-snackbar.component';
@Component({
template: `
<span class="snack">
<span class="reward-snack">
{{rewardMessage}}
View example-input-change.js
import { Component } from '@angular/core';
import { ContentHeaderService } from '../../../../../SafetySync.Portal.Core/Service/ContentHeader/content-header.service';
@Component({
selector: 'ss-orientation-list',
templateUrl: './orientation-list.component.html',
styleUrls: ['./orientation-list.component.scss']
})
export class OrientationListComponent implements OnInit, DoCheck {
View content-header-row-example.html
<mat-card id="content-header" class="m-1d p-1d bl-3-green shadow">
<!-- Row 1 -->
<div class="content-header-row my-auto d-inline-flex flex-wrap">
<span class="d-flex m-1d">
<span class="font-medium-14 mr-3 h-20">Title:</span>
<span class="font-regular-14 ss-green h-20">An Interesting Title About DNA</span>
</span>
</div>
View content-header-row.html
<div id="content-header-row" class="my-auto d-inline-flex flex-wrap"
[ngClass]="{'flex-row-reverse': alignRight}">
<ng-content></ng-content>
</div>
View content-header-example-logic.js
@Component({
selector: 'ss-content-header',
templateUrl: './content-header.component.html'
})
export class ContentHeaderComponent implements OnInit {
@Input() editing: boolean;
@Input() status: string;
matInputs: HTMLCollectionOf<Element>;
View content-header.html
<mat-card id="content-header" class="p-1d d-inline-flex flex-wrap shadow"
[ngClass]="{'bl-3-red': status === 'red',
'bl-3-yellow': status === 'yellow',
'bl-3-green': status === 'green'}">
<div id="content-header-row" class="my-auto d-inline-flex flex-wrap"
[ngClass]="{'flex-row-reverse': alignRight}">
<ng-content></ng-content>
</div>
</mat-card>
View content-header.css
/* CONTENT HEADERS */
.content-header-row {
width: 100%;
}
#content-header .mat-form-field {
max-width: 250px;
min-width: 50px;
margin-top: 5px;