@covalent/core 8.12.3 → 8.14.0

package/esm2022/dialogs/status-dialog/status-dialog.component.mjs

@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/dialog";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/button";
+import * as i4 from "@angular/material/icon";
+import * as i5 from "../dialog.component";
+export 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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.TdDialogComponent, selector: "td-dialog" }, { kind: "directive", type: i5.TdDialogStatusDirective, selector: "[tdDialogStatus]" }, { kind: "directive", type: i5.TdDialogTitleDirective, selector: "[tdDialogTitle]" }, { kind: "directive", type: i5.TdDialogActionsDirective, selector: "[tdDialogActions]" }, { kind: "directive", type: i5.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 }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhdHVzLWRpYWxvZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvZGlhbG9ncy9zcmMvc3RhdHVzLWRpYWxvZy9zdGF0dXMtZGlhbG9nLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci9kaWFsb2dzL3NyYy9zdGF0dXMtZGlhbG9nL3N0YXR1cy1kaWFsb2cuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7Ozs7Ozs7QUFjeEQsTUFBTSxPQUFPLHVCQUF1QjtJQW1CZDtJQWxCcEIsMENBQTBDO0lBQzFDLFdBQVcsR0FBWSxPQUFPLENBQUM7SUFDL0Isd0NBQXdDO0lBQ3hDLE9BQU8sQ0FBVTtJQUNqQiw2QkFBNkI7SUFDN0IsS0FBSyxHQUEwQixPQUFPLENBQUM7SUFDdkMsNkJBQTZCO0lBQzdCLEtBQUssQ0FBVTtJQUNmLDhEQUE4RDtJQUM5RCxPQUFPLENBQVU7SUFDakIseUNBQXlDO0lBQ3pDLFdBQVcsR0FBSSxLQUFLLENBQUM7SUFDckIscUNBQXFDO0lBQ3JDLGFBQWEsR0FBaUM7UUFDNUMsZ0JBQWdCLEVBQUUsY0FBYztRQUNoQyxnQkFBZ0IsRUFBRSxjQUFjO0tBQ2pDLENBQUM7SUFFRixZQUFvQixVQUFpRDtRQUFqRCxlQUFVLEdBQVYsVUFBVSxDQUF1QztJQUFHLENBQUM7SUFFekUsS0FBSztRQUNILElBQUksQ0FBQyxVQUFVLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELGFBQWE7UUFDWCxRQUFRLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNuQixLQUFLLFVBQVU7Z0JBQ2IsT0FBTyxPQUFPLENBQUM7WUFDakIsS0FBSyxPQUFPLENBQUM7WUFDYixLQUFLLFNBQVM7Z0JBQ1osT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO1lBQ3BCO2dCQUNFLE9BQU8sT0FBTyxDQUFDO1FBQ25CLENBQUM7SUFDSCxDQUFDO0lBRUQsYUFBYTtRQUNYLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDO0lBQ3ZDLENBQUM7dUdBdkNVLHVCQUF1QjsyRkFBdkIsdUJBQXVCLHdEQ2ZwQyxtdERBNERBOzsyRkQ3Q2EsdUJBQXVCO2tCQUxuQyxTQUFTOytCQUNFLGtCQUFrQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0RGlhbG9nUmVmIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGlhbG9nJztcblxuZXhwb3J0IHR5cGUgVGRTdGF0dXNEaWFsb2dTdGF0ZXMgPSAnZXJyb3InIHwgJ3Bvc2l0aXZlJyB8ICd3YXJuaW5nJztcblxuZXhwb3J0IHR5cGUgVGRTdGF0dXNEaWFsb2dEZXRhaWxzTGFiZWxzID0ge1xuICBzaG93RGV0YWlsc0xhYmVsOiBzdHJpbmc7XG4gIGhpZGVEZXRhaWxzTGFiZWw6IHN0cmluZztcbn07XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RkLXN0YXR1cy1kaWFsb2cnLFxuICB0ZW1wbGF0ZVVybDogJy4vc3RhdHVzLWRpYWxvZy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3N0YXR1cy1kaWFsb2cuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgVGRTdGF0dXNEaWFsb2dDb21wb25lbnQge1xuICAvLyBMYWJlbCBvZiB0aGUgY2xvc2UgYnV0dG9uIGluIHRoZSBmb290ZXJcbiAgY2xvc2VCdXR0b24/OiBzdHJpbmcgPSAnQ0xPU0UnO1xuICAvLyBNZXNzYWdlIHRvIGJlIGRpc3BsYXllZCBpbiB0aGUgZGlhbG9nXG4gIG1lc3NhZ2U/OiBzdHJpbmc7XG4gIC8vIFN0YXRlIG9mIHRoZSBzdGF0dXMgZGlhbG9nXG4gIHN0YXRlPzogVGRTdGF0dXNEaWFsb2dTdGF0ZXMgPSAnZXJyb3InO1xuICAvLyBUaXRsZSBvZiB0aGUgc3RhdHVzIGRpYWxvZ1xuICB0aXRsZT86IHN0cmluZztcbiAgLy8gQWRkaXRpb25hbCBkZXRhaWxzIHRvIGJlIGRpc3BsYXllZCBhZnRlciB0aGUgZGlhbG9nIG1lc3NhZ2VcbiAgZGV0YWlscz86IHN0cmluZztcbiAgLy8gVG9nZ2xlcyB0aGUgYWRkaXRpb25hbCBkZXRhaWxzIHNlY3Rpb25cbiAgc2hvd0RldGFpbHM/ID0gZmFsc2U7XG4gIC8vIExhYmVscyBmb3IgdGhlIHRvZ2dsZSBkZXRhaWxzIGxpbmtcbiAgZGV0YWlsc0xhYmVscz86IFRkU3RhdHVzRGlhbG9nRGV0YWlsc0xhYmVscyA9IHtcbiAgICBzaG93RGV0YWlsc0xhYmVsOiAnU2hvdyBkZXRhaWxzJyxcbiAgICBoaWRlRGV0YWlsc0xhYmVsOiAnSGlkZSBkZXRhaWxzJyxcbiAgfTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9kaWFsb2dSZWY6IE1hdERpYWxvZ1JlZjxUZFN0YXR1c0RpYWxvZ0NvbXBvbmVudD4pIHt9XG5cbiAgY2xvc2UoKTogdm9pZCB7XG4gICAgdGhpcy5fZGlhbG9nUmVmLmNsb3NlKCk7XG4gIH1cblxuICBnZXRTdGF0dXNJY29uKCk6IHN0cmluZyB7XG4gICAgc3dpdGNoICh0aGlzLnN0YXRlKSB7XG4gICAgICBjYXNlICdwb3NpdGl2ZSc6XG4gICAgICAgIHJldHVybiAnY2hlY2snO1xuICAgICAgY2FzZSAnZXJyb3InOlxuICAgICAgY2FzZSAnd2FybmluZyc6XG4gICAgICAgIHJldHVybiB0aGlzLnN0YXRlO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuICdlcnJvcic7XG4gICAgfVxuICB9XG5cbiAgdG9nZ2xlRGV0YWlscygpOiB2b2lkIHtcbiAgICB0aGlzLnNob3dEZXRhaWxzID0gIXRoaXMuc2hvd0RldGFpbHM7XG4gIH1cbn1cbiIsIjx0ZC1kaWFsb2cgY2xhc3M9XCJ0ZC1zdGF0dXMtZGlhbG9nXCI+XG4gIDwhLS0gRGlzcGxheXMgdGhlIGljb24gYW5kIGJhY2tncm91bmQgY29sb3IgYWNjb3JkaW5nIHRvIHRoZSBzdGF0ZSAtLT5cbiAgPGRpdiB0ZERpYWxvZ1N0YXR1cyBjbGFzcz1cInRkLXN0YXR1cy1kaWFsb2ctc3RhdGVcIiBbbmdDbGFzc109XCJzdGF0ZVwiPlxuICAgIDxtYXQtaWNvbj5cbiAgICAgIHt7IGdldFN0YXR1c0ljb24oKSB9fVxuICAgIDwvbWF0LWljb24+XG4gIDwvZGl2PlxuICA8IS0tIERpYWxvZyB0aXRsZSBhbmQgdGhlIGNsb3NlIGljb24gLS0+XG4gIDxuZy1jb250YWluZXIgdGREaWFsb2dUaXRsZT5cbiAgICA8ZGl2IGNsYXNzPVwidGQtc3RhdHVzLWRpYWxvZy10aXRsZVwiPlxuICAgICAgPHNwYW4gKm5nSWY9XCJ0aXRsZVwiIGNsYXNzPVwiXCI+e3sgdGl0bGUgfX08L3NwYW4+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIG1hdC1pY29uLWJ1dHRvblxuICAgICAgICBjbGFzcz1cInRkLXN0YXR1cy1kaWFsb2dfX2ljb24tYnV0dG9uXCJcbiAgICAgICAgKGNsaWNrKT1cImNsb3NlKClcIlxuICAgICAgPlxuICAgICAgICA8bWF0LWljb24+Y2xvc2U8L21hdC1pY29uPlxuICAgICAgPC9idXR0b24+XG4gICAgPC9kaXY+XG4gIDwvbmctY29udGFpbmVyPlxuICA8IS0tIERpYWxvZyBjb250ZW50IHdpdGggYWRkaXRvbmFsIGluZm9ybWF0aW9uIC0tPlxuICA8bmctY29udGFpbmVyIHRkRGlhbG9nQ29udGVudD5cbiAgICA8c3BhbiBjbGFzcz1cInRkLWRpYWxvZy1tZXNzYWdlXCI+XG4gICAgICB7eyBtZXNzYWdlIH19XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwidGQtc3RhdHVzLWRpYWxvZ19fdG9nZ2xlLWRldGFpbHNcIlxuICAgICAgICByb2xlPVwiYnV0dG9uXCJcbiAgICAgICAgdGFiaW5kZXg9XCIwXCJcbiAgICAgICAgKm5nSWY9XCJkZXRhaWxzXCJcbiAgICAgICAgKGNsaWNrKT1cInRvZ2dsZURldGFpbHMoKVwiXG4gICAgICAgIChrZXlkb3duLmVudGVyKT1cInRvZ2dsZURldGFpbHMoKVwiXG4gICAgICA+XG4gICAgICAgIHt7XG4gICAgICAgICAgc2hvd0RldGFpbHNcbiAgICAgICAgICAgID8gZGV0YWlsc0xhYmVscz8uaGlkZURldGFpbHNMYWJlbFxuICAgICAgICAgICAgOiBkZXRhaWxzTGFiZWxzPy5zaG93RGV0YWlsc0xhYmVsXG4gICAgICAgIH19XG4gICAgICAgIDxtYXQtaWNvblxuICAgICAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgICAgICd0ZC1zdGF0dXMtZGlhbG9nX19hcnJvdy1pY29uJzogdHJ1ZSxcbiAgICAgICAgICAgIGNsb3NlOiAhc2hvd0RldGFpbHMsXG4gICAgICAgICAgICBvcGVuOiBzaG93RGV0YWlsc1xuICAgICAgICAgIH1cIlxuICAgICAgICAgID5hcnJvd19kcm9wX2Rvd248L21hdC1pY29uXG4gICAgICAgID5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiAqbmdJZj1cInNob3dEZXRhaWxzXCI+e3sgZGV0YWlscyB9fTwvZGl2PlxuICAgIDwvc3Bhbj5cbiAgPC9uZy1jb250YWluZXI+XG4gIDxuZy1jb250YWluZXIgdGREaWFsb2dBY3Rpb25zPlxuICAgIDxidXR0b25cbiAgICAgIG1hdC1yYWlzZWQtYnV0dG9uXG4gICAgICBjb2xvcj1cInByaW1hcnlcIlxuICAgICAgY2xhc3M9XCJ0ZC1zdGF0dXMtZGlhbG9nX19fYnV0dG9uXCJcbiAgICAgIChjbGljayk9XCJjbG9zZSgpXCJcbiAgICA+XG4gICAgICB7eyBjbG9zZUJ1dHRvbiB9fVxuICAgIDwvYnV0dG9uPlxuICA8L25nLWNvbnRhaW5lcj5cbjwvdGQtZGlhbG9nPlxuIl19

