@snabcentr/client-ui 0.0.13 → 0.0.17

package/fesm2015/snabcentr-client-ui.mjs

@@ -1,27 +1,32 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, ContentChildren, Input, Output, HostBinding, HostListener, NgModule, ChangeDetectorRef, Optional, Self, Inject, ViewChild } from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, ContentChildren, Input, Output, HostBinding, HostListener, NgModule, Inject, ChangeDetectorRef, Optional, Self, ViewChild } from '@angular/core';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import { interval, filter, map, switchMap } from 'rxjs';
+import { interval, filter, map, switchMap, skip } from 'rxjs';
 import * as i1 from '@snabcentr/client-core';
 import { SC_URLS, SC_PATH_IMAGE_NOT_FOUND } from '@snabcentr/client-core';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@taiga-ui/core';
+import * as i2 from '@angular/common';
+import { CommonModule, formatDate } from '@angular/common';
+import * as i3 from '@taiga-ui/core';
 import { TuiButtonModule, TuiModeModule, TuiSvgModule, TuiLabelModule, TuiTextfieldControllerModule, TuiHintModule, TuiLoaderModule, TuiLinkModule } from '@taiga-ui/core';
 import * as i5 from '@taiga-ui/kit';
 import { TuiCarouselModule, TuiPaginationModule, TUI_NUMBER_VALUE_TRANSFORMER, TuiInputNumberComponent, TuiInputNumberModule, TuiFieldErrorPipeModule, TuiElasticContainerModule } from '@taiga-ui/kit';
 import * as i6 from '@taiga-ui/cdk';
 import { tuiCreateToken, AbstractTuiNullableControl } from '@taiga-ui/cdk';
-import * as i2$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { MatRippleModule } from '@angular/material/core';
 import * as i4 from '@angular/forms';
 import { NgControl, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i6$1 from '@taiga-ui/addon-preview';
+import * as i7 from '@taiga-ui/addon-preview';
 import { TuiPreviewDialogService, TuiPreviewModule } from '@taiga-ui/addon-preview';
-import * as i7 from '@tinkoff/ng-polymorpheus';
+import * as i8 from '@tinkoff/ng-polymorpheus';
 import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
+import * as i2$1 from 'ngx-echarts';
+import { NgxEchartsModule } from 'ngx-echarts';
+import * as echarts from 'echarts/core';
+import { LineChart } from 'echarts/charts';
+import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';
+import { SVGRenderer } from 'echarts/renderers';
 
 /**
  * Класс-помощник для конвертации пикселей.
@@ -179,13 +184,13 @@ let ScBannerComponent = class ScBannerComponent {
     }
 };
 ScBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScBannerService }, { token: ScPxConverter }], target: i0.ɵɵFactoryTarget.Component });
-ScBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScBannerComponent, selector: "sc-banner", inputs: { navigateButton: "navigateButton", playerInterval: "playerInterval", disabled: "disabled", bannerLocation: "bannerLocation", resizable: "resizable" }, outputs: { loadBannersEvent: "loadBannersEvent", clickBannerImgEvent: "clickBannerImgEvent" }, host: { listeners: { "mouseenter": "mouseEnterHandler()", "mouseleave": "mouseLeaveHandler()" }, properties: { "class.!hidden": "this.isHidden", "style.height": "this.height", "style.width": "this.width", "style.aspect-ratio": "this.aspectRatio" } }, queries: [{ propertyName: "bannersListRef", predicate: ["banner"] }], ngImport: i0, template: "<div class=\"flex relative\" [style.aspect-ratio]=\"aspectRatio\">\n    <tui-carousel class=\"bg-white w-full shadow-sc-2 !absolute rounded overflow-hidden\" [(index)]=\"currentBannerId\">\n        <ng-container *ngFor=\"let item of bannersListRef; index as index\">\n            <div *tuiItem>\n                <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n            </div>\n        </ng-container>\n        <ng-container *ngFor=\"let banner of banners; index as index\">\n            <a *tuiItem (click)=\"onClick(banner)\" [attr.href]=\"banner.url ? banner.url : null\" target=\"_blank\" [title]=\"banner.title\" class=\"\">\n                <img [src]=\"banner.image\" alt=\"\u0411\u0430\u043D\u043D\u0435\u0440\" [style.aspect-ratio]=\"aspectRatio\" class=\"pointer-events-none object-cover h-full w-full\" />\n            </a>\n        </ng-container>\n    </tui-carousel>\n    <div *ngIf=\"navigateButton && !disabled && (this.bannersListRef.length + this.banners.length) > 1\" class=\"w-full h-full flex items-center grow justify-between p-3\">\n        <button tuiIconButton icon=\"tuiIconChevronLeftLarge\" tuiMode=\"onLight\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onPreviousBanner()\" class=\"arrow-btn\"></button>\n        <button tuiIconButton icon=\"tuiIconChevronRightLarge\" tuiMode=\"onLight\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onNextBanner()\" class=\"arrow-btn\"></button>\n    </div>\n</div>\n<tui-pagination\n    *ngIf=\"navigateButton && !disabled && (this.bannersListRef.length + this.banners.length) > 1\"\n    size=\"s\"\n    class=\"mt-3\"\n    [length]=\"this.bannersListRef.length + this.banners.length\"\n    [(index)]=\"currentBannerId\"\n></tui-pagination>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;flex-direction:column}:host tui-pagination{color:var(--tui-primary)}\n", "*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: \"\"}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.\\!absolute{position:absolute!important}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.-bottom-4{bottom:-1rem}.-left-2{left:-.5rem}.-right-4{right:-1rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.left-1{left:.25rem}.left-3{left:.75rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-3{top:.75rem}.isolate{isolation:isolate}.z-10{z-index:10}.m-3{margin:.75rem}.m-8{margin:2rem}.mb-2{margin-bottom:.5rem}.mb-2\\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.\\!block{display:block!important}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.\\!hidden{display:none!important}.hidden{display:none}.\\!h-3{height:.75rem!important}.\\!h-4{height:1rem!important}.\\!h-5{height:1.25rem!important}.h-20{height:5rem}.h-3{height:.75rem}.h-3\\/5{height:60%}.h-32{height:8rem}.h-4{height:1rem}.h-50{height:12.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-82{height:20.5rem}.h-full{height:100%}.\\!w-5{width:1.25rem!important}.w-20{width:5rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\\/4{width:75%}.w-3\\/5{width:60%}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-70{width:17.5rem}.w-8{width:2rem}.w-96{width:24rem}.w-\\[10rem\\]{width:10rem}.w-\\[13rem\\]{width:13rem}.w-\\[21rem\\]{width:21rem}.w-\\[34rem\\]{width:34rem}.w-\\[46rem\\]{width:46rem}.w-\\[54rem\\]{width:54rem}.w-full{width:100%}.flex-auto{flex:1 1 auto}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.basis-min-content{flex-basis:min-content}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.content-between{align-content:space-between}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}.gap-x-2{column-gap:.5rem}.gap-x-4{column-gap:1rem}.gap-x-8{column-gap:2rem}.gap-y-0{row-gap:0px}.gap-y-0\\.5{row-gap:.125rem}.gap-y-2{row-gap:.5rem}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-tui-radius-l{border-radius:var(--tui-radius-l)}.rounded-tui-radius-m{border-radius:var(--tui-radius-m)}.rounded-tui-radius-s{border-radius:var(--tui-radius-s)}.rounded-xl{border-radius:.75rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-tui-base-04{border-color:var(--tui-base-04)}.bg-tui-base-02{background-color:var(--tui-base-02)}.bg-tui-base-03{background-color:var(--tui-base-03)}.bg-tui-error-fill{background-color:var(--tui-error-fill)}.bg-tui-primary{background-color:var(--tui-primary)}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.object-cover{object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-4\\.5{padding-top:1.125rem;padding-bottom:1.125rem}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.\\!text-2xl{font-size:1.5rem!important;line-height:2rem!important}.\\!text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.ordinal{--tw-ordinal: ordinal;font-feature-settings:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-tui-base-07{color:var(--tui-base-07)}.text-tui-base-09{color:var(--tui-base-09)}.text-tui-error-fill{color:var(--tui-error-fill)}.text-tui-link{color:var(--tui-link)}.text-tui-primary{color:var(--tui-primary)}.text-tui-success-fill{color:var(--tui-success-fill)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-1{--tw-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 5px 20px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-2{--tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia: sepia(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.\\!transition-all{transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\\!duration-500{transition-duration:.5s!important}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\[fs\\:0\\]{fs:0}.\\[k\\:string\\]{k:string}.hover\\:text-tui-link-hover:hover{color:var(--tui-link-hover)}.group:hover .group-hover\\:block{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i5.TuiCarouselComponent, selector: "tui-carousel", inputs: ["draggable", "itemsCount", "index"], outputs: ["indexChange"] }, { kind: "directive", type: i5.TuiCarouselDirective, selector: "tui-carousel", inputs: ["duration", "index"] }, { kind: "directive", type: i6.TuiItemDirective, selector: "[tuiItem]" }, { kind: "component", type: i5.TuiPaginationComponent, selector: "tui-pagination", inputs: ["length", "size", "disabled", "activePadding", "sidePadding", "content", "index"], outputs: ["indexChange"] }, { kind: "directive", type: i2.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScBannerComponent, selector: "sc-banner", inputs: { navigateButton: "navigateButton", playerInterval: "playerInterval", disabled: "disabled", bannerLocation: "bannerLocation", resizable: "resizable" }, outputs: { loadBannersEvent: "loadBannersEvent", clickBannerImgEvent: "clickBannerImgEvent" }, host: { listeners: { "mouseenter": "mouseEnterHandler()", "mouseleave": "mouseLeaveHandler()" }, properties: { "class.!hidden": "this.isHidden", "style.height": "this.height", "style.width": "this.width", "style.aspect-ratio": "this.aspectRatio" } }, queries: [{ propertyName: "bannersListRef", predicate: ["banner"] }], ngImport: i0, template: "<div class=\"flex relative\" [style.aspect-ratio]=\"aspectRatio\">\n    <tui-carousel class=\"bg-white w-full shadow-sc-2 !absolute rounded overflow-hidden\" [(index)]=\"currentBannerId\">\n        <ng-container *ngFor=\"let item of bannersListRef; index as index\">\n            <div *tuiItem>\n                <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n            </div>\n        </ng-container>\n        <ng-container *ngFor=\"let banner of banners; index as index\">\n            <a *tuiItem (click)=\"onClick(banner)\" [attr.href]=\"banner.url ? banner.url : null\" target=\"_blank\" [title]=\"banner.title\" class=\"\">\n                <img [src]=\"banner.image\" alt=\"\u0411\u0430\u043D\u043D\u0435\u0440\" [style.aspect-ratio]=\"aspectRatio\" class=\"pointer-events-none object-cover h-full w-full\" />\n            </a>\n        </ng-container>\n    </tui-carousel>\n    <div *ngIf=\"navigateButton && !disabled && (this.bannersListRef.length + this.banners.length) > 1\" class=\"w-full h-full flex items-center grow justify-between p-3\">\n        <button tuiIconButton icon=\"tuiIconChevronLeftLarge\" tuiMode=\"onLight\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onPreviousBanner()\" class=\"arrow-btn\"></button>\n        <button tuiIconButton icon=\"tuiIconChevronRightLarge\" tuiMode=\"onLight\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onNextBanner()\" class=\"arrow-btn\"></button>\n    </div>\n</div>\n<tui-pagination\n    *ngIf=\"navigateButton && !disabled && (this.bannersListRef.length + this.banners.length) > 1\"\n    size=\"s\"\n    class=\"mt-3\"\n    [length]=\"this.bannersListRef.length + this.banners.length\"\n    [(index)]=\"currentBannerId\"\n></tui-pagination>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;flex-direction:column}:host tui-pagination{color:var(--tui-primary)}\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i5.TuiCarouselComponent, selector: "tui-carousel", inputs: ["draggable", "itemsCount", "index"], outputs: ["indexChange"] }, { kind: "directive", type: i5.TuiCarouselDirective, selector: "tui-carousel", inputs: ["duration", "index"] }, { kind: "directive", type: i6.TuiItemDirective, selector: "[tuiItem]" }, { kind: "component", type: i5.TuiPaginationComponent, selector: "tui-pagination", inputs: ["length", "size", "disabled", "activePadding", "sidePadding", "content", "index"], outputs: ["indexChange"] }, { kind: "directive", type: i3.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 ScBannerComponent = __decorate([
     UntilDestroy({ checkProperties: true })
 ], ScBannerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex relative\" [style.aspect-ratio]=\"aspectRatio\">\n    <tui-carousel class=\"bg-white w-full shadow-sc-2 !absolute rounded overflow-hidden\" [(index)]=\"currentBannerId\">\n        <ng-container *ngFor=\"let item of bannersListRef; index as index\">\n            <div *tuiItem>\n                <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n            </div>\n        </ng-container>\n        <ng-container *ngFor=\"let banner of banners; index as index\">\n            <a *tuiItem (click)=\"onClick(banner)\" [attr.href]=\"banner.url ? banner.url : null\" target=\"_blank\" [title]=\"banner.title\" class=\"\">\n                <img [src]=\"banner.image\" alt=\"\u0411\u0430\u043D\u043D\u0435\u0440\" [style.aspect-ratio]=\"aspectRatio\" class=\"pointer-events-none object-cover h-full w-full\" />\n            </a>\n        </ng-container>\n    </tui-carousel>\n    <div *ngIf=\"navigateButton && !disabled && (this.bannersListRef.length + this.banners.length) > 1\" class=\"w-full h-full flex items-center grow justify-between p-3\">\n        <button tuiIconButton icon=\"tuiIconChevronLeftLarge\" tuiMode=\"onLight\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onPreviousBanner()\" class=\"arrow-btn\"></button>\n        <button tuiIconButton icon=\"tuiIconChevronRightLarge\" tuiMode=\"onLight\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onNextBanner()\" class=\"arrow-btn\"></button>\n    </div>\n</div>\n<tui-pagination\n    *ngIf=\"navigateButton && !disabled && (this.bannersListRef.length + this.banners.length) > 1\"\n    size=\"s\"\n    class=\"mt-3\"\n    [length]=\"this.bannersListRef.length + this.banners.length\"\n    [(index)]=\"currentBannerId\"\n></tui-pagination>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;flex-direction:column}:host tui-pagination{color:var(--tui-primary)}\n", "*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: \"\"}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.\\!absolute{position:absolute!important}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.-bottom-4{bottom:-1rem}.-left-2{left:-.5rem}.-right-4{right:-1rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.left-1{left:.25rem}.left-3{left:.75rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-3{top:.75rem}.isolate{isolation:isolate}.z-10{z-index:10}.m-3{margin:.75rem}.m-8{margin:2rem}.mb-2{margin-bottom:.5rem}.mb-2\\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.\\!block{display:block!important}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.\\!hidden{display:none!important}.hidden{display:none}.\\!h-3{height:.75rem!important}.\\!h-4{height:1rem!important}.\\!h-5{height:1.25rem!important}.h-20{height:5rem}.h-3{height:.75rem}.h-3\\/5{height:60%}.h-32{height:8rem}.h-4{height:1rem}.h-50{height:12.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-82{height:20.5rem}.h-full{height:100%}.\\!w-5{width:1.25rem!important}.w-20{width:5rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\\/4{width:75%}.w-3\\/5{width:60%}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-70{width:17.5rem}.w-8{width:2rem}.w-96{width:24rem}.w-\\[10rem\\]{width:10rem}.w-\\[13rem\\]{width:13rem}.w-\\[21rem\\]{width:21rem}.w-\\[34rem\\]{width:34rem}.w-\\[46rem\\]{width:46rem}.w-\\[54rem\\]{width:54rem}.w-full{width:100%}.flex-auto{flex:1 1 auto}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.basis-min-content{flex-basis:min-content}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.content-between{align-content:space-between}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}.gap-x-2{column-gap:.5rem}.gap-x-4{column-gap:1rem}.gap-x-8{column-gap:2rem}.gap-y-0{row-gap:0px}.gap-y-0\\.5{row-gap:.125rem}.gap-y-2{row-gap:.5rem}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-tui-radius-l{border-radius:var(--tui-radius-l)}.rounded-tui-radius-m{border-radius:var(--tui-radius-m)}.rounded-tui-radius-s{border-radius:var(--tui-radius-s)}.rounded-xl{border-radius:.75rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-tui-base-04{border-color:var(--tui-base-04)}.bg-tui-base-02{background-color:var(--tui-base-02)}.bg-tui-base-03{background-color:var(--tui-base-03)}.bg-tui-error-fill{background-color:var(--tui-error-fill)}.bg-tui-primary{background-color:var(--tui-primary)}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.object-cover{object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-4\\.5{padding-top:1.125rem;padding-bottom:1.125rem}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.\\!text-2xl{font-size:1.5rem!important;line-height:2rem!important}.\\!text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.ordinal{--tw-ordinal: ordinal;font-feature-settings:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-tui-base-07{color:var(--tui-base-07)}.text-tui-base-09{color:var(--tui-base-09)}.text-tui-error-fill{color:var(--tui-error-fill)}.text-tui-link{color:var(--tui-link)}.text-tui-primary{color:var(--tui-primary)}.text-tui-success-fill{color:var(--tui-success-fill)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-1{--tw-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 5px 20px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-2{--tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia: sepia(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.\\!transition-all{transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\\!duration-500{transition-duration:.5s!important}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\[fs\\:0\\]{fs:0}.\\[k\\:string\\]{k:string}.hover\\:text-tui-link-hover:hover{color:var(--tui-link-hover)}.group:hover .group-hover\\:block{display:block}\n"] }]
+            args: [{ selector: 'sc-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex relative\" [style.aspect-ratio]=\"aspectRatio\">\n    <tui-carousel class=\"bg-white w-full shadow-sc-2 !absolute rounded overflow-hidden\" [(index)]=\"currentBannerId\">\n        <ng-container *ngFor=\"let item of bannersListRef; index as index\">\n            <div *tuiItem>\n                <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n            </div>\n        </ng-container>\n        <ng-container *ngFor=\"let banner of banners; index as index\">\n            <a *tuiItem (click)=\"onClick(banner)\" [attr.href]=\"banner.url ? banner.url : null\" target=\"_blank\" [title]=\"banner.title\" class=\"\">\n                <img [src]=\"banner.image\" alt=\"\u0411\u0430\u043D\u043D\u0435\u0440\" [style.aspect-ratio]=\"aspectRatio\" class=\"pointer-events-none object-cover h-full w-full\" />\n            </a>\n        </ng-container>\n    </tui-carousel>\n    <div *ngIf=\"navigateButton && !disabled && (this.bannersListRef.length + this.banners.length) > 1\" class=\"w-full h-full flex items-center grow justify-between p-3\">\n        <button tuiIconButton icon=\"tuiIconChevronLeftLarge\" tuiMode=\"onLight\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onPreviousBanner()\" class=\"arrow-btn\"></button>\n        <button tuiIconButton icon=\"tuiIconChevronRightLarge\" tuiMode=\"onLight\" size=\"m\" shape=\"rounded\" appearance=\"flat\" (click)=\"onNextBanner()\" class=\"arrow-btn\"></button>\n    </div>\n</div>\n<tui-pagination\n    *ngIf=\"navigateButton && !disabled && (this.bannersListRef.length + this.banners.length) > 1\"\n    size=\"s\"\n    class=\"mt-3\"\n    [length]=\"this.bannersListRef.length + this.banners.length\"\n    [(index)]=\"currentBannerId\"\n></tui-pagination>\n", styles: [":host{--tui-carousel-padding: 0;display:flex;flex-direction:column}:host tui-pagination{color:var(--tui-primary)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ScBannerService }, { type: ScPxConverter }]; }, propDecorators: { bannersListRef: [{
                 type: ContentChildren,
                 args: ['banner']
@@ -249,6 +254,49 @@ const SC_LINEAR_VALUES = ['пог.м.', 'м.'];
  */
 const SC_LINEAR_VALUES_TOKEN = tuiCreateToken(SC_LINEAR_VALUES);
 
+/**
+ * Класс хэлпер для работы со значениями единиц измерения товара.
+ */
+class UnitsHelper {
+    /**
+     * Инициирует экземпляр класса {@link UnitsHelper}.
+     *
+     * @param linearValues Единицы измерения линейной величины.
+     */
+    constructor(linearValues) {
+        this.linearValues = linearValues;
+    }
+    /**
+     * Возвращает признак возможности продажи товара на метраж.
+     *
+     * @param linearValues Товар для которого нужно проверить возможность продажи на метраж.
+     */
+    productIsMeasurable(product) {
+        return this.linearValues.includes(product.unit);
+    }
+    /**
+     * Возвращает кратность количества для товара.
+     *
+     * @param linearValues Товар для которого нужно вернуть кратность количества.
+     */
+    productMultiplicity(product) {
+        return product && product.minCount && !this.linearValues.includes(product.unit) ? product.minCount : 1;
+    }
+}
+UnitsHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UnitsHelper, deps: [{ token: SC_LINEAR_VALUES_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable });
+UnitsHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UnitsHelper, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UnitsHelper, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [SC_LINEAR_VALUES_TOKEN]
+                    }] }];
+    } });
+
 /**
  * Проверяет кратность значения.
  *
@@ -296,6 +344,10 @@ class ScInputQuantityComponent extends AbstractTuiNullableControl {
          * Размер компонента.
          */
         this.size = 'm';
