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.
684 lines • 37.1 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);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { Component, Input, Output, EventEmitter, ElementRef, ViewEncapsulation, Directive, Optional, Renderer, Self, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import { NgControl } from '@angular/forms';
import { coerceBooleanProperty } from '../core/coercion/boolean-property';
import { Overlay } from '../core/overlay/overlay';
import { OverlayState } from '../core/overlay/overlay-state';
import { TemplatePortal } from '../core';
import { ColorUtil, Rgba, Hsla, Hsva } from './color-util';
var SliderPosition = (function () {
function SliderPosition(h, s, v, a) {
this.h = h;
this.s = s;
this.v = v;
this.a = a;
}
return SliderPosition;
}());
export { SliderPosition };
var SliderDimension = (function () {
function SliderDimension(h, s, v, a) {
this.h = h;
this.s = s;
this.v = v;
this.a = a;
}
return SliderDimension;
}());
export { SliderDimension };
var nextId = 0;
var TextDirective = (function () {
function TextDirective() {
this.newValue = new EventEmitter();
}
TextDirective.prototype.changeInput = function (event) {
event.stopPropagation();
event.preventDefault();
var value = event.target.value;
if (this.rg === undefined) {
this.newValue.emit(value);
}
else {
var numeric = parseFloat(value);
if (!isNaN(numeric) && numeric >= 0 && numeric <= this.rg) {
this.newValue.emit({ v: numeric, rg: this.rg });
}
}
};
return TextDirective;
}());
__decorate([
Output('newValue'),
__metadata("design:type", Object)
], TextDirective.prototype, "newValue", void 0);
__decorate([
Input('text'),
__metadata("design:type", Object)
], TextDirective.prototype, "text", void 0);
__decorate([
Input('rg'),
__metadata("design:type", Number)
], TextDirective.prototype, "rg", void 0);
TextDirective = __decorate([
Directive({
selector: '[text]',
host: {
'(input)': 'changeInput($event)'
}
})
], TextDirective);
export { TextDirective };
var ColorpickerSliderDirective = (function () {
function ColorpickerSliderDirective(_element) {
var _this = this;
this._element = _element;
this.change = new EventEmitter();
this.listenerMove = function (event) { _this.move(event); };
this.listenerStop = function () { _this.stop(); };
}
/**
* set cursor position
* @param event
*/
ColorpickerSliderDirective.prototype.setCursor = function (event) {
var height = this._getNativeElement().offsetHeight;
var width = this._getNativeElement().offsetWidth;
var x = Math.max(0, Math.min(this.getX(event), width));
var y = Math.max(0, Math.min(this.getY(event), height));
if (this.pointX !== undefined && this.pointY !== undefined) {
this.change.emit({
s: x / width, v: (1 - y / height),
pointX: this.pointX, pointY: this.pointY
});
}
else if (this.pointX === undefined && this.pointY !== undefined) {
this.change.emit({ v: y / height, rg: this.pointY });
}
else {
this.change.emit({ v: x / width, rg: this.pointX });
}
};
/**
* input event listner
* @param event
*/
ColorpickerSliderDirective.prototype.move = function (event) {
event.preventDefault();
this.setCursor(event);
};
/**
* input event listner
* @param event
*/
ColorpickerSliderDirective.prototype.start = function (event) {
this.setCursor(event);
document.addEventListener('mousemove', this.listenerMove);
document.addEventListener('touchmove', this.listenerMove);
document.addEventListener('mouseup', this.listenerStop);
document.addEventListener('touchend', this.listenerStop);
};
/**
* stop mouse event
*/
ColorpickerSliderDirective.prototype.stop = function () {
document.removeEventListener('mousemove', this.listenerMove);
document.removeEventListener('touchmove', this.listenerMove);
document.removeEventListener('mouseup', this.listenerStop);
document.removeEventListener('touchend', this.listenerStop);
};
/**
* get x
* @param event
*/
ColorpickerSliderDirective.prototype.getX = function (event) {
var boundingClientRect = this._getNativeElement().getBoundingClientRect();
return (event.pageX !== undefined ? event.pageX : event.touches[0].pageX) -
boundingClientRect.left - window.pageXOffset;
};
/**
* get y
* @param event
*/
ColorpickerSliderDirective.prototype.getY = function (event) {
var boundingClientRect = this._getNativeElement().getBoundingClientRect();
return (event.pageY !== undefined ? event.pageY : event.touches[0].pageY) -
boundingClientRect.top - window.pageYOffset;
};
ColorpickerSliderDirective.prototype._getNativeElement = function () {
return this._element.nativeElement;
};
return ColorpickerSliderDirective;
}());
__decorate([
Input('colorpicker-slider'),
__metadata("design:type", String)
], ColorpickerSliderDirective.prototype, "slider", void 0);
__decorate([
Input('point-x'),
__metadata("design:type", Number)
], ColorpickerSliderDirective.prototype, "pointX", void 0);
__decorate([
Input('point-y'),
__metadata("design:type", Number)
], ColorpickerSliderDirective.prototype, "pointY", void 0);
__decorate([
Output('change'),
__metadata("design:type", Object)
], ColorpickerSliderDirective.prototype, "change", void 0);
ColorpickerSliderDirective = __decorate([
Directive({
selector: '[colorpicker-slider]',
host: {
'(mousedown)': 'start($event)',
'(touchstart)': 'start($event)'
}
}),
__metadata("design:paramtypes", [ElementRef])
], ColorpickerSliderDirective);
export { ColorpickerSliderDirective };
/**
* Change event object emitted by Md2Colorpicker.
*/
var Md2ColorChange = (function () {
function Md2ColorChange(source, color) {
this.source = source;
this.color = color;
}
return Md2ColorChange;
}());
export { Md2ColorChange };
var Md2Colorpicker = (function () {
function Md2Colorpicker(_element, _overlay, _viewContainerRef, _renderer, _util, _control) {
this._element = _element;
this._overlay = _overlay;
this._viewContainerRef = _viewContainerRef;
this._renderer = _renderer;
this._util = _util;
this._control = _control;
this._innerValue = '';
this.backColor = true;
this._defalutColor = '#000000';
/** Whether or not the overlay panel is open. */
this._panelOpen = false;
this._color = null;
/** Whether filling out the select is required in the form. */
this._required = false;
/** Whether the select is disabled. */
this._disabled = false;
this.isInputFocus = false;
this._container = 'inline';
this.isInputValidColor = false;
this._onChange = function () { };
this._onTouched = function () { };
this.cFormat = 'hex';
this.colorpickerChange = new EventEmitter();
/** Event emitted when the selected date has been changed by the user. */
this.change = new EventEmitter();
this.tabindex = 0;
this.id = 'md2-colorpicker-' + (++nextId);
/** Event emitted when the select has been opened. */
this.onOpen = new EventEmitter();
/** Event emitted when the select has been closed. */
this.onClose = new EventEmitter();
this._created = false;
if (this._control) {
this._control.valueAccessor = this;
}
}
Object.defineProperty(Md2Colorpicker.prototype, "color", {
get: function () { return this._color; },
set: function (value) { this._color = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Colorpicker.prototype, "placeholder", {
/** Placeholder to be shown if no value has been selected. */
get: function () { return this._placeholder; },
set: function (value) { this._placeholder = value; },
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Colorpicker.prototype, "required", {
get: function () { return this._required; },
set: function (value) { this._required = coerceBooleanProperty(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Colorpicker.prototype, "disabled", {
/** Whether the component is disabled. */
get: function () { return this._disabled; },
set: function (value) {
this._disabled = coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Colorpicker.prototype, "value", {
get: function () {
return this._innerValue;
},
/**
* set accessor including call the onchange callback
*/
set: function (v) {
if (v !== this._innerValue) {
if (v) {
this.hsva = this._util.stringToHsva(v);
}
this._innerValue = v;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Colorpicker.prototype, "container", {
get: function () { return this._container; },
set: function (value) {
if (this._container !== value) {
this._container = value || 'inline';
this.destroyPanel();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Md2Colorpicker.prototype, "setGradient", {
get: function () {
return {
'background-image': 'linear-gradient(to right, transparent, transparent),' +
'linear-gradient(to left, ' + this.hexText + ', rgba(255, 255, 255, 0))'
};
},
enumerable: true,
configurable: true
});
Md2Colorpicker.prototype.ngOnDestroy = function () { this.destroyPanel(); };
Object.defineProperty(Md2Colorpicker.prototype, "panelOpen", {
/** Whether or not the overlay panel is open. */
get: function () {
return this._panelOpen;
},
enumerable: true,
configurable: true
});
/** Toggles the overlay panel open or closed. */
Md2Colorpicker.prototype.toggle = function () {
this.panelOpen ? this.close() : this.open();
};
/** Opens the overlay panel. */
Md2Colorpicker.prototype.open = function () {
var hsva = this._util.stringToHsva(this.color + '');
this.isInputFocus = true;
if (hsva) {
this.hsva = hsva;
}
else {
this.hsva = this._util.stringToHsva(this._defalutColor);
}
this.sliderDim = new SliderDimension(245, 250, 130, 245);
this.slider = new SliderPosition(0, 0, 0, 0);
if (this.cFormat === 'rgb') {
this.format = 1;
}
else if (this.cFormat === 'hsl') {
this.format = 2;
}
else {
this.format = 0;
}
this.update();
if (this.disabled) {
return;
}
if (!this._isColorpickerVisible) {
this._initialColor = this.color;
this.update();
this._isColorpickerVisible = true;
}
else {
this._isColorpickerVisible = false;
}
this._createOverlay();
if (!this._portal) {
this._portal = new TemplatePortal(this._templatePortal, this._viewContainerRef);
}
this._overlayRef.attach(this._portal);
this._subscribeToBackdrop();
this._panelOpen = true;
this.onOpen.emit();
};
/** Closes the overlay panel and focuses the host element. */
Md2Colorpicker.prototype.close = function () {
this._panelOpen = false;
this.isInputFocus = false;
if (this._overlayRef) {
this._overlayRef.detach();
this._backdropSubscription.unsubscribe();
}
this._isColorpickerVisible = false;
if (this._innerValue) {
this.setColorFromString(this._innerValue);
}
};
/** Removes the panel from the DOM. */
Md2Colorpicker.prototype.destroyPanel = function () {
if (this._overlayRef) {
this._overlayRef.dispose();
this._overlayRef = null;
this._cleanUpSubscriptions();
}
};
Md2Colorpicker.prototype._onBlur = function () {
if (!this.panelOpen) {
this._onTouched();
}
};
/**
* input event listner
* @param event
*/
Md2Colorpicker.prototype.changeInput = function (event) {
var value = event.target.value;
this.colorpickerChange.emit(value);
};
/**
* set saturation,lightness,hue,alpha,RGB value
* @param val
* @param rg
*/
Md2Colorpicker.prototype.setSaturation = function (val) {
var hsla = this._util.hsva2hsla(this.hsva);
hsla.s = val.v / val.rg;
this.hsva = this._util.hsla2hsva(hsla);
this.update();
};
Md2Colorpicker.prototype.setLightness = function (val) {
var hsla = this._util.hsva2hsla(this.hsva);
hsla.l = val.v / val.rg;
this.hsva = this._util.hsla2hsva(hsla);
this.update();
};
Md2Colorpicker.prototype.setHue = function (val) {
this.hsva.h = val.v / val.rg;
this.update();
};
Md2Colorpicker.prototype.setAlpha = function (val) {
this.hsva.a = val.v / val.rg;
this.update();
};
Md2Colorpicker.prototype.setR = function (val) {
var rgba = this._util.hsvaToRgba(this.hsva);
rgba.r = val.v / val.rg;
this.hsva = this._util.rgbaToHsva(rgba);
this.update();
};
Md2Colorpicker.prototype.setG = function (val) {
var rgba = this._util.hsvaToRgba(this.hsva);
rgba.g = val.v / val.rg;
this.hsva = this._util.rgbaToHsva(rgba);
this.update();
};
Md2Colorpicker.prototype.setB = function (val) {
var rgba = this._util.hsvaToRgba(this.hsva);
rgba.b = val.v / val.rg;
this.hsva = this._util.rgbaToHsva(rgba);
this.update();
};
Md2Colorpicker.prototype.setSaturationAndBrightness = function (val) {
this.hsva.s = val.s / val.pointX;
this.hsva.v = val.v / val.pointY;
this.update();
};
Md2Colorpicker.prototype.clickOk = function () {
this._isColorpickerVisible = false;
this.isInputValidColor = false;
this.color = this._innerValue;
if (this._innerValue != this._initialColor) {
this._emitChangeEvent();
}
this.close();
};
/**
* deselect recent color and close popup
*/
Md2Colorpicker.prototype.cancelColor = function () {
this._innerValue = this._initialColor;
this.close();
};
Md2Colorpicker.prototype.isValidColor = function (str) {
return str.match(/^#[a-f0-9]{6}$/i) !== null;
};
/**
* set color
* @param value
*/
Md2Colorpicker.prototype.setColorFromString = function (value) {
if (!this.isValidColor(value)) {
value = '#000000';
this.backColor = false;
}
var hsva = this._util.stringToHsva(value);
if (hsva !== null) {
this.hsva = hsva;
}
this.update();
};
Md2Colorpicker.prototype.formatPolicy = function (value) {
this.format = value;
if (this.format === 0 && this.hsva.a < 1) {
this.format++;
}
return this.format;
};
/**
* update color
*/
Md2Colorpicker.prototype.update = function () {
var hsla = this._util.hsva2hsla(this.hsva);
var rgba = this._util.denormalizeRGBA(this._util.hsvaToRgba(this.hsva));
var hueRgba = this._util.denormalizeRGBA(this._util.hsvaToRgba(new Hsva(this.hsva.h, 1, 1, 1)));
this.alphaColor = 'rgb(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ')';
this._hueSliderColor = 'rgb(' + hueRgba.r + ',' + hueRgba.g + ',' + hueRgba.b + ')';
this.hslaText = new Hsla(Math.round((hsla.h) * 360), Math.round(hsla.s * 100), Math.round(hsla.l * 100), Math.round(hsla.a * 100) / 100);
this.rgbaText = new Rgba(rgba.r, rgba.g, rgba.b, Math.round(rgba.a * 100) / 100);
if (this.backColor) {
this.hexText = this._util.hexText(rgba);
}
this.backColor = true;
var colorCode = Math.round((this.rgbaText.r * 299 + this.rgbaText.g * 587 +
this.rgbaText.b * 114) / 1000);
if (colorCode >= 128 || this.hsva.a < 0.35) {
this.fontColor = 'black';
this._isDark = true;
}
else {
this.fontColor = 'white';
this._isDark = false;
}
if (this.format === 0 && this.hsva.a < 1) {
this.format++;
}
this.outputColor = this._util.outputFormat(this.hsva, this.cFormat);
this.slider = new SliderPosition((this.hsva.h) * this.sliderDim.h, this.hsva.s * this.sliderDim.s - 7, (1 - this.hsva.v) * this.sliderDim.v - 7, this.hsva.a * this.sliderDim.a);
this._innerValue = this.outputColor;
};
Md2Colorpicker.prototype.clearColor = function (event) {
event.stopPropagation();
this.color = '';
this._emitChangeEvent();
};
Md2Colorpicker.prototype.isDescendant = function (parent, child) {
var node = child.parentNode;
while (node !== null) {
if (node === parent) {
return true;
}
node = node.parentNode;
}
return false;
};
Md2Colorpicker.prototype.checkInputVal = function () {
this.hsva = this._util.stringToHsva(this.color + '');
this.isInputFocus = false;
if (this.hsva) {
if (this._innerValue !== this.color) {
this._emitChangeEvent();
}
this.isInputValidColor = false;
}
else {
this.isInputValidColor = true;
}
this._onTouched();
};
/** Emits an event when the user selects a color. */
Md2Colorpicker.prototype._emitChangeEvent = function () {
this._onChange(this.color);
this.change.emit(new Md2ColorChange(this, this.color));
this._innerValue = this.color;
};
Md2Colorpicker.prototype.writeValue = function (value) {
this._innerValue = value;
this.color = value;
};
Md2Colorpicker.prototype.registerOnChange = function (fn) { this._onChange = fn; };
Md2Colorpicker.prototype.registerOnTouched = function (fn) { this._onTouched = fn; };
Md2Colorpicker.prototype.setDisabledState = function (isDisabled) {
this.disabled = isDisabled;
};
Md2Colorpicker.prototype._subscribeToBackdrop = function () {
var _this = this;
this._backdropSubscription = this._overlayRef.backdropClick().subscribe(function () {
_this._innerValue = _this._initialColor;
_this.close();
});
};
/**
* This method creates the overlay from the provided panel's template and saves its
* OverlayRef so that it can be attached to the DOM when open is called.
*/
Md2Colorpicker.prototype._createOverlay = function () {
if (!this._overlayRef) {
var config = new OverlayState();
if (this.container === 'inline') {
config.positionStrategy = this._createPickerPositionStrategy();
config.hasBackdrop = true;
config.backdropClass = 'cdk-overlay-transparent-backdrop';
config.scrollStrategy = this._overlay.scrollStrategies.reposition();
}
else {
config.positionStrategy = this._overlay.position()
.global()
.centerHorizontally()
.centerVertically();
config.hasBackdrop = true;
}
this._overlayRef = this._overlay.create(config);
}
};
/** Create the popup PositionStrategy. */
Md2Colorpicker.prototype._createPickerPositionStrategy = function () {
return this._overlay.position()
.connectedTo(this._element, { originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'top' })
.withFallbackPosition({ originX: 'end', originY: 'top' }, { overlayX: 'end', overlayY: 'top' })
.withFallbackPosition({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'bottom' })
.withFallbackPosition({ originX: 'end', originY: 'bottom' }, { overlayX: 'end', overlayY: 'bottom' });
};
Md2Colorpicker.prototype._cleanUpSubscriptions = function () {
if (this._backdropSubscription) {
this._backdropSubscription.unsubscribe();
}
if (this._positionSubscription) {
this._positionSubscription.unsubscribe();
}
};
return Md2Colorpicker;
}());
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [String])
], Md2Colorpicker.prototype, "color", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [String])
], Md2Colorpicker.prototype, "placeholder", null);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Object])
], Md2Colorpicker.prototype, "required", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], Md2Colorpicker.prototype, "disabled", null);
__decorate([
Input('format'),
__metadata("design:type", String)
], Md2Colorpicker.prototype, "cFormat", void 0);
__decorate([
Output('colorpickerChange'),
__metadata("design:type", Object)
], Md2Colorpicker.prototype, "colorpickerChange", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], Md2Colorpicker.prototype, "change", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], Md2Colorpicker.prototype, "tabindex", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], Md2Colorpicker.prototype, "id", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [String])
], Md2Colorpicker.prototype, "container", null);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], Md2Colorpicker.prototype, "onOpen", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], Md2Colorpicker.prototype, "onClose", void 0);
__decorate([
ViewChild('portal'),
__metadata("design:type", TemplateRef)
], Md2Colorpicker.prototype, "_templatePortal", void 0);
Md2Colorpicker = __decorate([
Component({selector: 'md2-colorpicker',
template: "<div class=\"md2-colorpicker-trigger\"><div class=\"color-picker-selector\" [class.color-error]=\"isInputValidColor && required\"><div class=\"md2-colorpicker-preview\" (click)=\"toggle()\"><div class=\"color-fill\" [style.background-color]=\"color\"></div></div><div class=\"md2-colorpicker-input\" [class.input-focused]=\"isInputFocus\"><span class=\"md2-colorpicker-placeholder\" [class.has-value]=\"color\">{{ placeholder }}</span> <input class=\"md2-colorpicker-value\" autocomplete=\"off\" value=\"color\" [tabindex]=\"tabindex\" [disabled]=\"disabled\" [(ngModel)]=\"color\" (focus)=\"isInputFocus=true\" (blur)=\"checkInputVal()\"> <span *ngIf=\"color && !required && !disabled\" class=\"color-clear\" (click)=\"clearColor($event)\"><svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><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></div></div><ng-template #portal><div class=\"md2-colorpicker-panel\" tabindex=\"0\" [attr.container]=\"container\"><div class=\"md2-colorpicker-content\"><div class=\"md2-colorpicker-wrapper\"><div class=\"md2-color-picker\"><div class=\"selected-color\"><div class=\"selected-color-bg\" [style.background]=\"outputColor\"><div class=\"color-input\"><div [hidden]=\"format!=2\" class=\"hsla-text\"><input [text] type=\"number\" [style.color]=\"fontColor\" pattern=\"[0-9]*\" min=\"0\" max=\"360\" [rg]=\"360\" (newValue)=\"setHue($event)\" [value]=\"hslaText.h\"> <input [text] type=\"number\" [style.color]=\"fontColor\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [rg]=\"100\" (newValue)=\"setSaturation($event)\" [value]=\"hslaText.s\"> <input [text] type=\"number\" [style.color]=\"fontColor\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [rg]=\"100\" (newValue)=\"setLightness($event)\" [value]=\"hslaText.l\"> <input [text] type=\"number\" [style.color]=\"fontColor\" pattern=\"[0-9]+([\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" step=\"0.1\" [rg]=\"1\" (newValue)=\"setAlpha($event)\" [value]=\"hslaText.a\"></div><div [hidden]=\"format!=1\" class=\"rgba-text\"><input [text] type=\"number\" [style.color]=\"fontColor\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [rg]=\"255\" (newValue)=\"setR($event)\" [value]=\"rgbaText.r\"> <input [text] type=\"number\" [style.color]=\"fontColor\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [rg]=\"255\" (newValue)=\"setG($event)\" [value]=\"rgbaText.g\"> <input [text] type=\"number\" [style.color]=\"fontColor\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [rg]=\"255\" (newValue)=\"setB($event)\" [value]=\"rgbaText.b\"> <input [text] type=\"number\" [style.color]=\"fontColor\" pattern=\"[0-9]+([\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" step=\"0.1\" [rg]=\"1\" (newValue)=\"setAlpha($event)\" [value]=\"rgbaText.a\"></div><div [hidden]=\"format!=0\" class=\"hex-text\"><input [text] (newValue)=\"setColorFromString($event)\" [style.color]=\"fontColor\" [value]=\"hexText\"></div></div><div class=\"color-bar\" [class.dark]=\"_isDark\"><div [style.color]=\"fontColor\" class=\"clearfix\"><div class=\"type-policy\" [class.active]=\"format==0\" (click)=\"formatPolicy(0)\">HEX</div><div class=\"type-policy\" [class.active]=\"format==1\" (click)=\"formatPolicy(1)\">RGBA</div><div class=\"type-policy\" [class.active]=\"format==2\" (click)=\"formatPolicy(2)\">HSLA</div></div></div></div></div><div class=\"input-color-content\"><div [colorpicker-slider] [style.background-color]=\"_hueSliderColor\" [point-x]=\"1\" [point-y]=\"1\" (change)=\"setSaturationAndBrightness($event)\" class=\"saturation-lightness\"><div [style.left.px]=\"slider.s\" [style.top.px]=\"slider.v\" class=\"cursor\"></div></div><div [colorpicker-slider] [point-x]=\"1\" (change)=\"setHue($event)\" class=\"hue\"><div [style.left.px]=\"slider.h\" class=\"color-picker-marker\"></div></div><div [colorpicker-slider] [point-x]=\"1\" (change)=\"setAlpha($event)\" class=\"alpha\"><div class=\"alpha-main\" [ngStyle]=\"setGradient\"><div [style.left.px]=\"slider.a\" class=\"color-picker-marker\"></div></div></div></div><div class=\"md2-color-picker-actions\"><div class=\"md2-button\" (click)=\"cancelColor()\">Cancel</div><div class=\"md2-button\" (click)=\"clickOk()\">Ok</div></div></div></div></div></div></ng-template>",
styles: [".md2-colorpicker-wrapper{border-radius:3px;background-color:#fff;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,.4);overflow:hidden}.md2-colorpicker-panel{outline:0;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.md2-colorpicker-panel[container=dialog]{box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}.md2-colorpicker-disabled{pointer-events:none;cursor:default}.md2-colorpicker-disabled .color-picker-selector .md2-colorpicker-value{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}.md2-colorpicker-input{color:rgba(0,0,0,.38);border-bottom:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;align-items:center;height:30px;min-width:180px;line-height:22px;position:relative;box-sizing:border-box}[aria-disabled=true] .md2-colorpicker-input{background-image:linear-gradient(to right,rgba(0,0,0,.26) 0,rgba(0,0,0,.26) 33%,transparent 0);background-size:4px 1px;background-repeat:repeat-x;border-color:transparent;background-position:0 bottom;cursor:default}md2-colorpicker:focus:not(.md2-colorpicker-disabled) .md2-colorpicker-input{color:#106cc8;border-color:#106cc8}md2-colorpicker.ng-invalid.ng-touched:not(.md2-colorpicker-disabled) .md2-colorpicker-input{color:#f44336;border-color:#f44336}.input-focused{color:#106cc8;border-color:#106cc8}.inline-control{width:150px;margin-right:16px;padding:16px 0}.md2-colorpicker-placeholder{position:absolute;right:18px;bottom:100%;left:0;padding:0 2px;transform:translate3d(0,26px,0) scale(1);transform-origin:left top;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;transition:all 150ms cubic-bezier(.25,.8,.25,1)}[aria-required=true] .md2-colorpicker-placeholder::after{content:'*';color:#fd0f0f}.md2-colorpicker-input.input-focused .md2-colorpicker-placeholder{color:#106cc8}.md2-colorpicker-input.input-focused .md2-colorpicker-placeholder,md2-colorpicker .md2-colorpicker-placeholder.has-value{transform:translate3d(0,6px,0) scale(.75)}.color-error .md2-colorpicker-input,.color-error .md2-colorpicker-placeholder{color:#f44336!important;border-color:#f44336}.color-error .color-fill{background-color:transparent!important}.color-picker-selector{display:block;padding:18px 0 4px 46px;white-space:nowrap}.color-picker-selector .md2-colorpicker-preview{position:absolute;top:19px;left:6px;content:'';width:24px;height:24px;overflow:hidden;background-color:#fff;background:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px;border:2px solid #fafafa;display:block;fill:#5a5a5a;cursor:pointer;border-radius:50%;vertical-align:middle;box-shadow:0 1px 1px 0 rgba(0,0,0,.2),0 1px 1px 1px rgba(0,0,0,.14),0 1px 1px 1px rgba(0,0,0,.12)}.color-picker-selector .md2-colorpicker-preview .color-fill{width:100%;height:100%}.color-picker-selector .md2-colorpicker-value{font-size:15px;background:0 0;border:0;outline:0;position:relative;display:block;min-width:160px;height:30px;padding:2px 2px 1px;margin:0;line-height:26px;color:rgba(0,0,0,.87);vertical-align:middle;box-sizing:border-box}md2-colorpicker{position:relative;display:block;outline:0}.md2-color-picker{position:relative;display:block;width:266px;outline:0}.md2-color-picker *{box-sizing:border-box}.md2-color-picker .input-color-content{position:relative;padding:8px}.md2-color-picker i{cursor:default;position:relative}.md2-color-picker input{font-size:16px;height:50px;outline:0}.md2-color-picker div.cursor-sv{cursor:default;position:relative;border-radius:50%;width:15px;height:15px;border:#ddd solid 1px}.md2-color-picker div.cursor{cursor:crosshair;position:relative;border-radius:50%;width:13px;height:13px;box-shadow:0 0 2px 0 rgba(0,0,0,.5),inset 0 0 2px 0 rgba(0,0,0,.5);border:2px solid #fff}.md2-color-picker div.color-picker-marker{cursor:crosshair;position:relative;border:2px solid #fff;box-shadow:0 0 2px 0 rgba(0,0,0,.5);height:100%;width:5px;border-bottom:0;border-top:0}.md2-color-picker .saturation-lightness{width:100%;height:130px;border-radius:2px;overflow:hidden;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0))}.md2-color-picker .saturation-lightness:hover{cursor:crosshair}.md2-color-picker .hue{position:relative;width:100%;height:30px;margin:8px 0;border-radius:2px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.md2-color-picker .alpha{position:relative;width:100%;height:30px;border-radius:2px;background:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}.md2-color-picker .alpha .alpha-main{position:absolute;height:100%;opacity:1;background-image:linear-gradient(to left,transparent,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));width:100%}.md2-color-picker .selected-color{position:relative;width:100%;height:75px;background-color:#fff;background:linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd),linear-gradient(45deg,#ddd 25%,transparent 0,transparent 75%,#ddd 0,#ddd);background-size:8px 8px;background-position:0 0,4px 4px}.md2-color-picker .selected-color .selected-color-bg{position:absolute;height:100%;opacity:1;width:100%}.md2-color-picker .selected-color .color-bar{position:absolute;width:100%;bottom:0}.md2-color-picker .selected-color .color-input{position:relative}.color-clear{color:rgba(0,0,0,.4);cursor:pointer}.color-clear svg{vertical-align:bottom;fill:#686868}.clearfix::after,.clearfix::before{content:' ';display:table}.clearfix::after{clear:both}.hex-text{width:100%}.hex-text input{width:100%;border:0;padding:4px;text-align:center;background:0 0}.hex-text div{text-align:center;float:left;clear:left;width:160px;margin-top:4px}.hsla-text,.rgba-text{text-align:center}.hsla-text input,.rgba-text input{width:50px;border:0;padding:4px 0;background:0 0;text-align:center}.hsla-text div,.rgba-text div{text-align:center;display:block}.hsla-text label,.rgba-text label{text-align:center;display:inline-block;font-size:15px}.md2-color-picker-actions{text-align:right}.md2-color-picker-actions .md2-button{display:inline-block;min-width:64px;margin:4px 8px 8px 0;padding:0 12px;font-size:14px;color:#106cc8;line-height:36px;text-align:center;text-transform:uppercase;border-radius:2px;cursor:pointer;box-sizing:border-box;transition:all 450ms cubic-bezier(.23,1,.32,1)}.md2-color-picker-actions .md2-button:hover{background:#ebebeb}.hsla-text div:nth-child(5),.rgba-text div:nth-child(5){clear:left}.type-policy{width:33.333333%;text-align:center;font-size:14px;display:inline-block;float:left;padding:4px 8px 3px;border-bottom:2px solid transparent;cursor:pointer;background:rgba(255,255,255,.25)}.dark .type-policy{background:rgba(0,0,0,.25)}.type-policy.active{border-color:rgba(255,255,255,.5);background:0 0}.dark .type-policy.active{border-color:rgba(0,0,0,.5)}.cdk-global-overlay-wrapper,.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:999}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:999}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:999}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:999;pointer-events:auto;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.48}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.6)} /*# sourceMappingURL=colorpicker.css.map */ "],
host: {
'role': 'colorpicker',
'[id]': 'id',
'[class.md2-colorpicker-disabled]': 'disabled',
'[attr.aria-label]': 'placeholder',
'[attr.aria-required]': 'required.toString()',
},
encapsulation: ViewEncapsulation.None
}),
__param(5, Self()), __param(5, Optional()),
__metadata("design:paramtypes", [ElementRef, Overlay,
ViewContainerRef, Renderer,
ColorUtil, NgControl])
], Md2Colorpicker);
export { Md2Colorpicker };
//# sourceMappingURL=colorpicker.js.map