@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
114 lines • 12.8 kB
JavaScript
import { Directive, Input, Optional, } from '@angular/core';
import { Subscription } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "./page-layout.service";
/**
* Directive that Adds a style class to the host element based on the cms page
* template. The CMS page template is driven by the CMS structure, which is configurable
* in the backend.
*
* The style class is added to the host element of the directive. The host element is resolved
* from the `elementRef`, or, in case the directive is used in an `ng-template`, by the
* `TemplateRef`.
*
* An example of the usage is given below:
*
* ```html
* <cx-storefront class="LandingPageTemplate">
* <ng-template cxPageTemplateStyle>...</ng-template>
* <cx-storefront>
* ```
*
* The style class can also be provided by an input:
*
* ```html
* <ng-template [cxPageTemplateStyle]="pageTemplateName">
* ```
*
*/
export class PageTemplateDirective {
constructor(pageLayoutService, elementRef, templateRef, cd) {
this.pageLayoutService = pageLayoutService;
this.elementRef = elementRef;
this.templateRef = templateRef;
this.cd = cd;
// Maintains the page template subscription
this.subscription = new Subscription();
}
/**
* Adds a style class to the host element based on the cms page template, unless
* the class is given as an input.
*
* The host element is either the actual host, or the parent element in case this
* is used inside an `ng-template`.
*/
set setTemplate(template) {
if (template && template !== '') {
this.useTemplateFromInput = true;
this.addStyleClass(template);
}
else if (this.useTemplateFromInput) {
// we only clear the template if it has been provided by the input before
this.clear();
}
}
ngOnInit() {
if (!this.useTemplateFromInput) {
this.subscription.add(this.pageLayoutService.templateName$.subscribe((template) => this.addStyleClass(template)));
}
}
/**
* Adds the page template as a style class to the given element. If any
* page template was added before, we clean it up.
*
* We'll not use hostBinding for the style class, as it will potential drop
* an existing class name on the host. This is why we need to work with
* the lower level change detection api.
*/
addStyleClass(template, el) {
this.clear(el);
if (template) {
this.currentTemplate = template;
(el !== null && el !== void 0 ? el : this.host).classList.add(this.currentTemplate);
this.cd.markForCheck();
}
}
/**
* Cleans up the class host binding, if a template class was assigned before.
*/
clear(el) {
var _a;
if (this.currentTemplate) {
(_a = (el !== null && el !== void 0 ? el : this.host).classList) === null || _a === void 0 ? void 0 : _a.remove(this.currentTemplate);
this.cd.markForCheck();
}
}
/**
* Returns the host element (`HTMLElement`).
*
* If the directive is used on an `ng-template`, we take the parent element,
* to ensure that we're not ending up with a comment.
*/
get host() {
return !!this.templateRef
? this.templateRef.elementRef.nativeElement.parentElement
: this.elementRef.nativeElement;
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
PageTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PageTemplateDirective, deps: [{ token: i1.PageLayoutService }, { token: i0.ElementRef }, { token: i0.TemplateRef, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
PageTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: PageTemplateDirective, selector: "[cxPageTemplateStyle]", inputs: { setTemplate: ["cxPageTemplateStyle", "setTemplate"] }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PageTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[cxPageTemplateStyle]',
}]
}], ctorParameters: function () { return [{ type: i1.PageLayoutService }, { type: i0.ElementRef }, { type: i0.TemplateRef, decorators: [{
type: Optional
}] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { setTemplate: [{
type: Input,
args: ['cxPageTemplateStyle']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS10ZW1wbGF0ZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL2Ntcy1zdHJ1Y3R1cmUvcGFnZS9wYWdlLWxheW91dC9wYWdlLXRlbXBsYXRlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsU0FBUyxFQUVULEtBQUssRUFHTCxRQUFRLEdBRVQsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLE1BQU0sQ0FBQzs7O0FBR3BDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXVCRztBQUlILE1BQU0sT0FBTyxxQkFBcUI7SUFpQ2hDLFlBQ1ksaUJBQW9DLEVBQ3BDLFVBQXNCLEVBQ1YsV0FBcUMsRUFDakQsRUFBcUI7UUFIckIsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQUNwQyxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQ1YsZ0JBQVcsR0FBWCxXQUFXLENBQTBCO1FBQ2pELE9BQUUsR0FBRixFQUFFLENBQW1CO1FBYmpDLDJDQUEyQztRQUNqQyxpQkFBWSxHQUFpQixJQUFJLFlBQVksRUFBRSxDQUFDO0lBYXZELENBQUM7SUEvQko7Ozs7OztPQU1HO0lBQ0gsSUFBa0MsV0FBVyxDQUFDLFFBQWdCO1FBQzVELElBQUksUUFBUSxJQUFJLFFBQVEsS0FBSyxFQUFFLEVBQUU7WUFDL0IsSUFBSSxDQUFDLG9CQUFvQixHQUFHLElBQUksQ0FBQztZQUNqQyxJQUFJLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1NBQzlCO2FBQU0sSUFBSSxJQUFJLENBQUMsb0JBQW9CLEVBQUU7WUFDcEMseUVBQXlFO1lBQ3pFLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUNkO0lBQ0gsQ0FBQztJQWtCRCxRQUFRO1FBQ04sSUFBSSxDQUFDLElBQUksQ0FBQyxvQkFBb0IsRUFBRTtZQUM5QixJQUFJLENBQUMsWUFBWSxDQUFDLEdBQUcsQ0FDbkIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUMxRCxJQUFJLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUM3QixDQUNGLENBQUM7U0FDSDtJQUNILENBQUM7SUFFRDs7Ozs7OztPQU9HO0lBQ08sYUFBYSxDQUFDLFFBQWdCLEVBQUUsRUFBZ0I7UUFDeEQsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNmLElBQUksUUFBUSxFQUFFO1lBQ1osSUFBSSxDQUFDLGVBQWUsR0FBRyxRQUFRLENBQUM7WUFDaEMsQ0FBQyxFQUFFLGFBQUYsRUFBRSxjQUFGLEVBQUUsR0FBSSxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDLENBQUM7WUFDdEQsSUFBSSxDQUFDLEVBQUUsQ0FBQyxZQUFZLEVBQUUsQ0FBQztTQUN4QjtJQUNILENBQUM7SUFFRDs7T0FFRztJQUNPLEtBQUssQ0FBQyxFQUFnQjs7UUFDOUIsSUFBSSxJQUFJLENBQUMsZUFBZSxFQUFFO1lBQ3hCLE1BQUEsQ0FBQyxFQUFFLGFBQUYsRUFBRSxjQUFGLEVBQUUsR0FBSSxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsU0FBUywwQ0FBRSxNQUFNLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDO1lBQzFELElBQUksQ0FBQyxFQUFFLENBQUMsWUFBWSxFQUFFLENBQUM7U0FDeEI7SUFDSCxDQUFDO0lBRUQ7Ozs7O09BS0c7SUFDSCxJQUFjLElBQUk7UUFDaEIsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVc7WUFDdkIsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxhQUFhO1lBQ3pELENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQztJQUNwQyxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDbEMsQ0FBQzs7a0hBM0ZVLHFCQUFxQjtzR0FBckIscUJBQXFCOzJGQUFyQixxQkFBcUI7a0JBSGpDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLHVCQUF1QjtpQkFDbEM7OzBCQXFDSSxRQUFROzRFQXRCdUIsV0FBVztzQkFBNUMsS0FBSzt1QkFBQyxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgRGlyZWN0aXZlLFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE9wdGlvbmFsLFxuICBUZW1wbGF0ZVJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IFBhZ2VMYXlvdXRTZXJ2aWNlIH0gZnJvbSAnLi9wYWdlLWxheW91dC5zZXJ2aWNlJztcblxuLyoqXG4gKiBEaXJlY3RpdmUgdGhhdCBBZGRzIGEgc3R5bGUgY2xhc3MgdG8gdGhlIGhvc3QgZWxlbWVudCBiYXNlZCBvbiB0aGUgY21zIHBhZ2VcbiAqIHRlbXBsYXRlLiBUaGUgQ01TIHBhZ2UgdGVtcGxhdGUgaXMgZHJpdmVuIGJ5IHRoZSBDTVMgc3RydWN0dXJlLCB3aGljaCBpcyBjb25maWd1cmFibGVcbiAqIGluIHRoZSBiYWNrZW5kLlxuICpcbiAqIFRoZSBzdHlsZSBjbGFzcyBpcyBhZGRlZCB0byB0aGUgaG9zdCBlbGVtZW50IG9mIHRoZSBkaXJlY3RpdmUuIFRoZSBob3N0IGVsZW1lbnQgaXMgcmVzb2x2ZWRcbiAqIGZyb20gdGhlIGBlbGVtZW50UmVmYCwgb3IsIGluIGNhc2UgdGhlIGRpcmVjdGl2ZSBpcyB1c2VkIGluIGFuIGBuZy10ZW1wbGF0ZWAsIGJ5IHRoZVxuICogYFRlbXBsYXRlUmVmYC5cbiAqXG4gKiBBbiBleGFtcGxlIG9mIHRoZSB1c2FnZSBpcyBnaXZlbiBiZWxvdzpcbiAqXG4gKiBgYGBodG1sXG4gKiA8Y3gtc3RvcmVmcm9udCBjbGFzcz1cIkxhbmRpbmdQYWdlVGVtcGxhdGVcIj5cbiAqICAgPG5nLXRlbXBsYXRlIGN4UGFnZVRlbXBsYXRlU3R5bGU+Li4uPC9uZy10ZW1wbGF0ZT5cbiAqIDxjeC1zdG9yZWZyb250PlxuICogYGBgXG4gKlxuICogVGhlIHN0eWxlIGNsYXNzIGNhbiBhbHNvIGJlIHByb3ZpZGVkIGJ5IGFuIGlucHV0OlxuICpcbiAqIGBgYGh0bWxcbiAqIDxuZy10ZW1wbGF0ZSBbY3hQYWdlVGVtcGxhdGVTdHlsZV09XCJwYWdlVGVtcGxhdGVOYW1lXCI+XG4gKiBgYGBcbiAqXG4gKi9cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tjeFBhZ2VUZW1wbGF0ZVN0eWxlXScsXG59KVxuZXhwb3J0IGNsYXNzIFBhZ2VUZW1wbGF0ZURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgLyoqXG4gICAqIEluZGljYXRlcyB3aGV0aGVyIHRoaXMgY29tcG9uZW50IGlzIGRyaXZlbiBieSBhbiBpbnB1dCB0ZW1wbGF0ZSBvciBzaG91bGRcbiAgICogb2JzZXJ2ZSB0aGUgQ01TIGRyaXZlbiBwYWdlIGxheW91dCB0ZW1wbGF0ZS5cbiAgICovXG4gIHByb3RlY3RlZCB1c2VUZW1wbGF0ZUZyb21JbnB1dDogYm9vbGVhbjtcblxuICAvKipcbiAgICogQWRkcyBhIHN0eWxlIGNsYXNzIHRvIHRoZSBob3N0IGVsZW1lbnQgYmFzZWQgb24gdGhlIGNtcyBwYWdlIHRlbXBsYXRlLCB1bmxlc3NcbiAgICogdGhlIGNsYXNzIGlzIGdpdmVuIGFzIGFuIGlucHV0LlxuICAgKlxuICAgKiBUaGUgaG9zdCBlbGVtZW50IGlzIGVpdGhlciB0aGUgYWN0dWFsIGhvc3QsIG9yIHRoZSBwYXJlbnQgZWxlbWVudCBpbiBjYXNlIHRoaXNcbiAgICogaXMgdXNlZCBpbnNpZGUgYW4gYG5nLXRlbXBsYXRlYC5cbiAgICovXG4gIEBJbnB1dCgnY3hQYWdlVGVtcGxhdGVTdHlsZScpIHNldCBzZXRUZW1wbGF0ZSh0ZW1wbGF0ZTogc3RyaW5nKSB7XG4gICAgaWYgKHRlbXBsYXRlICYmIHRlbXBsYXRlICE9PSAnJykge1xuICAgICAgdGhpcy51c2VUZW1wbGF0ZUZyb21JbnB1dCA9IHRydWU7XG4gICAgICB0aGlzLmFkZFN0eWxlQ2xhc3ModGVtcGxhdGUpO1xuICAgIH0gZWxzZSBpZiAodGhpcy51c2VUZW1wbGF0ZUZyb21JbnB1dCkge1xuICAgICAgLy8gd2Ugb25seSBjbGVhciB0aGUgdGVtcGxhdGUgaWYgaXQgaGFzIGJlZW4gcHJvdmlkZWQgYnkgdGhlIGlucHV0IGJlZm9yZVxuICAgICAgdGhpcy5jbGVhcigpO1xuICAgIH1cbiAgfVxuXG4gIC8vIE1haW50YWlucyB0aGUgcGFnZSB0ZW1wbGF0ZSBzdWJzY3JpcHRpb25cbiAgcHJvdGVjdGVkIHN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uID0gbmV3IFN1YnNjcmlwdGlvbigpO1xuXG4gIC8qKlxuICAgKiBIb2xkcyB0aGUgY3VycmVudCBwYWdlIHRlbXBsYXRlLCBzbyB3ZSBjYW4gcmVtb3ZlIHByZXZpb3VzIHBhZ2UgdGVtcGxhdGVzXG4gICAqIGZyb20gdGhlIGVsZW1lbnQgY2xhc3NMaXN0LlxuICAgKi9cbiAgcHJvdGVjdGVkIGN1cnJlbnRUZW1wbGF0ZTogc3RyaW5nO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByb3RlY3RlZCBwYWdlTGF5b3V0U2VydmljZTogUGFnZUxheW91dFNlcnZpY2UsXG4gICAgcHJvdGVjdGVkIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgQE9wdGlvbmFsKCkgcHJvdGVjdGVkIHRlbXBsYXRlUmVmOiBUZW1wbGF0ZVJlZjxIVE1MRWxlbWVudD4sXG4gICAgcHJvdGVjdGVkIGNkOiBDaGFuZ2VEZXRlY3RvclJlZlxuICApIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLnVzZVRlbXBsYXRlRnJvbUlucHV0KSB7XG4gICAgICB0aGlzLnN1YnNjcmlwdGlvbi5hZGQoXG4gICAgICAgIHRoaXMucGFnZUxheW91dFNlcnZpY2UudGVtcGxhdGVOYW1lJC5zdWJzY3JpYmUoKHRlbXBsYXRlKSA9PlxuICAgICAgICAgIHRoaXMuYWRkU3R5bGVDbGFzcyh0ZW1wbGF0ZSlcbiAgICAgICAgKVxuICAgICAgKTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogQWRkcyB0aGUgcGFnZSB0ZW1wbGF0ZSBhcyBhIHN0eWxlIGNsYXNzIHRvIHRoZSBnaXZlbiBlbGVtZW50LiBJZiBhbnlcbiAgICogcGFnZSB0ZW1wbGF0ZSB3YXMgYWRkZWQgYmVmb3JlLCB3ZSBjbGVhbiBpdCB1cC5cbiAgICpcbiAgICogV2UnbGwgbm90IHVzZSBob3N0QmluZGluZyBmb3IgdGhlIHN0eWxlIGNsYXNzLCBhcyBpdCB3aWxsIHBvdGVudGlhbCBkcm9wXG4gICAqIGFuIGV4aXN0aW5nIGNsYXNzIG5hbWUgb24gdGhlIGhvc3QuIFRoaXMgaXMgd2h5IHdlIG5lZWQgdG8gd29yayB3aXRoXG4gICAqIHRoZSBsb3dlciBsZXZlbCBjaGFuZ2UgZGV0ZWN0aW9uIGFwaS5cbiAgICovXG4gIHByb3RlY3RlZCBhZGRTdHlsZUNsYXNzKHRlbXBsYXRlOiBzdHJpbmcsIGVsPzogSFRNTEVsZW1lbnQpOiB2b2lkIHtcbiAgICB0aGlzLmNsZWFyKGVsKTtcbiAgICBpZiAodGVtcGxhdGUpIHtcbiAgICAgIHRoaXMuY3VycmVudFRlbXBsYXRlID0gdGVtcGxhdGU7XG4gICAgICAoZWwgPz8gdGhpcy5ob3N0KS5jbGFzc0xpc3QuYWRkKHRoaXMuY3VycmVudFRlbXBsYXRlKTtcbiAgICAgIHRoaXMuY2QubWFya0ZvckNoZWNrKCk7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIENsZWFucyB1cCB0aGUgY2xhc3MgaG9zdCBiaW5kaW5nLCBpZiBhIHRlbXBsYXRlIGNsYXNzIHdhcyBhc3NpZ25lZCBiZWZvcmUuXG4gICAqL1xuICBwcm90ZWN0ZWQgY2xlYXIoZWw/OiBIVE1MRWxlbWVudCkge1xuICAgIGlmICh0aGlzLmN1cnJlbnRUZW1wbGF0ZSkge1xuICAgICAgKGVsID8/IHRoaXMuaG9zdCkuY2xhc3NMaXN0Py5yZW1vdmUodGhpcy5jdXJyZW50VGVtcGxhdGUpO1xuICAgICAgdGhpcy5jZC5tYXJrRm9yQ2hlY2soKTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogUmV0dXJucyB0aGUgaG9zdCBlbGVtZW50IChgSFRNTEVsZW1lbnRgKS5cbiAgICpcbiAgICogSWYgdGhlIGRpcmVjdGl2ZSBpcyB1c2VkIG9uIGFuIGBuZy10ZW1wbGF0ZWAsIHdlIHRha2UgdGhlIHBhcmVudCBlbGVtZW50LFxuICAgKiB0byBlbnN1cmUgdGhhdCB3ZSdyZSBub3QgZW5kaW5nIHVwIHdpdGggYSBjb21tZW50LlxuICAgKi9cbiAgcHJvdGVjdGVkIGdldCBob3N0KCk6IEhUTUxFbGVtZW50IHtcbiAgICByZXR1cm4gISF0aGlzLnRlbXBsYXRlUmVmXG4gICAgICA/IHRoaXMudGVtcGxhdGVSZWYuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnBhcmVudEVsZW1lbnRcbiAgICAgIDogdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICB9XG59XG4iXX0=