@infinite-canvas-tutorial/webcomponents/lib/spectrum/color-picker.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.ColorPicker = exports.ColorType = void 0;
const lit_1 = require("lit");
const decorators_js_1 = require("lit/decorators.js");
const when_js_1 = require("lit/directives/when.js");
const ecs_1 = require("@infinite-canvas-tutorial/ecs");
var ColorType;
(function (ColorType) {
    ColorType["None"] = "none";
    ColorType["Solid"] = "solid";
    ColorType["Gradient"] = "gradient";
})(ColorType || (exports.ColorType = ColorType = {}));
let ColorPicker = class ColorPicker extends lit_1.LitElement {
    constructor() {
        super(...arguments);
        this.types = [ColorType.None, ColorType.Solid, ColorType.Gradient];
        this.type = ColorType.None;
        this.prevColors = {
            [ColorType.None]: 'none',
            [ColorType.Solid]: '#000',
            [ColorType.Gradient]: 'linear-gradient(to right, #000, #fff)',
        };
    }
    willUpdate(changedProperties) {
        if (changedProperties.has('value')) {
            this.type =
                !this.value || this.value === 'none'
                    ? ColorType.None
                    : (0, ecs_1.isGradient)(this.value)
                        ? ColorType.Gradient
                        : ColorType.Solid;
            this.prevColors[this.type] = this.value;
        }
    }
    handleTypeChanged(e) {
        const type = e.target.selected[0];
        this.dispatchEvent(new CustomEvent('color-change', {
            detail: {
                type,
                value: this.prevColors[type],
            },
            bubbles: true,
            composed: true,
        }));
    }
    handleColorChanged(e) {
        const { type, value } = e.detail;
        this.prevColors[type] = value;
    }
    render() {
        return (0, lit_1.html) `
      <h4>Select a color</h4>
      ${(0, when_js_1.when)(this.types.length > 1, () => (0, lit_1.html) `<sp-action-group
          quiet
          compact
          size="m"
          selects="single"
          .selected=${[this.type]}
          @change=${this.handleTypeChanged}
        >
          ${(0, when_js_1.when)(this.types.includes(ColorType.None), () => (0, lit_1.html) `
              <sp-action-button value=${ColorType.None}>
                <sp-tooltip self-managed placement="bottom">
                  No color
                </sp-tooltip>
                <sp-swatch nothing slot="icon"> </sp-swatch>
              </sp-action-button>
            `)}
          ${(0, when_js_1.when)(this.types.includes(ColorType.Solid), () => (0, lit_1.html) `
              <sp-action-button value=${ColorType.Solid}>
                <sp-tooltip self-managed placement="bottom"> Solid </sp-tooltip>
                <sp-swatch
                  color=${this.prevColors[ColorType.Solid]}
                  slot="icon"
                >
                </sp-swatch>
              </sp-action-button>
            `)}
          ${(0, when_js_1.when)(this.types.includes(ColorType.Gradient), () => (0, lit_1.html) `
              <sp-action-button value=${ColorType.Gradient}>
                <sp-tooltip self-managed placement="bottom">
                  Gradient
                </sp-tooltip>
                <sp-swatch
                  style="transform: rotate(90deg);"
                  color=${this.prevColors[ColorType.Gradient]}
                  slot="icon"
                >
                </sp-swatch>
              </sp-action-button>
            `)}
        </sp-action-group>`)}
      ${(0, when_js_1.when)(this.type === ColorType.Solid, () => (0, lit_1.html) `
          <ic-spectrum-input-solid
            value=${this.prevColors[ColorType.Solid]}
            @color-change=${this.handleColorChanged}
          ></ic-spectrum-input-solid>
        `)}
      ${(0, when_js_1.when)(this.type === ColorType.Gradient, () => (0, lit_1.html) `<ic-spectrum-input-gradient
          value=${this.prevColors[ColorType.Gradient]}
          @color-change=${this.handleColorChanged}
        ></ic-spectrum-input-gradient>`)}
    `;
    }
};
exports.ColorPicker = ColorPicker;
ColorPicker.styles = (0, lit_1.css) `
    :host {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 8px;
      height: 200px;
    }

    h4 {
      margin: 0;
    }
  `;
__decorate([
    (0, decorators_js_1.property)()
], ColorPicker.prototype, "value", void 0);
__decorate([
    (0, decorators_js_1.property)()
], ColorPicker.prototype, "types", void 0);
__decorate([
    (0, decorators_js_1.state)()
], ColorPicker.prototype, "type", void 0);
__decorate([
    (0, decorators_js_1.state)()
], ColorPicker.prototype, "prevColors", void 0);
exports.ColorPicker = ColorPicker = __decorate([
    (0, decorators_js_1.customElement)('ic-spectrum-color-picker')
], ColorPicker);
//# sourceMappingURL=color-picker.js.map