import * as i0 from '@angular/core';
import { Component, Inject, Optional, NgModule } from '@angular/core';
import { PROP_STRING, PROP_BOOLEAN, register, StylableComponent, APPLY_STYLES_TYPE, styler, provideAsWidgetRef, PROP_NUMBER, WmComponentsModule } from '@wm/components/base';
import { setCSSFromObj, setCSS } from '@wm/core';
import { isNumber } from 'lodash-es';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';

const registerProps$1 = () => {
    register('wm-segmented-control', new Map([
        ['class', PROP_STRING],
        ['name', PROP_STRING],
        ['show', { value: true, ...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.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "a", 4);
    i0.ɵɵlistener("click", function SegmentedControlComponent_a_4_Template_a_click_0_listener($event) { const i_r2 = i0.ɵɵrestoreView(_r1).index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showContent(i_r2, $event)); });
    i0.ɵɵelement(1, "i", 5);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const content_r4 = ctx.$implicit;
    const i_r2 = ctx.index;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c2, i_r2 == ctx_r2.currentSelectedIndex));
    i0.ɵɵattribute("aria-label", content_r4.caption);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", content_r4.iconclass);
    i0.ɵɵadvance();
    i0.ɵɵ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 StylableComponent {
    static { this.initializeProps = registerProps$1(); }
    constructor(inj, explicitContext) {
        super(inj, WIDGET_CONFIG$1, explicitContext);
        this.contents = [];
        this.currentSelectedIndex = 0;
        styler(this.nativeElement, this, 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}%`;
        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)) {
            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 (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);
        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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SegmentedControlComponent, selectors: [["", "wmSegmentedControl", ""]], features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(SegmentedControlComponent)
            ]), i0.ɵɵ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.ɵɵprojectionDef();
            i0.ɵɵelementStart(0, "div", 0)(1, "ul", 1);
            i0.ɵɵprojection(2);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(3, "div", 2);
            i0.ɵɵtemplate(4, SegmentedControlComponent_a_4_Template, 3, 6, "a", 3);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵadvance(4);
            i0.ɵɵproperty("ngForOf", ctx.contents);
        } }, dependencies: [i1.NgClass, i1.NgForOf], encapsulation: 2 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SegmentedControlComponent, [{
        type: Component,
        args: [{ selector: '[wmSegmentedControl]', providers: [
                    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.Injector }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SegmentedControlComponent, { className: "SegmentedControlComponent", filePath: "segmented-control.component.ts", lineNumber: 20 }); })();

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

const _c0 = ["wmSegmentContent", ""];
const _c1 = ["*"];
function SegmentContentComponent_ng_content_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵ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 StylableComponent {
    static { this.initializeProps = registerProps(); }
    constructor(segmentedControl, inj, explicitContext) {
        super(inj, WIDGET_CONFIG, explicitContext);
        this.segmentedControl = segmentedControl;
        this.compile = false;
        styler(this.nativeElement, this, 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.ɵɵdirectiveInject(SegmentedControlComponent), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SegmentContentComponent, selectors: [["", "wmSegmentContent", ""]], features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(SegmentContentComponent)
            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [[4, "ngIf"]], template: function SegmentContentComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵprojectionDef();
            i0.ɵɵtemplate(0, SegmentContentComponent_ng_content_0_Template, 1, 0, "ng-content", 0);
        } if (rf & 2) {
            i0.ɵɵproperty("ngIf", ctx.compile);
        } }, dependencies: [i1.NgIf], encapsulation: 2 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SegmentContentComponent, [{
        type: Component,
        args: [{ selector: '[wmSegmentContent]', providers: [
                    provideAsWidgetRef(SegmentContentComponent)
                ], template: "<ng-content *ngIf=\"compile\"></ng-content>" }]
    }], () => [{ type: SegmentedControlComponent }, { type: i0.Injector }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵ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.ɵɵdefineNgModule({ type: SegmentedControlModule }); }
    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
            WmComponentsModule] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SegmentedControlModule, [{
        type: NgModule,
        args: [{
                imports: [
                    CommonModule,
                    WmComponentsModule
                ],
                declarations: [...components],
                exports: [...components]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SegmentedControlModule, { declarations: [SegmentedControlComponent,
        SegmentContentComponent], imports: [CommonModule,
        WmComponentsModule], exports: [SegmentedControlComponent,
        SegmentContentComponent] }); })();

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

export { SegmentContentComponent, SegmentedControlComponent, SegmentedControlModule };
//# sourceMappingURL=index.mjs.map
