duoyun-ui/elements/time-panel.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 _DuoyunTimePanelElement_instances, _DuoyunTimePanelElement_time_get, _DuoyunTimePanelElement_parts_get, _DuoyunTimePanelElement_toArr, _DuoyunTimePanelElement_toString, _DuoyunTimePanelElement_onHourClick, _DuoyunTimePanelElement_onMinuteClick, _DuoyunTimePanelElement_onSecondClick;
import { adoptedStyle, customElement, globalemitter, property, boolattribute, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
import { Time, parseDate } from '../lib/time';
import { theme } from '../lib/theme';
import { isNotNullish } from '../lib/types';
import { locale } from '../lib/locale';
import { focusStyle } from '../lib/styles';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: grid;
    grid-template: 'hour minute second' / 1fr 1fr 1fr;
    gap: 1px;
    text-align: center;
    line-height: 2;
  }
  .header {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline: 0.2em;
  }
  .scrollbar {
    flex-grow: 1;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-gutter: both-edges;
    scroll-snap-type: y proximity;
  }
  .cell {
    scroll-snap-align: start;
  }
  .cell:where(:hover) {
    background: ${theme.lightBackgroundColor};
  }
  .checked {
    background: ${theme.hoverBackgroundColor};
  }
`);
/**
 * @customElement dy-time-panel
 */
let DuoyunTimePanelElement = class DuoyunTimePanelElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        _DuoyunTimePanelElement_instances.add(this);
        _DuoyunTimePanelElement_toArr.set(this, (l) => Array.from({ length: l }, (_, index) => index));
        _DuoyunTimePanelElement_toString.set(this, (n) => n.toString().padStart(2, '0'));
        _DuoyunTimePanelElement_onHourClick.set(this, (n) => {
            this.change(__classPrivateFieldGet(this, _DuoyunTimePanelElement_instances, "a", _DuoyunTimePanelElement_time_get).setHours(n));
        });
        _DuoyunTimePanelElement_onMinuteClick.set(this, (n) => {
            this.change(__classPrivateFieldGet(this, _DuoyunTimePanelElement_instances, "a", _DuoyunTimePanelElement_time_get).setMinutes(n));
        });
        _DuoyunTimePanelElement_onSecondClick.set(this, (n) => {
            this.change(__classPrivateFieldGet(this, _DuoyunTimePanelElement_instances, "a", _DuoyunTimePanelElement_time_get).setSeconds(n));
        });
        this.mounted = () => {
            var _a;
            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.checked`).forEach((e) => {
                e.scrollIntoView({ block: 'center' });
            });
        };
        this.render = () => {
            const { hour, minute, second } = __classPrivateFieldGet(this, _DuoyunTimePanelElement_instances, "a", _DuoyunTimePanelElement_parts_get);
            return html `
      ${this.headless
                ? ''
                : html `
            <div class="header">${locale.hour}</div>
            <div class="header">${locale.minute}</div>
            <div class="header">${locale.second}</div>
          `}
      <div class="scrollbar">
        ${__classPrivateFieldGet(this, _DuoyunTimePanelElement_toArr, "f").call(this, 24).map((h) => html `
            <div
              class=${classMap({ cell: true, checked: isNotNullish(h) && Number(hour) === h })}
              @click=${() => __classPrivateFieldGet(this, _DuoyunTimePanelElement_onHourClick, "f").call(this, h)}
            >
              ${__classPrivateFieldGet(this, _DuoyunTimePanelElement_toString, "f").call(this, h)}
            </div>
          `)}
      </div>
      <div class="scrollbar">
        ${__classPrivateFieldGet(this, _DuoyunTimePanelElement_toArr, "f").call(this, 60).map((m) => html `
            <div
              class=${classMap({ cell: true, checked: isNotNullish(m) && Number(minute) === m })}
              @click=${() => __classPrivateFieldGet(this, _DuoyunTimePanelElement_onMinuteClick, "f").call(this, m)}
            >
              ${__classPrivateFieldGet(this, _DuoyunTimePanelElement_toString, "f").call(this, m)}
            </div>
          `)}
      </div>
      <div class="scrollbar">
        ${__classPrivateFieldGet(this, _DuoyunTimePanelElement_toArr, "f").call(this, 60).map((s) => html `
            <div
              class=${classMap({ cell: true, checked: isNotNullish(s) && Number(second) === s })}
              @click=${() => __classPrivateFieldGet(this, _DuoyunTimePanelElement_onSecondClick, "f").call(this, s)}
            >
              ${__classPrivateFieldGet(this, _DuoyunTimePanelElement_toString, "f").call(this, s)}
            </div>
          `)}
      </div>
    `;
        };
    }
};
_DuoyunTimePanelElement_toArr = new WeakMap(), _DuoyunTimePanelElement_toString = new WeakMap(), _DuoyunTimePanelElement_onHourClick = new WeakMap(), _DuoyunTimePanelElement_onMinuteClick = new WeakMap(), _DuoyunTimePanelElement_onSecondClick = new WeakMap(), _DuoyunTimePanelElement_instances = new WeakSet(), _DuoyunTimePanelElement_time_get = function _DuoyunTimePanelElement_time_get() {
    return isNotNullish(this.value) ? new Time(this.value) : new Time();
}, _DuoyunTimePanelElement_parts_get = function _DuoyunTimePanelElement_parts_get() {
    return isNotNullish(this.value) ? parseDate(this.value) : {};
};
__decorate([
    boolattribute
], DuoyunTimePanelElement.prototype, "headless", void 0);
__decorate([
    globalemitter
], DuoyunTimePanelElement.prototype, "change", void 0);
__decorate([
    property
], DuoyunTimePanelElement.prototype, "value", void 0);
DuoyunTimePanelElement = __decorate([
    customElement('dy-time-panel'),
    adoptedStyle(style),
    adoptedStyle(focusStyle)
], DuoyunTimePanelElement);
export { DuoyunTimePanelElement };
//# sourceMappingURL=time-panel.js.map