@salla.sa/twilight-components
Version:
Salla Web Component
44 lines (40 loc) • 2.72 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
const sallaLoyaltyProgramCss = "";
const SallaLoyaltyHero = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyHero extends HTMLElement {
constructor() {
super();
this.__registerHost();
}
render() {
return (h(Host, { key: 'f273bd77fb72c44195d5c59028505a217e4fb2f2' }, h("section", { key: 'dfe6196286fe59610bd084fbf0513bae4dfbe254', class: "s-loyalty-program-hero-container" }, h("div", { key: 'bcbcf95e78477768d050093294147fb6d9777046', class: "s-loyalty-program-hero-background", style: {
backgroundImage: `url(${this.image})`,
} }, this.image ? h("div", { class: "s-loyalty-program-hero-overlay" }) : '', h("div", { key: '61ea985f1105f98da5a6bc58ddce42e88b23df28', class: {
's-loyalty-program-hero-content': true,
's-loyalty-program-hero-white': !!this.image,
's-loyalty-program-hero-gray': !this.image,
} }, h("div", { key: '74b4e725bc91e72fb4512533e9d91dccd2f2a040' }, h("h1", { key: '3f9b8a0d9a1fc9c58007049b91f4852c0e7a9470', class: "s-loyalty-program-hero-title" }, this.name || h("span", { key: 'a404bae08a1d4922b73eef9122f540b4a5a412ae', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "name")), h("p", { key: '04df0835694628c383d8cbb5455400d47bcce501', class: "s-loyalty-program-hero-description" }, this.description || h("span", { key: 'c0d757cbffaf88a4f40dd1a61444189d36c40763', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "description"))), h("slot", { key: 'cd347b02a9c588dca9d98723c7e06adfba5662f8', name: "action" }))), h("div", { key: '261ed03dd2f3ea1ae218b82bf6f2897321fd18c2', class: "s-loyalty-program-hero-footer" }, h("div", { key: 'bf78eba028f33115c6d6ea11bd613bef7202e100', class: "s-loyalty-program-hero-slot-container" }, h("slot", { key: 'd061f05ef8d7959a226b2a3b2d5d915ac525dbe0', name: "crosspoint" }))))));
}
static get style() { return sallaLoyaltyProgramCss; }
}, [4, "salla-loyalty-hero", {
"image": [1],
"name": [1],
"description": [1]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-loyalty-hero"];
components.forEach(tagName => { switch (tagName) {
case "salla-loyalty-hero":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaLoyaltyHero);
}
break;
} });
}
defineCustomElement();
export { SallaLoyaltyHero as S, defineCustomElement as d };