@cbpds/web-components
Version:
Web components for the CBP Design System.
276 lines (275 loc) • 11.8 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps, createNamespaceKey } from "../../utils/utils";
export class CbpSlider {
constructor() {
this.fieldId = createNamespaceKey('cbp-slider');
this.value = undefined;
this.min = 0;
this.max = 100;
this.step = 1;
this.hideMinmax = undefined;
this.hideInput = undefined;
this.error = false;
this.disabled = false;
this.context = undefined;
this.sx = {};
}
handleChange(e) {
let newValue = (!isNaN(e.target.value) && !isNaN(parseFloat(e.target.value))) ? e.target.value : this.min;
if (newValue < this.min)
newValue = this.min;
if (newValue > this.max)
newValue = this.max;
this.formField.value = newValue;
if (this.valueField)
this.valueField.value = newValue;
let newValuePercent = (newValue - this.min) / (this.max - this.min);
this.host.style.setProperty('--cbp-slider-track-selection-size', `${newValuePercent}`);
this.value = newValue;
}
componentWillLoad() {
this.formField = this.host.querySelector('input[type=range]');
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
if (!!this.formField) {
this.formField.getAttribute('id')
? this.fieldId = this.formField.getAttribute('id')
: this.formField.setAttribute('id', `${this.fieldId}`);
if (this.value)
this.formField.setAttribute('value', `${this.value}`);
if (this.min)
this.formField.setAttribute('min', `${this.min}`);
if (this.max)
this.formField.setAttribute('max', `${this.max}`);
if (this.step)
this.formField.setAttribute('step', `${this.step}`);
if (this.disabled)
this.formField.setAttribute('disabled', ``);
this.formField.addEventListener('click', () => this.formField.focus());
this.formField.addEventListener('input', (e) => this.handleChange(e));
}
}
render() {
return (h(Host, { key: 'f20a6a87dfeba35e2364964025b82ae2dd8cf4f6' }, (!this.hideMinmax || this.host.querySelector('[slot="cpb-slider-before"]')) &&
h("span", { key: '723ec06cb8690c6ac56bd3994fb2eaec0fad51f6' }, !this.hideMinmax && this.min, h("slot", { key: 'c00beef77a0a28d0e8fa8f92961cd0a7c7a94350', name: "cpb-slider-before" })), h("div", { key: 'fbc195d844779145f343ebf2d74d210784ab1977', class: "cbp-slider-wrapper" }, h("span", { key: '71eca3b54708114f03319c250591b776056648a8', class: "cbp-slider-selection" }), h("slot", { key: '31aaafca8284c319c173fc6b6522ea7aa46c85a2' })), (!this.hideMinmax || this.host.querySelector('[slot="cpb-slider-after"]')) &&
h("span", { key: '3c11d1a22fb45c00e3a2d33d3ae24bd8d59d194a' }, h("slot", { key: 'f011b5c31ade3d710d98ec9411fc2a6772ffc20a', name: "cpb-slider-after" }), !this.hideMinmax && this.max), !this.hideInput && h("input", { key: '733c7bcfd8241cd9c250b9d063568fb125227981', type: "number", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, "aria-label": "Slider value", "aria-describedby": `${this.fieldId}-label`, "aria-invalid": this.error, ref: (el) => this.valueField = el, onChange: (e) => this.handleChange(e), onKeyUp: (e) => this.handleChange(e) })));
}
static get is() { return "cbp-slider"; }
static get originalStyleUrls() {
return {
"$": ["cbp-slider.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-slider.css"]
};
}
static get properties() {
return {
"fieldId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specify the ID of the visible control here, which is used to generate related pattern node IDs and associate everything for accessibility."
},
"attribute": "field-id",
"reflect": false,
"defaultValue": "createNamespaceKey('cbp-slider')"
},
"value": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the value of the slider and numeric entry field.\nThis prop should be set on this component rather than (or in addition to) the slotted `input type=\"range\"`."
},
"attribute": "value",
"reflect": false
},
"min": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the minimum value of the slider and numeric entry field (defaults to 0). \nThis prop should be set on this component rather than (or in addition to) the slotted `input type=\"range\"`."
},
"attribute": "min",
"reflect": false,
"defaultValue": "0"
},
"max": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the maximum value of the slider and numeric entry field (defaults to 100). \nThis prop should be set on this component rather than (or in addition to) the slotted `input type=\"range\"`."
},
"attribute": "max",
"reflect": false,
"defaultValue": "100"
},
"step": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the step value of the slider and numeric entry field (defaults to 1). \nThis prop should be set on this component rather than (or in addition to) the slotted `input type=\"range\"`."
},
"attribute": "step",
"reflect": false,
"defaultValue": "1"
},
"hideMinmax": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the min/max values are hidden (shown by default)."
},
"attribute": "hide-minmax",
"reflect": false
},
"hideInput": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the numeric input is hidden (shown by default)."
},
"attribute": "hide-input",
"reflect": false
},
"error": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the parent `cbp-form-field` component."
},
"attribute": "error",
"reflect": true,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies that the field is disabled. Primarily controlled by the parent `cbp-form-field` component."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-slider.js.map