ngnz-time-input
Version:
Material design time input for Angular 8
696 lines (688 loc) • 34 kB
JavaScript
import { EventEmitter, ElementRef, ChangeDetectorRef, Optional, Self, HostBinding, Input, Output, HostListener, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { filter, takeUntil, debounceTime } from 'rxjs/operators';
import { __values, __decorate, __param } from 'tslib';
import { FocusMonitor } from '@angular/cdk/a11y';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { FormControl, FormGroup, NgControl, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldControl, MatCommonModule, MatIconModule, MatTooltipModule } from '@angular/material';
import * as moment from 'moment';
import { isMoment } from 'moment';
import { Subject } from 'rxjs/internal/Subject';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
var TimeInputMode;
(function (TimeInputMode) {
TimeInputMode[TimeInputMode["Circular"] = 0] = "Circular";
TimeInputMode[TimeInputMode["CircularForwarding"] = 1] = "CircularForwarding";
TimeInputMode[TimeInputMode["Limit"] = 2] = "Limit";
})(TimeInputMode || (TimeInputMode = {}));
var TimeValue = /** @class */ (function () {
function TimeValue(inputMode) {
var _this = this;
if (inputMode === void 0) { inputMode = TimeInputMode.CircularForwarding; }
this.inputMode = inputMode;
this.TIME_LIMITS = {
zero: 0,
hours: 23,
minutes: 59,
seconds: 59,
};
this.exeedHours = new EventEmitter();
this.exeedMinutes = new EventEmitter();
this.exeedSeconds = new EventEmitter();
this.hoursChanged = new EventEmitter();
this.minutesChanged = new EventEmitter();
this.secondsChanged = new EventEmitter();
this.exeedSeconds
.pipe(filter(function (val) { return val !== 0; }))
.subscribe(function (data) { return _this.setMinutes(_this.minutes + data); });
this.exeedMinutes
.pipe(filter(function (val) { return val !== 0; }))
.subscribe(function (data) { return _this.setHours(_this.hours + data); });
}
Object.defineProperty(TimeValue.prototype, "hours", {
get: function () {
return this._hours;
},
enumerable: true,
configurable: true
});
TimeValue.prototype.setHours = function (value, emitChange) {
if (emitChange === void 0) { emitChange = true; }
if (this._hours !== value) {
var partVal = this._setPart(value, this.TIME_LIMITS.hours);
this._hours = partVal.value;
if (this.inputMode === TimeInputMode.CircularForwarding) {
this.exeedHours.emit(partVal.exeedValue);
}
if (emitChange) {
this.hoursChanged.emit(this._hours);
}
}
return this;
};
Object.defineProperty(TimeValue.prototype, "minutes", {
get: function () {
return this._minutes;
},
enumerable: true,
configurable: true
});
TimeValue.prototype.setMinutes = function (value, emitChange) {
if (emitChange === void 0) { emitChange = true; }
if (this._minutes !== value) {
var partVal = this._setPart(value, this.TIME_LIMITS.minutes);
this._minutes = partVal.value;
if (this.inputMode === TimeInputMode.CircularForwarding) {
this.exeedMinutes.emit(partVal.exeedValue);
}
if (emitChange) {
this.minutesChanged.emit(this._minutes);
}
}
return this;
};
Object.defineProperty(TimeValue.prototype, "seconds", {
get: function () {
return this._seconds;
},
enumerable: true,
configurable: true
});
TimeValue.prototype.setSeconds = function (value, emitChange) {
if (emitChange === void 0) { emitChange = true; }
if (this._seconds !== value) {
var partVal = this._setPart(value, this.TIME_LIMITS.seconds);
this._seconds = partVal.value;
if (this.inputMode === TimeInputMode.CircularForwarding) {
this.exeedSeconds.emit(partVal.exeedValue);
}
if (emitChange) {
this.secondsChanged.emit(this._seconds);
}
}
return this;
};
Object.defineProperty(TimeValue.prototype, "value", {
get: function () {
return {
hours: this.hours,
minutes: this.minutes,
seconds: this.seconds,
};
},
enumerable: true,
configurable: true
});
TimeValue.prototype.setValue = function (hours, minutes, seconds) {
this.setHours(hours).setMinutes(minutes).setSeconds(seconds);
};
TimeValue.prototype._setPart = function (value, maxLimit) {
var partVal = 0;
var exeedVal = 0;
var minLimit = this.TIME_LIMITS.zero;
var divider = maxLimit + 1;
switch (this.inputMode) {
case TimeInputMode.Limit:
if (value > maxLimit) {
partVal = maxLimit;
}
else if (value < minLimit) {
partVal = minLimit;
}
else {
partVal = value;
}
exeedVal = 0;
break;
case TimeInputMode.Circular:
if (value > maxLimit) {
partVal = minLimit;
}
else if (value < minLimit) {
partVal = maxLimit;
}
else {
partVal = value;
}
exeedVal = 0;
break;
case TimeInputMode.CircularForwarding:
if (value > maxLimit) {
partVal = value % divider;
exeedVal = Math.round(value / divider);
}
else if (value < minLimit) {
partVal = divider + (value % divider);
exeedVal = Math.round(value / divider) - 1;
}
else {
partVal = value;
exeedVal = 0;
}
break;
}
return {
value: partVal,
exeedValue: exeedVal,
};
};
return TimeValue;
}());
var CssClassCreator = /** @class */ (function () {
function CssClassCreator(initVal) {
this._classes = {};
if (!!initVal) {
this.appendCssClasses(initVal);
}
}
CssClassCreator.prototype.appendCssClasses = function (classes, trigger) {
if (trigger === void 0) { trigger = true; }
if (!!classes) {
if (typeof classes === 'string') {
this._createFromString(classes, trigger);
}
else if (Array.isArray(classes)) {
this._createFromArray(classes, trigger);
}
else if (typeof classes === 'object') {
Object.assign(this._classes, classes);
}
}
return this;
};
CssClassCreator.prototype.generate = function () {
var out = {};
for (var item in this._classes) {
if (this._classes.hasOwnProperty(item)) {
out[item] =
typeof this._classes[item] === 'function'
? this._classes[item].call(this)
: !!this._classes[item];
}
}
return out;
};
CssClassCreator.prototype._createFromArray = function (classes, trigger) {
var e_1, _a;
try {
for (var classes_1 = __values(classes), classes_1_1 = classes_1.next(); !classes_1_1.done; classes_1_1 = classes_1.next()) {
var cls = classes_1_1.value;
this._classes['' + cls] = true;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (classes_1_1 && !classes_1_1.done && (_a = classes_1.return)) _a.call(classes_1);
}
finally { if (e_1) throw e_1.error; }
}
};
CssClassCreator.prototype._createFromString = function (classes, trigger) {
var splitted = classes.split(/[\s,;]+/).filter(function (item) { return !!item; });
this._createFromArray(splitted, trigger);
};
return CssClassCreator;
}());
/**
* Time Input Component.
* The component as a part of UI allows to change time part of Moment data type.
* It looks and uses like a input field.
* It is possible to use mouse wheel and/or control buttons to change time.
* Can be used with [value] attribute or FormControl inside angular reactive form
* @author Aleksey Nazarenko
* @version 0.0.1
*/
var NgnzTimeInputInlineComponent = /** @class */ (function () {
function NgnzTimeInputInlineComponent(_fm, _elRef, _chDetector, ngControl) {
var _this = this;
this._fm = _fm;
this._elRef = _elRef;
this._chDetector = _chDetector;
this.ngControl = ngControl;
this.BUTTON_HOST_ATTRIBUTES = [
'mat-button',
'mat-flat-button',
'mat-icon-button',
'mat-raised-button',
'mat-stroked-button',
'mat-mini-fab',
'mat-fab',
];
this.stateChanges = new Subject();
this._hoursControl = new FormControl(null);
this._minutesControl = new FormControl(null);
this._secondsControl = new FormControl(null);
this.parts = new FormGroup({
hours: this._hoursControl,
minutes: this._minutesControl,
seconds: this._secondsControl,
});
this._required = false;
this._disabled = false;
this._unsubscribe = new Subject();
this._debounceTime = 300;
this._focused = false;
this.controlType = 'ngnz-time-input-inline';
this.id = [
this.controlType,
++NgnzTimeInputInlineComponent_1.nextId,
].join('-');
this.describedBy = '';
this.inputClassesConf = {};
this.buttonDecreaseClassesConf = {};
this.buttonIncreaseClassesConf = {};
// enum defining of time change mode: Limit, Circular, CircularForwarding
this.inputMode = TimeInputMode.CircularForwarding;
// do not show control buttons; normally buttons are shown on focus
this.noButtons = false;
// always show control buttons; normally buttons are shown on focus
this.showButtons = false;
// do not show seconds block if it is not necessary
this.noSeconds = false;
// mat icon name for descrease controll button
this.decreaseBtnIconName = 'remove';
// mat icon name for increase control button
this.increaseBtnIconName = 'add';
this.timeChange = new EventEmitter();
this._timeChange = new EventEmitter();
this._onChange = function (_) { };
this._onTouched = function (_) { };
this._timeValue = new TimeValue();
if (this.ngControl !== null) {
this.ngControl.valueAccessor = this;
}
this._fm
.monitor(this._elRef.nativeElement, true)
.subscribe(function (origin) {
if (origin == null) {
_this._onTouched(_this);
}
_this.focused = !!origin;
_this.detectChangies();
});
this._hoursControl.valueChanges
.pipe(filter(function (data) { return +data !== _this._timeValue.hours; }), takeUntil(this._unsubscribe.asObservable()))
.subscribe(function (data) {
_this._timeValue.setHours(+data);
});
this._timeValue.hoursChanged
.pipe(takeUntil(this._unsubscribe.asObservable()))
.subscribe(function (data) {
_this._hoursControl.setValue(_this.padNumber(data));
_this._timeChange.emit(_this.value);
});
this._minutesControl.valueChanges
.pipe(filter(function (data) { return +data !== _this._timeValue.minutes; }), takeUntil(this._unsubscribe.asObservable()))
.subscribe(function (data) {
_this._timeValue.setMinutes(+data);
});
this._timeValue.minutesChanged
.pipe(takeUntil(this._unsubscribe.asObservable()))
.subscribe(function (data) {
_this._minutesControl.setValue(_this.padNumber(data));
_this._timeChange.emit(_this.value);
});
this._secondsControl.valueChanges
.pipe(filter(function (data) { return +data !== _this._timeValue.seconds; }), takeUntil(this._unsubscribe.asObservable()))
.subscribe(function (data) {
_this._timeValue.setSeconds(+data);
});
this._timeValue.secondsChanged
.pipe(takeUntil(this._unsubscribe.asObservable()))
.subscribe(function (data) {
_this._secondsControl.setValue(_this.padNumber(data));
_this._timeChange.emit(_this.value);
});
this._timeChange
.pipe(debounceTime(this._debounceTime), takeUntil(this._unsubscribe.asObservable()))
.subscribe(function (data) {
_this.timeChange.emit(data);
});
}
NgnzTimeInputInlineComponent_1 = NgnzTimeInputInlineComponent;
Object.defineProperty(NgnzTimeInputInlineComponent.prototype, "focused", {
get: function () {
return this._focused;
},
set: function (val) {
this._focused = val;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgnzTimeInputInlineComponent.prototype, "shouldLabelFloat", {
get: function () {
return this.focused || !this.empty;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgnzTimeInputInlineComponent.prototype, "placeholder", {
// placeholder // FIXME: is to show when value is not set
get: function () {
return this._placeholder;
},
set: function (placeholder) {
this._placeholder = placeholder;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgnzTimeInputInlineComponent.prototype, "value", {
get: function () {
var out = moment({
years: this._inputValue.year(),
months: this._inputValue.month(),
days: this._inputValue.date(),
hours: this._timeValue.hours,
minutes: this._timeValue.minutes,
seconds: this._timeValue.seconds,
});
return out;
},
set: function (value) {
this._inputValue = (!!value && isMoment(value) && value) || moment();
var hours = +this._inputValue.hours();
var minutes = +this._inputValue.minutes();
var seconds = +this._inputValue.seconds();
this._timeValue.setHours(hours).setMinutes(minutes).setSeconds(seconds);
this.detectChangies();
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgnzTimeInputInlineComponent.prototype, "required", {
get: function () {
return this._required;
},
set: function (req) {
this._required = coerceBooleanProperty(req);
this.detectChangies();
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgnzTimeInputInlineComponent.prototype, "disabled", {
get: function () {
return this._disabled;
},
set: function (value) {
this._disabled = coerceBooleanProperty(value);
this._disabled ? this.parts.disable() : this.parts.enable();
this.detectChangies();
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgnzTimeInputInlineComponent.prototype, "splitter", {
// one character to separate hours from minutes and minutes from seconds; default is ':'
get: function () {
return this._splitter || ':';
},
set: function (value) {
this._splitter = ('' + value).slice(0);
},
enumerable: true,
configurable: true
});
NgnzTimeInputInlineComponent.prototype.ngOnInit = function () {
this._timeValue.inputMode = this.inputMode;
this._cssClassChange();
};
NgnzTimeInputInlineComponent.prototype.ngDoCheck = function () {
this._cssClassChange();
};
NgnzTimeInputInlineComponent.prototype.ngOnDestroy = function () {
this._unsubscribe.next();
this._unsubscribe.complete();
this._fm.stopMonitoring(this._elRef.nativeElement);
};
NgnzTimeInputInlineComponent.prototype.detectChangies = function () {
this.stateChanges.next();
this._cssClassChange();
this._chDetector.detectChanges();
};
Object.defineProperty(NgnzTimeInputInlineComponent.prototype, "errorState", {
get: function () {
return !!(!!this.ngControl &&
this.ngControl.touched &&
this.ngControl.invalid);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgnzTimeInputInlineComponent.prototype, "empty", {
get: function () {
var value = this.parts.value;
return (!(value.hours && value.hours >= 0) &&
!(value.minutes && value.minutes >= 0) &&
!(value.seconds && value.minutes >= 0));
},
enumerable: true,
configurable: true
});
NgnzTimeInputInlineComponent.prototype.setDescribedByIds = function (ids) {
this.describedBy = ids.join(' ');
};
NgnzTimeInputInlineComponent.prototype.onContainerClick = function (event) {
};
NgnzTimeInputInlineComponent.prototype.writeValue = function (value) {
this.value = value;
};
NgnzTimeInputInlineComponent.prototype.registerOnChange = function (fn) {
this._onChange = function (_) {
fn(_);
};
};
NgnzTimeInputInlineComponent.prototype.registerOnTouched = function (fn) {
this._onTouched = function (_) {
fn(_);
};
};
NgnzTimeInputInlineComponent.prototype.setDisabledState = function (isDisabled) {
this.disabled = isDisabled;
};
NgnzTimeInputInlineComponent.prototype.btnsAction = function (partName, step) {
switch (partName) {
case 'hours':
this._timeValue.setHours(this._timeValue.hours + step);
break;
case 'minutes':
this._timeValue.setMinutes(this._timeValue.minutes + step);
break;
case 'seconds':
this._timeValue.setSeconds(this._timeValue.seconds + step);
break;
}
this.detectChangies();
};
NgnzTimeInputInlineComponent.prototype.btnIncrease = function ($event, partName) {
$event.preventDefault();
$event.stopPropagation();
this.btnsAction(partName, 1);
};
NgnzTimeInputInlineComponent.prototype.btnDecrease = function ($event, partName) {
$event.preventDefault();
$event.stopPropagation();
this.btnsAction(partName, -1);
};
NgnzTimeInputInlineComponent.prototype.padNumber = function (value, places) {
if (places === void 0) { places = 2; }
return String(value).padStart(places, '0');
};
NgnzTimeInputInlineComponent.prototype.wheel = function ($event, partName) {
if (this.focused) {
$event.preventDefault();
$event.stopPropagation();
var step = $event.deltaY > 0 ? -1 : $event.deltaY < 0 ? 1 : 0;
this.btnsAction(partName, step);
}
};
// rearrange additional and conditional classes
NgnzTimeInputInlineComponent.prototype._cssClassChange = function () {
this._defineCssButtons();
this._defineCssInputs();
};
// detect type of control buttons in material design
NgnzTimeInputInlineComponent.prototype._defineMatButtonType = function () {
var _this = this;
var out = this.buttonMatTypeClassName = (!!this.buttonMatType && ('' + this.buttonMatType))
|| this.BUTTON_HOST_ATTRIBUTES.filter(function (attribute) {
return _this._elRef.nativeElement.hasAttribute(attribute);
}).join(' ');
return out;
};
// detect color of control buttons in material design
NgnzTimeInputInlineComponent.prototype._defineMatButtonColor = function () {
return this.colorClassName = !!this.color ? 'mat-' + this.color : '';
};
// combine additional and conditional classes for control buttons
NgnzTimeInputInlineComponent.prototype._defineCssButtons = function () {
var cssClasses = new CssClassCreator()
.appendCssClasses(this.colorClassName || this._defineMatButtonColor())
.appendCssClasses(this.buttonMatTypeClassName || this._defineMatButtonType())
.appendCssClasses(this.buttonsClasses)
.generate();
var cssCreatorLeft = new CssClassCreator()
.appendCssClasses(this.buttonDecreaseClasses)
.appendCssClasses(cssClasses);
var cssCreatorRight = new CssClassCreator()
.appendCssClasses(this.buttonIncreaseClasses)
.appendCssClasses(cssClasses);
Object.assign(this.buttonDecreaseClassesConf, cssCreatorLeft.generate());
Object.assign(this.buttonIncreaseClassesConf, cssCreatorRight.generate());
};
// combine additional and conditional classes for inputs
NgnzTimeInputInlineComponent.prototype._defineCssInputs = function () {
var _this = this;
var cssCreator = new CssClassCreator()
.appendCssClasses({
'ngnz-lr-margin-1em': function () { return (!_this.showButtons && !_this.noButtons && !_this.focused); },
})
.appendCssClasses(this.inputClasses);
Object.assign(this.inputClassesConf, cssCreator.generate());
};
var NgnzTimeInputInlineComponent_1;
NgnzTimeInputInlineComponent.nextId = 0;
NgnzTimeInputInlineComponent.ctorParameters = function () { return [
{ type: FocusMonitor },
{ type: ElementRef },
{ type: ChangeDetectorRef },
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }] }
]; };
__decorate([
HostBinding()
], NgnzTimeInputInlineComponent.prototype, "id", void 0);
__decorate([
HostBinding('attr.aria-describedby')
], NgnzTimeInputInlineComponent.prototype, "describedBy", void 0);
__decorate([
HostBinding('class.floating')
], NgnzTimeInputInlineComponent.prototype, "shouldLabelFloat", null);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "color", void 0);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "buttonMatType", void 0);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "inputClasses", void 0);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "buttonsClasses", void 0);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "buttonDecreaseClasses", void 0);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "buttonIncreaseClasses", void 0);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "placeholder", null);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "inputMode", void 0);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "value", null);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "required", null);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "disabled", null);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "splitter", null);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "noButtons", void 0);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "showButtons", void 0);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "noSeconds", void 0);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "decreaseBtnIconName", void 0);
__decorate([
Input()
], NgnzTimeInputInlineComponent.prototype, "increaseBtnIconName", void 0);
__decorate([
Output()
], NgnzTimeInputInlineComponent.prototype, "timeChange", void 0);
__decorate([
HostListener('timeChange', ['$event']),
HostListener('change', ['$event'])
], NgnzTimeInputInlineComponent.prototype, "_onChange", void 0);
NgnzTimeInputInlineComponent = NgnzTimeInputInlineComponent_1 = __decorate([
Component({
selector: 'ngnz-time-input-inline',
template: "<div class=\"ngnz-time-group\" [formGroup]=\"parts\">\n \n <div class=\"ngnz-hours-block\">\n <button\n *ngIf=\"showButtons || (!noButtons && focused)\"\n class=\"ngnz-button\"\n [ngClass]=\"buttonDecreaseClassesConf\"\n (click)=\"btnDecrease($event, 'hours')\"\n >\n <mat-icon class=\"ngnz-square-1em\">{{\n decreaseBtnIconName\n }}</mat-icon>\n </button>\n <input\n #hours\n class=\"ngnz-hours ngnz-width-2em\"\n formControlName=\"hours\"\n readonly\n [matTooltip]=\"focused ? '\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043A\u043E\u043B\u0435\u0441\u043E \u043F\u0440\u043E\u043A\u0440\u0443\u0442\u043A\u0438' : ''\"\n [ngClass]=\"inputClassesConf\"\n (wheel)=\"wheel($event, 'hours')\"\n />\n <button\n *ngIf=\"showButtons || (!noButtons && focused)\"\n class=\"ngnz-button\"\n [ngClass]=\"buttonIncreaseClassesConf\"\n (click)=\"btnIncrease($event, 'hours')\"\n >\n <mat-icon class=\"ngnz-square-1em\">{{\n increaseBtnIconName\n }}</mat-icon>\n </button>\n </div>\n\n <div class=\"ngnz-splitter\">{{ splitter }}</div>\n\n <div class=\"ngnz-minutes-block\">\n <button\n *ngIf=\"showButtons || (!noButtons && focused)\"\n class=\"ngnz-button\"\n [ngClass]=\"buttonDecreaseClassesConf\"\n (click)=\"btnDecrease($event, 'minutes')\"\n >\n <mat-icon class=\"ngnz-square-1em\">{{\n decreaseBtnIconName\n }}</mat-icon>\n </button>\n <input\n #minutes\n class=\"ngnz-minutes ngnz-width-2em\"\n formControlName=\"minutes\"\n readonly\n [matTooltip]=\"focused ? '\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043A\u043E\u043B\u0435\u0441\u043E \u043F\u0440\u043E\u043A\u0440\u0443\u0442\u043A\u0438' : ''\"\n [ngClass]=\"inputClassesConf\"\n (wheel)=\"wheel($event, 'minutes')\"\n />\n <button\n *ngIf=\"showButtons || (!noButtons && focused)\"\n class=\"ngnz-button\"\n [ngClass]=\"buttonIncreaseClassesConf\"\n (click)=\"btnIncrease($event, 'minutes')\"\n >\n <mat-icon class=\"ngnz-square-1em\">{{\n increaseBtnIconName\n }}</mat-icon>\n </button>\n </div>\n\n <div class=\"ngnz-splitter\" *ngIf=\"!noSeconds\">{{ splitter }}</div>\n\n <div class=\"ngnz-seconds-block\" *ngIf=\"!noSeconds\">\n <button\n *ngIf=\"showButtons || (!noButtons && focused)\"\n class=\"ngnz-button\"\n [ngClass]=\"buttonDecreaseClassesConf\"\n (click)=\"btnDecrease($event, 'seconds')\"\n >\n <mat-icon class=\"ngnz-square-1em\">{{\n decreaseBtnIconName\n }}</mat-icon>\n </button>\n <input\n #seconds\n class=\"ngnz-seconds ngnz-width-2em\"\n formControlName=\"seconds\"\n readonly\n [matTooltip]=\"focused ? '\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 \u043A\u043E\u043B\u0435\u0441\u043E \u043F\u0440\u043E\u043A\u0440\u0443\u0442\u043A\u0438' : ''\"\n [ngClass]=\"inputClassesConf\"\n (wheel)=\"wheel($event, 'seconds')\"\n />\n <button\n *ngIf=\"showButtons || (!noButtons && focused)\"\n class=\"ngnz-button\"\n [ngClass]=\"buttonIncreaseClassesConf\"\n (click)=\"btnIncrease($event, 'seconds')\"\n >\n <mat-icon class=\"ngnz-square-1em\">{{\n increaseBtnIconName\n }}</mat-icon>\n </button>\n </div>\n \n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: MatFormFieldControl,
useExisting: NgnzTimeInputInlineComponent_1,
},
],
styles: [".ngnz-time-group{display:flex!important;justify-content:center!important;align-items:center!important;padding:0!important}.ngnz-time-group .ngnz-hours-block,.ngnz-time-group .ngnz-minutes-block,.ngnz-time-group .ngnz-seconds-block,.ngnz-time-group .ngnz-splitter{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important}.ngnz-time-group .ngnz-hours-block .ngnz-hours,.ngnz-time-group .ngnz-hours-block .ngnz-minutes,.ngnz-time-group .ngnz-hours-block .ngnz-seconds,.ngnz-time-group .ngnz-minutes-block .ngnz-hours,.ngnz-time-group .ngnz-minutes-block .ngnz-minutes,.ngnz-time-group .ngnz-minutes-block .ngnz-seconds,.ngnz-time-group .ngnz-seconds-block .ngnz-hours,.ngnz-time-group .ngnz-seconds-block .ngnz-minutes,.ngnz-time-group .ngnz-seconds-block .ngnz-seconds,.ngnz-time-group .ngnz-splitter .ngnz-hours,.ngnz-time-group .ngnz-splitter .ngnz-minutes,.ngnz-time-group .ngnz-splitter .ngnz-seconds{color:inherit;border:none;outline:0;font:inherit;text-align:center!important;vertical-align:middle!important;padding:0!important}.ngnz-time-group .ngnz-hours-block .ngnz-button,.ngnz-time-group .ngnz-minutes-block .ngnz-button,.ngnz-time-group .ngnz-seconds-block .ngnz-button,.ngnz-time-group .ngnz-splitter .ngnz-button{cursor:pointer;padding:0!important;font-weight:700;display:flex!important;justify-content:center!important;align-items:center!important;line-height:inherit!important;font-size:inherit!important;box-sizing:border-box;position:relative;top:0}.ngnz-time-group .ngnz-hours-block .ngnz-button ::ng-deep .mat-button-wrapper,.ngnz-time-group .ngnz-minutes-block .ngnz-button ::ng-deep .mat-button-wrapper,.ngnz-time-group .ngnz-seconds-block .ngnz-button ::ng-deep .mat-button-wrapper,.ngnz-time-group .ngnz-splitter .ngnz-button ::ng-deep .mat-button-wrapper{line-height:inherit!important;padding:0!important}.ngnz-time-group .ngnz-hours-block .ngnz-button ::ng-deep .mat-button-base,.ngnz-time-group .ngnz-minutes-block .ngnz-button ::ng-deep .mat-button-base,.ngnz-time-group .ngnz-seconds-block .ngnz-button ::ng-deep .mat-button-base,.ngnz-time-group .ngnz-splitter .ngnz-button ::ng-deep .mat-button-base{min-width:inherit!important}.ngnz-time-group .ngnz-splitter{opacity:0;min-width:1em!important;transition:opacity .2s!important}:host.floating .ngnz-splitter{opacity:1}.ngnz-lr-margin-1em{margin-left:1em;margin-right:1em}.ngnz-square-1em,.ngnz-time-group .ngnz-hours-block .ngnz-button,.ngnz-time-group .ngnz-minutes-block .ngnz-button,.ngnz-time-group .ngnz-seconds-block .ngnz-button,.ngnz-time-group .ngnz-splitter .ngnz-button,.ngnz-width-1em{width:1em!important;min-width:1em!important}.ngnz-height-1em,.ngnz-square-1em,.ngnz-time-group .ngnz-hours-block .ngnz-button,.ngnz-time-group .ngnz-minutes-block .ngnz-button,.ngnz-time-group .ngnz-seconds-block .ngnz-button,.ngnz-time-group .ngnz-splitter .ngnz-button{height:1em!important;min-height:1em!important}.ngnz-width-2em{width:2em!important;min-width:2em!important}.ngnz-height-2em{height:2em!important;min-height:2em!important}.material-icons{font-size:inherit!important}"]
}),
__param(3, Optional()), __param(3, Self())
], NgnzTimeInputInlineComponent);
return NgnzTimeInputInlineComponent;
}());
var NgnzTimeInputInlineModule = /** @class */ (function () {
function NgnzTimeInputInlineModule() {
}
NgnzTimeInputInlineModule = __decorate([
NgModule({
declarations: [NgnzTimeInputInlineComponent],
imports: [
CommonModule,
ReactiveFormsModule,
MatButtonModule,
MatFormFieldModule,
MatInputModule,
MatCommonModule,
MatIconModule,
MatTooltipModule
],
exports: [
NgnzTimeInputInlineComponent
],
})
], NgnzTimeInputInlineModule);
return NgnzTimeInputInlineModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { NgnzTimeInputInlineComponent, NgnzTimeInputInlineModule, TimeInputMode, TimeValue };
//# sourceMappingURL=ngnz-time-input.js.map