element-angular - npm Package Compare versions

Comparing version 0.6.7 to 0.7.0

package.json

 {
   "name": "element-angular",
-  "version": "0.6.7",
+  "version": "0.7.0",
   "description": "element ui for angular",
@@ -5,0 +5,0 @@ "main": "./release/element-angular.module.js",

release/select/option.js

@@ -40,3 +40,8 @@ import { Component, Input, Optional } from '@angular/core';
         var /** @type {?} */ updateHandle = function () {
-            _this.itemSelected = _this.value === _this.rootSelect.model;
+            if (_this.rootSelect.multiple) {
+                _this.itemSelected = Array.isArray(_this.rootSelect.model) && _this.rootSelect.model.indexOf(_this.value) > -1;
+            }
+            else {
+                _this.itemSelected = _this.value === _this.rootSelect.model;
+            }
             _this.itemSelected && _this.rootSelect.changeLabel(_this.label);
@@ -43,0 +48,0 @@ };

release/select/select-props.d.ts

@@ -9,2 +9,3 @@ import { EventEmitter } from '@angular/core';
     placeholder: string;
+    multiple: boolean;
     popperClass: string;
@@ -11,0 +12,0 @@ model: any;

release/select/select-props.js

@@ -7,4 +7,3 @@ import { EventEmitter, Input, Output } from '@angular/core';
         this.placeholder = '请选择';
-        // bind value
-        this.model = '';
+        this.multiple = false;
         this.modelChange = new EventEmitter();
@@ -30,2 +29,3 @@ }
         'placeholder': [{ type: Input },],
+        'multiple': [{ type: Input },],
         'popperClass': [{ type: Input, args: ['popper-class',] },],
@@ -52,2 +52,4 @@ 'model': [{ type: Input },],
     /** @type {?} */
+    ElSelectPoprs.prototype.multiple;
+    /** @type {?} */
     ElSelectPoprs.prototype.popperClass;
@@ -54,0 +56,0 @@ /** @type {?} */

release/select/select-props.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ElSelectPoprs":{"__symbolic":"class","members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"elDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clearable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popperClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["popper-class"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"ElSelectPoprs":{"__symbolic":"class","members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"elDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clearable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popperClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["popper-class"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ElSelectPoprs":{"__symbolic":"class","members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"elDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clearable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popperClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["popper-class"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"ElSelectPoprs":{"__symbolic":"class","members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"elDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clearable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popperClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["popper-class"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}]}}}}]

release/select/select.d.ts

@@ -7,4 +7,8 @@ import { OnInit, ElementRef, Renderer2, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
     private renderer;
+    tags: any;
+    input: any;
     selfWidth: string;
     subscriber: Function[];
+    multipleLabels: Array<string | number>;
+    multiplePlaceholder: string;
     dropdownActive: boolean;
@@ -27,2 +31,4 @@ selectedLabel: string | number;
     private controlTouch;
+    private updateLayoutWithMultipleMode();
+    private updateValueWithMultipleMode(nextLabel, nextValue?);
 }

release/select/select.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-import { Component, ElementRef, Renderer2, forwardRef, } from '@angular/core';
+import { Component, ElementRef, Renderer2, forwardRef, ViewChild, } from '@angular/core';
 import { ElSelectPoprs } from './select-props';
@@ -26,2 +26,4 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
         _this.subscriber = [];
+        _this.multipleLabels = [];
+        _this.multiplePlaceholder = _this.placeholder;
         _this.dropdownActive = false;
@@ -39,2 +41,3 @@ _this.iconClass = 'arrow-up';
         if (isEnter === void 0) { isEnter = false; }
+        this.clearable = this.clearable && !this.multiple;
         if (!this.clearable || !this.model)
