@vendure/admin-ui 1.8.0 → 1.8.1

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License
+
+Copyright (c) 2018 Michael Bromley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/{package/bundles → bundles}/vendure-admin-ui-catalog.umd.js

@@ -968,7 +968,7 @@
     CollectionListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-collection-list',
-                    template: "<vdr-action-bar>\n    <vdr-ab-left>\n        <div class=\"\">\n            <input\n                type=\"text\"\n                name=\"searchTerm\"\n                [formControl]=\"filterTermControl\"\n                [placeholder]=\"'catalog.filter-by-name' | translate\"\n                class=\"clr-input search-input\"\n            />\n            <div class=\"flex center\">\n                <clr-toggle-wrapper\n                    class=\"expand-all-toggle mt2\"\n                >\n                    <input type=\"checkbox\" clrToggle [(ngModel)]=\"expandAll\" (change)=\"toggleExpandAll()\" />\n                    <label>\n                        {{ 'catalog.expand-all-collections' | translate }}\n                    </label>\n                </clr-toggle-wrapper>\n                <vdr-language-selector\n                    class=\"mt2\"\n                    [availableLanguageCodes]=\"availableLanguages$ | async\"\n                    [currentLanguageCode]=\"contentLanguage$ | async\"\n                    (languageCodeChange)=\"setLanguage($event)\"\n                ></vdr-language-selector>\n            </div>\n        </div>\n    </vdr-ab-left>\n    <vdr-ab-right>\n        <vdr-action-bar-items locationId=\"collection-list\"></vdr-action-bar-items>\n        <a\n            class=\"btn btn-primary\"\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\n            [routerLink]=\"['./create']\"\n        >\n            <clr-icon shape=\"plus\"></clr-icon>\n            {{ 'catalog.create-new-collection' | translate }}\n        </a>\n    </vdr-ab-right>\n</vdr-action-bar>\n<div class=\"bulk-select-controls\">\n    <input\n        type=\"checkbox\"\n        clrCheckbox\n        [checked]=\"selectionManager.areAllCurrentItemsSelected()\"\n        (click)=\"selectionManager.toggleSelectAll()\"\n    />\n    <vdr-bulk-action-menu\n        class=\"ml2\"\n        locationId=\"collection-list\"\n        [hostComponent]=\"this\"\n        [selectionManager]=\"selectionManager\"\n    ></vdr-bulk-action-menu>\n</div>\n<div class=\"collection-wrapper\">\n    <vdr-collection-tree\n        [collections]=\"items$ | async\"\n        [activeCollectionId]=\"activeCollectionId$ | async\"\n        [expandAll]=\"expandAll\"\n        [expandedIds]=\"expandedIds\"\n        [selectionManager]=\"selectionManager\"\n        (rearrange)=\"onRearrange($event)\"\n        (deleteCollection)=\"deleteCollection($event)\"\n    ></vdr-collection-tree>\n\n    <div class=\"collection-contents\" [class.expanded]=\"activeCollectionId$ | async\">\n        <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\">\n            <ng-template let-count>\n                <div class=\"collection-title\">\n                    {{ activeCollectionTitle$ | async }} ({{\n                        'common.results-count' | translate: { count: count }\n                    }})\n                </div>\n                <button type=\"button\" class=\"close-button\" (click)=\"closeContents()\">\n                    <clr-icon shape=\"close\"></clr-icon>\n                </button>\n            </ng-template>\n        </vdr-collection-contents>\n    </div>\n</div>\n",
+                    template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"\">\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"filterTermControl\"\r\n                [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                class=\"clr-input search-input\"\r\n            />\r\n            <div class=\"flex center\">\r\n                <clr-toggle-wrapper\r\n                    class=\"expand-all-toggle mt2\"\r\n                >\r\n                    <input type=\"checkbox\" clrToggle [(ngModel)]=\"expandAll\" (change)=\"toggleExpandAll()\" />\r\n                    <label>\r\n                        {{ 'catalog.expand-all-collections' | translate }}\r\n                    </label>\r\n                </clr-toggle-wrapper>\r\n                <vdr-language-selector\r\n                    class=\"mt2\"\r\n                    [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                    [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                    (languageCodeChange)=\"setLanguage($event)\"\r\n                ></vdr-language-selector>\r\n            </div>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"collection-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-collection' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<div class=\"bulk-select-controls\">\r\n    <input\r\n        type=\"checkbox\"\r\n        clrCheckbox\r\n        [checked]=\"selectionManager.areAllCurrentItemsSelected()\"\r\n        (click)=\"selectionManager.toggleSelectAll()\"\r\n    />\r\n    <vdr-bulk-action-menu\r\n        class=\"ml2\"\r\n        locationId=\"collection-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n</div>\r\n<div class=\"collection-wrapper\">\r\n    <vdr-collection-tree\r\n        [collections]=\"items$ | async\"\r\n        [activeCollectionId]=\"activeCollectionId$ | async\"\r\n        [expandAll]=\"expandAll\"\r\n        [expandedIds]=\"expandedIds\"\r\n        [selectionManager]=\"selectionManager\"\r\n        (rearrange)=\"onRearrange($event)\"\r\n        (deleteCollection)=\"deleteCollection($event)\"\r\n    ></vdr-collection-tree>\r\n\r\n    <div class=\"collection-contents\" [class.expanded]=\"activeCollectionId$ | async\">\r\n        <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\">\r\n            <ng-template let-count>\r\n                <div class=\"collection-title\">\r\n                    {{ activeCollectionTitle$ | async }} ({{\r\n                        'common.results-count' | translate: { count: count }\r\n                    }})\r\n                </div>\r\n                <button type=\"button\" class=\"close-button\" (click)=\"closeContents()\">\r\n                    <clr-icon shape=\"close\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n        </vdr-collection-contents>\r\n    </div>\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{height:100%;display:flex;flex-direction:column}.bulk-select-controls{min-height:36px;padding-left:14px;display:flex;align-items:center;border-bottom:1px solid var(--color-component-border-200)}.expand-all-toggle{display:block}.collection-wrapper{display:flex;height:calc(100% - 50px)}.collection-wrapper vdr-collection-tree{flex:1;height:100%;overflow:auto}.collection-wrapper .collection-contents{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.collection-wrapper .collection-contents.expanded{width:30vw;visibility:visible;opacity:1;padding-left:12px}.collection-wrapper .collection-contents .close-button{margin:0;background:none;border:none;cursor:pointer}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}\n"]
                 },] }
