@tangential/input-widgets
Version:
Input Widgets with persistable, dynamic configuration.
954 lines (946 loc) • 190 kB
JavaScript
import * as i0 from '@angular/core';
import { forwardRef, EventEmitter, Component, ViewEncapsulation, HostBinding, Input, Output, Inject, NgModule } from '@angular/core';
import * as i2 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { Hacks, TimeUnits } from '@tangential/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import * as i3$1 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i4 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import moment$1 from 'moment';
import * as i5 from '@angular/material/slide-toggle';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import * as i1$1 from '@angular/material/dialog';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import * as i3$2 from '@tangential/components';
import { TanjComponentsModule } from '@tangential/components';
import * as moment from 'moment/moment';
import * as i5$1 from '@angular/material/slider';
import { MatSliderModule } from '@angular/material/slider';
/**
* Provider Expression that allows this widget to register as a ControlValueAccessor.
* This allows it to support [(ngModel)].
* @docs-private
*/
const TANJ_CHECKBOX_WIDGET_VIEW_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxWidgetComponent),
multi: true
};
class CheckboxWidgetChange {
constructor(source, value) {
this.source = source;
this.value = value;
}
}
class CheckboxWidgetComponent {
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
// turn this into a class
this.flex = '';
this.flexLayout = 'column';
this.flexLayoutAlign = 'start';
this.value = false;
this.valueChange = new EventEmitter(false);
this.labelPosition = 'before';
this.disabled = false;
this.hideLabel = false;
this.onlyLabel = false;
/**
* Configuration Fields
*/
this.label = '';
this.defaultValue = false;
/* end Configuration Fields */
this.change = new EventEmitter(false);
this.onTouched = () => { };
this.controlValueAccessorChangeFn = (value) => { };
}
ngOnInit() {
Hacks.materialDesignPlaceholderText(this.changeDetectorRef);
}
handleValueChange(value) {
if (!this.disabled) {
this.value = value;
this.valueChange.emit(this.value);
this.emitChangeEvent();
}
}
/**
* Boilerplate / required for Angular
*
*/
emitChangeEvent() {
this.controlValueAccessorChangeFn(this.value);
this.change.emit(new CheckboxWidgetChange(this, this.value));
}
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this.controlValueAccessorChangeFn = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* Sets the input's disabled state. Implemented as a part of ControlValueAccessor.
* @param isDisabled Whether the input should be disabled.
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
}
CheckboxWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: CheckboxWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
CheckboxWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: CheckboxWidgetComponent, selector: "tanj-checkbox-widget", inputs: { value: "value", labelPosition: "labelPosition", disabled: "disabled", hideLabel: "hideLabel", onlyLabel: "onlyLabel", label: "label", defaultValue: "defaultValue" }, outputs: { valueChange: "valueChange", change: "change" }, host: { properties: { "attr.flex": "this.flex", "attr.layout": "this.flexLayout", "attr.layout-align": "this.flexLayoutAlign" } }, providers: [TANJ_CHECKBOX_WIDGET_VIEW_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: `<!-- -->
<div flex class="tanj-input-template tanj-mode-edit"
[ngClass]="{'tanj-disabled': disabled}"
layout="row"
layout-align="center center">
<span *ngIf="!hideLabel && labelPosition == 'before'"
class="tanj-label tanj-checkbox-widget-label">{{label}}</span>
<div flex class="tanj-widget-input" layout="column" layout-align="start center">
<div *ngIf="!onlyLabel"
class="tanj-widget-input"
layout="column"
layout-align="start">
<mat-checkbox flex
[disabled]="disabled"
[(ngModel)]="value"
(change)="handleValueChange(value)">
</mat-checkbox>
</div>
<div *ngIf="!hideLabel && labelPosition == 'below'" class="tanj-label tanj-below">{{label}}</div>
</div>
<span *ngIf="!hideLabel && labelPosition == 'after'" class="tanj-label tanj-checkbox-widget-label">{{label}}</span>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: CheckboxWidgetComponent, decorators: [{
type: Component,
args: [{
selector: 'tanj-checkbox-widget',
template: `<!-- -->
<div flex class="tanj-input-template tanj-mode-edit"
[ngClass]="{'tanj-disabled': disabled}"
layout="row"
layout-align="center center">
<span *ngIf="!hideLabel && labelPosition == 'before'"
class="tanj-label tanj-checkbox-widget-label">{{label}}</span>
<div flex class="tanj-widget-input" layout="column" layout-align="start center">
<div *ngIf="!onlyLabel"
class="tanj-widget-input"
layout="column"
layout-align="start">
<mat-checkbox flex
[disabled]="disabled"
[(ngModel)]="value"
(change)="handleValueChange(value)">
</mat-checkbox>
</div>
<div *ngIf="!hideLabel && labelPosition == 'below'" class="tanj-label tanj-below">{{label}}</div>
</div>
<span *ngIf="!hideLabel && labelPosition == 'after'" class="tanj-label tanj-checkbox-widget-label">{{label}}</span>
</div>
`,
providers: [TANJ_CHECKBOX_WIDGET_VIEW_CONTROL_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { flex: [{
type: HostBinding,
args: ['attr.flex']
}], flexLayout: [{
type: HostBinding,
args: ['attr.layout']
}], flexLayoutAlign: [{
type: HostBinding,
args: ['attr.layout-align']
}], value: [{
type: Input
}], valueChange: [{
type: Output
}], labelPosition: [{
type: Input
}], disabled: [{
type: Input
}], hideLabel: [{
type: Input
}], onlyLabel: [{
type: Input
}], label: [{
type: Input
}], defaultValue: [{
type: Input
}], change: [{
type: Output
}] } });
/**
* Provider Expression that allows this widget to register as a ControlValueAccessor.
* This allows it to support [(ngModel)].
* @docs-private
*/
const TANJ_CHECKBOX_WIDGET_CONFIG_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxWidgetConfigureComponent),
multi: true
};
class CheckboxWidgetConfigureChange {
constructor(source, value) {
this.source = source;
this.value = value;
}
}
class CheckboxWidgetConfigureComponent {
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
this.flex = '';
this.flexLayout = 'column';
this.flexLayoutAlign = 'start';
this.value = false;
this.valueChange = new EventEmitter(false);
this.labelPosition = 'before';
this.disabled = false;
/**
* Configuration Fields
*/
this.label = '';
this.labelChange = new EventEmitter(false);
this.defaultValue = false;
this.defaultValueChange = new EventEmitter(false);
/* end Configuration Fields */
this.change = new EventEmitter(false);
/**
* Called when the spinner is blurred. Needed to properly implement ControlValueAccessor.
* @docs-private
*/
this.onTouched = () => { };
this.controlValueAccessorChangeFn = (value) => { };
}
ngOnInit() {
Hacks.materialDesignPlaceholderText(this.changeDetectorRef);
}
emitChangeEvent(value, label) {
this.controlValueAccessorChangeFn(this.value);
this.change.emit(new CheckboxWidgetConfigureChange(this, this.value));
if (value) {
this.valueChange.emit(this.value);
this.defaultValueChange.emit(this.defaultValue);
}
if (label) {
this.labelChange.emit(this.label);
}
}
/**
* Boilerplate / required for Angular
*
*/
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this.controlValueAccessorChangeFn = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* Sets the input's disabled state. Implemented as a part of ControlValueAccessor.
* @param isDisabled Whether the input should be disabled.
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
}
CheckboxWidgetConfigureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: CheckboxWidgetConfigureComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
CheckboxWidgetConfigureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: CheckboxWidgetConfigureComponent, selector: "tanj-checkbox-widget-configure", inputs: { value: "value", labelPosition: "labelPosition", disabled: "disabled", label: "label", defaultValue: "defaultValue" }, outputs: { valueChange: "valueChange", labelChange: "labelChange", defaultValueChange: "defaultValueChange", change: "change" }, host: { properties: { "attr.flex": "this.flex", "attr.layout": "this.flexLayout", "attr.layout-align": "this.flexLayoutAlign" } }, providers: [TANJ_CHECKBOX_WIDGET_CONFIG_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: `<!-- -->
<div class="tanj-input-template tanj-mode-configure" flex layout="column" layout-align="start">
<mat-form-field dividerColor="accent">
<input matInput class="tanj-input" type="text" maxlength="50" placeholder="Enter a label for this input"
(change)="emitChangeEvent(false, true)"
[(ngModel)]="label"/>
</mat-form-field>
<ng-container *ngIf="label">
<tanj-checkbox-widget [(value)]="defaultValue"
(valueChange)="value = defaultValue; emitChangeEvent(true, false)"
[defaultValue]="defaultValue"
label="Default Value"
[labelPosition]="'before'">
</tanj-checkbox-widget>
</ng-container>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: CheckboxWidgetComponent, selector: "tanj-checkbox-widget", inputs: ["value", "labelPosition", "disabled", "hideLabel", "onlyLabel", "label", "defaultValue"], outputs: ["valueChange", "change"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: CheckboxWidgetConfigureComponent, decorators: [{
type: Component,
args: [{
selector: 'tanj-checkbox-widget-configure',
template: `<!-- -->
<div class="tanj-input-template tanj-mode-configure" flex layout="column" layout-align="start">
<mat-form-field dividerColor="accent">
<input matInput class="tanj-input" type="text" maxlength="50" placeholder="Enter a label for this input"
(change)="emitChangeEvent(false, true)"
[(ngModel)]="label"/>
</mat-form-field>
<ng-container *ngIf="label">
<tanj-checkbox-widget [(value)]="defaultValue"
(valueChange)="value = defaultValue; emitChangeEvent(true, false)"
[defaultValue]="defaultValue"
label="Default Value"
[labelPosition]="'before'">
</tanj-checkbox-widget>
</ng-container>
</div>
`,
providers: [TANJ_CHECKBOX_WIDGET_CONFIG_CONTROL_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { flex: [{
type: HostBinding,
args: ['attr.flex']
}], flexLayout: [{
type: HostBinding,
args: ['attr.layout']
}], flexLayoutAlign: [{
type: HostBinding,
args: ['attr.layout-align']
}], value: [{
type: Input
}], valueChange: [{
type: Output
}], labelPosition: [{
type: Input
}], disabled: [{
type: Input
}], label: [{
type: Input
}], labelChange: [{
type: Output
}], defaultValue: [{
type: Input
}], defaultValueChange: [{
type: Output
}], change: [{
type: Output
}] } });
/**
* Provider Expression that allows this widget to register as a ControlValueAccessor.
* This allows it to support [(ngModel)].
* @docs-private
*/
const TANJ_DATE_TIME_WIDGET_VIEW_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimeWidgetComponent), multi: true
};
class DateTimeWidgetChange {
constructor(source, value) {
this.source = source;
this.value = value;
}
}
class DateTimeWidgetComponent {
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
// turn this into a class
this.flex = '';
this.flexLayout = 'column';
this.flexLayoutAlign = 'start';
this.value = Date.now();
this.valueChange = new EventEmitter(false);
this.labelPosition = 'before';
this.disabled = false;
this.hideLabel = false;
this.onlyLabel = false;
/**
* Configuration Fields
*/
this.label = '';
this.defaultToNow = false;
this.defaultValue = 0;
this.maxLength = 100;
this.minLength = 0;
/* end Configuration Fields */
this.change = new EventEmitter(false);
this.onTouched = () => {
};
this.controlValueAccessorChangeFn = (value) => {
};
}
ngOnInit() {
this.value = this.defaultToNow ? Date.now() : this.defaultValue;
Hacks.materialDesignPlaceholderText(this.changeDetectorRef);
}
get dateInputValue() {
return moment$1(this.value).format('YYYY-MM-DDTHH:mm:ss');
}
set dateInputValue(dateString) {
this.value = moment$1(dateString).valueOf();
}
ngOnChanges(changes) {
if (changes.defaultToNow && !this.value) {
this.value = this.defaultToNow ? Date.now() : this.defaultValue;
}
}
handleValueChange(value) {
if (!this.disabled) {
this.value = value;
this.valueChange.emit(this.value);
this.emitChangeEvent();
}
}
/**
* Boilerplate / required for Angular
*
*/
emitChangeEvent() {
const change = new DateTimeWidgetChange(this, this.value);
this.controlValueAccessorChangeFn(this.value);
this.change.emit(change);
}
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this.controlValueAccessorChangeFn = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* Sets the input's disabled state. Implemented as a part of ControlValueAccessor.
* @param isDisabled Whether the input should be disabled.
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
}
DateTimeWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: DateTimeWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
DateTimeWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: DateTimeWidgetComponent, selector: "tanj-date-time-widget", inputs: { value: "value", labelPosition: "labelPosition", disabled: "disabled", hideLabel: "hideLabel", onlyLabel: "onlyLabel", label: "label", defaultToNow: "defaultToNow", defaultValue: "defaultValue", maxLength: "maxLength", minLength: "minLength" }, outputs: { valueChange: "valueChange", change: "change" }, host: { properties: { "attr.flex": "this.flex", "attr.layout": "this.flexLayout", "attr.layout-align": "this.flexLayoutAlign" } }, providers: [TANJ_DATE_TIME_WIDGET_VIEW_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: `<!-- -->
<div flex class="tanj-input-template tanj-mode-edit"
[ngClass]="{'tanj-disabled': disabled}"
layout="row"
layout-align="start center">
<span *ngIf="!hideLabel && labelPosition == 'before'" class="tanj-label tanj-before">{{label}}</span>
<div flex class="tanj-widget-input" layout="column" layout-align="center start">
<div flex *ngIf="!onlyLabel" class="tanj-widget-input" layout="row" layout-align="start">
<mat-form-field flex
class="tanj-date-time-input-field tanj-widget-input"
dividerColor="accent"
layout="row"
layout-align="start">
<input flex
matInput
class="tanj-input"
type="datetime-local"
minlength="{{minLength}}"
maxlength="{{maxLength}}"
[disabled]="disabled"
(change)="valueChange.emit(value)"
[(ngModel)]="dateInputValue"/>
</mat-form-field>
</div>
<span *ngIf="!hideLabel && labelPosition == 'below'" class="tanj-label tanj-below">{{label}}</span>
</div>
<span *ngIf="!hideLabel && labelPosition == 'after'" class="tanj-label tanj-after">{{label}}</span>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: DateTimeWidgetComponent, decorators: [{
type: Component,
args: [{
selector: 'tanj-date-time-widget', template: `<!-- -->
<div flex class="tanj-input-template tanj-mode-edit"
[ngClass]="{'tanj-disabled': disabled}"
layout="row"
layout-align="start center">
<span *ngIf="!hideLabel && labelPosition == 'before'" class="tanj-label tanj-before">{{label}}</span>
<div flex class="tanj-widget-input" layout="column" layout-align="center start">
<div flex *ngIf="!onlyLabel" class="tanj-widget-input" layout="row" layout-align="start">
<mat-form-field flex
class="tanj-date-time-input-field tanj-widget-input"
dividerColor="accent"
layout="row"
layout-align="start">
<input flex
matInput
class="tanj-input"
type="datetime-local"
minlength="{{minLength}}"
maxlength="{{maxLength}}"
[disabled]="disabled"
(change)="valueChange.emit(value)"
[(ngModel)]="dateInputValue"/>
</mat-form-field>
</div>
<span *ngIf="!hideLabel && labelPosition == 'below'" class="tanj-label tanj-below">{{label}}</span>
</div>
<span *ngIf="!hideLabel && labelPosition == 'after'" class="tanj-label tanj-after">{{label}}</span>
</div>
`, providers: [TANJ_DATE_TIME_WIDGET_VIEW_CONTROL_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { flex: [{
type: HostBinding,
args: ['attr.flex']
}], flexLayout: [{
type: HostBinding,
args: ['attr.layout']
}], flexLayoutAlign: [{
type: HostBinding,
args: ['attr.layout-align']
}], value: [{
type: Input
}], valueChange: [{
type: Output
}], labelPosition: [{
type: Input
}], disabled: [{
type: Input
}], hideLabel: [{
type: Input
}], onlyLabel: [{
type: Input
}], label: [{
type: Input
}], defaultToNow: [{
type: Input
}], defaultValue: [{
type: Input
}], maxLength: [{
type: Input
}], minLength: [{
type: Input
}], change: [{
type: Output
}] } });
/**
* Provider Expression that allows this widget to register as a ControlValueAccessor.
* This allows it to support [(ngModel)].
* @docs-private
*/
const TANJ_DATE_TIME_WIDGET_CONFIG_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DateTimeWidgetConfigureComponent),
multi: true
};
class DateTimeWidgetConfigureChange {
constructor(source, value) {
this.source = source;
this.value = value;
}
}
class DateTimeWidgetConfigureComponent {
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
this.flex = '';
this.flexLayout = 'column';
this.flexLayoutAlign = 'start';
this.value = 0;
this.valueChange = new EventEmitter(false);
this.labelPosition = 'before';
this.disabled = false;
/**
* Configuration Fields
*/
this.label = '';
this.labelChange = new EventEmitter(false);
this.defaultValue = Date.now();
this.defaultValueChange = new EventEmitter(false);
this.defaultToNow = false;
this.defaultToNowChange = new EventEmitter(false);
this.change = new EventEmitter(false);
/**
* Called when the spinner is blurred. Needed to properly implement ControlValueAccessor.
* @docs-private
*/
this.onTouched = () => { };
this.controlValueAccessorChangeFn = (value) => { };
}
ngOnInit() {
Hacks.materialDesignPlaceholderText(this.changeDetectorRef);
}
ngOnChanges(changes) {
}
emitChangeEvent(value, label) {
this.controlValueAccessorChangeFn(this.value);
this.change.emit(new DateTimeWidgetConfigureChange(this, this.value));
if (value) {
this.valueChange.emit(this.value);
this.defaultValueChange.emit(this.defaultValue);
}
if (label) {
this.labelChange.emit(this.label);
}
}
/**
* Boilerplate / required for Angular
*
*/
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this.controlValueAccessorChangeFn = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* Sets the input's disabled state. Implemented as a part of ControlValueAccessor.
* @param isDisabled Whether the input should be disabled.
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
}
DateTimeWidgetConfigureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: DateTimeWidgetConfigureComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
DateTimeWidgetConfigureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: DateTimeWidgetConfigureComponent, selector: "tanj-date-time-configure", inputs: { value: "value", labelPosition: "labelPosition", disabled: "disabled", label: "label", defaultValue: "defaultValue", defaultToNow: "defaultToNow" }, outputs: { valueChange: "valueChange", labelChange: "labelChange", defaultValueChange: "defaultValueChange", defaultToNowChange: "defaultToNowChange", change: "change" }, host: { properties: { "attr.flex": "this.flex", "attr.layout": "this.flexLayout", "attr.layout-align": "this.flexLayoutAlign" } }, providers: [TANJ_DATE_TIME_WIDGET_CONFIG_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: `<!-- -->
<div class="tanj-input-template tanj-mode-configure" flex layout="column" layout-align="start">
<mat-form-field dividerColor="accent">
<input matInput class="tanj-input" type="text" maxlength="50" placeholder="Enter a label for this input"
(change)="labelChange.emit(label)"
[(ngModel)]="label"/>
</mat-form-field>
<ng-container *ngIf="label">
<mat-slide-toggle class="tanj-input" [labelPosition]="'before'" [(ngModel)]="defaultToNow">Default to current time?
</mat-slide-toggle>
<tanj-date-time-widget *ngIf="!defaultToNow" [(value)]="defaultValue"
(valueChange)="value = defaultValue; emitChangeEvent(true, false)"
[defaultValue]="defaultValue"
label="Default Value"></tanj-date-time-widget>
</ng-container>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: DateTimeWidgetComponent, selector: "tanj-date-time-widget", inputs: ["value", "labelPosition", "disabled", "hideLabel", "onlyLabel", "label", "defaultToNow", "defaultValue", "maxLength", "minLength"], outputs: ["valueChange", "change"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: DateTimeWidgetConfigureComponent, decorators: [{
type: Component,
args: [{
selector: 'tanj-date-time-configure',
template: `<!-- -->
<div class="tanj-input-template tanj-mode-configure" flex layout="column" layout-align="start">
<mat-form-field dividerColor="accent">
<input matInput class="tanj-input" type="text" maxlength="50" placeholder="Enter a label for this input"
(change)="labelChange.emit(label)"
[(ngModel)]="label"/>
</mat-form-field>
<ng-container *ngIf="label">
<mat-slide-toggle class="tanj-input" [labelPosition]="'before'" [(ngModel)]="defaultToNow">Default to current time?
</mat-slide-toggle>
<tanj-date-time-widget *ngIf="!defaultToNow" [(value)]="defaultValue"
(valueChange)="value = defaultValue; emitChangeEvent(true, false)"
[defaultValue]="defaultValue"
label="Default Value"></tanj-date-time-widget>
</ng-container>
</div>
`,
providers: [TANJ_DATE_TIME_WIDGET_CONFIG_CONTROL_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { flex: [{
type: HostBinding,
args: ['attr.flex']
}], flexLayout: [{
type: HostBinding,
args: ['attr.layout']
}], flexLayoutAlign: [{
type: HostBinding,
args: ['attr.layout-align']
}], value: [{
type: Input
}], valueChange: [{
type: Output
}], labelPosition: [{
type: Input
}], disabled: [{
type: Input
}], label: [{
type: Input
}], labelChange: [{
type: Output
}], defaultValue: [{
type: Input
}], defaultValueChange: [{
type: Output
}], defaultToNow: [{
type: Input
}], defaultToNowChange: [{
type: Output
}], change: [{
type: Output
}] } });
/**
* Provider Expression that allows this widget to register as a ControlValueAccessor.
* This allows it to support [(ngModel)].
* @docs-private
*/
const TANJ_NUMBER_SPINNER_WIDGET_VIEW_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NumberSpinnerWidgetComponent),
multi: true
};
class NumberSpinnerWidgetChange {
constructor(source, value) {
this.source = source;
this.value = value;
}
}
class NumberSpinnerWidgetComponent {
constructor(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
// turn this into a class
this.flex = '';
this.flexLayout = 'column';
this.flexLayoutAlign = 'start';
this.value = 0;
this.valueChange = new EventEmitter(false);
this.labelPosition = 'before';
this.disabled = false;
this.hideLabel = false;
this.onlyLabel = false;
/**
* Configuration Fields
*/
this.label = '';
this.defaultValue = 0;
this.max = 10;
this.min = 0;
this.step = 1;
/* end Configuration Fields */
this.change = new EventEmitter(false);
this.keyboardInputToggled = false;
this.onTouched = () => { };
this.controlValueAccessorChangeFn = (value) => { };
}
ngOnInit() {
Hacks.materialDesignPlaceholderText(this.changeDetectorRef);
}
ngOnChanges(changes) {
}
handleValueChange(value) {
if (!this.disabled) {
this.value = value;
this.valueChange.emit(this.value);
this.emitChangeEvent();
}
}
onPreviousValueRequest() {
if (!this.disabled) {
const v = this.previousValue();
if (v !== null) {
this.handleValueChange(v);
}
}
}
onNextValueRequest() {
if (!this.disabled) {
const v = this.nextValue();
if (v !== null) {
this.handleValueChange(v);
}
}
}
nextValue() {
let v = this.value + this.step;
if (v > this.max) {
v = this.max;
}
return v;
}
previousValue() {
let v = this.value - this.step;
if (v < this.min) {
v = this.min;
}
return v;
}
swipeUp(event) {
this.onNextValueRequest();
}
swipeDown(event) {
this.onPreviousValueRequest();
}
onKeyboardInputRequest(event) {
this.keyboardInputToggled = this.disabled ? false : !this.keyboardInputToggled;
}
/**
* Boilerplate / required for Angular
*/
emitChangeEvent() {
this.controlValueAccessorChangeFn(this.value);
this.change.emit(new NumberSpinnerWidgetChange(this, this.value));
}
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this.controlValueAccessorChangeFn = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* Sets the input's disabled state. Implemented as a part of ControlValueAccessor.
* @param isDisabled Whether the input should be disabled.
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
}
NumberSpinnerWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: NumberSpinnerWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NumberSpinnerWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: NumberSpinnerWidgetComponent, selector: "tanj-number-spinner-widget", inputs: { value: "value", labelPosition: "labelPosition", disabled: "disabled", hideLabel: "hideLabel", onlyLabel: "onlyLabel", label: "label", defaultValue: "defaultValue", max: "max", min: "min", step: "step" }, outputs: { valueChange: "valueChange", change: "change" }, host: { properties: { "attr.flex": "this.flex", "attr.layout": "this.flexLayout", "attr.layout-align": "this.flexLayoutAlign" } }, providers: [TANJ_NUMBER_SPINNER_WIDGET_VIEW_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: `<!-- -->
<div flex
class="tanj-input-template tanj-mode-edit"
[ngClass]="{'tanj-disabled': disabled}"
layout="row" layout-align="center center">
<span *ngIf="!hideLabel && labelPosition == 'before'" class="tanj-label tanj-before tanj-number-spinner-label">{{label}}</span>
<div flex class="tanj-widget-input" layout="column" layout-align="start center">
<div *ngIf="!onlyLabel"
class="tanj-input-spinner-field"
layout="column"
layout-align="start"
(swipeUp)="swipeUp($event)"
(swipeDown)="swipeDown($event)">
<tanj-icon align="center"
font="material-icons"
ligature="arrow_drop_up"
(click)="$event.stopPropagation(); $event.preventDefault(); onNextValueRequest()"></tanj-icon>
<div class="tanj-spinner-value tanj-previous ">{{previousValue() | number:'1.0-0'}}</div>
<div *ngIf="!keyboardInputToggled"
class="tanj-spinner-value tanj-current"
(click)="onKeyboardInputRequest($event)">{{value | number:'1.0-0'}}
</div>
<input *ngIf="keyboardInputToggled"
class="tanj-spinner-value tanj-current tanj-spinner-keyboard-input-toggled tanj-raw-input tanj-number"
type="number"
min="{{min}}"
max="{{max}}"
step="{{step}}"
[(ngModel)]="value"
autofocus
(blur)="keyboardInputToggled = false">
<div class="tanj-spinner-value tanj-next">{{nextValue() | number:'1.0-0'}}</div>
<tanj-icon align="center"
font="material-icons"
ligature="arrow_drop_down"
(click)="$event.stopPropagation(); $event.preventDefault(); onPreviousValueRequest()"></tanj-icon>
</div>
<span *ngIf="!hideLabel && labelPosition == 'below'" class="tanj-label tanj-below tanj-number-spinner-label">{{label}}</span>
</div>
<span *ngIf="!hideLabel && labelPosition == 'after'"
class="tanj-label tanj-after tanj-number-spinner-label">{{label}}</span>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.IconComponent, selector: "tanj-icon", inputs: ["icon", "align", "font", "ligature", "disabled", "label"], outputs: ["click"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: NumberSpinnerWidgetComponent, decorators: [{
type: Component,
args: [{
selector: 'tanj-number-spinner-widget',
template: `<!-- -->
<div flex
class="tanj-input-template tanj-mode-edit"
[ngClass]="{'tanj-disabled': disabled}"
layout="row" layout-align="center center">
<span *ngIf="!hideLabel && labelPosition == 'before'" class="tanj-label tanj-before tanj-number-spinner-label">{{label}}</span>
<div flex class="tanj-widget-input" layout="column" layout-align="start center">
<div *ngIf="!onlyLabel"
class="tanj-input-spinner-field"
layout="column"
layout-align="start"
(swipeUp)="swipeUp($event)"
(swipeDown)="swipeDown($event)">
<tanj-icon align="center"
font="material-icons"
ligature="arrow_drop_up"
(click)="$event.stopPropagation(); $event.preventDefault(); onNextValueRequest()"></tanj-icon>
<div class="tanj-spinner-value tanj-previous ">{{previousValue() | number:'1.0-0'}}</div>
<div *ngIf="!keyboardInputToggled"
class="tanj-spinner-value tanj-current"
(click)="onKeyboardInputRequest($event)">{{value | number:'1.0-0'}}
</div>
<input *ngIf="keyboardInputToggled"
class="tanj-spinner-value tanj-current tanj-spinner-keyboard-input-toggled tanj-raw-input tanj-number"
type="number"
min="{{min}}"
max="{{max}}"
step="{{step}}"
[(ngModel)]="value"
autofocus
(blur)="keyboardInputToggled = false">
<div class="tanj-spinner-value tanj-next">{{nextValue() | number:'1.0-0'}}</div>
<tanj-icon align="center"
font="material-icons"
ligature="arrow_drop_down"
(click)="$event.stopPropagation(); $event.preventDefault(); onPreviousValueRequest()"></tanj-icon>
</div>
<span *ngIf="!hideLabel && labelPosition == 'below'" class="tanj-label tanj-below tanj-number-spinner-label">{{label}}</span>
</div>
<span *ngIf="!hideLabel && labelPosition == 'after'"
class="tanj-label tanj-after tanj-number-spinner-label">{{label}}</span>
</div>
`,
providers: [TANJ_NUMBER_SPINNER_WIDGET_VIEW_CONTROL_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { flex: [{
type: HostBinding,
args: ['attr.flex']
}], flexLayout: [{
type: HostBinding,
args: ['attr.layout']
}], flexLayoutAlign: [{
type: HostBinding,
args: ['attr.layout-align']
}], value: [{
type: Input
}], valueChange: [{
type: Output
}], labelPosition: [{
type: Input
}], disabled: [{
type: Input
}], hideLabel: [{
type: Input
}], onlyLabel: [{
type: Input
}], label: [{
type: Input
}], defaultValue: [{
type: Input
}], max: [{
type: Input
}], min: [{
type: Input
}], step: [{
type: Input
}], change: [{
type: Output
}] } });
class DurationPickerDialogResult {
constructor() {
this.success = false;
this.millis = 0;
}
}
class DurationPickerDialog {
constructor(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.flex = '';
this.flexLayout = 'column';
this.flexLayoutAlign = 'start';
this.result = new DurationPickerDialogResult();
this.state = data.state;
}
onValueChange(field) {
console.log('DurationPickerDialog', 'onValueChange', field);
}
onCancelRequest() {
this.dialogRef.close(this.result);
}
onOkRequest() {
this.result.success = true;
this.result.millis = this.state.millis;
this.dialogRef.close(this.result);
}
}
DurationPickerDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: DurationPickerDialog, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
DurationPickerDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: DurationPickerDialog, selector: "duration-picker-dialog", host: { properties: { "attr.flex": "this.flex", "attr.layout": "this.flexLayout", "attr.layout-align": "this.flexLayoutAlign" } }, ngImport: i0, template: "<div flex class=\"tanj-duration-picker-dialog-body\" layout=\"column\" layout-align=\"start\">\n <div flex class=\"\" layout=\"row\" layout-align=\"space-around\">\n\n <tanj-number-spinner-widget flex *ngFor=\"let field of state.selectedFields()\"\n [(ngModel)]=\"field.value\"\n [label]=\"field.label\"\n [labelPosition]=\"'below'\"\n [max]=\"field.max\"\n [min]=\"0\"\n (change)=\"onValueChange(field)\"></tanj-number-spinner-widget>\n </div>\n</div>\n<div layout=\"column\" layout-align=\"end\">\n <div flex class='tanj-button-footer' layout=\"row\" layout-align=\"center\">\n <a flex mat-raised-button color=\"accent\" class=\"tanj-cancel\" (click)=\"onCancelRequest()\">Cancel</a>\n <a flex mat-raised-button color=\"primary\" class=\"tanj-ok\" (click)=\"onOkRequest()\">Set</a>\n </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NumberSpinnerWidgetComponent, selector: "tanj-number-spinner-widget", inputs: ["value", "labelPosition", "disabled", "hideLabel", "onlyLabel", "label", "defaultValue", "max", "min", "step"], outputs: ["valueChange", "change"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: DurationPickerDialog, decorators: [{
type: Component,
args: [{ selector: 'duration-picker-dialog', encapsulation: ViewEncapsulation.None, template: "<div flex class=\"tanj-duration-picker-dialog-body\" layout=\"column\" layout-align=\"start\">\n <div flex class=\"\" layout=\"row\" layout-align=\"space-around\">\n\n <tanj-number-spinner-widget flex *ngFor=\"let field of state.selectedFields()\"\n