carriera-intern-components 1.1.28 → 1.1.30
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.
- package/app/components/avatar/avatar.component.d.ts +1 -1
- package/app/components/input-datetime-picker/cai-input-datetime-picker.component.d.ts +1 -0
- package/app/components/rating_review/rating-review/rating-review/rating-review.component.d.ts +4 -4
- package/app/components/rating_review/review-modal/review-modal.component.d.ts +9 -18
- package/app/utils/constants/input-character-sets.constants.d.ts +5 -5
- package/fesm2022/carriera-intern-components.mjs +47 -68
- package/fesm2022/carriera-intern-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/popover.scss +21 -0
- package/src/styles/review_variables.scss +3 -0
|
@@ -5921,6 +5921,12 @@ class CaiInputDatetimePickerComponent {
|
|
|
5921
5921
|
this.newInputChanged = true;
|
|
5922
5922
|
}, 100);
|
|
5923
5923
|
}
|
|
5924
|
+
onPopoverClick() {
|
|
5925
|
+
if (this.showDateInput) {
|
|
5926
|
+
return;
|
|
5927
|
+
}
|
|
5928
|
+
this.isFocusInput = true;
|
|
5929
|
+
}
|
|
5924
5930
|
onPopoverShown() {
|
|
5925
5931
|
this.showDateInput = true;
|
|
5926
5932
|
this.isFocusInput = true;
|
|
@@ -6542,7 +6548,7 @@ class CaiInputDatetimePickerComponent {
|
|
|
6542
6548
|
this.destroy$.complete();
|
|
6543
6549
|
}
|
|
6544
6550
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaiInputDatetimePickerComponent, deps: [{ token: i1.NgControl, self: true }, { token: CalendarDateTimePickerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6545
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaiInputDatetimePickerComponent, isStandalone: true, selector: "cai-input-datetime-picker", inputs: { id: "id", inputConfig: "inputConfig", formFormat: "formFormat" }, outputs: { clearInputEvent: "clear", blurInputEvent: "blurInput", selectLastOneForSelectionEmitter: "selectLastOneForSelectionEmitter", selectLastOneAfterMouseUpEmitter: "selectLastOneAfterMouseUpEmitter", onDatePasteEmitter: "onDatePasteEmitter", onFocusEmitter: "onFocusEmitter", changeSelectionEmmiter: "changeSelectionEmmiter", setSelectionEmmiter: "setSelectionEmmiter" }, providers: [CalendarDateTimePickerService], viewQueries: [{ propertyName: "dateTimePopover", first: true, predicate: ["dateTimePopover"], descendants: true }, { propertyName: "t2", first: true, predicate: ["t2"], descendants: true }, { propertyName: "span1", first: true, predicate: ["span1"], descendants: true, static: true }, { propertyName: "span2", first: true, predicate: ["span2"], descendants: true, static: true }, { propertyName: "span3", first: true, predicate: ["span3"], descendants: true, static: true }, { propertyName: "holder1", first: true, predicate: ["holder1"], descendants: true, static: true }, { propertyName: "closeTooltip", first: true, predicate: ["closeTooltip"], descendants: true }], ngImport: i0, template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse; @let\nsize = inputConfig?.size;\n<!-- -->\n@let invalid = getSuperControl?.invalid && (getSuperControl?.touched ||\ngetSuperControl?.dirty); @let valid = getSuperControl?.valid &&\ngetSuperControl?.value; @let disabled = getSuperControl?.disabled ||\ninputConfig?.isDisabled;\n<!-- Date Time Input -->\n<div\n [id]=\"id\"\n class=\"datetime-input-container\"\n [class]=\"{\n 'datetime-valid': valid,\n 'datetime-invalid':\n invalid,\n 'datetime-disabled': disabled,\n 'datetime-focus': isFocusInput,\n 'datetime-has-text': getSuperControl?.value,\n 'datetime-required': isRequired && !disabled,\n 'datetime-in-table': inTable,\n 'datetime-inverse': inverse,\n 'datetime-size-22': size === 22,\n }\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n [placement]=\"['bottom-start', 'top-start']\"\n [popoverClass]=\"'datetimepopovermain'\"\n [autoClose]=\"'outside'\"\n [container]=\"'body'\"\n (shown)=\"onPopoverShown()\"\n (hidden)=\"onPopoverHidden()\"\n>\n <div class=\"datetime-label\">\n {{ inputConfig.label }}\n </div>\n\n <div\n #holder1\n tabindex=\"1\"\n (paste)=\"onDatePaste($event)\"\n (keydown)=\"changeSelection($event)\"\n (blur)=\"blurInput()\"\n class=\"datetime-input-listener\"\n [ngbTooltip]=\"errorTooltip\"\n [container]=\"'body'\"\n [placement]=\"'bottom'\"\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\n ></div>\n\n <div\n class=\"datetime-icon-container\"\n [class.hidden]=\"inputConfig.isIconHidden\"\n >\n <svg-icon\n class=\"datetime-icon\"\n [name]=\"inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\"\n ></svg-icon>\n <div class=\"datetime-separator\"></div>\n </div>\n\n <div class=\"datetime-input\">\n <span\n #span1\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'mm' : 'HH'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ':'\"\n ></div>\n </span>\n <span\n #span2\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'dd' : 'MM'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ' '\"\n ></div>\n </span>\n <span\n #span3\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'yy' : 'AM'\"\n ></span>\n </div>\n\n @if(!disabled) {\n <button\n class=\"datetime-cancel-button\"\n tabindex=\"-1\"\n ngbTooltip=\"Cancel\"\n [openDelay]=\"600\"\n tooltipClass=\"tooltip input-tooltip\"\n [placement]=\"'top'\"\n [container]=\"'body'\"\n [autoClose]=\"true\"\n #closeTooltip=\"ngbTooltip\"\n (click)=\"clearInput($event)\"\n (mousedown)=\"handleCloseTooltip()\"\n (mouseleave)=\"handleCloseTooltip()\"\n >\n <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n </button>\n <svg-icon\n class=\"datetime-icon datetime-dropdown-icon\"\n name=\"cai-arrow-secondary-down\"\n ></svg-icon>\n }\n <!-- Error Message -->\n @if(!inTable) {\n <div class=\"datetime-error-message\">\n {{\n invalid\n ? (getSuperControl?.errors | errorMessage : inputConfig.customErrors)[0]\n : \"\"\n }}\n </div>\n }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n <div class=\"datetime-dropdown-holder\">\n <cai-custom-datetime-pickers\n [calendarType]=\"\n inputConfig.name === 'datepicker' ||\n inputConfig.name === 'datepickerBankCard'\n ? 'date'\n : 'time'\n \"\n [inputConfig]=\"inputConfig\"\n [placeholder]=\"'MM/DD/YY'\"\n [dateTime]=\"dateTimeInputDate\"\n (closePopover)=\"closePopover($event)\"\n ></cai-custom-datetime-pickers>\n </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n @if(inTable && invalid && !isFocusInput){\n {{ (getSuperControl?.errors | errorMessage : inputConfig.customErrors)[0] }}\n }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .2s ease-in-out;cursor:pointer;width:100%}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .main::selection{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus .datetime-dropdown-icon{transform:rotate(180deg)}.datetime-input-container.datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotate(0)}.datetime-dropdown-icon:hover{color:#424242}.datetime-input{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:400;line-height:18px;opacity:0;pointer-events:none;cursor:text;transition:opacity .2s ease-in-out,color .2s ease-in-out}.datetime-input .main{border-radius:1px}.datetime-size-22{height:22px;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px)}.datetime-in-table .datetime-input-listener{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0}.main::selection{background-color:#ffffff4d;border-radius:1px}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
6551
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaiInputDatetimePickerComponent, isStandalone: true, selector: "cai-input-datetime-picker", inputs: { id: "id", inputConfig: "inputConfig", formFormat: "formFormat" }, outputs: { clearInputEvent: "clear", blurInputEvent: "blurInput", selectLastOneForSelectionEmitter: "selectLastOneForSelectionEmitter", selectLastOneAfterMouseUpEmitter: "selectLastOneAfterMouseUpEmitter", onDatePasteEmitter: "onDatePasteEmitter", onFocusEmitter: "onFocusEmitter", changeSelectionEmmiter: "changeSelectionEmmiter", setSelectionEmmiter: "setSelectionEmmiter" }, providers: [CalendarDateTimePickerService], viewQueries: [{ propertyName: "dateTimePopover", first: true, predicate: ["dateTimePopover"], descendants: true }, { propertyName: "t2", first: true, predicate: ["t2"], descendants: true }, { propertyName: "span1", first: true, predicate: ["span1"], descendants: true, static: true }, { propertyName: "span2", first: true, predicate: ["span2"], descendants: true, static: true }, { propertyName: "span3", first: true, predicate: ["span3"], descendants: true, static: true }, { propertyName: "holder1", first: true, predicate: ["holder1"], descendants: true, static: true }, { propertyName: "closeTooltip", first: true, predicate: ["closeTooltip"], descendants: true }], ngImport: i0, template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse; @let\nsize = inputConfig?.size;\n<!-- -->\n@let invalid = getSuperControl?.invalid && (getSuperControl?.touched ||\ngetSuperControl?.dirty); @let valid = getSuperControl?.valid &&\ngetSuperControl?.value; @let disabled = getSuperControl?.disabled ||\ninputConfig?.isDisabled;\n<!-- Date Time Input -->\n<div\n [id]=\"id\"\n class=\"datetime-input-container\"\n [class]=\"{\n 'datetime-valid': valid,\n 'datetime-invalid':\n invalid,\n 'datetime-disabled': disabled,\n 'datetime-focus': isFocusInput,\n 'datetime-has-text': getSuperControl?.value,\n 'datetime-required': isRequired && !disabled,\n 'datetime-in-table': inTable,\n 'datetime-inverse': inverse,\n 'datetime-size-22': size === 22,\n }\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n [placement]=\"['bottom-start', 'top-start']\"\n [popoverClass]=\"'datetimepopovermain'\"\n [autoClose]=\"'outside'\"\n [container]=\"'body'\"\n (click)=\"onPopoverClick()\"\n (shown)=\"onPopoverShown()\"\n (hidden)=\"onPopoverHidden()\"\n>\n <div class=\"datetime-label\">\n {{ inputConfig.label }}\n </div>\n\n <div\n #holder1\n tabindex=\"1\"\n (paste)=\"onDatePaste($event)\"\n (keydown)=\"changeSelection($event)\"\n (blur)=\"blurInput()\"\n class=\"datetime-input-listener\"\n [ngbTooltip]=\"errorTooltip\"\n [container]=\"'body'\"\n [placement]=\"'bottom'\"\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\n ></div>\n\n <div\n class=\"datetime-icon-container\"\n [class.hidden]=\"inputConfig.isIconHidden\"\n >\n <svg-icon\n class=\"datetime-icon\"\n [name]=\"inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\"\n ></svg-icon>\n <div class=\"datetime-separator\"></div>\n </div>\n\n <div class=\"datetime-input\">\n <span\n #span1\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'mm' : 'HH'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ':'\"\n ></div>\n </span>\n <span\n #span2\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'dd' : 'MM'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ' '\"\n ></div>\n </span>\n <span\n #span3\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'yy' : 'AM'\"\n ></span>\n </div>\n\n @if(!disabled) {\n <button\n class=\"datetime-cancel-button\"\n tabindex=\"-1\"\n ngbTooltip=\"Cancel\"\n [openDelay]=\"600\"\n tooltipClass=\"tooltip input-tooltip\"\n [placement]=\"'top'\"\n [container]=\"'body'\"\n [autoClose]=\"true\"\n #closeTooltip=\"ngbTooltip\"\n (click)=\"clearInput($event)\"\n (mousedown)=\"handleCloseTooltip()\"\n (mouseleave)=\"handleCloseTooltip()\"\n >\n <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n </button>\n <svg-icon\n class=\"datetime-icon datetime-dropdown-icon\"\n name=\"cai-arrow-secondary-down\"\n ></svg-icon>\n }\n <!-- Error Message -->\n @if(!inTable) {\n <div class=\"datetime-error-message\">\n {{\n invalid\n ? (getSuperControl?.errors | errorMessage : inputConfig.customErrors)[0]\n : \"\"\n }}\n </div>\n }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n <div class=\"datetime-dropdown-holder\">\n <cai-custom-datetime-pickers\n [calendarType]=\"\n inputConfig.name === 'datepicker' ||\n inputConfig.name === 'datepickerBankCard'\n ? 'date'\n : 'time'\n \"\n [inputConfig]=\"inputConfig\"\n [placeholder]=\"'MM/DD/YY'\"\n [dateTime]=\"dateTimeInputDate\"\n (closePopover)=\"closePopover($event)\"\n ></cai-custom-datetime-pickers>\n </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n @if(inTable && invalid && !isFocusInput){\n {{ (getSuperControl?.errors | errorMessage : inputConfig.customErrors)[0] }}\n }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .2s ease-in-out;cursor:pointer;width:100%}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .main::selection{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus .datetime-dropdown-icon{transform:rotate(180deg)}.datetime-input-container.datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotate(0)}.datetime-dropdown-icon:hover{color:#424242}.datetime-input{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:400;line-height:18px;opacity:0;pointer-events:none;cursor:text;transition:opacity .2s ease-in-out,color .2s ease-in-out}.datetime-input .main{border-radius:1px}.datetime-size-22{height:22px;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px)}.datetime-in-table .datetime-input-listener{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0}.main::selection{background-color:#ffffff4d;border-radius:1px}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
6546
6552
|
// modules
|
|
6547
6553
|
CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i4.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { 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:
|
|
6548
6554
|
// components
|
|
@@ -6563,7 +6569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
6563
6569
|
CaCustomDatetimePickersComponent,
|
|
6564
6570
|
// pipes
|
|
6565
6571
|
ErrorMessagePipe,
|
|
6566
|
-
], providers: [CalendarDateTimePickerService], template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse; @let\nsize = inputConfig?.size;\n<!-- -->\n@let invalid = getSuperControl?.invalid && (getSuperControl?.touched ||\ngetSuperControl?.dirty); @let valid = getSuperControl?.valid &&\ngetSuperControl?.value; @let disabled = getSuperControl?.disabled ||\ninputConfig?.isDisabled;\n<!-- Date Time Input -->\n<div\n [id]=\"id\"\n class=\"datetime-input-container\"\n [class]=\"{\n 'datetime-valid': valid,\n 'datetime-invalid':\n invalid,\n 'datetime-disabled': disabled,\n 'datetime-focus': isFocusInput,\n 'datetime-has-text': getSuperControl?.value,\n 'datetime-required': isRequired && !disabled,\n 'datetime-in-table': inTable,\n 'datetime-inverse': inverse,\n 'datetime-size-22': size === 22,\n }\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n [placement]=\"['bottom-start', 'top-start']\"\n [popoverClass]=\"'datetimepopovermain'\"\n [autoClose]=\"'outside'\"\n [container]=\"'body'\"\n (shown)=\"onPopoverShown()\"\n (hidden)=\"onPopoverHidden()\"\n>\n <div class=\"datetime-label\">\n {{ inputConfig.label }}\n </div>\n\n <div\n #holder1\n tabindex=\"1\"\n (paste)=\"onDatePaste($event)\"\n (keydown)=\"changeSelection($event)\"\n (blur)=\"blurInput()\"\n class=\"datetime-input-listener\"\n [ngbTooltip]=\"errorTooltip\"\n [container]=\"'body'\"\n [placement]=\"'bottom'\"\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\n ></div>\n\n <div\n class=\"datetime-icon-container\"\n [class.hidden]=\"inputConfig.isIconHidden\"\n >\n <svg-icon\n class=\"datetime-icon\"\n [name]=\"inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\"\n ></svg-icon>\n <div class=\"datetime-separator\"></div>\n </div>\n\n <div class=\"datetime-input\">\n <span\n #span1\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'mm' : 'HH'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ':'\"\n ></div>\n </span>\n <span\n #span2\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'dd' : 'MM'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ' '\"\n ></div>\n </span>\n <span\n #span3\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'yy' : 'AM'\"\n ></span>\n </div>\n\n @if(!disabled) {\n <button\n class=\"datetime-cancel-button\"\n tabindex=\"-1\"\n ngbTooltip=\"Cancel\"\n [openDelay]=\"600\"\n tooltipClass=\"tooltip input-tooltip\"\n [placement]=\"'top'\"\n [container]=\"'body'\"\n [autoClose]=\"true\"\n #closeTooltip=\"ngbTooltip\"\n (click)=\"clearInput($event)\"\n (mousedown)=\"handleCloseTooltip()\"\n (mouseleave)=\"handleCloseTooltip()\"\n >\n <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n </button>\n <svg-icon\n class=\"datetime-icon datetime-dropdown-icon\"\n name=\"cai-arrow-secondary-down\"\n ></svg-icon>\n }\n <!-- Error Message -->\n @if(!inTable) {\n <div class=\"datetime-error-message\">\n {{\n invalid\n ? (getSuperControl?.errors | errorMessage : inputConfig.customErrors)[0]\n : \"\"\n }}\n </div>\n }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n <div class=\"datetime-dropdown-holder\">\n <cai-custom-datetime-pickers\n [calendarType]=\"\n inputConfig.name === 'datepicker' ||\n inputConfig.name === 'datepickerBankCard'\n ? 'date'\n : 'time'\n \"\n [inputConfig]=\"inputConfig\"\n [placeholder]=\"'MM/DD/YY'\"\n [dateTime]=\"dateTimeInputDate\"\n (closePopover)=\"closePopover($event)\"\n ></cai-custom-datetime-pickers>\n </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n @if(inTable && invalid && !isFocusInput){\n {{ (getSuperControl?.errors | errorMessage : inputConfig.customErrors)[0] }}\n }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .2s ease-in-out;cursor:pointer;width:100%}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .main::selection{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus .datetime-dropdown-icon{transform:rotate(180deg)}.datetime-input-container.datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotate(0)}.datetime-dropdown-icon:hover{color:#424242}.datetime-input{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:400;line-height:18px;opacity:0;pointer-events:none;cursor:text;transition:opacity .2s ease-in-out,color .2s ease-in-out}.datetime-input .main{border-radius:1px}.datetime-size-22{height:22px;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px)}.datetime-in-table .datetime-input-listener{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0}.main::selection{background-color:#ffffff4d;border-radius:1px}\n"] }]
|
|
6572
|
+
], providers: [CalendarDateTimePickerService], template: "@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse; @let\nsize = inputConfig?.size;\n<!-- -->\n@let invalid = getSuperControl?.invalid && (getSuperControl?.touched ||\ngetSuperControl?.dirty); @let valid = getSuperControl?.valid &&\ngetSuperControl?.value; @let disabled = getSuperControl?.disabled ||\ninputConfig?.isDisabled;\n<!-- Date Time Input -->\n<div\n [id]=\"id\"\n class=\"datetime-input-container\"\n [class]=\"{\n 'datetime-valid': valid,\n 'datetime-invalid':\n invalid,\n 'datetime-disabled': disabled,\n 'datetime-focus': isFocusInput,\n 'datetime-has-text': getSuperControl?.value,\n 'datetime-required': isRequired && !disabled,\n 'datetime-in-table': inTable,\n 'datetime-inverse': inverse,\n 'datetime-size-22': size === 22,\n }\"\n #t2=\"ngbPopover\"\n [ngbPopover]=\"!disabled ? dateTimePopover : null\"\n [placement]=\"['bottom-start', 'top-start']\"\n [popoverClass]=\"'datetimepopovermain'\"\n [autoClose]=\"'outside'\"\n [container]=\"'body'\"\n (click)=\"onPopoverClick()\"\n (shown)=\"onPopoverShown()\"\n (hidden)=\"onPopoverHidden()\"\n>\n <div class=\"datetime-label\">\n {{ inputConfig.label }}\n </div>\n\n <div\n #holder1\n tabindex=\"1\"\n (paste)=\"onDatePaste($event)\"\n (keydown)=\"changeSelection($event)\"\n (blur)=\"blurInput()\"\n class=\"datetime-input-listener\"\n [ngbTooltip]=\"errorTooltip\"\n [container]=\"'body'\"\n [placement]=\"'bottom'\"\n tooltipClass=\"tooltip tooltip-bg-red-500 input-tooltip \"\n ></div>\n\n <div\n class=\"datetime-icon-container\"\n [class.hidden]=\"inputConfig.isIconHidden\"\n >\n <svg-icon\n class=\"datetime-icon\"\n [name]=\"inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'\"\n ></svg-icon>\n <div class=\"datetime-separator\"></div>\n </div>\n\n <div class=\"datetime-input\">\n <span\n #span1\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'mm' : 'HH'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ':'\"\n ></div>\n </span>\n <span\n #span2\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'dd' : 'MM'\"\n ></span>\n <span>\n <div\n class=\"border-picker\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? '/' : ' '\"\n ></div>\n </span>\n <span\n #span3\n class=\"main\"\n [ngClass]=\"{\n 'reset-selection-color': !isFocusInput,\n }\"\n [innerHTML]=\"inputConfig.name === 'datepicker' ? 'yy' : 'AM'\"\n ></span>\n </div>\n\n @if(!disabled) {\n <button\n class=\"datetime-cancel-button\"\n tabindex=\"-1\"\n ngbTooltip=\"Cancel\"\n [openDelay]=\"600\"\n tooltipClass=\"tooltip input-tooltip\"\n [placement]=\"'top'\"\n [container]=\"'body'\"\n [autoClose]=\"true\"\n #closeTooltip=\"ngbTooltip\"\n (click)=\"clearInput($event)\"\n (mousedown)=\"handleCloseTooltip()\"\n (mouseleave)=\"handleCloseTooltip()\"\n >\n <svg-icon class=\"datetime-bg-icon\" name=\"cai-cancel\"></svg-icon>\n </button>\n <svg-icon\n class=\"datetime-icon datetime-dropdown-icon\"\n name=\"cai-arrow-secondary-down\"\n ></svg-icon>\n }\n <!-- Error Message -->\n @if(!inTable) {\n <div class=\"datetime-error-message\">\n {{\n invalid\n ? (getSuperControl?.errors | errorMessage : inputConfig.customErrors)[0]\n : \"\"\n }}\n </div>\n }\n</div>\n\n<!-- Popover for DateTime Pickers -->\n<ng-template #dateTimePopover let-data=\"data\">\n <div class=\"datetime-dropdown-holder\">\n <cai-custom-datetime-pickers\n [calendarType]=\"\n inputConfig.name === 'datepicker' ||\n inputConfig.name === 'datepickerBankCard'\n ? 'date'\n : 'time'\n \"\n [inputConfig]=\"inputConfig\"\n [placeholder]=\"'MM/DD/YY'\"\n [dateTime]=\"dateTimeInputDate\"\n (closePopover)=\"closePopover($event)\"\n ></cai-custom-datetime-pickers>\n </div>\n</ng-template>\n\n<ng-template #errorTooltip>\n @if(inTable && invalid && !isFocusInput){\n {{ (getSuperControl?.errors | errorMessage : inputConfig.customErrors)[0] }}\n }\n</ng-template>\n", styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important}input:-webkit-autofill:focus{-webkit-text-fill-color:#ffffff!important}input:-moz-autofill,input:-moz-autofill-preview{filter:none}*,*:before,*:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}p,ul,ol,dl,blockquote,figure,pre{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{background:none;border:none;padding:0}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%;height:auto}ul,ol{padding-left:1.5rem;list-style-position:outside}a{color:inherit;text-decoration:inherit}table{border-collapse:collapse;border-spacing:0}:focus:not(:focus-visible){outline:none}.datetime-input-container{--color-text: #2f2f2f;--color-text-negative: #df3c3c;--color-text-heading: #424242;--color-text-subtle: #919191;--color-text-inverse: #ffffff;--color-icon-neutral: #919191;--color-icon-negative: #e66767;--color-icon-positive: #6692f1;--color-icon-inverse: rgba(255, 255, 255, .6980392157);--color-icon-disable: #cccccc;--color-surface-neutral: #eeeeee;--color-surface-neutral-hover: #dadada;--color-surface-neutral-focus: #1d1d1d;--color-surface-positive: #e9effd;--color-surface-positive-hover: #bed0f9;--color-surface-positive-focus: #0b49d1;--color-surface-negative: #fbe9e9;--color-surface-negative-hover: #f4bebe;--color-surface-negative-focus: #c20c0c;--color-surface-disable: #f7f7f7;padding:4px 4px 4px 6px;border-radius:2px;position:relative;display:flex;align-items:center;background-color:var(--color-surface-neutral);transition:background-color .2s ease-in-out;cursor:pointer;width:100%}.datetime-input-container.datetime-inverse{--color-text: #ffffff;--color-text-negative: #ed9292;--color-text-heading: #ffffff;--color-text-inverse: #2f2f2f;--color-icon-neutral: #aaaaaa;--color-icon-negative: #ed9292;--color-icon-positive: #92b1f5;--color-icon-disable: #6c6c6c;--color-surface-neutral: #424242;--color-surface-neutral-hover: #6c6c6c;--color-surface-neutral-focus: #dadada;--color-surface-positive: rgba(59, 115, 237, .2);--color-surface-positive-hover: #2f519a;--color-surface-positive-focus: #0b49d1;--color-surface-negative: rgba(223, 60, 60, .2);--color-surface-negative-hover: #923030;--color-surface-negative-focus: #c20c0c;--color-surface-disable: rgba(66, 66, 66, .4)}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .datetime-input{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text) .main::selection{color:var(--color-text-inverse)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-icon{color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse:not(.datetime-has-text).datetime-focus .datetime-separator{background-color:var(--color-icon-neutral)!important}.datetime-input-container.datetime-inverse.datetime-valid.datetime-focus .datetime-input,.datetime-input-container.datetime-inverse.datetime-invalid.datetime-focus .datetime-input{color:var(--color-text)}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-bg-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-bg-icon:hover{background-color:#fff!important}.datetime-input-container.datetime-inverse.datetime-valid:hover .datetime-dropdown-icon:hover,.datetime-input-container.datetime-inverse.datetime-invalid:hover .datetime-dropdown-icon:hover{color:#fff!important}.datetime-input-container.datetime-in-table{--color-surface-neutral: transparent;--color-surface-negative: transparent;--color-surface-positive: transparent}.datetime-input-container.datetime-in-table .datetime-dropdown-icon{opacity:0}.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-input,.datetime-input-container.datetime-in-table.datetime-invalid:not(.datetime-focus):not(:hover) .datetime-label{color:var(--color-text-negative)}.datetime-input-container.datetime-in-table:hover .datetime-dropdown-icon,.datetime-input-container.datetime-in-table.datetime-focus .datetime-dropdown-icon{opacity:1}.datetime-input-container:hover{background-color:var(--color-surface-neutral-hover)}.datetime-input-container:hover .datetime-bg-icon{color:var(--color-surface-neutral-hover)}.datetime-input-container.datetime-focus{background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-focus:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-focus .datetime-dropdown-icon{transform:rotate(180deg)}.datetime-input-container.datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-focus .datetime-input{color:var(--color-text-inverse);opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text .datetime-input{opacity:1;pointer-events:auto}.datetime-input-container.datetime-has-text:not(.datetime-in-table) .datetime-label{transform:translateY(-20px);font-weight:600;font-size:11px;color:var(--color-text-heading)!important}.datetime-input-container.datetime-has-text.datetime-in-table .datetime-label{opacity:0}.datetime-input-container.datetime-valid:not(.datetime-disabled){background-color:var(--color-surface-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover{background-color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-positive);color:var(--color-surface-positive-hover)}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#0b49d1}.datetime-input-container.datetime-valid:not(.datetime-disabled):hover .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus{background-color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-positive-focus)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-valid:not(.datetime-disabled).datetime-focus .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-positive)}.datetime-input-container.datetime-valid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#0b49d1}.datetime-input-container.datetime-invalid:not(.datetime-disabled){background-color:var(--color-surface-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-error-message{opacity:1;transform:translateY(0);pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover{background-color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon{background-color:var(--color-icon-negative);color:var(--color-surface-negative-hover)}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover .datetime-bg-icon:hover{background-color:#c20c0c}.datetime-input-container.datetime-invalid:not(.datetime-disabled):hover.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text{background-color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-negative-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus.datetime-has-text .datetime-cancel-button{opacity:1;pointer-events:auto}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text){background-color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon{background-color:var(--color-icon-inverse);color:var(--color-surface-neutral-focus)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-bg-icon:hover{background-color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-separator{background-color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-dropdown-icon:hover{color:#fff}.datetime-input-container.datetime-invalid:not(.datetime-disabled).datetime-focus:not(.datetime-has-text) .datetime-icon{color:var(--color-icon-inverse)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-icon{color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-separator{background-color:var(--color-icon-negative)}.datetime-input-container.datetime-invalid:not(.datetime-disabled) .datetime-dropdown-icon:hover{color:#c20c0c}.datetime-input-container.datetime-disabled{cursor:default;pointer-events:none}.datetime-input-container.datetime-disabled:not(.datetime-in-table){background-color:var(--color-surface-disable)}.datetime-input-container.datetime-disabled.datetime-in-table{background-color:transparent}.datetime-input-container.datetime-disabled .datetime-label{color:var(--color-text-subtle)!important}.datetime-input-container.datetime-disabled .datetime-icon{color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-separator{background-color:var(--color-icon-neutral)}.datetime-input-container.datetime-disabled .datetime-input{color:var(--color-text)!important}.datetime-input-container.datetime-required .datetime-label:after{content:\" *\";color:var(--color-text-negative)}.datetime-icon-container{display:flex;align-items:center;justify-content:center;gap:4px;width:max-content}.datetime-icon-container.hidden{display:none}.datetime-icon-container .datetime-separator{height:14px;width:1px;border-radius:2px;background-color:var(--color-icon-neutral);transition:background-color .2s ease-in-out;opacity:40%;margin-right:4px}.datetime-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-neutral);transition:color .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.datetime-label{position:absolute;display:flex;gap:4px;left:27px;font-size:14px;line-height:18px;font-weight:400;pointer-events:none;padding:.25rem 6px;color:var(--color-text);transition:transform .1s ease-in-out,font-weight .1s ease-in-out,color .1s ease-in-out,font-size .1s ease-in-out,opacity .1s ease-in-out;transform:translateY(0);-webkit-user-select:none;user-select:none}.datetime-bg-icon{background-color:var(--color-icon-neutral);color:var(--color-surface-neutral);border-radius:1px;height:18px;width:18px;padding:0;display:grid;place-items:center;transition:background-color .2s ease-in-out,color .2s ease-in-out,opacity .2s ease-in-out,transform .1s ease-in-out;transform-box:border-box;transform-origin:center;will-change:transform}.datetime-bg-icon:focus-visible{outline:none}.datetime-bg-icon svg{transition:transform .1s ease-in-out}.datetime-bg-icon:hover{transform:scale(1.2222222222)}.datetime-bg-icon:hover svg{transform:scale(.8181818182)}.datetime-bg-icon:active{transform:scale(1)}.datetime-cancel-button{position:absolute;right:26px;top:4px;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.datetime-dropdown-icon{position:absolute;right:4px;top:4px;transform:rotate(0)}.datetime-dropdown-icon:hover{color:#424242}.datetime-input{display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:400;line-height:18px;opacity:0;pointer-events:none;cursor:text;transition:opacity .2s ease-in-out,color .2s ease-in-out}.datetime-input .main{border-radius:1px}.datetime-size-22{height:22px;padding-left:0}.datetime-size-22 .datetime-bg-icon{height:14px!important;width:14px!important;padding:2px!important;right:22px!important}.datetime-size-22 .datetime-icon-container{height:22px!important;padding-top:2px;padding-bottom:2px;padding-left:4px!important}.datetime-size-22 .datetime-input{padding-top:2px;padding-bottom:2px}.datetime-size-22 .datetime-label{padding-top:2px;padding-bottom:2px;padding-left:0!important}.datetime-size-22 .datetime-icon{height:14px!important;width:14px!important}.datetime-size-22.datetime-has-text .datetime-label,.datetime-size-22.datetime-focus .datetime-label{transform:translateY(-18px)!important}.datetime-error-message{position:absolute;bottom:-16px;right:6px;font-size:11px;font-weight:600;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--color-text-negative);transform:translateY(-10px)}.datetime-in-table .datetime-input-listener{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0}.main::selection{background-color:#ffffff4d;border-radius:1px}\n"] }]
|
|
6567
6573
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
6568
6574
|
type: Self
|
|
6569
6575
|
}] }, { type: CalendarDateTimePickerService }], propDecorators: { id: [{
|
|
@@ -7185,17 +7191,16 @@ class SingleReviewComponent {
|
|
|
7185
7191
|
event.preventDefault();
|
|
7186
7192
|
}
|
|
7187
7193
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SingleReviewComponent, deps: [{ token: DateFormatingPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
7188
|
-
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", onAddedReview: "onAddedReview", onEditedReview: "onEditedReview" }, providers: [DateFormatingPipe], ngImport: i0, template: "@let avatarFile = singleReview.companyUser?.avatarFile; @let driver =\navatarFile?.driver; @let companyUser = this.singleReview.companyUser; @let\ncurrentUser = this.singleReview.isItCurrentCompanyUser; @let comment =\nthis.singleReview.comment; @let edited = this.singleReview.isEdited; @let\nactiveLike = this.singleReview.thumb === 'like'; @let activeDislike =\nthis.singleReview.thumb === 'dislike'; @let currentRating =\nthis.singleReview.thumb;\n<div\n class=\"review-wrapper\"\n [class]=\"{\n 'not-editing': !editing(),\n 'dark-mode': type === ReviewType.Table,\n 'modal-type': type === ReviewType.Modal,\n 'details-type': type === ReviewType.Details\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 } @if(editing()){\n <span class=\"description\">{{\n !edited ? \"\u2022 Posting Publicly\" : \"\u2022 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\n @if(editing()){\n <div class=\"rating\">\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)=\"onCancelReview()\"\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 (input)=\"onChangeContent($event)\"\n [innerHTML]=\"renderedContent()\"\n (keydown)=\"limitLength($event)\"\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 ? \"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]=\"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]=\"currentRating === 'like'\"\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]=\"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 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\"\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 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 (input)=\"onChangeContent($event)\"\n [innerHTML]=\"renderedContent()\"\n (keydown)=\"limitLength($event)\"\n ></div>\n }}\n</div>\n@if(type === ReviewType.Table){\n<div class=\"bottom-divider-light\"></div>\n\n} @if(currentUser && ReviewType.Details){\n<div class=\"bottom-divider-dark\"></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;color:#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{color:#56b4ac!important}.current-rating-dislike{color:#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%;line-height:18px;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;font-size:14px!important}.review-wrapper.modal-type.not-editing .controls{display:flex;gap:4px;visibility:hidden}.review-wrapper.modal-type.not-editing .controls .pencil-icon{color:#919191!important}.review-wrapper.modal-type.not-editing .controls .pencil-icon:hover{background-color:#91919133!important;color:#424242!important}.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: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}.review-wrapper.modal-type .lower{font-size:14px!important;font-weight:400!important;padding:2px 4px 4px;line-height:18px;cursor:text}.profile-img{width:22px}.lower{color:#fff;outline:none;overflow-y:auto;padding:2px 4px 4px;text-indent:0;display:block;background-color:#1d1d1d;border-radius:2px;font-size:11px;font-weight:400}.lower:hover{cursor:pointer}.lower:empty:after{content:attr(data-placeholder);color:#919191;line-height:14px}.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-mode{background-color:#dadada!important;color:#919191;padding:2px}.review-wrapper.dark-mode .upper{display:flex;align-items:center;padding:0 2px}.review-wrapper.dark-mode .upper .info{display:flex;align-items:center;gap:4px;padding:0 2px}.review-wrapper.dark-mode .upper .info .column{font-size:11px}.review-wrapper.dark-mode .upper .info .column .upper-row{display:flex;gap:4px}.review-wrapper.dark-mode .upper .info .column .upper-row .name{font-weight:600;color:#424242}.review-wrapper.dark-mode .upper .info .column .upper-row svg-icon{width:18px!important;height:18px;display:flex;align-items:center}.review-wrapper.dark-mode .upper .info .column .lower-row{display:flex;gap:4px}.review-wrapper.dark-mode .upper .rating{display:flex;margin-left:auto;gap:4px;padding:2px 0}.review-wrapper.dark-mode .upper .rating .like-icon{width:14px;height:14px}.review-wrapper.dark-mode .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper.dark-mode .upper .rating .like-icon:hover:not(.like-active) path{fill:#424242}.review-wrapper.dark-mode .upper .rating .dislike-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.dark-mode .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper.dark-mode .upper .rating .dislike-icon:hover:not(.dislike-active) path{fill:#424242}.review-wrapper.dark-mode .upper .rating .checkmark-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark-mode .upper .rating .checkmark-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark-mode .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper.dark-mode .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper.dark-mode .upper .rating .checkmark-icon path{fill:#dadada}.review-wrapper.dark-mode .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.dark-mode .upper .rating .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark-mode .upper .rating .cancel-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark-mode .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper.dark-mode .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper.dark-mode .upper .rating .cancel-icon path{fill:#dadada}.review-wrapper.dark-mode .upper .rating .cancel-icon svg{fill:transparent!important;width:14px;border-radius:1px}.review-wrapper.dark-mode .upper .controls{margin-left:auto;display:flex;gap:4px;padding:0 2px;visibility:hidden}.review-wrapper.dark-mode .upper .controls .pencil-icon{padding:2px}.review-wrapper.dark-mode .upper .controls .pencil-icon:hover{background-color:#6c6c6c}.review-wrapper.dark-mode .upper .controls .pencil-icon:hover path{fill:#dadada}.review-wrapper.dark-mode .upper .controls .trash-icon{padding:2px}.review-wrapper.dark-mode .upper .controls .trash-icon:hover{background-color:#6c6c6c}.review-wrapper.dark-mode .upper .controls .trash-icon:hover path{fill:#dadada}.review-wrapper.dark-mode:hover{cursor:pointer}.review-wrapper.dark-mode:hover .controls{visibility:visible!important}.review-wrapper.dark-mode .lower{background-color:#dadada!important;color:#2f2f2f;line-height:14px}.review-wrapper.dark-mode.not-editing{background-color:#2f2f2f!important}.review-wrapper.dark-mode.not-editing .upper{background-color:transparent}.review-wrapper.dark-mode.not-editing .upper .name{color:#fff!important}.review-wrapper.dark-mode.not-editing .lower{background-color:#2f2f2f!important;color:#fff!important}.review-wrapper.dark-mode.not-editing:hover,.review-wrapper.dark-mode.not-editing:hover .lower{background-color:#424242!important}.review-wrapper.dark-mode.not-editing:hover .expand-icon,.review-wrapper.dark-mode.not-editing:hover .collapse-icon{opacity:1}.review-wrapper.details-type{background-color:#1d1d1d;max-width:300px;padding:2px;border-radius:2px}.review-wrapper.details-type.not-editing{background-color:transparent}.review-wrapper.details-type.not-editing .upper .info{display:flex;align-items:center}.review-wrapper.details-type.not-editing .upper .info .column{display:flex}.review-wrapper.details-type.not-editing .upper .info .column .upper-row .name{font-weight:600;color:#424242!important;font-size:11px}.review-wrapper.details-type.not-editing .upper .rating .svg-group svg-icon{background-color:red!important}.review-wrapper.details-type.not-editing .upper .controls{display:flex;align-items:center}.review-wrapper.details-type.not-editing .upper .edit-time{font-size:14px}.review-wrapper.details-type.not-editing .lower{background-color:transparent;color:#000;max-width:100%;word-break:break-word;overflow-wrap:break-word}.review-wrapper.details-type.not-editing .controls{display:flex;gap:4px;visibility:hidden}.review-wrapper.details-type.not-editing .controls .pencil-icon:hover+span{opacity:1}.review-wrapper.details-type.not-editing .controls .trash-icon:hover{background-color:#f4bebe!important}.review-wrapper.details-type.not-editing .controls .trash-icon:hover path{fill:#c20c0c!important}.review-wrapper.details-type.not-editing .controls .trash-icon:hover+span{opacity:1}.review-wrapper.details-type.not-editing .controls svg-icon{display:grid;place-items:center;width:18px;height:18px;padding:2px;cursor:pointer}.review-wrapper.details-type.not-editing .controls svg-icon:hover{background-color:#aaa}.review-wrapper.details-type.not-editing .controls svg-icon:hover path{fill:#424242}.review-wrapper.details-type.not-editing:hover{background-color:#eee}.review-wrapper.details-type.not-editing:hover .controls{visibility:visible}.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{display:flex;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:#fff;line-height:14px!important}.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 .description{font-weight:500;line-height:14px;font-size:11px;color:#919191}.review-wrapper.details-type .upper .info .column .lower-row .edit-time{line-height:14px;color:#919191;font-weight:500;font-size:11px}.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 svg-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.details-type .upper .rating .like-icon.like-active{color:#56b4ac;background-color:transparent}.review-wrapper.details-type .upper .rating .like-icon:hover:not(.like-active){color:#ccc}.review-wrapper.details-type .upper .rating .dislike-icon.dislike-active{color:#e66767}.review-wrapper.details-type .upper .rating .dislike-icon:hover:not(.dislike-active){color:#ccc}.review-wrapper.details-type .upper .rating .checkmark-icon{background-color:#919191!important;color:#1d1d1d;transition:transform .2s ease-in-out}.review-wrapper.details-type .upper .rating .checkmark-icon:hover{background-color:#fff!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 .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out;color:#1d1d1d}.review-wrapper.details-type .upper .rating .cancel-icon:hover{background-color:#fff!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 .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 .lower{line-height:14px!important;padding:2px 4px!important;cursor:text}.review-wrapper.details-type:hover{cursor:pointer}.review-wrapper.details-type:hover .controls{opacity:1!important;pointer-events:auto!important}.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 }] });
|
|
7194
|
+
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", onAddedReview: "onAddedReview", onEditedReview: "onEditedReview" }, providers: [DateFormatingPipe], ngImport: i0, template: "@let avatarFile = singleReview.companyUser?.avatarFile; @let driver =\navatarFile?.driver; @let companyUser = this.singleReview.companyUser; @let\ncurrentUser = this.singleReview.isItCurrentCompanyUser; @let comment =\nthis.singleReview.comment; @let edited = this.singleReview.isEdited; @let\nactiveLike = this.singleReview.thumb === 'like'; @let activeDislike =\nthis.singleReview.thumb === 'dislike'; @let currentRating =\nthis.singleReview.thumb;\n<div\n class=\"review-wrapper\"\n [class]=\"{\n 'not-editing': !editing(),\n 'dark-mode': type === ReviewType.Table,\n 'modal-type': type === ReviewType.Modal,\n 'details-type': type === ReviewType.Details\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 } @if(editing()){\n <span class=\"description\">{{\n !edited ? \"\u2022 Posting Publicly\" : \"\u2022 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\n @if(editing()){\n <div class=\"rating\">\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)=\"onCancelReview()\"\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 (input)=\"onChangeContent($event)\"\n [innerHTML]=\"renderedContent()\"\n (keydown)=\"limitLength($event)\"\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 ? \"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]=\"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]=\"currentRating === 'like'\"\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]=\"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 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\"\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 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 (input)=\"onChangeContent($event)\"\n [innerHTML]=\"renderedContent()\"\n (keydown)=\"limitLength($event)\"\n ></div>\n }}\n</div>\n<!-- @if(type === ReviewType.Table){\n<div class=\"bottom-divider-light\"></div>\n} --> \n@if(currentUser && type === ReviewType.Details){\n<div class=\"bottom-divider-dark\"></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;color:#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{color:#56b4ac!important}.current-rating-dislike{color:#e66767!important}.active-like :hover .like-icon{color:red}.review-wrapper.modal-type{background-color:#1d1d1d;max-width:456px;border-radius:2px;padding:2px;margin-left:6px;margin-right:6px}.review-wrapper.modal-type.not-editing{background-color:transparent}.review-wrapper.modal-type.not-editing .upper{padding:2px 2px 0 4px}.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%;line-height:18px;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;font-size:14px!important}.review-wrapper.modal-type.not-editing .controls{display:flex;gap:4px;visibility:hidden}.review-wrapper.modal-type.not-editing .controls .pencil-icon{color:#919191!important}.review-wrapper.modal-type.not-editing .controls .pencil-icon:hover{background-color:#91919133!important;color:#424242!important}.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: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}.review-wrapper.modal-type .lower{font-size:14px!important;font-weight:400!important;padding:2px 4px 4px;line-height:18px;cursor:text}.profile-img{width:22px}.lower{color:#fff;outline:none;overflow-y:auto;padding:2px 4px 4px;text-indent:0;display:block;background-color:#1d1d1d;border-radius:2px;font-size:11px;font-weight:400}.lower:hover{cursor:pointer}.lower:empty:after{content:attr(data-placeholder);color:#919191;line-height:14px}.svg-group{position:relative;display:flex;align-items:center}.bottom-divider-dark{margin-top:6px;margin-left:6px;margin-right: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-mode{background-color:#dadada!important;color:#919191;border-radius:2px;max-width:252px;padding:2px}.review-wrapper.dark-mode.not-editing{background-color:transparent}.review-wrapper.dark-mode.not-editing:hover{background-color:#eee}.review-wrapper.dark-mode.not-editing .upper{display:flex;align-items:start}.review-wrapper.dark-mode.not-editing .upper .info{display:flex;align-items:center;padding:0!important}.review-wrapper.dark-mode.not-editing .upper .info .column{display:flex}.review-wrapper.dark-mode.not-editing .upper .info .column .upper-row{display:flex;align-items:center;line-height:14px;height:14px}.review-wrapper.dark-mode.not-editing .upper .info .column .upper-row .name{font-weight:600;color:#fff!important;font-size:11px}.review-wrapper.dark-mode.not-editing .upper .info .column .upper-row .personal{line-height:14px!important}.review-wrapper.dark-mode.not-editing .upper .info .column .upper-row .current-rating-like{transform:scaleX(-1)}.review-wrapper.dark-mode.not-editing .upper .info .column .lower-row{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:500;line-height:14px!important}.review-wrapper.dark-mode.not-editing .upper .info .column .lower-row .edit-time{color:#919191}.review-wrapper.dark-mode.not-editing .upper .info .column .lower-row .edited{color:#92b1f5;line-height:14px!important}.review-wrapper.dark-mode.not-editing .upper .rating .svg-group svg-icon{background-color:red!important}.review-wrapper.dark-mode.not-editing .upper .controls{display:flex;align-items:center}.review-wrapper.dark-mode .upper{display:flex;align-items:start;padding:0 2px}.review-wrapper.dark-mode .upper .info{display:flex;align-items:center;gap:4px;padding:0 2px}.review-wrapper.dark-mode .upper .info .column{font-size:11px}.review-wrapper.dark-mode .upper .info .column .upper-row{display:flex;gap:4px}.review-wrapper.dark-mode .upper .info .column .upper-row .name{font-weight:600;font-size:11px;line-height:14px;color:#424242}.review-wrapper.dark-mode .upper .info .column .upper-row svg-icon{width:18px!important;height:18px;display:flex;align-items:center}.review-wrapper.dark-mode .upper .info .column .lower-row{display:flex}.review-wrapper.dark-mode .upper .info .column .lower-row .description{line-height:14px;font-size:11px}.review-wrapper.dark-mode .upper .rating{display:flex;margin-left:auto;gap:4px;padding:2px 0}.review-wrapper.dark-mode .upper .rating .like-icon{width:14px;height:14px}.review-wrapper.dark-mode .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper.dark-mode .upper .rating .like-icon.like-active:hover path{fill:#b6dfdb}.review-wrapper.dark-mode .upper .rating .like-icon:hover:not(.like-active) path{fill:#424242}.review-wrapper.dark-mode .upper .rating .dislike-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.dark-mode .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper.dark-mode .upper .rating .dislike-icon.dislike-active:hover path{fill:#e87c7c}.review-wrapper.dark-mode .upper .rating .dislike-icon:hover:not(.dislike-active) path{fill:#424242}.review-wrapper.dark-mode .upper .rating .checkmark-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark-mode .upper .rating .checkmark-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark-mode .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper.dark-mode .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper.dark-mode .upper .rating .checkmark-icon path{fill:#dadada}.review-wrapper.dark-mode .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.dark-mode .upper .rating .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark-mode .upper .rating .cancel-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark-mode .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper.dark-mode .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper.dark-mode .upper .rating .cancel-icon path{fill:#dadada}.review-wrapper.dark-mode .upper .rating .cancel-icon svg{fill:transparent!important;width:14px;border-radius:1px}.review-wrapper.dark-mode .upper .controls{margin-left:auto;display:flex;gap:4px;padding:0 2px;visibility:hidden}.review-wrapper.dark-mode .upper .controls .pencil-icon{padding:2px}.review-wrapper.dark-mode .upper .controls .pencil-icon:hover{background-color:#6c6c6c}.review-wrapper.dark-mode .upper .controls .pencil-icon:hover path{fill:#dadada}.review-wrapper.dark-mode .upper .controls .trash-icon{padding:2px}.review-wrapper.dark-mode .upper .controls .trash-icon:hover{background-color:#6c6c6c}.review-wrapper.dark-mode .upper .controls .trash-icon:hover path{fill:#dadada}.review-wrapper.dark-mode:hover{cursor:pointer}.review-wrapper.dark-mode:hover .controls{visibility:visible!important}.review-wrapper.dark-mode .lower{background-color:#dadada!important;color:#2f2f2f;line-height:14px}.review-wrapper.dark-mode.not-editing{background-color:#2f2f2f!important}.review-wrapper.dark-mode.not-editing .upper{background-color:transparent}.review-wrapper.dark-mode.not-editing .upper .name{color:#fff!important}.review-wrapper.dark-mode.not-editing .lower{background-color:#2f2f2f!important;color:#fff!important}.review-wrapper.dark-mode.not-editing:hover,.review-wrapper.dark-mode.not-editing:hover .lower{background-color:#424242!important}.review-wrapper.dark-mode.not-editing:hover .expand-icon,.review-wrapper.dark-mode.not-editing:hover .collapse-icon{opacity:1}.review-wrapper.details-type{background-color:#1d1d1d;max-width:300px;padding:2px;border-radius:2px}.review-wrapper.details-type.not-editing{background-color:transparent}.review-wrapper.details-type.not-editing .upper .info{display:flex;align-items:center}.review-wrapper.details-type.not-editing .upper .info .column{display:flex}.review-wrapper.details-type.not-editing .upper .info .column .upper-row .name{font-weight:600;color:#424242!important;font-size:11px}.review-wrapper.details-type.not-editing .upper .rating .svg-group svg-icon{background-color:red!important}.review-wrapper.details-type.not-editing .upper .controls{display:flex;align-items:center}.review-wrapper.details-type.not-editing .upper .edit-time{font-size:14px}.review-wrapper.details-type.not-editing .lower{background-color:transparent;color:#000;max-width:100%;word-break:break-word;overflow-wrap:break-word}.review-wrapper.details-type.not-editing .controls{display:flex;gap:4px;visibility:hidden}.review-wrapper.details-type.not-editing .controls .pencil-icon:hover+span{opacity:1}.review-wrapper.details-type.not-editing .controls .trash-icon:hover{background-color:#f4bebe!important}.review-wrapper.details-type.not-editing .controls .trash-icon:hover path{fill:#c20c0c!important}.review-wrapper.details-type.not-editing .controls .trash-icon:hover+span{opacity:1}.review-wrapper.details-type.not-editing .controls svg-icon{display:grid;place-items:center;width:18px;height:18px;padding:2px;cursor:pointer}.review-wrapper.details-type.not-editing .controls svg-icon:hover{background-color:#aaa}.review-wrapper.details-type.not-editing .controls svg-icon:hover path{fill:#424242}.review-wrapper.details-type.not-editing:hover{background-color:#eee}.review-wrapper.details-type.not-editing:hover .controls{visibility:visible}.review-wrapper.details-type .upper{display:flex;align-items:start}.review-wrapper.details-type .upper .info{display:flex;align-items:center;gap:4px;padding:0 2px}.review-wrapper.details-type .upper .info .column{display:flex;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:#fff;line-height:14px!important}.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 .description{font-weight:500;line-height:14px;font-size:11px;color:#919191}.review-wrapper.details-type .upper .info .column .lower-row .edit-time{line-height:14px;color:#919191;font-weight:500;font-size:11px}.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 svg-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.details-type .upper .rating .like-icon.like-active{color:#56b4ac;background-color:transparent}.review-wrapper.details-type .upper .rating .like-icon:hover:not(.like-active){color:#ccc}.review-wrapper.details-type .upper .rating .dislike-icon.dislike-active{color:#e66767}.review-wrapper.details-type .upper .rating .dislike-icon:hover:not(.dislike-active){color:#ccc}.review-wrapper.details-type .upper .rating .checkmark-icon{background-color:#919191!important;color:#1d1d1d;transition:transform .2s ease-in-out}.review-wrapper.details-type .upper .rating .checkmark-icon:hover{background-color:#fff!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 .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out;color:#1d1d1d}.review-wrapper.details-type .upper .rating .cancel-icon:hover{background-color:#fff!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 .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 .lower{line-height:14px!important;padding:2px 4px!important;cursor:text}.review-wrapper.details-type:hover{cursor:pointer}.review-wrapper.details-type:hover .controls{opacity:1!important;pointer-events:auto!important}.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: 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 }] });
|
|
7189
7195
|
}
|
|
7190
7196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SingleReviewComponent, decorators: [{
|
|
7191
7197
|
type: Component,
|
|
7192
7198
|
args: [{ selector: 'cai-single-review', imports: [
|
|
7193
7199
|
SvgIconComponent,
|
|
7194
7200
|
AvatarComponent,
|
|
7195
|
-
NgbPopoverModule,
|
|
7196
7201
|
NgbModule,
|
|
7197
7202
|
NgbTooltipModule,
|
|
7198
|
-
], providers: [DateFormatingPipe], template: "@let avatarFile = singleReview.companyUser?.avatarFile; @let driver =\navatarFile?.driver; @let companyUser = this.singleReview.companyUser; @let\ncurrentUser = this.singleReview.isItCurrentCompanyUser; @let comment =\nthis.singleReview.comment; @let edited = this.singleReview.isEdited; @let\nactiveLike = this.singleReview.thumb === 'like'; @let activeDislike =\nthis.singleReview.thumb === 'dislike'; @let currentRating =\nthis.singleReview.thumb;\n<div\n class=\"review-wrapper\"\n [class]=\"{\n 'not-editing': !editing(),\n 'dark-mode': type === ReviewType.Table,\n 'modal-type': type === ReviewType.Modal,\n 'details-type': type === ReviewType.Details\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 } @if(editing()){\n <span class=\"description\">{{\n !edited ? \"\u2022 Posting Publicly\" : \"\u2022 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\n @if(editing()){\n <div class=\"rating\">\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)=\"onCancelReview()\"\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 (input)=\"onChangeContent($event)\"\n [innerHTML]=\"renderedContent()\"\n (keydown)=\"limitLength($event)\"\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 ? \"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]=\"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]=\"currentRating === 'like'\"\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]=\"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 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\"\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 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 (input)=\"onChangeContent($event)\"\n [innerHTML]=\"renderedContent()\"\n (keydown)=\"limitLength($event)\"\n ></div>\n }}\n</div>\n@if(type === ReviewType.Table){\n<div class=\"bottom-divider-light\"></div>\n\n} @if(currentUser && ReviewType.Details){\n<div class=\"bottom-divider-dark\"></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;color:#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{color:#56b4ac!important}.current-rating-dislike{color:#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%;line-height:18px;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;font-size:14px!important}.review-wrapper.modal-type.not-editing .controls{display:flex;gap:4px;visibility:hidden}.review-wrapper.modal-type.not-editing .controls .pencil-icon{color:#919191!important}.review-wrapper.modal-type.not-editing .controls .pencil-icon:hover{background-color:#91919133!important;color:#424242!important}.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: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}.review-wrapper.modal-type .lower{font-size:14px!important;font-weight:400!important;padding:2px 4px 4px;line-height:18px;cursor:text}.profile-img{width:22px}.lower{color:#fff;outline:none;overflow-y:auto;padding:2px 4px 4px;text-indent:0;display:block;background-color:#1d1d1d;border-radius:2px;font-size:11px;font-weight:400}.lower:hover{cursor:pointer}.lower:empty:after{content:attr(data-placeholder);color:#919191;line-height:14px}.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-mode{background-color:#dadada!important;color:#919191;padding:2px}.review-wrapper.dark-mode .upper{display:flex;align-items:center;padding:0 2px}.review-wrapper.dark-mode .upper .info{display:flex;align-items:center;gap:4px;padding:0 2px}.review-wrapper.dark-mode .upper .info .column{font-size:11px}.review-wrapper.dark-mode .upper .info .column .upper-row{display:flex;gap:4px}.review-wrapper.dark-mode .upper .info .column .upper-row .name{font-weight:600;color:#424242}.review-wrapper.dark-mode .upper .info .column .upper-row svg-icon{width:18px!important;height:18px;display:flex;align-items:center}.review-wrapper.dark-mode .upper .info .column .lower-row{display:flex;gap:4px}.review-wrapper.dark-mode .upper .rating{display:flex;margin-left:auto;gap:4px;padding:2px 0}.review-wrapper.dark-mode .upper .rating .like-icon{width:14px;height:14px}.review-wrapper.dark-mode .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper.dark-mode .upper .rating .like-icon:hover:not(.like-active) path{fill:#424242}.review-wrapper.dark-mode .upper .rating .dislike-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.dark-mode .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper.dark-mode .upper .rating .dislike-icon:hover:not(.dislike-active) path{fill:#424242}.review-wrapper.dark-mode .upper .rating .checkmark-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark-mode .upper .rating .checkmark-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark-mode .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper.dark-mode .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper.dark-mode .upper .rating .checkmark-icon path{fill:#dadada}.review-wrapper.dark-mode .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.dark-mode .upper .rating .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark-mode .upper .rating .cancel-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark-mode .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper.dark-mode .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper.dark-mode .upper .rating .cancel-icon path{fill:#dadada}.review-wrapper.dark-mode .upper .rating .cancel-icon svg{fill:transparent!important;width:14px;border-radius:1px}.review-wrapper.dark-mode .upper .controls{margin-left:auto;display:flex;gap:4px;padding:0 2px;visibility:hidden}.review-wrapper.dark-mode .upper .controls .pencil-icon{padding:2px}.review-wrapper.dark-mode .upper .controls .pencil-icon:hover{background-color:#6c6c6c}.review-wrapper.dark-mode .upper .controls .pencil-icon:hover path{fill:#dadada}.review-wrapper.dark-mode .upper .controls .trash-icon{padding:2px}.review-wrapper.dark-mode .upper .controls .trash-icon:hover{background-color:#6c6c6c}.review-wrapper.dark-mode .upper .controls .trash-icon:hover path{fill:#dadada}.review-wrapper.dark-mode:hover{cursor:pointer}.review-wrapper.dark-mode:hover .controls{visibility:visible!important}.review-wrapper.dark-mode .lower{background-color:#dadada!important;color:#2f2f2f;line-height:14px}.review-wrapper.dark-mode.not-editing{background-color:#2f2f2f!important}.review-wrapper.dark-mode.not-editing .upper{background-color:transparent}.review-wrapper.dark-mode.not-editing .upper .name{color:#fff!important}.review-wrapper.dark-mode.not-editing .lower{background-color:#2f2f2f!important;color:#fff!important}.review-wrapper.dark-mode.not-editing:hover,.review-wrapper.dark-mode.not-editing:hover .lower{background-color:#424242!important}.review-wrapper.dark-mode.not-editing:hover .expand-icon,.review-wrapper.dark-mode.not-editing:hover .collapse-icon{opacity:1}.review-wrapper.details-type{background-color:#1d1d1d;max-width:300px;padding:2px;border-radius:2px}.review-wrapper.details-type.not-editing{background-color:transparent}.review-wrapper.details-type.not-editing .upper .info{display:flex;align-items:center}.review-wrapper.details-type.not-editing .upper .info .column{display:flex}.review-wrapper.details-type.not-editing .upper .info .column .upper-row .name{font-weight:600;color:#424242!important;font-size:11px}.review-wrapper.details-type.not-editing .upper .rating .svg-group svg-icon{background-color:red!important}.review-wrapper.details-type.not-editing .upper .controls{display:flex;align-items:center}.review-wrapper.details-type.not-editing .upper .edit-time{font-size:14px}.review-wrapper.details-type.not-editing .lower{background-color:transparent;color:#000;max-width:100%;word-break:break-word;overflow-wrap:break-word}.review-wrapper.details-type.not-editing .controls{display:flex;gap:4px;visibility:hidden}.review-wrapper.details-type.not-editing .controls .pencil-icon:hover+span{opacity:1}.review-wrapper.details-type.not-editing .controls .trash-icon:hover{background-color:#f4bebe!important}.review-wrapper.details-type.not-editing .controls .trash-icon:hover path{fill:#c20c0c!important}.review-wrapper.details-type.not-editing .controls .trash-icon:hover+span{opacity:1}.review-wrapper.details-type.not-editing .controls svg-icon{display:grid;place-items:center;width:18px;height:18px;padding:2px;cursor:pointer}.review-wrapper.details-type.not-editing .controls svg-icon:hover{background-color:#aaa}.review-wrapper.details-type.not-editing .controls svg-icon:hover path{fill:#424242}.review-wrapper.details-type.not-editing:hover{background-color:#eee}.review-wrapper.details-type.not-editing:hover .controls{visibility:visible}.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{display:flex;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:#fff;line-height:14px!important}.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 .description{font-weight:500;line-height:14px;font-size:11px;color:#919191}.review-wrapper.details-type .upper .info .column .lower-row .edit-time{line-height:14px;color:#919191;font-weight:500;font-size:11px}.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 svg-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.details-type .upper .rating .like-icon.like-active{color:#56b4ac;background-color:transparent}.review-wrapper.details-type .upper .rating .like-icon:hover:not(.like-active){color:#ccc}.review-wrapper.details-type .upper .rating .dislike-icon.dislike-active{color:#e66767}.review-wrapper.details-type .upper .rating .dislike-icon:hover:not(.dislike-active){color:#ccc}.review-wrapper.details-type .upper .rating .checkmark-icon{background-color:#919191!important;color:#1d1d1d;transition:transform .2s ease-in-out}.review-wrapper.details-type .upper .rating .checkmark-icon:hover{background-color:#fff!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 .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out;color:#1d1d1d}.review-wrapper.details-type .upper .rating .cancel-icon:hover{background-color:#fff!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 .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 .lower{line-height:14px!important;padding:2px 4px!important;cursor:text}.review-wrapper.details-type:hover{cursor:pointer}.review-wrapper.details-type:hover .controls{opacity:1!important;pointer-events:auto!important}.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"] }]
|
|
7203
|
+
], providers: [DateFormatingPipe], template: "@let avatarFile = singleReview.companyUser?.avatarFile; @let driver =\navatarFile?.driver; @let companyUser = this.singleReview.companyUser; @let\ncurrentUser = this.singleReview.isItCurrentCompanyUser; @let comment =\nthis.singleReview.comment; @let edited = this.singleReview.isEdited; @let\nactiveLike = this.singleReview.thumb === 'like'; @let activeDislike =\nthis.singleReview.thumb === 'dislike'; @let currentRating =\nthis.singleReview.thumb;\n<div\n class=\"review-wrapper\"\n [class]=\"{\n 'not-editing': !editing(),\n 'dark-mode': type === ReviewType.Table,\n 'modal-type': type === ReviewType.Modal,\n 'details-type': type === ReviewType.Details\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 } @if(editing()){\n <span class=\"description\">{{\n !edited ? \"\u2022 Posting Publicly\" : \"\u2022 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\n @if(editing()){\n <div class=\"rating\">\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)=\"onCancelReview()\"\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 (input)=\"onChangeContent($event)\"\n [innerHTML]=\"renderedContent()\"\n (keydown)=\"limitLength($event)\"\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 ? \"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]=\"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]=\"currentRating === 'like'\"\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]=\"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 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\"\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 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 (input)=\"onChangeContent($event)\"\n [innerHTML]=\"renderedContent()\"\n (keydown)=\"limitLength($event)\"\n ></div>\n }}\n</div>\n<!-- @if(type === ReviewType.Table){\n<div class=\"bottom-divider-light\"></div>\n} --> \n@if(currentUser && type === ReviewType.Details){\n<div class=\"bottom-divider-dark\"></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;color:#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{color:#56b4ac!important}.current-rating-dislike{color:#e66767!important}.active-like :hover .like-icon{color:red}.review-wrapper.modal-type{background-color:#1d1d1d;max-width:456px;border-radius:2px;padding:2px;margin-left:6px;margin-right:6px}.review-wrapper.modal-type.not-editing{background-color:transparent}.review-wrapper.modal-type.not-editing .upper{padding:2px 2px 0 4px}.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%;line-height:18px;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;font-size:14px!important}.review-wrapper.modal-type.not-editing .controls{display:flex;gap:4px;visibility:hidden}.review-wrapper.modal-type.not-editing .controls .pencil-icon{color:#919191!important}.review-wrapper.modal-type.not-editing .controls .pencil-icon:hover{background-color:#91919133!important;color:#424242!important}.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: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}.review-wrapper.modal-type .lower{font-size:14px!important;font-weight:400!important;padding:2px 4px 4px;line-height:18px;cursor:text}.profile-img{width:22px}.lower{color:#fff;outline:none;overflow-y:auto;padding:2px 4px 4px;text-indent:0;display:block;background-color:#1d1d1d;border-radius:2px;font-size:11px;font-weight:400}.lower:hover{cursor:pointer}.lower:empty:after{content:attr(data-placeholder);color:#919191;line-height:14px}.svg-group{position:relative;display:flex;align-items:center}.bottom-divider-dark{margin-top:6px;margin-left:6px;margin-right: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-mode{background-color:#dadada!important;color:#919191;border-radius:2px;max-width:252px;padding:2px}.review-wrapper.dark-mode.not-editing{background-color:transparent}.review-wrapper.dark-mode.not-editing:hover{background-color:#eee}.review-wrapper.dark-mode.not-editing .upper{display:flex;align-items:start}.review-wrapper.dark-mode.not-editing .upper .info{display:flex;align-items:center;padding:0!important}.review-wrapper.dark-mode.not-editing .upper .info .column{display:flex}.review-wrapper.dark-mode.not-editing .upper .info .column .upper-row{display:flex;align-items:center;line-height:14px;height:14px}.review-wrapper.dark-mode.not-editing .upper .info .column .upper-row .name{font-weight:600;color:#fff!important;font-size:11px}.review-wrapper.dark-mode.not-editing .upper .info .column .upper-row .personal{line-height:14px!important}.review-wrapper.dark-mode.not-editing .upper .info .column .upper-row .current-rating-like{transform:scaleX(-1)}.review-wrapper.dark-mode.not-editing .upper .info .column .lower-row{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:500;line-height:14px!important}.review-wrapper.dark-mode.not-editing .upper .info .column .lower-row .edit-time{color:#919191}.review-wrapper.dark-mode.not-editing .upper .info .column .lower-row .edited{color:#92b1f5;line-height:14px!important}.review-wrapper.dark-mode.not-editing .upper .rating .svg-group svg-icon{background-color:red!important}.review-wrapper.dark-mode.not-editing .upper .controls{display:flex;align-items:center}.review-wrapper.dark-mode .upper{display:flex;align-items:start;padding:0 2px}.review-wrapper.dark-mode .upper .info{display:flex;align-items:center;gap:4px;padding:0 2px}.review-wrapper.dark-mode .upper .info .column{font-size:11px}.review-wrapper.dark-mode .upper .info .column .upper-row{display:flex;gap:4px}.review-wrapper.dark-mode .upper .info .column .upper-row .name{font-weight:600;font-size:11px;line-height:14px;color:#424242}.review-wrapper.dark-mode .upper .info .column .upper-row svg-icon{width:18px!important;height:18px;display:flex;align-items:center}.review-wrapper.dark-mode .upper .info .column .lower-row{display:flex}.review-wrapper.dark-mode .upper .info .column .lower-row .description{line-height:14px;font-size:11px}.review-wrapper.dark-mode .upper .rating{display:flex;margin-left:auto;gap:4px;padding:2px 0}.review-wrapper.dark-mode .upper .rating .like-icon{width:14px;height:14px}.review-wrapper.dark-mode .upper .rating .like-icon.like-active path{fill:#56b4ac}.review-wrapper.dark-mode .upper .rating .like-icon.like-active:hover path{fill:#b6dfdb}.review-wrapper.dark-mode .upper .rating .like-icon:hover:not(.like-active) path{fill:#424242}.review-wrapper.dark-mode .upper .rating .dislike-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.dark-mode .upper .rating .dislike-icon.dislike-active path{fill:#e66767}.review-wrapper.dark-mode .upper .rating .dislike-icon.dislike-active:hover path{fill:#e87c7c}.review-wrapper.dark-mode .upper .rating .dislike-icon:hover:not(.dislike-active) path{fill:#424242}.review-wrapper.dark-mode .upper .rating .checkmark-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark-mode .upper .rating .checkmark-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark-mode .upper .rating .checkmark-icon:hover+span{opacity:1}.review-wrapper.dark-mode .upper .rating .checkmark-icon:hover svg{transform:scale(.8181818182)}.review-wrapper.dark-mode .upper .rating .checkmark-icon path{fill:#dadada}.review-wrapper.dark-mode .upper .rating .checkmark-icon svg{fill:#ffffffb2;width:14px;border-radius:1px}.review-wrapper.dark-mode .upper .rating .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out}.review-wrapper.dark-mode .upper .rating .cancel-icon:hover{background-color:#424242!important;transform:scale(1.2222222222)}.review-wrapper.dark-mode .upper .rating .cancel-icon:hover+span{opacity:1}.review-wrapper.dark-mode .upper .rating .cancel-icon:hover svg{transform:scale(1.2222222222)}.review-wrapper.dark-mode .upper .rating .cancel-icon path{fill:#dadada}.review-wrapper.dark-mode .upper .rating .cancel-icon svg{fill:transparent!important;width:14px;border-radius:1px}.review-wrapper.dark-mode .upper .controls{margin-left:auto;display:flex;gap:4px;padding:0 2px;visibility:hidden}.review-wrapper.dark-mode .upper .controls .pencil-icon{padding:2px}.review-wrapper.dark-mode .upper .controls .pencil-icon:hover{background-color:#6c6c6c}.review-wrapper.dark-mode .upper .controls .pencil-icon:hover path{fill:#dadada}.review-wrapper.dark-mode .upper .controls .trash-icon{padding:2px}.review-wrapper.dark-mode .upper .controls .trash-icon:hover{background-color:#6c6c6c}.review-wrapper.dark-mode .upper .controls .trash-icon:hover path{fill:#dadada}.review-wrapper.dark-mode:hover{cursor:pointer}.review-wrapper.dark-mode:hover .controls{visibility:visible!important}.review-wrapper.dark-mode .lower{background-color:#dadada!important;color:#2f2f2f;line-height:14px}.review-wrapper.dark-mode.not-editing{background-color:#2f2f2f!important}.review-wrapper.dark-mode.not-editing .upper{background-color:transparent}.review-wrapper.dark-mode.not-editing .upper .name{color:#fff!important}.review-wrapper.dark-mode.not-editing .lower{background-color:#2f2f2f!important;color:#fff!important}.review-wrapper.dark-mode.not-editing:hover,.review-wrapper.dark-mode.not-editing:hover .lower{background-color:#424242!important}.review-wrapper.dark-mode.not-editing:hover .expand-icon,.review-wrapper.dark-mode.not-editing:hover .collapse-icon{opacity:1}.review-wrapper.details-type{background-color:#1d1d1d;max-width:300px;padding:2px;border-radius:2px}.review-wrapper.details-type.not-editing{background-color:transparent}.review-wrapper.details-type.not-editing .upper .info{display:flex;align-items:center}.review-wrapper.details-type.not-editing .upper .info .column{display:flex}.review-wrapper.details-type.not-editing .upper .info .column .upper-row .name{font-weight:600;color:#424242!important;font-size:11px}.review-wrapper.details-type.not-editing .upper .rating .svg-group svg-icon{background-color:red!important}.review-wrapper.details-type.not-editing .upper .controls{display:flex;align-items:center}.review-wrapper.details-type.not-editing .upper .edit-time{font-size:14px}.review-wrapper.details-type.not-editing .lower{background-color:transparent;color:#000;max-width:100%;word-break:break-word;overflow-wrap:break-word}.review-wrapper.details-type.not-editing .controls{display:flex;gap:4px;visibility:hidden}.review-wrapper.details-type.not-editing .controls .pencil-icon:hover+span{opacity:1}.review-wrapper.details-type.not-editing .controls .trash-icon:hover{background-color:#f4bebe!important}.review-wrapper.details-type.not-editing .controls .trash-icon:hover path{fill:#c20c0c!important}.review-wrapper.details-type.not-editing .controls .trash-icon:hover+span{opacity:1}.review-wrapper.details-type.not-editing .controls svg-icon{display:grid;place-items:center;width:18px;height:18px;padding:2px;cursor:pointer}.review-wrapper.details-type.not-editing .controls svg-icon:hover{background-color:#aaa}.review-wrapper.details-type.not-editing .controls svg-icon:hover path{fill:#424242}.review-wrapper.details-type.not-editing:hover{background-color:#eee}.review-wrapper.details-type.not-editing:hover .controls{visibility:visible}.review-wrapper.details-type .upper{display:flex;align-items:start}.review-wrapper.details-type .upper .info{display:flex;align-items:center;gap:4px;padding:0 2px}.review-wrapper.details-type .upper .info .column{display:flex;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:#fff;line-height:14px!important}.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 .description{font-weight:500;line-height:14px;font-size:11px;color:#919191}.review-wrapper.details-type .upper .info .column .lower-row .edit-time{line-height:14px;color:#919191;font-weight:500;font-size:11px}.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 svg-icon{width:14px;height:14px;display:grid;place-items:center}.review-wrapper.details-type .upper .rating .like-icon.like-active{color:#56b4ac;background-color:transparent}.review-wrapper.details-type .upper .rating .like-icon:hover:not(.like-active){color:#ccc}.review-wrapper.details-type .upper .rating .dislike-icon.dislike-active{color:#e66767}.review-wrapper.details-type .upper .rating .dislike-icon:hover:not(.dislike-active){color:#ccc}.review-wrapper.details-type .upper .rating .checkmark-icon{background-color:#919191!important;color:#1d1d1d;transition:transform .2s ease-in-out}.review-wrapper.details-type .upper .rating .checkmark-icon:hover{background-color:#fff!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 .cancel-icon{background-color:#919191!important;transition:transform .2s ease-in-out;color:#1d1d1d}.review-wrapper.details-type .upper .rating .cancel-icon:hover{background-color:#fff!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 .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 .lower{line-height:14px!important;padding:2px 4px!important;cursor:text}.review-wrapper.details-type:hover{cursor:pointer}.review-wrapper.details-type:hover .controls{opacity:1!important;pointer-events:auto!important}.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"] }]
|
|
7199
7204
|
}], ctorParameters: () => [{ type: DateFormatingPipe }], propDecorators: { type: [{
|
|
7200
7205
|
type: Input,
|
|
7201
7206
|
args: [{ required: true }]
|
|
@@ -7211,19 +7216,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7211
7216
|
}] } });
|
|
7212
7217
|
|
|
7213
7218
|
class ReviewModalComponent {
|
|
7219
|
+
//enums
|
|
7214
7220
|
ReviewType = ReviewType;
|
|
7215
7221
|
ngOnInit() {
|
|
7216
7222
|
this.initializeReviewsData();
|
|
7217
|
-
console.log('rivjui', this.ratingReviews);
|
|
7218
7223
|
}
|
|
7219
7224
|
ngOnChanges(changes) {
|
|
7220
7225
|
if (changes['ratingReviews']) {
|
|
7221
7226
|
this.initializeReviewsData();
|
|
7222
|
-
//this.settingDates();
|
|
7223
7227
|
}
|
|
7224
7228
|
}
|
|
7225
7229
|
ratingReviews;
|
|
7226
7230
|
modaltype;
|
|
7231
|
+
activeLikes = signal(false);
|
|
7232
|
+
activeDislikes = signal(false);
|
|
7233
|
+
activeReviews = signal(false);
|
|
7234
|
+
disabled = signal(false);
|
|
7235
|
+
addingReview = signal(false);
|
|
7227
7236
|
presentReviews = [];
|
|
7228
7237
|
testReview = {
|
|
7229
7238
|
ratingId: 5,
|
|
@@ -7254,10 +7263,10 @@ class ReviewModalComponent {
|
|
|
7254
7263
|
departmentId: 2,
|
|
7255
7264
|
},
|
|
7256
7265
|
};
|
|
7257
|
-
currentType = '';
|
|
7258
7266
|
countLikes = 0;
|
|
7259
7267
|
countDislikes = 0;
|
|
7260
7268
|
countReviews = 0;
|
|
7269
|
+
hasPersonalReview = false;
|
|
7261
7270
|
onReturnMost() {
|
|
7262
7271
|
if (this.countLikes > this.countDislikes) {
|
|
7263
7272
|
return 'likes';
|
|
@@ -7267,11 +7276,6 @@ class ReviewModalComponent {
|
|
|
7267
7276
|
}
|
|
7268
7277
|
return '';
|
|
7269
7278
|
}
|
|
7270
|
-
activeLikes = signal(false);
|
|
7271
|
-
activeDislikes = signal(false);
|
|
7272
|
-
activeReviews = signal(false);
|
|
7273
|
-
disabled = signal(false);
|
|
7274
|
-
addingReview = signal(false);
|
|
7275
7279
|
/**
|
|
7276
7280
|
* Emits an event when a review is successfully deleted.
|
|
7277
7281
|
* This event carries no data.
|
|
@@ -7284,8 +7288,7 @@ class ReviewModalComponent {
|
|
|
7284
7288
|
onAddReview() {
|
|
7285
7289
|
this.addingReview.set(true);
|
|
7286
7290
|
this.disabled.set(true);
|
|
7287
|
-
|
|
7288
|
-
this.hasPersonalReview = true; */
|
|
7291
|
+
this.hasPersonalReview = true;
|
|
7289
7292
|
const newId = this.ratingReviews.length > 0
|
|
7290
7293
|
? Math.max(...this.ratingReviews.map((r) => r.reviewId)) + 1
|
|
7291
7294
|
: 1;
|
|
@@ -7299,20 +7302,16 @@ class ReviewModalComponent {
|
|
|
7299
7302
|
createdAt: date.toString(),
|
|
7300
7303
|
updatedAt: '',
|
|
7301
7304
|
};
|
|
7302
|
-
console.log('iz add review', this.ratingReviews);
|
|
7303
7305
|
}
|
|
7304
7306
|
onEditedReview(ev) {
|
|
7305
|
-
|
|
7306
|
-
const index = this.ratingReviews.findIndex(r => r.reviewId === ev.review.reviewId);
|
|
7307
|
+
const index = this.ratingReviews.findIndex((r) => r.reviewId === ev.review.reviewId);
|
|
7307
7308
|
if (index > -1) {
|
|
7308
7309
|
this.ratingReviews[index] = ev.review;
|
|
7309
7310
|
this.presentReviews = [...this.ratingReviews];
|
|
7310
7311
|
this.initializeReviewsData();
|
|
7311
7312
|
}
|
|
7312
|
-
console.log('review edited', this.ratingReviews, ' present edited', this.presentReviews);
|
|
7313
7313
|
}
|
|
7314
7314
|
onGetReview(ev) {
|
|
7315
|
-
console.log('primio sam review', ev.review);
|
|
7316
7315
|
if (ev.review.isEdited) {
|
|
7317
7316
|
const index = this.ratingReviews.findIndex((r) => r.reviewId === ev.review.reviewId);
|
|
7318
7317
|
if (index > -1) {
|
|
@@ -7324,9 +7323,20 @@ class ReviewModalComponent {
|
|
|
7324
7323
|
}
|
|
7325
7324
|
this.addingReview.set(false);
|
|
7326
7325
|
this.presentReviews = [...this.ratingReviews];
|
|
7327
|
-
console.log('review add', this.ratingReviews, ' present add', this.presentReviews);
|
|
7328
7326
|
this.initializeReviewsData();
|
|
7329
7327
|
}
|
|
7328
|
+
handleSearch(event) {
|
|
7329
|
+
if (!event) {
|
|
7330
|
+
this.presentReviews = [...this.ratingReviews];
|
|
7331
|
+
return;
|
|
7332
|
+
}
|
|
7333
|
+
const search = event.toString().toLowerCase().trim();
|
|
7334
|
+
this.presentReviews = this.ratingReviews.filter((r) => r.companyUser.fullName.toLowerCase().includes(search) ||
|
|
7335
|
+
r.comment.toLowerCase().includes(search));
|
|
7336
|
+
}
|
|
7337
|
+
handleClear(event) {
|
|
7338
|
+
this.presentReviews = [...this.ratingReviews];
|
|
7339
|
+
}
|
|
7330
7340
|
/**
|
|
7331
7341
|
* Initializes review data when the component is initialized or when the `reviews` input changes.
|
|
7332
7342
|
* It copies the original reviews array, resets counters, calculates new counts, and
|
|
@@ -7442,50 +7452,20 @@ class ReviewModalComponent {
|
|
|
7442
7452
|
onDeleteReview(id) {
|
|
7443
7453
|
this.ratingReviews = this.ratingReviews.filter((review) => review.reviewId !== id);
|
|
7444
7454
|
this.addingReview.set(false);
|
|
7455
|
+
this.hasPersonalReview = false;
|
|
7445
7456
|
this.disabled.set(false);
|
|
7446
7457
|
this.initializeReviewsData();
|
|
7447
|
-
console.log('reviews', this.ratingReviews);
|
|
7448
|
-
console.log('present reviews', this.presentReviews);
|
|
7449
|
-
console.log(this.addingReview());
|
|
7450
7458
|
}
|
|
7451
|
-
activeFilter = 'all';
|
|
7452
|
-
/**
|
|
7453
|
-
* Switches active state of an filter button.
|
|
7454
|
-
* Initial state is all which selects all present reviews.
|
|
7455
|
-
* @param value The value of selected filter.
|
|
7456
|
-
*/
|
|
7457
|
-
setActiveFilter(value) {
|
|
7458
|
-
this.activeFilter = value;
|
|
7459
|
-
switch (value) {
|
|
7460
|
-
case 'all':
|
|
7461
|
-
this.presentReviews = [...this.ratingReviews];
|
|
7462
|
-
break;
|
|
7463
|
-
case 'rating':
|
|
7464
|
-
this.presentReviews = this.ratingReviews.filter((x) => x.comment == '');
|
|
7465
|
-
break;
|
|
7466
|
-
case 'review':
|
|
7467
|
-
this.presentReviews = this.ratingReviews.filter((x) => x.comment != '');
|
|
7468
|
-
break;
|
|
7469
|
-
default:
|
|
7470
|
-
break;
|
|
7471
|
-
}
|
|
7472
|
-
}
|
|
7473
|
-
personalReviewSet = false;
|
|
7474
|
-
activeInput = false;
|
|
7475
|
-
toggleActiveInput() {
|
|
7476
|
-
this.activeInput = !this.activeInput;
|
|
7477
|
-
}
|
|
7478
|
-
hasPersonalReview = false;
|
|
7479
7459
|
onCheckPersonal() {
|
|
7480
7460
|
this.ratingReviews.forEach((x) => {
|
|
7481
|
-
if (x.isItCurrentCompanyUser
|
|
7461
|
+
if (x.isItCurrentCompanyUser) {
|
|
7482
7462
|
this.hasPersonalReview = true;
|
|
7483
7463
|
return;
|
|
7484
7464
|
}
|
|
7485
7465
|
});
|
|
7486
7466
|
}
|
|
7487
7467
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReviewModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7488
|
-
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 <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 {{ countReviews }}\n </div>\n @if(modaltype === ReviewType.Modal && reviewsLength !== 0){\n <div class=\"y-divider\"></div>\n }\n </div>\n } @if(modaltype !== ReviewType.Table){\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 [class.most-likes]=\"onReturnMost() === 'likes'\"\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.most-dislikes]=\"onReturnMost() === 'dislikes'\"\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 === ReviewType.Modal || modaltype === ReviewType.Details){\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){ } @if(modaltype ===\n ReviewType.Details){\n <div class=\"bottom-divider-light\"></div>\n }\n </div>\n @if(modaltype=== 'Table' && reviewsLength > 0){\n <div class=\"input-container\">\n <cai-input\n [config]=\"{\n type: 'text',\n name: 'Find Title',\n icon: 'cai-search',\n inverse: true\n }\"\n />\n </div>\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(ratingReviews && 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 (onEditedReview)=\"onEditedReview($event)\"\n (onAddedReview)=\"onGetReview($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 (onEditedReview)=\"onEditedReview($event)\"\n (onAddedReview)=\"onGetReview($event)\"\n />\n } }\n <!-- MAIN MODAL -->\n </div>\n </div>\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.non-active-group:hover:has(.most-likes) .like-icon path{fill:#56b4ac!important}.filter-group.non-active-group:hover:has(.most-dislikes) .dislike-icon path{fill:#e66767!important}.filter-group svg-icon{width:18px;height:18px;display:grid;place-items:center;color:#919191;background-color:transparent}.filter-group svg-icon:hover{background-color:transparent}.filter-group .cancel-icon{width:14px;height:14px;display:none}.filter-group .like-icon svg{margin-bottom:auto!important}.filter-group .like-icon.active,.filter-group .like-icon.most-likes{color:#56b4ac;background-color:transparent}.filter-group .dislike-icon.active,.filter-group .dislike-icon.most-dislikes{color:#e66767;background-color:transparent}.filter-group .pencil-icon.active{opacity:.7;background-color:transparent}.filter-group .pencil-icon.active path{fill:#fff!important}.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}.filter-group .most-likes .like-icon{color:green!important}.filter-group .most-dislikes .dislike-icon{color:red!important}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", "onAddedReview", "onEditedReview"] }, { 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"] }] });
|
|
7468
|
+
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 <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 {{ countReviews }}\n </div>\n @if(modaltype === ReviewType.Modal && reviewsLength !== 0){\n <div class=\"y-divider\"></div>\n }\n </div>\n } @if(modaltype !== ReviewType.Table){\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 [class.most-likes]=\"onReturnMost() === 'likes'\"\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.most-dislikes]=\"onReturnMost() === 'dislikes'\"\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 === 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 ===\n ReviewType.Details){\n <div class=\"bottom-divider-light\"></div>\n }\n </div>\n @if(modaltype === ReviewType.Table && reviewsLength > 0){\n <div class=\"input-container\">\n <cai-input\n id=\"search\"\n formControlName=\"search\"\n [config]=\"{\n type: 'text',\n icon: 'cai-search',\n inverse: true,\n size: 22,\n name: 'Find Title',\n placeholderBehavior: 'fade',\n placeholderColor: '#AAAAAA',\n }\"\n (onValueChange)=\"handleSearch($event)\"\n (onClear)=\"handleClear($event)\"\n ></cai-input>\n </div>\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 === ReviewType.Table && !hasPersonalReview){\n <div class=\"add-review\" (click)=\"onAddReview()\">\n <span>ADD REVIEW</span>\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(ratingReviews && reviewsLength == 0 && !addingReview()){\n <div class=\"ilustration\">\n <svg-icon\n [name]=\"\n modaltype !== ReviewType.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 (onEditedReview)=\"onEditedReview($event)\"\n (onAddedReview)=\"onGetReview($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 (onEditedReview)=\"onEditedReview($event)\"\n (onAddedReview)=\"onGetReview($event)\"\n />\n } }\n <!-- MAIN MODAL -->\n </div>\n </div>\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%;height:26px!important}.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{max-width:260px;padding:4px;border-radius:3px}.table-wrapper .reviews-window{height:100%!important;display:flex;flex-direction:column;gap:2px}.table-wrapper .filter{padding:0 0 0 4px;margin-bottom:4px;height:18px}.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{margin:4px 0}.table-wrapper .btn-filters div{font-size:11px;line-height:14px;font-weight:700}.table-wrapper .add-review{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 4px 4px;height:26px;border-radius:2px}.table-wrapper .add-review span{line-height:18px;font-size:11px;font-weight:700;color:#92b1f5}.table-wrapper .add-review .filter-group{padding:0!important;display:flex;align-items:center}.table-wrapper .add-review .filter-group svg{width:14px;height:14px}.table-wrapper .add-review .filter-group .plus-icon{width:14px!important;height:14px!important}.table-wrapper .add-review .filter-group .plus-icon path{fill:#92b1f5!important}.table-wrapper .add-review .filter-group .plus-icon:hover{background-color:transparent!important}.table-wrapper .add-review:hover{background-color:#3b73ed3f;cursor:pointer}.table-wrapper .add-review:hover span path{fill:#fff}.details-wrapper{max-width:300px}.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}.filter{display:flex;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;cursor:pointer}.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.non-active-group:hover:has(.most-likes) .like-icon path{fill:#56b4ac!important}.filter-group.non-active-group:hover:has(.most-dislikes) .dislike-icon path{fill:#e66767!important}.filter-group svg-icon{width:18px;height:18px;display:grid;place-items:center;color:#919191;background-color:transparent}.filter-group svg-icon:hover{background-color:transparent}.filter-group .cancel-icon{width:14px;height:14px;display:none}.filter-group .like-icon svg{margin-bottom:auto!important}.filter-group .like-icon.active,.filter-group .like-icon.most-likes{color:#56b4ac;background-color:transparent}.filter-group .dislike-icon.active,.filter-group .dislike-icon.most-dislikes{color:#e66767;background-color:transparent}.filter-group .pencil-icon.active{opacity:.7;background-color:transparent}.filter-group .pencil-icon.active path{fill:#fff!important}.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}.filter-group .most-likes .like-icon{color:green!important}.filter-group .most-dislikes .dislike-icon{color:red!important}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;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}.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;margin-bottom:4px;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", "onAddedReview", "onEditedReview"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }] });
|
|
7489
7469
|
}
|
|
7490
7470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReviewModalComponent, decorators: [{
|
|
7491
7471
|
type: Component,
|
|
@@ -7493,16 +7473,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7493
7473
|
SvgIconComponent,
|
|
7494
7474
|
SingleReviewComponent,
|
|
7495
7475
|
CommonModule,
|
|
7496
|
-
NgbPopoverModule,
|
|
7497
7476
|
NgbTooltipModule,
|
|
7498
7477
|
InputComponent,
|
|
7499
|
-
], 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 <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 {{ countReviews }}\n </div>\n @if(modaltype === ReviewType.Modal && reviewsLength !== 0){\n <div class=\"y-divider\"></div>\n }\n </div>\n } @if(modaltype !== ReviewType.Table){\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 [class.most-likes]=\"onReturnMost() === 'likes'\"\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.most-dislikes]=\"onReturnMost() === 'dislikes'\"\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 === ReviewType.Modal || modaltype === ReviewType.Details){\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){ } @if(modaltype ===\n ReviewType.Details){\n <div class=\"bottom-divider-light\"></div>\n }\n </div>\n @if(modaltype=== 'Table' && reviewsLength > 0){\n <div class=\"input-container\">\n <cai-input\n [config]=\"{\n type: 'text',\n name: 'Find Title',\n icon: 'cai-search',\n inverse: true\n }\"\n />\n </div>\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(ratingReviews && 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 (onEditedReview)=\"onEditedReview($event)\"\n (onAddedReview)=\"onGetReview($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 (onEditedReview)=\"onEditedReview($event)\"\n (onAddedReview)=\"onGetReview($event)\"\n />\n } }\n <!-- MAIN MODAL -->\n </div>\n </div>\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.non-active-group:hover:has(.most-likes) .like-icon path{fill:#56b4ac!important}.filter-group.non-active-group:hover:has(.most-dislikes) .dislike-icon path{fill:#e66767!important}.filter-group svg-icon{width:18px;height:18px;display:grid;place-items:center;color:#919191;background-color:transparent}.filter-group svg-icon:hover{background-color:transparent}.filter-group .cancel-icon{width:14px;height:14px;display:none}.filter-group .like-icon svg{margin-bottom:auto!important}.filter-group .like-icon.active,.filter-group .like-icon.most-likes{color:#56b4ac;background-color:transparent}.filter-group .dislike-icon.active,.filter-group .dislike-icon.most-dislikes{color:#e66767;background-color:transparent}.filter-group .pencil-icon.active{opacity:.7;background-color:transparent}.filter-group .pencil-icon.active path{fill:#fff!important}.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}.filter-group .most-likes .like-icon{color:green!important}.filter-group .most-dislikes .dislike-icon{color:red!important}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"] }]
|
|
7478
|
+
], 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 <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 {{ countReviews }}\n </div>\n @if(modaltype === ReviewType.Modal && reviewsLength !== 0){\n <div class=\"y-divider\"></div>\n }\n </div>\n } @if(modaltype !== ReviewType.Table){\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 [class.most-likes]=\"onReturnMost() === 'likes'\"\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.most-dislikes]=\"onReturnMost() === 'dislikes'\"\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 === 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 ===\n ReviewType.Details){\n <div class=\"bottom-divider-light\"></div>\n }\n </div>\n @if(modaltype === ReviewType.Table && reviewsLength > 0){\n <div class=\"input-container\">\n <cai-input\n id=\"search\"\n formControlName=\"search\"\n [config]=\"{\n type: 'text',\n icon: 'cai-search',\n inverse: true,\n size: 22,\n name: 'Find Title',\n placeholderBehavior: 'fade',\n placeholderColor: '#AAAAAA',\n }\"\n (onValueChange)=\"handleSearch($event)\"\n (onClear)=\"handleClear($event)\"\n ></cai-input>\n </div>\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 === ReviewType.Table && !hasPersonalReview){\n <div class=\"add-review\" (click)=\"onAddReview()\">\n <span>ADD REVIEW</span>\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(ratingReviews && reviewsLength == 0 && !addingReview()){\n <div class=\"ilustration\">\n <svg-icon\n [name]=\"\n modaltype !== ReviewType.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 (onEditedReview)=\"onEditedReview($event)\"\n (onAddedReview)=\"onGetReview($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 (onEditedReview)=\"onEditedReview($event)\"\n (onAddedReview)=\"onGetReview($event)\"\n />\n } }\n <!-- MAIN MODAL -->\n </div>\n </div>\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%;height:26px!important}.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{max-width:260px;padding:4px;border-radius:3px}.table-wrapper .reviews-window{height:100%!important;display:flex;flex-direction:column;gap:2px}.table-wrapper .filter{padding:0 0 0 4px;margin-bottom:4px;height:18px}.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{margin:4px 0}.table-wrapper .btn-filters div{font-size:11px;line-height:14px;font-weight:700}.table-wrapper .add-review{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 4px 4px;height:26px;border-radius:2px}.table-wrapper .add-review span{line-height:18px;font-size:11px;font-weight:700;color:#92b1f5}.table-wrapper .add-review .filter-group{padding:0!important;display:flex;align-items:center}.table-wrapper .add-review .filter-group svg{width:14px;height:14px}.table-wrapper .add-review .filter-group .plus-icon{width:14px!important;height:14px!important}.table-wrapper .add-review .filter-group .plus-icon path{fill:#92b1f5!important}.table-wrapper .add-review .filter-group .plus-icon:hover{background-color:transparent!important}.table-wrapper .add-review:hover{background-color:#3b73ed3f;cursor:pointer}.table-wrapper .add-review:hover span path{fill:#fff}.details-wrapper{max-width:300px}.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}.filter{display:flex;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;cursor:pointer}.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.non-active-group:hover:has(.most-likes) .like-icon path{fill:#56b4ac!important}.filter-group.non-active-group:hover:has(.most-dislikes) .dislike-icon path{fill:#e66767!important}.filter-group svg-icon{width:18px;height:18px;display:grid;place-items:center;color:#919191;background-color:transparent}.filter-group svg-icon:hover{background-color:transparent}.filter-group .cancel-icon{width:14px;height:14px;display:none}.filter-group .like-icon svg{margin-bottom:auto!important}.filter-group .like-icon.active,.filter-group .like-icon.most-likes{color:#56b4ac;background-color:transparent}.filter-group .dislike-icon.active,.filter-group .dislike-icon.most-dislikes{color:#e66767;background-color:transparent}.filter-group .pencil-icon.active{opacity:.7;background-color:transparent}.filter-group .pencil-icon.active path{fill:#fff!important}.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}.filter-group .most-likes .like-icon{color:green!important}.filter-group .most-dislikes .dislike-icon{color:red!important}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;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}.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;margin-bottom:4px;border-bottom:1px solid #DADADA}\n"] }]
|
|
7500
7479
|
}], propDecorators: { ratingReviews: [{
|
|
7501
|
-
type: Input
|
|
7502
|
-
args: [{ required: true }]
|
|
7480
|
+
type: Input
|
|
7503
7481
|
}], modaltype: [{
|
|
7504
|
-
type: Input
|
|
7505
|
-
args: [{ required: true }]
|
|
7482
|
+
type: Input
|
|
7506
7483
|
}], reviewDeleted: [{
|
|
7507
7484
|
type: Output
|
|
7508
7485
|
}] } });
|
|
@@ -7517,9 +7494,8 @@ class RatingReviewComponent {
|
|
|
7517
7494
|
}
|
|
7518
7495
|
}
|
|
7519
7496
|
ratingReviews;
|
|
7497
|
+
inCard;
|
|
7520
7498
|
modaltype;
|
|
7521
|
-
presentReviews = [];
|
|
7522
|
-
currentType = '';
|
|
7523
7499
|
countLikes = 0;
|
|
7524
7500
|
countDislikes = 0;
|
|
7525
7501
|
countReviews = 0;
|
|
@@ -7544,8 +7520,6 @@ class RatingReviewComponent {
|
|
|
7544
7520
|
* @private
|
|
7545
7521
|
*/
|
|
7546
7522
|
initializeReviewsData() {
|
|
7547
|
-
this.presentReviews = [...this.ratingReviews];
|
|
7548
|
-
this.currentType = this.modaltype;
|
|
7549
7523
|
if (this.ratingReviews) {
|
|
7550
7524
|
this.resetCounts();
|
|
7551
7525
|
this.calculateReviewCounts();
|
|
@@ -7579,18 +7553,23 @@ class RatingReviewComponent {
|
|
|
7579
7553
|
});
|
|
7580
7554
|
}
|
|
7581
7555
|
show = signal(false);
|
|
7582
|
-
|
|
7583
|
-
this.show.set(
|
|
7556
|
+
handleOpen() {
|
|
7557
|
+
this.show.set(true);
|
|
7558
|
+
}
|
|
7559
|
+
handleClose() {
|
|
7560
|
+
this.show.set(false);
|
|
7584
7561
|
}
|
|
7585
7562
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RatingReviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7586
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
7563
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: RatingReviewComponent, isStandalone: true, selector: "cai-rating-review", inputs: { ratingReviews: "ratingReviews", inCard: "inCard", modaltype: "modaltype" }, usesOnChanges: true, ngImport: i0, template: "<div\n [class]=\"{\n 'filter-toggle': true,\n active: show()\n }\"\n [ngbPopover]=\"popoverReview\"\n popoverClass=\"tagPopover popover-review\"\n (hidden)=\"handleClose()\"\n container=\"body\"\n placement=\"bottom-start\"\n [autoClose]=\"'outside'\"\n (shown)=\"handleOpen()\"\n>\n <div\n class=\"filter-wrapper\"\n [ngbTooltip]=\"inCard ? 'Show Rating & Review' : 'Show Reviews'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <div\n [class]=\"{\n 'toggle-group': true,\n 'empty-state': countLikes === 0,\n 'most-likes': onReturnMost() == 'likes'\n }\"\n >\n <svg-icon class=\"like-icon\" name=\"cai-like\" class=\"like-icon\" />\n <div>{{ countLikes }}</div>\n </div>\n <div\n [class]=\"{\n 'toggle-group': true,\n 'empty-state': countDislikes === 0,\n 'most-dislikes': onReturnMost() === 'dislikes'\n }\"\n >\n <svg-icon class=\"dislike-icon\" name=\"cai-dislike\" class=\"dislike-icon\" />\n <div>{{ countDislikes }}</div>\n </div>\n <div\n [class]=\"{\n 'toggle-group': true,\n 'empty-state': countReviews === 0\n }\"\n >\n <svg-icon class=\"edit-icon\" name=\"cai-edit2\" class=\"edit-icon\" />\n <div>{{ countReviews }}</div>\n </div>\n </div>\n</div>\n<ng-template #popoverReview>\n <div class=\"popover-review\">\n <cai-review-modal [ratingReviews]=\"ratingReviews\" [modaltype]=\"modaltype\" />\n </div>\n</ng-template>\n", styles: ["svg-icon{width:18px;height:18px;display:grid;justify-content:center;align-items:center}svg-icon svg{width:16.2px!important;height:14.18px!important;display:flex;flex-direction:column;justify-content:center;align-items:center}svg-icon svg path{fill-opacity:1!important}.filter-toggle{max-width:140px;height:100%;display:flex;align-items:center}.filter-toggle .filter-wrapper{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;border-radius:2px;padding:4px;position:relative}.filter-toggle:hover>.filter-wrapper{background-color:#91919133;cursor:pointer}.filter-toggle .toggle-group{display:flex;align-items:center;justify-content:center;gap:4px}.filter-toggle .toggle-group div{width:16px;height:14px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;line-height:14px;text-align:center}.filter-toggle .toggle-group svg-icon path{fill:#919191}.filter-toggle .toggle-group.empty-state svg-icon path{fill:#91919166}.filter-toggle .toggle-group.empty-state span{color:#91919166}.filter-toggle .toggle-group.most-likes svg-icon path{fill:#56b4ac}.filter-toggle .toggle-group.most-dislikes svg-icon path{fill:#e66767}.filter-toggle span{font-weight:600;font-size:11px}.filter-toggle.active .filter-wrapper{background-color:#2f2f2f}.filter-toggle.active .toggle-group{color:#fff}.filter-toggle.active .toggle-group.empty-state{color:#aaa}::ng-deep .popover .popover-arrow{display:none!important}::ng-deep .popover .popover-body{font-weight:600;font-size:11px;border-radius:3px;padding:2px 6px;white-space:nowrap;pointer-events:none}::ng-deep .popover.custom-popover-dark{background-color:#424242!important}::ng-deep .popover.custom-popover-dark .popover-body{color:#fff!important}::ng-deep .popover.custom-popover-light{background-color:#ccc!important}::ng-deep .popover.custom-popover-light .popover-body{color:#2f2f2f!important}::ng-deep .popover.custom-popover-delete{background-color:#df3c3c!important}::ng-deep .popover.custom-popover-delete .popover-body{color:#fff!important}\n"], dependencies: [{ kind: "component", type: ReviewModalComponent, selector: "cai-review-modal", inputs: ["ratingReviews", "modaltype"], outputs: ["reviewDeleted"] }, { kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { 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: "ngmodule", type: NgbPopoverModule }, { kind: "directive", type: i2.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }] });
|
|
7587
7564
|
}
|
|
7588
7565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RatingReviewComponent, decorators: [{
|
|
7589
7566
|
type: Component,
|
|
7590
|
-
args: [{ selector: 'cai-rating-review', imports: [ReviewModalComponent, SvgIconComponent, NgbPopoverModule], template: "<div\n [class]=\"{\n 'filter-toggle': true,\n active: show()\n }\"\n
|
|
7567
|
+
args: [{ selector: 'cai-rating-review', imports: [ReviewModalComponent, SvgIconComponent, NgbTooltipModule, NgbPopoverModule], template: "<div\n [class]=\"{\n 'filter-toggle': true,\n active: show()\n }\"\n [ngbPopover]=\"popoverReview\"\n popoverClass=\"tagPopover popover-review\"\n (hidden)=\"handleClose()\"\n container=\"body\"\n placement=\"bottom-start\"\n [autoClose]=\"'outside'\"\n (shown)=\"handleOpen()\"\n>\n <div\n class=\"filter-wrapper\"\n [ngbTooltip]=\"inCard ? 'Show Rating & Review' : 'Show Reviews'\"\n triggers=\"mouseenter:mouseleave\"\n tabindex=\"0\"\n tooltipClass=\"tooltip tooltip-m-b-2\"\n placement=\"bottom\"\n >\n <div\n [class]=\"{\n 'toggle-group': true,\n 'empty-state': countLikes === 0,\n 'most-likes': onReturnMost() == 'likes'\n }\"\n >\n <svg-icon class=\"like-icon\" name=\"cai-like\" class=\"like-icon\" />\n <div>{{ countLikes }}</div>\n </div>\n <div\n [class]=\"{\n 'toggle-group': true,\n 'empty-state': countDislikes === 0,\n 'most-dislikes': onReturnMost() === 'dislikes'\n }\"\n >\n <svg-icon class=\"dislike-icon\" name=\"cai-dislike\" class=\"dislike-icon\" />\n <div>{{ countDislikes }}</div>\n </div>\n <div\n [class]=\"{\n 'toggle-group': true,\n 'empty-state': countReviews === 0\n }\"\n >\n <svg-icon class=\"edit-icon\" name=\"cai-edit2\" class=\"edit-icon\" />\n <div>{{ countReviews }}</div>\n </div>\n </div>\n</div>\n<ng-template #popoverReview>\n <div class=\"popover-review\">\n <cai-review-modal [ratingReviews]=\"ratingReviews\" [modaltype]=\"modaltype\" />\n </div>\n</ng-template>\n", styles: ["svg-icon{width:18px;height:18px;display:grid;justify-content:center;align-items:center}svg-icon svg{width:16.2px!important;height:14.18px!important;display:flex;flex-direction:column;justify-content:center;align-items:center}svg-icon svg path{fill-opacity:1!important}.filter-toggle{max-width:140px;height:100%;display:flex;align-items:center}.filter-toggle .filter-wrapper{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;border-radius:2px;padding:4px;position:relative}.filter-toggle:hover>.filter-wrapper{background-color:#91919133;cursor:pointer}.filter-toggle .toggle-group{display:flex;align-items:center;justify-content:center;gap:4px}.filter-toggle .toggle-group div{width:16px;height:14px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;line-height:14px;text-align:center}.filter-toggle .toggle-group svg-icon path{fill:#919191}.filter-toggle .toggle-group.empty-state svg-icon path{fill:#91919166}.filter-toggle .toggle-group.empty-state span{color:#91919166}.filter-toggle .toggle-group.most-likes svg-icon path{fill:#56b4ac}.filter-toggle .toggle-group.most-dislikes svg-icon path{fill:#e66767}.filter-toggle span{font-weight:600;font-size:11px}.filter-toggle.active .filter-wrapper{background-color:#2f2f2f}.filter-toggle.active .toggle-group{color:#fff}.filter-toggle.active .toggle-group.empty-state{color:#aaa}::ng-deep .popover .popover-arrow{display:none!important}::ng-deep .popover .popover-body{font-weight:600;font-size:11px;border-radius:3px;padding:2px 6px;white-space:nowrap;pointer-events:none}::ng-deep .popover.custom-popover-dark{background-color:#424242!important}::ng-deep .popover.custom-popover-dark .popover-body{color:#fff!important}::ng-deep .popover.custom-popover-light{background-color:#ccc!important}::ng-deep .popover.custom-popover-light .popover-body{color:#2f2f2f!important}::ng-deep .popover.custom-popover-delete{background-color:#df3c3c!important}::ng-deep .popover.custom-popover-delete .popover-body{color:#fff!important}\n"] }]
|
|
7591
7568
|
}], propDecorators: { ratingReviews: [{
|
|
7592
7569
|
type: Input,
|
|
7593
7570
|
args: [{ required: true }]
|
|
7571
|
+
}], inCard: [{
|
|
7572
|
+
type: Input
|
|
7594
7573
|
}], modaltype: [{
|
|
7595
7574
|
type: Input,
|
|
7596
7575
|
args: [{ required: true }]
|