@tangential/configurable-input-widgets/fesm2015/tangential-configurable-input-widgets.mjs

Input Widgets with persistable, dynamic configuration.

import { ObjectUtil, Hacks } from '@tangential/core';
import { BaseMediaType, StampedMediaType } from '@tangential/media-types';
import moment from 'moment';
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewEncapsulation, HostBinding, Input, Output, Injectable, Directive, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@tangential/input-widgets';
import { TanjInputWidgetModule } from '@tangential/input-widgets';
import * as i2$1 from '@angular/material/dialog';
import * as i4 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i5 from '@tangential/components';
import { TanjComponentsModule } from '@tangential/components';
import { FormsModule } from '@angular/forms';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatInputModule } from '@angular/material/input';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSliderModule } from '@angular/material/slider';

const Model$k = {
    value: null
};
class ConfigurableInputIval extends BaseMediaType {
    constructor(config, key) {
        super(config, key);
    }
    get uiValue() {
        return '' + this.value;
    }
    set uiValue(val) {
        this.value = val;
    }
}
ConfigurableInputIval.$model = ObjectUtil.assignDeep({}, BaseMediaType.$model, Model$k);

const Model$j = {
    value: false
};
class BooleanIval extends ConfigurableInputIval {
    constructor(cfg, key) {
        super(cfg, key);
        this.value = (cfg.value === true);
    }
}
BooleanIval.$model = ObjectUtil.assignDeep({}, ConfigurableInputIval.$model, Model$j);

const inputTypeRegistry = {};
const Model$i = {
    _inputTypeKey: null,
    defaultValue: null
};
class ConfigurableInputType extends StampedMediaType {
    constructor(config, key) {
        super(config, key);
        this._inputTypeKey = this.getInputTypeKey();
    }
    static register(inputTypeCtor) {
        inputTypeRegistry[inputTypeCtor['TYPE_NAME']] = inputTypeCtor;
    }
    static create(typeConfig, key, inputTypeKey) {
        typeConfig = typeConfig || {};
        key = key || typeConfig.$key;
        inputTypeKey = inputTypeKey || typeConfig._inputTypeKey;
        return new inputTypeRegistry[inputTypeKey](typeConfig, key);
    }
}
ConfigurableInputType.$model = ObjectUtil.assignDeep({}, StampedMediaType.$model, Model$i);

const Model$h = {
    defaultValue: false
};
class BooleanType extends ConfigurableInputType {
    constructor(config, key) {
        super(config || {}, key);
    }
    getInputTypeKey() {
        return BooleanType.TYPE_NAME;
    }
    isNumeric() {
        return false;
    }
    createValue(cfg, key) {
        cfg = cfg || {};
        return new BooleanIval({
            value: (cfg.value === true || cfg.value === false) ? cfg.value : this.defaultValue
        }, key || this.$key);
    }
}
BooleanType.$model = ObjectUtil.assignDeep({}, ConfigurableInputType.$model, Model$h);
BooleanType.TYPE_NAME = 'Boolean';
ConfigurableInputType.register(BooleanType);

const BROWSER_DATE_TIME_LOCAL_FORMAT$1 = 'YYYY-MM-DDTHH:mm';
const Model$g = {
    value: 0,
    recordedInTimeZone: 'GMT'
};
class DateTimeIval extends ConfigurableInputIval {
    constructor(config, key) {
        super(config, key);
        this.value = config.value || 0;
    }
    get uiValue() {
        return moment(this.value).format(BROWSER_DATE_TIME_LOCAL_FORMAT$1);
    }
    set uiValue(val) {
        this.value = moment(val, BROWSER_DATE_TIME_LOCAL_FORMAT$1).valueOf();
    }
}
DateTimeIval.$model = ObjectUtil.assignDeep({}, ConfigurableInputIval.$model, Model$g);

const BROWSER_DATE_TIME_LOCAL_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
const Model$f = {
    afterMils: null,
    beforeMils: null,
    defaultValue: null,
    defaultToNow: true
};
class DateTimeType extends ConfigurableInputType {
    constructor(config, key) {
        super(config || {}, key);
    }
    getInputTypeKey() {
        return DateTimeType.TYPE_NAME;
    }
    get uiValue() {
        return moment(this.defaultValue).format(BROWSER_DATE_TIME_LOCAL_FORMAT);
    }
    set uiValue(val) {
        this.defaultValue = moment(val, BROWSER_DATE_TIME_LOCAL_FORMAT).valueOf();
    }
    isNumeric() {
        return false;
    }
    createValue(cfg, key) {
        cfg = cfg || {};
        return new DateTimeIval({
            value: cfg.value || this.getDefaultValue(),
            recordedInTimeZone: cfg.recordedInTimeZone || 'GMT'
        }, key || this.$key);
    }
    getDefaultValue() {
        return this.defaultToNow ? Date.now() : this.defaultValue;
    }
}
DateTimeType.$model = ObjectUtil.assignDeep({}, ConfigurableInputType.$model, Model$f);
DateTimeType.TYPE_NAME = 'DateTime';
ConfigurableInputType.register(DateTimeType);

const Model$e = {
    value: 0
};
class NumberIval extends ConfigurableInputIval {
    constructor(config, key) {
        super(config = config || {}, key);
        this.value = config.value || 0;
    }
}
NumberIval.$model = ObjectUtil.assignDeep({}, ConfigurableInputIval.$model, Model$e);

