catalog-ui/src/app/ng2/pages/composition/palette/palette.component.html

   1 <div class="composition-palette-component">
   2     <div class="palette-elements-count">Elements
   3         <span class="palette-elements-count-value">{{numberOfElements}}</span>
   4     </div>
   5
   6     <sdc-filter-bar placeholder="Search..." (valueChange)="onSearchChanged($event)" testId="searchAsset"></sdc-filter-bar>
   7
   8     <div class="palette-elements-list">
   9         <sdc-loader [global]="false" name="palette-loader" testId="palette-loader" [active]="this.isPaletteLoading" [class.inactive]="!this.isPaletteLoading"></sdc-loader>
  10         <div *ngIf="numberOfElements === 0 && searchText" class="no-elements-found">No Elements Found</div>
  11         <sdc-accordion *ngFor="let mapByCategory of paletteElements | keyValue; let first = first" [attr.data-tests-id]="'leftPalette.category.'+mapByCategory.key" [title]="mapByCategory.key" [css-class]="'palette-category'">
  12             <div *ngFor="let mapBySubCategory of mapByCategory.value | keyValue">
  13                 <div class="palette-subcategory">{{mapBySubCategory.key}}</div>
  14                 <ng-container *ngIf="!(isViewOnly$ | async)">
  15                     <div *ngFor="let paletteElement of mapBySubCategory.value"
  16                         [dndDraggable]="paletteElement"
  17                         [dndDisableIf]="paletteElement.componentSubType == 'GROUP' && paletteElement.componentSubType == 'POLICY'"
  18                         (dndStart)="onDragStart($event, paletteElement)"
  19                         (drag)="onDraggableMoved($event)"
  20                         [dndEffectAllowed]="'copyMove'"
  21                         (mouseenter)="onMouseOver($event, paletteElement)"
  22                         (mouseleave)="onMouseOut(paletteElement)"
  23                         [attr.data-tests-id]="paletteElement.name">
  24                        <palette-element [paletteElement]="paletteElement"></palette-element>
  25                    </div>
  26                 </ng-container>
  27                 <ng-container *ngIf="(isViewOnly$ | async)">
  28                     <div *ngFor="let paletteElement of mapBySubCategory.value"
  29                         [attr.data-tests-id]="paletteElement.name">
  30                         <palette-element [paletteElement]="paletteElement"></palette-element>
  31                     </div>
  32                 </ng-container>
  33             </div>
  34         </sdc-accordion>
  35     </div>
  36 </div>
  37
  38 <div id="draggable_element" dndDropzone (dndDrop)="onDrop($event)" [dndAllowExternal]="true">
  39     <sdc-element-icon *ngIf="paletteDraggedElement" [iconName]="paletteDraggedElement.icon"
  40         [elementType]="paletteDraggedElement.componentSubType" [uncertified]="paletteDraggedElement.certifiedIconClass"></sdc-element-icon>
  41 </div>