(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@wm/components/base')) :
    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@wm/components/base'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.containers = global.wm.components.containers || {}, global.wm.components.containers.linearlayout = {}), global.ng.core, global.ng.common, global.wm.components.base));
})(this, (function (exports, i0, common, base) { 'use strict';

    function _interopNamespaceDefault(e) {
        var n = Object.create(null);
        if (e) {
            Object.keys(e).forEach(function (k) {
                if (k !== 'default') {
                    var d = Object.getOwnPropertyDescriptor(e, k);
                    Object.defineProperty(n, k, d.get ? d : {
                        enumerable: true,
                        get: function () { return e[k]; }
                    });
                }
            });
        }
        n.default = e;
        return Object.freeze(n);
    }

    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);

    const registerProps$1 = () => {
        base.register('wm-linearlayout', new Map([
            ['class', base.PROP_STRING],
            ['direction', base.PROP_STRING],
            ['horizontalalign', base.PROP_STRING],
            ['name', base.PROP_STRING],
            ['show', { value: true, ...base.PROP_BOOLEAN }],
            ['spacing', base.PROP_STRING],
            ['verticalalign', base.PROP_STRING],
        ]));
    };

    const DEFAULT_CLS$1 = 'app-linear-layout clearfix';
    const WIDGET_CONFIG$1 = {
        widgetType: 'wm-linearlayout',
        hostClass: DEFAULT_CLS$1
    };
    const hAlignValues = {
        'left': 'flex-start',
        'right': 'flex-end',
        'center': 'center',
    }, vAlignValues = {
        'top': 'flex-start',
        'bottom': 'flex-end',
        'center': 'center',
    };
    class LinearLayoutDirective extends base.BaseContainerComponent {
        static { this.initializeProps = registerProps$1(); }
        constructor(inj, explicitContext) {
            super(inj, WIDGET_CONFIG$1, explicitContext);
            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.CONTAINER);
        }
        removeClass($el, prefix) {
            $el.removeClass((i, className) => {
                return className.split(' ')
                    .filter(s => s.startsWith(prefix))
                    .join(' ');
            });
        }
        changeDirection($el, v) {
            this.removeClass($el, 'app-linear-layout-direction');
            $el.addClass('app-linear-layout-direction-' + v);
            if (v === 'row' || v === 'row-reverse') {
                $el.css('justify-content', hAlignValues[this.horizontalalign]);
            }
            else if (v === 'column' || v === 'column-reverse') {
                $el.css('justify-content', vAlignValues[this.verticalalign]);
            }
            $el.css('flex-direction', v);
        }
        onStyleChange(key, nv, ov) {
            if (key === 'horizontalalign') {
                if (this.direction === 'row' || this.direction === 'row-reverse') {
                    this.$element.css('justify-content', hAlignValues[nv]);
                }
                else {
                    this.$element.css('align-items', hAlignValues[nv]);
                }
            }
            else if (key === 'verticalalign') {
                if (this.direction === 'column' || this.direction === 'column-reverse') {
                    this.$element.css('justify-content', vAlignValues[nv]);
                }
                else {
                    this.$element.css('align-items', vAlignValues[nv]);
                }
            }
            super.onStyleChange(key, nv, ov);
        }
        onPropertyChange(key, nv, ov) {
            switch (key) {
                case 'direction':
                    this.changeDirection(this.$element, nv);
                    break;
                case 'horizontalalign':
                    this.$element.css('justify-content', hAlignValues[nv]);
                    break;
                case 'verticalalign':
                    this.$element.css('justify-content', vAlignValues[nv]);
                    break;
                case 'spacing':
                    this.removeClass(this.$element, 'app-linear-layout-spacing');
                    this.$element.addClass('app-linear-layout-spacing-' + nv);
                    break;
            }
            super.onPropertyChange(key, nv, ov);
        }
        static { this.ɵfac = function LinearLayoutDirective_Factory(t) { return new (t || LinearLayoutDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: LinearLayoutDirective, selectors: [["", "wmLinearLayout", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAsWidgetRef(LinearLayoutDirective)
                ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(LinearLayoutDirective, [{
            type: i0.Directive,
            args: [{
                    selector: '[wmLinearLayout]',
                    providers: [
                        base.provideAsWidgetRef(LinearLayoutDirective)
                    ]
                }]
        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], null); })();

    const registerProps = () => {
        base.register('wm-linearlayoutitem', new Map([
            ['class', base.PROP_STRING],
            ['flexgrow', base.PROP_NUMBER],
            ['name', base.PROP_STRING],
            ['show', { value: true, ...base.PROP_BOOLEAN }]
        ]));
    };

    const DEFAULT_CLS = 'app-linear-layout-item clearfix';
    const WIDGET_CONFIG = {
        widgetType: 'wm-linearlayoutitem',
        hostClass: DEFAULT_CLS
    };
    class LinearLayoutItemDirective extends base.StylableComponent {
        static { this.initializeProps = registerProps(); }
        constructor(inj, explicitContext) {
            super(inj, WIDGET_CONFIG, explicitContext);
            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.CONTAINER);
        }
        onPropertyChange(key, nv, ov) {
            switch (key) {
                case 'flexgrow':
                    this.$element.css('flex-grow', nv);
                    break;
            }
            super.onPropertyChange(key, nv, ov);
        }
        static { this.ɵfac = function LinearLayoutItemDirective_Factory(t) { return new (t || LinearLayoutItemDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: LinearLayoutItemDirective, selectors: [["", "wmLinearLayoutItem", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAsWidgetRef(LinearLayoutItemDirective)
                ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(LinearLayoutItemDirective, [{
            type: i0.Directive,
            args: [{
                    selector: '[wmLinearLayoutItem]',
                    providers: [
                        base.provideAsWidgetRef(LinearLayoutItemDirective)
                    ]
                }]
        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], null); })();

    const components = [
        LinearLayoutDirective,
        LinearLayoutItemDirective
    ];
    class LinearLayoutModule {
        static { this.ɵfac = function LinearLayoutModule_Factory(t) { return new (t || LinearLayoutModule)(); }; }
        static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: LinearLayoutModule }); }
        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [common.CommonModule,
                base.WmComponentsModule] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(LinearLayoutModule, [{
            type: i0.NgModule,
            args: [{
                    imports: [
                        common.CommonModule,
                        base.WmComponentsModule
                    ],
                    declarations: [...components],
                    exports: [...components]
                }]
        }], null, null); })();
    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(LinearLayoutModule, { declarations: [LinearLayoutDirective,
            LinearLayoutItemDirective], imports: [common.CommonModule,
            base.WmComponentsModule], exports: [LinearLayoutDirective,
            LinearLayoutItemDirective] }); })();

    exports.LinearLayoutDirective = LinearLayoutDirective;
    exports.LinearLayoutItemDirective = LinearLayoutItemDirective;
    exports.LinearLayoutModule = LinearLayoutModule;

}));
