artistic-elements/dist/chunks/chunk.NNI6CGSV.js

artistic web components

import {
  __decorateClass,
  e,
  e2,
  i,
  s,
  y
} from "./chunk.FMUK5F65.js";

// src/artistic/radial-circular-gradient.ts
var ArtisticRadialCircularGradient = class extends s {
  constructor() {
    super(...arguments);
    this.width = "10rem";
    this.height = "10rem";
    this.colors = '["#f0f", "#ff0"]';
    this.stops = "[0, 1]";
  }
  render() {
    const colorsArr = JSON.parse(this.colors);
    const stopsArr = JSON.parse(this.stops);
    const colors = colorsArr.length !== stopsArr.length ? `${colorsArr[0]} 0, ${colorsArr[1]} 100%` : colorsArr.map((c, i2) => `${c} ${stopsArr[i2] * 100}%`).join(", ");
    const style = `
      width: ${this.width};
      height: ${this.height};
      background: radial-gradient(circle at center, ${colors})
    `;
    return y`<div style="${style}">
      <slot></slot>
    </div>`;
  }
};
ArtisticRadialCircularGradient.styles = i`
    :host {
      display: contents;
    }
    div {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  `;
__decorateClass([
  e2()
], ArtisticRadialCircularGradient.prototype, "width", 2);
__decorateClass([
  e2()
], ArtisticRadialCircularGradient.prototype, "height", 2);
__decorateClass([
  e2()
], ArtisticRadialCircularGradient.prototype, "colors", 2);
__decorateClass([
  e2()
], ArtisticRadialCircularGradient.prototype, "stops", 2);
ArtisticRadialCircularGradient = __decorateClass([
  e("artistic-radial-circular-gradient")
], ArtisticRadialCircularGradient);

export {
  ArtisticRadialCircularGradient
};