const Model$d = {
    min: 0,
    max: 100,
    step: 1,
    decimalPlaces: 1,
    defaultValue: 50
};
class NumberType extends ConfigurableInputType {
    constructor(config, key) {
        super(config || {}, key);
    }
    getInputTypeKey() {
        return NumberType.TYPE_NAME;
    }
    isNumeric() {
        return true;
    }
    createValue(cfg, key) {
        cfg = cfg || {};
        return new NumberIval({
            value: isNumeric(cfg.value) ? cfg.value : this.defaultValue
        }, key || this.$key);
    }
}
NumberType.$model = ObjectUtil.assignDeep({}, ConfigurableInputType.$model, Model$d);
NumberType.TYPE_NAME = 'Number';
// Was once exposed. Alas. Thanks to https://github.com/angular/angular/blob/4.3.x/packages/common/src/pipes/number_pipe.ts#L172
function isNumeric(value) {
    return !isNaN(value - parseFloat(value));
}
ConfigurableInputType.register(NumberType);

const Model$c = {
    max: null,
    step: 1000,
    decimalPlaces: 0,
    defaultValue: 0
};
class DurationType extends NumberType {
    constructor(config, key) {
        super(config || {}, key);
    }
    getInputTypeKey() {
        return DurationType.TYPE_NAME;
    }
    createValue(cfg, key) {
        cfg = cfg || {};
        return new NumberIval({
            value: isNumeric(cfg.value) ? cfg.value : this.defaultValue
        }, key || this.$key);
    }
}
DurationType.$model = ObjectUtil.assignDeep({}, ConfigurableInputType.$model, Model$c);
DurationType.TYPE_NAME = 'Duration';
ConfigurableInputType.register(DurationType);

const Model$b = {
    value: ''
};
class TextIval extends ConfigurableInputIval {
    constructor(config, key) {
        super(config, key);
        this.value = config.value || '';
    }
}
TextIval.$model = ObjectUtil.assignDeep({}, ConfigurableInputIval.$model, Model$b);

/**
 * == Reporting
 * Text types can represent things like:
 *  * Quick notes, such as idea, or a Capture for 'I met a new person', and the persons name is the value.
 *  * Mood / Feeling
 *  * Name of a food eaten
 *  * Name of a place visited.
 *  * Name of a medication taken.
 *
 *
 * === Charts/Graphs
 * A text value is hard to plot in isolation. But consider the case of 'met a person'. In this case we could
 * plot time on the horizontal axis and number of people met per range. This would become a stacked bar chart?
 *
 * For something like mood, let's consider two cases:
 *   1) The capture is 'When' and 'Mood'. In this case we can have an arbitrary number of points in a day,
 *   and the user is probably going to want to correlate this value to time of day.
 *   - Go with a scatter plot, with days of the week on the X and hour of day on the Y, with the field as the point
 *     label.
 *   2) The capture is 'When', 'Feeling<text>', 'Weight<numeric>'.
 *
 */
const Model$a = {
    maxLength: 50,
    minLength: 0,
    defaultValue: null
};
class TextType extends ConfigurableInputType {
    constructor(config) {
        super(config || {});
    }
    getInputTypeKey() {
        return TextType.TYPE_NAME;
    }
    isNumeric() {
        return false;
    }
    createValue(cfg, key) {
        cfg = cfg || {};
        return new TextIval({
            value: cfg.value || this.defaultValue
        }, key || this.$key);
    }
}
TextType.$model = ObjectUtil.assignDeep({}, ConfigurableInputType.$model, Model$a);
TextType.TYPE_NAME = 'Text';
ConfigurableInputType.register(TextType);

const InputViewModes = {
    CONFIGURE: 'CONFIGURE',
    EDIT: 'EDIT',
    PREVIEW: 'PREVIEW',
    VIEW: 'VIEW',
};

const Model$9 = {
    $isSystem: false,
    _inputName: null,
    orderIndex: null,
    disabled: false,
    label: 'Label for this value',
    typeConfig: null
};
const inputConfigRegistry = {};
class InputConfig extends StampedMediaType {
    constructor(_inputName, config, key) {
        super(config, key);
        this._inputName = _inputName;
        this.typeConfig = ConfigurableInputType.create(this.typeConfig);
        if (this.$key === 'when') {
            this.$isSystem = true;
        }
    }
    static register(inputConfigCtor) {
        inputConfigRegistry[inputConfigCtor['INPUT_NAME']] = inputConfigCtor;
    }
    static create(config, key, inputName) {
        key = key || (config ? config.$key : null);
        inputName = inputName || (config ? config._inputName : null);
        return new inputConfigRegistry[inputName](config, key);
    }
}
InputConfig.$model = ObjectUtil.assignDeep({}, StampedMediaType.$model, Model$9);

const Model$8 = {
    label: 'Checkbox',
    labelPosition: 'before',
    disabled: false,
    typeConfig: {
        _inputTypeKey: BooleanType.TYPE_NAME,
        defaultValue: false
    }
};
const demoConfig$8 = ObjectUtil.assignDeep({}, Model$8, {
    label: 'Checkbox',
    labelPosition: 'before',
    typeConfig: {}
});
class CheckboxWidgetConfig extends InputConfig {
    constructor(config, key) {
        super(CheckboxWidgetConfig.INPUT_NAME, config, key);
        this.typeConfig = new BooleanType(this.typeConfig);
    }
    getDemoInstance() {
        return new CheckboxWidgetConfig(demoConfig$8);
    }
}
CheckboxWidgetConfig.$model = ObjectUtil.assignDeep({}, InputConfig.$model, Model$8);
CheckboxWidgetConfig.INPUT_NAME = 'Checkbox';
InputConfig.register(CheckboxWidgetConfig);

