@duetds/components
Version:
This package includes Duet Core Components and related tools.
176 lines (175 loc) • 15 kB
JavaScript
import { r as registerInstance, h, H as Host, c as getElement } from './core-12b6bfe8.js';
var DuetLayout = /** @class */ (function () {
function DuetLayout(hostRef) {
var _this = this;
registerInstance(this, hostRef);
/**
* Own Properties.
*/
this.hasSidebar = false;
this.hasTop = false;
this.ua = "";
this.layoutHeight = 0;
this.sidebarHeight = 0;
this.isTicking = false;
this.lastPosition = -1;
/**
* Makes the sidebar stick to the top of the window when scrolling down.
*/
this.sticky = false;
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Adjust the distance from top of the viewport (in pixels) when the sidebar becomes sticky.
*/
this.stickyTop = 540;
/**
* Adjust sticky sidebar’s distance to duet navigation component using this property. Can be one of: "with-links", "without-links".
*/
this.stickyDistance = "with-links";
/**
* Center align all direct childs of this component.
*/
this.center = false;
/**
* Align container vertically in the middle when the space allows it.
*/
this.middle = false;
/**
* Local methods
*/
this.getFrame = function () {
if (!_this.isTicking) {
requestAnimationFrame(_this.animationLoop);
_this.isTicking = true;
}
};
this.animationLoop = function () {
// Avoid calculations if not needed
var pos = window.pageYOffset;
if (_this.lastPosition === pos) {
_this.isTicking = false;
}
else {
_this.lastPosition = pos;
}
if (_this.sidebarHeight === 0) {
_this.sidebarHeight = _this.sidebar.offsetHeight;
}
var scrollHeight = _this.layoutHeight + _this.stickyTop - _this.sidebarHeight - 20;
// If we’ve scrolled past the trigger point, but haven’t reached the bottom of container
if (pos > _this.stickyTop && pos < scrollHeight) {
_this.sidebar.classList.add("sticky");
_this.sidebar.classList.remove("sticky-stopped");
// If we’ve scrolled past the trigger point AND have reached the bottom of container
}
else if (pos > _this.stickyTop && pos > scrollHeight) {
_this.sidebar.classList.add("sticky-stopped");
// When scrolling back to top, remove all sticky classes
}
else {
_this.sidebar.classList.remove("sticky");
_this.sidebar.classList.remove("sticky-stopped");
}
_this.isTicking = false;
};
}
/**
* Component lifecycle events.
*/
DuetLayout.prototype.componentWillLoad = function () {
this.hasSidebar = !!this.element.querySelector("[slot='sidebar']");
this.hasTop = !!this.element.querySelector("[slot='top']");
if (!this.element.querySelector("[slot='main']")) {
console.warn("[DUET WARNING]: Nothing passed to <duet-layout> named slots. Please use one of 'main', 'sidebar' or 'top' to display contents.");
}
};
DuetLayout.prototype.componentDidLoad = function () {
{
this.sidebar = this.element.shadowRoot.querySelector(".duet-sidebar-container");
}
this.layoutHeight = this.element.offsetHeight;
this.ua = navigator.userAgent || navigator.vendor;
if (this.sticky) {
window.addEventListener("scroll", this.getFrame, false);
}
};
DuetLayout.prototype.componentDidUnload = function () {
if (this.sticky) {
window.removeEventListener("scroll", this.getFrame);
}
};
/**
* render() function.
* Always the last one in the class.
*/
DuetLayout.prototype.render = function () {
return (h(Host, { class: { "duet-middle": this.middle, "duet-ie": document["documentMode"] || /Edge/.test(this.ua) } }, this.hasTop ? (h("div", { class: { "duet-layout-top": true, "has-sidebar": this.hasSidebar, "duet-center": this.center } }, h("div", { class: "duet-layout-top-wrapper" }, h("div", { class: "duet-layout-top-margin" }, h("slot", { name: "top" }))))) : (""), h("div", { class: {
"duet-layout": true,
"has-sidebar": this.hasSidebar,
"duet-m-0": this.margin === "none",
"duet-no-nav": this.navDistance === "none",
"duet-with-links": this.navDistance === "with-links",
"duet-without-links": this.navDistance === "without-links",
"duet-center": this.center,
"sticky-without-links": this.stickyDistance === "without-links",
} }, h("main", { class: "duet-main" }, h("slot", { name: "main" })), this.hasSidebar ? (h("aside", { class: "duet-sidebar" }, h("div", { class: "duet-sidebar-container" }, h("slot", { name: "sidebar" })))) : (""))));
};
Object.defineProperty(DuetLayout.prototype, "element", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(DuetLayout, "style", {
get: function () { return ":host{-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;display:block;width:100%;-ms-flex:1 0 auto;flex:1 0 auto}:host(.duet-middle){display:-ms-flexbox;display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px!important}\@media only screen and (min-width:36em){:host(.duet-middle) .duet-layout{padding:48px 36px!important}}\@media only screen and (min-width:62em){:host(.duet-middle) .duet-layout{padding:56px!important}}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{-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 36px;position:relative;max-width:1110px;margin-top:72px;padding:0 16px}.duet-layout.duet-m-0{margin-top:0!important;margin-bottom:0!important}.duet-layout.duet-without-links{margin-top:112px}\@media only screen and (min-width:62em){.duet-layout.duet-without-links{margin-top:136px}}.duet-layout.duet-with-links{margin-top:112px}\@media only screen and (min-width:62em){.duet-layout.duet-with-links{margin-top:184px}}.duet-layout.duet-no-nav{margin-top:0}.duet-layout.duet-center{max-width:888px;width:100%;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:36em){.duet-layout.duet-center{padding:0 48px}}\@media only screen and (min-width:48em){.duet-layout.duet-center{padding:0 72px}}\@media only screen and (min-width:62em){.duet-layout.duet-center{width:100%}}\@media only screen and (min-width:36em){.duet-layout{padding:0 28px}}\@media only screen and (min-width:62em){.duet-layout{display:-ms-flexbox;display:flex;flex-start:flex-start;-ms-flex-direction:row;flex-direction:row;padding:0 56px;margin-bottom:48px}}\@media only screen and (min-width:76.25em){.duet-layout{padding:0}}.duet-layout-bottom,.duet-layout-top,.duet-main,.duet-sidebar{margin:0}.duet-layout-bottom,.duet-layout-top,.duet-main,.duet-sidebar{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;display:block;width:100%}.duet-layout-top{margin:0;margin:0 auto;position:relative}.duet-layout-top-wrapper{margin:0 auto;padding:0 20px;max-width:1110px}\@media only screen and (min-width:36em){.duet-layout-top-wrapper{padding:0 28px}}\@media only screen and (min-width:62em){.duet-layout-top-wrapper{padding:0 56px}}.duet-center .duet-layout-top-wrapper{max-width:740px}\@media only screen and (min-width:36em){.duet-center .duet-layout-top-wrapper{padding:0 48px}}\@media only screen and (min-width:48em){.duet-center .duet-layout-top-wrapper{padding:0 72px}}\@media only screen and (min-width:62em){.duet-layout-top-margin{padding-right:20px}.has-sidebar .duet-layout-top-margin{padding-right:0}}.duet-main{-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}\@media only screen and (min-width:62em){.duet-main{margin-right:20px}}.duet-sidebar{-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-bottom:auto}\@media only screen and (min-width:62em){.duet-sidebar{min-width:356px;max-width:356px}}.duet-sidebar-container{-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}\@media only screen and (min-width:62em){.duet-sidebar-container{width:356px}.duet-sidebar-container.sticky{top:4.5rem;position:fixed}.sticky-without-links .duet-sidebar-container.sticky{top:5.2rem}.duet-sidebar-container.sticky-stopped{position:absolute;top:auto;bottom:0}}"; },
enumerable: true,
configurable: true
});
return DuetLayout;
}());
var DuetSpacer = /** @class */ (function () {
function DuetSpacer(hostRef) {
registerInstance(this, hostRef);
/**
* Size variation of the spacer. Can be any of the spacing tokens.
*/
this.size = "medium";
/**
* Direction of the space added. Can be one of: "vertical", "horizontal".
*/
this.direction = "vertical";
/**
* Adjusts the breakpoint where the spacer is shown in. The functionality follows 1:1 the media queries defined in design tokens. Can be one of: "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large".
*/
this.breakpoint = "";
}
/**
* render() function
* Always the last one in the class.
*/
DuetSpacer.prototype.render = function () {
var _a;
return (h(Host, { class: (_a = {
"duet-spacer": true,
"duet-spacer-xx-small": this.breakpoint === "xx-small",
"duet-spacer-x-small": this.breakpoint === "x-small",
"duet-spacer-small": this.breakpoint === "small",
"duet-spacer-medium": this.breakpoint === "medium",
"duet-spacer-large": this.breakpoint === "large",
"duet-spacer-x-large": this.breakpoint === "x-large",
"duet-spacer-xx-large": this.breakpoint === "xx-large"
},
_a[this.size] = true,
_a[this.direction] = true,
_a) }, h("slot", null)));
};
Object.defineProperty(DuetSpacer, "style", {
get: function () { return ":host{-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;position:relative;display:block;width:12px;height:12px}\@media only screen and (min-width:36em){:host{width:16px;height:16px}}:host(.horizontal){display:inline-block;height:100%!important}:host(.horizontal.x-small),:host(.horizontal.xx-small){height:100%;width:4px;min-width:4px}\@media only screen and (min-width:36em){:host(.horizontal.x-small){width:8px;min-width:8px}}:host(.horizontal.small){height:100%;width:8px;min-width:8px}\@media only screen and (min-width:36em){:host(.horizontal.small){width:12px;min-width:12px}}:host(.horizontal.medium){height:100%}:host(.horizontal.large){height:100%;width:16px;min-width:16px}\@media only screen and (min-width:36em){:host(.horizontal.large){width:20px;min-width:20px}}:host(.horizontal.x-large){height:100%;width:20px;min-width:20px}\@media only screen and (min-width:36em){:host(.horizontal.x-large){width:28px;min-width:28px}}:host(.horizontal.xx-large){height:100%;width:28px;min-width:28px}\@media only screen and (min-width:36em){:host(.horizontal.xx-large){width:36px;min-width:36px}}:host(.horizontal.xxx-large){height:100%;width:36px;min-width:36px}\@media only screen and (min-width:36em){:host(.horizontal.xxx-large){width:48px;min-width:48px}}:host(.horizontal.xxxx-large){height:100%;width:48px;min-width:48px}\@media only screen and (min-width:36em){:host(.horizontal.xxxx-large){width:72px;min-width:72px}}:host(.vertical.x-small),:host(.vertical.xx-small){width:100%;height:4px;min-height:4px}\@media only screen and (min-width:36em){:host(.vertical.x-small){height:8px;min-height:8px}}:host(.vertical.small){width:100%;height:8px;min-height:8px}\@media only screen and (min-width:36em){:host(.vertical.small){height:12px;min-height:12px}}:host(.vertical.medium){width:100%}:host(.vertical.large){width:100%;height:16px;min-height:16px}\@media only screen and (min-width:36em){:host(.vertical.large){height:20px;min-height:20px}}:host(.vertical.x-large){width:100%;height:20px;min-height:20px}\@media only screen and (min-width:36em){:host(.vertical.x-large){height:28px;min-height:28px}}:host(.vertical.xx-large){width:100%;height:28px;min-height:28px}\@media only screen and (min-width:36em){:host(.vertical.xx-large){height:36px;min-height:36px}}:host(.vertical.xxx-large){width:100%;height:36px;min-height:36px}\@media only screen and (min-width:36em){:host(.vertical.xxx-large){height:48px;min-height:48px}}:host(.vertical.xxxx-large){width:100%;height:48px;min-height:48px}\@media only screen and (min-width:36em){:host(.vertical.xxxx-large){height:72px;min-height:72px}}:host(.duet-spacer-xx-small){display:none}\@media only screen and (max-width:22.5em){:host(.duet-spacer-xx-small){display:block}}:host(.duet-spacer-x-small){display:none}\@media only screen and (max-width:35.9375em){:host(.duet-spacer-x-small){display:block}}:host(.duet-spacer-small){display:none}\@media only screen and (min-width:36em){:host(.duet-spacer-small){display:block}}:host(.duet-spacer-medium){display:none}\@media only screen and (min-width:48em){:host(.duet-spacer-medium){display:block}}:host(.duet-spacer-large){display:none}\@media only screen and (min-width:62em){:host(.duet-spacer-large){display:block}}:host(.duet-spacer-x-large){display:none}\@media only screen and (min-width:64.0625em){:host(.duet-spacer-x-large){display:block}}:host(.duet-spacer-xx-large){display:none}\@media only screen and (min-width:76.25em){:host(.duet-spacer-xx-large){display:block}}"; },
enumerable: true,
configurable: true
});
return DuetSpacer;
}());
export { DuetLayout as duet_layout, DuetSpacer as duet_spacer };