@@ -49,2 +52,3 @@ return;
     ElSelect.prototype.toggleHandle = function (event) {
+        this.clearable = this.clearable && !this.multiple;
         if (this.elDisabled)
@@ -62,2 +66,3 @@ return;
     ElSelect.prototype.clearSelected = function (event) {
+        this.clearable = this.clearable && !this.multiple;
         if (!this.clearable)
@@ -86,8 +91,14 @@ return;
         // only update label
-        this.selectedLabel = nextLabel;
+        this.selectedLabel = this.multiple ? '' : nextLabel;
         if (!nextValue || this.model === nextValue)
             return;
-        this.model = nextValue;
-        this.modelChange.emit(nextValue);
-        this.controlChange(nextValue);
+        if (this.multiple) {
+            this.updateValueWithMultipleMode(nextLabel, nextValue);
+            this.updateLayoutWithMultipleMode();
+        }
+        else {
+            this.model = nextValue;
+        }
+        this.modelChange.emit(this.model);
+        this.controlChange(this.model);
         this.subscriber.forEach(function (sub) { return sub(); });
@@ -154,2 +165,47 @@ };
     };
+    /**
+     * @return {?}
+     */
+    ElSelect.prototype.updateLayoutWithMultipleMode = function () {
+        var _this = this;
+        var /** @type {?} */ updateHandle = function () {
+            if (!_this.tags)
+                return;
+            var /** @type {?} */ children = _this.tags.nativeElement && _this.tags.nativeElement.children;
+            var /** @type {?} */ inputEl = _this.input.el.nativeElement;
+            if (!children || !children.length || !inputEl)
+                return;
+            var /** @type {?} */ inputWidth = inputEl.getBoundingClientRect().width;
+            var /** @type {?} */ unit = inputWidth - 34;
+            var /** @type {?} */ row = 1;
+            Array.from(children).reduce(function (count, el) {
+                var /** @type {?} */ currentWidth = el.getBoundingClientRect().width || 80;
+                if (count + currentWidth < unit)
+                    return count + currentWidth;
+                // add a row
+                row++;
+                return currentWidth;
+            }, 0);
+            var /** @type {?} */ el = inputEl.querySelector('.el-input__inner');
+            _this.renderer.setStyle(el, 'height', Math.ceil(row) * 40 + "px");
+        };
+        var /** @type {?} */ timer = window.setTimeout(function () {
+            updateHandle();
+            clearTimeout(timer);
+        }, 0);
+    };
+    /**
+     * @param {?} nextLabel
+     * @param {?=} nextValue
+     * @return {?}
+     */
+    ElSelect.prototype.updateValueWithMultipleMode = function (nextLabel, nextValue) {
+        this.model = Array.isArray(this.model)
+            ? (this.model.indexOf(nextValue) > -1 ? this.model.filter(function (v) { return v !== nextValue; }) : this.model.concat(nextValue))
+            : [nextValue];
+        this.multipleLabels = !nextLabel || this.multipleLabels.indexOf(nextLabel) > -1
+            ? this.multipleLabels.filter(function (v) { return v !== nextLabel; })
+            : this.multipleLabels.concat(nextLabel);
+        this.multiplePlaceholder = this.model.length ? '' : this.placeholder;
+    };
     ElSelect.decorators = [
@@ -163,4 +219,4 @@ { type: Component, args: [{
                         }],
-                    styles: ['.el-select-dropdown__list { overflow: hidden; }'],
-                    template: "\n    <div class=\"el-select\" (click)=\"toggleHandle($event)\">\n      <el-input [model]=\"selectedLabel\" [placeholder]=\"placeholder\" [icon]=\"iconClass\"\n        iconClass=\"el-select__caret\"\n        [name]=\"name\" [size]=\"size\" [elDisabled]=\"elDisabled\" [readonly]=\"true\"\n        (mouseenter)=\"mouseHandle(true)\" (mouseleave)=\"mouseHandle(false)\"\n        (icon-click)=\"clearSelected($event)\">\n      </el-input>\n      <ng-container>\n        <el-select-dropdown [isActived]=\"dropdownActive\">\n          <ul class=\"el-scrollbar__view el-select-dropdown__list\">\n            <ng-content></ng-content>\n          </ul>\n        </el-select-dropdown>\n      </ng-container>\n    </div>\n  ",
+                    styles: ["\n    .el-select-dropdown__list { overflow: hidden; }\n    .el-select__tags__padding { padding-right: 30px; }\n  "],
+                    template: "\n    <div class=\"el-select\" (click)=\"toggleHandle($event)\">\n      <div class=\"el-select__tags el-select__tags__padding\" *ngIf=\"multiple && model && model.length\" #tags>\n        <el-tag *ngFor=\"let tag of multipleLabels; let i = index\"\n          [closable]=\"!elDisabled\"\n          [size]=\"size\"\n          (close)=\"$event.stopPropagation();changeLabel(tag, model[i])\"\n          type=\"info\">{{tag}}</el-tag>\n      </div>\n      \n      <el-input iconClass=\"el-select__caret\" #input\n        [model]=\"selectedLabel\"\n        [placeholder]=\"multiplePlaceholder\"\n        [icon]=\"iconClass\"\n        [name]=\"name\"\n        [size]=\"size\"\n        [elDisabled]=\"elDisabled\" [readonly]=\"true\"\n        (mouseenter)=\"mouseHandle(true)\" (mouseleave)=\"mouseHandle(false)\"\n        (icon-click)=\"clearSelected($event)\">\n      </el-input>\n      <ng-container>\n        <el-select-dropdown [isActived]=\"dropdownActive\">\n          <ul class=\"el-scrollbar__view el-select-dropdown__list\">\n            <ng-content></ng-content>\n          </ul>\n        </el-select-dropdown>\n      </ng-container>\n    </div>\n  ",
                 },] },
