v4web-components
Version:
Stencil Component Starter
2 lines • 2.86 kB
JavaScript
import{r as e,c as a,h as t}from"./p-c2aeec95.js";const s=".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 o=class{constructor(t){e(this,t);this.handleSelectedValue=a(this,"handleSelectedValue",7);this.options=undefined;this.selectedSegmented=undefined;this.value=undefined}handleSelectedValueEmit(e){this.value=e;e&&this.handleSelectedValue.emit(e)}componentDidLoad(){this.selectedSegmented=this.value}watchValue(e){this.selectedSegmented=e}render(){var e;return t("div",{class:"v4-segmented-control"},t("div",{class:"v4-segmented-control-options"},(e=this.options)===null||e===void 0?void 0:e.map((e=>t("button",{class:`v4-segmented-control-option ${this.value===e.value?"selected":""}`,onClick:()=>this.handleSelectedValueEmit(e.value)},e.icon&&t("lab-ds-icon-not-selectable",{size:"s-medium",icon:e.icon}),e.label&&t("span",{class:"v4-segmented-control-option-label"},e.label))))))}static get watchers(){return{value:["watchValue"]}}};o.style=s;export{o as lab_ds_segmented_control};
//# sourceMappingURL=p-df169085.entry.js.map