+        /**
+         * Событие нажатия на кнопку "Очистить".
+         */
+        this.clickClearEvent = new EventEmitter();
     }
     get focused() {
         var _a;
@@ -338,12 +390,21 @@ class ScInputQuantityComponent extends AbstractTuiNullableControl {
     decrement() {
         this.numberInput.onArrow(-((this.numberInput.value || 0) % this.step) || -this.step);
     }
+    /**
+     * Очищает поля ввода.
+     */
+    clear() {
+        var _a;
+        this.numberInput.writeValue(null);
+        (_a = this.control) === null || _a === void 0 ? void 0 : _a.updateValueAndValidity();
+        this.clickClearEvent.emit();
+    }
 }
 ScInputQuantityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScInputQuantityComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: TUI_NUMBER_VALUE_TRANSFORMER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ScInputQuantityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: { step: "step", quantityUnit: "quantityUnit", showLoader: "showLoader", showCross: "showCross", appearance: "appearance", isDisabled: "isDisabled", size: "size" }, host: { listeners: { "keydown.arrowDown": "onArrow(-step)", "keydown.arrowUp": "onArrow(step)" }, properties: { "attr.data-appearance": "this.appearance", "attr.data-disabled": "this.isDisabled", "attr.data-size": "this.size" } }, viewQueries: [{ propertyName: "numberInput", first: true, predicate: TuiInputNumberComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<tui-loader *ngIf=\"formControl\" class=\"w-full\" [overlay]=\"true\" [showLoader]=\"showLoader\" [size]=\"size\">\n    <div class=\"flex items-center text-center gap-1\">\n        <div class=\"field-with-button flex grow rounded-tui-radius-l\">\n            <button\n                tuiIconButton\n                tuiMode=\"onLight\"\n                [appearance]=\"appearance\"\n                [disabled]=\"!numberInput.canDecrement\"\n                [focusable]=\"false\"\n                [size]=\"size\"\n                (click.prevent)=\"decrement()\"\n                (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n            >\n                <tui-svg src=\"scIconMinus\"></tui-svg>\n            </button>\n            <tui-input-number\n                #numberInput\n                [formControl]=\"formControl\"\n                [tuiHint]=\"([] | tuiFieldError | async )?.message\"\n                [tuiTextfieldPostfix]=\"quantityUnit || ''\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                [min]=\"0\"\n                [tuiTextfieldSize]=\"size\"\n                [required]=\"true\"\n                [style.text-align]=\"'center'\"\n                [style.font-weight]=\"700\"\n                class=\"grow\"\n            >\n            </tui-input-number>\n            <button\n                tuiIconButton\n                tuiMode=\"onLight\"\n                [appearance]=\"appearance\"\n                [size]=\"size\"\n                [disabled]=\"!numberInput.canIncrement\"\n                [focusable]=\"false\"\n                (click.prevent)=\"incident()\"\n                (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n            >\n                <tui-svg src=\"scIconPlus\"></tui-svg>\n            </button>\n        </div>\n        <button\n            *ngIf=\"showCross\"\n            tuiIconButton\n            tuiMode=\"onLight\"\n            [appearance]=\"appearance\"\n            [size]=\"size\"\n            [disabled]=\"!numberInput.canIncrement\"\n            [focusable]=\"false\"\n            (click.prevent)=\"numberInput.onArrow(-(numberInput.value || 0))\"\n            (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n        >\n            <tui-svg src=\"scIconCross\"></tui-svg>\n        </button>\n    </div>\n</tui-loader>\n", styles: [":host [data-size=l]{--tui-height-l: var(--tui-height-m);--tui-font-text-m: bold .875rem/1.25rem var(--tui-font-text);--tui-padding-l: 0}:host [data-size=m]{--tui-height-m: var(--tui-height-s);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-m: 0}:host [data-size=m] tui-svg{font-size:12px!important}:host [data-size=s]{--tui-height-s: var(--tui-height-xs);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-s: 0}:host [data-size=s] tui-svg{font-size:12px!important}:host[data-disabled=true]{pointer-events:none;opacity:var(--tui-disabled-opacity)}:host[data-appearance=secondary] .field-with-button{background-color:var(--tui-base-01);box-shadow:inset 0 0 0 .0625rem var(--tui-base-03)}:host[data-appearance=primary] .field-with-button{background-color:var(--tui-warning-bg)}:host .field-with-button:has(._invalid){background-color:var(--tui-error-bg)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i2.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "component", type: i5.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "decimal", "precision", "step", "prefix", "postfix"] }, { kind: "directive", type: i5.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "directive", type: i2.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i2.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: i2.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i2.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i2.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i2.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i2.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i2.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TuiFieldErrorPipe, name: "tuiFieldError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScInputQuantityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: { step: "step", quantityUnit: "quantityUnit", showLoader: "showLoader", showCross: "showCross", appearance: "appearance", isDisabled: "isDisabled", size: "size" }, outputs: { clickClearEvent: "clickClearEvent" }, host: { listeners: { "keydown.arrowDown": "onArrow(-step)", "keydown.arrowUp": "onArrow(step)" }, properties: { "attr.data-appearance": "this.appearance", "attr.data-disabled": "this.isDisabled", "attr.data-size": "this.size" } }, viewQueries: [{ propertyName: "numberInput", first: true, predicate: TuiInputNumberComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<tui-loader *ngIf=\"formControl\" class=\"w-full\" [overlay]=\"true\" [showLoader]=\"showLoader\" [size]=\"size\">\n    <div class=\"flex items-center text-center gap-1\">\n        <div class=\"field-with-button flex grow rounded-xl\">\n            <button\n                tuiIconButton\n                tuiMode=\"onLight\"\n                [appearance]=\"appearance\"\n                [disabled]=\"!numberInput.canDecrement\"\n                [focusable]=\"false\"\n                [size]=\"size\"\n                (click.prevent)=\"decrement()\"\n                (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n            >\n                <tui-svg src=\"scIconMinus\"></tui-svg>\n            </button>\n            <tui-input-number\n                #numberInput\n                [formControl]=\"formControl\"\n                [tuiHint]=\"([] | tuiFieldError | async )?.message\"\n                [tuiTextfieldPostfix]=\"quantityUnit || ''\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                [min]=\"step\"\n                [tuiTextfieldSize]=\"size\"\n                [required]=\"true\"\n                [style.text-align]=\"'center'\"\n                [style.font-weight]=\"700\"\n                class=\"grow\"\n            >\n            </tui-input-number>\n            <button\n                tuiIconButton\n                tuiMode=\"onLight\"\n                [appearance]=\"appearance\"\n                [size]=\"size\"\n                [disabled]=\"!numberInput.canIncrement\"\n                [focusable]=\"false\"\n                (click.prevent)=\"incident()\"\n                (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n            >\n                <tui-svg src=\"scIconPlus\"></tui-svg>\n            </button>\n        </div>\n        <button\n            *ngIf=\"showCross\"\n            tuiIconButton\n            tuiMode=\"onLight\"\n            [appearance]=\"appearance\"\n            [size]=\"size\"\n            [disabled]=\"!numberInput.canIncrement\"\n            [focusable]=\"false\"\n            (click.prevent)=\"clear()\"\n            (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n        >\n            <tui-svg src=\"scIconCross\"></tui-svg>\n        </button>\n    </div>\n</tui-loader>\n", styles: [":host [data-size=l]{--tui-height-l: var(--tui-height-m);--tui-font-text-m: bold .875rem/1.25rem var(--tui-font-text);--tui-padding-l: 0}:host [data-size=m]{--tui-height-m: var(--tui-height-s);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-m: 0}:host [data-size=m] tui-svg{font-size:12px!important}:host [data-size=s]{--tui-height-s: var(--tui-height-xs);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-s: 0}:host [data-size=s] tui-svg{font-size:12px!important}:host[data-disabled=true]{pointer-events:none;opacity:var(--tui-disabled-opacity)}:host[data-appearance=secondary] .field-with-button{background-color:var(--tui-base-01);box-shadow:inset 0 0 0 .0625rem var(--tui-base-03)}:host[data-appearance=primary] .field-with-button{background-color:var(--tui-warning-bg)}:host .field-with-button:has(._invalid){background-color:var(--tui-error-bg)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "component", type: i5.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "decimal", "precision", "step", "prefix", "postfix"] }, { kind: "directive", type: i5.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "directive", type: i3.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i3.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: i3.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i3.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i3.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TuiFieldErrorPipe, name: "tuiFieldError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScInputQuantityComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-input-quantity', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-loader *ngIf=\"formControl\" class=\"w-full\" [overlay]=\"true\" [showLoader]=\"showLoader\" [size]=\"size\">\n    <div class=\"flex items-center text-center gap-1\">\n        <div class=\"field-with-button flex grow rounded-tui-radius-l\">\n            <button\n                tuiIconButton\n                tuiMode=\"onLight\"\n                [appearance]=\"appearance\"\n                [disabled]=\"!numberInput.canDecrement\"\n                [focusable]=\"false\"\n                [size]=\"size\"\n                (click.prevent)=\"decrement()\"\n                (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n            >\n                <tui-svg src=\"scIconMinus\"></tui-svg>\n            </button>\n            <tui-input-number\n                #numberInput\n                [formControl]=\"formControl\"\n                [tuiHint]=\"([] | tuiFieldError | async )?.message\"\n                [tuiTextfieldPostfix]=\"quantityUnit || ''\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                [min]=\"0\"\n                [tuiTextfieldSize]=\"size\"\n                [required]=\"true\"\n                [style.text-align]=\"'center'\"\n                [style.font-weight]=\"700\"\n                class=\"grow\"\n            >\n            </tui-input-number>\n            <button\n                tuiIconButton\n                tuiMode=\"onLight\"\n                [appearance]=\"appearance\"\n                [size]=\"size\"\n                [disabled]=\"!numberInput.canIncrement\"\n                [focusable]=\"false\"\n                (click.prevent)=\"incident()\"\n                (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n            >\n                <tui-svg src=\"scIconPlus\"></tui-svg>\n            </button>\n        </div>\n        <button\n            *ngIf=\"showCross\"\n            tuiIconButton\n            tuiMode=\"onLight\"\n            [appearance]=\"appearance\"\n            [size]=\"size\"\n            [disabled]=\"!numberInput.canIncrement\"\n            [focusable]=\"false\"\n            (click.prevent)=\"numberInput.onArrow(-(numberInput.value || 0))\"\n            (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n        >\n            <tui-svg src=\"scIconCross\"></tui-svg>\n        </button>\n    </div>\n</tui-loader>\n", styles: [":host [data-size=l]{--tui-height-l: var(--tui-height-m);--tui-font-text-m: bold .875rem/1.25rem var(--tui-font-text);--tui-padding-l: 0}:host [data-size=m]{--tui-height-m: var(--tui-height-s);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-m: 0}:host [data-size=m] tui-svg{font-size:12px!important}:host [data-size=s]{--tui-height-s: var(--tui-height-xs);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-s: 0}:host [data-size=s] tui-svg{font-size:12px!important}:host[data-disabled=true]{pointer-events:none;opacity:var(--tui-disabled-opacity)}:host[data-appearance=secondary] .field-with-button{background-color:var(--tui-base-01);box-shadow:inset 0 0 0 .0625rem var(--tui-base-03)}:host[data-appearance=primary] .field-with-button{background-color:var(--tui-warning-bg)}:host .field-with-button:has(._invalid){background-color:var(--tui-error-bg)}\n"] }]
+            args: [{ selector: 'sc-input-quantity', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-loader *ngIf=\"formControl\" class=\"w-full\" [overlay]=\"true\" [showLoader]=\"showLoader\" [size]=\"size\">\n    <div class=\"flex items-center text-center gap-1\">\n        <div class=\"field-with-button flex grow rounded-xl\">\n            <button\n                tuiIconButton\n                tuiMode=\"onLight\"\n                [appearance]=\"appearance\"\n                [disabled]=\"!numberInput.canDecrement\"\n                [focusable]=\"false\"\n                [size]=\"size\"\n                (click.prevent)=\"decrement()\"\n                (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n            >\n                <tui-svg src=\"scIconMinus\"></tui-svg>\n            </button>\n            <tui-input-number\n                #numberInput\n                [formControl]=\"formControl\"\n                [tuiHint]=\"([] | tuiFieldError | async )?.message\"\n                [tuiTextfieldPostfix]=\"quantityUnit || ''\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                [min]=\"step\"\n                [tuiTextfieldSize]=\"size\"\n                [required]=\"true\"\n                [style.text-align]=\"'center'\"\n                [style.font-weight]=\"700\"\n                class=\"grow\"\n            >\n            </tui-input-number>\n            <button\n                tuiIconButton\n                tuiMode=\"onLight\"\n                [appearance]=\"appearance\"\n                [size]=\"size\"\n                [disabled]=\"!numberInput.canIncrement\"\n                [focusable]=\"false\"\n                (click.prevent)=\"incident()\"\n                (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n            >\n                <tui-svg src=\"scIconPlus\"></tui-svg>\n            </button>\n        </div>\n        <button\n            *ngIf=\"showCross\"\n            tuiIconButton\n            tuiMode=\"onLight\"\n            [appearance]=\"appearance\"\n            [size]=\"size\"\n            [disabled]=\"!numberInput.canIncrement\"\n            [focusable]=\"false\"\n            (click.prevent)=\"clear()\"\n            (mousedown.prevent)=\"numberInput.nativeFocusableElement?.focus()\"\n        >\n            <tui-svg src=\"scIconCross\"></tui-svg>\n        </button>\n    </div>\n</tui-loader>\n", styles: [":host [data-size=l]{--tui-height-l: var(--tui-height-m);--tui-font-text-m: bold .875rem/1.25rem var(--tui-font-text);--tui-padding-l: 0}:host [data-size=m]{--tui-height-m: var(--tui-height-s);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-m: 0}:host [data-size=m] tui-svg{font-size:12px!important}:host [data-size=s]{--tui-height-s: var(--tui-height-xs);--tui-font-text-s: bold .75rem/1rem var(--tui-font-text);--tui-padding-s: 0}:host [data-size=s] tui-svg{font-size:12px!important}:host[data-disabled=true]{pointer-events:none;opacity:var(--tui-disabled-opacity)}:host[data-appearance=secondary] .field-with-button{background-color:var(--tui-base-01);box-shadow:inset 0 0 0 .0625rem var(--tui-base-03)}:host[data-appearance=primary] .field-with-button{background-color:var(--tui-warning-bg)}:host .field-with-button:has(._invalid){background-color:var(--tui-error-bg)}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i4.NgControl, decorators: [{
                         type: Optional
@@ -387,6 +448,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }, {
                 type: HostBinding,
                 args: ['attr.data-size']
+            }], clickClearEvent: [{
+                type: Output
             }], onArrow: [{
                 type: HostListener,
                 args: ['keydown.arrowDown', ['-step']]
@@ -421,7 +484,7 @@ class ScPriceWarehouseStockComponent {
     }
 }
 ScPriceWarehouseStockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceWarehouseStockComponent, deps: [{ token: i1.ScWarehouseService }], target: i0.ɵɵFactoryTarget.Component });
-ScPriceWarehouseStockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: { classList: "classList", product: "product", withStockHint: "withStockHint" }, ngImport: i0, template: "<ng-container *ngIf=\"product\">\n    <ng-container>\n        <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex items-center gap-1\">\n            <span *ngIf=\"product.getNotStockMessage(warehouseSelect) as message\" class=\"text-xs min-w-2/5 text-tui-error-fill\" [ngClass]=\"classList\"> {{ message }} </span>\n            <span *ngIf=\"product.isWarehouseStockExist(warehouseSelect.id)\" class=\"text-xs min-w-2/5 text-tui-success-fill\" [ngClass]=\"classList\">\n                \u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438<ng-container *ngIf=\"product.getWarehouseStockCount(warehouseSelect.id) as count\"\n                    >:\n                    <span class=\"whitespace-nowrap\">{{ count }} {{ product.quantityUnit }}</span>\n                </ng-container>\n            </span>\n            <span *ngIf=\"product.onOrder\" class=\"text-xs min-w-2/5 text-sc-yellow\" [ngClass]=\"classList\">\u041F\u043E\u0434 \u0437\u0430\u043A\u0430\u0437</span>\n\n            <tui-svg\n                *ngIf=\"withStockHint && (stockByWarehouses$ | async)?.length\"\n                src=\"tuiIconInfoLarge\"\n                [tuiHint]=\"stockHint\"\n                [tuiHintShowDelay]=\"100\"\n                tuiHintDirection=\"top\"\n                class=\"!text-xs !h-3\"\n            ></tui-svg>\n        </div>\n    </ng-container>\n</ng-container>\n\n<ng-template #stockHint>\n    <table *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"text-xs table-auto\" [ngClass]=\"classList\">\n        <tbody>\n            <tr *ngFor=\"let item of stockByWarehouses$ | async\" class=\"border-b\" [class.text-tui-primary]=\"warehouseSelect === item[0]\">\n                <ng-container>\n                    <td class=\"px-1\">{{ item[0]?.name }}:</td>\n                    <td class=\"px-1\">{{ item[1].count ? item[1].count + ' ' + product.quantityUnit : '\u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438' }}</td>\n                </ng-container>\n            </tr>\n        </tbody>\n    </table>\n</ng-template>\n", styles: ["[tuiIconButton]{--tui-radius-m: .75rem;--tui-height-xs: 1.25rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i2.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i2.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i2.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i2.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScPriceWarehouseStockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: { classList: "classList", product: "product", withStockHint: "withStockHint" }, ngImport: i0, template: "<ng-container *ngIf=\"product\">\n    <ng-container>\n        <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex items-center gap-1\">\n            <span *ngIf=\"product.getNotStockMessage(warehouseSelect) as message\" class=\"text-xs min-w-2/5 text-tui-error-fill\" [ngClass]=\"classList\"> {{ message }} </span>\n            <span *ngIf=\"product.isWarehouseStockExist(warehouseSelect.id)\" class=\"text-xs min-w-2/5 text-tui-success-fill\" [ngClass]=\"classList\">\n                \u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438<ng-container *ngIf=\"product.getWarehouseStockCount(warehouseSelect.id) as count\"\n                    >:\n                    <span class=\"whitespace-nowrap\">{{ count }} {{ product.quantityUnit }}</span>\n                </ng-container>\n            </span>\n            <span *ngIf=\"product.onOrder\" class=\"text-xs min-w-2/5 text-sc-yellow\" [ngClass]=\"classList\">\u041F\u043E\u0434 \u0437\u0430\u043A\u0430\u0437</span>\n\n            <tui-svg\n                *ngIf=\"withStockHint && (stockByWarehouses$ | async)?.length\"\n                src=\"tuiIconInfoLarge\"\n                [tuiHint]=\"stockHint\"\n                [tuiHintShowDelay]=\"100\"\n                tuiHintDirection=\"top\"\n                class=\"!text-xs !h-3\"\n            ></tui-svg>\n        </div>\n    </ng-container>\n</ng-container>\n\n<ng-template #stockHint>\n    <table *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"text-xs table-auto\" [ngClass]=\"classList\">\n        <tbody>\n            <tr *ngFor=\"let item of stockByWarehouses$ | async\" class=\"border-b\" [class.text-tui-primary]=\"warehouseSelect === item[0]\">\n                <ng-container>\n                    <td class=\"px-1\">{{ item[0]?.name }}:</td>\n                    <td class=\"px-1\">{{ item[1].count ? item[1].count + ' ' + product.quantityUnit : '\u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438' }}</td>\n                </ng-container>\n            </tr>\n        </tbody>\n    </table>\n</ng-template>\n", styles: ["[tuiIconButton]{--tui-radius-m: .75rem;--tui-height-xs: 1.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i3.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceWarehouseStockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sc-price-warehouse-stock', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"product\">\n    <ng-container>\n        <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex items-center gap-1\">\n            <span *ngIf=\"product.getNotStockMessage(warehouseSelect) as message\" class=\"text-xs min-w-2/5 text-tui-error-fill\" [ngClass]=\"classList\"> {{ message }} </span>\n            <span *ngIf=\"product.isWarehouseStockExist(warehouseSelect.id)\" class=\"text-xs min-w-2/5 text-tui-success-fill\" [ngClass]=\"classList\">\n                \u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438<ng-container *ngIf=\"product.getWarehouseStockCount(warehouseSelect.id) as count\"\n                    >:\n                    <span class=\"whitespace-nowrap\">{{ count }} {{ product.quantityUnit }}</span>\n                </ng-container>\n            </span>\n            <span *ngIf=\"product.onOrder\" class=\"text-xs min-w-2/5 text-sc-yellow\" [ngClass]=\"classList\">\u041F\u043E\u0434 \u0437\u0430\u043A\u0430\u0437</span>\n\n            <tui-svg\n                *ngIf=\"withStockHint && (stockByWarehouses$ | async)?.length\"\n                src=\"tuiIconInfoLarge\"\n                [tuiHint]=\"stockHint\"\n                [tuiHintShowDelay]=\"100\"\n                tuiHintDirection=\"top\"\n                class=\"!text-xs !h-3\"\n            ></tui-svg>\n        </div>\n    </ng-container>\n</ng-container>\n\n<ng-template #stockHint>\n    <table *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"text-xs table-auto\" [ngClass]=\"classList\">\n        <tbody>\n            <tr *ngFor=\"let item of stockByWarehouses$ | async\" class=\"border-b\" [class.text-tui-primary]=\"warehouseSelect === item[0]\">\n                <ng-container>\n                    <td class=\"px-1\">{{ item[0]?.name }}:</td>\n                    <td class=\"px-1\">{{ item[1].count ? item[1].count + ' ' + product.quantityUnit : '\u0412 \u043D\u0430\u043B\u0438\u0447\u0438\u0438' }}</td>\n                </ng-container>\n            </tr>\n        </tbody>\n    </table>\n</ng-template>\n", styles: ["[tuiIconButton]{--tui-radius-m: .75rem;--tui-height-xs: 1.25rem}\n"] }]
@@ -440,16 +503,24 @@ class ScCartItemMobileComponent {
     /**
      * Инициирует экземпляр класса {@link ScCartItemMobileComponent}.
      *
+     * @param unitsHelper Объект-хэлпер для работы со значениями единиц измерения товара.
      * @param previewDialogService Сервис диалогового окна предварительного просмотра.
      * @param urls Список ссылок на разделы backend'a.
      * @param pathImageNotFound Путь до изображения 'Товар не найден'.
-     * @param linearValues Единицы измерения линейной величины.
      */
-    constructor(previewDialogService, urls, pathImageNotFound, linearValues) {
+    constructor(unitsHelper, previewDialogService, urls, pathImageNotFound) {
+        this.unitsHelper = unitsHelper;
         this.previewDialogService = previewDialogService;
         this.urls = urls;
         this.pathImageNotFound = pathImageNotFound;
-        this.linearValues = linearValues;
+        /**
+         * {@link FormControl} поля ввода количества товара в корзине.
+         */
+        this.quantityControl = new FormControl(0);
+        /**
+         * {@link Observable} изменения количества товара в корзине.
+         */
+        this.quantityValueChanges = this.quantityControl.valueChanges.pipe(skip(1));
         /**
          * Событие нажатия на кнопку "Удалить из корзины".
          */
@@ -463,15 +534,30 @@ class ScCartItemMobileComponent {
          */
         this.clickCardEvent = new EventEmitter();
     }
+    /**
+     * Элемент корзины.
+     */
+    set cartItem(data) {
+        this._cartItem = data;
+        if (data) {
+            this.quantityControl.patchValue(data.quantity);
+        }
+    }
+    /**
+     * Элемент корзины.
+     */
+    get cartItem() {
+        return this._cartItem;
+    }
     /**
      * Продукт элемента корзины.
      */
     get product() {
-        return this.cartItem.product;
+        var _a;
+        return (_a = this.cartItem) === null || _a === void 0 ? void 0 : _a.product;
     }
     /** @inheritDoc */
     ngOnInit() {
-        this.quantityControl = new FormControl(this.cartItem.quantity);
         this.quantityValueChanges = this.quantityControl.valueChanges;
     }
     /**
@@ -480,12 +566,6 @@ class ScCartItemMobileComponent {
     showSpecification() {
         this.previewDialogService.open(this.specificationPreviewRef || '').subscribe();
     }
-    /**
-     * Возвращает признак возможности продажи товара на метраж.
-     */
-    productIsMeasurable() {
-        return this.product.minCount && !this.linearValues.includes(this.product.unit) ? this.product.minCount : 1;
-    }
     /**
      * Возвращает ссылку на изображение карточки товара.
      */
@@ -494,13 +574,13 @@ class ScCartItemMobileComponent {
         return (_b = (_a = this.product) === null || _a === void 0 ? void 0 : _a.getImage(this.urls.imgServerUrl)) !== null && _b !== void 0 ? _b : this.urls.imgServerUrl + this.pathImageNotFound;
     }
 }
-ScCartItemMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, deps: [{ token: TuiPreviewDialogService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }, { token: SC_LINEAR_VALUES_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-ScCartItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCartItemMobileComponent, selector: "sc-cart-item-mobile", inputs: { cartItem: "cartItem" }, outputs: { quantityValueChanges: "quantityValueChanges", clickDeleteEvent: "clickDeleteEvent", clickSettingsEvent: "clickSettingsEvent", clickCardEvent: "clickCardEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], ngImport: i0, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <button tuiIconButton (click)=\"clickDeleteEvent.emit()\" size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n    <button tuiIconButton size=\"m\" icon=\"scIconBasket\" appearance=\"secondary\" tuiMode=\"onLight\" class=\"shadow-sc-2 !absolute -left-2 -top-2\"></button>\n    <div class=\"flex gap-2\">\n        <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n        </div>\n\n        <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n            <div class=\"w-[13rem]\">\n                <a tuiLink (click)=\"clickCardEvent.emit()\">\n                    <span class=\"font-bold\">{{ product.name }}</span>\n                </a>\n                <div class=\"text-tui-base-07 text-xs\">\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ cartItem.product.code }}</p>\n                    <p *ngIf=\"cartItem.product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ cartItem.product.pack }}</p>\n                    <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                    <ng-template #specificationPreview let-preview>\n                        <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n                            <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" alt=\"\" [src]=\"cartItem.specificationImgUrl\" />\n                            <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n                        </tui-preview>\n                    </ng-template>\n                </div>\n            </div>\n            <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n                <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-base-07\">\n                    <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                    <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                    <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                    <ng-template #discountHint>\n                        <div class=\"font-bold\">{{ product.discount.name }}</div>\n                        <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                    </ng-template>\n                </span>\n                <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                    <span>{{ product.costRubString }}</span>\n                    <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-base-07\">{{ product.costString }}</span>\n                </p>\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"flex gap-2 items-center w-44 text-xs text-tui-base-07\">\n        <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n        <div>\n            <ng-container *ngIf=\"productIsMeasurable(); else notMeasurable\">\n                <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ cartItem.product.unit }}</p>\n            </ng-container>\n            <ng-template #notMeasurable>\n                <p *ngIf=\"cartItem.length && !productIsMeasurable()\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n            </ng-template>\n        </div>\n    </div>\n    <div class=\"flex items-center grow justify-end\">\n        <sc-input-quantity\n            class=\"w-28\"\n            *ngIf=\"quantityControl\"\n            [formControl]=\"quantityControl\"\n            [quantityUnit]=\"product.quantityUnit\"\n            [showCross]=\"false\"\n            size=\"s\"\n            [step]=\"product.minCount || 1\"\n        ></sc-input-quantity>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "component", type: i2.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i2.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i2.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i2.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i2.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i2.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i2.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6$1.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i6$1.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i7.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+ScCartItemMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, deps: [{ token: UnitsHelper }, { token: TuiPreviewDialogService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }], target: i0.ɵɵFactoryTarget.Component });
+ScCartItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCartItemMobileComponent, selector: "sc-cart-item-mobile", inputs: { cartItem: "cartItem" }, outputs: { quantityValueChanges: "quantityValueChanges", clickDeleteEvent: "clickDeleteEvent", clickSettingsEvent: "clickSettingsEvent", clickCardEvent: "clickCardEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], ngImport: i0, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <ng-container *ngIf=\"cartItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickDeleteEvent.emit()\"\n            size=\"m\"\n            icon=\"scIconVerticalThreeDots\"\n            appearance=\"float\"\n            tuiMode=\"onLight\"\n            class=\"!absolute right-0 top-0\"\n        ></button>\n        <button tuiIconButton size=\"m\" icon=\"scIconBasket\" appearance=\"secondary\" tuiMode=\"onLight\" class=\"shadow-sc-2 !absolute -left-2 -top-2\"></button>\n        <div class=\"flex gap-2\">\n            <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n                <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            </div>\n\n            <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n                <div class=\"w-[13rem]\">\n                    <a tuiLink (click)=\"clickCardEvent.emit()\">\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"text-tui-text-02 text-xs\">\n                        <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                        <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                        <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                        <ng-template #specificationPreview let-preview>\n                            <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n                                <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" alt=\"\" [src]=\"cartItem.specificationImgUrl\" />\n                                <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n                </div>\n                <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n                    <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                        <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                        <ng-template #discountHint>\n                            <div class=\"font-bold\">{{ product.discount.name }}</div>\n                            <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                        </ng-template>\n                    </span>\n                    <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                        <span>{{ product.costRubString }}</span>\n                        <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n                    </p>\n                    <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n            <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n            <div>\n                <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n                    <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n                </ng-container>\n                <ng-template #notMeasurable>\n                    <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                    <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                    <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n                </ng-template>\n            </div>\n        </div>\n        <div class=\"flex items-center grow justify-end\">\n            <sc-input-quantity\n                class=\"w-28\"\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"product.quantityUnit\"\n                [showCross]=\"false\"\n                size=\"s\"\n                [step]=\"product.minCount || 1\"\n            ></sc-input-quantity>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex gap-2 w-full\">\n            <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n            <div class=\"flex flex-col grow gap-2.5 bg-white\">\n                <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "component", type: i3.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i3.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i3.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { kind: "directive", type: i7.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }, { kind: "directive", type: i8.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCartItemMobileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-cart-item-mobile', changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <button tuiIconButton (click)=\"clickDeleteEvent.emit()\" size=\"m\" icon=\"scIconVerticalThreeDots\" appearance=\"float\" tuiMode=\"onLight\" class=\"!absolute right-0 top-0\"></button>\n    <button tuiIconButton size=\"m\" icon=\"scIconBasket\" appearance=\"secondary\" tuiMode=\"onLight\" class=\"shadow-sc-2 !absolute -left-2 -top-2\"></button>\n    <div class=\"flex gap-2\">\n        <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n        </div>\n\n        <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n            <div class=\"w-[13rem]\">\n                <a tuiLink (click)=\"clickCardEvent.emit()\">\n                    <span class=\"font-bold\">{{ product.name }}</span>\n                </a>\n                <div class=\"text-tui-base-07 text-xs\">\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ cartItem.product.code }}</p>\n                    <p *ngIf=\"cartItem.product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ cartItem.product.pack }}</p>\n                    <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                    <ng-template #specificationPreview let-preview>\n                        <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n                            <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" alt=\"\" [src]=\"cartItem.specificationImgUrl\" />\n                            <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n                        </tui-preview>\n                    </ng-template>\n                </div>\n            </div>\n            <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n                <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-base-07\">\n                    <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                    <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                    <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                    <ng-template #discountHint>\n                        <div class=\"font-bold\">{{ product.discount.name }}</div>\n                        <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                    </ng-template>\n                </span>\n                <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                    <span>{{ product.costRubString }}</span>\n                    <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-base-07\">{{ product.costString }}</span>\n                </p>\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"flex gap-2 items-center w-44 text-xs text-tui-base-07\">\n        <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n        <div>\n            <ng-container *ngIf=\"productIsMeasurable(); else notMeasurable\">\n                <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ cartItem.product.unit }}</p>\n            </ng-container>\n            <ng-template #notMeasurable>\n                <p *ngIf=\"cartItem.length && !productIsMeasurable()\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n            </ng-template>\n        </div>\n    </div>\n    <div class=\"flex items-center grow justify-end\">\n        <sc-input-quantity\n            class=\"w-28\"\n            *ngIf=\"quantityControl\"\n            [formControl]=\"quantityControl\"\n            [quantityUnit]=\"product.quantityUnit\"\n            [showCross]=\"false\"\n            size=\"s\"\n            [step]=\"product.minCount || 1\"\n        ></sc-input-quantity>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'sc-cart-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <ng-container *ngIf=\"cartItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickDeleteEvent.emit()\"\n            size=\"m\"\n            icon=\"scIconVerticalThreeDots\"\n            appearance=\"float\"\n            tuiMode=\"onLight\"\n            class=\"!absolute right-0 top-0\"\n        ></button>\n        <button tuiIconButton size=\"m\" icon=\"scIconBasket\" appearance=\"secondary\" tuiMode=\"onLight\" class=\"shadow-sc-2 !absolute -left-2 -top-2\"></button>\n        <div class=\"flex gap-2\">\n            <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n                <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            </div>\n\n            <div class=\"flex flex-wrap self-center gap-x-8 gap-y-0.5\">\n                <div class=\"w-[13rem]\">\n                    <a tuiLink (click)=\"clickCardEvent.emit()\">\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"text-tui-text-02 text-xs\">\n                        <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                        <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                        <a tuiLink *ngIf=\"cartItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                        <ng-template #specificationPreview let-preview>\n                            <tui-preview [rotatable]=\"false\" [zoomable]=\"false\">\n                                <img *polymorpheusOutlet=\"cartItem.specificationImgUrl as src\" alt=\"preview\" alt=\"\" [src]=\"cartItem.specificationImgUrl\" />\n                                <button icon=\"tuiIconClose\" title=\"Close\" tuiIconButton tuiPreviewAction type=\"button\" (click)=\"preview.complete()\"></button>\n                            </tui-preview>\n                        </ng-template>\n                    </div>\n                </div>\n                <div class=\"flex flex-col self-center w-[10rem] gap-x-8 gap-y-0.5\">\n                    <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                        <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                        <ng-template #discountHint>\n                            <div class=\"font-bold\">{{ product.discount.name }}</div>\n                            <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                        </ng-template>\n                    </span>\n                    <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                        <span>{{ product.costRubString }}</span>\n                        <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n                    </p>\n                    <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex gap-2 items-center w-44 text-xs text-tui-text-02\">\n            <button tuiIconButton (click)=\"clickSettingsEvent.emit()\" size=\"m\" icon=\"scIconSettings\" appearance=\"secondary\" tuiMode=\"onLight\"></button>\n            <div>\n                <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n                    <p>\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} {{ product.unit }}</p>\n                </ng-container>\n                <ng-template #notMeasurable>\n                    <p *ngIf=\"cartItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ cartItem.length }} \u043C.</p>\n                    <p *ngIf=\"cartItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ cartItem.width }} \u043C.</p>\n                    <p *ngIf=\"cartItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ cartItem.height }} \u043C.</p>\n                </ng-template>\n            </div>\n        </div>\n        <div class=\"flex items-center grow justify-end\">\n            <sc-input-quantity\n                class=\"w-28\"\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"product.quantityUnit\"\n                [showCross]=\"false\"\n                size=\"s\"\n                [step]=\"product.minCount || 1\"\n            ></sc-input-quantity>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex gap-2 w-full\">\n            <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n            <div class=\"flex flex-col grow gap-2.5 bg-white\">\n                <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n" }]
         }], ctorParameters: function () {
-        return [{ type: i6$1.TuiPreviewDialogService, decorators: [{
+        return [{ type: UnitsHelper }, { type: i7.TuiPreviewDialogService, decorators: [{
                         type: Inject,
                         args: [TuiPreviewDialogService]
                     }] }, { type: undefined, decorators: [{
@@ -509,9 +589,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     }] }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [SC_PATH_IMAGE_NOT_FOUND]
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [SC_LINEAR_VALUES_TOKEN]
                     }] }];
     }, propDecorators: { specificationPreviewRef: [{
                 type: ViewChild,
@@ -541,10 +618,10 @@ class ScFavoriteBtnComponent {
     }
 }
 ScFavoriteBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScFavoriteBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ScFavoriteBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button tuiIconButton (click)=\"clickEvent.emit()\" appearance=\"flat\" size=\"s\">\n    <tui-svg class=\"text-tui-primary\" src=\"tuiIconBookmarkLarge\"></tui-svg>\n</button>\n", styles: ["*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: \"\"}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.\\!absolute{position:absolute!important}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.-bottom-4{bottom:-1rem}.-left-2{left:-.5rem}.-right-4{right:-1rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.left-1{left:.25rem}.left-3{left:.75rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-3{top:.75rem}.isolate{isolation:isolate}.z-10{z-index:10}.m-3{margin:.75rem}.m-8{margin:2rem}.mb-2{margin-bottom:.5rem}.mb-2\\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.\\!block{display:block!important}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.\\!hidden{display:none!important}.hidden{display:none}.\\!h-3{height:.75rem!important}.\\!h-4{height:1rem!important}.\\!h-5{height:1.25rem!important}.h-20{height:5rem}.h-3{height:.75rem}.h-3\\/5{height:60%}.h-32{height:8rem}.h-4{height:1rem}.h-50{height:12.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-82{height:20.5rem}.h-full{height:100%}.\\!w-5{width:1.25rem!important}.w-20{width:5rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\\/4{width:75%}.w-3\\/5{width:60%}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-70{width:17.5rem}.w-8{width:2rem}.w-96{width:24rem}.w-\\[10rem\\]{width:10rem}.w-\\[13rem\\]{width:13rem}.w-\\[21rem\\]{width:21rem}.w-\\[34rem\\]{width:34rem}.w-\\[46rem\\]{width:46rem}.w-\\[54rem\\]{width:54rem}.w-full{width:100%}.flex-auto{flex:1 1 auto}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.basis-min-content{flex-basis:min-content}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.content-between{align-content:space-between}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}.gap-x-2{column-gap:.5rem}.gap-x-4{column-gap:1rem}.gap-x-8{column-gap:2rem}.gap-y-0{row-gap:0px}.gap-y-0\\.5{row-gap:.125rem}.gap-y-2{row-gap:.5rem}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-tui-radius-l{border-radius:var(--tui-radius-l)}.rounded-tui-radius-m{border-radius:var(--tui-radius-m)}.rounded-tui-radius-s{border-radius:var(--tui-radius-s)}.rounded-xl{border-radius:.75rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-tui-base-04{border-color:var(--tui-base-04)}.bg-tui-base-02{background-color:var(--tui-base-02)}.bg-tui-base-03{background-color:var(--tui-base-03)}.bg-tui-error-fill{background-color:var(--tui-error-fill)}.bg-tui-primary{background-color:var(--tui-primary)}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.object-cover{object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-4\\.5{padding-top:1.125rem;padding-bottom:1.125rem}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.\\!text-2xl{font-size:1.5rem!important;line-height:2rem!important}.\\!text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.ordinal{--tw-ordinal: ordinal;font-feature-settings:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-tui-base-07{color:var(--tui-base-07)}.text-tui-base-09{color:var(--tui-base-09)}.text-tui-error-fill{color:var(--tui-error-fill)}.text-tui-link{color:var(--tui-link)}.text-tui-primary{color:var(--tui-primary)}.text-tui-success-fill{color:var(--tui-success-fill)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-1{--tw-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 5px 20px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-2{--tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia: sepia(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.\\!transition-all{transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\\!duration-500{transition-duration:.5s!important}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\[fs\\:0\\]{fs:0}.\\[k\\:string\\]{k:string}.hover\\:text-tui-link-hover:hover{color:var(--tui-link-hover)}.group:hover .group-hover\\:block{display:block}\n"], dependencies: [{ kind: "component", type: i2.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i2.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScFavoriteBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button tuiIconButton (click)=\"clickEvent.emit()\" appearance=\"flat\" size=\"s\">\n    <tui-svg class=\"text-tui-primary\" src=\"tuiIconBookmarkLarge\"></tui-svg>\n</button>\n", dependencies: [{ kind: "component", type: i3.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScFavoriteBtnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-favorite-btn', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button tuiIconButton (click)=\"clickEvent.emit()\" appearance=\"flat\" size=\"s\">\n    <tui-svg class=\"text-tui-primary\" src=\"tuiIconBookmarkLarge\"></tui-svg>\n</button>\n", styles: ["*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: \"\"}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.\\!absolute{position:absolute!important}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.-bottom-4{bottom:-1rem}.-left-2{left:-.5rem}.-right-4{right:-1rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.left-1{left:.25rem}.left-3{left:.75rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-3{top:.75rem}.isolate{isolation:isolate}.z-10{z-index:10}.m-3{margin:.75rem}.m-8{margin:2rem}.mb-2{margin-bottom:.5rem}.mb-2\\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.\\!block{display:block!important}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.\\!hidden{display:none!important}.hidden{display:none}.\\!h-3{height:.75rem!important}.\\!h-4{height:1rem!important}.\\!h-5{height:1.25rem!important}.h-20{height:5rem}.h-3{height:.75rem}.h-3\\/5{height:60%}.h-32{height:8rem}.h-4{height:1rem}.h-50{height:12.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-82{height:20.5rem}.h-full{height:100%}.\\!w-5{width:1.25rem!important}.w-20{width:5rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\\/4{width:75%}.w-3\\/5{width:60%}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-70{width:17.5rem}.w-8{width:2rem}.w-96{width:24rem}.w-\\[10rem\\]{width:10rem}.w-\\[13rem\\]{width:13rem}.w-\\[21rem\\]{width:21rem}.w-\\[34rem\\]{width:34rem}.w-\\[46rem\\]{width:46rem}.w-\\[54rem\\]{width:54rem}.w-full{width:100%}.flex-auto{flex:1 1 auto}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.basis-min-content{flex-basis:min-content}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.content-between{align-content:space-between}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}.gap-x-2{column-gap:.5rem}.gap-x-4{column-gap:1rem}.gap-x-8{column-gap:2rem}.gap-y-0{row-gap:0px}.gap-y-0\\.5{row-gap:.125rem}.gap-y-2{row-gap:.5rem}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-tui-radius-l{border-radius:var(--tui-radius-l)}.rounded-tui-radius-m{border-radius:var(--tui-radius-m)}.rounded-tui-radius-s{border-radius:var(--tui-radius-s)}.rounded-xl{border-radius:.75rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-tui-base-04{border-color:var(--tui-base-04)}.bg-tui-base-02{background-color:var(--tui-base-02)}.bg-tui-base-03{background-color:var(--tui-base-03)}.bg-tui-error-fill{background-color:var(--tui-error-fill)}.bg-tui-primary{background-color:var(--tui-primary)}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.object-cover{object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-4\\.5{padding-top:1.125rem;padding-bottom:1.125rem}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.\\!text-2xl{font-size:1.5rem!important;line-height:2rem!important}.\\!text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.ordinal{--tw-ordinal: ordinal;font-feature-settings:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-tui-base-07{color:var(--tui-base-07)}.text-tui-base-09{color:var(--tui-base-09)}.text-tui-error-fill{color:var(--tui-error-fill)}.text-tui-link{color:var(--tui-link)}.text-tui-primary{color:var(--tui-primary)}.text-tui-success-fill{color:var(--tui-success-fill)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-1{--tw-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 5px 20px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-2{--tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia: sepia(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.\\!transition-all{transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\\!duration-500{transition-duration:.5s!important}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\[fs\\:0\\]{fs:0}.\\[k\\:string\\]{k:string}.hover\\:text-tui-link-hover:hover{color:var(--tui-link-hover)}.group:hover .group-hover\\:block{display:block}\n"] }]
+            args: [{ selector: 'sc-favorite-btn', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button tuiIconButton (click)=\"clickEvent.emit()\" appearance=\"flat\" size=\"s\">\n    <tui-svg class=\"text-tui-primary\" src=\"tuiIconBookmarkLarge\"></tui-svg>\n</button>\n" }]
         }], propDecorators: { clickEvent: [{
                 type: Output
             }] } });
@@ -616,10 +693,10 @@ class ScCategoryCardComponent {
     }
 }
 ScCategoryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoryCardComponent, deps: [{ token: SC_URLS }, { token: i0.Renderer2 }, { token: SC_PATH_IMAGE_NOT_FOUND }], target: i0.ɵɵFactoryTarget.Component });
-ScCategoryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoryCardComponent, selector: "sc-category-card", inputs: { category: "category", size: "size", isSkeleton: "isSkeleton", showFavoriteBtn: "showFavoriteBtn", isHovered: "isHovered" }, outputs: { clickOnCardEvent: "clickOnCardEvent", clickOnFavoriteEvent: "clickOnFavoriteEvent" }, host: { listeners: { "mousemove": "moveEnterHandler()", "mouseleave": "mouseLeaveHandler()" }, properties: { "attr.data-size": "this.size" } }, viewQueries: [{ propertyName: "name", first: true, predicate: ["name"], descendants: true }], ngImport: i0, template: "<div class=\"relative group\">\n    <button\n        (click)=\"clickOnCardEvent.emit(category)\"\n        [class.pointer-events-none]=\"!category || isSkeleton\"\n        class=\"category-btn flex flex-col relative rounded-tui-radius-m overflow-hidden shadow-sc-2\"\n    >\n        <div class=\"img-wrapper w-full grow bg-tui-base-02 overflow-hidden\">\n            <img *ngIf=\"category && !isSkeleton\" [src]=\"getCategoryImgURL(category)\" [alt]=\"category.name\" />\n        </div>\n        <div #name [attr.data-is-hovered]=\"!isHovered\" class=\"name grid items-center justify-center font-bold bg-white w-full overflow-hidden shrink-0 duration-300\">\n            <span *ngIf=\"category && !isSkeleton; else skeletonName\">{{ category.name }}</span>\n            <ng-template #skeletonName>\n                <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n            </ng-template>\n        </div>\n    </button>\n    <sc-favorite-btn *ngIf=\"category && !isSkeleton && showFavoriteBtn\" (clickEvent)=\"clickOnFavoriteEvent.emit()\" class=\"absolute left-1 top-1\"></sc-favorite-btn>\n</div>\n", styles: [":host[data-size=m] button.category-btn{width:12.5rem;height:12.5rem}:host[data-size=m] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=m] button.category-btn .name{min-height:2.5rem;padding-inline:.75rem;margin-block:.75rem}:host[data-size=m] button.category-btn .name:not([data-is-hovered=true]){max-height:2.5rem}:host[data-size=m] button.category-btn .name .skeleton-name{width:10rem;height:1rem}:host[data-size=s] button.category-btn{width:10rem;height:10rem}:host[data-size=s] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=s] button.category-btn .name{min-height:2rem;font-size:.75rem;line-height:1rem;padding-inline:.5rem;margin-block:.5rem}:host[data-size=s] button.category-btn .name:not([data-is-hovered=true]){max-height:2rem}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n", "*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: \"\"}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.\\!absolute{position:absolute!important}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.-bottom-4{bottom:-1rem}.-left-2{left:-.5rem}.-right-4{right:-1rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.left-1{left:.25rem}.left-3{left:.75rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-3{top:.75rem}.isolate{isolation:isolate}.z-10{z-index:10}.m-3{margin:.75rem}.m-8{margin:2rem}.mb-2{margin-bottom:.5rem}.mb-2\\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.\\!block{display:block!important}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.\\!hidden{display:none!important}.hidden{display:none}.\\!h-3{height:.75rem!important}.\\!h-4{height:1rem!important}.\\!h-5{height:1.25rem!important}.h-20{height:5rem}.h-3{height:.75rem}.h-3\\/5{height:60%}.h-32{height:8rem}.h-4{height:1rem}.h-50{height:12.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-82{height:20.5rem}.h-full{height:100%}.\\!w-5{width:1.25rem!important}.w-20{width:5rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\\/4{width:75%}.w-3\\/5{width:60%}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-70{width:17.5rem}.w-8{width:2rem}.w-96{width:24rem}.w-\\[10rem\\]{width:10rem}.w-\\[13rem\\]{width:13rem}.w-\\[21rem\\]{width:21rem}.w-\\[34rem\\]{width:34rem}.w-\\[46rem\\]{width:46rem}.w-\\[54rem\\]{width:54rem}.w-full{width:100%}.flex-auto{flex:1 1 auto}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.basis-min-content{flex-basis:min-content}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.content-between{align-content:space-between}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}.gap-x-2{column-gap:.5rem}.gap-x-4{column-gap:1rem}.gap-x-8{column-gap:2rem}.gap-y-0{row-gap:0px}.gap-y-0\\.5{row-gap:.125rem}.gap-y-2{row-gap:.5rem}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-tui-radius-l{border-radius:var(--tui-radius-l)}.rounded-tui-radius-m{border-radius:var(--tui-radius-m)}.rounded-tui-radius-s{border-radius:var(--tui-radius-s)}.rounded-xl{border-radius:.75rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-tui-base-04{border-color:var(--tui-base-04)}.bg-tui-base-02{background-color:var(--tui-base-02)}.bg-tui-base-03{background-color:var(--tui-base-03)}.bg-tui-error-fill{background-color:var(--tui-error-fill)}.bg-tui-primary{background-color:var(--tui-primary)}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.object-cover{object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-4\\.5{padding-top:1.125rem;padding-bottom:1.125rem}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.\\!text-2xl{font-size:1.5rem!important;line-height:2rem!important}.\\!text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.ordinal{--tw-ordinal: ordinal;font-feature-settings:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-tui-base-07{color:var(--tui-base-07)}.text-tui-base-09{color:var(--tui-base-09)}.text-tui-error-fill{color:var(--tui-error-fill)}.text-tui-link{color:var(--tui-link)}.text-tui-primary{color:var(--tui-primary)}.text-tui-success-fill{color:var(--tui-success-fill)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-1{--tw-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 5px 20px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-2{--tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia: sepia(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.\\!transition-all{transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\\!duration-500{transition-duration:.5s!important}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\[fs\\:0\\]{fs:0}.\\[k\\:string\\]{k:string}.hover\\:text-tui-link-hover:hover{color:var(--tui-link-hover)}.group:hover .group-hover\\:block{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScCategoryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScCategoryCardComponent, selector: "sc-category-card", inputs: { category: "category", size: "size", isSkeleton: "isSkeleton", showFavoriteBtn: "showFavoriteBtn", isHovered: "isHovered" }, outputs: { clickOnCardEvent: "clickOnCardEvent", clickOnFavoriteEvent: "clickOnFavoriteEvent" }, host: { listeners: { "mousemove": "moveEnterHandler()", "mouseleave": "mouseLeaveHandler()" }, properties: { "attr.data-size": "this.size" } }, viewQueries: [{ propertyName: "name", first: true, predicate: ["name"], descendants: true }], ngImport: i0, template: "<div class=\"relative group\">\n    <button\n        (click)=\"clickOnCardEvent.emit(category)\"\n        [class.pointer-events-none]=\"!category || isSkeleton\"\n        class=\"category-btn flex flex-col relative rounded-tui-radius-m overflow-hidden shadow-sc-2\"\n    >\n        <div class=\"img-wrapper w-full grow bg-tui-base-02 overflow-hidden\">\n            <img *ngIf=\"category && !isSkeleton\" [src]=\"getCategoryImgURL(category)\" [alt]=\"category.name\" />\n        </div>\n        <div #name [attr.data-is-hovered]=\"!isHovered\" class=\"name grid items-center justify-center font-bold bg-white w-full overflow-hidden shrink-0 duration-300\">\n            <span *ngIf=\"category && !isSkeleton; else skeletonName\">{{ category.name }}</span>\n            <ng-template #skeletonName>\n                <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n            </ng-template>\n        </div>\n    </button>\n    <sc-favorite-btn *ngIf=\"category && !isSkeleton && showFavoriteBtn\" (clickEvent)=\"clickOnFavoriteEvent.emit()\" class=\"absolute left-1 top-1\"></sc-favorite-btn>\n</div>\n", styles: [":host[data-size=m] button.category-btn{width:12.5rem;height:12.5rem}:host[data-size=m] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=m] button.category-btn .name{min-height:2.5rem;padding-inline:.75rem;margin-block:.75rem}:host[data-size=m] button.category-btn .name:not([data-is-hovered=true]){max-height:2.5rem}:host[data-size=m] button.category-btn .name .skeleton-name{width:10rem;height:1rem}:host[data-size=s] button.category-btn{width:10rem;height:10rem}:host[data-size=s] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=s] button.category-btn .name{min-height:2rem;font-size:.75rem;line-height:1rem;padding-inline:.5rem;margin-block:.5rem}:host[data-size=s] button.category-btn .name:not([data-is-hovered=true]){max-height:2rem}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCategoryCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-category-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative group\">\n    <button\n        (click)=\"clickOnCardEvent.emit(category)\"\n        [class.pointer-events-none]=\"!category || isSkeleton\"\n        class=\"category-btn flex flex-col relative rounded-tui-radius-m overflow-hidden shadow-sc-2\"\n    >\n        <div class=\"img-wrapper w-full grow bg-tui-base-02 overflow-hidden\">\n            <img *ngIf=\"category && !isSkeleton\" [src]=\"getCategoryImgURL(category)\" [alt]=\"category.name\" />\n        </div>\n        <div #name [attr.data-is-hovered]=\"!isHovered\" class=\"name grid items-center justify-center font-bold bg-white w-full overflow-hidden shrink-0 duration-300\">\n            <span *ngIf=\"category && !isSkeleton; else skeletonName\">{{ category.name }}</span>\n            <ng-template #skeletonName>\n                <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n            </ng-template>\n        </div>\n    </button>\n    <sc-favorite-btn *ngIf=\"category && !isSkeleton && showFavoriteBtn\" (clickEvent)=\"clickOnFavoriteEvent.emit()\" class=\"absolute left-1 top-1\"></sc-favorite-btn>\n</div>\n", styles: [":host[data-size=m] button.category-btn{width:12.5rem;height:12.5rem}:host[data-size=m] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=m] button.category-btn .name{min-height:2.5rem;padding-inline:.75rem;margin-block:.75rem}:host[data-size=m] button.category-btn .name:not([data-is-hovered=true]){max-height:2.5rem}:host[data-size=m] button.category-btn .name .skeleton-name{width:10rem;height:1rem}:host[data-size=s] button.category-btn{width:10rem;height:10rem}:host[data-size=s] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=s] button.category-btn .name{min-height:2rem;font-size:.75rem;line-height:1rem;padding-inline:.5rem;margin-block:.5rem}:host[data-size=s] button.category-btn .name:not([data-is-hovered=true]){max-height:2rem}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n", "*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: \"\"}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.\\!absolute{position:absolute!important}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.-bottom-4{bottom:-1rem}.-left-2{left:-.5rem}.-right-4{right:-1rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.left-1{left:.25rem}.left-3{left:.75rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-3{top:.75rem}.isolate{isolation:isolate}.z-10{z-index:10}.m-3{margin:.75rem}.m-8{margin:2rem}.mb-2{margin-bottom:.5rem}.mb-2\\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.\\!block{display:block!important}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.\\!hidden{display:none!important}.hidden{display:none}.\\!h-3{height:.75rem!important}.\\!h-4{height:1rem!important}.\\!h-5{height:1.25rem!important}.h-20{height:5rem}.h-3{height:.75rem}.h-3\\/5{height:60%}.h-32{height:8rem}.h-4{height:1rem}.h-50{height:12.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-82{height:20.5rem}.h-full{height:100%}.\\!w-5{width:1.25rem!important}.w-20{width:5rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\\/4{width:75%}.w-3\\/5{width:60%}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-70{width:17.5rem}.w-8{width:2rem}.w-96{width:24rem}.w-\\[10rem\\]{width:10rem}.w-\\[13rem\\]{width:13rem}.w-\\[21rem\\]{width:21rem}.w-\\[34rem\\]{width:34rem}.w-\\[46rem\\]{width:46rem}.w-\\[54rem\\]{width:54rem}.w-full{width:100%}.flex-auto{flex:1 1 auto}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.basis-min-content{flex-basis:min-content}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.content-between{align-content:space-between}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}.gap-x-2{column-gap:.5rem}.gap-x-4{column-gap:1rem}.gap-x-8{column-gap:2rem}.gap-y-0{row-gap:0px}.gap-y-0\\.5{row-gap:.125rem}.gap-y-2{row-gap:.5rem}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-tui-radius-l{border-radius:var(--tui-radius-l)}.rounded-tui-radius-m{border-radius:var(--tui-radius-m)}.rounded-tui-radius-s{border-radius:var(--tui-radius-s)}.rounded-xl{border-radius:.75rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-tui-base-04{border-color:var(--tui-base-04)}.bg-tui-base-02{background-color:var(--tui-base-02)}.bg-tui-base-03{background-color:var(--tui-base-03)}.bg-tui-error-fill{background-color:var(--tui-error-fill)}.bg-tui-primary{background-color:var(--tui-primary)}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.object-cover{object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-4\\.5{padding-top:1.125rem;padding-bottom:1.125rem}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.\\!text-2xl{font-size:1.5rem!important;line-height:2rem!important}.\\!text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.ordinal{--tw-ordinal: ordinal;font-feature-settings:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-tui-base-07{color:var(--tui-base-07)}.text-tui-base-09{color:var(--tui-base-09)}.text-tui-error-fill{color:var(--tui-error-fill)}.text-tui-link{color:var(--tui-link)}.text-tui-primary{color:var(--tui-primary)}.text-tui-success-fill{color:var(--tui-success-fill)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-1{--tw-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 5px 20px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-2{--tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia: sepia(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.\\!transition-all{transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\\!duration-500{transition-duration:.5s!important}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\[fs\\:0\\]{fs:0}.\\[k\\:string\\]{k:string}.hover\\:text-tui-link-hover:hover{color:var(--tui-link-hover)}.group:hover .group-hover\\:block{display:block}\n"] }]
+            args: [{ selector: 'sc-category-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative group\">\n    <button\n        (click)=\"clickOnCardEvent.emit(category)\"\n        [class.pointer-events-none]=\"!category || isSkeleton\"\n        class=\"category-btn flex flex-col relative rounded-tui-radius-m overflow-hidden shadow-sc-2\"\n    >\n        <div class=\"img-wrapper w-full grow bg-tui-base-02 overflow-hidden\">\n            <img *ngIf=\"category && !isSkeleton\" [src]=\"getCategoryImgURL(category)\" [alt]=\"category.name\" />\n        </div>\n        <div #name [attr.data-is-hovered]=\"!isHovered\" class=\"name grid items-center justify-center font-bold bg-white w-full overflow-hidden shrink-0 duration-300\">\n            <span *ngIf=\"category && !isSkeleton; else skeletonName\">{{ category.name }}</span>\n            <ng-template #skeletonName>\n                <div class=\"skeleton-name bg-tui-base-02 rounded-tui-radius-s\"></div>\n            </ng-template>\n        </div>\n    </button>\n    <sc-favorite-btn *ngIf=\"category && !isSkeleton && showFavoriteBtn\" (clickEvent)=\"clickOnFavoriteEvent.emit()\" class=\"absolute left-1 top-1\"></sc-favorite-btn>\n</div>\n", styles: [":host[data-size=m] button.category-btn{width:12.5rem;height:12.5rem}:host[data-size=m] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=m] button.category-btn .name{min-height:2.5rem;padding-inline:.75rem;margin-block:.75rem}:host[data-size=m] button.category-btn .name:not([data-is-hovered=true]){max-height:2.5rem}:host[data-size=m] button.category-btn .name .skeleton-name{width:10rem;height:1rem}:host[data-size=s] button.category-btn{width:10rem;height:10rem}:host[data-size=s] button.category-btn .img-wrapper{max-height:8.75rem}:host[data-size=s] button.category-btn .name{min-height:2rem;font-size:.75rem;line-height:1rem;padding-inline:.5rem;margin-block:.5rem}:host[data-size=s] button.category-btn .name:not([data-is-hovered=true]){max-height:2rem}:host[data-size=s] button.category-btn .name .skeleton-name{width:7rem;height:.75rem}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -717,14 +794,14 @@ class ScPriceCardComponent {
      */
     getCardImage() {
         var _a, _b;
-        return (_b = (_a = this.product) === null || _a === void 0 ? void 0 : _a.getImage(this.urls.imgServerUrl)) !== null && _b !== void 0 ? _b : this.urls.imgServerUrl + this.pathImageNotFound;
+        return (_b = (_a = this.product) === null || _a === void 0 ? void 0 : _a.getImage(this.urls.imgServerUrl)) !== null && _b !== void 0 ? _b : this.pathImageNotFound;
     }
 }
 ScPriceCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, deps: [{ token: i1.ScAuthService }, { token: i1.ScWarehouseService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }], target: i0.ɵɵFactoryTarget.Component });
-ScPriceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceCardComponent, selector: "sc-price-card", inputs: { product: "product", size: "size" }, outputs: { clickFavoriteEvent: "clickFavoriteEvent", clickAddToCartEvent: "clickAddToCartEvent", clickCardEvent: "clickCardEvent", quantityValueChanges: "quantityValueChanges" }, host: { properties: { "attr.data-size": "this.size" } }, ngImport: i0, template: "<div *ngIf=\"product; else skeleton\" class=\"card-wrapper flex flex-col w-40 h-64 bg-tui-base-03 rounded-xl shadow-sc-1 overflow-hidden text-xs\">\n    <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n    <div class=\"flex flex-col grow overflow-hidden\">\n        <div class=\"flex justify-center items-center grow overflow-hidden relative\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            <tui-svg *ngIf=\"product.cartItem\" src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-white rounded-md absolute right-2 top-2\"></tui-svg>\n            <sc-favorite-btn *ngIf=\"authStatus$ | async\" [class.!block]=\"product.isFavorite\" class=\"top-1 left-1 absolute hidden group-hover:block\"></sc-favorite-btn>\n        </div>\n    </div>\n\n    <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n    <div class=\"bg-white relative shrink-0\">\n        <div class=\"wrapper-info flex flex-col content-between flex-auto justify-between\">\n            <a class=\"name !transition-all !duration-500\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n                <span class=\"font-bold\">{{ product.name }}</span>\n            </a>\n            <div class=\"info text-tui-base-07 overflow-hidden duration-500\">\n                <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                <div class=\"sub-info\">\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                    <p *ngIf=\"(authStatus$ | async) && product.costDate\" class=\"text-tui-link hover:text-tui-link-hover cursor-pointer\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n                </div>\n            </div>\n            <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n                <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-base-07\">\n                    <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                    <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                    <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                    <ng-template #discountHint>\n                        <div class=\"font-bold\">{{ product.discount.name }}</div>\n                        <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                    </ng-template>\n                </span>\n                <span [class.text-tui-base-07]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n                <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-base-07 hidden group-hover:block\">{{ product.costString }}</span>\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n            </div>\n        </div>\n        <div class=\"button-wrapper overflow-hidden duration-500\">\n            <button *ngIf=\"!quantityControl\" tuiButton [size]=\"size\" class=\"w-full\">\n                <span class=\"font-bold\"> <tui-svg src=\"scIconCart\"></tui-svg> \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443</span>\n            </button>\n            <sc-input-quantity\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"product.quantityUnit\"\n                [size]=\"size === 'm' ? 'l' : 'm'\"\n                [step]=\"product.minCount || 1\"\n            ></sc-input-quantity>\n        </div>\n        <div *ngIf=\"product.isPreviouslyOrdered\" matTooltip=\"\u0422\u043E\u0432\u0430\u0440 \u0438\u0437 \u0438\u0441\u0442\u043E\u0440\u0438\u0438 \u043F\u043E\u043A\u0443\u043F\u043E\u043A\" class=\"rotate-45 z-10 absolute bg-tui-error-fill -bottom-4 -right-4 h-8 w-8\"></div>\n    </div>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n        <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n        <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n        <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n        <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i2.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i2.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i2.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i2.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "component", type: i2.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", outputs: ["clickEvent"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScPriceCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceCardComponent, selector: "sc-price-card", inputs: { product: "product", size: "size" }, outputs: { clickFavoriteEvent: "clickFavoriteEvent", clickAddToCartEvent: "clickAddToCartEvent", clickCardEvent: "clickCardEvent", quantityValueChanges: "quantityValueChanges" }, host: { properties: { "attr.data-size": "this.size" } }, ngImport: i0, template: "<div *ngIf=\"product; else skeleton\" class=\"card-wrapper flex flex-col w-40 h-64 bg-tui-base-03 rounded-xl shadow-sc-2 overflow-hidden text-xs\">\n    <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n    <div class=\"flex flex-col grow overflow-hidden\">\n        <div class=\"flex justify-center items-center grow overflow-hidden relative\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-12]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            <tui-svg *ngIf=\"product.cartItem\" src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-white rounded-md absolute right-2 top-2\"></tui-svg>\n            <sc-favorite-btn *ngIf=\"authStatus$ | async\" [class.!block]=\"product.isFavorite\" class=\"top-1 left-1 absolute hidden group-hover:block\"></sc-favorite-btn>\n        </div>\n    </div>\n\n    <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n    <div class=\"bg-white relative shrink-0\">\n        <div class=\"wrapper-info flex flex-col content-between flex-auto justify-between\">\n            <a class=\"name !transition-all !duration-500\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n                <span class=\"font-bold\">{{ product.name }}</span>\n            </a>\n            <div class=\"info text-tui-text-02 overflow-hidden duration-500\">\n                <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                <div class=\"sub-info\">\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                    <p *ngIf=\"(authStatus$ | async) && product.costDate\" class=\"text-tui-link hover:text-tui-link-hover cursor-pointer\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n                </div>\n            </div>\n            <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n                <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n                    <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                    <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                    <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                    <ng-template #discountHint>\n                        <div class=\"font-bold\">{{ product.discount.name }}</div>\n                        <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                    </ng-template>\n                </span>\n                <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n                <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n            </div>\n        </div>\n        <div class=\"button-wrapper overflow-hidden duration-500\">\n            <button *ngIf=\"!quantityControl\" tuiButton [size]=\"size\" class=\"w-full\">\n                <span class=\"font-bold\"> <tui-svg src=\"scIconCart\"></tui-svg> \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443</span>\n            </button>\n            <sc-input-quantity\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"product.quantityUnit\"\n                [size]=\"size === 'm' ? 'l' : 'm'\"\n                [step]=\"product.minCount || 1\"\n            ></sc-input-quantity>\n        </div>\n        <div *ngIf=\"product.isPreviouslyOrdered\" matTooltip=\"\u0422\u043E\u0432\u0430\u0440 \u0438\u0437 \u0438\u0441\u0442\u043E\u0440\u0438\u0438 \u043F\u043E\u043A\u0443\u043F\u043E\u043A\" class=\"rotate-45 z-10 absolute bg-tui-error-fill -bottom-4 -right-4 h-8 w-8\"></div>\n    </div>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n        <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n        <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n        <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n        <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.TuiHintDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"] }, { kind: "directive", type: i3.TuiHintDriverDirective, selector: "[tuiHint]" }, { kind: "directive", type: i3.TuiHintHoverDirective, selector: "[tuiHint]:not(ng-container)", inputs: ["tuiHintShowDelay", "tuiHintHideDelay"], exportAs: ["tuiHintHover"] }, { kind: "directive", type: i3.TuiHintPositionDirective, selector: "[tuiHint]:not([tuiHintCustomPosition])", inputs: ["tuiHintDirection"] }, { kind: "component", type: i3.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: ScFavoriteBtnComponent, selector: "sc-favorite-btn", outputs: ["clickEvent"] }, { kind: "component", type: ScInputQuantityComponent, selector: "sc-input-quantity", inputs: ["step", "quantityUnit", "showLoader", "showCross", "appearance", "isDisabled", "size"], outputs: ["clickClearEvent"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-price-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"product; else skeleton\" class=\"card-wrapper flex flex-col w-40 h-64 bg-tui-base-03 rounded-xl shadow-sc-1 overflow-hidden text-xs\">\n    <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n    <div class=\"flex flex-col grow overflow-hidden\">\n        <div class=\"flex justify-center items-center grow overflow-hidden relative\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            <tui-svg *ngIf=\"product.cartItem\" src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-white rounded-md absolute right-2 top-2\"></tui-svg>\n            <sc-favorite-btn *ngIf=\"authStatus$ | async\" [class.!block]=\"product.isFavorite\" class=\"top-1 left-1 absolute hidden group-hover:block\"></sc-favorite-btn>\n        </div>\n    </div>\n\n    <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n    <div class=\"bg-white relative shrink-0\">\n        <div class=\"wrapper-info flex flex-col content-between flex-auto justify-between\">\n            <a class=\"name !transition-all !duration-500\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n                <span class=\"font-bold\">{{ product.name }}</span>\n            </a>\n            <div class=\"info text-tui-base-07 overflow-hidden duration-500\">\n                <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                <div class=\"sub-info\">\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                    <p *ngIf=\"(authStatus$ | async) && product.costDate\" class=\"text-tui-link hover:text-tui-link-hover cursor-pointer\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n                </div>\n            </div>\n            <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n                <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-base-07\">\n                    <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                    <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                    <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                    <ng-template #discountHint>\n                        <div class=\"font-bold\">{{ product.discount.name }}</div>\n                        <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                    </ng-template>\n                </span>\n                <span [class.text-tui-base-07]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n                <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-base-07 hidden group-hover:block\">{{ product.costString }}</span>\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n            </div>\n        </div>\n        <div class=\"button-wrapper overflow-hidden duration-500\">\n            <button *ngIf=\"!quantityControl\" tuiButton [size]=\"size\" class=\"w-full\">\n                <span class=\"font-bold\"> <tui-svg src=\"scIconCart\"></tui-svg> \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443</span>\n            </button>\n            <sc-input-quantity\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"product.quantityUnit\"\n                [size]=\"size === 'm' ? 'l' : 'm'\"\n                [step]=\"product.minCount || 1\"\n            ></sc-input-quantity>\n        </div>\n        <div *ngIf=\"product.isPreviouslyOrdered\" matTooltip=\"\u0422\u043E\u0432\u0430\u0440 \u0438\u0437 \u0438\u0441\u0442\u043E\u0440\u0438\u0438 \u043F\u043E\u043A\u0443\u043F\u043E\u043A\" class=\"rotate-45 z-10 absolute bg-tui-error-fill -bottom-4 -right-4 h-8 w-8\"></div>\n    </div>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n        <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n        <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n        <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n        <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"] }]
+            args: [{ selector: 'sc-price-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"product; else skeleton\" class=\"card-wrapper flex flex-col w-40 h-64 bg-tui-base-03 rounded-xl shadow-sc-2 overflow-hidden text-xs\">\n    <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n    <div class=\"flex flex-col grow overflow-hidden\">\n        <div class=\"flex justify-center items-center grow overflow-hidden relative\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-12]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            <tui-svg *ngIf=\"product.cartItem\" src=\"tuiIconCheck\" class=\"!h-5 !w-5 bg-tui-primary text-white rounded-md absolute right-2 top-2\"></tui-svg>\n            <sc-favorite-btn *ngIf=\"authStatus$ | async\" [class.!block]=\"product.isFavorite\" class=\"top-1 left-1 absolute hidden group-hover:block\"></sc-favorite-btn>\n        </div>\n    </div>\n\n    <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n    <div class=\"bg-white relative shrink-0\">\n        <div class=\"wrapper-info flex flex-col content-between flex-auto justify-between\">\n            <a class=\"name !transition-all !duration-500\" tuiLink iconAlign=\"left\" (click)=\"clickCardEvent.emit()\">\n                <span class=\"font-bold\">{{ product.name }}</span>\n            </a>\n            <div class=\"info text-tui-text-02 overflow-hidden duration-500\">\n                <p *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                <div class=\"sub-info\">\n                    <p>\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                    <p *ngIf=\"(authStatus$ | async) && product.costDate\" class=\"text-tui-link hover:text-tui-link-hover cursor-pointer\">\u0414\u0430\u0442\u0430: {{ product.costDate }}</p>\n                </div>\n            </div>\n            <div *ngIf=\"warehouseSelect$ | async as warehouseSelect\" class=\"flex flex-col\">\n                <span *ngIf=\"product.discount\" class=\"flex items-center text-tui-text-02\">\n                    <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                    <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                    <tui-svg src=\"tuiIconInfoLarge\" [tuiHint]=\"discountHint\" [tuiHintShowDelay]=\"100\" tuiHintDirection=\"top\" class=\"text-black !text-xs !h-4\"></tui-svg>\n                    <ng-template #discountHint>\n                        <div class=\"font-bold\">{{ product.discount.name }}</div>\n                        <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                    </ng-template>\n                </span>\n                <span [class.text-tui-text-02]=\"!product.isWarehouseStockExist(warehouseSelect.id)\" class=\"cost font-bold\">{{ product.costRubString }}</span>\n                <span *ngIf=\"!product.priceInRub\" class=\"text-xs font-bold text-tui-text-02 hidden group-hover:block\">{{ product.costString }}</span>\n                <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n            </div>\n        </div>\n        <div class=\"button-wrapper overflow-hidden duration-500\">\n            <button *ngIf=\"!quantityControl\" tuiButton [size]=\"size\" class=\"w-full\">\n                <span class=\"font-bold\"> <tui-svg src=\"scIconCart\"></tui-svg> \u0412 \u043A\u043E\u0440\u0437\u0438\u043D\u0443</span>\n            </button>\n            <sc-input-quantity\n                *ngIf=\"quantityControl\"\n                [formControl]=\"quantityControl\"\n                [quantityUnit]=\"product.quantityUnit\"\n                [size]=\"size === 'm' ? 'l' : 'm'\"\n                [step]=\"product.minCount || 1\"\n            ></sc-input-quantity>\n        </div>\n        <div *ngIf=\"product.isPreviouslyOrdered\" matTooltip=\"\u0422\u043E\u0432\u0430\u0440 \u0438\u0437 \u0438\u0441\u0442\u043E\u0440\u0438\u0438 \u043F\u043E\u043A\u0443\u043F\u043E\u043A\" class=\"rotate-45 z-10 absolute bg-tui-error-fill -bottom-4 -right-4 h-8 w-8\"></div>\n    </div>\n</div>\n\n<ng-template #skeleton>\n    <div class=\"flex flex-col card-wrapper bg-white rounded-xl overflow-hidden shadow-sc-1\">\n        <!-- \u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0442\u043E\u0432\u0430\u0440\u0430 -->\n        <div class=\"w-full h-3/5 rounded-t bg-tui-base-02\"></div>\n        <!-- \u041A\u0440\u0430\u0442\u043A\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F \u043E \u0442\u043E\u0432\u0430\u0440\u0435 -->\n        <div class=\"flex flex-col grow gap-2.5 bg-white rounded-b p-5\">\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-3/5 h-4 rounded bg-tui-base-02\"></div>\n            <div class=\"w-full h-4 rounded bg-tui-base-02\"></div>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host[data-size=s] .card-wrapper{width:10rem;height:16rem}:host[data-size=s] .card-wrapper .wrapper-info{padding:8px}:host[data-size=s] .card-wrapper .wrapper-info .cost{font-size:.875rem;line-height:1.25rem}:host[data-size=s] .card-wrapper .button-wrapper tui-svg{font-size:.75rem;line-height:1rem;width:1rem}:host[data-size=m] .card-wrapper{width:12.5rem;height:20rem}:host[data-size=m] .card-wrapper .wrapper-info{padding-inline:16px;padding-block:8px}:host[data-size=m] .card-wrapper .name{font-size:.875rem;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:3rem}:host[data-size=m] .card-wrapper .info{max-height:1rem}:host[data-size=m] .card-wrapper .cost{font-size:1.125rem;line-height:1.75rem}:host[data-size=m] .card-wrapper .button-wrapper{max-height:0px;font-size:.75rem;line-height:1rem}:host[data-size=m] .card-wrapper:hover .name{-webkit-line-clamp:unset;max-height:6rem}:host[data-size=m] .card-wrapper:hover .info{max-height:3rem}:host[data-size=m] .card-wrapper:hover .button-wrapper{max-height:3rem}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1.ScAuthService }, { type: i1.ScWarehouseService }, { type: undefined, decorators: [{
                         type: Inject,
@@ -750,13 +827,299 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['attr.data-size']
             }] } });
 
+/**
+ * Настройки отрисовки графика.
+ *
+ * @see [Документация](https://echarts.apache.org/en/option.html#title)
+ */
+const scChartOption = {
+    grid: {
+        top: 12,
+        left: 64,
+        right: 0,
+        bottom: 24,
+    },
+    tooltip: {
+        trigger: 'axis',
+        formatter: (params) => {
+            const data = Array.isArray(params) ? params[0].data : params.data;
+            const date = new Date(data.value[0]);
+            const nextDate = new Date(data.value[2]);
+            return `
+                <div class="text-center text-black">
+                    <span class="font-bold">${data.value[1]} ₽</span>
+                    </br>
+                    <span class="text-xs">${formatDate(date, 'dd.MM', 'en')} - ${formatDate(nextDate, 'dd.MM', 'en')}</span>
+                </div>
+            `;
+        },
+        axisPointer: {
+            animation: false,
+            type: 'cross',
+        },
+        textStyle: {
+            fontFamily: 'Roboto, "Helvetica Neue", sans-serif',
+        },
+    },
+    xAxis: {
+        type: 'time',
+        splitLine: {
+            show: false,
+        },
+        axisLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false,
+        },
+        boundaryGap: ['3%', '3%'],
+    },
+    yAxis: {
+        splitLine: {
+            show: false,
+        },
+        axisLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false,
+        },
+        type: 'value',
+        boundaryGap: [0, '100%'],
+    },
+    series: {
+        name: 'История цены',
+        type: 'line',
+        showSymbol: false,
+        symbolSize: 12,
+        itemStyle: {
+            color: '#ffcc40',
+        },
+    },
+};
+
+/**
+ * График истории цен товара или услуги.
+ * TODO: TASK[#7482] Перепроверить возможность использования TuiLineDaysChart.
+ */
+class ScPriceHistoryComponent {
+    /**
+     * Инициализирует экземпляр класса {@link PriceHistoryChartComponent}.
+     *
+     * @param cdr Объект для работы с обнаружением изменений.
+     */
+    constructor(cdr) {
+        this.cdr = cdr;
+        /**
+         * Настройки графика.
+         */
+        this.initOption = { locale: 'RU' };
+        /**
+         * Параметры отрисовки графика истории цены.
+         */
+        this.chartOption = scChartOption;
+        /**
+         * Данные об истории цены на товар или услугу.
+         */
+        this.data = [];
+    }
+    /** @inheritDoc */
+    ngOnInit() {
+        if (this.chartOption.series && !Array.isArray(this.chartOption.series)) {
+            this.chartOption.series.data = [];
+        }
+        Object.keys(this.history)
+            .map((key) => {
+            // ? Можно избежать переведя даты в api в формат ECMAScript® 2023: https://tc39.es/ecma262/#sec-date-time-string-format
+            const dataString = key.split('.').reverse(), data = new Date(+dataString[0], +dataString[1] - 1, +dataString[2]);
+            return { data: data, cost: this.history[String(key)].cost };
+        })
+            .sort((a, b) => +a.data - +b.data)
+            .forEach((item, index, array) => {
+            var _a, _b;
+            let nextDate;
+            if ((_a = array[index + 1]) === null || _a === void 0 ? void 0 : _a.data) {
+                nextDate = new Date((_b = array[index + 1]) === null || _b === void 0 ? void 0 : _b.data);
+                nextDate.setDate(nextDate.getDate() - 1);
+            }
+            else {
+                nextDate = new Date();
+            }
+            this.pushDataItem(item.cost, item.data, nextDate);
+        });
+        if (this.eChartsInstance) {
+            this.setChartData();
+        }
+    }
+    /**
+     * Перехватчик жизненного цикла {@link ECharts}, который вызывается при его инициализации.
+     *
+     * @param eChartsInstance Экземпляр {@link ECharts}.
+     */
+    onChartInit(eChartsInstance) {
+        this.eChartsInstance = eChartsInstance;
+        if (this.data.length) {
+            this.setChartData();
+        }
+    }
+    /**
+     * Устанавливает новые данные {@link PriceHistoryChartComponent.eChartsInstance}.
+     */
+    setChartData() {
+        if (this.chartOption.series && !Array.isArray(this.chartOption.series)) {
+            this.maxPrice = Math.max(...this.data.map((item) => item.value[1]));
+            this.minPrice = Math.min(...this.data.map((item) => item.value[1]));
+            this.chartOption.series.data = this.data;
+            this.eChartsInstance.clear();
+            this.eChartsInstance.setOption(this.chartOption, true, true);
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Добавляет значение цены товара в массив истории цен.
+     *
+     * @param value Цена товара или услуги.
+     * @param date Дата установки цены.
+     * @param nextDate Следующая дата установки цены.
+     */
+    pushDataItem(value, date, nextDate) {
+        this.data.push({
+            name: date.toString(),
+            value: [date, value, nextDate],
+        });
+    }
+}
+ScPriceHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceHistoryComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ScPriceHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceHistoryComponent, selector: "sc-price-history", inputs: { history: "history" }, ngImport: i0, template: "<div class=\"flex flex-col items-center\">\n    <div *ngIf=\"maxPrice && minPrice\" class=\"w-full font-bold text-end text-lg mb-1\">\u043E\u0442 {{ minPrice.toLocaleString() }} \u20BD \u0434\u043E {{ maxPrice.toLocaleString() }} \u20BD</div>\n    <div class=\"relative w-full h-56\">\n        <div class=\"h-48 bg-tui-base-02 mt-2 absolute rounded right-0 left-16\"></div>\n        <div echarts [initOpts]=\"initOption\" (chartInit)=\"onChartInit($event)\" [options]=\"chartOption\" class=\"w-full !h-full\"></div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "loading", "initOpts", "merge", "autoResize", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartPieSelectChanged", "chartPieSelected", "chartPieUnselected", "chartMapSelectChanged", "chartMapSelected", "chartMapUnselected", "chartAxisAreaSelected", "chartFocusNodeAdjacency", "chartUnfocusNodeAdjacency", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceHistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sc-price-history', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col items-center\">\n    <div *ngIf=\"maxPrice && minPrice\" class=\"w-full font-bold text-end text-lg mb-1\">\u043E\u0442 {{ minPrice.toLocaleString() }} \u20BD \u0434\u043E {{ maxPrice.toLocaleString() }} \u20BD</div>\n    <div class=\"relative w-full h-56\">\n        <div class=\"h-48 bg-tui-base-02 mt-2 absolute rounded right-0 left-16\"></div>\n        <div echarts [initOpts]=\"initOption\" (chartInit)=\"onChartInit($event)\" [options]=\"chartOption\" class=\"w-full !h-full\"></div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { history: [{
+                type: Input
+            }] } });
+
+/**
+ * Language: Russian.
+ */
+var scLangRU = {
+    time: {
+        month: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+        monthAbbr: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+        dayOfWeek: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
+        dayOfWeekAbbr: ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
+    },
+    legend: {
+        selector: {
+            all: 'Всё',
+            inverse: 'Обратить',
+        },
+    },
+    toolbox: {
+        brush: {
+            title: {
+                rect: 'Выделить область',
+                polygon: 'Инструмент «Лассо»',
+                lineX: 'Горизонтальное выделение',
+                lineY: 'Вертикальное выделение',
+                keep: 'Оставить выбранное',
+                clear: 'Очистить выбранное',
+            },
+        },
+        dataView: {
+            title: 'Данные',
+            lang: ['Данные', 'Закрыть', 'Обновить'],
+        },
+        dataZoom: {
+            title: {
+                zoom: 'Увеличить',
+                back: 'Сбросить увеличение',
+            },
+        },
+        magicType: {
+            title: {
+                line: 'Переключиться на линейный график',
+                bar: 'Переключиться на столбчатую диаграмму',
+                stack: 'Стопка',
+                tiled: 'Плитка',
+            },
+        },
+        restore: {
+            title: 'Восстановить',
+        },
+        saveAsImage: {
+            title: 'Сохранить картинку',
+            lang: ['Правый клик, чтобы сохранить картинку'],
+        },
+    },
+    series: {
+        typeNames: {
+            pie: 'Круговая диаграмма',
+            bar: 'Столбчатая диаграмма',
+            line: 'Линейный график',
+            scatter: 'Точечная диаграмма',
+            effectScatter: 'Точечная диаграмма с волнами',
+            radar: 'Лепестковая диаграмма',
+            tree: 'Дерево',
+            treemap: 'Плоское дерево',
+            boxplot: 'Ящик с усами',
+            candlestick: 'Свечной график',
+            k: 'График К-линий',
+            heatmap: 'Тепловая карта',
+            map: 'Карта',
+            parallel: 'Диаграмма параллельных координат',
+            lines: 'Линейный граф',
+            graph: 'Граф отношений',
+            sankey: 'Диаграмма Санкей',
+            funnel: 'Воронкообразная диаграмма',
+            gauge: 'Шкала',
+            pictorialBar: 'Столбец-картинка',
+            themeRiver: 'Тематическая река',
+            sunburst: 'Солнечные лучи',
+        },
+    },
+    aria: {
+        general: {
+            withTitle: 'Это график, показывающий "{title}"',
+            withoutTitle: 'Это график',
+        },
+        series: {
+            single: {
+                prefix: '',
+                withName: ' с типом {seriesType} и именем {seriesName}.',
+                withoutName: ' с типом {seriesType}.',
+            },
+            multiple: {
+                prefix: '. Он состоит из {seriesCount} серий.',
+                withName: ' Серия {seriesId} имеет тип {seriesType} и показывает {seriesName}.',
+                withoutName: ' Серия {seriesId} имеет тип {seriesType}.',
+                separator: {
+                    middle: '',
+                    end: '',
+                },
+            },
+        },
+        data: {
+            allData: 'Данные таковы: ',
+            partialData: 'Первые {displayCnt} элементов: ',
+            withName: 'значение для {name} — {value}',
+            withoutName: '{value}',
+            separator: {
+                middle: ', ',
+                end: '. ',
+            },
+        },
+    },
+};
+
+echarts.registerLocale('RU', scLangRU);
+echarts.use([TitleComponent, TooltipComponent, GridComponent, LineChart, SVGRenderer]);
 /**
  * Модуль каталога.
  */
 class ScCatalogModule {
 }
 ScCatalogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ScCatalogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, declarations: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent], imports: [CommonModule,
+ScCatalogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, declarations: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent, ScPriceHistoryComponent], imports: [CommonModule,
         RouterModule,
         TuiButtonModule,
         TuiSvgModule,
@@ -770,7 +1133,7 @@ ScCatalogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         TuiFieldErrorPipeModule,
         TuiLoaderModule,
         TuiLinkModule,
-        TuiElasticContainerModule], exports: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent] });
+        TuiElasticContainerModule, i2$1.NgxEchartsModule], exports: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent, ScPriceHistoryComponent] });
 ScCatalogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, imports: [CommonModule,
         RouterModule,
         TuiButtonModule,
@@ -785,12 +1148,13 @@ ScCatalogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         TuiFieldErrorPipeModule,
         TuiLoaderModule,
         TuiLinkModule,
-        TuiElasticContainerModule] });
+        TuiElasticContainerModule,
+        NgxEchartsModule.forRoot({ echarts })] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent],
-                    exports: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent],
+                    declarations: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent, ScPriceHistoryComponent],
+                    exports: [ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScPriceCardComponent, ScPriceWarehouseStockComponent, ScPriceHistoryComponent],
                     imports: [
                         CommonModule,
                         RouterModule,
@@ -807,6 +1171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TuiLoaderModule,
                         TuiLinkModule,
                         TuiElasticContainerModule,
+                        NgxEchartsModule.forRoot({ echarts }),
                     ],
                 }]
         }] });
