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.
432 lines • 19.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, Input, Output, ViewEncapsulation } from '@angular/core';
import { NG_VALUE_ACCESSOR, } from '@angular/forms';
import { coerceBooleanProperty, UP_ARROW, DOWN_ARROW, ENTER, ESCAPE, TAB } from '../core/core';
var Item = (function () {
function Item(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 Item;
}());
export { Item };
var nextId = 0;
export var MD2_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return Md2Autocomplete; }),
multi: true
};
/** Change event object emitted by Md2Autocomplete. */
var Md2AutocompleteChange = (function () {
function Md2AutocompleteChange() {
}
return Md2AutocompleteChange;
}());
export { Md2AutocompleteChange };
var Md2Autocomplete = (function () {
function Md2Autocomplete(_element) {
this._element = _element;
this.change = new EventEmitter();
this.textChange = new EventEmitter();
this._value = '';
this._readonly = false;
this._required = false;
this._disabled = false;
this._isInitialized = false;
this._onChange = function () { };
this._onTouched = function () { };
this._items = [];
this._list = [];
this.selectedItem = null;
this.noBlur = false;
this._focusedOption = 0;
this._inputValue = '';
this._inputFocused = false;
this.id = 'md2-autocomplete-' + (++nextId);
this.tabindex = 0;
this.placeholder = '';
this.textKey = 'text';
this.valueKey = null;
this.minLength = 1;
}
Md2Autocomplete.prototype.ngAfterContentInit = function () { this._isInitialized = true; };
Object.defineProperty(Md2Autocomplete.prototype, "readonly", {
get: function () { return this._readonly; },
set: function (value) { this._readonly = coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Autocomplete.prototype, "required", {
get: function () { return this._required; },
set: function (value) { this._required = coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Autocomplete.prototype, "disabled", {
get: function () { return this._disabled; },
set: function (value) { this._disabled = coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Autocomplete.prototype, "items", {
set: function (value) { this._items = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Autocomplete.prototype, "value", {
get: function () { return this._value; },
set: function (value) {
var _this = this;
if (value !== this._value) {
this._value = value;
this._inputValue = '';
if (value) {
var selItm = this._items.find(function (i) { return _this.equals(_this.valueKey ?
i[_this.valueKey] : i, value); });
this.selectedItem = new Item(selItm, this.textKey, this.valueKey);
if (this.selectedItem) {
this._inputValue = this.selectedItem.text;
}
}
if (!this._inputValue) {
this._inputValue = '';
}
if (this._isInitialized) {
this._emitChangeEvent();
}
}
},
enumerable: true,
configurable: true
});
/**
* Compare two vars or objects
* @param o1 compare first object
* @param o2 compare second object
* @return boolean comparation result
*/
Md2Autocomplete.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(Md2Autocomplete.prototype, "isMenuVisible", {
get: function () {
return ((this._inputFocused || this.noBlur) && this._list && this._list.length &&
!this.selectedItem) && !this.readonly ? true : false;
},
enumerable: true,
configurable: true
});
/**
* update scroll of suggestion menu
*/
Md2Autocomplete.prototype.updateScroll = function () {
if (this._focusedOption < 0) {
return;
}
var menuContainer = this._element.nativeElement.querySelector('.md2-autocomplete-menu');
if (!menuContainer) {
return;
}
var choices = menuContainer.querySelectorAll('.md2-option');
if (choices.length < 1) {
return;
}
var highlighted = choices[this._focusedOption];
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 event listner
* @param event
*/
Md2Autocomplete.prototype._handleKeyup = function (event) {
if (this._inputValue === '' || this._inputValue === null) {
this._onClear();
}
this.textChange.emit(this._inputValue);
};
Md2Autocomplete.prototype._handleKeydown = function (event) {
var _this = this;
if (this.disabled) {
return;
}
switch (event.keyCode) {
case TAB:
this._handleMouseLeave();
break;
case ESCAPE:
event.stopPropagation();
event.preventDefault();
if (this._inputValue) {
this._onClear();
}
break;
case ENTER:
event.preventDefault();
event.stopPropagation();
if (this.isMenuVisible) {
this._selectOption(event, this._focusedOption);
}
break;
case DOWN_ARROW:
event.preventDefault();
event.stopPropagation();
if (this.isMenuVisible) {
this._focusedOption = (this._focusedOption === this._list.length - 1) ? 0 :
Math.min(this._focusedOption + 1, this._list.length - 1);
this.updateScroll();
}
break;
case UP_ARROW:
event.preventDefault();
event.stopPropagation();
if (this.isMenuVisible) {
this._focusedOption = (this._focusedOption === 0) ? this._list.length - 1 :
Math.max(0, this._focusedOption - 1);
this.updateScroll();
}
break;
default:
setTimeout(function () {
_this.updateItems();
}, 10);
}
};
/**
* select option
* @param event
* @param index of selected item
*/
Md2Autocomplete.prototype._selectOption = function (event, index) {
event.preventDefault();
event.stopPropagation();
this.selectedItem = this._list[index];
this._inputValue = this._list[index].text;
this.updateValue();
this._handleMouseLeave();
};
/**
* clear selected suggestion
*/
Md2Autocomplete.prototype._onClear = function () {
if (this.disabled) {
return;
}
this._inputValue = '';
this.selectedItem = null;
this.updateItems();
this._value = this.selectedItem ? this.selectedItem.value : this.selectedItem;
this.updateValue();
};
/**
* update value
*/
Md2Autocomplete.prototype.updateValue = function () {
this._value = this.selectedItem ? this.selectedItem.value : this.selectedItem;
this._emitChangeEvent();
this.onFocus();
};
/**
* component focus listener
*/
Md2Autocomplete.prototype.onFocus = function () {
if (this.disabled) {
return;
}
this._element.nativeElement.querySelector('input').focus();
};
/**
* input focus listener
*/
Md2Autocomplete.prototype._handleFocus = function () {
this._inputFocused = true;
this.updateItems();
this._focusedOption = 0;
};
/**
* input blur listener
*/
Md2Autocomplete.prototype._handleBlur = function () {
this._inputFocused = false;
this._onTouched();
};
/**
* suggestion menu mouse enter listener
*/
Md2Autocomplete.prototype._handleMouseEnter = function () { this.noBlur = true; };
/**
* suggestion menu mouse leave listener
*/
Md2Autocomplete.prototype._handleMouseLeave = function () { this.noBlur = false; };
/**
* Update suggestion to filter the query
* @param query
*/
Md2Autocomplete.prototype.updateItems = function () {
var _this = this;
if (this._inputValue.length < this.minLength) {
this._list = [];
}
else {
this._list = this._items.map(function (i) { return new Item(i, _this.textKey, _this.valueKey); }).filter(function (i) { return new RegExp(_this._inputValue.trim(), 'ig').test(i.text); });
if (this._list.length && this._list[0].text !== this._inputValue) {
this.selectedItem = null;
}
}
};
Md2Autocomplete.prototype._emitChangeEvent = function () {
var event = new Md2AutocompleteChange();
event.source = this;
event.value = this._value;
this._onChange(event.value);
this.change.emit(event);
};
Md2Autocomplete.prototype.writeValue = function (value) {
var _this = this;
if (value !== this._value) {
this._value = value;
this._inputValue = '';
if (value) {
var selItm = this._items.find(function (i) { return _this.equals(_this.valueKey ?
i[_this.valueKey] : i, value); });
this.selectedItem = new Item(selItm, this.textKey, this.valueKey);
if (this.selectedItem) {
this._inputValue = this.selectedItem.text;
}
}
if (!this._inputValue) {
this._inputValue = '';
}
}
};
Md2Autocomplete.prototype.registerOnChange = function (fn) { this._onChange = fn; };
Md2Autocomplete.prototype.registerOnTouched = function (fn) { this._onTouched = fn; };
Md2Autocomplete.prototype.setDisabledState = function (isDisabled) {
this.disabled = isDisabled;
};
return Md2Autocomplete;
}());
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], Md2Autocomplete.prototype, "change", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], Md2Autocomplete.prototype, "textChange", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], Md2Autocomplete.prototype, "id", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], Md2Autocomplete.prototype, "tabindex", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], Md2Autocomplete.prototype, "placeholder", void 0);
__decorate([
Input('item-text'),
__metadata("design:type", String)
], Md2Autocomplete.prototype, "textKey", void 0);
__decorate([
Input('item-value'),
__metadata("design:type", String)
], Md2Autocomplete.prototype, "valueKey", void 0);
__decorate([
Input('min-length'),
__metadata("design:type", Number)
], Md2Autocomplete.prototype, "minLength", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Object])
], Md2Autocomplete.prototype, "readonly", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Object])
], Md2Autocomplete.prototype, "required", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Object])
], Md2Autocomplete.prototype, "disabled", null);
__decorate([
Input(),
__metadata("design:type", Array),
__metadata("design:paramtypes", [Array])
], Md2Autocomplete.prototype, "items", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], Md2Autocomplete.prototype, "value", null);
Md2Autocomplete = __decorate([
Component({selector: 'md2-autocomplete',
template: "<div class=\"md2-autocomplete-trigger\" [class.is-focused]=\"_inputFocused || isMenuVisible\"><input [(ngModel)]=\"_inputValue\" type=\"text\" autocomplete=\"off\" [readonly]=\"readonly\" [tabindex]=\"disabled ? -1 : tabindex\" [disabled]=\"disabled\" class=\"md2-autocomplete-input\" (focus)=\"_handleFocus()\" (blur)=\"_handleBlur()\" (keydown)=\"_handleKeydown($event)\" (keyup)=\"_handleKeyup($event)\" (change)=\"$event.stopPropagation()\"> <span class=\"md2-autocomplete-placeholder\" [class.has-value]=\"_inputValue\">{{ placeholder }} </span><svg *ngIf=\"_inputValue && !required && !disabled\" (click)=\"_onClear()\" 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></div><ul *ngIf=\"isMenuVisible\" class=\"md2-autocomplete-menu\" (mouseenter)=\"_handleMouseEnter()\" (mouseleave)=\"_handleMouseLeave()\"><li class=\"md2-option\" *ngFor=\"let l of _list; let i = index;\" [class.focus]=\"_focusedOption === i\" (click)=\"_selectOption($event, i)\"><div class=\"md2-text\" [innerHtml]=\"l.text | highlight:_inputValue\"></div></li></ul>",
styles: ["md2-autocomplete{position:relative;display:block;margin:18px 0;outline:0;user-select:none;backface-visibility:hidden}md2-autocomplete.md2-autocomplete-disabled{pointer-events:none;cursor:default}.md2-autocomplete-trigger{position:relative;display:block;width:100%;padding:2px 2px 1px;border-bottom:1px solid rgba(0,0,0,.12);box-sizing:border-box;min-width:64px;min-height:26px;cursor:pointer}.md2-autocomplete-trigger.is-focused{padding-bottom:0;border-bottom:2px solid #106cc8}md2-autocomplete.ng-invalid.ng-touched:not(.md2-autocomplete-disabled) .md2-autocomplete-trigger{color:#f44336;border-bottom-color:#f44336}md2-autocomplete.md2-autocomplete-disabled .md2-autocomplete-trigger{color:rgba(0,0,0,.38);border-color:transparent;background-image:linear-gradient(to right,rgba(0,0,0,.38) 0,rgba(0,0,0,.38) 33%,transparent 0);background-position:bottom -1px left 0;background-size:4px 1px;background-repeat:repeat-x;cursor:default}md2-autocomplete.md2-autocomplete-disabled .md2-autocomplete-trigger.is-focused{padding-bottom:1px;border-bottom:1px solid transparent}.md2-autocomplete-input{width:100%;height:26px;font-size:15px;outline:0;background:0 0;border:0;box-sizing:border-box}md2-autocomplete.md2-autocomplete-disabled .md2-autocomplete-input{color:rgba(0,0,0,.38)}.md2-autocomplete-placeholder{position:absolute;right:26px;bottom:100%;left:0;max-width:100%;padding-left:3px;padding-right:0;line-height:1.4;color:rgba(0,0,0,.38);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;z-index:1;transform:translate3d(0,26px,0) scale(1);transition:transform .4s cubic-bezier(.25,.8,.25,1);transform-origin:left top}[aria-required=true] .md2-autocomplete-placeholder::after{content:'*';color:#fd0f0f}.md2-autocomplete-trigger.is-focused .md2-autocomplete-placeholder{color:#106cc8}.md2-autocomplete-trigger.is-focused .md2-autocomplete-placeholder,md2-autocomplete .md2-autocomplete-placeholder.has-value{transform:translate3d(0,6px,0) scale(.75)}.md2-autocomplete-trigger svg{position:absolute;right:0;top:0;display:block;height:100%;background:#fff;fill:currentColor;color:rgba(0,0,0,.54)}.md2-autocomplete-menu{position:absolute;left:0;top:100%;display:block;z-index:10;width:100%;margin: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;background:#fff}.md2-autocomplete-menu .md2-option{position:relative;display:block;color:#212121;cursor:pointer;width:auto;padding:0 16px;height:48px;line-height:48px;transition:background 150ms linear}.md2-autocomplete-menu .md2-option.focus,.md2-autocomplete-menu .md2-option:hover{background:#ededed}.md2-autocomplete-menu .md2-option .md2-text{width:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}.md2-autocomplete-menu .highlight{color:#737373} /*# sourceMappingURL=autocomplete.css.map */ "],
providers: [MD2_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR],
host: {
'role': 'autocomplete',
'[id]': 'id',
'[attr.aria-label]': 'placeholder',
'[attr.aria-required]': 'required.toString()',
'[attr.aria-disabled]': 'disabled.toString()',
'[class.md2-autocomplete-disabled]': 'disabled',
},
encapsulation: ViewEncapsulation.None,
exportAs: 'md2Autocomplete'
}),
__metadata("design:paramtypes", [ElementRef])
], Md2Autocomplete);
export { Md2Autocomplete };
//# sourceMappingURL=autocomplete.js.map