nuxeo-development-framework 3.1.6 → 3.1.8

package/src/lib/components/dynamic-form/components/dynamic-form-textarea/dynamic-form-textarea.component.ts

@@ -1,213 +0,0 @@
-import {
-  Component,
-  Input,
-  OnChanges,
-  Optional,
-  Self,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import {
-  AbstractControl,
-  ControlValueAccessor,
-  NgControl,
-} from '@angular/forms';
-import { TranslateService } from '@ngx-translate/core';
-import { DynamicFormTextItemModel } from '../../models/dynamic-form.models';
-import { DynamicFormUpdateService } from '../../services/dynamic-form-update.service';
-
-/**
- * A textarea input that can be used inside reactive or template driven forms
- * @title
- * Textarea
- * @example
- * <app-dynamic-form-textarea
- *    [horizontalAlign]="false"
- *    formControlName="controlName"
- *    [placeholder]="'PATH.TO.PLACEHOLDER.STRING'"
- * ></app-dynamic-form-textarea>
- */
-@Component({
-  selector: 'app-dynamic-form-textarea',
-  templateUrl: './dynamic-form-textarea.component.html',
-  styleUrls: ['./dynamic-form-textarea.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class DynamicFormTextareaComponent
-  implements OnChanges, ControlValueAccessor
-{
-  static DEFAULT_SEPARATOR = ', ';
-  /** @deprecated */
-  @Input()
-  property: DynamicFormTextItemModel;
-
-  /** Field Label */
-  @Input()
-  label;
-  /** is editable */
-  @Input()
-  editable = true;
-  /** is dsisabled */
-  @Input()
-  disabled = false;
-  /** DOM element Id */
-  @Input()
-  id;
-  /** Input placeholder */
-  @Input() placeholder = '';
-  /** @deprecated */
-  @Input()
-  displayEmpty = true;
-
-  /**  make label and control side by side not vertical */
-  @Input() horizontalAlign = true;
-
-  @ViewChild('editorInput')
-  private editorInput: any;
-
-  inEdit = false;
-  editedValue: string;
-  errorMessages: string[];
-  valueSeparator: string;
-
-  constructor(
-    private dynamicFormUpdateService: DynamicFormUpdateService,
-    public translate: TranslateService,
-    @Self() @Optional() public control: NgControl
-  ) {
-    this.control.valueAccessor = this;
-    this.valueSeparator = DynamicFormTextareaComponent.DEFAULT_SEPARATOR;
-  }
-  onChange: any = () => {};
-  onTouched: any = () => {};
-
-  isRequired() {
-    if (!this.control.control.validator) {
-      return false;
-    }
-
-    const validator = this.control.control.validator({} as AbstractControl);
-    return validator && validator.required;
-  }
-  writeValue(obj: any): void {
-    this.editedValue = obj;
-    // this.property.value = obj;
-
-    //  throw new Error('Method not implemented.');
-  }
-  public get invalid(): boolean {
-    return this.control ? this.control.invalid : false;
-  }
-
-  public get showError(): boolean {
-    if (!this.control) {
-      return false;
-    }
-
-    const { dirty, touched } = this.control;
-
-    return this.invalid ? dirty || touched : false;
-  }
-  registerOnChange(fn: any) {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any) {
-    this.onTouched = fn;
-  }
-  setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  ngOnChanges(): void {
-    // this.editedValue = this.property.multiline
-    //  ? this.property.displayValue
-    // : this.property.value;
-  }
-
-  showProperty(): boolean {
-    return this.displayEmpty || !this.property.isEmpty();
-  }
-
-  showClickableIcon(): boolean {
-    return this.hasIcon() && this.editable;
-  }
-
-  isEditable(): boolean {
-    return this.editable;
-  }
-  isDisabled(): boolean {
-    return this.disabled;
-  }
-
-  isClickable(): boolean {
-    return !!this.property.clickable;
-  }
-
-  hasIcon(): boolean {
-    return !!this.property.icon;
-  }
-
-  hasErrors(): boolean {
-    return this.showError;
-  }
-
-  setEditMode(editStatus: boolean): void {
-    this.inEdit = editStatus;
-    setTimeout(() => {
-      if (this.editorInput) {
-        this.editorInput.nativeElement.click();
-      }
-    }, 0);
-  }
-
-  reset(event: MouseEvent | KeyboardEvent): void {
-    event.stopPropagation();
-
-    /*
-     this.editedValue = this.property.multiline
-       ? this.property.displayValue
-       : this.property.value; */
-    this.setEditMode(false);
-    this.resetErrorMessages();
-  }
-
-  private resetErrorMessages() {
-    this.errorMessages = [];
-  }
-
-  update(event: MouseEvent | KeyboardEvent): void {
-    event.stopPropagation();
-    const updatedValue = this.prepareValueForUpload(
-      this.property,
-      this.editedValue
-    );
-    // this.property.value = updatedValue;
-    this.onChange(updatedValue);
-    this.onTouched();
-    // this.dynamicFormUpdateService.update(this.property, updatedValue);
-    this.setEditMode(false);
-    this.resetErrorMessages();
-  }
-
-  prepareValueForUpload(
-    property: DynamicFormTextItemModel,
-    value: string
-  ): string | string[] {
-    return value;
-  }
-
-  onTextAreaInputChange() {
-    if (this.property) {
-      this.errorMessages = this.property.getValidationErrors(this.editedValue);
-    }
-  }
-
-  clicked(): void {
-    if (typeof this.property.clickCallBack === 'function') {
-      this.property.clickCallBack();
-    } else {
-      this.dynamicFormUpdateService.clicked(this.property);
-    }
-  }
-}

package/src/lib/components/dynamic-form/components/dynamic-form-textitem/dynamic-form-textitem.component.html

@@ -1,68 +0,0 @@
-<div class="app-property-value">
-  <div class="app-input-wrapper">
-    <label *ngIf="label" for="formGroupInputSmall"
-      >{{ label | translate
-      }}<span *ngIf="isRequired()" class="text-danger m-1">*</span></label
-    >
-    <div class="">
-            <ng-container *ngIf="isEditable(); else readOnly">
-        <div class="new-one" (clickOutside)="openOptions(false)">
-          <input
-          
-            [id]="id"
-            [attr.disabled]="isDisabled() || null"
-            [type]="type"
-            class="form-control"
-            [ngClass]="{'input-filled' : editedValue }"
-            (keydown.space)="allowSpace($event)"
-            #editorInput
-            [required]="isRequired()"
-            [(ngModel)]="editedValue"
-            [autocomplete]="nativeAutoComplete"
-            (ngModelChange)="update($event)"
-            (keyup)="waitUntilUserFinishTyping()"
-            [attr.data-automation-id]="'card-textitem-editinput-'"
-            placeholder="{{ placeholder | translate }}"
-            (focus)="openOptions(true)"
-          />
-          <div *ngIf="documentList.length !== 0" id="suggestedoptions">
-            <div
-              class="suggestions-wrapper"
-              [ngClass]="{ 'd-block': showsuggestedOptions }"
-            >
-              <div
-                class="option"
-                id="suggestedoptions"
-                *ngFor="let option of documentList"
-                (click)="selectItem(option.title)"
-              >
-                {{ option.title }}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <mat-error
-          [attr.data-automation-id]="'card-textitem-error-'"
-          class="app-textitem-editable-error"
-          *ngIf="hasErrors()"
-        >
-          <ul>
-            <li *ngIf="control.errors.required">
-              {{ label | translate }} {{ "VALIDATORS.REQUIRED" | translate }}
-            </li>
-            <li *ngIf="control.errors.pattern">
-              {{ "wrong pattern" | translate }}
-            </li>
-            <li *ngIf="control.errors.min">
-              {{ "VALIDATORS.MIN" | translate }} {{ control.errors.min.min }}
-            </li>
-          </ul>
-        </mat-error>
-      </ng-container>
-      <ng-template #readOnly>
-        {{ editedValue }}
-      </ng-template>
-    </div>
-  </div>
-</div>

package/src/lib/components/dynamic-form/components/dynamic-form-textitem/dynamic-form-textitem.component.scss

@@ -1,208 +0,0 @@
-@import '~@angular/material/theming';
-
-.app-property-value{
-  .input-filled{
-    border-color: #1a96c6 !important;
-   }
-   
-  .app-input-wrapper{
-    label{
-      color: rgba(143, 152, 170);
-    font-size: 12px;
-    margin-bottom: 0px;
-    }
-    .form-control{
-      border: 1px solid #ccc;
-      border-radius: 5px;
-      background-color: rgba(143, 152, 170 , 0.1);
-      border-radius: 0px;
-      height: 40px;
-    }
-    .form-control:disabled{
-      background-color: #e9ecef !important;
-    }
-    .app-textitem-editable-error {
-      ul{
-        list-style: none;
-        padding: 0px;
-        margin: 0px;
-        font-size: 14px;
-        li{
-          margin-top: 5px;
-        }
-      }
-    }
-    .form-control:focus{
-      
-    }
-    .new-one{
-      position: relative;
-    }
-    .suggestions-wrapper{
-      border-radius: 3px;
-      height: auto;
-      max-height: 240px;
-      border: 1px solid #ccc;
-      box-shadow: 2px 2px 2px rgb(0 0 0 / 6%);
-      overflow: auto;
-      display: none;
-      position: absolute;
-      width: 100%;
-      background-color: white;
-      z-index: 99;
-      .option{
-        margin-bottom: 5px; 
-        padding: 5px 10px;
-        cursor: pointer;
-      }
-      .option:hover{
-        background-color: #f5faff;
-      }
-    }
-  }
-}
-
-@mixin app-dynamic-form-textitem-theme($theme) {
-  $foreground: map-get($theme, foreground);
-
-  .app {
-    &-textitem-icon {
-      font-size: 16px;
-      width: 16px;
-      height: 16px;
-    }
-
-    &-textitem-action {
-      color: get-color-from-palette($foreground, text, 0.25);
-    }
-
-    &-textitem-action:hover,
-    &-textitem-action:focus {
-      color: get-color-from-palette($foreground, text);
-      border: $outline;
-      box-shadow: $focus-shadow;
-
-    }
-
-    &-update-icon {
-      padding-left: 13px;
-    }
-
-    &-textitem-readonly {
-      cursor: pointer !important;
-
-      &:hover .app-textitem-action,
-      &:focus .app-textitem-action {
-        color: get-color-from-palette($foreground, text);
-      }
-    }
-
-    &-textitem-clickable {
-      cursor: pointer !important;
-      &:hover .app-textitem-action {
-        color: get-color-from-palette($foreground, text);
-      }
-    }
-
-    &-textitem-clickable-value {
-      cursor: pointer !important;
-      color: get-color-from-palette($primary);
-    }
-
-    &-textitem-editable {
-      &-controls {
-        display: flex;
-        align-items: center;
-
-        mat-icon:not(.app-button-disabled):hover {
-          color: get-color-from-palette($foreground, text);
-          cursor: pointer !important;
-        }
-
-        mat-form-field {
-          width: 100%;
-        }
-
-        input:focus,
-        textarea:focus {
-          border: $outline;
-          box-shadow: $focus-shadow;
-
-
-        }
-      }
-
-      &-error {
-        font-size: 12px;
-        padding-top: 4px;
-
-        ul {
-          margin: 0;
-          padding: 0;
-          list-style-type: none;
-
-          li {
-            margin: 0;
-            padding: 0;
-          }
-        }
-      }
-    }
-
-    &-textitem-default-value {
-      color: get-color-from-palette($foreground, text, 0.54);
-    }
-
-    &-textitem-editable .mat-form-field-wrapper {
-      margin: 0;
-      padding-bottom: 0;
-    }
-
-    &-textitem-editable .mat-form-field-underline {
-      display: none;
-    }
-
-    &-textitem-editable .mat-form-field-infix {
-      padding: 0;
-      border-top: none;
-    }
-
-    &-textitem-editable .mat-form-field-label-wrapper {
-      padding-top: 2em;
-      position: static;
-    }
-
-    &-textitem-editable .mat-form-field-label {
-      top: 4px;
-    }
-
-    &-textitem-editable .mat-input-element {
-      font-family: inherit;
-      position: relative;
-      padding-top: 6px;
-    }
-
-    &-textitem-editable .mat-input-element:focus {
-      padding: 5px;
-      left: -6px;
-      top: 0;
-    }
-
-    &-textitem-editable input.mat-input-element {
-      margin-bottom: 2px;
-    }
-
-    &-textitem-editable input.mat-input-element:focus {
-      margin-bottom: -8px;
-    }
-
-    &-textitem-ellipsis {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: block;
-    }
-  }
-}
-
-