import * as i0 from '@angular/core';
import { Directive, Inject, Optional, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PROP_STRING, PROP_BOOLEAN, register, BaseContainerComponent, APPLY_STYLES_TYPE, styler, provideAsWidgetRef, PROP_NUMBER, StylableComponent, WmComponentsModule } from '@wm/components/base';

const registerProps$1 = () => {
    register('wm-linearlayout', new Map([
        ['class', PROP_STRING],
        ['direction', PROP_STRING],
        ['horizontalalign', PROP_STRING],
        ['name', PROP_STRING],
        ['show', { value: true, ...PROP_BOOLEAN }],
        ['spacing', PROP_STRING],
        ['verticalalign', 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 BaseContainerComponent {
    static { this.initializeProps = registerProps$1(); }
    constructor(inj, explicitContext) {
        super(inj, WIDGET_CONFIG$1, explicitContext);
        styler(this.nativeElement, this, 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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: LinearLayoutDirective, selectors: [["", "wmLinearLayout", ""]], features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(LinearLayoutDirective)
            ]), i0.ɵɵInheritDefinitionFeature] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LinearLayoutDirective, [{
        type: Directive,
        args: [{
                selector: '[wmLinearLayout]',
                providers: [
                    provideAsWidgetRef(LinearLayoutDirective)
                ]
            }]
    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], null); })();

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

const DEFAULT_CLS = 'app-linear-layout-item clearfix';
const WIDGET_CONFIG = {
    widgetType: 'wm-linearlayoutitem',
    hostClass: DEFAULT_CLS
};
class LinearLayoutItemDirective extends StylableComponent {
    static { this.initializeProps = registerProps(); }
    constructor(inj, explicitContext) {
        super(inj, WIDGET_CONFIG, explicitContext);
        styler(this.nativeElement, this, 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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: LinearLayoutItemDirective, selectors: [["", "wmLinearLayoutItem", ""]], features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(LinearLayoutItemDirective)
            ]), i0.ɵɵInheritDefinitionFeature] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LinearLayoutItemDirective, [{
        type: Directive,
        args: [{
                selector: '[wmLinearLayoutItem]',
                providers: [
                    provideAsWidgetRef(LinearLayoutItemDirective)
                ]
            }]
    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], null); })();

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

/**
 * Generated bundle index. Do not edit.
 */

export { LinearLayoutDirective, LinearLayoutItemDirective, LinearLayoutModule };
//# sourceMappingURL=index.mjs.map
