@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>
104 lines • 7.1 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';
export class ColorPicker {
constructor() {
this.baseClass = true;
this.colorChange = new EventEmitter();
this.showInput = true;
}
/**
* @return {?}
*/
ngOnInit() {
/** @type {?} */
const rgbColor = hexToRgb(this.color);
if (rgbColor) {
/** @type {?} */
const hsv = rgbToHsv(rgbColor.r, rgbColor.g, rgbColor.b);
this.hue = hsvToHex(hsv.h, 100, 100);
}
}
/**
* @param {?} event
* @return {?}
*/
onColorChange(event) {
/** @type {?} */
const rgbColor = hexToRgb(event);
if (rgbColor) {
/** @type {?} */
const 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 {?}
*/
onColorSelect(event) {
this.color = event;
this.emitColorChange(this.color);
}
/**
* @private
* @param {?} color
* @return {?}
*/
emitColorChange(color) {
this.colorChange.emit(color);
}
}
ColorPicker.decorators = [
{ type: Component, args: [{
selector: 'suka-color-picker',
template: `
<div class="input-wrapper" *ngIf="showInput">
<input
[ngModel]="color"
(ngModelChange)="onColorChange($event)"
/>
<div
class="color-div"
[ngStyle]="{'background-color': color || 'white'}"
></div>
</div>
<div class="color-wrapper">
<suka-color-palette
[hue]="hue"
[color]="color"
(colorChange)="onColorSelect($event)"
></suka-color-palette>
<suka-color-slider
[(hue)]="hue"
></suka-color-slider>
</div>
`
}] }
];
ColorPicker.propDecorators = {
baseClass: [{ type: HostBinding, args: ['class.color-picker',] }],
color: [{ type: Input }],
colorChange: [{ type: Output }],
showInput: [{ type: Input }]
};
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9jb2xvci1waWNrZXIvY29sb3ItcGlja2VyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxZQUFZLEVBQTRCLE1BQU0sZUFBZSxDQUFDO0FBQ3RILE9BQU8sRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQTJCN0QsTUFBTSxPQUFPLFdBQVc7SUF6QnhCO1FBMEJxQyxjQUFTLEdBQUcsSUFBSSxDQUFDO1FBRzFDLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNsQyxjQUFTLEdBQUcsSUFBSSxDQUFDO0lBaUM1QixDQUFDOzs7O0lBNUJDLFFBQVE7O2NBQ0EsUUFBUSxHQUFHLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQ3JDLElBQUksUUFBUSxFQUFFOztrQkFDTixHQUFHLEdBQUcsUUFBUSxDQUFDLFFBQVEsQ0FBQyxDQUFDLEVBQUUsUUFBUSxDQUFDLENBQUMsRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUFDO1lBQ3hELElBQUksQ0FBQyxHQUFHLEdBQUcsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1NBQ3RDO0lBQ0gsQ0FBQzs7Ozs7SUFFRCxhQUFhLENBQUMsS0FBSzs7Y0FDWCxRQUFRLEdBQUcsUUFBUSxDQUFDLEtBQUssQ0FBQztRQUVoQyxJQUFJLFFBQVEsRUFBRTs7a0JBQ04sR0FBRyxHQUFHLFFBQVEsQ0FBQyxRQUFRLENBQUMsQ0FBQyxFQUFFLFFBQVEsQ0FBQyxDQUFDLEVBQUUsUUFBUSxDQUFDLENBQUMsQ0FBQztZQUN4RCxJQUFJLENBQUMsR0FBRyxHQUFHLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLEdBQUcsRUFBRSxHQUFHLENBQUMsQ0FBQztZQUNyQyxJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztTQUNwQjtRQUVELElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ25DLENBQUM7Ozs7O0lBRUQsYUFBYSxDQUFDLEtBQUs7UUFDakIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFDbkIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDbkMsQ0FBQzs7Ozs7O0lBRU8sZUFBZSxDQUFDLEtBQUs7UUFDM0IsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDL0IsQ0FBQzs7O1lBOURGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsbUJBQW1CO2dCQUM3QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXFCVDthQUNGOzs7d0JBRUUsV0FBVyxTQUFDLG9CQUFvQjtvQkFFaEMsS0FBSzswQkFDTCxNQUFNO3dCQUNOLEtBQUs7Ozs7SUFKTixnQ0FBb0Q7O0lBRXBELDRCQUF1Qjs7SUFDdkIsa0NBQTJDOztJQUMzQyxnQ0FBMEI7O0lBRTFCLDBCQUFtQjs7SUFDbkIsZ0NBQXlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIFNpbXBsZUNoYW5nZXMsIE9uQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgaGV4VG9SZ2IsIHJnYlRvSHN2LCBoc3ZUb0hleCB9IGZyb20gJy4vY29sb3ItdXRpbHMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWthLWNvbG9yLXBpY2tlcicsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJpbnB1dC13cmFwcGVyXCIgKm5nSWY9XCJzaG93SW5wdXRcIj5cbiAgICA8aW5wdXRcbiAgICAgIFtuZ01vZGVsXT1cImNvbG9yXCJcbiAgICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uQ29sb3JDaGFuZ2UoJGV2ZW50KVwiXG4gICAgLz5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImNvbG9yLWRpdlwiXG4gICAgICBbbmdTdHlsZV09XCJ7J2JhY2tncm91bmQtY29sb3InOiBjb2xvciB8fCAnd2hpdGUnfVwiXG4gICAgPjwvZGl2PlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImNvbG9yLXdyYXBwZXJcIj5cbiAgICA8c3VrYS1jb2xvci1wYWxldHRlXG4gICAgICBbaHVlXT1cImh1ZVwiXG4gICAgICBbY29sb3JdPVwiY29sb3JcIlxuICAgICAgKGNvbG9yQ2hhbmdlKT1cIm9uQ29sb3JTZWxlY3QoJGV2ZW50KVwiXG4gICAgPjwvc3VrYS1jb2xvci1wYWxldHRlPlxuICAgIDxzdWthLWNvbG9yLXNsaWRlclxuICAgICAgWyhodWUpXT1cImh1ZVwiXG4gICAgPjwvc3VrYS1jb2xvci1zbGlkZXI+XG4gIDwvZGl2PlxuICBgXG59KVxuZXhwb3J0IGNsYXNzIENvbG9yUGlja2VyIGltcGxlbWVudHMgT25Jbml0IHtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5jb2xvci1waWNrZXInKSBiYXNlQ2xhc3MgPSB0cnVlO1xuXG4gIEBJbnB1dCgpIGNvbG9yOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBjb2xvckNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQElucHV0KCkgc2hvd0lucHV0ID0gdHJ1ZTtcblxuICBwdWJsaWMgaHVlOiBzdHJpbmc7XG4gIHB1YmxpYyBnbG9iYWxIdWU6IHN0cmluZztcblxuICBuZ09uSW5pdCgpIHtcbiAgICBjb25zdCByZ2JDb2xvciA9IGhleFRvUmdiKHRoaXMuY29sb3IpO1xuICAgIGlmIChyZ2JDb2xvcikge1xuICAgICAgY29uc3QgaHN2ID0gcmdiVG9Ic3YocmdiQ29sb3IuciwgcmdiQ29sb3IuZywgcmdiQ29sb3IuYik7XG4gICAgICB0aGlzLmh1ZSA9IGhzdlRvSGV4KGhzdi5oLCAxMDAsIDEwMCk7XG4gICAgfVxuICB9XG5cbiAgb25Db2xvckNoYW5nZShldmVudCkge1xuICAgIGNvbnN0IHJnYkNvbG9yID0gaGV4VG9SZ2IoZXZlbnQpO1xuXG4gICAgaWYgKHJnYkNvbG9yKSB7XG4gICAgICBjb25zdCBoc3YgPSByZ2JUb0hzdihyZ2JDb2xvci5yLCByZ2JDb2xvci5nLCByZ2JDb2xvci5iKTtcbiAgICAgIHRoaXMuaHVlID0gaHN2VG9IZXgoaHN2LmgsIDEwMCwgMTAwKTtcbiAgICAgIHRoaXMuY29sb3IgPSBldmVudDtcbiAgICB9XG5cbiAgICB0aGlzLmVtaXRDb2xvckNoYW5nZSh0aGlzLmNvbG9yKTtcbiAgfVxuXG4gIG9uQ29sb3JTZWxlY3QoZXZlbnQpIHtcbiAgICB0aGlzLmNvbG9yID0gZXZlbnQ7XG4gICAgdGhpcy5lbWl0Q29sb3JDaGFuZ2UodGhpcy5jb2xvcik7XG4gIH1cblxuICBwcml2YXRlIGVtaXRDb2xvckNoYW5nZShjb2xvcikge1xuICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdChjb2xvcik7XG4gIH1cbn1cbiJdfQ==