duoyun-ui/elements/more.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 _DuoyunMoreElement_onClick;
import { adoptedStyle, customElement, attribute, emitter, boolattribute } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { classMap, createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
import { locale } from '../lib/locale';
import { commonHandle } from '../lib/hotkeys';
import { DuoyunScrollBaseElement } from './base/scroll';
import './action-text';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .slot {
    text-align: left;
    overflow: hidden;
  }
  .overflow {
    margin-block-end: 0.5em;
  }
  .action {
    cursor: pointer;
  }
`);
/**
 * @customElement dy-more
 * @attr maxheight
 * @attr expandless
 */
let DuoyunMoreElement = class DuoyunMoreElement extends GemElement {
    constructor() {
        super();
        this.state = {
            bottomOverflow: false,
            expanded: false,
        };
        _DuoyunMoreElement_onClick.set(this, () => {
            this.setState({ expanded: !this.state.expanded });
        });
        this.render = () => {
            const { expanded, bottomOverflow } = this.state;
            return html `
      <dy-more-slot
        class=${classMap({ slot: true, overflow: bottomOverflow })}
        style=${styleMap({
                maxHeight: expanded ? 'none' : this.maxheight || '3.8lh',
            })}
        @change=${({ detail }) => this.setState({ bottomOverflow: detail })}
      >
        <slot></slot>
      </dy-more-slot>
      ${!this.expandless && (bottomOverflow || expanded)
                ? html `
            <dy-action-text class="action" @keydown=${commonHandle} @click=${__classPrivateFieldGet(this, _DuoyunMoreElement_onClick, "f")}>
              ${expanded ? this.less || locale.less : this.more || locale.more}
            </dy-action-text>
          `
                : ''}
    `;
        };
        this.internals.role = 'combobox';
        this.effect(() => {
            this.internals.ariaExpanded = String(this.state.expanded);
        });
    }
};
_DuoyunMoreElement_onClick = new WeakMap();
__decorate([
    attribute
], DuoyunMoreElement.prototype, "maxheight", void 0);
__decorate([
    attribute
], DuoyunMoreElement.prototype, "more", void 0);
__decorate([
    attribute
], DuoyunMoreElement.prototype, "less", void 0);
__decorate([
    boolattribute
], DuoyunMoreElement.prototype, "expandless", void 0);
DuoyunMoreElement = __decorate([
    customElement('dy-more'),
    adoptedStyle(style)
], DuoyunMoreElement);
export { DuoyunMoreElement };
/**
 * @customElement dy-more-slot
 */
let DuoyunMoreSlotElement = class DuoyunMoreSlotElement extends DuoyunScrollBaseElement {
    constructor() {
        super();
        this.mounted = () => {
            this.effect(() => {
                this.change(this.bottomOverflow);
            });
        };
        this.render = () => {
            return html `<slot></slot>`;
        };
        this.internals.role = 'paragraph';
    }
};
__decorate([
    emitter
], DuoyunMoreSlotElement.prototype, "change", void 0);
DuoyunMoreSlotElement = __decorate([
    customElement('dy-more-slot')
], DuoyunMoreSlotElement);
export { DuoyunMoreSlotElement };
//# sourceMappingURL=more.js.map