import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator';
import { ModulVue } from '../../../utils/vue/vue';
import { MIcon } from '../../icon/icon';
import WithRender from './steppers-item.html?style=./steppers-item.scss';
export var MSteppersItemState;
(function (MSteppersItemState) {
    MSteppersItemState["Visited"] = "visited";
    MSteppersItemState["InProgress"] = "in-progress";
    MSteppersItemState["Disabled"] = "disabled";
})(MSteppersItemState || (MSteppersItemState = {}));
var BaseSteppers = /** @class */ (function (_super) {
    __extends(BaseSteppers, _super);
    function BaseSteppers() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return BaseSteppers;
}(ModulVue));
export { BaseSteppers };
var MSteppersItem = /** @class */ (function (_super) {
    __extends(MSteppersItem, _super);
    function MSteppersItem() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    MSteppersItem.prototype.stateChanged = function (value) {
        if (this.$parent instanceof BaseSteppers) {
            this.$parent.setAnim(true);
            this.$parent.setLineWidth();
            this.$parent.setAnim(false);
        }
        this.$emit('update:value', this.state);
    };
    Object.defineProperty(MSteppersItem.prototype, "isVisited", {
        get: function () {
            return this.state === MSteppersItemState.Visited;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MSteppersItem.prototype, "isInProgress", {
        get: function () {
            return this.state === MSteppersItemState.InProgress;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MSteppersItem.prototype, "isDisabled", {
        get: function () {
            return this.state === MSteppersItemState.Disabled;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MSteppersItem.prototype, "isTabIndex", {
        get: function () {
            return this.isVisited ? 0 : -1;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MSteppersItem.prototype, "isLink", {
        get: function () {
            return !!this.url && this.isVisited;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MSteppersItem.prototype, "componentToShow", {
        get: function () {
            return this.isLink ? 'router-link' : 'div';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MSteppersItem.prototype, "role", {
        get: function () {
            return this.isLink || this.isDisabled ? undefined : 'button';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MSteppersItem.prototype, "propUrl", {
        get: function () {
            return this.isLink ? this.url : undefined;
        },
        enumerable: false,
        configurable: true
    });
    MSteppersItem.prototype.onClick = function (event) {
        if (this.isVisited) {
            this.$emit('click', event);
            this.$refs.title.blur();
        }
    };
    __decorate([
        Prop({
            default: MSteppersItemState.Disabled,
            validator: function (value) {
                return value === MSteppersItemState.Visited ||
                    value === MSteppersItemState.InProgress ||
                    value === MSteppersItemState.Disabled;
            }
        })
    ], MSteppersItem.prototype, "state", void 0);
    __decorate([
        Prop()
    ], MSteppersItem.prototype, "iconName", void 0);
    __decorate([
        Prop()
    ], MSteppersItem.prototype, "iconTitle", void 0);
    __decorate([
        Prop({ default: false })
    ], MSteppersItem.prototype, "completed", void 0);
    __decorate([
        Prop()
    ], MSteppersItem.prototype, "url", void 0);
    __decorate([
        Watch('state')
    ], MSteppersItem.prototype, "stateChanged", null);
    MSteppersItem = __decorate([
        WithRender,
        Component({
            components: {
                MIcon: MIcon
            }
        })
    ], MSteppersItem);
    return MSteppersItem;
}(ModulVue));
export { MSteppersItem };
//# sourceMappingURL=steppers-item.js.map