v4web-components
Version:
Stencil Component Starter
105 lines (104 loc) • 2.9 kB
JavaScript
import { h } from '@stencil/core';
export class LabDsSegmentedControl {
constructor() {
this.options = undefined;
this.selectedSegmented = undefined;
this.value = undefined;
}
handleSelectedValueEmit(value) {
this.value = value;
value && this.handleSelectedValue.emit(value);
}
componentDidLoad() {
this.selectedSegmented = this.value;
}
watchValue(newValue) {
this.selectedSegmented = newValue;
}
render() {
var _a;
return (h("div", { class: "v4-segmented-control" }, h("div", { class: "v4-segmented-control-options" }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("button", { class: `v4-segmented-control-option ${this.value === option.value ? 'selected' : ''}`, onClick: () => this.handleSelectedValueEmit(option.value) }, option.icon && h("lab-ds-icon-not-selectable", { size: "s-medium", icon: option.icon }), option.label && h("span", { class: "v4-segmented-control-option-label" }, option.label)))))));
}
static get is() { return "lab-ds-segmented-control"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-segmented-control.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-segmented-control.css"]
};
}
static get properties() {
return {
"options": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<{ label: string; value: string; icon: string }>",
"resolved": "{ label: string; value: string; icon: string; }[]",
"references": {
"Array": {
"location": "global"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false
}
};
}
static get states() {
return {
"selectedSegmented": {}
};
}
static get events() {
return [{
"method": "handleSelectedValue",
"name": "handleSelectedValue",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "value",
"methodName": "watchValue"
}];
}
}
//# sourceMappingURL=lab-ds-segmented-control.js.map