@freshworks/crayons/dist/components/tag.js

Crayons Web Components library

import { attachShadow, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
import { h as handleKeyDown } from './index2.js';
import { d as defineCustomElement$4 } from './avatar.js';
import { d as defineCustomElement$1, a as defineCustomElement$3 } from './icon.js';
import { d as defineCustomElement$2 } from './spinner.js';

const tagCss = ":host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, oxygen, ubuntu, cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}.tag{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;color:#12344d;font-size:14px;word-break:break-all}.tag .content{line-height:20px;vertical-align:middle}.tag-standard{padding:2px 2px 2px 8px;border-radius:4px;font-weight:600;background-color:#ebeff3}.tag-avatar{padding:4px;border-radius:24px;font-weight:400;background:-webkit-gradient(linear, left top, left bottom, color-stop(2.56%, #f5f7f9), color-stop(95.75%, #f3f5f7));background:linear-gradient(180deg, #f5f7f9 2.56%, #f3f5f7 95.75%)}.tag-avatar fw-avatar{margin-right:8px}.tag .remove-btn{margin-left:8px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#264966;font-size:16px}.tag .remove-btn.standard{min-height:20px;min-width:20px;border-radius:4px}.tag .remove-btn.avatar{min-height:24px;min-width:24px;border-radius:16px}.tag .remove-btn.avatar:hover,.tag .remove-btn.avatar:focus{background-color:#fff;cursor:pointer}.tag .remove-btn:hover,.tag .remove-btn:focus{background-color:#cfd7df;cursor:pointer}.tag .remove-btn.disabled{color:#447093;background-color:#ebeff3;cursor:not-allowed}";

let Tag = class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    attachShadow(this);
    this.fwClosed = createEvent(this, "fwClosed", 7);
    /**
     * The variant of tag to be displayed.
     */
    this.variant = 'standard';
    /**
     * The props need to be passed for the variant. If the variant is avatar then use this prop to send the props for the fw-avatar component.
     */
    this.graphicsProps = {};
    /**
     * Whether the Tag can be closed.
     */
    this.closable = true;
    /**
     * Whether the Tag is focusable.
     */
    this.focusable = true;
    this.removeTag = (e) => {
      if (this.disabled || !this.closable) {
        return;
      }
      const { value, text } = this;
      this.fwClosed.emit({ value, text });
      e.stopPropagation();
    };
  }
  onKeyDown(event) {
    switch (event.key) {
      case 'Backspace':
        this.removeTag(event);
        event.preventDefault();
        break;
    }
  }
  async setFocus() {
    this.tagContainer.focus();
  }
  renderContent() {
    switch (this.variant) {
      case 'standard':
        return h("span", { class: 'content' }, this.text);
      case 'avatar': {
        return [
          h("fw-avatar", Object.assign({ size: 'xsmall' }, this.graphicsProps)),
          h("span", { class: 'content' }, this.text),
        ];
      }
    }
  }
  render() {
    return (h("div", { role: 'button', tabindex: '-1', class: `tag tag-${this.variant}`, ref: (tagContainer) => (this.tagContainer = tagContainer) }, this.renderContent(), this.closable && (h("span", { role: 'button', tabIndex: this.focusable ? 0 : -1, class: `remove-btn ${this.variant} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.removeTag(e), onKeyDown: handleKeyDown(this.removeTag) }, h("fw-icon", { name: 'cross', size: 8, library: 'system' })))));
  }
  get host() { return this; }
  static get style() { return tagCss; }
};
Tag = /*@__PURE__*/ proxyCustomElement(Tag, [1, "fw-tag", {
    "text": [1],
    "disabled": [516],
    "value": [8],
    "variant": [1],
    "graphicsProps": [16],
    "closable": [4],
    "focusable": [4],
    "setFocus": [64]
  }, [[0, "keydown", "onKeyDown"]]]);
function defineCustomElement() {
  const components = ["fw-tag", "fw-avatar", "fw-icon", "fw-spinner", "fw-toast-message"];
  components.forEach(tagName => { switch (tagName) {
    case "fw-tag":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, Tag);
      }
      break;
    case "fw-avatar":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "fw-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "fw-spinner":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "fw-toast-message":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { Tag as T, defineCustomElement as d };