@infinite-canvas-tutorial/webcomponents/esm/spectrum/fill-icon.js

WebComponents UI implementation

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;
};
import { isGradient, exportFillGradientOrPattern, createSVGElement, isPattern, } from '@infinite-canvas-tutorial/ecs';
import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
import { when } from 'lit/directives/when.js';
let FillIcon = class FillIcon extends LitElement {
    render() {
        const $circle = createSVGElement('circle');
        $circle.setAttribute('cx', '50');
        $circle.setAttribute('cy', '50');
        $circle.setAttribute('r', '48');
        $circle.setAttribute('fill', this.value);
        $circle.classList.add('picker');
        const isGradientOrPattern = isGradient(this.value) || isPattern(this.value);
        let defsHTML = '';
        if (isGradientOrPattern) {
            const $g = createSVGElement('g');
            exportFillGradientOrPattern(Object.assign(Object.assign({}, this.node), { type: 'ellipse', x: 0, y: 0, width: 100, height: 100 }), $circle, $g);
            defsHTML = $g.children[0].innerHTML;
        }
        return html `
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="100%"
        height="100%"
        viewBox="0 0 100 100"
      >
        <defs>
          <style>
            .picker {
              stroke: var(--spectrum-gray-800);
              stroke-width: var(--spectrum-border-width-100);
            }
          </style>
          ${when(isGradientOrPattern, () => unsafeSVG(defsHTML))}
        </defs>
        ${unsafeSVG($circle.outerHTML)}
      </svg>
    `;
    }
};
__decorate([
    property()
], FillIcon.prototype, "node", void 0);
__decorate([
    property()
], FillIcon.prototype, "value", void 0);
FillIcon = __decorate([
    customElement('ic-spectrum-fill-icon')
], FillIcon);
export { FillIcon };
//# sourceMappingURL=fill-icon.js.map