myrta-ui 1.0.42 → 1.0.43
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.
|
@@ -167,7 +167,7 @@ RatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
|
167
167
|
useExisting: forwardRef(() => RatingComponent),
|
|
168
168
|
multi: true,
|
|
169
169
|
},
|
|
170
|
-
], ngImport: i0, template: "<div class=\"mrx-rating-wrapper\" [class]=\"getWrapperClasses\">\r\n <div\r\n *ngIf=\"canActive; else viewTemplate\"\r\n class=\"mrx-rating edit-state\"\r\n [class]=\"getClasses\"\r\n (mouseleave)=\"resetElementHandle()\"\r\n >\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'double')\"\r\n (click)=\"canActive && changeValue(item.value, 'double')\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'single')\"\r\n (click)=\"canActive && changeValue(item.value, 'single')\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-template #viewTemplate>\r\n <div class=\"mrx-rating\" [class]=\"getClasses\">\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container [ngSwitch]=\"viewMode\">\r\n <span *ngSwitchCase=\"'text'\" [class]=\"getValueClasses\">{{ ratingText }}</span>\r\n <span *ngSwitchCase=\"'value'\" [class]=\"getValueClasses\">{{ toNumberFormatFunc(value) }}</span>\r\n <span *ngSwitchCase=\"'text-with-value'\" [class]=\"getValueClasses\">\r\n {{ ratingText }} ({{ toNumberFormatFunc(value) }})\r\n </span>\r\n </ng-container>\r\n</div>\r\n\r\n<mrx-error-message *ngIf=\"(!isValid || invalid) && isInvalidMessage\" [invalidMessage]=\"invalidMessage\">\r\n</mrx-error-message>\r\n", styles: [".mrx-rating{display:inline-flex}.mrx-rating-wrapper{display:flex;align-items:center;flex-wrap:wrap}.mrx-rating-wrapper-sm{grid-gap:
|
|
170
|
+
], ngImport: i0, template: "<div class=\"mrx-rating-wrapper\" [class]=\"getWrapperClasses\">\r\n <div\r\n *ngIf=\"canActive; else viewTemplate\"\r\n class=\"mrx-rating edit-state\"\r\n [class]=\"getClasses\"\r\n (mouseleave)=\"resetElementHandle()\"\r\n >\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'double')\"\r\n (click)=\"canActive && changeValue(item.value, 'double')\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'single')\"\r\n (click)=\"canActive && changeValue(item.value, 'single')\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-template #viewTemplate>\r\n <div class=\"mrx-rating\" [class]=\"getClasses\">\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container [ngSwitch]=\"viewMode\">\r\n <span *ngSwitchCase=\"'text'\" [class]=\"getValueClasses\">{{ ratingText }}</span>\r\n <span *ngSwitchCase=\"'value'\" [class]=\"getValueClasses\">{{ toNumberFormatFunc(value) }}</span>\r\n <span *ngSwitchCase=\"'text-with-value'\" [class]=\"getValueClasses\">\r\n {{ ratingText }} ({{ toNumberFormatFunc(value) }})\r\n </span>\r\n </ng-container>\r\n</div>\r\n\r\n<mrx-error-message *ngIf=\"(!isValid || invalid) && isInvalidMessage\" [invalidMessage]=\"invalidMessage\">\r\n</mrx-error-message>\r\n", styles: [".mrx-rating{display:inline-flex}.mrx-rating-wrapper{display:flex;align-items:center;flex-wrap:wrap}.mrx-rating-wrapper-sm{grid-gap:var(--spacing-2)}.mrx-rating-wrapper-lg{grid-gap:var(--spacing-3)}.mrx-rating.mrx-rating-lg{grid-gap:8px}.mrx-rating.mrx-rating-sm{grid-gap:4px}.mrx-rating-value-sm{font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);font-size:var(--body-sm-font-size)}.mrx-rating-value-lg{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-rating.edit-state .mrx-rating-item{cursor:pointer}.mrx-rating.edit-state .mrx-rating-item:hover{transform:scale(1.1)}.mrx-rating .mrx-rating-item{display:flex;align-items:center;position:relative;transition:transform .2s}.mrx-rating .mrx-rating-item-wrapper,.mrx-rating .mrx-rating-item-double-wrapper{display:flex;align-items:center}.mrx-rating .mrx-rating-item-wrapper .mrx-icon,.mrx-rating .mrx-rating-item-double-wrapper .mrx-icon{color:var(--system-rating-default)}.mrx-rating .mrx-rating-item-wrapper .mrx-icon.filled,.mrx-rating .mrx-rating-item-double-wrapper .mrx-icon.filled{color:var(--system-rating-selected);opacity:1}.mrx-rating .mrx-rating-item-double-wrapper{position:absolute;top:0;left:0;width:50%;overflow:hidden}.mrx-rating .mrx-rating-item-double-wrapper .mrx-icon{opacity:0}\n"], components: [{ type: i1.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalidMessage", "customClasses"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
171
171
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RatingComponent, decorators: [{
|
|
172
172
|
type: Component,
|
|
173
173
|
args: [{ selector: 'mrx-rating', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -176,7 +176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
176
176
|
useExisting: forwardRef(() => RatingComponent),
|
|
177
177
|
multi: true,
|
|
178
178
|
},
|
|
179
|
-
], template: "<div class=\"mrx-rating-wrapper\" [class]=\"getWrapperClasses\">\r\n <div\r\n *ngIf=\"canActive; else viewTemplate\"\r\n class=\"mrx-rating edit-state\"\r\n [class]=\"getClasses\"\r\n (mouseleave)=\"resetElementHandle()\"\r\n >\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'double')\"\r\n (click)=\"canActive && changeValue(item.value, 'double')\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'single')\"\r\n (click)=\"canActive && changeValue(item.value, 'single')\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-template #viewTemplate>\r\n <div class=\"mrx-rating\" [class]=\"getClasses\">\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container [ngSwitch]=\"viewMode\">\r\n <span *ngSwitchCase=\"'text'\" [class]=\"getValueClasses\">{{ ratingText }}</span>\r\n <span *ngSwitchCase=\"'value'\" [class]=\"getValueClasses\">{{ toNumberFormatFunc(value) }}</span>\r\n <span *ngSwitchCase=\"'text-with-value'\" [class]=\"getValueClasses\">\r\n {{ ratingText }} ({{ toNumberFormatFunc(value) }})\r\n </span>\r\n </ng-container>\r\n</div>\r\n\r\n<mrx-error-message *ngIf=\"(!isValid || invalid) && isInvalidMessage\" [invalidMessage]=\"invalidMessage\">\r\n</mrx-error-message>\r\n", styles: [".mrx-rating{display:inline-flex}.mrx-rating-wrapper{display:flex;align-items:center;flex-wrap:wrap}.mrx-rating-wrapper-sm{grid-gap:
|
|
179
|
+
], template: "<div class=\"mrx-rating-wrapper\" [class]=\"getWrapperClasses\">\r\n <div\r\n *ngIf=\"canActive; else viewTemplate\"\r\n class=\"mrx-rating edit-state\"\r\n [class]=\"getClasses\"\r\n (mouseleave)=\"resetElementHandle()\"\r\n >\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'double')\"\r\n (click)=\"canActive && changeValue(item.value, 'double')\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'single')\"\r\n (click)=\"canActive && changeValue(item.value, 'single')\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-template #viewTemplate>\r\n <div class=\"mrx-rating\" [class]=\"getClasses\">\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container [ngSwitch]=\"viewMode\">\r\n <span *ngSwitchCase=\"'text'\" [class]=\"getValueClasses\">{{ ratingText }}</span>\r\n <span *ngSwitchCase=\"'value'\" [class]=\"getValueClasses\">{{ toNumberFormatFunc(value) }}</span>\r\n <span *ngSwitchCase=\"'text-with-value'\" [class]=\"getValueClasses\">\r\n {{ ratingText }} ({{ toNumberFormatFunc(value) }})\r\n </span>\r\n </ng-container>\r\n</div>\r\n\r\n<mrx-error-message *ngIf=\"(!isValid || invalid) && isInvalidMessage\" [invalidMessage]=\"invalidMessage\">\r\n</mrx-error-message>\r\n", styles: [".mrx-rating{display:inline-flex}.mrx-rating-wrapper{display:flex;align-items:center;flex-wrap:wrap}.mrx-rating-wrapper-sm{grid-gap:var(--spacing-2)}.mrx-rating-wrapper-lg{grid-gap:var(--spacing-3)}.mrx-rating.mrx-rating-lg{grid-gap:8px}.mrx-rating.mrx-rating-sm{grid-gap:4px}.mrx-rating-value-sm{font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);font-size:var(--body-sm-font-size)}.mrx-rating-value-lg{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-rating.edit-state .mrx-rating-item{cursor:pointer}.mrx-rating.edit-state .mrx-rating-item:hover{transform:scale(1.1)}.mrx-rating .mrx-rating-item{display:flex;align-items:center;position:relative;transition:transform .2s}.mrx-rating .mrx-rating-item-wrapper,.mrx-rating .mrx-rating-item-double-wrapper{display:flex;align-items:center}.mrx-rating .mrx-rating-item-wrapper .mrx-icon,.mrx-rating .mrx-rating-item-double-wrapper .mrx-icon{color:var(--system-rating-default)}.mrx-rating .mrx-rating-item-wrapper .mrx-icon.filled,.mrx-rating .mrx-rating-item-double-wrapper .mrx-icon.filled{color:var(--system-rating-selected);opacity:1}.mrx-rating .mrx-rating-item-double-wrapper{position:absolute;top:0;left:0;width:50%;overflow:hidden}.mrx-rating .mrx-rating-item-double-wrapper .mrx-icon{opacity:0}\n"] }]
|
|
180
180
|
}], propDecorators: { ratingCount: [{
|
|
181
181
|
type: Input
|
|
182
182
|
}], size: [{
|
package/fesm2015/myrta-ui.mjs
CHANGED
|
@@ -10554,7 +10554,7 @@ RatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
|
10554
10554
|
useExisting: forwardRef(() => RatingComponent),
|
|
10555
10555
|
multi: true,
|
|
10556
10556
|
},
|
|
10557
|
-
], ngImport: i0, template: "<div class=\"mrx-rating-wrapper\" [class]=\"getWrapperClasses\">\r\n <div\r\n *ngIf=\"canActive; else viewTemplate\"\r\n class=\"mrx-rating edit-state\"\r\n [class]=\"getClasses\"\r\n (mouseleave)=\"resetElementHandle()\"\r\n >\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'double')\"\r\n (click)=\"canActive && changeValue(item.value, 'double')\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'single')\"\r\n (click)=\"canActive && changeValue(item.value, 'single')\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-template #viewTemplate>\r\n <div class=\"mrx-rating\" [class]=\"getClasses\">\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container [ngSwitch]=\"viewMode\">\r\n <span *ngSwitchCase=\"'text'\" [class]=\"getValueClasses\">{{ ratingText }}</span>\r\n <span *ngSwitchCase=\"'value'\" [class]=\"getValueClasses\">{{ toNumberFormatFunc(value) }}</span>\r\n <span *ngSwitchCase=\"'text-with-value'\" [class]=\"getValueClasses\">\r\n {{ ratingText }} ({{ toNumberFormatFunc(value) }})\r\n </span>\r\n </ng-container>\r\n</div>\r\n\r\n<mrx-error-message *ngIf=\"(!isValid || invalid) && isInvalidMessage\" [invalidMessage]=\"invalidMessage\">\r\n</mrx-error-message>\r\n", styles: [".mrx-rating{display:inline-flex}.mrx-rating-wrapper{display:flex;align-items:center;flex-wrap:wrap}.mrx-rating-wrapper-sm{grid-gap:
|
|
10557
|
+
], ngImport: i0, template: "<div class=\"mrx-rating-wrapper\" [class]=\"getWrapperClasses\">\r\n <div\r\n *ngIf=\"canActive; else viewTemplate\"\r\n class=\"mrx-rating edit-state\"\r\n [class]=\"getClasses\"\r\n (mouseleave)=\"resetElementHandle()\"\r\n >\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'double')\"\r\n (click)=\"canActive && changeValue(item.value, 'double')\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'single')\"\r\n (click)=\"canActive && changeValue(item.value, 'single')\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-template #viewTemplate>\r\n <div class=\"mrx-rating\" [class]=\"getClasses\">\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container [ngSwitch]=\"viewMode\">\r\n <span *ngSwitchCase=\"'text'\" [class]=\"getValueClasses\">{{ ratingText }}</span>\r\n <span *ngSwitchCase=\"'value'\" [class]=\"getValueClasses\">{{ toNumberFormatFunc(value) }}</span>\r\n <span *ngSwitchCase=\"'text-with-value'\" [class]=\"getValueClasses\">\r\n {{ ratingText }} ({{ toNumberFormatFunc(value) }})\r\n </span>\r\n </ng-container>\r\n</div>\r\n\r\n<mrx-error-message *ngIf=\"(!isValid || invalid) && isInvalidMessage\" [invalidMessage]=\"invalidMessage\">\r\n</mrx-error-message>\r\n", styles: [".mrx-rating{display:inline-flex}.mrx-rating-wrapper{display:flex;align-items:center;flex-wrap:wrap}.mrx-rating-wrapper-sm{grid-gap:var(--spacing-2)}.mrx-rating-wrapper-lg{grid-gap:var(--spacing-3)}.mrx-rating.mrx-rating-lg{grid-gap:8px}.mrx-rating.mrx-rating-sm{grid-gap:4px}.mrx-rating-value-sm{font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);font-size:var(--body-sm-font-size)}.mrx-rating-value-lg{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-rating.edit-state .mrx-rating-item{cursor:pointer}.mrx-rating.edit-state .mrx-rating-item:hover{transform:scale(1.1)}.mrx-rating .mrx-rating-item{display:flex;align-items:center;position:relative;transition:transform .2s}.mrx-rating .mrx-rating-item-wrapper,.mrx-rating .mrx-rating-item-double-wrapper{display:flex;align-items:center}.mrx-rating .mrx-rating-item-wrapper .mrx-icon,.mrx-rating .mrx-rating-item-double-wrapper .mrx-icon{color:var(--system-rating-default)}.mrx-rating .mrx-rating-item-wrapper .mrx-icon.filled,.mrx-rating .mrx-rating-item-double-wrapper .mrx-icon.filled{color:var(--system-rating-selected);opacity:1}.mrx-rating .mrx-rating-item-double-wrapper{position:absolute;top:0;left:0;width:50%;overflow:hidden}.mrx-rating .mrx-rating-item-double-wrapper .mrx-icon{opacity:0}\n"], components: [{ type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10558
10558
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RatingComponent, decorators: [{
|
|
10559
10559
|
type: Component,
|
|
10560
10560
|
args: [{ selector: 'mrx-rating', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -10563,7 +10563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
10563
10563
|
useExisting: forwardRef(() => RatingComponent),
|
|
10564
10564
|
multi: true,
|
|
10565
10565
|
},
|
|
10566
|
-
], template: "<div class=\"mrx-rating-wrapper\" [class]=\"getWrapperClasses\">\r\n <div\r\n *ngIf=\"canActive; else viewTemplate\"\r\n class=\"mrx-rating edit-state\"\r\n [class]=\"getClasses\"\r\n (mouseleave)=\"resetElementHandle()\"\r\n >\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'double')\"\r\n (click)=\"canActive && changeValue(item.value, 'double')\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'single')\"\r\n (click)=\"canActive && changeValue(item.value, 'single')\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-template #viewTemplate>\r\n <div class=\"mrx-rating\" [class]=\"getClasses\">\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container [ngSwitch]=\"viewMode\">\r\n <span *ngSwitchCase=\"'text'\" [class]=\"getValueClasses\">{{ ratingText }}</span>\r\n <span *ngSwitchCase=\"'value'\" [class]=\"getValueClasses\">{{ toNumberFormatFunc(value) }}</span>\r\n <span *ngSwitchCase=\"'text-with-value'\" [class]=\"getValueClasses\">\r\n {{ ratingText }} ({{ toNumberFormatFunc(value) }})\r\n </span>\r\n </ng-container>\r\n</div>\r\n\r\n<mrx-error-message *ngIf=\"(!isValid || invalid) && isInvalidMessage\" [invalidMessage]=\"invalidMessage\">\r\n</mrx-error-message>\r\n", styles: [".mrx-rating{display:inline-flex}.mrx-rating-wrapper{display:flex;align-items:center;flex-wrap:wrap}.mrx-rating-wrapper-sm{grid-gap:
|
|
10566
|
+
], template: "<div class=\"mrx-rating-wrapper\" [class]=\"getWrapperClasses\">\r\n <div\r\n *ngIf=\"canActive; else viewTemplate\"\r\n class=\"mrx-rating edit-state\"\r\n [class]=\"getClasses\"\r\n (mouseleave)=\"resetElementHandle()\"\r\n >\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'double')\"\r\n (click)=\"canActive && changeValue(item.value, 'double')\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n (mouseenter)=\"canActive && hoverElementHandle(item, 'single')\"\r\n (click)=\"canActive && changeValue(item.value, 'single')\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-template #viewTemplate>\r\n <div class=\"mrx-rating\" [class]=\"getClasses\">\r\n <ng-container *ngFor=\"let item of elements; let idx = index; trackBy: trackByFn\">\r\n <div class=\"mrx-rating-item\" [class.disabled]=\"disabled || readonly\">\r\n <div *ngIf=\"double\" class=\"mrx-rating-item-double-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && item.double\"\r\n ></span>\r\n </div>\r\n\r\n <div class=\"mrx-rating-item-wrapper\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class]=\"iconClass\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.filled]=\"item.filled && !item.double\"\r\n ></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container [ngSwitch]=\"viewMode\">\r\n <span *ngSwitchCase=\"'text'\" [class]=\"getValueClasses\">{{ ratingText }}</span>\r\n <span *ngSwitchCase=\"'value'\" [class]=\"getValueClasses\">{{ toNumberFormatFunc(value) }}</span>\r\n <span *ngSwitchCase=\"'text-with-value'\" [class]=\"getValueClasses\">\r\n {{ ratingText }} ({{ toNumberFormatFunc(value) }})\r\n </span>\r\n </ng-container>\r\n</div>\r\n\r\n<mrx-error-message *ngIf=\"(!isValid || invalid) && isInvalidMessage\" [invalidMessage]=\"invalidMessage\">\r\n</mrx-error-message>\r\n", styles: [".mrx-rating{display:inline-flex}.mrx-rating-wrapper{display:flex;align-items:center;flex-wrap:wrap}.mrx-rating-wrapper-sm{grid-gap:var(--spacing-2)}.mrx-rating-wrapper-lg{grid-gap:var(--spacing-3)}.mrx-rating.mrx-rating-lg{grid-gap:8px}.mrx-rating.mrx-rating-sm{grid-gap:4px}.mrx-rating-value-sm{font-family:var(--body-sm-font-family);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);font-size:var(--body-sm-font-size)}.mrx-rating-value-lg{font-family:var(--body-md-font-family);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);font-size:var(--body-md-font-size)}.mrx-rating.edit-state .mrx-rating-item{cursor:pointer}.mrx-rating.edit-state .mrx-rating-item:hover{transform:scale(1.1)}.mrx-rating .mrx-rating-item{display:flex;align-items:center;position:relative;transition:transform .2s}.mrx-rating .mrx-rating-item-wrapper,.mrx-rating .mrx-rating-item-double-wrapper{display:flex;align-items:center}.mrx-rating .mrx-rating-item-wrapper .mrx-icon,.mrx-rating .mrx-rating-item-double-wrapper .mrx-icon{color:var(--system-rating-default)}.mrx-rating .mrx-rating-item-wrapper .mrx-icon.filled,.mrx-rating .mrx-rating-item-double-wrapper .mrx-icon.filled{color:var(--system-rating-selected);opacity:1}.mrx-rating .mrx-rating-item-double-wrapper{position:absolute;top:0;left:0;width:50%;overflow:hidden}.mrx-rating .mrx-rating-item-double-wrapper .mrx-icon{opacity:0}\n"] }]
|
|
10567
10567
|
}], propDecorators: { ratingCount: [{
|
|
10568
10568
|
type: Input
|
|
10569
10569
|
}], size: [{
|