@cityway/bo-ui 1.0.0 → 1.0.1

package/src/lib/components/table/components/filter/filter.component.ts

@@ -0,0 +1,38 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { FormFieldComponent } from '../../../form-field/form-field.component';
+import { TableColumn } from '../../../../models/ui/table.model';
+import { CommonModule } from '@angular/common';
+import { FormFieldTypeEnum } from '../../../../enum/field-type.enum';
+
+@Component({
+  selector: 'app-filter',
+  templateUrl: './filter.component.html',
+  standalone: true,
+  imports: [
+    TranslateModule,
+    FormFieldComponent,
+    CommonModule
+  ]
+})
+export class FilterComponent implements OnInit {
+
+  @Input() column: TableColumn;
+  @Input() control!: AbstractControl;
+  @Input() cssClass?: string;
+
+  @Output() clearFilter = new EventEmitter<string>();
+
+  public typeField = FormFieldTypeEnum;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  public onClearFilter() {
+    this.clearFilter.emit();
+  }
+
+}

package/src/lib/components/table/table.component.html

@@ -0,0 +1,104 @@
+<!-- <app-actions-on-table [actionOnTable]="actionOnTable" (actionClick)="onActionClick($event)"
+  [customContent]="customActionsTemplate"></app-actions-on-table> -->
+
+<!-- <div *ngIf="checkbox" class="actions-on-table on-selection">
+  <div class="on-selection-info"> -->
+    <!-- If one selected item on the current page -->
+    <!-- <span class="fw-bold">1</span>
+    {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEM_CURRENT_PAGE' | translate }} -->
+
+    <!-- If one selected item on all pages -->
+    <!-- <span class="fw-bold">1</span>
+    {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEM_ALL_PAGES' | translate }}
+    <span class="fw-bold">{{total}}</span> -->
+
+    <!-- If several selected items on the current page -->
+    <!-- <span class="fw-bold">{{number}}</span>
+    {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEMS_CURRENT_PAGE' | translate }} -->
+
+    <!-- If several selected items on all pages -->
+    <!-- <span class="fw-bold">{{number}}</span>
+    {{ '_COMMON._TABLE._BULK_ACTION.SELECTED_ITEMS_ALL_PAGES' | translate }}
+    <span class="fw-bold">{{total}}</span> -->
+  <!-- </div>
+
+  <button class="btn btn-secondary btn-min-width" type="button">
+    {{ '_COMMON._TABLE._BULK_ACTION.EXPORT_SELECTION' | translate }}
+  </button>
+  <button class="btn btn-danger btn-min-width" type="button">
+    {{ '_COMMON._TABLE._BULK_ACTION.DELETE_SELECTION' | translate }}
+  </button>
+</div>
+
+<div class="table-responsive table-responsive-full-width mb-3" appDoubleScroll>
+  <table class="table table-bordered table-striped table-hover table-full-width">
+    <caption class="visually-hidden" [innerHTML]="'_COMMON._TABLE.CAPTION' | translate: { label: title } "></caption>
+    <thead>
+      <tr>
+        <th *ngIf="checkbox" scope="col" width="10">
+          <div class="form-check">
+            <input class="form-check-input" type="checkbox" id="checkme">
+            <label class="form-label" class="form-check-label" for="checkme">
+              <span class="visually-hidden">{{ '_COMMON._TABLE._THEAD.CHECK_LINE' | translate }}</span>
+            </label>
+          </div>
+        </th>
+        <ng-container *ngFor="let column of columns">
+          <th scope="col" [ngClass]="{'p-0': column.sort}">
+            <button *ngIf="column.sort" class="sorting-btn"
+              [ngClass]="getSortIcon(column.key)"
+              (click)="setSortProperty(column.key)">
+              {{column.label}}
+              <span class="sorting-icons">
+                <span class="bo-icons bo-sort"></span>
+              </span>
+            </button>
+            <ng-container *ngIf="!column.sort">
+              {{ column.label }}
+            </ng-container>
+          </th>
+        </ng-container>
+      </tr>
+      <tr *ngIf="filterForm" [formGroup]="filterForm" class="table-filter">
+        <th *ngIf="checkbox"></th>
+        <ng-container *ngFor="let column of columns">
+          <th>
+            <app-form-field *ngIf="column.filter" [type]="column.filter?.type" [name]="column.key" [control]="filterForm.get(column.key)"
+              [options]="column.filter?.options" [inTableFilter]="true" [cssClass]="filterForm.get(column.key).value ? 'has-value' : ''"
+              [placeholder]="'_COMMON._ACTION.FILTER_BY' | translate"
+              (clearFieldFilter)="filterForm.get(column.key).setValue('')"></app-form-field>
+          </th>
+        </ng-container>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td colspan="100"> -->
+          <!-- <app-loader></app-loader> -->
+        <!-- </td>
+      </tr>
+      <ng-container> -->
+        <!-- <tr *ngIf="paginedResult && paginedResult.result?.length <= 0">
+          <td class="table-info no-result" colspan="100">
+            {{ '_COMMON._TABLE.NO_RESULT' | translate }}
+          </td>
+        </tr> -->
+      <!-- </ng-container>
+    </tbody>
+
+    @if (legend) {
+    <tfoot>
+      <tr>
+        <td class="table-legend" colspan="100">
+          <app-legend [legend]="legend"></app-legend>
+        </td>
+      </tr>
+    </tfoot>
+    }
+  </table>
+</div> -->
+
+<!-- <cw-xpagination *ngIf="paginedResult && paginedResult?.pagination.PageCount >= 0"
+  [pagination]="paginedResult?.pagination" [pagesToShow]="pageToShow" (goPage)="goToPage($event)" (goNext)="onNext()"
+  (goPrev)="onPrev()" (nbResultChange)="onNbResultChange($event)">
+</cw-xpagination> -->

package/src/lib/components/table/table.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TableComponent } from './table.component';
+
+describe('TableComponent', () => {
+  let component: TableComponent;
+  let fixture: ComponentFixture<TableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/table/table.component.ts

@@ -0,0 +1,85 @@
+import { CommonModule } from '@angular/common';
+import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import { FormGroup, FormsModule, ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { DoubleScrollDirective } from '../../directives/double-scroll';
+// import { PaginedComponent } from '../../../extensions/pagined-component.extends';
+// import { PaginationInfo } from '../../../models/pagination/pagination-info';
+// import { ActiveFilter, ListFilter } from '../../models/table/IFilter';
+// import { SortType } from '../../../models/table/sort-type';
+import { Legend } from '../../models/ui/legend.model';
+import { ActionOnTable, ActionOnTableType, TableColumn } from '../../models/ui/table.model';
+// import { XpaginationComponent } from '../../xpagination/xpagination.component';
+import { FormFieldComponent } from '../form-field/form-field.component';
+import { LegendComponent } from "../legend/legend.component";
+import { ActionsOnTableComponent } from './components/actions-on-table/actions-on-table.component';
+
+@Component({
+  selector: 'app-table',
+  templateUrl: './table.component.html',
+  standalone: true,
+  imports: [
+    ActionsOnTableComponent,
+    TranslateModule,
+    FormsModule,
+    CommonModule,
+    // XpaginationComponent,
+    ReactiveFormsModule,
+    DoubleScrollDirective,
+    LegendComponent,
+    FormFieldComponent
+  ]
+})
+
+export class TableComponent {}
+
+// export class TableComponent extends PaginedComponent<Array<ListFilter>> implements OnInit {
+
+//   @Input() checkbox = true;
+//   @Input() title: string;
+//   @Input() columns: TableColumn[] = [];
+//   @Input() actionOnTable?: ActionOnTable[] = [];
+//   @Input() legend?: Legend;
+
+//   @Output() actionClick = new EventEmitter<ActionOnTableType>();
+
+//   @ContentChild('customActions') customActionsTemplate?: TemplateRef<any>;
+
+//   public filter: ListFilter;
+//   public actionOnTableAction = ActionOnTableType;
+
+//   constructor(fb: UntypedFormBuilder) {
+//     super(fb);
+//   }
+
+//   ngOnInit(): void {
+//     this.filter = this.getSavedFilters(new ListFilter(this.columns));
+//     this.pagination = new PaginationInfo();
+//     this.pagination.filter = this.filter;
+
+//     // Identifier la colonne ayant defaultFilter = true
+//     const defaultCol = this.columns.find(col => col.filter?.defaultFilter);
+
+//     if (defaultCol?.filter) {
+//       this.pagination.sortInfo.sortColumnName = defaultCol.key;
+//       this.pagination.sortInfo.sortType = defaultCol.filter.defaultOrder ?? SortType.Asc;
+//     } else {
+//       // fallback si aucune colonne par défaut
+//       this.pagination.sortInfo.sortColumnName = this.columns[0]?.key ?? '';
+//       this.pagination.sortInfo.sortType = SortType.Asc;
+//     }
+
+//     this.initFilterForm(this.filter);
+//     //this.loadData();
+
+//     console.log('FORM ==> ', this.filterForm.value);
+//     console.log('FORM ==> ', this.filterForm.controls['createdAt']);
+//     console.log('FORM ==> ', this.filterForm.controls['createdAt'] instanceof FormGroup); // doit être true
+
+//   }
+
+//   public onActionClick(action: ActionOnTableType): void {
+//     this.actionClick.emit(action);
+//   }
+
+// }

package/src/lib/components/wizard-stepper/components/wizard-step.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WizardStepComponent } from './wizard-step.component';
+
+describe('WizardStepComponent', () => {
+  let component: WizardStepComponent;
+  let fixture: ComponentFixture<WizardStepComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WizardStepComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WizardStepComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/wizard-stepper/components/wizard-step.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-wizard-step',
+  template: '<ng-template #content><ng-content></ng-content></ng-template>',
+  standalone: true
+})
+
+export class WizardStepComponent {
+
+  @Input() title!: string;
+  @Input() completed = false;
+
+  @ViewChild('content', { static: true }) templateRef!: TemplateRef<any>;
+
+}

package/src/lib/components/wizard-stepper/wizard-stepper.component.html

@@ -0,0 +1,45 @@
+<nav>
+  <ul class="list-inline step-list">
+    @for (step of steps.toArray(); track step; let i = $index) {
+      <li class="list-inline-item step-item">
+        <button class="btn step-button" [ngClass]="{
+              'step-active': selectedIndex === i,
+              'step-completed': step.completed,
+              'step-current': selectedIndex === i && step.completed === false
+            }" [disabled]="(i > 0 && !steps.toArray()[i - 1]?.completed)" (click)="goToStep(i)" type="button">
+          <span class="step-indicator bo-icons bo-alert-success" aria-hidden="true"></span>
+          <span class="step-label">
+            {{ step.title || ('_COMMON._STEPPER.STEP' | translate) + (i + 1) }}
+          </span>
+        </button>
+      </li>
+    }
+  </ul>
+</nav>
+
+@for (step of steps.toArray(); track step; let i = $index) {
+  <section class="tab-pane" [class.active]="selectedIndex === i" [hidden]="selectedIndex !== i" role="tabpanel">
+    <ng-container *ngTemplateOutlet="step.templateRef"></ng-container>
+  </section>
+}
+
+<div class="text-center mt-5">
+  <div class="btn-group">
+    <button class="btn btn-secondary btn-min-width" (click)="previousStep()" [disabled]="selectedIndex === 0"
+      type="button">
+      {{ '_COMMON._STEPPER.PREVIOUS_STEP' | translate }}
+    </button>
+
+    @if (selectedIndex !== steps.length - 1) {
+      <button class="btn btn-primary btn-min-width" (click)="nextStep()"
+        [disabled]="!steps.toArray()[selectedIndex]?.completed" type="button">
+        {{ '_COMMON._STEPPER.NEXT_STEP' | translate }}
+      </button>
+    }
+    @else {
+      <button class="btn btn-primary btn-min-width" (click)="endWizard()" type="button">
+        {{ '_COMMON._ACTION.END' | translate }}
+      </button>
+    }
+  </div>
+</div>

package/src/lib/components/wizard-stepper/wizard-stepper.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WizardStepperComponent } from './wizard-stepper.component';
+
+describe('WizardStepperComponent', () => {
+  let component: WizardStepperComponent;
+  let fixture: ComponentFixture<WizardStepperComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WizardStepperComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WizardStepperComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/wizard-stepper/wizard-stepper.component.ts

@@ -0,0 +1,70 @@
+import { CommonModule } from '@angular/common';
+import { Component, ContentChildren, EventEmitter, Output, QueryList } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { WizardStepComponent } from './components/wizard-step.component';
+
+@Component({
+  selector: 'app-wizard-stepper',
+  templateUrl: './wizard-stepper.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule
+  ]
+})
+export class WizardStepperComponent {
+  @ContentChildren(WizardStepComponent) steps!: QueryList<WizardStepComponent>;
+
+  @Output() stepChange = new EventEmitter<number>();
+  @Output() stepNext = new EventEmitter<number>();
+  @Output() stepPrevious = new EventEmitter<number>();
+  @Output() stepEnd = new EventEmitter<number>();
+
+  public selectedIndex = 0;
+
+  public get stepList(): WizardStepComponent[] {
+    return this.steps.toArray();
+  }
+
+  public goToStep(index: number) {
+    if (index < 0 || index >= this.steps.length) return;
+
+    // Vérifier que toutes les étapes précédentes sont complétées
+    for (let i = 0; i < index; i++) {
+      if (!this.steps.toArray()[i].completed) {
+        return; // Empêche d'aller à cette étape si une étape précédente n'est pas validée
+      }
+    }
+
+    this.selectedIndex = index;
+    this.stepChange.emit(this.selectedIndex);
+  }
+
+  public nextStep() {
+    if (this.selectedIndex < this.steps.length - 1) {
+      const currentStep = this.steps.toArray()[this.selectedIndex];
+      if (!currentStep.completed) {
+        // Si l'étape courante n'est pas validée, on bloque
+        return;
+      }
+      this.selectedIndex++;
+      this.stepNext.emit(this.selectedIndex);
+      this.stepChange.emit(this.selectedIndex);
+    }
+  }
+
+  public previousStep() {
+    if (this.selectedIndex > 0) {
+      this.selectedIndex--;
+      this.stepPrevious.emit(this.selectedIndex);
+      this.stepChange.emit(this.selectedIndex);
+    }
+  }
+
+  public endWizard() {
+    if (this.selectedIndex > 0) {
+      this.stepEnd.emit(this.selectedIndex);
+      this.stepChange.emit(this.selectedIndex);
+    }
+  }
+}

package/src/lib/directives/double-scroll.ts

@@ -0,0 +1,64 @@
+import { AfterViewChecked, Directive, ElementRef, HostListener, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[appDoubleScroll]'
+})
+
+export class DoubleScrollDirective implements OnInit, AfterViewChecked, OnDestroy {
+
+  scroll: any;
+  div: any;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.adaptScrollWidth();
+  }
+
+  // Si scroll le tableau on scroll aussi div.table-responsive-double-scroll
+  @HostListener('scroll', ['$event'])
+  onScroll() {
+    this.div.scrollLeft = this.el.nativeElement.scrollLeft;
+  }
+
+  ngOnInit() {
+
+    // On applique un margin-top à 0 à la table.
+    this.el.nativeElement.style.marginTop = '0';
+
+    // On crée le div.table-responsive-double-scroll et on l'insère avant le tableau
+    this.div = this.renderer.createElement('div');
+    this.renderer.addClass(this.div, 'table-responsive-double-scroll');
+    this.renderer.insertBefore(this.el.nativeElement.parentNode, this.div, this.el.nativeElement);
+
+    // On crée le div.scroll et on l'insère dans le div.table-responsive-double-scroll
+    this.scroll = this.renderer.createElement('div');
+    this.renderer.addClass(this.scroll, 'scroll');
+    this.renderer.appendChild(this.div, this.scroll);
+
+    // Si on scroll div.table-responsive-double-scroll on scroll aussi le tableau
+    this.div.addEventListener('scroll', function() {
+      //this.nextSibling.scrollLeft = this.scrollLeft;
+      this.nextSibling.style.transform = "translateX(-" + this.scrollLeft  + "px)";
+    });
+  }
+
+  adaptScrollWidth() {
+    // On donne à div.scroll la taille du tableau
+    if (this.el.nativeElement.firstChild.offsetWidth > this.el.nativeElement.offsetWidth) {
+      this.scroll.style.width = (this.el.nativeElement.firstChild.offsetWidth + 17) + 'px';
+    } else {
+      this.scroll.style.widdth = 'auto';
+    }
+  }
+
+  ngAfterViewChecked() {
+    this.adaptScrollWidth();
+  }
+
+  ngOnDestroy() {
+    this.div.removeEventListener('scroll', null);
+  }
+}

package/src/lib/directives/rwd-tabs.ts

@@ -0,0 +1,99 @@
+import { AfterViewChecked, AfterViewInit, Directive, ElementRef, HostListener, OnInit, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[appRwdTabs]',
+  standalone: true
+})
+
+export class RwdTabsDirective implements OnInit, AfterViewInit, AfterViewChecked {
+  parentEl = this.el.nativeElement;
+  arrayLi = [];
+  goodOnViewInit = false;
+  dropdownDisplay = false;
+  goodOnViewChecked = false;
+
+  rwdTabsOk = false;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.rwdTabs();
+  }
+
+  ngOnInit() {
+  }
+
+  ngAfterViewInit() {
+    this.liOnLoad();
+    // Si on a bien joué la fonction liOnLoad
+    if (this.goodOnViewInit) {
+      this.rwdTabs();
+    }
+  }
+
+  ngAfterViewChecked() {
+    // si on a pas réussi à récupérer les marges et les tailles
+    // sur le init, on le fait sur le check
+    if (!this.goodOnViewInit) {
+      this.liOnLoad();
+    }
+    // si on a pas déjà joué la fonction
+    if (!this.rwdTabsOk) {
+      this.rwdTabs();
+    }
+  }
+
+  liOnLoad() {
+    Array.prototype.forEach.call(this.parentEl.children, child => {
+      // On récupère la taille des marges
+      const styleChild = child.currentStyle || window.getComputedStyle(child);
+      const childMarginSum = parseFloat(styleChild.marginLeft);
+
+      // on teste si on arrive à récupérer les marges sur le init
+      if (styleChild.marginLeft !== '') {
+        // On stock les li et ça taille dans un tableau arrayLi
+        this.arrayLi.push([child, child.offsetWidth + childMarginSum]);
+        this.goodOnViewInit = true;
+      }
+    });
+    if (this.goodOnViewInit) {
+      // On supprime le dernier élément du tableau qui correspond au dropdown
+      this.arrayLi.pop();
+    }
+  }
+
+  rwdTabs() {
+    this.rwdTabsOk = true; // flag la fonction comme lancée
+
+    const widthUl = this.parentEl.offsetWidth;
+    // Largeur du dropdown à prendre en compte (ancienne charte = 90, Manett = 150)
+    let widthLi = !this.dropdownDisplay ? 0 : 150;
+    const dropDown = this.parentEl.lastChild.querySelector('.dropdown-menu');
+
+    // On parcourt le tableau de li
+    this.arrayLi.forEach(element => {
+      widthLi += element[1];
+      // Quand les li ne rentreent plus dans le ul
+      if (widthLi > widthUl) {
+        // On les déplace dans le dropdown
+        dropDown.appendChild(element[0]);
+        this.dropdownDisplay = true; // on indique que le dropdown doit apparaitre
+      } else {
+        // Sinon on replace l'onglet à sa place initale
+        this.renderer.insertBefore(this.parentEl, element[0], this.parentEl.lastChild);
+      }
+    });
+
+    // On fait apparaître le dropdown
+    if (this.dropdownDisplay) {
+      this.parentEl.lastChild.style.setProperty('display', 'block', 'important');
+    }
+    // Si le dropdown est vide on le cache de nouveau
+    if (dropDown.firstChild == null) {
+      this.parentEl.lastChild.style.setProperty('display', 'none', 'important');
+      this.dropdownDisplay = false;
+    }
+  }
+}

