ngx-t-forms 2.0.24 → 2.0.26

package/fesm2022/ngx-t-forms-mscoa-segment-config.component-BXPghOuH.mjs

@@ -0,0 +1,299 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, EventEmitter, Output, Input, HostBinding, Optional, Self, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { Subject, BehaviorSubject, take, tap, catchError, takeUntil } from 'rxjs';
+import { M as MatModulesModule } from './ngx-t-forms-ngx-t-forms-CD9InaXz.mjs';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { v4 } from 'uuid';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import * as i2$1 from '@angular/material/autocomplete';
+import * as i2$2 from '@angular/material/button';
+import * as i3 from '@angular/material/card';
+import * as i5 from '@angular/material/chips';
+import * as i2$3 from '@angular/material/icon';
+import * as i2$4 from '@angular/material/select';
+import * as i9 from '@angular/material/slide-toggle';
+import * as i10 from '@angular/material/toolbar';
+import * as i13 from '@angular/material/input';
+
+class MscoaSegmentConfigComponent {
+    static { this.nextId = 0; }
+    constructor(fb, ngControl, _elementRef) {
+        this.fb = fb;
+        this.ngControl = ngControl;
+        this._elementRef = _elementRef;
+        this.announcer = inject(LiveAnnouncer);
+        this.stateChanges = new Subject();
+        this.id = `app-mscoa-segment-config'-${MscoaSegmentConfigComponent.nextId++}`;
+        this.placeholder = '';
+        this.focused = false;
+        this.required = false;
+        this.disabled = false;
+        this.touched = false;
+        this.onTouched = () => { };
+        this.errors = [];
+        this.dataValue = undefined;
+        this._showAllSegments = false;
+        this.isCashSegmentConfig = false;
+        this.valueChanged = new EventEmitter();
+        this._value = new BehaviorSubject([]);
+        this.destroy$ = new Subject();
+        this.error$ = new BehaviorSubject(null);
+        this.editingIndex = null;
+        this.isAddingNew = false;
+        this.getMscoaError = undefined;
+        this.segmentForm = this.createSegmentForm();
+    }
+    get empty() {
+        return !this.value;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get errorState() {
+        const hasError = !!this.ngControl?.control?.errors || (this.errors || []).length > 0 && this.touched;
+        return !this.value && !!this.required || hasError;
+    }
+    setDescribedByIds(ids) {
+        // Ensure the component view is initialized
+        if (this._elementRef && this._elementRef.nativeElement) {
+            const controlElement = this._elementRef.nativeElement.querySelector('.app-mscoa-segment-config');
+            // Check if the controlElement exists before attempting to set its attribute
+            if (controlElement) {
+                controlElement.setAttribute('aria-describedby', ids.join(' '));
+            }
+        }
+    }
+    onContainerClick(event) {
+        this.markAsTouched();
+        this.stateChanges.next();
+    }
+    markAsTouched() {
+        console.log('markAsTouched');
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    set value(val) {
+        this._value.next(val || []);
+    }
+    get value() {
+        return this._value.value;
+    }
+    set showAllSegments(val) {
+        if (!!val) {
+            this.checkShowAllSegments();
+        }
+        this._showAllSegments = !!val;
+    }
+    get showAllSegments() {
+        return this._showAllSegments;
+    }
+    set getMscoaTree(options$) {
+        if (!!options$ && this._getMscoaTree === undefined) {
+            this.getMscoaError = undefined;
+            this._getMscoaTree = options$;
+            this.loadMscoa();
+        }
+        else if (!options$) {
+            this.getMscoaError = 'No loader provided';
+        }
+    }
+    ngOnInit() {
+        this.listenToFormChanges();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadMscoa() {
+        this._getMscoaTree?.pipe(take(1), tap((options) => {
+            this.mscoaTree = options;
+            this.treeSegments = options?.accountTreeKeys?.map((treeKey) => ({
+                id: v4(),
+                segment: treeKey,
+                singleSelect: true,
+                additionalAccounts: [],
+                inheritValueFromAccrual: this.isCashSegmentConfig ? (treeKey.toLocaleLowerCase() !== 'item') : undefined,
+                vatSelectonActive: this.isCashSegmentConfig ? false : (treeKey.toLocaleLowerCase() === 'item'),
+                segmentExtension: false,
+                label: this.toTitleCase(treeKey),
+                readOnly: this.value.find((v) => v.segment === treeKey)?.readOnly || this.isCashSegmentConfig && (treeKey.toLocaleLowerCase() !== 'item') || false,
+            })) || [];
+        }), catchError((error) => {
+            this.getMscoaError = 'Failed to fetch mscoa tree';
+            console.error('Error while fetching SCOA tree:', error);
+            return [null];
+        })).subscribe();
+    }
+    createSegmentForm(segment = {
+        segment: '', label: '',
+        id: v4(),
+        singleSelect: true,
+        segmentExtension: false,
+        additionalAccounts: [],
+        readOnly: false
+    }) {
+        return this.fb.group({
+            segment: [segment.segment, Validators.required],
+            segmentExtension: [segment.segmentExtension, Validators.required],
+            readOnly: [segment.readOnly, Validators.required],
+            inheritValueFromAccrual: this.isCashSegmentConfig ? [segment.inheritValueFromAccrual, Validators.required] : undefined,
+            vatSelectonActive: segment.segment?.toLocaleLowerCase() === 'item' ? [Boolean(segment?.vatSelectonActive), Validators.required] : undefined,
+            additionalAccounts: [segment.additionalAccounts || [],],
+            label: [segment.label, Validators.required],
+            singleSelect: [segment.singleSelect, Validators.required]
+        });
+    }
+    listenToFormChanges() {
+        this.segmentForm.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((v) => console.log(v));
+    }
+    startAddNew() {
+        this.isAddingNew = true;
+        this.editingIndex = null;
+        this.segmentForm = this.createSegmentForm();
+    }
+    startEdit(index) {
+        this.editingIndex = index;
+        this.isAddingNew = false;
+        this.segmentForm = this.createSegmentForm(this.value[index]);
+    }
+    cancelEdit() {
+        this.editingIndex = null;
+        this.isAddingNew = false;
+        this.segmentForm.reset();
+    }
+    saveSegment() {
+        if (this.segmentForm.valid) {
+            const newSegment = ({
+                id: this.segmentForm.value.id || v4(),
+                segment: this.segmentForm.value.segment,
+                customSegment: !!this.segmentForm.value.segmentExtension ? this.segmentForm.value.label?.toLocaleUpperCase() : undefined,
+                segmentExtension: this.segmentForm.value.segmentExtension,
+                inheritValueFromAccrual: Boolean(this.segmentForm.value.inheritValueFromAccrual),
+                vatSelectonActive: Boolean(this.segmentForm.value.vatSelectonActive),
+                additionalAccounts: this.segmentForm.value.additionalAccounts,
+                label: this.toTitleCase(this.segmentForm.value.label),
+                singleSelect: this.segmentForm.value.singleSelect,
+                readOnly: this.segmentForm.value.readOnly
+            });
+            const updatedValue = [...this.value];
+            if (this.isAddingNew) {
+                updatedValue.push(newSegment);
+            }
+            else if (this.editingIndex !== null) {
+                updatedValue[this.editingIndex] = newSegment;
+            }
+            this._value.next(updatedValue);
+            this.valueChanged.emit(updatedValue);
+            this.cancelEdit();
+        }
+    }
+    readOnly(event) {
+        this.segmentForm.patchValue({ readOnly: event.checked });
+    }
+    singleSelectChange(event) {
+        this.segmentForm.patchValue({ singleSelect: event.checked });
+    }
+    setVatSelectionActive(event) {
+        this.segmentForm.patchValue({ vatSelectonActive: event.checked });
+    }
+    setInheritFromAccrual(event) {
+        +this.segmentForm.patchValue({ inheritValueFromAccrual: event.checked });
+        if (event.checked) {
+            this.segmentForm.patchValue({ readOnly: true });
+        }
+    }
+    removeSegment(index) {
+        const updatedValue = this.value.filter((_, i) => i !== index);
+        this._value.next(updatedValue);
+        this.valueChanged.emit(updatedValue);
+    }
+    toTitleCase(str) {
+        return str.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+    }
+    alreadyExists(segment) {
+        if (this.segmentForm.value.segmentExtension)
+            return false;
+        return this.value.find((v) => v.segment === segment.segment);
+    }
+    checkShowAllSegments() {
+        if (!this._getMscoaTree || !this.treeSegments)
+            return;
+        const updatedValue = this.treeSegments.map(segment => ({
+            ...segment,
+            ...(this.value.find(v => v.segment === segment.segment) || {})
+        }));
+        if (JSON.stringify(updatedValue) !== JSON.stringify(this.value)) {
+            this.valueChanged.emit([{}]);
+            setTimeout(() => {
+                this.valueChanged.emit(updatedValue);
+            }, 0);
+        }
+    }
+    selectSegment($event) {
+        this.segmentForm.patchValue({ segment: $event.value });
+        if (!this.segmentForm.value.segmentExtension) {
+            this.segmentForm.patchValue({ label: this.toTitleCase($event.value) });
+        }
+    }
+    multiLevelSelectChange(event) {
+        this.segmentForm.patchValue({ segmentExtension: event.checked });
+    }
+    get extensionAccountsForSegments() {
+        console.error('get extensionAccountsForSegments', this.dataValue?.mscoaConfig?.extensionAccountsForSegments);
+        return this.dataValue?.mscoaConfig?.extensionAccountsForSegments || [];
+    }
+    additionalAccountsChanged(event) {
+        // Force update by creating a new array
+        const newAdditionalAccounts = [...event.value];
+        this.segmentForm.patchValue({
+            additionalAccounts: newAdditionalAccounts
+        }, { emitEvent: true });
+        // Trigger state changes
+        this.stateChanges.next();
+        this.markAsTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MscoaSegmentConfigComponent, deps: [{ token: i1.FormBuilder }, { token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MscoaSegmentConfigComponent, isStandalone: true, selector: "app-mscoa-segment-config", inputs: { disabled: "disabled", errors: "errors", dataValue: "dataValue", value: "value", isCashSegmentConfig: "isCashSegmentConfig", showAllSegments: "showAllSegments", getMscoaTree: "getMscoaTree" }, outputs: { valueChanged: "valueChanged" }, host: { properties: { "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MscoaSegmentConfigComponent }], ngImport: i0, template: "<div *ngIf=\"(value||[]).length>0\" class=\"tree-instructions\">\n  <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n  <span>SCOA Segments Configuration</span>\n</div>\n\n<mat-chip-listbox [disabled]=\"disabled\" *ngIf=\"(value?.length || 0) > 0; else noSegments\" aria-label=\"Fish selection\">\n  @for (segment of value||[]; track segment.segment) {\n  <mat-chip-option (removed)=\"removeSegment($index)\" (click)=\"startEdit($index)\" color=\"accent\"\n    [value]=\"segment?.segment\" [selected]=\"this.editingIndex === $index\">\n    <div style=\"    \n    display: flex;\n    align-items: center;\n    gap: 1px;\">\n      <span style=\"margin-right: 2px;\">\n        {{ segment.label }}\n      </span>\n      <mat-icon class=\"icons\">\n        {{ segment.singleSelect ? 'done' : ' done_all' }}\n      </mat-icon>\n      <mat-icon class=\"icons\">\n\n        {{ segment.readOnly ? 'edit_off' : 'edit' }}\n      </mat-icon>\n    </div>\n\n    @if ( showAllSegments === false) {\n    <button matChipRemove [attr.aria-label]=\"'remove' \">\n      <mat-icon>cancel</mat-icon>\n    </button>\n    }\n\n  </mat-chip-option>\n  }\n</mat-chip-listbox>\n\n\n\n\n\n<ng-template #noSegments>\n  <div class=\"tree-instructions\">\n    <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n    <span>No segment configuration available. Start by adding a segment below.</span>\n  </div>\n</ng-template>\n\n<mat-toolbar *ngIf=\"!isAddingNew && editingIndex === null && showAllSegments === false\">\n  <button style=\"width:100%\" [disabled]=\"disabled\" mat-stroked-button (click)=\"startAddNew()\">\n    Add New Segment <mat-icon>add</mat-icon>\n  </button>\n</mat-toolbar>\n\n@if (!!getMscoaError) {\n<div class=\"tree-instructions\">\n  <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n  <span>\n    {{ getMscoaError }}\n  </span>\n</div>\n}\n<mat-card *ngIf=\"isAddingNew || editingIndex !== null\">\n  <mat-card-header>\n    <mat-card-subtitle>\n      {{ isAddingNew ? 'Add a new' : 'Update' }} Segment\n    </mat-card-subtitle>\n  </mat-card-header>\n  <mat-card-content>\n    <form [formGroup]=\"segmentForm\" (ngSubmit)=\"saveSegment()\">\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"multiLevelSelectChange($event)\" [checked]=\"segmentForm.value.segmentExtension\">\n          Enable Multi-Level Segmentation\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n      <mat-hint class=\"segment-hint\">\n        This allows sub-classifications within this segment for more detailed accounting hierarchies\n      </mat-hint>\n      <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n        <mat-label>Segment</mat-label>\n        <mat-select (selectionChange)=\"selectSegment($event)\" matNativeControl formControlName=\"segment\" [value]=\"value\"\n          placeholder=\"Select segment\">\n          @for ( segment of treeSegments; track segment.segment) {\n          <mat-option [disabled]=\"alreadyExists(segment)\" [value]=\"segment.segment\">\n            {{ segment.label }}\n          </mat-option>\n          }\n        </mat-select>\n\n      </mat-form-field>\n      <mat-hint class=\"segment-hint\">\n        Select an account segment type from your chart of accounts\n      </mat-hint>\n      @if(isCashSegmentConfig){\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"setInheritFromAccrual($event)\"\n          [checked]=\"segmentForm.value.inheritValueFromAccrual\">\n          Inherit from Accrual\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n      <mat-hint class=\"segment-hint\">\n        When enabled, any changes to the Accrual value will reflect here automatically .\n        <br>\n\n      </mat-hint>\n      }\n\n\n\n\n      <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n        <mat-label>Label</mat-label>\n        <input matInput formControlName=\"label\" [disabled]=\"!this.segmentForm.value.segmentExtension\"\n          placeholder=\"Enter label\">\n        <mat-hint>Provide a descriptive name for this segment (e.g., 'Department', 'Project', 'Cost Center')</mat-hint>\n      </mat-form-field>\n\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"singleSelectChange($event)\" [checked]=\"segmentForm.value.singleSelect\">\n          Single Value Selection\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n\n\n      <mat-hint class=\"segment-hint\">\n        When enabled, transactions can only be assigned to one value within this segment. When disabled, transactions\n        can be split across multiple values.\n      </mat-hint>\n      @if(segmentForm.value.segment.toLocaleLowerCase() === 'item' ){\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"setVatSelectionActive($event)\" [checked]=\"segmentForm.value.vatSelectonActive\">\n          Require VAT Account Selection\n\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n      <mat-hint class=\"segment-hint\">\n        When active, users must specify a VAT account for taxable items.\n      </mat-hint>\n      }\n\n\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"readOnly($event)\" [checked]=\"segmentForm.value.readOnly\">\n          Read-Only Segment\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n      <mat-hint class=\"segment-hint\">\n        Prevents users from modifying segment values after initial setup. Use for regulatory or policy-controlled\n        segments.\n      </mat-hint>\n      <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n        <mat-label>\n          Additional accounts\n        </mat-label>\n\n\n        <mat-select (selectionChange)=\"additionalAccountsChanged($event)\" matNativeControl\n          [value]=\"segmentForm.value.additionalAccounts\" formControlName=\"additionalAccounts\" multiple\n          placeholder=\"Select counter accounts\">\n          @for (ext of extensionAccountsForSegments; track ext) {\n          <mat-option [value]=\"ext\">{{ext}}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <mat-hint class=\"segment-hint\">\n        This allows you to add additional accounts to this segment. For example, VAT accounts, tax accounts, or any\n        other\n      </mat-hint>\n      <br>\n      <mat-card-actions>\n        <button mat-flat-button color=\"primary\" type=\"submit\" [disabled]=\"!segmentForm.valid\">Save</button>\n        <button mat-button (click)=\"cancelEdit()\">Cancel</button>\n      </mat-card-actions>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<span color=\"danger\" *ngIf=\"error$ | async as error\">\n  <p>{{ error }}</p>\n</span>", styles: [".info-icon{min-width:38px}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.json-error{background:inherit;color:#e74c3c}mat-form-field{width:100%;margin-bottom:8px;background:azure}.segment-toolbar{background:azure}.icons{font-size:.875em;height:14px;width:14px}.segment-hint{display:block;padding:0 16px;margin-bottom:8px;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-subscript-text-font, var(--mat-sys-body-small-font));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-sys-body-small-line-height));font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));letter-spacing:var(--mat-form-field-subscript-text-tracking, var(--mat-sys-body-small-tracking));font-weight:var(--mat-form-field-subscript-text-weight, var(--mat-sys-body-small-weight))}mat-card{background:var(--mat-sys-surface-container, var(--mat-sys-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i5.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MscoaSegmentConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-mscoa-segment-config', standalone: true, imports: [
+                        CommonModule,
+                        MatModulesModule,
+                        ReactiveFormsModule,
+                        FormsModule
+                    ], providers: [{ provide: MatFormFieldControl, useExisting: MscoaSegmentConfigComponent }], template: "<div *ngIf=\"(value||[]).length>0\" class=\"tree-instructions\">\n  <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n  <span>SCOA Segments Configuration</span>\n</div>\n\n<mat-chip-listbox [disabled]=\"disabled\" *ngIf=\"(value?.length || 0) > 0; else noSegments\" aria-label=\"Fish selection\">\n  @for (segment of value||[]; track segment.segment) {\n  <mat-chip-option (removed)=\"removeSegment($index)\" (click)=\"startEdit($index)\" color=\"accent\"\n    [value]=\"segment?.segment\" [selected]=\"this.editingIndex === $index\">\n    <div style=\"    \n    display: flex;\n    align-items: center;\n    gap: 1px;\">\n      <span style=\"margin-right: 2px;\">\n        {{ segment.label }}\n      </span>\n      <mat-icon class=\"icons\">\n        {{ segment.singleSelect ? 'done' : ' done_all' }}\n      </mat-icon>\n      <mat-icon class=\"icons\">\n\n        {{ segment.readOnly ? 'edit_off' : 'edit' }}\n      </mat-icon>\n    </div>\n\n    @if ( showAllSegments === false) {\n    <button matChipRemove [attr.aria-label]=\"'remove' \">\n      <mat-icon>cancel</mat-icon>\n    </button>\n    }\n\n  </mat-chip-option>\n  }\n</mat-chip-listbox>\n\n\n\n\n\n<ng-template #noSegments>\n  <div class=\"tree-instructions\">\n    <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n    <span>No segment configuration available. Start by adding a segment below.</span>\n  </div>\n</ng-template>\n\n<mat-toolbar *ngIf=\"!isAddingNew && editingIndex === null && showAllSegments === false\">\n  <button style=\"width:100%\" [disabled]=\"disabled\" mat-stroked-button (click)=\"startAddNew()\">\n    Add New Segment <mat-icon>add</mat-icon>\n  </button>\n</mat-toolbar>\n\n@if (!!getMscoaError) {\n<div class=\"tree-instructions\">\n  <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n  <span>\n    {{ getMscoaError }}\n  </span>\n</div>\n}\n<mat-card *ngIf=\"isAddingNew || editingIndex !== null\">\n  <mat-card-header>\n    <mat-card-subtitle>\n      {{ isAddingNew ? 'Add a new' : 'Update' }} Segment\n    </mat-card-subtitle>\n  </mat-card-header>\n  <mat-card-content>\n    <form [formGroup]=\"segmentForm\" (ngSubmit)=\"saveSegment()\">\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"multiLevelSelectChange($event)\" [checked]=\"segmentForm.value.segmentExtension\">\n          Enable Multi-Level Segmentation\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n      <mat-hint class=\"segment-hint\">\n        This allows sub-classifications within this segment for more detailed accounting hierarchies\n      </mat-hint>\n      <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n        <mat-label>Segment</mat-label>\n        <mat-select (selectionChange)=\"selectSegment($event)\" matNativeControl formControlName=\"segment\" [value]=\"value\"\n          placeholder=\"Select segment\">\n          @for ( segment of treeSegments; track segment.segment) {\n          <mat-option [disabled]=\"alreadyExists(segment)\" [value]=\"segment.segment\">\n            {{ segment.label }}\n          </mat-option>\n          }\n        </mat-select>\n\n      </mat-form-field>\n      <mat-hint class=\"segment-hint\">\n        Select an account segment type from your chart of accounts\n      </mat-hint>\n      @if(isCashSegmentConfig){\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"setInheritFromAccrual($event)\"\n          [checked]=\"segmentForm.value.inheritValueFromAccrual\">\n          Inherit from Accrual\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n      <mat-hint class=\"segment-hint\">\n        When enabled, any changes to the Accrual value will reflect here automatically .\n        <br>\n\n      </mat-hint>\n      }\n\n\n\n\n      <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n        <mat-label>Label</mat-label>\n        <input matInput formControlName=\"label\" [disabled]=\"!this.segmentForm.value.segmentExtension\"\n          placeholder=\"Enter label\">\n        <mat-hint>Provide a descriptive name for this segment (e.g., 'Department', 'Project', 'Cost Center')</mat-hint>\n      </mat-form-field>\n\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"singleSelectChange($event)\" [checked]=\"segmentForm.value.singleSelect\">\n          Single Value Selection\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n\n\n      <mat-hint class=\"segment-hint\">\n        When enabled, transactions can only be assigned to one value within this segment. When disabled, transactions\n        can be split across multiple values.\n      </mat-hint>\n      @if(segmentForm.value.segment.toLocaleLowerCase() === 'item' ){\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"setVatSelectionActive($event)\" [checked]=\"segmentForm.value.vatSelectonActive\">\n          Require VAT Account Selection\n\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n      <mat-hint class=\"segment-hint\">\n        When active, users must specify a VAT account for taxable items.\n      </mat-hint>\n      }\n\n\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"readOnly($event)\" [checked]=\"segmentForm.value.readOnly\">\n          Read-Only Segment\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n      <mat-hint class=\"segment-hint\">\n        Prevents users from modifying segment values after initial setup. Use for regulatory or policy-controlled\n        segments.\n      </mat-hint>\n      <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n        <mat-label>\n          Additional accounts\n        </mat-label>\n\n\n        <mat-select (selectionChange)=\"additionalAccountsChanged($event)\" matNativeControl\n          [value]=\"segmentForm.value.additionalAccounts\" formControlName=\"additionalAccounts\" multiple\n          placeholder=\"Select counter accounts\">\n          @for (ext of extensionAccountsForSegments; track ext) {\n          <mat-option [value]=\"ext\">{{ext}}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <mat-hint class=\"segment-hint\">\n        This allows you to add additional accounts to this segment. For example, VAT accounts, tax accounts, or any\n        other\n      </mat-hint>\n      <br>\n      <mat-card-actions>\n        <button mat-flat-button color=\"primary\" type=\"submit\" [disabled]=\"!segmentForm.valid\">Save</button>\n        <button mat-button (click)=\"cancelEdit()\">Cancel</button>\n      </mat-card-actions>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<span color=\"danger\" *ngIf=\"error$ | async as error\">\n  <p>{{ error }}</p>\n</span>", styles: [".info-icon{min-width:38px}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.json-error{background:inherit;color:#e74c3c}mat-form-field{width:100%;margin-bottom:8px;background:azure}.segment-toolbar{background:azure}.icons{font-size:.875em;height:14px;width:14px}.segment-hint{display:block;padding:0 16px;margin-bottom:8px;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-subscript-text-font, var(--mat-sys-body-small-font));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-sys-body-small-line-height));font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));letter-spacing:var(--mat-form-field-subscript-text-tracking, var(--mat-sys-body-small-tracking));font-weight:var(--mat-form-field-subscript-text-weight, var(--mat-sys-body-small-weight))}mat-card{background:var(--mat-sys-surface-container, var(--mat-sys-surface))}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ElementRef }], propDecorators: { id: [{
+                type: HostBinding
+            }], disabled: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], dataValue: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], isCashSegmentConfig: [{
+                type: Input
+            }], showAllSegments: [{
+                type: Input
+            }], getMscoaTree: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }] } });
+
+export { MscoaSegmentConfigComponent };
+//# sourceMappingURL=ngx-t-forms-mscoa-segment-config.component-BXPghOuH.mjs.map

package/fesm2022/ngx-t-forms-mscoa-segment-config.component-BXPghOuH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-mscoa-segment-config.component-BXPghOuH.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/mscoa-segment-config/mscoa-segment-config.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/mscoa-segment-config/mscoa-segment-config.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, ElementRef, EventEmitter, HostBinding, inject, Input, OnDestroy, OnInit, Optional, Output, Self } from '@angular/core';\r\nimport { FormGroup, FormBuilder, Validators, ReactiveFormsModule, NgControl, FormsModule } from '@angular/forms';\r\nimport { BehaviorSubject, catchError, Observable, Subject, take, takeUntil, tap } from 'rxjs';\r\n\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { IGetTreeResponse, IIncludedSegmentConfig } from 'ngx-t-forms-types';\r\n\r\nimport { MatSlideToggleChange } from '@angular/material/slide-toggle';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { IConfigElementError } from '../../t-dynamic-data-edit.component';\r\nimport { MatSelectChange } from '@angular/material/select';\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\r\nimport { IScoaInput } from 'ngx-t-forms-types';\r\n@Component({\r\n  selector: 'app-mscoa-segment-config',\r\n  templateUrl: './mscoa-segment-config.component.html',\r\n  styleUrls: ['./mscoa-segment-config.component.scss'],\r\n  standalone: true,\r\n  imports: [\r\n    CommonModule,\r\n    MatModulesModule,\r\n    ReactiveFormsModule,\r\n    FormsModule\r\n  ],\r\n  providers: [{ provide: MatFormFieldControl, useExisting: MscoaSegmentConfigComponent }],\r\n\r\n})\r\nexport class MscoaSegmentConfigComponent implements OnInit, OnDestroy, MatFormFieldControl<IIncludedSegmentConfig[] | undefined> {\r\n  readonly announcer = inject(LiveAnnouncer);\r\n  static nextId = 0;\r\n  stateChanges = new Subject<void>();\r\n\r\n  @HostBinding() id = `app-mscoa-segment-config'-${MscoaSegmentConfigComponent.nextId++}`;\r\n\r\n  placeholder: string = ''\r\n  constructor(\r\n    private fb: FormBuilder,\r\n    @Optional() @Self() public ngControl: NgControl, private _elementRef: ElementRef<HTMLElement>,\r\n  ) {\r\n    this.segmentForm = this.createSegmentForm();\r\n\r\n  }\r\n\r\n  focused: boolean = false;\r\n  get empty() {\r\n    return !this.value\r\n  }\r\n  get shouldLabelFloat() {\r\n    return this.focused || !this.empty;\r\n  }\r\n  required: boolean = false;\r\n  @Input() disabled: boolean = false;\r\n  get errorState(): boolean {\r\n    const hasError = !!this.ngControl?.control?.errors || (this.errors || []).length > 0 && this.touched\r\n    return !this.value && !!this.required || hasError\r\n  }\r\n\r\n  controlType?: string | undefined;\r\n  autofilled?: boolean | undefined;\r\n  userAriaDescribedBy?: string | undefined;\r\n  disableAutomaticLabeling?: boolean | undefined;\r\n  setDescribedByIds(ids: string[]) {\r\n    // Ensure the component view is initialized\r\n    if (this._elementRef && this._elementRef.nativeElement) {\r\n      const controlElement = this._elementRef.nativeElement.querySelector('.app-mscoa-segment-config');\r\n      // Check if the controlElement exists before attempting to set its attribute\r\n      if (controlElement) {\r\n        controlElement.setAttribute('aria-describedby', ids.join(' '));\r\n      }\r\n    }\r\n  }\r\n  onContainerClick(event: MouseEvent): void {\r\n    this.markAsTouched();\r\n    this.stateChanges.next();\r\n  }\r\n\r\n  touched: boolean = false;\r\n  onTouched = () => { };\r\n  markAsTouched() {\r\n    console.log('markAsTouched')\r\n    if (!this.touched) {\r\n      this.onTouched();\r\n      this.touched = true;\r\n    }\r\n  }\r\n\r\n\r\n  @Input() errors: IConfigElementError[] | undefined = [];\r\n  @Input() dataValue: IScoaInput | undefined = undefined;\r\n  @Input() set value(val: IIncludedSegmentConfig[]) {\r\n    this._value.next(val || []);\r\n  }\r\n\r\n  get value(): IIncludedSegmentConfig[] {\r\n    return this._value.value;\r\n  }\r\n  _getMscoaTree: Observable<IGetTreeResponse | undefined> | undefined;\r\n  _showAllSegments: boolean = false;\r\n  @Input()  isCashSegmentConfig:Boolean  = false\r\n  @Input() set showAllSegments(val: boolean) {\r\n\r\n    if (!!val) {\r\n      this.checkShowAllSegments()\r\n    }\r\n    this._showAllSegments = !!val\r\n\r\n  }\r\n  get showAllSegments() {\r\n    return this._showAllSegments\r\n  }\r\n\r\n  @Input() set getMscoaTree(options$: Observable<IGetTreeResponse | undefined>) {\r\n    if (!!options$ && this._getMscoaTree === undefined) {\r\n      this.getMscoaError = undefined\r\n      this._getMscoaTree = options$\r\n\r\n      this.loadMscoa()\r\n    } else if (!options$) {\r\n      this.getMscoaError = 'No loader provided'\r\n\r\n    }\r\n  }\r\n  @Output() valueChanged = new EventEmitter<IIncludedSegmentConfig[]>();\r\n  private _value = new BehaviorSubject<IIncludedSegmentConfig[]>([]);\r\n  private destroy$ = new Subject<void>();\r\n  mscoaTree!: IGetTreeResponse | undefined;\r\n  treeSegments!: IIncludedSegmentConfig[];\r\n  error$ = new BehaviorSubject<string | null>(null);\r\n\r\n  segmentForm: FormGroup;\r\n  editingIndex: number | null = null;\r\n  isAddingNew = false;\r\n\r\n\r\n\r\n  ngOnInit() {\r\n    this.listenToFormChanges();\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.destroy$.next();\r\n    this.destroy$.complete();\r\n  }\r\n  getMscoaError: string | undefined = undefined\r\n  private loadMscoa() {\r\n\r\n    this._getMscoaTree?.pipe(\r\n      take(1),\r\n      tap((options) => {\r\n        this.mscoaTree = options;\r\n        this.treeSegments = options?.accountTreeKeys?.map((treeKey) => ({\r\n          id: uuidv4(),\r\n          segment: treeKey,\r\n          singleSelect: true,\r\n          additionalAccounts: [],\r\n          inheritValueFromAccrual: this.isCashSegmentConfig? (treeKey.toLocaleLowerCase() !== 'item' ) : undefined,\r\n        vatSelectonActive:  this.isCashSegmentConfig?  false : (treeKey.toLocaleLowerCase() === 'item' ),\r\n          \r\n          segmentExtension: false,\r\n          label: this.toTitleCase(treeKey),\r\n          readOnly: this.value.find((v) => v.segment === treeKey)?.readOnly || this.isCashSegmentConfig && (treeKey.toLocaleLowerCase() !== 'item')||  false,\r\n        })) || [];\r\n      }),\r\n      catchError((error) => {\r\n        this.getMscoaError = 'Failed to fetch mscoa tree';\r\n        console.error('Error while fetching SCOA tree:', error);\r\n        return [null];\r\n      })\r\n    ).subscribe();\r\n  }\r\n  private createSegmentForm(segment:  IIncludedSegmentConfig = {\r\n    segment: '', label: '',\r\n    id: uuidv4(),\r\n    singleSelect: true,\r\n    segmentExtension: false,\r\n    additionalAccounts: [],\r\n    readOnly: false\r\n  } as any): FormGroup {\r\n    return this.fb.group({\r\n      segment: [segment.segment, Validators.required],\r\n      segmentExtension: [segment.segmentExtension, Validators.required],\r\n      readOnly: [segment.readOnly, Validators.required],\r\n      inheritValueFromAccrual: this.isCashSegmentConfig? [segment.inheritValueFromAccrual, Validators.required] : undefined,\r\n        vatSelectonActive:  segment.segment?.toLocaleLowerCase() === 'item' ? [Boolean(segment?.vatSelectonActive), Validators.required] : undefined,\r\n      additionalAccounts: [(segment as any).additionalAccounts || [],],\r\n      label: [segment.label, Validators.required],\r\n      singleSelect: [segment.singleSelect, Validators.required]\r\n    });\r\n  }\r\n\r\n  private listenToFormChanges() {\r\n    this.segmentForm.valueChanges\r\n      .pipe(takeUntil(this.destroy$))\r\n      .subscribe((v) => console.log(v));\r\n  }\r\n\r\n  startAddNew() {\r\n    this.isAddingNew = true;\r\n    this.editingIndex = null;\r\n    this.segmentForm = this.createSegmentForm();\r\n  }\r\n\r\n  startEdit(index: number) {\r\n    this.editingIndex = index;\r\n    this.isAddingNew = false;\r\n    this.segmentForm = this.createSegmentForm(this.value[index]);\r\n  }\r\n\r\n  cancelEdit() {\r\n    this.editingIndex = null;\r\n    this.isAddingNew = false;\r\n    this.segmentForm.reset();\r\n  }\r\n\r\n  saveSegment() {\r\n    if (this.segmentForm.valid) {\r\n      const newSegment = ({\r\n        id: this.segmentForm.value.id || uuidv4(),\r\n        segment: this.segmentForm.value.segment,\r\n        customSegment: !!this.segmentForm.value.segmentExtension ? (this.segmentForm.value.label as string)?.toLocaleUpperCase() : undefined,\r\n        segmentExtension: this.segmentForm.value.segmentExtension,\r\n        inheritValueFromAccrual: Boolean(this.segmentForm.value.inheritValueFromAccrual),\r\n        vatSelectonActive: Boolean(this.segmentForm.value.vatSelectonActive),\r\n        additionalAccounts: this.segmentForm.value.additionalAccounts,\r\n        label: this.toTitleCase(this.segmentForm.value.label),\r\n        singleSelect: this.segmentForm.value.singleSelect,\r\n        readOnly: this.segmentForm.value.readOnly\r\n      })\r\n      const updatedValue = [...this.value];\r\n\r\n      if (this.isAddingNew) {\r\n        updatedValue.push(newSegment);\r\n      } else if (this.editingIndex !== null) {\r\n        updatedValue[this.editingIndex] = newSegment;\r\n      }\r\n\r\n\r\n      this._value.next(updatedValue);\r\n      this.valueChanged.emit(updatedValue);\r\n      this.cancelEdit();\r\n    }\r\n  }\r\n  readOnly(event: MatSlideToggleChange) {\r\n    this.segmentForm.patchValue({ readOnly: event.checked })\r\n  }\r\n  singleSelectChange(event: MatSlideToggleChange) {\r\n    this.segmentForm.patchValue({ singleSelect: event.checked })\r\n\r\n  }\r\n  setVatSelectionActive(event: MatSlideToggleChange){\r\n    this.segmentForm.patchValue({ vatSelectonActive: event.checked })\r\n\r\n  }\r\n   setInheritFromAccrual(event: MatSlideToggleChange){+\r\n        this.segmentForm.patchValue({ inheritValueFromAccrual: event.checked })\r\n        if( event.checked){\r\n              this.segmentForm.patchValue({ readOnly: true })\r\n        }\r\n\r\n   }\r\n  removeSegment(index: number) {\r\n    const updatedValue = this.value.filter((_, i) => i !== index);\r\n    this._value.next(updatedValue);\r\n    this.valueChanged.emit(updatedValue);\r\n  }\r\n\r\n  private toTitleCase(str: string): string {\r\n    return str.replace(/\\w\\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());\r\n  }\r\n  alreadyExists(segment: IIncludedSegmentConfig) {\r\n    if (this.segmentForm.value.segmentExtension) return false\r\n    return this.value.find((v) => v.segment === segment.segment)\r\n  }\r\n  checkShowAllSegments() {\r\n    if (!this._getMscoaTree || !this.treeSegments) return;\r\n\r\n    const updatedValue = this.treeSegments.map(segment => ({\r\n      ...segment,\r\n      ...(this.value.find(v => v.segment === segment.segment) || {})\r\n    }));\r\n\r\n    if (JSON.stringify(updatedValue) !== JSON.stringify(this.value)) {\r\n      this.valueChanged.emit([{} as any]);\r\n      setTimeout(() => {\r\n        this.valueChanged.emit(updatedValue);\r\n      }, 0);\r\n    }\r\n  }\r\n  selectSegment($event: MatSelectChange<any>) {\r\n\r\n    this.segmentForm.patchValue({ segment: $event.value })\r\n    if (!this.segmentForm.value.segmentExtension) {\r\n      this.segmentForm.patchValue({ label: this.toTitleCase($event.value) })\r\n    }\r\n\r\n\r\n  }\r\n  multiLevelSelectChange(event: MatSlideToggleChange) {\r\n    this.segmentForm.patchValue({ segmentExtension: event.checked })\r\n  }\r\n\r\n\r\n  get extensionAccountsForSegments():string[]{\r\n    console.error('get extensionAccountsForSegments', this.dataValue?.mscoaConfig?.extensionAccountsForSegments)\r\n    return this.dataValue?.mscoaConfig?.extensionAccountsForSegments || []\r\n  }\r\n  additionalAccountsChanged(event: MatSelectChange) {\r\n    // Force update by creating a new array\r\n    const newAdditionalAccounts = [...event.value];\r\n    \r\n    this.segmentForm.patchValue({\r\n      additionalAccounts: newAdditionalAccounts\r\n    }, { emitEvent: true });\r\n\r\n    // Trigger state changes\r\n    this.stateChanges.next();\r\n    this.markAsTouched();\r\n  }\r\n}","<div *ngIf=\"(value||[]).length>0\" class=\"tree-instructions\">\n  <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n  <span>SCOA Segments Configuration</span>\n</div>\n\n<mat-chip-listbox [disabled]=\"disabled\" *ngIf=\"(value?.length || 0) > 0; else noSegments\" aria-label=\"Fish selection\">\n  @for (segment of value||[]; track segment.segment) {\n  <mat-chip-option (removed)=\"removeSegment($index)\" (click)=\"startEdit($index)\" color=\"accent\"\n    [value]=\"segment?.segment\" [selected]=\"this.editingIndex === $index\">\n    <div style=\"    \n    display: flex;\n    align-items: center;\n    gap: 1px;\">\n      <span style=\"margin-right: 2px;\">\n        {{ segment.label }}\n      </span>\n      <mat-icon class=\"icons\">\n        {{ segment.singleSelect ? 'done' : ' done_all' }}\n      </mat-icon>\n      <mat-icon class=\"icons\">\n\n        {{ segment.readOnly ? 'edit_off' : 'edit' }}\n      </mat-icon>\n    </div>\n\n    @if ( showAllSegments === false) {\n    <button matChipRemove [attr.aria-label]=\"'remove' \">\n      <mat-icon>cancel</mat-icon>\n    </button>\n    }\n\n  </mat-chip-option>\n  }\n</mat-chip-listbox>\n\n\n\n\n\n<ng-template #noSegments>\n  <div class=\"tree-instructions\">\n    <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n    <span>No segment configuration available. Start by adding a segment below.</span>\n  </div>\n</ng-template>\n\n<mat-toolbar *ngIf=\"!isAddingNew && editingIndex === null && showAllSegments === false\">\n  <button style=\"width:100%\" [disabled]=\"disabled\" mat-stroked-button (click)=\"startAddNew()\">\n    Add New Segment <mat-icon>add</mat-icon>\n  </button>\n</mat-toolbar>\n\n@if (!!getMscoaError) {\n<div class=\"tree-instructions\">\n  <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n  <span>\n    {{ getMscoaError }}\n  </span>\n</div>\n}\n<mat-card *ngIf=\"isAddingNew || editingIndex !== null\">\n  <mat-card-header>\n    <mat-card-subtitle>\n      {{ isAddingNew ? 'Add a new' : 'Update' }} Segment\n    </mat-card-subtitle>\n  </mat-card-header>\n  <mat-card-content>\n    <form [formGroup]=\"segmentForm\" (ngSubmit)=\"saveSegment()\">\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"multiLevelSelectChange($event)\" [checked]=\"segmentForm.value.segmentExtension\">\n          Enable Multi-Level Segmentation\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n      <mat-hint class=\"segment-hint\">\n        This allows sub-classifications within this segment for more detailed accounting hierarchies\n      </mat-hint>\n      <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n        <mat-label>Segment</mat-label>\n        <mat-select (selectionChange)=\"selectSegment($event)\" matNativeControl formControlName=\"segment\" [value]=\"value\"\n          placeholder=\"Select segment\">\n          @for ( segment of treeSegments; track segment.segment) {\n          <mat-option [disabled]=\"alreadyExists(segment)\" [value]=\"segment.segment\">\n            {{ segment.label }}\n          </mat-option>\n          }\n        </mat-select>\n\n      </mat-form-field>\n      <mat-hint class=\"segment-hint\">\n        Select an account segment type from your chart of accounts\n      </mat-hint>\n      @if(isCashSegmentConfig){\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"setInheritFromAccrual($event)\"\n          [checked]=\"segmentForm.value.inheritValueFromAccrual\">\n          Inherit from Accrual\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n      <mat-hint class=\"segment-hint\">\n        When enabled, any changes to the Accrual value will reflect here automatically .\n        <br>\n\n      </mat-hint>\n      }\n\n\n\n\n      <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n        <mat-label>Label</mat-label>\n        <input matInput formControlName=\"label\" [disabled]=\"!this.segmentForm.value.segmentExtension\"\n          placeholder=\"Enter label\">\n        <mat-hint>Provide a descriptive name for this segment (e.g., 'Department', 'Project', 'Cost Center')</mat-hint>\n      </mat-form-field>\n\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"singleSelectChange($event)\" [checked]=\"segmentForm.value.singleSelect\">\n          Single Value Selection\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n\n\n      <mat-hint class=\"segment-hint\">\n        When enabled, transactions can only be assigned to one value within this segment. When disabled, transactions\n        can be split across multiple values.\n      </mat-hint>\n      @if(segmentForm.value.segment.toLocaleLowerCase() === 'item' ){\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"setVatSelectionActive($event)\" [checked]=\"segmentForm.value.vatSelectonActive\">\n          Require VAT Account Selection\n\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n      <mat-hint class=\"segment-hint\">\n        When active, users must specify a VAT account for taxable items.\n      </mat-hint>\n      }\n\n\n      <mat-toolbar class=\"segment-toolbar\">\n        <mat-slide-toggle (change)=\"readOnly($event)\" [checked]=\"segmentForm.value.readOnly\">\n          Read-Only Segment\n        </mat-slide-toggle>\n\n      </mat-toolbar>\n      <mat-hint class=\"segment-hint\">\n        Prevents users from modifying segment values after initial setup. Use for regulatory or policy-controlled\n        segments.\n      </mat-hint>\n      <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n        <mat-label>\n          Additional accounts\n        </mat-label>\n\n\n        <mat-select (selectionChange)=\"additionalAccountsChanged($event)\" matNativeControl\n          [value]=\"segmentForm.value.additionalAccounts\" formControlName=\"additionalAccounts\" multiple\n          placeholder=\"Select counter accounts\">\n          @for (ext of extensionAccountsForSegments; track ext) {\n          <mat-option [value]=\"ext\">{{ext}}</mat-option>\n          }\n        </mat-select>\n      </mat-form-field>\n\n      <mat-hint class=\"segment-hint\">\n        This allows you to add additional accounts to this segment. For example, VAT accounts, tax accounts, or any\n        other\n      </mat-hint>\n      <br>\n      <mat-card-actions>\n        <button mat-flat-button color=\"primary\" type=\"submit\" [disabled]=\"!segmentForm.valid\">Save</button>\n        <button mat-button (click)=\"cancelEdit()\">Cancel</button>\n      </mat-card-actions>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<span color=\"danger\" *ngIf=\"error$ | async as error\">\n  <p>{{ error }}</p>\n</span>"],"names":["uuidv4","i3","i4","i5","i6","i7","i8","i11"],"mappings":"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"}

package/fesm2022/ngx-t-forms-mscoa-temporary-hint.component-CBRfWvfD.mjs

@@ -0,0 +1,83 @@
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { M as MatModulesModule } from './ngx-t-forms-ngx-t-forms-CD9InaXz.mjs';
+import { Subject, timer } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import * as i2 from '@angular/material/button';
+import * as i2$1 from '@angular/material/icon';
+
+class MscoaTemporaryHintComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.message = '';
+        this.duration = 5000; // Default 5 seconds
+        this.showDismiss = true;
+        this.type = 'info';
+        this.visible = false;
+        this.destroy$ = new Subject();
+        this.hideTimer$ = new Subject();
+    }
+    ngOnInit() {
+        if (this.message) {
+            this.show();
+        }
+    }
+    ngOnChanges(changes) {
+        // React to message changes
+        if (changes['message']) {
+            const currentMessage = changes['message'].currentValue;
+            const previousMessage = changes['message'].previousValue;
+            // If message changed from empty to non-empty, show it
+            if (currentMessage && currentMessage !== previousMessage) {
+                this.show();
+            }
+            // If message changed from non-empty to empty, hide it
+            else if (!currentMessage && previousMessage) {
+                this.hide();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.hideTimer$.next();
+        this.hideTimer$.complete();
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    show() {
+        // Cancel any existing timer
+        this.hideTimer$.next();
+        this.visible = true;
+        this.cdr.markForCheck();
+        // Auto-hide after duration
+        timer(this.duration).pipe(takeUntil(this.hideTimer$), takeUntil(this.destroy$)).subscribe(() => {
+            this.hide();
+        });
+    }
+    hide() {
+        // Cancel timer when hiding manually
+        this.hideTimer$.next();
+        this.visible = false;
+        this.cdr.markForCheck();
+    }
+    dismiss() {
+        this.hide();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MscoaTemporaryHintComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MscoaTemporaryHintComponent, isStandalone: true, selector: "app-mscoa-temporary-hint", inputs: { message: "message", duration: "duration", showDismiss: "showDismiss", type: "type" }, usesOnChanges: true, ngImport: i0, template: "@if (visible && message) {\r\n  <div \r\n    class=\"temporary-hint\"\r\n    [class.temporary-hint--info]=\"type === 'info'\"\r\n    [class.temporary-hint--guidance]=\"type === 'guidance'\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    [attr.aria-label]=\"'Hint: ' + message\">\r\n    \r\n    <mat-icon class=\"temporary-hint__icon\" aria-hidden=\"true\">info</mat-icon>\r\n    \r\n    <div class=\"temporary-hint__content\">\r\n      <p class=\"temporary-hint__message\">{{ message }}</p>\r\n    </div>\r\n\r\n    @if (showDismiss) {\r\n      <button \r\n        class=\"temporary-hint__dismiss\"\r\n        (click)=\"dismiss()\"\r\n        [attr.aria-label]=\"'Dismiss hint'\"\r\n        mat-icon-button\r\n        type=\"button\">\r\n        <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".temporary-hint{display:flex;align-items:flex-start;gap:var(--mscoa-chart-spacing-sm, 8px);padding:var(--mscoa-chart-spacing-sm, 8px) var(--mscoa-chart-spacing-md, 16px);margin-top:var(--mscoa-chart-spacing-sm, 8px);border-radius:var(--mscoa-chart-border-radius, 4px);font-size:13px;line-height:1.5;animation:slideInFade var(--mscoa-chart-transition, .2s ease);transition:opacity var(--mscoa-chart-transition, .2s ease)}.temporary-hint--info{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #001d35);border-left:3px solid var(--mat-sys-primary, #1976d2)}.temporary-hint--guidance{background-color:var(--mat-sys-tertiary-container, #fff3e0);color:var(--mat-sys-on-tertiary-container, #1c1b16);border-left:3px solid var(--mat-sys-tertiary, #f57c00)}.temporary-hint__icon{flex-shrink:0;width:18px;height:18px;font-size:18px;margin-top:2px;color:var(--mat-sys-primary, #1976d2)}.temporary-hint--guidance .temporary-hint__icon{color:var(--mat-sys-tertiary, #f57c00)}.temporary-hint__content{flex:1;min-width:0}.temporary-hint__message{margin:0;font-weight:400}.temporary-hint__dismiss{flex-shrink:0;width:24px;height:24px;opacity:.7;transition:opacity var(--mscoa-chart-transition, .2s ease)}.temporary-hint__dismiss:hover{opacity:1}.temporary-hint__dismiss mat-icon{font-size:18px;width:18px;height:18px}@keyframes slideInFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.temporary-hint.ng-leave{animation:slideOutFade var(--mscoa-chart-transition, .2s ease)}@keyframes slideOutFade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MscoaTemporaryHintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-mscoa-temporary-hint', standalone: true, imports: [CommonModule, MatModulesModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible && message) {\r\n  <div \r\n    class=\"temporary-hint\"\r\n    [class.temporary-hint--info]=\"type === 'info'\"\r\n    [class.temporary-hint--guidance]=\"type === 'guidance'\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    [attr.aria-label]=\"'Hint: ' + message\">\r\n    \r\n    <mat-icon class=\"temporary-hint__icon\" aria-hidden=\"true\">info</mat-icon>\r\n    \r\n    <div class=\"temporary-hint__content\">\r\n      <p class=\"temporary-hint__message\">{{ message }}</p>\r\n    </div>\r\n\r\n    @if (showDismiss) {\r\n      <button \r\n        class=\"temporary-hint__dismiss\"\r\n        (click)=\"dismiss()\"\r\n        [attr.aria-label]=\"'Dismiss hint'\"\r\n        mat-icon-button\r\n        type=\"button\">\r\n        <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".temporary-hint{display:flex;align-items:flex-start;gap:var(--mscoa-chart-spacing-sm, 8px);padding:var(--mscoa-chart-spacing-sm, 8px) var(--mscoa-chart-spacing-md, 16px);margin-top:var(--mscoa-chart-spacing-sm, 8px);border-radius:var(--mscoa-chart-border-radius, 4px);font-size:13px;line-height:1.5;animation:slideInFade var(--mscoa-chart-transition, .2s ease);transition:opacity var(--mscoa-chart-transition, .2s ease)}.temporary-hint--info{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #001d35);border-left:3px solid var(--mat-sys-primary, #1976d2)}.temporary-hint--guidance{background-color:var(--mat-sys-tertiary-container, #fff3e0);color:var(--mat-sys-on-tertiary-container, #1c1b16);border-left:3px solid var(--mat-sys-tertiary, #f57c00)}.temporary-hint__icon{flex-shrink:0;width:18px;height:18px;font-size:18px;margin-top:2px;color:var(--mat-sys-primary, #1976d2)}.temporary-hint--guidance .temporary-hint__icon{color:var(--mat-sys-tertiary, #f57c00)}.temporary-hint__content{flex:1;min-width:0}.temporary-hint__message{margin:0;font-weight:400}.temporary-hint__dismiss{flex-shrink:0;width:24px;height:24px;opacity:.7;transition:opacity var(--mscoa-chart-transition, .2s ease)}.temporary-hint__dismiss:hover{opacity:1}.temporary-hint__dismiss mat-icon{font-size:18px;width:18px;height:18px}@keyframes slideInFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.temporary-hint.ng-leave{animation:slideOutFade var(--mscoa-chart-transition, .2s ease)}@keyframes slideOutFade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { message: [{
+                type: Input
+            }], duration: [{
+                type: Input
+            }], showDismiss: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+export { MscoaTemporaryHintComponent };
+//# sourceMappingURL=ngx-t-forms-mscoa-temporary-hint.component-CBRfWvfD.mjs.map

package/fesm2022/ngx-t-forms-mscoa-temporary-hint.component-CBRfWvfD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-mscoa-temporary-hint.component-CBRfWvfD.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/mscoa-form-input/elements/mscoa-chart/components/mscoa-temporary-hint/mscoa-temporary-hint.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/mscoa-form-input/elements/mscoa-chart/components/mscoa-temporary-hint/mscoa-temporary-hint.component.html"],"sourcesContent":["import { Component, Input, OnInit, OnDestroy, OnChanges, SimpleChanges, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatModulesModule } from '../../../../../../../../shared/modules/mat-modules.module';\r\nimport { Subject, timer } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\n\r\n@Component({\r\n  selector: 'app-mscoa-temporary-hint',\r\n  standalone: true,\r\n  imports: [CommonModule, MatModulesModule],\r\n  templateUrl: './mscoa-temporary-hint.component.html',\r\n  styleUrls: ['./mscoa-temporary-hint.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class MscoaTemporaryHintComponent implements OnInit, OnChanges, OnDestroy {\r\n  @Input() message: string = '';\r\n  @Input() duration: number = 5000; // Default 5 seconds\r\n  @Input() showDismiss: boolean = true;\r\n  @Input() type: 'info' | 'guidance' = 'info';\r\n\r\n  visible: boolean = false;\r\n  private readonly destroy$ = new Subject<void>();\r\n  private hideTimer$ = new Subject<void>();\r\n\r\n  constructor(private readonly cdr: ChangeDetectorRef) {}\r\n\r\n  ngOnInit(): void {\r\n    if (this.message) {\r\n      this.show();\r\n    }\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    // React to message changes\r\n    if (changes['message']) {\r\n      const currentMessage = changes['message'].currentValue;\r\n      const previousMessage = changes['message'].previousValue;\r\n      \r\n      // If message changed from empty to non-empty, show it\r\n      if (currentMessage && currentMessage !== previousMessage) {\r\n        this.show();\r\n      }\r\n      // If message changed from non-empty to empty, hide it\r\n      else if (!currentMessage && previousMessage) {\r\n        this.hide();\r\n      }\r\n    }\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.hideTimer$.next();\r\n    this.hideTimer$.complete();\r\n    this.destroy$.next();\r\n    this.destroy$.complete();\r\n  }\r\n\r\n  show(): void {\r\n    // Cancel any existing timer\r\n    this.hideTimer$.next();\r\n    \r\n    this.visible = true;\r\n    this.cdr.markForCheck();\r\n    \r\n    // Auto-hide after duration\r\n    timer(this.duration).pipe(\r\n      takeUntil(this.hideTimer$),\r\n      takeUntil(this.destroy$)\r\n    ).subscribe(() => {\r\n      this.hide();\r\n    });\r\n  }\r\n\r\n  hide(): void {\r\n    // Cancel timer when hiding manually\r\n    this.hideTimer$.next();\r\n    this.visible = false;\r\n    this.cdr.markForCheck();\r\n  }\r\n\r\n  dismiss(): void {\r\n    this.hide();\r\n  }\r\n}\r\n","@if (visible && message) {\r\n  <div \r\n    class=\"temporary-hint\"\r\n    [class.temporary-hint--info]=\"type === 'info'\"\r\n    [class.temporary-hint--guidance]=\"type === 'guidance'\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    [attr.aria-label]=\"'Hint: ' + message\">\r\n    \r\n    <mat-icon class=\"temporary-hint__icon\" aria-hidden=\"true\">info</mat-icon>\r\n    \r\n    <div class=\"temporary-hint__content\">\r\n      <p class=\"temporary-hint__message\">{{ message }}</p>\r\n    </div>\r\n\r\n    @if (showDismiss) {\r\n      <button \r\n        class=\"temporary-hint__dismiss\"\r\n        (click)=\"dismiss()\"\r\n        [attr.aria-label]=\"'Dismiss hint'\"\r\n        mat-icon-button\r\n        type=\"button\">\r\n        <mat-icon aria-hidden=\"true\">close</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n"],"names":["i1","i2"],"mappings":"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"}