@scania/tegel
Version:
Tegel Design System
59 lines (58 loc) • 3.01 kB
JavaScript
import { h, Host } from "@stencil/core";
import hasSlot from "../../utils/hasSlot";
/**
* @slot top - Slot for the top part of the Footer.
* @slot start - Slot for start (left side) of the Footers main part.
* @slot end - Slot for the end (right side) of the Footers main part.
* @slot copyright - Slot for copyright area (bottom left) of the Footer.
*/
export class TdsFooter {
constructor() {
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")))))));
}
static get is() { return "tds-footer"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["footer.scss"]
};
}
static get styleUrls() {
return {
"$": ["footer.css"]
};
}
static get properties() {
return {
"modeVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary'",
"resolved": "\"primary\" | \"secondary\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Mode variant of the component, based on current mode."
},
"attribute": "mode-variant",
"reflect": false,
"defaultValue": "null"
}
};
}
static get elementRef() { return "host"; }
}