package/fesm2022/covalent-core-dialogs.mjs

@@ -13,13 +13,13 @@ 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';
-import * as i4$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
 
 class TdDialogTitleDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -45,10 +45,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             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.');
@@ -59,13 +68,16 @@ class TdDialogComponent {
         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 }], ngImport: i0, template: "<div mat-dialog-title *ngIf=\"dialogTitle.length > 0\">\n  <ng-content select=\"[tdDialogTitle]\"></ng-content>\n</div>\n<mat-dialog-content class=\"td-dialog-content\" *ngIf=\"dialogContent.length > 0\">\n  <ng-content select=\"[tdDialogContent]\"></ng-content>\n</mat-dialog-content>\n<mat-dialog-actions class=\"td-dialog-actions\" *ngIf=\"dialogActions.length > 0\">\n  <span class=\"td-dialog-spacer\"></span>\n  <ng-content select=\"[tdDialogActions]\"></ng-content>\n</mat-dialog-actions>\n", styles: [".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}\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]" }] });
+    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 mat-dialog-title *ngIf=\"dialogTitle.length > 0\">\n  <ng-content select=\"[tdDialogTitle]\"></ng-content>\n</div>\n<mat-dialog-content class=\"td-dialog-content\" *ngIf=\"dialogContent.length > 0\">\n  <ng-content select=\"[tdDialogContent]\"></ng-content>\n</mat-dialog-content>\n<mat-dialog-actions class=\"td-dialog-actions\" *ngIf=\"dialogActions.length > 0\">\n  <span class=\"td-dialog-spacer\"></span>\n  <ng-content select=\"[tdDialogActions]\"></ng-content>\n</mat-dialog-actions>\n", styles: [".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}\n"] }]
+            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 }]
@@ -75,6 +87,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }], dialogActions: [{
                 type: ContentChildren,
                 args: [TdDialogActionsDirective, { descendants: true }]
+            }], dialogStatus: [{
+                type: ContentChildren,
+                args: [TdDialogStatusDirective, { descendants: true }]
             }] } });
 
 class TdAlertDialogComponent {
@@ -192,6 +207,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 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;
@@ -350,6 +412,41 @@ class TdDialogService {
         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 });
 }
