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

Stencil Component Starter

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

export { LabDsChip as lab_ds_chip };

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