@kushki/ng-suka
Version:
<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>
76 lines • 6.06 kB
JavaScript
/**
* @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';
var Frame = /** @class */ (function () {
function Frame(breakpointObserver) {
var _this = this;
this.baseClass = true;
this.mobile = false;
breakpointObserver.observe('(max-width: 768px)').subscribe((/**
* @param {?} result
* @return {?}
*/
function (result) {
if (result.matches) {
_this.activateHandsetLayout();
}
else {
_this.activateDesktopLayout();
}
}));
}
/**
* Activates handset layout
*/
/**
* Activates handset layout
* @return {?}
*/
Frame.prototype.activateHandsetLayout = /**
* Activates handset layout
* @return {?}
*/
function () {
this.mobile = true;
};
/**
* Activates desktop layout
*/
/**
* Activates desktop layout
* @return {?}
*/
Frame.prototype.activateDesktopLayout = /**
* Activates desktop layout
* @return {?}
*/
function () {
this.mobile = false;
};
Frame.decorators = [
{ type: Component, args: [{
selector: 'suka-frame',
template: "\n <div class=\"frame__header\">\n <ng-content select=\"suka-topbar\"></ng-content>\n </div>\n\n <ng-template #navigationTemplate>\n <ng-content select=\"suka-navigation\"></ng-content>\n </ng-template>\n\n <div class=\"frame__nav\" *ngIf=\"!mobile\">\n <ng-container *ngTemplateOutlet=\"navigationTemplate\"></ng-container>\n </div>\n\n <div class=\"frame__main\">\n <ng-content select=\"suka-page\"></ng-content>\n </div>\n\n <div class=\"frame__mobile-nav\" *ngIf=\"mobile\">\n <suka-mobile-navigation>\n <ng-container *ngTemplateOutlet=\"navigationTemplate\"></ng-container>\n </suka-mobile-navigation>\n </div>\n\n <ng-content></ng-content>\n "
}] }
];
/** @nocollapse */
Frame.ctorParameters = function () { return [
{ type: BreakpointObserver }
]; };
Frame.propDecorators = {
baseClass: [{ type: HostBinding, args: ['class.frame',] }],
mobile: [{ type: HostBinding, args: ['class.frame--mobile',] }]
};
return Frame;
}());
export { Frame };
if (false) {
/** @type {?} */
Frame.prototype.baseClass;
/** @type {?} */
Frame.prototype.mobile;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJhbWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL2ZyYW1lL2ZyYW1lLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkQsT0FBTyxFQUFlLGtCQUFrQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFFdEU7SUFnQ0UsZUFBWSxrQkFBc0M7UUFBbEQsaUJBUUM7UUFYMkIsY0FBUyxHQUFHLElBQUksQ0FBQztRQUNULFdBQU0sR0FBRyxLQUFLLENBQUM7UUFHakQsa0JBQWtCLENBQUMsT0FBTyxDQUFDLG9CQUFvQixDQUFDLENBQUMsU0FBUzs7OztRQUFDLFVBQUEsTUFBTTtZQUMvRCxJQUFJLE1BQU0sQ0FBQyxPQUFPLEVBQUU7Z0JBQ2xCLEtBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO2FBQzlCO2lCQUFNO2dCQUNMLEtBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO2FBQzlCO1FBQ0gsQ0FBQyxFQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQ7O09BRUc7Ozs7O0lBQ0gscUNBQXFCOzs7O0lBQXJCO1FBQ0UsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7SUFDckIsQ0FBQztJQUVEOztPQUVHOzs7OztJQUNILHFDQUFxQjs7OztJQUFyQjtRQUNFLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ3RCLENBQUM7O2dCQXRERixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLFlBQVk7b0JBQ3RCLFFBQVEsRUFBRSxrdEJBd0JUO2lCQUNGOzs7O2dCQTdCcUIsa0JBQWtCOzs7NEJBK0JyQyxXQUFXLFNBQUMsYUFBYTt5QkFDekIsV0FBVyxTQUFDLHFCQUFxQjs7SUF5QnBDLFlBQUM7Q0FBQSxBQXZERCxJQXVEQztTQTNCWSxLQUFLOzs7SUFDaEIsMEJBQTZDOztJQUM3Qyx1QkFBbUQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCcmVha3BvaW50cywgQnJlYWtwb2ludE9ic2VydmVyIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2xheW91dCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N1a2EtZnJhbWUnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJmcmFtZV9faGVhZGVyXCI+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJzdWthLXRvcGJhclwiPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cblxuICAgIDxuZy10ZW1wbGF0ZSAjbmF2aWdhdGlvblRlbXBsYXRlPlxuICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInN1a2EtbmF2aWdhdGlvblwiPjwvbmctY29udGVudD5cbiAgICA8L25nLXRlbXBsYXRlPlxuXG4gICAgPGRpdiBjbGFzcz1cImZyYW1lX19uYXZcIiAqbmdJZj1cIiFtb2JpbGVcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJuYXZpZ2F0aW9uVGVtcGxhdGVcIj48L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJmcmFtZV9fbWFpblwiPlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic3VrYS1wYWdlXCI+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdiBjbGFzcz1cImZyYW1lX19tb2JpbGUtbmF2XCIgKm5nSWY9XCJtb2JpbGVcIj5cbiAgICAgIDxzdWthLW1vYmlsZS1uYXZpZ2F0aW9uPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwibmF2aWdhdGlvblRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgICA8L3N1a2EtbW9iaWxlLW5hdmlnYXRpb24+XG4gICAgPC9kaXY+XG5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIGBcbn0pXG5leHBvcnQgY2xhc3MgRnJhbWUge1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmZyYW1lJykgYmFzZUNsYXNzID0gdHJ1ZTtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5mcmFtZS0tbW9iaWxlJykgbW9iaWxlID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IoYnJlYWtwb2ludE9ic2VydmVyOiBCcmVha3BvaW50T2JzZXJ2ZXIpIHtcbiAgICBicmVha3BvaW50T2JzZXJ2ZXIub2JzZXJ2ZSgnKG1heC13aWR0aDogNzY4cHgpJykuc3Vic2NyaWJlKHJlc3VsdCA9PiB7XG4gICAgICBpZiAocmVzdWx0Lm1hdGNoZXMpIHtcbiAgICAgICAgdGhpcy5hY3RpdmF0ZUhhbmRzZXRMYXlvdXQoKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRoaXMuYWN0aXZhdGVEZXNrdG9wTGF5b3V0KCk7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cblxuICAvKipcbiAgICogQWN0aXZhdGVzIGhhbmRzZXQgbGF5b3V0XG4gICAqL1xuICBhY3RpdmF0ZUhhbmRzZXRMYXlvdXQoKSB7XG4gICAgdGhpcy5tb2JpbGUgPSB0cnVlO1xuICB9XG5cbiAgLyoqXG4gICAqIEFjdGl2YXRlcyBkZXNrdG9wIGxheW91dFxuICAgKi9cbiAgYWN0aXZhdGVEZXNrdG9wTGF5b3V0KCkge1xuICAgIHRoaXMubW9iaWxlID0gZmFsc2U7XG4gIH1cbn1cbiJdfQ==