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

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

const DEFAULT_CLS$2 = 'app-grid-layout clearfix';
const WIDGET_CONFIG$2 = {
    widgetType: 'wm-layoutgrid',
    hostClass: DEFAULT_CLS$2
};
class LayoutgridDirective extends BaseContainerComponent {
    static { this.initializeProps = registerProps$2(); }
    constructor(inj, explicitContext) {
        super(inj, WIDGET_CONFIG$2, explicitContext);
        styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
    }
    static { this.ɵfac = function LayoutgridDirective_Factory(t) { return new (t || LayoutgridDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: LayoutgridDirective, selectors: [["", "wmLayoutGrid", ""]], features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(LayoutgridDirective)
            ]), i0.ɵɵInheritDefinitionFeature] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutgridDirective, [{
        type: Directive,
        args: [{
                selector: '[wmLayoutGrid]',
                providers: [
                    provideAsWidgetRef(LayoutgridDirective)
                ]
            }]
    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], null); })();

const registerProps$1 = () => {
    register('wm-layout-grid-row', new Map([
        ['class', PROP_STRING],
        ['name', PROP_STRING],
        ['show', { value: true, ...PROP_BOOLEAN }]
    ]));
};

const DEFAULT_CLS$1 = 'app-grid-row clearfix';
const WIDGET_CONFIG$1 = {
    widgetType: 'wm-layout-grid-row',
    hostClass: DEFAULT_CLS$1
};
class LayoutGridRowDirective extends StylableComponent {
    static { this.initializeProps = registerProps$1(); }
    constructor(inj, explicitContext) {
        super(inj, WIDGET_CONFIG$1, explicitContext);
        styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
    }
    static { this.ɵfac = function LayoutGridRowDirective_Factory(t) { return new (t || LayoutGridRowDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: LayoutGridRowDirective, selectors: [["", "wmLayoutGridRow", ""]], features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(LayoutGridRowDirective)
            ]), i0.ɵɵInheritDefinitionFeature] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutGridRowDirective, [{
        type: Directive,
        args: [{
                selector: '[wmLayoutGridRow]',
                providers: [
                    provideAsWidgetRef(LayoutGridRowDirective)
                ]
            }]
    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], null); })();

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

const DEFAULT_CLS = 'app-grid-column';
const WIDGET_CONFIG = {
    widgetType: 'wm-gridcolumn',
    hostClass: DEFAULT_CLS
};
class LayoutGridColumnDirective extends StylableComponent {
    static { this.initializeProps = registerProps(); }
    constructor(inj, height, viewport, explicitContext) {
        super(inj, WIDGET_CONFIG, explicitContext);
        this.viewport = viewport;
        // if the height is provided set the overflow to auto
        if (height) {
            setCSS(this.nativeElement, 'overflow', 'auto');
        }
        styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER);
    }
    onPropertyChange(key, nv, ov) {
        const prefix = isMobileApp() ? 'xs' : 'sm';
        if (key === 'xscolumnwidth' && this.viewport.isMobileType && isMobileApp()) {
            switchClass(this.nativeElement, `col-${prefix}-${nv}`, ov ? `col-${prefix}-${ov}` : '');
        }
        else if (key === 'columnwidth') {
            if (!isMobileApp() || (this.viewport.isMobileType && !this.getAttr('xscolumnwidth')) || !this.viewport.isMobileType) {
                switchClass(this.nativeElement, `col-${prefix}-${nv}`, ov ? `col-${prefix}-${ov}` : '');
            }
        }
        else {
            super.onPropertyChange(key, nv, ov);
        }
    }
    static { this.ɵfac = function LayoutGridColumnDirective_Factory(t) { return new (t || LayoutGridColumnDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵinjectAttribute('height'), i0.ɵɵdirectiveInject(i1.Viewport), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: LayoutGridColumnDirective, selectors: [["", "wmLayoutGridColumn", ""]], features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(LayoutGridColumnDirective)
            ]), i0.ɵɵInheritDefinitionFeature] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutGridColumnDirective, [{
        type: Directive,
        args: [{
                selector: '[wmLayoutGridColumn]',
                providers: [
                    provideAsWidgetRef(LayoutGridColumnDirective)
                ]
            }]
    }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                type: Attribute,
                args: ['height']
            }] }, { type: i1.Viewport }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], null); })();

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

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

export { LayoutGridColumnDirective, LayoutGridModule, LayoutGridRowDirective, LayoutgridDirective };
//# sourceMappingURL=index.mjs.map
