import * as i0 from '@angular/core';
import { TemplateRef, forwardRef, Component, Input, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';

class RateComponent {
    constructor(cdr) {
        this.cdr = cdr;
        this.readonly = false;
        this.count = 5;
        this.color = '';
        /**
         * @deprecated
         * 用character替代
        */
        this.icon = '';
        this.character = '';
        this.allowHalf = false;
        this.allowClear = false;
        this.totalLevel_array = [];
        this.width = '';
    }
    /**
     * @deprecated
     * 用readonly替代
    */
    set read(value) {
        this.readonly = value;
    }
    /**
     * @deprecated
     * 用color替代
    */
    set type(value) {
        this.color = `var(--devui-${value})`;
    }
    ngOnInit() {
        for (let i = 0; i < this.count; i++) {
            this.totalLevel_array.push({ width: '0' });
        }
    }
    get isCharacterTemplate() {
        return this.character instanceof TemplateRef;
    }
    get characterTemplate() {
        return this.character;
    }
    // 只读模式配置
    setStaticRating() {
        const half_star = this.chooseValue % 1;
        const int_current_level = Math.floor(this.chooseValue);
        this.setChange(0, int_current_level + 1, '100%');
        if (half_star > 0) {
            this.totalLevel_array[int_current_level + 1]['width'] = half_star * 100 + '%';
            this.setChange(int_current_level + 2, this.count, '0');
        }
        else {
            this.setChange(int_current_level + 1, this.count, '0');
        }
    }
    // 动态模式配置
    setDynamicRating() {
        const halfStar = this.chooseValue % 1;
        const wholeStar = Math.floor(this.chooseValue);
        this.setChange(0, wholeStar + 1, '100%');
        if (this.allowHalf && halfStar) {
            this.setChange(wholeStar + 1, wholeStar + 2, '50%');
            this.setChange(wholeStar + 2, this.count, '0');
        }
        else if (this.allowClear && this.chooseValue === -1) {
            this.setChange(0, this.count, '0');
        }
        else {
            this.setChange(wholeStar + 1, this.count, '0');
        }
    }
    hoverToggle(event, index, reset = false) {
        if (this.readonly) {
            return;
        }
        if (reset) {
            // chooseValue从index取值故比真实值小1
            if (this.chooseValue >= -0.5) {
                this.setDynamicRating();
            }
            else {
                this.setChange(0, this.count, '0');
            }
        }
        else {
            this.setChange(0, index, '100%');
            if (this.allowHalf && (event.offsetX * 2 <= event.target.clientWidth)) {
                this.setChange(index, index + 1, '50%');
            }
            else {
                this.setChange(index, index + 1, '100%');
            }
            this.setChange(index + 1, this.count, '0');
        }
    }
    // 根据mouseMove，mouseLeave,select等操作，改变颜色与是否选中
    setChange(start, end, width) {
        for (let i = start; i < end; i++) {
            this.totalLevel_array[i]['width'] = width;
        }
    }
    selectValue(event, index) {
        if (this.readonly) {
            return;
        }
        this.setChange(0, index, '100%');
        const prevValue = this.chooseValue;
        if (this.allowHalf && (event.offsetX * 2 <= event.target.clientWidth)) {
            this.chooseValue = index - 0.5;
        }
        else {
            this.chooseValue = index;
        }
        if (this.allowClear && this.chooseValue === prevValue) {
            this.chooseValue = -1;
            this.setChange(0, this.count, '0');
            this.onChange(0);
        }
        else {
            if (this.allowHalf && (event.offsetX * 2 <= event.target.clientWidth)) {
                this.setChange(index, index + 1, '50%');
            }
            else {
                this.setChange(index, index + 1, '100%');
            }
            this.setChange(index + 1, this.count, '0');
            this.onChange(this.chooseValue + 1);
        }
        this.onTouched();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    writeValue(value) {
        this.chooseValue = value - 1;
        if (this.readonly) {
            this.setStaticRating();
        }
        else {
            this.setDynamicRating();
        }
    }
}
RateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
RateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: RateComponent, selector: "d-rate", inputs: { read: "read", readonly: "readonly", count: "count", color: "color", icon: "icon", character: "character", type: "type", allowHalf: "allowHalf", allowClear: "allowClear" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => RateComponent),
            multi: true
        }
    ], ngImport: i0, template: "<div class=\"devui-star-container\" (mouseleave)=\"hoverToggle($event, chooseValue, true)\">\n  <div\n    *ngFor=\"let item of totalLevel_array; let i = index\"\n    class=\"devui-star-align devui-pointer\"\n    [ngClass]=\"{ 'devui-only-read': readonly }\"\n    (mouseover)=\"hoverToggle($event, i)\"\n    (click)=\"selectValue($event, i)\"\n  >\n    <span class=\"devui-star-color {{ icon }}\">\n      <ng-container *ngIf=\"!isCharacterTemplate\">{{ character }}</ng-container>\n      <ng-container *ngIf=\"isCharacterTemplate\">\n        <ng-container *ngTemplateOutlet=\"characterTemplate\"></ng-container>\n      </ng-container>\n      <svg\n        *ngIf=\"!icon && !character\"\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g fill=\"#E3E5E9\" id=\"Mask\">\n            <polygon\n              points=\"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912\"\n            ></polygon>\n          </g>\n        </g>\n      </svg>\n    </span>\n    <span class=\"devui-star-color-active devui-active-star {{ icon }}\" [style.color]=\"color\" [style.width]=\"item.width\">\n      <ng-container *ngIf=\"!isCharacterTemplate\">{{ character }}</ng-container>\n      <ng-container *ngIf=\"isCharacterTemplate\">\n        <ng-container *ngTemplateOutlet=\"characterTemplate\"></ng-container>\n      </ng-container>\n      <svg\n        *ngIf=\"!icon && !character\"\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g [style.fill]=\"color\" id=\"Mask\">\n            <polygon\n              points=\"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912\"\n            ></polygon>\n          </g>\n        </g>\n      </svg>\n    </span>\n  </div>\n  <div style=\"clear: both\"></div>\n</div>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-star-align{float:left;font-size:16px;font-size:var(--devui-font-size-icon, 16px);margin-right:5px;position:relative;line-height:1}.devui-pointer{cursor:pointer}.devui-star-container{display:inline-block}.devui-star-color-active{color:#5e7ce0;color:var(--devui-brand, #5e7ce0);line-height:1.5}.devui-star-color-active svg g{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}.devui-active-star{position:absolute;top:0;left:0;overflow:hidden}.devui-star-color{color:#d7d8da;color:var(--devui-shape-icon-fill, #d7d8da);line-height:1.5}.devui-star-color svg g{fill:#d7d8da;fill:var(--devui-shape-icon-fill, #d7d8da)}.devui-only-read{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-rate', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => RateComponent),
                            multi: true
                        }
                    ], preserveWhitespaces: false, template: "<div class=\"devui-star-container\" (mouseleave)=\"hoverToggle($event, chooseValue, true)\">\n  <div\n    *ngFor=\"let item of totalLevel_array; let i = index\"\n    class=\"devui-star-align devui-pointer\"\n    [ngClass]=\"{ 'devui-only-read': readonly }\"\n    (mouseover)=\"hoverToggle($event, i)\"\n    (click)=\"selectValue($event, i)\"\n  >\n    <span class=\"devui-star-color {{ icon }}\">\n      <ng-container *ngIf=\"!isCharacterTemplate\">{{ character }}</ng-container>\n      <ng-container *ngIf=\"isCharacterTemplate\">\n        <ng-container *ngTemplateOutlet=\"characterTemplate\"></ng-container>\n      </ng-container>\n      <svg\n        *ngIf=\"!icon && !character\"\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g fill=\"#E3E5E9\" id=\"Mask\">\n            <polygon\n              points=\"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912\"\n            ></polygon>\n          </g>\n        </g>\n      </svg>\n    </span>\n    <span class=\"devui-star-color-active devui-active-star {{ icon }}\" [style.color]=\"color\" [style.width]=\"item.width\">\n      <ng-container *ngIf=\"!isCharacterTemplate\">{{ character }}</ng-container>\n      <ng-container *ngIf=\"isCharacterTemplate\">\n        <ng-container *ngTemplateOutlet=\"characterTemplate\"></ng-container>\n      </ng-container>\n      <svg\n        *ngIf=\"!icon && !character\"\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      >\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g [style.fill]=\"color\" id=\"Mask\">\n            <polygon\n              points=\"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912\"\n            ></polygon>\n          </g>\n        </g>\n      </svg>\n    </span>\n  </div>\n  <div style=\"clear: both\"></div>\n</div>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-star-align{float:left;font-size:16px;font-size:var(--devui-font-size-icon, 16px);margin-right:5px;position:relative;line-height:1}.devui-pointer{cursor:pointer}.devui-star-container{display:inline-block}.devui-star-color-active{color:#5e7ce0;color:var(--devui-brand, #5e7ce0);line-height:1.5}.devui-star-color-active svg g{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}.devui-active-star{position:absolute;top:0;left:0;overflow:hidden}.devui-star-color{color:#d7d8da;color:var(--devui-shape-icon-fill, #d7d8da);line-height:1.5}.devui-star-color svg g{fill:#d7d8da;fill:var(--devui-shape-icon-fill, #d7d8da)}.devui-only-read{cursor:not-allowed}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { read: [{
                type: Input
            }], readonly: [{
                type: Input
            }], count: [{
                type: Input
            }], color: [{
                type: Input
            }], icon: [{
                type: Input
            }], character: [{
                type: Input
            }], type: [{
                type: Input
            }], allowHalf: [{
                type: Input
            }], allowClear: [{
                type: Input
            }] } });

class RateModule {
}
RateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
RateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: RateModule, declarations: [RateComponent], imports: [CommonModule, FormsModule], exports: [RateComponent] });
RateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RateModule, imports: [CommonModule, FormsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RateModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, FormsModule],
                    exports: [RateComponent],
                    declarations: [RateComponent],
                    providers: [],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { RateComponent, RateModule };
//# sourceMappingURL=ng-devui-rate.mjs.map