@@ -974,14 +1339,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Компонент карточки новости.
  */
 class ScNewsCardComponent {
+    constructor() {
+        /**
+         * Событие клика по карточке новости.
+         */
+        this.clickCardEvent = new EventEmitter();
+    }
 }
 ScNewsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScNewsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ScNewsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScNewsCardComponent, selector: "sc-news-card", inputs: { news: "news" }, ngImport: i0, template: "<a *ngIf=\"news\" [routerLink]=\"[ '/news', news.id ]\" class=\"block relative h-82 w-70 shadow-sc-2 rounded-lg overflow-hidden bg-white\">\n    <div [style.background-image]=\"'url(' + news.image + ')'\" class=\"bg-no-repeat bg-center bg-cover bg-tui-base-02 w-full h-50\"></div>\n    <div class=\"px-6 py-4.5 h-32 w-full bg-white overflow-hidden\">\n        <div class=\"w-full flex justify-between align-baseline mb-2.5\">\n            <p class=\"text-sm text-tui-base-07\">{{ news.created_at }}</p>\n            <sc-share-button></sc-share-button>\n        </div>\n        <p>\n            <a class=\"text-sm font-bold text-black line-clamp-3\">{{ news.subject }}</a>\n        </p>\n    </div>\n</a>\n", styles: ["*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: \"\"}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.\\!absolute{position:absolute!important}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.-bottom-4{bottom:-1rem}.-left-2{left:-.5rem}.-right-4{right:-1rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.left-1{left:.25rem}.left-3{left:.75rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-3{top:.75rem}.isolate{isolation:isolate}.z-10{z-index:10}.m-3{margin:.75rem}.m-8{margin:2rem}.mb-2{margin-bottom:.5rem}.mb-2\\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.\\!block{display:block!important}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.\\!hidden{display:none!important}.hidden{display:none}.\\!h-3{height:.75rem!important}.\\!h-4{height:1rem!important}.\\!h-5{height:1.25rem!important}.h-20{height:5rem}.h-3{height:.75rem}.h-3\\/5{height:60%}.h-32{height:8rem}.h-4{height:1rem}.h-50{height:12.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-82{height:20.5rem}.h-full{height:100%}.\\!w-5{width:1.25rem!important}.w-20{width:5rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\\/4{width:75%}.w-3\\/5{width:60%}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-70{width:17.5rem}.w-8{width:2rem}.w-96{width:24rem}.w-\\[10rem\\]{width:10rem}.w-\\[13rem\\]{width:13rem}.w-\\[21rem\\]{width:21rem}.w-\\[34rem\\]{width:34rem}.w-\\[46rem\\]{width:46rem}.w-\\[54rem\\]{width:54rem}.w-full{width:100%}.flex-auto{flex:1 1 auto}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.basis-min-content{flex-basis:min-content}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.content-between{align-content:space-between}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}.gap-x-2{column-gap:.5rem}.gap-x-4{column-gap:1rem}.gap-x-8{column-gap:2rem}.gap-y-0{row-gap:0px}.gap-y-0\\.5{row-gap:.125rem}.gap-y-2{row-gap:.5rem}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-tui-radius-l{border-radius:var(--tui-radius-l)}.rounded-tui-radius-m{border-radius:var(--tui-radius-m)}.rounded-tui-radius-s{border-radius:var(--tui-radius-s)}.rounded-xl{border-radius:.75rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-tui-base-04{border-color:var(--tui-base-04)}.bg-tui-base-02{background-color:var(--tui-base-02)}.bg-tui-base-03{background-color:var(--tui-base-03)}.bg-tui-error-fill{background-color:var(--tui-error-fill)}.bg-tui-primary{background-color:var(--tui-primary)}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.object-cover{object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-4\\.5{padding-top:1.125rem;padding-bottom:1.125rem}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.\\!text-2xl{font-size:1.5rem!important;line-height:2rem!important}.\\!text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.ordinal{--tw-ordinal: ordinal;font-feature-settings:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-tui-base-07{color:var(--tui-base-07)}.text-tui-base-09{color:var(--tui-base-09)}.text-tui-error-fill{color:var(--tui-error-fill)}.text-tui-link{color:var(--tui-link)}.text-tui-primary{color:var(--tui-primary)}.text-tui-success-fill{color:var(--tui-success-fill)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-1{--tw-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 5px 20px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-2{--tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia: sepia(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.\\!transition-all{transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\\!duration-500{transition-duration:.5s!important}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\[fs\\:0\\]{fs:0}.\\[k\\:string\\]{k:string}.hover\\:text-tui-link-hover:hover{color:var(--tui-link-hover)}.group:hover .group-hover\\:block{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ScShareButtonComponent, selector: "sc-share-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScNewsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScNewsCardComponent, selector: "sc-news-card", inputs: { news: "news" }, outputs: { clickCardEvent: "clickCardEvent" }, ngImport: i0, template: "<div (click)=\"clickCardEvent.emit(news)\" class=\"block relative h-82 w-70 cursor-pointer shadow-sc-2 rounded-lg overflow-hidden bg-white\">\n    <div [style.background-image]=\"'url(' + news.image + ')'\" class=\"bg-no-repeat bg-center bg-cover bg-tui-base-02 w-full h-50\"></div>\n    <div class=\"px-6 py-4.5 h-32 w-full bg-white overflow-hidden\">\n        <div class=\"w-full flex justify-between align-baseline mb-2.5\">\n            <p class=\"text-sm text-tui-text-02\">{{ news.created_at }}</p>\n            <sc-share-button></sc-share-button>\n        </div>\n        <p>\n            <a class=\"text-sm font-bold text-black line-clamp-3\">{{ news.subject }}</a>\n        </p>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: ScShareButtonComponent, selector: "sc-share-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScNewsCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-news-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a *ngIf=\"news\" [routerLink]=\"[ '/news', news.id ]\" class=\"block relative h-82 w-70 shadow-sc-2 rounded-lg overflow-hidden bg-white\">\n    <div [style.background-image]=\"'url(' + news.image + ')'\" class=\"bg-no-repeat bg-center bg-cover bg-tui-base-02 w-full h-50\"></div>\n    <div class=\"px-6 py-4.5 h-32 w-full bg-white overflow-hidden\">\n        <div class=\"w-full flex justify-between align-baseline mb-2.5\">\n            <p class=\"text-sm text-tui-base-07\">{{ news.created_at }}</p>\n            <sc-share-button></sc-share-button>\n        </div>\n        <p>\n            <a class=\"text-sm font-bold text-black line-clamp-3\">{{ news.subject }}</a>\n        </p>\n    </div>\n</a>\n", styles: ["*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: \"\"}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.\\!absolute{position:absolute!important}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.-bottom-4{bottom:-1rem}.-left-2{left:-.5rem}.-right-4{right:-1rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.left-1{left:.25rem}.left-3{left:.75rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-3{top:.75rem}.isolate{isolation:isolate}.z-10{z-index:10}.m-3{margin:.75rem}.m-8{margin:2rem}.mb-2{margin-bottom:.5rem}.mb-2\\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.\\!block{display:block!important}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.\\!hidden{display:none!important}.hidden{display:none}.\\!h-3{height:.75rem!important}.\\!h-4{height:1rem!important}.\\!h-5{height:1.25rem!important}.h-20{height:5rem}.h-3{height:.75rem}.h-3\\/5{height:60%}.h-32{height:8rem}.h-4{height:1rem}.h-50{height:12.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-82{height:20.5rem}.h-full{height:100%}.\\!w-5{width:1.25rem!important}.w-20{width:5rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\\/4{width:75%}.w-3\\/5{width:60%}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-70{width:17.5rem}.w-8{width:2rem}.w-96{width:24rem}.w-\\[10rem\\]{width:10rem}.w-\\[13rem\\]{width:13rem}.w-\\[21rem\\]{width:21rem}.w-\\[34rem\\]{width:34rem}.w-\\[46rem\\]{width:46rem}.w-\\[54rem\\]{width:54rem}.w-full{width:100%}.flex-auto{flex:1 1 auto}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.basis-min-content{flex-basis:min-content}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.content-between{align-content:space-between}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}.gap-x-2{column-gap:.5rem}.gap-x-4{column-gap:1rem}.gap-x-8{column-gap:2rem}.gap-y-0{row-gap:0px}.gap-y-0\\.5{row-gap:.125rem}.gap-y-2{row-gap:.5rem}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-tui-radius-l{border-radius:var(--tui-radius-l)}.rounded-tui-radius-m{border-radius:var(--tui-radius-m)}.rounded-tui-radius-s{border-radius:var(--tui-radius-s)}.rounded-xl{border-radius:.75rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-tui-base-04{border-color:var(--tui-base-04)}.bg-tui-base-02{background-color:var(--tui-base-02)}.bg-tui-base-03{background-color:var(--tui-base-03)}.bg-tui-error-fill{background-color:var(--tui-error-fill)}.bg-tui-primary{background-color:var(--tui-primary)}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.object-cover{object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-4\\.5{padding-top:1.125rem;padding-bottom:1.125rem}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.\\!text-2xl{font-size:1.5rem!important;line-height:2rem!important}.\\!text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.ordinal{--tw-ordinal: ordinal;font-feature-settings:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-tui-base-07{color:var(--tui-base-07)}.text-tui-base-09{color:var(--tui-base-09)}.text-tui-error-fill{color:var(--tui-error-fill)}.text-tui-link{color:var(--tui-link)}.text-tui-primary{color:var(--tui-primary)}.text-tui-success-fill{color:var(--tui-success-fill)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-1{--tw-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 5px 20px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-2{--tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia: sepia(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.\\!transition-all{transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\\!duration-500{transition-duration:.5s!important}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\[fs\\:0\\]{fs:0}.\\[k\\:string\\]{k:string}.hover\\:text-tui-link-hover:hover{color:var(--tui-link-hover)}.group:hover .group-hover\\:block{display:block}\n"] }]
