@covalent/core
Version:
Core Teradata UI Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material.
798 lines • 61.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Component, ContentChildren, ElementRef, ViewChild, Injectable, Inject, EventEmitter, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i2$1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i1 from '@angular/material/dialog';
import { MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
import * as i4 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
import { Subject, fromEvent, takeUntil, merge } from 'rxjs';
import * as i5 from '@angular/material/form-field';
import * as i4$1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i2$2 from '@angular/cdk/drag-drop';
import * as i2$3 from '@angular/material/toolbar';
import { MatToolbarModule } from '@angular/material/toolbar';
import * as i3$1 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
class TdDialogTitleDirective {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TdDialogTitleDirective, selector: "[tdDialogTitle]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogTitleDirective, decorators: [{
type: Directive,
args: [{ selector: '[tdDialogTitle]' }]
}] });
class TdDialogContentDirective {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TdDialogContentDirective, selector: "[tdDialogContent]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogContentDirective, decorators: [{
type: Directive,
args: [{ selector: '[tdDialogContent]' }]
}] });
class TdDialogActionsDirective {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TdDialogActionsDirective, selector: "[tdDialogActions]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogActionsDirective, decorators: [{
type: Directive,
args: [{ selector: '[tdDialogActions]' }]
}] });
class TdDialogStatusDirective {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogStatusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TdDialogStatusDirective, selector: "[tdDialogStatus]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogStatusDirective, decorators: [{
type: Directive,
args: [{ selector: '[tdDialogStatus]' }]
}] });
class TdDialogComponent {
dialogTitle;
dialogContent;
dialogActions;
dialogStatus;
ngAfterContentInit() {
if (this.dialogTitle.length > 1) {
throw new Error('Duplicate td-dialog-title component at in td-dialog.');
}
if (this.dialogContent.length > 1) {
throw new Error('Duplicate td-dialog-content component at in td-dialog.');
}
if (this.dialogActions.length > 1) {
throw new Error('Duplicate td-dialog-actions component at in td-dialog.');
}
if (this.dialogStatus.length > 1) {
throw new Error('Duplicate td-dialog-status component at in td-dialog.');
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdDialogComponent, selector: "td-dialog", queries: [{ propertyName: "dialogTitle", predicate: TdDialogTitleDirective, descendants: true }, { propertyName: "dialogContent", predicate: TdDialogContentDirective, descendants: true }, { propertyName: "dialogActions", predicate: TdDialogActionsDirective, descendants: true }, { propertyName: "dialogStatus", predicate: TdDialogStatusDirective, descendants: true }], ngImport: i0, template: "<div class=\"td-dialog-wrapper\">\n <ng-content\n *ngIf=\"dialogStatus.length > 0\"\n select=\"[tdDialogStatus]\"\n ></ng-content>\n <section class=\"td-dialog\">\n <div mat-dialog-title *ngIf=\"dialogTitle.length > 0\">\n <ng-content select=\"[tdDialogTitle]\"></ng-content>\n </div>\n <mat-dialog-content\n class=\"td-dialog-content\"\n *ngIf=\"dialogContent.length > 0\"\n >\n <ng-content select=\"[tdDialogContent]\"></ng-content>\n </mat-dialog-content>\n <mat-dialog-actions\n class=\"td-dialog-actions\"\n *ngIf=\"dialogActions.length > 0\"\n >\n <span class=\"td-dialog-spacer\"></span>\n <ng-content select=\"[tdDialogActions]\"></ng-content>\n </mat-dialog-actions>\n </section>\n</div>\n", styles: [".td-dialog{width:100%}.td-dialog-wrapper{display:flex}.td-dialog-actions{flex-direction:row;box-sizing:border-box;display:flex}.td-dialog-actions .td-dialog-spacer{flex:1}.td-dialog-actions ::ng-deep button{text-transform:uppercase;margin-left:8px;padding-left:8px;padding-right:8px;min-width:64px}[dir=rtl] .td-dialog-actions ::ng-deep button{margin-right:8px;margin-left:inherit}.td-dialog-actions ::ng-deep .td-status-dialog___button{padding:9px 16px}@media screen and (max-width: 480px){.td-dialog-wrapper{flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'td-dialog', template: "<div class=\"td-dialog-wrapper\">\n <ng-content\n *ngIf=\"dialogStatus.length > 0\"\n select=\"[tdDialogStatus]\"\n ></ng-content>\n <section class=\"td-dialog\">\n <div mat-dialog-title *ngIf=\"dialogTitle.length > 0\">\n <ng-content select=\"[tdDialogTitle]\"></ng-content>\n </div>\n <mat-dialog-content\n class=\"td-dialog-content\"\n *ngIf=\"dialogContent.length > 0\"\n >\n <ng-content select=\"[tdDialogContent]\"></ng-content>\n </mat-dialog-content>\n <mat-dialog-actions\n class=\"td-dialog-actions\"\n *ngIf=\"dialogActions.length > 0\"\n >\n <span class=\"td-dialog-spacer\"></span>\n <ng-content select=\"[tdDialogActions]\"></ng-content>\n </mat-dialog-actions>\n </section>\n</div>\n", styles: [".td-dialog{width:100%}.td-dialog-wrapper{display:flex}.td-dialog-actions{flex-direction:row;box-sizing:border-box;display:flex}.td-dialog-actions .td-dialog-spacer{flex:1}.td-dialog-actions ::ng-deep button{text-transform:uppercase;margin-left:8px;padding-left:8px;padding-right:8px;min-width:64px}[dir=rtl] .td-dialog-actions ::ng-deep button{margin-right:8px;margin-left:inherit}.td-dialog-actions ::ng-deep .td-status-dialog___button{padding:9px 16px}@media screen and (max-width: 480px){.td-dialog-wrapper{flex-direction:column}}\n"] }]
}], propDecorators: { dialogTitle: [{
type: ContentChildren,
args: [TdDialogTitleDirective, { descendants: true }]
}], dialogContent: [{
type: ContentChildren,
args: [TdDialogContentDirective, { descendants: true }]
}], dialogActions: [{
type: ContentChildren,
args: [TdDialogActionsDirective, { descendants: true }]
}], dialogStatus: [{
type: ContentChildren,
args: [TdDialogStatusDirective, { descendants: true }]
}] } });
class TdAlertDialogComponent {
_dialogRef;
title;
message;
closeButton = 'CLOSE';
constructor(_dialogRef) {
this._dialogRef = _dialogRef;
}
close() {
this._dialogRef.close();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdAlertDialogComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdAlertDialogComponent, selector: "td-alert-dialog", ngImport: i0, template: "<td-dialog>\n <ng-container tdDialogTitle *ngIf=\"title\">{{ title }}</ng-container>\n <ng-container tdDialogContent>\n <span class=\"td-dialog-message\">{{ message }}</span>\n </ng-container>\n <ng-container tdDialogActions>\n <button mat-button color=\"accent\" (click)=\"close()\">\n {{ closeButton }}\n </button>\n </ng-container>\n</td-dialog>\n", styles: [".td-dialog-message{word-break:break-word}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: TdDialogComponent, selector: "td-dialog" }, { kind: "directive", type: TdDialogTitleDirective, selector: "[tdDialogTitle]" }, { kind: "directive", type: TdDialogActionsDirective, selector: "[tdDialogActions]" }, { kind: "directive", type: TdDialogContentDirective, selector: "[tdDialogContent]" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdAlertDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'td-alert-dialog', template: "<td-dialog>\n <ng-container tdDialogTitle *ngIf=\"title\">{{ title }}</ng-container>\n <ng-container tdDialogContent>\n <span class=\"td-dialog-message\">{{ message }}</span>\n </ng-container>\n <ng-container tdDialogActions>\n <button mat-button color=\"accent\" (click)=\"close()\">\n {{ closeButton }}\n </button>\n </ng-container>\n</td-dialog>\n", styles: [".td-dialog-message{word-break:break-word}\n"] }]
}], ctorParameters: () => [{ type: i1.MatDialogRef }] });
class TdConfirmDialogComponent {
_dialogRef;
title;
message;
cancelButton = 'CANCEL';
acceptButton = 'ACCEPT';
isDestructive = false;
constructor(_dialogRef) {
this._dialogRef = _dialogRef;
}
cancel() {
this._dialogRef.close(false);
}
accept() {
this._dialogRef.close(true);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdConfirmDialogComponent, selector: "td-confirm-dialog", ngImport: i0, template: "<td-dialog>\n <ng-container tdDialogTitle *ngIf=\"title\">{{ title }}</ng-container>\n <ng-container tdDialogContent>\n <span class=\"td-dialog-message\">{{ message }}</span>\n </ng-container>\n <ng-container tdDialogActions>\n <button\n mat-button\n #closeBtn\n (keydown.arrowright)=\"acceptBtn.focus()\"\n (click)=\"cancel()\"\n >\n {{ cancelButton }}\n </button>\n <button\n mat-button\n [color]=\"isDestructive ? 'warn' : 'accent'\"\n #acceptBtn\n (keydown.arrowleft)=\"closeBtn.focus()\"\n (click)=\"accept()\"\n >\n {{ acceptButton }}\n </button>\n </ng-container>\n</td-dialog>\n", styles: [".td-dialog-message{word-break:break-word}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: TdDialogComponent, selector: "td-dialog" }, { kind: "directive", type: TdDialogTitleDirective, selector: "[tdDialogTitle]" }, { kind: "directive", type: TdDialogActionsDirective, selector: "[tdDialogActions]" }, { kind: "directive", type: TdDialogContentDirective, selector: "[tdDialogContent]" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdConfirmDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'td-confirm-dialog', template: "<td-dialog>\n <ng-container tdDialogTitle *ngIf=\"title\">{{ title }}</ng-container>\n <ng-container tdDialogContent>\n <span class=\"td-dialog-message\">{{ message }}</span>\n </ng-container>\n <ng-container tdDialogActions>\n <button\n mat-button\n #closeBtn\n (keydown.arrowright)=\"acceptBtn.focus()\"\n (click)=\"cancel()\"\n >\n {{ cancelButton }}\n </button>\n <button\n mat-button\n [color]=\"isDestructive ? 'warn' : 'accent'\"\n #acceptBtn\n (keydown.arrowleft)=\"closeBtn.focus()\"\n (click)=\"accept()\"\n >\n {{ acceptButton }}\n </button>\n </ng-container>\n</td-dialog>\n", styles: [".td-dialog-message{word-break:break-word}\n"] }]
}], ctorParameters: () => [{ type: i1.MatDialogRef }] });
class TdPromptDialogComponent {
_ngZone;
_dialogRef;
title;
message;
value;
cancelButton = 'CANCEL';
acceptButton = 'ACCEPT';
/** The native `<input matInput />` element. */
_input;
_closeBtn;
_acceptBtn;
_destroy$ = new Subject();
constructor(_ngZone, _dialogRef) {
this._ngZone = _ngZone;
this._dialogRef = _dialogRef;
}
ngAfterViewInit() {
this._ngZone.runOutsideAngular(() => {
// Note: `element.focus()` causes re-layout and this may lead to frame drop on slower devices.
// `Promise` is a microtask and microtask are executed within the current rendering frame.
// Animation tasks are executed within the next rendering frame.
// We focus input once everything is rendered and good to go.
requestAnimationFrame(() => this._input.nativeElement.focus());
fromEvent(this._input.nativeElement, 'focus')
.pipe(takeUntil(this._destroy$))
.subscribe(() => {
// This is executed when the input is focused, selects all text.
this._input.nativeElement.select();
});
fromEvent(this._closeBtn.nativeElement, 'keydown')
.pipe(takeUntil(this._destroy$))
.subscribe((event) => {
if (event.keyCode === RIGHT_ARROW) {
this._acceptBtn.nativeElement.focus();
}
});
fromEvent(this._acceptBtn.nativeElement, 'keydown')
.pipe(takeUntil(this._destroy$))
.subscribe((event) => {
if (event.keyCode === LEFT_ARROW) {
this._closeBtn.nativeElement.focus();
}
});
});
}
ngOnDestroy() {
this._destroy$.next();
}
cancel() {
this._dialogRef.close();
}
accept() {
this._dialogRef.close(this.value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdPromptDialogComponent, deps: [{ token: i0.NgZone }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdPromptDialogComponent, selector: "td-prompt-dialog", viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "_closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef, static: true }, { propertyName: "_acceptBtn", first: true, predicate: ["acceptBtn"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<td-dialog>\n <ng-container tdDialogTitle *ngIf=\"title\">{{ title }}</ng-container>\n <ng-container tdDialogContent>\n <span class=\"td-dialog-message\">{{ message }}</span>\n <form #form=\"ngForm\" novalidate>\n <div class=\"td-dialog-input-wrapper\">\n <mat-form-field class=\"td-dialog-input\">\n <input\n matInput\n #input\n (keydown.enter)=\"$event.preventDefault(); form.valid && accept()\"\n [(ngModel)]=\"value\"\n name=\"value\"\n required\n />\n </mat-form-field>\n </div>\n </form>\n </ng-container>\n <ng-container tdDialogActions>\n <button mat-button #closeBtn (click)=\"cancel()\">{{ cancelButton }}</button>\n <button\n mat-button\n color=\"accent\"\n #acceptBtn\n [disabled]=\"!form.valid\"\n (click)=\"accept()\"\n >\n {{ acceptButton }}\n </button>\n </ng-container>\n</td-dialog>\n", styles: [".td-dialog-input-wrapper{flex-direction:row;box-sizing:border-box;display:flex}.td-dialog-input-wrapper .td-dialog-input{flex:1;box-sizing:border-box}.td-dialog-message{word-break:break-word}\n"], dependencies: [{ kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: TdDialogComponent, selector: "td-dialog" }, { kind: "directive", type: TdDialogTitleDirective, selector: "[tdDialogTitle]" }, { kind: "directive", type: TdDialogActionsDirective, selector: "[tdDialogActions]" }, { kind: "directive", type: TdDialogContentDirective, selector: "[tdDialogContent]" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdPromptDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'td-prompt-dialog', template: "<td-dialog>\n <ng-container tdDialogTitle *ngIf=\"title\">{{ title }}</ng-container>\n <ng-container tdDialogContent>\n <span class=\"td-dialog-message\">{{ message }}</span>\n <form #form=\"ngForm\" novalidate>\n <div class=\"td-dialog-input-wrapper\">\n <mat-form-field class=\"td-dialog-input\">\n <input\n matInput\n #input\n (keydown.enter)=\"$event.preventDefault(); form.valid && accept()\"\n [(ngModel)]=\"value\"\n name=\"value\"\n required\n />\n </mat-form-field>\n </div>\n </form>\n </ng-container>\n <ng-container tdDialogActions>\n <button mat-button #closeBtn (click)=\"cancel()\">{{ cancelButton }}</button>\n <button\n mat-button\n color=\"accent\"\n #acceptBtn\n [disabled]=\"!form.valid\"\n (click)=\"accept()\"\n >\n {{ acceptButton }}\n </button>\n </ng-container>\n</td-dialog>\n", styles: [".td-dialog-input-wrapper{flex-direction:row;box-sizing:border-box;display:flex}.td-dialog-input-wrapper .td-dialog-input{flex:1;box-sizing:border-box}.td-dialog-message{word-break:break-word}\n"] }]
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.MatDialogRef }], propDecorators: { _input: [{
type: ViewChild,
args: ['input', { static: true }]
}], _closeBtn: [{
type: ViewChild,
args: ['closeBtn', { static: true, read: ElementRef }]
}], _acceptBtn: [{
type: ViewChild,
args: ['acceptBtn', { static: true, read: ElementRef }]
}] } });
class TdStatusDialogComponent {
_dialogRef;
// Label of the close button in the footer
closeButton = 'CLOSE';
// Message to be displayed in the dialog
message;
// State of the status dialog
state = 'error';
// Title of the status dialog
title;
// Additional details to be displayed after the dialog message
details;
// Toggles the additional details section
showDetails = false;
// Labels for the toggle details link
detailsLabels = {
showDetailsLabel: 'Show details',
hideDetailsLabel: 'Hide details',
};
constructor(_dialogRef) {
this._dialogRef = _dialogRef;
}
close() {
this._dialogRef.close();
}
getStatusIcon() {
switch (this.state) {
case 'positive':
return 'check';
case 'error':
case 'warning':
return this.state;
default:
return 'error';
}
}
toggleDetails() {
this.showDetails = !this.showDetails;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdStatusDialogComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdStatusDialogComponent, selector: "td-status-dialog", ngImport: i0, template: "<td-dialog class=\"td-status-dialog\">\n <!-- Displays the icon and background color according to the state -->\n <div tdDialogStatus class=\"td-status-dialog-state\" [ngClass]=\"state\">\n <mat-icon>\n {{ getStatusIcon() }}\n </mat-icon>\n </div>\n <!-- Dialog title and the close icon -->\n <ng-container tdDialogTitle>\n <div class=\"td-status-dialog-title\">\n <span *ngIf=\"title\" class=\"\">{{ title }}</span>\n <button\n mat-icon-button\n class=\"td-status-dialog__icon-button\"\n (click)=\"close()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </ng-container>\n <!-- Dialog content with additonal information -->\n <ng-container tdDialogContent>\n <span class=\"td-dialog-message\">\n {{ message }}\n <div\n class=\"td-status-dialog__toggle-details\"\n role=\"button\"\n tabindex=\"0\"\n *ngIf=\"details\"\n (click)=\"toggleDetails()\"\n (keydown.enter)=\"toggleDetails()\"\n >\n {{\n showDetails\n ? detailsLabels?.hideDetailsLabel\n : detailsLabels?.showDetailsLabel\n }}\n <mat-icon\n [ngClass]=\"{\n 'td-status-dialog__arrow-icon': true,\n close: !showDetails,\n open: showDetails\n }\"\n >arrow_drop_down</mat-icon\n >\n </div>\n <div *ngIf=\"showDetails\">{{ details }}</div>\n </span>\n </ng-container>\n <ng-container tdDialogActions>\n <button\n mat-raised-button\n color=\"primary\"\n class=\"td-status-dialog___button\"\n (click)=\"close()\"\n >\n {{ closeButton }}\n </button>\n </ng-container>\n</td-dialog>\n", styles: ["::ng-deep .mat-mdc-dialog-container .mdc-dialog__surface{background-color:var(--cv-theme-surface-container-lowest);border-radius:12px}::ng-deep .td-status-dialog-title{align-items:flex-start;display:inline-flex;justify-content:space-between;width:100%;-webkit-font-smoothing:antialiased}::ng-deep .td-status-dialog-title :first-child{padding-right:40px}::ng-deep [mat-icon-button].td-status-dialog__icon-button{--mdc-icon-button-state-layer-size: 40px;padding:8px;position:absolute;right:8px;top:10px}::ng-deep .td-status-dialog___button{border-radius:8px}::ng-deep .mat-mdc-dialog-container .mdc-dialog__title{padding:18px 16px;line-height:var(--mdc-dialog-supporting-text-line-height)}::ng-deep .mat-mdc-dialog-container .mdc-dialog__title:before{display:none}::ng-deep .mat-mdc-icon-button .mat-mdc-button-base{padding:8px}::ng-deep .mdc-dialog .mdc-dialog__content{padding:0 16px;-webkit-font-smoothing:antialiased}::ng-deep .mdc-dialog__actions{padding:16px}.td-status-dialog{width:auto}.td-status-dialog:before{padding:14px 16px 0}.td-status-dialog .td-dialog-message{font-feature-settings:\"clig\" off,\"liga\" off;color:var(--cv-theme-on-surface-variant);line-height:var(--mdc-dialog-supporting-text-line-height)}.td-status-dialog-state{padding:14px 16px 0}.td-status-dialog-state .mat-icon{font-size:var(--mat-toolbar-title-text-line-height);height:var(--mat-toolbar-title-text-line-height);width:var(--mat-toolbar-title-text-line-height);font-variation-settings:\"FILL\" 1}.td-status-dialog-state.error{background-color:var(--cv-theme-negative-8)}.td-status-dialog-state.error .mat-icon{color:var(--cv-theme-negative)}.td-status-dialog-state.positive{background-color:var(--cv-theme-positive-8)}.td-status-dialog-state.positive .mat-icon{color:var(--cv-theme-positive)}.td-status-dialog-state.warning{background-color:var(--cv-theme-caution-8)}.td-status-dialog-state.warning .mat-icon{color:var(--cv-theme-caution)}.td-status-dialog__toggle-details{align-items:center;color:var(--cv-theme-primary);cursor:pointer;display:flex;font-size:var(--mat-expansion-container-text-size);letter-spacing:.25px;line-height:var(--mat-expansion-container-text-line-height);padding:16px 0}.td-status-dialog__arrow-icon{margin-top:2px}.td-status-dialog__arrow-icon.open{transform:rotate(0);transition:transform .25s ease-out}.td-status-dialog__arrow-icon.close{transform:rotate(180deg);transition:transform .25s ease-in}@media screen and (max-width: 480px){:host .td-status-dialog-state{padding:4px}:host .td-status-dialog-state .mat-icon{display:none}:host .td-status-dialog-state.error{background-color:var(--cv-theme-negative)}:host .td-status-dialog-state.positive{background-color:var(--cv-theme-positive)}:host .td-status-dialog-state.warning{background-color:var(--cv-theme-caution)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TdDialogComponent, selector: "td-dialog" }, { kind: "directive", type: TdDialogStatusDirective, selector: "[tdDialogStatus]" }, { kind: "directive", type: TdDialogTitleDirective, selector: "[tdDialogTitle]" }, { kind: "directive", type: TdDialogActionsDirective, selector: "[tdDialogActions]" }, { kind: "directive", type: TdDialogContentDirective, selector: "[tdDialogContent]" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdStatusDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'td-status-dialog', template: "<td-dialog class=\"td-status-dialog\">\n <!-- Displays the icon and background color according to the state -->\n <div tdDialogStatus class=\"td-status-dialog-state\" [ngClass]=\"state\">\n <mat-icon>\n {{ getStatusIcon() }}\n </mat-icon>\n </div>\n <!-- Dialog title and the close icon -->\n <ng-container tdDialogTitle>\n <div class=\"td-status-dialog-title\">\n <span *ngIf=\"title\" class=\"\">{{ title }}</span>\n <button\n mat-icon-button\n class=\"td-status-dialog__icon-button\"\n (click)=\"close()\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </ng-container>\n <!-- Dialog content with additonal information -->\n <ng-container tdDialogContent>\n <span class=\"td-dialog-message\">\n {{ message }}\n <div\n class=\"td-status-dialog__toggle-details\"\n role=\"button\"\n tabindex=\"0\"\n *ngIf=\"details\"\n (click)=\"toggleDetails()\"\n (keydown.enter)=\"toggleDetails()\"\n >\n {{\n showDetails\n ? detailsLabels?.hideDetailsLabel\n : detailsLabels?.showDetailsLabel\n }}\n <mat-icon\n [ngClass]=\"{\n 'td-status-dialog__arrow-icon': true,\n close: !showDetails,\n open: showDetails\n }\"\n >arrow_drop_down</mat-icon\n >\n </div>\n <div *ngIf=\"showDetails\">{{ details }}</div>\n </span>\n </ng-container>\n <ng-container tdDialogActions>\n <button\n mat-raised-button\n color=\"primary\"\n class=\"td-status-dialog___button\"\n (click)=\"close()\"\n >\n {{ closeButton }}\n </button>\n </ng-container>\n</td-dialog>\n", styles: ["::ng-deep .mat-mdc-dialog-container .mdc-dialog__surface{background-color:var(--cv-theme-surface-container-lowest);border-radius:12px}::ng-deep .td-status-dialog-title{align-items:flex-start;display:inline-flex;justify-content:space-between;width:100%;-webkit-font-smoothing:antialiased}::ng-deep .td-status-dialog-title :first-child{padding-right:40px}::ng-deep [mat-icon-button].td-status-dialog__icon-button{--mdc-icon-button-state-layer-size: 40px;padding:8px;position:absolute;right:8px;top:10px}::ng-deep .td-status-dialog___button{border-radius:8px}::ng-deep .mat-mdc-dialog-container .mdc-dialog__title{padding:18px 16px;line-height:var(--mdc-dialog-supporting-text-line-height)}::ng-deep .mat-mdc-dialog-container .mdc-dialog__title:before{display:none}::ng-deep .mat-mdc-icon-button .mat-mdc-button-base{padding:8px}::ng-deep .mdc-dialog .mdc-dialog__content{padding:0 16px;-webkit-font-smoothing:antialiased}::ng-deep .mdc-dialog__actions{padding:16px}.td-status-dialog{width:auto}.td-status-dialog:before{padding:14px 16px 0}.td-status-dialog .td-dialog-message{font-feature-settings:\"clig\" off,\"liga\" off;color:var(--cv-theme-on-surface-variant);line-height:var(--mdc-dialog-supporting-text-line-height)}.td-status-dialog-state{padding:14px 16px 0}.td-status-dialog-state .mat-icon{font-size:var(--mat-toolbar-title-text-line-height);height:var(--mat-toolbar-title-text-line-height);width:var(--mat-toolbar-title-text-line-height);font-variation-settings:\"FILL\" 1}.td-status-dialog-state.error{background-color:var(--cv-theme-negative-8)}.td-status-dialog-state.error .mat-icon{color:var(--cv-theme-negative)}.td-status-dialog-state.positive{background-color:var(--cv-theme-positive-8)}.td-status-dialog-state.positive .mat-icon{color:var(--cv-theme-positive)}.td-status-dialog-state.warning{background-color:var(--cv-theme-caution-8)}.td-status-dialog-state.warning .mat-icon{color:var(--cv-theme-caution)}.td-status-dialog__toggle-details{align-items:center;color:var(--cv-theme-primary);cursor:pointer;display:flex;font-size:var(--mat-expansion-container-text-size);letter-spacing:.25px;line-height:var(--mat-expansion-container-text-line-height);padding:16px 0}.td-status-dialog__arrow-icon{margin-top:2px}.td-status-dialog__arrow-icon.open{transform:rotate(0);transition:transform .25s ease-out}.td-status-dialog__arrow-icon.close{transform:rotate(180deg);transition:transform .25s ease-in}@media screen and (max-width: 480px){:host .td-status-dialog-state{padding:4px}:host .td-status-dialog-state .mat-icon{display:none}:host .td-status-dialog-state.error{background-color:var(--cv-theme-negative)}:host .td-status-dialog-state.positive{background-color:var(--cv-theme-positive)}:host .td-status-dialog-state.warning{background-color:var(--cv-theme-caution)}}\n"] }]
}], ctorParameters: () => [{ type: i1.MatDialogRef }] });
class TdDialogService {
_document;
_dialogService;
_dragDrop;
rendererFactory;
_renderer2;
constructor(_document, _dialogService, _dragDrop, rendererFactory) {
this._document = _document;
this._dialogService = _dialogService;
this._dragDrop = _dragDrop;
this.rendererFactory = rendererFactory;
this._renderer2 = rendererFactory.createRenderer(undefined, null);
}
/**
* params:
* - component: ComponentType<T>
* - config: MatDialogConfig
* Wrapper function over the open() method in MatDialog.
* Opens a modal dialog containing the given component.
*/
open(component, config) {
return this._dialogService.open(component, config);
}
/**
* Wrapper function over the closeAll() method in MatDialog.
* Closes all of the currently-open dialogs.
*/
closeAll() {
this._dialogService.closeAll();
}
/**
* params:
* - config: IAlertConfig {
* message: string;
* title?: string;
* viewContainerRef?: ViewContainerRef;
* closeButton?: string;
* }
*
* Opens an alert dialog with the provided config.
* Returns an MatDialogRef<TdAlertDialogComponent> object.
*/
openAlert(config) {
const dialogConfig = this._createConfig(config);
const dialogRef = this._dialogService.open(TdAlertDialogComponent, dialogConfig);
const alertDialogComponent = dialogRef.componentInstance;
alertDialogComponent.title = config.title;
alertDialogComponent.message = config.message;
if (config.closeButton) {
alertDialogComponent.closeButton = config.closeButton;
}
return dialogRef;
}
/**
* params:
* - config: IConfirmConfig {
* message: string;
* title?: string;
* viewContainerRef?: ViewContainerRef;
* acceptButton?: string;
* cancelButton?: string;
* isDestructive?: boolean;
* }
*
* Opens a confirm dialog with the provided config.
* Returns an MatDialogRef<TdConfirmDialogComponent> object.
*/
openConfirm(config) {
const dialogConfig = this._createConfig(config);
const dialogRef = this._dialogService.open(TdConfirmDialogComponent, dialogConfig);
const confirmDialogComponent = dialogRef.componentInstance;
confirmDialogComponent.title = config.title;
confirmDialogComponent.message = config.message;
if (config.acceptButton) {
confirmDialogComponent.acceptButton = config.acceptButton;
}
if (config.isDestructive) {
confirmDialogComponent.isDestructive = config.isDestructive;
}
if (config.cancelButton) {
confirmDialogComponent.cancelButton = config.cancelButton;
}
return dialogRef;
}
/**
* params:
* - config: IPromptConfig {
* message: string;
* title?: string;
* value?: string;
* viewContainerRef?: ViewContainerRef;
* acceptButton?: string;
* cancelButton?: string;
* }
*
* Opens a prompt dialog with the provided config.
* Returns an MatDialogRef<TdPromptDialogComponent> object.
*/
openPrompt(config) {
const dialogConfig = this._createConfig(config);
const dialogRef = this._dialogService.open(TdPromptDialogComponent, dialogConfig);
const promptDialogComponent = dialogRef.componentInstance;
promptDialogComponent.title = config.title;
promptDialogComponent.message = config.message;
promptDialogComponent.value = config.value;
if (config.acceptButton) {
promptDialogComponent.acceptButton = config.acceptButton;
}
if (config.cancelButton) {
promptDialogComponent.cancelButton = config.cancelButton;
}
return dialogRef;
}
/**
* Opens a draggable dialog containing the given component.
*/
openDraggable({ component, config, dragHandleSelectors, draggableClass, }) {
const matDialogRef = this._dialogService.open(component, config);
const dragRefSubject = new Subject();
const CDK_OVERLAY_PANE_SELECTOR = '.cdk-overlay-pane';
const CDK_OVERLAY_CONTAINER_SELECTOR = '.cdk-overlay-container';
matDialogRef.afterOpened().subscribe(() => {
const dialogElement = (this._document.getElementById(matDialogRef.id));
if (!dialogElement) {
return;
}
const draggableElement = this._dragDrop.createDrag(dialogElement);
if (draggableClass) {
const childComponent = dialogElement.firstElementChild;
this._renderer2.addClass(childComponent, draggableClass);
}
if (dragHandleSelectors && dragHandleSelectors.length) {
const dragHandles = dragHandleSelectors.reduce((acc, curr) => [
...acc,
...Array.from(dialogElement.querySelectorAll(curr)),
], []);
if (dragHandles.length > 0) {
draggableElement.withHandles(dragHandles);
}
}
const rootElement = dialogElement.closest(CDK_OVERLAY_PANE_SELECTOR);
if (rootElement) {
draggableElement.withRootElement(rootElement);
}
const boundaryElement = dialogElement.closest(CDK_OVERLAY_CONTAINER_SELECTOR);
if (boundaryElement) {
draggableElement.withBoundaryElement(boundaryElement);
}
dragRefSubject.next(draggableElement);
});
return { matDialogRef, dragRefSubject };
}
_createConfig(config) {
const dialogConfig = new MatDialogConfig();
dialogConfig.width = '400px';
Object.assign(dialogConfig, config);
return dialogConfig;
}
/**
* params:
* - config: IStatusConfig {
* closeButton?: string;
* details?: string;
* detailsLabels?: TdStatusDialogDetailsLabels;
* message: string;
* state?: 'error' | 'positive' | 'warning'
* title?: string;
* viewContainerRef?: ViewContainerRef;
* }
*
* Opens a status dialog with the provided config.
* Returns an MatDialogRef<TdStatusDialogComponent> object.
*/
openStatus(config) {
config.panelClass = 'td-status-dialog';
config.autoFocus = false;
config.width = '575px';
config.maxWidth = '96vw';
const dialogConfig = this._createConfig(config);
const dialogRef = this._dialogService.open(TdStatusDialogComponent, dialogConfig);
const statusDialogComponent = dialogRef.componentInstance;
statusDialogComponent.title = config.title;
statusDialogComponent.message = config.message;
statusDialogComponent.state = config.state;
statusDialogComponent.details = config.details;
if (config.detailsLabels) {
statusDialogComponent.detailsLabels = config.detailsLabels;
}
if (config.closeButton) {
statusDialogComponent.closeButton = config.closeButton;
}
return dialogRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogService, deps: [{ token: DOCUMENT }, { token: i1.MatDialog }, { token: i2$2.DragDrop }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i1.MatDialog }, { type: i2$2.DragDrop }, { type: i0.RendererFactory2 }] });
class TdWindowDialogComponent {
toolbarColor;
docked = false;
title;
toggleDockedStateLabel;
closeLabel;
dockToggled = new EventEmitter();
closed = new EventEmitter();
toolbarHeight = 56;
toggleDockedState() {
this.dockToggled.emit(this.docked);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdWindowDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdWindowDialogComponent, selector: "td-window-dialog", inputs: { toolbarColor: "toolbarColor", docked: "docked", title: "title", toggleDockedStateLabel: "toggleDockedStateLabel", closeLabel: "closeLabel" }, outputs: { dockToggled: "dockToggled", closed: "closed" }, ngImport: i0, template: "<mat-toolbar\n [color]=\"toolbarColor\"\n class=\"td-window-dialog-toolbar\"\n [style.min-height.px]=\"toolbarHeight\"\n [style.cursor]=\"docked ? 'inherit' : 'move'\"\n>\n <mat-toolbar-row [style.height.px]=\"toolbarHeight\">\n <div layout=\"row\" layout-align=\"start center\" flex>\n <span class=\"mat-title td-window-dialog-title truncate\" flex>\n {{ title }}\n </span>\n\n <button\n mat-icon-button\n [matTooltip]=\"toggleDockedStateLabel ?? ''\"\n (click)=\"toggleDockedState()\"\n >\n <mat-icon [attr.aria-label]=\"toggleDockedStateLabel\"\n >dock_to_right</mat-icon\n >\n </button>\n\n <button\n mat-icon-button\n [matTooltip]=\"closeLabel ?? ''\"\n (click)=\"closed.emit()\"\n class=\"td-window-dialog-close\"\n [attr.data-test]=\"'close-button'\"\n >\n <mat-icon [attr.aria-label]=\"closeLabel\">close</mat-icon>\n </button>\n </div>\n </mat-toolbar-row>\n</mat-toolbar>\n<ng-content></ng-content>\n", styles: [":host{height:100%;display:flex;flex-direction:column}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.td-window-dialog-toolbar{background:none}.td-window-dialog-title{margin-bottom:0}.td-window-dialog-close{margin-right:-8px}::ng-deep .td-window-dialog .mat-dialog-container{padding:0}\n"], dependencies: [{ kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i2$3.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdWindowDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'td-window-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar\n [color]=\"toolbarColor\"\n class=\"td-window-dialog-toolbar\"\n [style.min-height.px]=\"toolbarHeight\"\n [style.cursor]=\"docked ? 'inherit' : 'move'\"\n>\n <mat-toolbar-row [style.height.px]=\"toolbarHeight\">\n <div layout=\"row\" layout-align=\"start center\" flex>\n <span class=\"mat-title td-window-dialog-title truncate\" flex>\n {{ title }}\n </span>\n\n <button\n mat-icon-button\n [matTooltip]=\"toggleDockedStateLabel ?? ''\"\n (click)=\"toggleDockedState()\"\n >\n <mat-icon [attr.aria-label]=\"toggleDockedStateLabel\"\n >dock_to_right</mat-icon\n >\n </button>\n\n <button\n mat-icon-button\n [matTooltip]=\"closeLabel ?? ''\"\n (click)=\"closed.emit()\"\n class=\"td-window-dialog-close\"\n [attr.data-test]=\"'close-button'\"\n >\n <mat-icon [attr.aria-label]=\"closeLabel\">close</mat-icon>\n </button>\n </div>\n </mat-toolbar-row>\n</mat-toolbar>\n<ng-content></ng-content>\n", styles: [":host{height:100%;display:flex;flex-direction:column}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.td-window-dialog-toolbar{background:none}.td-window-dialog-title{margin-bottom:0}.td-window-dialog-close{margin-right:-8px}::ng-deep .td-window-dialog .mat-dialog-container{padding:0}\n"] }]
}], propDecorators: { toolbarColor: [{
type: Input
}], docked: [{
type: Input
}], title: [{
type: Input
}], toggleDockedStateLabel: [{
type: Input
}], closeLabel: [{
type: Input
}], dockToggled: [{
type: Output
}], closed: [{
type: Output
}] } });
const TD_DIALOGS = [
TdAlertDialogComponent,
TdConfirmDialogComponent,
TdPromptDialogComponent,
TdDialogComponent,
TdDialogStatusDirective,
TdDialogTitleDirective,
TdDialogActionsDirective,
TdDialogContentDirective,
TdWindowDialogComponent,
TdAlertDialogComponent,
TdConfirmDialogComponent,
TdPromptDialogComponent,
TdStatusDialogComponent,
];
class CovalentDialogsModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentDialogsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: CovalentDialogsModule, declarations: [TdAlertDialogComponent,
TdConfirmDialogComponent,
TdPromptDialogComponent,
TdDialogComponent,
TdDialogStatusDirective,
TdDialogTitleDirective,
TdDialogActionsDirective,
TdDialogContentDirective,
TdWindowDialogComponent,
TdAlertDialogComponent,
TdConfirmDialogComponent,
TdPromptDialogComponent,
TdStatusDialogComponent], imports: [FormsModule,
CommonModule,
MatDialogModule,
MatInputModule,
MatButtonModule,
MatToolbarModule,
MatTooltipModule,
MatIconModule], exports: [TdAlertDialogComponent,
TdConfirmDialogComponent,
TdPromptDialogComponent,
TdDialogComponent,
TdDialogStatusDirective,
TdDialogTitleDirective,
TdDialogActionsDirective,
TdDialogContentDirective,
TdWindowDialogComponent,
TdAlertDialogComponent,
TdConfirmDialogComponent,
TdPromptDialogComponent,
TdStatusDialogComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentDialogsModule, providers: [TdDialogService], imports: [FormsModule,
CommonModule,
MatDialogModule,
MatInputModule,
MatButtonModule,
MatToolbarModule,
MatTooltipModule,
MatIconModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentDialogsModule, decorators: [{
type: NgModule,
args: [{
imports: [
FormsModule,
CommonModule,
MatDialogModule,
MatInputModule,
MatButtonModule,
MatToolbarModule,
MatTooltipModule,
MatIconModule,
],
declarations: [...TD_DIALOGS],
exports: [...TD_DIALOGS],
providers: [TdDialogService],
}]
}] });
var corners;
(function (corners) {
corners["topRight"] = "topRight";
corners["bottomRight"] = "bottomRight";
corners["bottomLeft"] = "bottomLeft";
corners["topLeft"] = "topLeft";
})(corners || (corners = {}));
var cursors;
(function (cursors) {
cursors["nesw"] = "nesw-resize";
cursors["nwse"] = "nwse-resize";
})(cursors || (cursors = {}));
var verticalAlignment;
(function (verticalAlignment) {
verticalAlignment["top"] = "top";
verticalAlignment["bottom"] = "bottom";
})(verticalAlignment || (verticalAlignment = {}));
var horizontalAlignment;
(function (horizontalAlignment) {
horizontalAlignment["right"] = "right";
horizontalAlignment["left"] = "left";
})(horizontalAlignment || (horizontalAlignment = {}));
const cornerWidth = '16px';
const offset = '0px';
const minWidth = 200;
const minHeight = 200;
function getPixels(sizeString) {
return parseFloat((sizeString || '').replace('px', ''));
}
function clamp(min, num, max) {
return Math.min(Math.max(num, min), max);
}
class ResizableDraggableDialog {
_document;
_renderer2;
_dialogRef;
_dragRef;
cornerElements = [];
pointerDownSubs = [];
constructor(_document, _renderer2, _dialogRef, _dragRef) {
this._document = _document;
this._renderer2 = _renderer2;
this._dialogRef = _dialogRef;
this._dragRef = _dragRef;
this._initialPositionReset();
this._attachCorners();
}
attach() {
this.detach();
this._attachCorners();
}
detach() {
this.pointerDownSubs.forEach((sub) => sub.unsubscribe());
this.pointerDownSubs = [];
this.cornerElements.forEach((elem) => this._renderer2.removeChild(this._getDialogWrapper(), elem));
this.cornerElements = [];
}
_getDialogWrapper() {
return (this._document.getElementById(this._dialogRef.id) || {}).parentElement;
}
_getViewportDimensions() {
return this._getDialogWrapper()?.parentElement?.getBoundingClientRect();
}
_getDialogWrapperDimensions() {
const wrapper = this._getDialogWrapper();
if (!wrapper) {
return { width: 0, height: 0 };
}
const dimensions = getComputedStyle(wrapper);
return {
width: getPixels(dimensions.width),
height: getPixels(dimensions.height),
};
}
_initialPositionReset() {
const viewportWidth = this._getViewportDimensions()?.right ?? 0;
const viewportHeight = this._getViewportDimensions()?.bottom ?? 0;
const { width, height } = this._getDialogWrapperDimensions();
const wrapperStyle = this._getDialogWrapper()?.style;
const originalDialogRight = wrapperStyle?.marginRight;
const originalDialogLeft = wrapperStyle?.marginLeft;
const originalDialogBottom = wrapperStyle?.marginBottom;
const originalDialogTop = wrapperStyle?.marginTop;
let x;
if (originalDialogLeft) {
x = getPixels(originalDialogLeft);
}
else if (originalDialogRight) {
x = viewportWidth - getPixels(originalDialogRight) - width;
}
else {
x = (viewportWidth - width) / 2;
}
let y;
if (originalDialogTop) {
y = getPixels(originalDialogTop);
}
else if (originalDialogBottom) {
y = viewportHeight - getPixels(originalDialogBottom) - height;
}
else {
y = (viewportHeight - height) / 2;
}
// use drag ref's mechanisms for positioning instead of the dialog's
this._dialogRef.updatePosition({
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
});
this._dragRef.setFreeDragPosition({ x, y });
}
_attachCorners() {
Object.values(corners).forEach((corner) => {
const element = this._renderer2.createElement('div');
this.cornerElements = [...this.cornerElements, element];
this._renderer2.setStyle(element, 'position', 'absolute');
this._renderer2.setStyle(element, 'width', cornerWidth);
this._renderer2.setStyle(element, 'height', cornerWidth);
this._renderer2.setStyle(element, 'z-index', 1);
this._renderer2.appendChild(this._getDialogWrapper(), element);
let cursor;
let topBottom;
let rightLeft;
if (corner === corners.topRight) {
cursor = cursors.nesw;
topBottom = verticalAlignment.top;
rightLeft = horizontalAlignment.right;
}
else if (corner === corners.bottomRight) {
cursor = cursors.nwse;
topBottom = verticalAlignment.bottom;
rightLeft = horizontalAlignment.right;
const icon = this._renderer2.createElement('i');
this._renderer2.addClass(icon, 'material-symbols-outlined');
this._renderer2.appendChild(icon, this._renderer2.createText('filter_list'));
this._renderer2.appendChild(element, icon);
this._renderer2.setStyle(icon, 'transform', `rotate(${315}deg) translate(0px, ${offset})`);
this._renderer2.setStyle(icon, 'font-size', cornerWidth);
this._renderer2.setStyle(icon, 'z-index', 1);
}
else if (corner === corners.bottomLeft) {
cursor = cursors.nesw;
topBottom = verticalAlignment.bottom;
rightLeft = horizontalAlignment.left;
}
else {
cursor = cursors.nwse;
topBottom = verticalAlignment.top;
rightLeft = horizontalAlignment.left;
}
this._renderer2.setStyle(element, topBottom, offset);
this._renderer2.setStyle(element, rightLeft, offset);
this._renderer2.setStyle(element, 'cursor', cursor);
const pointerDownSub = fromEvent(element, 'pointerdown').subscribe((event) => {
this._handleMouseDown(event, corner);
});
this.pointerDownSubs = [...this.pointerDownSubs, pointerDownSub];
});
}
_handleMouseDown(event, corner) {
this._renderer2.setStyle(this._document.body, 'user-select', 'none');
const { width: originalWidth, height: originalHeight } = this._getDialogWrapperDimensions();
const originalMouseX = event.pageX;
const originalMouseY = event.pageY;
const { x: currentTransformX, y: currentTransformY } = this._dragRef.getFreeDragPosition();
const wrapper = this._getDialogWrapper()?.getBoundingClientRect();
const distanceFromBottom = wrapper?.bottom ?? 0;
const distanceFromRight = wrapper?.right ?? 0;
const viewportWidth = this._getViewportDimensions()?.right ?? 0;
const viewportHeight = this._getViewportDimensions()?.bottom ?? 0;
const mouseMoveSub = fromEvent(window, 'pointermove').subscribe((e) => {
e.preventDefault(); // prevent highlighting of text when dragging
const yDelta = clamp(0, e.pageY, viewportHeight) - originalMouseY;
const xDelta = clamp(0, e.pageX, viewportWidth) - originalMouseX;
let newHeight;
let newWidth;
let newTransformY = 0;
let newTransformX = 0;
// top right
if (corner === corners.topRight) {
newHeight = clamp(minHeight, originalHeight - yDelta, viewportHeight);
newWidth = clamp(minWidth, originalWidth + xDelta, viewportWidth);
newTransformY = clamp(0, currentTransformY + yDelta, distanceFromBottom - newHeight);
newTransformX = currentTransformX;
}
// bottom right
else if (corner === corners.bottomRight) {
newHeight = clamp(minHeight, originalHeight + yDelta, viewportHeight);
newWidth = clamp(minWidth, originalWidth + xDelta, viewportWidth);
newTransformY = currentTransformY;
newTransformX = currentTransformX;
}
// bottom left
else if (corner === corners.bottomLeft) {
newHeight = clamp(minHeight, originalHeight + yDelta, viewportHeight);
newWidth = clamp(minWidth, originalWidth - xDelta, viewportWidth);
newTransformY = currentTransformY;
newTransformX = clamp(0, currentTransformX + xDelta, distanceFromRight - newWidth);
}
// top left
else {
newHeight = clamp(minHeight, originalHeight - yDelta, viewportHeight);
newWidth = clamp(minWidth, originalWidth - xDelta, viewportWidth);
newTransformX = clamp(0, currentTransformX + xDelta, distanceFromRight - newWidth);
newTransformY = clamp(0, currentTransformY + yDelta, distanceFromBottom - newHeight);
}
this._dialogRef.updateSize(`${newWidth}px`, `${newHeight}px`);
this._dragRef.setFreeDragPosition({
x: newTransformX,
y: newTransformY,
});
});
const mouseUpSub = merge(fromEvent(window, 'pointerup'), fromEvent(window, 'pointercancel')).subscribe(() => {
this._renderer2.removeStyle(this._document.body, 'user-select');
mouseMoveSub.unsubscribe();
mouseUpSub.unsubscribe();
});
}
}
/**
* Generated bundle index. Do not edit.
*/
export { CovalentDialogsModule, ResizableDraggableDialog, TdAlertDialogComponent, TdConfirmDialogComponent, TdDialogActionsDirective, TdDialogComponent, TdDialogContentDirective, TdDialogService, TdDialogStatusDirective, TdDialogTitleDirective, TdPromptDialogComponent, TdStatusDialogComponent, TdWindowDialogComponent };
//# sourceMappingURL=covalent-core-dialogs.mjs.map