import * as i0 from '@angular/core';
import { Directive, Input, Component, Inject, Optional, ContentChild, NgModule } from '@angular/core';
import { provideAsWidgetRef, PROP_STRING, PROP_ANY, PROP_BOOLEAN, register, StylableComponent, APPLY_STYLES_TYPE, styler, getEvaluatedData, WmComponentsModule } from '@wm/components/base';
import { addClass, removeClass, $appDigest, isObject } from '@wm/core';
import { isArray, isString } from 'lodash-es';
import * as i1 from '@wm/components/basic';
import { BasicModule } from '@wm/components/basic';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@wm/mobile/components/basic';
import { BasicModule as BasicModule$1 } from '@wm/mobile/components/basic';
import * as i4 from '@wm/mobile/components/page/mobile-navbar';
import { MobileNavbarModule } from '@wm/mobile/components/page/mobile-navbar';
import * as i5 from '@wm/components/page';
import { PageModule } from '@wm/components/page';

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

const registerProps = () => {
    register('wm-media-list', new Map([
        ['class', PROP_STRING],
        ['dataset', PROP_ANY],
        ['layout', { value: 'Single-row', ...PROP_STRING }],
        ['mediaurl', PROP_STRING],
        ['name', PROP_STRING],
        ['offline', { value: true, ...PROP_BOOLEAN }],
        ['show', { value: true, ...PROP_BOOLEAN }],
        ['thumbnailheight', { value: '100pt', ...PROP_STRING }],
        ['thumbnailwidth', { value: '100pt', ...PROP_STRING }],
        ['thumbnailurl', 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.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li", 4);
    i0.ɵɵlistener("click", function MediaListComponent_li_1_Template_li_click_0_listener() { const index_r2 = i0.ɵɵrestoreView(_r1).index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showFullScreen(index_r2)); });
    i0.ɵɵelementStart(1, "div", 5);
    i0.ɵɵelementContainer(2, 6);
    i0.ɵɵelementStart(3, "div", 7);
    i0.ɵɵelementContainer(4, 8);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const item_r4 = ctx.$implicit;
    const index_r2 = ctx.index;
    const ctx_r2 = i0.ɵɵnextContext();
    const imgTemplate_r5 = i0.ɵɵreference(4);
    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction2(8, _c2, ctx_r2.thumbnailwidth, ctx_r2.thumbnailheight));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngTemplateOutlet", imgTemplate_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(11, _c3, item_r4.thumbnailUrlVal))("ngTemplateOutletInjector", ctx_r2.createCustomInjector("thumbnail_" + index_r2, i0.ɵɵpureFunction1(13, _c3, item_r4.thumbnailUrlVal)));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.mediaListTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(15, _c4, item_r4, index_r2))("ngTemplateOutletInjector", ctx_r2.createCustomInjector("thumbnail_details_" + index_r2, i0.ɵɵpureFunction2(18, _c4, item_r4, index_r2)))("wmMediaListItem", item_r4);
} }
function MediaListComponent_div_2_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 9);
    i0.ɵɵelement(1, "header", 10);
    i0.ɵɵelementStart(2, "div", 11)(3, "div", 12)(4, "div", 13)(5, "div", 14);
    i0.ɵɵlistener("swipeleft", function MediaListComponent_div_2_Template_div_swipeleft_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showNext()); })("swiperight", function MediaListComponent_div_2_Template_div_swiperight_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showPrev()); });
    i0.ɵɵelementContainer(6, 6);
    i0.ɵɵelementStart(7, "a", 15);
    i0.ɵɵlistener("click", function MediaListComponent_div_2_Template_a_click_7_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showPrev()); });
    i0.ɵɵelement(8, "i", 16);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(9, "a", 17);
    i0.ɵɵlistener("click", function MediaListComponent_div_2_Template_a_click_9_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showNext()); });
    i0.ɵɵelement(10, "i", 18);
    i0.ɵɵelementEnd()()()()()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    const imgTemplate_r5 = i0.ɵɵreference(4);
    i0.ɵɵadvance(6);
    i0.ɵɵproperty("ngTemplateOutlet", imgTemplate_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction0(5, _c5))("ngTemplateOutletInjector", ctx_r2.createCustomInjector("image_", i0.ɵɵpureFunction0(6, _c5)));
    i0.ɵɵadvance();
    i0.ɵɵproperty("hidden", !(ctx_r2.selectedMediaIndex > 0));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("hidden", !(ctx_r2.selectedMediaIndex < ctx_r2.fieldDefs.length - 1));
} }
function MediaListComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "img", 19);
} if (rf & 2) {
    const classname_r7 = ctx.class;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵclassMap(classname_r7);
    i0.ɵɵ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 StylableComponent {
    static { this.initializeProps = registerProps(); }
    constructor(inj, explicitContext) {
        super(inj, WIDGET_CONFIG, explicitContext);
        this.selectedMediaIndex = -1;
        styler(this.nativeElement, this, 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) {
                addClass(this.nativeElement, 'singlerow');
            }
            else {
                removeClass(this.nativeElement, 'singlerow');
            }
        }
        else {
            super.onPropertyChange(key, nv, ov);
        }
    }
    exitFullScreen() {
        this.selectedMediaIndex = -1;
        this.$fullScreenEle.appendTo(this.$element);
        this.$fullScreenEle = null;
        $appDigest();
    }
    getPicTitle() {
        return this.selectedMediaIndex + 1 + '/' + this.fieldDefs.length;
    }
    showFullScreen(i) {
        this.selectedMediaIndex = i;
        $appDigest();
    }
    showNext() {
        if (this.selectedMediaIndex < this.fieldDefs.length - 1) {
            this.selectedMediaIndex++;
            $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--;
            $appDigest();
        }
    }
    onDataChange(nv) {
        if (nv) {
            if (isObject(nv) && !isArray(nv)) {
                nv = [nv];
            }
            if (!this.binddataset) {
                if (isString(nv)) {
                    nv = nv.split(',');
                }
            }
            if (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 = getEvaluatedData(field, { field: this.mediaurl }, this.viewParent);
            field.thumbnailUrlVal = 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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MediaListComponent, selectors: [["", "wmMediaList", ""]], contentQueries: function MediaListComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
            i0.ɵɵcontentQuery(dirIndex, _c0, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mediaListTemplate = _t.first);
        } }, features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(MediaListComponent)
            ]), i0.ɵɵ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.ɵɵelementStart(0, "ul", 1);
            i0.ɵɵtemplate(1, MediaListComponent_li_1_Template, 5, 21, "li", 2);
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(2, MediaListComponent_div_2_Template, 11, 7, "div", 3)(3, MediaListComponent_ng_template_3_Template, 1, 4, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
        } if (rf & 2) {
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngForOf", ctx.fieldDefs);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.selectedMediaIndex >= 0 && ctx.appendToBody());
        } }, dependencies: [i1.PictureDirective, i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, i3.ImageCacheDirective, i4.MobileNavbarComponent, i5.ContentComponent, i5.PageContentComponent, MediaListItemDirective], encapsulation: 2 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MediaListComponent, [{
        type: Component,
        args: [{ selector: '[wmMediaList]', providers: [
                    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.Injector }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], { mediaListTemplate: [{
            type: ContentChild,
            args: ['mediaListTemplate']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵ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.ɵɵdefineNgModule({ type: MediaListModule }); }
    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [BasicModule,
            CommonModule,
            BasicModule$1,
            MobileNavbarModule,
            PageModule,
            WmComponentsModule] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MediaListModule, [{
        type: NgModule,
        args: [{
                imports: [
                    BasicModule,
                    CommonModule,
                    BasicModule$1,
                    MobileNavbarModule,
                    PageModule,
                    WmComponentsModule
                ],
                declarations: [...components],
                exports: [...components]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MediaListModule, { declarations: [MediaListItemDirective,
        MediaListComponent], imports: [BasicModule,
        CommonModule,
        BasicModule$1,
        MobileNavbarModule,
        PageModule,
        WmComponentsModule], exports: [MediaListItemDirective,
        MediaListComponent] }); })();

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

export { MediaListComponent, MediaListItemDirective, MediaListModule };
//# sourceMappingURL=index.mjs.map
