@sumaris-net/ngx-components 18.7.1-rc4 → 18.7.2
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/doc/changelog.md +1 -0
- package/esm2022/src/app/shared/dates.mjs +2 -2
- package/esm2022/src/app/shared/material/duration/duration.utils.mjs +5 -22
- package/esm2022/src/app/shared/material/duration/material.duration.mjs +6 -3
- package/esm2022/src/app/shared/material/duration/testing/mat-duration.test.mjs +8 -3
- package/fesm2022/sumaris-net.ngx-components.mjs +20 -31
- package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +3 -3
- package/src/app/shared/material/duration/duration.utils.d.ts +1 -2
- package/src/app/shared/material/duration/material.duration.d.ts +1 -0
- package/src/app/shared/material/duration/testing/mat-duration.test.d.ts +1 -0
- package/src/assets/manifest.json +1 -1
|
@@ -1154,7 +1154,7 @@ class DateUtils {
|
|
|
1154
1154
|
// try with moment
|
|
1155
1155
|
const duration = toDuration(value, unit);
|
|
1156
1156
|
const days = duration.days();
|
|
1157
|
-
const hours = duration.hours().toString().padStart(
|
|
1157
|
+
const hours = duration.hours().toString().padStart(3, '0');
|
|
1158
1158
|
const minutes = duration.minutes().toString().padStart(2, '0');
|
|
1159
1159
|
const seconds = opts?.seconds ? duration.seconds().toString().padStart(2, '0') : null;
|
|
1160
1160
|
return (days > 0 ? days.toString() + (dayUnit + ' ') : '') + hours + ':' + minutes + (seconds ? ':' + seconds : '');
|
|
@@ -1674,7 +1674,7 @@ function splitDegreesToDDArray(value, opts) {
|
|
|
1674
1674
|
value = fixValue(value, opts.longitude);
|
|
1675
1675
|
}
|
|
1676
1676
|
const sign = negative ? '-' : '+';
|
|
1677
|
-
const degreesFields = roundFloat
|
|
1677
|
+
const degreesFields = roundFloat(value, opts.maxDecimals).toString().split('.');
|
|
1678
1678
|
const degrees = parseInt(degreesFields[0]);
|
|
1679
1679
|
if (degreesFields.length > 1) {
|
|
1680
1680
|
const degreesTeens = parseInt(degreesFields[1]) * 10 ** (opts.maxDecimals - degreesFields[1].length);
|
|
@@ -1696,7 +1696,7 @@ function splitDegreesToDDMMArray(value, opts) {
|
|
|
1696
1696
|
value = fixValue(value, opts.longitude);
|
|
1697
1697
|
}
|
|
1698
1698
|
let degrees = (negative ? -1 : 1) * Math.trunc(value);
|
|
1699
|
-
const minutesFields = roundFloat
|
|
1699
|
+
const minutesFields = roundFloat((value - degrees) * 60, opts.maxDecimals)
|
|
1700
1700
|
.toString()
|
|
1701
1701
|
.split('.');
|
|
1702
1702
|
let minutes = parseInt(minutesFields[0]);
|
|
@@ -1737,7 +1737,7 @@ function splitDegreesToDDMMSSArray(value, opts) {
|
|
|
1737
1737
|
}
|
|
1738
1738
|
let degrees = Math.trunc(value);
|
|
1739
1739
|
let minutes = Math.trunc((value - degrees) * 60);
|
|
1740
|
-
const secondFields = roundFloat
|
|
1740
|
+
const secondFields = roundFloat(((value - degrees) * 60 - minutes) * 60, opts.maxDecimals)
|
|
1741
1741
|
.toString()
|
|
1742
1742
|
.split('.');
|
|
1743
1743
|
let seconds = parseInt(secondFields[0]);
|
|
@@ -1859,7 +1859,7 @@ function parseLatitudeOrLongitude(input, pattern, maxDecimals, placeholderChar)
|
|
|
1859
1859
|
return NaN;
|
|
1860
1860
|
}
|
|
1861
1861
|
if (pattern === 'DD') {
|
|
1862
|
-
return roundFloat
|
|
1862
|
+
return roundFloat(degrees, maxDecimals);
|
|
1863
1863
|
}
|
|
1864
1864
|
const minutes = ((pattern === 'DDMMSS' || pattern === 'DDMM') && parts[1] && parseFloat(parts[1].replace(/,/g, '.'))) || 0;
|
|
1865
1865
|
const seconds = (pattern === 'DDMMSS' && parts[2] && parseFloat(parts[2].replace(/,/g, '.'))) || 0;
|
|
@@ -1871,9 +1871,9 @@ function computeDecimalDegrees(degrees, minutes, seconds, sign, maxDecimals) {
|
|
|
1871
1871
|
if (isNil(degrees))
|
|
1872
1872
|
return null;
|
|
1873
1873
|
degrees = (sign || 1) * (degrees + (minutes || 0) / 60 + (seconds || 0) / (60 * 60));
|
|
1874
|
-
return roundFloat
|
|
1874
|
+
return roundFloat(degrees, maxDecimals);
|
|
1875
1875
|
}
|
|
1876
|
-
function roundFloat
|
|
1876
|
+
function roundFloat(input, maxDecimals) {
|
|
1877
1877
|
if (maxDecimals !== undefined && maxDecimals >= 0) {
|
|
1878
1878
|
// Utilisation de toFixed pour gérer les problèmes de précision
|
|
1879
1879
|
const str = input.toFixed(maxDecimals);
|
|
@@ -5617,15 +5617,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5617
5617
|
}]
|
|
5618
5618
|
}] });
|
|
5619
5619
|
|
|
5620
|
-
const DEFAULT_MAX_DECIMALS =
|
|
5621
|
-
|
|
5622
|
-
if (value === undefined || value === null)
|
|
5623
|
-
return null;
|
|
5624
|
-
const hour = Math.floor(value);
|
|
5625
|
-
const minute = Math.round((value - hour) * 60);
|
|
5626
|
-
return [hour.toString().padStart(3, '0'), minute.toString().padStart(2, '0')].join(':');
|
|
5627
|
-
}
|
|
5628
|
-
// 111:11 = 111.18 (with maxDecimals=2)
|
|
5620
|
+
const DEFAULT_MAX_DECIMALS = 7;
|
|
5621
|
+
// 111:11 = 111.11 (with maxDecimals=2)
|
|
5629
5622
|
function parseDuration(input, maxDecimals, placeholderChar) {
|
|
5630
5623
|
let duration = input || '';
|
|
5631
5624
|
// Make to remove placeholder chars
|
|
@@ -5635,19 +5628,9 @@ function parseDuration(input, maxDecimals, placeholderChar) {
|
|
|
5635
5628
|
const durationParts = duration.split(':');
|
|
5636
5629
|
const hour = parseInt(durationParts[0] || '0');
|
|
5637
5630
|
const minute = parseInt(durationParts[1] || '0');
|
|
5631
|
+
const powDecimal = Math.pow(10, maxDecimals);
|
|
5638
5632
|
const value = hour + minute / 60;
|
|
5639
|
-
return
|
|
5640
|
-
}
|
|
5641
|
-
function roundFloat(input, maxDecimals) {
|
|
5642
|
-
if (maxDecimals > 0) {
|
|
5643
|
-
const powDecimal = Math.pow(10, maxDecimals);
|
|
5644
|
-
return Math.trunc(input * powDecimal + 0.5) / powDecimal;
|
|
5645
|
-
}
|
|
5646
|
-
// no decimals: round to integer
|
|
5647
|
-
else if (maxDecimals === 0) {
|
|
5648
|
-
return Math.trunc(input + 0.5);
|
|
5649
|
-
}
|
|
5650
|
-
return input;
|
|
5633
|
+
return Math.trunc(value * powDecimal + 0.5) / powDecimal;
|
|
5651
5634
|
}
|
|
5652
5635
|
|
|
5653
5636
|
const DEFAULT_VALUE_ACCESSOR$5 = {
|
|
@@ -5698,12 +5681,14 @@ class MatDuration {
|
|
|
5698
5681
|
get value() {
|
|
5699
5682
|
return this._value;
|
|
5700
5683
|
}
|
|
5684
|
+
dayUnit;
|
|
5701
5685
|
constructor(platform, dateAdapter, translate, formBuilder, cd, formGroupDir) {
|
|
5702
5686
|
this.dateAdapter = dateAdapter;
|
|
5703
5687
|
this.translate = translate;
|
|
5704
5688
|
this.formBuilder = formBuilder;
|
|
5705
5689
|
this.cd = cd;
|
|
5706
5690
|
this.formGroupDir = formGroupDir;
|
|
5691
|
+
this.dayUnit = translate.instant('COMMON.DAY_UNIT');
|
|
5707
5692
|
}
|
|
5708
5693
|
ngOnInit() {
|
|
5709
5694
|
if (this.maxDecimals) {
|
|
@@ -5774,7 +5759,7 @@ class MatDuration {
|
|
|
5774
5759
|
// DEBUG
|
|
5775
5760
|
//console.debug(`[mat-duration] Formatted hour: ${this._value} to ${formatDuration(this._value)}`);
|
|
5776
5761
|
// Set form value
|
|
5777
|
-
this.textControl.patchValue(
|
|
5762
|
+
this.textControl.patchValue(DateUtils.durationToString(this._value, this.dayUnit));
|
|
5778
5763
|
this.writing = false;
|
|
5779
5764
|
this.markForCheck();
|
|
5780
5765
|
}
|
|
@@ -44754,6 +44739,7 @@ class DurationTestPage {
|
|
|
44754
44739
|
enable: [null, Validators.required],
|
|
44755
44740
|
disable: [null, Validators.required],
|
|
44756
44741
|
readonly: [null],
|
|
44742
|
+
duration: [null],
|
|
44757
44743
|
});
|
|
44758
44744
|
const disableControl = this.form.get('disable');
|
|
44759
44745
|
disableControl.disable();
|
|
@@ -44775,6 +44761,7 @@ class DurationTestPage {
|
|
|
44775
44761
|
enable: 1.5,
|
|
44776
44762
|
disable: 3.25,
|
|
44777
44763
|
readonly: 5,
|
|
44764
|
+
duration: 0.38,
|
|
44778
44765
|
};
|
|
44779
44766
|
this.form.setValue(data);
|
|
44780
44767
|
this.log('[test-page] Data loaded: ' + JSON.stringify(data));
|
|
@@ -44801,12 +44788,14 @@ class DurationTestPage {
|
|
|
44801
44788
|
console.debug(message);
|
|
44802
44789
|
}
|
|
44803
44790
|
stringify = JSON.stringify;
|
|
44791
|
+
/* -- protected methods -- */
|
|
44792
|
+
Number = Number;
|
|
44804
44793
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DurationTestPage, deps: [{ token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
44805
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DurationTestPage, selector: "app-duration-test", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Duration field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <!-- Tab nav - desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n @if (mode === 'desktop') {\n <ion-grid>\n <!-- Desktop mode -->\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n {{ stringify(form.controls.empty.value) }}\n </pre>\n <br />\n <pre>\n formControl.valid? {{ form.controls.empty?.valid }}\n textControl.valid? {{ desktopEmptyField.textControl?.valid }}\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field formControlName=\"empty\" #desktopEmptyField placeholder=\"Duration\" [clearable]=\"true\">\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.enable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field formControlName=\"enable\" placeholder=\"Duration\" [required]=\"true\" [clearable]=\"true\">\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.disable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field formControlName=\"disable\" placeholder=\"Duration\" [required]=\"true\">\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly toggle</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox\n (change)=\"desktopReadonlyField.readonly = $event.checked\"\n [checked]=\"desktopReadonlyField.readonly\"\n ></mat-checkbox>\n <mat-duration-field\n #desktopReadonlyField\n formControlName=\"readonly\"\n placeholder=\"Duration\"\n [readonly]=\"true\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDuration, selector: "mat-duration-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "maxDecimals", "placeholderChar", "tabindex", "clearable"] }] });
|
|
44794
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DurationTestPage, selector: "app-duration-test", ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Duration field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <!-- Tab nav - desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n @if (mode === 'desktop') {\n <ion-grid>\n <!-- Desktop mode -->\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n {{ stringify(form.controls.empty.value) }}\n </pre>\n <br />\n <pre>\n formControl.valid? {{ form.controls.empty?.valid }}\n textControl.valid? {{ desktopEmptyField.textControl?.valid }}\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field formControlName=\"empty\" #desktopEmptyField placeholder=\"Duration\" [clearable]=\"true\">\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.enable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field formControlName=\"enable\" placeholder=\"Duration\" [required]=\"true\" [clearable]=\"true\">\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.disable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field formControlName=\"disable\" placeholder=\"Duration\" [required]=\"true\">\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly toggle</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox\n (change)=\"desktopReadonlyField.readonly = $event.checked\"\n [checked]=\"desktopReadonlyField.readonly\"\n ></mat-checkbox>\n <mat-duration-field\n #desktopReadonlyField\n formControlName=\"readonly\"\n placeholder=\"Duration\"\n [readonly]=\"true\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Duration to hours format</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>Value in sexagesimal mode: {{ Number(stringify(form.controls.duration.value)) | duration }}</pre>\n <pre>Value set: {{ stringify(form.controls.duration.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field\n #duration\n formControlName=\"duration\"\n placeholder=\"Duration\"\n >\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDuration, selector: "mat-duration-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "maxDecimals", "placeholderChar", "tabindex", "clearable"] }, { kind: "pipe", type: DurationPipe, name: "duration" }] });
|
|
44806
44795
|
}
|
|
44807
44796
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DurationTestPage, decorators: [{
|
|
44808
44797
|
type: Component,
|
|
44809
|
-
args: [{ selector: 'app-duration-test', template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Duration field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <!-- Tab nav - desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n @if (mode === 'desktop') {\n <ion-grid>\n <!-- Desktop mode -->\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n {{ stringify(form.controls.empty.value) }}\n </pre>\n <br />\n <pre>\n formControl.valid? {{ form.controls.empty?.valid }}\n textControl.valid? {{ desktopEmptyField.textControl?.valid }}\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field formControlName=\"empty\" #desktopEmptyField placeholder=\"Duration\" [clearable]=\"true\">\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.enable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field formControlName=\"enable\" placeholder=\"Duration\" [required]=\"true\" [clearable]=\"true\">\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.disable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field formControlName=\"disable\" placeholder=\"Duration\" [required]=\"true\">\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly toggle</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox\n (change)=\"desktopReadonlyField.readonly = $event.checked\"\n [checked]=\"desktopReadonlyField.readonly\"\n ></mat-checkbox>\n <mat-duration-field\n #desktopReadonlyField\n formControlName=\"readonly\"\n placeholder=\"Duration\"\n [readonly]=\"true\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n </form>\n</ion-content>\n" }]
|
|
44798
|
+
args: [{ selector: 'app-duration-test', template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Duration field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <!-- Tab nav - desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n @if (mode === 'desktop') {\n <ion-grid>\n <!-- Desktop mode -->\n <ion-row>\n <ion-col>\n <ion-text><h4>Desktop mode</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <!-- Empty value -->\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n {{ stringify(form.controls.empty.value) }}\n </pre>\n <br />\n <pre>\n formControl.valid? {{ form.controls.empty?.valid }}\n textControl.valid? {{ desktopEmptyField.textControl?.valid }}\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field formControlName=\"empty\" #desktopEmptyField placeholder=\"Duration\" [clearable]=\"true\">\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Enable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">With value</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.enable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field formControlName=\"enable\" placeholder=\"Duration\" [required]=\"true\" [clearable]=\"true\">\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Disable -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.disable.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field formControlName=\"disable\" placeholder=\"Duration\" [required]=\"true\">\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <!-- Readonly -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly toggle</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-checkbox\n (change)=\"desktopReadonlyField.readonly = $event.checked\"\n [checked]=\"desktopReadonlyField.readonly\"\n ></mat-checkbox>\n <mat-duration-field\n #desktopReadonlyField\n formControlName=\"readonly\"\n placeholder=\"Duration\"\n [readonly]=\"true\"\n [clearable]=\"true\"\n >\n <ion-icon matPrefix name=\"hourglass\"></ion-icon>\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Duration to hours format</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>Value in sexagesimal mode: {{ Number(stringify(form.controls.duration.value)) | duration }}</pre>\n <pre>Value set: {{ stringify(form.controls.duration.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-duration-field\n #duration\n formControlName=\"duration\"\n placeholder=\"Duration\"\n >\n </mat-duration-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n </form>\n</ion-content>\n" }]
|
|
44810
44799
|
}], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });
|
|
44811
44800
|
|
|
44812
44801
|
class MatCommonTestPage {
|