@scania/tegel
Version:
Tegel Design System
62 lines (61 loc) • 3.15 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() {
/** 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")))))));
}
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' | null",
"resolved": "\"primary\" | \"secondary\" | null",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Mode variant of the component, based on current mode."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "mode-variant",
"defaultValue": "null"
}
};
}
static get elementRef() { return "host"; }
}