fix(admin-ui): Replace all clr-dropdown with vdr-dropdown

Fixes #95

admin-ui/src/app/catalog/components/asset-gallery/asset-gallery.component.html

@@ -48,7 +48,7 @@
             <div clrTooltipTrigger class="trigger">
                 {{ 'catalog.assets-selected-count' | translate: { count: selection.length } }}
             </div>
-            <clr-tooltip-content clrPosition="top-left" clrSize="lg" *clrIfOpen>
+            <clr-tooltip-content vdrPosition="top-left" clrSize="lg">
                 <ul>
                     <li *ngFor="let asset of selection">{{ asset.name }}</li>
                 </ul>

admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html

@@ -85,24 +85,22 @@
             </ng-container>
 
             <div>
-                <clr-dropdown>
-                    <div clrDropdownTrigger>
-                        <button class="btn btn-outline">
-                            <clr-icon shape="plus"></clr-icon>
-                            {{ 'marketing.add-condition' | translate }}
-                        </button>
-                    </div>
-                    <clr-dropdown-menu clrPosition="top-right" *clrIfOpen>
+                <vdr-dropdown>
+                    <button class="btn btn-outline" vdrDropdownTrigger>
+                        <clr-icon shape="plus"></clr-icon>
+                        {{ 'marketing.add-condition' | translate }}
+                    </button>
+                    <vdr-dropdown-menu vdrPosition="bottom-left">
                         <button
                             *ngFor="let filter of allFilters"
                             type="button"
-                            clrDropdownItem
+                            vdrDropdownItem
                             (click)="addFilter(filter)"
                         >
                             {{ filter.description }}
                         </button>
-                    </clr-dropdown-menu>
-                </clr-dropdown>
+                    </vdr-dropdown-menu>
+                </vdr-dropdown>
             </div>
         </div>
         <div class="clr-col">

admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html

@@ -37,11 +37,11 @@
                     <clr-icon shape="drag-handle" size="24"></clr-icon>
                 </div>
             -->
-            <clr-dropdown>
-                <span class="trigger" clrDropdownTrigger>
+            <vdr-dropdown>
+                <span class="trigger" vdrDropdownTrigger>
                     <clr-icon shape="ellipsis-vertical"></clr-icon>
                 </span>
-                <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
+                <vdr-dropdown-menu vdrPosition="bottom-right">
                     <button
                         type="button"
                         class="dropdown-item"
@@ -70,8 +70,8 @@
                         <clr-icon shape="child-arrow"></clr-icon>
                         {{ item.path }}
                     </button>
-                </clr-dropdown-menu>
-            </clr-dropdown>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
         </div>
         <vdr-collection-tree-node
             [collectionTree]="collection"

admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html

@@ -106,22 +106,22 @@
                         </td>
                     </ng-container>
                     <td>
-                        <clr-dropdown>
-                            <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
+                        <vdr-dropdown>
+                            <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
                                 {{ 'common.actions' | translate }}
                                 <clr-icon shape="caret down"></clr-icon>
                             </button>
-                            <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
+                            <vdr-dropdown-menu vdrPosition="bottom-right">
                                 <button
                                     type="button"
                                     class="delete-button"
                                     (click)="deleteFacetValue(facet.values[i].id)"
-                                    clrDropdownItem
+                                    vdrDropdownItem
                                 >
                                     {{ 'common.delete' | translate }}
                                 </button>
-                            </clr-dropdown-menu>
-                        </clr-dropdown>
+                            </vdr-dropdown-menu>
+                        </vdr-dropdown>
                     </td>
                 </tr>
             </tbody>

admin-ui/src/app/catalog/components/facet-list/facet-list.component.html

@@ -58,22 +58,22 @@
             ></vdr-table-row-action>
         </td>
         <td class="right align-middle" [class.private]="facet.isPrivate">
-            <clr-dropdown>
-                <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
+            <vdr-dropdown>
+                <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
                     {{ 'common.actions' | translate }}
                     <clr-icon shape="caret down"></clr-icon>
                 </button>
-                <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
+                <vdr-dropdown-menu vdrPosition="bottom-right">
                     <button
                         type="button"
                         class="delete-button"
                         (click)="deleteFacet(facet.id)"
-                        clrDropdownItem
+                        vdrDropdownItem
                     >
                         {{ 'common.delete' | translate }}
                     </button>