+            args: [{ selector: 'sc-news-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div (click)=\"clickCardEvent.emit(news)\" class=\"block relative h-82 w-70 cursor-pointer shadow-sc-2 rounded-lg overflow-hidden bg-white\">\n    <div [style.background-image]=\"'url(' + news.image + ')'\" class=\"bg-no-repeat bg-center bg-cover bg-tui-base-02 w-full h-50\"></div>\n    <div class=\"px-6 py-4.5 h-32 w-full bg-white overflow-hidden\">\n        <div class=\"w-full flex justify-between align-baseline mb-2.5\">\n            <p class=\"text-sm text-tui-text-02\">{{ news.created_at }}</p>\n            <sc-share-button></sc-share-button>\n        </div>\n        <p>\n            <a class=\"text-sm font-bold text-black line-clamp-3\">{{ news.subject }}</a>\n        </p>\n    </div>\n</div>\n" }]
         }], propDecorators: { news: [{
                 type: Input
+            }], clickCardEvent: [{
+                type: Output
             }] } });
 
 /**
@@ -996,10 +1369,10 @@ class ScNewsCardSkeletonComponent {
     }
 }
 ScNewsCardSkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScNewsCardSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ScNewsCardSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScNewsCardSkeletonComponent, selector: "sc-news-card-skeleton", inputs: { hasImg: "hasImg" }, ngImport: i0, template: "<div class=\"block relative h-82 w-70 shadow-sc-2 rounded-lg overflow-hidden bg-white\">\n    <div *ngIf=\"hasImg; else textBlock\" class=\"bg-tui-base-02 w-full h-50\"></div>\n    <ng-template #textBlock>\n        <div class=\"px-6 py-4.5 w-full flex flex-col gap-2\">\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-3/4\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-3/4\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n        </div>\n    </ng-template>\n\n    <div class=\"w-3/4\">\n        <ng-container *ngTemplateOutlet=\"textBlock\"></ng-container>\n    </div>\n</div>\n", styles: ["*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: \"\"}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.\\!absolute{position:absolute!important}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.-bottom-4{bottom:-1rem}.-left-2{left:-.5rem}.-right-4{right:-1rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.left-1{left:.25rem}.left-3{left:.75rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-3{top:.75rem}.isolate{isolation:isolate}.z-10{z-index:10}.m-3{margin:.75rem}.m-8{margin:2rem}.mb-2{margin-bottom:.5rem}.mb-2\\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.\\!block{display:block!important}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.\\!hidden{display:none!important}.hidden{display:none}.\\!h-3{height:.75rem!important}.\\!h-4{height:1rem!important}.\\!h-5{height:1.25rem!important}.h-20{height:5rem}.h-3{height:.75rem}.h-3\\/5{height:60%}.h-32{height:8rem}.h-4{height:1rem}.h-50{height:12.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-82{height:20.5rem}.h-full{height:100%}.\\!w-5{width:1.25rem!important}.w-20{width:5rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\\/4{width:75%}.w-3\\/5{width:60%}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-70{width:17.5rem}.w-8{width:2rem}.w-96{width:24rem}.w-\\[10rem\\]{width:10rem}.w-\\[13rem\\]{width:13rem}.w-\\[21rem\\]{width:21rem}.w-\\[34rem\\]{width:34rem}.w-\\[46rem\\]{width:46rem}.w-\\[54rem\\]{width:54rem}.w-full{width:100%}.flex-auto{flex:1 1 auto}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.basis-min-content{flex-basis:min-content}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.content-between{align-content:space-between}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}.gap-x-2{column-gap:.5rem}.gap-x-4{column-gap:1rem}.gap-x-8{column-gap:2rem}.gap-y-0{row-gap:0px}.gap-y-0\\.5{row-gap:.125rem}.gap-y-2{row-gap:.5rem}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-tui-radius-l{border-radius:var(--tui-radius-l)}.rounded-tui-radius-m{border-radius:var(--tui-radius-m)}.rounded-tui-radius-s{border-radius:var(--tui-radius-s)}.rounded-xl{border-radius:.75rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-tui-base-04{border-color:var(--tui-base-04)}.bg-tui-base-02{background-color:var(--tui-base-02)}.bg-tui-base-03{background-color:var(--tui-base-03)}.bg-tui-error-fill{background-color:var(--tui-error-fill)}.bg-tui-primary{background-color:var(--tui-primary)}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.object-cover{object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-4\\.5{padding-top:1.125rem;padding-bottom:1.125rem}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.\\!text-2xl{font-size:1.5rem!important;line-height:2rem!important}.\\!text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.ordinal{--tw-ordinal: ordinal;font-feature-settings:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-tui-base-07{color:var(--tui-base-07)}.text-tui-base-09{color:var(--tui-base-09)}.text-tui-error-fill{color:var(--tui-error-fill)}.text-tui-link{color:var(--tui-link)}.text-tui-primary{color:var(--tui-primary)}.text-tui-success-fill{color:var(--tui-success-fill)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-1{--tw-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 5px 20px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-2{--tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia: sepia(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.\\!transition-all{transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\\!duration-500{transition-duration:.5s!important}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\[fs\\:0\\]{fs:0}.\\[k\\:string\\]{k:string}.hover\\:text-tui-link-hover:hover{color:var(--tui-link-hover)}.group:hover .group-hover\\:block{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScNewsCardSkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScNewsCardSkeletonComponent, selector: "sc-news-card-skeleton", inputs: { hasImg: "hasImg" }, ngImport: i0, template: "<div class=\"block relative h-82 w-70 shadow-sc-2 rounded-lg overflow-hidden bg-white\">\n    <div *ngIf=\"hasImg; else textBlock\" class=\"bg-tui-base-02 w-full h-50\"></div>\n    <ng-template #textBlock>\n        <div class=\"px-6 py-4.5 w-full flex flex-col gap-2\">\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-3/4\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-3/4\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n        </div>\n    </ng-template>\n\n    <div class=\"w-3/4\">\n        <ng-container *ngTemplateOutlet=\"textBlock\"></ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScNewsCardSkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-news-card-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"block relative h-82 w-70 shadow-sc-2 rounded-lg overflow-hidden bg-white\">\n    <div *ngIf=\"hasImg; else textBlock\" class=\"bg-tui-base-02 w-full h-50\"></div>\n    <ng-template #textBlock>\n        <div class=\"px-6 py-4.5 w-full flex flex-col gap-2\">\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-3/4\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-3/4\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n        </div>\n    </ng-template>\n\n    <div class=\"w-3/4\">\n        <ng-container *ngTemplateOutlet=\"textBlock\"></ng-container>\n    </div>\n</div>\n", styles: ["*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: \"\"}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.\\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.\\!absolute{position:absolute!important}.absolute{position:absolute}.\\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.-bottom-4{bottom:-1rem}.-left-2{left:-.5rem}.-right-4{right:-1rem}.-top-2{top:-.5rem}.bottom-0{bottom:0}.left-1{left:.25rem}.left-3{left:.75rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-3{top:.75rem}.isolate{isolation:isolate}.z-10{z-index:10}.m-3{margin:.75rem}.m-8{margin:2rem}.mb-2{margin-bottom:.5rem}.mb-2\\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.\\!block{display:block!important}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.\\!hidden{display:none!important}.hidden{display:none}.\\!h-3{height:.75rem!important}.\\!h-4{height:1rem!important}.\\!h-5{height:1.25rem!important}.h-20{height:5rem}.h-3{height:.75rem}.h-3\\/5{height:60%}.h-32{height:8rem}.h-4{height:1rem}.h-50{height:12.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-82{height:20.5rem}.h-full{height:100%}.\\!w-5{width:1.25rem!important}.w-20{width:5rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\\/4{width:75%}.w-3\\/5{width:60%}.w-4{width:1rem}.w-40{width:10rem}.w-44{width:11rem}.w-70{width:17.5rem}.w-8{width:2rem}.w-96{width:24rem}.w-\\[10rem\\]{width:10rem}.w-\\[13rem\\]{width:13rem}.w-\\[21rem\\]{width:21rem}.w-\\[34rem\\]{width:34rem}.w-\\[46rem\\]{width:46rem}.w-\\[54rem\\]{width:54rem}.w-full{width:100%}.flex-auto{flex:1 1 auto}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.basis-min-content{flex-basis:min-content}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.content-between{align-content:space-between}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}.gap-x-2{column-gap:.5rem}.gap-x-4{column-gap:1rem}.gap-x-8{column-gap:2rem}.gap-y-0{row-gap:0px}.gap-y-0\\.5{row-gap:.125rem}.gap-y-2{row-gap:.5rem}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-tui-radius-l{border-radius:var(--tui-radius-l)}.rounded-tui-radius-m{border-radius:var(--tui-radius-m)}.rounded-tui-radius-s{border-radius:var(--tui-radius-s)}.rounded-xl{border-radius:.75rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-tui-base-04{border-color:var(--tui-base-04)}.bg-tui-base-02{background-color:var(--tui-base-02)}.bg-tui-base-03{background-color:var(--tui-base-03)}.bg-tui-error-fill{background-color:var(--tui-error-fill)}.bg-tui-primary{background-color:var(--tui-primary)}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.object-cover{object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-4\\.5{padding-top:1.125rem;padding-bottom:1.125rem}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.\\!text-2xl{font-size:1.5rem!important;line-height:2rem!important}.\\!text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.ordinal{--tw-ordinal: ordinal;font-feature-settings:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74/var(--tw-text-opacity))}.text-tui-base-07{color:var(--tui-base-07)}.text-tui-base-09{color:var(--tui-base-09)}.text-tui-error-fill{color:var(--tui-error-fill)}.text-tui-link{color:var(--tui-link)}.text-tui-primary{color:var(--tui-primary)}.text-tui-success-fill{color:var(--tui-success-fill)}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-1{--tw-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 5px 20px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.shadow-sc-2{--tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, .1);--tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia: sepia(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.\\!transition-all{transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.\\!duration-500{transition-duration:.5s!important}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\[fs\\:0\\]{fs:0}.\\[k\\:string\\]{k:string}.hover\\:text-tui-link-hover:hover{color:var(--tui-link-hover)}.group:hover .group-hover\\:block{display:block}\n"] }]
+            args: [{ selector: 'sc-news-card-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"block relative h-82 w-70 shadow-sc-2 rounded-lg overflow-hidden bg-white\">\n    <div *ngIf=\"hasImg; else textBlock\" class=\"bg-tui-base-02 w-full h-50\"></div>\n    <ng-template #textBlock>\n        <div class=\"px-6 py-4.5 w-full flex flex-col gap-2\">\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-3/4\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-3/4\"></div>\n            <div class=\"h-3 rounded bg-tui-base-02 w-full\"></div>\n        </div>\n    </ng-template>\n\n    <div class=\"w-3/4\">\n        <ng-container *ngTemplateOutlet=\"textBlock\"></ng-container>\n    </div>\n</div>\n" }]
         }], propDecorators: { hasImg: [{
                 type: Input
             }] } });
@@ -1045,16 +1418,16 @@ class ScOrderItemMobileComponent {
     /**
      * Инициирует экземпляр класса {@link ScOrderItemMobileComponent}.
      *
+     * @param unitsHelper Объект-хэлпер для работы со значениями единиц измерения товара.
      * @param previewDialogService Сервис диалогового окна предварительного просмотра.
      * @param urls Список ссылок на разделы backend'a.
      * @param pathImageNotFound Путь до изображения 'Товар не найден'.
-     * @param linearValues Единицы измерения линейной величины.
      */
