@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
299 lines (298 loc) • 10.6 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h, Host } from "@stencil/core";
import { BaseWebComponent } from "../../internal/functional-components/base-web-component";
import { MeterFC } from "../../internal/functional-components/meter/component";
import { MeterController } from "../../internal/functional-components/meter/controller";
export class KolMeter extends BaseWebComponent {
constructor() {
this.ctrl = new MeterController(this.stateAccess);
this._max = 1;
this._min = 0;
this._orientation = 'horizontal';
this._unit = '%';
this.liveValue = 0;
super();
}
watchHigh(value) {
this.ctrl.watchHigh(value);
}
watchLabel(value) {
this.ctrl.watchLabel(value);
}
watchLow(value) {
this.ctrl.watchLow(value);
}
watchMax(value) {
this.ctrl.watchMax(value);
}
watchMin(value) {
this.ctrl.watchMin(value);
}
watchOptimum(value) {
this.ctrl.watchOptimum(value);
}
watchOrientation(value) {
this.ctrl.watchOrientation(value);
}
watchUnit(value) {
this.ctrl.watchUnit(value);
}
watchValue(value) {
this.ctrl.watchValue(value);
}
componentWillLoad() {
this.ctrl.componentWillLoad({
high: this._high,
label: this._label,
low: this._low,
max: this._max,
min: this._min,
optimum: this._optimum,
orientation: this._orientation,
unit: this._unit,
value: this._value,
});
}
disconnectedCallback() {
this.ctrl.destroy();
}
render() {
const { high, low, optimum } = this.ctrl.getMeterData();
return (h(Host, { key: 'f984ca58fde313ec89e7c3706bcc8abc78ccd0c9' }, h(MeterFC, { key: 'cc748329ed165491feb61315348e0b44c8797197', high: high, label: this.ctrl.getRenderProp('label'), low: low, liveValue: this.liveValue, max: this.ctrl.getRenderProp('max'), min: this.ctrl.getRenderProp('min'), optimum: optimum, orientation: this.ctrl.getRenderProp('orientation'), unit: this.ctrl.getRenderProp('unit'), value: this.ctrl.getRenderProp('value') })));
}
static get is() { return "kol-meter"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"default": ["./style.scss"]
};
}
static get styleUrls() {
return {
"default": ["style.css"]
};
}
static get properties() {
return {
"_high": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "From this value to the max value is the high range of the meter. Below this value is the middle range."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_high"
},
"_label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_label"
},
"_low": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "From this value to the min value is the low range of the meter. Above this value is the middle range."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_low"
},
"_max": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the maximum value of the element.\nDefault like native component."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_max",
"defaultValue": "1"
},
"_min": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the minimum value of the element.\nDefault like native component."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_min",
"defaultValue": "0"
},
"_optimum": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Indicates the optimal range of the element.\nIf this lies in the high range, the high range will be optimum, the middle range will be suboptimum and the low range will be critical.\nIf this lies in the low range, the low range will be optimum, the middle range will be suboptimum and the high range will be critical.\nIf this lies in the middle range, both low and high range will be suboptimum and nothing will be critical."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_optimum"
},
"_orientation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "OrientationPropType",
"resolved": "\"horizontal\" | \"vertical\"",
"references": {
"OrientationPropType": {
"location": "import",
"path": "../../internal/props",
"id": "src/internal/props/index.ts::OrientationPropType"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines whether the meter bar is displayed horizontally or vertically."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_orientation",
"defaultValue": "'horizontal'"
},
"_unit": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the unit of the value."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_unit",
"defaultValue": "'%'"
},
"_value": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the value of the element. Is capped between min and max."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_value"
}
};
}
static get states() {
return {
"liveValue": {}
};
}
static get watchers() {
return [{
"propName": "_high",
"methodName": "watchHigh"
}, {
"propName": "_label",
"methodName": "watchLabel"
}, {
"propName": "_low",
"methodName": "watchLow"
}, {
"propName": "_max",
"methodName": "watchMax"
}, {
"propName": "_min",
"methodName": "watchMin"
}, {
"propName": "_optimum",
"methodName": "watchOptimum"
}, {
"propName": "_orientation",
"methodName": "watchOrientation"
}, {
"propName": "_unit",
"methodName": "watchUnit"
}, {
"propName": "_value",
"methodName": "watchValue"
}];
}
}
//# sourceMappingURL=component.js.map