-                </clr-dropdown-menu>
-            </clr-dropdown>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/catalog/components/generate-product-variants/generate-product-variants.component.html

@@ -1,17 +1,17 @@
-<clr-dropdown>
-    <button type="button" class="btn btn-primary" clrDropdownTrigger>
+<vdr-dropdown>
+    <button type="button" class="btn btn-primary" vdrDropdownTrigger>
         <clr-icon shape="add"></clr-icon>
         {{ 'catalog.generate-product-variants' | translate }}
         <clr-icon shape="caret down"></clr-icon>
     </button>
-    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-        <button type="button" clrDropdownItem (click)="generateProductVariants()">
+    <vdr-dropdown-menu vdrPosition="bottom-right">
+        <button type="button" vdrDropdownItem (click)="generateProductVariants()">
             {{ 'catalog.generate-variants-default-only' | translate }}
         </button>
-        <button type="button" clrDropdownItem (click)="startProductVariantsWizard()">
+        <button type="button" vdrDropdownItem (click)="startProductVariantsWizard()">
             {{ 'catalog.generate-variants-with-options' | translate }}
         </button>
-    </clr-dropdown-menu>
-</clr-dropdown>
+    </vdr-dropdown-menu>
+</vdr-dropdown>
 
 <vdr-product-variants-wizard #productVariantsWizard [product]="product"></vdr-product-variants-wizard>

admin-ui/src/app/catalog/components/product-assets/product-assets.component.html

@@ -45,34 +45,34 @@
 <ng-template #assetList>
     <div class="all-assets" [class.compact]="compact">
         <ng-container *ngFor="let asset of assets">
-            <clr-dropdown>
+            <vdr-dropdown>
                 <div
                     class="asset-thumb"
-                    clrDropdownTrigger
+                    vdrDropdownTrigger
                     [class.featured]="isFeatured(asset)"
                     [title]=""
                     tabindex="0"
                 >
                     <img [src]="asset.preview + '?preset=tiny'" />
                 </div>
-                <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
-                    <button type="button" clrDropdownItem (click)="previewAsset(asset)">
+                <vdr-dropdown-menu vdrPosition="bottom-right">
+                    <button type="button" vdrDropdownItem (click)="previewAsset(asset)">
                         {{ 'catalog.preview' | translate }}
                     </button>
                     <button
                         type="button"
                         [disabled]="isFeatured(asset)"
-                        clrDropdownItem
+                        vdrDropdownItem
                         (click)="setAsFeatured(asset)"
                     >
                         {{ 'catalog.set-as-featured-asset' | translate }}
                     </button>
                     <div class="dropdown-divider"></div>
-                    <button type="button" class="remove-asset" clrDropdownItem (click)="removeAsset(asset)">
+                    <button type="button" class="remove-asset" vdrDropdownItem (click)="removeAsset(asset)">
                         {{ 'catalog.remove-asset' | translate }}
                     </button>
-                </clr-dropdown-menu>
-            </clr-dropdown>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
         </ng-container>
     </div>
 </ng-template>

admin-ui/src/app/catalog/components/product-list/product-list.component.html

@@ -7,16 +7,16 @@
                 (searchTermChange)="setSearchTerm($event)"
                 (facetValueChange)="setFacetValueIds($event)"
             ></vdr-product-search-input>
-            <clr-dropdown class="search-settings-menu">
-                <button type="button" clrDropdownTrigger>
+            <vdr-dropdown class="search-settings-menu">
+                <button type="button" vdrDropdownTrigger>
                     <clr-icon shape="cog"></clr-icon>
                 </button>
-                <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
-                    <button type="button" clrDropdownItem (click)="rebuildSearchIndex()">
+                <vdr-dropdown-menu vdrPosition="bottom-right">
+                    <button type="button" vdrDropdownItem (click)="rebuildSearchIndex()">
                         {{ 'catalog.rebuild-search-index' | translate }}
                     </button>
-                </clr-dropdown-menu>
-            </clr-dropdown>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
         </div>
         <clr-checkbox-wrapper>
             <input type="checkbox" clrCheckbox [(ngModel)]="groupByProduct" />
@@ -70,22 +70,22 @@
             ></vdr-table-row-action>
         </td>
         <td class="right align-middle" [class.disabled]="!result.enabled">