@@ -1448,7 +1448,7 @@
     FacetListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-facet-list',
-                    template: "<vdr-action-bar>\n    <vdr-ab-left>\n        <div class=\"\">\n            <input\n                type=\"text\"\n                name=\"searchTerm\"\n                [formControl]=\"filterTermControl\"\n                [placeholder]=\"'catalog.filter-by-name' | translate\"\n                class=\"clr-input search-input\"\n            />\n            <div>\n                <vdr-language-selector\n                    [availableLanguageCodes]=\"availableLanguages$ | async\"\n                    [currentLanguageCode]=\"contentLanguage$ | async\"\n                    (languageCodeChange)=\"setLanguage($event)\"\n                ></vdr-language-selector>\n            </div>\n        </div>\n    </vdr-ab-left>\n    <vdr-ab-right>\n        <vdr-action-bar-items locationId=\"facet-list\"></vdr-action-bar-items>\n        <a\n            class=\"btn btn-primary\"\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\n            [routerLink]=\"['./create']\"\n        >\n            <clr-icon shape=\"plus\"></clr-icon>\n            {{ 'catalog.create-new-facet' | translate }}\n        </a>\n    </vdr-ab-right>\n</vdr-action-bar>\n\n<vdr-data-table\n    [items]=\"items$ | async\"\n    [itemsPerPage]=\"itemsPerPage$ | async\"\n    [totalItems]=\"totalItems$ | async\"\n    [currentPage]=\"currentPage$ | async\"\n    (pageChange)=\"setPageNumber($event)\"\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\n    [selectionManager]=\"selectionManager\"\n>\n    <vdr-bulk-action-menu\n        locationId=\"facet-list\"\n        [hostComponent]=\"this\"\n        [selectionManager]=\"selectionManager\"\n    ></vdr-bulk-action-menu>\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\n    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>\n    <vdr-dt-column [expand]=\"true\">{{ 'catalog.values' | translate }}</vdr-dt-column>\n    <vdr-dt-column>{{ 'catalog.visibility' | translate }}</vdr-dt-column>\n    <vdr-dt-column></vdr-dt-column>\n    <vdr-dt-column></vdr-dt-column>\n    <ng-template let-facet=\"item\">\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.code }}</td>\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.name }}</td>\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\n            <vdr-facet-value-chip\n                *ngFor=\"let value of facet.values | slice: 0:displayLimit[facet.id] || 3\"\n                [facetValue]=\"value\"\n                [removable]=\"false\"\n                [displayFacetName]=\"false\"\n            ></vdr-facet-value-chip>\n            <button\n                class=\"btn btn-sm btn-secondary btn-icon\"\n                *ngIf=\"facet.values.length > initialLimit\"\n                (click)=\"toggleDisplayLimit(facet)\"\n            >\n                <ng-container *ngIf=\"(displayLimit[facet.id] || 0) < facet.values.length; else collapse\">\n                    <clr-icon shape=\"plus\"></clr-icon>\n                    {{ facet.values.length - initialLimit }}\n                </ng-container>\n                <ng-template #collapse>\n                    <clr-icon shape=\"minus\"></clr-icon>\n                </ng-template>\n            </button>\n        </td>\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\n            <vdr-chip>\n                <ng-container *ngIf=\"!facet.isPrivate; else private\">{{\n                    'catalog.public' | translate\n                }}</ng-container>\n                <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\n            </vdr-chip>\n        </td>\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\n            <vdr-table-row-action\n                iconShape=\"edit\"\n                [label]=\"'common.edit' | translate\"\n                [linkTo]=\"['./', facet.id]\"\n            ></vdr-table-row-action>\n        </td>\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\n            <vdr-dropdown>\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\n                    {{ 'common.actions' | translate }}\n                    <clr-icon shape=\"caret down\"></clr-icon>\n                </button>\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                    <button\n                        type=\"button\"\n                        class=\"delete-button\"\n                        (click)=\"deleteFacet(facet.id)\"\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteFacet'] | hasPermission)\"\n                        vdrDropdownItem\n                    >\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                        {{ 'common.delete' | translate }}\n                    </button>\n                </vdr-dropdown-menu>\n            </vdr-dropdown>\n        </td>\n    </ng-template>\n</vdr-data-table>\n",
+                    template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"\">\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"filterTermControl\"\r\n                [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                class=\"clr-input search-input\"\r\n            />\r\n            <div>\r\n                <vdr-language-selector\r\n                    [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                    [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                    (languageCodeChange)=\"setLanguage($event)\"\r\n                ></vdr-language-selector>\r\n            </div>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"facet-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-facet' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    [selectionManager]=\"selectionManager\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"facet-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'catalog.values' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'catalog.visibility' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-facet=\"item\">\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.code }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.name }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-facet-value-chip\r\n                *ngFor=\"let value of facet.values | slice: 0:displayLimit[facet.id] || 3\"\r\n                [facetValue]=\"value\"\r\n                [removable]=\"false\"\r\n                [displayFacetName]=\"false\"\r\n            ></vdr-facet-value-chip>\r\n            <button\r\n                class=\"btn btn-sm btn-secondary btn-icon\"\r\n                *ngIf=\"facet.values.length > initialLimit\"\r\n                (click)=\"toggleDisplayLimit(facet)\"\r\n            >\r\n                <ng-container *ngIf=\"(displayLimit[facet.id] || 0) < facet.values.length; else collapse\">\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ facet.values.length - initialLimit }}\r\n                </ng-container>\r\n                <ng-template #collapse>\r\n                    <clr-icon shape=\"minus\"></clr-icon>\r\n                </ng-template>\r\n            </button>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-chip>\r\n                <ng-container *ngIf=\"!facet.isPrivate; else private\">{{\r\n                    'catalog.public' | translate\r\n                }}</ng-container>\r\n                <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n            </vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', facet.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteFacet(facet.id)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteFacet'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
                     styles: ["td.private{background-color:var(--color-component-bg-200)}\n"]
                 },] }
     ];
