carriera-intern-components 1.1.25 → 1.1.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -13,6 +13,6 @@ export declare const INPUT_CHARACTER_SETS: {
|
|
|
13
13
|
readonly EMAIL_SPECIAL: readonly ["@", ".", "-", "_", "+"];
|
|
14
14
|
readonly EMAIL_CHARACTERS: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z" | "." | "@" | "+" | "-" | "_")[];
|
|
15
15
|
readonly SPECIAL_EXCEPT_NAME_FRIENDLY: ("*" | "." | "," | "!" | "?" | ";" | ":" | "@" | "#" | "$" | "%" | "&" | "+" | "-" | "=" | "_" | "|" | "~" | "`" | "^" | "<" | ">" | "/" | "\\" | "(" | ")" | "[" | "]" | "{" | "}" | "\"" | "'")[];
|
|
16
|
-
readonly NAME_CHARACTER_EXCLUSIONS: ("0" | "1" | "2" | "3" | "4" | "5" | "
|
|
16
|
+
readonly NAME_CHARACTER_EXCLUSIONS: ("0" | "1" | "2" | "3" | "4" | "5" | "*" | "6" | "7" | "8" | "9" | "." | "," | "!" | "?" | ";" | ":" | "@" | "#" | "$" | "%" | "&" | "+" | "-" | "=" | "_" | "|" | "~" | "`" | "^" | "<" | ">" | "/" | "\\" | "(" | ")" | "[" | "]" | "{" | "}" | "\"" | "'")[];
|
|
17
17
|
readonly SPECIAL: ("*" | "." | "," | "!" | "?" | ";" | ":" | "@" | "#" | "$" | "%" | "&" | "+" | "-" | "=" | "_" | "|" | "~" | "`" | "^" | "<" | ">" | "/" | "\\" | "(" | ")" | "[" | "]" | "{" | "}" | "\"" | "'")[];
|
|
18
18
|
};
|
|
@@ -7124,11 +7124,11 @@ class SingleReviewComponent {
|
|
|
7124
7124
|
event.preventDefault();
|
|
7125
7125
|
}
|
|
7126
7126
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SingleReviewComponent, deps: [{ token: i2$1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
7127
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SingleReviewComponent, isStandalone: true, selector: "cai-single-review", inputs: { type: "type", singleReview: "singleReview" }, outputs: { deleteReview: "deleteReview", addRating: "addRating", onAddedReview: "onAddedReview" }, providers: [DatePipe], ngImport: i0, template: "@let avatarFile = singleReview.companyUser?.avatarFile; @let driver =\navatarFile?.driver; @let commentLength = singleReview?.comment?.length; @let\ncompanyUser = this.singleReview.companyUser; @let currentUser =\nthis.singleReview.isItCurrentCompanyUser; @let comment =\nthis.singleReview.comment; @let edited = this.singleReview.isEdited;\n<div\n [class]=\"{\n 'review-wrapper': type !== ReviewType.Details,\n 'details-wrapper': type === ReviewType.Details,\n 'not-editing': !editing(),\n 'dark': type === ReviewType.Table\n }\"\n (click)=\"onExpandToggle()\"\n>\n @if(type === ReviewType.Details || type === ReviewType.Modal){\n <div class=\"upper\">\n <div class class=\"info\">\n <cai-avatar\n [driver]=\"driver!\"\n [size]=\"avatarFile!.size\"\n [rounded]=\"avatarFile!.rounded\"\n ></cai-avatar>\n <span class=\"name\">{{ companyUser?.fullName }}</span>\n @if(currentUser && !editing()){\n <span class=\"personal\">(You)</span>\n\n } @if(!editing() && currentRating){\n <span class=\"dot\">\u2022</span>\n\n <svg-icon\n [name]=\"currentRating === 'like' ? 'cai-like' : 'cai-dislike'\"\n [class.current-rating-like]=\"currentRating === 'like'\"\n [class.current-rating-dislike]=\"currentRating === 'dislike'\"\n ></svg-icon>\n }\n @if(editing()){\n <span class=\"description\">{{\n !this.edited() ? \"\u2022 Posting Publicly\" : \"\u2022 Edit Review\"\n }}</span>\n } @if(!editing()){\n <span class=\"edit-time\">{{ newTime() }}</span>\n @if(this.edited()){\n <span class=\"edited\">\u2022 Edited</span>\n } }\n </div>\n\n @if(editing()){\n <div class=\"rating\">\n @let activeLike = this.singleReview.thumb === 'like'; @let activeDislike =\n this.singleReview.thumb === 'dislike';\n <div\n class=\"svg-group\"\n [ngbTooltip]=\"activeLike ? 'Remove' : 'Like'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-like\"\n class=\"like-icon\"\n (click)=\"onRate('like')\"\n [class.like-active]=\"activeLike\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n [ngbTooltip]=\"activeDislike ? 'Remove' : 'Dislike'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-dislike\"\n class=\"dislike-icon\"\n (click)=\"onRate('dislike')\"\n [class.dislike-active]=\"activeDislike\"\n >\n </svg-icon>\n </div>\n\n <div class=\"separator\"></div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Post Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-checkmark\"\n class=\"checkmark-icon\"\n (click)=\"onSaveChanges()\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n ngbTooltip=\"Cancel\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"editing.set(false)\"\n ></svg-icon>\n </div>\n </div>\n }@else if(currentUser){\n <div class=\"controls\">\n <div\n class=\"svg-group\"\n ngbTooltip=\"Edit Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-edit\"\n (click)=\"onEdit()\"\n class=\"pencil-icon\"\n ></svg-icon>\n </div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Delete Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-delete\"\n class=\"trash-icon\"\n (click)=\"onDelete()\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n @if(comment || currentContent() || editing()){\n <div\n class=\"lower\"\n [contentEditable]=\"editing() ? 'true' : 'false'\"\n data-placeholder=\"Share details of your own experience...\"\n [innerHTML]=\"renderedContent()\"\n (input)=\"onChangeContent($event)\"\n (keydown)=\"limitLength($event)\"\n >\n nn\n </div>\n } }<!-- @else {\n <div class=\"upper\">\n <div class class=\"info\">\n <cai-avatar\n [driver]=\"avatarFile!.driver\"\n [size]=\"avatarFile!.size\"\n [rounded]=\"avatarFile!.rounded\"\n ></cai-avatar>\n <div class=\"column\">\n <div class=\"upper-row\">\n <span class=\"name\">{{ companyUser?.fullName }}</span>\n @if(currentUser && !editing()){\n <span class=\"personal\">(Me)</span>\n\n } @if(!editing()){\n <svg-icon\n [name]=\"\n currentRating === 'like'\n ? 'cai-like'\n : currentRating === 'dislike'\n ? 'cai-dislike'\n : ''\n \"\n [class.current-rating-like]=\"currentRating === 'like'\"\n [class.current-rating-dislike]=\"currentRating === 'dislike'\"\n ></svg-icon>\n }\n </div>\n <div class=\"lower-row\">\n @if(editing()){\n <span class=\"description\">{{\n !edited ? \"\u2022 Posting Publicly\" : \"Edit Review\"\n }}</span>\n } @if(!editing()){\n <span class=\"edit-time\">{{ newTime() }}</span>\n @if(edited){\n <span class=\"edited\">\u2022 Edited</span>\n } }\n </div>\n </div>\n </div>\n\n @if(editing()){\n <div class=\"rating\">\n <div\n class=\"svg-group\"\n ngbTooltip=\"Like\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-like\"\n class=\"like-icon\"\n (click)=\"onRate('like')\"\n [class.like-active]=\"currentRating === 'like'\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n ngbTooltip=\"Dislike\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-dislike\"\n class=\"dislike-icon\"\n (click)=\"onRate('dislike')\"\n [class.dislike-active]=\"currentRating === 'dislike'\"\n >\n </svg-icon>\n </div>\n\n <div class=\"separator\"></div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Post Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-checkmark\"\n class=\"checkmark-icon\"\n (click)=\"onSaveChanges()\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n ngbTooltip=\"Cancel\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"onCancelReview()\"\n ></svg-icon>\n </div>\n </div>\n }@else if(canExpand() && !expanded()){\n <svg-icon name=\"cai-expand\" class=\"expand-icon\" />\n }@else if(canExpand() && !currentUser && expanded()){\n <svg-icon name=\"cai-expand\" class=\"collapse-icon\" />\n } @else if(currentUser){\n <div class=\"controls\">\n <div\n class=\"svg-group\"\n ngbTooltip=\"Edit Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-edit\"\n (click)=\"onEdit()\"\n class=\"pencil-icon\"\n ></svg-icon>\n </div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Delete Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-delete\"\n class=\"trash-icon\"\n (click)=\"onDelete()\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n @if(comment || currentContent() || editing()){\n <div\n class=\"lower\"\n [contentEditable]=\"editing() ? 'true' : 'false'\"\n data-placeholder=\"Share details of your own experience...\"\n (input)=\"onChangeContent($event)\"\n >\n {{ renderedContent() }}\n </div>\n }} -->\n</div>\n@if(type === ReviewType.Table){\n<div class=\"bottom-divider-light\"></div>\n\n} <!-- @if(currentUser && (type === ReviewType.Details || type ===\nReviewType.Modal)){\n<div class=\"bottom-divider-dark\"></div>\n\n} -->\n", styles: ["svg-icon{width:18px!important;height:18px!important;display:grid;place-items:center}svg-icon path{fill:#919191}svg-icon svg{display:grid;place-items:center;width:18px;height:18px}.column{display:flex;flex-direction:column}.personal{font-weight:700;line-height:18px;color:#f77d3b}.edited{color:#3b73ed;font-weight:500;line-height:18px}.current-rating-like path{fill:#56b4ac!important}.current-rating-dislike path{fill:#e66767!important}.active-like :hover .like-icon{color:red}.review-wrapper:not(.dark){background-color:#1d1d1d;max-width:456px;border-radius:2px;padding:2px}.review-wrapper:not(.dark).not-editing{background-color:transparent}.review-wrapper:not(.dark).not-editing .upper .info{display:flex;align-items:center}.review-wrapper:not(.dark).not-editing .upper .info .name{color:#000}.review-wrapper:not(.dark).not-editing .upper .controls{display:flex;align-items:center}.review-wrapper:not(.dark).not-editing .upper .edit-time{font-size:14px}.review-wrapper:not(.dark).not-editing .lower{background-color:transparent;color:#000;max-width:100%;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word}.review-wrapper:not(.dark).not-editing .controls{display:flex;gap:4px;visibility:hidden}.review-wrapper:not(.dark).not-editing .controls .pencil-icon:hover+span{opacity:1}.review-wrapper:not(.dark).not-editing .controls .trash-icon:hover{background-color:#f4bebe!important}.review-wrapper:not(.dark).not-editing .controls .trash-icon:hover path{fill:#c20c0c!important}.review-wrapper:not(.dark).not-editing .controls .trash-icon:hover+span{opacity:1}.review-wrapper:not(.dark).not-editing .controls svg-icon{display:grid;place-items:center;width:18px;height:18px;padding:2px;cursor:pointer}.review-wrapper:not(.dark).not-editing .controls svg-icon:hover{background-color:#aaa}.review-wrapper:not(.dark).not-editing .controls svg-icon:hover path{fill:#424242}.review-wrapper:not(.dark).not-editing:hover{background-color:#eee}.review-wrapper:not(.dark).not-editing:hover .controls{visibility:visible}.review-wrapper:not(.dark) .upper{padding:2px 2px 2px 4px;display:flex;justify-content:space-between}.review-wrapper:not(.dark) .upper .info{display:flex;align-items:center;gap:4px}.review-wrapper:not(.dark) .upper .info .name{line-height:18px;font-weight:600;color:#fff}.review-wrapper:not(.dark) .upper .info .dot{color:#919191}.review-wrapper:not(.dark) .upper .info .description{color:#919191;font-weight:500;line-height:18px}.review-wrapper:not(.dark) .upper .info .edit-time{color:#919191;font-weight:500;line-height:18px}.review-wrapper:not(.dark) .upper .rating{display:flex;gap:4px;align-items:center;padding-bottom:4px}.review-wrapper:not(.dark) .upper .rating .like-icon{display:inline-block;transform:scaleX(-1);display:grid;place-items:center;background-color:transparent!important}.review-wrapper:not(.dark) .upper .rating .like-icon:hover+span{opacity:1}.review-wrapper:not(.dark) .upper .rating .like-icon:hover path{fill:#ccc}.review-wrapper:not(.dark) .upper .rating .like-icon path{fill:#919191}.review-wrapper:not(.dark) .upper .rating .like-icon.like-active :hover path{fill:#b6dfdb}.review-wrapper:not(.dark) .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper:not(.dark) .upper .rating .dislike-icon{display:grid;place-items:center;background-color:transparent!important}.review-wrapper:not(.dark) .upper .rating .dislike-icon:hover+span{opacity:1}.review-wrapper:not(.dark) .upper .rating .dislike-icon:hover path{fill:#ccc}.review-wrapper:not(.dark) .upper .rating .dislike-icon path{fill:#919191}.review-wrapper:not(.dark) .upper .rating .dislike-icon.dislike-active :hover path{fill:#e87c7c}.review-wrapper:not(.dark) .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper:not(.dark) .upper .rating .separator{border:1px solid #919191;height:14px}.review-wrapper:not(.dark) .upper .rating svg-icon{width:18px;height:18px;display:grid;place-items:center;background-color:#ffffffb2}.review-wrapper:not(.dark) .upper .rating svg-icon:hover{cursor:pointer}.review-wrapper:not(.dark) .upper .rating .checkmark-icon{transition:transform .2s ease-in-out}.review-wrapper:not(.dark) .upper .rating .checkmark-icon:hover{background-color:#fff;transform:scale(1.2222222222)}.review-wrapper:not(.dark) .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper:not(.dark) .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper:not(.dark) .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper:not(.dark) .upper .rating .checkmark-icon path{fill:#1d1d1d}.review-wrapper:not(.dark) .upper .rating .cancel-icon{transition:transform .2s ease-in-out}.review-wrapper:not(.dark) .upper .rating .cancel-icon:hover{background-color:#fff;transform:scale(1.2222222222)}.review-wrapper:not(.dark) .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper:not(.dark) .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper:not(.dark) .upper .rating .cancel-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper:not(.dark) .upper .rating .cancel-icon path{fill:#1d1d1d}.profile-img{width:22px}.lower{color:#fff;outline:none;overflow-y:auto;padding:2px 4px 4px;display:block;background-color:#1d1d1d;border-radius:2px;line-height:18px}.lower:hover{cursor:pointer}.lower:empty:after{content:attr(data-placeholder);color:#919191}.svg-group{position:relative;display:flex;align-items:center}.bottom-divider-dark{border-bottom:1px solid #DADADA}.bottom-divider-light{border-bottom:1px solid #424242}svg-icon{display:inline-block;border-radius:1px;display:grid;place-items:center}svg-icon:hover{cursor:pointer}svg-icon svg{width:14px;height:14px}.review-wrapper.dark{background-color:#dadada!important;color:#919191;padding:2px}.review-wrapper.dark .upper{display:flex;align-items:center;padding:0 2px}.review-wrapper.dark .upper .info{display:flex;align-items:center;gap:4px;padding:0 2px}.review-wrapper.dark .upper .info .column{font-size:11px}.review-wrapper.dark .upper .info .column .upper-row{display:flex;gap:4px}.review-wrapper.dark .upper .info .column .upper-row .name{font-weight:600;color:#424242}.review-wrapper.dark .upper .info .column .upper-row svg-icon{width:18px!important;height:18px;display:flex;align-items:center}.review-wrapper.dark .upper .info .column .lower-row{display:flex;gap:4px}.review-wrapper.dark .upper .rating{display:flex;margin-left:auto;gap:4px;padding:2px 0}.review-wrapper.dark .upper .rating .like-icon{width:14px;height:14px;transform:scaleX(-1)}.review-wrapper.dark .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper.dark .upper .rating .like-icon:hover:not(.like-active) path{fill:#424242}.review-wrapper.dark .upper .rating .dislike-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.dark .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper.dark .upper .rating .dislike-icon:hover:not(.dislike-active) path{fill:#424242}.review-wrapper.dark .upper .rating .checkmark-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark .upper .rating .checkmark-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper.dark .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper.dark .upper .rating .checkmark-icon path{fill:#dadada}.review-wrapper.dark .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.dark .upper .rating .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark .upper .rating .cancel-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper.dark .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper.dark .upper .rating .cancel-icon path{fill:#dadada}.review-wrapper.dark .upper .rating .cancel-icon svg{fill:transparent!important;width:14px;border-radius:1px}.review-wrapper.dark .upper .controls{margin-left:auto;display:flex;gap:4px;padding:0 2px;visibility:hidden}.review-wrapper.dark .upper .controls .pencil-icon{padding:2px}.review-wrapper.dark .upper .controls .pencil-icon:hover{background-color:#6c6c6c}.review-wrapper.dark .upper .controls .pencil-icon:hover path{fill:#dadada}.review-wrapper.dark .upper .controls .trash-icon{padding:2px}.review-wrapper.dark .upper .controls .trash-icon:hover{background-color:#6c6c6c}.review-wrapper.dark .upper .controls .trash-icon:hover path{fill:#dadada}.review-wrapper.dark:hover{cursor:pointer}.review-wrapper.dark:hover .controls{visibility:visible!important}.review-wrapper.dark .lower{background-color:#dadada!important;color:#2f2f2f}.review-wrapper.dark.not-editing{background-color:#2f2f2f!important}.review-wrapper.dark.not-editing .upper{background-color:transparent}.review-wrapper.dark.not-editing .upper .name{color:#fff!important}.review-wrapper.dark.not-editing .lower{background-color:#2f2f2f!important;color:#fff!important}.review-wrapper.dark.not-editing:hover,.review-wrapper.dark.not-editing:hover .lower{background-color:#424242!important}.review-wrapper.dark.not-editing:hover .expand-icon,.review-wrapper.dark.not-editing:hover .collapse-icon{opacity:1}.expand-icon{padding:4px 2px;margin-left:auto;opacity:0}.expand-icon path{fill:#ccc}.collapse-icon{transform:rotate(180deg);padding:4px 2px;margin-left:auto;opacity:0}.collapse-icon path{fill:#ccc}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: AvatarComponent, selector: "cai-avatar", inputs: ["driver", "size", "rounded", "inverse"] }, { kind: "ngmodule", type: NgbPopoverModule }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbTooltipModule }] });
|
|
7127
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SingleReviewComponent, isStandalone: true, selector: "cai-single-review", inputs: { type: "type", singleReview: "singleReview" }, outputs: { deleteReview: "deleteReview", addRating: "addRating", onAddedReview: "onAddedReview" }, providers: [DatePipe], ngImport: i0, template: "@let avatarFile = singleReview.companyUser?.avatarFile; @let driver =\navatarFile?.driver; @let commentLength = singleReview?.comment?.length; @let\ncompanyUser = this.singleReview.companyUser; @let currentUser =\nthis.singleReview.isItCurrentCompanyUser; @let comment =\nthis.singleReview.comment; @let edited = this.singleReview.isEdited;\n<div\n [class]=\"{\n 'review-wrapper': true,\n 'not-editing': !editing(),\n 'dark': type === ReviewType.Table,\n 'modal-type': type === ReviewType.Modal,\n 'details-type': type === ReviewType.Details\n\n }\"\n (click)=\"onExpandToggle()\"\n>\n @if(type === ReviewType.Modal){\n <div class=\"upper\">\n <div class class=\"info\">\n <cai-avatar\n [driver]=\"driver!\"\n [size]=\"avatarFile!.size\"\n [rounded]=\"avatarFile!.rounded\"\n ></cai-avatar>\n <span class=\"name\">{{ companyUser?.fullName }}</span>\n @if(currentUser && !editing()){\n <span class=\"personal\">(You)</span>\n\n } @if(!editing() && currentRating){\n <span class=\"dot\">\u2022</span>\n\n <svg-icon\n [name]=\"currentRating === 'like' ? 'cai-like' : 'cai-dislike'\"\n [class.current-rating-like]=\"currentRating === 'like'\"\n [class.current-rating-dislike]=\"currentRating === 'dislike'\"\n ></svg-icon>\n }\n @if(editing()){\n <span class=\"description\">{{\n !this.edited() ? \"\u2022 Posting Publicly\" : \"\u2022 Edit Review\"\n }}</span>\n } @if(!editing()){\n <span class=\"edit-time\">{{ newTime() }}</span>\n @if(this.edited()){\n <span class=\"edited\">\u2022 Edited</span>\n } }\n </div>\n\n @if(editing()){\n <div class=\"rating\">\n @let activeLike = this.singleReview.thumb === 'like'; @let activeDislike =\n this.singleReview.thumb === 'dislike';\n <div\n class=\"svg-group\"\n [ngbTooltip]=\"activeLike ? 'Remove' : 'Like'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-like\"\n class=\"like-icon\"\n (click)=\"onRate('like')\"\n [class.like-active]=\"activeLike\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n [ngbTooltip]=\"activeDislike ? 'Remove' : 'Dislike'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-dislike\"\n class=\"dislike-icon\"\n (click)=\"onRate('dislike')\"\n [class.dislike-active]=\"activeDislike\"\n >\n </svg-icon>\n </div>\n\n <div class=\"separator\"></div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Post Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-checkmark\"\n class=\"checkmark-icon\"\n (click)=\"onSaveChanges()\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n ngbTooltip=\"Cancel\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"editing.set(false)\"\n ></svg-icon>\n </div>\n </div>\n }@else if(currentUser){\n <div class=\"controls\">\n <div\n class=\"svg-group\"\n ngbTooltip=\"Edit Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-edit\"\n (click)=\"onEdit()\"\n class=\"pencil-icon\"\n ></svg-icon>\n </div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Delete Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-delete\"\n class=\"trash-icon\"\n (click)=\"onDelete()\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n @if(comment || currentContent() || editing()){\n <div\n class=\"lower\"\n [contentEditable]=\"editing() ? 'true' : 'false'\"\n data-placeholder=\"Share details of your own experience...\"\n [innerHTML]=\"renderedContent()\"\n (input)=\"onChangeContent($event)\"\n (keydown)=\"limitLength($event)\"\n >\n nn\n </div>\n } }@else if(type === ReviewType.Table || type === ReviewType.Details) {\n <div class=\"upper\">\n <div class class=\"info\">\n <cai-avatar\n [driver]=\"avatarFile!.driver\"\n [size]=\"avatarFile!.size\"\n [rounded]=\"avatarFile!.rounded\"\n ></cai-avatar>\n <div class=\"column\">\n <div class=\"upper-row\">\n <span class=\"name\">{{ companyUser?.fullName }}</span>\n @if(currentUser && !editing()){\n <span class=\"personal\">(Me)</span>\n\n } @if(!editing()){\n <svg-icon\n [name]=\"\n currentRating === 'like'\n ? 'cai-like'\n : currentRating === 'dislike'\n ? 'cai-dislike'\n : ''\n \"\n [class.current-rating-like]=\"currentRating === 'like'\"\n [class.current-rating-dislike]=\"currentRating === 'dislike'\"\n ></svg-icon>\n }\n </div>\n <div class=\"lower-row\">\n @if(editing()){\n <span class=\"description\">{{\n !edited ? \"\u2022 Posting Publicly\" : \"Edit Review\"\n }}</span>\n } @if(!editing()){\n <span class=\"edit-time\">{{ newTime() }}</span>\n @if(edited){\n <span class=\"edited\">\u2022 Edited</span>\n } }\n </div>\n </div>\n </div>\n\n @if(editing()){\n <div class=\"rating\">\n <div\n class=\"svg-group\"\n ngbTooltip=\"Like\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-like\"\n class=\"like-icon\"\n (click)=\"onRate('like')\"\n [class.like-active]=\"currentRating === 'like'\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n ngbTooltip=\"Dislike\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-dislike\"\n class=\"dislike-icon\"\n (click)=\"onRate('dislike')\"\n [class.dislike-active]=\"currentRating === 'dislike'\"\n >\n </svg-icon>\n </div>\n\n <div class=\"separator\"></div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Post Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-checkmark\"\n class=\"checkmark-icon\"\n (click)=\"onSaveChanges()\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n ngbTooltip=\"Cancel\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"onCancelReview()\"\n ></svg-icon>\n </div>\n </div>\n }@else if(canExpand() && !expanded()){\n <svg-icon name=\"cai-expand\" class=\"expand-icon\" />\n }@else if(canExpand() && !currentUser && expanded()){\n <svg-icon name=\"cai-expand\" class=\"collapse-icon\" />\n } @else if(currentUser){\n <div class=\"controls\">\n <div\n class=\"svg-group\"\n ngbTooltip=\"Edit Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-edit\"\n (click)=\"onEdit()\"\n class=\"pencil-icon\"\n ></svg-icon>\n </div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Delete Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-delete\"\n class=\"trash-icon\"\n (click)=\"onDelete()\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n @if(comment || currentContent() || editing()){\n <div\n class=\"lower\"\n [contentEditable]=\"editing() ? 'true' : 'false'\"\n data-placeholder=\"Share details of your own experience...\"\n (input)=\"onChangeContent($event)\"\n >\n {{ renderedContent() }}\n </div>\n }}\n</div>\n@if(type === ReviewType.Table){\n<div class=\"bottom-divider-light\"></div>\n\n}\n@if(currentUser && ReviewType.Details){\n <div class=\"bottom-divider-dark\"></div>\n} <!-- @if(currentUser && (type === ReviewType.Details || type ===\nReviewType.Modal)){\n<div class=\"bottom-divider-dark\"></div>\n\n} -->\n", styles: ["svg-icon{width:18px!important;height:18px!important;display:grid;place-items:center}svg-icon path{fill:#919191}svg-icon svg{display:grid;place-items:center;width:18px;height:18px}.column{display:flex;flex-direction:column}.personal{font-weight:700;line-height:18px;color:#f77d3b}.edited{color:#3b73ed;font-weight:500;line-height:18px}.current-rating-like path{fill:#56b4ac!important}.current-rating-dislike path{fill:#e66767!important}.active-like :hover .like-icon{color:red}.review-wrapper.modal-type{background-color:#1d1d1d;max-width:456px;border-radius:2px;padding:2px}.review-wrapper.modal-type.not-editing{background-color:transparent}.review-wrapper.modal-type.not-editing .upper .info{display:flex;align-items:center}.review-wrapper.modal-type.not-editing .upper .info .name{color:#000}.review-wrapper.modal-type.not-editing .upper .controls{display:flex;align-items:center}.review-wrapper.modal-type.not-editing .upper .edit-time{font-size:14px}.review-wrapper.modal-type.not-editing .lower{background-color:transparent;color:#000;max-width:100%;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word}.review-wrapper.modal-type.not-editing .controls{display:flex;gap:4px;visibility:hidden}.review-wrapper.modal-type.not-editing .controls .pencil-icon:hover+span{opacity:1}.review-wrapper.modal-type.not-editing .controls .trash-icon:hover{background-color:#f4bebe!important}.review-wrapper.modal-type.not-editing .controls .trash-icon:hover path{fill:#c20c0c!important}.review-wrapper.modal-type.not-editing .controls .trash-icon:hover+span{opacity:1}.review-wrapper.modal-type.not-editing .controls svg-icon{display:grid;place-items:center;width:18px;height:18px;padding:2px;cursor:pointer}.review-wrapper.modal-type.not-editing .controls svg-icon:hover{background-color:#aaa}.review-wrapper.modal-type.not-editing .controls svg-icon:hover path{fill:#424242}.review-wrapper.modal-type.not-editing:hover{background-color:#eee}.review-wrapper.modal-type.not-editing:hover .controls{visibility:visible}.review-wrapper.modal-type .upper{padding:2px 2px 2px 4px;display:flex;justify-content:space-between}.review-wrapper.modal-type .upper .info{display:flex;align-items:center;gap:4px}.review-wrapper.modal-type .upper .info .name{line-height:18px;font-weight:600;color:#fff}.review-wrapper.modal-type .upper .info .dot{color:#919191}.review-wrapper.modal-type .upper .info .description,.review-wrapper.modal-type .upper .info .edit-time{color:#919191;font-weight:500;line-height:18px}.review-wrapper.modal-type .upper .rating{display:flex;gap:4px;align-items:center;padding-bottom:4px}.review-wrapper.modal-type .upper .rating .like-icon{display:inline-block;transform:scaleX(-1);display:grid;place-items:center;background-color:transparent!important}.review-wrapper.modal-type .upper .rating .like-icon:hover+span{opacity:1}.review-wrapper.modal-type .upper .rating .like-icon:hover path{fill:#ccc}.review-wrapper.modal-type .upper .rating .like-icon path{fill:#919191}.review-wrapper.modal-type .upper .rating .like-icon.like-active :hover path{fill:#b6dfdb}.review-wrapper.modal-type .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper.modal-type .upper .rating .dislike-icon{display:grid;place-items:center;background-color:transparent!important}.review-wrapper.modal-type .upper .rating .dislike-icon:hover+span{opacity:1}.review-wrapper.modal-type .upper .rating .dislike-icon:hover path{fill:#ccc}.review-wrapper.modal-type .upper .rating .dislike-icon path{fill:#919191}.review-wrapper.modal-type .upper .rating .dislike-icon.dislike-active :hover path{fill:#e87c7c}.review-wrapper.modal-type .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper.modal-type .upper .rating .separator{border:1px solid #919191;height:14px}.review-wrapper.modal-type .upper .rating svg-icon{width:18px;height:18px;display:grid;place-items:center;background-color:#ffffffb2}.review-wrapper.modal-type .upper .rating svg-icon:hover{cursor:pointer}.review-wrapper.modal-type .upper .rating .checkmark-icon{transition:transform .2s ease-in-out}.review-wrapper.modal-type .upper .rating .checkmark-icon:hover{background-color:#fff;transform:scale(1.2222222222)}.review-wrapper.modal-type .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper.modal-type .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper.modal-type .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.modal-type .upper .rating .checkmark-icon path{fill:#1d1d1d}.review-wrapper.modal-type .upper .rating .cancel-icon{transition:transform .2s ease-in-out}.review-wrapper.modal-type .upper .rating .cancel-icon:hover{background-color:#fff;transform:scale(1.2222222222)}.review-wrapper.modal-type .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper.modal-type .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper.modal-type .upper .rating .cancel-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.modal-type .upper .rating .cancel-icon path{fill:#1d1d1d}.profile-img{width:22px}.lower{color:#fff;outline:none;overflow-y:auto;padding:2px 4px 4px;display:block;background-color:#1d1d1d;border-radius:2px;line-height:18px}.lower:hover{cursor:pointer}.lower:empty:after{content:attr(data-placeholder);color:#919191}.svg-group{position:relative;display:flex;align-items:center}.bottom-divider-dark{margin-top:6px;border-bottom:1px solid #DADADA}.bottom-divider-light{border-bottom:1px solid #424242}svg-icon{display:inline-block;border-radius:1px;display:grid;place-items:center}svg-icon:hover{cursor:pointer}svg-icon svg{width:14px;height:14px}.review-wrapper.dark{background-color:#dadada!important;color:#919191;padding:2px}.review-wrapper.dark .upper{display:flex;align-items:center;padding:0 2px}.review-wrapper.dark .upper .info{display:flex;align-items:center;gap:4px;padding:0 2px}.review-wrapper.dark .upper .info .column{font-size:11px}.review-wrapper.dark .upper .info .column .upper-row{display:flex;gap:4px}.review-wrapper.dark .upper .info .column .upper-row .name{font-weight:600;color:#424242}.review-wrapper.dark .upper .info .column .upper-row svg-icon{width:18px!important;height:18px;display:flex;align-items:center}.review-wrapper.dark .upper .info .column .lower-row{display:flex;gap:4px}.review-wrapper.dark .upper .rating{display:flex;margin-left:auto;gap:4px;padding:2px 0}.review-wrapper.dark .upper .rating .like-icon{width:14px;height:14px;transform:scaleX(-1)}.review-wrapper.dark .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper.dark .upper .rating .like-icon:hover:not(.like-active) path{fill:#424242}.review-wrapper.dark .upper .rating .dislike-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.dark .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper.dark .upper .rating .dislike-icon:hover:not(.dislike-active) path{fill:#424242}.review-wrapper.dark .upper .rating .checkmark-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark .upper .rating .checkmark-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper.dark .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper.dark .upper .rating .checkmark-icon path{fill:#dadada}.review-wrapper.dark .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.dark .upper .rating .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark .upper .rating .cancel-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper.dark .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper.dark .upper .rating .cancel-icon path{fill:#dadada}.review-wrapper.dark .upper .rating .cancel-icon svg{fill:transparent!important;width:14px;border-radius:1px}.review-wrapper.dark .upper .controls{margin-left:auto;display:flex;gap:4px;padding:0 2px;visibility:hidden}.review-wrapper.dark .upper .controls .pencil-icon{padding:2px}.review-wrapper.dark .upper .controls .pencil-icon:hover{background-color:#6c6c6c}.review-wrapper.dark .upper .controls .pencil-icon:hover path{fill:#dadada}.review-wrapper.dark .upper .controls .trash-icon{padding:2px}.review-wrapper.dark .upper .controls .trash-icon:hover{background-color:#6c6c6c}.review-wrapper.dark .upper .controls .trash-icon:hover path{fill:#dadada}.review-wrapper.dark:hover{cursor:pointer}.review-wrapper.dark:hover .controls{visibility:visible!important}.review-wrapper.dark .lower{background-color:#dadada!important;color:#2f2f2f}.review-wrapper.dark.not-editing{background-color:#2f2f2f!important}.review-wrapper.dark.not-editing .upper{background-color:transparent}.review-wrapper.dark.not-editing .upper .name{color:#fff!important}.review-wrapper.dark.not-editing .lower{background-color:#2f2f2f!important;color:#fff!important}.review-wrapper.dark.not-editing:hover,.review-wrapper.dark.not-editing:hover .lower{background-color:#424242!important}.review-wrapper.dark.not-editing:hover .expand-icon,.review-wrapper.dark.not-editing:hover .collapse-icon{opacity:1}.review-wrapper.details-type{padding:2px}.review-wrapper.details-type:hover{background-color:#eee}.review-wrapper.details-type .upper{display:flex;align-items:start;padding:0 2px}.review-wrapper.details-type .upper .info{display:flex;align-items:center;gap:4px;padding:0 2px}.review-wrapper.details-type .upper .info .column{line-height:26px;font-size:11px}.review-wrapper.details-type .upper .info .column .upper-row{display:flex;align-items:center;gap:4px}.review-wrapper.details-type .upper .info .column .upper-row .name{font-weight:600;color:#424242;line-height:14px}.review-wrapper.details-type .upper .info .column .upper-row .personal{line-height:14px}.review-wrapper.details-type .upper .info .column .upper-row svg-icon{width:14px!important;height:14px;display:flex;align-items:center}.review-wrapper.details-type .upper .info .column .lower-row{display:flex;align-items:center;gap:4px}.review-wrapper.details-type .upper .info .column .lower-row .edit-time,.review-wrapper.details-type .upper .info .column .lower-row .edited{line-height:14px}.review-wrapper.details-type .upper .rating{display:flex;margin-left:auto;gap:4px;padding:2px 0}.review-wrapper.details-type .upper .rating .like-icon{width:14px;height:14px;transform:scaleX(-1)}.review-wrapper.details-type .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper.details-type .upper .rating .like-icon:hover:not(.like-active) path{fill:#424242}.review-wrapper.details-type .upper .rating .dislike-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.details-type .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper.details-type .upper .rating .dislike-icon:hover:not(.dislike-active) path{fill:#424242}.review-wrapper.details-type .upper .rating .checkmark-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.details-type .upper .rating .checkmark-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.details-type .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper.details-type .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper.details-type .upper .rating .checkmark-icon path{fill:#dadada}.review-wrapper.details-type .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.details-type .upper .rating .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.details-type .upper .rating .cancel-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.details-type .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper.details-type .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper.details-type .upper .rating .cancel-icon path{fill:#dadada}.review-wrapper.details-type .upper .rating .cancel-icon svg{fill:transparent!important;width:14px;border-radius:1px}.review-wrapper.details-type .upper .controls{margin-left:auto;display:flex;gap:4px;padding:0 2px;opacity:0;pointer-events:none}.review-wrapper.details-type .upper .controls .svg-group{display:flex;height:100%;align-items:start;padding:2px}.review-wrapper.details-type .upper .controls .svg-group .pencil-icon:hover{background-color:#6c6c6c}.review-wrapper.details-type .upper .controls .svg-group .pencil-icon:hover path{fill:#dadada}.review-wrapper.details-type .upper .controls .svg-group .trash-icon:hover{background-color:#6c6c6c}.review-wrapper.details-type .upper .controls .svg-group .trash-icon:hover path{fill:#dadada}.review-wrapper.details-type:hover{cursor:pointer}.review-wrapper.details-type:hover .controls{opacity:1!important;pointer-events:auto!important}.review-wrapper.details-type .lower{background-color:transparent!important;color:#2f2f2f}.expand-icon{padding:4px 2px;margin-left:auto;opacity:0}.expand-icon path{fill:#ccc}.collapse-icon{transform:rotate(180deg);padding:4px 2px;margin-left:auto;opacity:0}.collapse-icon path{fill:#ccc}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: AvatarComponent, selector: "cai-avatar", inputs: ["driver", "size", "rounded", "inverse"] }, { kind: "ngmodule", type: NgbPopoverModule }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbTooltipModule }] });
|
|
7128
7128
|
}
|
|
7129
7129
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SingleReviewComponent, decorators: [{
|
|
7130
7130
|
type: Component,
|
|
7131
|
-
args: [{ selector: 'cai-single-review', imports: [SvgIconComponent, AvatarComponent, NgbPopoverModule, NgbModule, NgbTooltipModule], providers: [DatePipe], template: "@let avatarFile = singleReview.companyUser?.avatarFile; @let driver =\navatarFile?.driver; @let commentLength = singleReview?.comment?.length; @let\ncompanyUser = this.singleReview.companyUser; @let currentUser =\nthis.singleReview.isItCurrentCompanyUser; @let comment =\nthis.singleReview.comment; @let edited = this.singleReview.isEdited;\n<div\n [class]=\"{\n 'review-wrapper': type !== ReviewType.Details,\n 'details-wrapper': type === ReviewType.Details,\n 'not-editing': !editing(),\n 'dark': type === ReviewType.Table\n }\"\n (click)=\"onExpandToggle()\"\n>\n @if(type === ReviewType.Details || type === ReviewType.Modal){\n <div class=\"upper\">\n <div class class=\"info\">\n <cai-avatar\n [driver]=\"driver!\"\n [size]=\"avatarFile!.size\"\n [rounded]=\"avatarFile!.rounded\"\n ></cai-avatar>\n <span class=\"name\">{{ companyUser?.fullName }}</span>\n @if(currentUser && !editing()){\n <span class=\"personal\">(You)</span>\n\n } @if(!editing() && currentRating){\n <span class=\"dot\">\u2022</span>\n\n <svg-icon\n [name]=\"currentRating === 'like' ? 'cai-like' : 'cai-dislike'\"\n [class.current-rating-like]=\"currentRating === 'like'\"\n [class.current-rating-dislike]=\"currentRating === 'dislike'\"\n ></svg-icon>\n }\n @if(editing()){\n <span class=\"description\">{{\n !this.edited() ? \"\u2022 Posting Publicly\" : \"\u2022 Edit Review\"\n }}</span>\n } @if(!editing()){\n <span class=\"edit-time\">{{ newTime() }}</span>\n @if(this.edited()){\n <span class=\"edited\">\u2022 Edited</span>\n } }\n </div>\n\n @if(editing()){\n <div class=\"rating\">\n @let activeLike = this.singleReview.thumb === 'like'; @let activeDislike =\n this.singleReview.thumb === 'dislike';\n <div\n class=\"svg-group\"\n [ngbTooltip]=\"activeLike ? 'Remove' : 'Like'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-like\"\n class=\"like-icon\"\n (click)=\"onRate('like')\"\n [class.like-active]=\"activeLike\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n [ngbTooltip]=\"activeDislike ? 'Remove' : 'Dislike'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-dislike\"\n class=\"dislike-icon\"\n (click)=\"onRate('dislike')\"\n [class.dislike-active]=\"activeDislike\"\n >\n </svg-icon>\n </div>\n\n <div class=\"separator\"></div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Post Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-checkmark\"\n class=\"checkmark-icon\"\n (click)=\"onSaveChanges()\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n ngbTooltip=\"Cancel\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"editing.set(false)\"\n ></svg-icon>\n </div>\n </div>\n }@else if(currentUser){\n <div class=\"controls\">\n <div\n class=\"svg-group\"\n ngbTooltip=\"Edit Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-edit\"\n (click)=\"onEdit()\"\n class=\"pencil-icon\"\n ></svg-icon>\n </div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Delete Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-delete\"\n class=\"trash-icon\"\n (click)=\"onDelete()\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n @if(comment || currentContent() || editing()){\n <div\n class=\"lower\"\n [contentEditable]=\"editing() ? 'true' : 'false'\"\n data-placeholder=\"Share details of your own experience...\"\n [innerHTML]=\"renderedContent()\"\n (input)=\"onChangeContent($event)\"\n (keydown)=\"limitLength($event)\"\n >\n nn\n </div>\n } }<!-- @else {\n <div class=\"upper\">\n <div class class=\"info\">\n <cai-avatar\n [driver]=\"avatarFile!.driver\"\n [size]=\"avatarFile!.size\"\n [rounded]=\"avatarFile!.rounded\"\n ></cai-avatar>\n <div class=\"column\">\n <div class=\"upper-row\">\n <span class=\"name\">{{ companyUser?.fullName }}</span>\n @if(currentUser && !editing()){\n <span class=\"personal\">(Me)</span>\n\n } @if(!editing()){\n <svg-icon\n [name]=\"\n currentRating === 'like'\n ? 'cai-like'\n : currentRating === 'dislike'\n ? 'cai-dislike'\n : ''\n \"\n [class.current-rating-like]=\"currentRating === 'like'\"\n [class.current-rating-dislike]=\"currentRating === 'dislike'\"\n ></svg-icon>\n }\n </div>\n <div class=\"lower-row\">\n @if(editing()){\n <span class=\"description\">{{\n !edited ? \"\u2022 Posting Publicly\" : \"Edit Review\"\n }}</span>\n } @if(!editing()){\n <span class=\"edit-time\">{{ newTime() }}</span>\n @if(edited){\n <span class=\"edited\">\u2022 Edited</span>\n } }\n </div>\n </div>\n </div>\n\n @if(editing()){\n <div class=\"rating\">\n <div\n class=\"svg-group\"\n ngbTooltip=\"Like\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-like\"\n class=\"like-icon\"\n (click)=\"onRate('like')\"\n [class.like-active]=\"currentRating === 'like'\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n ngbTooltip=\"Dislike\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-dislike\"\n class=\"dislike-icon\"\n (click)=\"onRate('dislike')\"\n [class.dislike-active]=\"currentRating === 'dislike'\"\n >\n </svg-icon>\n </div>\n\n <div class=\"separator\"></div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Post Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-checkmark\"\n class=\"checkmark-icon\"\n (click)=\"onSaveChanges()\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n ngbTooltip=\"Cancel\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"onCancelReview()\"\n ></svg-icon>\n </div>\n </div>\n }@else if(canExpand() && !expanded()){\n <svg-icon name=\"cai-expand\" class=\"expand-icon\" />\n }@else if(canExpand() && !currentUser && expanded()){\n <svg-icon name=\"cai-expand\" class=\"collapse-icon\" />\n } @else if(currentUser){\n <div class=\"controls\">\n <div\n class=\"svg-group\"\n ngbTooltip=\"Edit Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-edit\"\n (click)=\"onEdit()\"\n class=\"pencil-icon\"\n ></svg-icon>\n </div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Delete Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-delete\"\n class=\"trash-icon\"\n (click)=\"onDelete()\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n @if(comment || currentContent() || editing()){\n <div\n class=\"lower\"\n [contentEditable]=\"editing() ? 'true' : 'false'\"\n data-placeholder=\"Share details of your own experience...\"\n (input)=\"onChangeContent($event)\"\n >\n {{ renderedContent() }}\n </div>\n }} -->\n</div>\n@if(type === ReviewType.Table){\n<div class=\"bottom-divider-light\"></div>\n\n} <!-- @if(currentUser && (type === ReviewType.Details || type ===\nReviewType.Modal)){\n<div class=\"bottom-divider-dark\"></div>\n\n} -->\n", styles: ["svg-icon{width:18px!important;height:18px!important;display:grid;place-items:center}svg-icon path{fill:#919191}svg-icon svg{display:grid;place-items:center;width:18px;height:18px}.column{display:flex;flex-direction:column}.personal{font-weight:700;line-height:18px;color:#f77d3b}.edited{color:#3b73ed;font-weight:500;line-height:18px}.current-rating-like path{fill:#56b4ac!important}.current-rating-dislike path{fill:#e66767!important}.active-like :hover .like-icon{color:red}.review-wrapper:not(.dark){background-color:#1d1d1d;max-width:456px;border-radius:2px;padding:2px}.review-wrapper:not(.dark).not-editing{background-color:transparent}.review-wrapper:not(.dark).not-editing .upper .info{display:flex;align-items:center}.review-wrapper:not(.dark).not-editing .upper .info .name{color:#000}.review-wrapper:not(.dark).not-editing .upper .controls{display:flex;align-items:center}.review-wrapper:not(.dark).not-editing .upper .edit-time{font-size:14px}.review-wrapper:not(.dark).not-editing .lower{background-color:transparent;color:#000;max-width:100%;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word}.review-wrapper:not(.dark).not-editing .controls{display:flex;gap:4px;visibility:hidden}.review-wrapper:not(.dark).not-editing .controls .pencil-icon:hover+span{opacity:1}.review-wrapper:not(.dark).not-editing .controls .trash-icon:hover{background-color:#f4bebe!important}.review-wrapper:not(.dark).not-editing .controls .trash-icon:hover path{fill:#c20c0c!important}.review-wrapper:not(.dark).not-editing .controls .trash-icon:hover+span{opacity:1}.review-wrapper:not(.dark).not-editing .controls svg-icon{display:grid;place-items:center;width:18px;height:18px;padding:2px;cursor:pointer}.review-wrapper:not(.dark).not-editing .controls svg-icon:hover{background-color:#aaa}.review-wrapper:not(.dark).not-editing .controls svg-icon:hover path{fill:#424242}.review-wrapper:not(.dark).not-editing:hover{background-color:#eee}.review-wrapper:not(.dark).not-editing:hover .controls{visibility:visible}.review-wrapper:not(.dark) .upper{padding:2px 2px 2px 4px;display:flex;justify-content:space-between}.review-wrapper:not(.dark) .upper .info{display:flex;align-items:center;gap:4px}.review-wrapper:not(.dark) .upper .info .name{line-height:18px;font-weight:600;color:#fff}.review-wrapper:not(.dark) .upper .info .dot{color:#919191}.review-wrapper:not(.dark) .upper .info .description{color:#919191;font-weight:500;line-height:18px}.review-wrapper:not(.dark) .upper .info .edit-time{color:#919191;font-weight:500;line-height:18px}.review-wrapper:not(.dark) .upper .rating{display:flex;gap:4px;align-items:center;padding-bottom:4px}.review-wrapper:not(.dark) .upper .rating .like-icon{display:inline-block;transform:scaleX(-1);display:grid;place-items:center;background-color:transparent!important}.review-wrapper:not(.dark) .upper .rating .like-icon:hover+span{opacity:1}.review-wrapper:not(.dark) .upper .rating .like-icon:hover path{fill:#ccc}.review-wrapper:not(.dark) .upper .rating .like-icon path{fill:#919191}.review-wrapper:not(.dark) .upper .rating .like-icon.like-active :hover path{fill:#b6dfdb}.review-wrapper:not(.dark) .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper:not(.dark) .upper .rating .dislike-icon{display:grid;place-items:center;background-color:transparent!important}.review-wrapper:not(.dark) .upper .rating .dislike-icon:hover+span{opacity:1}.review-wrapper:not(.dark) .upper .rating .dislike-icon:hover path{fill:#ccc}.review-wrapper:not(.dark) .upper .rating .dislike-icon path{fill:#919191}.review-wrapper:not(.dark) .upper .rating .dislike-icon.dislike-active :hover path{fill:#e87c7c}.review-wrapper:not(.dark) .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper:not(.dark) .upper .rating .separator{border:1px solid #919191;height:14px}.review-wrapper:not(.dark) .upper .rating svg-icon{width:18px;height:18px;display:grid;place-items:center;background-color:#ffffffb2}.review-wrapper:not(.dark) .upper .rating svg-icon:hover{cursor:pointer}.review-wrapper:not(.dark) .upper .rating .checkmark-icon{transition:transform .2s ease-in-out}.review-wrapper:not(.dark) .upper .rating .checkmark-icon:hover{background-color:#fff;transform:scale(1.2222222222)}.review-wrapper:not(.dark) .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper:not(.dark) .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper:not(.dark) .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper:not(.dark) .upper .rating .checkmark-icon path{fill:#1d1d1d}.review-wrapper:not(.dark) .upper .rating .cancel-icon{transition:transform .2s ease-in-out}.review-wrapper:not(.dark) .upper .rating .cancel-icon:hover{background-color:#fff;transform:scale(1.2222222222)}.review-wrapper:not(.dark) .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper:not(.dark) .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper:not(.dark) .upper .rating .cancel-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper:not(.dark) .upper .rating .cancel-icon path{fill:#1d1d1d}.profile-img{width:22px}.lower{color:#fff;outline:none;overflow-y:auto;padding:2px 4px 4px;display:block;background-color:#1d1d1d;border-radius:2px;line-height:18px}.lower:hover{cursor:pointer}.lower:empty:after{content:attr(data-placeholder);color:#919191}.svg-group{position:relative;display:flex;align-items:center}.bottom-divider-dark{border-bottom:1px solid #DADADA}.bottom-divider-light{border-bottom:1px solid #424242}svg-icon{display:inline-block;border-radius:1px;display:grid;place-items:center}svg-icon:hover{cursor:pointer}svg-icon svg{width:14px;height:14px}.review-wrapper.dark{background-color:#dadada!important;color:#919191;padding:2px}.review-wrapper.dark .upper{display:flex;align-items:center;padding:0 2px}.review-wrapper.dark .upper .info{display:flex;align-items:center;gap:4px;padding:0 2px}.review-wrapper.dark .upper .info .column{font-size:11px}.review-wrapper.dark .upper .info .column .upper-row{display:flex;gap:4px}.review-wrapper.dark .upper .info .column .upper-row .name{font-weight:600;color:#424242}.review-wrapper.dark .upper .info .column .upper-row svg-icon{width:18px!important;height:18px;display:flex;align-items:center}.review-wrapper.dark .upper .info .column .lower-row{display:flex;gap:4px}.review-wrapper.dark .upper .rating{display:flex;margin-left:auto;gap:4px;padding:2px 0}.review-wrapper.dark .upper .rating .like-icon{width:14px;height:14px;transform:scaleX(-1)}.review-wrapper.dark .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper.dark .upper .rating .like-icon:hover:not(.like-active) path{fill:#424242}.review-wrapper.dark .upper .rating .dislike-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.dark .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper.dark .upper .rating .dislike-icon:hover:not(.dislike-active) path{fill:#424242}.review-wrapper.dark .upper .rating .checkmark-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark .upper .rating .checkmark-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper.dark .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper.dark .upper .rating .checkmark-icon path{fill:#dadada}.review-wrapper.dark .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.dark .upper .rating .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark .upper .rating .cancel-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper.dark .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper.dark .upper .rating .cancel-icon path{fill:#dadada}.review-wrapper.dark .upper .rating .cancel-icon svg{fill:transparent!important;width:14px;border-radius:1px}.review-wrapper.dark .upper .controls{margin-left:auto;display:flex;gap:4px;padding:0 2px;visibility:hidden}.review-wrapper.dark .upper .controls .pencil-icon{padding:2px}.review-wrapper.dark .upper .controls .pencil-icon:hover{background-color:#6c6c6c}.review-wrapper.dark .upper .controls .pencil-icon:hover path{fill:#dadada}.review-wrapper.dark .upper .controls .trash-icon{padding:2px}.review-wrapper.dark .upper .controls .trash-icon:hover{background-color:#6c6c6c}.review-wrapper.dark .upper .controls .trash-icon:hover path{fill:#dadada}.review-wrapper.dark:hover{cursor:pointer}.review-wrapper.dark:hover .controls{visibility:visible!important}.review-wrapper.dark .lower{background-color:#dadada!important;color:#2f2f2f}.review-wrapper.dark.not-editing{background-color:#2f2f2f!important}.review-wrapper.dark.not-editing .upper{background-color:transparent}.review-wrapper.dark.not-editing .upper .name{color:#fff!important}.review-wrapper.dark.not-editing .lower{background-color:#2f2f2f!important;color:#fff!important}.review-wrapper.dark.not-editing:hover,.review-wrapper.dark.not-editing:hover .lower{background-color:#424242!important}.review-wrapper.dark.not-editing:hover .expand-icon,.review-wrapper.dark.not-editing:hover .collapse-icon{opacity:1}.expand-icon{padding:4px 2px;margin-left:auto;opacity:0}.expand-icon path{fill:#ccc}.collapse-icon{transform:rotate(180deg);padding:4px 2px;margin-left:auto;opacity:0}.collapse-icon path{fill:#ccc}\n"] }]
|
|
7131
|
+
args: [{ selector: 'cai-single-review', imports: [SvgIconComponent, AvatarComponent, NgbPopoverModule, NgbModule, NgbTooltipModule], providers: [DatePipe], template: "@let avatarFile = singleReview.companyUser?.avatarFile; @let driver =\navatarFile?.driver; @let commentLength = singleReview?.comment?.length; @let\ncompanyUser = this.singleReview.companyUser; @let currentUser =\nthis.singleReview.isItCurrentCompanyUser; @let comment =\nthis.singleReview.comment; @let edited = this.singleReview.isEdited;\n<div\n [class]=\"{\n 'review-wrapper': true,\n 'not-editing': !editing(),\n 'dark': type === ReviewType.Table,\n 'modal-type': type === ReviewType.Modal,\n 'details-type': type === ReviewType.Details\n\n }\"\n (click)=\"onExpandToggle()\"\n>\n @if(type === ReviewType.Modal){\n <div class=\"upper\">\n <div class class=\"info\">\n <cai-avatar\n [driver]=\"driver!\"\n [size]=\"avatarFile!.size\"\n [rounded]=\"avatarFile!.rounded\"\n ></cai-avatar>\n <span class=\"name\">{{ companyUser?.fullName }}</span>\n @if(currentUser && !editing()){\n <span class=\"personal\">(You)</span>\n\n } @if(!editing() && currentRating){\n <span class=\"dot\">\u2022</span>\n\n <svg-icon\n [name]=\"currentRating === 'like' ? 'cai-like' : 'cai-dislike'\"\n [class.current-rating-like]=\"currentRating === 'like'\"\n [class.current-rating-dislike]=\"currentRating === 'dislike'\"\n ></svg-icon>\n }\n @if(editing()){\n <span class=\"description\">{{\n !this.edited() ? \"\u2022 Posting Publicly\" : \"\u2022 Edit Review\"\n }}</span>\n } @if(!editing()){\n <span class=\"edit-time\">{{ newTime() }}</span>\n @if(this.edited()){\n <span class=\"edited\">\u2022 Edited</span>\n } }\n </div>\n\n @if(editing()){\n <div class=\"rating\">\n @let activeLike = this.singleReview.thumb === 'like'; @let activeDislike =\n this.singleReview.thumb === 'dislike';\n <div\n class=\"svg-group\"\n [ngbTooltip]=\"activeLike ? 'Remove' : 'Like'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-like\"\n class=\"like-icon\"\n (click)=\"onRate('like')\"\n [class.like-active]=\"activeLike\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n [ngbTooltip]=\"activeDislike ? 'Remove' : 'Dislike'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-dislike\"\n class=\"dislike-icon\"\n (click)=\"onRate('dislike')\"\n [class.dislike-active]=\"activeDislike\"\n >\n </svg-icon>\n </div>\n\n <div class=\"separator\"></div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Post Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-checkmark\"\n class=\"checkmark-icon\"\n (click)=\"onSaveChanges()\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n ngbTooltip=\"Cancel\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"editing.set(false)\"\n ></svg-icon>\n </div>\n </div>\n }@else if(currentUser){\n <div class=\"controls\">\n <div\n class=\"svg-group\"\n ngbTooltip=\"Edit Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-edit\"\n (click)=\"onEdit()\"\n class=\"pencil-icon\"\n ></svg-icon>\n </div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Delete Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-delete\"\n class=\"trash-icon\"\n (click)=\"onDelete()\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n @if(comment || currentContent() || editing()){\n <div\n class=\"lower\"\n [contentEditable]=\"editing() ? 'true' : 'false'\"\n data-placeholder=\"Share details of your own experience...\"\n [innerHTML]=\"renderedContent()\"\n (input)=\"onChangeContent($event)\"\n (keydown)=\"limitLength($event)\"\n >\n nn\n </div>\n } }@else if(type === ReviewType.Table || type === ReviewType.Details) {\n <div class=\"upper\">\n <div class class=\"info\">\n <cai-avatar\n [driver]=\"avatarFile!.driver\"\n [size]=\"avatarFile!.size\"\n [rounded]=\"avatarFile!.rounded\"\n ></cai-avatar>\n <div class=\"column\">\n <div class=\"upper-row\">\n <span class=\"name\">{{ companyUser?.fullName }}</span>\n @if(currentUser && !editing()){\n <span class=\"personal\">(Me)</span>\n\n } @if(!editing()){\n <svg-icon\n [name]=\"\n currentRating === 'like'\n ? 'cai-like'\n : currentRating === 'dislike'\n ? 'cai-dislike'\n : ''\n \"\n [class.current-rating-like]=\"currentRating === 'like'\"\n [class.current-rating-dislike]=\"currentRating === 'dislike'\"\n ></svg-icon>\n }\n </div>\n <div class=\"lower-row\">\n @if(editing()){\n <span class=\"description\">{{\n !edited ? \"\u2022 Posting Publicly\" : \"Edit Review\"\n }}</span>\n } @if(!editing()){\n <span class=\"edit-time\">{{ newTime() }}</span>\n @if(edited){\n <span class=\"edited\">\u2022 Edited</span>\n } }\n </div>\n </div>\n </div>\n\n @if(editing()){\n <div class=\"rating\">\n <div\n class=\"svg-group\"\n ngbTooltip=\"Like\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-like\"\n class=\"like-icon\"\n (click)=\"onRate('like')\"\n [class.like-active]=\"currentRating === 'like'\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n ngbTooltip=\"Dislike\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-dislike\"\n class=\"dislike-icon\"\n (click)=\"onRate('dislike')\"\n [class.dislike-active]=\"currentRating === 'dislike'\"\n >\n </svg-icon>\n </div>\n\n <div class=\"separator\"></div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Post Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-checkmark\"\n class=\"checkmark-icon\"\n (click)=\"onSaveChanges()\"\n ></svg-icon>\n </div>\n\n <div\n class=\"svg-group\"\n ngbTooltip=\"Cancel\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"onCancelReview()\"\n ></svg-icon>\n </div>\n </div>\n }@else if(canExpand() && !expanded()){\n <svg-icon name=\"cai-expand\" class=\"expand-icon\" />\n }@else if(canExpand() && !currentUser && expanded()){\n <svg-icon name=\"cai-expand\" class=\"collapse-icon\" />\n } @else if(currentUser){\n <div class=\"controls\">\n <div\n class=\"svg-group\"\n ngbTooltip=\"Edit Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-edit\"\n (click)=\"onEdit()\"\n class=\"pencil-icon\"\n ></svg-icon>\n </div>\n <div\n class=\"svg-group\"\n ngbTooltip=\"Delete Review\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip\"\n placement=\"top\"\n >\n <svg-icon\n name=\"cai-delete\"\n class=\"trash-icon\"\n (click)=\"onDelete()\"\n ></svg-icon>\n </div>\n </div>\n }\n </div>\n @if(comment || currentContent() || editing()){\n <div\n class=\"lower\"\n [contentEditable]=\"editing() ? 'true' : 'false'\"\n data-placeholder=\"Share details of your own experience...\"\n (input)=\"onChangeContent($event)\"\n >\n {{ renderedContent() }}\n </div>\n }}\n</div>\n@if(type === ReviewType.Table){\n<div class=\"bottom-divider-light\"></div>\n\n}\n@if(currentUser && ReviewType.Details){\n <div class=\"bottom-divider-dark\"></div>\n} <!-- @if(currentUser && (type === ReviewType.Details || type ===\nReviewType.Modal)){\n<div class=\"bottom-divider-dark\"></div>\n\n} -->\n", styles: ["svg-icon{width:18px!important;height:18px!important;display:grid;place-items:center}svg-icon path{fill:#919191}svg-icon svg{display:grid;place-items:center;width:18px;height:18px}.column{display:flex;flex-direction:column}.personal{font-weight:700;line-height:18px;color:#f77d3b}.edited{color:#3b73ed;font-weight:500;line-height:18px}.current-rating-like path{fill:#56b4ac!important}.current-rating-dislike path{fill:#e66767!important}.active-like :hover .like-icon{color:red}.review-wrapper.modal-type{background-color:#1d1d1d;max-width:456px;border-radius:2px;padding:2px}.review-wrapper.modal-type.not-editing{background-color:transparent}.review-wrapper.modal-type.not-editing .upper .info{display:flex;align-items:center}.review-wrapper.modal-type.not-editing .upper .info .name{color:#000}.review-wrapper.modal-type.not-editing .upper .controls{display:flex;align-items:center}.review-wrapper.modal-type.not-editing .upper .edit-time{font-size:14px}.review-wrapper.modal-type.not-editing .lower{background-color:transparent;color:#000;max-width:100%;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word}.review-wrapper.modal-type.not-editing .controls{display:flex;gap:4px;visibility:hidden}.review-wrapper.modal-type.not-editing .controls .pencil-icon:hover+span{opacity:1}.review-wrapper.modal-type.not-editing .controls .trash-icon:hover{background-color:#f4bebe!important}.review-wrapper.modal-type.not-editing .controls .trash-icon:hover path{fill:#c20c0c!important}.review-wrapper.modal-type.not-editing .controls .trash-icon:hover+span{opacity:1}.review-wrapper.modal-type.not-editing .controls svg-icon{display:grid;place-items:center;width:18px;height:18px;padding:2px;cursor:pointer}.review-wrapper.modal-type.not-editing .controls svg-icon:hover{background-color:#aaa}.review-wrapper.modal-type.not-editing .controls svg-icon:hover path{fill:#424242}.review-wrapper.modal-type.not-editing:hover{background-color:#eee}.review-wrapper.modal-type.not-editing:hover .controls{visibility:visible}.review-wrapper.modal-type .upper{padding:2px 2px 2px 4px;display:flex;justify-content:space-between}.review-wrapper.modal-type .upper .info{display:flex;align-items:center;gap:4px}.review-wrapper.modal-type .upper .info .name{line-height:18px;font-weight:600;color:#fff}.review-wrapper.modal-type .upper .info .dot{color:#919191}.review-wrapper.modal-type .upper .info .description,.review-wrapper.modal-type .upper .info .edit-time{color:#919191;font-weight:500;line-height:18px}.review-wrapper.modal-type .upper .rating{display:flex;gap:4px;align-items:center;padding-bottom:4px}.review-wrapper.modal-type .upper .rating .like-icon{display:inline-block;transform:scaleX(-1);display:grid;place-items:center;background-color:transparent!important}.review-wrapper.modal-type .upper .rating .like-icon:hover+span{opacity:1}.review-wrapper.modal-type .upper .rating .like-icon:hover path{fill:#ccc}.review-wrapper.modal-type .upper .rating .like-icon path{fill:#919191}.review-wrapper.modal-type .upper .rating .like-icon.like-active :hover path{fill:#b6dfdb}.review-wrapper.modal-type .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper.modal-type .upper .rating .dislike-icon{display:grid;place-items:center;background-color:transparent!important}.review-wrapper.modal-type .upper .rating .dislike-icon:hover+span{opacity:1}.review-wrapper.modal-type .upper .rating .dislike-icon:hover path{fill:#ccc}.review-wrapper.modal-type .upper .rating .dislike-icon path{fill:#919191}.review-wrapper.modal-type .upper .rating .dislike-icon.dislike-active :hover path{fill:#e87c7c}.review-wrapper.modal-type .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper.modal-type .upper .rating .separator{border:1px solid #919191;height:14px}.review-wrapper.modal-type .upper .rating svg-icon{width:18px;height:18px;display:grid;place-items:center;background-color:#ffffffb2}.review-wrapper.modal-type .upper .rating svg-icon:hover{cursor:pointer}.review-wrapper.modal-type .upper .rating .checkmark-icon{transition:transform .2s ease-in-out}.review-wrapper.modal-type .upper .rating .checkmark-icon:hover{background-color:#fff;transform:scale(1.2222222222)}.review-wrapper.modal-type .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper.modal-type .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper.modal-type .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.modal-type .upper .rating .checkmark-icon path{fill:#1d1d1d}.review-wrapper.modal-type .upper .rating .cancel-icon{transition:transform .2s ease-in-out}.review-wrapper.modal-type .upper .rating .cancel-icon:hover{background-color:#fff;transform:scale(1.2222222222)}.review-wrapper.modal-type .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper.modal-type .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper.modal-type .upper .rating .cancel-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.modal-type .upper .rating .cancel-icon path{fill:#1d1d1d}.profile-img{width:22px}.lower{color:#fff;outline:none;overflow-y:auto;padding:2px 4px 4px;display:block;background-color:#1d1d1d;border-radius:2px;line-height:18px}.lower:hover{cursor:pointer}.lower:empty:after{content:attr(data-placeholder);color:#919191}.svg-group{position:relative;display:flex;align-items:center}.bottom-divider-dark{margin-top:6px;border-bottom:1px solid #DADADA}.bottom-divider-light{border-bottom:1px solid #424242}svg-icon{display:inline-block;border-radius:1px;display:grid;place-items:center}svg-icon:hover{cursor:pointer}svg-icon svg{width:14px;height:14px}.review-wrapper.dark{background-color:#dadada!important;color:#919191;padding:2px}.review-wrapper.dark .upper{display:flex;align-items:center;padding:0 2px}.review-wrapper.dark .upper .info{display:flex;align-items:center;gap:4px;padding:0 2px}.review-wrapper.dark .upper .info .column{font-size:11px}.review-wrapper.dark .upper .info .column .upper-row{display:flex;gap:4px}.review-wrapper.dark .upper .info .column .upper-row .name{font-weight:600;color:#424242}.review-wrapper.dark .upper .info .column .upper-row svg-icon{width:18px!important;height:18px;display:flex;align-items:center}.review-wrapper.dark .upper .info .column .lower-row{display:flex;gap:4px}.review-wrapper.dark .upper .rating{display:flex;margin-left:auto;gap:4px;padding:2px 0}.review-wrapper.dark .upper .rating .like-icon{width:14px;height:14px;transform:scaleX(-1)}.review-wrapper.dark .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper.dark .upper .rating .like-icon:hover:not(.like-active) path{fill:#424242}.review-wrapper.dark .upper .rating .dislike-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.dark .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper.dark .upper .rating .dislike-icon:hover:not(.dislike-active) path{fill:#424242}.review-wrapper.dark .upper .rating .checkmark-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark .upper .rating .checkmark-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper.dark .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper.dark .upper .rating .checkmark-icon path{fill:#dadada}.review-wrapper.dark .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.dark .upper .rating .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark .upper .rating .cancel-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper.dark .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper.dark .upper .rating .cancel-icon path{fill:#dadada}.review-wrapper.dark .upper .rating .cancel-icon svg{fill:transparent!important;width:14px;border-radius:1px}.review-wrapper.dark .upper .controls{margin-left:auto;display:flex;gap:4px;padding:0 2px;visibility:hidden}.review-wrapper.dark .upper .controls .pencil-icon{padding:2px}.review-wrapper.dark .upper .controls .pencil-icon:hover{background-color:#6c6c6c}.review-wrapper.dark .upper .controls .pencil-icon:hover path{fill:#dadada}.review-wrapper.dark .upper .controls .trash-icon{padding:2px}.review-wrapper.dark .upper .controls .trash-icon:hover{background-color:#6c6c6c}.review-wrapper.dark .upper .controls .trash-icon:hover path{fill:#dadada}.review-wrapper.dark:hover{cursor:pointer}.review-wrapper.dark:hover .controls{visibility:visible!important}.review-wrapper.dark .lower{background-color:#dadada!important;color:#2f2f2f}.review-wrapper.dark.not-editing{background-color:#2f2f2f!important}.review-wrapper.dark.not-editing .upper{background-color:transparent}.review-wrapper.dark.not-editing .upper .name{color:#fff!important}.review-wrapper.dark.not-editing .lower{background-color:#2f2f2f!important;color:#fff!important}.review-wrapper.dark.not-editing:hover,.review-wrapper.dark.not-editing:hover .lower{background-color:#424242!important}.review-wrapper.dark.not-editing:hover .expand-icon,.review-wrapper.dark.not-editing:hover .collapse-icon{opacity:1}.review-wrapper.details-type{padding:2px}.review-wrapper.details-type:hover{background-color:#eee}.review-wrapper.details-type .upper{display:flex;align-items:start;padding:0 2px}.review-wrapper.details-type .upper .info{display:flex;align-items:center;gap:4px;padding:0 2px}.review-wrapper.details-type .upper .info .column{line-height:26px;font-size:11px}.review-wrapper.details-type .upper .info .column .upper-row{display:flex;align-items:center;gap:4px}.review-wrapper.details-type .upper .info .column .upper-row .name{font-weight:600;color:#424242;line-height:14px}.review-wrapper.details-type .upper .info .column .upper-row .personal{line-height:14px}.review-wrapper.details-type .upper .info .column .upper-row svg-icon{width:14px!important;height:14px;display:flex;align-items:center}.review-wrapper.details-type .upper .info .column .lower-row{display:flex;align-items:center;gap:4px}.review-wrapper.details-type .upper .info .column .lower-row .edit-time,.review-wrapper.details-type .upper .info .column .lower-row .edited{line-height:14px}.review-wrapper.details-type .upper .rating{display:flex;margin-left:auto;gap:4px;padding:2px 0}.review-wrapper.details-type .upper .rating .like-icon{width:14px;height:14px;transform:scaleX(-1)}.review-wrapper.details-type .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper.details-type .upper .rating .like-icon:hover:not(.like-active) path{fill:#424242}.review-wrapper.details-type .upper .rating .dislike-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.details-type .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper.details-type .upper .rating .dislike-icon:hover:not(.dislike-active) path{fill:#424242}.review-wrapper.details-type .upper .rating .checkmark-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.details-type .upper .rating .checkmark-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.details-type .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper.details-type .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper.details-type .upper .rating .checkmark-icon path{fill:#dadada}.review-wrapper.details-type .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.details-type .upper .rating .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.details-type .upper .rating .cancel-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.details-type .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper.details-type .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper.details-type .upper .rating .cancel-icon path{fill:#dadada}.review-wrapper.details-type .upper .rating .cancel-icon svg{fill:transparent!important;width:14px;border-radius:1px}.review-wrapper.details-type .upper .controls{margin-left:auto;display:flex;gap:4px;padding:0 2px;opacity:0;pointer-events:none}.review-wrapper.details-type .upper .controls .svg-group{display:flex;height:100%;align-items:start;padding:2px}.review-wrapper.details-type .upper .controls .svg-group .pencil-icon:hover{background-color:#6c6c6c}.review-wrapper.details-type .upper .controls .svg-group .pencil-icon:hover path{fill:#dadada}.review-wrapper.details-type .upper .controls .svg-group .trash-icon:hover{background-color:#6c6c6c}.review-wrapper.details-type .upper .controls .svg-group .trash-icon:hover path{fill:#dadada}.review-wrapper.details-type:hover{cursor:pointer}.review-wrapper.details-type:hover .controls{opacity:1!important;pointer-events:auto!important}.review-wrapper.details-type .lower{background-color:transparent!important;color:#2f2f2f}.expand-icon{padding:4px 2px;margin-left:auto;opacity:0}.expand-icon path{fill:#ccc}.collapse-icon{transform:rotate(180deg);padding:4px 2px;margin-left:auto;opacity:0}.collapse-icon path{fill:#ccc}\n"] }]
|
|
7132
7132
|
}], ctorParameters: () => [{ type: i2$1.DatePipe }], propDecorators: { type: [{
|
|
7133
7133
|
type: Input,
|
|
7134
7134
|
args: [{ required: true }]
|
|
@@ -7403,7 +7403,7 @@ class ReviewModalComponent {
|
|
|
7403
7403
|
});
|
|
7404
7404
|
}
|
|
7405
7405
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReviewModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7406
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ReviewModalComponent, isStandalone: true, selector: "cai-review-modal", inputs: { ratingReviews: "ratingReviews", modaltype: "modaltype" }, outputs: { reviewDeleted: "reviewDeleted" }, usesOnChanges: true, ngImport: i0, template: "@let reviewsLength = presentReviews.length;\n<div\n [class]=\"{\n 'modal-wrapper': modaltype === ReviewType.Modal,\n 'table-wrapper': modaltype === ReviewType.Table,\n 'details-wrapper': modaltype === ReviewType.Details,\n dark: modaltype === ReviewType.Table\n }\"\n>\n <!-- @if(modaltype === 'details-review' || modaltype === 'modal-review'){\n <div class=\"heading-wrapper\">\n <div class=\"heading\">\n <div class=\"heading-text\">\n <p>Edit Repair Shop</p>\n <span>IVS REPAIR SHOW KY</span>\n </div>\n <div class=\"icons\">\n <svg-icon name=\"cai-date\"></svg-icon>\n <div class=\"y-divider\"></div>\n <svg-icon name=\"cai-cancel\"></svg-icon>\n </div>\n </div>\n <div class=\"menu\">\n <div>Basic</div>\n <div>Additional</div>\n <div class=\"active\">Review</div>\n </div>\n </div>\n } -->\n <div class=\"main-window\">\n <!-- FILTER BOX -->\n <div class=\"box\">\n <div\n [class]=\"{\n filter: true,\n 'x-divider': modaltype === 'search'\n }\"\n >\n @if(modaltype===\"search\" && activeInput){\n <!-- <div class=\"input-container\">\n <cai-input [id]=\"id\" />\n </div> -->\n }\n <div class=\"column\">\n <div class=\"rating_review\">\n @if(modaltype !== ReviewType.Details){\n <div class=\"left-side\">\n <p class=\"count-heading\">Rating & Review</p>\n <div class=\"circle\">\n {{ presentReviews ? reviewsLength : 0 }}\n </div>\n @if(modaltype === ReviewType.Modal && reviewsLength !== 0){\n <div class=\"y-divider\"></div>\n }\n </div>\n } @if(modaltype !== 'Table' && reviewsLength > 0){\n <div class=\"counter\">\n <div\n (click)=\"\n activeReviews.set(false);\n activeLikes.set(true);\n activeDislikes.set(false);\n onChangePresentReviews('likes')\n \"\n [class]=\"{\n 'filter-group': true,\n 'active-group': activeLikes(),\n 'non-active-group': !activeLikes(),\n 'empty-state': countLikes === 0\n }\"\n [ngbTooltip]=\"activeLikes() ? 'Remove Filter' : 'Filter Likes'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-like\"\n class=\"like-icon\"\n [class.active]=\"activeLikes()\"\n ></svg-icon>\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"\n activeLikes.set(false);\n $event.stopPropagation();\n onChangePresentReviews('all')\n \"\n ></svg-icon>\n <span class=\"count\">{{ countLikes }}</span>\n </div>\n <div\n (click)=\"\n activeReviews.set(false);\n activeLikes.set(false);\n activeDislikes.set(true);\n onChangePresentReviews('dislikes')\n \"\n [class]=\"{\n 'filter-group': true,\n 'active-group': activeDislikes(),\n 'non-active-group': !activeDislikes(),\n 'empty-state': countDislikes === 0\n }\"\n [ngbTooltip]=\"\n activeDislikes() ? 'Remove Filter' : 'Filter Dislikes'\n \"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-dislike\"\n [class.active]=\"activeDislikes()\"\n class=\"dislike-icon\"\n ></svg-icon>\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"\n $event.stopPropagation();\n activeDislikes.set(false);\n onChangePresentReviews('all')\n \"\n ></svg-icon>\n <span class=\"count\">{{ countDislikes }}</span>\n </div>\n <div\n (click)=\"\n activeReviews.set(true);\n activeLikes.set(false);\n activeDislikes.set(false);\n onChangePresentReviews('reviews')\n \"\n [class]=\"{\n 'filter-group': true,\n 'active-group': activeReviews(),\n 'non-active-group': !activeReviews(),\n 'empty-state': countReviews === 0\n }\"\n [ngbTooltip]=\"\n activeReviews() ? 'Remove Filter' : 'Filter Reviews'\n \"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-edit2\"\n [class.active]=\"activeReviews()\"\n class=\"pencil-icon\"\n ></svg-icon>\n\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"\n $event.stopPropagation();\n activeReviews.set(false);\n onChangePresentReviews('all')\n \"\n ></svg-icon>\n\n <span class=\"count\">{{ countReviews }}</span>\n </div>\n </div>\n }\n </div>\n @if(ratingReviews && reviewsLength > 0){\n <div class=\"date-group\">\n <span>Date</span>\n <svg-icon name=\"cai-sort-descending\"></svg-icon>\n </div>\n } @if(modaltype === ReviewType.Details || modaltype ===\n ReviewType.Modal){\n <div\n class=\"filter-group\"\n [ngStyle]=\"{\n display: addingReview() && reviewsLength === 0 ? 'none' : 'flex'\n }\"\n ngbTooltip=\"Add New\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-plus\"\n class=\"plus-icon\"\n (click)=\"onAddReview()\"\n [class.disabled]=\"disabled()\"\n ></svg-icon>\n </div>\n }\n </div>\n </div>\n @if(modaltype=== 'Table' && reviewsLength > 0){\n <!-- <cai-input [id]=\"id\" [config]=\"config\" /> -->\n <div class=\"btn-filters\">\n <div\n [class.active]=\"currentActiveFilter === 'all'\"\n (click)=\"onChangePresentReviews('all')\"\n >\n ALL\n </div>\n <div\n [class.active]=\"currentActiveFilter === 'rating'\"\n (click)=\"onChangePresentReviews('rating')\"\n >\n RATING\n </div>\n <div\n [class.active]=\"currentActiveFilter === 'reviews'\"\n (click)=\"onChangePresentReviews('reviews')\"\n >\n REVIEW\n </div>\n </div>\n }\n </div>\n\n <!-- MAIN MODAL -->\n <div class=\"reviews-window\">\n @if(modaltype==='Table' && !hasPersonalReview){\n <div class=\"add-review\" (click)=\"onAddReview()\">\n <p>ADD REVIEW</p>\n <div class=\"filter-group\">\n <svg-icon\n name=\"cai-plus\"\n class=\"plus-icon\"\n [class.disabled]=\"disabled()\"\n ></svg-icon>\n </div>\n </div>\n } @if(presentReviews && reviewsLength == 0 && !addingReview()){\n <div class=\"ilustration\">\n <svg-icon\n [name]=\"\n modaltype !== 'Table' ? 'cai-illustration' : 'cai-illustration-dark'\n \"\n ></svg-icon>\n </div>\n }@else { @if (addingReview()) {\n <cai-single-review\n [type]=\"modaltype\"\n [singleReview]=\"this.testReview\"\n (deleteReview)=\"onDeleteReview($event)\"\n (onAddedReview)=\"getReview($event)\"\n />\n } @for(review of presentReviews; track review.ratingId){\n <cai-single-review\n [type]=\"modaltype\"\n [singleReview]=\"review\"\n (deleteReview)=\"onDeleteReview($event)\"\n />\n } } \n <!-- MAIN MODAL -->\n </div>\n </div>\n <!-- @if(modaltype !== 'table-review'){\n <div class=\"button-wrapper\">\n <div class=\"x-divider\"></div>\n <div class=\"buttons\">\n <div class=\"delete-close\">\n <button class=\"delete\">Delete</button>\n <button class=\"close\">Close Business</button>\n </div>\n <button\n [class]=\"{\n 'save-btn': true,\n 'disabled-btn': reviewsLength == 0\n }\"\n >\n Save Changes\n </button>\n </div>\n </div>\n } -->\n</div>\n", styles: ["svg-icon svg{width:18px;height:18px}svg-icon svg path{fill-opacity:1}p{margin:0!important}button{border:none!important}.y-divider{border:1px solid #DADADA;height:18px}.x-divider{width:100%;border-bottom:1px solid #EEEEEE}.column{display:flex;width:100%}.disabled-btn{background-color:#f7f7f7!important;color:#ccc!important}.modal-wrapper{max-width:468px;display:flex;flex-direction:column;gap:4px;position:absolute;width:100%}.modal-wrapper .filter{padding:4px 6px}.modal-wrapper .filter .left-side .count-heading{line-height:18px;font-size:14px;color:#424242}.modal-wrapper .filter .left-side .circle{padding:2px 5px;width:21px}.modal-wrapper .filter-group{padding:0}.modal-wrapper .heading-wrapper{display:flex;flex-direction:column;gap:12px;padding:4px 6px}.table-wrapper{margin-top:4px;max-width:260px;padding:4px;border-radius:3px}.table-wrapper .filter{padding:0 0 0 4px;margin-bottom:4px}.table-wrapper .filter .left-side{display:flex;align-items:center}.table-wrapper .filter .left-side .count-heading{text-transform:uppercase;font-size:11px;line-height:14px;font-weight:800}.table-wrapper .filter .left-side .circle{background-color:#424242}.table-wrapper .filter .date-group span{font-size:11px;line-height:14px;font-weight:500}.table-wrapper .filter .date-group svg-icon{width:18px;height:18px}.table-wrapper .btn-filters div{font-size:11px;line-height:14px;font-weight:700}.details-wrapper{max-width:312px}.heading{display:flex;width:100%;justify-content:space-between;padding:4px 6px}.heading .heading-text{display:flex;gap:6px;align-items:center}.heading .heading-text p{font-weight:800;font-size:18px}.heading .heading-text span{background-color:#919191;color:#fff;font-weight:700;vertical-align:middle;padding:4px 8px;border-radius:2px}.heading .icons{display:flex;justify-content:space-between;align-items:center;min-width:60px}.heading .icons svg-icon{width:18px;height:18px;display:grid;place-items:center;cursor:pointer}.heading .icons svg-icon path{fill:#919191}.menu{padding:4px;display:flex;background-color:#eee;border-radius:2px;justify-content:space-evenly}.menu div{border-radius:2px;padding:4px 8px;font-size:14px;font-weight:700;color:#aaa;width:33%;text-align:center}.menu div.active{background-color:#fff;color:#3b73ed}.box{display:flex;flex-direction:column}.btn-filters{display:flex;border-radius:2px;padding:4px;gap:4px;justify-content:space-between;background-color:#1d1d1d}.btn-filters div{width:33%;text-align:center;border-radius:1px;padding:2px 8px;gap:10px;font-weight:700;color:#919191}.btn-filters div:hover{cursor:pointer}.btn-filters div.active{background-color:#2f2f2f;color:#fff}.add-review{display:flex;justify-content:space-between;align-items:center;padding:4px 6px}.add-review p{color:#92b1f5}.add-review .plus-icon path{fill:#92b1f5!important}.add-review .plus-icon:hover{background-color:transparent!important}.add-review:hover{background-color:#3b73ed3f;cursor:pointer}.add-review:hover p{color:#fff}.filter{display:flex;padding:6px;align-items:center;flex-direction:column}.rating_review{display:flex;align-items:center;gap:6px;margin-right:auto}.rating_review .left-side{display:flex;gap:4px;align-items:center}.rating_review .counter{display:flex;align-items:center;gap:4px}.filter-group{display:flex;justify-content:flex-start;position:relative;align-items:center;border-radius:2px;padding:4px!important;gap:4px}.filter-group.active-group{background-color:#6c6c6c}.filter-group.active-group .cancel-icon path{fill:#fff}.filter-group.active-group .count{color:#fff}.filter-group.active-group:hover{background-color:#424242}.filter-group.active-group:hover .cancel-icon{display:flex}.filter-group.active-group:hover .count{display:none}.filter-group.non-active-group:hover{background-color:#eee!important;cursor:pointer}.filter-group.non-active-group:hover svg-icon path{fill:#424242!important}.filter-group svg-icon{width:18px;height:18px;display:grid;place-items:center}.filter-group svg-icon path{fill:#919191}.filter-group svg-icon:hover{background-color:transparent}.filter-group .cancel-icon{width:14px;height:14px;display:none}.filter-group .like-icon{transform:rotateY(180deg)}.filter-group .like-icon svg{margin-bottom:auto!important}.filter-group .like-icon.active path{fill:#56b4ac}.filter-group .dislike-icon.active path{fill:#e66767}.filter-group .pencil-icon.active path{fill:#ffffffb2}.filter-group .plus-icon{width:26px;height:26px;display:grid;place-items:center;position:relative}.filter-group .plus-icon svg{width:18px;height:18px}.filter-group .plus-icon path{fill:#6692f1}.filter-group .plus-icon:hover{cursor:pointer;background-color:#e9effd}.filter-group .plus-icon:hover path{fill:#0b49d1}.filter-group .count{font-weight:800;font-size:11px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:#919191}p{font-weight:800}.date-group{font-weight:500;display:flex;align-items:center;gap:4px;padding-left:6px}.date-group svg-icon{width:26px;height:26px;display:grid;place-items:center}.date-group svg-icon svg{width:18px;height:18px}.circle{width:18px;height:18px;border-radius:60px;background-color:#6c6c6c;color:#fff;padding:4px 5px;display:flex;justify-content:center;align-items:center;font-size:11px;font-weight:700}.disabled{pointer-events:none!important}.disabled svg path{fill:#ccc!important}.main-window .ilustration{width:100%!important;object-fit:contain;object-position:center}.main-window .ilustration svg-icon{width:100%!important}.main-window .ilustration svg-icon svg{width:100%!important;height:100%!important}.reviews-window{height:100%!important;padding:0 6px 6px 4px;display:flex;flex-direction:column;gap:4px}.button-wrapper{display:flex;flex-direction:column;gap:12px}.buttons{display:flex;justify-content:space-between}.buttons button{font-size:14px;font-weight:700;padding:6px;border-radius:2px;cursor:pointer}.buttons .delete-close{display:flex;gap:12px}.buttons .delete-close .delete{color:#df3c3c;width:100px}.buttons .delete-close .close{width:150px}.buttons .save-btn{background-color:#3b73ed;color:#fff;min-width:150px}.dark{background-color:#2f2f2f!important;color:#fff}.dark .count-heading{color:#fff}.input-container{width:100%;margin-bottom:10px}.empty-state{cursor:none;pointer-events:none}.empty-state svg-icon path{fill:#91919166}.empty-state span{color:#91919166}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: SingleReviewComponent, selector: "cai-single-review", inputs: ["type", "singleReview"], outputs: ["deleteReview", "addRating", "onAddedReview"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NgbPopoverModule }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
|
|
7406
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ReviewModalComponent, isStandalone: true, selector: "cai-review-modal", inputs: { ratingReviews: "ratingReviews", modaltype: "modaltype" }, outputs: { reviewDeleted: "reviewDeleted" }, usesOnChanges: true, ngImport: i0, template: "@let reviewsLength = presentReviews.length;\n<div\n [class]=\"{\n 'modal-wrapper': modaltype === ReviewType.Modal,\n 'table-wrapper': modaltype === ReviewType.Table,\n 'details-wrapper': modaltype === ReviewType.Details,\n dark: modaltype === ReviewType.Table\n }\"\n>\n <!-- @if(modaltype === 'details-review' || modaltype === 'modal-review'){\n <div class=\"heading-wrapper\">\n <div class=\"heading\">\n <div class=\"heading-text\">\n <p>Edit Repair Shop</p>\n <span>IVS REPAIR SHOW KY</span>\n </div>\n <div class=\"icons\">\n <svg-icon name=\"cai-date\"></svg-icon>\n <div class=\"y-divider\"></div>\n <svg-icon name=\"cai-cancel\"></svg-icon>\n </div>\n </div>\n <div class=\"menu\">\n <div>Basic</div>\n <div>Additional</div>\n <div class=\"active\">Review</div>\n </div>\n </div>\n } -->\n <div class=\"main-window\">\n <!-- FILTER BOX -->\n <div class=\"box\">\n <div\n [class]=\"{\n filter: true,\n }\"\n > \n <div class=\"column\">\n <div class=\"rating_review\">\n @if(modaltype !== ReviewType.Details){\n <div class=\"left-side\">\n <p class=\"count-heading\">Rating & Review</p>\n <div class=\"circle\">\n {{ presentReviews ? reviewsLength : 0 }}\n </div>\n @if(modaltype === ReviewType.Modal && reviewsLength !== 0){\n <div class=\"y-divider\"></div>\n }\n </div>\n } \n \n @if(modaltype !== 'Table' && reviewsLength > 0){\n <div class=\"counter\">\n <div\n (click)=\"\n activeReviews.set(false);\n activeLikes.set(true);\n activeDislikes.set(false);\n onChangePresentReviews('likes')\n \"\n [class]=\"{\n 'filter-group': true,\n 'active-group': activeLikes(),\n 'non-active-group': !activeLikes(),\n 'empty-state': countLikes === 0\n }\"\n [ngbTooltip]=\"activeLikes() ? 'Remove Filter' : 'Filter Likes'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-like\"\n class=\"like-icon\"\n [class.active]=\"activeLikes()\"\n ></svg-icon>\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"\n activeLikes.set(false);\n $event.stopPropagation();\n onChangePresentReviews('all')\n \"\n ></svg-icon>\n <span class=\"count\">{{ countLikes }}</span>\n </div>\n <div\n (click)=\"\n activeReviews.set(false);\n activeLikes.set(false);\n activeDislikes.set(true);\n onChangePresentReviews('dislikes')\n \"\n [class]=\"{\n 'filter-group': true,\n 'active-group': activeDislikes(),\n 'non-active-group': !activeDislikes(),\n 'empty-state': countDislikes === 0\n }\"\n [ngbTooltip]=\"\n activeDislikes() ? 'Remove Filter' : 'Filter Dislikes'\n \"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-dislike\"\n [class.active]=\"activeDislikes()\"\n class=\"dislike-icon\"\n ></svg-icon>\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"\n $event.stopPropagation();\n activeDislikes.set(false);\n onChangePresentReviews('all')\n \"\n ></svg-icon>\n <span class=\"count\">{{ countDislikes }}</span>\n </div>\n <div\n (click)=\"\n activeReviews.set(true);\n activeLikes.set(false);\n activeDislikes.set(false);\n onChangePresentReviews('reviews')\n \"\n [class]=\"{\n 'filter-group': true,\n 'active-group': activeReviews(),\n 'non-active-group': !activeReviews(),\n 'empty-state': countReviews === 0\n }\"\n [ngbTooltip]=\"\n activeReviews() ? 'Remove Filter' : 'Filter Reviews'\n \"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-edit2\"\n [class.active]=\"activeReviews()\"\n class=\"pencil-icon\"\n ></svg-icon>\n\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"\n $event.stopPropagation();\n activeReviews.set(false);\n onChangePresentReviews('all')\n \"\n ></svg-icon>\n\n <span class=\"count\">{{ countReviews }}</span>\n </div>\n </div>\n }\n </div>\n @if(ratingReviews && reviewsLength > 0){\n <div class=\"date-group\">\n <span>Date</span>\n <svg-icon name=\"cai-sort-descending\"></svg-icon>\n </div>\n \n } @if(modaltype ===\n ReviewType.Modal){\n <div\n class=\"filter-group\"\n [ngStyle]=\"{\n display: addingReview() && reviewsLength === 0 ? 'none' : 'flex'\n }\"\n ngbTooltip=\"Add New\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-plus\"\n class=\"plus-icon\"\n (click)=\"onAddReview()\"\n [class.disabled]=\"disabled()\"\n ></svg-icon>\n </div>\n }\n </div>\n @if(modaltype === ReviewType.Table){\n <div class=\"input-container\">\n <cai-input [config]=\"{type:'text',name:'Find Title', icon: 'cai-search', inverse: true}\" />\n </div>\n }\n @if(modaltype === ReviewType.Details){\n <div class=\"bottom-divider-light\"></div>\n }\n </div>\n @if(modaltype=== 'Table' && reviewsLength > 0){\n <!-- <cai-input [id]=\"id\" [config]=\"config\" /> -->\n <div class=\"btn-filters\">\n <div\n [class.active]=\"currentActiveFilter === 'all'\"\n (click)=\"onChangePresentReviews('all')\"\n >\n ALL\n </div>\n <div\n [class.active]=\"currentActiveFilter === 'rating'\"\n (click)=\"onChangePresentReviews('rating')\"\n >\n RATING\n </div>\n <div\n [class.active]=\"currentActiveFilter === 'reviews'\"\n (click)=\"onChangePresentReviews('reviews')\"\n >\n REVIEW\n </div>\n </div>\n }\n </div>\n\n <!-- MAIN MODAL -->\n <div class=\"reviews-window\">\n @if(modaltype==='Table' && !hasPersonalReview){\n <div class=\"add-review\" (click)=\"onAddReview()\">\n <p>ADD REVIEW</p>\n <div class=\"filter-group\">\n <svg-icon\n name=\"cai-plus\"\n class=\"plus-icon\"\n [class.disabled]=\"disabled()\"\n ></svg-icon>\n </div>\n </div>\n } @if(presentReviews && reviewsLength == 0 && !addingReview()){\n <div class=\"ilustration\">\n <svg-icon\n [name]=\"\n modaltype !== 'Table' ? 'cai-illustration' : 'cai-illustration-dark'\n \"\n ></svg-icon>\n </div>\n }@else { @if (addingReview()) {\n <cai-single-review\n [type]=\"modaltype\"\n [singleReview]=\"this.testReview\"\n (deleteReview)=\"onDeleteReview($event)\"\n (onAddedReview)=\"getReview($event)\"\n />\n } @for(review of presentReviews; track review.ratingId){\n <cai-single-review\n [type]=\"modaltype\"\n [singleReview]=\"review\"\n (deleteReview)=\"onDeleteReview($event)\"\n />\n } } \n <!-- MAIN MODAL -->\n </div>\n </div>\n <!-- @if(modaltype !== 'table-review'){\n <div class=\"button-wrapper\">\n <div class=\"x-divider\"></div>\n <div class=\"buttons\">\n <div class=\"delete-close\">\n <button class=\"delete\">Delete</button>\n <button class=\"close\">Close Business</button>\n </div>\n <button\n [class]=\"{\n 'save-btn': true,\n 'disabled-btn': reviewsLength == 0\n }\"\n >\n Save Changes\n </button>\n </div>\n </div>\n } -->\n</div>\n", styles: ["svg-icon svg{width:18px;height:18px}svg-icon svg path{fill-opacity:1}p{margin:0!important}button{border:none!important}.y-divider{border:1px solid #DADADA;height:18px}.x-divider{width:100%;border-bottom:1px solid #EEEEEE}.column{display:flex;width:100%}.disabled-btn{background-color:#f7f7f7!important;color:#ccc!important}.modal-wrapper{max-width:468px;display:flex;flex-direction:column;gap:4px;position:absolute;width:100%}.modal-wrapper .filter{padding:4px 6px}.modal-wrapper .filter .left-side .count-heading{line-height:18px;font-size:14px;color:#424242}.modal-wrapper .filter .left-side .circle{padding:2px 5px;width:21px}.modal-wrapper .filter-group{padding:0}.modal-wrapper .heading-wrapper{display:flex;flex-direction:column;gap:12px;padding:4px 6px}.table-wrapper{margin-top:4px;max-width:260px;padding:4px;border-radius:3px}.table-wrapper .filter{padding:0 0 0 4px;margin-bottom:4px}.table-wrapper .filter .left-side{display:flex;align-items:center}.table-wrapper .filter .left-side .count-heading{text-transform:uppercase;font-size:11px;line-height:14px;font-weight:800}.table-wrapper .filter .left-side .circle{background-color:#424242}.table-wrapper .filter .date-group span{font-size:11px;line-height:14px;font-weight:500}.table-wrapper .filter .date-group svg-icon{width:18px;height:18px}.table-wrapper .btn-filters div{font-size:11px;line-height:14px;font-weight:700}.details-wrapper{max-width:312px}.heading{display:flex;width:100%;justify-content:space-between;padding:4px 6px}.heading .heading-text{display:flex;gap:6px;align-items:center}.heading .heading-text p{font-weight:800;font-size:18px}.heading .heading-text span{background-color:#919191;color:#fff;font-weight:700;vertical-align:middle;padding:4px 8px;border-radius:2px}.heading .icons{display:flex;justify-content:space-between;align-items:center;min-width:60px}.heading .icons svg-icon{width:18px;height:18px;display:grid;place-items:center;cursor:pointer}.heading .icons svg-icon path{fill:#919191}.menu{padding:4px;display:flex;background-color:#eee;border-radius:2px;justify-content:space-evenly}.menu div{border-radius:2px;padding:4px 8px;font-size:14px;font-weight:700;color:#aaa;width:33%;text-align:center}.menu div.active{background-color:#fff;color:#3b73ed}.box{display:flex;flex-direction:column}.btn-filters{display:flex;border-radius:2px;padding:4px;gap:4px;justify-content:space-between;background-color:#1d1d1d}.btn-filters div{width:33%;text-align:center;border-radius:1px;padding:2px 8px;gap:10px;font-weight:700;color:#919191}.btn-filters div:hover{cursor:pointer}.btn-filters div.active{background-color:#2f2f2f;color:#fff}.add-review{display:flex;justify-content:space-between;align-items:center;padding:4px 6px}.add-review p{color:#92b1f5}.add-review .plus-icon path{fill:#92b1f5!important}.add-review .plus-icon:hover{background-color:transparent!important}.add-review:hover{background-color:#3b73ed3f;cursor:pointer}.add-review:hover p{color:#fff}.filter{display:flex;padding:6px;align-items:center;flex-direction:column}.rating_review{display:flex;align-items:center;gap:6px;margin-right:auto}.rating_review .left-side{display:flex;gap:4px;align-items:center}.rating_review .counter{display:flex;align-items:center;gap:4px}.filter-group{display:flex;justify-content:center;position:relative;align-items:center;border-radius:2px;padding:4px!important;gap:4px}.filter-group.active-group{background-color:#6c6c6c}.filter-group.active-group .cancel-icon path{fill:#fff}.filter-group.active-group .count{color:#fff}.filter-group.active-group:hover{background-color:#424242}.filter-group.active-group:hover .cancel-icon{display:flex}.filter-group.active-group:hover .count{display:none}.filter-group.non-active-group:hover{background-color:#eee!important;cursor:pointer}.filter-group.non-active-group:hover svg-icon path{fill:#424242!important}.filter-group svg-icon{width:18px;height:18px;display:grid;place-items:center}.filter-group svg-icon path{fill:#919191}.filter-group svg-icon:hover{background-color:transparent}.filter-group span{width:100%}.filter-group .cancel-icon{width:14px;height:14px;display:none}.filter-group .like-icon{transform:rotateY(180deg)}.filter-group .like-icon svg{margin-bottom:auto!important}.filter-group .like-icon.active path{fill:#56b4ac}.filter-group .dislike-icon.active path{fill:#e66767}.filter-group .pencil-icon.active path{fill:#ffffffb2}.filter-group .plus-icon{width:26px;height:26px;display:grid;place-items:center;position:relative}.filter-group .plus-icon svg{width:18px;height:18px}.filter-group .plus-icon path{fill:#6692f1}.filter-group .plus-icon:hover{cursor:pointer;background-color:#e9effd}.filter-group .plus-icon:hover path{fill:#0b49d1}.filter-group .count{font-weight:800;font-size:11px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:#919191}p{font-weight:800}.date-group{font-weight:500;display:flex;align-items:center;gap:4px;padding-left:6px;line-height:18px}.date-group svg-icon{width:18px;height:18px;display:grid;place-items:center}.circle{width:18px;height:18px;border-radius:60px;background-color:#6c6c6c;color:#fff;padding:4px 5px;display:flex;justify-content:center;align-items:center;font-size:11px;font-weight:700}.disabled{pointer-events:none!important}.disabled svg path{fill:#ccc!important}.main-window .ilustration{width:100%!important;object-fit:contain;object-position:center}.main-window .ilustration svg-icon{width:100%!important}.main-window .ilustration svg-icon svg{width:100%!important;height:100%!important}.reviews-window{height:100%!important;padding:0 6px 6px 4px;display:flex;flex-direction:column;gap:4px}.button-wrapper{display:flex;flex-direction:column;gap:12px}.buttons{display:flex;justify-content:space-between}.buttons button{font-size:14px;font-weight:700;padding:6px;border-radius:2px;cursor:pointer}.buttons .delete-close{display:flex;gap:12px}.buttons .delete-close .delete{color:#df3c3c;width:100px}.buttons .delete-close .close{width:150px}.buttons .save-btn{background-color:#3b73ed;color:#fff;min-width:150px}.dark{background-color:#2f2f2f!important;color:#fff}.dark .count-heading{color:#fff}.input-container{width:100%;margin-bottom:4px;margin-top:4px}.empty-state{cursor:none;pointer-events:none}.empty-state svg-icon path{fill:#91919166}.empty-state span{color:#91919166}.bottom-divider-light{width:100%;margin-top:6px;border-bottom:1px solid #DADADA}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: SingleReviewComponent, selector: "cai-single-review", inputs: ["type", "singleReview"], outputs: ["deleteReview", "addRating", "onAddedReview"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: NgbPopoverModule }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: InputComponent, selector: "cai-input", inputs: ["id", "config", "options", "preselectedOptions", "isLoading", "labelColors", "hideValidation", "showNoResults", "preselectedUnit"], outputs: ["onBlur", "onFocused", "onValueChange", "onOptionAdded", "onAdd", "onSelectionChange", "onSelectedObject", "onSelectedGroup", "onClear", "onAutofill", "onScrolledToBottom", "onScrolledToBottomGroup", "onSearch"] }] });
|
|
7407
7407
|
}
|
|
7408
7408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReviewModalComponent, decorators: [{
|
|
7409
7409
|
type: Component,
|
|
@@ -7413,7 +7413,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7413
7413
|
CommonModule,
|
|
7414
7414
|
NgbPopoverModule,
|
|
7415
7415
|
NgbTooltipModule,
|
|
7416
|
-
], template: "@let reviewsLength = presentReviews.length;\n<div\n [class]=\"{\n 'modal-wrapper': modaltype === ReviewType.Modal,\n 'table-wrapper': modaltype === ReviewType.Table,\n 'details-wrapper': modaltype === ReviewType.Details,\n dark: modaltype === ReviewType.Table\n }\"\n>\n <!-- @if(modaltype === 'details-review' || modaltype === 'modal-review'){\n <div class=\"heading-wrapper\">\n <div class=\"heading\">\n <div class=\"heading-text\">\n <p>Edit Repair Shop</p>\n <span>IVS REPAIR SHOW KY</span>\n </div>\n <div class=\"icons\">\n <svg-icon name=\"cai-date\"></svg-icon>\n <div class=\"y-divider\"></div>\n <svg-icon name=\"cai-cancel\"></svg-icon>\n </div>\n </div>\n <div class=\"menu\">\n <div>Basic</div>\n <div>Additional</div>\n <div class=\"active\">Review</div>\n </div>\n </div>\n } -->\n <div class=\"main-window\">\n <!-- FILTER BOX -->\n <div class=\"box\">\n <div\n [class]=\"{\n filter: true,\n 'x-divider': modaltype === 'search'\n }\"\n >\n @if(modaltype===\"search\" && activeInput){\n <!-- <div class=\"input-container\">\n <cai-input [id]=\"id\" />\n </div> -->\n }\n <div class=\"column\">\n <div class=\"rating_review\">\n @if(modaltype !== ReviewType.Details){\n <div class=\"left-side\">\n <p class=\"count-heading\">Rating & Review</p>\n <div class=\"circle\">\n {{ presentReviews ? reviewsLength : 0 }}\n </div>\n @if(modaltype === ReviewType.Modal && reviewsLength !== 0){\n <div class=\"y-divider\"></div>\n }\n </div>\n } @if(modaltype !== 'Table' && reviewsLength > 0){\n <div class=\"counter\">\n <div\n (click)=\"\n activeReviews.set(false);\n activeLikes.set(true);\n activeDislikes.set(false);\n onChangePresentReviews('likes')\n \"\n [class]=\"{\n 'filter-group': true,\n 'active-group': activeLikes(),\n 'non-active-group': !activeLikes(),\n 'empty-state': countLikes === 0\n }\"\n [ngbTooltip]=\"activeLikes() ? 'Remove Filter' : 'Filter Likes'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-like\"\n class=\"like-icon\"\n [class.active]=\"activeLikes()\"\n ></svg-icon>\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"\n activeLikes.set(false);\n $event.stopPropagation();\n onChangePresentReviews('all')\n \"\n ></svg-icon>\n <span class=\"count\">{{ countLikes }}</span>\n </div>\n <div\n (click)=\"\n activeReviews.set(false);\n activeLikes.set(false);\n activeDislikes.set(true);\n onChangePresentReviews('dislikes')\n \"\n [class]=\"{\n 'filter-group': true,\n 'active-group': activeDislikes(),\n 'non-active-group': !activeDislikes(),\n 'empty-state': countDislikes === 0\n }\"\n [ngbTooltip]=\"\n activeDislikes() ? 'Remove Filter' : 'Filter Dislikes'\n \"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-dislike\"\n [class.active]=\"activeDislikes()\"\n class=\"dislike-icon\"\n ></svg-icon>\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"\n $event.stopPropagation();\n activeDislikes.set(false);\n onChangePresentReviews('all')\n \"\n ></svg-icon>\n <span class=\"count\">{{ countDislikes }}</span>\n </div>\n <div\n (click)=\"\n activeReviews.set(true);\n activeLikes.set(false);\n activeDislikes.set(false);\n onChangePresentReviews('reviews')\n \"\n [class]=\"{\n 'filter-group': true,\n 'active-group': activeReviews(),\n 'non-active-group': !activeReviews(),\n 'empty-state': countReviews === 0\n }\"\n [ngbTooltip]=\"\n activeReviews() ? 'Remove Filter' : 'Filter Reviews'\n \"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-edit2\"\n [class.active]=\"activeReviews()\"\n class=\"pencil-icon\"\n ></svg-icon>\n\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"\n $event.stopPropagation();\n activeReviews.set(false);\n onChangePresentReviews('all')\n \"\n ></svg-icon>\n\n <span class=\"count\">{{ countReviews }}</span>\n </div>\n </div>\n }\n </div>\n @if(ratingReviews && reviewsLength > 0){\n <div class=\"date-group\">\n <span>Date</span>\n <svg-icon name=\"cai-sort-descending\"></svg-icon>\n </div>\n } @if(modaltype === ReviewType.Details || modaltype ===\n ReviewType.Modal){\n <div\n class=\"filter-group\"\n [ngStyle]=\"{\n display: addingReview() && reviewsLength === 0 ? 'none' : 'flex'\n }\"\n ngbTooltip=\"Add New\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-plus\"\n class=\"plus-icon\"\n (click)=\"onAddReview()\"\n [class.disabled]=\"disabled()\"\n ></svg-icon>\n </div>\n }\n </div>\n </div>\n @if(modaltype=== 'Table' && reviewsLength > 0){\n <!-- <cai-input [id]=\"id\" [config]=\"config\" /> -->\n <div class=\"btn-filters\">\n <div\n [class.active]=\"currentActiveFilter === 'all'\"\n (click)=\"onChangePresentReviews('all')\"\n >\n ALL\n </div>\n <div\n [class.active]=\"currentActiveFilter === 'rating'\"\n (click)=\"onChangePresentReviews('rating')\"\n >\n RATING\n </div>\n <div\n [class.active]=\"currentActiveFilter === 'reviews'\"\n (click)=\"onChangePresentReviews('reviews')\"\n >\n REVIEW\n </div>\n </div>\n }\n </div>\n\n <!-- MAIN MODAL -->\n <div class=\"reviews-window\">\n @if(modaltype==='Table' && !hasPersonalReview){\n <div class=\"add-review\" (click)=\"onAddReview()\">\n <p>ADD REVIEW</p>\n <div class=\"filter-group\">\n <svg-icon\n name=\"cai-plus\"\n class=\"plus-icon\"\n [class.disabled]=\"disabled()\"\n ></svg-icon>\n </div>\n </div>\n } @if(presentReviews && reviewsLength == 0 && !addingReview()){\n <div class=\"ilustration\">\n <svg-icon\n [name]=\"\n modaltype !== 'Table' ? 'cai-illustration' : 'cai-illustration-dark'\n \"\n ></svg-icon>\n </div>\n }@else { @if (addingReview()) {\n <cai-single-review\n [type]=\"modaltype\"\n [singleReview]=\"this.testReview\"\n (deleteReview)=\"onDeleteReview($event)\"\n (onAddedReview)=\"getReview($event)\"\n />\n } @for(review of presentReviews; track review.ratingId){\n <cai-single-review\n [type]=\"modaltype\"\n [singleReview]=\"review\"\n (deleteReview)=\"onDeleteReview($event)\"\n />\n } } \n <!-- MAIN MODAL -->\n </div>\n </div>\n <!-- @if(modaltype !== 'table-review'){\n <div class=\"button-wrapper\">\n <div class=\"x-divider\"></div>\n <div class=\"buttons\">\n <div class=\"delete-close\">\n <button class=\"delete\">Delete</button>\n <button class=\"close\">Close Business</button>\n </div>\n <button\n [class]=\"{\n 'save-btn': true,\n 'disabled-btn': reviewsLength == 0\n }\"\n >\n Save Changes\n </button>\n </div>\n </div>\n } -->\n</div>\n", styles: ["svg-icon svg{width:18px;height:18px}svg-icon svg path{fill-opacity:1}p{margin:0!important}button{border:none!important}.y-divider{border:1px solid #DADADA;height:18px}.x-divider{width:100%;border-bottom:1px solid #EEEEEE}.column{display:flex;width:100%}.disabled-btn{background-color:#f7f7f7!important;color:#ccc!important}.modal-wrapper{max-width:468px;display:flex;flex-direction:column;gap:4px;position:absolute;width:100%}.modal-wrapper .filter{padding:4px 6px}.modal-wrapper .filter .left-side .count-heading{line-height:18px;font-size:14px;color:#424242}.modal-wrapper .filter .left-side .circle{padding:2px 5px;width:21px}.modal-wrapper .filter-group{padding:0}.modal-wrapper .heading-wrapper{display:flex;flex-direction:column;gap:12px;padding:4px 6px}.table-wrapper{margin-top:4px;max-width:260px;padding:4px;border-radius:3px}.table-wrapper .filter{padding:0 0 0 4px;margin-bottom:4px}.table-wrapper .filter .left-side{display:flex;align-items:center}.table-wrapper .filter .left-side .count-heading{text-transform:uppercase;font-size:11px;line-height:14px;font-weight:800}.table-wrapper .filter .left-side .circle{background-color:#424242}.table-wrapper .filter .date-group span{font-size:11px;line-height:14px;font-weight:500}.table-wrapper .filter .date-group svg-icon{width:18px;height:18px}.table-wrapper .btn-filters div{font-size:11px;line-height:14px;font-weight:700}.details-wrapper{max-width:312px}.heading{display:flex;width:100%;justify-content:space-between;padding:4px 6px}.heading .heading-text{display:flex;gap:6px;align-items:center}.heading .heading-text p{font-weight:800;font-size:18px}.heading .heading-text span{background-color:#919191;color:#fff;font-weight:700;vertical-align:middle;padding:4px 8px;border-radius:2px}.heading .icons{display:flex;justify-content:space-between;align-items:center;min-width:60px}.heading .icons svg-icon{width:18px;height:18px;display:grid;place-items:center;cursor:pointer}.heading .icons svg-icon path{fill:#919191}.menu{padding:4px;display:flex;background-color:#eee;border-radius:2px;justify-content:space-evenly}.menu div{border-radius:2px;padding:4px 8px;font-size:14px;font-weight:700;color:#aaa;width:33%;text-align:center}.menu div.active{background-color:#fff;color:#3b73ed}.box{display:flex;flex-direction:column}.btn-filters{display:flex;border-radius:2px;padding:4px;gap:4px;justify-content:space-between;background-color:#1d1d1d}.btn-filters div{width:33%;text-align:center;border-radius:1px;padding:2px 8px;gap:10px;font-weight:700;color:#919191}.btn-filters div:hover{cursor:pointer}.btn-filters div.active{background-color:#2f2f2f;color:#fff}.add-review{display:flex;justify-content:space-between;align-items:center;padding:4px 6px}.add-review p{color:#92b1f5}.add-review .plus-icon path{fill:#92b1f5!important}.add-review .plus-icon:hover{background-color:transparent!important}.add-review:hover{background-color:#3b73ed3f;cursor:pointer}.add-review:hover p{color:#fff}.filter{display:flex;padding:6px;align-items:center;flex-direction:column}.rating_review{display:flex;align-items:center;gap:6px;margin-right:auto}.rating_review .left-side{display:flex;gap:4px;align-items:center}.rating_review .counter{display:flex;align-items:center;gap:4px}.filter-group{display:flex;justify-content:flex-start;position:relative;align-items:center;border-radius:2px;padding:4px!important;gap:4px}.filter-group.active-group{background-color:#6c6c6c}.filter-group.active-group .cancel-icon path{fill:#fff}.filter-group.active-group .count{color:#fff}.filter-group.active-group:hover{background-color:#424242}.filter-group.active-group:hover .cancel-icon{display:flex}.filter-group.active-group:hover .count{display:none}.filter-group.non-active-group:hover{background-color:#eee!important;cursor:pointer}.filter-group.non-active-group:hover svg-icon path{fill:#424242!important}.filter-group svg-icon{width:18px;height:18px;display:grid;place-items:center}.filter-group svg-icon path{fill:#919191}.filter-group svg-icon:hover{background-color:transparent}.filter-group .cancel-icon{width:14px;height:14px;display:none}.filter-group .like-icon{transform:rotateY(180deg)}.filter-group .like-icon svg{margin-bottom:auto!important}.filter-group .like-icon.active path{fill:#56b4ac}.filter-group .dislike-icon.active path{fill:#e66767}.filter-group .pencil-icon.active path{fill:#ffffffb2}.filter-group .plus-icon{width:26px;height:26px;display:grid;place-items:center;position:relative}.filter-group .plus-icon svg{width:18px;height:18px}.filter-group .plus-icon path{fill:#6692f1}.filter-group .plus-icon:hover{cursor:pointer;background-color:#e9effd}.filter-group .plus-icon:hover path{fill:#0b49d1}.filter-group .count{font-weight:800;font-size:11px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:#919191}p{font-weight:800}.date-group{font-weight:500;display:flex;align-items:center;gap:4px;padding-left:6px}.date-group svg-icon{width:26px;height:26px;display:grid;place-items:center}.date-group svg-icon svg{width:18px;height:18px}.circle{width:18px;height:18px;border-radius:60px;background-color:#6c6c6c;color:#fff;padding:4px 5px;display:flex;justify-content:center;align-items:center;font-size:11px;font-weight:700}.disabled{pointer-events:none!important}.disabled svg path{fill:#ccc!important}.main-window .ilustration{width:100%!important;object-fit:contain;object-position:center}.main-window .ilustration svg-icon{width:100%!important}.main-window .ilustration svg-icon svg{width:100%!important;height:100%!important}.reviews-window{height:100%!important;padding:0 6px 6px 4px;display:flex;flex-direction:column;gap:4px}.button-wrapper{display:flex;flex-direction:column;gap:12px}.buttons{display:flex;justify-content:space-between}.buttons button{font-size:14px;font-weight:700;padding:6px;border-radius:2px;cursor:pointer}.buttons .delete-close{display:flex;gap:12px}.buttons .delete-close .delete{color:#df3c3c;width:100px}.buttons .delete-close .close{width:150px}.buttons .save-btn{background-color:#3b73ed;color:#fff;min-width:150px}.dark{background-color:#2f2f2f!important;color:#fff}.dark .count-heading{color:#fff}.input-container{width:100%;margin-bottom:10px}.empty-state{cursor:none;pointer-events:none}.empty-state svg-icon path{fill:#91919166}.empty-state span{color:#91919166}\n"] }]
|
|
7416
|
+
InputComponent
|
|
7417
|
+
], template: "@let reviewsLength = presentReviews.length;\n<div\n [class]=\"{\n 'modal-wrapper': modaltype === ReviewType.Modal,\n 'table-wrapper': modaltype === ReviewType.Table,\n 'details-wrapper': modaltype === ReviewType.Details,\n dark: modaltype === ReviewType.Table\n }\"\n>\n <!-- @if(modaltype === 'details-review' || modaltype === 'modal-review'){\n <div class=\"heading-wrapper\">\n <div class=\"heading\">\n <div class=\"heading-text\">\n <p>Edit Repair Shop</p>\n <span>IVS REPAIR SHOW KY</span>\n </div>\n <div class=\"icons\">\n <svg-icon name=\"cai-date\"></svg-icon>\n <div class=\"y-divider\"></div>\n <svg-icon name=\"cai-cancel\"></svg-icon>\n </div>\n </div>\n <div class=\"menu\">\n <div>Basic</div>\n <div>Additional</div>\n <div class=\"active\">Review</div>\n </div>\n </div>\n } -->\n <div class=\"main-window\">\n <!-- FILTER BOX -->\n <div class=\"box\">\n <div\n [class]=\"{\n filter: true,\n }\"\n > \n <div class=\"column\">\n <div class=\"rating_review\">\n @if(modaltype !== ReviewType.Details){\n <div class=\"left-side\">\n <p class=\"count-heading\">Rating & Review</p>\n <div class=\"circle\">\n {{ presentReviews ? reviewsLength : 0 }}\n </div>\n @if(modaltype === ReviewType.Modal && reviewsLength !== 0){\n <div class=\"y-divider\"></div>\n }\n </div>\n } \n \n @if(modaltype !== 'Table' && reviewsLength > 0){\n <div class=\"counter\">\n <div\n (click)=\"\n activeReviews.set(false);\n activeLikes.set(true);\n activeDislikes.set(false);\n onChangePresentReviews('likes')\n \"\n [class]=\"{\n 'filter-group': true,\n 'active-group': activeLikes(),\n 'non-active-group': !activeLikes(),\n 'empty-state': countLikes === 0\n }\"\n [ngbTooltip]=\"activeLikes() ? 'Remove Filter' : 'Filter Likes'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-like\"\n class=\"like-icon\"\n [class.active]=\"activeLikes()\"\n ></svg-icon>\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"\n activeLikes.set(false);\n $event.stopPropagation();\n onChangePresentReviews('all')\n \"\n ></svg-icon>\n <span class=\"count\">{{ countLikes }}</span>\n </div>\n <div\n (click)=\"\n activeReviews.set(false);\n activeLikes.set(false);\n activeDislikes.set(true);\n onChangePresentReviews('dislikes')\n \"\n [class]=\"{\n 'filter-group': true,\n 'active-group': activeDislikes(),\n 'non-active-group': !activeDislikes(),\n 'empty-state': countDislikes === 0\n }\"\n [ngbTooltip]=\"\n activeDislikes() ? 'Remove Filter' : 'Filter Dislikes'\n \"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-dislike\"\n [class.active]=\"activeDislikes()\"\n class=\"dislike-icon\"\n ></svg-icon>\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"\n $event.stopPropagation();\n activeDislikes.set(false);\n onChangePresentReviews('all')\n \"\n ></svg-icon>\n <span class=\"count\">{{ countDislikes }}</span>\n </div>\n <div\n (click)=\"\n activeReviews.set(true);\n activeLikes.set(false);\n activeDislikes.set(false);\n onChangePresentReviews('reviews')\n \"\n [class]=\"{\n 'filter-group': true,\n 'active-group': activeReviews(),\n 'non-active-group': !activeReviews(),\n 'empty-state': countReviews === 0\n }\"\n [ngbTooltip]=\"\n activeReviews() ? 'Remove Filter' : 'Filter Reviews'\n \"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-edit2\"\n [class.active]=\"activeReviews()\"\n class=\"pencil-icon\"\n ></svg-icon>\n\n <svg-icon\n name=\"cai-cancel\"\n class=\"cancel-icon\"\n (click)=\"\n $event.stopPropagation();\n activeReviews.set(false);\n onChangePresentReviews('all')\n \"\n ></svg-icon>\n\n <span class=\"count\">{{ countReviews }}</span>\n </div>\n </div>\n }\n </div>\n @if(ratingReviews && reviewsLength > 0){\n <div class=\"date-group\">\n <span>Date</span>\n <svg-icon name=\"cai-sort-descending\"></svg-icon>\n </div>\n \n } @if(modaltype ===\n ReviewType.Modal){\n <div\n class=\"filter-group\"\n [ngStyle]=\"{\n display: addingReview() && reviewsLength === 0 ? 'none' : 'flex'\n }\"\n ngbTooltip=\"Add New\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <svg-icon\n name=\"cai-plus\"\n class=\"plus-icon\"\n (click)=\"onAddReview()\"\n [class.disabled]=\"disabled()\"\n ></svg-icon>\n </div>\n }\n </div>\n @if(modaltype === ReviewType.Table){\n <div class=\"input-container\">\n <cai-input [config]=\"{type:'text',name:'Find Title', icon: 'cai-search', inverse: true}\" />\n </div>\n }\n @if(modaltype === ReviewType.Details){\n <div class=\"bottom-divider-light\"></div>\n }\n </div>\n @if(modaltype=== 'Table' && reviewsLength > 0){\n <!-- <cai-input [id]=\"id\" [config]=\"config\" /> -->\n <div class=\"btn-filters\">\n <div\n [class.active]=\"currentActiveFilter === 'all'\"\n (click)=\"onChangePresentReviews('all')\"\n >\n ALL\n </div>\n <div\n [class.active]=\"currentActiveFilter === 'rating'\"\n (click)=\"onChangePresentReviews('rating')\"\n >\n RATING\n </div>\n <div\n [class.active]=\"currentActiveFilter === 'reviews'\"\n (click)=\"onChangePresentReviews('reviews')\"\n >\n REVIEW\n </div>\n </div>\n }\n </div>\n\n <!-- MAIN MODAL -->\n <div class=\"reviews-window\">\n @if(modaltype==='Table' && !hasPersonalReview){\n <div class=\"add-review\" (click)=\"onAddReview()\">\n <p>ADD REVIEW</p>\n <div class=\"filter-group\">\n <svg-icon\n name=\"cai-plus\"\n class=\"plus-icon\"\n [class.disabled]=\"disabled()\"\n ></svg-icon>\n </div>\n </div>\n } @if(presentReviews && reviewsLength == 0 && !addingReview()){\n <div class=\"ilustration\">\n <svg-icon\n [name]=\"\n modaltype !== 'Table' ? 'cai-illustration' : 'cai-illustration-dark'\n \"\n ></svg-icon>\n </div>\n }@else { @if (addingReview()) {\n <cai-single-review\n [type]=\"modaltype\"\n [singleReview]=\"this.testReview\"\n (deleteReview)=\"onDeleteReview($event)\"\n (onAddedReview)=\"getReview($event)\"\n />\n } @for(review of presentReviews; track review.ratingId){\n <cai-single-review\n [type]=\"modaltype\"\n [singleReview]=\"review\"\n (deleteReview)=\"onDeleteReview($event)\"\n />\n } } \n <!-- MAIN MODAL -->\n </div>\n </div>\n <!-- @if(modaltype !== 'table-review'){\n <div class=\"button-wrapper\">\n <div class=\"x-divider\"></div>\n <div class=\"buttons\">\n <div class=\"delete-close\">\n <button class=\"delete\">Delete</button>\n <button class=\"close\">Close Business</button>\n </div>\n <button\n [class]=\"{\n 'save-btn': true,\n 'disabled-btn': reviewsLength == 0\n }\"\n >\n Save Changes\n </button>\n </div>\n </div>\n } -->\n</div>\n", styles: ["svg-icon svg{width:18px;height:18px}svg-icon svg path{fill-opacity:1}p{margin:0!important}button{border:none!important}.y-divider{border:1px solid #DADADA;height:18px}.x-divider{width:100%;border-bottom:1px solid #EEEEEE}.column{display:flex;width:100%}.disabled-btn{background-color:#f7f7f7!important;color:#ccc!important}.modal-wrapper{max-width:468px;display:flex;flex-direction:column;gap:4px;position:absolute;width:100%}.modal-wrapper .filter{padding:4px 6px}.modal-wrapper .filter .left-side .count-heading{line-height:18px;font-size:14px;color:#424242}.modal-wrapper .filter .left-side .circle{padding:2px 5px;width:21px}.modal-wrapper .filter-group{padding:0}.modal-wrapper .heading-wrapper{display:flex;flex-direction:column;gap:12px;padding:4px 6px}.table-wrapper{margin-top:4px;max-width:260px;padding:4px;border-radius:3px}.table-wrapper .filter{padding:0 0 0 4px;margin-bottom:4px}.table-wrapper .filter .left-side{display:flex;align-items:center}.table-wrapper .filter .left-side .count-heading{text-transform:uppercase;font-size:11px;line-height:14px;font-weight:800}.table-wrapper .filter .left-side .circle{background-color:#424242}.table-wrapper .filter .date-group span{font-size:11px;line-height:14px;font-weight:500}.table-wrapper .filter .date-group svg-icon{width:18px;height:18px}.table-wrapper .btn-filters div{font-size:11px;line-height:14px;font-weight:700}.details-wrapper{max-width:312px}.heading{display:flex;width:100%;justify-content:space-between;padding:4px 6px}.heading .heading-text{display:flex;gap:6px;align-items:center}.heading .heading-text p{font-weight:800;font-size:18px}.heading .heading-text span{background-color:#919191;color:#fff;font-weight:700;vertical-align:middle;padding:4px 8px;border-radius:2px}.heading .icons{display:flex;justify-content:space-between;align-items:center;min-width:60px}.heading .icons svg-icon{width:18px;height:18px;display:grid;place-items:center;cursor:pointer}.heading .icons svg-icon path{fill:#919191}.menu{padding:4px;display:flex;background-color:#eee;border-radius:2px;justify-content:space-evenly}.menu div{border-radius:2px;padding:4px 8px;font-size:14px;font-weight:700;color:#aaa;width:33%;text-align:center}.menu div.active{background-color:#fff;color:#3b73ed}.box{display:flex;flex-direction:column}.btn-filters{display:flex;border-radius:2px;padding:4px;gap:4px;justify-content:space-between;background-color:#1d1d1d}.btn-filters div{width:33%;text-align:center;border-radius:1px;padding:2px 8px;gap:10px;font-weight:700;color:#919191}.btn-filters div:hover{cursor:pointer}.btn-filters div.active{background-color:#2f2f2f;color:#fff}.add-review{display:flex;justify-content:space-between;align-items:center;padding:4px 6px}.add-review p{color:#92b1f5}.add-review .plus-icon path{fill:#92b1f5!important}.add-review .plus-icon:hover{background-color:transparent!important}.add-review:hover{background-color:#3b73ed3f;cursor:pointer}.add-review:hover p{color:#fff}.filter{display:flex;padding:6px;align-items:center;flex-direction:column}.rating_review{display:flex;align-items:center;gap:6px;margin-right:auto}.rating_review .left-side{display:flex;gap:4px;align-items:center}.rating_review .counter{display:flex;align-items:center;gap:4px}.filter-group{display:flex;justify-content:center;position:relative;align-items:center;border-radius:2px;padding:4px!important;gap:4px}.filter-group.active-group{background-color:#6c6c6c}.filter-group.active-group .cancel-icon path{fill:#fff}.filter-group.active-group .count{color:#fff}.filter-group.active-group:hover{background-color:#424242}.filter-group.active-group:hover .cancel-icon{display:flex}.filter-group.active-group:hover .count{display:none}.filter-group.non-active-group:hover{background-color:#eee!important;cursor:pointer}.filter-group.non-active-group:hover svg-icon path{fill:#424242!important}.filter-group svg-icon{width:18px;height:18px;display:grid;place-items:center}.filter-group svg-icon path{fill:#919191}.filter-group svg-icon:hover{background-color:transparent}.filter-group span{width:100%}.filter-group .cancel-icon{width:14px;height:14px;display:none}.filter-group .like-icon{transform:rotateY(180deg)}.filter-group .like-icon svg{margin-bottom:auto!important}.filter-group .like-icon.active path{fill:#56b4ac}.filter-group .dislike-icon.active path{fill:#e66767}.filter-group .pencil-icon.active path{fill:#ffffffb2}.filter-group .plus-icon{width:26px;height:26px;display:grid;place-items:center;position:relative}.filter-group .plus-icon svg{width:18px;height:18px}.filter-group .plus-icon path{fill:#6692f1}.filter-group .plus-icon:hover{cursor:pointer;background-color:#e9effd}.filter-group .plus-icon:hover path{fill:#0b49d1}.filter-group .count{font-weight:800;font-size:11px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:#919191}p{font-weight:800}.date-group{font-weight:500;display:flex;align-items:center;gap:4px;padding-left:6px;line-height:18px}.date-group svg-icon{width:18px;height:18px;display:grid;place-items:center}.circle{width:18px;height:18px;border-radius:60px;background-color:#6c6c6c;color:#fff;padding:4px 5px;display:flex;justify-content:center;align-items:center;font-size:11px;font-weight:700}.disabled{pointer-events:none!important}.disabled svg path{fill:#ccc!important}.main-window .ilustration{width:100%!important;object-fit:contain;object-position:center}.main-window .ilustration svg-icon{width:100%!important}.main-window .ilustration svg-icon svg{width:100%!important;height:100%!important}.reviews-window{height:100%!important;padding:0 6px 6px 4px;display:flex;flex-direction:column;gap:4px}.button-wrapper{display:flex;flex-direction:column;gap:12px}.buttons{display:flex;justify-content:space-between}.buttons button{font-size:14px;font-weight:700;padding:6px;border-radius:2px;cursor:pointer}.buttons .delete-close{display:flex;gap:12px}.buttons .delete-close .delete{color:#df3c3c;width:100px}.buttons .delete-close .close{width:150px}.buttons .save-btn{background-color:#3b73ed;color:#fff;min-width:150px}.dark{background-color:#2f2f2f!important;color:#fff}.dark .count-heading{color:#fff}.input-container{width:100%;margin-bottom:4px;margin-top:4px}.empty-state{cursor:none;pointer-events:none}.empty-state svg-icon path{fill:#91919166}.empty-state span{color:#91919166}.bottom-divider-light{width:100%;margin-top:6px;border-bottom:1px solid #DADADA}\n"] }]
|
|
7417
7418
|
}], propDecorators: { ratingReviews: [{
|
|
7418
7419
|
type: Input,
|
|
7419
7420
|
args: [{ required: true }]
|