(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('@angular/common')) :
    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@wm/components/base', '@wm/core', 'lodash-es', '@angular/common'], 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.containers = global.wm.mobile.components.containers || {}, global.wm.mobile.components.containers.segmentedcontrol = {}), global.ng.core, global.wm.components.base, global.wm.core, global._, global.ng.common));
})(this, (function (exports, i0, base, core, lodashEs, i1) { '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);

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

    const _c0$1 = ["wmSegmentedControl", ""];
    const _c1$1 = ["*"];
    const _c2 = a0 => ({ "active btn-primary": a0 });
    function SegmentedControlComponent_a_4_Template(rf, ctx) { if (rf & 1) {
        const _r1 = i0__namespace.ɵɵgetCurrentView();
        i0__namespace.ɵɵelementStart(0, "a", 4);
        i0__namespace.ɵɵlistener("click", function SegmentedControlComponent_a_4_Template_a_click_0_listener($event) { const i_r2 = i0__namespace.ɵɵrestoreView(_r1).index; const ctx_r2 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r2.showContent(i_r2, $event)); });
        i0__namespace.ɵɵelement(1, "i", 5);
        i0__namespace.ɵɵtext(2);
        i0__namespace.ɵɵelementEnd();
    } if (rf & 2) {
        const content_r4 = ctx.$implicit;
        const i_r2 = ctx.index;
        const ctx_r2 = i0__namespace.ɵɵnextContext();
        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(4, _c2, i_r2 == ctx_r2.currentSelectedIndex));
        i0__namespace.ɵɵattribute("aria-label", content_r4.caption);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵproperty("ngClass", content_r4.iconclass);
        i0__namespace.ɵɵadvance();
        i0__namespace.ɵɵtextInterpolate1("", content_r4.caption, " ");
    } }
    const DEFAULT_CLS$1 = 'app-segmented-control';
    const WIDGET_CONFIG$1 = { widgetType: 'wm-segmented-control', hostClass: DEFAULT_CLS$1 };
    class SegmentedControlComponent extends base.StylableComponent {
        static { this.initializeProps = registerProps$1(); }
        constructor(inj, explicitContext) {
            super(inj, WIDGET_CONFIG$1, explicitContext);
            this.contents = [];
            this.currentSelectedIndex = 0;
            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.SCROLLABLE_CONTAINER);
        }
        addContent(content) {
            this.contents.push(content);
        }
        goToNext() {
            this.showContent(this.currentSelectedIndex + 1);
        }
        goToPrev() {
            this.showContent(this.currentSelectedIndex - 1);
        }
        ngAfterViewInit() {
            this._$container = this.$element.find('>.app-segments-container');
            const childEls = this._$container.find('>.list-inline >li');
            const maxWidth = `${this.contents.length * 100}%`;
            core.setCSSFromObj(this._$container[0], {
                maxWidth: maxWidth,
                width: maxWidth,
                'white-space': 'nowrap',
                transition: 'transform 0.2s linear'
            });
            const width = `${100 / this.contents.length}%`;
            for (const child of Array.from(childEls)) {
                core.setCSS(child, 'width', width);
            }
            this.showContent(0, undefined, true);
        }
        onPropertyChange(key, nv, ov) {
            if (key === 'tabindex') {
                return;
            }
            else {
                super.onPropertyChange(key, nv, ov);
            }
        }
        removeContent(content) {
            const index = this.contents.findIndex(c => {
                return c === content;
            });
            if (index >= 0) {
                this.contents.splice(index, 1);
                if (index < this.contents.length) {
                    this.showContent(index);
                }
                else if (this.contents.length > 0) {
                    this.showContent(0);
                }
            }
        }
        showContent(content, $event, defaultLoad) {
            let index;
            let selectedContent;
            if (lodashEs.isNumber(content)) {
                index = content;
                if (this.contents.length) {
                    selectedContent = this.contents[index];
                }
            }
            else {
                selectedContent = content;
                index = this.contents.findIndex(c => {
                    return c === content;
                });
            }
            if (selectedContent) {
                selectedContent.loadContent(defaultLoad);
            }
            if (index < 0 || index >= this.contents.length) {
                return;
            }
            if ($event) {
                $event.stopPropagation();
            }
            const eventData = {
                $old: this.currentSelectedIndex,
                $new: index
            };
            this.currentSelectedIndex = index;
            this.invokeEventCallback('beforesegmentchange', eventData);
            core.setCSS(this._$container[0], 'transform', `translate3d(${-1 * index / this.contents.length * 100}%, 0, 0)`);
            this.invokeEventCallback('segmentchange', eventData);
        }
        static { this.ɵfac = function SegmentedControlComponent_Factory(t) { return new (t || SegmentedControlComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: SegmentedControlComponent, selectors: [["", "wmSegmentedControl", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAsWidgetRef(SegmentedControlComponent)
                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$1, ngContentSelectors: _c1$1, decls: 5, vars: 1, consts: [[1, "app-segments-container"], [1, "list-inline"], [1, "btn-group", "btn-group-justified"], ["class", "btn btn-default", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "btn", "btn-default", 3, "click", "ngClass"], [1, "app-icon", 3, "ngClass"]], template: function SegmentedControlComponent_Template(rf, ctx) { if (rf & 1) {
                i0__namespace.ɵɵprojectionDef();
                i0__namespace.ɵɵelementStart(0, "div", 0)(1, "ul", 1);
                i0__namespace.ɵɵprojection(2);
                i0__namespace.ɵɵelementEnd()();
                i0__namespace.ɵɵelementStart(3, "div", 2);
                i0__namespace.ɵɵtemplate(4, SegmentedControlComponent_a_4_Template, 3, 6, "a", 3);
                i0__namespace.ɵɵelementEnd();
            } if (rf & 2) {
                i0__namespace.ɵɵadvance(4);
                i0__namespace.ɵɵproperty("ngForOf", ctx.contents);
            } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf], encapsulation: 2 }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SegmentedControlComponent, [{
            type: i0.Component,
            args: [{ selector: '[wmSegmentedControl]', providers: [
                        base.provideAsWidgetRef(SegmentedControlComponent)
                    ], template: "<div class=\"app-segments-container\">\n    <ul class=\"list-inline\">\n        <ng-content></ng-content>\n    </ul>\n    </div>\n<div class=\"btn-group btn-group-justified\">\n    <a class=\"btn btn-default\" *ngFor=\"let content of contents; index as i\"\n       [ngClass]=\"{'active btn-primary' : i == currentSelectedIndex}\"\n       (click)=\"showContent(i, $event);\" [attr.aria-label]=\"content.caption\">\n        <i class=\"app-icon\" [ngClass]=\"content.iconclass\"></i>{{content.caption}}\n    </a>\n</div>\n" }]
        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], null); })();
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(SegmentedControlComponent, { className: "SegmentedControlComponent", filePath: "segmented-control.component.ts", lineNumber: 20 }); })();

    const registerProps = () => {
        base.register('wm-segment-content', new Map([
            ['caption', { value: '', ...base.PROP_STRING }],
            ['class', base.PROP_STRING],
            ['content', base.PROP_STRING],
            ['iconclass', { value: '', ...base.PROP_STRING }],
            ['loadmode', base.PROP_STRING],
            ['loaddelay', { value: 10, ...base.PROP_NUMBER }],
            ['name', base.PROP_STRING],
            ['show', { value: true, ...base.PROP_BOOLEAN }]
        ]));
    };

    const _c0 = ["wmSegmentContent", ""];
    const _c1 = ["*"];
    function SegmentContentComponent_ng_content_0_Template(rf, ctx) { if (rf & 1) {
        i0__namespace.ɵɵprojection(0, 0, ["*ngIf", "compile"]);
    } }
    const DEFAULT_CLS = 'app-segment-content clearfix';
    const WIDGET_CONFIG = { widgetType: 'wm-segment-content', hostClass: DEFAULT_CLS };
    class SegmentContentComponent extends base.StylableComponent {
        static { this.initializeProps = registerProps(); }
        constructor(segmentedControl, inj, explicitContext) {
            super(inj, WIDGET_CONFIG, explicitContext);
            this.segmentedControl = segmentedControl;
            this.compile = false;
            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.SCROLLABLE_CONTAINER);
            segmentedControl.addContent(this);
        }
        ngAfterViewInit() {
            // load the content on demand when loadmode is not specified
            if (!this.loadmode) {
                this.loadContent(true);
            }
        }
        navigate() {
            this.segmentedControl.showContent(this);
        }
        // sets the compile flag to load the content
        _loadContent() {
            if (!this.compile) {
                this.compile = true;
                this.invokeEventCallback('ready');
            }
        }
        loadContent(defaultLoad) {
            if (this.loadmode === 'after-delay' || defaultLoad) {
                setTimeout(this._loadContent.bind(this), defaultLoad ? 0 : this.loaddelay);
            }
            else {
                this._loadContent();
            }
        }
        static { this.ɵfac = function SegmentContentComponent_Factory(t) { return new (t || SegmentContentComponent)(i0__namespace.ɵɵdirectiveInject(SegmentedControlComponent), i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: SegmentContentComponent, selectors: [["", "wmSegmentContent", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                    base.provideAsWidgetRef(SegmentContentComponent)
                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [[4, "ngIf"]], template: function SegmentContentComponent_Template(rf, ctx) { if (rf & 1) {
                i0__namespace.ɵɵprojectionDef();
                i0__namespace.ɵɵtemplate(0, SegmentContentComponent_ng_content_0_Template, 1, 0, "ng-content", 0);
            } if (rf & 2) {
                i0__namespace.ɵɵproperty("ngIf", ctx.compile);
            } }, dependencies: [i1__namespace.NgIf], encapsulation: 2 }); }
    }
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SegmentContentComponent, [{
            type: i0.Component,
            args: [{ selector: '[wmSegmentContent]', providers: [
                        base.provideAsWidgetRef(SegmentContentComponent)
                    ], template: "<ng-content *ngIf=\"compile\"></ng-content>" }]
        }], () => [{ type: SegmentedControlComponent }, { type: i0__namespace.Injector }, { type: undefined, decorators: [{
                    type: i0.Inject,
                    args: ['EXPLICIT_CONTEXT']
                }, {
                    type: i0.Optional
                }] }], null); })();
    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(SegmentContentComponent, { className: "SegmentContentComponent", filePath: "segment-content/segment-content.component.ts", lineNumber: 18 }); })();

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

    exports.SegmentContentComponent = SegmentContentComponent;
    exports.SegmentedControlComponent = SegmentedControlComponent;
    exports.SegmentedControlModule = SegmentedControlModule;

}));