class CheckboxWidgetTemplateComponent {
    constructor(changeDetectorRef) {
        this.changeDetectorRef = changeDetectorRef;
        this.flex = '';
        this.flexLayout = 'column';
        this.flexLayoutAlign = 'start';
        this.mode = InputViewModes.VIEW;
        this.change = new EventEmitter(false);
        this.viewModes = InputViewModes;
    }
    ngOnInit() {
        Hacks.materialDesignPlaceholderText(this.changeDetectorRef);
    }
}
CheckboxWidgetTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: CheckboxWidgetTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
CheckboxWidgetTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: CheckboxWidgetTemplateComponent, selector: "tanj-checkbox-widget-template", inputs: { config: "config", ival: "ival", mode: "mode" }, outputs: { change: "change" }, host: { properties: { "attr.flex": "this.flex", "attr.layout": "this.flexLayout", "attr.layout-align": "this.flexLayoutAlign" } }, ngImport: i0, template: `
                   <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
                     <tanj-checkbox-widget
                       [labelPosition]="config.labelPosition"
                       [disabled]=" mode == viewModes.PREVIEW || config.disabled"
                       [(value)]="ival.value"
                       [label]="config.label"
                       [defaultValue]="config.typeConfig.defaultValue">
                     </tanj-checkbox-widget>
                   </ng-container>
                   <ng-container *ngIf="mode == viewModes.CONFIGURE">
                     <tanj-checkbox-widget-configure
                       [labelPosition]="config.labelPosition"
                       [disabled]="config.disabled"
                       [(value)]="ival.value"
                       [(label)]="config.label"
                       [(defaultValue)]="config.typeConfig.defaultValue">
                     </tanj-checkbox-widget-configure>
                   </ng-container>
                 `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CheckboxWidgetComponent, selector: "tanj-checkbox-widget", inputs: ["value", "labelPosition", "disabled", "hideLabel", "onlyLabel", "label", "defaultValue"], outputs: ["valueChange", "change"] }, { kind: "component", type: i2.CheckboxWidgetConfigureComponent, selector: "tanj-checkbox-widget-configure", inputs: ["value", "labelPosition", "disabled", "label", "defaultValue"], outputs: ["valueChange", "labelChange", "defaultValueChange", "change"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: CheckboxWidgetTemplateComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'tanj-checkbox-widget-template',
                    template: `
                   <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
                     <tanj-checkbox-widget
                       [labelPosition]="config.labelPosition"
                       [disabled]=" mode == viewModes.PREVIEW || config.disabled"
                       [(value)]="ival.value"
                       [label]="config.label"
                       [defaultValue]="config.typeConfig.defaultValue">
                     </tanj-checkbox-widget>
                   </ng-container>
                   <ng-container *ngIf="mode == viewModes.CONFIGURE">
                     <tanj-checkbox-widget-configure
                       [labelPosition]="config.labelPosition"
                       [disabled]="config.disabled"
                       [(value)]="ival.value"
                       [(label)]="config.label"
                       [(defaultValue)]="config.typeConfig.defaultValue">
                     </tanj-checkbox-widget-configure>
                   </ng-container>
                 `,
                    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']
            }], config: [{
                type: Input
            }], ival: [{
                type: Input
            }], mode: [{
                type: Input
            }], change: [{
                type: Output
            }] } });

const Model$7 = {
    label: 'Date & Time',
    labelPosition: 'before',
    disabled: false,
    format: 'YYYY-MM-dd HH:mm:ss',
    typeConfig: {
        _inputTypeKey: NumberType.TYPE_NAME,
        defaultToNow: true,
        beforeMils: null,
        afterMils: null,
        defaultValue: moment().startOf('hour').valueOf()
    }
};
const demoConfig$7 = Object.assign({}, Model$7);
console.log('Loading DateTimeInputConfig', '');
class DateTimeInputConfig extends InputConfig {
    constructor(config, key) {
        super(DateTimeInputConfig.INPUT_NAME, config || {}, key);
        this.typeConfig = new DateTimeType(this.typeConfig);
    }
    getDemoInstance() {
        return new DateTimeInputConfig(demoConfig$7);
    }
}
DateTimeInputConfig.$model = ObjectUtil.assignDeep({}, InputConfig.$model, Model$7);
DateTimeInputConfig.INPUT_NAME = 'DateTimeInput';
InputConfig.register(DateTimeInputConfig);

