ps-toolkit-ui 0.0.210 → 0.0.211

package/src/lib/components/form/finger/form.finger.component.ts

@@ -0,0 +1,131 @@
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {InputClass} from '../../../classes/form.class';
+import {InputError} from '../../../classes/enum.class';
+import {HelperClass} from '../../../classes/helper.class';
+
+@Component({
+  selector: 'lib-form-finger',
+  templateUrl: './form.finger.component.html',
+  styleUrls: ['./form.finger.component.css']
+})
+export class FormFingerComponent implements OnInit {
+  @Input()
+  inp: InputClass;
+  @Output()
+  changeIndex = new EventEmitter<string>();
+  @ViewChild('inputBase') inputBase: ElementRef;
+  @ViewChild('inputDiv') inputDiv: ElementRef;
+  @ViewChild('inputLabel') inputLabel: ElementRef;
+  wsRegister = null;
+  ngOnInit(): void {
+    this.inp.setValue = (v) => {
+      this.inp.value = v != null ? v : {
+        R1: null,
+        R2: null,
+        R3: null,
+        R4: null,
+        R5: null,
+        L1: null,
+        L2: null,
+        L3: null,
+        L4: null,
+        L5: null,
+      };
+    };
+    this.inp.focus = () => {
+      this.onFocusIn();
+    };
+    this.inp.isValid = () => {
+      this.inp.error = null;
+      if (this.inp.required && !this.inp.value) {
+        this.inp.error = InputError.Required;
+        return false;
+      }
+      if (!this.inp.required && !this.inp.value) {
+        return true;
+      }
+      return true;
+    };
+    this.inp.clear = () => {
+      this.inp.error = null;
+      this.inp.setValue(null, false);
+    };
+    this.inp.data = () => {
+      if (this.inp.value === null) {
+        return null;
+      }
+      const d = new FormData();
+      for (const [key, value] of Object.entries(this.inp.value)) {
+        if (value != null && value !== 'Loading'){
+          // @ts-ignore
+          d.append(key, value.Hash.toString());
+          // @ts-ignore
+          d.append(key + 'Image', value.Image.toString());
+        }
+      }
+      return d;
+    };
+    this.inp.setValue(null, false);
+  }
+  onClick(): void{
+    this.onFocusIn();
+  }
+
+  onFocusIn(): void {
+    this.inputBase.nativeElement.focus();
+  }
+  onKeyDown(e): void{
+    const code = e.keyCode || e.which;
+    if (code === 9 || code === 13) {
+      e.preventDefault();
+      this.changeIndex.emit(e.shiftKey ? 'ShiftTab' : 'Tab');
+    }
+  }
+  addRemoveFinger(f: string): void{
+    const fv = this.inp.value[f];
+    if (fv === 'Loading') {
+      if (this.wsRegister != null){
+        this.wsRegister.close();
+        this.wsRegister = null;
+      }
+      this.inp.value[f] = null;
+    }else{
+      this.inp.value.R1 = this.inp.value.R1 === 'Loading' ? null : this.inp.value.R1;
+      this.inp.value.R2 = this.inp.value.R2 === 'Loading' ? null : this.inp.value.R2;
+      this.inp.value.R3 = this.inp.value.R3 === 'Loading' ? null : this.inp.value.R3;
+      this.inp.value.R4 = this.inp.value.R4 === 'Loading' ? null : this.inp.value.R4;
+      this.inp.value.R5 = this.inp.value.R5 === 'Loading' ? null : this.inp.value.R5;
+      this.inp.value.L1 = this.inp.value.L1 === 'Loading' ? null : this.inp.value.L1;
+      this.inp.value.L2 = this.inp.value.L2 === 'Loading' ? null : this.inp.value.L2;
+      this.inp.value.L3 = this.inp.value.L3 === 'Loading' ? null : this.inp.value.L3;
+      this.inp.value.L4 = this.inp.value.L4 === 'Loading' ? null : this.inp.value.L4;
+      this.inp.value.L5 = this.inp.value.L5 === 'Loading' ? null : this.inp.value.L5;
+      if (fv != null){
+        this.inp.value[f] = null;
+      } else {
+        this.wsRegister = new WebSocket('ws://localhost:7890/Register');
+        this.wsRegister.onopen = () => {
+          this.inp.value[f] = 'Loading';
+        };
+        this.wsRegister.onmessage = (evt) => {
+          console.log(evt.data);
+          if (evt.data === 'Exist'){
+            this.inp.value[f] = null;
+            HelperClass.addNotification(this.inp.l('FingerprintExist'));
+          } else if (evt.data.startsWith('Error')){
+            this.inp.value[f] = null;
+            HelperClass.addNotification(evt.data);
+          } else {
+            this.inp.value[f] = JSON.parse(evt.data);
+          }
+          this.wsRegister.close();
+          this.wsRegister = null;
+        };
+        this.wsRegister.onclose = () => {
+        };
+        this.wsRegister.onerror = () => {
+        };
+      }
+    }
+  }
+}

