@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
75 lines • 12.3 kB
JavaScript
import { ChangeDetectionStrategy, Component, ViewChild, } from '@angular/core';
import { asapScheduler, BehaviorSubject, interval, of } from 'rxjs';
import { delayWhen, observeOn, switchMap } from 'rxjs/operators';
import { ICON_TYPE } from '../../../../cms-components/misc/icon/icon.model';
import * as i0 from "@angular/core";
import * as i1 from "../../../../layout/breakpoint/breakpoint.service";
import * as i2 from "../../../misc/icon/icon.component";
import * as i3 from "./active-facets/active-facets.component";
import * as i4 from "./facet-list/facet-list.component";
import * as i5 from "@angular/common";
import * as i6 from "@spartacus/core";
export class ProductFacetNavigationComponent {
constructor(breakpointService) {
this.breakpointService = breakpointService;
this.iconTypes = ICON_TYPE;
/**
* We delay the removal of DOM so that animations can finish playing before the
* DOM is removed. Removing the DOM, as hidding is not enough to stop elements
* to be focused.
*/
this.CLOSE_DELAY = 300;
this.open$ = new BehaviorSubject(false);
/**
* Emits the open state that indicates whether the facet list should be rendered.
* This is either done instantly, or after the user triggers this by using the trigger
* button. This driven by the visiibility of the trigger, so that the CSS drives
* the behaviour. This can differ per breakpoint.
*
* There's a configurable delay for the closed state, so that the DOM is not removed
* before some CSS animations are done.
*/
this.isOpen$ = this.breakpointService.breakpoint$.pipe(
// deffer emitting a new value to the next micro-task to ensure that the `hasTrigger`
// method represents the actual UI state.
observeOn(asapScheduler), switchMap(() => (this.hasTrigger ? this.open$ : of(true))), delayWhen((launched) => interval(launched ? 0 : this.CLOSE_DELAY)));
/**
* Emits the active state that indicates whether the facet list is activated. Activation
* is related to the css, so that a animation or transition can visualize opening/closing
* the list (i.e. dialog).
*/
this.isActive$ = this.open$.pipe(
// deffer emitting a new value to the next micro-task to ensure the active class is
// applied after the DOM is created
observeOn(asapScheduler));
}
launch() {
this.open$.next(true);
}
close() {
this.open$.next(false);
this.trigger.nativeElement.focus();
}
/**
* Indicates that the facet navigation should be open explicitely by a trigger.
* This is fully controlled by CSS, where the trigger button can be hidden
* (display:none) for certain screen sizes.
*/
get hasTrigger() {
return this.trigger.nativeElement.offsetParent !== null;
}
}
ProductFacetNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ProductFacetNavigationComponent, deps: [{ token: i1.BreakpointService }], target: i0.ɵɵFactoryTarget.Component });
ProductFacetNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ProductFacetNavigationComponent, selector: "cx-product-facet-navigation", viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], ngImport: i0, template: "<button\n #trigger\n class=\"btn btn-action btn-block dialog-trigger\"\n (click)=\"launch()\"\n>\n <cx-icon [type]=\"iconTypes.FILTER\"></cx-icon>\n {{ 'productList.filterBy.label' | cxTranslate }}\n</button>\n\n<cx-active-facets></cx-active-facets>\n\n<cx-facet-list\n *ngIf=\"isOpen$ | async\"\n [isDialog]=\"hasTrigger\"\n (closeList)=\"close()\"\n [class.active]=\"isActive$ | async\"\n [class.dialog]=\"hasTrigger\"\n></cx-facet-list>\n", components: [{ type: i2.IconComponent, selector: "cx-icon,[cxIcon]", inputs: ["cxIcon", "type"] }, { type: i3.ActiveFacetsComponent, selector: "cx-active-facets", inputs: ["closeIcon"] }, { type: i4.FacetListComponent, selector: "cx-facet-list", inputs: ["isDialog"], outputs: ["closeList"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "cxTranslate": i6.TranslatePipe, "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ProductFacetNavigationComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-product-facet-navigation',
templateUrl: './product-facet-navigation.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () { return [{ type: i1.BreakpointService }]; }, propDecorators: { trigger: [{
type: ViewChild,
args: ['trigger']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1mYWNldC1uYXZpZ2F0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0b3JlZnJvbnRsaWIvY21zLWNvbXBvbmVudHMvcHJvZHVjdC9wcm9kdWN0LWxpc3QvcHJvZHVjdC1mYWNldC1uYXZpZ2F0aW9uL3Byb2R1Y3QtZmFjZXQtbmF2aWdhdGlvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL2Ntcy1jb21wb25lbnRzL3Byb2R1Y3QvcHJvZHVjdC1saXN0L3Byb2R1Y3QtZmFjZXQtbmF2aWdhdGlvbi9wcm9kdWN0LWZhY2V0LW5hdmlnYXRpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBRVQsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxhQUFhLEVBQUUsZUFBZSxFQUFFLFFBQVEsRUFBYyxFQUFFLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDaEYsT0FBTyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDakUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGlEQUFpRCxDQUFDOzs7Ozs7OztBQVE1RSxNQUFNLE9BQU8sK0JBQStCO0lBZ0QxQyxZQUFzQixpQkFBb0M7UUFBcEMsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQS9DMUQsY0FBUyxHQUFHLFNBQVMsQ0FBQztRQUV0Qjs7OztXQUlHO1FBQ08sZ0JBQVcsR0FBRyxHQUFHLENBQUM7UUFVbEIsVUFBSyxHQUFHLElBQUksZUFBZSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBRTdDOzs7Ozs7OztXQVFHO1FBQ0gsWUFBTyxHQUF3QixJQUFJLENBQUMsaUJBQWlCLENBQUMsV0FBVyxDQUFDLElBQUk7UUFDcEUscUZBQXFGO1FBQ3JGLHlDQUF5QztRQUN6QyxTQUFTLENBQUMsYUFBYSxDQUFDLEVBQ3hCLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQzFELFNBQVMsQ0FBQyxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FDbkUsQ0FBQztRQUVGOzs7O1dBSUc7UUFDSCxjQUFTLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJO1FBQ3pCLG1GQUFtRjtRQUNuRixvQ0FBb0M7UUFDcEMsU0FBUyxDQUFDLGFBQWEsQ0FBQyxDQUN6QixDQUFDO0lBRTJELENBQUM7SUFFOUQsTUFBTTtRQUNKLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3hCLENBQUM7SUFFRCxLQUFLO1FBQ0gsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDdkIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDckMsQ0FBQztJQUVEOzs7O09BSUc7SUFDSCxJQUFJLFVBQVU7UUFDWixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLFlBQVksS0FBSyxJQUFJLENBQUM7SUFDMUQsQ0FBQzs7NEhBbEVVLCtCQUErQjtnSEFBL0IsK0JBQStCLHVLQ2hCNUMscWNBa0JBOzJGREZhLCtCQUErQjtrQkFMM0MsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsNkJBQTZCO29CQUN2QyxXQUFXLEVBQUUsMkNBQTJDO29CQUN4RCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDaEQ7d0dBaUJ1QixPQUFPO3NCQUE1QixTQUFTO3VCQUFDLFNBQVMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBWaWV3Q2hpbGQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgYXNhcFNjaGVkdWxlciwgQmVoYXZpb3JTdWJqZWN0LCBpbnRlcnZhbCwgT2JzZXJ2YWJsZSwgb2YgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IGRlbGF5V2hlbiwgb2JzZXJ2ZU9uLCBzd2l0Y2hNYXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBJQ09OX1RZUEUgfSBmcm9tICcuLi8uLi8uLi8uLi9jbXMtY29tcG9uZW50cy9taXNjL2ljb24vaWNvbi5tb2RlbCc7XG5pbXBvcnQgeyBCcmVha3BvaW50U2VydmljZSB9IGZyb20gJy4uLy4uLy4uLy4uL2xheW91dC9icmVha3BvaW50L2JyZWFrcG9pbnQuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2N4LXByb2R1Y3QtZmFjZXQtbmF2aWdhdGlvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9kdWN0LWZhY2V0LW5hdmlnYXRpb24uY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgUHJvZHVjdEZhY2V0TmF2aWdhdGlvbkNvbXBvbmVudCB7XG4gIGljb25UeXBlcyA9IElDT05fVFlQRTtcblxuICAvKipcbiAgICogV2UgZGVsYXkgdGhlIHJlbW92YWwgb2YgRE9NIHNvIHRoYXQgYW5pbWF0aW9ucyBjYW4gZmluaXNoIHBsYXlpbmcgYmVmb3JlIHRoZVxuICAgKiBET00gaXMgcmVtb3ZlZC4gUmVtb3ZpbmcgdGhlIERPTSwgYXMgaGlkZGluZyBpcyBub3QgZW5vdWdoIHRvIHN0b3AgZWxlbWVudHNcbiAgICogdG8gYmUgZm9jdXNlZC5cbiAgICovXG4gIHByb3RlY3RlZCBDTE9TRV9ERUxBWSA9IDMwMDtcblxuICAvKipcbiAgICogVXNlZCB0byBvcGVuIHRoZSBmYWNldCBuYXZpZ2F0aW9uIGluIGEgZGlhbG9nLiBUaGUgdXNhZ2Ugb2YgdGhlIGRpYWxvZyBkZXBlbmRzXG4gICAqIG9uIHRoZSBhdmFpbGFiaWxpdHkgb2YgdGhlIHRyaWdnZXIgZWxlbWVudCwgd2hpY2ggaXMgZHJpdmVuIGJ5IENTUy5cbiAgICpcbiAgICogVGhlIHJlZmVyZW5jZSBpcyBhbHNvIHVzZWQgdG8gcmVmb2N1cyB0aGUgdHJpZ2dlciBhZnRlciB0aGUgZGlhbG9nIGlzIGNsb3NlZC5cbiAgICovXG4gIEBWaWV3Q2hpbGQoJ3RyaWdnZXInKSB0cmlnZ2VyOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PjtcblxuICBwcm90ZWN0ZWQgb3BlbiQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0KGZhbHNlKTtcblxuICAvKipcbiAgICogRW1pdHMgdGhlIG9wZW4gc3RhdGUgdGhhdCBpbmRpY2F0ZXMgd2hldGhlciB0aGUgZmFjZXQgbGlzdCBzaG91bGQgYmUgcmVuZGVyZWQuXG4gICAqIFRoaXMgaXMgZWl0aGVyIGRvbmUgaW5zdGFudGx5LCBvciBhZnRlciB0aGUgdXNlciB0cmlnZ2VycyB0aGlzIGJ5IHVzaW5nIHRoZSB0cmlnZ2VyXG4gICAqIGJ1dHRvbi4gVGhpcyBkcml2ZW4gYnkgdGhlIHZpc2lpYmlsaXR5IG9mIHRoZSB0cmlnZ2VyLCBzbyB0aGF0IHRoZSBDU1MgZHJpdmVzXG4gICAqIHRoZSBiZWhhdmlvdXIuIFRoaXMgY2FuIGRpZmZlciBwZXIgYnJlYWtwb2ludC5cbiAgICpcbiAgICogVGhlcmUncyBhIGNvbmZpZ3VyYWJsZSBkZWxheSBmb3IgdGhlIGNsb3NlZCBzdGF0ZSwgc28gdGhhdCB0aGUgRE9NIGlzIG5vdCByZW1vdmVkXG4gICAqIGJlZm9yZSBzb21lIENTUyBhbmltYXRpb25zIGFyZSBkb25lLlxuICAgKi9cbiAgaXNPcGVuJDogT2JzZXJ2YWJsZTxib29sZWFuPiA9IHRoaXMuYnJlYWtwb2ludFNlcnZpY2UuYnJlYWtwb2ludCQucGlwZShcbiAgICAvLyBkZWZmZXIgZW1pdHRpbmcgYSBuZXcgdmFsdWUgdG8gdGhlIG5leHQgbWljcm8tdGFzayB0byBlbnN1cmUgdGhhdCB0aGUgYGhhc1RyaWdnZXJgXG4gICAgLy8gbWV0aG9kIHJlcHJlc2VudHMgdGhlIGFjdHVhbCBVSSBzdGF0ZS5cbiAgICBvYnNlcnZlT24oYXNhcFNjaGVkdWxlciksXG4gICAgc3dpdGNoTWFwKCgpID0+ICh0aGlzLmhhc1RyaWdnZXIgPyB0aGlzLm9wZW4kIDogb2YodHJ1ZSkpKSxcbiAgICBkZWxheVdoZW4oKGxhdW5jaGVkKSA9PiBpbnRlcnZhbChsYXVuY2hlZCA/IDAgOiB0aGlzLkNMT1NFX0RFTEFZKSlcbiAgKTtcblxuICAvKipcbiAgICogRW1pdHMgdGhlIGFjdGl2ZSBzdGF0ZSB0aGF0IGluZGljYXRlcyB3aGV0aGVyIHRoZSBmYWNldCBsaXN0IGlzIGFjdGl2YXRlZC4gQWN0aXZhdGlvblxuICAgKiBpcyByZWxhdGVkIHRvIHRoZSBjc3MsIHNvIHRoYXQgYSBhbmltYXRpb24gb3IgdHJhbnNpdGlvbiBjYW4gdmlzdWFsaXplIG9wZW5pbmcvY2xvc2luZ1xuICAgKiB0aGUgbGlzdCAoaS5lLiBkaWFsb2cpLlxuICAgKi9cbiAgaXNBY3RpdmUkID0gdGhpcy5vcGVuJC5waXBlKFxuICAgIC8vIGRlZmZlciBlbWl0dGluZyBhIG5ldyB2YWx1ZSB0byB0aGUgbmV4dCBtaWNyby10YXNrIHRvIGVuc3VyZSB0aGUgYWN0aXZlIGNsYXNzIGlzXG4gICAgLy8gIGFwcGxpZWQgYWZ0ZXIgdGhlIERPTSBpcyBjcmVhdGVkXG4gICAgb2JzZXJ2ZU9uKGFzYXBTY2hlZHVsZXIpXG4gICk7XG5cbiAgY29uc3RydWN0b3IocHJvdGVjdGVkIGJyZWFrcG9pbnRTZXJ2aWNlOiBCcmVha3BvaW50U2VydmljZSkge31cblxuICBsYXVuY2goKSB7XG4gICAgdGhpcy5vcGVuJC5uZXh0KHRydWUpO1xuICB9XG5cbiAgY2xvc2UoKSB7XG4gICAgdGhpcy5vcGVuJC5uZXh0KGZhbHNlKTtcbiAgICB0aGlzLnRyaWdnZXIubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICB9XG5cbiAgLyoqXG4gICAqIEluZGljYXRlcyB0aGF0IHRoZSBmYWNldCBuYXZpZ2F0aW9uIHNob3VsZCBiZSBvcGVuIGV4cGxpY2l0ZWx5IGJ5IGEgdHJpZ2dlci5cbiAgICogVGhpcyBpcyBmdWxseSBjb250cm9sbGVkIGJ5IENTUywgd2hlcmUgdGhlIHRyaWdnZXIgYnV0dG9uIGNhbiBiZSBoaWRkZW5cbiAgICogKGRpc3BsYXk6bm9uZSkgZm9yIGNlcnRhaW4gc2NyZWVuIHNpemVzLlxuICAgKi9cbiAgZ2V0IGhhc1RyaWdnZXIoKSB7XG4gICAgcmV0dXJuIHRoaXMudHJpZ2dlci5uYXRpdmVFbGVtZW50Lm9mZnNldFBhcmVudCAhPT0gbnVsbDtcbiAgfVxufVxuIiwiPGJ1dHRvblxuICAjdHJpZ2dlclxuICBjbGFzcz1cImJ0biBidG4tYWN0aW9uIGJ0bi1ibG9jayBkaWFsb2ctdHJpZ2dlclwiXG4gIChjbGljayk9XCJsYXVuY2goKVwiXG4+XG4gIDxjeC1pY29uIFt0eXBlXT1cImljb25UeXBlcy5GSUxURVJcIj48L2N4LWljb24+XG4gIHt7ICdwcm9kdWN0TGlzdC5maWx0ZXJCeS5sYWJlbCcgfCBjeFRyYW5zbGF0ZSB9fVxuPC9idXR0b24+XG5cbjxjeC1hY3RpdmUtZmFjZXRzPjwvY3gtYWN0aXZlLWZhY2V0cz5cblxuPGN4LWZhY2V0LWxpc3RcbiAgKm5nSWY9XCJpc09wZW4kIHwgYXN5bmNcIlxuICBbaXNEaWFsb2ddPVwiaGFzVHJpZ2dlclwiXG4gIChjbG9zZUxpc3QpPVwiY2xvc2UoKVwiXG4gIFtjbGFzcy5hY3RpdmVdPVwiaXNBY3RpdmUkIHwgYXN5bmNcIlxuICBbY2xhc3MuZGlhbG9nXT1cImhhc1RyaWdnZXJcIlxuPjwvY3gtZmFjZXQtbGlzdD5cbiJdfQ==