@@ -175,2 +231,6 @@ ];
     ]; };
+    ElSelect.propDecorators = {
+        'tags': [{ type: ViewChild, args: ['tags',] },],
+        'input': [{ type: ViewChild, args: ['input',] },],
+    };
     return ElSelect;
@@ -188,2 +248,8 @@ }(ElSelectPoprs));
     /** @type {?} */
+    ElSelect.propDecorators;
+    /** @type {?} */
+    ElSelect.prototype.tags;
+    /** @type {?} */
+    ElSelect.prototype.input;
+    /** @type {?} */
     ElSelect.prototype.selfWidth;
@@ -193,2 +259,6 @@ /** @type {?} */
     /** @type {?} */
+    ElSelect.prototype.multipleLabels;
+    /** @type {?} */
+    ElSelect.prototype.multiplePlaceholder;
+    /** @type {?} */
     ElSelect.prototype.dropdownActive;
@@ -195,0 +265,0 @@ /** @type {?} */

release/select/select.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ElSelect":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./select-props","name":"ElSelectPoprs"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"el-select","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"ElSelect"},"multi":true}],"styles":[".el-select-dropdown__list { overflow: hidden; }"],"template":"\n    <div class=\"el-select\" (click)=\"toggleHandle($event)\">\n      <el-input [model]=\"selectedLabel\" [placeholder]=\"placeholder\" [icon]=\"iconClass\"\n        iconClass=\"el-select__caret\"\n        [name]=\"name\" [size]=\"size\" [elDisabled]=\"elDisabled\" [readonly]=\"true\"\n        (mouseenter)=\"mouseHandle(true)\" (mouseleave)=\"mouseHandle(false)\"\n        (icon-click)=\"clearSelected($event)\">\n      </el-input>\n      <ng-container>\n        <el-select-dropdown [isActived]=\"dropdownActive\">\n          <ul class=\"el-scrollbar__view el-select-dropdown__list\">\n            <ng-content></ng-content>\n          </ul>\n        </el-select-dropdown>\n      </ng-container>\n    </div>\n  "}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"mouseHandle":[{"__symbolic":"method"}],"toggleHandle":[{"__symbolic":"method"}],"clearSelected":[{"__symbolic":"method"}],"changeLabel":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ElSelect":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./select-props","name":"ElSelectPoprs"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"el-select","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"ElSelect"},"multi":true}],"styles":[".el-select-dropdown__list { overflow: hidden; }"],"template":"\n    <div class=\"el-select\" (click)=\"toggleHandle($event)\">\n      <el-input [model]=\"selectedLabel\" [placeholder]=\"placeholder\" [icon]=\"iconClass\"\n        iconClass=\"el-select__caret\"\n        [name]=\"name\" [size]=\"size\" [elDisabled]=\"elDisabled\" [readonly]=\"true\"\n        (mouseenter)=\"mouseHandle(true)\" (mouseleave)=\"mouseHandle(false)\"\n        (icon-click)=\"clearSelected($event)\">\n      </el-input>\n      <ng-container>\n        <el-select-dropdown [isActived]=\"dropdownActive\">\n          <ul class=\"el-scrollbar__view el-select-dropdown__list\">\n            <ng-content></ng-content>\n          </ul>\n        </el-select-dropdown>\n      </ng-container>\n    </div>\n  "}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"mouseHandle":[{"__symbolic":"method"}],"toggleHandle":[{"__symbolic":"method"}],"clearSelected":[{"__symbolic":"method"}],"changeLabel":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ElSelect":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./select-props","name":"ElSelectPoprs"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"el-select","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"ElSelect"},"multi":true}],"styles":["\n    .el-select-dropdown__list { overflow: hidden; }\n    .el-select__tags__padding { padding-right: 30px; }\n  "],"template":"\n    <div class=\"el-select\" (click)=\"toggleHandle($event)\">\n      <div class=\"el-select__tags el-select__tags__padding\" *ngIf=\"multiple && model && model.length\" #tags>\n        <el-tag *ngFor=\"let tag of multipleLabels; let i = index\"\n          [closable]=\"!elDisabled\"\n          [size]=\"size\"\n          (close)=\"$event.stopPropagation();changeLabel(tag, model[i])\"\n          type=\"info\">{{tag}}</el-tag>\n      </div>\n      \n      <el-input iconClass=\"el-select__caret\" #input\n        [model]=\"selectedLabel\"\n        [placeholder]=\"multiplePlaceholder\"\n        [icon]=\"iconClass\"\n        [name]=\"name\"\n        [size]=\"size\"\n        [elDisabled]=\"elDisabled\" [readonly]=\"true\"\n        (mouseenter)=\"mouseHandle(true)\" (mouseleave)=\"mouseHandle(false)\"\n        (icon-click)=\"clearSelected($event)\">\n      </el-input>\n      <ng-container>\n        <el-select-dropdown [isActived]=\"dropdownActive\">\n          <ul class=\"el-scrollbar__view el-select-dropdown__list\">\n            <ng-content></ng-content>\n          </ul>\n        </el-select-dropdown>\n      </ng-container>\n    </div>\n  "}]}],"members":{"tags":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["tags"]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["input"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"mouseHandle":[{"__symbolic":"method"}],"toggleHandle":[{"__symbolic":"method"}],"clearSelected":[{"__symbolic":"method"}],"changeLabel":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"updateLayoutWithMultipleMode":[{"__symbolic":"method"}],"updateValueWithMultipleMode":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ElSelect":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./select-props","name":"ElSelectPoprs"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"el-select","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"ElSelect"},"multi":true}],"styles":["\n    .el-select-dropdown__list { overflow: hidden; }\n    .el-select__tags__padding { padding-right: 30px; }\n  "],"template":"\n    <div class=\"el-select\" (click)=\"toggleHandle($event)\">\n      <div class=\"el-select__tags el-select__tags__padding\" *ngIf=\"multiple && model && model.length\" #tags>\n        <el-tag *ngFor=\"let tag of multipleLabels; let i = index\"\n          [closable]=\"!elDisabled\"\n          [size]=\"size\"\n          (close)=\"$event.stopPropagation();changeLabel(tag, model[i])\"\n          type=\"info\">{{tag}}</el-tag>\n      </div>\n      \n      <el-input iconClass=\"el-select__caret\" #input\n        [model]=\"selectedLabel\"\n        [placeholder]=\"multiplePlaceholder\"\n        [icon]=\"iconClass\"\n        [name]=\"name\"\n        [size]=\"size\"\n        [elDisabled]=\"elDisabled\" [readonly]=\"true\"\n        (mouseenter)=\"mouseHandle(true)\" (mouseleave)=\"mouseHandle(false)\"\n        (icon-click)=\"clearSelected($event)\">\n      </el-input>\n      <ng-container>\n        <el-select-dropdown [isActived]=\"dropdownActive\">\n          <ul class=\"el-scrollbar__view el-select-dropdown__list\">\n            <ng-content></ng-content>\n          </ul>\n        </el-select-dropdown>\n      </ng-container>\n    </div>\n  "}]}],"members":{"tags":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["tags"]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["input"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"mouseHandle":[{"__symbolic":"method"}],"toggleHandle":[{"__symbolic":"method"}],"clearSelected":[{"__symbolic":"method"}],"changeLabel":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"updateLayoutWithMultipleMode":[{"__symbolic":"method"}],"updateValueWithMultipleMode":[{"__symbolic":"method"}]}}}}]

