@scania/tegel
Version:
Tegel Design System
27 lines (23 loc) • 3.68 kB
JavaScript
import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
import { h as hasSlot } from './hasSlot-DDX6uFcm.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} 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 TdsFooter = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** Mode variant of the component, based on current mode. */
this.modeVariant = null;
this.copyrightText = `Copyright © ${new Date().getFullYear()} Scania`;
}
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: '48864143f8e7c122b60c5f95ac087f81da23cbd6', class: {
[`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
} }, h("footer", { key: 'aa7efca2b32ea0bd81719eff1730e7ab0a5b69c9' }, usesTopSlot && h("slot", { key: '662e7f205b7ee9bf5202441f45835da44da01ffe', name: "top" }), h("div", { key: '42ba2e344380a87d4dbf3dc90b214a99d10b9dfe', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: 'b6b62659aa80fe86f7240b4e2a7187f81a0ae3d7', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '5f10f1f47de58d4ce142d720e2ab924c9935afcd', name: "start" }), usesEndSlot && h("slot", { key: '88165d1b0925e31e302eaec0e2fcd795c5e4ece1', name: "end" }))), h("div", { key: '99e987a96dbb762725b78b647164627f4abe7790', class: "footer-main-bottom" }, h("small", { key: 'f24bfbe5b9733c1effc45608ed6fc4c10d3c9631', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: '2947b9f5c59eb5315d1787a3e13203a0359ec8af', class: "brand" }, h("p", { key: '83aa6191d31573002c275d0042f5871449ce4fe5' }, "Scania")))))));
}
get host() { return getElement(this); }
};
TdsFooter.style = footerCss();
export { TdsFooter as tds_footer };