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

Stencil Component Starter

import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$6 } from './lab-ds-avatar2.js';
import { d as defineCustomElement$5 } from './lab-ds-button2.js';
import { d as defineCustomElement$4 } from './lab-ds-chip2.js';
import { d as defineCustomElement$3 } from './lab-ds-icon-not-selectable2.js';
import { d as defineCustomElement$2 } from './lab-ds-icon-selectable2.js';

const labDsChipGroupCss = ".chip-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--lab-ds-semantic-placeholder-space-gap-m);padding:var(--lab-ds-semantic-placeholder-space-padding-none)}.clear-all{text-decoration:underline;margin-left:var(--lab-ds-semantic-placeholder-space-gap-xxl);font:var(--lab-ds-semantic-typography-body-decoration-underlined-p2-regular);color:black;cursor:pointer}";

const LabDsChipGroup$1 = /*@__PURE__*/ proxyCustomElement(class LabDsChipGroup extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.handleCloseChip = createEvent(this, "handleCloseChip", 7);
    this.handleClearAll = createEvent(this, "handleClearAll", 7);
    this.size = 'medium';
    this.avatar = false;
    this.chips = [];
  }
  handleClickChip(id) {
    id && this.handleCloseChip.emit(id);
  }
  handleClickClearAll() {
    this.handleClearAll.emit();
  }
  render() {
    return (h("div", { class: "chip-group" }, this.chips.map(chip => (h("lab-ds-chip", { onHandleCloseChip: () => this.handleClickChip(chip.id), key: chip.id, avatar: this.avatar, size: this.size, label: chip.label }))), this.chips.length > 0 && h("lab-ds-button", { variant: "link-button", label: "Limpar op\u00E7\u00F5es", onHandleButton: () => this.handleClickClearAll() })));
  }
  static get style() { return labDsChipGroupCss; }
}, [1, "lab-ds-chip-group", {
    "size": [1],
    "avatar": [4],
    "chips": [16]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-chip-group", "lab-ds-avatar", "lab-ds-button", "lab-ds-chip", "lab-ds-icon-not-selectable", "lab-ds-icon-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-chip-group":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsChipGroup$1);
      }
      break;
    case "lab-ds-avatar":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "lab-ds-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "lab-ds-chip":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "lab-ds-icon-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const LabDsChipGroup = LabDsChipGroup$1;
const defineCustomElement = defineCustomElement$1;

export { LabDsChipGroup, defineCustomElement };

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