-            <clr-dropdown>
-                <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
+            <vdr-dropdown>
+                <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
                     {{ 'common.actions' | translate }}
                     <clr-icon shape="caret down"></clr-icon>
                 </button>
-                <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
+                <vdr-dropdown-menu vdrPosition="bottom-right">
                     <button
                         type="button"
                         class="delete-button"
                         (click)="deleteProduct(result.productId)"
-                        clrDropdownItem
+                        vdrDropdownItem
                     >
                         {{ 'common.delete' | translate }}
                     </button>
-                </clr-dropdown-menu>
-            </clr-dropdown>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/catalog/components/product-list/product-list.component.scss

@@ -23,6 +23,12 @@
 }
 .search-settings-menu {
     margin: 0 12px;
+    > button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: $color-grey-500;
+    }
 }
 td.disabled {
     background-color: $color-grey-200;

admin-ui/src/app/core/components/ui-language-switcher/ui-language-switcher.component.html

@@ -1,8 +1,8 @@
-<clr-dropdown>
+<vdr-dropdown>
     <span class="user-name">{{ uiLanguage$ | async }}</span>
-    <span class="trigger" clrDropdownTrigger><clr-icon shape="caret down"></clr-icon></span>
-    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-        <button type="button" clrDropdownItem (click)="setLanguage('en')">EN</button>
-        <button type="button" clrDropdownItem (click)="setLanguage('de')">DE</button>
-    </clr-dropdown-menu>
-</clr-dropdown>
+    <span class="trigger" vdrDropdownTrigger><clr-icon shape="caret down"></clr-icon></span>
+    <vdr-dropdown-menu vdrPosition="bottom-right">
+        <button type="button" vdrDropdownItem (click)="setLanguage('en')">EN</button>
+        <button type="button" vdrDropdownItem (click)="setLanguage('de')">DE</button>
+    </vdr-dropdown-menu>
+</vdr-dropdown>

admin-ui/src/app/core/components/ui-language-switcher/ui-language-switcher.component.ts

@@ -24,7 +24,7 @@ export class UiLanguageSwitcherComponent implements OnInit {
         );
     }
 
-    setLanguage(languageCode: LanguageCode) {
-        this.dataService.client.setUiLanguage(languageCode).subscribe();
+    setLanguage(languageCode: string) {
+        this.dataService.client.setUiLanguage(languageCode as LanguageCode).subscribe();
     }
 }

admin-ui/src/app/core/components/user-menu/user-menu.component.html

@@ -1,12 +1,12 @@
-<clr-dropdown>
-    <button class="btn btn-link trigger" clrDropdownTrigger>
+<vdr-dropdown>
+    <button class="btn btn-link trigger" vdrDropdownTrigger>
         <span class="user-name">{{ userName }}</span>
         <clr-icon shape="user" size="24"></clr-icon>
         <clr-icon shape="caret down"></clr-icon>
     </button>
-    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-        <button type="button" clrDropdownItem (click)="logOut.emit()">
+    <vdr-dropdown-menu vdrPosition="bottom-right">
+        <button type="button" vdrDropdownItem (click)="logOut.emit()">
             {{ 'common.log-out' | translate }}
         </button>
-    </clr-dropdown-menu>
-</clr-dropdown>
+    </vdr-dropdown-menu>
+</vdr-dropdown>

admin-ui/src/app/customer/components/address-card/address-card.component.html

@@ -80,14 +80,14 @@
         <button class="btn btn-sm btn-link" *ngIf="!editing" (click)="editing = true">
             {{ 'common.edit' | translate }}
         </button>
-        <clr-dropdown>
-            <button type="button" class="btn btn-sm btn-link" clrDropdownTrigger>
+        <vdr-dropdown>
+            <button type="button" class="btn btn-sm btn-link" vdrDropdownTrigger>
                 {{ 'common.more' | translate }}
                 <clr-icon shape="caret down"></clr-icon>
             </button>
-            <clr-dropdown-menu *clrIfOpen>
+            <vdr-dropdown-menu>
                 <button
-                    clrDropdownItem
+                    vdrDropdownItem
                     class="button"
                     [disabled]="isDefaultShipping || editing"
                     (click)="setAsDefaultShippingAddress()"
