@cas-smartdesign/header-layout 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/LICENSE +8 -0
  2. package/dist/docs/doc.css +1 -0
  3. package/dist/docs/doc.mjs +288 -0
  4. package/dist/docs/index.html +26 -0
  5. package/dist/docs/manual-switch-content.js +1 -0
  6. package/dist/docs/manual-switch-style.js +1 -0
  7. package/dist/docs/monkey.svg +55 -0
  8. package/dist/header-layout-with-externals.js +61 -0
  9. package/dist/header-layout-with-externals.js.map +7 -0
  10. package/dist/header-layout.d.ts +56 -0
  11. package/dist/header-layout.mjs +147 -0
  12. package/dist/header-layout.mjs.map +1 -0
  13. package/npm-third-party-licenses.json +187 -0
  14. package/package.json +33 -0
  15. package/readme.md +16 -0
package/dist/docs/index.html ADDED
@@ -0,0 +1,26 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7
+ <title>Header Demo</title>
8
+ <style>
9
+ .markdown-body {
10
+ box-sizing: border-box;
11
+ min-width: 200px;
12
+ max-width: 980px;
13
+ margin: 0 auto !important;
14
+ padding-bottom: 45px;
15
+ }
16
+ .markdown-body img {
17
+ background-color: transparent !important;
18
+ }
19
+ </style>
20
+ <script type="module" crossorigin src="./doc.mjs"></script>
21
+ <link rel="stylesheet" crossorigin href="./doc.css">
22
+ </head>
23
+ <body>
24
+ <div class="markdown-body"><div id="markdown-container"></div></div>
25
+ </body>
26
+ </html>
package/dist/docs/manual-switch-content.js ADDED
@@ -0,0 +1 @@
1
+ import"./doc.mjs";const t=document.querySelector("#manual-switch-example"),l=t.querySelector(".header-container"),s=t.querySelector(".header.large"),e=t.querySelector(".header.small");e.style.display="none";new ResizeObserver(()=>{s.style.display="",e.style.display="",s.style.minHeight=Math.ceil(e.offsetHeight+2)+"px",t.minimumHeaderHeight=l.offsetHeight-s.offsetHeight,e.style.display="none",t.measure()}).observe(l);t.addEventListener("header-switch",a=>{a.detail.shouldShowNormalHeader?(s.style.display="",e.style.display="none"):(s.style.display="none",e.style.display="")});
package/dist/docs/manual-switch-style.js ADDED
@@ -0,0 +1 @@
1
+ import"./doc.mjs";const a=document.querySelector("#custom-event-example"),e=a.querySelector(".header");a.minimumHeaderHeight=40;a.addEventListener("header-switch",l=>{l.detail.shouldShowNormalHeader?(e.classList.add("large"),e.classList.remove("small")):(e.classList.remove("large"),e.classList.add("small")),e.querySelector("span").innerText=`Switched to ${l.detail.shouldShowNormalHeader?"normal":"small"} header`});
package/dist/docs/monkey.svg ADDED
@@ -0,0 +1,55 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 48 48">
2
+ <defs>
3
+ <linearGradient id="e">
4
+ <stop offset="0" stop-color="#3d280a"/>
5
+ <stop offset="1" stop-color="#3d280a" stop-opacity="0"/>
6
+ </linearGradient>
7
+ <linearGradient id="d">
8
+ <stop offset="0"/>
9
+ <stop offset="1" stop-opacity="0"/>
10
+ </linearGradient>
11
+ <linearGradient id="f">
12
+ <stop offset="0" stop-color="#a15702"/>
13
+ <stop offset="1" stop-color="#683c00"/>
14
+ </linearGradient>
15
+ <linearGradient id="b">
16
+ <stop offset="0" stop-color="#f6e1cf"/>
17
+ <stop offset=".5" stop-color="#e19d56"/>
18
+ <stop offset="1" stop-color="#f4dcb7"/>
19
+ </linearGradient>
20
+ <linearGradient id="c">
21
+ <stop offset="0" stop-color="#8f5402"/>
22
+ <stop offset="1" stop-color="#6e4001"/>
23
+ </linearGradient>
24
+ <linearGradient id="a">
25
+ <stop offset="0" stop-color="#fff"/>
26
+ <stop offset="1" stop-color="#fff" stop-opacity=".29963899"/>
27
+ </linearGradient>
28
+ <linearGradient xlink:href="#a" id="o" x1="24" y1="7.4000092" x2="24" y2="38.329697" gradientUnits="userSpaceOnUse"/>
29
+ <radialGradient xlink:href="#b" id="m" cx="-14.822968" cy="20.156464" fx="-14.822968" fy="20.156464" r="5.3293829" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.45184 1.17473 -1.32428 2.80558 46.03865 -21.18657)"/>
30
+ <radialGradient xlink:href="#b" id="j" cx="-3.0652061" cy="18.305458" fx="-3.0652061" fy="18.305458" r="5.3310089" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.834793 -46.7895) scale(3.55604)"/>
31
+ <linearGradient xlink:href="#c" id="h" x1="-10.735215" y1="11.428152" x2="-9.25" y2="18.440943" gradientUnits="userSpaceOnUse"/>
32
+ <linearGradient xlink:href="#c" id="k" x1="-10.153608" y1="10.91142" x2="-7.9586563" y2="18.145666" gradientUnits="userSpaceOnUse"/>
33
+ <linearGradient xlink:href="#a" id="l" x1="-5.2680058" y1="20.641153" x2="-12.272349" y2="8.6855774" gradientUnits="userSpaceOnUse"/>
34
+ <linearGradient xlink:href="#a" id="i" gradientUnits="userSpaceOnUse" x1="-5.2680058" y1="20.641153" x2="-12.272349" y2="8.6855774"/>
35
+ <radialGradient xlink:href="#d" id="g" cx="-6" cy="37.75" fx="-6" fy="37.75" r="14" gradientTransform="matrix(1 0 0 .26786 0 27.63839)" gradientUnits="userSpaceOnUse"/>
36
+ <linearGradient xlink:href="#a" id="r" x1="29.064308" y1="39.4202" x2="12.860207" y2="2.4916291" gradientUnits="userSpaceOnUse"/>
37
+ <radialGradient xlink:href="#b" id="p" cx="24.00001" cy="32.820721" fx="24.00001" fy="32.820721" r="14.999994" gradientTransform="matrix(2.78388 0 0 1.96169 -42.81308 -33.63393)" gradientUnits="userSpaceOnUse"/>
38
+ <radialGradient xlink:href="#e" id="q" cx="23.987946" cy="30.12611" fx="23.987946" fy="30.12611" r="10.987951" gradientTransform="matrix(1.83824 0 0 .85527 -20.10762 3.134087)" gradientUnits="userSpaceOnUse"/>
39
+ <radialGradient xlink:href="#f" id="n" cx="24" cy="13.057613" fx="24" fy="13.057613" r="16.971834" gradientTransform="matrix(1.63506 0 0 1.83045 -15.24149 -12.15138)" gradientUnits="userSpaceOnUse"/>
40
+ </defs>
41
+ <path style="marker:none" d="M8 37.75a14 3.75 0 1 1-28 0 14 3.75 0 1 1 28 0z" transform="matrix(1.53571 0 0 1.51296 33.46429 -17.11425)" opacity=".48453608" color="#000" fill="url(#g)" fill-rule="evenodd" overflow="visible"/>
42
+ <path style="marker:none" d="M-4.5 14.75a4.75 4.75 0 1 1-9.5 0 4.75 4.75 0 1 1 9.5 0z" transform="matrix(1.0421 0 0 1.36842 16.13946 .81579)" color="#000" fill="url(#h)" fill-rule="evenodd" stroke="#3d280a" stroke-width=".83740312" stroke-linecap="round" stroke-linejoin="round" overflow="visible"/>
43
+ <path style="marker:none" d="M-4.5 14.75a4.75 4.75 0 1 1-9.5 0 4.75 4.75 0 1 1 9.5 0z" transform="matrix(.8421 0 0 1.166 14.28947 3.84008)" opacity=".2" color="#000" fill="none" stroke="url(#i)" stroke-width="1.00918198" stroke-linecap="round" stroke-linejoin="round" overflow="visible"/>
44
+ <path style="marker:none" d="M-4.5 14.75a4.75 4.75 0 1 1-9.5 0 4.75 4.75 0 1 1 9.5 0z" transform="matrix(.79945 0 0 .95167 14.62707 7.030045)" color="#000" fill="url(#j)" fill-rule="evenodd" stroke="#50340d" stroke-width="1.14646637" stroke-linecap="round" stroke-linejoin="round" overflow="visible"/>
45
+ <path style="marker:none" d="M-4.5 14.75a4.75 4.75 0 1 1-9.5 0 4.75 4.75 0 1 1 9.5 0z" transform="matrix(1.0421 0 0 1.36842 51.13946 .81579)" color="#000" fill="url(#k)" fill-rule="evenodd" stroke="#3d280a" stroke-width=".83740354" stroke-linecap="round" stroke-linejoin="round" overflow="visible"/>
46
+ <path style="marker:none" d="M-4.5 14.75a4.75 4.75 0 1 1-9.5 0 4.75 4.75 0 1 1 9.5 0z" transform="matrix(.8421 0 0 1.166 49.28947 3.80162)" opacity=".2" color="#000" fill="none" stroke="url(#l)" stroke-width="1.00918198" stroke-linecap="round" stroke-linejoin="round" overflow="visible"/>
47
+ <path style="marker:none" d="M-4.5 14.75a4.75 4.75 0 1 1-9.5 0 4.75 4.75 0 1 1 9.5 0z" transform="matrix(.78975 0 0 .95167 48.02639 7.030045)" color="#000" fill="url(#m)" fill-rule="evenodd" stroke="#50340d" stroke-width="1.15348637" stroke-linecap="round" stroke-linejoin="round" overflow="visible"/>
48
+ <path style="marker:none" d="M37.5 23.5c7.5 8 0 19-13.5 18.999981C10.5 42.499962 3 31.5 10.5 23.5 6.5 13 14.5 5.4999918 24 5.4999959 33.5 5.5 41.5 13 37.5 23.5z" color="#000" fill="url(#n)" fill-rule="evenodd" stroke="#3d280a" stroke-width=".99999958" stroke-linecap="round" stroke-linejoin="round" overflow="visible"/>
49
+ <path style="marker:none" d="M36.5 23.5c7 8 .203501 18.000017-12.500001 18C11.296497 41.499981 4.5 31.5 11.5 23.5 7.5 13 15.060498 6.5000053 23.999999 6.5000091 32.939499 6.500013 40.5 13 36.5 23.5z" color="#000" fill="none" stroke="url(#o)" stroke-width=".99999928" stroke-linecap="round" stroke-linejoin="round" overflow="visible" opacity=".3814433"/>
50
+ <path style="marker:none" d="M17.838217 10.504844C14.264974 10.725244 11.5 14.102208 11.5 18.5c0 1.915169.480445 3.910093 1.384633 5.308394C10.771363 25.573646 9.5 27 9.5016977 30.339227 9.5045488 35.947033 15 40.5 23.999992 40.498302 33 40.496604 38.494904 35.947033 38.498287 30.339227 38.5 27 37.228622 25.573646 35.115352 23.808394 36.01954 22.410093 36.5 20.415168 36.5 18.5c0-4.539658-2.96593-7.995156-6.700689-7.995156-2.450936 0-4.61225 1.586945-5.799319 3.960829-1.187068-2.373884-3.348382-3.960829-5.799318-3.960829-.116711 0-.247191-.00711-.362457 0z" color="#000" fill="url(#p)" fill-rule="evenodd" stroke="#7a4f13" stroke-width="1.00339544" stroke-linecap="round" stroke-linejoin="round" overflow="visible"/>
51
+ <path style="marker:none" d="M21.9999965 21.49999975a1.9999995 2.49999925 0 1 1-3.999999 0 1.9999995 2.49999925 0 1 1 3.999999 0z" color="#000" fill-rule="evenodd" overflow="visible"/>
52
+ <path d="M13.499995 26.6c6.29277 2.4 14.683131 2.4 20.975901 0" fill="none" stroke="url(#q)" stroke-width="1.00000012" stroke-linecap="round" opacity=".8814433"/>
53
+ <path style="marker:none" d="M18.263225 11.504636c-3.475804-.092332-5.923683 3.31225-5.901051 7.462085C12.371922 20.75417 13.158177 22.69493 14 24c-1.967512 1.647555-3.363465 2.902907-3.4983 6.016575-.22665 5.23391 4.971252 9.464175 13.498304 9.481726 8.398429.017287 13.646441-4.096531 13.498306-9.481726C37.412612 26.901167 35.967512 25.647555 34 24c.841824-1.30507 1.628719-3.245826 1.637851-5.033279.021758-4.258738-2.445472-7.777974-6.238523-7.462085C27.125312 11.694018 26 13 25 15c-.5.5-1.5.5-2 0-1-2-2-3.5-4.736775-3.495364z" opacity=".4" color="#000" fill="none" stroke="url(#r)" stroke-width="1.003" stroke-linecap="round" stroke-linejoin="round" overflow="visible"/>
54
+ <path style="marker:none" d="M29.9999965 21.49999975a1.9999995 2.49999925 0 1 1-3.999999 0 1.9999995 2.49999925 0 1 1 3.999999 0z" color="#000" fill-rule="evenodd" overflow="visible"/>
55
+ </svg>
package/dist/header-layout-with-externals.js ADDED
@@ -0,0 +1,61 @@
1
+ var window;(window||={})["@cas-smartdesign/header-layout"]=(()=>{var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var H=(s,e)=>{for(var t in e)h(s,t,{get:e[t],enumerable:!0})},E=(s,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of p(e))!u.call(s,n)&&n!==t&&h(s,n,{get:()=>e[n],enumerable:!(i=m(e,n))||i.enumerable});return s};var C=s=>E(h({},"__esModule",{value:!0}),s);var y={};H(y,{default:()=>o});var r=class a extends HTMLElement{memoizedTemplate(){let e=this.is();if(a.TEMPLATE_CACHE[e])return a.TEMPLATE_CACHE[e];let t=this.template();return window.ShadyCSS&&window.ShadyCSS.prepareTemplate(t,this.is()),a.TEMPLATE_CACHE[e]=t,t}connectedCallback(){let e=this.memoizedTemplate();window.ShadyCSS&&window.ShadyCSS.styleElement(this),this.shadowRoot||(this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(document.importNode(e.content,!0)),requestAnimationFrame(()=>this.dispatchEvent(new CustomEvent("ready"))))}whenReady(e){this.shadowRoot?e():this.addEventListener("ready",()=>e())}};r.TEMPLATE_CACHE={};var d=r;var v=`<style>
2
+ :host {
3
+ display: block;
4
+ position: relative;
5
+ overflow: auto;
6
+ contain: content;
7
+ height: 100%;
8
+ width: 100%;
9
+ }
10
+
11
+ .content-container {
12
+ position: absolute;
13
+ padding: inherit;
14
+ top: 0;
15
+ bottom: 0;
16
+ left: 0;
17
+ right: 0;
18
+ z-index: 1;
19
+ scroll-behavior: smooth;
20
+ }
21
+
22
+ /* No 'bottom:0' because this can have dynamic height */
23
+ .header-container {
24
+ position: absolute;
25
+ top: 0;
26
+ left: 0;
27
+ right: 0;
28
+ z-index: 2;
29
+ pointer-events: none;
30
+ }
31
+
32
+ .header-container > ::slotted(*) {
33
+ pointer-events: auto;
34
+ }
35
+
36
+ :host([sticky]) .header-container {
37
+ position: sticky;
38
+ }
39
+
40
+ :host(:not([sticky])) .header-container {
41
+ transform: translate3d(0, 0, 0);
42
+ }
43
+
44
+ :host(:not([sticky])) {
45
+ overflow: hidden;
46
+ }
47
+
48
+ :host(:not([sticky])) .content-container {
49
+ height: 100%;
50
+ overflow: auto;
51
+ box-sizing: border-box;
52
+ }
53
+ </style>
54
+ <div class="header-container">
55
+ <slot name="header"></slot>
56
+ </div>
57
+ <div class="content-container">
58
+ <slot name="content"></slot>
59
+ </div>
60
+ `,l=class c extends d{constructor(){super(),this.headerResizeObserverActive=!0,this.showNormalHeader=!0,this.scrollElement=this,this.debounced={};let e=window.CSS;this.supportsSticky=e&&e.supports("position","sticky"),this.supportsSticky||(this.resizeObserver=new ResizeObserver(()=>this.debounce("non-sticky-resize",()=>{this.lastKnownWidth!==this.offsetWidth&&(this.lastKnownWidth=this.offsetWidth,this.headerContainer.style.width=`calc(100% - ${this.contentContainer.offsetWidth-this.contentContainer.clientWidth}px)`)}))),this.headerResizeObserver=new ResizeObserver(()=>this.headerResizeObserverActive&&this.debounce("header-resize",()=>{this.headerContainer&&this.headerContainer.offsetParent&&(this.updateHeaderHeight(),this.updateHeader())}))}is(){return c.ID}template(){let e=document.createElement("template");return e.innerHTML=v,e}connectedCallback(){super.connectedCallback(),this.headerContainer||this.initialize(),this.supportsSticky||(this.resizeObserver.observe(this),this.scrollElement=this.contentContainer),this.headerResizeObserver.observe(this.headerContainer),this.updateContentContainerPadding(this.headerContainer.offsetHeight)}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect(),this.headerResizeObserver&&this.headerResizeObserver.disconnect()}initialize(){this.headerContainer=this.shadowRoot.querySelector(".header-container"),this.contentContainer=this.shadowRoot.querySelector(".content-container"),this.headerSlot=this.shadowRoot.querySelector(".header-container > slot"),this.headerSlot.addEventListener("slotchange",()=>{this.updateHeaderElementRefs()}),this.supportsSticky&&(this.setAttribute("sticky",""),this.addEventListener("scroll",()=>{this.updateHeader(),this.dispatchCustomScrollEvent()})),this.supportsSticky||(this.headerContainer.addEventListener("wheel",e=>{e.preventDefault(),this.debounce("handle-scroll",()=>{this.contentContainer.scrollTop+=e.deltaY,this.updateHeader(),this.dispatchCustomScrollEvent()})}),this.contentContainer.addEventListener("scroll",()=>{this.debounce("handle-scroll",()=>{this.updateHeader(),this.dispatchCustomScrollEvent()})}))}updateHeaderElementRefs(){this.headerElement=this.headerSlot.assignedNodes()[0],this.smallHeaderElement=this.headerSlot.assignedNodes()[1],this.normalHeaderHeight=this.headerElement.offsetHeight,this.smallHeaderElement&&(this.headersHeightDiff=Math.abs(this.normalHeaderHeight-this.smallHeaderElement.offsetHeight),this.smallHeaderElement.style.display="none")}updateContentContainerPadding(e){this.lastKnownHeaderHeight!==e&&(this.lastKnownHeaderHeight=e,this.contentContainer.style.paddingTop=e+"px")}debounce(e,t){this.debounced[e]||(this.debounced[e]=!0,requestAnimationFrame(()=>{delete this.debounced[e],t()}))}measure(){this.updateHeaderHeight(!0),this.updateHeader(!0)}updateHeaderHeight(e=!1){(e||this.showNormalHeader)&&(this.normalHeaderHeight=this.headerContainer.offsetHeight,this.updateContentContainerPadding(this.normalHeaderHeight)),this.minimumHeaderHeight&&this.smallHeaderElement&&(this.headersHeightDiff=Math.abs(this.normalHeaderHeight-this.smallHeaderElement.offsetHeight))}updateHeader(e=!1){let t=this.scrollElement.scrollTop;if(this.smallHeaderElement)this.headerElement.style.transform=`translateY(-${t}px)`,this.showNormalHeader=t<this.headersHeightDiff,this.showNormalHeader?(this.headerElement.style.display="",this.smallHeaderElement.style.display="none"):(this.headerElement.style.display="none",this.smallHeaderElement.style.display="");else if(this.minimumHeaderHeight){let i=t<this.normalHeaderHeight-this.minimumHeaderHeight;(e||this.showNormalHeader!==i)&&(this.showNormalHeader=i,this.dispatchEvent(new CustomEvent("header-switch",{detail:{shouldShowNormalHeader:this.showNormalHeader}}))),this.headerElement.style.transform=this.showNormalHeader?`translateY(-${t}px)`:""}}dispatchCustomScrollEvent(){this.dispatchEvent(new CustomEvent("header-layout-scroll",{detail:{scrollTop:this.scrollElement.scrollTop}}))}};l.ID="sd-header-layout";var o=l;customElements.get(o.ID)||customElements.define(o.ID,o);return C(y);})();
61
+ //# sourceMappingURL=header-layout-with-externals.js.map
package/dist/header-layout-with-externals.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../element-base/element-base.ts", "../header-layout.html?raw", "../header-layout.ts"],
4
+ "sourcesContent": ["export type IReadyEvent = void;\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n ready: CustomEvent<IReadyEvent>;\n}\n\nexport interface ElementBase {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport abstract class ElementBase extends HTMLElement {\n public abstract is(): string;\n\n protected abstract template(): HTMLTemplateElement;\n private static readonly TEMPLATE_CACHE: {\n [name: string]: HTMLTemplateElement;\n } = {};\n private memoizedTemplate(): HTMLTemplateElement {\n const is = this.is();\n if (ElementBase.TEMPLATE_CACHE[is]) {\n return ElementBase.TEMPLATE_CACHE[is];\n }\n const template = this.template();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.prepareTemplate(template, this.is());\n }\n ElementBase.TEMPLATE_CACHE[is] = template;\n return template;\n }\n\n public connectedCallback() {\n const template = this.memoizedTemplate();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.styleElement(this);\n }\n if (!this.shadowRoot) {\n this.attachShadow({ mode: \"open\" });\n this.shadowRoot.appendChild(document.importNode(template.content, true));\n requestAnimationFrame(() => this.dispatchEvent(new CustomEvent<IReadyEvent>(\"ready\")));\n }\n }\n\n public whenReady(actor: () => void) {\n if (this.shadowRoot) {\n actor();\n } else {\n this.addEventListener(\"ready\", () => actor());\n }\n }\n}\n", "export default \"<style>\\n\\t:host {\\n\\t\\tdisplay: block;\\n\\t\\tposition: relative;\\n\\t\\toverflow: auto;\\n\\t\\tcontain: content;\\n\\t\\theight: 100%;\\n\\t\\twidth: 100%;\\n\\t}\\n\\n\\t.content-container {\\n\\t\\tposition: absolute;\\n\\t\\tpadding: inherit;\\n\\t\\ttop: 0;\\n\\t\\tbottom: 0;\\n\\t\\tleft: 0;\\n\\t\\tright: 0;\\n\\t\\tz-index: 1;\\n\\t\\tscroll-behavior: smooth;\\n\\t}\\n\\n\\t/* No 'bottom:0' because this can have dynamic height */\\n\\t.header-container {\\n\\t\\tposition: absolute;\\n\\t\\ttop: 0;\\n\\t\\tleft: 0;\\n\\t\\tright: 0;\\n\\t\\tz-index: 2;\\n\\t\\tpointer-events: none;\\n\\t}\\n\\n\\t.header-container > ::slotted(*) {\\n\\t\\tpointer-events: auto;\\n\\t}\\n\\n\\t:host([sticky]) .header-container {\\n\\t\\tposition: sticky;\\n\\t}\\n\\n\\t:host(:not([sticky])) .header-container {\\n\\t\\ttransform: translate3d(0, 0, 0);\\n\\t}\\n\\n\\t:host(:not([sticky])) {\\n\\t\\toverflow: hidden;\\n\\t}\\n\\n\\t:host(:not([sticky])) .content-container {\\n\\t\\theight: 100%;\\n\\t\\toverflow: auto;\\n\\t\\tbox-sizing: border-box;\\n\\t}\\n</style>\\n<div class=\\\"header-container\\\">\\n\\t<slot name=\\\"header\\\"></slot>\\n</div>\\n<div class=\\\"content-container\\\">\\n\\t<slot name=\\\"content\\\"></slot>\\n</div>\\n\"", "import { ElementBase, CustomEventMap as ElementBaseEventMap } from \"@cas-smartdesign/element-base\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [HeaderLayout.ID]: HeaderLayout;\n }\n}\n\nimport { default as htmlTemplate } from \"./header-layout.html?raw\";\n\nexport interface IHeaderSwitchEvent {\n shouldShowNormalHeader: boolean;\n}\nexport interface IHeaderLayoutScrollEvent {\n scrollTop: number;\n}\nexport interface CustomEventMap extends ElementBaseEventMap {\n \"header-switch\": CustomEvent<IHeaderSwitchEvent>;\n \"header-layout-scroll\": CustomEvent<IHeaderLayoutScrollEvent>;\n}\n\nexport default interface HeaderLayout {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport default class HeaderLayout extends ElementBase {\n public static readonly ID = \"sd-header-layout\";\n\n public minimumHeaderHeight: number;\n public headerResizeObserverActive = true;\n\n private headerContainer: HTMLElement;\n private contentContainer: HTMLElement;\n private headerSlot: HTMLSlotElement;\n private headerElement: HTMLElement;\n private smallHeaderElement: HTMLElement;\n\n private resizeObserver: ResizeObserver;\n private headerResizeObserver: ResizeObserver;\n\n private lastKnownWidth: number;\n private lastKnownHeaderHeight: number;\n private supportsSticky: boolean;\n private headersHeightDiff: number;\n private normalHeaderHeight: number;\n private showNormalHeader = true;\n private scrollElement: HTMLElement = this;\n\n constructor() {\n super();\n const cssSupport = window.CSS;\n this.supportsSticky = cssSupport && cssSupport.supports(\"position\", \"sticky\");\n if (!this.supportsSticky) {\n this.resizeObserver = new ResizeObserver(() =>\n this.debounce(\"non-sticky-resize\", () => {\n if (this.lastKnownWidth !== this.offsetWidth) {\n this.lastKnownWidth = this.offsetWidth;\n // Ensure scrollbar is visible next to the header element.\n this.headerContainer.style.width = `calc(100% - ${\n this.contentContainer.offsetWidth - this.contentContainer.clientWidth\n }px)`;\n }\n }),\n );\n }\n this.headerResizeObserver = new ResizeObserver(\n () =>\n this.headerResizeObserverActive &&\n this.debounce(\"header-resize\", () => {\n if (this.headerContainer && this.headerContainer.offsetParent) {\n this.updateHeaderHeight();\n this.updateHeader();\n }\n }),\n );\n }\n\n public is(): string {\n return HeaderLayout.ID;\n }\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n if (!this.headerContainer) {\n this.initialize();\n }\n\n if (!this.supportsSticky) {\n this.resizeObserver.observe(this);\n this.scrollElement = this.contentContainer;\n }\n\n this.headerResizeObserver.observe(this.headerContainer);\n this.updateContentContainerPadding(this.headerContainer.offsetHeight);\n }\n\n public disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n if (this.headerResizeObserver) {\n this.headerResizeObserver.disconnect();\n }\n }\n\n private initialize() {\n this.headerContainer = this.shadowRoot.querySelector(\".header-container\");\n this.contentContainer = this.shadowRoot.querySelector(\".content-container\");\n this.headerSlot = this.shadowRoot.querySelector(\".header-container > slot\") as HTMLSlotElement;\n\n this.headerSlot.addEventListener(\"slotchange\", () => {\n this.updateHeaderElementRefs();\n });\n\n if (this.supportsSticky) {\n this.setAttribute(\"sticky\", \"\");\n this.addEventListener(\"scroll\", () => {\n this.updateHeader();\n this.dispatchCustomScrollEvent();\n });\n }\n if (!this.supportsSticky) {\n this.headerContainer.addEventListener(\"wheel\", (event: WheelEvent) => {\n event.preventDefault();\n this.debounce(\"handle-scroll\", () => {\n this.contentContainer.scrollTop += event.deltaY;\n this.updateHeader();\n this.dispatchCustomScrollEvent();\n });\n });\n this.contentContainer.addEventListener(\"scroll\", () => {\n this.debounce(\"handle-scroll\", () => {\n this.updateHeader();\n this.dispatchCustomScrollEvent();\n });\n });\n }\n }\n\n private updateHeaderElementRefs() {\n this.headerElement = this.headerSlot.assignedNodes()[0] as HTMLElement;\n this.smallHeaderElement = this.headerSlot.assignedNodes()[1] as HTMLElement;\n this.normalHeaderHeight = this.headerElement.offsetHeight;\n if (this.smallHeaderElement) {\n this.headersHeightDiff = Math.abs(this.normalHeaderHeight - this.smallHeaderElement.offsetHeight);\n this.smallHeaderElement.style.display = \"none\";\n }\n }\n\n private updateContentContainerPadding(headerHeight: number): void {\n if (this.lastKnownHeaderHeight !== headerHeight) {\n this.lastKnownHeaderHeight = headerHeight;\n this.contentContainer.style.paddingTop = headerHeight + \"px\";\n }\n }\n\n private debounced = {};\n private debounce(id: string, actor: () => void) {\n if (this.debounced[id]) {\n return;\n }\n this.debounced[id] = true;\n requestAnimationFrame(() => {\n delete this.debounced[id];\n actor();\n });\n }\n\n public measure() {\n this.updateHeaderHeight(true);\n this.updateHeader(true);\n }\n\n private updateHeaderHeight(forceMeasure = false) {\n if (forceMeasure || this.showNormalHeader) {\n this.normalHeaderHeight = this.headerContainer.offsetHeight;\n this.updateContentContainerPadding(this.normalHeaderHeight);\n }\n\n if (this.minimumHeaderHeight && this.smallHeaderElement) {\n this.headersHeightDiff = Math.abs(this.normalHeaderHeight - this.smallHeaderElement.offsetHeight);\n }\n }\n\n private updateHeader(forceDispatchEvent = false): void {\n const scrollTop = this.scrollElement.scrollTop;\n if (this.smallHeaderElement) {\n this.headerElement.style.transform = `translateY(-${scrollTop}px)`;\n this.showNormalHeader = scrollTop < this.headersHeightDiff;\n if (this.showNormalHeader) {\n this.headerElement.style.display = \"\";\n this.smallHeaderElement.style.display = \"none\";\n } else {\n this.headerElement.style.display = \"none\";\n this.smallHeaderElement.style.display = \"\";\n }\n } else if (this.minimumHeaderHeight) {\n const shouldShowNormalHeader = scrollTop < this.normalHeaderHeight - this.minimumHeaderHeight;\n if (forceDispatchEvent || this.showNormalHeader !== shouldShowNormalHeader) {\n this.showNormalHeader = shouldShowNormalHeader;\n this.dispatchEvent(\n new CustomEvent<IHeaderSwitchEvent>(\"header-switch\", {\n detail: { shouldShowNormalHeader: this.showNormalHeader },\n }),\n );\n }\n this.headerElement.style.transform = this.showNormalHeader ? `translateY(-${scrollTop}px)` : \"\";\n }\n }\n\n private dispatchCustomScrollEvent(): void {\n this.dispatchEvent(\n new CustomEvent<IHeaderLayoutScrollEvent>(\"header-layout-scroll\", {\n detail: { scrollTop: this.scrollElement.scrollTop },\n }),\n );\n }\n}\n\nif (!customElements.get(HeaderLayout.ID)) {\n customElements.define(HeaderLayout.ID, HeaderLayout);\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["_ElementBase", "is", "template", "actor", "ElementBase", "htmlTemplate", "_HeaderLayout", "ElementBase", "cssSupport", "template", "event", "headerHeight", "id", "actor", "forceMeasure", "forceDispatchEvent", "scrollTop", "shouldShowNormalHeader", "HeaderLayout"]
7
+ }
package/dist/header-layout.d.ts ADDED
@@ -0,0 +1,56 @@
1
+ import { ElementBase, CustomEventMap as ElementBaseEventMap } from "@cas-smartdesign/element-base";
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ [HeaderLayout.ID]: HeaderLayout;
5
+ }
6
+ }
7
+ export interface IHeaderSwitchEvent {
8
+ shouldShowNormalHeader: boolean;
9
+ }
10
+ export interface IHeaderLayoutScrollEvent {
11
+ scrollTop: number;
12
+ }
13
+ export interface CustomEventMap extends ElementBaseEventMap {
14
+ "header-switch": CustomEvent<IHeaderSwitchEvent>;
15
+ "header-layout-scroll": CustomEvent<IHeaderLayoutScrollEvent>;
16
+ }
17
+ export default interface HeaderLayout {
18
+ addEventListener<K extends keyof CustomEventMap>(event: K, listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null, options?: AddEventListenerOptions | boolean): void;
19
+ addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
20
+ removeEventListener<K extends keyof CustomEventMap>(type: K, listener: (this: this, ev: CustomEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
21
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
22
+ dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;
23
+ }
24
+ export default class HeaderLayout extends ElementBase {
25
+ static readonly ID = "sd-header-layout";
26
+ minimumHeaderHeight: number;
27
+ headerResizeObserverActive: boolean;
28
+ private headerContainer;
29
+ private contentContainer;
30
+ private headerSlot;
31
+ private headerElement;
32
+ private smallHeaderElement;
33
+ private resizeObserver;
34
+ private headerResizeObserver;
35
+ private lastKnownWidth;
36
+ private lastKnownHeaderHeight;
37
+ private supportsSticky;
38
+ private headersHeightDiff;
39
+ private normalHeaderHeight;
40
+ private showNormalHeader;
41
+ private scrollElement;
42
+ constructor();
43
+ is(): string;
44
+ protected template(): HTMLTemplateElement;
45
+ connectedCallback(): void;
46
+ disconnectedCallback(): void;
47
+ private initialize;
48
+ private updateHeaderElementRefs;
49
+ private updateContentContainerPadding;
50
+ private debounced;
51
+ private debounce;
52
+ measure(): void;
53
+ private updateHeaderHeight;
54
+ private updateHeader;
55
+ private dispatchCustomScrollEvent;
56
+ }
package/dist/header-layout.mjs ADDED
@@ -0,0 +1,147 @@
1
+ import { ElementBase as r } from "@cas-smartdesign/element-base";
2
+ const a = `<style>
3
+ :host {
4
+ display: block;
5
+ position: relative;
6
+ overflow: auto;
7
+ contain: content;
8
+ height: 100%;
9
+ width: 100%;
10
+ }
11
+
12
+ .content-container {
13
+ position: absolute;
14
+ padding: inherit;
15
+ top: 0;
16
+ bottom: 0;
17
+ left: 0;
18
+ right: 0;
19
+ z-index: 1;
20
+ scroll-behavior: smooth;
21
+ }
22
+
23
+ /* No 'bottom:0' because this can have dynamic height */
24
+ .header-container {
25
+ position: absolute;
26
+ top: 0;
27
+ left: 0;
28
+ right: 0;
29
+ z-index: 2;
30
+ pointer-events: none;
31
+ }
32
+
33
+ .header-container > ::slotted(*) {
34
+ pointer-events: auto;
35
+ }
36
+
37
+ :host([sticky]) .header-container {
38
+ position: sticky;
39
+ }
40
+
41
+ :host(:not([sticky])) .header-container {
42
+ transform: translate3d(0, 0, 0);
43
+ }
44
+
45
+ :host(:not([sticky])) {
46
+ overflow: hidden;
47
+ }
48
+
49
+ :host(:not([sticky])) .content-container {
50
+ height: 100%;
51
+ overflow: auto;
52
+ box-sizing: border-box;
53
+ }
54
+ </style>
55
+ <div class="header-container">
56
+ <slot name="header"></slot>
57
+ </div>
58
+ <div class="content-container">
59
+ <slot name="content"></slot>
60
+ </div>
61
+ `, i = class i extends r {
62
+ constructor() {
63
+ super(), this.headerResizeObserverActive = !0, this.showNormalHeader = !0, this.scrollElement = this, this.debounced = {};
64
+ const e = window.CSS;
65
+ this.supportsSticky = e && e.supports("position", "sticky"), this.supportsSticky || (this.resizeObserver = new ResizeObserver(
66
+ () => this.debounce("non-sticky-resize", () => {
67
+ this.lastKnownWidth !== this.offsetWidth && (this.lastKnownWidth = this.offsetWidth, this.headerContainer.style.width = `calc(100% - ${this.contentContainer.offsetWidth - this.contentContainer.clientWidth}px)`);
68
+ })
69
+ )), this.headerResizeObserver = new ResizeObserver(
70
+ () => this.headerResizeObserverActive && this.debounce("header-resize", () => {
71
+ this.headerContainer && this.headerContainer.offsetParent && (this.updateHeaderHeight(), this.updateHeader());
72
+ })
73
+ );
74
+ }
75
+ is() {
76
+ return i.ID;
77
+ }
78
+ template() {
79
+ const e = document.createElement("template");
80
+ return e.innerHTML = a, e;
81
+ }
82
+ connectedCallback() {
83
+ super.connectedCallback(), this.headerContainer || this.initialize(), this.supportsSticky || (this.resizeObserver.observe(this), this.scrollElement = this.contentContainer), this.headerResizeObserver.observe(this.headerContainer), this.updateContentContainerPadding(this.headerContainer.offsetHeight);
84
+ }
85
+ disconnectedCallback() {
86
+ this.resizeObserver && this.resizeObserver.disconnect(), this.headerResizeObserver && this.headerResizeObserver.disconnect();
87
+ }
88
+ initialize() {
89
+ this.headerContainer = this.shadowRoot.querySelector(".header-container"), this.contentContainer = this.shadowRoot.querySelector(".content-container"), this.headerSlot = this.shadowRoot.querySelector(".header-container > slot"), this.headerSlot.addEventListener("slotchange", () => {
90
+ this.updateHeaderElementRefs();
91
+ }), this.supportsSticky && (this.setAttribute("sticky", ""), this.addEventListener("scroll", () => {
92
+ this.updateHeader(), this.dispatchCustomScrollEvent();
93
+ })), this.supportsSticky || (this.headerContainer.addEventListener("wheel", (e) => {
94
+ e.preventDefault(), this.debounce("handle-scroll", () => {
95
+ this.contentContainer.scrollTop += e.deltaY, this.updateHeader(), this.dispatchCustomScrollEvent();
96
+ });
97
+ }), this.contentContainer.addEventListener("scroll", () => {
98
+ this.debounce("handle-scroll", () => {
99
+ this.updateHeader(), this.dispatchCustomScrollEvent();
100
+ });
101
+ }));
102
+ }
103
+ updateHeaderElementRefs() {
104
+ this.headerElement = this.headerSlot.assignedNodes()[0], this.smallHeaderElement = this.headerSlot.assignedNodes()[1], this.normalHeaderHeight = this.headerElement.offsetHeight, this.smallHeaderElement && (this.headersHeightDiff = Math.abs(this.normalHeaderHeight - this.smallHeaderElement.offsetHeight), this.smallHeaderElement.style.display = "none");
105
+ }
106
+ updateContentContainerPadding(e) {
107
+ this.lastKnownHeaderHeight !== e && (this.lastKnownHeaderHeight = e, this.contentContainer.style.paddingTop = e + "px");
108
+ }
109
+ debounce(e, t) {
110
+ this.debounced[e] || (this.debounced[e] = !0, requestAnimationFrame(() => {
111
+ delete this.debounced[e], t();
112
+ }));
113
+ }
114
+ measure() {
115
+ this.updateHeaderHeight(!0), this.updateHeader(!0);
116
+ }
117
+ updateHeaderHeight(e = !1) {
118
+ (e || this.showNormalHeader) && (this.normalHeaderHeight = this.headerContainer.offsetHeight, this.updateContentContainerPadding(this.normalHeaderHeight)), this.minimumHeaderHeight && this.smallHeaderElement && (this.headersHeightDiff = Math.abs(this.normalHeaderHeight - this.smallHeaderElement.offsetHeight));
119
+ }
120
+ updateHeader(e = !1) {
121
+ const t = this.scrollElement.scrollTop;
122
+ if (this.smallHeaderElement)
123
+ this.headerElement.style.transform = `translateY(-${t}px)`, this.showNormalHeader = t < this.headersHeightDiff, this.showNormalHeader ? (this.headerElement.style.display = "", this.smallHeaderElement.style.display = "none") : (this.headerElement.style.display = "none", this.smallHeaderElement.style.display = "");
124
+ else if (this.minimumHeaderHeight) {
125
+ const n = t < this.normalHeaderHeight - this.minimumHeaderHeight;
126
+ (e || this.showNormalHeader !== n) && (this.showNormalHeader = n, this.dispatchEvent(
127
+ new CustomEvent("header-switch", {
128
+ detail: { shouldShowNormalHeader: this.showNormalHeader }
129
+ })
130
+ )), this.headerElement.style.transform = this.showNormalHeader ? `translateY(-${t}px)` : "";
131
+ }
132
+ }
133
+ dispatchCustomScrollEvent() {
134
+ this.dispatchEvent(
135
+ new CustomEvent("header-layout-scroll", {
136
+ detail: { scrollTop: this.scrollElement.scrollTop }
137
+ })
138
+ );
139
+ }
140
+ };
141
+ i.ID = "sd-header-layout";
142
+ let s = i;
143
+ customElements.get(s.ID) || customElements.define(s.ID, s);
144
+ export {
145
+ s as default
146
+ };
147
+ //# sourceMappingURL=header-layout.mjs.map
package/dist/header-layout.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"header-layout.mjs","sources":["../header-layout.html?raw","../header-layout.ts"],"sourcesContent":["export default \"<style>\\n\\t:host {\\n\\t\\tdisplay: block;\\n\\t\\tposition: relative;\\n\\t\\toverflow: auto;\\n\\t\\tcontain: content;\\n\\t\\theight: 100%;\\n\\t\\twidth: 100%;\\n\\t}\\n\\n\\t.content-container {\\n\\t\\tposition: absolute;\\n\\t\\tpadding: inherit;\\n\\t\\ttop: 0;\\n\\t\\tbottom: 0;\\n\\t\\tleft: 0;\\n\\t\\tright: 0;\\n\\t\\tz-index: 1;\\n\\t\\tscroll-behavior: smooth;\\n\\t}\\n\\n\\t/* No 'bottom:0' because this can have dynamic height */\\n\\t.header-container {\\n\\t\\tposition: absolute;\\n\\t\\ttop: 0;\\n\\t\\tleft: 0;\\n\\t\\tright: 0;\\n\\t\\tz-index: 2;\\n\\t\\tpointer-events: none;\\n\\t}\\n\\n\\t.header-container > ::slotted(*) {\\n\\t\\tpointer-events: auto;\\n\\t}\\n\\n\\t:host([sticky]) .header-container {\\n\\t\\tposition: sticky;\\n\\t}\\n\\n\\t:host(:not([sticky])) .header-container {\\n\\t\\ttransform: translate3d(0, 0, 0);\\n\\t}\\n\\n\\t:host(:not([sticky])) {\\n\\t\\toverflow: hidden;\\n\\t}\\n\\n\\t:host(:not([sticky])) .content-container {\\n\\t\\theight: 100%;\\n\\t\\toverflow: auto;\\n\\t\\tbox-sizing: border-box;\\n\\t}\\n</style>\\n<div class=\\\"header-container\\\">\\n\\t<slot name=\\\"header\\\"></slot>\\n</div>\\n<div class=\\\"content-container\\\">\\n\\t<slot name=\\\"content\\\"></slot>\\n</div>\\n\"","import { ElementBase, CustomEventMap as ElementBaseEventMap } from \"@cas-smartdesign/element-base\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [HeaderLayout.ID]: HeaderLayout;\n }\n}\n\nimport { default as htmlTemplate } from \"./header-layout.html?raw\";\n\nexport interface IHeaderSwitchEvent {\n shouldShowNormalHeader: boolean;\n}\nexport interface IHeaderLayoutScrollEvent {\n scrollTop: number;\n}\nexport interface CustomEventMap extends ElementBaseEventMap {\n \"header-switch\": CustomEvent<IHeaderSwitchEvent>;\n \"header-layout-scroll\": CustomEvent<IHeaderLayoutScrollEvent>;\n}\n\nexport default interface HeaderLayout {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport default class HeaderLayout extends ElementBase {\n public static readonly ID = \"sd-header-layout\";\n\n public minimumHeaderHeight: number;\n public headerResizeObserverActive = true;\n\n private headerContainer: HTMLElement;\n private contentContainer: HTMLElement;\n private headerSlot: HTMLSlotElement;\n private headerElement: HTMLElement;\n private smallHeaderElement: HTMLElement;\n\n private resizeObserver: ResizeObserver;\n private headerResizeObserver: ResizeObserver;\n\n private lastKnownWidth: number;\n private lastKnownHeaderHeight: number;\n private supportsSticky: boolean;\n private headersHeightDiff: number;\n private normalHeaderHeight: number;\n private showNormalHeader = true;\n private scrollElement: HTMLElement = this;\n\n constructor() {\n super();\n const cssSupport = window.CSS;\n this.supportsSticky = cssSupport && cssSupport.supports(\"position\", \"sticky\");\n if (!this.supportsSticky) {\n this.resizeObserver = new ResizeObserver(() =>\n this.debounce(\"non-sticky-resize\", () => {\n if (this.lastKnownWidth !== this.offsetWidth) {\n this.lastKnownWidth = this.offsetWidth;\n // Ensure scrollbar is visible next to the header element.\n this.headerContainer.style.width = `calc(100% - ${\n this.contentContainer.offsetWidth - this.contentContainer.clientWidth\n }px)`;\n }\n }),\n );\n }\n this.headerResizeObserver = new ResizeObserver(\n () =>\n this.headerResizeObserverActive &&\n this.debounce(\"header-resize\", () => {\n if (this.headerContainer && this.headerContainer.offsetParent) {\n this.updateHeaderHeight();\n this.updateHeader();\n }\n }),\n );\n }\n\n public is(): string {\n return HeaderLayout.ID;\n }\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n if (!this.headerContainer) {\n this.initialize();\n }\n\n if (!this.supportsSticky) {\n this.resizeObserver.observe(this);\n this.scrollElement = this.contentContainer;\n }\n\n this.headerResizeObserver.observe(this.headerContainer);\n this.updateContentContainerPadding(this.headerContainer.offsetHeight);\n }\n\n public disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n if (this.headerResizeObserver) {\n this.headerResizeObserver.disconnect();\n }\n }\n\n private initialize() {\n this.headerContainer = this.shadowRoot.querySelector(\".header-container\");\n this.contentContainer = this.shadowRoot.querySelector(\".content-container\");\n this.headerSlot = this.shadowRoot.querySelector(\".header-container > slot\") as HTMLSlotElement;\n\n this.headerSlot.addEventListener(\"slotchange\", () => {\n this.updateHeaderElementRefs();\n });\n\n if (this.supportsSticky) {\n this.setAttribute(\"sticky\", \"\");\n this.addEventListener(\"scroll\", () => {\n this.updateHeader();\n this.dispatchCustomScrollEvent();\n });\n }\n if (!this.supportsSticky) {\n this.headerContainer.addEventListener(\"wheel\", (event: WheelEvent) => {\n event.preventDefault();\n this.debounce(\"handle-scroll\", () => {\n this.contentContainer.scrollTop += event.deltaY;\n this.updateHeader();\n this.dispatchCustomScrollEvent();\n });\n });\n this.contentContainer.addEventListener(\"scroll\", () => {\n this.debounce(\"handle-scroll\", () => {\n this.updateHeader();\n this.dispatchCustomScrollEvent();\n });\n });\n }\n }\n\n private updateHeaderElementRefs() {\n this.headerElement = this.headerSlot.assignedNodes()[0] as HTMLElement;\n this.smallHeaderElement = this.headerSlot.assignedNodes()[1] as HTMLElement;\n this.normalHeaderHeight = this.headerElement.offsetHeight;\n if (this.smallHeaderElement) {\n this.headersHeightDiff = Math.abs(this.normalHeaderHeight - this.smallHeaderElement.offsetHeight);\n this.smallHeaderElement.style.display = \"none\";\n }\n }\n\n private updateContentContainerPadding(headerHeight: number): void {\n if (this.lastKnownHeaderHeight !== headerHeight) {\n this.lastKnownHeaderHeight = headerHeight;\n this.contentContainer.style.paddingTop = headerHeight + \"px\";\n }\n }\n\n private debounced = {};\n private debounce(id: string, actor: () => void) {\n if (this.debounced[id]) {\n return;\n }\n this.debounced[id] = true;\n requestAnimationFrame(() => {\n delete this.debounced[id];\n actor();\n });\n }\n\n public measure() {\n this.updateHeaderHeight(true);\n this.updateHeader(true);\n }\n\n private updateHeaderHeight(forceMeasure = false) {\n if (forceMeasure || this.showNormalHeader) {\n this.normalHeaderHeight = this.headerContainer.offsetHeight;\n this.updateContentContainerPadding(this.normalHeaderHeight);\n }\n\n if (this.minimumHeaderHeight && this.smallHeaderElement) {\n this.headersHeightDiff = Math.abs(this.normalHeaderHeight - this.smallHeaderElement.offsetHeight);\n }\n }\n\n private updateHeader(forceDispatchEvent = false): void {\n const scrollTop = this.scrollElement.scrollTop;\n if (this.smallHeaderElement) {\n this.headerElement.style.transform = `translateY(-${scrollTop}px)`;\n this.showNormalHeader = scrollTop < this.headersHeightDiff;\n if (this.showNormalHeader) {\n this.headerElement.style.display = \"\";\n this.smallHeaderElement.style.display = \"none\";\n } else {\n this.headerElement.style.display = \"none\";\n this.smallHeaderElement.style.display = \"\";\n }\n } else if (this.minimumHeaderHeight) {\n const shouldShowNormalHeader = scrollTop < this.normalHeaderHeight - this.minimumHeaderHeight;\n if (forceDispatchEvent || this.showNormalHeader !== shouldShowNormalHeader) {\n this.showNormalHeader = shouldShowNormalHeader;\n this.dispatchEvent(\n new CustomEvent<IHeaderSwitchEvent>(\"header-switch\", {\n detail: { shouldShowNormalHeader: this.showNormalHeader },\n }),\n );\n }\n this.headerElement.style.transform = this.showNormalHeader ? `translateY(-${scrollTop}px)` : \"\";\n }\n }\n\n private dispatchCustomScrollEvent(): void {\n this.dispatchEvent(\n new CustomEvent<IHeaderLayoutScrollEvent>(\"header-layout-scroll\", {\n detail: { scrollTop: this.scrollElement.scrollTop },\n }),\n );\n }\n}\n\nif (!customElements.get(HeaderLayout.ID)) {\n customElements.define(HeaderLayout.ID, HeaderLayout);\n}\n"],"names":["htmlTemplate","_HeaderLayout","ElementBase","cssSupport","template","event","headerHeight","id","actor","forceMeasure","forceDispatchEvent","scrollTop","shouldShowNormalHeader","HeaderLayout"],"mappings":";AAAA,MAAeA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GC6CMC,IAArB,MAAqBA,UAAqBC,EAAY;AAAA,EAuBlD,cAAc;AACJ,aApBV,KAAO,6BAA6B,IAgBpC,KAAQ,mBAAmB,IAC3B,KAAQ,gBAA6B,MAqHrC,KAAQ,YAAY;AAjHhB,UAAMC,IAAa,OAAO;AAC1B,SAAK,iBAAiBA,KAAcA,EAAW,SAAS,YAAY,QAAQ,GACvE,KAAK,mBACN,KAAK,iBAAiB,IAAI;AAAA,MAAe,MACrC,KAAK,SAAS,qBAAqB,MAAM;AACjC,QAAA,KAAK,mBAAmB,KAAK,gBAC7B,KAAK,iBAAiB,KAAK,aAEtB,KAAA,gBAAgB,MAAM,QAAQ,eAC/B,KAAK,iBAAiB,cAAc,KAAK,iBAAiB,WAC9D;AAAA,MACJ,CACH;AAAA,IAAA,IAGT,KAAK,uBAAuB,IAAI;AAAA,MAC5B,MACI,KAAK,8BACL,KAAK,SAAS,iBAAiB,MAAM;AACjC,QAAI,KAAK,mBAAmB,KAAK,gBAAgB,iBAC7C,KAAK,mBAAmB,GACxB,KAAK,aAAa;AAAA,MACtB,CACH;AAAA,IAAA;AAAA,EAEb;AAAA,EAEO,KAAa;AAChB,WAAOF,EAAa;AAAA,EACxB;AAAA,EAEU,WAAgC;AAChC,UAAAG,IAAW,SAAS,cAAc,UAAU;AAClD,WAAAA,EAAS,YAAYJ,GACdI;AAAA,EACX;AAAA,EAEO,oBAAoB;AACvB,UAAM,kBAAkB,GAEnB,KAAK,mBACN,KAAK,WAAW,GAGf,KAAK,mBACD,KAAA,eAAe,QAAQ,IAAI,GAChC,KAAK,gBAAgB,KAAK,mBAGzB,KAAA,qBAAqB,QAAQ,KAAK,eAAe,GACjD,KAAA,8BAA8B,KAAK,gBAAgB,YAAY;AAAA,EACxE;AAAA,EAEO,uBAAuB;AAC1B,IAAI,KAAK,kBACL,KAAK,eAAe,cAEpB,KAAK,wBACL,KAAK,qBAAqB;EAElC;AAAA,EAEQ,aAAa;AACjB,SAAK,kBAAkB,KAAK,WAAW,cAAc,mBAAmB,GACxE,KAAK,mBAAmB,KAAK,WAAW,cAAc,oBAAoB,GAC1E,KAAK,aAAa,KAAK,WAAW,cAAc,0BAA0B,GAErE,KAAA,WAAW,iBAAiB,cAAc,MAAM;AACjD,WAAK,wBAAwB;AAAA,IAAA,CAChC,GAEG,KAAK,mBACA,KAAA,aAAa,UAAU,EAAE,GACzB,KAAA,iBAAiB,UAAU,MAAM;AAClC,WAAK,aAAa,GAClB,KAAK,0BAA0B;AAAA,IAAA,CAClC,IAEA,KAAK,mBACN,KAAK,gBAAgB,iBAAiB,SAAS,CAACC,MAAsB;AAClE,MAAAA,EAAM,eAAe,GAChB,KAAA,SAAS,iBAAiB,MAAM;AAC5B,aAAA,iBAAiB,aAAaA,EAAM,QACzC,KAAK,aAAa,GAClB,KAAK,0BAA0B;AAAA,MAAA,CAClC;AAAA,IAAA,CACJ,GACI,KAAA,iBAAiB,iBAAiB,UAAU,MAAM;AAC9C,WAAA,SAAS,iBAAiB,MAAM;AACjC,aAAK,aAAa,GAClB,KAAK,0BAA0B;AAAA,MAAA,CAClC;AAAA,IAAA,CACJ;AAAA,EAET;AAAA,EAEQ,0BAA0B;AAC9B,SAAK,gBAAgB,KAAK,WAAW,cAAA,EAAgB,CAAC,GACtD,KAAK,qBAAqB,KAAK,WAAW,cAAA,EAAgB,CAAC,GACtD,KAAA,qBAAqB,KAAK,cAAc,cACzC,KAAK,uBACL,KAAK,oBAAoB,KAAK,IAAI,KAAK,qBAAqB,KAAK,mBAAmB,YAAY,GAC3F,KAAA,mBAAmB,MAAM,UAAU;AAAA,EAEhD;AAAA,EAEQ,8BAA8BC,GAA4B;AAC1D,IAAA,KAAK,0BAA0BA,MAC/B,KAAK,wBAAwBA,GACxB,KAAA,iBAAiB,MAAM,aAAaA,IAAe;AAAA,EAEhE;AAAA,EAGQ,SAASC,GAAYC,GAAmB;AACxC,IAAA,KAAK,UAAUD,CAAE,MAGhB,KAAA,UAAUA,CAAE,IAAI,IACrB,sBAAsB,MAAM;AACjB,aAAA,KAAK,UAAUA,CAAE,GAClBC;IAAA,CACT;AAAA,EACL;AAAA,EAEO,UAAU;AACb,SAAK,mBAAmB,EAAI,GAC5B,KAAK,aAAa,EAAI;AAAA,EAC1B;AAAA,EAEQ,mBAAmBC,IAAe,IAAO;AACzC,KAAAA,KAAgB,KAAK,sBAChB,KAAA,qBAAqB,KAAK,gBAAgB,cAC1C,KAAA,8BAA8B,KAAK,kBAAkB,IAG1D,KAAK,uBAAuB,KAAK,uBACjC,KAAK,oBAAoB,KAAK,IAAI,KAAK,qBAAqB,KAAK,mBAAmB,YAAY;AAAA,EAExG;AAAA,EAEQ,aAAaC,IAAqB,IAAa;AAC7C,UAAAC,IAAY,KAAK,cAAc;AACrC,QAAI,KAAK;AACL,WAAK,cAAc,MAAM,YAAY,eAAeA,CAAS,OACxD,KAAA,mBAAmBA,IAAY,KAAK,mBACrC,KAAK,oBACA,KAAA,cAAc,MAAM,UAAU,IAC9B,KAAA,mBAAmB,MAAM,UAAU,WAEnC,KAAA,cAAc,MAAM,UAAU,QAC9B,KAAA,mBAAmB,MAAM,UAAU;AAAA,aAErC,KAAK,qBAAqB;AACjC,YAAMC,IAAyBD,IAAY,KAAK,qBAAqB,KAAK;AACtE,OAAAD,KAAsB,KAAK,qBAAqBE,OAChD,KAAK,mBAAmBA,GACnB,KAAA;AAAA,QACD,IAAI,YAAgC,iBAAiB;AAAA,UACjD,QAAQ,EAAE,wBAAwB,KAAK,iBAAiB;AAAA,QAAA,CAC3D;AAAA,MAAA,IAGT,KAAK,cAAc,MAAM,YAAY,KAAK,mBAAmB,eAAeD,CAAS,QAAQ;AAAA,IACjG;AAAA,EACJ;AAAA,EAEQ,4BAAkC;AACjC,SAAA;AAAA,MACD,IAAI,YAAsC,wBAAwB;AAAA,QAC9D,QAAQ,EAAE,WAAW,KAAK,cAAc,UAAU;AAAA,MAAA,CACrD;AAAA,IAAA;AAAA,EAET;AACJ;AAtMIV,EAAuB,KAAK;AADhC,IAAqBY,IAArBZ;AAyMK,eAAe,IAAIY,EAAa,EAAE,KACpB,eAAA,OAAOA,EAAa,IAAIA,CAAY;"}