1 <div class="composition-palette-component">
2 <div class="palette-elements-count">Elements
3 <span class="palette-elements-count-value">{{numberOfElements}}</span>
6 <sdc-filter-bar placeholder="Search..." (valueChange)="onSearchChanged($event)" testId="searchAsset"></sdc-filter-bar>
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 [attr.data-tests-id]="paletteElement.name">
22 <palette-element [paletteElement]="paletteElement"></palette-element>
25 <ng-container *ngIf="(isViewOnly$ | async)">
26 <div *ngFor="let paletteElement of mapBySubCategory.value"
27 [attr.data-tests-id]="paletteElement.name">
28 <palette-element [paletteElement]="paletteElement"></palette-element>
36 <div id="draggable_element" dndDropzone (dndDrop)="onDrop($event)" [dndAllowExternal]="true">
37 <sdc-element-icon *ngIf="paletteDraggedElement" [iconName]="paletteDraggedElement.icon"
38 [elementType]="paletteDraggedElement.componentSubType" [uncertified]="paletteDraggedElement.certifiedIconClass"></sdc-element-icon>