/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Directive, HostBinding, Input, NgModule } from '@angular/core';
var IgxLayoutDirective = /** @class */ (function () {
    function IgxLayoutDirective() {
        /**
         * Sets the default flow direction of the container's children.
         *
         * Defaults to `rows`.
         *
         * ```html
         *  <div
         *   igxLayout
         *   igxLayoutDir="row">
         *    <div igxFlex>1</div>
         *    <div igxFlex>2</div>
         *    <div igxFlex>3</div>
         *  </div>
         * ```
         */
        this.dir = 'row';
        /**
         * Defines the direction flex children are placed in the flex container.
         *
         * When set to `true`, the `rows` direction goes right to left and `columns` goes bottom to top.
         *
         * ```html
         * <div
         *   igxLayout
         *   igxLayoutReverse="true">
         *    <div igxFlex>1</div>
         *    <div igxFlex>2</div>
         *    <div igxFlex>3</div>
         * </div>
         * ```
         */
        this.reverse = false;
        /**
         * By default the immediate children will all try to fit onto one line.
         *
         * The default value `nowrap` sets this behavior.
         *
         * Other accepted values are `wrap` and `wrap-reverse`.
         *
         * ```html
         * <div
         *   igxLayout
         *   igxLayoutDir="row"
         *   igxLayoutWrap="wrap">
         *    <div igxFlex igxFlexGrow="0">1</div>
         *    <div igxFlex igxFlexGrow="0">2</div>
         *    <div igxFlex igxFlexGrow="0">3</div>
         * </div>
         * ```
         */
        this.wrap = 'nowrap';
        /**
         * Defines the alignment along the main axis.
         *
         * Defaults to `flex-start` which packs the children toward the start line.
         *
         * Other possible values are `flex-end`, `center`, `space-between`, `space-around`.
         *
         * ```html
         * <div
         *   igxLayout
         *   igxLayoutDir="column"
         *   igxLayoutJustify="space-between">
         *    <div>1</div>
         *    <div>2</div>
         *    <div>3</div>
         * </div>
         * ```
         */
        this.justify = 'flex-start';
        /**
         * Defines the default behavior for how children are laid out along the corss axis of the current line.
         *
         * Defaults to `flex-start`.
         *
         * Other possible values are `flex-end`, `center`, `baseline`, and `stretch`.
         *
         * ```html
         * <div
         *   igxLayout
         *   igxLayoutDir="column"
         *   igxLayoutItemAlign="start">
         *    <div igxFlex igxFlexGrow="0">1</div>
         *    <div igxFlex igxFlexGrow="0">2</div>
         *    <div igxFlex igxFlexGrow="0">3</div>
         * </div>
         * ```
         */
        this.itemAlign = 'stretch';
        /**
         * @hidden
         */
        this.display = 'flex';
    }
    Object.defineProperty(IgxLayoutDirective.prototype, "flexwrap", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () { return this.wrap; },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxLayoutDirective.prototype, "justifycontent", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () { return this.justify; },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxLayoutDirective.prototype, "align", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () { return this.itemAlign; },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxLayoutDirective.prototype, "direction", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            if (this.reverse) {
                return (this.dir === 'row') ? 'row-reverse' : 'column-reverse';
            }
            return (this.dir === 'row') ? 'row' : 'column';
        },
        enumerable: true,
        configurable: true
    });
    IgxLayoutDirective.decorators = [
        { type: Directive, args: [{
                    selector: '[igxLayout]'
                },] }
    ];
    IgxLayoutDirective.propDecorators = {
        dir: [{ type: Input, args: ['igxLayoutDir',] }],
        reverse: [{ type: Input, args: ['igxLayoutReverse',] }],
        wrap: [{ type: Input, args: ['igxLayoutWrap',] }],
        justify: [{ type: Input, args: ['igxLayoutJustify',] }],
        itemAlign: [{ type: Input, args: ['igxLayoutItemAlign',] }],
        display: [{ type: HostBinding, args: ['style.display',] }],
        flexwrap: [{ type: HostBinding, args: ['style.flex-wrap',] }],
        justifycontent: [{ type: HostBinding, args: ['style.justify-content',] }],
        align: [{ type: HostBinding, args: ['style.align-items',] }],
        direction: [{ type: HostBinding, args: ['style.flex-direction',] }]
    };
    return IgxLayoutDirective;
}());
export { IgxLayoutDirective };
if (false) {
    /**
     * Sets the default flow direction of the container's children.
     *
     * Defaults to `rows`.
     *
     * ```html
     *  <div
     *   igxLayout
     *   igxLayoutDir="row">
     *    <div igxFlex>1</div>
     *    <div igxFlex>2</div>
     *    <div igxFlex>3</div>
     *  </div>
     * ```
     * @type {?}
     */
    IgxLayoutDirective.prototype.dir;
    /**
     * Defines the direction flex children are placed in the flex container.
     *
     * When set to `true`, the `rows` direction goes right to left and `columns` goes bottom to top.
     *
     * ```html
     * <div
     *   igxLayout
     *   igxLayoutReverse="true">
     *    <div igxFlex>1</div>
     *    <div igxFlex>2</div>
     *    <div igxFlex>3</div>
     * </div>
     * ```
     * @type {?}
     */
    IgxLayoutDirective.prototype.reverse;
    /**
     * By default the immediate children will all try to fit onto one line.
     *
     * The default value `nowrap` sets this behavior.
     *
     * Other accepted values are `wrap` and `wrap-reverse`.
     *
     * ```html
     * <div
     *   igxLayout
     *   igxLayoutDir="row"
     *   igxLayoutWrap="wrap">
     *    <div igxFlex igxFlexGrow="0">1</div>
     *    <div igxFlex igxFlexGrow="0">2</div>
     *    <div igxFlex igxFlexGrow="0">3</div>
     * </div>
     * ```
     * @type {?}
     */
    IgxLayoutDirective.prototype.wrap;
    /**
     * Defines the alignment along the main axis.
     *
     * Defaults to `flex-start` which packs the children toward the start line.
     *
     * Other possible values are `flex-end`, `center`, `space-between`, `space-around`.
     *
     * ```html
     * <div
     *   igxLayout
     *   igxLayoutDir="column"
     *   igxLayoutJustify="space-between">
     *    <div>1</div>
     *    <div>2</div>
     *    <div>3</div>
     * </div>
     * ```
     * @type {?}
     */
    IgxLayoutDirective.prototype.justify;
    /**
     * Defines the default behavior for how children are laid out along the corss axis of the current line.
     *
     * Defaults to `flex-start`.
     *
     * Other possible values are `flex-end`, `center`, `baseline`, and `stretch`.
     *
     * ```html
     * <div
     *   igxLayout
     *   igxLayoutDir="column"
     *   igxLayoutItemAlign="start">
     *    <div igxFlex igxFlexGrow="0">1</div>
     *    <div igxFlex igxFlexGrow="0">2</div>
     *    <div igxFlex igxFlexGrow="0">3</div>
     * </div>
     * ```
     * @type {?}
     */
    IgxLayoutDirective.prototype.itemAlign;
    /**
     * @hidden
     * @type {?}
     */
    IgxLayoutDirective.prototype.display;
}
var IgxFlexDirective = /** @class */ (function () {
    function IgxFlexDirective() {
        /**
         * Applies the `grow` attribute to an element that uses the directive.
         *
         * Default value is `1`.
         *
         * ```html
         * <div>
         *    <div igxFlex igxFlexGrow="0">Content1</div>
         *    <div igxFlex igxFlexGrow="1">Content2</div>
         *    <div igxFlex igxFlexGrow="0">Content3</div>
         * </div>
         * ```
         */
        this.grow = 1;
        /**
         * Applies the `shrink` attribute to an element that uses the directive.
         *
         * Default value is `1`.
         *
         * ```html
         * <div>
         *    <div igxFlex igxFlexShrink="1">Content1</div>
         *    <div igxFlex igxFlexShrink="0">Content2</div>
         *    <div igxFlex igxFlexShrink="1">Content3</div>
         * </div>
         * ```
         */
        this.shrink = 1;
        /**
         * Applies the directive to an element.
         *
         * Possible values include `igxFlexGrow`, `igxFlexShrink`, `igxFlexOrder`, `igxFlexBasis`.
         *
         * ```html
         * <div igxFlex>Content</div>
         * ```
         */
        this.flex = '';
        /**
         * Applies the `order` attribute to an element that uses the directive.
         *
         * Default value is `0`.
         *
         * ```html
         * <div>
         *    <div igxFlex igxFlexOrder="1">Content1</div>
         *    <div igxFlex igxFlexOrder="0">Content2</div>
         *    <div igxFlex igxFlexOrder="2">Content3</div>
         * </div>
         * ```
         */
        this.order = 0;
        /**
         * Applies the `flex-basis` attribute to an element that uses the directive.
         *
         * Default value is `auto`.
         *
         * Other possible values include `content`, `max-content`, `min-content`, `fit-content`.
         *
         * ```html
         * <div igxFlex igxFlexBasis="fit-content">Content</div>
         * ```
         */
        this.basis = 'auto';
    }
    Object.defineProperty(IgxFlexDirective.prototype, "style", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            if (this.flex) {
                return "" + this.flex;
            }
            return this.grow + " " + this.shrink + " " + this.basis;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(IgxFlexDirective.prototype, "itemorder", {
        /**
         * @hidden
         */
        get: /**
         * @hidden
         * @return {?}
         */
        function () {
            return this.order || 0;
        },
        enumerable: true,
        configurable: true
    });
    IgxFlexDirective.decorators = [
        { type: Directive, args: [{
                    selector: '[igxFlex]'
                },] }
    ];
    IgxFlexDirective.propDecorators = {
        grow: [{ type: Input, args: ['igxFlexGrow',] }],
        shrink: [{ type: Input, args: ['igxFlexShrink',] }],
        flex: [{ type: Input, args: ['igxFlex',] }],
        order: [{ type: Input, args: ['igxFlexOrder',] }],
        basis: [{ type: Input, args: ['igxFlexBasis',] }],
        style: [{ type: HostBinding, args: ['style.flex',] }],
        itemorder: [{ type: HostBinding, args: ['style.order',] }]
    };
    return IgxFlexDirective;
}());
export { IgxFlexDirective };
if (false) {
    /**
     * Applies the `grow` attribute to an element that uses the directive.
     *
     * Default value is `1`.
     *
     * ```html
     * <div>
     *    <div igxFlex igxFlexGrow="0">Content1</div>
     *    <div igxFlex igxFlexGrow="1">Content2</div>
     *    <div igxFlex igxFlexGrow="0">Content3</div>
     * </div>
     * ```
     * @type {?}
     */
    IgxFlexDirective.prototype.grow;
    /**
     * Applies the `shrink` attribute to an element that uses the directive.
     *
     * Default value is `1`.
     *
     * ```html
     * <div>
     *    <div igxFlex igxFlexShrink="1">Content1</div>
     *    <div igxFlex igxFlexShrink="0">Content2</div>
     *    <div igxFlex igxFlexShrink="1">Content3</div>
     * </div>
     * ```
     * @type {?}
     */
    IgxFlexDirective.prototype.shrink;
    /**
     * Applies the directive to an element.
     *
     * Possible values include `igxFlexGrow`, `igxFlexShrink`, `igxFlexOrder`, `igxFlexBasis`.
     *
     * ```html
     * <div igxFlex>Content</div>
     * ```
     * @type {?}
     */
    IgxFlexDirective.prototype.flex;
    /**
     * Applies the `order` attribute to an element that uses the directive.
     *
     * Default value is `0`.
     *
     * ```html
     * <div>
     *    <div igxFlex igxFlexOrder="1">Content1</div>
     *    <div igxFlex igxFlexOrder="0">Content2</div>
     *    <div igxFlex igxFlexOrder="2">Content3</div>
     * </div>
     * ```
     * @type {?}
     */
    IgxFlexDirective.prototype.order;
    /**
     * Applies the `flex-basis` attribute to an element that uses the directive.
     *
     * Default value is `auto`.
     *
     * Other possible values include `content`, `max-content`, `min-content`, `fit-content`.
     *
     * ```html
     * <div igxFlex igxFlexBasis="fit-content">Content</div>
     * ```
     * @type {?}
     */
    IgxFlexDirective.prototype.basis;
}
/**
 * @hidden
 */
var IgxLayoutModule = /** @class */ (function () {
    function IgxLayoutModule() {
    }
    IgxLayoutModule.decorators = [
        { type: NgModule, args: [{
                    declarations: [IgxFlexDirective, IgxLayoutDirective],
                    exports: [IgxFlexDirective, IgxLayoutDirective]
                },] }
    ];
    return IgxLayoutModule;
}());
export { IgxLayoutModule };
//# sourceMappingURL=data:application/json;base64, 