tuain-ng-forms-lib 17.2.21 → 17.2.22

package/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+# last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/tuain-ng-forms-lib'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/tuain-ng-forms-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "nanoid",
+    "yn"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuain-ng-forms-lib",
-  "version": "17.2.21",
+  "version": "17.2.22",
   "description": "Componentes y Clases Angular para la gestión de formularios TUAIN",
   "author": "Mauricio Méndez, Imix Consulting",
   "license": "MIT",
@@ -22,19 +22,5 @@
     "nanoid": "^4.0.0",
     "tslib": "^2.4.0",
     "yn": "^5.0.0"
-  },
-  "module": "fesm2022/tuain-ng-forms-lib.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/tuain-ng-forms-lib.mjs",
-      "esm": "./esm2022/tuain-ng-forms-lib.mjs",
-      "default": "./fesm2022/tuain-ng-forms-lib.mjs"
-    }
-  },
-  "sideEffects": false
+  }
 }

package/src/lib/classes/forms/action.ts

@@ -0,0 +1,117 @@
+import { Subject } from 'rxjs';
+import { elementTypes } from './form.constants';
+import { FormElement } from './element';
+
+const HEADER = 'HEADER';
+
+const attrs = {
+  actionCode: { name: '_actionCode', propagate: 'actionCode' },
+  actionName: { name: '_actionName', propagate: 'actionName' },
+  iconName: { name: '_iconName', propagate: 'iconName' },
+  inProgress: { name: '_inProgress', propagate: 'inProgress' },
+  restrictedOnField: { name: '_restrictedOnField', propagate: 'restrictedOnField' },
+  restrictedOnOperator: { name: '_restrictedOnOperator', propagate: 'restrictedOnOperator' },
+  restrictedOnValue: { name: '_restrictedOnValue', propagate: 'restrictedOnValue' },
+}
+
+export class FormAction extends FormElement {
+  private readonly _actionActivated = new Subject<string>();
+  private _actionCode: string = '';
+  private _actionName: string = '';
+  private _iconName: string = '';
+  private _inProgress = false;
+  private _newState: string;
+  private _backend: boolean;
+  private _restrictedOnField: string | null = null;
+  private _restrictedOnOperator: string | null = null;
+  private _restrictedOnValue: string | null = null;
+
+  constructor(actionDefinition, formConfig) {
+    super(actionDefinition, formConfig);
+    this.propagationCustomAttributes = this._formConfig?.propagationCustomAttributes?.actions ?? [];
+    this.elementType = elementTypes.action;
+    this.setAttr(attrs.actionCode, actionDefinition.actionCode ? actionDefinition.actionCode.toString() : '');
+    this.setAttr(attrs.actionName, actionDefinition.actionTitle);
+    this.setAttr(attrs.iconName, actionDefinition.iconName || this._actionCode);
+    this.setAttr(attrs.restrictedOnField, actionDefinition.fieldRestrictedCode?.toString() ?? null);
+    if (this._restrictedOnField) {
+      this.setAttr(attrs.restrictedOnOperator, actionDefinition.operatorRestricted || '');
+      this.setAttr(attrs.restrictedOnValue, actionDefinition.valueRestricted ?? '');
+    }
+    this._backend = actionDefinition?.serverAction ?? false;
+    this._newState = actionDefinition?.newState;
+    this.setCustomAttribute('location', actionDefinition.position || HEADER);
+  }
+
+  get actionCode() { return this._actionCode; }
+  get actionName() { return this._actionName; }
+  get iconName() { return this._iconName; }
+  get inProgress() { return this._inProgress; }
+  get newState() { return this._newState; }
+  get backend() { return this._backend; }
+  get restrictedOnField() { return this._restrictedOnField; }
+  get restrictedOnOperator() { return this._restrictedOnOperator; }
+  get restrictedOnValue() { return this._restrictedOnValue; }
+
+  set actionCode(actionCode) { this.setAttr(attrs.actionCode, actionCode); }
+  set actionName(actionName) { this.setAttr(attrs.actionName, actionName); }
+  set iconName(iconName) { this.setAttr(attrs.iconName, iconName); }
+  set inProgress(inProgress) { this.setAttr(attrs.inProgress, inProgress); }
+  set newState(newState) { this._newState, newState; }
+  set backend(backend) { this._backend, backend; }
+  set restrictedOnField(restrictedOnField) { this.setAttr(attrs.restrictedOnField, restrictedOnField); }
+  set restrictedOnOperator(restrictedOnOperator) { this.setAttr(attrs.restrictedOnOperator, restrictedOnOperator); }
+  set restrictedOnValue(restrictedOnValue) { this.setAttr(attrs.restrictedOnValue, restrictedOnValue); }
+
+  start() { this.inProgress = true; }
+  stop() { this.inProgress = false; }
+
+  override connectWithParentForm(form, formChangeSubject) {
+    super.connectWithParentForm(form, formChangeSubject);
+    if (this._restrictedOnField) {
+      const relatedField = this._form.fields?.[this._restrictedOnField];
+      if (relatedField) {
+        relatedField.editionFinish
+          .subscribe(event => this.updateRestrictedVisibility(event));
+        relatedField.editionPartial
+          .subscribe(event => this.updateRestrictedVisibility(event));
+      }
+    }
+  }
+
+  updateRestrictedVisibility(event) {
+    const newVisible = this._absoluteVisible && this.viewOnState(this._formState);
+    (this._visible !== newVisible) && this.setVisibility(newVisible);
+  }
+
+  override viewOnState(state: string): boolean {
+    const actionVisible = (this.visibleStates && state) ? this.visibleStates.includes(state) : false;
+    if (actionVisible && this._form && this._restrictedOnField) {
+      const relatedField = this._form.fields?.[this._restrictedOnField];
+      if (relatedField) {
+        const fieldValue = relatedField.value;
+        if ((this._restrictedOnOperator === '==' && fieldValue !== this._restrictedOnValue)
+          || (this._restrictedOnOperator === '!=' && fieldValue === this._restrictedOnValue)) {
+          return false;
+        }
+      }
+    }
+    return actionVisible;
+  }
+
+  get actionActivated() { return this._actionActivated.asObservable(); }
+
+  notifyActivation() { this._actionActivated.next(this._actionCode); }
+
+  updateFromServer(receivedAction) {
+    for (const propertyName in receivedAction) {
+      if (propertyName !== 'actionCode' && propertyName !== 'actionId') {
+        try {
+          this[propertyName] = receivedAction[propertyName];
+        } catch (e) {
+          console.log(`Error actualizando la propiedad ${propertyName} de la acción ${this.actionCode}. ${e}`);
+        }
+      }
+    }
+  }
+}

package/src/lib/classes/forms/element.ts

@@ -0,0 +1,26 @@
+import { FormPiecePropagate } from './piece-propagate';
+import { elementTypes } from './form.constants';
+export class FormElement extends FormPiecePropagate {
+  elementType: string | null = null;
+
+  constructor(elementDefinition: any, formConfig: any) {
+    super(elementDefinition, formConfig);
+  }
+
+  setAttr(attr: any, value: any) {
+    const { name: attrName, propagate: name } = attr;
+    try {
+      const currentValue = this[attrName];
+      if (currentValue !== value) {
+        this[attrName] = value;
+        name && this.propagateAttribute(name, value);
+      }
+    } catch (e) {
+      console.log(`Atributo ${attrName} no presente o valor ${value} inconsistente. ${e}`);
+    }
+  }
+
+  isField(): boolean { return this.elementType === elementTypes.field; }
+  isAction(): boolean { return this.elementType === elementTypes.action; }
+  isTable(): boolean { return this.elementType === elementTypes.table; }
+}