ngnz-time-input
Version:
Material design time input for Angular 8
616 lines (608 loc) • 28.6 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 { __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 = {}));
class TimeValue {
constructor(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((val) => val !== 0))
.subscribe((data) => this.setMinutes(this.minutes + data));
this.exeedMinutes
.pipe(filter((val) => val !== 0))
.subscribe((data) => this.setHours(this.hours + data));
}
get hours() {
return this._hours;
}
setHours(value, emitChange = true) {
if (this._hours !== value) {
const 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;
}
get minutes() {
return this._minutes;
}
setMinutes(value, emitChange = true) {
if (this._minutes !== value) {
const 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;
}
get seconds() {
return this._seconds;
}
setSeconds(value, emitChange = true) {
if (this._seconds !== value) {
const 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;
}
get value() {
return {
hours: this.hours,
minutes: this.minutes,
seconds: this.seconds,
};
}
setValue(hours, minutes, seconds) {
this.setHours(hours).setMinutes(minutes).setSeconds(seconds);
}
_setPart(value, maxLimit) {
let partVal = 0;
let exeedVal = 0;
const minLimit = this.TIME_LIMITS.zero;
const 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,
};
}
}
class CssClassCreator {
constructor(initVal) {
this._classes = {};
if (!!initVal) {
this.appendCssClasses(initVal);
}
}
appendCssClasses(classes, 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;
}
generate() {
const out = {};
for (const 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;
}
_createFromArray(classes, trigger) {
for (const cls of classes) {
this._classes['' + cls] = true;
}
}
_createFromString(classes, trigger) {
const splitted = classes.split(/[\s,;]+/).filter((item) => !!item);
this._createFromArray(splitted, trigger);
}
}
var NgnzTimeInputInlineComponent_1;
/**
* 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
*/
let NgnzTimeInputInlineComponent = NgnzTimeInputInlineComponent_1 = class NgnzTimeInputInlineComponent {
constructor(_fm, _elRef, _chDetector, ngControl) {
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((origin) => {
if (origin == null) {
this._onTouched(this);
}
this.focused = !!origin;
this.detectChangies();
});
this._hoursControl.valueChanges
.pipe(filter((data) => +data !== this._timeValue.hours), takeUntil(this._unsubscribe.asObservable()))
.subscribe((data) => {
this._timeValue.setHours(+data);
});
this._timeValue.hoursChanged
.pipe(takeUntil(this._unsubscribe.asObservable()))
.subscribe((data) => {
this._hoursControl.setValue(this.padNumber(data));
this._timeChange.emit(this.value);
});
this._minutesControl.valueChanges
.pipe(filter((data) => +data !== this._timeValue.minutes), takeUntil(this._unsubscribe.asObservable()))
.subscribe((data) => {
this._timeValue.setMinutes(+data);
});
this._timeValue.minutesChanged
.pipe(takeUntil(this._unsubscribe.asObservable()))
.subscribe((data) => {
this._minutesControl.setValue(this.padNumber(data));
this._timeChange.emit(this.value);
});
this._secondsControl.valueChanges
.pipe(filter((data) => +data !== this._timeValue.seconds), takeUntil(this._unsubscribe.asObservable()))
.subscribe((data) => {
this._timeValue.setSeconds(+data);
});
this._timeValue.secondsChanged
.pipe(takeUntil(this._unsubscribe.asObservable()))
.subscribe((data) => {
this._secondsControl.setValue(this.padNumber(data));
this._timeChange.emit(this.value);
});
this._timeChange
.pipe(debounceTime(this._debounceTime), takeUntil(this._unsubscribe.asObservable()))
.subscribe((data) => {
this.timeChange.emit(data);
});
}
get focused() {
return this._focused;
}
set focused(val) {
this._focused = val;
}
get shouldLabelFloat() {
return this.focused || !this.empty;
}
// placeholder // FIXME: is to show when value is not set
get placeholder() {
return this._placeholder;
}
set placeholder(placeholder) {
this._placeholder = placeholder;
}
get value() {
const 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 value(value) {
this._inputValue = (!!value && isMoment(value) && value) || moment();
const hours = +this._inputValue.hours();
const minutes = +this._inputValue.minutes();
const seconds = +this._inputValue.seconds();
this._timeValue.setHours(hours).setMinutes(minutes).setSeconds(seconds);
this.detectChangies();
}
get required() {
return this._required;
}
set required(req) {
this._required = coerceBooleanProperty(req);
this.detectChangies();
}
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = coerceBooleanProperty(value);
this._disabled ? this.parts.disable() : this.parts.enable();
this.detectChangies();
}
// one character to separate hours from minutes and minutes from seconds; default is ':'
get splitter() {
return this._splitter || ':';
}
set splitter(value) {
this._splitter = ('' + value).slice(0);
}
ngOnInit() {
this._timeValue.inputMode = this.inputMode;
this._cssClassChange();
}
ngDoCheck() {
this._cssClassChange();
}
ngOnDestroy() {
this._unsubscribe.next();
this._unsubscribe.complete();
this._fm.stopMonitoring(this._elRef.nativeElement);
}
detectChangies() {
this.stateChanges.next();
this._cssClassChange();
this._chDetector.detectChanges();
}
get errorState() {
return !!(!!this.ngControl &&
this.ngControl.touched &&
this.ngControl.invalid);
}
get empty() {
const value = this.parts.value;
return (!(value.hours && value.hours >= 0) &&
!(value.minutes && value.minutes >= 0) &&
!(value.seconds && value.minutes >= 0));
}
setDescribedByIds(ids) {
this.describedBy = ids.join(' ');
}
onContainerClick(event) {
}
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this._onChange = (_) => {
fn(_);
};
}
registerOnTouched(fn) {
this._onTouched = (_) => {
fn(_);
};
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
btnsAction(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();
}
btnIncrease($event, partName) {
$event.preventDefault();
$event.stopPropagation();
this.btnsAction(partName, 1);
}
btnDecrease($event, partName) {
$event.preventDefault();
$event.stopPropagation();
this.btnsAction(partName, -1);
}
padNumber(value, places = 2) {
return String(value).padStart(places, '0');
}
wheel($event, partName) {
if (this.focused) {
$event.preventDefault();
$event.stopPropagation();
const step = $event.deltaY > 0 ? -1 : $event.deltaY < 0 ? 1 : 0;
this.btnsAction(partName, step);
}
}
// rearrange additional and conditional classes
_cssClassChange() {
this._defineCssButtons();
this._defineCssInputs();
}
// detect type of control buttons in material design
_defineMatButtonType() {
const out = this.buttonMatTypeClassName = (!!this.buttonMatType && ('' + this.buttonMatType))
|| this.BUTTON_HOST_ATTRIBUTES.filter((attribute) => {
return this._elRef.nativeElement.hasAttribute(attribute);
}).join(' ');
return out;
}
// detect color of control buttons in material design
_defineMatButtonColor() {
return this.colorClassName = !!this.color ? 'mat-' + this.color : '';
}
// combine additional and conditional classes for control buttons
_defineCssButtons() {
const cssClasses = new CssClassCreator()
.appendCssClasses(this.colorClassName || this._defineMatButtonColor())
.appendCssClasses(this.buttonMatTypeClassName || this._defineMatButtonType())
.appendCssClasses(this.buttonsClasses)
.generate();
const cssCreatorLeft = new CssClassCreator()
.appendCssClasses(this.buttonDecreaseClasses)
.appendCssClasses(cssClasses);
const 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
_defineCssInputs() {
const cssCreator = new CssClassCreator()
.appendCssClasses({
'ngnz-lr-margin-1em': () => (!this.showButtons && !this.noButtons && !this.focused),
})
.appendCssClasses(this.inputClasses);
Object.assign(this.inputClassesConf, cssCreator.generate());
}
};
NgnzTimeInputInlineComponent.nextId = 0;
NgnzTimeInputInlineComponent.ctorParameters = () => [
{ 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);
let NgnzTimeInputInlineModule = class NgnzTimeInputInlineModule {
};
NgnzTimeInputInlineModule = __decorate([
NgModule({
declarations: [NgnzTimeInputInlineComponent],
imports: [
CommonModule,
ReactiveFormsModule,
MatButtonModule,
MatFormFieldModule,
MatInputModule,
MatCommonModule,
MatIconModule,
MatTooltipModule
],
exports: [
NgnzTimeInputInlineComponent
],
})
], NgnzTimeInputInlineModule);
/**
* Generated bundle index. Do not edit.
*/
export { NgnzTimeInputInlineComponent, NgnzTimeInputInlineModule, TimeInputMode, TimeValue };
//# sourceMappingURL=ngnz-time-input.js.map