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

class RatingScaleComponent {
    nodes;
    startLabel;
    endLabel;
    disabled = false;
    value;
    _onChange;
    _onTouched;
    writeValue(value) {
        if (!this.disabled) {
            this.value = value;
        }
    }
    registerOnChange(onChange) {
        this._onChange = onChange;
    }
    registerOnTouched(onTouched) {
        this._onTouched = onTouched;
    }
    onSelect(rating) {
        this.value = rating;
        if (this._onChange) {
            this._onChange(this.value);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RatingScaleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RatingScaleComponent, selector: "s-rating-scale", inputs: { nodes: "nodes", startLabel: "startLabel", endLabel: "endLabel", disabled: "disabled" }, providers: [{
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => RatingScaleComponent),
                multi: true,
            }], ngImport: i0, template: "<div\n    class=\"rating-scale\"\n    [ngClass]=\"{ 'rating-scale--disabled': disabled }\">\n    <div class=\"nodes\">\n        @for (node of nodes; track node.id) {\n            <button\n                class=\"node\"\n                [ngClass]=\"{ 'node--selected': value?.id === node.id && !disabled }\"\n                tabindex=\"0\"\n                (click)=\"onSelect(node)\">\n                @if (node.icon) {\n                    <span\n                        class=\"icon fas\"\n                        [ngClass]=\"node.icon\">\n                    </span>\n                }\n                @if (node.title) {\n                    <span class=\"label\">{{ node.title }}</span>\n                }\n            </button>\n        }\n    </div>\n    <div class=\"labels\">\n        <span>{{ startLabel }}</span>\n        <span>{{ endLabel }}</span>\n    </div>\n</div>", styles: [".rating-scale{display:flex;flex-direction:column}.rating-scale .nodes{display:flex}.rating-scale .nodes .node{align-items:center;background-color:#fff;border-color:#7892a1;border-radius:6px;border-style:solid;border-width:1px;display:flex;flex-grow:1;justify-content:center;margin:0 2px;padding:8px}.rating-scale .nodes .node .icon{color:#6e7280;font-size:1rem}.rating-scale .nodes .node .label{color:#212533;font-size:.875rem;font-weight:400;line-height:150%}.rating-scale .nodes .node .icon,.rating-scale .nodes .node .label{margin:6px}.rating-scale .nodes .node--selected{background-color:#d5e8ec;border-color:#428bca;color:#428bca}.rating-scale .nodes .node:first-child{margin-left:0}.rating-scale .nodes .node:last-child{margin-right:0}.rating-scale .labels{display:flex;justify-content:space-between;padding:12px 0}.rating-scale .labels span{color:#080808;font-family:\"Open Sans\" sans-serif;font-size:.875rem;font-weight:400;line-height:150%}.rating-scale--disabled{opacity:.5}.rating-scale:not(.rating-scale--disabled) .node{cursor:pointer}.rating-scale:not(.rating-scale--disabled) .node:hover{background-color:#dedce5}.rating-scale:not(.rating-scale--disabled) .node:focus{border-width:2px;outline:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RatingScaleComponent, decorators: [{
            type: Component,
            args: [{ selector: "s-rating-scale", providers: [{
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => RatingScaleComponent),
                            multi: true,
                        }], template: "<div\n    class=\"rating-scale\"\n    [ngClass]=\"{ 'rating-scale--disabled': disabled }\">\n    <div class=\"nodes\">\n        @for (node of nodes; track node.id) {\n            <button\n                class=\"node\"\n                [ngClass]=\"{ 'node--selected': value?.id === node.id && !disabled }\"\n                tabindex=\"0\"\n                (click)=\"onSelect(node)\">\n                @if (node.icon) {\n                    <span\n                        class=\"icon fas\"\n                        [ngClass]=\"node.icon\">\n                    </span>\n                }\n                @if (node.title) {\n                    <span class=\"label\">{{ node.title }}</span>\n                }\n            </button>\n        }\n    </div>\n    <div class=\"labels\">\n        <span>{{ startLabel }}</span>\n        <span>{{ endLabel }}</span>\n    </div>\n</div>", styles: [".rating-scale{display:flex;flex-direction:column}.rating-scale .nodes{display:flex}.rating-scale .nodes .node{align-items:center;background-color:#fff;border-color:#7892a1;border-radius:6px;border-style:solid;border-width:1px;display:flex;flex-grow:1;justify-content:center;margin:0 2px;padding:8px}.rating-scale .nodes .node .icon{color:#6e7280;font-size:1rem}.rating-scale .nodes .node .label{color:#212533;font-size:.875rem;font-weight:400;line-height:150%}.rating-scale .nodes .node .icon,.rating-scale .nodes .node .label{margin:6px}.rating-scale .nodes .node--selected{background-color:#d5e8ec;border-color:#428bca;color:#428bca}.rating-scale .nodes .node:first-child{margin-left:0}.rating-scale .nodes .node:last-child{margin-right:0}.rating-scale .labels{display:flex;justify-content:space-between;padding:12px 0}.rating-scale .labels span{color:#080808;font-family:\"Open Sans\" sans-serif;font-size:.875rem;font-weight:400;line-height:150%}.rating-scale--disabled{opacity:.5}.rating-scale:not(.rating-scale--disabled) .node{cursor:pointer}.rating-scale:not(.rating-scale--disabled) .node:hover{background-color:#dedce5}.rating-scale:not(.rating-scale--disabled) .node:focus{border-width:2px;outline:none}\n"] }]
        }], propDecorators: { nodes: [{
                type: Input,
                args: [{ required: true }]
            }], startLabel: [{
                type: Input
            }], endLabel: [{
                type: Input
            }], disabled: [{
                type: Input
            }] } });

class RatingScaleModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RatingScaleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: RatingScaleModule, declarations: [RatingScaleComponent], imports: [CommonModule,
            ReactiveFormsModule], exports: [RatingScaleComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RatingScaleModule, imports: [CommonModule,
            ReactiveFormsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RatingScaleModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        ReactiveFormsModule,
                    ],
                    declarations: [RatingScaleComponent],
                    exports: [RatingScaleComponent],
                }]
        }] });

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

export { RatingScaleComponent, RatingScaleModule };
//# sourceMappingURL=seniorsistemas-angular-components-rating-scale.mjs.map
