(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@wm/components/base'), require('@wm/core'), require('lodash-es'), require('@wm/components/basic'), require('@angular/common'), require('@wm/mobile/components/basic'), require('@wm/mobile/components/page/mobile-navbar'), require('@wm/components/page')) :
    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@wm/components/base', '@wm/core', 'lodash-es', '@wm/components/basic', '@angular/common', '@wm/mobile/components/basic', '@wm/mobile/components/page/mobile-navbar', '@wm/components/page'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.mobile = global.wm.mobile || {}, global.wm.mobile.components = global.wm.mobile.components || {}, global.wm.mobile.components.data = global.wm.mobile.components.data || {}, global.wm.mobile.components.data.medialist = {}), global.ng.core, global.wm.components.base, global.wm.core, global._, global.wm.components.basic, global.ng.common, global.wm.mobile.components.basic, global.wm.mobile.components.page.mobilenavbar, global.wm.components.page));
})(this, (function (exports, i0, base, core, lodashEs, i1, i2, i3, i4, i5) { '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);
    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
    var i4__namespace = /*#__PURE__*/_interopNamespaceDefault(i4);
    var i5__namespace = /*#__PURE__*/_interopNamespaceDefault(i5);

    class MediaListItemDirective {
        set wmMediaListItem(val) {
            this.item = val;
        }
        static { this.ɵfac = function MediaListItemDirective_Factory(t) { return new (t || MediaListItemDirective)(); }; }
        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: MediaListItemDirective, selectors: [["", "wmMediaListItem", ""]], inputs: { wmMediaListItem: "wmMediaListItem" }, features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAsWidgetRef(MediaListItemDirective)
                ])] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MediaListItemDirective, [{
            type: i0.Directive,
            args: [{
                    selector: '[wmMediaListItem]',
                    providers: [
                        base.provideAsWidgetRef(MediaListItemDirective)
                    ]
                }]
        }], null, { wmMediaListItem: [{
                type: i0.Input
            }] }); })();

    const registerProps = () => {
        base.register('wm-media-list', new Map([
            ['class', base.PROP_STRING],
            ['dataset', base.PROP_ANY],
            ['layout', { value: 'Single-row', ...base.PROP_STRING }],
            ['mediaurl', base.PROP_STRING],
            ['name', base.PROP_STRING],
            ['offline', { value: true, ...base.PROP_BOOLEAN }],
            ['show', { value: true, ...base.PROP_BOOLEAN }],
            ['thumbnailheight', { value: '100pt', ...base.PROP_STRING }],
            ['thumbnailwidth', { value: '100pt', ...base.PROP_STRING }],
            ['thumbnailurl', base.PROP_STRING],
        ]));
    };

    const _c0 = ["mediaListTemplate"];
    const _c1 = ["wmMediaList", ""];
    const _c2 = (a0, a1) => ({ width: a0, height: a1 });
    const _c3 = a0 => ({ src: a0, class: "thumbnail-image" });
    const _c4 = (a0, a1) => ({ item: a0, index: a1 });
    const _c5 = () => ({ field: "mediaUrlVal", class: "center-block" });
    function MediaListComponent_li_1_Template(rf, ctx) { if (rf & 1) {
        const _r1 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "li", 4);
        i0__namespace.ɵɵlistener("click", function MediaListComponent_li_1_Template_li_click_0_listener() { const index_r2 = i0__namespace.ɵɵrestoreView(_r1).index; const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.showFullScreen(index_r2)); });
        i0__namespace.ɵɵelementStart(1, "div", 5);
        i0__namespace.ɵɵelementContainer(2, 6);
        i0__namespace.ɵɵelementStart(3, "div", 7);
        i0__namespace.ɵɵelementContainer(4, 8);
        i0__namespace.ɵɵelementEnd()()();
    } if (rf & 2) {
        const item_r4 = ctx.$implicit;
        const index_r2 = ctx.index;
        const ctx_r2 = i0__namespace.ɵɵnextContext();
        const imgTemplate_r5 = i0__namespace.ɵɵreference(4);
        i0__namespace.ɵɵproperty("ngStyle", i0__namespace.ɵɵpureFunction2(8, _c2, ctx_r2.thumbnailwidth, ctx_r2.thumbnailheight));
        i0__namespace.ɵɵadvance(2);
        i0__namespace.ɵɵproperty("ngTemplateOutlet", imgTemplate_r5)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction1(11, _c3, item_r4.thumbnailUrlVal))("ngTemplateOutletInjector", ctx_r2.createCustomInjector("thumbnail_" + index_r2, i0__namespace.ɵɵpureFunction1(13, _c3, item_r4.thumbnailUrlVal)));
        i0__namespace.ɵɵadvance(2);
        i0__namespace.ɵɵproperty("ngTemplateOutlet", ctx_r2.mediaListTemplate)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction2(15, _c4, item_r4, index_r2))("ngTemplateOutletInjector", ctx_r2.createCustomInjector("thumbnail_details_" + index_r2, i0__namespace.ɵɵpureFunction2(18, _c4, item_r4, index_r2)))("wmMediaListItem", item_r4);
    } }
    function MediaListComponent_div_2_Template(rf, ctx) { if (rf & 1) {
        const _r6 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "div", 9);
        i0__namespace.ɵɵelement(1, "header", 10);
        i0__namespace.ɵɵelementStart(2, "div", 11)(3, "div", 12)(4, "div", 13)(5, "div", 14);
        i0__namespace.ɵɵlistener("swipeleft", function MediaListComponent_div_2_Template_div_swipeleft_5_listener() { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.showNext()); })("swiperight", function MediaListComponent_div_2_Template_div_swiperight_5_listener() { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.showPrev()); });
        i0__namespace.ɵɵelementContainer(6, 6);
        i0__namespace.ɵɵelementStart(7, "a", 15);
        i0__namespace.ɵɵlistener("click", function MediaListComponent_div_2_Template_a_click_7_listener() { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.showPrev()); });
        i0__namespace.ɵɵelement(8, "i", 16);
        i0__namespace.ɵɵelementEnd();
        i0__namespace.ɵɵelementStart(9, "a", 17);
        i0__namespace.ɵɵlistener("click", function MediaListComponent_div_2_Template_a_click_9_listener() { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.showNext()); });
        i0__namespace.ɵɵelement(10, "i", 18);
        i0__namespace.ɵɵelementEnd()()()()()();
    } if (rf & 2) {
        const ctx_r2 = i0__namespace.ɵɵnextContext();
        const imgTemplate_r5 = i0__namespace.ɵɵreference(4);
        i0__namespace.ɵɵadvance(6);
        i0__namespace.ɵɵproperty("ngTemplateOutlet", imgTemplate_r5)("ngTemplateOutletContext", i0__namespace.ɵɵpureFunction0(5, _c5))("ngTemplateOutletInjector", ctx_r2.createCustomInjector("image_", i0__namespace.ɵɵpureFunction0(6, _c5)));
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("hidden", !(ctx_r2.selectedMediaIndex > 0));
        i0__namespace.ɵɵadvance(2);
        i0__namespace.ɵɵproperty("hidden", !(ctx_r2.selectedMediaIndex < ctx_r2.fieldDefs.length - 1));
    } }
    function MediaListComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵelement(0, "img", 19);
    } if (rf & 2) {
        const classname_r7 = ctx.class;
        const ctx_r2 = i0__namespace.ɵɵnextContext();
        i0__namespace.ɵɵclassMap(classname_r7);
        i0__namespace.ɵɵpropertyInterpolate("wmImageCache", ctx_r2.offline);
    } }
    const DEFAULT_CLS = 'app-medialist';
    const WIDGET_CONFIG = { widgetType: 'wm-media-list', hostClass: DEFAULT_CLS };
    var Layout;
    (function (Layout) {
        Layout["SINGLE_ROW"] = "Single-row";
        Layout["MULTI_ROW"] = "Multi-row";
    })(Layout || (Layout = {}));
    class MediaListComponent extends base.StylableComponent {
        static { this.initializeProps = registerProps(); }
        constructor(inj, explicitContext) {
            super(inj, WIDGET_CONFIG, explicitContext);
            this.selectedMediaIndex = -1;
            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.SCROLLABLE_CONTAINER);
        }
        appendToBody() {
            if (!this.$fullScreenEle) {
                setTimeout(() => {
                    this.$fullScreenEle = this.$element.find('>.app-media-fullscreen');
                    this.$fullScreenEle.appendTo('body');
                }, 100);
            }
            return true;
        }
        onPropertyChange(key, nv, ov) {
            if (key === 'dataset') {
                this.onDataChange(nv);
            }
            else if (key === 'layout') {
                if (nv === Layout.SINGLE_ROW) {
                    core.addClass(this.nativeElement, 'singlerow');
                }
                else {
                    core.removeClass(this.nativeElement, 'singlerow');
                }
            }
            else {
                super.onPropertyChange(key, nv, ov);
            }
        }
        exitFullScreen() {
            this.selectedMediaIndex = -1;
            this.$fullScreenEle.appendTo(this.$element);
            this.$fullScreenEle = null;
            core.$appDigest();
        }
        getPicTitle() {
            return this.selectedMediaIndex + 1 + '/' + this.fieldDefs.length;
        }
        showFullScreen(i) {
            this.selectedMediaIndex = i;
            core.$appDigest();
        }
        showNext() {
            if (this.selectedMediaIndex < this.fieldDefs.length - 1) {
                this.selectedMediaIndex++;
                core.$appDigest();
            }
        }
        // Returns the field value (src) from the fieldDefs
        getSrc(field) {
            if (field) {
                return this.fieldDefs[this.selectedMediaIndex][field];
            }
            return '';
        }
        showPrev() {
            if (this.selectedMediaIndex > 0) {
                this.selectedMediaIndex--;
                core.$appDigest();
            }
        }
        onDataChange(nv) {
            if (nv) {
                if (core.isObject(nv) && !lodashEs.isArray(nv)) {
                    nv = [nv];
                }
                if (!this.binddataset) {
                    if (lodashEs.isString(nv)) {
                        nv = nv.split(',');
                    }
                }
                if (lodashEs.isArray(nv)) {
                    this.updateFieldDefs(nv);
                }
            }
            else {
                this.updateFieldDefs([]);
            }
        }
        /** With given data, creates media list items*/
        updateFieldDefs(data) {
            this.fieldDefs = data;
            data.forEach(field => {
                field.mediaUrlVal = base.getEvaluatedData(field, { field: this.mediaurl }, this.viewParent);
                field.thumbnailUrlVal = base.getEvaluatedData(field, this.thumbnailurl, this.viewParent);
            });
            this.fieldDefs = data;
        }
        /**
         * used to track list items by Index.
         * @param {number} index value of the list item
         * @returns {number} index.
         */
        listTrackByFn(index) {
            return index;
        }
        static { this.ɵfac = function MediaListComponent_Factory(t) { return new (t || MediaListComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: MediaListComponent, selectors: [["", "wmMediaList", ""]], contentQueries: function MediaListComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
                i0__namespace.ɵɵcontentQuery(dirIndex, _c0, 5);
            } if (rf & 2) {
                let _t;
                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.mediaListTemplate = _t.first);
            } }, features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAsWidgetRef(MediaListComponent)
                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 5, vars: 2, consts: [["imgTemplate", ""], [1, "list-unstyled", "list-inline", "app-media-thumbnail"], [3, "ngStyle", "click", 4, "ngFor", "ngForOf"], ["class", "app-media-fullscreen", 4, "ngIf"], [3, "click", "ngStyle"], [1, "thumbnail"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", "ngTemplateOutletInjector"], [1, "thumbnail-details"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", "ngTemplateOutletInjector", "wmMediaListItem"], [1, "app-media-fullscreen"], ["wmMobileNavbar", "", "backbutton", "true", "backbtnclick.event", "exitFullScreen()", "showLeftnavbtn", "false", "backbuttoniconclass.event", "wi wi-chevron-left", "title.bind", "getPicTitle()"], ["wmContent", ""], ["wmPageContent", ""], [1, "media-content"], [1, "image-container", 3, "swipeleft", "swiperight"], [1, "app-media-fullscreen-nav-control", "left", 3, "click", "hidden"], [1, "wi", "wi-chevron-left"], [1, "app-media-fullscreen-nav-control", "right", 3, "click", "hidden"], [1, "wi", "wi-chevron-right"], ["wmPicture", "", "picturesource.bind", "src || getSrc(field)", 3, "wmImageCache"]], template: function MediaListComponent_Template(rf, ctx) { if (rf & 1) {
                i0__namespace.ɵɵelementStart(0, "ul", 1);
                i0__namespace.ɵɵtemplate(1, MediaListComponent_li_1_Template, 5, 21, "li", 2);
                i0__namespace.ɵɵelementEnd();
                i0__namespace.ɵɵtemplate(2, MediaListComponent_div_2_Template, 11, 7, "div", 3)(3, MediaListComponent_ng_template_3_Template, 1, 4, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
            } if (rf & 2) {
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵproperty("ngForOf", ctx.fieldDefs);
                i0__namespace.ɵɵadvance();
                i0__namespace.ɵɵproperty("ngIf", ctx.selectedMediaIndex >= 0 && ctx.appendToBody());
            } }, dependencies: [i1__namespace.PictureDirective, i2__namespace.NgForOf, i2__namespace.NgIf, i2__namespace.NgTemplateOutlet, i2__namespace.NgStyle, i3__namespace.ImageCacheDirective, i4__namespace.MobileNavbarComponent, i5__namespace.ContentComponent, i5__namespace.PageContentComponent, MediaListItemDirective], encapsulation: 2 }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MediaListComponent, [{
            type: i0.Component,
            args: [{ selector: '[wmMediaList]', providers: [
                        base.provideAsWidgetRef(MediaListComponent)
                    ], template: "<ul class=\"list-unstyled list-inline app-media-thumbnail\">\n    <li *ngFor=\"let item of fieldDefs; index as index;\" [ngStyle]=\"{width: thumbnailwidth, height: thumbnailheight}\" (click)=\"showFullScreen(index)\">\n        <div class=\"thumbnail\">\n            <ng-container [ngTemplateOutlet]=\"imgTemplate\"\n                          [ngTemplateOutletContext]=\"{src: item.thumbnailUrlVal, class: 'thumbnail-image'}\"\n                          [ngTemplateOutletInjector]=\"createCustomInjector('thumbnail_' + index, {src: item.thumbnailUrlVal, class: 'thumbnail-image'})\">\n            </ng-container>\n            <div class=\"thumbnail-details\">\n                <ng-container [ngTemplateOutlet]=\"mediaListTemplate\"\n                              [ngTemplateOutletContext]=\"{item:item, index:index}\"\n                              [ngTemplateOutletInjector]=\"createCustomInjector('thumbnail_details_' + index, {item:item, index:index})\"\n                              [wmMediaListItem]=\"item\">\n                </ng-container>\n            </div>\n        </div>\n    </li>\n</ul>\n<div class=\"app-media-fullscreen\" *ngIf=\"selectedMediaIndex >= 0 && appendToBody()\">\n    <header wmMobileNavbar\n            backbutton=\"true\"\n            backbtnclick.event=\"exitFullScreen()\"\n            showLeftnavbtn=\"false\"\n            backbuttoniconclass.event=\"wi wi-chevron-left\"\n            title.bind=\"getPicTitle()\">\n    </header>\n    <div wmContent>\n        <div wmPageContent>\n            <div class=\"media-content\">\n                <div class=\"image-container\"  (swipeleft)=\"showNext()\" (swiperight)=\"showPrev()\">\n                    <ng-container [ngTemplateOutlet]=\"imgTemplate\"\n                                  [ngTemplateOutletContext]=\"{field: 'mediaUrlVal', class: 'center-block'}\"\n                                  [ngTemplateOutletInjector]=\"createCustomInjector('image_', {field: 'mediaUrlVal', class: 'center-block'})\">\n                    </ng-container>\n                    <a class=\"app-media-fullscreen-nav-control left\" [hidden]=\"!(selectedMediaIndex > 0)\" (click)=\"showPrev()\">\n                        <i class=\"wi wi-chevron-left\"></i>\n                    </a>\n                    <a class=\"app-media-fullscreen-nav-control right\" [hidden]=\"!(selectedMediaIndex < fieldDefs.length-1)\" (click)=\"showNext()\">\n                        <i class=\"wi wi-chevron-right\"></i>\n                    </a>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #imgTemplate let-src=\"src\" let-classname=\"class\" let-field=\"field\">\n    <img wmPicture class=\"{{classname}}\" picturesource.bind=\"src || getSrc(field)\" wmImageCache=\"{{offline}}\" />\n</ng-template>\n" }]
        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], { mediaListTemplate: [{
                type: i0.ContentChild,
                args: ['mediaListTemplate']
            }] }); })();
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(MediaListComponent, { className: "MediaListComponent", filePath: "media-list.component.ts", lineNumber: 31 }); })();

    const components = [
        MediaListItemDirective,
        MediaListComponent
    ];
    class MediaListModule {
        static { this.ɵfac = function MediaListModule_Factory(t) { return new (t || MediaListModule)(); }; }
        static { this.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: MediaListModule }); }
        static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i1.BasicModule,
                i2.CommonModule,
                i3.BasicModule,
                i4.MobileNavbarModule,
                i5.PageModule,
                base.WmComponentsModule] }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(MediaListModule, [{
            type: i0.NgModule,
            args: [{
                    imports: [
                        i1.BasicModule,
                        i2.CommonModule,
                        i3.BasicModule,
                        i4.MobileNavbarModule,
                        i5.PageModule,
                        base.WmComponentsModule
                    ],
                    declarations: [...components],
                    exports: [...components]
                }]
        }], null, null); })();
    (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(MediaListModule, { declarations: [MediaListItemDirective,
            MediaListComponent], imports: [i1.BasicModule,
            i2.CommonModule,
            i3.BasicModule,
            i4.MobileNavbarModule,
            i5.PageModule,
            base.WmComponentsModule], exports: [MediaListItemDirective,
            MediaListComponent] }); })();

    exports.MediaListComponent = MediaListComponent;
    exports.MediaListItemDirective = MediaListItemDirective;
    exports.MediaListModule = MediaListModule;

}));