release/tag/tag.d.ts

@@ -9,2 +9,3 @@ import { OnInit, EventEmitter } from '@angular/core';
     color: string;
+    size: string;
     closeTransition: boolean;
@@ -11,0 +12,0 @@ closeEmitter: EventEmitter<any>;

release/tag/tag.js

@@ -25,3 +25,3 @@ import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular/core';
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: "\n    <span [class]=\"'el-tag' + (type ? ' el-tag--' + type : '')\"\n      [class.is-hit]=\"hit\">\n      <ng-content></ng-content>\n      <i class=\"el-tag__close el-icon-close\" *ngIf=\"closable\" (click)=\"closeEmitter.emit()\"></i>\n    </span>\n  ",
+                    template: "\n    <span [class]=\"'el-tag' + (type ? ' el-tag--' + type : '') + (size ? ' el-tag--' + size : '')\"\n      [class.is-hit]=\"hit\">\n      <ng-content></ng-content>\n      <i class=\"el-tag__close el-icon-close\" *ngIf=\"closable\" (click)=\"closeEmitter.emit($event)\"></i>\n    </span>\n  ",
                 },] },
@@ -40,2 +40,3 @@ ];
         'color': [{ type: Input },],
+        'size': [{ type: Input },],
         'closeTransition': [{ type: Input, args: ['close-transition',] },],
