ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
497 lines (485 loc) • 19.5 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/keycodes'), require('@angular/forms'), require('@angular/common'), require('ng-zorro-antd/icon'), require('ng-zorro-antd/tooltip'), require('@angular/core'), require('ng-zorro-antd/core')) :
typeof define === 'function' && define.amd ? define('ng-zorro-antd/rate', ['exports', '@angular/cdk/keycodes', '@angular/forms', '@angular/common', 'ng-zorro-antd/icon', 'ng-zorro-antd/tooltip', '@angular/core', 'ng-zorro-antd/core'], factory) :
(factory((global['ng-zorro-antd'] = global['ng-zorro-antd'] || {}, global['ng-zorro-antd'].rate = {}),global.ng.cdk.keycodes,global.ng.forms,global.ng.common,global['ng-zorro-antd'].icon,global['ng-zorro-antd'].tooltip,global.ng.core,global['ng-zorro-antd'].core));
}(this, (function (exports,keycodes,forms,common,icon,tooltip,core,core$1) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __decorate(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;
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzRateComponent = /** @class */ (function () {
function NzRateComponent(renderer, cdr) {
this.renderer = renderer;
this.cdr = cdr;
this.nzAllowClear = true;
this.nzAllowHalf = false;
this.nzDisabled = false;
this.nzAutoFocus = false;
this.nzTooltips = [];
this.nzOnBlur = new core.EventEmitter();
this.nzOnFocus = new core.EventEmitter();
this.nzOnHoverChange = new core.EventEmitter();
this.nzOnKeyDown = new core.EventEmitter();
this.hasHalf = false;
this.hoverValue = 0;
this.prefixCls = 'ant-rate';
this.innerPrefixCls = this.prefixCls + "-star";
this.isFocused = false;
this.isInit = false;
this.starArray = [];
this._count = 5;
this._value = 0;
this.onChange = ( /**
* @return {?}
*/function () { return null; });
this.onTouched = ( /**
* @return {?}
*/function () { return null; });
}
Object.defineProperty(NzRateComponent.prototype, "nzCount", {
get: /**
* @return {?}
*/ function () {
return this._count;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (this._count === value) {
return;
}
this._count = value;
this.updateStarArray();
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzRateComponent.prototype, "nzValue", {
get: /**
* @return {?}
*/ function () {
return this._value;
},
set: /**
* @param {?} input
* @return {?}
*/ function (input) {
if (this._value === input) {
return;
}
this._value = input;
this.hasHalf = !Number.isInteger(input);
this.hoverValue = Math.ceil(input);
},
enumerable: true,
configurable: true
});
/**
* @param {?} changes
* @return {?}
*/
NzRateComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.nzAutoFocus && !changes.nzAutoFocus.isFirstChange()) {
if (this.nzAutoFocus && !this.nzDisabled) {
this.renderer.setAttribute(this.ulElement.nativeElement, 'autofocus', 'autofocus');
}
else {
this.renderer.removeAttribute(this.ulElement.nativeElement, 'autofocus');
}
}
};
/**
* @return {?}
*/
NzRateComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.updateStarArray();
};
/**
* @return {?}
*/
NzRateComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.isInit = true;
};
/**
* @param {?} index
* @param {?} isHalf
* @return {?}
*/
NzRateComponent.prototype.onItemClick = /**
* @param {?} index
* @param {?} isHalf
* @return {?}
*/
function (index, isHalf) {
if (this.nzDisabled) {
return;
}
this.hoverValue = index + 1;
/** @type {?} */
var actualValue = isHalf ? index + 0.5 : index + 1;
if (this.nzValue === actualValue) {
if (this.nzAllowClear) {
this.nzValue = 0;
this.onChange(this.nzValue);
}
}
else {
this.nzValue = actualValue;
this.onChange(this.nzValue);
}
};
/**
* @param {?} index
* @param {?} isHalf
* @return {?}
*/
NzRateComponent.prototype.onItemHover = /**
* @param {?} index
* @param {?} isHalf
* @return {?}
*/
function (index, isHalf) {
if (this.nzDisabled || (this.hoverValue === index + 1 && isHalf === this.hasHalf)) {
return;
}
this.hoverValue = index + 1;
this.hasHalf = isHalf;
this.nzOnHoverChange.emit(this.hoverValue);
};
/**
* @return {?}
*/
NzRateComponent.prototype.onRateLeave = /**
* @return {?}
*/
function () {
this.hasHalf = !Number.isInteger(this.nzValue);
this.hoverValue = Math.ceil(this.nzValue);
};
/**
* @param {?} e
* @return {?}
*/
NzRateComponent.prototype.onFocus = /**
* @param {?} e
* @return {?}
*/
function (e) {
this.isFocused = true;
this.nzOnFocus.emit(e);
};
/**
* @param {?} e
* @return {?}
*/
NzRateComponent.prototype.onBlur = /**
* @param {?} e
* @return {?}
*/
function (e) {
this.isFocused = false;
this.nzOnBlur.emit(e);
};
/**
* @return {?}
*/
NzRateComponent.prototype.focus = /**
* @return {?}
*/
function () {
this.ulElement.nativeElement.focus();
};
/**
* @return {?}
*/
NzRateComponent.prototype.blur = /**
* @return {?}
*/
function () {
this.ulElement.nativeElement.blur();
};
/**
* @param {?} e
* @return {?}
*/
NzRateComponent.prototype.onKeyDown = /**
* @param {?} e
* @return {?}
*/
function (e) {
/** @type {?} */
var oldVal = this.nzValue;
if (e.keyCode === keycodes.RIGHT_ARROW && this.nzValue < this.nzCount) {
this.nzValue += this.nzAllowHalf ? 0.5 : 1;
}
else if (e.keyCode === keycodes.LEFT_ARROW && this.nzValue > 0) {
this.nzValue -= this.nzAllowHalf ? 0.5 : 1;
}
if (oldVal !== this.nzValue) {
this.onChange(this.nzValue);
this.nzOnKeyDown.emit(e);
this.cdr.markForCheck();
}
};
/**
* @param {?} i
* @return {?}
*/
NzRateComponent.prototype.setClasses = /**
* @param {?} i
* @return {?}
*/
function (i) {
var _a;
return _a = {},
_a[this.innerPrefixCls + "-full"] = i + 1 < this.hoverValue || (!this.hasHalf && i + 1 === this.hoverValue),
_a[this.innerPrefixCls + "-half"] = this.hasHalf && i + 1 === this.hoverValue,
_a[this.innerPrefixCls + "-active"] = this.hasHalf && i + 1 === this.hoverValue,
_a[this.innerPrefixCls + "-zero"] = i + 1 > this.hoverValue,
_a[this.innerPrefixCls + "-focused"] = this.hasHalf && i + 1 === this.hoverValue && this.isFocused,
_a;
};
/**
* @private
* @return {?}
*/
NzRateComponent.prototype.updateStarArray = /**
* @private
* @return {?}
*/
function () {
this.starArray = Array(this.nzCount)
.fill(0)
.map(( /**
* @param {?} _
* @param {?} i
* @return {?}
*/function (_, i) { return i; }));
};
// #region Implement `ControlValueAccessor`
// #region Implement `ControlValueAccessor`
/**
* @param {?} value
* @return {?}
*/
NzRateComponent.prototype.writeValue =
// #region Implement `ControlValueAccessor`
/**
* @param {?} value
* @return {?}
*/
function (value) {
this.nzValue = value || 0;
this.cdr.markForCheck();
};
/**
* @param {?} isDisabled
* @return {?}
*/
NzRateComponent.prototype.setDisabledState = /**
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.nzDisabled = isDisabled;
};
/**
* @param {?} fn
* @return {?}
*/
NzRateComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
NzRateComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
NzRateComponent.decorators = [
{ type: core.Component, args: [{
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
selector: 'nz-rate',
exportAs: 'nzRate',
preserveWhitespaces: false,
template: "<ul #ulElement\n class=\"ant-rate\"\n [class.ant-rate-disabled]=\"nzDisabled\"\n [ngClass]=\"classMap\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n (keydown)=\"onKeyDown($event); $event.preventDefault();\"\n (mouseleave)=\"onRateLeave(); $event.stopPropagation();\"\n [tabindex]=\"nzDisabled ? -1 : 1\">\n <li *ngFor=\"let star of starArray; let i = index\"\n class=\"ant-rate-star\"\n [ngClass]=\"setClasses(star)\"\n nz-tooltip\n [nzTitle]=\"nzTooltips[ i ]\">\n <div nz-rate-item\n [allowHalf]=\"nzAllowHalf\"\n [character]=\"nzCharacter\"\n (itemHover)=\"onItemHover(i, $event)\"\n (itemClick)=\"onItemClick(i, $event)\">\n </div>\n </li>\n</ul>\n",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(( /**
* @return {?}
*/function () { return NzRateComponent; })),
multi: true
}
]
}] }
];
/** @nocollapse */
NzRateComponent.ctorParameters = function () {
return [
{ type: core.Renderer2 },
{ type: core.ChangeDetectorRef }
];
};
NzRateComponent.propDecorators = {
ulElement: [{ type: core.ViewChild, args: ['ulElement',] }],
nzAllowClear: [{ type: core.Input }],
nzAllowHalf: [{ type: core.Input }],
nzDisabled: [{ type: core.Input }],
nzAutoFocus: [{ type: core.Input }],
nzCharacter: [{ type: core.Input }],
nzTooltips: [{ type: core.Input }],
nzOnBlur: [{ type: core.Output }],
nzOnFocus: [{ type: core.Output }],
nzOnHoverChange: [{ type: core.Output }],
nzOnKeyDown: [{ type: core.Output }],
nzCount: [{ type: core.Input }]
};
__decorate([
core$1.InputBoolean(),
__metadata("design:type", Boolean)
], NzRateComponent.prototype, "nzAllowClear", void 0);
__decorate([
core$1.InputBoolean(),
__metadata("design:type", Boolean)
], NzRateComponent.prototype, "nzAllowHalf", void 0);
__decorate([
core$1.InputBoolean(),
__metadata("design:type", Boolean)
], NzRateComponent.prototype, "nzDisabled", void 0);
__decorate([
core$1.InputBoolean(),
__metadata("design:type", Boolean)
], NzRateComponent.prototype, "nzAutoFocus", void 0);
return NzRateComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzRateItemComponent = /** @class */ (function () {
function NzRateItemComponent() {
this.allowHalf = false;
this.itemHover = new core.EventEmitter();
this.itemClick = new core.EventEmitter();
}
/**
* @param {?} isHalf
* @return {?}
*/
NzRateItemComponent.prototype.hoverRate = /**
* @param {?} isHalf
* @return {?}
*/
function (isHalf) {
this.itemHover.next(isHalf && this.allowHalf);
};
/**
* @param {?} isHalf
* @return {?}
*/
NzRateItemComponent.prototype.clickRate = /**
* @param {?} isHalf
* @return {?}
*/
function (isHalf) {
this.itemClick.next(isHalf && this.allowHalf);
};
NzRateItemComponent.decorators = [
{ type: core.Component, args: [{
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None,
selector: '[nz-rate-item]',
exportAs: 'nzRateItem',
template: "<div class=\"ant-rate-star-second\"\n (mouseover)=\"hoverRate(false); $event.stopPropagation();\"\n (click)=\"clickRate(false);\">\n <ng-template [ngTemplateOutlet]=\"character || defaultCharacter\"></ng-template>\n</div>\n<div class=\"ant-rate-star-first\"\n (mouseover)=\"hoverRate(true); $event.stopPropagation();\"\n (click)=\"clickRate(true);\">\n <ng-template [ngTemplateOutlet]=\"character || defaultCharacter\"></ng-template>\n</div>\n\n<ng-template #defaultCharacter>\n <i nz-icon\n type=\"star\"\n theme=\"fill\"></i>\n</ng-template>\n"
}] }
];
NzRateItemComponent.propDecorators = {
character: [{ type: core.Input }],
allowHalf: [{ type: core.Input }],
itemHover: [{ type: core.Output }],
itemClick: [{ type: core.Output }]
};
__decorate([
core$1.InputBoolean(),
__metadata("design:type", Boolean)
], NzRateItemComponent.prototype, "allowHalf", void 0);
return NzRateItemComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzRateModule = /** @class */ (function () {
function NzRateModule() {
}
NzRateModule.decorators = [
{ type: core.NgModule, args: [{
exports: [NzRateComponent],
declarations: [NzRateComponent, NzRateItemComponent],
imports: [common.CommonModule, icon.NzIconModule, tooltip.NzToolTipModule]
},] }
];
return NzRateModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
exports.NzRateComponent = NzRateComponent;
exports.NzRateModule = NzRateModule;
exports.NzRateItemComponent = NzRateItemComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-zorro-antd-rate.umd.js.map