v4web-components/dist/esm/lab-ds-segmented-control.entry.js

Stencil Component Starter

import { r as registerInstance, c as createEvent, h } from './index-0b720089.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 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    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"]
  }; }
};
LabDsSegmentedControl.style = labDsSegmentedControlCss;

export { LabDsSegmentedControl as lab_ds_segmented_control };

//# sourceMappingURL=lab-ds-segmented-control.entry.js.map