duoyun-ui/elements/color-picker.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;
};
// https://spectrum.adobe.com/page/color-area/
import { adoptedStyle, customElement, attribute, globalemitter, boolattribute, refobject, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, styleMap } from '@mantou/gem/lib/utils';
import { theme } from '../lib/theme';
import { commonHandle } from '../lib/hotkeys';
import { focusStyle } from '../lib/styles';
import './popover';
import './color-panel';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875em;
    width: 4em;
    overflow: hidden;
    border-radius: ${theme.normalRound};
    background: conic-gradient(
        transparent 0.25turn,
        #d3cfcf 0.25turn 0.5turn,
        transparent 0.5turn 0.75turn,
        #d3cfcf 0.75turn
      )
      top left / 1.2em 1.2em repeat;
  }
  .picker {
    width: 100%;
    height: calc(2.2em + 2px);
    border-radius: ${theme.normalRound};
    box-shadow: inset 0 0 0 1px #0002;
  }
`);
/**
 * @customElement dy-color-picker
 */
let DuoyunColorPickElement = class DuoyunColorPickElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        this.render = () => {
            return html `
      <dy-popover
        trigger="click"
        ref=${this.popoverRef.ref}
        .content=${html `
          <dy-color-panel
            style=${styleMap({ marginBlock: '.6em' })}
            value=${this.value}
            ?alpha=${this.alpha}
            @change=${({ detail }) => this.change(detail)}
          ></dy-color-panel>
        `}
      >
        <div
          role="combobox"
          tabindex="0"
          @keydown=${commonHandle}
          class="picker"
          style=${styleMap({ backgroundColor: this.value })}
        ></div>
      </dy-popover>
    `;
        };
    }
    showPicker() {
        var _a;
        (_a = this.popoverRef.element) === null || _a === void 0 ? void 0 : _a.click();
    }
};
__decorate([
    attribute
], DuoyunColorPickElement.prototype, "value", void 0);
__decorate([
    boolattribute
], DuoyunColorPickElement.prototype, "alpha", void 0);
__decorate([
    refobject
], DuoyunColorPickElement.prototype, "popoverRef", void 0);
__decorate([
    globalemitter
], DuoyunColorPickElement.prototype, "change", void 0);
DuoyunColorPickElement = __decorate([
    customElement('dy-color-picker'),
    adoptedStyle(style),
    adoptedStyle(focusStyle)
], DuoyunColorPickElement);
export { DuoyunColorPickElement };
//# sourceMappingURL=color-picker.js.map