(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@wm/components/base'), require('@angular/platform-browser'), require('@wm/core')) :
    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@wm/components/base', '@angular/platform-browser', '@wm/core'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.page = {}), global.ng.core, global.ng.common, global.wm.components.base, global.ng.platformBrowser, global.wm.core));
})(this, (function (exports, i0, common, base, i1, i2) { '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);
    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);

    const registerProps$5 = () => {
        base.register('wm-page', new Map([
            ['cache', { value: false, ...base.PROP_BOOLEAN }],
            ['refreshdataonattach', { value: true, ...base.PROP_BOOLEAN }],
            ['pagetitle', base.PROP_STRING],
            ['hint', base.PROP_STRING],
            ['arialabel', base.PROP_STRING]
        ]));
    };

    const DEFAULT_CLS$5 = 'app-page container';
    const WIDGET_CONFIG$5 = { widgetType: 'wm-page', hostClass: DEFAULT_CLS$5 };
    class PageDirective extends base.StylableComponent {
        static { this.initializeProps = registerProps$5(); }
        onPropertyChange(key, nv, ov) {
            if (key === 'pagetitle') {
                this.titleService.setTitle(nv);
            }
            else {
                super.onPropertyChange(key, nv, ov);
            }
        }
        constructor(inj, titleService, viewport, explicitContext) {
            super(inj, WIDGET_CONFIG$5, explicitContext);
            this.titleService = titleService;
            this.viewport = viewport;
            this._eventNotifier = new i2.EventNotifier(false);
            this.refreshdataonattach = true;
        }
        /**
         * A child component can notify page using this method. Notified event will be passed to
         * subscribed children only after page initialization.
         *
         * @param {string} eventName
         * @param data
         */
        notify(eventName, ...data) {
            this._eventNotifier.notify.apply(this._eventNotifier, arguments);
        }
        /**
         * The main purpose of this function is to provide communication between page children objects.
         * Child component can subscribe for an event that will be emitted by another child component.
         *
         * @param eventName
         * @param {(data: any) => void} callback
         * @returns {any}
         */
        subscribe(eventName, callback) {
            return this._eventNotifier.subscribe(eventName, callback);
        }
        ngAfterViewInit() {
            setTimeout(() => {
                this._eventNotifier.start();
                base.updateDeviceView(this.nativeElement, this.getAppInstance().isTabletApplicationType);
            }, 1);
            this.registerDestroyListener(this.viewport.subscribe("resize" /* ViewportEvent.RESIZE */, args => {
                this.invokeEventCallback('resize', { $event: args.$event, widget: this, data: args.data });
            }));
            this.registerDestroyListener(this.viewport.subscribe("orientationchange" /* ViewportEvent.ORIENTATION_CHANGE */, args => {
                this.invokeEventCallback('orientationchange', { $event: args.$event, widget: this, data: args.data });
            }));
        }
        ngOnAttach() {
            this.titleService.setTitle(this.pagetitle);
            this.invokeEventCallback('attach', { widget: this });
            this.notify('attach', {
                refreshData: this.refreshdataonattach
            });
        }
        ngOnDetach() {
            this.invokeEventCallback('detach', { widget: this });
            this.notify('detach');
        }
        ngOnDestroy() {
            this.invokeEventCallback('destroy', { widget: this });
            this._eventNotifier.destroy();
        }
        static { this.ɵfac = function PageDirective_Factory(t) { return new (t || PageDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.Title), i0__namespace.ɵɵdirectiveInject(i2__namespace.Viewport), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: PageDirective, selectors: [["", "wmPage", ""]], exportAs: ["wmPage"], features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAsWidgetRef(PageDirective)
                ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PageDirective, [{
            type: i0.Directive,
            args: [{
                    selector: '[wmPage]',
                    providers: [
                        base.provideAsWidgetRef(PageDirective)
                    ],
                    exportAs: 'wmPage'
                }]
        }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.Title }, { type: i2__namespace.Viewport }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], null); })();

    const registerProps$4 = () => {
        base.register('wm-content', new Map([
            ['name', base.PROP_STRING],
            ['class', base.PROP_STRING]
        ]));
    };

    const _c0$1 = ["wmContent", ""];
    const _c1$1 = ["*"];
    const DEFAULT_CLS$4 = 'app-content clearfix';
    const WIDGET_CONFIG$4 = { widgetType: 'wm-content', hostClass: DEFAULT_CLS$4 };
    class ContentComponent extends base.StylableComponent {
        static { this.initializeProps = registerProps$4(); }
        constructor(inj, explicitContext) {
            super(inj, WIDGET_CONFIG$4, explicitContext);
            base.styler(this.nativeElement, this);
        }
        static { this.ɵfac = function ContentComponent_Factory(t) { return new (t || ContentComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: ContentComponent, selectors: [["", "wmContent", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAsWidgetRef(ContentComponent)
                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$1, ngContentSelectors: _c1$1, decls: 2, vars: 0, consts: [[1, "row", "app-content-row", "clearfix"]], template: function ContentComponent_Template(rf, ctx) { if (rf & 1) {
                i0__namespace.ɵɵprojectionDef();
                i0__namespace.ɵɵelementStart(0, "div", 0);
                i0__namespace.ɵɵprojection(1);
                i0__namespace.ɵɵelementEnd();
            } }, encapsulation: 2 }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ContentComponent, [{
            type: i0.Component,
            args: [{ selector: '[wmContent]', providers: [
                        base.provideAsWidgetRef(ContentComponent)
                    ], template: "<div class=\"row app-content-row clearfix\">\n    <ng-content></ng-content>\n</div>" }]
        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], null); })();
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(ContentComponent, { className: "ContentComponent", filePath: "content/content.component.ts", lineNumber: 17 }); })();

    const registerProps$3 = () => {
        base.register('wm-page-content', new Map([
            ['class', base.PROP_STRING],
            ['columnwidth', base.PROP_NUMBER],
            ['content', base.PROP_STRING],
            ['name', base.PROP_STRING],
            ['pulltorefresh', { value: i2.isMobileApp(), ...base.PROP_BOOLEAN }]
        ]));
    };

    const _c0 = ["wmPageContent", ""];
    const _c1 = ["*"];
    const DEFAULT_CLS$3 = 'app-page-content app-content-column';
    const WIDGET_CONFIG$3 = { widgetType: 'wm-page-content', hostClass: DEFAULT_CLS$3 };
    class PageContentComponent extends base.StylableComponent {
        static { this.initializeProps = registerProps$3(); }
        constructor(inj, app, explicitContext) {
            super(inj, WIDGET_CONFIG$3, explicitContext);
            this.app = app;
            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.CONTAINER);
            this.registerDestroyListener(this.app.subscribe('pullToRefresh:enable', () => {
                this.childPullToRefresh = true;
                this.initPullToRefresh();
            }));
        }
        onPropertyChange(key, nv, ov) {
            if (key === 'columnwidth') {
                i2.switchClass(this.nativeElement, `col-md-${nv} col-sm-${nv}`, `col-md-${ov} col-sm-${ov}`);
            }
            else if (key === 'pulltorefresh' && nv) {
                // creating instance after timeout as the smoothscroll styles where getting added on pull refresh-container
                setTimeout(() => {
                    this.initPullToRefresh();
                });
            }
            else {
                super.onPropertyChange(key, nv, ov);
            }
        }
        // when list component is ready, pulltorefresh instance is created and this appends pullToRefresh element on the page content.
        initPullToRefresh() {
            const hasPullToRefreshEvent = this.hasEventCallback('pulltorefresh');
            if (!this.pullToRefreshIns && (this.childPullToRefresh || hasPullToRefreshEvent) && this.pulltorefresh) {
                this.pullToRefreshIns = new base.PullToRefresh($(this.nativeElement), this.app, () => {
                    if (hasPullToRefreshEvent) {
                        this.invokeEventCallback('pulltorefresh');
                    }
                    else {
                        this.app.notify('pulltorefresh');
                    }
                });
                this.registerDestroyListener(() => {
                    if (this.pullToRefreshIns.cancelSubscription) {
                        this.pullToRefreshIns.cancelSubscription();
                    }
                });
            }
        }
        static { this.ɵfac = function PageContentComponent_Factory(t) { return new (t || PageContentComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i2__namespace.App), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: PageContentComponent, selectors: [["", "wmPageContent", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAsWidgetRef(PageContentComponent)
                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0, ngContentSelectors: _c1, decls: 1, vars: 0, template: function PageContentComponent_Template(rf, ctx) { if (rf & 1) {
                i0__namespace.ɵɵprojectionDef();
                i0__namespace.ɵɵprojection(0);
            } }, encapsulation: 2 }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PageContentComponent, [{
            type: i0.Component,
            args: [{ selector: '[wmPageContent]', providers: [
                        base.provideAsWidgetRef(PageContentComponent)
                    ], template: "<ng-content></ng-content>" }]
        }], () => [{ type: i0__namespace.Injector }, { type: i2__namespace.App }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], null); })();
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(PageContentComponent, { className: "PageContentComponent", filePath: "page-content/page-content.component.ts", lineNumber: 18 }); })();

    const registerProps$2 = () => {
        base.register('wm-spa-page', new Map([
            ['cache', { value: false, ...base.PROP_BOOLEAN }],
            ['refreshdataonattach', { value: true, ...base.PROP_BOOLEAN }],
            ['pagetitle', base.PROP_STRING],
            ['hint', base.PROP_STRING]
        ]));
    };

    const DEFAULT_CLS$2 = 'app-spa-page';
    const WIDGET_CONFIG$2 = { widgetType: 'wm-spa-page', hostClass: DEFAULT_CLS$2 };
    class SpaPageDirective extends base.StylableComponent {
        static { this.initializeProps = registerProps$2(); }
        onPropertyChange(key, nv, ov) {
            if (key === 'pagetitle') {
                this.titleService.setTitle(nv);
            }
            else {
                super.onPropertyChange(key, nv, ov);
            }
        }
        constructor(inj, titleService, viewport, explicitContext) {
            super(inj, WIDGET_CONFIG$2, explicitContext);
            this.titleService = titleService;
            this.viewport = viewport;
            this._eventNotifier = new i2.EventNotifier(false);
            this.refreshdataonattach = true;
        }
        /**
         * A child component can notify page using this method. Notified event will be passed to
         * subscribed children only after page initialization.
         *
         * @param {string} eventName
         * @param data
         */
        notify(eventName, ...data) {
            this._eventNotifier.notify.apply(this._eventNotifier, arguments);
        }
        /**
         * The main purpose of this function is to provide communication between page children objects.
         * Child component can subscribe for an event that will be emitted by another child component.
         *
         * @param eventName
         * @param {(data: any) => void} callback
         * @returns {any}
         */
        subscribe(eventName, callback) {
            return this._eventNotifier.subscribe(eventName, callback);
        }
        ngAfterViewInit() {
            setTimeout(() => {
                this._eventNotifier.start();
                base.updateDeviceView(this.nativeElement, this.getAppInstance().isTabletApplicationType);
            }, 1);
            this.registerDestroyListener(this.viewport.subscribe("resize" /* ViewportEvent.RESIZE */, args => {
                this.invokeEventCallback('resize', { $event: args.$event, widget: this, data: args.data });
            }));
            this.registerDestroyListener(this.viewport.subscribe("orientationchange" /* ViewportEvent.ORIENTATION_CHANGE */, args => {
                this.invokeEventCallback('orientationchange', { $event: args.$event, widget: this, data: args.data });
            }));
        }
        ngOnAttach() {
            this.titleService.setTitle(this.pagetitle);
            this.invokeEventCallback('attach', { widget: this });
            this.notify('attach', {
                refreshData: this.refreshdataonattach
            });
        }
        ngOnDetach() {
            this.invokeEventCallback('detach', { widget: this });
            this.notify('detach');
        }
        ngOnDestroy() {
            this.invokeEventCallback('destroy', { widget: this });
            this._eventNotifier.destroy();
        }
        static { this.ɵfac = function SpaPageDirective_Factory(t) { return new (t || SpaPageDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.Title), i0__namespace.ɵɵdirectiveInject(i2__namespace.Viewport), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: SpaPageDirective, selectors: [["", "wmSpaPage", ""]], exportAs: ["wmSpaPage"], features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAsWidgetRef(SpaPageDirective)
                ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SpaPageDirective, [{
            type: i0.Directive,
            args: [{
                    selector: '[wmSpaPage]',
                    providers: [
                        base.provideAsWidgetRef(SpaPageDirective)
                    ],
                    exportAs: 'wmSpaPage'
                }]
        }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.Title }, { type: i2__namespace.Viewport }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], null); })();

    const registerProps$1 = () => {
        base.register('wm-layout', new Map([]));
    };

    const DEFAULT_CLS$1 = 'app-page container';
    const WIDGET_CONFIG$1 = { widgetType: 'wm-layout', hostClass: DEFAULT_CLS$1 };
    class LayoutDirective extends base.StylableComponent {
        static { this.initializeProps = registerProps$1(); }
        constructor(inj, explicitContext) {
            super(inj, WIDGET_CONFIG$1, explicitContext);
            this._eventNotifier = new i2.EventNotifier(false);
        }
        /**
         * A child component can notify page using this method. Notified event will be passed to
         * subscribed children only after page initialization.
         *
         * @param {string} eventName
         * @param data
         */
        notify(eventName, ...data) {
            this._eventNotifier.notify.apply(this._eventNotifier, arguments);
        }
        ngAfterViewInit() {
            setTimeout(() => {
                base.updateDeviceView(this.nativeElement, this.getAppInstance().isTabletApplicationType);
            }, 1);
        }
        static { this.ɵfac = function LayoutDirective_Factory(t) { return new (t || LayoutDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: LayoutDirective, selectors: [["", "wmLayout", ""]], exportAs: ["wmLayout"], features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAsWidgetRef(LayoutDirective)
                ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(LayoutDirective, [{
            type: i0.Directive,
            args: [{
                    selector: '[wmLayout]',
                    providers: [
                        base.provideAsWidgetRef(LayoutDirective)
                    ],
                    exportAs: 'wmLayout'
                }]
        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], null); })();

    const registerProps = () => {
        base.register('wm-router-outlet', new Map([
            ['columnwidth', base.PROP_NUMBER],
            ['name', base.PROP_STRING]
        ]));
    };

    const DEFAULT_CLS = 'app-content-column-wrapper';
    const WIDGET_CONFIG = {
        widgetType: 'wm-router-outlet',
        hostClass: DEFAULT_CLS
    };
    class RouterOutletDirective extends base.StylableComponent {
        static { this.initializeProps = registerProps(); }
        constructor(inj, explicitContext) {
            super(inj, WIDGET_CONFIG, explicitContext);
        }
        onPropertyChange(key, nv, ov) {
            if (key === 'columnwidth') {
                i2.switchClass(this.nativeElement, `col-md-${nv} col-sm-${nv}`, `col-md-${ov} col-sm-${ov}`);
            }
            else {
                super.onPropertyChange(key, nv, ov);
            }
        }
        static { this.ɵfac = function RouterOutletDirective_Factory(t) { return new (t || RouterOutletDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: RouterOutletDirective, selectors: [["", "wmRouterOutlet", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAsWidgetRef(RouterOutletDirective)
                ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(RouterOutletDirective, [{
            type: i0.Directive,
            args: [{
                    selector: '[wmRouterOutlet]',
                    providers: [
                        base.provideAsWidgetRef(RouterOutletDirective)
                    ]
                }]
        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], null); })();

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

    exports.ContentComponent = ContentComponent;
    exports.LayoutDirective = LayoutDirective;
    exports.PageContentComponent = PageContentComponent;
    exports.PageDirective = PageDirective;
    exports.PageModule = PageModule;
    exports.RouterOutletDirective = RouterOutletDirective;
    exports.SpaPageDirective = SpaPageDirective;

}));
