@obliczeniowo/elementary
Version:
Library made in Angular version 20
94 lines (89 loc) • 11.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ColorHSV, ColorRGB } from '@obliczeniowo/elementary/classes';
import { ElementaryMath } from '@obliczeniowo/elementary/math';
var Unit;
(function (Unit) {
Unit["Celsius"] = "\u00B0C";
Unit["Fahrenheit"] = "F";
Unit["Kelvin"] = "K";
})(Unit || (Unit = {}));
class TemperatureComponent {
_value = 0;
max = 100;
min = 0;
/**
* Temperature value get
*/
get value() {
return this._value;
}
/**
* Temperature value set
*/
set value(value) {
this._value = value;
this.fill = ColorHSV.createColorHSVfromRGB(new ColorRGB(0, 100, 255)).addHue(150 * this.k()).convertToRGB();
}
/**
* Unit for temperature (Celsius, Fahrenheit, Kelvin)
*/
unit = Unit.Celsius;
scaleDt = 13.23;
id;
fill = ColorHSV.createColorHSVfromRGB(new ColorRGB(0, 100, 255)).convertToRGB();
get dt() {
return 50 * (1 - this.k());
}
k(value = this.value) {
return (ElementaryMath.minmax(value, this.min, this.max) - this.min) / (this.max - this.min);
}
constructor() {
this.value = 0;
do {
this.id = `temperature${Math.floor(Math.random() * 100000)}`;
} while (document.querySelector(this.id));
}
yScalePos(value) {
return 2.645 + 0.4 + this.scaleDt * (1 - this.k(value));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TemperatureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: TemperatureComponent, isStandalone: false, selector: "obl-temperature", inputs: { max: "max", min: "min", value: "value", unit: "unit" }, ngImport: i0, template: "<svg\n xmlns:svg=\"http://www.w3.org/2000/svg\"\n width=\"80\"\n height=\"160\"\n viewBox=\"0 0 10.583333 21.166667\"\n>\n <defs id=\"defs2\">\n <clipPath [attr.id]=\"id\">\n <rect [attr.y]=\"10 + dt\" x=\"3\" [attr.height]=\"67 - dt\" width=\"14\" />\n </clipPath>\n </defs>\n <g>\n <path\n class=\"outline\"\n d=\"m 2.6458333,1.3229166 c -0.4397375,0 -0.79375,0.3540125 -0.79375,0.79375 V 16.937467 A 1.7717633,1.7717633 0 0 0 0.87384847,18.520833 1.7717633,1.7717633 0 0 0 2.6458333,20.292818 1.7717633,1.7717633 0 0 0 4.4178182,18.520833 1.7717633,1.7717633 0 0 0 3.4395833,16.939017 V 2.1166666 c 0,-0.4397375 -0.3540125,-0.79375 -0.79375,-0.79375 z\"\n />\n <path\n [attr.clip-path]=\"'url(#' + id + ')'\"\n transform=\"scale(0.26458333)\"\n d=\"M 10,6 C 8.8920003,6 8,6.8920003 8,8 V 64.556641 A 5.8035711,5.8035711 0 0 0 4.1972656,70 5.8035711,5.8035711 0 0 0 10,75.802734 5.8035711,5.8035711 0 0 0 15.802734,70 5.8035711,5.8035711 0 0 0 12,64.558594 V 8 C 12,6.8920003 11.108,6 10,6 Z\"\n style=\"stroke-width: 0.5; stroke-linejoin: round\"\n [style.fill]=\"fill.toString()\"\n />\n </g>\n <g>\n <path class=\"outline\" d=\"M 4,2.645 H 5\" />\n <text>\n <tspan\n class=\"text\"\n x=\"5.2\"\n [attr.y]=\"yScalePos(max)\"\n style=\"font-size: 1.5px; text-anchor: start; text-align: start\"\n >\n {{ max }}\n </tspan>\n </text>\n\n <path class=\"outline\" d=\"M 4,15.875 H 5\" />\n\n <text>\n <tspan\n class=\"text\"\n x=\"5.2\"\n [attr.y]=\"yScalePos(min)\"\n style=\"font-size: 1.5px; text-anchor: start; text-align: start\"\n >\n {{ min }}\n </tspan>\n </text>\n\n <text>\n <tspan\n class=\"text\"\n x=\"5\"\n [attr.y]=\"19\"\n style=\"font-size: 1.5px; text-anchor: start; text-align: start\"\n >\n {{ value.toFixed() }} {{ unit }}\n </tspan>\n </text>\n </g>\n</svg>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}.text{fill:var(--temperature-text-color);stroke:none;stroke-width:.13229166}.outline{fill:none;stroke:var(--temperature-path-stroke-color);stroke-width:.132292;stroke-linejoin:round}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TemperatureComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-temperature', standalone: false, template: "<svg\n xmlns:svg=\"http://www.w3.org/2000/svg\"\n width=\"80\"\n height=\"160\"\n viewBox=\"0 0 10.583333 21.166667\"\n>\n <defs id=\"defs2\">\n <clipPath [attr.id]=\"id\">\n <rect [attr.y]=\"10 + dt\" x=\"3\" [attr.height]=\"67 - dt\" width=\"14\" />\n </clipPath>\n </defs>\n <g>\n <path\n class=\"outline\"\n d=\"m 2.6458333,1.3229166 c -0.4397375,0 -0.79375,0.3540125 -0.79375,0.79375 V 16.937467 A 1.7717633,1.7717633 0 0 0 0.87384847,18.520833 1.7717633,1.7717633 0 0 0 2.6458333,20.292818 1.7717633,1.7717633 0 0 0 4.4178182,18.520833 1.7717633,1.7717633 0 0 0 3.4395833,16.939017 V 2.1166666 c 0,-0.4397375 -0.3540125,-0.79375 -0.79375,-0.79375 z\"\n />\n <path\n [attr.clip-path]=\"'url(#' + id + ')'\"\n transform=\"scale(0.26458333)\"\n d=\"M 10,6 C 8.8920003,6 8,6.8920003 8,8 V 64.556641 A 5.8035711,5.8035711 0 0 0 4.1972656,70 5.8035711,5.8035711 0 0 0 10,75.802734 5.8035711,5.8035711 0 0 0 15.802734,70 5.8035711,5.8035711 0 0 0 12,64.558594 V 8 C 12,6.8920003 11.108,6 10,6 Z\"\n style=\"stroke-width: 0.5; stroke-linejoin: round\"\n [style.fill]=\"fill.toString()\"\n />\n </g>\n <g>\n <path class=\"outline\" d=\"M 4,2.645 H 5\" />\n <text>\n <tspan\n class=\"text\"\n x=\"5.2\"\n [attr.y]=\"yScalePos(max)\"\n style=\"font-size: 1.5px; text-anchor: start; text-align: start\"\n >\n {{ max }}\n </tspan>\n </text>\n\n <path class=\"outline\" d=\"M 4,15.875 H 5\" />\n\n <text>\n <tspan\n class=\"text\"\n x=\"5.2\"\n [attr.y]=\"yScalePos(min)\"\n style=\"font-size: 1.5px; text-anchor: start; text-align: start\"\n >\n {{ min }}\n </tspan>\n </text>\n\n <text>\n <tspan\n class=\"text\"\n x=\"5\"\n [attr.y]=\"19\"\n style=\"font-size: 1.5px; text-anchor: start; text-align: start\"\n >\n {{ value.toFixed() }} {{ unit }}\n </tspan>\n </text>\n </g>\n</svg>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}.text{fill:var(--temperature-text-color);stroke:none;stroke-width:.13229166}.outline{fill:none;stroke:var(--temperature-path-stroke-color);stroke-width:.132292;stroke-linejoin:round}\n"] }]
}], ctorParameters: () => [], propDecorators: { max: [{
type: Input
}], min: [{
type: Input
}], value: [{
type: Input
}], unit: [{
type: Input
}] } });
class TemperatureModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TemperatureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: TemperatureModule, declarations: [TemperatureComponent], imports: [CommonModule], exports: [TemperatureComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TemperatureModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TemperatureModule, decorators: [{
type: NgModule,
args: [{
declarations: [
TemperatureComponent
],
imports: [
CommonModule
],
exports: [
TemperatureComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TemperatureComponent, TemperatureModule, Unit };
//# sourceMappingURL=obliczeniowo-elementary-temperature.mjs.map