@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
83 lines • 13.5 kB
JavaScript
import { Component, HostBinding, HostListener, ViewChild, } from '@angular/core';
import { SkipLinkComponent } from '../a11y/skip-link/index';
import { StorefrontOutlets } from './storefront-outlets.model';
import * as i0 from "@angular/core";
import * as i1 from "../header/hamburger-menu/hamburger-menu.service";
import * as i2 from "@spartacus/core";
import * as i3 from "../a11y/keyboard-focus/index";
import * as i4 from "../../cms-structure/page/page-layout/page-layout.component";
import * as i5 from "../../cms-structure/page/slot/page-slot.component";
import * as i6 from "../../cms-components/misc/global-message/global-message.component";
import * as i7 from "../../cms-structure/page/page-layout/page-template.directive";
import * as i8 from "../../cms-structure/outlet/outlet.directive";
import * as i9 from "../a11y/skip-link/directive/skip-link.directive";
import * as i10 from "../a11y/keyboard-focus/focus.directive";
import * as i11 from "@angular/router";
import * as i12 from "@angular/common";
export class StorefrontComponent {
constructor(hamburgerMenuService, routingService, elementRef, keyboardFocusService) {
this.hamburgerMenuService = hamburgerMenuService;
this.routingService = routingService;
this.elementRef = elementRef;
this.keyboardFocusService = keyboardFocusService;
this.isExpanded$ = this.hamburgerMenuService.isExpanded;
this.StorefrontOutlets = StorefrontOutlets;
// required by esc focus
this.tabindex = '0';
this.keyboardFocusConfig = {
focusOnEscape: true,
focusOnDoubleEscape: true,
};
}
handleEscape(event) {
this.keyboardFocusService.handleEscape(this.elementRef.nativeElement, this.keyboardFocusConfig, event);
}
ngOnInit() {
this.navigateSubscription = this.routingService
.isNavigating()
.subscribe((val) => {
this.startNavigating = val === true;
this.stopNavigating = val === false;
});
}
collapseMenuIfClickOutside(event) {
const element = event.target;
if (element.nodeName.toLowerCase() === 'header' &&
element.className.includes('is-expanded')) {
this.collapseMenu();
}
}
collapseMenu() {
this.hamburgerMenuService.toggle(true);
}
ngOnDestroy() {
if (this.navigateSubscription) {
this.navigateSubscription.unsubscribe();
}
}
}
StorefrontComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: StorefrontComponent, deps: [{ token: i1.HamburgerMenuService }, { token: i2.RoutingService }, { token: i0.ElementRef }, { token: i3.KeyboardFocusService }], target: i0.ɵɵFactoryTarget.Component });
StorefrontComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: StorefrontComponent, selector: "cx-storefront", host: { listeners: { "keydown.escape": "handleEscape($event)" }, properties: { "class.start-navigating": "this.startNavigating", "class.stop-navigating": "this.stopNavigating", "tabindex": "this.tabindex" } }, viewQueries: [{ propertyName: "child", first: true, predicate: SkipLinkComponent, descendants: true }], ngImport: i0, template: "<ng-template [cxOutlet]=\"StorefrontOutlets.STOREFRONT\" cxPageTemplateStyle>\n <ng-template cxOutlet=\"cx-header\">\n <header\n cxSkipLink=\"cx-header\"\n [cxFocus]=\"{ disableMouseFocus: true }\"\n [class.is-expanded]=\"isExpanded$ | async\"\n (keydown.escape)=\"collapseMenu()\"\n (click)=\"collapseMenuIfClickOutside($event)\"\n >\n <cx-page-layout section=\"header\"></cx-page-layout>\n <cx-page-layout section=\"navigation\"></cx-page-layout>\n </header>\n <cx-page-slot position=\"BottomHeaderSlot\"></cx-page-slot>\n <cx-global-message\n aria-atomic=\"true\"\n aria-live=\"assertive\"\n ></cx-global-message>\n </ng-template>\n\n <main cxSkipLink=\"cx-main\" [cxFocus]=\"{ disableMouseFocus: true }\">\n <router-outlet></router-outlet>\n </main>\n\n <ng-template cxOutlet=\"cx-footer\">\n <footer cxSkipLink=\"cx-footer\" [cxFocus]=\"{ disableMouseFocus: true }\">\n <cx-page-layout section=\"footer\"></cx-page-layout>\n </footer>\n </ng-template>\n</ng-template>\n", components: [{ type: i4.PageLayoutComponent, selector: "cx-page-layout", inputs: ["section"] }, { type: i5.PageSlotComponent, selector: "cx-page-slot,[cx-page-slot]", inputs: ["position", "class", "isPageFold", "hasComponents"] }, { type: i6.GlobalMessageComponent, selector: "cx-global-message" }], directives: [{ type: i7.PageTemplateDirective, selector: "[cxPageTemplateStyle]", inputs: ["cxPageTemplateStyle"] }, { type: i8.OutletDirective, selector: "[cxOutlet]", inputs: ["cxOutlet", "cxOutletContext", "cxOutletDefer"], outputs: ["loaded"] }, { type: i9.SkipLinkDirective, selector: "[cxSkipLink]", inputs: ["cxSkipLink"] }, { type: i10.FocusDirective, selector: "[cxFocus]", inputs: ["cxFocus"] }, { type: i11.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }], pipes: { "async": i12.AsyncPipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: StorefrontComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-storefront',
templateUrl: './storefront.component.html',
}]
}], ctorParameters: function () { return [{ type: i1.HamburgerMenuService }, { type: i2.RoutingService }, { type: i0.ElementRef }, { type: i3.KeyboardFocusService }]; }, propDecorators: { startNavigating: [{
type: HostBinding,
args: ['class.start-navigating']
}], stopNavigating: [{
type: HostBinding,
args: ['class.stop-navigating']
}], tabindex: [{
type: HostBinding,
args: ['tabindex']
}], child: [{
type: ViewChild,
args: [SkipLinkComponent]
}], handleEscape: [{
type: HostListener,
args: ['keydown.escape', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RvcmVmcm9udC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL2xheW91dC9tYWluL3N0b3JlZnJvbnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc3RvcmVmcm9udGxpYi9sYXlvdXQvbWFpbi9zdG9yZWZyb250LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBRVQsV0FBVyxFQUNYLFlBQVksRUFHWixTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFPdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFFNUQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7Ozs7Ozs7Ozs7Ozs7O0FBTS9ELE1BQU0sT0FBTyxtQkFBbUI7SUE0QjlCLFlBQ1Usb0JBQTBDLEVBQzFDLGNBQThCLEVBQzVCLFVBQW1DLEVBQ25DLG9CQUEwQztRQUg1Qyx5QkFBb0IsR0FBcEIsb0JBQW9CLENBQXNCO1FBQzFDLG1CQUFjLEdBQWQsY0FBYyxDQUFnQjtRQUM1QixlQUFVLEdBQVYsVUFBVSxDQUF5QjtRQUNuQyx5QkFBb0IsR0FBcEIsb0JBQW9CLENBQXNCO1FBOUJ0RCxnQkFBVyxHQUF3QixJQUFJLENBQUMsb0JBQW9CLENBQUMsVUFBVSxDQUFDO1FBRS9ELHNCQUFpQixHQUFHLGlCQUFpQixDQUFDO1FBSy9DLHdCQUF3QjtRQUNDLGFBQVEsR0FBRyxHQUFHLENBQUM7UUFJaEMsd0JBQW1CLEdBQWdCO1lBQ3pDLGFBQWEsRUFBRSxJQUFJO1lBQ25CLG1CQUFtQixFQUFFLElBQUk7U0FDMUIsQ0FBQztJQWdCQyxDQUFDO0lBYkosWUFBWSxDQUFDLEtBQW9CO1FBQy9CLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxZQUFZLENBQ3BDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUM3QixJQUFJLENBQUMsbUJBQW1CLEVBQ3hCLEtBQUssQ0FDTixDQUFDO0lBQ0osQ0FBQztJQVNELFFBQVE7UUFDTixJQUFJLENBQUMsb0JBQW9CLEdBQUcsSUFBSSxDQUFDLGNBQWM7YUFDNUMsWUFBWSxFQUFFO2FBQ2QsU0FBUyxDQUFDLENBQUMsR0FBRyxFQUFFLEVBQUU7WUFDakIsSUFBSSxDQUFDLGVBQWUsR0FBRyxHQUFHLEtBQUssSUFBSSxDQUFDO1lBQ3BDLElBQUksQ0FBQyxjQUFjLEdBQUcsR0FBRyxLQUFLLEtBQUssQ0FBQztRQUN0QyxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCwwQkFBMEIsQ0FBQyxLQUFVO1FBQ25DLE1BQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUM7UUFDN0IsSUFDRSxPQUFPLENBQUMsUUFBUSxDQUFDLFdBQVcsRUFBRSxLQUFLLFFBQVE7WUFDM0MsT0FBTyxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLEVBQ3pDO1lBQ0EsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1NBQ3JCO0lBQ0gsQ0FBQztJQUVELFlBQVk7UUFDVixJQUFJLENBQUMsb0JBQW9CLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3pDLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsb0JBQW9CLEVBQUU7WUFDN0IsSUFBSSxDQUFDLG9CQUFvQixDQUFDLFdBQVcsRUFBRSxDQUFDO1NBQ3pDO0lBQ0gsQ0FBQzs7Z0hBOURVLG1CQUFtQjtvR0FBbkIsbUJBQW1CLDhTQVluQixpQkFBaUIsZ0RDbkM5QixtaUNBNkJBOzJGRE5hLG1CQUFtQjtrQkFKL0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZUFBZTtvQkFDekIsV0FBVyxFQUFFLDZCQUE2QjtpQkFDM0M7b01BT3dDLGVBQWU7c0JBQXJELFdBQVc7dUJBQUMsd0JBQXdCO2dCQUNDLGNBQWM7c0JBQW5ELFdBQVc7dUJBQUMsdUJBQXVCO2dCQUdYLFFBQVE7c0JBQWhDLFdBQVc7dUJBQUMsVUFBVTtnQkFFTyxLQUFLO3NCQUFsQyxTQUFTO3VCQUFDLGlCQUFpQjtnQkFRNUIsWUFBWTtzQkFEWCxZQUFZO3VCQUFDLGdCQUFnQixFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgSG9zdExpc3RlbmVyLFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFJvdXRpbmdTZXJ2aWNlIH0gZnJvbSAnQHNwYXJ0YWN1cy9jb3JlJztcbmltcG9ydCB7IE9ic2VydmFibGUsIFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtcbiAgRm9jdXNDb25maWcsXG4gIEtleWJvYXJkRm9jdXNTZXJ2aWNlLFxufSBmcm9tICcuLi9hMTF5L2tleWJvYXJkLWZvY3VzL2luZGV4JztcbmltcG9ydCB7IFNraXBMaW5rQ29tcG9uZW50IH0gZnJvbSAnLi4vYTExeS9za2lwLWxpbmsvaW5kZXgnO1xuaW1wb3J0IHsgSGFtYnVyZ2VyTWVudVNlcnZpY2UgfSBmcm9tICcuLi9oZWFkZXIvaGFtYnVyZ2VyLW1lbnUvaGFtYnVyZ2VyLW1lbnUuc2VydmljZSc7XG5pbXBvcnQgeyBTdG9yZWZyb250T3V0bGV0cyB9IGZyb20gJy4vc3RvcmVmcm9udC1vdXRsZXRzLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3gtc3RvcmVmcm9udCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9zdG9yZWZyb250LmNvbXBvbmVudC5odG1sJyxcbn0pXG5leHBvcnQgY2xhc3MgU3RvcmVmcm9udENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgbmF2aWdhdGVTdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcbiAgaXNFeHBhbmRlZCQ6IE9ic2VydmFibGU8Ym9vbGVhbj4gPSB0aGlzLmhhbWJ1cmdlck1lbnVTZXJ2aWNlLmlzRXhwYW5kZWQ7XG5cbiAgcmVhZG9ubHkgU3RvcmVmcm9udE91dGxldHMgPSBTdG9yZWZyb250T3V0bGV0cztcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnN0YXJ0LW5hdmlnYXRpbmcnKSBzdGFydE5hdmlnYXRpbmc7XG4gIEBIb3N0QmluZGluZygnY2xhc3Muc3RvcC1uYXZpZ2F0aW5nJykgc3RvcE5hdmlnYXRpbmc7XG5cbiAgLy8gcmVxdWlyZWQgYnkgZXNjIGZvY3VzXG4gIEBIb3N0QmluZGluZygndGFiaW5kZXgnKSB0YWJpbmRleCA9ICcwJztcblxuICBAVmlld0NoaWxkKFNraXBMaW5rQ29tcG9uZW50KSBjaGlsZDogU2tpcExpbmtDb21wb25lbnQ7XG5cbiAgcHJpdmF0ZSBrZXlib2FyZEZvY3VzQ29uZmlnOiBGb2N1c0NvbmZpZyA9IHtcbiAgICBmb2N1c09uRXNjYXBlOiB0cnVlLFxuICAgIGZvY3VzT25Eb3VibGVFc2NhcGU6IHRydWUsXG4gIH07XG5cbiAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5lc2NhcGUnLCBbJyRldmVudCddKVxuICBoYW5kbGVFc2NhcGUoZXZlbnQ6IEtleWJvYXJkRXZlbnQpOiB2b2lkIHtcbiAgICB0aGlzLmtleWJvYXJkRm9jdXNTZXJ2aWNlLmhhbmRsZUVzY2FwZShcbiAgICAgIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LFxuICAgICAgdGhpcy5rZXlib2FyZEZvY3VzQ29uZmlnLFxuICAgICAgZXZlbnRcbiAgICApO1xuICB9XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBoYW1idXJnZXJNZW51U2VydmljZTogSGFtYnVyZ2VyTWVudVNlcnZpY2UsXG4gICAgcHJpdmF0ZSByb3V0aW5nU2VydmljZTogUm91dGluZ1NlcnZpY2UsXG4gICAgcHJvdGVjdGVkIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LFxuICAgIHByb3RlY3RlZCBrZXlib2FyZEZvY3VzU2VydmljZTogS2V5Ym9hcmRGb2N1c1NlcnZpY2VcbiAgKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMubmF2aWdhdGVTdWJzY3JpcHRpb24gPSB0aGlzLnJvdXRpbmdTZXJ2aWNlXG4gICAgICAuaXNOYXZpZ2F0aW5nKClcbiAgICAgIC5zdWJzY3JpYmUoKHZhbCkgPT4ge1xuICAgICAgICB0aGlzLnN0YXJ0TmF2aWdhdGluZyA9IHZhbCA9PT0gdHJ1ZTtcbiAgICAgICAgdGhpcy5zdG9wTmF2aWdhdGluZyA9IHZhbCA9PT0gZmFsc2U7XG4gICAgICB9KTtcbiAgfVxuXG4gIGNvbGxhcHNlTWVudUlmQ2xpY2tPdXRzaWRlKGV2ZW50OiBhbnkpOiB2b2lkIHtcbiAgICBjb25zdCBlbGVtZW50ID0gZXZlbnQudGFyZ2V0O1xuICAgIGlmIChcbiAgICAgIGVsZW1lbnQubm9kZU5hbWUudG9Mb3dlckNhc2UoKSA9PT0gJ2hlYWRlcicgJiZcbiAgICAgIGVsZW1lbnQuY2xhc3NOYW1lLmluY2x1ZGVzKCdpcy1leHBhbmRlZCcpXG4gICAgKSB7XG4gICAgICB0aGlzLmNvbGxhcHNlTWVudSgpO1xuICAgIH1cbiAgfVxuXG4gIGNvbGxhcHNlTWVudSgpOiB2b2lkIHtcbiAgICB0aGlzLmhhbWJ1cmdlck1lbnVTZXJ2aWNlLnRvZ2dsZSh0cnVlKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLm5hdmlnYXRlU3Vic2NyaXB0aW9uKSB7XG4gICAgICB0aGlzLm5hdmlnYXRlU3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gICAgfVxuICB9XG59XG4iLCI8bmctdGVtcGxhdGUgW2N4T3V0bGV0XT1cIlN0b3JlZnJvbnRPdXRsZXRzLlNUT1JFRlJPTlRcIiBjeFBhZ2VUZW1wbGF0ZVN0eWxlPlxuICA8bmctdGVtcGxhdGUgY3hPdXRsZXQ9XCJjeC1oZWFkZXJcIj5cbiAgICA8aGVhZGVyXG4gICAgICBjeFNraXBMaW5rPVwiY3gtaGVhZGVyXCJcbiAgICAgIFtjeEZvY3VzXT1cInsgZGlzYWJsZU1vdXNlRm9jdXM6IHRydWUgfVwiXG4gICAgICBbY2xhc3MuaXMtZXhwYW5kZWRdPVwiaXNFeHBhbmRlZCQgfCBhc3luY1wiXG4gICAgICAoa2V5ZG93bi5lc2NhcGUpPVwiY29sbGFwc2VNZW51KClcIlxuICAgICAgKGNsaWNrKT1cImNvbGxhcHNlTWVudUlmQ2xpY2tPdXRzaWRlKCRldmVudClcIlxuICAgID5cbiAgICAgIDxjeC1wYWdlLWxheW91dCBzZWN0aW9uPVwiaGVhZGVyXCI+PC9jeC1wYWdlLWxheW91dD5cbiAgICAgIDxjeC1wYWdlLWxheW91dCBzZWN0aW9uPVwibmF2aWdhdGlvblwiPjwvY3gtcGFnZS1sYXlvdXQ+XG4gICAgPC9oZWFkZXI+XG4gICAgPGN4LXBhZ2Utc2xvdCBwb3NpdGlvbj1cIkJvdHRvbUhlYWRlclNsb3RcIj48L2N4LXBhZ2Utc2xvdD5cbiAgICA8Y3gtZ2xvYmFsLW1lc3NhZ2VcbiAgICAgIGFyaWEtYXRvbWljPVwidHJ1ZVwiXG4gICAgICBhcmlhLWxpdmU9XCJhc3NlcnRpdmVcIlxuICAgID48L2N4LWdsb2JhbC1tZXNzYWdlPlxuICA8L25nLXRlbXBsYXRlPlxuXG4gIDxtYWluIGN4U2tpcExpbms9XCJjeC1tYWluXCIgW2N4Rm9jdXNdPVwieyBkaXNhYmxlTW91c2VGb2N1czogdHJ1ZSB9XCI+XG4gICAgPHJvdXRlci1vdXRsZXQ+PC9yb3V0ZXItb3V0bGV0PlxuICA8L21haW4+XG5cbiAgPG5nLXRlbXBsYXRlIGN4T3V0bGV0PVwiY3gtZm9vdGVyXCI+XG4gICAgPGZvb3RlciBjeFNraXBMaW5rPVwiY3gtZm9vdGVyXCIgW2N4Rm9jdXNdPVwieyBkaXNhYmxlTW91c2VGb2N1czogdHJ1ZSB9XCI+XG4gICAgICA8Y3gtcGFnZS1sYXlvdXQgc2VjdGlvbj1cImZvb3RlclwiPjwvY3gtcGFnZS1sYXlvdXQ+XG4gICAgPC9mb290ZXI+XG4gIDwvbmctdGVtcGxhdGU+XG48L25nLXRlbXBsYXRlPlxuIl19