@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
46 lines • 7.87 kB
JavaScript
import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
import { filter, map, tap } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../../../cms-structure/index";
import * as i2 from "@spartacus/core";
import * as i3 from "../../../shared/components/carousel/carousel.component";
import * as i4 from "../../../cms-structure/page/component/component-wrapper.directive";
import * as i5 from "@angular/common";
/**
* Generic carousel that renders CMS Components.
*/
export class BannerCarouselComponent {
constructor(componentData, cmsService) {
this.componentData = componentData;
this.cmsService = cmsService;
this.componentData$ = this.componentData.data$.pipe(filter(Boolean), tap((d) => (this.theme = `${d.effect}-theme`)));
this.items$ = this.componentData$.pipe(map((data) => data.banners.trim().split(' ')), map((codes) => codes.map((code) => this.cmsService.getComponentData(code))));
/**
* Adds a specific theme for the carousel. The effect can be
* used in CSS customisations.
*/
this.theme = '';
}
/**
* Returns an Obervable with an Array of Observables. This is done, so that
* the component UI could consider to lazy load the UI components when they're
* in the viewpoint.
*/
getItems() {
return this.items$;
}
}
BannerCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: BannerCarouselComponent, deps: [{ token: i1.CmsComponentData }, { token: i2.CmsService }], target: i0.ɵɵFactoryTarget.Component });
BannerCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: BannerCarouselComponent, selector: "cx-banner-carousel", host: { properties: { "class": "this.theme" } }, ngImport: i0, template: "<cx-carousel\n [items]=\"getItems() | async\"\n [template]=\"template\"\n itemWidth=\"100%\"\n class=\"inline-navigation\"\n></cx-carousel>\n\n<ng-template #template let-item=\"item\">\n <ng-container\n [cxComponentWrapper]=\"{\n flexType: item.typeCode,\n typeCode: item.typeCode,\n uid: item?.uid\n }\"\n >\n </ng-container>\n</ng-template>\n", components: [{ type: i3.CarouselComponent, selector: "cx-carousel", inputs: ["title", "items", "template", "itemWidth", "hideIndicators", "indicatorIcon", "previousIcon", "nextIcon"] }], directives: [{ type: i4.ComponentWrapperDirective, selector: "[cxComponentWrapper]", inputs: ["cxComponentWrapper"], outputs: ["cxComponentRef"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: BannerCarouselComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-banner-carousel',
templateUrl: 'banner-carousel.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () { return [{ type: i1.CmsComponentData }, { type: i2.CmsService }]; }, propDecorators: { theme: [{
type: HostBinding,
args: ['class']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLWNhcm91c2VsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0b3JlZnJvbnRsaWIvY21zLWNvbXBvbmVudHMvY29udGVudC9iYW5uZXItY2Fyb3VzZWwvYmFubmVyLWNhcm91c2VsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0b3JlZnJvbnRsaWIvY21zLWNvbXBvbmVudHMvY29udGVudC9iYW5uZXItY2Fyb3VzZWwvYmFubmVyLWNhcm91c2VsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBT2hGLE9BQU8sRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7O0FBR2xEOztHQUVHO0FBTUgsTUFBTSxPQUFPLHVCQUF1QjtJQW9CbEMsWUFDVSxhQUFzQyxFQUN0QyxVQUFzQjtRQUR0QixrQkFBYSxHQUFiLGFBQWEsQ0FBeUI7UUFDdEMsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQXJCeEIsbUJBQWMsR0FBc0IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUN2RSxNQUFNLENBQUMsT0FBTyxDQUFDLEVBQ2YsR0FBRyxDQUFDLENBQUMsQ0FBUSxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEdBQUcsR0FBRyxDQUFDLENBQUMsTUFBTSxRQUFRLENBQUMsQ0FBQyxDQUN0RCxDQUFDO1FBRU0sV0FBTSxHQUNaLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUN0QixHQUFHLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQzdDLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQ1osS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUM1RCxDQUNGLENBQUM7UUFFSjs7O1dBR0c7UUFDbUIsVUFBSyxHQUFHLEVBQUUsQ0FBQztJQUs5QixDQUFDO0lBRUo7Ozs7T0FJRztJQUNILFFBQVE7UUFDTixPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQzs7b0hBaENVLHVCQUF1Qjt3R0FBdkIsdUJBQXVCLDJHQ2xCcEMsc1hBaUJBOzJGRENhLHVCQUF1QjtrQkFMbkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsb0JBQW9CO29CQUM5QixXQUFXLEVBQUUsZ0NBQWdDO29CQUM3QyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDaEQ7Z0lBbUJ1QixLQUFLO3NCQUExQixXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBIb3N0QmluZGluZyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgQ21zQmFubmVyQ2Fyb3VzZWxDb21wb25lbnQgYXMgbW9kZWwsXG4gIENtc1NlcnZpY2UsXG4gIENvbnRlbnRTbG90Q29tcG9uZW50RGF0YSxcbn0gZnJvbSAnQHNwYXJ0YWN1cy9jb3JlJztcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IGZpbHRlciwgbWFwLCB0YXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBDbXNDb21wb25lbnREYXRhIH0gZnJvbSAnLi4vLi4vLi4vY21zLXN0cnVjdHVyZS9pbmRleCc7XG5cbi8qKlxuICogR2VuZXJpYyBjYXJvdXNlbCB0aGF0IHJlbmRlcnMgQ01TIENvbXBvbmVudHMuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2N4LWJhbm5lci1jYXJvdXNlbCcsXG4gIHRlbXBsYXRlVXJsOiAnYmFubmVyLWNhcm91c2VsLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEJhbm5lckNhcm91c2VsQ29tcG9uZW50IHtcbiAgcHJpdmF0ZSBjb21wb25lbnREYXRhJDogT2JzZXJ2YWJsZTxtb2RlbD4gPSB0aGlzLmNvbXBvbmVudERhdGEuZGF0YSQucGlwZShcbiAgICBmaWx0ZXIoQm9vbGVhbiksXG4gICAgdGFwKChkOiBtb2RlbCkgPT4gKHRoaXMudGhlbWUgPSBgJHtkLmVmZmVjdH0tdGhlbWVgKSlcbiAgKTtcblxuICBwcml2YXRlIGl0ZW1zJDogT2JzZXJ2YWJsZTxPYnNlcnZhYmxlPENvbnRlbnRTbG90Q29tcG9uZW50RGF0YT5bXT4gPVxuICAgIHRoaXMuY29tcG9uZW50RGF0YSQucGlwZShcbiAgICAgIG1hcCgoZGF0YSkgPT4gZGF0YS5iYW5uZXJzLnRyaW0oKS5zcGxpdCgnICcpKSxcbiAgICAgIG1hcCgoY29kZXMpID0+XG4gICAgICAgIGNvZGVzLm1hcCgoY29kZSkgPT4gdGhpcy5jbXNTZXJ2aWNlLmdldENvbXBvbmVudERhdGEoY29kZSkpXG4gICAgICApXG4gICAgKTtcblxuICAvKipcbiAgICogQWRkcyBhIHNwZWNpZmljIHRoZW1lIGZvciB0aGUgY2Fyb3VzZWwuIFRoZSBlZmZlY3QgY2FuIGJlXG4gICAqIHVzZWQgaW4gQ1NTIGN1c3RvbWlzYXRpb25zLlxuICAgKi9cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIHRoZW1lID0gJyc7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBjb21wb25lbnREYXRhOiBDbXNDb21wb25lbnREYXRhPG1vZGVsPixcbiAgICBwcml2YXRlIGNtc1NlcnZpY2U6IENtc1NlcnZpY2VcbiAgKSB7fVxuXG4gIC8qKlxuICAgKiBSZXR1cm5zIGFuIE9iZXJ2YWJsZSB3aXRoIGFuIEFycmF5IG9mIE9ic2VydmFibGVzLiBUaGlzIGlzIGRvbmUsIHNvIHRoYXRcbiAgICogdGhlIGNvbXBvbmVudCBVSSBjb3VsZCBjb25zaWRlciB0byBsYXp5IGxvYWQgdGhlIFVJIGNvbXBvbmVudHMgd2hlbiB0aGV5J3JlXG4gICAqIGluIHRoZSB2aWV3cG9pbnQuXG4gICAqL1xuICBnZXRJdGVtcygpOiBPYnNlcnZhYmxlPE9ic2VydmFibGU8Q29udGVudFNsb3RDb21wb25lbnREYXRhPltdPiB7XG4gICAgcmV0dXJuIHRoaXMuaXRlbXMkO1xuICB9XG59XG4iLCI8Y3gtY2Fyb3VzZWxcbiAgW2l0ZW1zXT1cImdldEl0ZW1zKCkgfCBhc3luY1wiXG4gIFt0ZW1wbGF0ZV09XCJ0ZW1wbGF0ZVwiXG4gIGl0ZW1XaWR0aD1cIjEwMCVcIlxuICBjbGFzcz1cImlubGluZS1uYXZpZ2F0aW9uXCJcbj48L2N4LWNhcm91c2VsPlxuXG48bmctdGVtcGxhdGUgI3RlbXBsYXRlIGxldC1pdGVtPVwiaXRlbVwiPlxuICA8bmctY29udGFpbmVyXG4gICAgW2N4Q29tcG9uZW50V3JhcHBlcl09XCJ7XG4gICAgICBmbGV4VHlwZTogaXRlbS50eXBlQ29kZSxcbiAgICAgIHR5cGVDb2RlOiBpdGVtLnR5cGVDb2RlLFxuICAgICAgdWlkOiBpdGVtPy51aWRcbiAgICB9XCJcbiAgPlxuICA8L25nLWNvbnRhaW5lcj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=