duoyun-ui/elements/banner.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 _DuoyunBannerElement_instances, _DuoyunBannerElement_icon_get;
// https://spectrum.adobe.com/page/alert-banner/
import { adoptedStyle, customElement, attribute, emitter, property, boolattribute, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css } from '@mantou/gem/lib/utils';
import { theme } from '../lib/theme';
import { icons } from '../lib/icons';
import { commonHandle } from '../lib/hotkeys';
import './use';
import './divider';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: flex;
    align-items: flex-start;
    background: ${theme.neutralColor};
    color: #fff;
    padding: 0.8em;
    line-height: 1.5;
    gap: 0.5em;
  }
  :host > * {
    flex-shrink: 0;
  }
  :host([status='positive']) {
    background: ${theme.positiveColor};
  }
  :host([status='notice']) {
    background: ${theme.noticeColor};
  }
  :host([status='negative']) {
    background: ${theme.negativeColor};
  }
  .icon {
    width: 1.5em;
  }
  .content {
    flex-grow: 1;
  }
  .action {
    color: inherit;
    background: transparent;
    border-radius: 10em;
    border: 2px solid #fff9;
    padding: 0 1em;
    font-size: 1em;
    line-height: 1.5;
    margin-block: -2px;
    margin-inline-end: 0.5em;
    font-weight: 500;
  }
  .action:hover {
    border-color: #fff;
  }
  .divider {
    align-self: stretch;
  }
  .close {
    width: 1.2em;
    padding: 0.15em;
    opacity: 0.8;
  }
  .close:hover {
    opacity: 1;
  }
`);
/**
 * @customElement dy-banner
 */
let DuoyunBannerElement = class DuoyunBannerElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        _DuoyunBannerElement_instances.add(this);
        this.render = () => {
            const icon = __classPrivateFieldGet(this, _DuoyunBannerElement_instances, "a", _DuoyunBannerElement_icon_get);
            return html `
      ${icon ? html `<dy-use class="icon" .element=${icon}></dy-use>` : ''}
      <div class="content">
        <slot></slot>
      </div>
      ${this.action
                ? html `
            <button class="action" @keydown=${commonHandle} @click=${this.action.handle}>${this.action.text}</button>
          `
                : ''}
      ${this.closable
                ? html `
            <dy-divider class="divider" orientation="vertical"></dy-divider>
            <dy-use
              role="button"
              class="close"
              tabindex="0"
              .element=${icons.close}
              @click=${() => this.close(null)}
              @keydown=${commonHandle}
            ></dy-use>
          `
                : ''}
    `;
        };
        this.internals.role = 'banner';
    }
};
_DuoyunBannerElement_instances = new WeakSet(), _DuoyunBannerElement_icon_get = function _DuoyunBannerElement_icon_get() {
    switch (this.status) {
        case 'positive':
            return icons.success;
        case 'notice':
            return icons.warning;
        case 'negative':
            return icons.error;
    }
};
__decorate([
    boolattribute
], DuoyunBannerElement.prototype, "closable", void 0);
__decorate([
    attribute
], DuoyunBannerElement.prototype, "status", void 0);
__decorate([
    property
], DuoyunBannerElement.prototype, "action", void 0);
__decorate([
    emitter
], DuoyunBannerElement.prototype, "close", void 0);
DuoyunBannerElement = __decorate([
    customElement('dy-banner'),
    adoptedStyle(style)
], DuoyunBannerElement);
export { DuoyunBannerElement };
//# sourceMappingURL=banner.js.map