@tapsellorg/angular-material-library/fesm2022/tapsellorg-angular-material-library-condition-builder.mjs

Angular library for Tapsell

import * as i0 from '@angular/core';
import { input, output, effect, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, TemplateRef, ContentChild, Inject, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3$1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i4$1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i5 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i1$1 from '@angular/forms';
import { UntypedFormControl, NG_VALUE_ACCESSOR, UntypedFormGroup, UntypedFormArray, ReactiveFormsModule } from '@angular/forms';
import * as i6 from '@angular/material/divider';
import { MatDividerModule } from '@angular/material/divider';
import * as i3 from '@angular/material/button-toggle';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import * as i4 from '@tapsellorg/angular-material-library/src/lib/translate';
import { TranslateModule } from '@tapsellorg/angular-material-library/src/lib/translate';

class PghConditionOperatorComponent {
    constructor() {
        this.value = input();
        this.valueChanges = output();
        this.operatorControl = new UntypedFormControl('AND');
        effect(() => {
            if (this.value()) {
                this.operatorControl.setValue(this.value());
            }
        });
    }
    ngOnInit() {
        this.setUpOperatorChangeValueListener();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    writeValue(value) {
        this.operatorControl.setValue(value);
    }
    setUpOperatorChangeValueListener() {
        this.operatorControl.valueChanges.subscribe(value => {
            if (this.onChange)
                this.onChange?.(value);
            else
                this.valueChanges.emit(value);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghConditionOperatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: PghConditionOperatorComponent, isStandalone: false, selector: "pgh-condition-operator", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanges: "valueChanges" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => PghConditionOperatorComponent),
                multi: true,
            },
        ], ngImport: i0, template: "<div class=\"pgh-condition-operator\">\n  <div class=\"pgh-condition-operator-horizontal-line\"></div>\n  <div class=\"pgh-condition-operator-vertical-line\"></div>\n  <div>\n    <mat-button-toggle-group [formControl]=\"operatorControl\" vertical>\n      <mat-button-toggle\n        value=\"AND\"\n        [ngClass]=\"operatorControl.value === 'AND' ? ['font-weight-bold', 'text-primary'] : ''\"\n      >\n        {{ 'CONDITION_BUILDER_AND' | translate }}\n      </mat-button-toggle>\n      <mat-button-toggle\n        value=\"OR\"\n        [ngClass]=\"operatorControl.value === 'OR' ? ['font-weight-bold', 'text-accent'] : ''\"\n      >\n        {{ 'CONDITION_BUILDER_OR' | translate }}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n  <div class=\"pgh-condition-operator-vertical-line\"></div>\n  <div class=\"pgh-condition-operator-horizontal-line\"></div>\n</div>\n", styles: [".pgh-condition-operator{height:100%;display:flex;flex-direction:column}.pgh-condition-operator-vertical-line{margin-inline-start:1.5rem;min-height:.75rem;width:.125rem;flex-grow:1;background-color:var(--ccc)}.pgh-condition-operator-horizontal-line{margin-inline-start:1.5rem;border-end-end-radius:var(--box-radius);border-start-end-radius:var(--box-radius);width:.75rem;height:.125rem;background-color:var(--ccc)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghConditionOperatorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pgh-condition-operator', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => PghConditionOperatorComponent),
                            multi: true,
                        },
                    ], standalone: false, template: "<div class=\"pgh-condition-operator\">\n  <div class=\"pgh-condition-operator-horizontal-line\"></div>\n  <div class=\"pgh-condition-operator-vertical-line\"></div>\n  <div>\n    <mat-button-toggle-group [formControl]=\"operatorControl\" vertical>\n      <mat-button-toggle\n        value=\"AND\"\n        [ngClass]=\"operatorControl.value === 'AND' ? ['font-weight-bold', 'text-primary'] : ''\"\n      >\n        {{ 'CONDITION_BUILDER_AND' | translate }}\n      </mat-button-toggle>\n      <mat-button-toggle\n        value=\"OR\"\n        [ngClass]=\"operatorControl.value === 'OR' ? ['font-weight-bold', 'text-accent'] : ''\"\n      >\n        {{ 'CONDITION_BUILDER_OR' | translate }}\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n  <div class=\"pgh-condition-operator-vertical-line\"></div>\n  <div class=\"pgh-condition-operator-horizontal-line\"></div>\n</div>\n", styles: [".pgh-condition-operator{height:100%;display:flex;flex-direction:column}.pgh-condition-operator-vertical-line{margin-inline-start:1.5rem;min-height:.75rem;width:.125rem;flex-grow:1;background-color:var(--ccc)}.pgh-condition-operator-horizontal-line{margin-inline-start:1.5rem;border-end-end-radius:var(--box-radius);border-start-end-radius:var(--box-radius);width:.75rem;height:.125rem;background-color:var(--ccc)}\n"] }]
        }], ctorParameters: () => [] });

