@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();
            }
        }));
    }
    /**
     * Activates handset layout
     * @return {?}
     */
    activateHandsetLayout() {
        this.mobile = true;
    }
    /**
     * Activates desktop layout
     * @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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJhbWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL2ZyYW1lL2ZyYW1lLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkQsT0FBTyxFQUFlLGtCQUFrQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUE4QnRFLE1BQU0sT0FBTyxLQUFLOzs7O0lBSWhCLFlBQVksa0JBQXNDO1FBSHRCLGNBQVMsR0FBRyxJQUFJLENBQUM7UUFDVCxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBR2pELGtCQUFrQixDQUFDLE9BQU8sQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDLFNBQVM7Ozs7UUFBQyxNQUFNLENBQUMsRUFBRTtZQUNsRSxJQUFJLE1BQU0sQ0FBQyxPQUFPLEVBQUU7Z0JBQ2xCLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO2FBQzlCO2lCQUFNO2dCQUNMLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO2FBQzlCO1FBQ0gsQ0FBQyxFQUFDLENBQUM7SUFDTCxDQUFDOzs7OztJQUtELHFCQUFxQjtRQUNuQixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztJQUNyQixDQUFDOzs7OztJQUtELHFCQUFxQjtRQUNuQixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztJQUN0QixDQUFDOzs7WUF0REYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxZQUFZO2dCQUN0QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXdCVDthQUNGOzs7O1lBN0JxQixrQkFBa0I7Ozt3QkErQnJDLFdBQVcsU0FBQyxhQUFhO3FCQUN6QixXQUFXLFNBQUMscUJBQXFCOzs7O0lBRGxDLDBCQUE2Qzs7SUFDN0MsdUJBQW1EIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQnJlYWtwb2ludHMsIEJyZWFrcG9pbnRPYnNlcnZlciB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9sYXlvdXQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWthLWZyYW1lJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwiZnJhbWVfX2hlYWRlclwiPlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic3VrYS10b3BiYXJcIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG5cbiAgICA8bmctdGVtcGxhdGUgI25hdmlnYXRpb25UZW1wbGF0ZT5cbiAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJzdWthLW5hdmlnYXRpb25cIj48L25nLWNvbnRlbnQ+XG4gICAgPC9uZy10ZW1wbGF0ZT5cblxuICAgIDxkaXYgY2xhc3M9XCJmcmFtZV9fbmF2XCIgKm5nSWY9XCIhbW9iaWxlXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwibmF2aWdhdGlvblRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2IGNsYXNzPVwiZnJhbWVfX21haW5cIj5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInN1a2EtcGFnZVwiPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJmcmFtZV9fbW9iaWxlLW5hdlwiICpuZ0lmPVwibW9iaWxlXCI+XG4gICAgICA8c3VrYS1tb2JpbGUtbmF2aWdhdGlvbj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cIm5hdmlnYXRpb25UZW1wbGF0ZVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgPC9zdWthLW1vYmlsZS1uYXZpZ2F0aW9uPlxuICAgIDwvZGl2PlxuXG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICBgXG59KVxuZXhwb3J0IGNsYXNzIEZyYW1lIHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5mcmFtZScpIGJhc2VDbGFzcyA9IHRydWU7XG4gIEBIb3N0QmluZGluZygnY2xhc3MuZnJhbWUtLW1vYmlsZScpIG1vYmlsZSA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKGJyZWFrcG9pbnRPYnNlcnZlcjogQnJlYWtwb2ludE9ic2VydmVyKSB7XG4gICAgYnJlYWtwb2ludE9ic2VydmVyLm9ic2VydmUoJyhtYXgtd2lkdGg6IDc2OHB4KScpLnN1YnNjcmliZShyZXN1bHQgPT4ge1xuICAgICAgaWYgKHJlc3VsdC5tYXRjaGVzKSB7XG4gICAgICAgIHRoaXMuYWN0aXZhdGVIYW5kc2V0TGF5b3V0KCk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLmFjdGl2YXRlRGVza3RvcExheW91dCgpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG5cbiAgLyoqXG4gICAqIEFjdGl2YXRlcyBoYW5kc2V0IGxheW91dFxuICAgKi9cbiAgYWN0aXZhdGVIYW5kc2V0TGF5b3V0KCkge1xuICAgIHRoaXMubW9iaWxlID0gdHJ1ZTtcbiAgfVxuXG4gIC8qKlxuICAgKiBBY3RpdmF0ZXMgZGVza3RvcCBsYXlvdXRcbiAgICovXG4gIGFjdGl2YXRlRGVza3RvcExheW91dCgpIHtcbiAgICB0aGlzLm1vYmlsZSA9IGZhbHNlO1xuICB9XG59XG4iXX0=