@duetds/components
Version:
This package includes Duet Core Components and related tools.
98 lines (97 loc) • 10.9 kB
JavaScript
import { r as registerInstance, d as createEvent, h, c as getElement } from './core-12b6bfe8.js';
import { d as duetIcons } from './icons-cfd0386d.js';
var DuetFooter = /** @class */ (function () {
function DuetFooter(hostRef) {
var _this = this;
registerInstance(this, hostRef);
/**
* Theme of the navigation. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Style variation of the footer. Can be one of: "default", "simple".
*/
this.variation = "default";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* URL that the logo link points to.
*/
this.logoHref = "/";
/**
* The currently active language. This setting changes the logo to match the chosen language. Can be one of: "fi", "en", "sv".
*/
this.language = "fi";
/**
* Component event handling.
*/
this.handleClick = function (ev, data) {
_this.emitChange(ev, data);
ev.cancelBubble = true;
};
this.duetChange = createEvent(this, "duetChange", 3);
}
/**
* Component lifecycle events.
*/
DuetFooter.prototype.componentWillLoad = function () {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
};
/**
* Local methods
*/
DuetFooter.prototype.hasValidItems = function (array) {
return Array.isArray(array);
};
DuetFooter.prototype.emitChange = function (ev, data) {
this.duetChange.emit({
originalEvent: ev,
data: data,
component: "duet-footer",
});
};
/**
* render() function
* Always the last one in the class.
*/
DuetFooter.prototype.render = function () {
var _this = this;
var year = new Date().getFullYear();
var copyright = "© LähiTapiola " + year;
if (this.language === "en") {
copyright = "© LocalTapiola " + year;
}
else if (this.language === "sv") {
copyright = "© LokalTapiola " + year;
}
if (this.theme === "turva") {
copyright = "© Turva " + year;
}
return (h("footer", { class: {
"duet-footer": true,
"duet-m-0": this.margin === "none",
"duet-theme-turva": this.theme === "turva",
"duet-footer-simple": this.variation === "simple",
} }, h("div", { class: "duet-footer-wrapper" }, h("div", { class: "duet-footer-top" }, this.variation !== "simple" ? (h("duet-logo", { href: this.logoHref, size: "large", inverse: true, language: this.language, theme: this.theme })) : (""), this.hasValidItems(this.items) && this.variation !== "simple"
? this.items.map(function (item) { return (h("a", { class: "duet-footer-link", href: item["href"], id: item["id"], onClick: function (event) { return _this.handleClick(event, item); } }, h("div", { class: "duet-footer-icon", innerHTML: duetIcons[item["icon"]].svg, "aria-hidden": "true" }), h("span", null, item["label"]), h("div", { class: "duet-footer-arrow", innerHTML: duetIcons["action-arrow-right"].svg, "aria-hidden": "true" }))); })
: ""), h("p", { class: "duet-footer-menu" }, h("span", { class: "duet-footer-copyright" }, copyright, h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")), this.hasValidItems(this.menu)
? this.menu.map(function (item) { return (h("a", { href: item["href"], id: item["id"], onClick: function (event) { return _this.handleClick(event, item); } }, item["label"], h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/"))); })
: ""))));
};
Object.defineProperty(DuetFooter.prototype, "element", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(DuetFooter, "style", {
get: function () { return ":host{background:transparent;-ms-flex-negative:0;flex-shrink:0}.duet-footer,:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;padding:0;margin:0;display:block;width:100%}.duet-footer{background:transparent;margin-top:72px;background:#00294d;padding-top:20px;padding-bottom:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;font-weight:400;line-height:1.5;color:#fff;text-align:left}.duet-footer.duet-p-0{padding:0!important}.duet-footer.duet-m-0{margin:0!important}\@media only screen and (min-width:36em){.duet-footer{padding-top:36px}}\@media only screen and (min-width:62em){.duet-footer{padding-top:48px;padding-bottom:36px}}.duet-footer.duet-theme-turva{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;background:#c60c30}.duet-footer a{color:#fff;text-decoration:none}.duet-footer-wrapper{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin:0 auto;position:relative;max-width:1110px}\@media only screen and (min-width:62em){.duet-footer-wrapper{padding:0 48px}}\@media only screen and (min-width:76.25em){.duet-footer-wrapper{padding:0 20px 0 0}}.duet-footer-top{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;width:100%}\@media only screen and (min-width:62em){.duet-footer-top{-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex}}duet-logo{margin-left:16px!important}\@media only screen and (min-width:36em){duet-logo{margin-left:28px!important}}\@media only screen and (min-width:62em){duet-logo{margin-left:0!important}}.duet-footer-link{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;padding:16px!important;-webkit-transition:background-color .3s ease;transition:background-color .3s ease;border-bottom:1px solid hsla(0,0%,100%,.2);font-weight:600;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;width:100%}\@media only screen and (min-width:36em){.duet-footer-link{padding-left:28px!important;padding-right:20px!important}}\@media only screen and (min-width:62em){.duet-footer-link{padding-left:0!important;padding-right:0!important;min-width:0;width:auto;border:0}}.duet-footer-link:first-of-type{margin-top:20px;border-top:1px solid hsla(0,0%,100%,.2)}\@media only screen and (min-width:62em){.duet-footer-link:first-of-type{margin:0;border:0}}.duet-footer-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}.duet-footer-link:hover{background:rgba(0,0,0,.1)}\@media only screen and (min-width:62em){.duet-footer-link:hover{background:transparent;text-decoration:underline}}.duet-footer-icon{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-right:16px;width:48px;height:48px;padding:12px;min-width:48px;background:#0077b3;border-radius:50%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.duet-theme-turva .duet-footer-icon{background:transparent;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}.duet-footer-icon svg{display:block;pointer-events:none;width:100%;height:100%}.duet-footer-arrow,.duet-footer-icon svg{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0}.duet-footer-arrow{width:20px;height:20px;min-width:20px;max-width:20px;max-height:20px;color:#fff;margin-left:auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}\@media only screen and (min-width:62em){.duet-footer-arrow{width:10px;min-width:10px;margin-left:8px;margin-top:3px;margin-right:0}}.duet-footer-arrow svg{padding:0;display:block;pointer-events:none;width:100%;height:100%}.duet-footer-arrow svg,.duet-footer-menu{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;margin:0}.duet-footer-menu{padding:0;padding:20px!important;font-size:.875rem}\@media only screen and (min-width:36em){.duet-footer-menu{padding:28px!important}}\@media only screen and (min-width:62em){.duet-footer-menu{padding-left:8px!important}}.duet-footer-menu a{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;text-decoration:none}.duet-footer-menu a:focus,.duet-footer-menu a:hover{text-decoration:underline}.duet-footer-menu a:focus .duet-footer-divider,.duet-footer-menu a:hover .duet-footer-divider{text-decoration:none}.duet-footer-menu .duet-footer-divider{display:inline-block;margin:0 8px}.duet-footer-menu a:last-of-type .duet-footer-divider{display:none}.duet-footer-copyright{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;color:#fff}.duet-footer-simple{margin:0;margin-top:16px;border-top:1px solid #e1e3e6;padding:0;background:transparent!important;color:#00294d}.duet-footer-simple .duet-footer-wrapper{margin:0;padding:0 20px;max-width:100%}\@media only screen and (min-width:62em){.duet-footer-simple .duet-footer-wrapper{padding:0 36px}}\@media screen and (min-width:1700px){.duet-footer-simple .duet-footer-wrapper{padding:0 48px}}.duet-footer-simple .duet-footer-copyright,.duet-footer-simple .duet-footer-menu a{color:#00294d}.duet-footer-simple .duet-footer-menu{padding:20px 0!important}.duet-footer-simple.duet-theme-turva{color:#111;border-color:#e6e6e6}.duet-footer-simple.duet-theme-turva .duet-footer-copyright,.duet-footer-simple.duet-theme-turva .duet-footer-menu a{color:#111}"; },
enumerable: true,
configurable: true
});
return DuetFooter;
}());
export { DuetFooter as duet_footer };