genie-component-library/dist/esm/genie-stripe.entry.js

Genie Component Library

import { r as registerInstance, h } from './index-4ab461e5.js';

const genieStripeCss = ":host{padding:0;margin:0;z-index:-1;position:absolute;width:100%;height:100vh}div{height:100%;transform:var(--transform, skewY(-5deg));transform-origin:0;background:var(--gradient, linear-gradient(150deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%));display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:repeat(12, 1fr)}div :nth-child(1){grid-area:var(--block-grid-area-1, 1/1/span 4/span 2);background-color:var(--block-color-1, #53f)}div :nth-child(2){grid-area:var(--block-grid-area-2, 1/3/span 3/span 2);background-color:var(--block-color-2, #4553ff)}div :nth-child(3){grid-area:var(--block-grid-area-3, 1/5/span 2/span 2);background-color:var(--block-color-3, #4f40ff)}div :nth-child(4){grid-area:var(--block-grid-area-4, 3/11/span 3/span 2);background-color:var(--block-color-4, #0dcfff)}div :nth-child(5){grid-area:var(--block-grid-area-5, 8/1/span 5/span 4);background-color:var(--block-color-5, #1fa2ff)}";

const GenieStripe = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
   * Number of blocks in the stripe
   */
    this.numBlocks = 5;
  }
  render() {
    let spans = [];
    for (let i = 0; i < this.numBlocks; i++) {
      spans.push(h("span", { part: "block" }));
    }
    return (h("div", null, spans.map(span => span)));
  }
};
GenieStripe.style = genieStripeCss;

export { GenieStripe as genie_stripe };