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

Stencil Component Starter

import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './lab-ds-icon-not-selectable2.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$1 = /*@__PURE__*/ proxyCustomElement(class LabDsFilterChip extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    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" })));
  }
  static get style() { return labDsFilterChipCss; }
}, [1, "lab-ds-filter-chip", {
    "selected": [4],
    "disabled": [4],
    "size": [1],
    "label": [1]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-filter-chip", "lab-ds-icon-not-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-filter-chip":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsFilterChip$1);
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const LabDsFilterChip = LabDsFilterChip$1;
const defineCustomElement = defineCustomElement$1;

export { LabDsFilterChip, defineCustomElement };

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