-    constructor(previewDialogService, urls, pathImageNotFound, linearValues) {
+    constructor(unitsHelper, previewDialogService, urls, pathImageNotFound) {
+        this.unitsHelper = unitsHelper;
         this.previewDialogService = previewDialogService;
         this.urls = urls;
         this.pathImageNotFound = pathImageNotFound;
-        this.linearValues = linearValues;
         /**
          * Событие нажатия на карточку.
          */
@@ -1068,7 +1441,8 @@ class ScOrderItemMobileComponent {
      * Продукт элемента заказа.
      */
     get product() {
-        return this.orderItem.product;
+        var _a;
+        return (_a = this.orderItem) === null || _a === void 0 ? void 0 : _a.product;
     }
     /**
      * Отобразить спецификацию.
@@ -1076,12 +1450,6 @@ class ScOrderItemMobileComponent {
     showSpecification() {
         this.previewDialogService.open(this.specificationPreviewRef || '').subscribe();
     }
-    /**
-     * Возвращает признак возможности продажи товара на метраж.
-     */
-    productIsMeasurable() {
-        return this.product.minCount && !this.linearValues.includes(this.product.unit) ? this.product.minCount : 1;
-    }
     /**
      * Возвращает ссылку на изображение карточки товара.
      */
@@ -1090,13 +1458,13 @@ class ScOrderItemMobileComponent {
         return (_b = (_a = this.product) === null || _a === void 0 ? void 0 : _a.getImage(this.urls.imgServerUrl)) !== null && _b !== void 0 ? _b : this.urls.imgServerUrl + this.pathImageNotFound;
     }
 }
-ScOrderItemMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScOrderItemMobileComponent, deps: [{ token: TuiPreviewDialogService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }, { token: SC_LINEAR_VALUES_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-ScOrderItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScOrderItemMobileComponent, selector: "sc-order-item-mobile", inputs: { orderItem: "orderItem" }, outputs: { clickCardEvent: "clickCardEvent", clickActionsEvent: "clickActionsEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], ngImport: i0, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <button\n        tuiIconButton\n        (click)=\"clickActionsEvent.emit()\"\n        size=\"m\"\n        icon=\"scIconVerticalThreeDots\"\n        appearance=\"float\"\n        tuiMode=\"onLight\"\n        class=\"!hidden !absolute right-0 top-0\"\n    ></button>\n    <div class=\"flex gap-2 grow\">\n        <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n        </div>\n\n        <div class=\"flex flex-wrap self-center gap-x-8 grow\">\n            <div class=\"basis-min-content flex flex-col grow\">\n                <a tuiLink (click)=\"clickCardEvent.emit()\">\n                    <span class=\"font-bold\">{{ product.name }}</span>\n                </a>\n                <div class=\"text-tui-base-07 text-xs flex flex-col gap-y-0.5\">\n                    <div class=\"flex flex-wrap gap-y-0.5\">\n                        <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ orderItem.product.code }}</p>\n                        <p class=\"w-40\" *ngIf=\"orderItem.product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ orderItem.product.pack }}</p>\n                    </div>\n                    <a tuiLink *ngIf=\"orderItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                </div>\n            </div>\n            <div class=\"flex flex-wrap content-center\">\n                <div class=\"flex flex-col w-40 gap-x-8 gap-y-0.5\">\n                    <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-base-07\">\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                        <ng-template #discountHint>\n                            <div class=\"font-bold\">{{ product.discount.name }}</div>\n                            <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                        </ng-template>\n                    </span>\n                    <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                        <span>{{ product.costRubString }}</span>\n                        <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-base-07\">{{ product.costString }}</span>\n                    </p>\n                    <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                </div>\n\n                <div class=\"w-40 text-xs text-tui-base-07\">\n                    <ng-container *ngIf=\"productIsMeasurable(); else notMeasurable\">\n                        <p>\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} {{ orderItem.product.unit }}</p>\n                    </ng-container>\n                    <ng-template #notMeasurable>\n                        <p *ngIf=\"orderItem.length && !productIsMeasurable()\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                        <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                        <p *ngIf=\"orderItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                    </ng-template>\n                    <p class=\"text-tui-base-09 text-sm\">\n                        \u0421\u0443\u043C\u043C\u0430: <span class=\"font-bold whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                    </p>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: i2.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i2.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+ScOrderItemMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScOrderItemMobileComponent, deps: [{ token: UnitsHelper }, { token: TuiPreviewDialogService }, { token: SC_URLS }, { token: SC_PATH_IMAGE_NOT_FOUND }], target: i0.ɵɵFactoryTarget.Component });
+ScOrderItemMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScOrderItemMobileComponent, selector: "sc-order-item-mobile", inputs: { orderItem: "orderItem" }, outputs: { clickCardEvent: "clickCardEvent", clickActionsEvent: "clickActionsEvent" }, viewQueries: [{ propertyName: "specificationPreviewRef", first: true, predicate: ["specificationPreview"], descendants: true }], ngImport: i0, template: "<div class=\"relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <ng-container *ngIf=\"orderItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickActionsEvent.emit()\"\n            size=\"m\"\n            icon=\"scIconVerticalThreeDots\"\n            appearance=\"float\"\n            tuiMode=\"onLight\"\n            class=\"!hidden !absolute right-0 top-0\"\n        ></button>\n        <div class=\"flex gap-2 grow\">\n            <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n                <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            </div>\n\n            <div class=\"flex flex-wrap self-center gap-x-8 grow\">\n                <div class=\"basis-min-content flex flex-col grow\">\n                    <a tuiLink (click)=\"clickCardEvent.emit()\">\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"text-tui-text-02 text-xs flex flex-col gap-y-0.5\">\n                        <div class=\"flex flex-wrap gap-y-0.5\">\n                            <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                            <p class=\"w-40\" *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                        </div>\n                        <a tuiLink *ngIf=\"orderItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap content-center\">\n                    <div class=\"flex flex-col w-40 gap-x-8 gap-y-0.5\">\n                        <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n                            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                            <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                            <ng-template #discountHint>\n                                <div class=\"font-bold\">{{ product.discount.name }}</div>\n                                <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                            </ng-template>\n                        </span>\n                        <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                            <span>{{ product.costRubString }}</span>\n                            <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n                        </p>\n                        <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                    </div>\n\n                    <div class=\"w-40 text-xs text-tui-text-02\">\n                        <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n                            <p>\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} {{ product.unit }}</p>\n                        </ng-container>\n                        <ng-template #notMeasurable>\n                            <p *ngIf=\"orderItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                            <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                            <p *ngIf=\"orderItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                        </ng-template>\n                        <p class=\"text-tui-base-09 text-sm\">\n                            \u0421\u0443\u043C\u043C\u0430: <span class=\"font-bold whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex gap-2 w-full\">\n            <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n            <div class=\"flex flex-col grow gap-2.5 bg-white\">\n                <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: i3.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "directive", type: i3.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { kind: "component", type: ScPriceWarehouseStockComponent, selector: "sc-price-warehouse-stock", inputs: ["classList", "product", "withStockHint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScOrderItemMobileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-order-item-mobile', changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"ml-2 mt-2 relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <button\n        tuiIconButton\n        (click)=\"clickActionsEvent.emit()\"\n        size=\"m\"\n        icon=\"scIconVerticalThreeDots\"\n        appearance=\"float\"\n        tuiMode=\"onLight\"\n        class=\"!hidden !absolute right-0 top-0\"\n    ></button>\n    <div class=\"flex gap-2 grow\">\n        <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n            <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n        </div>\n\n        <div class=\"flex flex-wrap self-center gap-x-8 grow\">\n            <div class=\"basis-min-content flex flex-col grow\">\n                <a tuiLink (click)=\"clickCardEvent.emit()\">\n                    <span class=\"font-bold\">{{ product.name }}</span>\n                </a>\n                <div class=\"text-tui-base-07 text-xs flex flex-col gap-y-0.5\">\n                    <div class=\"flex flex-wrap gap-y-0.5\">\n                        <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ orderItem.product.code }}</p>\n                        <p class=\"w-40\" *ngIf=\"orderItem.product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ orderItem.product.pack }}</p>\n                    </div>\n                    <a tuiLink *ngIf=\"orderItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                </div>\n            </div>\n            <div class=\"flex flex-wrap content-center\">\n                <div class=\"flex flex-col w-40 gap-x-8 gap-y-0.5\">\n                    <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-base-07\">\n                        <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                        <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                        <ng-template #discountHint>\n                            <div class=\"font-bold\">{{ product.discount.name }}</div>\n                            <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                        </ng-template>\n                    </span>\n                    <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                        <span>{{ product.costRubString }}</span>\n                        <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-base-07\">{{ product.costString }}</span>\n                    </p>\n                    <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                </div>\n\n                <div class=\"w-40 text-xs text-tui-base-07\">\n                    <ng-container *ngIf=\"productIsMeasurable(); else notMeasurable\">\n                        <p>\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} {{ orderItem.product.unit }}</p>\n                    </ng-container>\n                    <ng-template #notMeasurable>\n                        <p *ngIf=\"orderItem.length && !productIsMeasurable()\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                        <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                        <p *ngIf=\"orderItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                    </ng-template>\n                    <p class=\"text-tui-base-09 text-sm\">\n                        \u0421\u0443\u043C\u043C\u0430: <span class=\"font-bold whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                    </p>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'sc-order-item-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative p-4 gap-y-2 gap-x-4 flex flex-wrap bg-white border border-tui-base-04 shadow-sc-2 rounded-xl\">\n    <ng-container *ngIf=\"orderItem && product; else skeleton\">\n        <button\n            tuiIconButton\n            (click)=\"clickActionsEvent.emit()\"\n            size=\"m\"\n            icon=\"scIconVerticalThreeDots\"\n            appearance=\"float\"\n            tuiMode=\"onLight\"\n            class=\"!hidden !absolute right-0 top-0\"\n        ></button>\n        <div class=\"flex gap-2 grow\">\n            <div class=\"flex shrink-0 h-20 w-20 justify-center items-center overflow-hidden\">\n                <img (click)=\"clickCardEvent.emit()\" [src]=\"getCardImage()\" [alt]=\"product.name\" [class.p-5]=\"!product.images?.length\" class=\"cursor-pointer\" />\n            </div>\n\n            <div class=\"flex flex-wrap self-center gap-x-8 grow\">\n                <div class=\"basis-min-content flex flex-col grow\">\n                    <a tuiLink (click)=\"clickCardEvent.emit()\">\n                        <span class=\"font-bold\">{{ product.name }}</span>\n                    </a>\n                    <div class=\"text-tui-text-02 text-xs flex flex-col gap-y-0.5\">\n                        <div class=\"flex flex-wrap gap-y-0.5\">\n                            <p class=\"w-40\">\u0410\u0440\u0442\u0438\u043A\u0443\u043B: {{ product.code }}</p>\n                            <p class=\"w-40\" *ngIf=\"product.pack\">\u041D\u043E\u0440\u043C\u0430 \u0443\u043F\u0430\u043A\u043E\u0432\u043A\u0438: {{ product.pack }}</p>\n                        </div>\n                        <a tuiLink *ngIf=\"orderItem.specificationImgUrl\" (click)=\"showSpecification()\">\u0421\u043F\u0435\u0446\u0438\u0444\u0438\u043A\u0430\u0446\u0438\u044F</a>\n                    </div>\n                </div>\n                <div class=\"flex flex-wrap content-center\">\n                    <div class=\"flex flex-col w-40 gap-x-8 gap-y-0.5\">\n                        <span *ngIf=\"product.discount\" class=\"flex items-center text-xs text-tui-text-02\">\n                            <span class=\"line-through\">{{ product.discountCostString }}</span> &nbsp;\n                            <span class=\"text-tui-success-fill font-bold\"> -{{ product.discount.percent }}% </span>\n                            <ng-template #discountHint>\n                                <div class=\"font-bold\">{{ product.discount.name }}</div>\n                                <div *ngIf=\"product.discount.expiredAt as expiredAt\">\u0414\u0430\u0442\u0430 \u043E\u043A\u043E\u043D\u0447\u0430\u043D\u0438\u044F: {{ expiredAt }}</div>\n                            </ng-template>\n                        </span>\n                        <p class=\"flex flex-col items-baseline gap-x-2 font-bold\">\n                            <span>{{ product.costRubString }}</span>\n                            <span *ngIf=\"!product.priceInRub\" class=\"text-xs text-tui-text-02\">{{ product.costString }}</span>\n                        </p>\n                        <sc-price-warehouse-stock [product]=\"product\"></sc-price-warehouse-stock>\n                    </div>\n\n                    <div class=\"w-40 text-xs text-tui-text-02\">\n                        <ng-container *ngIf=\"unitsHelper.productIsMeasurable(product); else notMeasurable\">\n                            <p>\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} {{ product.unit }}</p>\n                        </ng-container>\n                        <ng-template #notMeasurable>\n                            <p *ngIf=\"orderItem.length && !unitsHelper.productIsMeasurable(product)\">\u0414\u043B\u0438\u043D\u0430: {{ orderItem.length }} \u043C.</p>\n                            <p *ngIf=\"orderItem.width\">\u0428\u0438\u0440\u0438\u043D\u0430: {{ orderItem.width }} \u043C.</p>\n                            <p *ngIf=\"orderItem.height\">\u0412\u044B\u0441\u043E\u0442\u0430: {{ orderItem.height }} \u043C.</p>\n                        </ng-template>\n                        <p class=\"text-tui-base-09 text-sm\">\n                            \u0421\u0443\u043C\u043C\u0430: <span class=\"font-bold whitespace-nowrap\"> {{ orderItem.getCostRubStr() }} </span>\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-template #skeleton>\n        <div class=\"flex gap-2 w-full\">\n            <div class=\"h-20 w-20 bg-tui-base-02 rounded-xl \"></div>\n            <div class=\"flex flex-col grow gap-2.5 bg-white\">\n                <div class=\"w-full h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-3/5 h-4 rounded-xl bg-tui-base-02\"></div>\n                <div class=\"w-4/5 h-4 rounded-xl bg-tui-base-02\"></div>\n            </div>\n        </div>\n    </ng-template>\n</div>\n" }]
         }], ctorParameters: function () {
-        return [{ type: i6$1.TuiPreviewDialogService, decorators: [{
+        return [{ type: UnitsHelper }, { type: i7.TuiPreviewDialogService, decorators: [{
                         type: Inject,
                         args: [TuiPreviewDialogService]
                     }] }, { type: undefined, decorators: [{
@@ -1105,9 +1473,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     }] }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [SC_PATH_IMAGE_NOT_FOUND]
-                    }] }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [SC_LINEAR_VALUES_TOKEN]
                     }] }];
     }, propDecorators: { specificationPreviewRef: [{
                 type: ViewChild,
@@ -1145,5 +1510,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CartModule, SC_LINEAR_VALUES, SC_LINEAR_VALUES_TOKEN, ScBannerComponent, ScBannerModule, ScCartItemMobileComponent, ScCatalogModule, ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsModule, ScOrderItemMobileComponent, ScOrderModule, ScPriceCardComponent, ScPriceWarehouseStockComponent, ScShareButtonComponent, ScShareButtonModule, scClientUiIconsName, stepValidator };
+export { CartModule, SC_LINEAR_VALUES, SC_LINEAR_VALUES_TOKEN, ScBannerComponent, ScBannerModule, ScCartItemMobileComponent, ScCatalogModule, ScCategoryCardComponent, ScFavoriteBtnComponent, ScInputQuantityComponent, ScNewsCardComponent, ScNewsCardSkeletonComponent, ScNewsModule, ScOrderItemMobileComponent, ScOrderModule, ScPriceCardComponent, ScPriceHistoryComponent, ScPriceWarehouseStockComponent, ScShareButtonComponent, ScShareButtonModule, scClientUiIconsName, stepValidator };
 //# sourceMappingURL=snabcentr-client-ui.mjs.map