@scania/tegel
Version:
Tegel Design System
48 lines (43 loc) • 4.28 kB
JavaScript
import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
import { h as hasSlot } from './p-ae110fc2.js';
const footerCss = ":host{display:block}:host slot[name=top]::slotted(*){box-sizing:border-box;background-color:var(--tds-footer-top-background);padding:40px;display:grid;grid-template-columns:repeat(4, 1fr);row-gap:40px;width:100%}:host .footer-main{background-color:var(--tds-footer-main-background);padding:0 40px}:host .footer-main-top{padding:40px 0;display:flex;justify-content:space-between}:host slot[name=start],:host slot[name=end]{display:flex}:host slot[name=start]::slotted(*),:host slot[name=end]::slotted(*){display:flex;column-gap:24px}:host slot[name=end]{margin-left:auto}:host .footer-main-bottom{padding:40px 0;display:flex;justify-content:space-between;border-top:1px solid var(--tds-footer-main-divider)}:host .footer-main-bottom small.copyright{margin:0;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-footer-main-copyright)}:host .footer-main-bottom .brand{background-image:var(--tds-background-image-scania-wordmark-white-svg-local), var(--tds-background-image-scania-wordmark-white-svg);background-repeat:no-repeat;background-size:117px;background-position:right;width:117px;height:20px}:host .footer-main-bottom .brand p{color:transparent;padding:0;margin:0;height:100%;visibility:hidden}@media all and (max-width: 992px){:host slot[name=top]::slotted(*){display:block;width:100%;padding:0}:host .footer-main{padding:0 24px}:host .footer-main-top{flex-direction:column;row-gap:48px;padding:24px 0}:host slot[name=end]::slotted(*){flex-direction:row;gap:8px}:host slot[name=end]{margin-left:unset}:host .footer-main-bottom{flex-direction:column;padding-bottom:32px}:host .footer-main-bottom p.copyright{padding-bottom:96px}:host .footer-main-bottom .brand{width:100%}}";
const TdsFooterStyle0 = footerCss;
const TdsFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsFooter extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.copyrightText = `Copyright © ${new Date().getFullYear()} Scania`;
this.modeVariant = null;
}
render() {
const usesTopSlot = hasSlot('top', this.host);
const usesStartSlot = hasSlot('start', this.host);
const usesEndSlot = hasSlot('end', this.host);
const usesCopyrightSlot = hasSlot('copyright', this.host);
return (h(Host, { key: 'f9a9a196e8f9b49545edbe7e37ef5c7e6108d032', class: {
[`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
} }, h("footer", { key: 'b594e0548fb46ef6b5f829296eb616748b647440' }, usesTopSlot && h("slot", { key: '6127b1d29152c1023820d5220c7453cce76b9e5d', name: "top" }), h("div", { key: 'b0f918488b8cf27f19d8410ab5d05e39478dffd5', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: '63aae985dab88e5f31f4bd271d89dd5cf66e521c', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '91c21420d33cb9dd1190324a73b095fdcc655174', name: "start" }), usesEndSlot && h("slot", { key: '672e6d1b2be9bf0d4223662e58d2f92d1e914fb2', name: "end" }))), h("div", { key: '28dd4db6c1ea0de52dfe3c0f0ea19541afdeecc6', class: "footer-main-bottom" }, h("small", { key: '0e760565515a6a57bf7948647bc0c526f70386f8', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: 'ef7647abe740819c88ed202412beb2b7cc0d18fb', class: "brand" }, h("p", { key: 'ab9bf46b2fca845a5d6c365fe3fd9f0b456ba819' }, "Scania")))))));
}
get host() { return this; }
static get style() { return TdsFooterStyle0; }
}, [1, "tds-footer", {
"modeVariant": [1, "mode-variant"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-footer"];
components.forEach(tagName => { switch (tagName) {
case "tds-footer":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsFooter$1);
}
break;
} });
}
defineCustomElement$1();
const TdsFooter = TdsFooter$1;
const defineCustomElement = defineCustomElement$1;
export { TdsFooter, defineCustomElement };