/**
 * Deep clones the given AbstractControl, preserving values, validators, async validators, and disabled status.
 * @param control AbstractControl
 * @returns AbstractControl
 */
function pghCloneAbstractControl(control) {
    let newControl;
    if (control instanceof UntypedFormGroup) {
        const formGroup = new UntypedFormGroup({}, control.validator, control.asyncValidator);
        const { controls } = control;
        Object.keys(controls).forEach(key => {
            formGroup.addControl(key, pghCloneAbstractControl(controls[key]));
        });
        newControl = formGroup;
    }
    else if (control instanceof UntypedFormArray) {
        const formArray = new UntypedFormArray([], control.validator, control.asyncValidator);
        control.controls.forEach(formControl => formArray.push(pghCloneAbstractControl(formControl)));
        newControl = formArray;
    }
    else if (control instanceof UntypedFormControl) {
        newControl = new UntypedFormControl(control.value, control.validator, control.asyncValidator);
    }
    else {
        throw new Error('Error: unexpected control value');
    }
    if (control.disabled)
        newControl.disable({ emitEvent: false });
    return newControl;
}

const PGH_CONDITION_BUILDER_CONFIG = new InjectionToken('condition-builder-config', {
    providedIn: 'root',
    factory: () => {
        const result = {
            hasReset: true,
            hasValidation: true,
            addButtonText: 'CONDITION_BUILDER_NEW_FILTER_BUTTON',
            resetButtonText: 'CONDITION_BUILDER_RESET_BUTTON',
            deleteButtonTooltip: 'CONDITION_BUILDER_DELETE_BUTTON',
            validationHintTooltip: 'CONDITION_BUILDER_VALIDATION_HINT',
            hasDeleteButtonOnLengthOne: false,
        };
        return result;
    },
});

