md2
Version:
Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Chips(Tags), Collapse, Colorpicker, Data Table, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.
491 lines • 20.4 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, Output, ViewEncapsulation, } from '@angular/core';
import { NG_VALUE_ACCESSOR, } from '@angular/forms';
import { coerceBooleanProperty, LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, TAB, ESCAPE } from '../core/core';
var noop = function () { };
var nextId = 0;
var Tag = (function () {
function Tag(source, textKey, valueKey) {
if (typeof source === 'string') {
this.text = this.value = source;
}
if (typeof source === 'object') {
this.text = source[textKey];
this.value = valueKey ? source[valueKey] : source;
}
}
return Tag;
}());
export { Tag };
export var MD2_TAGS_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return Md2Tags; }),
multi: true
};
var Md2Tags = (function () {
function Md2Tags(_element) {
this._element = _element;
this.change = new EventEmitter();
this._value = '';
this._disabled = false;
this._isInitialized = false;
this._onTouchedCallback = noop;
this._onChangeCallback = noop;
this._tags = [];
this._list = [];
this._items = [];
this._focusedTag = 0;
this._selectedTag = -1;
this._inputValue = '';
this._inputFocused = false;
this.noBlur = true;
this.id = 'md2-tags-' + (++nextId);
this.tabindex = 0;
this.placeholder = '';
this.textKey = 'text';
this.valueKey = null;
this.selectAndFocusTagSafe = function (index) {
if (!this._items.length) {
this._selectTag(-1);
this._handleFocus();
return;
}
if (index === this._items.length) {
return this._handleFocus();
}
index = Math.max(index, 0);
index = Math.min(index, this._items.length - 1);
this._selectTag(index);
};
}
Md2Tags.prototype.ngAfterContentInit = function () { this._isInitialized = true; };
Object.defineProperty(Md2Tags.prototype, "disabled", {
get: function () { return this._disabled; },
set: function (value) { this._disabled = coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Tags.prototype, "tags", {
set: function (value) { this._tags = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Tags.prototype, "value", {
get: function () { return this._value; },
set: function (value) { this.setValue(value); },
enumerable: true,
configurable: true
});
/**
* setup value
* @param value
*/
Md2Tags.prototype.setValue = function (value) {
var _this = this;
if (value !== this._value) {
this._value = value;
this._items = [];
if (value && value.length && typeof value === 'object' && Array.isArray(value)) {
var _loop_1 = function (i) {
var selItm = this_1._tags.find(function (t) { return _this.equals(_this.valueKey ?
t[_this.valueKey] : t, value[i]); });
if (selItm) {
this_1._items.push(new Tag(selItm, this_1.textKey, this_1.valueKey));
}
};
var this_1 = this;
for (var i = 0; i < value.length; i++) {
_loop_1(i);
}
}
if (this._isInitialized) {
this._onChangeCallback(value);
this.change.emit(this._value);
}
}
};
/**
* Compare two vars or objects
* @param o1 compare first object
* @param o2 compare second object
* @return boolean comparation result
*/
Md2Tags.prototype.equals = function (o1, o2) {
if (o1 === o2) {
return true;
}
if (o1 === null || o2 === null) {
return false;
}
if (o1 !== o1 && o2 !== o2) {
return true;
}
var t1 = typeof o1, t2 = typeof o2, key, keySet;
if (t1 === t2 && t1 === 'object') {
keySet = Object.create(null);
for (key in o1) {
if (!this.equals(o1[key], o2[key])) {
return false;
}
keySet[key] = true;
}
for (key in o2) {
if (!(key in keySet) && key.charAt(0) !== '$' && o2[key]) {
return false;
}
}
return true;
}
return false;
};
Object.defineProperty(Md2Tags.prototype, "isMenuVisible", {
get: function () {
return ((this._inputFocused || this.noBlur) && this._inputValue &&
this._list && this._list.length) ? true : false;
},
enumerable: true,
configurable: true
});
/**
* update scroll of tags suggestion menu
*/
Md2Tags.prototype.updateScroll = function () {
if (this._focusedTag < 0) {
return;
}
var menuContainer = this._element.nativeElement.querySelector('.md2-tags-menu');
if (!menuContainer) {
return;
}
var choices = menuContainer.querySelectorAll('.md2-option');
if (choices.length < 1) {
return;
}
var highlighted = choices[this._focusedTag];
if (!highlighted) {
return;
}
var top = highlighted.offsetTop + highlighted.clientHeight - menuContainer.scrollTop;
var height = menuContainer.offsetHeight;
if (top > height) {
menuContainer.scrollTop += top - height;
}
else if (top < highlighted.clientHeight) {
menuContainer.scrollTop -= highlighted.clientHeight - top;
}
};
/**
* input key listener
* @param event
*/
Md2Tags.prototype._handleInputKeydown = function (event) {
var _this = this;
// Backspace
if (event.keyCode === 8 && !this._inputValue) {
event.preventDefault();
event.stopPropagation();
if (this._items.length && this._selectedTag < 0) {
this.selectAndFocusTagSafe(this._items.length - 1);
}
if (this._items.length && this._selectedTag > -1) {
this.removeAndSelectAdjacentTag(this._selectedTag);
}
return;
}
// Del Key
if (event.keyCode === 46 && !this._inputValue) {
return;
}
// Left / Right Arrow
if ((event.keyCode === 37 || event.keyCode === 39) && !this._inputValue) {
return;
}
// Down Arrow
if (event.keyCode === 40) {
if (!this.isMenuVisible) {
return;
}
event.stopPropagation();
event.preventDefault();
this._focusedTag = (this._focusedTag === this._list.length - 1) ?
0 : Math.min(this._focusedTag + 1, this._list.length - 1);
this.updateScroll();
return;
}
// Up Arrow
if (event.keyCode === 38) {
if (!this.isMenuVisible) {
return;
}
event.stopPropagation();
event.preventDefault();
this._focusedTag = (this._focusedTag === 0) ?
this._list.length - 1 : Math.max(0, this._focusedTag - 1);
this.updateScroll();
return;
}
// Tab Key
if (event.keyCode === 9) {
return;
}
// Enter / Space
if (event.keyCode === 13 || event.keyCode === 32) {
if (!this._inputValue || !this.isMenuVisible) {
event.preventDefault();
return;
}
event.preventDefault();
this._addTag(event, this._focusedTag);
return;
}
// Escape Key
if (event.keyCode === 27) {
event.stopPropagation();
event.preventDefault();
if (this._inputValue) {
this._inputValue = '';
}
if (this._selectedTag >= 0) {
this._handleFocus();
}
return;
}
// reset selected tag
if (this._selectedTag >= 0) {
this.resetselectedTag();
}
// filter
setTimeout(function () {
_this.filterMatches();
}, 10);
};
Md2Tags.prototype._handleKeydown = function (event) {
if (this.disabled || this._inputValue) {
return;
}
switch (event.keyCode) {
case BACKSPACE:
case DELETE:
if (this._selectedTag < 0) {
return;
}
event.preventDefault();
this.removeAndSelectAdjacentTag(this._selectedTag);
break;
case TAB:
case ESCAPE:
if (this._selectedTag < 0) {
return;
}
event.preventDefault();
this._handleFocus();
break;
case LEFT_ARROW:
event.preventDefault();
if (this._selectedTag < 0) {
this._selectedTag = this._items.length;
}
if (this._items.length) {
this.selectAndFocusTagSafe(this._selectedTag - 1);
}
break;
case RIGHT_ARROW:
event.preventDefault();
if (this._selectedTag >= this._items.length) {
this._selectedTag = -1;
}
this.selectAndFocusTagSafe(this._selectedTag + 1);
break;
}
};
Md2Tags.prototype.removeAndSelectAdjacentTag = function (index) {
var selIndex = this.getAdjacentTagIndex(index);
this.removeTag(index);
this.selectAndFocusTagSafe(selIndex);
};
Md2Tags.prototype.resetselectedTag = function () {
this._selectedTag = -1;
};
Md2Tags.prototype.getAdjacentTagIndex = function (index) {
var len = this._items.length - 1;
return (len === 0) ? -1 :
(index === len) ? index - 1 : index;
};
/**
* add tag
* @param event
* @param index index of the specific tag
*/
Md2Tags.prototype._addTag = function (event, index) {
event.preventDefault();
event.stopPropagation();
this._items.push(this._list[index]);
this._inputValue = '';
this.updateValue();
};
Md2Tags.prototype._removeTagAndFocusInput = function (index) {
this.removeTag(index);
this._handleFocus();
};
/**
* remove tag
* @param index
*/
Md2Tags.prototype.removeTag = function (index) {
this._items.splice(index, 1);
this.updateValue();
};
/**
* update value
*/
Md2Tags.prototype.updateValue = function () {
this._value = new Array();
for (var i = 0; i < this._items.length; i++) {
this._value.push(this._items[i].value);
}
this._onChangeCallback(this._value);
this.change.emit(this._value);
};
/**
* select tag
* @param index of select tag
*/
Md2Tags.prototype._selectTag = function (index) {
if (index >= -1 && index <= this._items.length) {
this._selectedTag = index;
}
};
Md2Tags.prototype._handleFocus = function () {
this._element.nativeElement.querySelector('input').focus();
this.resetselectedTag();
};
Md2Tags.prototype._onInputFocus = function () {
this._inputFocused = true;
this.resetselectedTag();
};
Md2Tags.prototype._onInputBlur = function () {
this._inputFocused = false;
};
Md2Tags.prototype._listEnter = function () { this.noBlur = true; };
Md2Tags.prototype._listLeave = function () { this.noBlur = false; };
/**
* update suggestion menu with filter
* @param query
*/
Md2Tags.prototype.filterMatches = function () {
var _this = this;
var tempList = this._tags.map(function (tag) { return new Tag(tag, _this.textKey, _this.valueKey); });
this._list = tempList.filter(function (t) {
return (new RegExp(_this._inputValue, 'ig').test(t.text) &&
!_this._items.find(function (i) { return t.text === i.text; }));
});
if (this._list.length > 0) {
this._focusedTag = 0;
}
};
Md2Tags.prototype.writeValue = function (value) {
var _this = this;
if (value !== this._value) {
this._value = value;
this._items = [];
if (value && value.length && typeof value === 'object' && Array.isArray(value)) {
var _loop_2 = function (i) {
var selItm = this_2._tags.find(function (t) { return _this.equals(_this.valueKey ?
t[_this.valueKey] : t, value[i]); });
if (selItm) {
this_2._items.push(new Tag(selItm, this_2.textKey, this_2.valueKey));
}
};
var this_2 = this;
for (var i = 0; i < value.length; i++) {
_loop_2(i);
}
}
}
};
Md2Tags.prototype.registerOnChange = function (fn) { this._onChangeCallback = fn; };
Md2Tags.prototype.registerOnTouched = function (fn) { this._onTouchedCallback = fn; };
Md2Tags.prototype.setDisabledState = function (isDisabled) {
this.disabled = isDisabled;
};
return Md2Tags;
}());
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], Md2Tags.prototype, "change", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], Md2Tags.prototype, "id", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], Md2Tags.prototype, "tabindex", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], Md2Tags.prototype, "placeholder", void 0);
__decorate([
Input('md2-tag-text'),
__metadata("design:type", String)
], Md2Tags.prototype, "textKey", void 0);
__decorate([
Input('md2-tag-value'),
__metadata("design:type", String)
], Md2Tags.prototype, "valueKey", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Object])
], Md2Tags.prototype, "disabled", null);
__decorate([
Input('md2-tags'),
__metadata("design:type", Array),
__metadata("design:paramtypes", [Array])
], Md2Tags.prototype, "tags", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], Md2Tags.prototype, "value", null);
__decorate([
HostListener('keydown', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [KeyboardEvent]),
__metadata("design:returntype", void 0)
], Md2Tags.prototype, "_handleKeydown", null);
__decorate([
HostListener('focus'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], Md2Tags.prototype, "_handleFocus", null);
Md2Tags = __decorate([
Component({selector: 'md2-tags',
template: "<div class=\"md2-tags-container\"><span *ngFor=\"let t of _items; let i = index;\" class=\"md2-tag\" [class.active]=\"_selectedTag === i\" (click)=\"_selectTag(i)\"><span class=\"md2-tag-text\">{{t.text}}</span> <svg (click)=\"_removeTagAndFocusInput(i)\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg></span><div class=\"md2-tag-add\"><input [(ngModel)]=\"_inputValue\" type=\"text\" tabs=\"false\" autocomplete=\"off\" tabindex=\"-1\" [disabled]=\"disabled\" class=\"md2-tags-input\" [placeholder]=\"placeholder\" (focus)=\"_onInputFocus()\" (blur)=\"_onInputBlur()\" (keydown)=\"_handleInputKeydown($event)\" (change)=\"$event.stopPropagation()\"><ul *ngIf=\"isMenuVisible\" class=\"md2-tags-menu\" (mouseenter)=\"_listEnter()\" (mouseleave)=\"_listLeave()\"><li class=\"md2-tag-option\" *ngFor=\"let l of _list; let i = index;\" [class.focused]=\"_focusedTag === i\" (click)=\"_addTag($event, i)\"><span class=\"md2-tag-option-text\" [innerHtml]=\"l.text | highlight:_inputValue\"></span></li></ul></div></div>",
styles: [":host{outline:0;user-select:none;backface-visibility:hidden}.md2-tags-container{position:relative;display:block;max-width:100%;padding:2px 2px 4px;border-bottom:1px solid rgba(0,0,0,.12);box-sizing:content-box;min-width:64px;min-height:26px;cursor:text}.md2-tags-container::after,.md2-tags-container::before{display:table;content:' '}.md2-tags-container::after{clear:both}.focus .md2-tags-container{padding-bottom:3px;border-bottom:2px solid #106cc8}.md2-tags-disabled .md2-tags-container{color:rgba(0,0,0,.38);cursor:default}.md2-tags-disabled.focus .md2-tags-container{padding-bottom:4px;border-bottom:1px solid rgba(0,0,0,.38)}.md2-tag{position:relative;cursor:default;border-radius:16px;display:block;height:32px;line-height:32px;margin:4px 4px 0 0;padding:0 26px 0 12px;float:left;box-sizing:border-box;max-width:100%;background:#e0e0e0;color:#424242;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md2-tag.active{background:#106cc8;color:rgba(255,255,255,.87)}.md2-tag.active svg{color:rgba(255,255,255,.87)}.md2-tag svg{position:absolute;top:4px;right:2px;cursor:pointer;display:inline-block;overflow:hidden;fill:currentColor;color:rgba(0,0,0,.54)}.md2-tag-add{position:relative;display:inline-block;margin-left:4px}input{border:0;outline:0;margin-top:6px;height:30px;line-height:30px;padding:0;color:rgba(0,0,0,.87);background:0 0}.md2-tags-placeholder{color:rgba(0,0,0,.38)}.md2-tags-menu{position:absolute;left:0;top:100%;display:block;z-index:10;flex-direction:column;width:100%;margin:6px 0 0;padding:8px 0;box-shadow:0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);max-height:256px;min-height:48px;overflow-y:auto;transform:scale(1);background:#fff;backface-visibility:hidden}.md2-tags-menu .md2-tag-option{cursor:pointer;position:relative;display:block;color:#212121;align-items:center;width:auto;transition:background 150ms linear;padding:12px 16px;line-height:24px;box-sizing:border-box;word-wrap:break-word}.md2-tags-menu .md2-tag-option.focused,.md2-tags-menu .md2-tag-option:hover{background:#eee}.md2-tags-menu .md2-tag-option .md2-tag-option-text{width:auto;font-size:16px}.highlight{color:#757575} /*# sourceMappingURL=tags.css.map */ "],
host: {
'role': 'tags',
'[id]': 'id',
'[class.focus]': '_inputFocused || _selectedTag >= 0',
'[class.md2-tags-disabled]': 'disabled',
'[tabindex]': 'disabled ? -1 : tabindex',
'[attr.aria-disabled]': 'disabled'
},
providers: [MD2_TAGS_CONTROL_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None,
exportAs: 'md2Tags'
}),
__metadata("design:paramtypes", [ElementRef])
], Md2Tags);
export { Md2Tags };
//# sourceMappingURL=tags.js.map