@kushki/ng-suka
Version:
<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>
101 lines • 7.69 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, HostBinding, Input, Output, EventEmitter } from '@angular/core';
import { hexToRgb, rgbToHsv, hsvToHex } from './color-utils';
var ColorPicker = /** @class */ (function () {
function ColorPicker() {
this.baseClass = true;
this.colorChange = new EventEmitter();
this.showInput = true;
}
/**
* @return {?}
*/
ColorPicker.prototype.ngOnInit = /**
* @return {?}
*/
function () {
/** @type {?} */
var rgbColor = hexToRgb(this.color);
if (rgbColor) {
/** @type {?} */
var hsv = rgbToHsv(rgbColor.r, rgbColor.g, rgbColor.b);
this.hue = hsvToHex(hsv.h, 100, 100);
}
};
/**
* @param {?} event
* @return {?}
*/
ColorPicker.prototype.onColorChange = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var rgbColor = hexToRgb(event);
if (rgbColor) {
/** @type {?} */
var hsv = rgbToHsv(rgbColor.r, rgbColor.g, rgbColor.b);
this.hue = hsvToHex(hsv.h, 100, 100);
this.color = event;
}
this.emitColorChange(this.color);
};
/**
* @param {?} event
* @return {?}
*/
ColorPicker.prototype.onColorSelect = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.color = event;
this.emitColorChange(this.color);
};
/**
* @private
* @param {?} color
* @return {?}
*/
ColorPicker.prototype.emitColorChange = /**
* @private
* @param {?} color
* @return {?}
*/
function (color) {
this.colorChange.emit(color);
};
ColorPicker.decorators = [
{ type: Component, args: [{
selector: 'suka-color-picker',
template: "\n <div class=\"input-wrapper\" *ngIf=\"showInput\">\n <input\n [ngModel]=\"color\"\n (ngModelChange)=\"onColorChange($event)\"\n />\n <div\n class=\"color-div\"\n [ngStyle]=\"{'background-color': color || 'white'}\"\n ></div>\n </div>\n <div class=\"color-wrapper\">\n <suka-color-palette\n [hue]=\"hue\"\n [color]=\"color\"\n (colorChange)=\"onColorSelect($event)\"\n ></suka-color-palette>\n <suka-color-slider\n [(hue)]=\"hue\"\n ></suka-color-slider>\n </div>\n "
}] }
];
ColorPicker.propDecorators = {
baseClass: [{ type: HostBinding, args: ['class.color-picker',] }],
color: [{ type: Input }],
colorChange: [{ type: Output }],
showInput: [{ type: Input }]
};
return ColorPicker;
}());
export { ColorPicker };
if (false) {
/** @type {?} */
ColorPicker.prototype.baseClass;
/** @type {?} */
ColorPicker.prototype.color;
/** @type {?} */
ColorPicker.prototype.colorChange;
/** @type {?} */
ColorPicker.prototype.showInput;
/** @type {?} */
ColorPicker.prototype.hue;
/** @type {?} */
ColorPicker.prototype.globalHue;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9jb2xvci1waWNrZXIvY29sb3ItcGlja2VyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxZQUFZLEVBQTRCLE1BQU0sZUFBZSxDQUFDO0FBQ3RILE9BQU8sRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU3RDtJQUFBO1FBMEJxQyxjQUFTLEdBQUcsSUFBSSxDQUFDO1FBRzFDLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNsQyxjQUFTLEdBQUcsSUFBSSxDQUFDO0lBaUM1QixDQUFDOzs7O0lBNUJDLDhCQUFROzs7SUFBUjs7WUFDUSxRQUFRLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUM7UUFDckMsSUFBSSxRQUFRLEVBQUU7O2dCQUNOLEdBQUcsR0FBRyxRQUFRLENBQUMsUUFBUSxDQUFDLENBQUMsRUFBRSxRQUFRLENBQUMsQ0FBQyxFQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUM7WUFDeEQsSUFBSSxDQUFDLEdBQUcsR0FBRyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxHQUFHLEVBQUUsR0FBRyxDQUFDLENBQUM7U0FDdEM7SUFDSCxDQUFDOzs7OztJQUVELG1DQUFhOzs7O0lBQWIsVUFBYyxLQUFLOztZQUNYLFFBQVEsR0FBRyxRQUFRLENBQUMsS0FBSyxDQUFDO1FBRWhDLElBQUksUUFBUSxFQUFFOztnQkFDTixHQUFHLEdBQUcsUUFBUSxDQUFDLFFBQVEsQ0FBQyxDQUFDLEVBQUUsUUFBUSxDQUFDLENBQUMsRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUFDO1lBQ3hELElBQUksQ0FBQyxHQUFHLEdBQUcsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1lBQ3JDLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1NBQ3BCO1FBRUQsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDbkMsQ0FBQzs7Ozs7SUFFRCxtQ0FBYTs7OztJQUFiLFVBQWMsS0FBSztRQUNqQixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztRQUNuQixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNuQyxDQUFDOzs7Ozs7SUFFTyxxQ0FBZTs7Ozs7SUFBdkIsVUFBd0IsS0FBSztRQUMzQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMvQixDQUFDOztnQkE5REYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxtQkFBbUI7b0JBQzdCLFFBQVEsRUFBRSwwaEJBcUJUO2lCQUNGOzs7NEJBRUUsV0FBVyxTQUFDLG9CQUFvQjt3QkFFaEMsS0FBSzs4QkFDTCxNQUFNOzRCQUNOLEtBQUs7O0lBaUNSLGtCQUFDO0NBQUEsQUEvREQsSUErREM7U0F0Q1ksV0FBVzs7O0lBQ3RCLGdDQUFvRDs7SUFFcEQsNEJBQXVCOztJQUN2QixrQ0FBMkM7O0lBQzNDLGdDQUEwQjs7SUFFMUIsMEJBQW1COztJQUNuQixnQ0FBeUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgU2ltcGxlQ2hhbmdlcywgT25DaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBoZXhUb1JnYiwgcmdiVG9Ic3YsIGhzdlRvSGV4IH0gZnJvbSAnLi9jb2xvci11dGlscyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N1a2EtY29sb3ItcGlja2VyJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGRpdiBjbGFzcz1cImlucHV0LXdyYXBwZXJcIiAqbmdJZj1cInNob3dJbnB1dFwiPlxuICAgIDxpbnB1dFxuICAgICAgW25nTW9kZWxdPVwiY29sb3JcIlxuICAgICAgKG5nTW9kZWxDaGFuZ2UpPVwib25Db2xvckNoYW5nZSgkZXZlbnQpXCJcbiAgICAvPlxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiY29sb3ItZGl2XCJcbiAgICAgIFtuZ1N0eWxlXT1cInsnYmFja2dyb3VuZC1jb2xvcic6IGNvbG9yIHx8ICd3aGl0ZSd9XCJcbiAgICA+PC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiY29sb3Itd3JhcHBlclwiPlxuICAgIDxzdWthLWNvbG9yLXBhbGV0dGVcbiAgICAgIFtodWVdPVwiaHVlXCJcbiAgICAgIFtjb2xvcl09XCJjb2xvclwiXG4gICAgICAoY29sb3JDaGFuZ2UpPVwib25Db2xvclNlbGVjdCgkZXZlbnQpXCJcbiAgICA+PC9zdWthLWNvbG9yLXBhbGV0dGU+XG4gICAgPHN1a2EtY29sb3Itc2xpZGVyXG4gICAgICBbKGh1ZSldPVwiaHVlXCJcbiAgICA+PC9zdWthLWNvbG9yLXNsaWRlcj5cbiAgPC9kaXY+XG4gIGBcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JQaWNrZXIgaW1wbGVtZW50cyBPbkluaXQge1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmNvbG9yLXBpY2tlcicpIGJhc2VDbGFzcyA9IHRydWU7XG5cbiAgQElucHV0KCkgY29sb3I6IHN0cmluZztcbiAgQE91dHB1dCgpIGNvbG9yQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBASW5wdXQoKSBzaG93SW5wdXQgPSB0cnVlO1xuXG4gIHB1YmxpYyBodWU6IHN0cmluZztcbiAgcHVibGljIGdsb2JhbEh1ZTogc3RyaW5nO1xuXG4gIG5nT25Jbml0KCkge1xuICAgIGNvbnN0IHJnYkNvbG9yID0gaGV4VG9SZ2IodGhpcy5jb2xvcik7XG4gICAgaWYgKHJnYkNvbG9yKSB7XG4gICAgICBjb25zdCBoc3YgPSByZ2JUb0hzdihyZ2JDb2xvci5yLCByZ2JDb2xvci5nLCByZ2JDb2xvci5iKTtcbiAgICAgIHRoaXMuaHVlID0gaHN2VG9IZXgoaHN2LmgsIDEwMCwgMTAwKTtcbiAgICB9XG4gIH1cblxuICBvbkNvbG9yQ2hhbmdlKGV2ZW50KSB7XG4gICAgY29uc3QgcmdiQ29sb3IgPSBoZXhUb1JnYihldmVudCk7XG5cbiAgICBpZiAocmdiQ29sb3IpIHtcbiAgICAgIGNvbnN0IGhzdiA9IHJnYlRvSHN2KHJnYkNvbG9yLnIsIHJnYkNvbG9yLmcsIHJnYkNvbG9yLmIpO1xuICAgICAgdGhpcy5odWUgPSBoc3ZUb0hleChoc3YuaCwgMTAwLCAxMDApO1xuICAgICAgdGhpcy5jb2xvciA9IGV2ZW50O1xuICAgIH1cblxuICAgIHRoaXMuZW1pdENvbG9yQ2hhbmdlKHRoaXMuY29sb3IpO1xuICB9XG5cbiAgb25Db2xvclNlbGVjdChldmVudCkge1xuICAgIHRoaXMuY29sb3IgPSBldmVudDtcbiAgICB0aGlzLmVtaXRDb2xvckNoYW5nZSh0aGlzLmNvbG9yKTtcbiAgfVxuXG4gIHByaXZhdGUgZW1pdENvbG9yQ2hhbmdlKGNvbG9yKSB7XG4gICAgdGhpcy5jb2xvckNoYW5nZS5lbWl0KGNvbG9yKTtcbiAgfVxufVxuIl19