duoyun-ui/elements/divider.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 _DuoyunDividerElement_instances, _DuoyunDividerElement_orientation_get, _DuoyunDividerElement_size_get, _DuoyunDividerElement_height_get, _DuoyunDividerElement_width_get, _DuoyunDividerElement_bgColor_get;
// https://spectrum.adobe.com/page/divider/
import { adoptedStyle, customElement, attribute } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css } from '@mantou/gem/lib/utils';
import { theme, getSemanticColor } from '../lib/theme';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: block;
    border-radius: 10px;
    align-self: stretch;
    background: currentColor;
  }
`);
/**
 * @customElement dy-divider
 * @attr size
 * @attr orientation
 */
let DuoyunDividerElement = class DuoyunDividerElement extends GemElement {
    constructor() {
        super();
        _DuoyunDividerElement_instances.add(this);
        this.render = () => {
            return html `
      <style>
        :host {
          width: ${__classPrivateFieldGet(this, _DuoyunDividerElement_instances, "a", _DuoyunDividerElement_width_get)};
          height: ${__classPrivateFieldGet(this, _DuoyunDividerElement_instances, "a", _DuoyunDividerElement_height_get)};
          color: ${__classPrivateFieldGet(this, _DuoyunDividerElement_instances, "a", _DuoyunDividerElement_bgColor_get)};
        }
      </style>
    `;
        };
        this.internals.role = 'separator';
        this.effect(() => {
            this.internals.ariaOrientation = __classPrivateFieldGet(this, _DuoyunDividerElement_instances, "a", _DuoyunDividerElement_orientation_get);
        });
    }
};
_DuoyunDividerElement_instances = new WeakSet(), _DuoyunDividerElement_orientation_get = function _DuoyunDividerElement_orientation_get() {
    return this.orientation || 'horizontal';
}, _DuoyunDividerElement_size_get = function _DuoyunDividerElement_size_get() {
    switch (this.size) {
        case 'large':
            return '4px';
        case 'medium':
            return '2px';
        default:
            return '1px';
    }
}, _DuoyunDividerElement_height_get = function _DuoyunDividerElement_height_get() {
    if (__classPrivateFieldGet(this, _DuoyunDividerElement_instances, "a", _DuoyunDividerElement_orientation_get) === 'vertical') {
        return 'auto';
    }
    return __classPrivateFieldGet(this, _DuoyunDividerElement_instances, "a", _DuoyunDividerElement_size_get);
}, _DuoyunDividerElement_width_get = function _DuoyunDividerElement_width_get() {
    if (__classPrivateFieldGet(this, _DuoyunDividerElement_instances, "a", _DuoyunDividerElement_orientation_get) === 'vertical') {
        return __classPrivateFieldGet(this, _DuoyunDividerElement_instances, "a", _DuoyunDividerElement_size_get);
    }
    return 'auto';
}, _DuoyunDividerElement_bgColor_get = function _DuoyunDividerElement_bgColor_get() {
    if (this.color)
        return getSemanticColor(this.color) || this.color;
    switch (this.size) {
        case 'large':
            return theme.textColor;
        default:
            return theme.borderColor;
    }
};
__decorate([
    attribute
], DuoyunDividerElement.prototype, "size", void 0);
__decorate([
    attribute
], DuoyunDividerElement.prototype, "color", void 0);
__decorate([
    attribute
], DuoyunDividerElement.prototype, "orientation", void 0);
DuoyunDividerElement = __decorate([
    customElement('dy-divider'),
    adoptedStyle(style)
], DuoyunDividerElement);
export { DuoyunDividerElement };
//# sourceMappingURL=divider.js.map