class PghConditionBuilderComponent {
    constructor(formBuilder, changeDetectorRef, conditionBuilderConfig) {
        this.formBuilder = formBuilder;
        this.changeDetectorRef = changeDetectorRef;
        this.conditionBuilderConfig = conditionBuilderConfig;
        this.filterControl = input();
        this.addButtonText = input();
        this.conditionBuilderForm = this.formBuilder.group({
            operator: 'AND',
            filters: this.formBuilder.array([]),
        });
    }
    ngOnInit() {
        this.setupFormChangeValueListener();
        this.addNewFilter();
    }
    get filters() {
        return this.conditionBuilderForm.controls['filters'];
    }
    get operator() {
        return this.conditionBuilderForm.controls['operator'];
    }
    addNewFilter() {
        if (this.filterControl())
            this.filters.push(pghCloneAbstractControl(this.filterControl()));
    }
    onOperatorChange(event) {
        this.operator.setValue(event);
    }
    deleteFilter(index) {
        this.filters.removeAt(index);
        if (!this.filters.length) {
            this.addNewFilter();
        }
    }
    setupFormChangeValueListener() {
        this.conditionBuilderForm.valueChanges.subscribe((value) => {
            if (value?.filters)
                value.filters = value.filters.filter(filter => filter);
            this.onChange?.(value);
        });
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    writeValue(value) {
        this.filters.clear();
        if (value) {
            value.filters.forEach(_ => this.addNewFilter());
            this.conditionBuilderForm.patchValue(value);
        }
        else {
            this.addNewFilter();
        }
        this.changeDetectorRef.markForCheck();
    }
    reset() {
        this.writeValue(null);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghConditionBuilderComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: PGH_CONDITION_BUILDER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PghConditionBuilderComponent, isStandalone: false, selector: "pgh-condition-builder", inputs: { filterControl: { classPropertyName: "filterControl", publicName: "filterControl", isSignal: true, isRequired: false, transformFunction: null }, addButtonText: { classPropertyName: "addButtonText", publicName: "addButtonText", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => PghConditionBuilderComponent),
                multi: true,
            },
        ], queries: [{ propertyName: "filterFormTemplateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div class=\"pgh-condition-builder\">\n  <div class=\"d-flex ps-3\" [formGroup]=\"conditionBuilderForm\">\n    @if (filters.length > 1) {\n    <div class=\"py-3 me-3\">\n      <pgh-condition-operator\n        [value]=\"operator.value\"\n        (valueChanges)=\"onOperatorChange($event)\"\n      ></pgh-condition-operator>\n    </div>\n    }\n    <div class=\"pgh-condition-builder-filters\" formArrayName=\"filters\">\n      @for (filter of filters.controls; track filter; let i = $index) { @if (i > 0) {\n      <mat-divider class=\"pgh-condition-builder-divider\"></mat-divider>\n      }\n      <div class=\"d-flex align-items-center\">\n        <div class=\"flex-grow-1\" [formGroupName]=\"i\">\n          <ng-container\n            *ngTemplateOutlet=\"filterFormTemplateRef; context: { $implicit: filter, index: i }\"\n          ></ng-container>\n        </div>\n        @if (conditionBuilderConfig.hasDeleteButtonOnLengthOne || filters.length > 1) {\n        <button\n          mat-icon-button\n          class=\"text-gray\"\n          [matTooltip]=\"conditionBuilderConfig.deleteButtonTooltip | translate\"\n          (click)=\"deleteFilter(i)\"\n        >\n          <mat-icon svgIcon=\"delete\"></mat-icon>\n        </button>\n        }\n      </div>\n      }\n    </div>\n  </div>\n  <div class=\"pgh-condition-builder-actions\">\n    <div class=\"d-flex align-items-center\">\n      <button\n        mat-button\n        color=\"primary\"\n        (click)=\"addNewFilter()\"\n        [disabled]=\"conditionBuilderConfig.hasValidation ? conditionBuilderForm.invalid : false\"\n      >\n        <mat-icon svgIcon=\"add\" class=\"me-1\"></mat-icon>\n        <span>{{ addButtonText() ?? (conditionBuilderConfig.addButtonText | translate) }}</span>\n      </button>\n      @if (conditionBuilderConfig.hasValidation ? conditionBuilderForm.invalid : false) {\n      <mat-icon\n        svgIcon=\"info\"\n        class=\"text-gray\"\n        [matTooltip]=\"conditionBuilderConfig.validationHintTooltip | translate\"\n      ></mat-icon>\n      }\n    </div>\n    @if (conditionBuilderConfig.hasReset) {\n    <button mat-button color=\"primary\" (click)=\"reset()\">\n      {{ 'CONDITION_BUILDER_RESET_BUTTON' | translate }}\n    </button>\n    }\n  </div>\n</div>\n", styles: [".pgh-condition-builder{border-radius:var(--box-radius);border:1px solid var(--light-border-color)}.pgh-condition-builder-filters{flex-grow:1;margin-block:1rem;margin-inline:0;margin-inline-end:1rem}.pgh-condition-builder-actions{display:flex;justify-content:space-between;padding:.5rem;background-color:var(--f9f9f9);border-radius:0 0 var(--box-radius) var(--box-radius)}.pgh-condition-builder-divider{border-top-style:dashed!important}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.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: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: PghConditionOperatorComponent, selector: "pgh-condition-operator", inputs: ["value"], outputs: ["valueChanges"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghConditionBuilderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pgh-condition-builder', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => PghConditionBuilderComponent),
                            multi: true,
                        },
                    ], standalone: false, template: "<div class=\"pgh-condition-builder\">\n  <div class=\"d-flex ps-3\" [formGroup]=\"conditionBuilderForm\">\n    @if (filters.length > 1) {\n    <div class=\"py-3 me-3\">\n      <pgh-condition-operator\n        [value]=\"operator.value\"\n        (valueChanges)=\"onOperatorChange($event)\"\n      ></pgh-condition-operator>\n    </div>\n    }\n    <div class=\"pgh-condition-builder-filters\" formArrayName=\"filters\">\n      @for (filter of filters.controls; track filter; let i = $index) { @if (i > 0) {\n      <mat-divider class=\"pgh-condition-builder-divider\"></mat-divider>\n      }\n      <div class=\"d-flex align-items-center\">\n        <div class=\"flex-grow-1\" [formGroupName]=\"i\">\n          <ng-container\n            *ngTemplateOutlet=\"filterFormTemplateRef; context: { $implicit: filter, index: i }\"\n          ></ng-container>\n        </div>\n        @if (conditionBuilderConfig.hasDeleteButtonOnLengthOne || filters.length > 1) {\n        <button\n          mat-icon-button\n          class=\"text-gray\"\n          [matTooltip]=\"conditionBuilderConfig.deleteButtonTooltip | translate\"\n          (click)=\"deleteFilter(i)\"\n        >\n          <mat-icon svgIcon=\"delete\"></mat-icon>\n        </button>\n        }\n      </div>\n      }\n    </div>\n  </div>\n  <div class=\"pgh-condition-builder-actions\">\n    <div class=\"d-flex align-items-center\">\n      <button\n        mat-button\n        color=\"primary\"\n        (click)=\"addNewFilter()\"\n        [disabled]=\"conditionBuilderConfig.hasValidation ? conditionBuilderForm.invalid : false\"\n      >\n        <mat-icon svgIcon=\"add\" class=\"me-1\"></mat-icon>\n        <span>{{ addButtonText() ?? (conditionBuilderConfig.addButtonText | translate) }}</span>\n      </button>\n      @if (conditionBuilderConfig.hasValidation ? conditionBuilderForm.invalid : false) {\n      <mat-icon\n        svgIcon=\"info\"\n        class=\"text-gray\"\n        [matTooltip]=\"conditionBuilderConfig.validationHintTooltip | translate\"\n      ></mat-icon>\n      }\n    </div>\n    @if (conditionBuilderConfig.hasReset) {\n    <button mat-button color=\"primary\" (click)=\"reset()\">\n      {{ 'CONDITION_BUILDER_RESET_BUTTON' | translate }}\n    </button>\n    }\n  </div>\n</div>\n", styles: [".pgh-condition-builder{border-radius:var(--box-radius);border:1px solid var(--light-border-color)}.pgh-condition-builder-filters{flex-grow:1;margin-block:1rem;margin-inline:0;margin-inline-end:1rem}.pgh-condition-builder-actions{display:flex;justify-content:space-between;padding:.5rem;background-color:var(--f9f9f9);border-radius:0 0 var(--box-radius) var(--box-radius)}.pgh-condition-builder-divider{border-top-style:dashed!important}\n"] }]
        }], ctorParameters: () => [{ type: i1$1.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [PGH_CONDITION_BUILDER_CONFIG]
                }] }], propDecorators: { filterFormTemplateRef: [{
                type: ContentChild,
                args: [TemplateRef]
            }] } });

class PghConditionBuilderModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghConditionBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: PghConditionBuilderModule, declarations: [PghConditionBuilderComponent, PghConditionOperatorComponent], imports: [CommonModule,
            MatButtonModule,
            MatIconModule,
            MatTooltipModule,
            ReactiveFormsModule,
            MatDividerModule,
            MatButtonToggleModule,
            TranslateModule], exports: [PghConditionBuilderComponent, PghConditionOperatorComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghConditionBuilderModule, imports: [CommonModule,
            MatButtonModule,
            MatIconModule,
            MatTooltipModule,
            ReactiveFormsModule,
            MatDividerModule,
            MatButtonToggleModule,
            TranslateModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghConditionBuilderModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [PghConditionBuilderComponent, PghConditionOperatorComponent],
                    imports: [
                        CommonModule,
                        MatButtonModule,
                        MatIconModule,
                        MatTooltipModule,
                        ReactiveFormsModule,
                        MatDividerModule,
                        MatButtonToggleModule,
                        TranslateModule,
                    ],
                    exports: [PghConditionBuilderComponent, PghConditionOperatorComponent],
                }]
        }] });

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

export { PghConditionBuilderComponent, PghConditionBuilderModule, PghConditionOperatorComponent, pghCloneAbstractControl };
//# sourceMappingURL=tapsellorg-angular-material-library-condition-builder.mjs.map