@greg-md/ng-flex-css-layout/esm2015/lib/layout.directive.js

Flex-CSS-Layout is an alternative behaviour of Flex-Layout directives, that will still work with Angular Universal and App Shell.

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
import { ReplaySubject } from 'rxjs';
import { FlexCssService } from './flex-css.service';
import { BaseDirective } from './directive';
export class LayoutDirective extends BaseDirective {
    /**
     * @param {?} elementRef
     * @param {?} renderer
     * @param {?} service
     */
    constructor(elementRef, renderer, service) {
        super(elementRef, renderer);
        this.service = service;
        this.fcValues = {};
        this.observer$ = new ReplaySubject(1);
    }
    /**
     * @param {?} val
     * @return {?}
     */
    set layout(val) { this.fcValues['all'] = val; }
    /**
     * @param {?} val
     * @return {?}
     */
    set layoutXs(val) { this.fcValues['xs'] = val; }
    /**
     * @param {?} val
     * @return {?}
     */
    set layoutSm(val) { this.fcValues['sm'] = val; }
    /**
     * @param {?} val
     * @return {?}
     */
    set layoutMd(val) { this.fcValues['md'] = val; }
    /**
     * @param {?} val
     * @return {?}
     */
    set layoutLg(val) { this.fcValues['lg'] = val; }
    /**
     * @param {?} val
     * @return {?}
     */
    set layoutXl(val) { this.fcValues['xl'] = val; }
    /**
     * @param {?} val
     * @return {?}
     */
    set layoutGtXs(val) { this.fcValues['gt-xs'] = val; }
    /**
     * @param {?} val
     * @return {?}
     */
    set layoutGtSm(val) { this.fcValues['gt-sm'] = val; }
    /**
     * @param {?} val
     * @return {?}
     */
    set layoutGtMd(val) { this.fcValues['gt-md'] = val; }
    /**
     * @param {?} val
     * @return {?}
     */
    set layoutGtLg(val) { this.fcValues['gt-lg'] = val; }
    /**
     * @param {?} val
     * @return {?}
     */
    set layoutLtSm(val) { this.fcValues['lt-sm'] = val; }
    /**
     * @param {?} val
     * @return {?}
     */
    set layoutLtMd(val) { this.fcValues['lt-md'] = val; }
    /**
     * @param {?} val
     * @return {?}
     */
    set layoutLtLg(val) { this.fcValues['lt-lg'] = val; }
    /**
     * @param {?} val
     * @return {?}
     */
    set layoutLtXl(val) { this.fcValues['lt-xl'] = val; }
    /**
     * @return {?}
     */
    ngOnChanges() {
        this.reload();
    }
    /**
     * @return {?}
     */
    reload() {
        const /** @type {?} */ classNames = [];
        this.breakpoints.forEach(breakpoint => {
            classNames.push(this.service.addLayout(this.fcValues[breakpoint], breakpoint));
        });
        this.setClassNames(classNames);
        this.observer$.next(this.fcValues);
    }
    /**
     * @param {?} breakpoints
     * @param {?=} defaultValue
     * @return {?}
     */
    addNewBreakpoints(breakpoints, defaultValue) {
        breakpoints.forEach(breakpoint => {
            if (!this.fcValues[breakpoint]) {
                this.fcValues[breakpoint] = defaultValue;
            }
        });
        this.reload();
    }
    /**
     * @return {?}
     */
    get breakpoints() {
        return Object.keys(this.fcValues);
    }
}
LayoutDirective.decorators = [
    { type: Directive, args: [{
                selector: `
    [fcLayout],
    [fcLayout.xs], [fcLayout.sm], [fcLayout.md], [fcLayout.lg], [fcLayout.xl],
    [fcLayout.lt-sm], [fcLayout.lt-md], [fcLayout.lt-lg], [fcLayout.lt-xl],
    [fcLayout.gt-xs], [fcLayout.gt-sm], [fcLayout.gt-md], [fcLayout.gt-lg]
  `,
            },] },
];
/** @nocollapse */
LayoutDirective.ctorParameters = () => [
    { type: ElementRef },
    { type: Renderer2 },
    { type: FlexCssService }
];
LayoutDirective.propDecorators = {
    layout: [{ type: Input, args: ['fcLayout',] }],
    layoutXs: [{ type: Input, args: ['fcLayout.xs',] }],
    layoutSm: [{ type: Input, args: ['fcLayout.sm',] }],
    layoutMd: [{ type: Input, args: ['fcLayout.md',] }],
    layoutLg: [{ type: Input, args: ['fcLayout.lg',] }],
    layoutXl: [{ type: Input, args: ['fcLayout.xl',] }],
    layoutGtXs: [{ type: Input, args: ['fcLayout.gt-xs',] }],
    layoutGtSm: [{ type: Input, args: ['fcLayout.gt-sm',] }],
    layoutGtMd: [{ type: Input, args: ['fcLayout.gt-md',] }],
    layoutGtLg: [{ type: Input, args: ['fcLayout.gt-lg',] }],
    layoutLtSm: [{ type: Input, args: ['fcLayout.lt-sm',] }],
    layoutLtMd: [{ type: Input, args: ['fcLayout.lt-md',] }],
    layoutLtLg: [{ type: Input, args: ['fcLayout.lt-lg',] }],
    layoutLtXl: [{ type: Input, args: ['fcLayout.lt-xl',] }]
};
function LayoutDirective_tsickle_Closure_declarations() {
    /** @type {?} */
    LayoutDirective.prototype.fcValues;
    /** @type {?} */
    LayoutDirective.prototype.observer$;
    /** @type {?} */
    LayoutDirective.prototype.service;
}

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BncmVnLW1kL25nLWZsZXgtY3NzLWxheW91dC8iLCJzb3VyY2VzIjpbImxpYi9sYXlvdXQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQ25GLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFFckMsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3BELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFVNUMsTUFBTSxzQkFBdUIsU0FBUSxhQUFhOzs7Ozs7SUF3QmhELFlBQ0UsVUFBc0IsRUFDdEIsUUFBbUIsRUFDWDtRQUVSLEtBQUssQ0FBQyxVQUFVLEVBQUUsUUFBUSxDQUFDLENBQUM7UUFGcEIsWUFBTyxHQUFQLE9BQU87d0JBMUJHLEVBQUU7eUJBRUQsSUFBSSxhQUFhLENBQUMsQ0FBQyxDQUFDO0tBMkJ4Qzs7Ozs7SUF6QkQsSUFBOEIsTUFBTSxDQUFDLEdBQUcsSUFBUSxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsQ0FBQyxFQUFFOzs7OztJQUc3RSxJQUE4QixRQUFRLENBQUMsR0FBRyxJQUFNLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEdBQUcsR0FBRyxDQUFDLEVBQUU7Ozs7O0lBQzVFLElBQThCLFFBQVEsQ0FBQyxHQUFHLElBQU0sSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsR0FBRyxHQUFHLENBQUMsRUFBRTs7Ozs7SUFDNUUsSUFBOEIsUUFBUSxDQUFDLEdBQUcsSUFBTSxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxHQUFHLEdBQUcsQ0FBQyxFQUFFOzs7OztJQUM1RSxJQUE4QixRQUFRLENBQUMsR0FBRyxJQUFNLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEdBQUcsR0FBRyxDQUFDLEVBQUU7Ozs7O0lBQzVFLElBQThCLFFBQVEsQ0FBQyxHQUFHLElBQU0sSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsR0FBRyxHQUFHLENBQUMsRUFBRTs7Ozs7SUFFNUUsSUFBOEIsVUFBVSxDQUFDLEdBQUcsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxHQUFHLEdBQUcsQ0FBQyxFQUFFOzs7OztJQUMvRSxJQUE4QixVQUFVLENBQUMsR0FBRyxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLEdBQUcsR0FBRyxDQUFDLEVBQUU7Ozs7O0lBQy9FLElBQThCLFVBQVUsQ0FBQyxHQUFHLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsR0FBRyxHQUFHLENBQUMsRUFBRTs7Ozs7SUFDL0UsSUFBOEIsVUFBVSxDQUFDLEdBQUcsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxHQUFHLEdBQUcsQ0FBQyxFQUFFOzs7OztJQUUvRSxJQUE4QixVQUFVLENBQUMsR0FBRyxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLEdBQUcsR0FBRyxDQUFDLEVBQUU7Ozs7O0lBQy9FLElBQThCLFVBQVUsQ0FBQyxHQUFHLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsR0FBRyxHQUFHLENBQUMsRUFBRTs7Ozs7SUFDL0UsSUFBOEIsVUFBVSxDQUFDLEdBQUcsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxHQUFHLEdBQUcsQ0FBQyxFQUFFOzs7OztJQUMvRSxJQUE4QixVQUFVLENBQUMsR0FBRyxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLEdBQUcsR0FBRyxDQUFDLEVBQUU7Ozs7SUFVL0UsV0FBVztRQUNULElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztLQUNmOzs7O0lBRUQsTUFBTTtRQUNKLHVCQUFNLFVBQVUsR0FBRyxFQUFFLENBQUM7UUFFdEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsVUFBVSxDQUFDLEVBQUU7WUFDcEMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxFQUFFLFVBQVUsQ0FBQyxDQUFDLENBQUM7U0FDaEYsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUUvQixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7S0FDcEM7Ozs7OztJQUVELGlCQUFpQixDQUFDLFdBQXFCLEVBQUUsWUFBYTtRQUNwRCxXQUFXLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxFQUFFO1lBQy9CLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUM7Z0JBQy9CLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLEdBQUcsWUFBWSxDQUFDO2FBQzFDO1NBQ0YsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO0tBQ2Y7Ozs7SUFFRCxJQUFJLFdBQVc7UUFDYixNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7S0FDbkM7OztZQXBFRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFOzs7OztHQUtUO2FBQ0Y7Ozs7WUFibUIsVUFBVTtZQUFTLFNBQVM7WUFHdkMsY0FBYzs7O3FCQWdCcEIsS0FBSyxTQUFDLFVBQVU7dUJBR2hCLEtBQUssU0FBQyxhQUFhO3VCQUNuQixLQUFLLFNBQUMsYUFBYTt1QkFDbkIsS0FBSyxTQUFDLGFBQWE7dUJBQ25CLEtBQUssU0FBQyxhQUFhO3VCQUNuQixLQUFLLFNBQUMsYUFBYTt5QkFFbkIsS0FBSyxTQUFDLGdCQUFnQjt5QkFDdEIsS0FBSyxTQUFDLGdCQUFnQjt5QkFDdEIsS0FBSyxTQUFDLGdCQUFnQjt5QkFDdEIsS0FBSyxTQUFDLGdCQUFnQjt5QkFFdEIsS0FBSyxTQUFDLGdCQUFnQjt5QkFDdEIsS0FBSyxTQUFDLGdCQUFnQjt5QkFDdEIsS0FBSyxTQUFDLGdCQUFnQjt5QkFDdEIsS0FBSyxTQUFDLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSW5wdXQsIFJlbmRlcmVyMiwgT25DaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBSZXBsYXlTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7IEZsZXhDc3NTZXJ2aWNlIH0gZnJvbSAnLi9mbGV4LWNzcy5zZXJ2aWNlJztcbmltcG9ydCB7IEJhc2VEaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZSc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogYFxuICAgIFtmY0xheW91dF0sXG4gICAgW2ZjTGF5b3V0LnhzXSwgW2ZjTGF5b3V0LnNtXSwgW2ZjTGF5b3V0Lm1kXSwgW2ZjTGF5b3V0LmxnXSwgW2ZjTGF5b3V0LnhsXSxcbiAgICBbZmNMYXlvdXQubHQtc21dLCBbZmNMYXlvdXQubHQtbWRdLCBbZmNMYXlvdXQubHQtbGddLCBbZmNMYXlvdXQubHQteGxdLFxuICAgIFtmY0xheW91dC5ndC14c10sIFtmY0xheW91dC5ndC1zbV0sIFtmY0xheW91dC5ndC1tZF0sIFtmY0xheW91dC5ndC1sZ11cbiAgYCxcbn0pXG5leHBvcnQgY2xhc3MgTGF5b3V0RGlyZWN0aXZlIGV4dGVuZHMgQmFzZURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIHJlYWRvbmx5IGZjVmFsdWVzID0ge307XG5cbiAgcmVhZG9ubHkgb2JzZXJ2ZXIkID0gbmV3IFJlcGxheVN1YmplY3QoMSk7XG5cbiAgQElucHV0KCdmY0xheW91dCcpICAgICAgICBzZXQgbGF5b3V0KHZhbCkgICAgIHsgdGhpcy5mY1ZhbHVlc1snYWxsJ10gPSB2YWw7IH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAvLyBnZXQgbGF5b3V0KCkgICAgICAgIHsgcmV0dXJuIHRoaXMuZmNWYWx1ZXNbJ2FsbCddOyB9XG5cbiAgQElucHV0KCdmY0xheW91dC54cycpICAgICBzZXQgbGF5b3V0WHModmFsKSAgIHsgdGhpcy5mY1ZhbHVlc1sneHMnXSA9IHZhbDsgfVxuICBASW5wdXQoJ2ZjTGF5b3V0LnNtJykgICAgIHNldCBsYXlvdXRTbSh2YWwpICAgeyB0aGlzLmZjVmFsdWVzWydzbSddID0gdmFsOyB9XG4gIEBJbnB1dCgnZmNMYXlvdXQubWQnKSAgICAgc2V0IGxheW91dE1kKHZhbCkgICB7IHRoaXMuZmNWYWx1ZXNbJ21kJ10gPSB2YWw7IH1cbiAgQElucHV0KCdmY0xheW91dC5sZycpICAgICBzZXQgbGF5b3V0TGcodmFsKSAgIHsgdGhpcy5mY1ZhbHVlc1snbGcnXSA9IHZhbDsgfVxuICBASW5wdXQoJ2ZjTGF5b3V0LnhsJykgICAgIHNldCBsYXlvdXRYbCh2YWwpICAgeyB0aGlzLmZjVmFsdWVzWyd4bCddID0gdmFsOyB9XG5cbiAgQElucHV0KCdmY0xheW91dC5ndC14cycpICBzZXQgbGF5b3V0R3RYcyh2YWwpIHsgdGhpcy5mY1ZhbHVlc1snZ3QteHMnXSA9IHZhbDsgfVxuICBASW5wdXQoJ2ZjTGF5b3V0Lmd0LXNtJykgIHNldCBsYXlvdXRHdFNtKHZhbCkgeyB0aGlzLmZjVmFsdWVzWydndC1zbSddID0gdmFsOyB9XG4gIEBJbnB1dCgnZmNMYXlvdXQuZ3QtbWQnKSAgc2V0IGxheW91dEd0TWQodmFsKSB7IHRoaXMuZmNWYWx1ZXNbJ2d0LW1kJ10gPSB2YWw7IH1cbiAgQElucHV0KCdmY0xheW91dC5ndC1sZycpICBzZXQgbGF5b3V0R3RMZyh2YWwpIHsgdGhpcy5mY1ZhbHVlc1snZ3QtbGcnXSA9IHZhbDsgfVxuXG4gIEBJbnB1dCgnZmNMYXlvdXQubHQtc20nKSAgc2V0IGxheW91dEx0U20odmFsKSB7IHRoaXMuZmNWYWx1ZXNbJ2x0LXNtJ10gPSB2YWw7IH1cbiAgQElucHV0KCdmY0xheW91dC5sdC1tZCcpICBzZXQgbGF5b3V0THRNZCh2YWwpIHsgdGhpcy5mY1ZhbHVlc1snbHQtbWQnXSA9IHZhbDsgfVxuICBASW5wdXQoJ2ZjTGF5b3V0Lmx0LWxnJykgIHNldCBsYXlvdXRMdExnKHZhbCkgeyB0aGlzLmZjVmFsdWVzWydsdC1sZyddID0gdmFsOyB9XG4gIEBJbnB1dCgnZmNMYXlvdXQubHQteGwnKSAgc2V0IGxheW91dEx0WGwodmFsKSB7IHRoaXMuZmNWYWx1ZXNbJ2x0LXhsJ10gPSB2YWw7IH1cblxuICBjb25zdHJ1Y3RvcihcbiAgICBlbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgIHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgcHJpdmF0ZSBzZXJ2aWNlOiBGbGV4Q3NzU2VydmljZSxcbiAgKSB7XG4gICAgc3VwZXIoZWxlbWVudFJlZiwgcmVuZGVyZXIpO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgdGhpcy5yZWxvYWQoKTtcbiAgfVxuXG4gIHJlbG9hZCgpIHtcbiAgICBjb25zdCBjbGFzc05hbWVzID0gW107XG5cbiAgICB0aGlzLmJyZWFrcG9pbnRzLmZvckVhY2goYnJlYWtwb2ludCA9PiB7XG4gICAgICBjbGFzc05hbWVzLnB1c2godGhpcy5zZXJ2aWNlLmFkZExheW91dCh0aGlzLmZjVmFsdWVzW2JyZWFrcG9pbnRdLCBicmVha3BvaW50KSk7XG4gICAgfSk7XG5cbiAgICB0aGlzLnNldENsYXNzTmFtZXMoY2xhc3NOYW1lcyk7XG5cbiAgICB0aGlzLm9ic2VydmVyJC5uZXh0KHRoaXMuZmNWYWx1ZXMpO1xuICB9XG5cbiAgYWRkTmV3QnJlYWtwb2ludHMoYnJlYWtwb2ludHM6IHN0cmluZ1tdLCBkZWZhdWx0VmFsdWU/KSB7XG4gICAgYnJlYWtwb2ludHMuZm9yRWFjaChicmVha3BvaW50ID0+IHtcbiAgICAgIGlmICghdGhpcy5mY1ZhbHVlc1ticmVha3BvaW50XSkge1xuICAgICAgICB0aGlzLmZjVmFsdWVzW2JyZWFrcG9pbnRdID0gZGVmYXVsdFZhbHVlO1xuICAgICAgfVxuICAgIH0pO1xuXG4gICAgdGhpcy5yZWxvYWQoKTtcbiAgfVxuXG4gIGdldCBicmVha3BvaW50cygpIHtcbiAgICByZXR1cm4gT2JqZWN0LmtleXModGhpcy5mY1ZhbHVlcyk7XG4gIH1cbn1cbiJdfQ==