@kushki/ng-suka/esm2015/lib/frame/frame.component.js

<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, HostBinding } from '@angular/core';
import { BreakpointObserver } from '@angular/cdk/layout';
export class Frame {
    /**
     * @param {?} breakpointObserver
     */
    constructor(breakpointObserver) {
        this.baseClass = true;
        this.mobile = false;
        breakpointObserver.observe('(max-width: 768px)').subscribe((/**
         * @param {?} result
         * @return {?}
         */
        result => {
            if (result.matches) {
                this.activateHandsetLayout();
            }
            else {
                this.activateDesktopLayout();
            }
        }));
    }
    /**
     * @return {?}
     */
    activateHandsetLayout() {
        this.mobile = true;
    }
    /**
     * @return {?}
     */
    activateDesktopLayout() {
        this.mobile = false;
    }
}
Frame.decorators = [
    { type: Component, args: [{
                selector: 'suka-frame',
                template: `
    <div class="frame__header">
      <ng-content select="suka-topbar"></ng-content>
    </div>

    <ng-template #navigationTemplate>
       <ng-content select="suka-navigation"></ng-content>
    </ng-template>

    <div class="frame__nav" *ngIf="!mobile">
      <ng-container *ngTemplateOutlet="navigationTemplate"></ng-container>
    </div>

    <div class="frame__main">
      <ng-content select="suka-page"></ng-content>
    </div>

    <div class="frame__mobile-nav" *ngIf="mobile">
      <suka-mobile-navigation>
        <ng-container *ngTemplateOutlet="navigationTemplate"></ng-container>
      </suka-mobile-navigation>
    </div>

    <ng-content></ng-content>
  `
            }] }
];
/** @nocollapse */
Frame.ctorParameters = () => [
    { type: BreakpointObserver }
];
Frame.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.frame',] }],
    mobile: [{ type: HostBinding, args: ['class.frame--mobile',] }]
};
if (false) {
    /** @type {?} */
    Frame.prototype.baseClass;
    /** @type {?} */
    Frame.prototype.mobile;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJhbWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL2ZyYW1lL2ZyYW1lLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkQsT0FBTyxFQUFlLGtCQUFrQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUE4QnRFLE1BQU0sT0FBTyxLQUFLOzs7O0lBSWhCLFlBQVksa0JBQXNDO1FBSHRCLGNBQVMsR0FBRyxJQUFJLENBQUM7UUFDVCxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBR2pELGtCQUFrQixDQUFDLE9BQU8sQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDLFNBQVM7Ozs7UUFBQyxNQUFNLENBQUMsRUFBRTtZQUNsRSxJQUFJLE1BQU0sQ0FBQyxPQUFPLEVBQUU7Z0JBQ2xCLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO2FBQzlCO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO2FBQzlCO1FBQ0gsQ0FBQyxFQUFDLENBQUM7SUFDTCxDQUFDOzs7O0lBRUQscUJBQXFCO1FBQ25CLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO0lBQ3JCLENBQUM7Ozs7SUFFRCxxQkFBcUI7UUFDbkIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFDdEIsQ0FBQzs7O1lBaERGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsWUFBWTtnQkFDdEIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F3QlQ7YUFDRjs7OztZQTdCcUIsa0JBQWtCOzs7d0JBK0JyQyxXQUFXLFNBQUMsYUFBYTtxQkFDekIsV0FBVyxTQUFDLHFCQUFxQjs7OztJQURsQywwQkFBNkM7O0lBQzdDLHVCQUFtRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSG9zdEJpbmRpbmcgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJyZWFrcG9pbnRzLCBCcmVha3BvaW50T2JzZXJ2ZXIgfSBmcm9tICdAYW5ndWxhci9jZGsvbGF5b3V0JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS1mcmFtZScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cImZyYW1lX19oZWFkZXJcIj5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInN1a2EtdG9wYmFyXCI+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuXG4gICAgPG5nLXRlbXBsYXRlICNuYXZpZ2F0aW9uVGVtcGxhdGU+XG4gICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic3VrYS1uYXZpZ2F0aW9uXCI+PC9uZy1jb250ZW50PlxuICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICA8ZGl2IGNsYXNzPVwiZnJhbWVfX25hdlwiICpuZ0lmPVwiIW1vYmlsZVwiPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cIm5hdmlnYXRpb25UZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdiBjbGFzcz1cImZyYW1lX19tYWluXCI+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJzdWthLXBhZ2VcIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2IGNsYXNzPVwiZnJhbWVfX21vYmlsZS1uYXZcIiAqbmdJZj1cIm1vYmlsZVwiPlxuICAgICAgPHN1a2EtbW9iaWxlLW5hdmlnYXRpb24+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJuYXZpZ2F0aW9uVGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvc3VrYS1tb2JpbGUtbmF2aWdhdGlvbj5cbiAgICA8L2Rpdj5cblxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgYFxufSlcbmV4cG9ydCBjbGFzcyBGcmFtZSB7XG4gIEBIb3N0QmluZGluZygnY2xhc3MuZnJhbWUnKSBiYXNlQ2xhc3MgPSB0cnVlO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmZyYW1lLS1tb2JpbGUnKSBtb2JpbGUgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcihicmVha3BvaW50T2JzZXJ2ZXI6IEJyZWFrcG9pbnRPYnNlcnZlcikge1xuICAgIGJyZWFrcG9pbnRPYnNlcnZlci5vYnNlcnZlKCcobWF4LXdpZHRoOiA3NjhweCknKS5zdWJzY3JpYmUocmVzdWx0ID0+IHtcbiAgICAgIGlmIChyZXN1bHQubWF0Y2hlcykge1xuICAgICAgICB0aGlzLmFjdGl2YXRlSGFuZHNldExheW91dCgpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5hY3RpdmF0ZURlc2t0b3BMYXlvdXQoKTtcbiAgICAgIH1cbiAgICB9KTtcbiAgfVxuXG4gIGFjdGl2YXRlSGFuZHNldExheW91dCgpIHtcbiAgICB0aGlzLm1vYmlsZSA9IHRydWU7XG4gIH1cblxuICBhY3RpdmF0ZURlc2t0b3BMYXlvdXQoKSB7XG4gICAgdGhpcy5tb2JpbGUgPSBmYWxzZTtcbiAgfVxufVxuIl19