@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.
746 lines (740 loc) • 68.9 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Component, ContentChildren, inject, NgZone, ElementRef, ViewChild, RendererFactory2, Injectable, EventEmitter, ChangeDetectionStrategy, Output, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule, DOCUMENT } from '@angular/common';
import * as i2 from '@angular/material/dialog';
import { MatDialogModule, MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material/dialog';
import * as i2$1 from '@angular/material/button';
import { MatButtonModule, MatButton, MatIconButton } from '@angular/material/button';
import { RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
import { Subject, fromEvent, takeUntil, merge } from 'rxjs';
import * as i2$2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { MatFormField } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { MatIcon } from '@angular/material/icon';
import { DragDrop } from '@angular/cdk/drag-drop';
import { MatToolbar, MatToolbarRow } from '@angular/material/toolbar';
import { MatTooltip } from '@angular/material/tooltip';
const _c0$3 = [[["", "tdDialogStatus", ""]], [["", "tdDialogTitle", ""]], [["", "tdDialogContent", ""]], [["", "tdDialogActions", ""]]];
const _c1$1 = ["[tdDialogStatus]", "[tdDialogTitle]", "[tdDialogContent]", "[tdDialogActions]"];
function TdDialogComponent_ng_content_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojection(0, 0, ["*ngIf", "dialogStatus.length > 0"]);
} }
function TdDialogComponent_div_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 6);
i0.ɵɵprojection(1, 1);
i0.ɵɵelementEnd();
} }
function TdDialogComponent_mat_dialog_content_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "mat-dialog-content", 7);
i0.ɵɵprojection(1, 2);
i0.ɵɵelementEnd();
} }
function TdDialogComponent_mat_dialog_actions_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "mat-dialog-actions", 8);
i0.ɵɵelement(1, "span", 9);
i0.ɵɵprojection(2, 3);
i0.ɵɵelementEnd();
} }
class TdDialogTitleDirective {
static ɵfac = function TdDialogTitleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDialogTitleDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdDialogTitleDirective, selectors: [["", "tdDialogTitle", ""]] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDialogTitleDirective, [{
type: Directive,
args: [{ selector: '[tdDialogTitle]' }]
}], null, null); })();
class TdDialogContentDirective {
static ɵfac = function TdDialogContentDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDialogContentDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdDialogContentDirective, selectors: [["", "tdDialogContent", ""]] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDialogContentDirective, [{
type: Directive,
args: [{ selector: '[tdDialogContent]' }]
}], null, null); })();
class TdDialogActionsDirective {
static ɵfac = function TdDialogActionsDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDialogActionsDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdDialogActionsDirective, selectors: [["", "tdDialogActions", ""]] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDialogActionsDirective, [{
type: Directive,
args: [{ selector: '[tdDialogActions]' }]
}], null, null); })();
class TdDialogStatusDirective {
static ɵfac = function TdDialogStatusDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDialogStatusDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdDialogStatusDirective, selectors: [["", "tdDialogStatus", ""]] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDialogStatusDirective, [{
type: Directive,
args: [{ selector: '[tdDialogStatus]' }]
}], null, null); })();
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 = function TdDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDialogComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdDialogComponent, selectors: [["td-dialog"]], contentQueries: function TdDialogComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
i0.ɵɵcontentQuery(dirIndex, TdDialogTitleDirective, 5);
i0.ɵɵcontentQuery(dirIndex, TdDialogContentDirective, 5);
i0.ɵɵcontentQuery(dirIndex, TdDialogActionsDirective, 5);
i0.ɵɵcontentQuery(dirIndex, TdDialogStatusDirective, 5);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dialogTitle = _t);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dialogContent = _t);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dialogActions = _t);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dialogStatus = _t);
} }, ngContentSelectors: _c1$1, decls: 6, vars: 4, consts: [[1, "td-dialog-wrapper"], [4, "ngIf"], [1, "td-dialog"], ["mat-dialog-title", "", 4, "ngIf"], ["class", "td-dialog-content", 4, "ngIf"], ["class", "td-dialog-actions", 4, "ngIf"], ["mat-dialog-title", ""], [1, "td-dialog-content"], [1, "td-dialog-actions"], [1, "td-dialog-spacer"]], template: function TdDialogComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef(_c0$3);
i0.ɵɵelementStart(0, "div", 0);
i0.ɵɵtemplate(1, TdDialogComponent_ng_content_1_Template, 1, 0, "ng-content", 1);
i0.ɵɵelementStart(2, "section", 2);
i0.ɵɵtemplate(3, TdDialogComponent_div_3_Template, 2, 0, "div", 3)(4, TdDialogComponent_mat_dialog_content_4_Template, 2, 0, "mat-dialog-content", 4)(5, TdDialogComponent_mat_dialog_actions_5_Template, 3, 0, "mat-dialog-actions", 5);
i0.ɵɵelementEnd()();
} if (rf & 2) {
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.dialogStatus.length > 0);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx.dialogTitle.length > 0);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.dialogContent.length > 0);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.dialogActions.length > 0);
} }, dependencies: [CommonModule, i1.NgIf, MatDialogModule, i2.MatDialogTitle, i2.MatDialogActions, i2.MatDialogContent], styles: [".td-dialog[_ngcontent-%COMP%]{width:100%}.td-dialog-wrapper[_ngcontent-%COMP%]{display:flex}.td-dialog-actions[_ngcontent-%COMP%]{flex-direction:row;box-sizing:border-box;display:flex}.td-dialog-actions[_ngcontent-%COMP%] .td-dialog-spacer[_ngcontent-%COMP%]{flex:1}.td-dialog-actions[_ngcontent-%COMP%] button{text-transform:uppercase;margin-left:8px;padding-left:8px;padding-right:8px;min-width:64px}[dir=rtl][_ngcontent-%COMP%] .td-dialog-actions[_ngcontent-%COMP%] button{margin-right:8px;margin-left:inherit}.td-dialog-actions[_ngcontent-%COMP%] .td-status-dialog___button{padding:9px 16px}@media screen and (max-width: 480px){.td-dialog-wrapper[_ngcontent-%COMP%]{flex-direction:column}}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDialogComponent, [{
type: Component,
args: [{ selector: 'td-dialog', imports: [CommonModule, MatDialogModule], 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"] }]
}], null, { 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 }]
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDialogComponent, { className: "TdDialogComponent", filePath: "dialog.component.ts", lineNumber: 29 }); })();
function TdAlertDialogComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0, 5);
i0.ɵɵtext(1);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r0.title);
} }
class TdAlertDialogComponent {
_dialogRef = inject(MatDialogRef);
title;
message;
closeButton = 'CLOSE';
close() {
this._dialogRef.close();
}
static ɵfac = function TdAlertDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdAlertDialogComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdAlertDialogComponent, selectors: [["td-alert-dialog"]], decls: 8, vars: 3, consts: [["tdDialogTitle", "", 4, "ngIf"], ["tdDialogContent", ""], [1, "td-dialog-message"], ["tdDialogActions", ""], ["mat-button", "", "color", "accent", 3, "click"], ["tdDialogTitle", ""]], template: function TdAlertDialogComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "td-dialog");
i0.ɵɵtemplate(1, TdAlertDialogComponent_ng_container_1_Template, 2, 1, "ng-container", 0);
i0.ɵɵelementContainerStart(2, 1);
i0.ɵɵelementStart(3, "span", 2);
i0.ɵɵtext(4);
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
i0.ɵɵelementContainerStart(5, 3);
i0.ɵɵelementStart(6, "button", 4);
i0.ɵɵlistener("click", function TdAlertDialogComponent_Template_button_click_6_listener() { return ctx.close(); });
i0.ɵɵtext(7);
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.title);
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate(ctx.message);
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate1(" ", ctx.closeButton, " ");
} }, dependencies: [CommonModule, i1.NgIf, MatButtonModule, i2$1.MatButton, TdDialogComponent,
TdDialogTitleDirective,
TdDialogContentDirective,
TdDialogActionsDirective], styles: [".td-dialog-message[_ngcontent-%COMP%]{word-break:break-word}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdAlertDialogComponent, [{
type: Component,
args: [{ selector: 'td-alert-dialog', imports: [
CommonModule,
MatButtonModule,
TdDialogComponent,
TdDialogTitleDirective,
TdDialogContentDirective,
TdDialogActionsDirective,
], 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"] }]
}], null, null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdAlertDialogComponent, { className: "TdAlertDialogComponent", filePath: "alert-dialog/alert-dialog.component.ts", lineNumber: 25 }); })();
function TdConfirmDialogComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0, 8);
i0.ɵɵtext(1);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r1.title);
} }
class TdConfirmDialogComponent {
_dialogRef = inject(MatDialogRef);
title;
message;
cancelButton = 'CANCEL';
acceptButton = 'ACCEPT';
isDestructive = false;
cancel() {
this._dialogRef.close(false);
}
accept() {
this._dialogRef.close(true);
}
static ɵfac = function TdConfirmDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdConfirmDialogComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdConfirmDialogComponent, selectors: [["td-confirm-dialog"]], decls: 12, vars: 5, consts: [["closeBtn", ""], ["acceptBtn", ""], ["tdDialogTitle", "", 4, "ngIf"], ["tdDialogContent", ""], [1, "td-dialog-message"], ["tdDialogActions", ""], ["mat-button", "", 3, "keydown.arrowright", "click"], ["mat-button", "", 3, "keydown.arrowleft", "click", "color"], ["tdDialogTitle", ""]], template: function TdConfirmDialogComponent_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "td-dialog");
i0.ɵɵtemplate(1, TdConfirmDialogComponent_ng_container_1_Template, 2, 1, "ng-container", 2);
i0.ɵɵelementContainerStart(2, 3);
i0.ɵɵelementStart(3, "span", 4);
i0.ɵɵtext(4);
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
i0.ɵɵelementContainerStart(5, 5);
i0.ɵɵelementStart(6, "button", 6, 0);
i0.ɵɵlistener("keydown.arrowright", function TdConfirmDialogComponent_Template_button_keydown_arrowright_6_listener() { i0.ɵɵrestoreView(_r1); const acceptBtn_r3 = i0.ɵɵreference(10); return i0.ɵɵresetView(acceptBtn_r3.focus()); })("click", function TdConfirmDialogComponent_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.cancel()); });
i0.ɵɵtext(8);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(9, "button", 7, 1);
i0.ɵɵlistener("keydown.arrowleft", function TdConfirmDialogComponent_Template_button_keydown_arrowleft_9_listener() { i0.ɵɵrestoreView(_r1); const closeBtn_r4 = i0.ɵɵreference(7); return i0.ɵɵresetView(closeBtn_r4.focus()); })("click", function TdConfirmDialogComponent_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.accept()); });
i0.ɵɵtext(11);
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.title);
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate(ctx.message);
i0.ɵɵadvance(4);
i0.ɵɵtextInterpolate1(" ", ctx.cancelButton, " ");
i0.ɵɵadvance();
i0.ɵɵproperty("color", ctx.isDestructive ? "warn" : "accent");
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate1(" ", ctx.acceptButton, " ");
} }, dependencies: [CommonModule, i1.NgIf, TdDialogComponent,
TdDialogTitleDirective,
TdDialogContentDirective,
TdDialogActionsDirective,
MatButtonModule, i2$1.MatButton], styles: [".td-dialog-message[_ngcontent-%COMP%]{word-break:break-word}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdConfirmDialogComponent, [{
type: Component,
args: [{ selector: 'td-confirm-dialog', imports: [
CommonModule,
TdDialogComponent,
TdDialogTitleDirective,
TdDialogContentDirective,
TdDialogActionsDirective,
MatButtonModule,
], 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"] }]
}], null, null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdConfirmDialogComponent, { className: "TdConfirmDialogComponent", filePath: "confirm-dialog/confirm-dialog.component.ts", lineNumber: 25 }); })();
const _c0$2 = ["input"];
const _c1 = ["closeBtn"];
const _c2 = ["acceptBtn"];
function TdPromptDialogComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0, 14);
i0.ɵɵtext(1);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r1.title);
} }
class TdPromptDialogComponent {
_ngZone = inject(NgZone);
_dialogRef = inject(MatDialogRef);
title;
message;
value;
cancelButton = 'CANCEL';
acceptButton = 'ACCEPT';
/** The native `<input matInput />` element. */
_input;
_closeBtn;
_acceptBtn;
_destroy$ = new Subject();
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 = function TdPromptDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdPromptDialogComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdPromptDialogComponent, selectors: [["td-prompt-dialog"]], viewQuery: function TdPromptDialogComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(_c0$2, 7);
i0.ɵɵviewQuery(_c1, 7, ElementRef);
i0.ɵɵviewQuery(_c2, 7, ElementRef);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._input = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._closeBtn = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._acceptBtn = _t.first);
} }, decls: 18, vars: 6, consts: [["form", "ngForm"], ["input", ""], ["closeBtn", ""], ["acceptBtn", ""], ["tdDialogTitle", "", 4, "ngIf"], ["tdDialogContent", ""], [1, "td-dialog-message"], ["novalidate", ""], [1, "td-dialog-input-wrapper"], [1, "td-dialog-input"], ["matInput", "", "name", "value", "required", "", 3, "keydown.enter", "ngModelChange", "ngModel"], ["tdDialogActions", ""], ["mat-button", "", 3, "click"], ["mat-button", "", "color", "accent", 3, "click", "disabled"], ["tdDialogTitle", ""]], template: function TdPromptDialogComponent_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "td-dialog");
i0.ɵɵtemplate(1, TdPromptDialogComponent_ng_container_1_Template, 2, 1, "ng-container", 4);
i0.ɵɵelementContainerStart(2, 5);
i0.ɵɵelementStart(3, "span", 6);
i0.ɵɵtext(4);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(5, "form", 7, 0)(7, "div", 8)(8, "mat-form-field", 9)(9, "input", 10, 1);
i0.ɵɵlistener("keydown.enter", function TdPromptDialogComponent_Template_input_keydown_enter_9_listener($event) { i0.ɵɵrestoreView(_r1); const form_r3 = i0.ɵɵreference(6); $event.preventDefault(); return i0.ɵɵresetView(form_r3.valid && ctx.accept()); });
i0.ɵɵtwoWayListener("ngModelChange", function TdPromptDialogComponent_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.value, $event) || (ctx.value = $event); return i0.ɵɵresetView($event); });
i0.ɵɵelementEnd()()()();
i0.ɵɵelementContainerEnd();
i0.ɵɵelementContainerStart(11, 11);
i0.ɵɵelementStart(12, "button", 12, 2);
i0.ɵɵlistener("click", function TdPromptDialogComponent_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.cancel()); });
i0.ɵɵtext(14);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(15, "button", 13, 3);
i0.ɵɵlistener("click", function TdPromptDialogComponent_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.accept()); });
i0.ɵɵtext(17);
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
i0.ɵɵelementEnd();
} if (rf & 2) {
const form_r3 = i0.ɵɵreference(6);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.title);
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate(ctx.message);
i0.ɵɵadvance(5);
i0.ɵɵtwoWayProperty("ngModel", ctx.value);
i0.ɵɵadvance(5);
i0.ɵɵtextInterpolate(ctx.cancelButton);
i0.ɵɵadvance();
i0.ɵɵproperty("disabled", !form_r3.valid);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate1(" ", ctx.acceptButton, " ");
} }, dependencies: [CommonModule, i1.NgIf, FormsModule, i2$2.ɵNgNoValidate, i2$2.DefaultValueAccessor, i2$2.NgControlStatus, i2$2.NgControlStatusGroup, i2$2.RequiredValidator, i2$2.NgModel, i2$2.NgForm, MatFormField,
MatInput,
MatButton,
TdDialogComponent,
TdDialogTitleDirective,
TdDialogContentDirective,
TdDialogActionsDirective], styles: [".td-dialog-input-wrapper[_ngcontent-%COMP%]{flex-direction:row;box-sizing:border-box;display:flex}.td-dialog-input-wrapper[_ngcontent-%COMP%] .td-dialog-input[_ngcontent-%COMP%]{flex:1;box-sizing:border-box}.td-dialog-message[_ngcontent-%COMP%]{word-break:break-word}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdPromptDialogComponent, [{
type: Component,
args: [{ selector: 'td-prompt-dialog', imports: [
CommonModule,
FormsModule,
MatFormField,
MatInput,
MatButton,
TdDialogComponent,
TdDialogTitleDirective,
TdDialogContentDirective,
TdDialogActionsDirective,
], 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"] }]
}], null, { _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 }]
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdPromptDialogComponent, { className: "TdPromptDialogComponent", filePath: "prompt-dialog/prompt-dialog.component.ts", lineNumber: 41 }); })();
const _c0$1 = (a0, a1) => ({ "td-status-dialog__arrow-icon": true, close: a0, open: a1 });
function TdStatusDialogComponent_span_6_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 12);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r0.title);
} }
function TdStatusDialogComponent_div_13_Template(rf, ctx) { if (rf & 1) {
const _r2 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 13);
i0.ɵɵlistener("click", function TdStatusDialogComponent_div_13_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleDetails()); })("keydown.enter", function TdStatusDialogComponent_div_13_Template_div_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleDetails()); });
i0.ɵɵtext(1);
i0.ɵɵelementStart(2, "mat-icon", 14);
i0.ɵɵtext(3, "arrow_drop_down");
i0.ɵɵelementEnd()();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate1(" ", ctx_r0.showDetails ? ctx_r0.detailsLabels == null ? null : ctx_r0.detailsLabels.hideDetailsLabel : ctx_r0.detailsLabels == null ? null : ctx_r0.detailsLabels.showDetailsLabel, " ");
i0.ɵɵadvance();
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c0$1, !ctx_r0.showDetails, ctx_r0.showDetails));
} }
function TdStatusDialogComponent_div_14_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div");
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r0.details);
} }
class TdStatusDialogComponent {
_dialogRef = inject(MatDialogRef);
// 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',
};
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 = function TdStatusDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdStatusDialogComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdStatusDialogComponent, selectors: [["td-status-dialog"]], decls: 18, vars: 7, consts: [[1, "td-status-dialog"], ["tdDialogStatus", "", 1, "td-status-dialog-state", 3, "ngClass"], ["tdDialogTitle", ""], [1, "td-status-dialog-title"], ["class", "", 4, "ngIf"], ["mat-icon-button", "", 1, "td-status-dialog__icon-button", 3, "click"], ["tdDialogContent", ""], [1, "td-dialog-message"], ["class", "td-status-dialog__toggle-details", "role", "button", "tabindex", "0", 3, "click", "keydown.enter", 4, "ngIf"], [4, "ngIf"], ["tdDialogActions", ""], ["mat-raised-button", "", "color", "primary", 1, "td-status-dialog___button", 3, "click"], [1, ""], ["role", "button", "tabindex", "0", 1, "td-status-dialog__toggle-details", 3, "click", "keydown.enter"], [3, "ngClass"]], template: function TdStatusDialogComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "td-dialog", 0)(1, "div", 1)(2, "mat-icon");
i0.ɵɵtext(3);
i0.ɵɵelementEnd()();
i0.ɵɵelementContainerStart(4, 2);
i0.ɵɵelementStart(5, "div", 3);
i0.ɵɵtemplate(6, TdStatusDialogComponent_span_6_Template, 2, 1, "span", 4);
i0.ɵɵelementStart(7, "button", 5);
i0.ɵɵlistener("click", function TdStatusDialogComponent_Template_button_click_7_listener() { return ctx.close(); });
i0.ɵɵelementStart(8, "mat-icon");
i0.ɵɵtext(9, "close");
i0.ɵɵelementEnd()()();
i0.ɵɵelementContainerEnd();
i0.ɵɵelementContainerStart(10, 6);
i0.ɵɵelementStart(11, "span", 7);
i0.ɵɵtext(12);
i0.ɵɵtemplate(13, TdStatusDialogComponent_div_13_Template, 4, 5, "div", 8)(14, TdStatusDialogComponent_div_14_Template, 2, 1, "div", 9);
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
i0.ɵɵelementContainerStart(15, 10);
i0.ɵɵelementStart(16, "button", 11);
i0.ɵɵlistener("click", function TdStatusDialogComponent_Template_button_click_16_listener() { return ctx.close(); });
i0.ɵɵtext(17);
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵadvance();
i0.ɵɵproperty("ngClass", ctx.state);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate1(" ", ctx.getStatusIcon(), " ");
i0.ɵɵadvance(3);
i0.ɵɵproperty("ngIf", ctx.title);
i0.ɵɵadvance(6);
i0.ɵɵtextInterpolate1(" ", ctx.message, " ");
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.details);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.showDetails);
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate1(" ", ctx.closeButton, " ");
} }, dependencies: [CommonModule, i1.NgClass, i1.NgIf, MatIcon,
MatIconButton,
MatButton,
TdDialogComponent,
TdDialogTitleDirective,
TdDialogContentDirective,
TdDialogActionsDirective,
TdDialogStatusDirective], styles: [".mat-mdc-dialog-container .mdc-dialog__surface{background-color:var(--cv-theme-surface-container-lowest);border-radius:12px} .td-status-dialog-title{align-items:flex-start;display:inline-flex;justify-content:space-between;width:100%;-webkit-font-smoothing:antialiased} .td-status-dialog-title :first-child{padding-right:40px} [mat-icon-button].td-status-dialog__icon-button{--mdc-icon-button-state-layer-size: 40px;padding:8px;position:absolute;right:8px;top:10px} .td-status-dialog___button{border-radius:8px} .mat-mdc-dialog-container .mdc-dialog__title{padding:18px 16px;line-height:var(--mdc-dialog-supporting-text-line-height)} .mat-mdc-dialog-container .mdc-dialog__title:before{display:none} .mat-mdc-icon-button .mat-mdc-button-base{padding:8px} .mdc-dialog .mdc-dialog__content{padding:0 16px;-webkit-font-smoothing:antialiased} .mdc-dialog__actions{padding:16px}.td-status-dialog[_ngcontent-%COMP%]{width:auto}.td-status-dialog[_ngcontent-%COMP%]:before{padding:14px 16px 0}.td-status-dialog[_ngcontent-%COMP%] .td-dialog-message[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{padding:14px 16px 0}.td-status-dialog-state[_ngcontent-%COMP%] .mat-icon[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{background-color:var(--cv-theme-negative-8)}.td-status-dialog-state.error[_ngcontent-%COMP%] .mat-icon[_ngcontent-%COMP%]{color:var(--cv-theme-negative)}.td-status-dialog-state.positive[_ngcontent-%COMP%]{background-color:var(--cv-theme-positive-8)}.td-status-dialog-state.positive[_ngcontent-%COMP%] .mat-icon[_ngcontent-%COMP%]{color:var(--cv-theme-positive)}.td-status-dialog-state.warning[_ngcontent-%COMP%]{background-color:var(--cv-theme-caution-8)}.td-status-dialog-state.warning[_ngcontent-%COMP%] .mat-icon[_ngcontent-%COMP%]{color:var(--cv-theme-caution)}.td-status-dialog__toggle-details[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{margin-top:2px}.td-status-dialog__arrow-icon.open[_ngcontent-%COMP%]{transform:rotate(0);transition:transform .25s ease-out}.td-status-dialog__arrow-icon.close[_ngcontent-%COMP%]{transform:rotate(180deg);transition:transform .25s ease-in}@media screen and (max-width: 480px){[_nghost-%COMP%] .td-status-dialog-state[_ngcontent-%COMP%]{padding:4px}[_nghost-%COMP%] .td-status-dialog-state[_ngcontent-%COMP%] .mat-icon[_ngcontent-%COMP%]{display:none}[_nghost-%COMP%] .td-status-dialog-state.error[_ngcontent-%COMP%]{background-color:var(--cv-theme-negative)}[_nghost-%COMP%] .td-status-dialog-state.positive[_ngcontent-%COMP%]{background-color:var(--cv-theme-positive)}[_nghost-%COMP%] .td-status-dialog-state.warning[_ngcontent-%COMP%]{background-color:var(--cv-theme-caution)}}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdStatusDialogComponent, [{
type: Component,
args: [{ selector: 'td-status-dialog', imports: [
CommonModule,
MatIcon,
MatIconButton,
MatButton,
TdDialogComponent,
TdDialogTitleDirective,
TdDialogContentDirective,
TdDialogActionsDirective,
TdDialogStatusDirective,
], 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"] }]
}], null, null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdStatusDialogComponent, { className: "TdStatusDialogComponent", filePath: "status-dialog/status-dialog.component.ts", lineNumber: 37 }); })();
class TdDialogService {
_document = inject(DOCUMENT);
_dialogService = inject(MatDialog);
_dragDrop = inject(DragDrop);
rendererFactory = inject(RendererFactory2);
_renderer2;
constructor() {
const rendererFactory = this.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 = function TdDialogService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDialogService)(); };
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TdDialogService, factory: TdDialogService.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDialogService, [{
type: