ngx-form-lib/esm2022/lib/features/button/button.component.mjs

Dynamic form library for Angular 18 with Material 3 support. Create complex reactive forms easily using JSON configuration with modern Angular 18 control flow syntax.

import { Component } from '@angular/core';
import { BaseComponent } from '../../core/components/base/base.component';
import { ButtonAttributeEnum } from './button-attribute.model';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/button";
import * as i3 from "@angular/material/icon";
import * as i4 from "../../shared/pipes/set-parent-config/set-parent-config.pipe";
export class ButtonComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.config = null;
        this.ButtonAttribute = ButtonAttributeEnum;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ButtonComponent, selector: "ngf-button", usesInheritance: true, ngImport: i0, template: "@if (config) {\r\n<div class=\"ngf-wrapper ngf-button-wrapper\">\r\n  <button\r\n    mat-button\r\n    [ngClass]=\"{\r\n      'mat-button': config.attribute === ButtonAttribute.MatButton,\r\n      'mat-flat-button': config.attribute === ButtonAttribute.MatFlatButton,\r\n      'mat-raised-button': config.attribute === ButtonAttribute.MatRaisedButton,\r\n      'mat-stroked-button':\r\n        config.attribute === ButtonAttribute.MatStrokedButton,\r\n      'mat-icon-button': config.attribute === ButtonAttribute.MatIconButton,\r\n      'mat-fab': config.attribute === ButtonAttribute.MatFab,\r\n      'mat-mini-fab': config.attribute === ButtonAttribute.MatMiniFab,\r\n      'mat-fill': config.attribute === ButtonAttribute.MatFilledButton,\r\n      'mat-outline': config.attribute === ButtonAttribute.MatOutlinedButton,\r\n      'mat-text': config.attribute === ButtonAttribute.MatTextButton,\r\n      'mat-elevated': config.attribute === ButtonAttribute.MatElevatedButton,\r\n      'mat-tonal': config.attribute === ButtonAttribute.MatTonalButton\r\n    }\"\r\n    [type]=\"config.subType\"\r\n    [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n  >\r\n    @if (config.attribute === ButtonAttribute.MatIconButton || config.attribute\r\n    === ButtonAttribute.MatFab || config.attribute ===\r\n    ButtonAttribute.MatMiniFab) {\r\n    <mat-icon>\r\n      {{ config.label }}\r\n    </mat-icon>\r\n    } @else {\r\n    {{ config.label }}\r\n    }\r\n  </button>\r\n</div>\r\n}\r\n", styles: [".ngf-button-wrapper button{width:100%;border-radius:20px;font-weight:500;text-transform:none;transition:all .2s ease-in-out}.ngf-button-wrapper button.mat-fill{background-color:var(--mdc-filled-button-container-color);color:var(--mdc-filled-button-label-text-color)}.ngf-button-wrapper button.mat-outline{border:1px solid var(--mdc-outlined-button-outline-color);color:var(--mdc-outlined-button-label-text-color)}.ngf-button-wrapper button.mat-text{color:var(--mdc-text-button-label-text-color)}.ngf-button-wrapper button.mat-elevated{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.ngf-button-wrapper button.mat-tonal{background-color:var(--mdc-filled-tonal-button-container-color);color:var(--mdc-filled-tonal-button-label-text-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i4.SetParentConfigPipe, name: "setParentConfig" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngf-button', template: "@if (config) {\r\n<div class=\"ngf-wrapper ngf-button-wrapper\">\r\n  <button\r\n    mat-button\r\n    [ngClass]=\"{\r\n      'mat-button': config.attribute === ButtonAttribute.MatButton,\r\n      'mat-flat-button': config.attribute === ButtonAttribute.MatFlatButton,\r\n      'mat-raised-button': config.attribute === ButtonAttribute.MatRaisedButton,\r\n      'mat-stroked-button':\r\n        config.attribute === ButtonAttribute.MatStrokedButton,\r\n      'mat-icon-button': config.attribute === ButtonAttribute.MatIconButton,\r\n      'mat-fab': config.attribute === ButtonAttribute.MatFab,\r\n      'mat-mini-fab': config.attribute === ButtonAttribute.MatMiniFab,\r\n      'mat-fill': config.attribute === ButtonAttribute.MatFilledButton,\r\n      'mat-outline': config.attribute === ButtonAttribute.MatOutlinedButton,\r\n      'mat-text': config.attribute === ButtonAttribute.MatTextButton,\r\n      'mat-elevated': config.attribute === ButtonAttribute.MatElevatedButton,\r\n      'mat-tonal': config.attribute === ButtonAttribute.MatTonalButton\r\n    }\"\r\n    [type]=\"config.subType\"\r\n    [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n  >\r\n    @if (config.attribute === ButtonAttribute.MatIconButton || config.attribute\r\n    === ButtonAttribute.MatFab || config.attribute ===\r\n    ButtonAttribute.MatMiniFab) {\r\n    <mat-icon>\r\n      {{ config.label }}\r\n    </mat-icon>\r\n    } @else {\r\n    {{ config.label }}\r\n    }\r\n  </button>\r\n</div>\r\n}\r\n", styles: [".ngf-button-wrapper button{width:100%;border-radius:20px;font-weight:500;text-transform:none;transition:all .2s ease-in-out}.ngf-button-wrapper button.mat-fill{background-color:var(--mdc-filled-button-container-color);color:var(--mdc-filled-button-label-text-color)}.ngf-button-wrapper button.mat-outline{border:1px solid var(--mdc-outlined-button-outline-color);color:var(--mdc-outlined-button-label-text-color)}.ngf-button-wrapper button.mat-text{color:var(--mdc-text-button-label-text-color)}.ngf-button-wrapper button.mat-elevated{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.ngf-button-wrapper button.mat-tonal{background-color:var(--mdc-filled-tonal-button-container-color);color:var(--mdc-filled-tonal-button-label-text-color)}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1mb3JtLWxpYi9zcmMvbGliL2ZlYXR1cmVzL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWZvcm0tbGliL3NyYy9saWIvZmVhdHVyZXMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTFDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwyQ0FBMkMsQ0FBQztBQUMxRSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQzs7Ozs7O0FBUS9ELE1BQU0sT0FBTyxlQUFnQixTQUFRLGFBQXFCO0lBTDFEOztRQU1XLFdBQU0sR0FBa0IsSUFBSSxDQUFDO1FBQ3RDLG9CQUFlLEdBQUcsbUJBQW1CLENBQUM7S0FDdkM7K0dBSFksZUFBZTttR0FBZixlQUFlLHlFQ1g1Qiw2OUNBa0NBOzs0RkR2QmEsZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxZQUFZIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5pbXBvcnQgeyBCYXNlQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vY29yZS9jb21wb25lbnRzL2Jhc2UvYmFzZS5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBCdXR0b25BdHRyaWJ1dGVFbnVtIH0gZnJvbSAnLi9idXR0b24tYXR0cmlidXRlLm1vZGVsJztcclxuaW1wb3J0IHsgQnV0dG9uIH0gZnJvbSAnLi9idXR0b24ubW9kZWwnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduZ2YtYnV0dG9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9idXR0b24uY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCBleHRlbmRzIEJhc2VDb21wb25lbnQ8c3RyaW5nPiB7XHJcbiAgb3ZlcnJpZGUgY29uZmlnOiBCdXR0b24gfCBudWxsID0gbnVsbDtcclxuICBCdXR0b25BdHRyaWJ1dGUgPSBCdXR0b25BdHRyaWJ1dGVFbnVtO1xyXG59XHJcbiIsIkBpZiAoY29uZmlnKSB7XHJcbjxkaXYgY2xhc3M9XCJuZ2Ytd3JhcHBlciBuZ2YtYnV0dG9uLXdyYXBwZXJcIj5cclxuICA8YnV0dG9uXHJcbiAgICBtYXQtYnV0dG9uXHJcbiAgICBbbmdDbGFzc109XCJ7XHJcbiAgICAgICdtYXQtYnV0dG9uJzogY29uZmlnLmF0dHJpYnV0ZSA9PT0gQnV0dG9uQXR0cmlidXRlLk1hdEJ1dHRvbixcclxuICAgICAgJ21hdC1mbGF0LWJ1dHRvbic6IGNvbmZpZy5hdHRyaWJ1dGUgPT09IEJ1dHRvbkF0dHJpYnV0ZS5NYXRGbGF0QnV0dG9uLFxyXG4gICAgICAnbWF0LXJhaXNlZC1idXR0b24nOiBjb25maWcuYXR0cmlidXRlID09PSBCdXR0b25BdHRyaWJ1dGUuTWF0UmFpc2VkQnV0dG9uLFxyXG4gICAgICAnbWF0LXN0cm9rZWQtYnV0dG9uJzpcclxuICAgICAgICBjb25maWcuYXR0cmlidXRlID09PSBCdXR0b25BdHRyaWJ1dGUuTWF0U3Ryb2tlZEJ1dHRvbixcclxuICAgICAgJ21hdC1pY29uLWJ1dHRvbic6IGNvbmZpZy5hdHRyaWJ1dGUgPT09IEJ1dHRvbkF0dHJpYnV0ZS5NYXRJY29uQnV0dG9uLFxyXG4gICAgICAnbWF0LWZhYic6IGNvbmZpZy5hdHRyaWJ1dGUgPT09IEJ1dHRvbkF0dHJpYnV0ZS5NYXRGYWIsXHJcbiAgICAgICdtYXQtbWluaS1mYWInOiBjb25maWcuYXR0cmlidXRlID09PSBCdXR0b25BdHRyaWJ1dGUuTWF0TWluaUZhYixcclxuICAgICAgJ21hdC1maWxsJzogY29uZmlnLmF0dHJpYnV0ZSA9PT0gQnV0dG9uQXR0cmlidXRlLk1hdEZpbGxlZEJ1dHRvbixcclxuICAgICAgJ21hdC1vdXRsaW5lJzogY29uZmlnLmF0dHJpYnV0ZSA9PT0gQnV0dG9uQXR0cmlidXRlLk1hdE91dGxpbmVkQnV0dG9uLFxyXG4gICAgICAnbWF0LXRleHQnOiBjb25maWcuYXR0cmlidXRlID09PSBCdXR0b25BdHRyaWJ1dGUuTWF0VGV4dEJ1dHRvbixcclxuICAgICAgJ21hdC1lbGV2YXRlZCc6IGNvbmZpZy5hdHRyaWJ1dGUgPT09IEJ1dHRvbkF0dHJpYnV0ZS5NYXRFbGV2YXRlZEJ1dHRvbixcclxuICAgICAgJ21hdC10b25hbCc6IGNvbmZpZy5hdHRyaWJ1dGUgPT09IEJ1dHRvbkF0dHJpYnV0ZS5NYXRUb25hbEJ1dHRvblxyXG4gICAgfVwiXHJcbiAgICBbdHlwZV09XCJjb25maWcuc3ViVHlwZVwiXHJcbiAgICBbY29sb3JdPVwicGFyZW50Q29uZmlnIHwgc2V0UGFyZW50Q29uZmlnIDogY29uZmlnIDogJ2NvbG9yJ1wiXHJcbiAgPlxyXG4gICAgQGlmIChjb25maWcuYXR0cmlidXRlID09PSBCdXR0b25BdHRyaWJ1dGUuTWF0SWNvbkJ1dHRvbiB8fCBjb25maWcuYXR0cmlidXRlXHJcbiAgICA9PT0gQnV0dG9uQXR0cmlidXRlLk1hdEZhYiB8fCBjb25maWcuYXR0cmlidXRlID09PVxyXG4gICAgQnV0dG9uQXR0cmlidXRlLk1hdE1pbmlGYWIpIHtcclxuICAgIDxtYXQtaWNvbj5cclxuICAgICAge3sgY29uZmlnLmxhYmVsIH19XHJcbiAgICA8L21hdC1pY29uPlxyXG4gICAgfSBAZWxzZSB7XHJcbiAgICB7eyBjb25maWcubGFiZWwgfX1cclxuICAgIH1cclxuICA8L2J1dHRvbj5cclxuPC9kaXY+XHJcbn1cclxuIl19