@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
260 lines (259 loc) • 8.82 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { Host, h } from "@stencil/core";
import { createColorClasses } from "../../../utils/theme";
export class LarvaSlider {
constructor() {
/**
* size
*/
this.orientation = 'horizontal';
/**
*/
this.value = 0;
/**
*/
this.step = 1;
/**
*/
this.min = 0;
/**
*/
this.max = 100;
this.onChange = (ev) => {
this.value = parseFloat(ev.target.value);
this.larchange.emit({ value: this.value });
};
this.onFocus = () => {
this.larfocus.emit();
};
this.onBlur = () => {
this.larblur.emit();
};
/**
* If `true`, the user cannot interact with the button.
*/
this.disabled = false;
}
render() {
return (h(Host, { key: '653c143436021f4d08ab4e85c6bf78b2c3e74c61', class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'lar-slider': true, 'lar-slider-disabled': this.disabled, 'lar-slider-vertical': this.orientation === 'vertical', 'lar-slider-horizontal': this.orientation === 'horizontal' }) }, h("input", { key: '8275b9e9ca8f05b932eab339fe1b6450c79d2797', onInput: this.onChange, onFocus: this.onFocus, onMouseUp: this.onBlur, onTouchEnd: this.onBlur, type: "range", min: this.min, step: this.step, max: this.max, value: this.value, disabled: this.disabled })));
}
static get is() { return "lar-slider"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["slider.scss"]
};
}
static get styleUrls() {
return {
"$": ["slider.css"]
};
}
static get properties() {
return {
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color"
},
"orientation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "('vertical' | 'horizontal')",
"resolved": "\"horizontal\" | \"vertical\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "size"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "orientation",
"defaultValue": "'horizontal'"
},
"value": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value",
"defaultValue": "0"
},
"step": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "step",
"defaultValue": "1"
},
"min": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "min",
"defaultValue": "0"
},
"max": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "max",
"defaultValue": "100"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the user cannot interact with the button."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "disabled",
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "larchange",
"name": "larchange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the value property has changed."
},
"complexType": {
"original": "SliderInputChangeEvent",
"resolved": "SliderInputChangeEvent",
"references": {
"SliderInputChangeEvent": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::SliderInputChangeEvent"
}
}
}
}, {
"method": "larfocus",
"name": "larfocus",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the toggle has focus."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "larblur",
"name": "larblur",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the toggle loses focus."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=slider.js.map