@@ -95,14 +95,14 @@
                     {{ 'customer.set-as-default-shipping-address' | translate }}
                 </button>
                 <button
-                    clrDropdownItem
+                    vdrDropdownItem
                     class="button"
                     [disabled]="isDefaultBilling || editing"
                     (click)="setAsDefaultBillingAddress()"
                 >
                     {{ 'customer.set-as-default-billing-address' | translate }}
                 </button>
-            </clr-dropdown-menu>
-        </clr-dropdown>
+            </vdr-dropdown-menu>
+        </vdr-dropdown>
     </div>
 </div>

admin-ui/src/app/marketing/components/promotion-detail/promotion-detail.component.html

@@ -37,24 +37,22 @@
             </ng-container>
 
             <div>
-                <clr-dropdown>
-                    <div clrDropdownTrigger>
-                        <button class="btn btn-outline">
-                            <clr-icon shape="plus"></clr-icon>
-                            {{ 'marketing.add-condition' | translate }}
-                        </button>
-                    </div>
-                    <clr-dropdown-menu clrPosition="top-right" *clrIfOpen>
+                <vdr-dropdown>
+                    <button class="btn btn-outline" vdrDropdownTrigger>
+                        <clr-icon shape="plus"></clr-icon>
+                        {{ 'marketing.add-condition' | translate }}
+                    </button>
+                    <vdr-dropdown-menu vdrPosition="bottom-left">
                         <button
                             *ngFor="let condition of getAvailableConditions()"
                             type="button"
-                            clrDropdownItem
+                            vdrDropdownItem
                             (click)="addCondition(condition)"
                         >
                             {{ condition.code }}
                         </button>
-                    </clr-dropdown-menu>
-                </clr-dropdown>
+                    </vdr-dropdown-menu>
+                </vdr-dropdown>
             </div>
         </div>
         <div class="clr-col" formArrayName="actions">
@@ -68,24 +66,22 @@
                 [activeChannel]="activeChannel$ | async"
             ></vdr-configurable-input>
             <div>
-                <clr-dropdown>
-                    <div clrDropdownTrigger>
-                        <button class="btn btn-outline">
-                            <clr-icon shape="plus"></clr-icon>
-                            {{ 'marketing.add-action' | translate }}
-                        </button>
-                    </div>
-                    <clr-dropdown-menu clrPosition="top-right" *clrIfOpen>
+                <vdr-dropdown>
+                    <button class="btn btn-outline" vdrDropdownTrigger>
+                        <clr-icon shape="plus"></clr-icon>
+                        {{ 'marketing.add-action' | translate }}
+                    </button>
+                    <vdr-dropdown-menu vdrPosition="bottom-left">
                         <button
                             *ngFor="let action of getAvailableActions()"
                             type="button"
-                            clrDropdownItem
+                            vdrDropdownItem
                             (click)="addAction(action)"
                         >
                             {{ action.code }}
                         </button>
-                    </clr-dropdown-menu>
-                </clr-dropdown>
+                    </vdr-dropdown-menu>
+                </vdr-dropdown>
             </div>
         </div>
     </div>

admin-ui/src/app/marketing/components/promotion-detail/promotion-detail.component.ts

@@ -35,8 +35,8 @@ export class PromotionDetailComponent extends BaseDetailComponent<Promotion.Frag
     facets$: Observable<FacetWithValues.Fragment[]>;
     activeChannel$: Observable<GetActiveChannel.ActiveChannel>;
 
