v4web-components/dist/esm/lab-ds-filter-chip.entry.js

Stencil Component Starter

import { r as registerInstance, c as createEvent, h } from './index-0b720089.js';

const labDsFilterChipCss = ".filter-chip{display:flex;align-items:center;border-style:solid;gap:var(--lab-ds-semantic-selectable-space-gap-s);border-radius:var(--lab-ds-semantic-selectable-border-radius-pill);border-width:var(--lab-ds-semantic-selectable-border-width-s);color:var(--lab-ds-semantic-color-fg-default);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default)}.filter-chip .holder{display:flex}.filter-chip.selected{border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-primary-default)}.filter-chip.selected .holder{color:var(--lab-ds-semantic-color-fg-default)}.filter-chip.small{padding-top:var(--lab-ds-semantic-selectable-space-padding-xs);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-xs);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);padding-left:var(--lab-ds-semantic-selectable-space-padding-m)}.filter-chip.small .label{font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold)}.filter-chip.medium{padding-top:var(--lab-ds-semantic-selectable-space-padding-s);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-s);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);padding-left:var(--lab-ds-semantic-selectable-space-padding-m)}.filter-chip.medium .label{font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold)}.filter-chip.small.selected{padding-top:var(--lab-ds-semantic-selectable-space-padding-xs);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-xs);padding-right:var(--lab-ds-semantic-selectable-space-padding-s);padding-left:var(--lab-ds-semantic-selectable-space-padding-m)}.filter-chip.small.selected .label{font:var(--lab-ds-semantic-typography-body-none-decoration-p4-bold)}.filter-chip.medium.selected{padding-top:var(--lab-ds-semantic-selectable-space-padding-s);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-s);padding-right:var(--lab-ds-semantic-selectable-space-padding-s);padding-left:var(--lab-ds-semantic-selectable-space-padding-m)}.filter-chip.medium.selected .label{font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold)}.filter-chip:hover{border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.filter-chip:active{border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-primary-press)}.filter-chip:focus-visible{outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-offset:0.2rem;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default)}.filter-chip:disabled{border-color:var(--lab-ds-semantic-selectable-color-border-disabled);background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);opacity:var(--lab-ds-core-opacity-80)}.filter-chip.selected:focus-visible{outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-offset:0.2rem;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-primary-default)}.filter-chip.selected:disabled{border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-primary-default);color:var(--lab-ds-semantic-selectable-color-bg-disabled);opacity:var(--lab-ds-core-opacity-80)}";

const LabDsFilterChip = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.handleSelectedChip = createEvent(this, "handleSelectedChip", 7);
    this.selected = false;
    this.disabled = false;
    this.size = 'medium';
    this.label = undefined;
  }
  handleClickChip() {
    this.handleSelectedChip.emit(this.selected);
  }
  render() {
    return (h("button", { disabled: this.disabled, onClick: e => {
        this.handleClickChip();
        e.stopPropagation();
      }, class: `${this.size} ${this.selected && 'selected'} filter-chip` }, h("span", { class: "label" }, this.label), " ", this.selected && h("lab-ds-icon-not-selectable", { class: "holder", size: "small", icon: "check" })));
  }
};
LabDsFilterChip.style = labDsFilterChipCss;

export { LabDsFilterChip as lab_ds_filter_chip };

//# sourceMappingURL=lab-ds-filter-chip.entry.js.map