@ajf/material 18.3.0 → 18.4.0
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/esm2022/form-builder/form-builder-service.mjs +2 -2
- package/esm2022/forms/range-field.mjs +13 -5
- package/fesm2022/ajf-material-form-builder.mjs +1 -1
- package/fesm2022/ajf-material-form-builder.mjs.map +1 -1
- package/fesm2022/ajf-material-forms.mjs +9 -2
- package/fesm2022/ajf-material-forms.mjs.map +1 -1
- package/forms/range-field.d.ts +5 -0
- package/package.json +2 -2
|
@@ -565,6 +565,13 @@ class AjfRangeFieldComponent extends AjfRange {
|
|
|
565
565
|
constructor(cdr, service, was) {
|
|
566
566
|
super(cdr, service, was);
|
|
567
567
|
}
|
|
568
|
+
/**
|
|
569
|
+
* True when no value has been selected yet, so that the slider is not
|
|
570
|
+
* rendered as if the minimum value had been picked.
|
|
571
|
+
*/
|
|
572
|
+
isEmpty(value) {
|
|
573
|
+
return value === null || value === undefined;
|
|
574
|
+
}
|
|
568
575
|
enumerateStars() {
|
|
569
576
|
const nums = [];
|
|
570
577
|
for (let i = 1; i <= (this.end || 5); i++) {
|
|
@@ -573,11 +580,11 @@ class AjfRangeFieldComponent extends AjfRange {
|
|
|
573
580
|
return nums;
|
|
574
581
|
}
|
|
575
582
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfRangeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
576
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfRangeFieldComponent, selector: "ajf-range", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"control|async as ctrl\">\n <div
|
|
583
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfRangeFieldComponent, selector: "ajf-range", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"control|async as ctrl\">\n <div\n *ngIf=\"appearance !== 'rating'; else ratingTemplate\"\n [class.ajf-range-no-value]=\"isEmpty(ctrl.value)\"\n >\n <mat-slider\n discrete\n showTickMarks\n [step]=\"step\"\n [min]=\"start\"\n [max]=\"end\"\n [attr.aria-label]=\"name\"\n [attr.name]=\"name\"\n ><input matSliderThumb [value]=\"value\" [formControl]=\"ctrl\" /></mat-slider>\n <div class=\"ajf-range-label\">\n <label>{{isEmpty(ctrl.value) ? ('No value selected'|transloco) : ctrl.value}}</label>\n </div>\n </div>\n \n <ng-template #ratingTemplate>\n <div class=\"ajf-rating-container\">\n <button type=\"button\"\n *ngFor=\"let i of enumerateStars()\"\n class=\"ajf-rating-star\"\n [class.selected]=\"i <= ctrl.value\"\n (click)=\"ctrl.setValue(i)\"\n [attr.aria-label]=\"'Rate ' + i + ' out of ' + end\"\n [attr.name]=\"name\">\n <mat-icon>star</mat-icon>\n </button>\n <div class=\"ajf-range-label\">\n <label>{{ctrl.value}}</label>\n </div>\n </div>\n </ng-template>\n</ng-container>\n", styles: ["ajf-range{display:inline-block;padding-top:20px}ajf-range .ajf-range-label{display:inline-block;padding:0 10px}ajf-range .ajf-range-no-value{--mdc-slider-handle-color: #9e9e9e;--mdc-slider-focus-handle-color: #9e9e9e;--mdc-slider-hover-handle-color: #9e9e9e;--mdc-slider-active-track-color: #9e9e9e;--mdc-slider-inactive-track-color: #9e9e9e;--mdc-slider-with-tick-marks-active-container-color: #fff;--mdc-slider-with-tick-marks-inactive-container-color: #9e9e9e;--mdc-slider-label-container-color: #9e9e9e;--mat-slider-ripple-color: #9e9e9e;--mat-slider-hover-state-layer-color: rgba(158, 158, 158, .05);--mat-slider-focus-state-layer-color: rgba(158, 158, 158, .2)}ajf-range .ajf-range-no-value .ajf-range-label{color:#9e9e9e}ajf-range .ajf-rating-container{display:flex;align-items:center;gap:8px;padding:8px 0}ajf-range .ajf-rating-container .ajf-rating-star{background:none;border:none;cursor:pointer;padding:0;color:#ccc;transition:color .2s}ajf-range .ajf-rating-container .ajf-rating-star.selected{color:gold}ajf-range .ajf-rating-container .ajf-rating-star mat-icon{font-size:32px;height:32px;width:32px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i5$3.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "pipe", type: i8.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
577
584
|
}
|
|
578
585
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfRangeFieldComponent, decorators: [{
|
|
579
586
|
type: Component,
|
|
580
|
-
args: [{ selector: 'ajf-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"control|async as ctrl\">\n <div
|
|
587
|
+
args: [{ selector: 'ajf-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"control|async as ctrl\">\n <div\n *ngIf=\"appearance !== 'rating'; else ratingTemplate\"\n [class.ajf-range-no-value]=\"isEmpty(ctrl.value)\"\n >\n <mat-slider\n discrete\n showTickMarks\n [step]=\"step\"\n [min]=\"start\"\n [max]=\"end\"\n [attr.aria-label]=\"name\"\n [attr.name]=\"name\"\n ><input matSliderThumb [value]=\"value\" [formControl]=\"ctrl\" /></mat-slider>\n <div class=\"ajf-range-label\">\n <label>{{isEmpty(ctrl.value) ? ('No value selected'|transloco) : ctrl.value}}</label>\n </div>\n </div>\n \n <ng-template #ratingTemplate>\n <div class=\"ajf-rating-container\">\n <button type=\"button\"\n *ngFor=\"let i of enumerateStars()\"\n class=\"ajf-rating-star\"\n [class.selected]=\"i <= ctrl.value\"\n (click)=\"ctrl.setValue(i)\"\n [attr.aria-label]=\"'Rate ' + i + ' out of ' + end\"\n [attr.name]=\"name\">\n <mat-icon>star</mat-icon>\n </button>\n <div class=\"ajf-range-label\">\n <label>{{ctrl.value}}</label>\n </div>\n </div>\n </ng-template>\n</ng-container>\n", styles: ["ajf-range{display:inline-block;padding-top:20px}ajf-range .ajf-range-label{display:inline-block;padding:0 10px}ajf-range .ajf-range-no-value{--mdc-slider-handle-color: #9e9e9e;--mdc-slider-focus-handle-color: #9e9e9e;--mdc-slider-hover-handle-color: #9e9e9e;--mdc-slider-active-track-color: #9e9e9e;--mdc-slider-inactive-track-color: #9e9e9e;--mdc-slider-with-tick-marks-active-container-color: #fff;--mdc-slider-with-tick-marks-inactive-container-color: #9e9e9e;--mdc-slider-label-container-color: #9e9e9e;--mat-slider-ripple-color: #9e9e9e;--mat-slider-hover-state-layer-color: rgba(158, 158, 158, .05);--mat-slider-focus-state-layer-color: rgba(158, 158, 158, .2)}ajf-range .ajf-range-no-value .ajf-range-label{color:#9e9e9e}ajf-range .ajf-rating-container{display:flex;align-items:center;gap:8px;padding:8px 0}ajf-range .ajf-rating-container .ajf-rating-star{background:none;border:none;cursor:pointer;padding:0;color:#ccc;transition:color .2s}ajf-range .ajf-rating-container .ajf-rating-star.selected{color:gold}ajf-range .ajf-rating-container .ajf-rating-star mat-icon{font-size:32px;height:32px;width:32px}\n"] }]
|
|
581
588
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
|
|
582
589
|
type: Inject,
|
|
583
590
|
args: [AJF_WARNING_ALERT_SERVICE]
|