@snabcentr/client-ui 0.11.2 → 0.11.3

package/esm2020/catalog/categories-list/sc-categories-list.component.mjs

@@ -4,6 +4,7 @@ import { TUI_IS_MOBILE } from '@taiga-ui/cdk';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@taiga-ui/core";
+import * as i3 from "@taiga-ui/cdk";
 /**
  * Компонент списка категорий.
  */
@@ -34,10 +35,10 @@ export class ScCategoriesListComponent {
     }
 }
 ScCategoriesListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoriesListComponent, deps: [{ token: SC_URLS }], target: i0.ɵɵFactoryTarget.Component });
-ScCategoriesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoriesListComponent, selector: "sc-categories-list", inputs: { categories: "categories" }, outputs: { clickCategoryEvent: "clickCategoryEvent" }, ngImport: i0, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button\n            *ngFor=\"let item of $any(categories)\"\n            class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n            (click)=\"clickCategoryEvent.emit(item)\"\n        >\n            <img *ngIf=\"item.properties?.image\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div class=\"flex grow truncate\">\n                <p class=\"text-base font-bold truncate\">{{ item.name }}</p>\n                <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-sm mr-auto\"></tui-svg>\n            </div>\n            <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150\"></tui-svg>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *tuiRepeatTimes=\"isMobile ? 3 : 6\"\n        class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-base-05 duration-150\"\n    >\n        <div class=\"w-8 h-8 tui-skeleton\"></div>\n        <div class=\"h-4 grow tui-skeleton\"></div>\n        <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150  tui-skeleton\"></tui-svg>\n    </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScCategoriesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoriesListComponent, selector: "sc-categories-list", inputs: { categories: "categories" }, outputs: { clickCategoryEvent: "clickCategoryEvent" }, ngImport: i0, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button\n            *ngFor=\"let item of $any(categories)\"\n            class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n            (click)=\"clickCategoryEvent.emit(item)\"\n        >\n            <img *ngIf=\"item.properties?.image\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div class=\"flex grow truncate\">\n                <p class=\"text-base font-bold truncate\">{{ item.name }}</p>\n                <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-sm mr-auto\"></tui-svg>\n            </div>\n            <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150\"></tui-svg>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *tuiRepeatTimes=\"let index of isMobile ? 3 : 6\"\n        class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-base-05 duration-150\"\n    >\n        <div class=\"w-8 h-8 tui-skeleton\"></div>\n        <div class=\"h-4 grow tui-skeleton\"></div>\n        <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150  tui-skeleton\"></tui-svg>\n    </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i3.TuiRepeatTimesDirective, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoriesListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-categories-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button\n            *ngFor=\"let item of $any(categories)\"\n            class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n            (click)=\"clickCategoryEvent.emit(item)\"\n        >\n            <img *ngIf=\"item.properties?.image\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div class=\"flex grow truncate\">\n                <p class=\"text-base font-bold truncate\">{{ item.name }}</p>\n                <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-sm mr-auto\"></tui-svg>\n            </div>\n            <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150\"></tui-svg>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *tuiRepeatTimes=\"isMobile ? 3 : 6\"\n        class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-base-05 duration-150\"\n    >\n        <div class=\"w-8 h-8 tui-skeleton\"></div>\n        <div class=\"h-4 grow tui-skeleton\"></div>\n        <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150  tui-skeleton\"></tui-svg>\n    </button>\n</ng-template>\n" }]
+            args: [{ selector: 'sc-categories-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button\n            *ngFor=\"let item of $any(categories)\"\n            class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n            (click)=\"clickCategoryEvent.emit(item)\"\n        >\n            <img *ngIf=\"item.properties?.image\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div class=\"flex grow truncate\">\n                <p class=\"text-base font-bold truncate\">{{ item.name }}</p>\n                <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-sm mr-auto\"></tui-svg>\n            </div>\n            <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150\"></tui-svg>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *tuiRepeatTimes=\"let index of isMobile ? 3 : 6\"\n        class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-base-05 duration-150\"\n    >\n        <div class=\"w-8 h-8 tui-skeleton\"></div>\n        <div class=\"h-4 grow tui-skeleton\"></div>\n        <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150  tui-skeleton\"></tui-svg>\n    </button>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SC_URLS]
@@ -46,4 +47,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], clickCategoryEvent: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2MtY2F0ZWdvcmllcy1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NsaWVudC11aS9jYXRhbG9nL2NhdGVnb3JpZXMtbGlzdC9zYy1jYXRlZ29yaWVzLWxpc3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2xpZW50LXVpL2NhdGFsb2cvY2F0ZWdvcmllcy1saXN0L3NjLWNhdGVnb3JpZXMtbGlzdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEgsT0FBTyxFQUFFLE9BQU8sRUFBVyxNQUFNLHdCQUF3QixDQUFDO0FBQzFELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFFOUM7O0dBRUc7QUFNSCxNQUFNLE9BQU8seUJBQXlCO0lBa0JsQzs7OztPQUlHO0lBQ0gsWUFBcUQsSUFBYTtRQUFiLFNBQUksR0FBSixJQUFJLENBQVM7UUFoQmxFOztXQUVHO1FBQ2EsYUFBUSxHQUFZLE1BQU0sQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUUxRDs7V0FFRztRQUVJLHVCQUFrQixHQUFvQixJQUFJLFlBQVksRUFBSyxDQUFDO0lBT0UsQ0FBQztJQUV0RTs7OztPQUlHO0lBQ0ksZ0JBQWdCLENBQUMsT0FBZTtRQUNuQyxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxHQUFHLEdBQUcsR0FBRyxPQUFPLENBQUM7SUFDbEQsQ0FBQzs7c0hBaENRLHlCQUF5QixrQkF1QlAsT0FBTzswR0F2QnpCLHlCQUF5Qix1SkNadEMsMDNEQTRCQTsyRkRoQmEseUJBQXlCO2tCQUxyQyxTQUFTOytCQUNJLG9CQUFvQixtQkFFYix1QkFBdUIsQ0FBQyxNQUFNOzswQkF5QjNCLE1BQU07MkJBQUMsT0FBTzs0Q0FsQjNCLFVBQVU7c0JBRGhCLEtBQUs7Z0JBWUMsa0JBQWtCO3NCQUR4QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbmplY3QsIElucHV0LCBPdXRwdXQsIGluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU0NfVVJMUywgU2NJVXJscyB9IGZyb20gJ0BzbmFiY2VudHIvY2xpZW50LWNvcmUnO1xuaW1wb3J0IHsgVFVJX0lTX01PQklMRSB9IGZyb20gJ0B0YWlnYS11aS9jZGsnO1xuXG4vKipcbiAqINCa0L7QvNC/0L7QvdC10L3RgiDRgdC/0LjRgdC60LAg0LrQsNGC0LXQs9C+0YDQuNC5LlxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3NjLWNhdGVnb3JpZXMtbGlzdCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3NjLWNhdGVnb3JpZXMtbGlzdC5jb21wb25lbnQuaHRtbCcsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNjQ2F0ZWdvcmllc0xpc3RDb21wb25lbnQ8VD4ge1xuICAgIC8qKlxuICAgICAqINCh0L/QuNGB0L7QuiDQutCw0YLQtdCz0L7RgNC40LkuXG4gICAgICovXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgY2F0ZWdvcmllczogVFtdIHwgdW5kZWZpbmVkIHwgbnVsbDtcblxuICAgIC8qKlxuICAgICAqINCf0YDQuNC30L3QsNC6INGC0L7Qs9C+LCDQvtGC0L7QsdGA0LDQttCw0LXRgtGB0Y8g0Y3RgtC+0YIg0LrQvtC80L/QvtC90LXQvdGCINC90LAg0LzQvtCx0LjQu9GM0L3QvtC8INGD0YHRgtGA0L7QudGB0YLQstC1INC40LvQuCDQvdC10YIuXG4gICAgICovXG4gICAgcHVibGljIHJlYWRvbmx5IGlzTW9iaWxlOiBib29sZWFuID0gaW5qZWN0KFRVSV9JU19NT0JJTEUpO1xuXG4gICAgLyoqXG4gICAgICog0KHQvtCx0YvRgtC40LUg0L3QsNC20LDRgtC40Y8g0L3QsCDQutCw0YLQtdCz0L7RgNC40Y4uXG4gICAgICovXG4gICAgQE91dHB1dCgpXG4gICAgcHVibGljIGNsaWNrQ2F0ZWdvcnlFdmVudDogRXZlbnRFbWl0dGVyPFQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxUPigpO1xuXG4gICAgLyoqXG4gICAgICog0JjQvdC40YbQuNCw0LvQuNC30LjRgNGD0LXRgiDRjdC60LfQtdC80L/Qu9GP0YAg0LrQu9Cw0YHRgdCwIHtAbGluayBTY0NhdGVnb3JpZXNMaXN0Q29tcG9uZW50fS5cbiAgICAgKlxuICAgICAqIEBwYXJhbSB1cmxzINC+0LHRitC10LrRgiDQuNC90YTQvtGA0LzQsNGG0LjQuCDQviDQsdCw0LfQvtCy0L7QvCDRgdC/0LjRgdC60LUg0YHRgdGL0LvQvtC6INC/0YDQuNC70L7QttC10L3QuNGPLlxuICAgICAqL1xuICAgIHB1YmxpYyBjb25zdHJ1Y3RvcihASW5qZWN0KFNDX1VSTFMpIHByaXZhdGUgcmVhZG9ubHkgdXJsczogU2NJVXJscykge31cblxuICAgIC8qKlxuICAgICAqINCS0L7Qt9Cy0YDQsNGJ0LDQtdGCINC/0YPRgtGMINC00L4g0LjQt9C+0LHRgNCw0LbQtdC90LjRjyDQvdCwINGB0LXRgNCy0LXRgNC1LlxuICAgICAqXG4gICAgICogQHBhcmFtIGltZ1BhdGgg0L/Rg9GC0YwsINCz0LTQtSDRhdGA0LDQvdC40YLRgdGPINC40LfQvtCx0YDQsNC20LXQvdC40LUuXG4gICAgICovXG4gICAgcHVibGljIGdldENhdGVnb3J5SW1hZ2UoaW1nUGF0aDogc3RyaW5nKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIHRoaXMudXJscy5pbWdTZXJ2ZXJVcmwgKyAnLycgKyBpbWdQYXRoO1xuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJncmlkIGdyaWQtY29scy1bcmVwZWF0KGF1dG8tZmlsbCxtaW5tYXgoMjFyZW0sMWZyKSldIGdhcC14LTggZ2FwLXktMlwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJjYXRlZ29yaWVzOyBlbHNlIGNhdGVnb3JpZXNTa2VsZXRvblwiPlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAqbmdGb3I9XCJsZXQgaXRlbSBvZiAkYW55KGNhdGVnb3JpZXMpXCJcbiAgICAgICAgICAgIGNsYXNzPVwiZ3JvdXAgZmxleCBnYXAtMiBweS0xLjUgcHgtMyBiZy10dWktYmFzZS0wMiByb3VuZGVkLXhsIGgtMTEgaXRlbXMtY2VudGVyIHRleHQtbGVmdCBob3Zlci1ob3Zlcjpob3ZlcjpyaW5nLTIgaG92ZXItbm9uZTphY3RpdmU6cmluZy0yIHJpbmctdHVpLXByaW1hcnkgZHVyYXRpb24tMTUwXCJcbiAgICAgICAgICAgIChjbGljayk9XCJjbGlja0NhdGVnb3J5RXZlbnQuZW1pdChpdGVtKVwiXG4gICAgICAgID5cbiAgICAgICAgICAgIDxpbWcgKm5nSWY9XCJpdGVtLnByb3BlcnRpZXM/LmltYWdlXCIgW3NyY109XCJnZXRDYXRlZ29yeUltYWdlKGl0ZW0ucHJvcGVydGllcz8uaW1hZ2UpXCIgW2FsdF09XCJpdGVtLm5hbWVcIiBjbGFzcz1cInctOCBoLTggb2JqZWN0LWNvdmVyIHJvdW5kZWQgYmctdHVpLWJhc2UtMDNcIiAvPlxuICAgICAgICAgICAgPHR1aS1zdmcgKm5nSWY9XCIhaXRlbS5wcm9wZXJ0aWVzPy5pbWFnZVwiIHNyYz1cInR1aUljb25DYW1lcmFPZmZMYXJnZVwiIGNsYXNzPVwiYmctdHVpLWJhc2UtMDMgIXctOCAhaC04IHJvdW5kZWQgdGV4dC10dWktYmFzZS0wNVwiPjwvdHVpLXN2Zz5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGdyb3cgdHJ1bmNhdGVcIj5cbiAgICAgICAgICAgICAgICA8cCBjbGFzcz1cInRleHQtYmFzZSBmb250LWJvbGQgdHJ1bmNhdGVcIj57eyBpdGVtLm5hbWUgfX08L3A+XG4gICAgICAgICAgICAgICAgPHR1aS1zdmcgKm5nSWY9XCJpdGVtLmlzRmF2b3JpdGVcIiBzcmM9XCJzY0ljb25GYXZvcml0ZUZpbGxcIiBjbGFzcz1cInRleHQtdHVpLXByaW1hcnkgIXRleHQtc20gbXItYXV0b1wiPjwvdHVpLXN2Zz5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPHR1aS1zdmcgc3JjPVwidHVpSWNvbkNoZXZyb25SaWdodExhcmdlXCIgY2xhc3M9XCJob3Zlci1ob3Zlcjpncm91cC1ob3Zlcjp0ZXh0LXR1aS1wcmltYXJ5IGhvdmVyLW5vbmU6Z3JvdXAtYWN0aXZlOnRleHQtdHVpLXByaW1hcnkgZHVyYXRpb24tMTUwXCI+PC90dWktc3ZnPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI2NhdGVnb3JpZXNTa2VsZXRvbj5cbiAgICA8YnV0dG9uXG4gICAgICAgICp0dWlSZXBlYXRUaW1lcz1cImlzTW9iaWxlID8gMyA6IDZcIlxuICAgICAgICBjbGFzcz1cImdyb3VwIGZsZXggZ2FwLTIgcHktMS41IHB4LTMgYmctdHVpLWJhc2UtMDIgcm91bmRlZC14bCBoLTExIGl0ZW1zLWNlbnRlciB0ZXh0LWxlZnQgaG92ZXItaG92ZXI6aG92ZXI6cmluZy0yIGhvdmVyLW5vbmU6YWN0aXZlOnJpbmctMiByaW5nLXR1aS1iYXNlLTA1IGR1cmF0aW9uLTE1MFwiXG4gICAgPlxuICAgICAgICA8ZGl2IGNsYXNzPVwidy04IGgtOCB0dWktc2tlbGV0b25cIj48L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImgtNCBncm93IHR1aS1za2VsZXRvblwiPjwvZGl2PlxuICAgICAgICA8dHVpLXN2ZyBzcmM9XCJ0dWlJY29uQ2hldnJvblJpZ2h0TGFyZ2VcIiBjbGFzcz1cImhvdmVyLWhvdmVyOmdyb3VwLWhvdmVyOnRleHQtdHVpLXByaW1hcnkgaG92ZXItbm9uZTpncm91cC1hY3RpdmU6dGV4dC10dWktcHJpbWFyeSBkdXJhdGlvbi0xNTAgIHR1aS1za2VsZXRvblwiPjwvdHVpLXN2Zz5cbiAgICA8L2J1dHRvbj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2MtY2F0ZWdvcmllcy1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NsaWVudC11aS9jYXRhbG9nL2NhdGVnb3JpZXMtbGlzdC9zYy1jYXRlZ29yaWVzLWxpc3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2xpZW50LXVpL2NhdGFsb2cvY2F0ZWdvcmllcy1saXN0L3NjLWNhdGVnb3JpZXMtbGlzdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEgsT0FBTyxFQUFFLE9BQU8sRUFBVyxNQUFNLHdCQUF3QixDQUFDO0FBQzFELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBRTlDOztHQUVHO0FBTUgsTUFBTSxPQUFPLHlCQUF5QjtJQWtCbEM7Ozs7T0FJRztJQUNILFlBQXFELElBQWE7UUFBYixTQUFJLEdBQUosSUFBSSxDQUFTO1FBaEJsRTs7V0FFRztRQUNhLGFBQVEsR0FBWSxNQUFNLENBQUMsYUFBYSxDQUFDLENBQUM7UUFFMUQ7O1dBRUc7UUFFSSx1QkFBa0IsR0FBb0IsSUFBSSxZQUFZLEVBQUssQ0FBQztJQU9FLENBQUM7SUFFdEU7Ozs7T0FJRztJQUNJLGdCQUFnQixDQUFDLE9BQWU7UUFDbkMsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksR0FBRyxHQUFHLEdBQUcsT0FBTyxDQUFDO0lBQ2xELENBQUM7O3NIQWhDUSx5QkFBeUIsa0JBdUJQLE9BQU87MEdBdkJ6Qix5QkFBeUIsdUpDWnRDLHU0REE0QkE7MkZEaEJhLHlCQUF5QjtrQkFMckMsU0FBUzsrQkFDSSxvQkFBb0IsbUJBRWIsdUJBQXVCLENBQUMsTUFBTTs7MEJBeUIzQixNQUFNOzJCQUFDLE9BQU87NENBbEIzQixVQUFVO3NCQURoQixLQUFLO2dCQVlDLGtCQUFrQjtzQkFEeEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5qZWN0LCBJbnB1dCwgT3V0cHV0LCBpbmplY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNDX1VSTFMsIFNjSVVybHMgfSBmcm9tICdAc25hYmNlbnRyL2NsaWVudC1jb3JlJztcbmltcG9ydCB7IFRVSV9JU19NT0JJTEUgfSBmcm9tICdAdGFpZ2EtdWkvY2RrJztcblxuLyoqXG4gKiDQmtC+0LzQv9C+0L3QtdC90YIg0YHQv9C40YHQutCwINC60LDRgtC10LPQvtGA0LjQuS5cbiAqL1xuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdzYy1jYXRlZ29yaWVzLWxpc3QnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zYy1jYXRlZ29yaWVzLWxpc3QuY29tcG9uZW50Lmh0bWwnLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTY0NhdGVnb3JpZXNMaXN0Q29tcG9uZW50PFQ+IHtcbiAgICAvKipcbiAgICAgKiDQodC/0LjRgdC+0Log0LrQsNGC0LXQs9C+0YDQuNC5LlxuICAgICAqL1xuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGNhdGVnb3JpZXM6IFRbXSB8IHVuZGVmaW5lZCB8IG51bGw7XG5cbiAgICAvKipcbiAgICAgKiDQn9GA0LjQt9C90LDQuiDRgtC+0LPQviwg0L7RgtC+0LHRgNCw0LbQsNC10YLRgdGPINGN0YLQvtGCINC60L7QvNC/0L7QvdC10L3RgiDQvdCwINC80L7QsdC40LvRjNC90L7QvCDRg9GB0YLRgNC+0LnRgdGC0LLQtSDQuNC70Lgg0L3QtdGCLlxuICAgICAqL1xuICAgIHB1YmxpYyByZWFkb25seSBpc01vYmlsZTogYm9vbGVhbiA9IGluamVjdChUVUlfSVNfTU9CSUxFKTtcblxuICAgIC8qKlxuICAgICAqINCh0L7QsdGL0YLQuNC1INC90LDQttCw0YLQuNGPINC90LAg0LrQsNGC0LXQs9C+0YDQuNGOLlxuICAgICAqL1xuICAgIEBPdXRwdXQoKVxuICAgIHB1YmxpYyBjbGlja0NhdGVnb3J5RXZlbnQ6IEV2ZW50RW1pdHRlcjxUPiA9IG5ldyBFdmVudEVtaXR0ZXI8VD4oKTtcblxuICAgIC8qKlxuICAgICAqINCY0L3QuNGG0LjQsNC70LjQt9C40YDRg9C10YIg0Y3QutC30LXQvNC/0LvRj9GAINC60LvQsNGB0YHQsCB7QGxpbmsgU2NDYXRlZ29yaWVzTGlzdENvbXBvbmVudH0uXG4gICAgICpcbiAgICAgKiBAcGFyYW0gdXJscyDQvtCx0YrQtdC60YIg0LjQvdGE0L7RgNC80LDRhtC40Lgg0L4g0LHQsNC30L7QstC+0Lwg0YHQv9C40YHQutC1INGB0YHRi9C70L7QuiDQv9GA0LjQu9C+0LbQtdC90LjRjy5cbiAgICAgKi9cbiAgICBwdWJsaWMgY29uc3RydWN0b3IoQEluamVjdChTQ19VUkxTKSBwcml2YXRlIHJlYWRvbmx5IHVybHM6IFNjSVVybHMpIHt9XG5cbiAgICAvKipcbiAgICAgKiDQktC+0LfQstGA0LDRidCw0LXRgiDQv9GD0YLRjCDQtNC+INC40LfQvtCx0YDQsNC20LXQvdC40Y8g0L3QsCDRgdC10YDQstC10YDQtS5cbiAgICAgKlxuICAgICAqIEBwYXJhbSBpbWdQYXRoINC/0YPRgtGMLCDQs9C00LUg0YXRgNCw0L3QuNGC0YHRjyDQuNC30L7QsdGA0LDQttC10L3QuNC1LlxuICAgICAqL1xuICAgIHB1YmxpYyBnZXRDYXRlZ29yeUltYWdlKGltZ1BhdGg6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiB0aGlzLnVybHMuaW1nU2VydmVyVXJsICsgJy8nICsgaW1nUGF0aDtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZ3JpZCBncmlkLWNvbHMtW3JlcGVhdChhdXRvLWZpbGwsbWlubWF4KDIxcmVtLDFmcikpXSBnYXAteC04IGdhcC15LTJcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY2F0ZWdvcmllczsgZWxzZSBjYXRlZ29yaWVzU2tlbGV0b25cIj5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgJGFueShjYXRlZ29yaWVzKVwiXG4gICAgICAgICAgICBjbGFzcz1cImdyb3VwIGZsZXggZ2FwLTIgcHktMS41IHB4LTMgYmctdHVpLWJhc2UtMDIgcm91bmRlZC14bCBoLTExIGl0ZW1zLWNlbnRlciB0ZXh0LWxlZnQgaG92ZXItaG92ZXI6aG92ZXI6cmluZy0yIGhvdmVyLW5vbmU6YWN0aXZlOnJpbmctMiByaW5nLXR1aS1wcmltYXJ5IGR1cmF0aW9uLTE1MFwiXG4gICAgICAgICAgICAoY2xpY2spPVwiY2xpY2tDYXRlZ29yeUV2ZW50LmVtaXQoaXRlbSlcIlxuICAgICAgICA+XG4gICAgICAgICAgICA8aW1nICpuZ0lmPVwiaXRlbS5wcm9wZXJ0aWVzPy5pbWFnZVwiIFtzcmNdPVwiZ2V0Q2F0ZWdvcnlJbWFnZShpdGVtLnByb3BlcnRpZXM/LmltYWdlKVwiIFthbHRdPVwiaXRlbS5uYW1lXCIgY2xhc3M9XCJ3LTggaC04IG9iamVjdC1jb3ZlciByb3VuZGVkIGJnLXR1aS1iYXNlLTAzXCIgLz5cbiAgICAgICAgICAgIDx0dWktc3ZnICpuZ0lmPVwiIWl0ZW0ucHJvcGVydGllcz8uaW1hZ2VcIiBzcmM9XCJ0dWlJY29uQ2FtZXJhT2ZmTGFyZ2VcIiBjbGFzcz1cImJnLXR1aS1iYXNlLTAzICF3LTggIWgtOCByb3VuZGVkIHRleHQtdHVpLWJhc2UtMDVcIj48L3R1aS1zdmc+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBncm93IHRydW5jYXRlXCI+XG4gICAgICAgICAgICAgICAgPHAgY2xhc3M9XCJ0ZXh0LWJhc2UgZm9udC1ib2xkIHRydW5jYXRlXCI+e3sgaXRlbS5uYW1lIH19PC9wPlxuICAgICAgICAgICAgICAgIDx0dWktc3ZnICpuZ0lmPVwiaXRlbS5pc0Zhdm9yaXRlXCIgc3JjPVwic2NJY29uRmF2b3JpdGVGaWxsXCIgY2xhc3M9XCJ0ZXh0LXR1aS1wcmltYXJ5ICF0ZXh0LXNtIG1yLWF1dG9cIj48L3R1aS1zdmc+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDx0dWktc3ZnIHNyYz1cInR1aUljb25DaGV2cm9uUmlnaHRMYXJnZVwiIGNsYXNzPVwiaG92ZXItaG92ZXI6Z3JvdXAtaG92ZXI6dGV4dC10dWktcHJpbWFyeSBob3Zlci1ub25lOmdyb3VwLWFjdGl2ZTp0ZXh0LXR1aS1wcmltYXJ5IGR1cmF0aW9uLTE1MFwiPjwvdHVpLXN2Zz5cbiAgICAgICAgPC9idXR0b24+XG4gICAgPC9uZy1jb250YWluZXI+XG48L2Rpdj5cblxuPG5nLXRlbXBsYXRlICNjYXRlZ29yaWVzU2tlbGV0b24+XG4gICAgPGJ1dHRvblxuICAgICAgICAqdHVpUmVwZWF0VGltZXM9XCJsZXQgaW5kZXggb2YgaXNNb2JpbGUgPyAzIDogNlwiXG4gICAgICAgIGNsYXNzPVwiZ3JvdXAgZmxleCBnYXAtMiBweS0xLjUgcHgtMyBiZy10dWktYmFzZS0wMiByb3VuZGVkLXhsIGgtMTEgaXRlbXMtY2VudGVyIHRleHQtbGVmdCBob3Zlci1ob3Zlcjpob3ZlcjpyaW5nLTIgaG92ZXItbm9uZTphY3RpdmU6cmluZy0yIHJpbmctdHVpLWJhc2UtMDUgZHVyYXRpb24tMTUwXCJcbiAgICA+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ3LTggaC04IHR1aS1za2VsZXRvblwiPjwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiaC00IGdyb3cgdHVpLXNrZWxldG9uXCI+PC9kaXY+XG4gICAgICAgIDx0dWktc3ZnIHNyYz1cInR1aUljb25DaGV2cm9uUmlnaHRMYXJnZVwiIGNsYXNzPVwiaG92ZXItaG92ZXI6Z3JvdXAtaG92ZXI6dGV4dC10dWktcHJpbWFyeSBob3Zlci1ub25lOmdyb3VwLWFjdGl2ZTp0ZXh0LXR1aS1wcmltYXJ5IGR1cmF0aW9uLTE1MCAgdHVpLXNrZWxldG9uXCI+PC90dWktc3ZnPlxuICAgIDwvYnV0dG9uPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==

package/fesm2015/snabcentr-client-ui.mjs

@@ -1292,10 +1292,10 @@ class ScCategoriesListComponent {
     }
 }
 ScCategoriesListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoriesListComponent, deps: [{ token: SC_URLS }], target: i0.ɵɵFactoryTarget.Component });
-ScCategoriesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoriesListComponent, selector: "sc-categories-list", inputs: { categories: "categories" }, outputs: { clickCategoryEvent: "clickCategoryEvent" }, ngImport: i0, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button\n            *ngFor=\"let item of $any(categories)\"\n            class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n            (click)=\"clickCategoryEvent.emit(item)\"\n        >\n            <img *ngIf=\"item.properties?.image\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div class=\"flex grow truncate\">\n                <p class=\"text-base font-bold truncate\">{{ item.name }}</p>\n                <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-sm mr-auto\"></tui-svg>\n            </div>\n            <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150\"></tui-svg>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *tuiRepeatTimes=\"isMobile ? 3 : 6\"\n        class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-base-05 duration-150\"\n    >\n        <div class=\"w-8 h-8 tui-skeleton\"></div>\n        <div class=\"h-4 grow tui-skeleton\"></div>\n        <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150  tui-skeleton\"></tui-svg>\n    </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScCategoriesListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoriesListComponent, selector: "sc-categories-list", inputs: { categories: "categories" }, outputs: { clickCategoryEvent: "clickCategoryEvent" }, ngImport: i0, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button\n            *ngFor=\"let item of $any(categories)\"\n            class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n            (click)=\"clickCategoryEvent.emit(item)\"\n        >\n            <img *ngIf=\"item.properties?.image\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div class=\"flex grow truncate\">\n                <p class=\"text-base font-bold truncate\">{{ item.name }}</p>\n                <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-sm mr-auto\"></tui-svg>\n            </div>\n            <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150\"></tui-svg>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *tuiRepeatTimes=\"let index of isMobile ? 3 : 6\"\n        class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-base-05 duration-150\"\n    >\n        <div class=\"w-8 h-8 tui-skeleton\"></div>\n        <div class=\"h-4 grow tui-skeleton\"></div>\n        <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150  tui-skeleton\"></tui-svg>\n    </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i5.TuiRepeatTimesDirective, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoriesListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-categories-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button\n            *ngFor=\"let item of $any(categories)\"\n            class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n            (click)=\"clickCategoryEvent.emit(item)\"\n        >\n            <img *ngIf=\"item.properties?.image\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div class=\"flex grow truncate\">\n                <p class=\"text-base font-bold truncate\">{{ item.name }}</p>\n                <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-sm mr-auto\"></tui-svg>\n            </div>\n            <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150\"></tui-svg>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *tuiRepeatTimes=\"isMobile ? 3 : 6\"\n        class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-base-05 duration-150\"\n    >\n        <div class=\"w-8 h-8 tui-skeleton\"></div>\n        <div class=\"h-4 grow tui-skeleton\"></div>\n        <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150  tui-skeleton\"></tui-svg>\n    </button>\n</ng-template>\n" }]
+            args: [{ selector: 'sc-categories-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-[repeat(auto-fill,minmax(21rem,1fr))] gap-x-8 gap-y-2\">\n    <ng-container *ngIf=\"categories; else categoriesSkeleton\">\n        <button\n            *ngFor=\"let item of $any(categories)\"\n            class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-primary duration-150\"\n            (click)=\"clickCategoryEvent.emit(item)\"\n        >\n            <img *ngIf=\"item.properties?.image\" [src]=\"getCategoryImage(item.properties?.image)\" [alt]=\"item.name\" class=\"w-8 h-8 object-cover rounded bg-tui-base-03\" />\n            <tui-svg *ngIf=\"!item.properties?.image\" src=\"tuiIconCameraOffLarge\" class=\"bg-tui-base-03 !w-8 !h-8 rounded text-tui-base-05\"></tui-svg>\n            <div class=\"flex grow truncate\">\n                <p class=\"text-base font-bold truncate\">{{ item.name }}</p>\n                <tui-svg *ngIf=\"item.isFavorite\" src=\"scIconFavoriteFill\" class=\"text-tui-primary !text-sm mr-auto\"></tui-svg>\n            </div>\n            <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150\"></tui-svg>\n        </button>\n    </ng-container>\n</div>\n\n<ng-template #categoriesSkeleton>\n    <button\n        *tuiRepeatTimes=\"let index of isMobile ? 3 : 6\"\n        class=\"group flex gap-2 py-1.5 px-3 bg-tui-base-02 rounded-xl h-11 items-center text-left hover-hover:hover:ring-2 hover-none:active:ring-2 ring-tui-base-05 duration-150\"\n    >\n        <div class=\"w-8 h-8 tui-skeleton\"></div>\n        <div class=\"h-4 grow tui-skeleton\"></div>\n        <tui-svg src=\"tuiIconChevronRightLarge\" class=\"hover-hover:group-hover:text-tui-primary hover-none:group-active:text-tui-primary duration-150  tui-skeleton\"></tui-svg>\n    </button>\n</ng-template>\n" }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,