air-lib
Version:
This is Air's angular component library
101 lines • 14.3 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { NgForm } from '@angular/forms';
import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
export class StarRatingsComponent {
constructor() {
this.onlyStarsShow = false;
this.ratingSelected = new EventEmitter();
}
/**
* @param {?} value
* @return {?}
*/
set starRating(value) {
this._starRating = value;
this.mouseOverIndicators = [false, false, false, false, false];
}
/**
* @return {?}
*/
get starRating() {
return this._starRating;
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
ngOnDestroy() {
this.mouseOverIndicators = [false, false, false, false, false];
}
/**
* @param {?} rating
* @return {?}
*/
onClick(rating) {
this._starRating.rating = rating;
}
/**
* @return {?}
*/
saveRating() {
this.ratingSelected.emit(this._starRating);
}
/**
* @param {?} value
* @return {?}
*/
mouseOver(value) {
for (let i = 0; i < this.mouseOverIndicators.length; i++) {
this.mouseOverIndicators[i] = i <= value - 1;
}
}
/**
* @return {?}
*/
mouseOut() {
this.mouseOver(this.starRating.rating);
}
}
StarRatingsComponent.decorators = [
{ type: Component, args: [{
selector: 'air-star-ratings',
template: "<div class=\"rating-main-container\">\r\n <div class=\"rating-container\" *ngIf=\"!readOnlyMode\">\r\n <h2 *ngIf=\"!onlyStarsShow\" class=\"star-ratings__title\">{{'starRatings.UI1.Title' | translate}}</h2>\r\n\r\n <fieldset class=\"fieldset-free\" [ngClass]=\"{'big': !smallStars}\">\r\n\r\n <label title=\"{{'starRatings.UI1.Rate_1' | translate}}\" (click)=\"onClick(1)\" (mouseover)=\"mouseOver(1)\" (mouseout)=\"mouseOut()\"\r\n [ngClass]=\"{'starOn': starRating.rating >= 1 || mouseOverIndicators[0], 'starOff': starRating.rating < 1 && !mouseOverIndicators[0]}\"></label>\r\n <label title=\"{{'starRatings.UI1.Rate_2' | translate}}\" (click)=\"onClick(2)\" (mouseover)=\"mouseOver(2)\" (mouseout)=\"mouseOut()\"\r\n [ngClass]=\"{'starOn': starRating.rating >= 2 || mouseOverIndicators[1], 'starOff': starRating.rating < 2 && !mouseOverIndicators[1]}\"></label>\r\n <label title=\"{{'starRatings.UI1.Rate_3' | translate}}\" (click)=\"onClick(3)\" (mouseover)=\"mouseOver(3)\" (mouseout)=\"mouseOut()\"\r\n [ngClass]=\"{'starOn': starRating.rating >= 3 || mouseOverIndicators[2], 'starOff': starRating.rating < 3 && !mouseOverIndicators[2]}\"></label>\r\n <label title=\"{{'starRatings.UI1.Rate_4' | translate}}\" (click)=\"onClick(4)\" (mouseover)=\"mouseOver(4)\" (mouseout)=\"mouseOut()\"\r\n [ngClass]=\"{'starOn': starRating.rating >= 4 || mouseOverIndicators[3], 'starOff': starRating.rating < 4 && !mouseOverIndicators[3]}\"></label>\r\n <label title=\"{{'starRatings.UI1.Rate_5' | translate}}\" (click)=\"onClick(5)\" (mouseover)=\"mouseOver(5)\" (mouseout)=\"mouseOut()\"\r\n [ngClass]=\"{'starOn': starRating.rating === 5 || mouseOverIndicators[4], 'starOff': starRating.rating < 5 && !mouseOverIndicators[4]}\"></label>\r\n </fieldset>\r\n\r\n <div class=\"star-ratings__input-container\" *ngIf=\"starRating && !onlyStarsShow\">\r\n <form class=\"form\" id=\"form-star-ratings\" #frmStarRatings='ngForm' novalidate>\r\n <div class=\"textarea__container form-group\">\r\n <textarea class=\"form-control star-ratings__input\" id=\"description\" [(ngModel)]='starRating.description'\r\n type=\"text\" name=\"description\" maxlength=\"280\"\r\n placeholder=\"{{'starRatings.UI1.DescriptionPlaceholder' | translate}}\" cols=\"30\" rows=\"10\"></textarea>\r\n </div>\r\n <button *ngIf=\"starRating && starRating.rating === 0\" class='star-ratings__btn--disabled'>\r\n <i aria-hidden=\"true\" class=\"fa fa-check-square-o i-for-btn\"></i>\r\n {{'starRatings.UI1.RateButtonText' | translate}}</button>\r\n\r\n <button *ngIf=\"starRating && starRating.rating > 0\" class=\"star-ratings__btn\" (click)='saveRating()'> <i\r\n aria-hidden=\"true\" class=\"fa fa-check-square-o i-for-btn\"></i>\r\n {{'starRatings.UI1.RateButtonText' | translate}}</button>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <div class=\"rating-container-readOnlyMode\" *ngIf=\"readOnlyMode && starRating\">\r\n <h2 *ngIf=\"!onlyStarsShow\" class=\"star-ratings__title\">{{'starRatings.UI1.RatedTitle' | translate}}</h2>\r\n <fieldset class=\"fieldset-free\" [ngClass]=\"{'big': !smallStars}\">\r\n\r\n <label title=\"{{'starRatings.UI1.Rate_1' | translate}}\"\r\n [ngClass]=\"{'starOn': starRating.rating >= 1, 'starOff': starRating.rating < 1}\"></label>\r\n\r\n <label title=\"{{'starRatings.UI1.Rate_2' | translate}}\"\r\n [ngClass]=\"{'starOn': starRating.rating >= 2, 'starOff': starRating.rating < 2}\"></label>\r\n\r\n <label title=\"{{'starRatings.UI1.Rate_3' | translate}}\"\r\n [ngClass]=\"{'starOn': starRating.rating >= 3, 'starOff': starRating.rating < 3}\"></label>\r\n\r\n <label title=\"{{'starRatings.UI1.Rate_4' | translate}}\"\r\n [ngClass]=\"{'starOn': starRating.rating >= 4, 'starOff': starRating.rating < 4}\"></label>\r\n\r\n <label title=\"{{'starRatings.UI1.Rate_5' | translate}}\"\r\n [ngClass]=\"{'starOn': starRating.rating === 5, 'starOff': starRating.rating < 5}\"></label>\r\n </fieldset>\r\n <div class=\"star-ratings__input-container\" *ngIf=\"!onlyStarsShow\">\r\n <div class=\"textarea__container\">\r\n <textarea class=\"star-ratings__input\" type=\"text\" disabled cols=\"30\"\r\n rows=\"10\">{{starRating.description}}</textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n",
styles: ["@charset \"UTF-8\";.rating{float:left;border:none;padding:0;cursor:pointer}.rating:not(:checked)>input{position:absolute;top:-9999px;clip:rect(0,0,0,0)}.rating:not(:checked)>label{float:right;width:1em;padding:0;overflow:hidden;white-space:nowrap;cursor:pointer;font-size:200%;line-height:1.2;color:#ddd}.rating:not(:checked)>label:before{content:'\u2605 ';font-size:33px}.rating:not(:checked)>label:hover,.rating:not(:checked)>label:hover~label,.rating>input:checked~label,.rating>input:checked~label:hover,.rating>input:checked~label:hover~label,.rating>label:hover~input:checked~label{color:gold}.star-ratings>.rating-container{display:flex;flex-direction:column;align-items:center;width:90%}.rating-container{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.rating-container .starOff,.rating-container .starOn{cursor:pointer}.star-ratings{display:flex;flex-direction:column;align-items:center;width:100%}.star-ratings__title{margin:0;font:700 18px 'Open Sans',sans-serif;color:#6b6b6b}.star-ratings__input-container{display:flex;flex-wrap:wrap;width:90%}.star-ratings__input{height:90px;width:100%;resize:none;border:1px solid #cdcdcd;border-radius:2px;outline:0;padding:7px 12px 4px}::-webkit-input-placeholder{color:#dcdcde}.star-ratings__btn{width:100%;height:30px;color:#fff;background-color:#6d5cae;margin-top:10px;font-size:14px;font-weight:400;letter-spacing:.01em;margin-bottom:0;border:1px solid #f0f0f0;text-align:center;vertical-align:middle;text-shadow:none;box-shadow:none;line-height:21px;padding-left:17px;padding-right:17px;position:relative;transition:color .1s linear,background-color .1s linear,opacity .2s linear!important;cursor:pointer;font-family:'Open Sans',Arimo,sans-serif}.star-ratings__btn--disabled{width:100%;height:30px;background:0 0;border:1px solid rgba(204,204,204,.87);color:rgba(0,0,0,.62);margin-top:10px;font-size:14px;font-weight:400;letter-spacing:.01em;margin-bottom:0;text-align:center;vertical-align:middle;text-shadow:none;box-shadow:none;line-height:21px;padding-left:17px;padding-right:17px;position:relative;transition:color .1s linear,background-color .1s linear,opacity .2s linear!important;cursor:default;font-family:'Open Sans',Arimo,sans-serif}.textarea__container{width:100%;margin:0}.form-control{margin:0}.i-for-btn{left:13px;position:absolute;top:8px}.star-ratings--small>.rating-container{display:flex;flex-direction:column;align-items:center;width:90%}.form{width:100%}.starOn{color:gold}.starOff{color:#ddd}.starOff:before,.starOn:before{content:'\u2605 ';font-size:12px}.big .starOff:before,.big .starOn:before{content:'\u2605 ';font-size:33px}.rating-container-readOnlyMode{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.rating-container-readOnlyMode .starOff,.rating-container-readOnlyMode .starOn{cursor:default}.rating-main-container{width:100%}.fieldset-free{border:none}"]
}] }
];
StarRatingsComponent.ctorParameters = () => [];
StarRatingsComponent.propDecorators = {
starRating: [{ type: Input }],
readOnlyMode: [{ type: Input }],
smallStars: [{ type: Input }],
onlyStarsShow: [{ type: Input }],
ratingSelected: [{ type: Output }],
frmStarRatings: [{ type: ViewChild, args: ['frmStarRatings',] }]
};
if (false) {
/**
* @type {?}
* @private
*/
StarRatingsComponent.prototype._starRating;
/** @type {?} */
StarRatingsComponent.prototype.mouseOverIndicators;
/** @type {?} */
StarRatingsComponent.prototype.readOnlyMode;
/** @type {?} */
StarRatingsComponent.prototype.smallStars;
/** @type {?} */
StarRatingsComponent.prototype.onlyStarsShow;
/** @type {?} */
StarRatingsComponent.prototype.ratingSelected;
/** @type {?} */
StarRatingsComponent.prototype.frmStarRatings;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Rhci1yYXRpbmdzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2Fpci1saWIvIiwic291cmNlcyI6WyJsaWIvY29tcG9uZW50cy9zdGFyLXJhdGluZ3Mvc3Rhci1yYXRpbmdzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRXhDLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBUXJHLE1BQU07SUFvQko7UUFMUyxrQkFBYSxHQUFZLEtBQUssQ0FBQztRQUM5QixtQkFBYyxHQUFnQyxJQUFJLFlBQVksRUFBaUIsQ0FBQztJQU0xRixDQUFDOzs7OztJQWxCRCxJQUNJLFVBQVUsQ0FBQyxLQUFLO1FBQ2xCLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxtQkFBbUIsR0FBRyxDQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxLQUFLLENBQUUsQ0FBQztJQUNsRSxDQUFDOzs7O0lBQ0QsSUFBSSxVQUFVO1FBQ1osT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDO0lBQzFCLENBQUM7Ozs7SUFhRCxRQUFRO0lBQ1IsQ0FBQzs7OztJQUVILFdBQVc7UUFDVCxJQUFJLENBQUMsbUJBQW1CLEdBQUcsQ0FBQyxLQUFLLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsS0FBSyxDQUFFLENBQUM7SUFDbEUsQ0FBQzs7Ozs7SUFFQyxPQUFPLENBQUMsTUFBYztRQUNwQixJQUFJLENBQUMsV0FBVyxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7SUFDbkMsQ0FBQzs7OztJQUVELFVBQVU7UUFDUixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDOUMsQ0FBQzs7Ozs7SUFFQSxTQUFTLENBQUMsS0FBYTtRQUNyQixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUN4RCxJQUFJLENBQUMsbUJBQW1CLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxJQUFJLEtBQUssR0FBRyxDQUFDLENBQUM7U0FDOUM7SUFDSCxDQUFDOzs7O0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN6QyxDQUFDOzs7WUFyREYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxrQkFBa0I7Z0JBQzVCLCs0SUFBNEM7O2FBRTdDOzs7O3lCQU1FLEtBQUs7MkJBU0wsS0FBSzt5QkFDTCxLQUFLOzRCQUNMLEtBQUs7NkJBQ0wsTUFBTTs2QkFFTixTQUFTLFNBQUMsZ0JBQWdCOzs7Ozs7O0lBakIzQiwyQ0FBbUM7O0lBQ25DLG1EQUEyQzs7SUFXM0MsNENBQStCOztJQUMvQiwwQ0FBNkI7O0lBQzdCLDZDQUF3Qzs7SUFDeEMsOENBQTBGOztJQUUxRiw4Q0FBb0QiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ0Zvcm0gfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcbmltcG9ydCB7IFN0YXJSYXRpbmdEdG8gfSBmcm9tICcuLy4uLy4uL2VudGl0aWVzL3N0YXItcmF0aW5nLWR0byc7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIFZpZXdDaGlsZCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2Fpci1zdGFyLXJhdGluZ3MnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9zdGFyLXJhdGluZ3MuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3N0YXItcmF0aW5ncy5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgU3RhclJhdGluZ3NDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XHJcbiAgcHJpdmF0ZSBfc3RhclJhdGluZzogU3RhclJhdGluZ0R0bztcclxuICBwdWJsaWMgbW91c2VPdmVySW5kaWNhdG9yczogQXJyYXk8Ym9vbGVhbj47XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgc2V0IHN0YXJSYXRpbmcodmFsdWUpIHtcclxuICAgIHRoaXMuX3N0YXJSYXRpbmcgPSB2YWx1ZTtcclxuICAgIHRoaXMubW91c2VPdmVySW5kaWNhdG9ycyA9IFtmYWxzZSwgZmFsc2UsIGZhbHNlLCBmYWxzZSwgZmFsc2UgXTtcclxuICB9XHJcbiAgZ2V0IHN0YXJSYXRpbmcoKTogU3RhclJhdGluZ0R0byB7XHJcbiAgICByZXR1cm4gdGhpcy5fc3RhclJhdGluZztcclxuICB9XHJcblxyXG4gIEBJbnB1dCgpIHJlYWRPbmx5TW9kZTogQm9vbGVhbjtcclxuICBASW5wdXQoKSBzbWFsbFN0YXJzOiBCb29sZWFuO1xyXG4gIEBJbnB1dCgpIG9ubHlTdGFyc1Nob3c6IEJvb2xlYW4gPSBmYWxzZTtcclxuICBAT3V0cHV0KCkgcmF0aW5nU2VsZWN0ZWQ6IEV2ZW50RW1pdHRlcjxTdGFyUmF0aW5nRHRvPiA9IG5ldyBFdmVudEVtaXR0ZXI8U3RhclJhdGluZ0R0bz4oKTtcclxuXHJcbiAgQFZpZXdDaGlsZCgnZnJtU3RhclJhdGluZ3MnKSBmcm1TdGFyUmF0aW5nczogTmdGb3JtO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuXHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICB9XHJcblxyXG5uZ09uRGVzdHJveSgpIHtcclxuICB0aGlzLm1vdXNlT3ZlckluZGljYXRvcnMgPSBbZmFsc2UsIGZhbHNlLCBmYWxzZSwgZmFsc2UsIGZhbHNlIF07XHJcbn1cclxuXHJcbiAgb25DbGljayhyYXRpbmc6IG51bWJlcik6IHZvaWQge1xyXG4gICAgdGhpcy5fc3RhclJhdGluZy5yYXRpbmcgPSByYXRpbmc7XHJcbiAgfVxyXG5cclxuICBzYXZlUmF0aW5nKCkge1xyXG4gICAgdGhpcy5yYXRpbmdTZWxlY3RlZC5lbWl0KHRoaXMuX3N0YXJSYXRpbmcpO1xyXG4gfVxyXG5cclxuICBtb3VzZU92ZXIodmFsdWU6IG51bWJlcik6IHZvaWQge1xyXG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLm1vdXNlT3ZlckluZGljYXRvcnMubGVuZ3RoOyBpKyspIHtcclxuICAgICAgdGhpcy5tb3VzZU92ZXJJbmRpY2F0b3JzW2ldID0gaSA8PSB2YWx1ZSAtIDE7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBtb3VzZU91dCgpOiB2b2lkIHtcclxuICAgIHRoaXMubW91c2VPdmVyKHRoaXMuc3RhclJhdGluZy5yYXRpbmcpO1xyXG4gIH1cclxufVxyXG4iXX0=