package/src/lib/components/form/hidden/form.hidden.component.ts

@@ -0,0 +1,29 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {InputClass} from '../../../classes/form.class';
+
+@Component({
+  selector: 'lib-form-hidden',
+  templateUrl: './form.hidden.component.html',
+  styleUrls: ['./form.hidden.component.css']
+})
+export class FormHiddenComponent implements OnInit{
+  @Input()
+  inp: InputClass;
+  constructor(){
+  }
+
+  ngOnInit(): void {
+    this.inp.setValue = (v) => {
+      this.inp.value = v;
+    };
+    this.inp.isValid = () => {
+      return true;
+    };
+    this.inp.clear = () => {
+      this.inp.value = null;
+    };
+    this.inp.data = () => {
+      return this.inp.value;
+    };
+  }
+}

package/src/lib/components/form/icon/form.icon.component.css

@@ -0,0 +1,108 @@
+.form-input.icon {
+  position: relative;
+  float: right;
+  width: 30px;
+  height: 30px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.form-input.icon .input-base {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  top: 50%;
+  right: 50%;
+  z-index: 0;
+}
+
+.form-input.icon .icon-con {
+  border-radius: 5px;
+  float: right;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.form-input.icon .icon-con i.icon {
+  font-size: 18px;
+  width: 30px;
+  height: 30px;
+  padding: 5px;
+  line-height: 20px;
+  color: var(--black-88);
+  text-align: center;
+  float: right;
+}
+
+.form-input.icon:hover .icon-con, .form-input.icon .input-base:focus + .icon-con{
+  background-color: var(--black-22);
+}
+
+.form-input.icon:hover .icon-con i.icon, .form-input.icon .input-base:focus + .icon-con .icon{
+  color: var(--black-99);
+}
+
+.form-input.icon.red:hover .icon-con, .form-input.icon.red .input-base:focus + .icon-con{
+  background-color: var(--red-22);
+}
+
+.form-input.icon.red:hover .icon-con i.icon, .form-input.icon.red .input-base:focus + .icon-con .icon{
+  color: var(--red);
+}
+
+
+.form-input.icon.blue:hover .icon-con, .form-input.icon.blue .input-base:focus + .icon-con{
+  background-color: var(--blue-22);
+}
+
+.form-input.icon.blue:hover .icon-con i.icon, .form-input.icon.blue .input-base:focus + .icon-con .icon{
+  color: var(--blue);
+}
+
+
+.form-input.icon.green:hover .icon-con, .form-input.icon.green .input-base:focus + .icon-con{
+  background-color: var(--green-22);
+}
+
+.form-input.icon.green:hover .icon-con i.icon, .form-input.icon.green .input-base:focus + .icon-con .icon{
+  color: var(--green);
+}
+
+
+.form-input.icon.comp:hover .icon-con, .form-input.icon.comp .input-base:focus + .icon-con{
+  background-color: var(--comp-22);
+}
+
+.form-input.icon.comp:hover .icon-con i.icon, .form-input.icon.comp .input-base:focus + .icon-con .icon{
+  color: var(--comp);
+}
+
+.form-input.icon.h-20 {
+  width: 20px;
+  height: 20px;
+}
+.form-input.icon.h-20 .icon-con i.icon {
+  width: 20px;
+  height: 20px;
+  line-height: 18px;
+  font-size: 16px;
+
+}
+.form-input.icon.h-25 {
+  width: 25px;
+  height: 25px;
+}
+.form-input.icon.h-25 .icon-con i.icon {
+  width: 25px;
+  height: 25px;
+  line-height: 15px;
+  font-size: 15px;
+
+}

package/src/lib/components/form/icon/form.icon.component.html

@@ -0,0 +1,14 @@
+<div *ngIf="inp.url == null" #inputDiv [id]="inp.name + 'Input'" (click)="onClick($event)" [className]="inp.class + ' form-input icon'" [style]="inp.style">
+  <lib-tooltip [text]="inp.l(inp.name)"></lib-tooltip>
+  <input #inputBase type="button" class="input-base" (keydown)="onKeyDown($event)" (focusin)="onFocusIn()">
+  <div class="icon-con">
+    <i *ngIf="inp.icon != null" #inputIcon [className]="(inp.loading ? 'fa-duotone fa-spin fa-spinner' : inp.icon) + ' icon'"></i>
+  </div>
+</div>
+<a *ngIf="inp.url != null" [target]="inp.urlNewTab ? '_blank' : ''" [routerLink]="inp.url" #inputDiv [id]="inp.name + 'Input'" (click)="onClick($event)" [className]="inp.class + ' form-input icon'" [style]="inp.style">
+  <lib-tooltip [text]="inp.l(inp.name)"></lib-tooltip>
+  <input #inputBase type="button" class="input-base" (keydown)="onKeyDown($event)" (focusin)="onFocusIn()">
+  <div class="icon-con">
+    <i *ngIf="inp.icon != null" #inputIcon [className]="(inp.loading ? 'fa-duotone fa-spin fa-spinner' : inp.icon) + ' icon'"></i>
+  </div>
+</a>

package/src/lib/components/form/icon/form.icon.component.ts

@@ -0,0 +1,73 @@
+import {Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild} from '@angular/core';
+import * as $ from 'jquery';
+import {InputClass} from '../../../classes/form.class';
+
+@Component({
+  selector: 'lib-form-icon',
+  templateUrl: './form.icon.component.html',
+  styleUrls: ['./form.icon.component.css']
+})
+export class FormIconComponent implements OnInit{
+  @Input()
+  inp: InputClass;
+  @Output()
+  changeIndex = new EventEmitter<string>();
+  @ViewChild('inputDiv') inputDiv: ElementRef;
+  @ViewChild('inputBase') inputBase: ElementRef;
+  constructor(){
+  }
+
+  ngOnInit(): void {
+    this.inp.setValue = (v) => {
+    };
+    this.inp.isValid = () => {
+      return true;
+    };
+    this.inp.focus = () => {
+      this.onFocusIn();
+    };
+  }
+  onFocusIn(): void{
+    $(this.inputBase.nativeElement).focus();
+  }
+  onClick(e): void{
+    if (e.screenX && e.screenX !== 0 && e.screenY && e.screenY !== 0) {
+      this.mouseClick();
+    }else{
+      this.codeClick();
+    }
+  }
+  mouseClick(): void{
+    this.onFocusIn();
+    if (this.inp.modal){
+      if (this.inp.row){
+        this.inp.modal.relatedId = this.inp.row.Id;
+      }
+      this.inp.modal.show();
+      if (this.inp.modal.form){
+        this.inp.modal.form.onSuccessBase = () => {
+          this.inp.modal.hide();
+        };
+      }
+    }
+    if (!this.inp.loading && this.inp.onClick != null){
+      this.inp.onClick(this.inp);
+    }
+  }
+  codeClick(): void{
+    this.onFocusIn();
+  }
+  onKeyDown(e): void{
+    const code = e.keyCode || e.which;
+    if (code === 9) {
+      e.preventDefault();
+      this.changeIndex.emit(e.shiftKey ? 'ShiftTab' : 'Tab');
+    }
+    if (code === 13) {
+      e.preventDefault();
+      if (!this.inp.loading && this.inp.onClick != null){
+        this.inp.onClick(this.inp);
+      }
+    }
+  }
+}

package/src/lib/components/form/index/form.component.css

@@ -0,0 +1,89 @@
+.form{
+  width: 100%;
+  float: right;
+  padding: 20px;
+  border-radius: 5px;
+  position: relative;
+}
+.form > .title{
+  float: right;
+  width: 100%;
+  height: 40px;
+  line-height: 30px;
+  font-family: VazirBold;
+  font-size: 16px;
+  text-align: right;
+  margin-bottom: 10px;
+  position: relative;
+}
+.form > .sub-title{
+  float: right;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  font-family: VazirLight;
+  text-align: right;
+  margin-bottom: 10px;
+  position: relative;
+  color: var(--black-88);
+  font-size: 12px;
+}
+.form .loading{
+  position: absolute;
+  background-color: white;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  border-radius: 5px;
+  z-index: 4;
+}
+.form .loading .text {
+  position: absolute;
+  height: 35px;
+  line-height: 35px;
+  width: 100%;
+  text-align: center;
+  font-family: VazirBold;
+  top: calc(50% - 20px);
+}
+::ng-deep .form .loading .icon {
+  font-size: 20px !important;
+  line-height: 30px;
+  position: relative;
+  top: 5px;
+  margin-left: 5px;
+}
+
+.form-buttons{
+  float: right;
+  width: 100%;
+}
+.form-error{
+  margin-top: 10px;
+  padding: 0 10px;
+  position: relative;
+  float: right;
+  width: 100%;
+  height: 15px;
+  line-height: 8px;
+  color: var(--red-cc);
+  text-align: center;
+  font-size: 11px;
+}
+.form-error .message{
+  float: left;
+  width: calc(100% - 40px);
+}
+.form-error .icon{
+  float: right;
+  width: 40px;
+  height: 20px;
+  right: 0;
+  top: 0;
+  line-height: 6px;
+}
+.form .inputs{
+  margin: 0 -15px;
+}

package/src/lib/components/form/index/form.component.html

@@ -0,0 +1,35 @@
+<form [style]="form.style" *ngIf="form" [id]="form.id + 'Form'" [className]="'form' + (form.class ? ' ' + form.class : '')">
+  <div *ngIf="form.displayLabel" [className]="(form.subName ? '' : 'underline ') + 'title'">{{this.form.l(this.form.name)}}</div>
+  <div *ngIf="form.displayLabel && form.subName" class="sub-title underline">{{this.form.l(this.form.subName)}}</div>
+  <div *ngIf="form.loading" class="loading">
+    <div class="text" [innerHTML]="form.l('LoadingTable', 'Processing')"></div>
+  </div>
+  <div *ngIf="!form.permission" class="loading">
+    <div class="text"><i class="fas fa-shield-alt icon"></i>{{ form.l("PermissionDenied") }}</div>
+  </div>
+  <div class="inputs">
+    <span *ngFor="let inp of form.inputs; let i = index">
+      <lib-form-textbox (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && (inp.type == type.Text || inp.type == type.Password || inp.type == type.Mobile || inp.type == type.Phone || inp.type == type.Email || inp.type == type.NationalCode || inp.type == type.Number || inp.type == type.Url || inp.type == type.PostalCode || inp.type == type.Price || inp.type == type.Sheba)" [inp]="inp"></lib-form-textbox>
+      <lib-form-textarea (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && inp.type == type.TextArea" [inp]="inp"></lib-form-textarea>
+      <lib-form-checkbox (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && inp.type == type.Check" [inp]="inp"></lib-form-checkbox>
+      <lib-form-select [inForm]="true" (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && (inp.type == type.Select || inp.type == type.SelectSearch || inp.type == type.SelectAutoComplete)" [inp]="inp"></lib-form-select>
+      <lib-form-date [inForm]="true" (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && inp.type == type.Date" [inp]="inp"></lib-form-date>
+      <lib-form-time [inForm]="true" (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && inp.type == type.Time" [inp]="inp"></lib-form-time>
+      <lib-form-datetime [inForm]="true" (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && inp.type == type.DateTime" [inp]="inp"></lib-form-datetime>
+      <lib-form-label *ngIf="inp.visible && inp.type == type.Label" [inp]="inp"></lib-form-label>
+      <lib-form-file (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && inp.type == type.File" [inp]="inp"></lib-form-file>
+      <lib-form-button (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && (inp.type == type.Button || inp.type == type.Submit)" [inp]="inp"></lib-form-button>
+      <lib-form-icon (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && inp.type == type.Icon" [inp]="inp"></lib-form-icon>
+      <lib-form-radio (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && inp.type == type.Radio" [inp]="inp"></lib-form-radio>
+      <lib-form-tree (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && inp.type == type.Tree" [inp]="inp"></lib-form-tree>
+      <lib-form-plaque (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && (inp.type == type.Plaque || inp.type == type.PlaqueM)" [inp]="inp"></lib-form-plaque>
+      <lib-form-plaque-select (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && (inp.type == type.SelectAutoCompletePlaque || inp.type == type.SelectAutoCompletePlaqueM)" [inp]="inp"></lib-form-plaque-select>
+      <lib-form-bank-card (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && inp.type == type.BankCard" [inp]="inp"></lib-form-bank-card>
+      <lib-form-car-search (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && inp.type == type.CarSearch" [inp]="inp"></lib-form-car-search>
+      <lib-form-car (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && inp.type == type.Car" [inp]="inp"></lib-form-car>
+      <lib-form-finger (changeIndex)="changeIndex(i, $event)" *ngIf="inp.visible && inp.type == type.Finger" [inp]="inp"></lib-form-finger>
+      <lib-form-table *ngIf="inp.visible && inp.type == type.Table" [inp]="inp"></lib-form-table>
+      <lib-form-hidden *ngIf="inp.type == type.Hidden" [inp]="inp"></lib-form-hidden>
+    </span>
+  </div>
+</form>

package/src/lib/components/form/index/form.component.ts

@@ -0,0 +1,45 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {FormClass} from '../../../classes/form.class';
+import {InputType} from '../../../classes/enum.class';
+
+@Component({
+  selector: 'lib-form',
+  templateUrl: './form.component.html',
+  styleUrls: ['./form.component.css']
+})
+export class FormComponent implements OnInit{
+  @Input()
+  form: FormClass;
+  get type(): typeof InputType { return InputType; }
+  constructor(){
+  }
+  ngOnInit(): void{
+  }
+  changeIndex(index, action): void{
+    const n = action === 'ShiftTab' || action === 'ShiftEnter' ? -1 : 1;
+    const lastInp = this.form.inputs.map(
+      x => x.type !== InputType.Submit && x.type !== InputType.Button &&
+        x.type !== InputType.Label && x.type !== InputType.Hidden && !x.disabled && x.visible).lastIndexOf(true);
+    if (index === lastInp && action === 'Enter') {
+      const submit = this.form.inputs.findIndex(x => x.type === InputType.Submit);
+      if (submit !== -1){
+        this.form.submit();
+        return;
+      }
+    }
+    let next = index + n;
+    while (next >= 0 && next < this.form.inputs.length && (this.form.inputs[next].disabled || !this.form.inputs[next].visible
+      || this.form.inputs[next].type === InputType.Label || this.form.inputs[next].type === InputType.Hidden)){
+      next = next + n;
+    }
+    if (next >= 0 && next < this.form.inputs.length){
+      setTimeout(() => {
+        this.form.inputs[next].focus(true);
+      }, 1);
+    }else{
+      setTimeout(() => {
+        this.form.inputs[index].focusOut();
+      }, 1);
+    }
+  }
+}

package/src/lib/components/form/label/form.label.component.css

@@ -0,0 +1,45 @@
+.form-input.label {
+  position: relative;
+  float: right;
+  width: 100%;
+  padding: 0 15px;
+  font-size: 12px;
+  text-align: center;
+  cursor: default;
+  line-height: 30px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+}
+.form-input.label.underline {
+  width: calc(100% - 30px);
+  margin: 20px 15px;
+}
+.form-input.label.form-group-title {
+  width: calc(100% - 30px);
+  margin: 0 15px 10px 15px;
+}
+.form-input.label.space {
+  width: calc(100% - 30px);
+  margin: 10px 15px;
+}
+
+.form-input.label.h-58{
+  height: 58px;
+  line-height: 58px;
+}
+.form-input.label.h-45{
+  height: 45px;
+  line-height: 45px;
+}
+
+.form-input.label.h-30{
+  height: 30px;
+  line-height: 30px;
+}
+
+.form-input.label.h-25{
+  height: 25px;
+  line-height: 25px;
+}

package/src/lib/components/form/label/form.label.component.html

@@ -0,0 +1,2 @@
+<div [id]="inp.name + 'Input'" (click)="onClick()" #inputDiv [className]="inp.class + ' form-input label'" [innerHTML]="inp.l(inp.value)">
+</div>

package/src/lib/components/form/label/form.label.component.ts

@@ -0,0 +1,30 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {InputClass} from '../../../classes/form.class';
+
+@Component({
+  selector: 'lib-form-label',
+  templateUrl: './form.label.component.html',
+  styleUrls: ['./form.label.component.css']
+})
+export class FormLabelComponent implements OnInit{
+  @Input()
+  inp: InputClass;
+  constructor(){
+  }
+
+  ngOnInit(): void {
+    this.inp.setValue = (v) => {
+      this.inp.value = v;
+    };
+    this.inp.isValid = () => {
+      return true;
+    };
+    this.inp.clear = () => {
+    };
+  }
+  onClick(): void{
+    if (this.inp.onClick){
+      this.inp.onClick(this.inp);
+    }
+  }
+}

package/src/lib/components/form/plaque/form.plaque.component.css

@@ -0,0 +1,76 @@
+.form-input.plaque {
+  position: relative;
+  float: right;
+  width: 198px;
+  padding: 0 15px;
+}
+
+.form-input.plaque .label {
+  float: right;
+  width: 100%;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 10px;
+  font-size: 12px;
+  margin-bottom: 3px;
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+  direction: rtl;
+  text-align: right;
+}
+.form-input.plaque.error .label {
+  font-size: 10px;
+  color: var(--red);
+}
+.form-input.plaque .label .required-icon{
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-size: 9px;
+  color: var(--red);
+  text-align: center;
+}
+.form-input.plaque .plaque-con{
+  position: relative;
+  float: right;
+  width: 100%;
+  height: 35px;
+  font-size: 15px;
+  direction: ltr;
+  background-image: url("../../../../assets/images/plaque.png");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  border-radius: 5px;
+  background-color: white;
+}
+.form-input.plaque .plaque-con .part-0{
+  width: 16px !important;
+  height: 35px !important;
+  float: left !important;
+}
+.form-input.plaque.plaque-m .plaque-con{
+  background-image: url("../../../../assets/images/plaque_m.png");
+}
+.form-input.plaque .plaque-con .image{
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+}
+.form-input.plaque .plaque-con.p{
+  background-color: #ffc913;
+}
+.form-input.plaque .plaque-con.g{
+  background-color: #e20600;
+}
+::ng-deep .form-input.plaque .plaque-con .form-input .control{
+  background-color: transparent !important;
+  box-shadow: unset !important;
+  padding: 0 !important;
+  font-size: 13px!important;
+}