artistic-elements
Version:
artistic web components
90 lines (87 loc) • 2.15 kB
JavaScript
import {
__decorateClass,
e,
e2,
i,
s,
y
} from "./chunk.FMUK5F65.js";
// src/artistic/rectangle-gradient.ts
var ArtisticRectangleGradient = class extends s {
constructor() {
super(...arguments);
this.width = "10rem";
this.height = "10rem";
this.angle = "0deg";
this.color = "#f0f";
this.color2 = "#0f0";
this.top = "0";
this.left = "0";
this.align = "initial";
this["border-radius"] = "0";
}
render() {
const style = `
width: ${this.width};
height: ${this.height};
background: linear-gradient(
${this.angle},
${this.color} 0%,
${this.color} 50%,
${this.color2} 50%,
${this.color2} 100%
);
align-self: ${this.align};
${this.top !== "0" || this.left !== "0" ? "position: absolute;" : ""}
${this.top !== "0" ? `top: ${this.top};` : ""}
${this.left !== "0" ? `left: ${this.left};` : ""}
${this["border-radius"] !== "0" ? `border-radius: ${this["border-radius"]};` : ""}
`;
return y`<div style="${style}">
<slot></slot>
</div>`;
}
};
ArtisticRectangleGradient.styles = i`
:host {
display: contents;
}
div {
display: flex;
align-items: center;
justify-content: center;
}
`;
__decorateClass([
e2()
], ArtisticRectangleGradient.prototype, "width", 2);
__decorateClass([
e2()
], ArtisticRectangleGradient.prototype, "height", 2);
__decorateClass([
e2()
], ArtisticRectangleGradient.prototype, "angle", 2);
__decorateClass([
e2()
], ArtisticRectangleGradient.prototype, "color", 2);
__decorateClass([
e2()
], ArtisticRectangleGradient.prototype, "color2", 2);
__decorateClass([
e2()
], ArtisticRectangleGradient.prototype, "top", 2);
__decorateClass([
e2()
], ArtisticRectangleGradient.prototype, "left", 2);
__decorateClass([
e2()
], ArtisticRectangleGradient.prototype, "align", 2);
__decorateClass([
e2()
], ArtisticRectangleGradient.prototype, "border-radius", 2);
ArtisticRectangleGradient = __decorateClass([
e("artistic-rectangle-gradient")
], ArtisticRectangleGradient);
export {
ArtisticRectangleGradient
};