@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
|
@@ -28,11 +28,19 @@ import * as i2 from "@angular/common";
|
|
|
28
28
|
import * as i3 from "@angular/material/icon";
|
|
29
29
|
import * as i4 from "@angular/forms";
|
|
30
30
|
import * as i5 from "@angular/material/slider";
|
|
31
|
-
import * as i6 from "
|
|
31
|
+
import * as i6 from "@ngneat/transloco";
|
|
32
|
+
import * as i7 from "./warning-alert-service";
|
|
32
33
|
export class AjfRangeFieldComponent extends AjfRange {
|
|
33
34
|
constructor(cdr, service, was) {
|
|
34
35
|
super(cdr, service, was);
|
|
35
36
|
}
|
|
37
|
+
/**
|
|
38
|
+
* True when no value has been selected yet, so that the slider is not
|
|
39
|
+
* rendered as if the minimum value had been picked.
|
|
40
|
+
*/
|
|
41
|
+
isEmpty(value) {
|
|
42
|
+
return value === null || value === undefined;
|
|
43
|
+
}
|
|
36
44
|
enumerateStars() {
|
|
37
45
|
const nums = [];
|
|
38
46
|
for (let i = 1; i <= (this.end || 5); i++) {
|
|
@@ -41,13 +49,13 @@ export class AjfRangeFieldComponent extends AjfRange {
|
|
|
41
49
|
return nums;
|
|
42
50
|
}
|
|
43
51
|
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 }); }
|
|
44
|
-
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
|
|
52
|
+
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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i5.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "pipe", type: i6.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
45
53
|
}
|
|
46
54
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfRangeFieldComponent, decorators: [{
|
|
47
55
|
type: Component,
|
|
48
|
-
args: [{ selector: 'ajf-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"control|async as ctrl\">\n <div
|
|
49
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type:
|
|
56
|
+
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"] }]
|
|
57
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: i7.AjfWarningAlertService, decorators: [{
|
|
50
58
|
type: Inject,
|
|
51
59
|
args: [AJF_WARNING_ALERT_SERVICE]
|
|
52
60
|
}] }] });
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
61
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFuZ2UtZmllbGQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXRlcmlhbC9mb3Jtcy9zcmMvcmFuZ2UtZmllbGQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXRlcmlhbC9mb3Jtcy9zcmMvcmFuZ2UtZmllbGQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvQkc7QUFFSCxPQUFPLEVBQUMseUJBQXlCLEVBQXlCLE1BQU0saUJBQWlCLENBQUM7QUFDbEYsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3pDLE9BQU8sRUFDTCx1QkFBdUIsRUFFdkIsU0FBUyxFQUNULE1BQU0sRUFDTixpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7OztBQVd2QixNQUFNLE9BQU8sc0JBQXVCLFNBQVEsUUFBUTtJQUNsRCxZQUNFLEdBQXNCLEVBQ3RCLE9BQStCLEVBQ0ksR0FBMkI7UUFFOUQsS0FBSyxDQUFDLEdBQUcsRUFBRSxPQUFPLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVEOzs7T0FHRztJQUNILE9BQU8sQ0FBQyxLQUFjO1FBQ3BCLE9BQU8sS0FBSyxLQUFLLElBQUksSUFBSSxLQUFLLEtBQUssU0FBUyxDQUFDO0lBQy9DLENBQUM7SUFFRCxjQUFjO1FBQ1osTUFBTSxJQUFJLEdBQWEsRUFBRSxDQUFDO1FBQzFCLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQztZQUMxQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ2YsQ0FBQztRQUNELE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQzsrR0F2QlUsc0JBQXNCLHlGQUl2Qix5QkFBeUI7bUdBSnhCLHNCQUFzQix3RUN6Q25DLDBuQ0FvQ0E7OzRGREthLHNCQUFzQjtrQkFQbEMsU0FBUzsrQkFDRSxXQUFXLG1CQUdKLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7OzBCQU1sQyxNQUFNOzJCQUFDLHlCQUF5QiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCAoQykgR251Y29vcCBzb2MuIGNvb3AuXG4gKlxuICogVGhpcyBmaWxlIGlzIHBhcnQgb2YgdGhlIEFkdmFuY2VkIEpTT04gZm9ybXMgKGFqZikuXG4gKlxuICogQWR2YW5jZWQgSlNPTiBmb3JtcyAoYWpmKSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3JcbiAqIG1vZGlmeSBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBBZmZlcm8gR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhc1xuICogcHVibGlzaGVkIGJ5IHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsXG4gKiBvciAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIEFkdmFuY2VkIEpTT04gZm9ybXMgKGFqZikgaXMgZGlzdHJpYnV0ZWQgaW4gdGhlIGhvcGUgdGhhdCBpdCB3aWxsIGJlIHVzZWZ1bCxcbiAqIGJ1dCBXSVRIT1VUIEFOWSBXQVJSQU5UWTsgd2l0aG91dCBldmVuIHRoZSBpbXBsaWVkIHdhcnJhbnR5IG9mXG4gKiBNRVJDSEFOVEFCSUxJVFkgb3IgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UuIFNlZSB0aGUgR05VIEFmZmVyb1xuICogR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBBZmZlcm8gR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCBBZHZhbmNlZCBKU09OIGZvcm1zIChhamYpLlxuICogSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuaW1wb3J0IHtBSkZfV0FSTklOR19BTEVSVF9TRVJWSUNFLCBBamZGb3JtUmVuZGVyZXJTZXJ2aWNlfSBmcm9tICdAYWpmL2NvcmUvZm9ybXMnO1xuaW1wb3J0IHtBamZSYW5nZX0gZnJvbSAnQGFqZi9jb3JlL3JhbmdlJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBJbmplY3QsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHtBamZXYXJuaW5nQWxlcnRTZXJ2aWNlfSBmcm9tICcuL3dhcm5pbmctYWxlcnQtc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FqZi1yYW5nZScsXG4gIHRlbXBsYXRlVXJsOiAncmFuZ2UtZmllbGQuaHRtbCcsXG4gIHN0eWxlVXJsczogWydyYW5nZS1maWVsZC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBBamZSYW5nZUZpZWxkQ29tcG9uZW50IGV4dGVuZHMgQWpmUmFuZ2Uge1xuICBjb25zdHJ1Y3RvcihcbiAgICBjZHI6IENoYW5nZURldGVjdG9yUmVmLFxuICAgIHNlcnZpY2U6IEFqZkZvcm1SZW5kZXJlclNlcnZpY2UsXG4gICAgQEluamVjdChBSkZfV0FSTklOR19BTEVSVF9TRVJWSUNFKSB3YXM6IEFqZldhcm5pbmdBbGVydFNlcnZpY2UsXG4gICkge1xuICAgIHN1cGVyKGNkciwgc2VydmljZSwgd2FzKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBUcnVlIHdoZW4gbm8gdmFsdWUgaGFzIGJlZW4gc2VsZWN0ZWQgeWV0LCBzbyB0aGF0IHRoZSBzbGlkZXIgaXMgbm90XG4gICAqIHJlbmRlcmVkIGFzIGlmIHRoZSBtaW5pbXVtIHZhbHVlIGhhZCBiZWVuIHBpY2tlZC5cbiAgICovXG4gIGlzRW1wdHkodmFsdWU6IHVua25vd24pOiBib29sZWFuIHtcbiAgICByZXR1cm4gdmFsdWUgPT09IG51bGwgfHwgdmFsdWUgPT09IHVuZGVmaW5lZDtcbiAgfVxuXG4gIGVudW1lcmF0ZVN0YXJzKCk6IG51bWJlcltdIHtcbiAgICBjb25zdCBudW1zOiBudW1iZXJbXSA9IFtdO1xuICAgIGZvciAobGV0IGkgPSAxOyBpIDw9ICh0aGlzLmVuZCB8fCA1KTsgaSsrKSB7XG4gICAgICBudW1zLnB1c2goaSk7XG4gICAgfVxuICAgIHJldHVybiBudW1zO1xuICB9XG59XG4iLCI8bmctY29udGFpbmVyICpuZ0lmPVwiY29udHJvbHxhc3luYyBhcyBjdHJsXCI+XG4gIDxkaXZcbiAgICAqbmdJZj1cImFwcGVhcmFuY2UgIT09ICdyYXRpbmcnOyBlbHNlIHJhdGluZ1RlbXBsYXRlXCJcbiAgICBbY2xhc3MuYWpmLXJhbmdlLW5vLXZhbHVlXT1cImlzRW1wdHkoY3RybC52YWx1ZSlcIlxuICA+XG4gICAgPG1hdC1zbGlkZXJcbiAgICAgIGRpc2NyZXRlXG4gICAgICBzaG93VGlja01hcmtzXG4gICAgICBbc3RlcF09XCJzdGVwXCJcbiAgICAgIFttaW5dPVwic3RhcnRcIlxuICAgICAgW21heF09XCJlbmRcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJuYW1lXCJcbiAgICAgIFthdHRyLm5hbWVdPVwibmFtZVwiXG4gICAgPjxpbnB1dCBtYXRTbGlkZXJUaHVtYiBbdmFsdWVdPVwidmFsdWVcIiBbZm9ybUNvbnRyb2xdPVwiY3RybFwiIC8+PC9tYXQtc2xpZGVyPlxuICAgIDxkaXYgY2xhc3M9XCJhamYtcmFuZ2UtbGFiZWxcIj5cbiAgICAgIDxsYWJlbD57e2lzRW1wdHkoY3RybC52YWx1ZSkgPyAoJ05vIHZhbHVlIHNlbGVjdGVkJ3x0cmFuc2xvY28pIDogY3RybC52YWx1ZX19PC9sYWJlbD5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIFxuICA8bmctdGVtcGxhdGUgI3JhdGluZ1RlbXBsYXRlPlxuICAgIDxkaXYgY2xhc3M9XCJhamYtcmF0aW5nLWNvbnRhaW5lclwiPlxuICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICpuZ0Zvcj1cImxldCBpIG9mIGVudW1lcmF0ZVN0YXJzKClcIlxuICAgICAgY2xhc3M9XCJhamYtcmF0aW5nLXN0YXJcIlxuICAgICAgW2NsYXNzLnNlbGVjdGVkXT1cImkgPD0gY3RybC52YWx1ZVwiXG4gICAgICAoY2xpY2spPVwiY3RybC5zZXRWYWx1ZShpKVwiXG4gICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cIidSYXRlICcgKyBpICsgJyBvdXQgb2YgJyArIGVuZFwiXG4gICAgICBbYXR0ci5uYW1lXT1cIm5hbWVcIj5cbiAgICAgICAgPG1hdC1pY29uPnN0YXI8L21hdC1pY29uPlxuICAgICAgPC9idXR0b24+XG4gICAgICA8ZGl2IGNsYXNzPVwiYWpmLXJhbmdlLWxhYmVsXCI+XG4gICAgICAgIDxsYWJlbD57e2N0cmwudmFsdWV9fTwvbGFiZWw+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9uZy10ZW1wbGF0ZT5cbjwvbmctY29udGFpbmVyPlxuIl19
|