@@ -399,6 +496,7 @@ const TD_DIALOGS = [
     TdConfirmDialogComponent,
     TdPromptDialogComponent,
     TdDialogComponent,
+    TdDialogStatusDirective,
     TdDialogTitleDirective,
     TdDialogActionsDirective,
     TdDialogContentDirective,
@@ -406,6 +504,7 @@ const TD_DIALOGS = [
     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 });
@@ -413,13 +512,15 @@ class CovalentDialogsModule {
             TdConfirmDialogComponent,
             TdPromptDialogComponent,
             TdDialogComponent,
+            TdDialogStatusDirective,
             TdDialogTitleDirective,
             TdDialogActionsDirective,
             TdDialogContentDirective,
             TdWindowDialogComponent,
             TdAlertDialogComponent,
             TdConfirmDialogComponent,
-            TdPromptDialogComponent], imports: [FormsModule,
+            TdPromptDialogComponent,
+            TdStatusDialogComponent], imports: [FormsModule,
             CommonModule,
             MatDialogModule,
             MatInputModule,
@@ -430,13 +531,15 @@ class CovalentDialogsModule {
             TdConfirmDialogComponent,
             TdPromptDialogComponent,
             TdDialogComponent,
+            TdDialogStatusDirective,
             TdDialogTitleDirective,
             TdDialogActionsDirective,
             TdDialogContentDirective,
             TdWindowDialogComponent,
             TdAlertDialogComponent,
             TdConfirmDialogComponent,
-            TdPromptDialogComponent] });
+            TdPromptDialogComponent,
+            TdStatusDialogComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentDialogsModule, providers: [TdDialogService], imports: [FormsModule,
             CommonModule,
             MatDialogModule,
@@ -690,5 +793,5 @@ class ResizableDraggableDialog {
  * Generated bundle index. Do not edit.
  */
 
-export { CovalentDialogsModule, ResizableDraggableDialog, TdAlertDialogComponent, TdConfirmDialogComponent, TdDialogActionsDirective, TdDialogComponent, TdDialogContentDirective, TdDialogService, TdDialogTitleDirective, TdPromptDialogComponent, TdWindowDialogComponent };
+export { CovalentDialogsModule, ResizableDraggableDialog, TdAlertDialogComponent, TdConfirmDialogComponent, TdDialogActionsDirective, TdDialogComponent, TdDialogContentDirective, TdDialogService, TdDialogStatusDirective, TdDialogTitleDirective, TdPromptDialogComponent, TdStatusDialogComponent, TdWindowDialogComponent };
 //# sourceMappingURL=covalent-core-dialogs.mjs.map