@tapsellorg/angular-material-library/fesm2022/tapsellorg-angular-material-library-src-lib-form-expansion-panel.mjs

Angular library for Tapsell

import * as i0 from '@angular/core';
import { input, signal, ViewEncapsulation, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/material/expansion';
import { MatExpansionModule } from '@angular/material/expansion';

class PghFormExpansionPanelComponent {
    constructor() {
        this.disabled = input();
        this.expanded = input();
        this.name = input('');
        this.panelControl = input();
        this.preview = input();
        this.description = input();
        this.lazy = input(false);
        this.invalid = input();
        this.isCustomPreviewSet = signal(false);
    }
    ngOnChanges(changes) {
        if (changes.preview) {
            this.isCustomPreviewSet.set(true);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghFormExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PghFormExpansionPanelComponent, isStandalone: false, selector: "pgh-form-expansion-panel", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, panelControl: { classPropertyName: "panelControl", publicName: "panelControl", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<mat-expansion-panel\n  [class.pgh-invalid]=\"\n    invalid() == undefined ? panelControl()?.invalid && panelControl()?.touched : invalid()\n  \"\n  [disabled]=\"disabled()\"\n  [expanded]=\"expanded()\"\n>\n  <mat-expansion-panel-header>\n    <mat-panel-title>\n      <span class=\"text-truncate\" #nameContentRef>\n        <ng-content select=\"[pgh-name]\"></ng-content>\n      </span>\n      @if (!nameContentRef.innerHTML.trim() && name()) {\n      <span class=\"text-truncate\">\n        {{ name() }}\n      </span>\n      }\n    </mat-panel-title>\n    <mat-panel-description>\n      <span class=\"text-truncate\" #previewContentRef>\n        <ng-content select=\"[pgh-preview]\"></ng-content>\n      </span>\n      @if (!previewContentRef.innerHTML.trim() && preview() !== false) {\n      <span class=\"text-truncate\">\n        {{ isCustomPreviewSet() ? preview() : panelControl()?.value }}\n      </span>\n      }\n    </mat-panel-description>\n  </mat-expansion-panel-header>\n\n  @if (!lazy()) {\n  <ng-container *ngTemplateOutlet=\"expansionContentTpl\"></ng-container>\n  } @if (lazy()) {\n  <ng-template matExpansionPanelContent>\n    <ng-container *ngTemplateOutlet=\"expansionContentTpl\"></ng-container>\n  </ng-template>\n  }\n</mat-expansion-panel>\n\n<ng-template #expansionContentTpl>\n  <div class=\"pgh-panel-container\">\n    <div class=\"pgh-panel-content\">\n      <ng-content></ng-content>\n    </div>\n    <div\n      class=\"pgh-panel-description\"\n      [class.pgh-empty]=\"!descriptionContentRef.innerHTML.trim() && !description()\"\n    >\n      <span #descriptionContentRef>\n        <ng-content select=\"[pgh-description]\"></ng-content>\n      </span>\n      @if (!descriptionContentRef.innerHTML.trim()) {\n      <span>{{ description() }}</span>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".pgh-panel-container{display:flex;flex-wrap:nowrap}@media (max-width: 575.98px){.pgh-panel-container{flex-wrap:wrap}}.pgh-panel-content{flex:2 0 0;min-width:0;padding-inline-end:1.5rem}@media (max-width: 575.98px){.pgh-panel-content{flex:1 0 100%;padding-inline-end:0}}.pgh-panel-description{flex:1 0 0;padding-inline-start:1.5rem;border-inline-start:1px solid var(--light-border-color)}@media (max-width: 575.98px){.pgh-panel-description{order:-1;border:none;flex:1 0 100%;font-size:.875rem;color:var(--666);padding:0;margin-block:-.5rem 1rem;margin-inline:0}}.pgh-panel-description.pgh-empty{display:none}.mat-expansion-panel.pgh-invalid{border-inline-start:2px solid var(--danger)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "directive", type: i2.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghFormExpansionPanelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pgh-form-expansion-panel', encapsulation: ViewEncapsulation.None, standalone: false, template: "<mat-expansion-panel\n  [class.pgh-invalid]=\"\n    invalid() == undefined ? panelControl()?.invalid && panelControl()?.touched : invalid()\n  \"\n  [disabled]=\"disabled()\"\n  [expanded]=\"expanded()\"\n>\n  <mat-expansion-panel-header>\n    <mat-panel-title>\n      <span class=\"text-truncate\" #nameContentRef>\n        <ng-content select=\"[pgh-name]\"></ng-content>\n      </span>\n      @if (!nameContentRef.innerHTML.trim() && name()) {\n      <span class=\"text-truncate\">\n        {{ name() }}\n      </span>\n      }\n    </mat-panel-title>\n    <mat-panel-description>\n      <span class=\"text-truncate\" #previewContentRef>\n        <ng-content select=\"[pgh-preview]\"></ng-content>\n      </span>\n      @if (!previewContentRef.innerHTML.trim() && preview() !== false) {\n      <span class=\"text-truncate\">\n        {{ isCustomPreviewSet() ? preview() : panelControl()?.value }}\n      </span>\n      }\n    </mat-panel-description>\n  </mat-expansion-panel-header>\n\n  @if (!lazy()) {\n  <ng-container *ngTemplateOutlet=\"expansionContentTpl\"></ng-container>\n  } @if (lazy()) {\n  <ng-template matExpansionPanelContent>\n    <ng-container *ngTemplateOutlet=\"expansionContentTpl\"></ng-container>\n  </ng-template>\n  }\n</mat-expansion-panel>\n\n<ng-template #expansionContentTpl>\n  <div class=\"pgh-panel-container\">\n    <div class=\"pgh-panel-content\">\n      <ng-content></ng-content>\n    </div>\n    <div\n      class=\"pgh-panel-description\"\n      [class.pgh-empty]=\"!descriptionContentRef.innerHTML.trim() && !description()\"\n    >\n      <span #descriptionContentRef>\n        <ng-content select=\"[pgh-description]\"></ng-content>\n      </span>\n      @if (!descriptionContentRef.innerHTML.trim()) {\n      <span>{{ description() }}</span>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".pgh-panel-container{display:flex;flex-wrap:nowrap}@media (max-width: 575.98px){.pgh-panel-container{flex-wrap:wrap}}.pgh-panel-content{flex:2 0 0;min-width:0;padding-inline-end:1.5rem}@media (max-width: 575.98px){.pgh-panel-content{flex:1 0 100%;padding-inline-end:0}}.pgh-panel-description{flex:1 0 0;padding-inline-start:1.5rem;border-inline-start:1px solid var(--light-border-color)}@media (max-width: 575.98px){.pgh-panel-description{order:-1;border:none;flex:1 0 100%;font-size:.875rem;color:var(--666);padding:0;margin-block:-.5rem 1rem;margin-inline:0}}.pgh-panel-description.pgh-empty{display:none}.mat-expansion-panel.pgh-invalid{border-inline-start:2px solid var(--danger)}\n"] }]
        }], ctorParameters: () => [] });

class PghFormExpansionPanelModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghFormExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: PghFormExpansionPanelModule, declarations: [PghFormExpansionPanelComponent], imports: [CommonModule, MatExpansionModule], exports: [PghFormExpansionPanelComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghFormExpansionPanelModule, imports: [CommonModule, MatExpansionModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghFormExpansionPanelModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [PghFormExpansionPanelComponent],
                    imports: [CommonModule, MatExpansionModule],
                    exports: [PghFormExpansionPanelComponent],
                }]
        }] });

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

export { PghFormExpansionPanelComponent, PghFormExpansionPanelModule };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-form-expansion-panel.mjs.map