-    private allConditions: ConfigurableOperation[];
-    private allActions: ConfigurableOperation[];
+    private allConditions: ConfigurableOperation[] = [];
+    private allActions: ConfigurableOperation[] = [];
 
     constructor(
         router: Router,

admin-ui/src/app/settings/components/country-list/country-list.component.html

@@ -51,22 +51,22 @@
             ></vdr-table-row-action>
         </td>
         <td class="right align-middle">
-            <clr-dropdown>
-                <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
+            <vdr-dropdown>
+                <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
                     {{ 'common.actions' | translate }}
                     <clr-icon shape="caret down"></clr-icon>
                 </button>
-                <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
+                <vdr-dropdown-menu vdrPosition="bottom-right">
                     <button
                         type="button"
                         class="delete-button"
                         (click)="deleteCountry(country.id)"
-                        clrDropdownItem
+                        vdrDropdownItem
                     >
                         {{ 'common.delete' | translate }}
                     </button>
-                </clr-dropdown-menu>
-            </clr-dropdown>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
         </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/settings/components/shipping-method-detail/shipping-method-detail.component.html

@@ -41,24 +41,22 @@
                 formControlName="checker"
             ></vdr-configurable-input>
             <div *ngIf="!selectedChecker">
-                <clr-dropdown>
-                    <div clrDropdownTrigger>
-                        <button class="btn btn-outline">
-                            <clr-icon shape="plus"></clr-icon>
-                            {{ 'common.select' | translate }}
-                        </button>
-                    </div>
-                    <clr-dropdown-menu clrPosition="top-right" *clrIfOpen>
+                <vdr-dropdown>
+                    <button class="btn btn-outline" vdrDropdownTrigger>
+                        <clr-icon shape="plus"></clr-icon>
+                        {{ 'common.select' | translate }}
+                    </button>
+                    <vdr-dropdown-menu vdrPosition="bottom-left">
                         <button
                             *ngFor="let checker of checkers"
                             type="button"
-                            clrDropdownItem
+                            vdrDropdownItem
                             (click)="selectedChecker = checker"
                         >
                             {{ checker.description }}
                         </button>
-                    </clr-dropdown-menu>
-                </clr-dropdown>
+                    </vdr-dropdown-menu>
+                </vdr-dropdown>
             </div>
         </div>
         <div class="clr-col">
@@ -71,24 +69,22 @@
                 formControlName="calculator"
             ></vdr-configurable-input>
             <div *ngIf="!selectedCalculator">
-                <clr-dropdown>
-                    <div clrDropdownTrigger>
-                        <button class="btn btn-outline">
-                            <clr-icon shape="plus"></clr-icon>
-                            {{ 'common.select' | translate }}
-                        </button>
-                    </div>
-                    <clr-dropdown-menu clrPosition="top-right" *clrIfOpen>
+                <vdr-dropdown>
+                    <button class="btn btn-outline" vdrDropdownTrigger>
+                        <clr-icon shape="plus"></clr-icon>
+                        {{ 'common.select' | translate }}
+                    </button>
+                    <vdr-dropdown-menu vdrPosition="bottom-left">
                         <button
                             *ngFor="let calculator of calculators"
                             type="button"
-                            clrDropdownItem
+                            vdrDropdownItem
                             (click)="selectedCalculator = calculator"
                         >
                             {{ calculator.description }}
                         </button>
-                    </clr-dropdown-menu>
-                </clr-dropdown>
+                    </vdr-dropdown-menu>
+                </vdr-dropdown>
             </div>
         </div>
     </div>

admin-ui/src/app/shared/components/form-field/form-field.component.html

@@ -3,7 +3,7 @@
         {{ label }}
         <clr-tooltip *ngIf="tooltip">
             <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
-            <clr-tooltip-content clrPosition="top-right" clrSize="lg" *clrIfOpen>
+            <clr-tooltip-content vdrPosition="top-right" clrSize="lg">
                 <span>{{ tooltip }}</span>
             </clr-tooltip-content>
         </clr-tooltip>

admin-ui/src/app/shared/components/language-selector/language-selector.component.html

@@ -1,19 +1,19 @@
 <ng-container *ngIf="1 < availableLanguageCodes?.length">
-    <clr-dropdown>
-        <button type="button" class="btn btn-sm btn-link" clrDropdownTrigger [disabled]="disabled">
+    <vdr-dropdown>
+        <button type="button" class="btn btn-sm btn-link" vdrDropdownTrigger [disabled]="disabled">
             <clr-icon shape="world"></clr-icon>
             {{ 'common.language' | translate }}: {{ 'lang.' + currentLanguageCode | translate | uppercase }}
             <clr-icon shape="caret down"></clr-icon>
         </button>
-        <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
+        <vdr-dropdown-menu vdrPosition="bottom-right">
             <button
                 type="button"
                 *ngFor="let code of availableLanguageCodes"
                 (click)="languageCodeChange.emit(code)"
-                clrDropdownItem
+                vdrDropdownItem
             >
                 {{ 'lang.' + code | translate }}
             </button>
-        </clr-dropdown-menu>
-    </clr-dropdown>
+        </vdr-dropdown-menu>
+    </vdr-dropdown>
 </ng-container>