import { Component } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../../../../ui-kit/popover/popover.component";
import * as i3 from "../../../../../ui-kit/popover/popover.directive";
export class StarRatingComponent {
    constructor() {
        this.specificValue = true;
        this.scaleRange = false;
    }
    ngOnInit() {
    }
    clickSpecificValue() {
        this.specificValue = true;
        this.scaleRange = false;
    }
    clickScaleRange() {
        this.scaleRange = true;
        this.specificValue = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StarRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StarRatingComponent, selector: "app-star-rating", ngImport: i0, template: "<div class=\"star-rating vx-d-flex vx-align-center\">\n    <div class=\"star-rating-item vx-mr-3\">\n        <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SHAPE</div>\n        <div class=\"rating-select-box vx-d-flex vx-align-center vx-justify-between vx-p-2\" appPopover (click)=\"shape.popover()\" position=\"right\">\n            <span class=\"value vx-fs-12 vx-paragraph-txt\">Number</span>\n            <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n        </div>\n        <app-popover #shape>\n            <div class=\"rating-popup\">\n                <ul class=\"vx-p-0 vx-m-0\">\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">Number</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">Smiley</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">Thumb</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">Star</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">Heart</span>\n                    </li>\n                </ul>\n            </div>\n        </app-popover>\n    </div>\n    <div class=\"star-rating-item vx-mr-3\">\n        <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SCALE</div>\n        <div class=\"rating-select-box vx-d-flex vx-align-center vx-justify-between vx-p-2\" appPopover (click)=\"scale.popover()\" position=\"right\">\n            <span class=\"value vx-fs-12 vx-paragraph-txt\">2</span>\n            <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n        </div>\n        <app-popover #scale>\n            <div class=\"rating-popup\">\n                <ul class=\"vx-p-0 vx-m-0\">\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">2</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">3</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">4</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">5</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">6</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">7</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">8</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">9</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">10</span>\n                    </li>\n                </ul>\n            </div>\n        </app-popover>\n    </div>\n    <div class=\"star-rating-item vx-mr-3\">\n        <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">COLOR</div>\n        <div class=\"rating-select-box vx-d-flex vx-align-center vx-justify-between vx-p-2\">\n            <div class=\"vx-d-flex vx-align-center\">\n                <span class=\"color-box vx-mr-1\" style=\"background: #1e5dd3;\"></span>\n                <span class=\"value vx-fs-12 vx-paragraph-txt\">#1e5dd3</span>\n            </div>\n            <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n            <input type=\"color\">\n        </div>\n    </div>\n</div>\n\n<div class=\"star-rating-label vx-mt-5 vx-pt-3\">\n    <div class=\"heading vx-fs-12 vx-fw-500 vx-label-txt vx-mb-1\">Add rating label</div>\n    <div class=\"label-menu vx-mt-3 vx-mb-5\">\n        <ul class=\"vx-d-flex vx-p-0 vx-m-0\">\n            <li class=\"vx-mr-5\" [class.active]=\"specificValue\"><button (click)=\"clickSpecificValue()\" class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-m-0 vx-p-0 vx-d-flex vx-align-center\">SPECIFIC VALUE</button></li>\n            <li class=\"vx-mr-5\" [class.active]=\"scaleRange\"><button (click)=\"clickScaleRange()\" class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-m-0 vx-p-0 vx-d-flex vx-align-center\">SCALE RANGE</button></li>\n        </ul>\n    </div>\n    <div *ngIf=\"specificValue\" class=\"value-list\">\n        <ul class=\"vx-p-0 vx-m-0\">\n            <li class=\"vx-mb-2\">\n                <div class=\"label\">\n                    <input type=\"text\" placeholder=\"Please enter a response\" />\n                    <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-text-center vx-pr-2\">1</div>\n                </div>\n            </li>\n        </ul>\n    </div>\n    <div *ngIf=\"scaleRange\" class=\"range-list vx-d-flex vx-align-center\">\n        <input type=\"text\" value=\"Not at all likely\" />\n        <span class=\"vx-fs-12 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-3 vx-mr-3\">TO</span>\n        <input type=\"text\" value=\"Extreme likely\" />\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";.star-rating-item{width:30%}.star-rating-item .rating-select-box{border:1px solid #DBDBDB;border-radius:.25rem;cursor:pointer;position:relative}.star-rating-item .rating-select-box .color-box{border-radius:.125rem;width:1.125rem;height:1.125rem}.star-rating-item .rating-select-box input[type=color]{position:absolute;inset:0;margin:0;width:100%;height:100%;cursor:pointer;opacity:0}.star-rating-label .label-menu ul{border-bottom:1px solid #F1F1F1;list-style-type:none}.star-rating-label .label-menu ul li button{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;height:1.5rem}.star-rating-label .label-menu ul li.active button{border-color:#1e5dd3;color:#1e5dd3}.star-rating-label .value-list ul{list-style-type:none}.star-rating-label .value-list ul li .label{border:1px solid #DBDBDB;border-radius:.25rem;height:2.5rem;transition:all .3s ease-in-out;position:relative}.star-rating-label .value-list ul li .label:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}.star-rating-label .value-list ul li .label input[type=text]{background:#fff;border:none;border-radius:.25rem;color:#747576;font-size:12px;padding:.5rem .75rem .5rem 3.5rem;width:100%;height:2.375rem;outline:none}.star-rating-label .value-list ul li .label input[type=text]:focus{border-color:unset;box-shadow:unset}.star-rating-label .value-list ul li .label .heading{position:absolute;top:.625rem;left:.75rem;width:30px}.star-rating-label .value-list ul li .label .heading:before{background:#dbdbdb;content:\"\";position:absolute;top:0;right:0;width:1px;height:1rem}.star-rating-label .range-list input{background:#fff;border:1px solid #DBDBDB;border-radius:.25rem;color:#747576;font-size:12px;padding:.5rem .75rem;width:100%;height:2.375rem;transition:all .3s ease-in-out;outline:none}.star-rating-label .range-list input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}.rating-popup{background:#fff;border-radius:.25rem;box-shadow:0 3px 6px #1c5bd140;width:11.875rem}.rating-popup ul{list-style-type:none;max-height:10.75rem;overflow-y:auto}.rating-popup ul li{border-bottom:1px solid #F1F1F1;position:relative}.rating-popup ul li:last-of-type{border-bottom:none}.rating-popup ul li:hover{background:#f1f1f1}.rating-popup ul li input[type=radio]{inset:0;margin:0;width:100%;height:100%;position:absolute;opacity:0;text-indent:-9999px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i3.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StarRatingComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-star-rating', template: "<div class=\"star-rating vx-d-flex vx-align-center\">\n    <div class=\"star-rating-item vx-mr-3\">\n        <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SHAPE</div>\n        <div class=\"rating-select-box vx-d-flex vx-align-center vx-justify-between vx-p-2\" appPopover (click)=\"shape.popover()\" position=\"right\">\n            <span class=\"value vx-fs-12 vx-paragraph-txt\">Number</span>\n            <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n        </div>\n        <app-popover #shape>\n            <div class=\"rating-popup\">\n                <ul class=\"vx-p-0 vx-m-0\">\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">Number</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">Smiley</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">Thumb</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">Star</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">Heart</span>\n                    </li>\n                </ul>\n            </div>\n        </app-popover>\n    </div>\n    <div class=\"star-rating-item vx-mr-3\">\n        <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SCALE</div>\n        <div class=\"rating-select-box vx-d-flex vx-align-center vx-justify-between vx-p-2\" appPopover (click)=\"scale.popover()\" position=\"right\">\n            <span class=\"value vx-fs-12 vx-paragraph-txt\">2</span>\n            <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n        </div>\n        <app-popover #scale>\n            <div class=\"rating-popup\">\n                <ul class=\"vx-p-0 vx-m-0\">\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">2</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">3</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">4</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">5</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">6</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">7</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">8</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">9</span>\n                    </li>\n                    <li class=\"vx-p-2 vx-pt-1 vx-pb-1\">\n                        <input type=\"radio\"/>\n                        <span class=\"vx-fs-12 vx-paragraph-txt\">10</span>\n                    </li>\n                </ul>\n            </div>\n        </app-popover>\n    </div>\n    <div class=\"star-rating-item vx-mr-3\">\n        <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">COLOR</div>\n        <div class=\"rating-select-box vx-d-flex vx-align-center vx-justify-between vx-p-2\">\n            <div class=\"vx-d-flex vx-align-center\">\n                <span class=\"color-box vx-mr-1\" style=\"background: #1e5dd3;\"></span>\n                <span class=\"value vx-fs-12 vx-paragraph-txt\">#1e5dd3</span>\n            </div>\n            <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n            <input type=\"color\">\n        </div>\n    </div>\n</div>\n\n<div class=\"star-rating-label vx-mt-5 vx-pt-3\">\n    <div class=\"heading vx-fs-12 vx-fw-500 vx-label-txt vx-mb-1\">Add rating label</div>\n    <div class=\"label-menu vx-mt-3 vx-mb-5\">\n        <ul class=\"vx-d-flex vx-p-0 vx-m-0\">\n            <li class=\"vx-mr-5\" [class.active]=\"specificValue\"><button (click)=\"clickSpecificValue()\" class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-m-0 vx-p-0 vx-d-flex vx-align-center\">SPECIFIC VALUE</button></li>\n            <li class=\"vx-mr-5\" [class.active]=\"scaleRange\"><button (click)=\"clickScaleRange()\" class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-m-0 vx-p-0 vx-d-flex vx-align-center\">SCALE RANGE</button></li>\n        </ul>\n    </div>\n    <div *ngIf=\"specificValue\" class=\"value-list\">\n        <ul class=\"vx-p-0 vx-m-0\">\n            <li class=\"vx-mb-2\">\n                <div class=\"label\">\n                    <input type=\"text\" placeholder=\"Please enter a response\" />\n                    <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-text-center vx-pr-2\">1</div>\n                </div>\n            </li>\n        </ul>\n    </div>\n    <div *ngIf=\"scaleRange\" class=\"range-list vx-d-flex vx-align-center\">\n        <input type=\"text\" value=\"Not at all likely\" />\n        <span class=\"vx-fs-12 vx-fw-500 vx-label-txt vx-tt-uppercase vx-ml-3 vx-mr-3\">TO</span>\n        <input type=\"text\" value=\"Extreme likely\" />\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";.star-rating-item{width:30%}.star-rating-item .rating-select-box{border:1px solid #DBDBDB;border-radius:.25rem;cursor:pointer;position:relative}.star-rating-item .rating-select-box .color-box{border-radius:.125rem;width:1.125rem;height:1.125rem}.star-rating-item .rating-select-box input[type=color]{position:absolute;inset:0;margin:0;width:100%;height:100%;cursor:pointer;opacity:0}.star-rating-label .label-menu ul{border-bottom:1px solid #F1F1F1;list-style-type:none}.star-rating-label .label-menu ul li button{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;height:1.5rem}.star-rating-label .label-menu ul li.active button{border-color:#1e5dd3;color:#1e5dd3}.star-rating-label .value-list ul{list-style-type:none}.star-rating-label .value-list ul li .label{border:1px solid #DBDBDB;border-radius:.25rem;height:2.5rem;transition:all .3s ease-in-out;position:relative}.star-rating-label .value-list ul li .label:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}.star-rating-label .value-list ul li .label input[type=text]{background:#fff;border:none;border-radius:.25rem;color:#747576;font-size:12px;padding:.5rem .75rem .5rem 3.5rem;width:100%;height:2.375rem;outline:none}.star-rating-label .value-list ul li .label input[type=text]:focus{border-color:unset;box-shadow:unset}.star-rating-label .value-list ul li .label .heading{position:absolute;top:.625rem;left:.75rem;width:30px}.star-rating-label .value-list ul li .label .heading:before{background:#dbdbdb;content:\"\";position:absolute;top:0;right:0;width:1px;height:1rem}.star-rating-label .range-list input{background:#fff;border:1px solid #DBDBDB;border-radius:.25rem;color:#747576;font-size:12px;padding:.5rem .75rem;width:100%;height:2.375rem;transition:all .3s ease-in-out;outline:none}.star-rating-label .range-list input:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}.rating-popup{background:#fff;border-radius:.25rem;box-shadow:0 3px 6px #1c5bd140;width:11.875rem}.rating-popup ul{list-style-type:none;max-height:10.75rem;overflow-y:auto}.rating-popup ul li{border-bottom:1px solid #F1F1F1;position:relative}.rating-popup ul li:last-of-type{border-bottom:none}.rating-popup ul li:hover{background:#f1f1f1}.rating-popup ul li input[type=radio]{inset:0;margin:0;width:100%;height:100%;position:absolute;opacity:0;text-indent:-9999px;cursor:pointer}\n"] }]
        }], ctorParameters: function () { return []; } });
//# sourceMappingURL=data:application/json;base64, 