jpush-ui/menu/menu.component.js

极光大数据前端Angular组件（^6.1.0）

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
exports.PADDING_BASE = 24;
var MenuComponent = /** @class */ (function () {
    function MenuComponent() {
        this.hasSubMenu = false;
        this.subMenus = [];
        this.menuItems = [];
        this.subMenusOpenIndex = [];
        this._collapsed = false;
        this.isViewInit = false;
        // 模式（水平、垂直、内嵌）
        this.mode = 'horizontal';
        // 主题
        this.theme = 'light';
    }
    Object.defineProperty(MenuComponent.prototype, "collapsed", {
        get: 
        // 是否收缩（垂直、内嵌模式有效）
        function () {
            return this._collapsed;
        },
        set: function (value) {
            this._collapsed = value;
            if (!this.isViewInit) {
                return;
            }
            this.collapsedChange();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MenuComponent.prototype, "setRootMenuClass", {
        get: function () {
            return true;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MenuComponent.prototype, "setMenuHorizontalClass", {
        get: function () {
            return (this.mode === 'horizontal');
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MenuComponent.prototype, "setMenuVerticalClass", {
        get: function () {
            return (this.mode === 'vertical');
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MenuComponent.prototype, "setMenuInlineClass", {
        get: function () {
            return (this.mode === 'inline');
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MenuComponent.prototype, "setMenuThemeLightClass", {
        get: function () {
            return this.theme === 'light';
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MenuComponent.prototype, "setMenuThemeDarkClass", {
        get: function () {
            return this.theme === 'dark';
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(MenuComponent.prototype, "setMenuCollapsedClass", {
        get: function () {
            return (this.collapsed) && (this.mode !== 'horizontal');
        },
        enumerable: true,
        configurable: true
    });
    MenuComponent.prototype.ngAfterViewInit = function () {
        this.isViewInit = true;
        this.tempMode = this.mode;
        // 当默认就是收缩模式时，执行一次
        this.collapsedChange();
    };
    MenuComponent.prototype.setHasSubMenu = function (value) {
        var _this = this;
        setTimeout(function () {
            _this.hasSubMenu = value;
        }, 0);
    };
    MenuComponent.prototype.clearAllSelected = function () {
        this.menuItems.forEach(function (menu) { return menu.selected = false; });
    };
    MenuComponent.prototype.hideSubMenus = function () {
        var _this = this;
        this.subMenusOpenIndex = [];
        this.subMenus.forEach(function (submenu, index) {
            if (submenu.isOpen) {
                _this.subMenusOpenIndex.push(index);
            }
            submenu.isOpen = false;
        });
    };
    MenuComponent.prototype.showSubMenus = function () {
        var _this = this;
        this.subMenusOpenIndex.forEach(function (i) {
            _this.subMenus[i].isOpen = true;
        });
        this.subMenusOpenIndex = [];
    };
    MenuComponent.prototype.collapsedChange = function () {
        var _this = this;
        if (this._collapsed) {
            this.hideSubMenus();
            // after the animation is over
            setTimeout(function () { return _this.mode = 'vertical'; }, 150);
        }
        else {
            this.showSubMenus();
            this.mode = this.tempMode;
        }
    };
    MenuComponent.decorators = [
        { type: core_1.Component, args: [{
                    selector: '[jui-menu]',
                    template: "\n        <ng-content></ng-content>\n    ",
                    styles: ["\n      @font-face {\n        font-family: 'iconfont';\n        /* project id 290315 */\n        src: url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.eot\");\n        src: url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.eot?#iefix\") format(\"embedded-opentype\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.woff\") format(\"woff\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.ttf\") format(\"truetype\"), url(\"//at.alicdn.com/t/font_290315_x4r2fph1yvutbj4i.svg#iconfont\") format(\"svg\"); }\n\n      .iconfont {\n        display: inline-block;\n        vertical-align: baseline;\n        font-family: \"iconfont\" !important;\n        font-style: normal;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale; }\n\n      .icon-jui-alert:before {\n        content: \"\\e600\"; }\n\n      .icon-jui-search:before {\n        content: \"\\e630\"; }\n\n      .icon-jui-paper3:before {\n        content: \"\\e652\"; }\n\n      .icon-jui-setting:before {\n        content: \"\\e602\"; }\n\n      .icon-jui-left2:before {\n        content: \"\\e697\"; }\n\n      .icon-jui-wrong:before {\n        content: \"\\e69a\"; }\n\n      .icon-jui-up2:before {\n        content: \"\\e6a5\"; }\n\n      .icon-jui-down2:before {\n        content: \"\\e6a6\"; }\n\n      .icon-jui-right2:before {\n        content: \"\\e6a7\"; }\n\n      .icon-jui-correct2:before {\n        content: \"\\e627\"; }\n\n      .icon-jui-qq:before {\n        content: \"\\e63a\"; }\n\n      .icon-jui-email:before {\n        content: \"\\e62a\"; }\n\n      .icon-jui-edit:before {\n        content: \"\\e686\"; }\n\n      .icon-jui-download2:before {\n        content: \"\\e714\"; }\n\n      .icon-jui-speaker:before {\n        content: \"\\e85c\"; }\n\n      .icon-jui-add:before {\n        content: \"\\e609\"; }\n\n      .icon-jui-msg:before {\n        content: \"\\e613\"; }\n\n      .icon-jui-minus:before {\n        content: \"\\e601\"; }\n\n      .icon-jui-up:before {\n        content: \"\\e658\"; }\n\n      .icon-jui-letter-open:before {\n        content: \"\\e61d\"; }\n\n      .icon-jui-down:before {\n        content: \"\\ed22\"; }\n\n      .icon-jui-info:before {\n        content: \"\\e685\"; }\n\n      .icon-jui-cross2:before {\n        content: \"\\e6b4\"; }\n\n      .icon-jui-paper2:before {\n        content: \"\\e71e\"; }\n\n      .icon-jui-loading:before {\n        content: \"\\eee3\"; }\n\n      .icon-jui-road-sign:before {\n        content: \"\\e604\"; }\n\n      .icon-jui-left:before {\n        content: \"\\e66a\"; }\n\n      .icon-jui-letter:before {\n        content: \"\\e605\"; }\n\n      .icon-jui-right:before {\n        content: \"\\e64d\"; }\n\n      .icon-jui-back-top:before {\n        content: \"\\e628\"; }\n\n      .icon-jui-dropdown:before {\n        content: \"\\e75a\"; }\n\n      .icon-jui-down3:before {\n        content: \"\\e629\"; }\n\n      .icon-jui-alarm:before {\n        content: \"\\e6c2\"; }\n\n      .icon-jui-paper:before {\n        content: \"\\e612\"; }\n\n      .icon-jui-cross:before {\n        content: \"\\e6b0\"; }\n\n      .icon-jui-correct:before {\n        content: \"\\e6b3\"; }\n\n      .icon-jui-up3:before {\n        content: \"\\eee4\"; }\n\n      .icon-jui-username:before {\n        content: \"\\e670\"; }\n\n      .icon-jui-password:before {\n        content: \"\\e615\"; }\n\n      .icon-jui-slideLeft:before {\n        content: \"\\e603\"; }\n\n      .icon-jui-slideRight:before {\n        content: \"\\e641\"; }\n\n      /* icon Animate */\n      .icon-doTurn {\n        -webkit-animation: doTurn 1s infinite linear;\n        animation: doTurn 1s infinite linear; }\n\n      @-webkit-keyframes doTurn {\n        0% {\n          -webkit-transform-origin: 50% 50%;\n          -webkit-transform: rotate(0deg); }\n        to {\n          -webkit-transform-origin: 50% 50%;\n          -webkit-transform: rotate(1turn); } }\n\n      @keyframes doTurn {\n        0% {\n          transform-origin: 50% 50%;\n          transform: rotate(0deg); }\n        to {\n          transform-origin: 50% 50%;\n          transform: rotate(1turn); } }\n      @charset \"UTF-8\";\n      .jui-menu {\n        font-size: 14px;\n        z-index: 1050;\n        line-height: 46px;\n        list-style: none;\n        outline: none;\n        color: rgba(0, 0, 0, 0.65);\n        background: #fff;\n        transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);\n        /* \u7981\u7528 */\n        /* \u9009\u9879 */\n        /* \u7EC4\u5408\u9009\u9879 */\n        /* \u5B50\u83DC\u5355 */\n        /* \u6C34\u5E73 */\n        /* \u5782\u76F4 */\n        /* \u5185\u5D4C */ }\n        .jui-menu:after {\n          content: \" \";\n          display: block;\n          height: 0;\n          clear: both; }\n        .jui-menu a {\n          display: block;\n          color: rgba(0, 0, 0, 0.65); }\n          .jui-menu a:hover {\n            color: #108ee9;\n            text-decoration: none; }\n        .jui-menu .jui-menu-item-disabled, .jui-menu .jui-menu-submenu-disabled {\n          color: rgba(0, 0, 0, 0.25) !important;\n          cursor: not-allowed !important;\n          background: none;\n          border-color: transparent !important; }\n          .jui-menu .jui-menu-item-disabled a, .jui-menu .jui-menu-submenu-disabled a {\n            pointer-events: none;\n            color: rgba(0, 0, 0, 0.25) !important;\n            cursor: not-allowed !important; }\n          .jui-menu .jui-menu-item-disabled .jui-menu-submenu-title, .jui-menu .jui-menu-submenu-disabled .jui-menu-submenu-title {\n            cursor: not-allowed !important; }\n        .jui-menu .jui-menu-item, .jui-menu .jui-menu-submenu-title {\n          margin: 0;\n          padding: 0 20px;\n          position: relative;\n          display: block;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          cursor: pointer;\n          transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); }\n          .jui-menu .jui-menu-item .iconfont, .jui-menu .jui-menu-submenu-title .iconfont {\n            min-width: 14px;\n            margin-right: 8px;\n            transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }\n          .jui-menu .jui-menu-item .iconfont + span, .jui-menu .jui-menu-submenu-title .iconfont + span {\n            transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n            opacity: 1; }\n        .jui-menu .jui-menu-item-group .jui-menu-item-group-title {\n          color: rgba(0, 0, 0, 0.43);\n          line-height: 1.5;\n          padding: 8px 16px;\n          cursor: auto; }\n        .jui-menu .jui-menu-item-group .jui-menu-item-group-list {\n          margin: 0;\n          padding: 0; }\n          .jui-menu .jui-menu-item-group .jui-menu-item-group-list .jui-menu-item, .jui-menu .jui-menu-item-group .jui-menu-item-group-list .jui-menu-submenu-title {\n            padding: 0 16px 0 28px; }\n        .jui-menu .jui-menu-submenu {\n          position: relative;\n          cursor: pointer; }\n          .jui-menu .jui-menu-submenu .jui-menu-submenu-title .icon-more {\n            position: absolute;\n            top: 50%;\n            margin-top: -5px;\n            right: 6px;\n            font-size: 12px;\n            transform: rotate(0);\n            -webkit-transform: rotate(0);\n            transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }\n            .jui-menu .jui-menu-submenu .jui-menu-submenu-title .icon-more.active {\n              transform: rotate(180deg) !important;\n              -webkit-transform: rotate(180deg) !important; }\n        .jui-menu.jui-menu-horizontal {\n          border-bottom: 1px solid #e9e9e9; }\n          .jui-menu.jui-menu-horizontal > .jui-menu-item, .jui-menu.jui-menu-horizontal > .jui-menu-submenu {\n            position: relative;\n            float: left;\n            border-bottom: 2px solid transparent; }\n          .jui-menu.jui-menu-horizontal .jui-menu-submenu-horizontal > .jui-menu-submenu-title .icon-more {\n            right: -6px; }\n          .jui-menu.jui-menu-horizontal .jui-menu-submenu-horizontal > .jui-menu-submenu-sub {\n            border-radius: 4px;\n            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);\n            font-size: 12px;\n            top: 100%;\n            left: 0;\n            position: absolute;\n            min-width: 100%;\n            margin-top: 7px; }\n          .jui-menu.jui-menu-horizontal > .jui-menu-item:hover,\n          .jui-menu.jui-menu-horizontal > .jui-menu-submenu:hover,\n          .jui-menu.jui-menu-horizontal > .jui-menu-item-selected,\n          .jui-menu.jui-menu-horizontal > .jui-menu-submenu-selected {\n            border-bottom: 2px solid #108ee9;\n            color: #108ee9; }\n        .jui-menu.jui-menu-vertical {\n          border-right: 1px solid #e9e9e9; }\n          .jui-menu.jui-menu-vertical .jui-menu-submenu-vertical > .jui-menu-item, .jui-menu.jui-menu-vertical .jui-menu-submenu-vertical > .jui-menu-submenu-title {\n            padding: 0 16px;\n            line-height: 42px;\n            height: 42px;\n            overflow: hidden;\n            text-overflow: ellipsis; }\n          .jui-menu.jui-menu-vertical .jui-menu-submenu-vertical > .jui-menu-submenu-sub {\n            border-radius: 4px;\n            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);\n            font-size: 12px;\n            top: 0;\n            left: 100%;\n            position: absolute;\n            min-width: 160px;\n            margin-left: 4px; }\n        .jui-menu.jui-menu-inline {\n          border-right: 1px solid #e9e9e9; }\n          .jui-menu.jui-menu-inline .jui-menu-submenu-inline > .jui-menu-item, .jui-menu.jui-menu-inline .jui-menu-submenu-inline > .jui-menu-submenu-title {\n            padding: 0 16px;\n            line-height: 42px;\n            height: 42px;\n            overflow: hidden;\n            text-overflow: ellipsis; }\n          .jui-menu.jui-menu-inline .jui-menu-submenu-inline > .jui-menu-submenu-sub {\n            border: 0;\n            font-size: 12px; }\n          .jui-menu.jui-menu-inline .jui-menu-submenu-inline .jui-menu-item-group .jui-menu-item-group-title {\n            padding-left: 32px; }\n          .jui-menu.jui-menu-inline .jui-menu-item-selected {\n            background-color: #ecf6fd;\n            border-right: 3px solid #108ee9;\n            color: #108ee9; }\n        .jui-menu .jui-menu-item:hover,\n        .jui-menu .jui-menu-submenu-title:hover,\n        .jui-menu .jui-menu-item-selected,\n        .jui-menu .jui-menu-submenu-selected {\n          color: #108ee9; }\n\n      /* \u9ED1\u8272\u4E3B\u9898 */\n      .jui-menu-root.jui-menu-dark {\n        color: rgba(255, 255, 255, 0.5);\n        background: #404040; }\n        .jui-menu-root.jui-menu-dark a {\n          color: rgba(255, 255, 255, 0.5); }\n        .jui-menu-root.jui-menu-dark.jui-menu-inline, .jui-menu-root.jui-menu-dark.jui-menu-vertical, .jui-menu-root.jui-menu-dark .jui-menu-inline, .jui-menu-root.jui-menu-dark .jui-menu-vertical {\n          border-right: 0; }\n        .jui-menu-root.jui-menu-dark .jui-menu-item-disabled, .jui-menu-root.jui-menu-dark .jui-menu-submenu-disabled {\n          color: #6d6d6d !important; }\n        .jui-menu-root.jui-menu-dark .jui-menu-item-group .jui-menu-item-group-title {\n          color: rgba(255, 255, 255, 0.5); }\n        .jui-menu-root.jui-menu-dark .jui-menu-submenu-sub {\n          color: rgba(255, 255, 255, 0.5);\n          background: #333; }\n        .jui-menu-root.jui-menu-dark .jui-menu-item-selected {\n          border: 0;\n          background-color: #108ee9;\n          color: #fff; }\n        .jui-menu-root.jui-menu-dark .jui-menu-item:hover,\n        .jui-menu-root.jui-menu-dark .jui-menu-submenu:hover,\n        .jui-menu-root.jui-menu-dark .jui-menu-submenu-title:hover,\n        .jui-menu-root.jui-menu-dark .jui-menu-submenu-selected,\n        .jui-menu-root.jui-menu-dark .jui-menu-submenu-selected > .jui-menu-submenu-title i {\n          color: #fff; }\n\n      /* \u6536\u7F29\u6A21\u5F0F */\n      .jui-menu-root.jui-menu-collapsed {\n        width: 64px; }\n        .jui-menu-root.jui-menu-collapsed > .jui-menu-item,\n        .jui-menu-root.jui-menu-collapsed > .jui-menu-submenu > .jui-menu-submenu-title {\n          left: 0;\n          text-overflow: clip;\n          padding: 0 24px; }\n          .jui-menu-root.jui-menu-collapsed > .jui-menu-item .iconfont,\n          .jui-menu-root.jui-menu-collapsed > .jui-menu-submenu > .jui-menu-submenu-title .iconfont {\n            font-size: 16px;\n            line-height: 42px;\n            margin: 0; }\n          .jui-menu-root.jui-menu-collapsed > .jui-menu-item .iconfont + span,\n          .jui-menu-root.jui-menu-collapsed > .jui-menu-submenu > .jui-menu-submenu-title .iconfont + span {\n            max-width: 0;\n            display: inline-block;\n            opacity: 0; }\n          .jui-menu-root.jui-menu-collapsed > .jui-menu-item .icon-more,\n          .jui-menu-root.jui-menu-collapsed > .jui-menu-submenu > .jui-menu-submenu-title .icon-more {\n            display: none; }\n    "],
                    encapsulation: core_1.ViewEncapsulation.None
                },] },
    ];
    /** @nocollapse */
    MenuComponent.ctorParameters = function () { return []; };
    MenuComponent.propDecorators = {
        "mode": [{ type: core_1.Input },],
        "theme": [{ type: core_1.Input },],
        "collapsed": [{ type: core_1.Input },],
        "setRootMenuClass": [{ type: core_1.HostBinding, args: ['class.jui-menu',] }, { type: core_1.HostBinding, args: ['class.jui-menu-root',] },],
        "setMenuHorizontalClass": [{ type: core_1.HostBinding, args: ['class.jui-menu-horizontal',] },],
        "setMenuVerticalClass": [{ type: core_1.HostBinding, args: ['class.jui-menu-vertical',] },],
        "setMenuInlineClass": [{ type: core_1.HostBinding, args: ['class.jui-menu-inline',] },],
        "setMenuThemeLightClass": [{ type: core_1.HostBinding, args: ['class.jui-menu-light',] },],
        "setMenuThemeDarkClass": [{ type: core_1.HostBinding, args: ['class.jui-menu-dark',] },],
        "setMenuCollapsedClass": [{ type: core_1.HostBinding, args: ['class.jui-menu-collapsed',] },],
    };
    return MenuComponent;
}());
exports.MenuComponent = MenuComponent;
//# sourceMappingURL=menu.component.js.map