var _a;
import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Emit, Prop } from 'vue-property-decorator';
import { KeyCode } from '../../utils/keycode/keycode';
import { ModulVue } from '../../utils/vue/vue';
import { I18N_NAME, ICON_NAME, LINK_NAME } from '../component-names';
import { MI18n } from '../i18n/i18n';
import { MIcon } from '../icon/icon';
import WithRender from './link.html?style=./link.scss';
export var MLinkMode;
(function (MLinkMode) {
    MLinkMode["RouterLink"] = "router-link";
    MLinkMode["Link"] = "link";
    MLinkMode["Button"] = "button";
})(MLinkMode || (MLinkMode = {}));
export var MLinkIconPosition;
(function (MLinkIconPosition) {
    MLinkIconPosition["Left"] = "left";
    MLinkIconPosition["Right"] = "right";
})(MLinkIconPosition || (MLinkIconPosition = {}));
export var MLinkSkin;
(function (MLinkSkin) {
    MLinkSkin["Default"] = "default";
    MLinkSkin["Light"] = "light";
    MLinkSkin["Text"] = "text";
})(MLinkSkin || (MLinkSkin = {}));
var ICON_NAME_CHEVRON = 'm-svg__chevron--right';
var MLink = /** @class */ (function (_super) {
    __extends(MLink, _super);
    function MLink() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    MLink.prototype.emitClick = function (event) { };
    Object.defineProperty(MLink.prototype, "isRouterLink", {
        get: function () {
            return this.mode === MLinkMode.RouterLink;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "roleButton", {
        get: function () {
            return this.isButton ? 'button' : undefined;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "iconHasLargeStroke", {
        get: function () {
            switch (this.propIconName) {
                case 'm-svg__chevron--up':
                case 'm-svg__chevron--right':
                case 'm-svg__chevron--down':
                case 'm-svg__chevron--left':
                    return true;
                default:
                    return false;
            }
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "linkRef", {
        get: function () {
            return this.isRouterLink ? 'router' : 'link';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "isButton", {
        get: function () {
            return this.mode === MLinkMode.Button;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "isSkinText", {
        get: function () {
            return this.skin === MLinkSkin.Text;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "isSkinLight", {
        get: function () {
            return this.skin === MLinkSkin.Light;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "isUnvisited", {
        get: function () {
            return this.isButton ? true : this.unvisited;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "isIconPositionLeft", {
        get: function () {
            return this.hasIcon && this.iconPosition === MLinkIconPosition.Left;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "isIconPositionRight", {
        get: function () {
            return this.hasIcon && this.iconPosition === MLinkIconPosition.Right;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "hasIcon", {
        get: function () {
            return Boolean(this.propIconName) || this.bulletPoint;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "propIconSize", {
        get: function () {
            return this.bulletPoint ? '12px' : this.iconSize;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "propIconName", {
        get: function () {
            return this.bulletPoint ? ICON_NAME_CHEVRON : this.iconName;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "propUrl", {
        get: function () {
            switch (this.mode) {
                case MLinkMode.Link:
                    return !this.disabled ? this.url : undefined;
                case MLinkMode.Button:
                    return '#';
                case MLinkMode.RouterLink:
                default:
                    return undefined;
            }
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "routerLinkUrl", {
        get: function () {
            switch (this.mode) {
                case MLinkMode.Link:
                case MLinkMode.Button:
                    return undefined;
                case MLinkMode.RouterLink:
                default:
                    if (this.disabled || !this.url) {
                        return { path: '/' };
                    }
                    else {
                        return this.isObject(this.url) ? this.url : { path: this.url };
                    }
            }
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "isTargetBlank", {
        get: function () {
            return this.target === '_blank';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "routerEvent", {
        get: function () {
            if (!this.isRouterLink) {
                return undefined;
            }
            return this.disabled ? '' : 'click';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MLink.prototype, "tagName", {
        get: function () {
            return this.isRouterLink ? 'router-link' : 'a';
        },
        enumerable: false,
        configurable: true
    });
    MLink.prototype.isObject = function (a) {
        return !!a && a.constructor === Object;
    };
    MLink.prototype.onClick = function (event) {
        if (this.isButton || this.disabled) {
            event.preventDefault();
        }
        if (!this.disabled) {
            this.emitClick(event);
        }
    };
    MLink.prototype.onKeyup = function (event) {
        // tslint:disable-next-line: deprecation
        event = event || window.event;
        if (event.keyCode === KeyCode.M_SPACE && this.isButton) {
            this.onClick(event);
        }
    };
    __decorate([
        Prop({ default: '/' })
    ], MLink.prototype, "url", void 0);
    __decorate([
        Prop({
            default: MLinkMode.RouterLink,
            validator: function (value) {
                return value === MLinkMode.RouterLink ||
                    value === MLinkMode.Link ||
                    value === MLinkMode.Button;
            }
        })
    ], MLink.prototype, "mode", void 0);
    __decorate([
        Prop()
    ], MLink.prototype, "disabled", void 0);
    __decorate([
        Prop()
    ], MLink.prototype, "unvisited", void 0);
    __decorate([
        Prop({ default: true })
    ], MLink.prototype, "underline", void 0);
    __decorate([
        Prop({
            default: MLinkSkin.Default,
            validator: function (value) {
                return value === MLinkSkin.Default ||
                    value === MLinkSkin.Light ||
                    value === MLinkSkin.Text;
            }
        })
    ], MLink.prototype, "skin", void 0);
    __decorate([
        Prop()
    ], MLink.prototype, "target", void 0);
    __decorate([
        Prop()
    ], MLink.prototype, "bulletPoint", void 0);
    __decorate([
        Prop()
    ], MLink.prototype, "iconName", void 0);
    __decorate([
        Prop({
            default: MLinkIconPosition.Left,
            validator: function (value) {
                return value === MLinkIconPosition.Left || value === MLinkIconPosition.Right;
            }
        })
    ], MLink.prototype, "iconPosition", void 0);
    __decorate([
        Prop({ default: '1em' })
    ], MLink.prototype, "iconSize", void 0);
    __decorate([
        Prop({ default: '0' })
    ], MLink.prototype, "tabindex", void 0);
    __decorate([
        Emit('click')
    ], MLink.prototype, "emitClick", null);
    MLink = __decorate([
        WithRender,
        Component({
            components: (_a = {},
                _a[ICON_NAME] = MIcon,
                _a[I18N_NAME] = MI18n,
                _a)
        })
    ], MLink);
    return MLink;
}(ModulVue));
export { MLink };
var LinkPlugin = {
    install: function (v, options) {
        v.component(LINK_NAME, MLink);
    }
};
export default LinkPlugin;
//# sourceMappingURL=link.js.map