@webilix/ngx-form-m3 0.0.47 → 0.0.48
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.
|
@@ -1982,6 +1982,97 @@ class InputTextareaMethods extends InputMethods {
|
|
|
1982
1982
|
}
|
|
1983
1983
|
}
|
|
1984
1984
|
|
|
1985
|
+
class InputTimeComponent {
|
|
1986
|
+
formControl = inject(INPUT_CONTROL);
|
|
1987
|
+
input = inject(INPUT_TYPE);
|
|
1988
|
+
config = inject(INPUT_CONFIG);
|
|
1989
|
+
values;
|
|
1990
|
+
isButtonDisabled;
|
|
1991
|
+
hour = '--';
|
|
1992
|
+
hours = [...Array(24).keys()].map((hour) => hour.toString().padStart(2, '0'));
|
|
1993
|
+
minute = '--';
|
|
1994
|
+
minutes = [...Array(60).keys()].map((minute) => minute.toString().padStart(2, '0'));
|
|
1995
|
+
second = '--';
|
|
1996
|
+
seconds = [...Array(60).keys()].map((minute) => minute.toString().padStart(2, '0'));
|
|
1997
|
+
ngOnInit() {
|
|
1998
|
+
if (!this.input.value)
|
|
1999
|
+
return;
|
|
2000
|
+
const value = this.input.value.split(':');
|
|
2001
|
+
this.hour = value[0];
|
|
2002
|
+
this.minute = value[1];
|
|
2003
|
+
this.second = this.input.showSeconds ? value[2] : '00';
|
|
2004
|
+
}
|
|
2005
|
+
setValue() {
|
|
2006
|
+
const value = this.hour === '--' ? null : [this.hour, this.minute, this.second].join(':');
|
|
2007
|
+
this.formControl.setValue(value);
|
|
2008
|
+
this.formControl.markAsTouched();
|
|
2009
|
+
}
|
|
2010
|
+
resetTime() {
|
|
2011
|
+
this.hour = '--';
|
|
2012
|
+
this.minute = '--';
|
|
2013
|
+
this.second = '--';
|
|
2014
|
+
this.setValue();
|
|
2015
|
+
}
|
|
2016
|
+
setNow() {
|
|
2017
|
+
const now = new Date();
|
|
2018
|
+
this.hour = now.getHours().toString().padStart(2, '0');
|
|
2019
|
+
this.minute = now.getMinutes().toString().padStart(2, '0');
|
|
2020
|
+
this.second = this.input.showSeconds ? now.getSeconds().toString().padStart(2, '0') : '00';
|
|
2021
|
+
this.setValue();
|
|
2022
|
+
}
|
|
2023
|
+
setHour(hour) {
|
|
2024
|
+
this.hour = hour;
|
|
2025
|
+
this.minute = this.minute === '--' ? '00' : this.minute;
|
|
2026
|
+
this.second = this.input.showSeconds ? (this.second === '--' ? '00' : this.minute) : '00';
|
|
2027
|
+
this.setValue();
|
|
2028
|
+
}
|
|
2029
|
+
setMinute(minute) {
|
|
2030
|
+
if (this.hour === '--')
|
|
2031
|
+
return;
|
|
2032
|
+
this.minute = minute;
|
|
2033
|
+
this.setValue();
|
|
2034
|
+
}
|
|
2035
|
+
setSecond(second) {
|
|
2036
|
+
if (this.hour === '--' || !this.input.showSeconds)
|
|
2037
|
+
return;
|
|
2038
|
+
this.second = second;
|
|
2039
|
+
this.setValue();
|
|
2040
|
+
}
|
|
2041
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2042
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: InputTimeComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-time" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n <mat-label>{{ input.title || '\u0633\u0627\u0639\u062A' }}</mat-label>\n @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n <!-- SUFFIX -->\n <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon (click)=\"formControl.value ? resetTime() : setNow(); formControl.markAsTouched()\">\n {{ formControl.value ? 'close' : 'access_time' }}\n </mat-icon>\n </span>\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <div class=\"ngx-helper-form-m3-time-input\">\n <button\n mat-button\n type=\"button\"\n [matMenuTriggerFor]=\"hourMenu\"\n [disabled]=\"formControl.disabled\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n >\n {{ hour }}\n </button>\n <mat-menu #hourMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-hour\">\n @for (h of hours; track $index) {\n <button mat-menu-item (click)=\"setHour(h)\" [disabled]=\"hour === h || formControl.disabled\">\n <span class=\"hour\">{{ h }}</span>\n </button>\n }\n </mat-menu>\n\n <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n <button\n mat-button\n type=\"button\"\n [matMenuTriggerFor]=\"minuteMenu\"\n [disabled]=\"hour === '--' || formControl.disabled\"\n [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n >\n {{ minute }}\n </button>\n <mat-menu #minuteMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-minute\">\n @for (m of minutes; track $index) {\n <button mat-menu-item (click)=\"setMinute(m)\" [disabled]=\"minute === m || formControl.disabled\">\n <span class=\"minute\">{{ m }}</span>\n </button>\n }\n </mat-menu>\n\n <!-- SECOND -->\n @if (input.showSeconds) {\n <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n <button\n mat-button\n type=\"button\"\n [matMenuTriggerFor]=\"secondMenu\"\n [disabled]=\"hour === '--' || formControl.disabled\"\n [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n >\n {{ second }}\n </button>\n <mat-menu #secondMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-second\">\n @for (s of seconds; track $index) {\n <button mat-menu-item (click)=\"setSecond(s)\" [disabled]=\"second === s || formControl.disabled\">\n <span class=\"second\">{{ s }}</span>\n </button>\n }\n </mat-menu>\n }\n </div>\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
|
|
2043
|
+
}
|
|
2044
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputTimeComponent, decorators: [{
|
|
2045
|
+
type: Component,
|
|
2046
|
+
args: [{ host: { selector: 'input-time' }, imports: [
|
|
2047
|
+
ReactiveFormsModule,
|
|
2048
|
+
MatButton,
|
|
2049
|
+
MatFormField,
|
|
2050
|
+
MatIcon,
|
|
2051
|
+
MatIconButton,
|
|
2052
|
+
MatInputModule,
|
|
2053
|
+
MatMenuModule,
|
|
2054
|
+
MatSelectModule,
|
|
2055
|
+
InputErrorPipe,
|
|
2056
|
+
MultiLinePipe,
|
|
2057
|
+
], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n <mat-label>{{ input.title || '\u0633\u0627\u0639\u062A' }}</mat-label>\n @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n <!-- SUFFIX -->\n <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon (click)=\"formControl.value ? resetTime() : setNow(); formControl.markAsTouched()\">\n {{ formControl.value ? 'close' : 'access_time' }}\n </mat-icon>\n </span>\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <div class=\"ngx-helper-form-m3-time-input\">\n <button\n mat-button\n type=\"button\"\n [matMenuTriggerFor]=\"hourMenu\"\n [disabled]=\"formControl.disabled\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n >\n {{ hour }}\n </button>\n <mat-menu #hourMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-hour\">\n @for (h of hours; track $index) {\n <button mat-menu-item (click)=\"setHour(h)\" [disabled]=\"hour === h || formControl.disabled\">\n <span class=\"hour\">{{ h }}</span>\n </button>\n }\n </mat-menu>\n\n <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n <button\n mat-button\n type=\"button\"\n [matMenuTriggerFor]=\"minuteMenu\"\n [disabled]=\"hour === '--' || formControl.disabled\"\n [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n >\n {{ minute }}\n </button>\n <mat-menu #minuteMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-minute\">\n @for (m of minutes; track $index) {\n <button mat-menu-item (click)=\"setMinute(m)\" [disabled]=\"minute === m || formControl.disabled\">\n <span class=\"minute\">{{ m }}</span>\n </button>\n }\n </mat-menu>\n\n <!-- SECOND -->\n @if (input.showSeconds) {\n <div class=\"colon\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">:</div>\n\n <button\n mat-button\n type=\"button\"\n [matMenuTriggerFor]=\"secondMenu\"\n [disabled]=\"hour === '--' || formControl.disabled\"\n [class.ngx-form-m3-disabled-input]=\"hour === '--' || formControl.disabled\"\n >\n {{ second }}\n </button>\n <mat-menu #secondMenu=\"matMenu\" class=\"ngx-helper-form-m3-time-input-second\">\n @for (s of seconds; track $index) {\n <button mat-menu-item (click)=\"setSecond(s)\" [disabled]=\"second === s || formControl.disabled\">\n <span class=\"second\">{{ s }}</span>\n </button>\n }\n </mat-menu>\n }\n </div>\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n" }]
|
|
2058
|
+
}], propDecorators: { values: [{
|
|
2059
|
+
type: Input,
|
|
2060
|
+
args: [{ required: true }]
|
|
2061
|
+
}], isButtonDisabled: [{
|
|
2062
|
+
type: Input,
|
|
2063
|
+
args: [{ required: true }]
|
|
2064
|
+
}] } });
|
|
2065
|
+
|
|
2066
|
+
class InputTimeMethods extends InputMethods {
|
|
2067
|
+
control(input, validators) {
|
|
2068
|
+
const value = input.value && Helper.IS.STRING.time(input.value) ? input.value : null;
|
|
2069
|
+
return new FormControl(value, validators);
|
|
2070
|
+
}
|
|
2071
|
+
value(value, input) {
|
|
2072
|
+
return Helper.IS.string(value) && Helper.IS.STRING.time(value) ? value : null;
|
|
2073
|
+
}
|
|
2074
|
+
}
|
|
2075
|
+
|
|
1985
2076
|
class InputUrlComponent {
|
|
1986
2077
|
formControl = inject(INPUT_CONTROL);
|
|
1987
2078
|
input = inject(INPUT_TYPE);
|
|
@@ -2140,6 +2231,7 @@ const InputInfo = {
|
|
|
2140
2231
|
TAG: { title: 'تگ', methods: new InputTagMethods(), component: InputTagComponent },
|
|
2141
2232
|
TEXT: { title: 'متن یک خطی', methods: new InputTextMethods(), component: InputTextComponent },
|
|
2142
2233
|
TEXTAREA: { title: 'متن چند خطی', methods: new InputTextareaMethods(), component: InputTextareaComponent },
|
|
2234
|
+
TIME: { title: 'ساعت', methods: new InputTimeMethods(), component: InputTimeComponent },
|
|
2143
2235
|
URL: { title: 'آدرس سایت', methods: new InputUrlMethods(), component: InputUrlComponent },
|
|
2144
2236
|
USERNAME: { title: 'نام کاربری', methods: new InputUsernameMethods(), component: InputUsernameComponent },
|
|
2145
2237
|
};
|