class DateTimeTemplateComponent {
    constructor(changeDetectorRef) {
        this.changeDetectorRef = changeDetectorRef;
        this.mode = null;
        this.change = new EventEmitter(false);
        this.viewModes = InputViewModes;
    }
    ngOnInit() {
        Hacks.materialDesignPlaceholderText(this.changeDetectorRef);
    }
}
DateTimeTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: DateTimeTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
DateTimeTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: DateTimeTemplateComponent, selector: "ng-component", inputs: { config: "config", ival: "ival", mode: "mode" }, outputs: { change: "change" }, ngImport: i0, template: `<!-- -->
  <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
    <tanj-date-time-widget [labelPosition]="config.labelPosition"
                          [disabled]="mode === viewModes.PREVIEW || config.disabled"
                          [label]="config.label"
                          [(value)]="ival.value"
                          [defaultToNow]="config.typeConfig.defaultToNow"
                          [defaultValue]="config.typeConfig.defaultValue">

    </tanj-date-time-widget>
  </ng-container>
  <ng-container *ngIf="mode == viewModes.CONFIGURE">
    <tanj-date-time-configure
      [labelPosition]="config.labelPosition"
      [(label)]="config.label"
      [(value)]="ival.value"
      [(defaultValue)]="config.typeConfig.defaultValue"
      [(defaultToNow)]="config.typeConfig.defaultToNow">
    </tanj-date-time-configure>
  </ng-container>

                 `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DateTimeWidgetComponent, selector: "tanj-date-time-widget", inputs: ["value", "labelPosition", "disabled", "hideLabel", "onlyLabel", "label", "defaultToNow", "defaultValue", "maxLength", "minLength"], outputs: ["valueChange", "change"] }, { kind: "component", type: i2.DateTimeWidgetConfigureComponent, selector: "tanj-date-time-configure", inputs: ["value", "labelPosition", "disabled", "label", "defaultValue", "defaultToNow"], outputs: ["valueChange", "labelChange", "defaultValueChange", "defaultToNowChange", "change"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: DateTimeTemplateComponent, decorators: [{
            type: Component,
            args: [{
                    template: `<!-- -->
  <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
    <tanj-date-time-widget [labelPosition]="config.labelPosition"
                          [disabled]="mode === viewModes.PREVIEW || config.disabled"
                          [label]="config.label"
                          [(value)]="ival.value"
                          [defaultToNow]="config.typeConfig.defaultToNow"
                          [defaultValue]="config.typeConfig.defaultValue">

    </tanj-date-time-widget>
  </ng-container>
  <ng-container *ngIf="mode == viewModes.CONFIGURE">
    <tanj-date-time-configure
      [labelPosition]="config.labelPosition"
      [(label)]="config.label"
      [(value)]="ival.value"
      [(defaultValue)]="config.typeConfig.defaultValue"
      [(defaultToNow)]="config.typeConfig.defaultToNow">
    </tanj-date-time-configure>
  </ng-container>

                 `,
                    encapsulation: ViewEncapsulation.None
                }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                type: Input
            }], ival: [{
                type: Input
            }], mode: [{
                type: Input
            }], change: [{
                type: Output
            }] } });

const Model$6 = {
    label: 'Duration',
    labelPosition: 'before',
    showDurationFields: null,
    typeConfig: {
        _inputTypeKey: DurationType.TYPE_NAME,
        defaultValue: 0
    }
};
const demoConfig$6 = Object.assign({}, Model$6);
class DurationPickerConfig extends InputConfig {
    constructor(config, key) {
        super(DurationPickerConfig.INPUT_NAME, config || {}, key);
        this.labelPosition = 'before';
        this.typeConfig = new DurationType(this.typeConfig);
        if (!this.showDurationFields) {
            this.showDurationFields = {
                min: true,
                s: true,
                ms: true
            };
        }
    }
    getDemoInstance() {
        return new DurationPickerConfig(demoConfig$6);
    }
}
DurationPickerConfig.$model = ObjectUtil.assignDeep({}, InputConfig.$model, Model$6);
DurationPickerConfig.INPUT_NAME = 'DurationPickerConfig';
InputConfig.register(DurationPickerConfig);

class DurationPickerTemplateComponent {
    constructor(changeDetectorRef) {
        this.changeDetectorRef = changeDetectorRef;
        this.mode = null;
        this.change = new EventEmitter(false);
        this.viewModes = InputViewModes;
    }
    ngOnInit() {
        Hacks.materialDesignPlaceholderText(this.changeDetectorRef);
    }
}
DurationPickerTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: DurationPickerTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
DurationPickerTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: DurationPickerTemplateComponent, selector: "ng-component", inputs: { config: "config", ival: "ival", mode: "mode" }, outputs: { change: "change" }, ngImport: i0, template: `<!-- -->
  <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
    <tanj-duration-picker-widget
      [(value)]="ival.value"
      [labelPosition]="config.labelPosition"
      [disabled]="mode === viewModes.PREVIEW || config.disabled"
      [label]="config.label"
      [showDays]="config?.showDurationFields.day"
      [showHours]="config?.showDurationFields.h"
      [showMinutes]="config?.showDurationFields.min"
      [showSeconds]="config?.showDurationFields.s"
      [showMilliseconds]="config?.showDurationFields.ms"
      [max]="config.typeConfig.max">

    </tanj-duration-picker-widget>
  </ng-container>
  <ng-container *ngIf="mode == viewModes.CONFIGURE">
    <tanj-duration-picker-widget-configure
      [labelPosition]="config.labelPosition"
      [(label)]="config.label"
      [(value)]="ival.value"
      [(defaultValue)]="config.typeConfig.defaultValue"
      [(showDays)]="config?.showDurationFields.day"
      [(showHours)]="config?.showDurationFields.h"
      [(showMinutes)]="config?.showDurationFields.min"
      [(showSeconds)]="config?.showDurationFields.s"
      [(showMilliseconds)]="config?.showDurationFields.ms"
      [(max)]="config.typeConfig.max">

    </tanj-duration-picker-widget-configure>
  </ng-container>

                 `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DurationPickerWidgetComponent, selector: "tanj-duration-picker-widget", inputs: ["value", "labelPosition", "disabled", "hideLabel", "onlyLabel", "label", "defaultValue", "max", "showDays", "showHours", "showMinutes", "showSeconds", "showMilliseconds"], outputs: ["valueChange", "change"] }, { kind: "component", type: i2.DurationPickerWidgetConfigureComponent, selector: "tanj-duration-picker-widget-configure", inputs: ["value", "labelPosition", "disabled", "label", "defaultValue", "max", "showDays", "showHours", "showMinutes", "showSeconds", "showMilliseconds"], outputs: ["valueChange", "labelChange", "defaultValueChange", "maxChange", "showDaysChange", "showHoursChange", "showMinutesChange", "showSecondsChange", "showMillisecondsChange", "change"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: DurationPickerTemplateComponent, decorators: [{
            type: Component,
            args: [{
                    template: `<!-- -->
  <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
    <tanj-duration-picker-widget
      [(value)]="ival.value"
      [labelPosition]="config.labelPosition"
      [disabled]="mode === viewModes.PREVIEW || config.disabled"
      [label]="config.label"
      [showDays]="config?.showDurationFields.day"
      [showHours]="config?.showDurationFields.h"
      [showMinutes]="config?.showDurationFields.min"
      [showSeconds]="config?.showDurationFields.s"
      [showMilliseconds]="config?.showDurationFields.ms"
      [max]="config.typeConfig.max">

    </tanj-duration-picker-widget>
  </ng-container>
  <ng-container *ngIf="mode == viewModes.CONFIGURE">
    <tanj-duration-picker-widget-configure
      [labelPosition]="config.labelPosition"
      [(label)]="config.label"
      [(value)]="ival.value"
      [(defaultValue)]="config.typeConfig.defaultValue"
      [(showDays)]="config?.showDurationFields.day"
      [(showHours)]="config?.showDurationFields.h"
      [(showMinutes)]="config?.showDurationFields.min"
      [(showSeconds)]="config?.showDurationFields.s"
      [(showMilliseconds)]="config?.showDurationFields.ms"
      [(max)]="config.typeConfig.max">

    </tanj-duration-picker-widget-configure>
  </ng-container>

                 `,
                    encapsulation: ViewEncapsulation.None
                }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                type: Input
            }], ival: [{
                type: Input
            }], mode: [{
                type: Input
            }], change: [{
                type: Output
            }] } });

const defaultIconCount = 5;
const Model$5 = {
    label: 'Rating',
    labelPosition: 'below',
    iconFont: 'material-icons',
    offIconNames: [
        'star_border'
    ],
    onIconNames: [
        'star'
    ],
    disabled: false,
    typeConfig: {
        _inputTypeKey: NumberType.TYPE_NAME,
        defaultValue: defaultIconCount - 1,
        min: 0,
        max: defaultIconCount,
        step: 1,
        decimalPlaces: 0,
    }
};
const demoConfig$5 = Object.assign({}, Model$5);
class IconRatingWidgetConfig extends InputConfig {
    constructor(config, key) {
        super(IconRatingWidgetConfig.INPUT_NAME, config || {}, key);
        this.typeConfig = new NumberType(this.typeConfig);
        if (this.typeConfig.max > 10) {
            this.typeConfig.max = 10;
        }
    }
    getDemoInstance() {
        return new IconRatingWidgetConfig(demoConfig$5);
    }
}
IconRatingWidgetConfig.$model = ObjectUtil.assignDeep({}, InputConfig.$model, Model$5);
IconRatingWidgetConfig.INPUT_NAME = 'IconRatingWidget';
InputConfig.register(IconRatingWidgetConfig);

class IconRatingWidgetTemplateComponent {
    constructor(changeDetectorRef) {
        this.changeDetectorRef = changeDetectorRef;
        this.flex = '';
        this.flexLayout = 'column';
        this.flexLayoutAlign = 'start';
        this.mode = InputViewModes.VIEW;
        this.change = new EventEmitter(false);
        this.viewModes = InputViewModes;
    }
    ngOnInit() {
        Hacks.materialDesignPlaceholderText(this.changeDetectorRef);
    }
    emitChangeEvent() {
        this.change.emit();
    }
}
IconRatingWidgetTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: IconRatingWidgetTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
IconRatingWidgetTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: IconRatingWidgetTemplateComponent, selector: "tanj-icon-rating-widget-template", inputs: { config: "config", ival: "ival", mode: "mode" }, outputs: { change: "change" }, host: { properties: { "attr.flex": "this.flex", "attr.layout": "this.flexLayout", "attr.layout-align": "this.flexLayoutAlign" } }, ngImport: i0, template: `
                   <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
                     <tanj-icon-rating-widget
                       [labelPosition]="config.labelPosition"
                       [disabled]=" mode == viewModes.PREVIEW || config.disabled"
                       [(value)]="ival.value"
                       [label]="config.label"
                       [defaultValue]="config.typeConfig.defaultValue"
                       [max]="config.typeConfig.max"
                       [iconFont]="config.iconFont"
                       [offIconNames]="config.offIconNames"
                       [onIconNames]="config.onIconNames">
                     </tanj-icon-rating-widget>
                   </ng-container>
                   <ng-container *ngIf="mode == viewModes.CONFIGURE">
                     <tanj-icon-rating-widget-configure
                       [labelPosition]="config.labelPosition"
                       [disabled]="config.disabled"
                       [(value)]="ival.value"
                       [(label)]="config.label"
                       [(defaultValue)]="config.typeConfig.defaultValue"
                       [(max)]="config.typeConfig.max"
                       [(iconFont)]="config.iconFont"
                       [(offIconNames)]="config.offIconNames"
                       [(onIconNames)]="config.onIconNames">
                     </tanj-icon-rating-widget-configure>
                   </ng-container>
                 `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconRatingWidgetComponent, selector: "tanj-icon-rating-widget", inputs: ["value", "labelPosition", "disabled", "hideLabel", "onlyLabel", "label", "defaultValue", "max", "iconFont", "offIconNames", "onIconNames"], outputs: ["valueChange", "change"] }, { kind: "component", type: i2.IconRatingWidgetConfigureComponent, selector: "tanj-icon-rating-widget-configure", inputs: ["value", "labelPosition", "disabled", "label", "defaultValue", "max", "iconFont", "offIconNames", "onIconNames"], outputs: ["valueChange", "labelChange", "defaultValueChange", "maxChange", "iconFontChange", "offIconNamesChange", "onIconNamesChange", "change"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: IconRatingWidgetTemplateComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'tanj-icon-rating-widget-template',
                    template: `
                   <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
                     <tanj-icon-rating-widget
                       [labelPosition]="config.labelPosition"
                       [disabled]=" mode == viewModes.PREVIEW || config.disabled"
                       [(value)]="ival.value"
                       [label]="config.label"
                       [defaultValue]="config.typeConfig.defaultValue"
                       [max]="config.typeConfig.max"
                       [iconFont]="config.iconFont"
                       [offIconNames]="config.offIconNames"
                       [onIconNames]="config.onIconNames">
                     </tanj-icon-rating-widget>
                   </ng-container>
                   <ng-container *ngIf="mode == viewModes.CONFIGURE">
                     <tanj-icon-rating-widget-configure
                       [labelPosition]="config.labelPosition"
                       [disabled]="config.disabled"
                       [(value)]="ival.value"
                       [(label)]="config.label"
                       [(defaultValue)]="config.typeConfig.defaultValue"
                       [(max)]="config.typeConfig.max"
                       [(iconFont)]="config.iconFont"
                       [(offIconNames)]="config.offIconNames"
                       [(onIconNames)]="config.onIconNames">
                     </tanj-icon-rating-widget-configure>
                   </ng-container>
                 `,
                    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']
            }], config: [{
                type: Input
            }], ival: [{
                type: Input
            }], mode: [{
                type: Input
            }], change: [{
                type: Output
            }] } });

const Model$4 = {
    label: 'Number',
    labelPosition: 'before',
    disabled: false,
    typeConfig: {
        _inputTypeKey: NumberType.TYPE_NAME,
        defaultValue: 0
    }
};
const demoConfig$4 = Object.assign({}, Model$4);
class NumberInputConfig extends InputConfig {
    constructor(config, key) {
        super(NumberInputConfig.INPUT_NAME, config || {}, key);
        this.typeConfig = new NumberType(this.typeConfig);
    }
    getDemoInstance() {
        return new NumberInputConfig(demoConfig$4);
    }
}
NumberInputConfig.$model = ObjectUtil.assignDeep({}, InputConfig.$model, Model$4);
NumberInputConfig.INPUT_NAME = 'NumberInput';
InputConfig.register(NumberInputConfig);

class NumberTemplateComponent {
    constructor(_changeDetector) {
        this._changeDetector = _changeDetector;
        this.mode = null;
        this.change = new EventEmitter(false);
        this.viewModes = InputViewModes;
    }
    ngOnInit() {
        Hacks.materialDesignPlaceholderText(this._changeDetector);
    }
}
NumberTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: NumberTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NumberTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: NumberTemplateComponent, selector: "ng-component", inputs: { config: "config", ival: "ival", mode: "mode" }, outputs: { change: "change" }, ngImport: i0, template: `<!-- -->
  <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
    <tanj-number-widget [labelPosition]="config.labelPosition"
                       [disabled]="mode === viewModes.PREVIEW || config.disabled"
                       [label]="config.label"
                       [(value)]="ival.value"
                       [max]="config.typeConfig.max"
                       [min]="config.typeConfig.min"
                       [decimalPlaces]="config.typeConfig.decimalPlaces"
                       [step]="config.typeConfig.step">

    </tanj-number-widget>
  </ng-container>
  <ng-container *ngIf="mode == viewModes.CONFIGURE">
    <tanj-number-configure
      [labelPosition]="config.labelPosition"
      [(label)]="config.label"
      [(value)]="ival.value"
      [(defaultValue)]="config.typeConfig.defaultValue"
      [(max)]="config.typeConfig.max"
      [(min)]="config.typeConfig.min"
      [(decimalPlaces)]="config.typeConfig.decimalPlaces"
      [(step)]="config.typeConfig.step">

    </tanj-number-configure>
  </ng-container>

                 `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.NumberWidgetComponent, selector: "tanj-number-widget", inputs: ["value", "labelPosition", "disabled", "hideLabel", "onlyLabel", "label", "defaultValue", "max", "min", "step", "decimalPlaces", "tickInterval", "vertical"], outputs: ["valueChange", "change"] }, { kind: "component", type: i2.NumberWidgetConfigureComponent, selector: "tanj-number-configure", inputs: ["value", "labelPosition", "disabled", "label", "defaultValue", "max", "min", "step", "decimalPlaces"], outputs: ["valueChange", "labelChange", "defaultValueChange", "maxChange", "minChange", "stepChange", "decimalPlacesChange", "change"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: NumberTemplateComponent, decorators: [{
            type: Component,
            args: [{
                    template: `<!-- -->
  <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
    <tanj-number-widget [labelPosition]="config.labelPosition"
                       [disabled]="mode === viewModes.PREVIEW || config.disabled"
                       [label]="config.label"
                       [(value)]="ival.value"
                       [max]="config.typeConfig.max"
                       [min]="config.typeConfig.min"
                       [decimalPlaces]="config.typeConfig.decimalPlaces"
                       [step]="config.typeConfig.step">

    </tanj-number-widget>
  </ng-container>
  <ng-container *ngIf="mode == viewModes.CONFIGURE">
    <tanj-number-configure
      [labelPosition]="config.labelPosition"
      [(label)]="config.label"
      [(value)]="ival.value"
      [(defaultValue)]="config.typeConfig.defaultValue"
      [(max)]="config.typeConfig.max"
      [(min)]="config.typeConfig.min"
      [(decimalPlaces)]="config.typeConfig.decimalPlaces"
      [(step)]="config.typeConfig.step">

    </tanj-number-configure>
  </ng-container>

                 `,
                    encapsulation: ViewEncapsulation.None
                }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                type: Input
            }], ival: [{
                type: Input
            }], mode: [{
                type: Input
            }], change: [{
                type: Output
            }] } });

const Model$3 = {
    label: 'Number Slider',
    labelPosition: 'below',
    disabled: false,
    typeConfig: {
        _inputTypeKey: NumberType.TYPE_NAME,
        defaultValue: 0
    }
};
const demoConfig$3 = Object.assign({}, Model$3);
class NumberSliderConfig extends InputConfig {
    constructor(config, key) {
        super(NumberSliderConfig.INPUT_NAME, config || {}, key);
        this.typeConfig = new NumberType(this.typeConfig);
    }
    getDemoInstance() {
        return new NumberSliderConfig(demoConfig$3);
    }
}
NumberSliderConfig.$model = ObjectUtil.assignDeep({}, InputConfig.$model, Model$3);
NumberSliderConfig.INPUT_NAME = 'NumberSlider';
InputConfig.register(NumberSliderConfig);

class NumberSliderTemplateComponent {
    constructor(_changeDetector) {
        this._changeDetector = _changeDetector;
        this.mode = null;
        this.change = new EventEmitter(false);
        this.viewModes = InputViewModes;
    }
    ngOnInit() {
        Hacks.materialDesignPlaceholderText(this._changeDetector);
    }
}
NumberSliderTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: NumberSliderTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NumberSliderTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: NumberSliderTemplateComponent, selector: "ng-component", inputs: { config: "config", ival: "ival", mode: "mode" }, outputs: { change: "change" }, ngImport: i0, template: `<!-- -->
  <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
    <tanj-number-slider-widget [labelPosition]="config.labelPosition"
                              [disabled]="mode === viewModes.PREVIEW || config.disabled"
                              [label]="config.label"
                              [(value)]="ival.value"
                              [max]="config.typeConfig.max"
                              [min]="config.typeConfig.min"
                              [decimalPlaces]="config.typeConfig.decimalPlaces"
                              [step]="config.typeConfig.step">

    </tanj-number-slider-widget>
  </ng-container>
  <ng-container *ngIf="mode == viewModes.CONFIGURE">
    <tanj-number-slider-configure
      [labelPosition]="config.labelPosition"
      [(label)]="config.label"
      [(value)]="ival.value"
      [(defaultValue)]="config.typeConfig.defaultValue"
      [(max)]="config.typeConfig.max"
      [(min)]="config.typeConfig.min"
      [(decimalPlaces)]="config.typeConfig.decimalPlaces"
      [(step)]="config.typeConfig.step">

    </tanj-number-slider-configure>
  </ng-container>

                 `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.NumberSliderWidgetComponent, selector: "tanj-number-slider-widget", inputs: ["value", "labelPosition", "disabled", "hideLabel", "onlyLabel", "label", "defaultValue", "max", "min", "step", "decimalPlaces", "tickInterval", "vertical"], outputs: ["valueChange", "change"] }, { kind: "component", type: i2.NumberSliderWidgetConfigureComponent, selector: "tanj-number-slider-configure", inputs: ["value", "labelPosition", "disabled", "label", "defaultValue", "max", "min", "step", "decimalPlaces"], outputs: ["valueChange", "labelChange", "defaultValueChange", "maxChange", "minChange", "stepChange", "decimalPlacesChange", "change"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: NumberSliderTemplateComponent, decorators: [{
            type: Component,
            args: [{
                    template: `<!-- -->
  <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
    <tanj-number-slider-widget [labelPosition]="config.labelPosition"
                              [disabled]="mode === viewModes.PREVIEW || config.disabled"
                              [label]="config.label"
                              [(value)]="ival.value"
                              [max]="config.typeConfig.max"
                              [min]="config.typeConfig.min"
                              [decimalPlaces]="config.typeConfig.decimalPlaces"
                              [step]="config.typeConfig.step">

    </tanj-number-slider-widget>
  </ng-container>
  <ng-container *ngIf="mode == viewModes.CONFIGURE">
    <tanj-number-slider-configure
      [labelPosition]="config.labelPosition"
      [(label)]="config.label"
      [(value)]="ival.value"
      [(defaultValue)]="config.typeConfig.defaultValue"
      [(max)]="config.typeConfig.max"
      [(min)]="config.typeConfig.min"
      [(decimalPlaces)]="config.typeConfig.decimalPlaces"
      [(step)]="config.typeConfig.step">

    </tanj-number-slider-configure>
  </ng-container>

                 `,
                    encapsulation: ViewEncapsulation.None
                }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                type: Input
            }], ival: [{
                type: Input
            }], mode: [{
                type: Input
            }], change: [{
                type: Output
            }] } });

const Model$2 = {
    label: 'Number Spinner',
    labelPosition: 'before',
    disabled: false,
    typeConfig: {
        _inputTypeKey: NumberType.TYPE_NAME,
        defaultValue: 0
    }
};
const demoConfig$2 = Object.assign({}, Model$2, {
    label: 'Number Spinner'
});
class NumberSpinnerConfig extends InputConfig {
    constructor(config, key) {
        super(NumberSpinnerConfig.INPUT_NAME, config || {}, key);
        this.typeConfig = new NumberType(super.typeConfig);
    }
    getDemoInstance() {
        return new NumberSpinnerConfig(demoConfig$2);
    }
}
NumberSpinnerConfig.$model = ObjectUtil.assignDeep({}, InputConfig.$model, Model$2);
NumberSpinnerConfig.INPUT_NAME = 'NumberSpinner';
InputConfig.register(NumberSpinnerConfig);

class NumberSpinnerTemplateComponent {
    constructor(changeDetectorRef) {
        this.changeDetectorRef = changeDetectorRef;
        this.config = new NumberSpinnerConfig();
        this.ival = NumberType.create({});
        this.mode = InputViewModes.VIEW;
        this.change = new EventEmitter(false);
        this.viewModes = InputViewModes;
    }
    ngOnInit() {
        Hacks.materialDesignPlaceholderText(this.changeDetectorRef);
    }
}
NumberSpinnerTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: NumberSpinnerTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NumberSpinnerTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: NumberSpinnerTemplateComponent, selector: "ng-component", inputs: { config: "config", ival: "ival", mode: "mode" }, outputs: { change: "change" }, ngImport: i0, template: `<!-- -->
  <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
    <tanj-number-spinner-widget [labelPosition]="config.labelPosition"
                               [disabled]="mode === viewModes.PREVIEW || config.disabled"
                               [label]="config.label"
                               [(value)]="ival.value"
                               [max]="config.typeConfig.max"
                               [min]="config.typeConfig.min"
                               [step]="config.typeConfig.step">

    </tanj-number-spinner-widget>
  </ng-container>
  <ng-container *ngIf="mode == viewModes.CONFIGURE">
    <tanj-number-spinner-configure
      [labelPosition]="config.labelPosition"
      [(label)]="config.label"
      [(value)]="ival.value"
      [(defaultValue)]="config.typeConfig.defaultValue"
      [(max)]="config.typeConfig.max"
      [(min)]="config.typeConfig.min"
      [(step)]="config.typeConfig.step">

    </tanj-number-spinner-configure>
  </ng-container>

                 `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.NumberSpinnerWidgetComponent, selector: "tanj-number-spinner-widget", inputs: ["value", "labelPosition", "disabled", "hideLabel", "onlyLabel", "label", "defaultValue", "max", "min", "step"], outputs: ["valueChange", "change"] }, { kind: "component", type: i2.NumberSpinnerWidgetConfigureComponent, selector: "tanj-number-spinner-configure", inputs: ["value", "labelPosition", "disabled", "label", "defaultValue", "max", "min", "step"], outputs: ["valueChange", "labelChange", "defaultValueChange", "decimalChange", "maxChange", "minChange", "stepChange", "change"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: NumberSpinnerTemplateComponent, decorators: [{
            type: Component,
            args: [{
                    template: `<!-- -->
  <ng-container *ngIf="mode == viewModes.VIEW || mode == viewModes.PREVIEW || mode == viewModes.EDIT  ">
    <tanj-number-spinner-widget [labelPosition]="config.labelPosition"
                               [disabled]="mode === viewModes.PREVIEW || config.disabled"
                               [label]="config.label"
                               [(value)]="ival.value"
                               [max]="config.typeConfig.max"
                               [min]="config.typeConfig.min"
                               [step]="config.typeConfig.step">

    </tanj-number-spinner-widget>
  </ng-container>
  <ng-container *ngIf="mode == viewModes.CONFIGURE">
    <tanj-number-spinner-configure
      [labelPosition]="config.labelPosition"
      [(label)]="config.label"
      [(value)]="ival.value"
      [(defaultValue)]="config.typeConfig.defaultValue"
      [(max)]="config.typeConfig.max"
      [(min)]="config.typeConfig.min"
      [(step)]="config.typeConfig.step">

    </tanj-number-spinner-configure>
  </ng-container>

                 `,
                    encapsulation: ViewEncapsulation.None
                }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                type: Input
            }], ival: [{
                type: Input
            }], mode: [{
                type: Input
            }], change: [{
                type: Output
            }] } });

const Model$1 = {
    label: 'Slide Toggle',
    labelPosition: 'before',
    disabled: false,
    typeConfig: {
        _inputTypeKey: BooleanType.TYPE_NAME,
        defaultValue: false
    }
};
const demoConfig$1 = {
    label: 'Slide Toggle',
    labelPosition: 'before',
    disabled: false,
    typeConfig: {
        _inputTypeKey: BooleanType.TYPE_NAME,
        defaultValue: false
    }
};
class SlideToggleConfig exte