@@ -2636,7 +2636,7 @@
     ProductListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-products-list',
-                    template: "<vdr-action-bar>\n    <vdr-ab-left [grow]=\"true\">\n        <div class=\"search-form\">\n            <vdr-product-search-input\n                #productSearchInputComponent\n                [facetValueResults]=\"facetValues$ | async\"\n                (searchTermChange)=\"setSearchTerm($event)\"\n                (facetValueChange)=\"setFacetValueIds($event)\"\n            ></vdr-product-search-input>\n            <vdr-dropdown class=\"search-settings-menu mr3\">\n                <button\n                    type=\"button\"\n                    class=\"icon-button search-index-button\"\n                    [title]=\"\n                        (pendingSearchIndexUpdates\n                            ? 'catalog.pending-search-index-updates'\n                            : 'catalog.search-index-controls'\n                        ) | translate\n                    \"\n                    vdrDropdownTrigger\n                >\n                    <clr-icon shape=\"cog\"></clr-icon>\n                    <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"></vdr-status-badge>\n                </button>\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                    <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\n                    <ng-container *ngIf=\"pendingSearchIndexUpdates\">\n                        <button\n                            type=\"button\"\n                            class=\"run-updates-button\"\n                            vdrDropdownItem\n                            (click)=\"runPendingSearchIndexUpdates()\"\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\n                        >\n                            <vdr-status-badge type=\"warning\"></vdr-status-badge>\n                            {{\n                                'catalog.run-pending-search-index-updates'\n                                    | translate: { count: pendingSearchIndexUpdates }\n                            }}\n                        </button>\n                        <div class=\"dropdown-divider\"></div>\n                    </ng-container>\n                    <button\n                        type=\"button\"\n                        vdrDropdownItem\n                        (click)=\"rebuildSearchIndex()\"\n                        [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\n                    >\n                        {{ 'catalog.rebuild-search-index' | translate }}\n                    </button>\n                </vdr-dropdown-menu>\n            </vdr-dropdown>\n        </div>\n        <div class=\"flex wrap\">\n            <clr-toggle-wrapper class=\"mt2\">\n                <input type=\"checkbox\" clrToggle [(ngModel)]=\"groupByProduct\" (ngModelChange)=\"refresh()\" />\n                <label>\n                    {{ 'catalog.group-by-product' | translate }}\n                </label>\n            </clr-toggle-wrapper>\n            <vdr-language-selector\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\n                [currentLanguageCode]=\"contentLanguage$ | async\"\n                (languageCodeChange)=\"setLanguage($event)\"\n            ></vdr-language-selector>\n        </div>\n    </vdr-ab-left>\n    <vdr-ab-right>\n        <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\n        <a\n            class=\"btn btn-primary\"\n            [routerLink]=\"['./create']\"\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\n        >\n            <clr-icon shape=\"plus\"></clr-icon>\n            {{ 'catalog.create-new-product' | translate }}\n        </a>\n    </vdr-ab-right>\n</vdr-action-bar>\n\n<vdr-data-table\n    [items]=\"items$ | async\"\n    [itemsPerPage]=\"itemsPerPage$ | async\"\n    [totalItems]=\"totalItems$ | async\"\n    [currentPage]=\"currentPage$ | async\"\n    (pageChange)=\"setPageNumber($event)\"\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\n    [selectionManager]=\"selectionManager\"\n>\n    <vdr-bulk-action-menu\n        locationId=\"product-list\"\n        [hostComponent]=\"this\"\n        [selectionManager]=\"selectionManager\"\n    ></vdr-bulk-action-menu>\n    <vdr-dt-column> </vdr-dt-column>\n    <vdr-dt-column></vdr-dt-column>\n    <vdr-dt-column></vdr-dt-column>\n    <vdr-dt-column></vdr-dt-column>\n    <ng-template let-result=\"item\">\n        <td class=\"left align-middle image-col\" [class.disabled]=\"!result.enabled\">\n            <div class=\"image-placeholder\">\n                <img\n                    *ngIf=\"\n                        groupByProduct\n                            ? result.productAsset\n                            : result.productVariantAsset || result.productAsset as asset;\n                        else imagePlaceholder\n                    \"\n                    [src]=\"asset | assetPreview: 'tiny'\"\n                />\n                <ng-template #imagePlaceholder>\n                    <div class=\"placeholder\">\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n                    </div>\n                </ng-template>\n            </div>\n        </td>\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\n            <div>{{ groupByProduct ? result.productName : result.productVariantName }}</div>\n            <div *ngIf=\"!groupByProduct\" class=\"sku\">{{ result.sku }}</div>\n        </td>\n        <td class=\"align-middle\" [class.disabled]=\"!result.enabled\">\n            <vdr-chip *ngIf=\"!result.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\n        </td>\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\n            <vdr-table-row-action\n                class=\"edit-button\"\n                iconShape=\"edit\"\n                [label]=\"'common.edit' | translate\"\n                [linkTo]=\"['./', result.productId]\"\n            ></vdr-table-row-action>\n            <vdr-dropdown>\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\n                    {{ 'common.actions' | translate }}\n                    <clr-icon shape=\"caret down\"></clr-icon>\n                </button>\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                    <button\n                        type=\"button\"\n                        class=\"delete-button\"\n                        (click)=\"deleteProduct(result.productId)\"\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteProduct'] | hasPermission)\"\n                        vdrDropdownItem\n                    >\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                        {{ 'common.delete' | translate }}\n                    </button>\n                </vdr-dropdown-menu>\n            </vdr-dropdown>\n        </td>\n    </ng-template>\n</vdr-data-table>\n",
+                    template: "<vdr-action-bar>\r\n    <vdr-ab-left [grow]=\"true\">\r\n        <div class=\"search-form\">\r\n            <vdr-product-search-input\r\n                #productSearchInputComponent\r\n                [facetValueResults]=\"facetValues$ | async\"\r\n                (searchTermChange)=\"setSearchTerm($event)\"\r\n                (facetValueChange)=\"setFacetValueIds($event)\"\r\n            ></vdr-product-search-input>\r\n            <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"icon-button search-index-button\"\r\n                    [title]=\"\r\n                        (pendingSearchIndexUpdates\r\n                            ? 'catalog.pending-search-index-updates'\r\n                            : 'catalog.search-index-controls'\r\n                        ) | translate\r\n                    \"\r\n                    vdrDropdownTrigger\r\n                >\r\n                    <clr-icon shape=\"cog\"></clr-icon>\r\n                    <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"></vdr-status-badge>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                    <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"run-updates-button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"runPendingSearchIndexUpdates()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            <vdr-status-badge type=\"warning\"></vdr-status-badge>\r\n                            {{\r\n                                'catalog.run-pending-search-index-updates'\r\n                                    | translate: { count: pendingSearchIndexUpdates }\r\n                            }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"rebuildSearchIndex()\"\r\n                        [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                    >\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <div class=\"flex wrap\">\r\n            <clr-toggle-wrapper class=\"mt2\">\r\n                <input type=\"checkbox\" clrToggle [(ngModel)]=\"groupByProduct\" (ngModelChange)=\"refresh()\" />\r\n                <label>\r\n                    {{ 'catalog.group-by-product' | translate }}\r\n                </label>\r\n            </clr-toggle-wrapper>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            [routerLink]=\"['./create']\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-product' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    [selectionManager]=\"selectionManager\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt-column> </vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-result=\"item\">\r\n        <td class=\"left align-middle image-col\" [class.disabled]=\"!result.enabled\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"\r\n                        groupByProduct\r\n                            ? result.productAsset\r\n                            : result.productVariantAsset || result.productAsset as asset;\r\n                        else imagePlaceholder\r\n                    \"\r\n                    [src]=\"asset | assetPreview: 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <div>{{ groupByProduct ? result.productName : result.productVariantName }}</div>\r\n            <div *ngIf=\"!groupByProduct\" class=\"sku\">{{ result.sku }}</div>\r\n        </td>\r\n        <td class=\"align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-chip *ngIf=\"!result.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-table-row-action\r\n                class=\"edit-button\"\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', result.productId]\"\r\n            ></vdr-table-row-action>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteProduct(result.productId)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteProduct'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
                     styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}.sku{color:var(--color-text-300)}\n"]
                 },] }
     ];