@@ -66,2 +67,4 @@ 'closeEmitter': [{ type: Output, args: ['close',] },],
     /** @type {?} */
+    ElTag.prototype.size;
+    /** @type {?} */
     ElTag.prototype.closeTransition;
@@ -68,0 +71,0 @@ /** @type {?} */

release/tag/tag.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ElTag":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"el-tag","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"template":"\n    <span [class]=\"'el-tag' + (type ? ' el-tag--' + type : '')\"\n      [class.is-hit]=\"hit\">\n      <ng-content></ng-content>\n      <i class=\"el-tag__close el-icon-close\" *ngIf=\"closable\" (click)=\"closeEmitter.emit()\"></i>\n    </span>\n  "}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["close-transition"]}]}],"closeEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["close"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"}]}],"ngOnInit":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ElTag":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"el-tag","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"template":"\n    <span [class]=\"'el-tag' + (type ? ' el-tag--' + type : '')\"\n      [class.is-hit]=\"hit\">\n      <ng-content></ng-content>\n      <i class=\"el-tag__close el-icon-close\" *ngIf=\"closable\" (click)=\"closeEmitter.emit()\"></i>\n    </span>\n  "}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["close-transition"]}]}],"closeEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["close"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"}]}],"ngOnInit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ElTag":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"el-tag","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"template":"\n    <span [class]=\"'el-tag' + (type ? ' el-tag--' + type : '') + (size ? ' el-tag--' + size : '')\"\n      [class.is-hit]=\"hit\">\n      <ng-content></ng-content>\n      <i class=\"el-tag__close el-icon-close\" *ngIf=\"closable\" (click)=\"closeEmitter.emit($event)\"></i>\n    </span>\n  "}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["close-transition"]}]}],"closeEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["close"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"}]}],"ngOnInit":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ElTag":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"el-tag","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"template":"\n    <span [class]=\"'el-tag' + (type ? ' el-tag--' + type : '') + (size ? ' el-tag--' + size : '')\"\n      [class.is-hit]=\"hit\">\n      <ng-content></ng-content>\n      <i class=\"el-tag__close el-icon-close\" *ngIf=\"closable\" (click)=\"closeEmitter.emit($event)\"></i>\n    </span>\n  "}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"closeTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["close-transition"]}]}],"closeEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["close"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"}]}],"ngOnInit":[{"__symbolic":"method"}]}}}}]

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3763479

increased by0.61%

Lines of code

29426

increased by0.58%

Worsened metrics

Number of low supply chain risk alerts

36

increased by5.88%

No dependency changes