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

WebComponents UI implementation

"use strict";
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FillIcon = void 0;
const ecs_1 = require("@infinite-canvas-tutorial/ecs");
const lit_1 = require("lit");
const decorators_js_1 = require("lit/decorators.js");
const unsafe_svg_js_1 = require("lit/directives/unsafe-svg.js");
const when_js_1 = require("lit/directives/when.js");
let FillIcon = class FillIcon extends lit_1.LitElement {
    render() {
        const $circle = (0, ecs_1.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 = (0, ecs_1.isGradient)(this.value) || (0, ecs_1.isPattern)(this.value);
        let defsHTML = '';
        if (isGradientOrPattern) {
            const $g = (0, ecs_1.createSVGElement)('g');
            (0, ecs_1.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 (0, lit_1.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>
          ${(0, when_js_1.when)(isGradientOrPattern, () => (0, unsafe_svg_js_1.unsafeSVG)(defsHTML))}
        </defs>
        ${(0, unsafe_svg_js_1.unsafeSVG)($circle.outerHTML)}
      </svg>
    `;
    }
};
exports.FillIcon = FillIcon;
__decorate([
    (0, decorators_js_1.property)()
], FillIcon.prototype, "node", void 0);
__decorate([
    (0, decorators_js_1.property)()
], FillIcon.prototype, "value", void 0);
exports.FillIcon = FillIcon = __decorate([
    (0, decorators_js_1.customElement)('ic-spectrum-fill-icon')
], FillIcon);
//# sourceMappingURL=fill-icon.js.map