duoyun-ui/elements/tag.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _DuoyunTagElement_instances, _DuoyunTagElement_color_get, _DuoyunTagElement_mode_get, _DuoyunTagElement_onClose;
import { connectStore, adoptedStyle, customElement, attribute, emitter, boolattribute, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css } from '@mantou/gem/lib/utils';
import { icons } from '../lib/icons';
import { theme, getSemanticColor } from '../lib/theme';
import { commonHandle } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
import './use';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    font-size: 0.875em;
    line-height: 1.2;
    padding: 0.5em 0.6em;
    border-radius: ${theme.normalRound};
    border-width: 1px;
    border-style: solid;
  }
  :host([small]) {
    font-size: 0.75em;
  }
  .close {
    width: 1.2em;
    opacity: 0.7;
    flex-shrink: 0;
  }
  .close:hover {
    opacity: 1;
  }
`);
/**
 * @customElement dy-tag
 * @attr small
 * @fires close
 */
let DuoyunTagElement = class DuoyunTagElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        _DuoyunTagElement_instances.add(this);
        _DuoyunTagElement_onClose.set(this, (e) => {
            e.stopPropagation();
            this.close(null);
        });
        this.render = () => {
            const isSolid = __classPrivateFieldGet(this, _DuoyunTagElement_instances, "a", _DuoyunTagElement_mode_get) === 'solid';
            const isDefault = this.color === 'default' || this.color === '';
            return html `
      <style>
        :host {
          color: ${isDefault ? theme.textColor : isSolid ? theme.backgroundColor : __classPrivateFieldGet(this, _DuoyunTagElement_instances, "a", _DuoyunTagElement_color_get)};
          background-color: ${isSolid ? __classPrivateFieldGet(this, _DuoyunTagElement_instances, "a", _DuoyunTagElement_color_get) : 'transparent'};
          border-color: ${__classPrivateFieldGet(this, _DuoyunTagElement_instances, "a", _DuoyunTagElement_color_get)};
        }
      </style>
      <slot></slot>
      ${this.closable
                ? html `
            <dy-use
              tabindex="0"
              role="button"
              class="close"
              @keydown=${commonHandle}
              @click=${__classPrivateFieldGet(this, _DuoyunTagElement_onClose, "f")}
              .element=${icons.close}
            ></dy-use>
          `
                : ''}
    `;
        };
        this.internals.role = 'mark';
    }
};
_DuoyunTagElement_onClose = new WeakMap(), _DuoyunTagElement_instances = new WeakSet(), _DuoyunTagElement_color_get = function _DuoyunTagElement_color_get() {
    const semanticColor = getSemanticColor(this.color);
    if (semanticColor)
        return semanticColor;
    switch (this.color) {
        case '':
        case 'default':
            return theme.hoverBackgroundColor;
        default:
            return this.color;
    }
}, _DuoyunTagElement_mode_get = function _DuoyunTagElement_mode_get() {
    return this.mode || 'solid';
};
__decorate([
    boolattribute
], DuoyunTagElement.prototype, "closable", void 0);
__decorate([
    attribute
], DuoyunTagElement.prototype, "color", void 0);
__decorate([
    attribute
], DuoyunTagElement.prototype, "mode", void 0);
__decorate([
    boolattribute
], DuoyunTagElement.prototype, "small", void 0);
__decorate([
    emitter
], DuoyunTagElement.prototype, "close", void 0);
DuoyunTagElement = __decorate([
    customElement('dy-tag'),
    adoptedStyle(style),
    adoptedStyle(focusStyle),
    connectStore(icons)
], DuoyunTagElement);
export { DuoyunTagElement };
//# sourceMappingURL=tag.js.map