ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
592 lines (585 loc) • 18.6 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, forwardRef, Renderer2, ChangeDetectorRef, ViewChild, Input, Output, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { InputBoolean, InputNumber } from 'ng-zorro-antd/core/util';
import { CommonModule } from '@angular/common';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
/**
* @fileoverview added by tsickle
* Generated from: rate.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var NZ_CONFIG_COMPONENT_NAME = 'rate';
var NzRateComponent = /** @class */ (function () {
function NzRateComponent(nzConfigService, renderer, cdr) {
this.nzConfigService = nzConfigService;
this.renderer = renderer;
this.cdr = cdr;
this.nzDisabled = false;
this.nzAutoFocus = false;
this.nzCount = 5;
this.nzTooltips = [];
this.nzOnBlur = new EventEmitter();
this.nzOnFocus = new EventEmitter();
this.nzOnHoverChange = new EventEmitter();
this.nzOnKeyDown = new EventEmitter();
this.classMap = {};
this.starArray = [];
this.starStyleArray = [];
this.destroy$ = new Subject();
this.hasHalf = false;
this.hoverValue = 0;
this.isFocused = false;
this._value = 0;
this.onChange = (/**
* @return {?}
*/
function () { return null; });
this.onTouched = (/**
* @return {?}
*/
function () { return null; });
}
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) {
var nzAutoFocus = changes.nzAutoFocus, nzCount = changes.nzCount, nzValue = changes.nzValue;
if (nzAutoFocus && !nzAutoFocus.isFirstChange()) {
/** @type {?} */
var el = this.ulElement.nativeElement;
if (this.nzAutoFocus && !this.nzDisabled) {
this.renderer.setAttribute(el, 'autofocus', 'autofocus');
}
else {
this.renderer.removeAttribute(el, 'autofocus');
}
}
if (nzCount) {
this.updateStarArray();
}
if (nzValue) {
this.updateStarStyle();
}
};
/**
* @return {?}
*/
NzRateComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.nzConfigService
.getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME)
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @return {?}
*/
function () { return _this.cdr.markForCheck(); }));
};
/**
* @return {?}
*/
NzRateComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy$.next();
this.destroy$.complete();
};
/**
* @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);
}
this.updateStarStyle();
};
/**
* @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);
this.updateStarStyle();
};
/**
* @return {?}
*/
NzRateComponent.prototype.onRateLeave = /**
* @return {?}
*/
function () {
this.hasHalf = !Number.isInteger(this.nzValue);
this.hoverValue = Math.ceil(this.nzValue);
this.updateStarStyle();
};
/**
* @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 === RIGHT_ARROW && this.nzValue < this.nzCount) {
this.nzValue += this.nzAllowHalf ? 0.5 : 1;
}
else if (e.keyCode === 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.updateStarStyle();
this.cdr.markForCheck();
}
};
/**
* @private
* @return {?}
*/
NzRateComponent.prototype.updateStarArray = /**
* @private
* @return {?}
*/
function () {
this.starArray = Array(this.nzCount)
.fill(0)
.map((/**
* @param {?} _
* @param {?} i
* @return {?}
*/
function (_, i) { return i; }));
this.updateStarStyle();
};
/**
* @private
* @return {?}
*/
NzRateComponent.prototype.updateStarStyle = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this.starStyleArray = this.starArray.map((/**
* @param {?} i
* @return {?}
*/
function (i) {
var _a;
/** @type {?} */
var prefix = 'ant-rate-star';
/** @type {?} */
var value = i + 1;
return _a = {},
_a[prefix + "-full"] = value < _this.hoverValue || (!_this.hasHalf && value === _this.hoverValue),
_a[prefix + "-half"] = _this.hasHalf && value === _this.hoverValue,
_a[prefix + "-active"] = _this.hasHalf && value === _this.hoverValue,
_a[prefix + "-zero"] = value > _this.hoverValue,
_a[prefix + "-focused"] = _this.hasHalf && value === _this.hoverValue && _this.isFocused,
_a;
}));
};
/**
* @param {?} value
* @return {?}
*/
NzRateComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.nzValue = value || 0;
this.updateStarArray();
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: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-rate',
exportAs: 'nzRate',
preserveWhitespaces: false,
template: "\n <ul\n #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 >\n <li\n *ngFor=\"let star of starArray; let i = index\"\n class=\"ant-rate-star\"\n [ngClass]=\"starStyleArray[i]\"\n nz-tooltip\n [nzTooltipTitle]=\"nzTooltips[i]\"\n >\n <div\n 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: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return NzRateComponent; })),
multi: true
}
]
}] }
];
/** @nocollapse */
NzRateComponent.ctorParameters = function () { return [
{ type: NzConfigService },
{ type: Renderer2 },
{ type: ChangeDetectorRef }
]; };
NzRateComponent.propDecorators = {
ulElement: [{ type: ViewChild, args: ['ulElement', { static: false },] }],
nzAllowClear: [{ type: Input }],
nzAllowHalf: [{ type: Input }],
nzDisabled: [{ type: Input }],
nzAutoFocus: [{ type: Input }],
nzCharacter: [{ type: Input }],
nzCount: [{ type: Input }],
nzTooltips: [{ type: Input }],
nzOnBlur: [{ type: Output }],
nzOnFocus: [{ type: Output }],
nzOnHoverChange: [{ type: Output }],
nzOnKeyDown: [{ type: Output }]
};
__decorate([
WithConfig(NZ_CONFIG_COMPONENT_NAME, true), InputBoolean(),
__metadata("design:type", Boolean)
], NzRateComponent.prototype, "nzAllowClear", void 0);
__decorate([
WithConfig(NZ_CONFIG_COMPONENT_NAME, false), InputBoolean(),
__metadata("design:type", Boolean)
], NzRateComponent.prototype, "nzAllowHalf", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzRateComponent.prototype, "nzDisabled", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzRateComponent.prototype, "nzAutoFocus", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Number)
], NzRateComponent.prototype, "nzCount", void 0);
return NzRateComponent;
}());
if (false) {
/** @type {?} */
NzRateComponent.ngAcceptInputType_nzAllowClear;
/** @type {?} */
NzRateComponent.ngAcceptInputType_nzAllowHalf;
/** @type {?} */
NzRateComponent.ngAcceptInputType_nzDisabled;
/** @type {?} */
NzRateComponent.ngAcceptInputType_nzAutoFocus;
/** @type {?} */
NzRateComponent.ngAcceptInputType_nzCount;
/**
* @type {?}
* @private
*/
NzRateComponent.prototype.ulElement;
/** @type {?} */
NzRateComponent.prototype.nzAllowClear;
/** @type {?} */
NzRateComponent.prototype.nzAllowHalf;
/** @type {?} */
NzRateComponent.prototype.nzDisabled;
/** @type {?} */
NzRateComponent.prototype.nzAutoFocus;
/** @type {?} */
NzRateComponent.prototype.nzCharacter;
/** @type {?} */
NzRateComponent.prototype.nzCount;
/** @type {?} */
NzRateComponent.prototype.nzTooltips;
/** @type {?} */
NzRateComponent.prototype.nzOnBlur;
/** @type {?} */
NzRateComponent.prototype.nzOnFocus;
/** @type {?} */
NzRateComponent.prototype.nzOnHoverChange;
/** @type {?} */
NzRateComponent.prototype.nzOnKeyDown;
/** @type {?} */
NzRateComponent.prototype.classMap;
/** @type {?} */
NzRateComponent.prototype.starArray;
/** @type {?} */
NzRateComponent.prototype.starStyleArray;
/**
* @type {?}
* @private
*/
NzRateComponent.prototype.destroy$;
/**
* @type {?}
* @private
*/
NzRateComponent.prototype.hasHalf;
/**
* @type {?}
* @private
*/
NzRateComponent.prototype.hoverValue;
/**
* @type {?}
* @private
*/
NzRateComponent.prototype.isFocused;
/**
* @type {?}
* @private
*/
NzRateComponent.prototype._value;
/** @type {?} */
NzRateComponent.prototype.onChange;
/** @type {?} */
NzRateComponent.prototype.onTouched;
/** @type {?} */
NzRateComponent.prototype.nzConfigService;
/**
* @type {?}
* @private
*/
NzRateComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
NzRateComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* Generated from: rate-item.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzRateItemComponent = /** @class */ (function () {
function NzRateItemComponent() {
this.allowHalf = false;
this.itemHover = new EventEmitter();
this.itemClick = new 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: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: '[nz-rate-item]',
exportAs: 'nzRateItem',
template: "\n <div class=\"ant-rate-star-second\" (mouseover)=\"hoverRate(false); $event.stopPropagation()\" (click)=\"clickRate(false)\">\n <ng-template [ngTemplateOutlet]=\"character || defaultCharacter\"></ng-template>\n </div>\n <div class=\"ant-rate-star-first\" (mouseover)=\"hoverRate(true); $event.stopPropagation()\" (click)=\"clickRate(true)\">\n <ng-template [ngTemplateOutlet]=\"character || defaultCharacter\"></ng-template>\n </div>\n\n <ng-template #defaultCharacter>\n <i nz-icon nzType=\"star\" nzTheme=\"fill\"></i>\n </ng-template>\n "
}] }
];
NzRateItemComponent.propDecorators = {
character: [{ type: Input }],
allowHalf: [{ type: Input }],
itemHover: [{ type: Output }],
itemClick: [{ type: Output }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzRateItemComponent.prototype, "allowHalf", void 0);
return NzRateItemComponent;
}());
if (false) {
/** @type {?} */
NzRateItemComponent.ngAcceptInputType_allowHalf;
/** @type {?} */
NzRateItemComponent.prototype.character;
/** @type {?} */
NzRateItemComponent.prototype.allowHalf;
/** @type {?} */
NzRateItemComponent.prototype.itemHover;
/** @type {?} */
NzRateItemComponent.prototype.itemClick;
}
/**
* @fileoverview added by tsickle
* Generated from: rate.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzRateModule = /** @class */ (function () {
function NzRateModule() {
}
NzRateModule.decorators = [
{ type: NgModule, args: [{
exports: [NzRateComponent],
declarations: [NzRateComponent, NzRateItemComponent],
imports: [CommonModule, NzIconModule, NzToolTipModule]
},] }
];
return NzRateModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-zorro-antd-rate.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzRateComponent, NzRateItemComponent, NzRateModule };
//# sourceMappingURL=ng-zorro-antd-rate.js.map