@snabcentr/client-ui 3.44.12 → 3.44.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -33,10 +33,10 @@ export class ScPreviewSampleComponent {
|
|
|
33
33
|
this.isReverse = input(false);
|
|
34
34
|
}
|
|
35
35
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScPreviewSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ScPreviewSampleComponent, selector: "sc-preview-sample", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, sample: { classPropertyName: "sample", publicName: "sample", isSignal: true, isRequired: true, transformFunction: null }, isShowCarouselSwitches: { classPropertyName: "isShowCarouselSwitches", publicName: "isShowCarouselSwitches", isSignal: true, isRequired: false, transformFunction: null }, isReverse: { classPropertyName: "isReverse", publicName: "isReverse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "<div\n *ngIf=\"sample() as sample\"\n class=\"mb-4 flex flex-col-reverse gap-4 md:mb-0 md:flex-row md:gap-8\"\n [class.md:!flex-row-reverse]=\"isReverse()\"\n>\n @let isShownSwitches = sample.items && sample.items.length > 1;\n\n <div class=\"flex max-w-96 flex-1 flex-col justify-center self-center md:max-w-none md:gap-4\">\n <div class=\"flex w-full flex-col gap-3 md:gap-4 md:px-8\">\n <div class=\"text-body-l-bold\">{{ sample.title }}</div>\n <div\n *ngIf=\"isShownSwitches\"\n class=\"flex gap-4\"\n >\n <tui-avatar\n [round]=\"false\"\n *ngFor=\"let item of sample.items; let itemIndex = index\"\n (tuiHoveredChange)=\"index.set(itemIndex)\"\n [class.active]=\"index() === itemIndex\"\n >\n <picture>\n <source\n type=\"image/webp\"\n [srcset]=\"item.buttonImageUrl.webp\"\n />\n <img\n [src]=\"item.buttonImageUrl.defaultFormat\"\n [alt]=\"item.buttonImageUrl.alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + item.color\"\n />\n </picture>\n </tui-avatar>\n </div>\n <div\n *ngIf=\"sample.items as items\"\n class=\"text-body-m-bold\"\n >\n {{ items[index()].color }}\n </div>\n <div>{{ sample.description }}</div>\n <img\n *ngIf=\"sample.descriptionImageUrl\"\n [src]=\"sample.descriptionImageUrl\"\n alt=\"
|
|
36
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ScPreviewSampleComponent, selector: "sc-preview-sample", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, sample: { classPropertyName: "sample", publicName: "sample", isSignal: true, isRequired: true, transformFunction: null }, isShowCarouselSwitches: { classPropertyName: "isShowCarouselSwitches", publicName: "isShowCarouselSwitches", isSignal: true, isRequired: false, transformFunction: null }, isReverse: { classPropertyName: "isReverse", publicName: "isReverse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "<div\n *ngIf=\"sample() as sample\"\n class=\"mb-4 flex flex-col-reverse gap-4 md:mb-0 md:flex-row md:gap-8\"\n [class.md:!flex-row-reverse]=\"isReverse()\"\n>\n @let isShownSwitches = sample.items && sample.items.length > 1;\n\n <div class=\"flex max-w-96 flex-1 flex-col justify-center self-center md:max-w-none md:gap-4\">\n <div class=\"flex w-full flex-col gap-3 md:gap-4 md:px-8\">\n <div class=\"text-body-l-bold\">{{ sample.title }}</div>\n <div\n *ngIf=\"isShownSwitches\"\n class=\"flex gap-4\"\n >\n <tui-avatar\n [round]=\"false\"\n *ngFor=\"let item of sample.items; let itemIndex = index\"\n (tuiHoveredChange)=\"index.set(itemIndex)\"\n [class.active]=\"index() === itemIndex\"\n >\n <picture>\n <source\n type=\"image/webp\"\n [srcset]=\"item.buttonImageUrl.webp\"\n />\n <img\n [src]=\"item.buttonImageUrl.defaultFormat\"\n [alt]=\"item.buttonImageUrl.alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + item.color\"\n />\n </picture>\n </tui-avatar>\n </div>\n <div\n *ngIf=\"sample.items as items\"\n class=\"text-body-m-bold\"\n >\n {{ items[index()].color }}\n </div>\n <div>{{ sample.description }}</div>\n <img\n *ngIf=\"sample.descriptionImageUrl\"\n [src]=\"sample.descriptionImageUrl\"\n alt=\"{{ sample.title }}\"\n class=\"w-fit\"\n />\n <div\n *ngIf=\"sample.items && sample.items[index()].actions?.length\"\n class=\"flex flex-wrap gap-3 md:gap-4\"\n >\n <a\n *ngFor=\"let action of sample.items[index()].actions\"\n tuiButton\n [attr.href]=\"action.href\"\n (click)=\"action.handler ? $event.preventDefault() : {}; action.handler?.()\"\n [iconStart]=\"action.icon\"\n appearance=\"secondary\"\n >\n {{ action.label }}\n </a>\n </div>\n </div>\n </div>\n\n <div class=\"relative h-[19em] flex-1 overflow-hidden rounded-xl shadow-tui-shadow md:h-96 lg:h-[28rem]\">\n <button\n *ngIf=\"isShownSwitches && isShowCarouselSwitches()\"\n tuiIconButton\n (click)=\"carousel.prev()\"\n iconStart=\"@tui.chevron-left\"\n appearance=\"icon\"\n class=\"!absolute left-0 top-1/2 z-10 ml-2 -translate-y-1/2\"\n ></button>\n\n <tui-carousel\n #carousel\n [(index)]=\"index\"\n [duration]=\"duration()\"\n class=\"h-[19em] w-full md:h-96 lg:h-[28rem]\"\n >\n <ng-container *ngFor=\"let item of sample.items; let itemIndex = index\">\n <picture *tuiItem>\n <source\n type=\"image/webp\"\n [srcset]=\"item.carouselItemImage.webp\"\n />\n <img\n [src]=\"item.carouselItemImage.defaultFormat\"\n [alt]=\"item.carouselItemImage.alt ?? sample.title + ' \u0432 \u0446\u0432\u0435\u0442\u0435 ' + item.color + itemIndex\"\n class=\"h-[19em] w-full object-cover object-right md:h-96 lg:h-[28rem]\"\n />\n </picture>\n </ng-container>\n </tui-carousel>\n <button\n *ngIf=\"isShownSwitches && isShowCarouselSwitches()\"\n tuiIconButton\n (click)=\"carousel.next()\"\n iconStart=\"@tui.chevron-right\"\n appearance=\"icon\"\n class=\"!absolute right-0 top-1/2 z-10 mr-2 -translate-y-1/2\"\n ></button>\n </div>\n</div>\n", styles: [":host{--tui-carousel-padding: 0}tui-avatar.active{--tw-ring-color: var(--tui-background-accent-1);--tw-ring-offset-width: 2px;--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(2px + 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))}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TuiItem, selector: "[tuiItem]" }, { kind: "component", type: i3.TuiCarouselComponent, selector: "tui-carousel", inputs: ["draggable", "itemsCount", "index"], outputs: ["indexChange", "shift"] }, { kind: "component", type: i3.TuiAvatar, selector: "tui-avatar,button[tuiAvatar],a[tuiAvatar]", inputs: ["size", "round", "src"] }, { kind: "directive", type: i4.TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { kind: "directive", type: i5.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
37
37
|
}
|
|
38
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScPreviewSampleComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
|
-
args: [{ selector: 'sc-preview-sample', host: { ngSkipHydration: 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"sample() as sample\"\n class=\"mb-4 flex flex-col-reverse gap-4 md:mb-0 md:flex-row md:gap-8\"\n [class.md:!flex-row-reverse]=\"isReverse()\"\n>\n @let isShownSwitches = sample.items && sample.items.length > 1;\n\n <div class=\"flex max-w-96 flex-1 flex-col justify-center self-center md:max-w-none md:gap-4\">\n <div class=\"flex w-full flex-col gap-3 md:gap-4 md:px-8\">\n <div class=\"text-body-l-bold\">{{ sample.title }}</div>\n <div\n *ngIf=\"isShownSwitches\"\n class=\"flex gap-4\"\n >\n <tui-avatar\n [round]=\"false\"\n *ngFor=\"let item of sample.items; let itemIndex = index\"\n (tuiHoveredChange)=\"index.set(itemIndex)\"\n [class.active]=\"index() === itemIndex\"\n >\n <picture>\n <source\n type=\"image/webp\"\n [srcset]=\"item.buttonImageUrl.webp\"\n />\n <img\n [src]=\"item.buttonImageUrl.defaultFormat\"\n [alt]=\"item.buttonImageUrl.alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + item.color\"\n />\n </picture>\n </tui-avatar>\n </div>\n <div\n *ngIf=\"sample.items as items\"\n class=\"text-body-m-bold\"\n >\n {{ items[index()].color }}\n </div>\n <div>{{ sample.description }}</div>\n <img\n *ngIf=\"sample.descriptionImageUrl\"\n [src]=\"sample.descriptionImageUrl\"\n alt=\"
|
|
40
|
+
args: [{ selector: 'sc-preview-sample', host: { ngSkipHydration: 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"sample() as sample\"\n class=\"mb-4 flex flex-col-reverse gap-4 md:mb-0 md:flex-row md:gap-8\"\n [class.md:!flex-row-reverse]=\"isReverse()\"\n>\n @let isShownSwitches = sample.items && sample.items.length > 1;\n\n <div class=\"flex max-w-96 flex-1 flex-col justify-center self-center md:max-w-none md:gap-4\">\n <div class=\"flex w-full flex-col gap-3 md:gap-4 md:px-8\">\n <div class=\"text-body-l-bold\">{{ sample.title }}</div>\n <div\n *ngIf=\"isShownSwitches\"\n class=\"flex gap-4\"\n >\n <tui-avatar\n [round]=\"false\"\n *ngFor=\"let item of sample.items; let itemIndex = index\"\n (tuiHoveredChange)=\"index.set(itemIndex)\"\n [class.active]=\"index() === itemIndex\"\n >\n <picture>\n <source\n type=\"image/webp\"\n [srcset]=\"item.buttonImageUrl.webp\"\n />\n <img\n [src]=\"item.buttonImageUrl.defaultFormat\"\n [alt]=\"item.buttonImageUrl.alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + item.color\"\n />\n </picture>\n </tui-avatar>\n </div>\n <div\n *ngIf=\"sample.items as items\"\n class=\"text-body-m-bold\"\n >\n {{ items[index()].color }}\n </div>\n <div>{{ sample.description }}</div>\n <img\n *ngIf=\"sample.descriptionImageUrl\"\n [src]=\"sample.descriptionImageUrl\"\n alt=\"{{ sample.title }}\"\n class=\"w-fit\"\n />\n <div\n *ngIf=\"sample.items && sample.items[index()].actions?.length\"\n class=\"flex flex-wrap gap-3 md:gap-4\"\n >\n <a\n *ngFor=\"let action of sample.items[index()].actions\"\n tuiButton\n [attr.href]=\"action.href\"\n (click)=\"action.handler ? $event.preventDefault() : {}; action.handler?.()\"\n [iconStart]=\"action.icon\"\n appearance=\"secondary\"\n >\n {{ action.label }}\n </a>\n </div>\n </div>\n </div>\n\n <div class=\"relative h-[19em] flex-1 overflow-hidden rounded-xl shadow-tui-shadow md:h-96 lg:h-[28rem]\">\n <button\n *ngIf=\"isShownSwitches && isShowCarouselSwitches()\"\n tuiIconButton\n (click)=\"carousel.prev()\"\n iconStart=\"@tui.chevron-left\"\n appearance=\"icon\"\n class=\"!absolute left-0 top-1/2 z-10 ml-2 -translate-y-1/2\"\n ></button>\n\n <tui-carousel\n #carousel\n [(index)]=\"index\"\n [duration]=\"duration()\"\n class=\"h-[19em] w-full md:h-96 lg:h-[28rem]\"\n >\n <ng-container *ngFor=\"let item of sample.items; let itemIndex = index\">\n <picture *tuiItem>\n <source\n type=\"image/webp\"\n [srcset]=\"item.carouselItemImage.webp\"\n />\n <img\n [src]=\"item.carouselItemImage.defaultFormat\"\n [alt]=\"item.carouselItemImage.alt ?? sample.title + ' \u0432 \u0446\u0432\u0435\u0442\u0435 ' + item.color + itemIndex\"\n class=\"h-[19em] w-full object-cover object-right md:h-96 lg:h-[28rem]\"\n />\n </picture>\n </ng-container>\n </tui-carousel>\n <button\n *ngIf=\"isShownSwitches && isShowCarouselSwitches()\"\n tuiIconButton\n (click)=\"carousel.next()\"\n iconStart=\"@tui.chevron-right\"\n appearance=\"icon\"\n class=\"!absolute right-0 top-1/2 z-10 mr-2 -translate-y-1/2\"\n ></button>\n </div>\n</div>\n", styles: [":host{--tui-carousel-padding: 0}tui-avatar.active{--tw-ring-color: var(--tui-background-accent-1);--tw-ring-offset-width: 2px;--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(2px + 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))}\n"] }]
|
|
41
41
|
}] });
|
|
42
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2MtcHJldmlldy1zYW1wbGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2xpZW50LXVpL3NhbXBsZXMvcHJldmlldy1zYW1wbGUvc2MtcHJldmlldy1zYW1wbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2xpZW50LXVpL3NhbXBsZXMvcHJldmlldy1zYW1wbGUvc2MtcHJldmlldy1zYW1wbGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFlLEtBQUssRUFBZSxNQUFNLGVBQWUsQ0FBQztBQUNuSCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7O0FBSTlDOztHQUVHO0FBUUgsTUFBTSxPQUFPLHdCQUF3QjtJQVByQztRQVFJOztXQUVHO1FBQ2EsVUFBSyxHQUF3QixLQUFLLENBQVMsQ0FBQyxDQUFDLENBQUM7UUFFOUQ7O1dBRUc7UUFDSSxhQUFRLEdBQXdCLEtBQUssQ0FBUyxJQUFJLENBQUMsQ0FBQztRQUUzRDs7V0FFRztRQUNJLFdBQU0sR0FBa0MsS0FBSyxDQUFDLFFBQVEsRUFBb0IsQ0FBQztRQUVsRjs7V0FFRztRQUNJLDJCQUFzQixHQUF5QixLQUFLLENBQUMsQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQztRQUVwRjs7V0FFRztRQUNJLGNBQVMsR0FBeUIsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0tBQ3pEOytHQXpCWSx3QkFBd0I7bUdBQXhCLHdCQUF3QiwrekJDZnJDLCt4SUF1R0E7OzRGRHhGYSx3QkFBd0I7a0JBUHBDLFNBQVM7K0JBQ0ksbUJBQW1CLFFBR3ZCLEVBQUUsZUFBZSxFQUFFLE1BQU0sRUFBRSxtQkFDaEIsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGluamVjdCwgaW5wdXQsIElucHV0U2lnbmFsLCBtb2RlbCwgTW9kZWxTaWduYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRVSV9JU19NT0JJTEUgfSBmcm9tICdAdGFpZ2EtdWkvY2RrJztcblxuaW1wb3J0IHsgU2NJUHJldmlld1NhbXBsZSB9IGZyb20gJy4uL2ludGVyZmFjZXMvc2MtaS1wcmV2aWV3LXNhbXBsZSc7XG5cbi8qKlxuICog0JrQvtC80L/QvtC90LXQvdGCINC/0YDQtdC00YHRgtCw0LLQu9C10L3QuNGPINC+0LHRgNCw0LfRhtC+0LIg0YLQvtCy0LDRgNCwLlxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3NjLXByZXZpZXctc2FtcGxlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vc2MtcHJldmlldy1zYW1wbGUuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3NjLXByZXZpZXctc2FtcGxlLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgaG9zdDogeyBuZ1NraXBIeWRyYXRpb246ICd0cnVlJyB9LFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTY1ByZXZpZXdTYW1wbGVDb21wb25lbnQge1xuICAgIC8qKlxuICAgICAqINCY0L3QtNC10LrRgSDRjdC70LXQvNC10L3RgtCwINCyINCz0LDQu9C10YDQtdC1LlxuICAgICAqL1xuICAgIHB1YmxpYyByZWFkb25seSBpbmRleDogTW9kZWxTaWduYWw8bnVtYmVyPiA9IG1vZGVsPG51bWJlcj4oMCk7XG5cbiAgICAvKipcbiAgICAgKiDQlNC70LjRgtC10LvRjNC90L7RgdGC0Ywg0L/QtdGA0LXQutC70Y7Rh9C10L3QuNGPINC60LDRgNGD0YHQtdC70LguXG4gICAgICovXG4gICAgcHVibGljIGR1cmF0aW9uOiBJbnB1dFNpZ25hbDxudW1iZXI+ID0gaW5wdXQ8bnVtYmVyPig1MDAwKTtcblxuICAgIC8qKlxuICAgICAqINCe0LHRitC10LrRgiDQtNCw0L3QvdGL0YUg0YLQvtCy0LDRgNCwLlxuICAgICAqL1xuICAgIHB1YmxpYyBzYW1wbGU6IElucHV0U2lnbmFsPFNjSVByZXZpZXdTYW1wbGU+ID0gaW5wdXQucmVxdWlyZWQ8U2NJUHJldmlld1NhbXBsZT4oKTtcblxuICAgIC8qKlxuICAgICAqINCf0YDQuNC30L3QsNC6LCDRh9GC0L4g0L3QtdC+0LHRhdC+0LTQuNC80L4g0L7RgtC+0LHRgNCw0LbQsNGC0Ywg0L/QtdGA0LXQutC70Y7Rh9Cw0YLQtdC70Lgg0L3QsCDQutCw0YDRg9GB0LXQu9C4LlxuICAgICAqL1xuICAgIHB1YmxpYyBpc1Nob3dDYXJvdXNlbFN3aXRjaGVzOiBJbnB1dFNpZ25hbDxib29sZWFuPiA9IGlucHV0KCFpbmplY3QoVFVJX0lTX01PQklMRSkpO1xuXG4gICAgLyoqXG4gICAgICog0J/RgNC40LfQvdCw0LosINGH0YLQviDQv9GA0Lgg0LPQvtGA0LjQt9C+0L3RgtCw0LvRjNC90L7QvCDQvtGC0L7QsdGA0LDQttC10L3QuNC4INC60L7QvNC/0L7QvdC10L3RgiDQtNC+0LvQttC10L0g0LHRi9GC0Ywg0YDQsNC30LLRkdGA0L3Rg9GCLlxuICAgICAqL1xuICAgIHB1YmxpYyBpc1JldmVyc2U6IElucHV0U2lnbmFsPGJvb2xlYW4+ID0gaW5wdXQoZmFsc2UpO1xufVxuIiwiPGRpdlxuICAgICpuZ0lmPVwic2FtcGxlKCkgYXMgc2FtcGxlXCJcbiAgICBjbGFzcz1cIm1iLTQgZmxleCBmbGV4LWNvbC1yZXZlcnNlIGdhcC00IG1kOm1iLTAgbWQ6ZmxleC1yb3cgbWQ6Z2FwLThcIlxuICAgIFtjbGFzcy5tZDohZmxleC1yb3ctcmV2ZXJzZV09XCJpc1JldmVyc2UoKVwiXG4+XG4gICAgQGxldCBpc1Nob3duU3dpdGNoZXMgPSBzYW1wbGUuaXRlbXMgJiYgc2FtcGxlLml0ZW1zLmxlbmd0aCA+IDE7XG5cbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBtYXgtdy05NiBmbGV4LTEgZmxleC1jb2wganVzdGlmeS1jZW50ZXIgc2VsZi1jZW50ZXIgbWQ6bWF4LXctbm9uZSBtZDpnYXAtNFwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCB3LWZ1bGwgZmxleC1jb2wgZ2FwLTMgbWQ6Z2FwLTQgbWQ6cHgtOFwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInRleHQtYm9keS1sLWJvbGRcIj57eyBzYW1wbGUudGl0bGUgfX08L2Rpdj5cbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAqbmdJZj1cImlzU2hvd25Td2l0Y2hlc1wiXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJmbGV4IGdhcC00XCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8dHVpLWF2YXRhclxuICAgICAgICAgICAgICAgICAgICBbcm91bmRdPVwiZmFsc2VcIlxuICAgICAgICAgICAgICAgICAgICAqbmdGb3I9XCJsZXQgaXRlbSBvZiBzYW1wbGUuaXRlbXM7IGxldCBpdGVtSW5kZXggPSBpbmRleFwiXG4gICAgICAgICAgICAgICAgICAgICh0dWlIb3ZlcmVkQ2hhbmdlKT1cImluZGV4LnNldChpdGVtSW5kZXgpXCJcbiAgICAgICAgICAgICAgICAgICAgW2NsYXNzLmFjdGl2ZV09XCJpbmRleCgpID09PSBpdGVtSW5kZXhcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPHBpY3R1cmU+XG4gICAgICAgICAgICAgICAgICAgICAgICA8c291cmNlXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZT1cImltYWdlL3dlYnBcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtzcmNzZXRdPVwiaXRlbS5idXR0b25JbWFnZVVybC53ZWJwXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8aW1nXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgW3NyY109XCJpdGVtLmJ1dHRvbkltYWdlVXJsLmRlZmF1bHRGb3JtYXRcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIFthbHRdPVwiaXRlbS5idXR0b25JbWFnZVVybC5hbHQgPz8gJ9Ca0L3QvtC/0LrQsCDQv9C10YDQtdC60LvRjtGH0LDRgtC10LvRjyDRhtCy0LXRgtCwICcgKyBpdGVtLmNvbG9yXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgIDwvcGljdHVyZT5cbiAgICAgICAgICAgICAgICA8L3R1aS1hdmF0YXI+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAqbmdJZj1cInNhbXBsZS5pdGVtcyBhcyBpdGVtc1wiXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LWJvZHktbS1ib2xkXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7eyBpdGVtc1tpbmRleCgpXS5jb2xvciB9fVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2Pnt7IHNhbXBsZS5kZXNjcmlwdGlvbiB9fTwvZGl2PlxuICAgICAgICAgICAgPGltZ1xuICAgICAgICAgICAgICAgICpuZ0lmPVwic2FtcGxlLmRlc2NyaXB0aW9uSW1hZ2VVcmxcIlxuICAgICAgICAgICAgICAgIFtzcmNdPVwic2FtcGxlLmRlc2NyaXB0aW9uSW1hZ2VVcmxcIlxuICAgICAgICAgICAgICAgIGFsdD1cInt7IHNhbXBsZS50aXRsZSB9fVwiXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJ3LWZpdFwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICpuZ0lmPVwic2FtcGxlLml0ZW1zICYmIHNhbXBsZS5pdGVtc1tpbmRleCgpXS5hY3Rpb25zPy5sZW5ndGhcIlxuICAgICAgICAgICAgICAgIGNsYXNzPVwiZmxleCBmbGV4LXdyYXAgZ2FwLTMgbWQ6Z2FwLTRcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxhXG4gICAgICAgICAgICAgICAgICAgICpuZ0Zvcj1cImxldCBhY3Rpb24gb2Ygc2FtcGxlLml0ZW1zW2luZGV4KCldLmFjdGlvbnNcIlxuICAgICAgICAgICAgICAgICAgICB0dWlCdXR0b25cbiAgICAgICAgICAgICAgICAgICAgW2F0dHIuaHJlZl09XCJhY3Rpb24uaHJlZlwiXG4gICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJhY3Rpb24uaGFuZGxlciA/ICRldmVudC5wcmV2ZW50RGVmYXVsdCgpIDoge307IGFjdGlvbi5oYW5kbGVyPy4oKVwiXG4gICAgICAgICAgICAgICAgICAgIFtpY29uU3RhcnRdPVwiYWN0aW9uLmljb25cIlxuICAgICAgICAgICAgICAgICAgICBhcHBlYXJhbmNlPVwic2Vjb25kYXJ5XCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIHt7IGFjdGlvbi5sYWJlbCB9fVxuICAgICAgICAgICAgICAgIDwvYT5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJyZWxhdGl2ZSBoLVsxOWVtXSBmbGV4LTEgb3ZlcmZsb3ctaGlkZGVuIHJvdW5kZWQteGwgc2hhZG93LXR1aS1zaGFkb3cgbWQ6aC05NiBsZzpoLVsyOHJlbV1cIj5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgKm5nSWY9XCJpc1Nob3duU3dpdGNoZXMgJiYgaXNTaG93Q2Fyb3VzZWxTd2l0Y2hlcygpXCJcbiAgICAgICAgICAgIHR1aUljb25CdXR0b25cbiAgICAgICAgICAgIChjbGljayk9XCJjYXJvdXNlbC5wcmV2KClcIlxuICAgICAgICAgICAgaWNvblN0YXJ0PVwiQHR1aS5jaGV2cm9uLWxlZnRcIlxuICAgICAgICAgICAgYXBwZWFyYW5jZT1cImljb25cIlxuICAgICAgICAgICAgY2xhc3M9XCIhYWJzb2x1dGUgbGVmdC0wIHRvcC0xLzIgei0xMCBtbC0yIC10cmFuc2xhdGUteS0xLzJcIlxuICAgICAgICA+PC9idXR0b24+XG5cbiAgICAgICAgPHR1aS1jYXJvdXNlbFxuICAgICAgICAgICAgI2Nhcm91c2VsXG4gICAgICAgICAgICBbKGluZGV4KV09XCJpbmRleFwiXG4gICAgICAgICAgICBbZHVyYXRpb25dPVwiZHVyYXRpb24oKVwiXG4gICAgICAgICAgICBjbGFzcz1cImgtWzE5ZW1dIHctZnVsbCBtZDpoLTk2IGxnOmgtWzI4cmVtXVwiXG4gICAgICAgID5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGl0ZW0gb2Ygc2FtcGxlLml0ZW1zOyBsZXQgaXRlbUluZGV4ID0gaW5kZXhcIj5cbiAgICAgICAgICAgICAgICA8cGljdHVyZSAqdHVpSXRlbT5cbiAgICAgICAgICAgICAgICAgICAgPHNvdXJjZVxuICAgICAgICAgICAgICAgICAgICAgICAgdHlwZT1cImltYWdlL3dlYnBcIlxuICAgICAgICAgICAgICAgICAgICAgICAgW3NyY3NldF09XCJpdGVtLmNhcm91c2VsSXRlbUltYWdlLndlYnBcIlxuICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICA8aW1nXG4gICAgICAgICAgICAgICAgICAgICAgICBbc3JjXT1cIml0ZW0uY2Fyb3VzZWxJdGVtSW1hZ2UuZGVmYXVsdEZvcm1hdFwiXG4gICAgICAgICAgICAgICAgICAgICAgICBbYWx0XT1cIml0ZW0uY2Fyb3VzZWxJdGVtSW1hZ2UuYWx0ID8/IHNhbXBsZS50aXRsZSArICcg0LIg0YbQstC10YLQtSAnICsgaXRlbS5jb2xvciArIGl0ZW1JbmRleFwiXG4gICAgICAgICAgICAgICAgICAgICAgICBjbGFzcz1cImgtWzE5ZW1dIHctZnVsbCBvYmplY3QtY292ZXIgb2JqZWN0LXJpZ2h0IG1kOmgtOTYgbGc6aC1bMjhyZW1dXCJcbiAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICA8L3BpY3R1cmU+XG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC90dWktY2Fyb3VzZWw+XG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICpuZ0lmPVwiaXNTaG93blN3aXRjaGVzICYmIGlzU2hvd0Nhcm91c2VsU3dpdGNoZXMoKVwiXG4gICAgICAgICAgICB0dWlJY29uQnV0dG9uXG4gICAgICAgICAgICAoY2xpY2spPVwiY2Fyb3VzZWwubmV4dCgpXCJcbiAgICAgICAgICAgIGljb25TdGFydD1cIkB0dWkuY2hldnJvbi1yaWdodFwiXG4gICAgICAgICAgICBhcHBlYXJhbmNlPVwiaWNvblwiXG4gICAgICAgICAgICBjbGFzcz1cIiFhYnNvbHV0ZSByaWdodC0wIHRvcC0xLzIgei0xMCBtci0yIC10cmFuc2xhdGUteS0xLzJcIlxuICAgICAgICA+PC9idXR0b24+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -7156,11 +7156,11 @@ class ScPreviewSampleComponent {
|
|
|
7156
7156
|
this.isReverse = input(false);
|
|
7157
7157
|
}
|
|
7158
7158
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScPreviewSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7159
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ScPreviewSampleComponent, selector: "sc-preview-sample", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, sample: { classPropertyName: "sample", publicName: "sample", isSignal: true, isRequired: true, transformFunction: null }, isShowCarouselSwitches: { classPropertyName: "isShowCarouselSwitches", publicName: "isShowCarouselSwitches", isSignal: true, isRequired: false, transformFunction: null }, isReverse: { classPropertyName: "isReverse", publicName: "isReverse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "<div\n *ngIf=\"sample() as sample\"\n class=\"mb-4 flex flex-col-reverse gap-4 md:mb-0 md:flex-row md:gap-8\"\n [class.md:!flex-row-reverse]=\"isReverse()\"\n>\n @let isShownSwitches = sample.items && sample.items.length > 1;\n\n <div class=\"flex max-w-96 flex-1 flex-col justify-center self-center md:max-w-none md:gap-4\">\n <div class=\"flex w-full flex-col gap-3 md:gap-4 md:px-8\">\n <div class=\"text-body-l-bold\">{{ sample.title }}</div>\n <div\n *ngIf=\"isShownSwitches\"\n class=\"flex gap-4\"\n >\n <tui-avatar\n [round]=\"false\"\n *ngFor=\"let item of sample.items; let itemIndex = index\"\n (tuiHoveredChange)=\"index.set(itemIndex)\"\n [class.active]=\"index() === itemIndex\"\n >\n <picture>\n <source\n type=\"image/webp\"\n [srcset]=\"item.buttonImageUrl.webp\"\n />\n <img\n [src]=\"item.buttonImageUrl.defaultFormat\"\n [alt]=\"item.buttonImageUrl.alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + item.color\"\n />\n </picture>\n </tui-avatar>\n </div>\n <div\n *ngIf=\"sample.items as items\"\n class=\"text-body-m-bold\"\n >\n {{ items[index()].color }}\n </div>\n <div>{{ sample.description }}</div>\n <img\n *ngIf=\"sample.descriptionImageUrl\"\n [src]=\"sample.descriptionImageUrl\"\n alt=\"
|
|
7159
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ScPreviewSampleComponent, selector: "sc-preview-sample", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, sample: { classPropertyName: "sample", publicName: "sample", isSignal: true, isRequired: true, transformFunction: null }, isShowCarouselSwitches: { classPropertyName: "isShowCarouselSwitches", publicName: "isShowCarouselSwitches", isSignal: true, isRequired: false, transformFunction: null }, isReverse: { classPropertyName: "isReverse", publicName: "isReverse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "<div\n *ngIf=\"sample() as sample\"\n class=\"mb-4 flex flex-col-reverse gap-4 md:mb-0 md:flex-row md:gap-8\"\n [class.md:!flex-row-reverse]=\"isReverse()\"\n>\n @let isShownSwitches = sample.items && sample.items.length > 1;\n\n <div class=\"flex max-w-96 flex-1 flex-col justify-center self-center md:max-w-none md:gap-4\">\n <div class=\"flex w-full flex-col gap-3 md:gap-4 md:px-8\">\n <div class=\"text-body-l-bold\">{{ sample.title }}</div>\n <div\n *ngIf=\"isShownSwitches\"\n class=\"flex gap-4\"\n >\n <tui-avatar\n [round]=\"false\"\n *ngFor=\"let item of sample.items; let itemIndex = index\"\n (tuiHoveredChange)=\"index.set(itemIndex)\"\n [class.active]=\"index() === itemIndex\"\n >\n <picture>\n <source\n type=\"image/webp\"\n [srcset]=\"item.buttonImageUrl.webp\"\n />\n <img\n [src]=\"item.buttonImageUrl.defaultFormat\"\n [alt]=\"item.buttonImageUrl.alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + item.color\"\n />\n </picture>\n </tui-avatar>\n </div>\n <div\n *ngIf=\"sample.items as items\"\n class=\"text-body-m-bold\"\n >\n {{ items[index()].color }}\n </div>\n <div>{{ sample.description }}</div>\n <img\n *ngIf=\"sample.descriptionImageUrl\"\n [src]=\"sample.descriptionImageUrl\"\n alt=\"{{ sample.title }}\"\n class=\"w-fit\"\n />\n <div\n *ngIf=\"sample.items && sample.items[index()].actions?.length\"\n class=\"flex flex-wrap gap-3 md:gap-4\"\n >\n <a\n *ngFor=\"let action of sample.items[index()].actions\"\n tuiButton\n [attr.href]=\"action.href\"\n (click)=\"action.handler ? $event.preventDefault() : {}; action.handler?.()\"\n [iconStart]=\"action.icon\"\n appearance=\"secondary\"\n >\n {{ action.label }}\n </a>\n </div>\n </div>\n </div>\n\n <div class=\"relative h-[19em] flex-1 overflow-hidden rounded-xl shadow-tui-shadow md:h-96 lg:h-[28rem]\">\n <button\n *ngIf=\"isShownSwitches && isShowCarouselSwitches()\"\n tuiIconButton\n (click)=\"carousel.prev()\"\n iconStart=\"@tui.chevron-left\"\n appearance=\"icon\"\n class=\"!absolute left-0 top-1/2 z-10 ml-2 -translate-y-1/2\"\n ></button>\n\n <tui-carousel\n #carousel\n [(index)]=\"index\"\n [duration]=\"duration()\"\n class=\"h-[19em] w-full md:h-96 lg:h-[28rem]\"\n >\n <ng-container *ngFor=\"let item of sample.items; let itemIndex = index\">\n <picture *tuiItem>\n <source\n type=\"image/webp\"\n [srcset]=\"item.carouselItemImage.webp\"\n />\n <img\n [src]=\"item.carouselItemImage.defaultFormat\"\n [alt]=\"item.carouselItemImage.alt ?? sample.title + ' \u0432 \u0446\u0432\u0435\u0442\u0435 ' + item.color + itemIndex\"\n class=\"h-[19em] w-full object-cover object-right md:h-96 lg:h-[28rem]\"\n />\n </picture>\n </ng-container>\n </tui-carousel>\n <button\n *ngIf=\"isShownSwitches && isShowCarouselSwitches()\"\n tuiIconButton\n (click)=\"carousel.next()\"\n iconStart=\"@tui.chevron-right\"\n appearance=\"icon\"\n class=\"!absolute right-0 top-1/2 z-10 mr-2 -translate-y-1/2\"\n ></button>\n </div>\n</div>\n", styles: [":host{--tui-carousel-padding: 0}tui-avatar.active{--tw-ring-color: var(--tui-background-accent-1);--tw-ring-offset-width: 2px;--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(2px + 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))}\n"], dependencies: [{ kind: "directive", type: i2$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.TuiItem, selector: "[tuiItem]" }, { kind: "component", type: i2$1.TuiCarouselComponent, selector: "tui-carousel", inputs: ["draggable", "itemsCount", "index"], outputs: ["indexChange", "shift"] }, { kind: "component", type: i2$1.TuiAvatar, selector: "tui-avatar,button[tuiAvatar],a[tuiAvatar]", inputs: ["size", "round", "src"] }, { kind: "directive", type: i6.TuiHovered, selector: "[tuiHoveredChange]", outputs: ["tuiHoveredChange"] }, { kind: "directive", type: i1$2.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7160
7160
|
}
|
|
7161
7161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScPreviewSampleComponent, decorators: [{
|
|
7162
7162
|
type: Component,
|
|
7163
|
-
args: [{ selector: 'sc-preview-sample', host: { ngSkipHydration: 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"sample() as sample\"\n class=\"mb-4 flex flex-col-reverse gap-4 md:mb-0 md:flex-row md:gap-8\"\n [class.md:!flex-row-reverse]=\"isReverse()\"\n>\n @let isShownSwitches = sample.items && sample.items.length > 1;\n\n <div class=\"flex max-w-96 flex-1 flex-col justify-center self-center md:max-w-none md:gap-4\">\n <div class=\"flex w-full flex-col gap-3 md:gap-4 md:px-8\">\n <div class=\"text-body-l-bold\">{{ sample.title }}</div>\n <div\n *ngIf=\"isShownSwitches\"\n class=\"flex gap-4\"\n >\n <tui-avatar\n [round]=\"false\"\n *ngFor=\"let item of sample.items; let itemIndex = index\"\n (tuiHoveredChange)=\"index.set(itemIndex)\"\n [class.active]=\"index() === itemIndex\"\n >\n <picture>\n <source\n type=\"image/webp\"\n [srcset]=\"item.buttonImageUrl.webp\"\n />\n <img\n [src]=\"item.buttonImageUrl.defaultFormat\"\n [alt]=\"item.buttonImageUrl.alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + item.color\"\n />\n </picture>\n </tui-avatar>\n </div>\n <div\n *ngIf=\"sample.items as items\"\n class=\"text-body-m-bold\"\n >\n {{ items[index()].color }}\n </div>\n <div>{{ sample.description }}</div>\n <img\n *ngIf=\"sample.descriptionImageUrl\"\n [src]=\"sample.descriptionImageUrl\"\n alt=\"
|
|
7163
|
+
args: [{ selector: 'sc-preview-sample', host: { ngSkipHydration: 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"sample() as sample\"\n class=\"mb-4 flex flex-col-reverse gap-4 md:mb-0 md:flex-row md:gap-8\"\n [class.md:!flex-row-reverse]=\"isReverse()\"\n>\n @let isShownSwitches = sample.items && sample.items.length > 1;\n\n <div class=\"flex max-w-96 flex-1 flex-col justify-center self-center md:max-w-none md:gap-4\">\n <div class=\"flex w-full flex-col gap-3 md:gap-4 md:px-8\">\n <div class=\"text-body-l-bold\">{{ sample.title }}</div>\n <div\n *ngIf=\"isShownSwitches\"\n class=\"flex gap-4\"\n >\n <tui-avatar\n [round]=\"false\"\n *ngFor=\"let item of sample.items; let itemIndex = index\"\n (tuiHoveredChange)=\"index.set(itemIndex)\"\n [class.active]=\"index() === itemIndex\"\n >\n <picture>\n <source\n type=\"image/webp\"\n [srcset]=\"item.buttonImageUrl.webp\"\n />\n <img\n [src]=\"item.buttonImageUrl.defaultFormat\"\n [alt]=\"item.buttonImageUrl.alt ?? '\u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0442\u0435\u043B\u044F \u0446\u0432\u0435\u0442\u0430 ' + item.color\"\n />\n </picture>\n </tui-avatar>\n </div>\n <div\n *ngIf=\"sample.items as items\"\n class=\"text-body-m-bold\"\n >\n {{ items[index()].color }}\n </div>\n <div>{{ sample.description }}</div>\n <img\n *ngIf=\"sample.descriptionImageUrl\"\n [src]=\"sample.descriptionImageUrl\"\n alt=\"{{ sample.title }}\"\n class=\"w-fit\"\n />\n <div\n *ngIf=\"sample.items && sample.items[index()].actions?.length\"\n class=\"flex flex-wrap gap-3 md:gap-4\"\n >\n <a\n *ngFor=\"let action of sample.items[index()].actions\"\n tuiButton\n [attr.href]=\"action.href\"\n (click)=\"action.handler ? $event.preventDefault() : {}; action.handler?.()\"\n [iconStart]=\"action.icon\"\n appearance=\"secondary\"\n >\n {{ action.label }}\n </a>\n </div>\n </div>\n </div>\n\n <div class=\"relative h-[19em] flex-1 overflow-hidden rounded-xl shadow-tui-shadow md:h-96 lg:h-[28rem]\">\n <button\n *ngIf=\"isShownSwitches && isShowCarouselSwitches()\"\n tuiIconButton\n (click)=\"carousel.prev()\"\n iconStart=\"@tui.chevron-left\"\n appearance=\"icon\"\n class=\"!absolute left-0 top-1/2 z-10 ml-2 -translate-y-1/2\"\n ></button>\n\n <tui-carousel\n #carousel\n [(index)]=\"index\"\n [duration]=\"duration()\"\n class=\"h-[19em] w-full md:h-96 lg:h-[28rem]\"\n >\n <ng-container *ngFor=\"let item of sample.items; let itemIndex = index\">\n <picture *tuiItem>\n <source\n type=\"image/webp\"\n [srcset]=\"item.carouselItemImage.webp\"\n />\n <img\n [src]=\"item.carouselItemImage.defaultFormat\"\n [alt]=\"item.carouselItemImage.alt ?? sample.title + ' \u0432 \u0446\u0432\u0435\u0442\u0435 ' + item.color + itemIndex\"\n class=\"h-[19em] w-full object-cover object-right md:h-96 lg:h-[28rem]\"\n />\n </picture>\n </ng-container>\n </tui-carousel>\n <button\n *ngIf=\"isShownSwitches && isShowCarouselSwitches()\"\n tuiIconButton\n (click)=\"carousel.next()\"\n iconStart=\"@tui.chevron-right\"\n appearance=\"icon\"\n class=\"!absolute right-0 top-1/2 z-10 mr-2 -translate-y-1/2\"\n ></button>\n </div>\n</div>\n", styles: [":host{--tui-carousel-padding: 0}tui-avatar.active{--tw-ring-color: var(--tui-background-accent-1);--tw-ring-offset-width: 2px;--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(2px + 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))}\n"] }]
|
|
7164
7164
|
}] });
|
|
7165
7165
|
|
|
7166
7166
|
/**
|