@tapsellorg/angular-material-library/fesm2022/tapsellorg-angular-material-library-src-lib-message-card.mjs

Angular library for Tapsell

import { BreakpointObserver } from '@angular/cdk/layout';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, ChangeDetectorRef, input, output, signal, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import { PghBreakpoints } from '@tapsellorg/angular-material-library/media';
import { takeUntil } from 'rxjs';
import { withDestroy } from '@tapsellorg/angular-material-library/src/lib/common';
import * as i1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i2 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i3 from '@angular/material/progress-spinner';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

class PghMessageCardComponent extends withDestroy() {
    constructor() {
        super(...arguments);
        this.breakpointObserver = inject(BreakpointObserver);
        this.cdr = inject(ChangeDetectorRef);
        this.title = input('حساب کاربری با موفقیت ایجاد شد');
        this.description = input('در حال انتقال به پنل تپسل');
        this.hasIcon = input(true);
        this.supportButtonClick = output();
        this.isMobile = signal(false);
    }
    ngOnInit() {
        this.onObserveBreakpoints();
    }
    onSupportClick() {
        this.supportButtonClick.emit();
    }
    onObserveBreakpoints() {
        this.breakpointObserver
            .observe(PghBreakpoints.md)
            .pipe(takeUntil(this._destroyed$))
            .subscribe(result => {
            this.isMobile.set(!result.matches);
            this.cdr.detectChanges();
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghMessageCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghMessageCardComponent, isStandalone: true, selector: "pgh-message-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, hasIcon: { classPropertyName: "hasIcon", publicName: "hasIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { supportButtonClick: "supportButtonClick" }, usesInheritance: true, ngImport: i0, template: "<div class=\"pgh-card-layout container\" [class.mobile]=\"isMobile()\">\n  <div class=\"pgh-card p-4\" [class.mobile]=\"isMobile()\">\n    <div class=\"w-100 flex-grow-1 d-flex justify-content-center align-items-end\">\n      @if (hasIcon()) {\n      <div class=\"pgh-success-icon d-flex align-items-center justify-content-center\">\n        <mat-icon svgIcon=\"check_circle\"></mat-icon>\n      </div>\n      }\n    </div>\n    <div class=\"w-100 flex-grow-1 text-center mt-3\">\n      <h3 class=\"mb-2\">{{ title() }}</h3>\n      <h5>{{ description() }}</h5>\n      <div class=\"d-flex justify-content-center mt-3\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n      </div>\n    </div>\n\n    <a class=\"d-flex align-items-center\">\n      <mat-icon svgIcon=\"support_agent\"></mat-icon>\n      <button mat-button color=\"primary\" (click)=\"onSupportClick()\">\u0646\u06CC\u0627\u0632 \u0628\u0647 \u06A9\u0645\u06A9 \u062F\u0627\u0631\u0645</button>\n    </a>\n  </div>\n</div>\n", styles: [".pgh-card-layout{min-height:80vh;display:flex;justify-content:center;background-color:transparent;margin-inline:auto auto;width:100%;position:relative;--gutter-x: 0}.pgh-card-layout.mobile{overflow-x:hidden;min-height:100%;margin-top:0;background-color:var(--fff);padding:1.5rem}.pgh-card{max-width:400px;width:40%;background-color:var(--fff);display:flex;flex-direction:column;align-items:center;justify-content:space-between;border-radius:1rem;box-shadow:var(--shadow)}.pgh-card .pgh-success-icon{width:fit-content;background-color:var(--primary-50);border-radius:50%;padding:.5rem}.pgh-card .pgh-success-icon mat-icon{color:var(--primary);width:32px;height:32px}.pgh-card.mobile{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghMessageCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pgh-message-card', imports: [CommonModule, MatIconModule, MatButtonModule, MatProgressSpinnerModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pgh-card-layout container\" [class.mobile]=\"isMobile()\">\n  <div class=\"pgh-card p-4\" [class.mobile]=\"isMobile()\">\n    <div class=\"w-100 flex-grow-1 d-flex justify-content-center align-items-end\">\n      @if (hasIcon()) {\n      <div class=\"pgh-success-icon d-flex align-items-center justify-content-center\">\n        <mat-icon svgIcon=\"check_circle\"></mat-icon>\n      </div>\n      }\n    </div>\n    <div class=\"w-100 flex-grow-1 text-center mt-3\">\n      <h3 class=\"mb-2\">{{ title() }}</h3>\n      <h5>{{ description() }}</h5>\n      <div class=\"d-flex justify-content-center mt-3\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n      </div>\n    </div>\n\n    <a class=\"d-flex align-items-center\">\n      <mat-icon svgIcon=\"support_agent\"></mat-icon>\n      <button mat-button color=\"primary\" (click)=\"onSupportClick()\">\u0646\u06CC\u0627\u0632 \u0628\u0647 \u06A9\u0645\u06A9 \u062F\u0627\u0631\u0645</button>\n    </a>\n  </div>\n</div>\n", styles: [".pgh-card-layout{min-height:80vh;display:flex;justify-content:center;background-color:transparent;margin-inline:auto auto;width:100%;position:relative;--gutter-x: 0}.pgh-card-layout.mobile{overflow-x:hidden;min-height:100%;margin-top:0;background-color:var(--fff);padding:1.5rem}.pgh-card{max-width:400px;width:40%;background-color:var(--fff);display:flex;flex-direction:column;align-items:center;justify-content:space-between;border-radius:1rem;box-shadow:var(--shadow)}.pgh-card .pgh-success-icon{width:fit-content;background-color:var(--primary-50);border-radius:50%;padding:.5rem}.pgh-card .pgh-success-icon mat-icon{color:var(--primary);width:32px;height:32px}.pgh-card.mobile{border-radius:0}\n"] }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { PghMessageCardComponent };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-message-card.mjs.map