v4web-components/dist/components/lab-ds-chip2.js

Stencil Component Starter

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

const labDsChipCss = ":host{display:block}.chip{display:inline-flex;align-items:center;padding:var(--lab-ds-semantic-selectable-space-padding-xs);gap:var(--lab-ds-semantic-selectable-space-gap-s);border-style:solid;border-width:var(--lab-ds-semantic-selectable-border-width-s);border-radius:var(--lab-ds-semantic-selectable-border-radius-pill);border-color:var(--lab-ds-semantic-selectable-color-primary-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);pointer-events:none}.chip .label{white-space:nowrap;font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold);color:var(--lab-ds-semantic-color-fg-default)}.chip .holder{cursor:pointer;pointer-events:all}.chip.small{padding-top:var(--lab-ds-semantic-selectable-space-padding-none);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-none);padding-left:var(--lab-ds-semantic-selectable-space-padding-s);padding-right:var(--lab-ds-semantic-selectable-space-padding-xs)}.chip.small.with-avatar{padding-left:var(--lab-ds-semantic-selectable-space-padding-xs);padding-right:var(--lab-ds-semantic-selectable-space-padding-xs)}.chip.medium{padding-left:var(--lab-ds-semantic-selectable-space-padding-s)}.chip.medium.with-avatar{padding-left:var(--lab-ds-semantic-selectable-space-padding-xs);padding-right:var(--lab-ds-semantic-selectable-space-padding-xs)}.chip:hover{border-color:var(--lab-ds-semantic-selectable-color-primary-hover);background-color:var(--lab-ds-semantic-selectable-color-bg-default)}.chip:hover .holder:hover{color:var(--lab-ds-semantic-color-fg-default)}.chip:focus-visible{outline:auto;outline-offset:0.2rem;outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-color:var(--lab-ds-semantic-selectable-color-primary-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default)}.chip:focus-visible .holder{border-style:solid;border-width:var(--lab-ds-semantic-selectable-border-width-s);border-radius:var(--lab-ds-semantic-selectable-border-radius-xxs);color:var(--lab-ds-semantic-selectable-color-primary-focus)}.chip:active{border-color:var(--lab-ds-semantic-selectable-color-primary-press);background-color:var(--lab-ds-semantic-selectable-color-bg-default);outline:none}.chip:active .holder:active{border:none;color:var(--lab-ds-semantic-selectable-color-primary-press)}";

const LabDsChip = /*@__PURE__*/ proxyCustomElement(class LabDsChip extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.handleCloseChip = createEvent(this, "handleCloseChip", 7);
    this.avatar = false;
    this.size = 'medium';
    this.label = undefined;
    this.nameAvatar = undefined;
    this.imageSRCAvatar = undefined;
  }
  handleClickChip() {
    this.handleCloseChip.emit();
  }
  render() {
    return (h("button", { class: `${this.size} ${this.avatar && 'with-avatar'} chip` }, this.avatar && h("lab-ds-avatar", { imageSRC: this.imageSRCAvatar, name: this.nameAvatar, size: "small" }), " ", h("span", { class: "label" }, this.label), ' ', h("lab-ds-icon-selectable", { onClick: e => {
        this.handleClickChip();
        e.stopPropagation();
      }, class: "holder", size: "small", icon: "close" })));
  }
  static get style() { return labDsChipCss; }
}, [1, "lab-ds-chip", {
    "avatar": [4],
    "size": [1],
    "label": [1],
    "nameAvatar": [1, "name-avatar"],
    "imageSRCAvatar": [1, "image-s-r-c-avatar"]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-chip", "lab-ds-avatar", "lab-ds-icon-not-selectable", "lab-ds-icon-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-chip":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsChip);
      }
      break;
    case "lab-ds-avatar":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "lab-ds-icon-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { LabDsChip as L, defineCustomElement as d };

//# sourceMappingURL=lab-ds-chip2.js.map