@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
89 lines • 11 kB
JavaScript
import { ChangeDetectionStrategy, Component, HostBinding, Input, } from '@angular/core';
import { Subscription } from 'rxjs';
import { SplitViewService } from '../split-view.service';
import * as i0 from "@angular/core";
import * as i1 from "../split-view.service";
import * as i2 from "../../../../layout/breakpoint/breakpoint.service";
/**
* The split-view component supports an unlimited number of nested views. The component
* is a host to those view components and doesn't add any restrictions to it's content;
* content is projected as-is.
*
* ```html
* <cx-split-view>
* <cx-view></cx-view>
* <cx-view></cx-view>
* <any-wrapper>
* <cx-view></cx-view>
* </any-wrapper>
* </cx-split-view>
* ```
*
* The split view component is only concerned with tracking the underlying _visible_
* view components, so that the `lastVisibleView` can be updated accordingly. The actual
* visibility of views is controlled by CSS. To allow for maximum flexibility, the CSS
* implementation is using CSS variables. The `lastVisibleView` is bind to the
* `--cx-active-view` on the host, so that all descendants views will inherit the
* property conveniently.
*/
export class SplitViewComponent {
constructor(splitService, breakpointService, elementRef) {
this.splitService = splitService;
this.breakpointService = breakpointService;
this.elementRef = elementRef;
this.subscription = new Subscription();
/**
* Indicates the last visible view in the range of views that is visible. This
* is bind to a css variable `--cx-active-view` so that the experience
* can be fully controlled by css.
*/
this.lastVisibleView = 1;
}
/**
* Sets the default hide mode for views. This mode is useful in case views are dynamically being created,
* for example when they are created by router components.
*
* The mode defaults to true, unless this is the first view; the first view is never hidden.
*/
set hideMode(mode) {
this.splitService.defaultHideMode = mode;
}
ngOnInit() {
this.subscription.add(this.splitService
.getActiveView()
.subscribe((lastVisible) => (this.lastVisibleView = lastVisible + 1)));
this.subscription.add(this.breakpointService.breakpoint$.subscribe(() => {
this.splitService.updateSplitView(this.splitViewCount);
}));
}
/**
* Returns the maximum number of views per split-view. The number is based on the
* CSS custom property `--cx-max-views`.
*/
get splitViewCount() {
return Number(getComputedStyle(this.elementRef.nativeElement).getPropertyValue('--cx-max-views'));
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
SplitViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SplitViewComponent, deps: [{ token: i1.SplitViewService }, { token: i2.BreakpointService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
SplitViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: SplitViewComponent, selector: "cx-split-view", inputs: { hideMode: "hideMode" }, host: { properties: { "style.--cx-active-view": "this.lastVisibleView", "attr.active-view": "this.lastVisibleView" } }, providers: [SplitViewService], ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SplitViewComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-split-view',
templateUrl: './split-view.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [SplitViewService],
}]
}], ctorParameters: function () { return [{ type: i1.SplitViewService }, { type: i2.BreakpointService }, { type: i0.ElementRef }]; }, propDecorators: { hideMode: [{
type: Input
}], lastVisibleView: [{
type: HostBinding,
args: ['style.--cx-active-view']
}, {
type: HostBinding,
args: ['attr.active-view']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3BsaXQtdmlldy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL3NoYXJlZC9jb21wb25lbnRzL3NwbGl0LXZpZXcvc3BsaXQvc3BsaXQtdmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL3NoYXJlZC9jb21wb25lbnRzL3NwbGl0LXZpZXcvc3BsaXQvc3BsaXQtdmlldy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFFVCxXQUFXLEVBQ1gsS0FBSyxHQUdOLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFFcEMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7Ozs7QUFFekQ7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXFCRztBQU9ILE1BQU0sT0FBTyxrQkFBa0I7SUF1QjdCLFlBQ1ksWUFBOEIsRUFDOUIsaUJBQW9DLEVBQ3BDLFVBQXNCO1FBRnRCLGlCQUFZLEdBQVosWUFBWSxDQUFrQjtRQUM5QixzQkFBaUIsR0FBakIsaUJBQWlCLENBQW1CO1FBQ3BDLGVBQVUsR0FBVixVQUFVLENBQVk7UUF6QjFCLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQWExQzs7OztXQUlHO1FBR0gsb0JBQWUsR0FBRyxDQUFDLENBQUM7SUFNakIsQ0FBQztJQXhCSjs7Ozs7T0FLRztJQUNILElBQ0ksUUFBUSxDQUFDLElBQWE7UUFDeEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDO0lBQzNDLENBQUM7SUFpQkQsUUFBUTtRQUNOLElBQUksQ0FBQyxZQUFZLENBQUMsR0FBRyxDQUNuQixJQUFJLENBQUMsWUFBWTthQUNkLGFBQWEsRUFBRTthQUNmLFNBQVMsQ0FDUixDQUFDLFdBQW1CLEVBQUUsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLGVBQWUsR0FBRyxXQUFXLEdBQUcsQ0FBQyxDQUFDLENBQ2xFLENBQ0osQ0FBQztRQUNGLElBQUksQ0FBQyxZQUFZLENBQUMsR0FBRyxDQUNuQixJQUFJLENBQUMsaUJBQWlCLENBQUMsV0FBVyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDaEQsSUFBSSxDQUFDLFlBQVksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQ3pELENBQUMsQ0FBQyxDQUNILENBQUM7SUFDSixDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsSUFBYyxjQUFjO1FBQzFCLE9BQU8sTUFBTSxDQUNYLGdCQUFnQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLENBQUMsZ0JBQWdCLENBQzlELGdCQUFnQixDQUNqQixDQUNGLENBQUM7SUFDSixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDbEMsQ0FBQzs7K0dBMURVLGtCQUFrQjttR0FBbEIsa0JBQWtCLGtNQUZsQixDQUFDLGdCQUFnQixDQUFDLDBCQ3ZDL0IsNkJBQ0E7MkZEd0NhLGtCQUFrQjtrQkFOOUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZUFBZTtvQkFDekIsV0FBVyxFQUFFLDZCQUE2QjtvQkFDMUMsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLFNBQVMsRUFBRSxDQUFDLGdCQUFnQixDQUFDO2lCQUM5QjtnS0FXSyxRQUFRO3NCQURYLEtBQUs7Z0JBWU4sZUFBZTtzQkFGZCxXQUFXO3VCQUFDLHdCQUF3Qjs7c0JBQ3BDLFdBQVc7dUJBQUMsa0JBQWtCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IEJyZWFrcG9pbnRTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vLi4vLi4vbGF5b3V0L2JyZWFrcG9pbnQvYnJlYWtwb2ludC5zZXJ2aWNlJztcbmltcG9ydCB7IFNwbGl0Vmlld1NlcnZpY2UgfSBmcm9tICcuLi9zcGxpdC12aWV3LnNlcnZpY2UnO1xuXG4vKipcbiAqIFRoZSBzcGxpdC12aWV3IGNvbXBvbmVudCBzdXBwb3J0cyBhbiB1bmxpbWl0ZWQgbnVtYmVyIG9mIG5lc3RlZCB2aWV3cy4gVGhlIGNvbXBvbmVudFxuICogaXMgYSBob3N0IHRvIHRob3NlIHZpZXcgY29tcG9uZW50cyBhbmQgZG9lc24ndCBhZGQgYW55IHJlc3RyaWN0aW9ucyB0byBpdCdzIGNvbnRlbnQ7XG4gKiBjb250ZW50IGlzIHByb2plY3RlZCBhcy1pcy5cbiAqXG4gKiBgYGBodG1sXG4gKiA8Y3gtc3BsaXQtdmlldz5cbiAqICAgPGN4LXZpZXc+PC9jeC12aWV3PlxuICogICA8Y3gtdmlldz48L2N4LXZpZXc+XG4gKiAgIDxhbnktd3JhcHBlcj5cbiAqICAgICA8Y3gtdmlldz48L2N4LXZpZXc+XG4gKiAgIDwvYW55LXdyYXBwZXI+XG4gKiA8L2N4LXNwbGl0LXZpZXc+XG4gKiBgYGBcbiAqXG4gKiBUaGUgc3BsaXQgdmlldyBjb21wb25lbnQgaXMgb25seSBjb25jZXJuZWQgd2l0aCB0cmFja2luZyB0aGUgdW5kZXJseWluZyBfdmlzaWJsZV9cbiAqIHZpZXcgY29tcG9uZW50cywgc28gdGhhdCB0aGUgYGxhc3RWaXNpYmxlVmlld2AgY2FuIGJlIHVwZGF0ZWQgYWNjb3JkaW5nbHkuIFRoZSBhY3R1YWxcbiAqIHZpc2liaWxpdHkgb2Ygdmlld3MgaXMgY29udHJvbGxlZCBieSBDU1MuIFRvIGFsbG93IGZvciBtYXhpbXVtIGZsZXhpYmlsaXR5LCB0aGUgQ1NTXG4gKiBpbXBsZW1lbnRhdGlvbiBpcyB1c2luZyBDU1MgdmFyaWFibGVzLiBUaGUgYGxhc3RWaXNpYmxlVmlld2AgaXMgYmluZCB0byB0aGVcbiAqIGAtLWN4LWFjdGl2ZS12aWV3YCBvbiB0aGUgaG9zdCwgc28gdGhhdCBhbGwgZGVzY2VuZGFudHMgdmlld3Mgd2lsbCBpbmhlcml0IHRoZVxuICogcHJvcGVydHkgY29udmVuaWVudGx5LlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjeC1zcGxpdC12aWV3JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NwbGl0LXZpZXcuY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJvdmlkZXJzOiBbU3BsaXRWaWV3U2VydmljZV0sXG59KVxuZXhwb3J0IGNsYXNzIFNwbGl0Vmlld0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgcHJpdmF0ZSBzdWJzY3JpcHRpb24gPSBuZXcgU3Vic2NyaXB0aW9uKCk7XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIGRlZmF1bHQgaGlkZSBtb2RlIGZvciB2aWV3cy4gVGhpcyBtb2RlIGlzIHVzZWZ1bCBpbiBjYXNlIHZpZXdzIGFyZSBkeW5hbWljYWxseSBiZWluZyBjcmVhdGVkLFxuICAgKiBmb3IgZXhhbXBsZSB3aGVuIHRoZXkgYXJlIGNyZWF0ZWQgYnkgcm91dGVyIGNvbXBvbmVudHMuXG4gICAqXG4gICAqIFRoZSBtb2RlIGRlZmF1bHRzIHRvIHRydWUsIHVubGVzcyB0aGlzIGlzIHRoZSBmaXJzdCB2aWV3OyB0aGUgZmlyc3QgdmlldyBpcyBuZXZlciBoaWRkZW4uXG4gICAqL1xuICBASW5wdXQoKVxuICBzZXQgaGlkZU1vZGUobW9kZTogYm9vbGVhbikge1xuICAgIHRoaXMuc3BsaXRTZXJ2aWNlLmRlZmF1bHRIaWRlTW9kZSA9IG1vZGU7XG4gIH1cblxuICAvKipcbiAgICogSW5kaWNhdGVzIHRoZSBsYXN0IHZpc2libGUgdmlldyBpbiB0aGUgcmFuZ2Ugb2Ygdmlld3MgdGhhdCBpcyB2aXNpYmxlLiBUaGlzXG4gICAqIGlzIGJpbmQgdG8gYSBjc3MgdmFyaWFibGUgYC0tY3gtYWN0aXZlLXZpZXdgIHNvIHRoYXQgdGhlIGV4cGVyaWVuY2VcbiAgICogY2FuIGJlIGZ1bGx5IGNvbnRyb2xsZWQgYnkgY3NzLlxuICAgKi9cbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS4tLWN4LWFjdGl2ZS12aWV3JylcbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmFjdGl2ZS12aWV3JylcbiAgbGFzdFZpc2libGVWaWV3ID0gMTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcm90ZWN0ZWQgc3BsaXRTZXJ2aWNlOiBTcGxpdFZpZXdTZXJ2aWNlLFxuICAgIHByb3RlY3RlZCBicmVha3BvaW50U2VydmljZTogQnJlYWtwb2ludFNlcnZpY2UsXG4gICAgcHJvdGVjdGVkIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWZcbiAgKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uLmFkZChcbiAgICAgIHRoaXMuc3BsaXRTZXJ2aWNlXG4gICAgICAgIC5nZXRBY3RpdmVWaWV3KClcbiAgICAgICAgLnN1YnNjcmliZShcbiAgICAgICAgICAobGFzdFZpc2libGU6IG51bWJlcikgPT4gKHRoaXMubGFzdFZpc2libGVWaWV3ID0gbGFzdFZpc2libGUgKyAxKVxuICAgICAgICApXG4gICAgKTtcbiAgICB0aGlzLnN1YnNjcmlwdGlvbi5hZGQoXG4gICAgICB0aGlzLmJyZWFrcG9pbnRTZXJ2aWNlLmJyZWFrcG9pbnQkLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgIHRoaXMuc3BsaXRTZXJ2aWNlLnVwZGF0ZVNwbGl0Vmlldyh0aGlzLnNwbGl0Vmlld0NvdW50KTtcbiAgICAgIH0pXG4gICAgKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBSZXR1cm5zIHRoZSBtYXhpbXVtIG51bWJlciBvZiB2aWV3cyBwZXIgc3BsaXQtdmlldy4gVGhlIG51bWJlciBpcyBiYXNlZCBvbiB0aGVcbiAgICogQ1NTIGN1c3RvbSBwcm9wZXJ0eSBgLS1jeC1tYXgtdmlld3NgLlxuICAgKi9cbiAgcHJvdGVjdGVkIGdldCBzcGxpdFZpZXdDb3VudCgpOiBudW1iZXIge1xuICAgIHJldHVybiBOdW1iZXIoXG4gICAgICBnZXRDb21wdXRlZFN0eWxlKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50KS5nZXRQcm9wZXJ0eVZhbHVlKFxuICAgICAgICAnLS1jeC1tYXgtdmlld3MnXG4gICAgICApXG4gICAgKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gIH1cbn1cbiIsIjxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiJdfQ==