import { OnInit, DoCheck, EventEmitter, ElementRef, KeyValueDiffers } from '@angular/core'; import { CfCoreComponent } from '../core/core.component'; import { GaugeModel } from '../../models/gauge/gauge.model'; import { GaugeStylingModel } from '../../models/gauge/gauge-styling.model'; import { TemplateService } from '../../services/template-service/template.service'; /** *

Gauge component is a modification of * Angular gauge * with added label, prefix and suffix elements.

*
 * 
 * import {{'{'}} GaugeModel {{'}'}} from 'cedrus-fusion'
 * import {{'{'}} GaugeStylingModel {{'}'}} from 'cedrus-fusion'
 * <cf-gauge></cf-gauge>
 * 
 * 
*/ export declare class CfGaugeComponent extends CfCoreComponent implements OnInit, DoCheck { elementRef: ElementRef; /** @hidden * Object to register element state and compute differences. */ differ: any; /** @hidden * It is a clone of gauge value to work with calculated effect during gauge animation time. * It is using only inside component functionality. */ _animatedValue: number; _tickInterval: number; _animationValueDirection: string; /** @hidden * It is number of ticks between previous and current gauge value. */ _ticks: number; /** *
{{'{'}}
     *  display: boolean,           // Default: true.
     *  disable: boolean,           // Default: false.
     *  max: number,                // Maximum integer value of gauge. Default: 100.
     *  type: string,               // Type value of gauge. Can be: full, arch, semi. Default: full.
     *  size: number,               // Aanimation duration of gauge in seconds. Default: 150.
     *  value: number,              // Current integer value of gauge. Default: 0.
     *  label: string,              // Label of gauge. Empty string by default.
     *  prefix: string,             // Prefix of gauge. Empty string by default.
     *  suffix: string,             // Suffix of gauge. Empty string by default.
     *  inputValue: boolean,        // Able gauge to input it value. Default: true.
     *  animationDuration: number,  // Size for width/height of gauge. It means number of pixels. Default: 1.
     * {{'}'}}
*/ properties: GaugeModel; /** *

dynamicClass: function() -> string, // Function that returns name of the class

*

class: string // Name of the css class selector

*
     * {{'{'}}
     *  // Component container
     *  container: {{'{'}} class, dynamicClass {{'}'}},
     *  // Gauge svg element
     *  gauge: {{'{'}} class, dynamicClass {{'}'}},
     *  // Value styling
     *  value: {{'{'}} class, dynamicClass {{'}'}},
     *  // Prefix styling
     *  prefix: {{'{'}} class, dynamicClass {{'}'}},
     *  // Suffix styling
     *  suffix: {{'{'}} class, dynamicClass {{'}'}},
     *  // Label styling
     *  label: {{'{'}} class, dynamicClass {{'}'}},
     * 
*/ styling: GaugeStylingModel; /** * Maximum integer value of gauge. Default: 100. */ max: number; /** * Type value of gauge. Can be: full, arch, semi. Default is full. */ type: string; /** * Size for width/height of gauge. It means number of pixels. Default: 150. */ size: number; /** @hidden * Helper property for set value before ngOnInit and change after */ withInputValue: boolean; /** @hidden * Helper property check for first value set */ firstValueChange: boolean; /** * Current integer value of gauge. Default: 0. */ /** @hidden * Setter for the gauge value */ value: number; /** * Label of gauge. Empty string by default. */ label: string; /** * Prefix of gauge. Empty string by default. */ prefix: string; /** * Suffix of gauge. Empty string by default. */ suffix: string; /** * Able gauge to input it value. Default: true. */ inputValue: boolean; /** * Aanimation duration of gauge in seconds. Default: 1. */ animationDuration: number; /** @hidden * Event emiter for updating value input property */ valueChange: EventEmitter<{}>; /** *

Event emited on value change and output value with type number

*/ onChange: EventEmitter; /** @hidden * It is selected type of gauge. It consists of start/end coordinates for svg elements. */ _type: { start: number; end: number; }; /** @hidden * It is an object with all gauges types and their start/end coordinates. */ _types: { 'full': { start: number; end: number; }; 'arch': { start: number; end: number; }; 'semi': { start: number; end: number; }; }; /** @hidden * It is mode in what gauge it is now. * Can be: displaying (standard to display), editing (user is changing value from input field), * clicks (user is changing value by clicking on svg element). */ _mode: string; /** @hidden * It is half of properties size value and it is using to calculate circle values for x axis */ _centerX: number; /** @hidden * It is half of properties size value and it is using to calculate circle values for y axis */ _centerY: number; /** @hidden * It is ratio of user clicked point to properties.max value */ _clickedRatio: number; /** @hidden * It is text value in span tag */ valueToShow: any; /** @hidden * It is container with md-input-container to trigger input state/view changes */ valueToEditContainer: any; /** @hidden * It is original input field */ valueToEdit: any; /** @hidden * Function to calculate valueToEditContainer width according to input width */ _setInputWidth(): void; /** @hidden * Method to set gauge value when user is changing it from input field */ _changeGaugeValue(): void; /** @hidden * Method that shows input field after user click on gauge value number. In that moment span with gauge value is hidden. */ _showInput(): void; /** @hidden * It is function to increase / decrease gauge value from previous to current during animation time. Used only inside component logic. */ private _animatingValue(); /** @hidden * It is function to recalculate value if it was changed during animation time. Used only inside component logic. * @param prev previous value * @param curr current value */ private _animateValueChange(prev, curr); /** @hidden */ private _pickFullTypeValue(eX, eY); /** @hidden */ private _pickArchTypeValue(eX, eY); /** @hidden */ private _pickSemiTypeValue(eX, eY); /** @hidden * Method called after user click on gauge svg element with offsetX and offsetY values of clicked $event */ private _pickValue(eX, eY); /** @hidden */ constructor(elementRef: ElementRef, /**@hidden */ templateService: TemplateService, differs: KeyValueDiffers); /** @hidden */ ngOnInit(): void; /** @hidden *

Update the properties object with the changes on the component inner properties to keep the component dynamic.

*/ ngDoCheck(): void; }