package/src/lib/directives/show-hide-password.ts

@@ -0,0 +1,61 @@
+import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[showHidePassword]',
+  standalone: true
+})
+
+export class ShowHidePasswordDirective implements OnInit {
+
+  private isShown = false;
+
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2,
+    private translateService: TranslateService
+    ) {
+  }
+
+  ngOnInit() {
+    this.setup();
+  }
+
+  setup() {
+    const div = this.renderer.createElement('div');
+    this.renderer.insertBefore(this.el.nativeElement.parentNode, div, this.el.nativeElement);
+
+    this.renderer.appendChild(div, this.el.nativeElement);
+    this.renderer.addClass(div, 'see-password-container');
+
+    const button = this.renderer.createElement('button');
+    this.renderer.appendChild(this.el.nativeElement.parentNode, button);
+    this.renderer.addClass(button, 'btn');
+    this.renderer.setAttribute(button, 'type', 'button');
+    this.renderer.addClass(button, 'optyweb');
+    this.renderer.addClass(button, 'cw-hide-map');
+    this.renderer.addClass(button, 'py-2');
+    this.renderer.addClass(button, 'see-password');
+
+    const srOnly = this.renderer.createElement('span');
+    this.renderer.appendChild(button, srOnly);
+    this.renderer.addClass(srOnly, 'visually-hidden');
+    this.renderer.setProperty(srOnly,'innerHTML', this.translateService.instant('_COMMON._FORM._SHOW_HIDE_PWD.SHOW'));
+
+    this.renderer.listen(button, 'click', (event) => {
+      this.isShown = !this.isShown;
+      if (this.isShown) {
+        this.el.nativeElement.setAttribute('type', 'text');
+        this.renderer.removeClass(button, 'cw-hide-map');
+        this.renderer.addClass(button, 'cw-show-map');
+        this.renderer.setProperty(srOnly,'innerHTML', this.translateService.instant('_COMMON._FORM._SHOW_HIDE_PWD.HIDE'));
+      } else {
+        this.el.nativeElement.setAttribute('type', 'password');
+        this.renderer.addClass(button, 'cw-hide-map');
+        this.renderer.removeClass(button, 'cw-show-map');
+        this.renderer.setProperty(srOnly,'innerHTML', this.translateService.instant('_COMMON._FORM._SHOW_HIDE_PWD.SHOW'));
+      }
+    });
+  }
+}

package/src/lib/enum/drag-item.enum.ts

@@ -0,0 +1,5 @@
+export interface DragItem {
+  id: number;
+  label: string;
+  order: number;
+}