v4web-components
Version:
Stencil Component Starter
63 lines (58 loc) • 4.27 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './lab-ds-icon-not-selectable2.js';
const labDsSegmentedControlCss = ".v4-segmented-control{display:flex;border-style:solid;justify-content:space-between;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-s);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);padding:var(--lab-ds-semantic-selectable-space-padding-xxs)}.v4-segmented-control-options{display:flex;justify-content:center;width:100%}.v4-segmented-control-option{display:flex;align-items:center;justify-content:center;border:none;width:100%;margin:var(--lab-ds-semantic-selectable-space-padding-xxs);padding-top:var(--lab-ds-semantic-selectable-space-padding-xs);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-xs);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-s);border-radius:var(--lab-ds-semantic-selectable-border-radius-xxs);color:var(--lab-ds-semantic-color-fg-default);background-color:rgba(0, 0, 0, 0);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.v4-segmented-control-option-label{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-bold);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.v4-segmented-control-option.selected{background-color:var(--lab-ds-semantic-selectable-color-primary-default)}.v4-segmented-control-option:hover:not(.selected){background-color:var(--lab-ds-semantic-selectable-color-bg-hover)}.v4-segmented-control-option:active:not(.selected){background-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-color-bg-default)}.v4-segmented-control-option:active{background-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-color-bg-default)}";
const LabDsSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class LabDsSegmentedControl extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.handleSelectedValue = createEvent(this, "handleSelectedValue", 7);
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 watchers() { return {
"value": ["watchValue"]
}; }
static get style() { return labDsSegmentedControlCss; }
}, [1, "lab-ds-segmented-control", {
"options": [16],
"value": [1],
"selectedSegmented": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lab-ds-segmented-control", "lab-ds-icon-not-selectable"];
components.forEach(tagName => { switch (tagName) {
case "lab-ds-segmented-control":
if (!customElements.get(tagName)) {
customElements.define(tagName, LabDsSegmentedControl$1);
}
break;
case "lab-ds-icon-not-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const LabDsSegmentedControl = LabDsSegmentedControl$1;
const defineCustomElement = defineCustomElement$1;
export { LabDsSegmentedControl, defineCustomElement };
//# sourceMappingURL=lab-ds-segmented-control.js.map