@pacem/pacem-ui 1.0.0-abel

package/dist/esm/pager.js

@@ -0,0 +1,111 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { P, PCSS, Utils, CustomElement, Watch, ViewChild, PropertyConverters, Components, Defaults, Debounce } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+let PacemPagerElement = class PacemPagerElement extends Components.PacemElement {
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'index':
+            case 'total':
+            case 'pages':
+            case 'size':
+            case 'mode':
+                this._databind();
+                break;
+        }
+    }
+    _databind() {
+        const repeater = this._repeater;
+        if (Utils.isNull(repeater))
+            return;
+        //
+        var datasource = [];
+        const size = this.size ?? 10, pages = this.pages ?? 5, total = this.total ?? 0, index = this.index ?? 0, mode = this.mode ?? 'standard';
+        if (total > 0) {
+            let totpages = Math.ceil(total / size);
+            let pageindex = Math.floor(index / size);
+            let startpageindex = Math.max(0, Math.ceil(pageindex - pages / 2));
+            let endpageindex = Math.min(totpages - 1, startpageindex + pages - 1);
+            while (startpageindex > 0 && (1 + endpageindex - startpageindex) < pages) {
+                startpageindex--;
+            }
+            if (mode === 'numeric-only') {
+                if (startpageindex > 0) {
+                    datasource.push({ caption: (1).toLocaleString(Utils.lang(this)), index: 0, /*first: true,*/ disabled: !( /*start*/pageindex > 0) });
+                }
+            }
+            else {
+                // |<
+                datasource.push({ caption: '&laquo;', index: 0, first: true, disabled: !( /*start*/pageindex > 0) });
+                // <
+                datasource.push({ caption: '&lt;', index: size * (pageindex - 1), previous: true, disabled: !(pageindex > 0) });
+            }
+            // ...
+            if (startpageindex > 0 && mode !== 'numeric-only' || startpageindex > 1 && mode === 'numeric-only') {
+                datasource.push({ caption: '&hellip;', index: size * (startpageindex - 1) });
+            }
+            // #
+            for (let j = startpageindex; j <= endpageindex; j++) {
+                datasource.push({ caption: (j + 1).toLocaleString(Utils.lang(this)), index: j * size });
+            }
+            // ...
+            if (endpageindex < (totpages - 1) && mode !== 'numeric-only' || endpageindex < (totpages - 2) && mode === 'numeric-only') {
+                datasource.push({ caption: '&hellip;', index: size * (endpageindex + 1) });
+            }
+            if (mode === 'numeric-only') {
+                if (endpageindex < (totpages - 1)) {
+                    datasource.push({ caption: totpages.toLocaleString(Utils.lang(this)), index: size * (totpages - 1), /*last: true,*/ disabled: !( /*end*/pageindex < (totpages - 1)) });
+                }
+            }
+            else {
+                // >
+                datasource.push({ caption: '&gt;', index: size * (pageindex + 1), next: true, disabled: !(pageindex < (totpages - 1)) });
+                // >|
+                datasource.push({ caption: '&raquo;', index: size * (totpages - 1), last: true, disabled: !( /*end*/pageindex < (totpages - 1)) });
+            }
+            // 
+            this.index = pageindex * size;
+        }
+        repeater.datasource = datasource;
+    }
+};
+__decorate([
+    ViewChild(P + '-repeater')
+], PacemPagerElement.prototype, "_repeater", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Number })
+], PacemPagerElement.prototype, "index", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Number, emit: false })
+], PacemPagerElement.prototype, "total", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Number, emit: false })
+], PacemPagerElement.prototype, "pages", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Number, emit: false })
+], PacemPagerElement.prototype, "size", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.String, emit: false })
+], PacemPagerElement.prototype, "mode", void 0);
+__decorate([
+    Debounce(true)
+], PacemPagerElement.prototype, "_databind", null);
+PacemPagerElement = __decorate([
+    CustomElement({
+        tagName: P + '-pager', shadow: Defaults.USE_SHADOW_ROOT,
+        template: `<${P}-repeater class="${PCSS}-pager"><div class="${PCSS}-buttonset">
+<div class="pager-buttons">
+    <template>
+        <${P}-button class="${PCSS}-page button" on-click=":host.index = ^item.index" disabled="{{ ^item.disabled }}"
+    css-class="{{ { 'currentpage': ^item.index === :host.index, 'firstpage buttonset-first': ^item.first, 'previouspage': ^item.previous, 'nextpage': ^item.next, 'lastpage buttonset-last': ^item.last } }}"><${P}-span content="{{ ^item.caption }}"></${P}-span></${P}-button>
+    </template>
+</div>
+</div></${P}-repeater>`
+    })
+], PacemPagerElement);
+export { PacemPagerElement };

package/dist/esm/picture.js

@@ -0,0 +1,157 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { P, Utils, CustomElement, Watch, ViewChild, PropertyConverters, Components } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+let PacemPictureSourceElement = class PacemPictureSourceElement extends Components.PacemItemElement {
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        const picture = this.container;
+        if (picture instanceof PacemPictureElement && ['srcset', 'media', 'type', 'disabled'].indexOf(name) >= 0) {
+            picture.refreshSources();
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemPictureSourceElement.prototype, "srcset", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemPictureSourceElement.prototype, "media", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemPictureSourceElement.prototype, "type", void 0);
+PacemPictureSourceElement = __decorate([
+    CustomElement({
+        tagName: P + '-picture-source'
+    })
+], PacemPictureSourceElement);
+export { PacemPictureSourceElement };
+let PacemPictureElement = class PacemPictureElement extends Components.PacemItemsContainerElement {
+    constructor() {
+        super('img', { 'label': 'picture' });
+        this._updateCurrentSrcHandler = (evt) => {
+            this.currentSrc = this._img.currentSrc;
+        };
+    }
+    validate(item) {
+        return item instanceof PacemPictureSourceElement;
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'src':
+                this._setSource();
+                break;
+            case 'items':
+                this._setSources();
+                break;
+            case 'tooltip':
+                this._setAltText();
+                break;
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._img.addEventListener('load', this._updateCurrentSrcHandler, false);
+        this._setSource();
+        this._setAltText();
+        this._setSources();
+    }
+    disconnectedCallback() {
+        const img = this._img;
+        if (!Utils.isNull(img)) {
+            img.removeEventListener('load', this._updateCurrentSrcHandler, false);
+        }
+        super.disconnectedCallback();
+    }
+    refreshSources() {
+        this._setSources();
+    }
+    _setSources(items = this.items) {
+        const picture = this._picture, img = this._img;
+        if (!Utils.isNull(picture) && !Utils.isNull(img)) {
+            const sources = picture.querySelectorAll('source'), itemCount = items?.length ?? 0;
+            // populate
+            for (let i = 0; i < itemCount; i++) {
+                const item = this.items[i];
+                let source;
+                if (sources.length <= i) {
+                    source = document.createElement('source');
+                    source.setAttribute('part', 'source');
+                    picture.insertBefore(source, img);
+                }
+                else {
+                    source = sources.item(i);
+                }
+                if (item.disabled || Utils.isNullOrEmpty(item.srcset)) {
+                    source.removeAttribute('srcset');
+                }
+                else {
+                    source.srcset = item.srcset;
+                }
+                if (Utils.isNullOrEmpty(item.media)) {
+                    source.removeAttribute('media');
+                }
+                else {
+                    source.media = item.media;
+                }
+                if (Utils.isNullOrEmpty(item.type)) {
+                    source.removeAttribute('type');
+                }
+                else {
+                    source.type = item.type;
+                }
+            }
+            // cleanup
+            for (let i = sources.length - 1; i >= itemCount; i--) {
+                let source = sources.item(i);
+                source.remove();
+            }
+        }
+    }
+    _setSource(src = this.src) {
+        const img = this._img;
+        if (!Utils.isNull(img)) {
+            if (Utils.isNullOrEmpty(src)) {
+                img.removeAttribute('src');
+            }
+            else {
+                img.src = src;
+            }
+        }
+    }
+    _setAltText(tip = this.tooltip) {
+        const img = this._img;
+        if (!Utils.isNull(img)) {
+            if (Utils.isNullOrEmpty(tip)) {
+                img.alt = this.aria.attributes.toObject()['label'];
+            }
+            else {
+                img.alt = tip;
+            }
+        }
+    }
+};
+__decorate([
+    ViewChild('picture')
+], PacemPictureElement.prototype, "_picture", void 0);
+__decorate([
+    ViewChild('img')
+], PacemPictureElement.prototype, "_img", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemPictureElement.prototype, "src", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.String })
+], PacemPictureElement.prototype, "currentSrc", void 0);
+PacemPictureElement = __decorate([
+    CustomElement({
+        tagName: P + '-picture', shadow: true,
+        template: `<picture part="picture"><img loading="lazy" part="img" /></picture><slot></slot>`
+    })
+], PacemPictureElement);
+export { PacemPictureElement };

package/dist/esm/progressbar.js

@@ -0,0 +1,54 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { P, Utils, CustomElement, Watch, ViewChild, PropertyConverters, Components, Defaults } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+let PacemProgressbarElement = class PacemProgressbarElement extends Components.PacemElement {
+    constructor() {
+        super('progressbar', { 'valuemin': '0%', 'valuemax': '100%', 'valuenow': '0%' });
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'percentage':
+                this._bar.style.transform = `translateX(${(-100 + (val || 0))}%)`;
+                this._glow.style.transform = `scaleX(${((val || 0) * .01)})`;
+                let perc = Utils.leftPad(Math.floor(val), 2, '0') + '%';
+                this.aria.attributes.set('valuenow', perc);
+                if (Utils.isNullOrEmpty(this.caption)) {
+                    this.aria.attributes.set('valuetext', this._caption.textContent = perc);
+                }
+                break;
+            case 'caption':
+                this.aria.attributes.set('valuetext', this._caption.textContent = val);
+                break;
+        }
+    }
+};
+__decorate([
+    ViewChild('.progressbar-bar')
+], PacemProgressbarElement.prototype, "_bar", void 0);
+__decorate([
+    ViewChild('.progressbar-glow')
+], PacemProgressbarElement.prototype, "_glow", void 0);
+__decorate([
+    ViewChild('.progressbar-caption')
+], PacemProgressbarElement.prototype, "_caption", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemProgressbarElement.prototype, "caption", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Number })
+], PacemProgressbarElement.prototype, "percentage", void 0);
+PacemProgressbarElement = __decorate([
+    CustomElement({
+        tagName: P + '-progressbar', shadow: Defaults.USE_SHADOW_ROOT,
+        template: `<div class="progressbar-glow"></div>
+    <div class="progressbar-track"><div class="progressbar-bar"></div></div>
+    <label class="progressbar-caption"></label>`
+    })
+], PacemProgressbarElement);
+export { PacemProgressbarElement };

package/dist/esm/sidebar.js

@@ -0,0 +1,60 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { P, PCSS, Utils, CustomElement, Watch, PropertyConverters, Components, CustomElementUtils } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+let PacemSidebarElement = class PacemSidebarElement extends Components.PacemElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.synchronizeShell = true;
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'open':
+            case 'synchronizeShell':
+                this._sync();
+                break;
+        }
+    }
+    disconnectedCallback() {
+        this._sync(false);
+        super.disconnectedCallback();
+    }
+    _sync(val = this.open) {
+        const shell = this.#shell;
+        if (this.synchronizeShell) {
+            Utils.addClass(this, 'sidebar-sync');
+            Utils.addClass(shell, PCSS + (val === true ? '-sidebar-open' : '-sidebar-close'));
+            Utils.removeClass(shell, PCSS + (val === true ? '-sidebar-close' : '-sidebar-open'));
+        }
+        else {
+            Utils.removeClass(this, 'sidebar-sync');
+            Utils.removeClass(shell, PCSS + '-sidebar-close ' + PCSS + '-sidebar-open');
+        }
+    }
+    #shell;
+    connectedCallback() {
+        super.connectedCallback();
+        this.#shell = CustomElementUtils.findAncestorShell(this);
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemSidebarElement.prototype, "open", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], PacemSidebarElement.prototype, "synchronizeShell", void 0);
+PacemSidebarElement = __decorate([
+    CustomElement({
+        tagName: P + '-sidebar', template: `<${P}-panel class="sidebar-drawer" part="drawer" css-part="{{ { 'open': :host.open } }}" css-class="{{ {'open': :host.open } }}">
+    <slot></slot>
+</${P}-panel>`,
+        shadow: true
+    })
+], PacemSidebarElement);
+export { PacemSidebarElement };

package/dist/esm/slideshow.js

@@ -0,0 +1,27 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { P, CustomElement, Components } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+let PacemSlideElement = class PacemSlideElement extends Components.PacemIterableElement {
+};
+PacemSlideElement = __decorate([
+    CustomElement({
+        tagName: P + '-slide'
+    })
+], PacemSlideElement);
+export { PacemSlideElement };
+let PacemSlideshowElement = class PacemSlideshowElement extends Components.PacemIterativeElement {
+    validate(item) {
+        return item instanceof PacemSlideElement;
+    }
+};
+PacemSlideshowElement = __decorate([
+    CustomElement({
+        tagName: P + '-slideshow'
+    })
+], PacemSlideshowElement);
+export { PacemSlideshowElement };

package/dist/esm/social-twitter.js

@@ -0,0 +1,39 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { P, CustomElementUtils, CustomElement, Watch, PropertyConverters, Components } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI.Social {
+let PacemTweetEmbedElement = class PacemTweetEmbedElement extends Components.PacemElement {
+    constructor() {
+        super(...arguments);
+        this._scriptsLoaded = false;
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (name === 'tweetid' && this._scriptsLoaded)
+            this._render();
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        CustomElementUtils.importjs('https://platform.twitter.com/widgets.js').then(() => {
+            this._scriptsLoaded = true;
+            this._render();
+        });
+    }
+    _render() {
+        if (this.tweetid && this._scriptsLoaded) {
+            twttr.ready(tw => tw.widgets.createTweet(this.tweetid, this));
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemTweetEmbedElement.prototype, "tweetid", void 0);
+PacemTweetEmbedElement = __decorate([
+    CustomElement({ tagName: P + '-tweetembed' })
+], PacemTweetEmbedElement);
+export { PacemTweetEmbedElement };
+//}

package/dist/esm/sticky-header.js

@@ -0,0 +1,113 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { P, CustomElementUtils, CustomElement, Watch, PropertyConverters, PacemEventTarget, Components, Utils, Logging } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+export var StickyHeaderVisibility;
+(function (StickyHeaderVisibility) {
+    StickyHeaderVisibility["Persistent"] = "persistent";
+    StickyHeaderVisibility["QuickReturn"] = "quickreturn";
+})(StickyHeaderVisibility || (StickyHeaderVisibility = {}));
+let PacemStickyHeaderElement = class PacemStickyHeaderElement extends PacemEventTarget {
+    constructor() {
+        super(...arguments);
+        this.#previousOffset = { left: 0, top: 0 };
+        this._scrollHandler = (evt) => {
+            this.offset = evt.detail;
+        };
+    }
+    #scroller;
+    #previousOffset;
+    #id;
+    #shell;
+    _ensureScrollAwareElement() {
+        if (Utils.isNull(this.#scroller)) {
+            const scroller = this.#scroller = new Components.PacemScrollAwareElement();
+            this.log(Logging.LogLevel.Debug, 'creating scroll aware ' + this.#id);
+            const shell = this.#shell = CustomElementUtils.findAncestorShell(this);
+            shell.appendChild(scroller);
+            scroller.dataset["target"] = this.#id;
+            scroller.addEventListener(Components.ScrollEventName, this._scrollHandler, false);
+        }
+        this.#scroller.disabled = this.disabled;
+    }
+    _manageOffsetChange(offset = this.offset) {
+        if (this.disabled) {
+            return;
+        }
+        const visibility = this.visibility || StickyHeaderVisibility.Persistent, lastTop = this.#previousOffset.top, top = offset.top, threshold = this.threshold || 0, shell = this.#shell;
+        if (lastTop <= threshold && top > threshold) {
+            Utils.removeClass(shell, 'sticky-header-top');
+            Utils.addClass(shell, 'sticky-header-scroll');
+            // get into wavy behavior and aspect
+            if (visibility === StickyHeaderVisibility.QuickReturn) {
+                Utils.addClass(shell, 'sticky-header-fade');
+                this.visible = false;
+            }
+        }
+        else if (lastTop > threshold && top <= threshold) {
+            // back to steady form
+            Utils.removeClass(shell, 'sticky-header-fade');
+            Utils.removeClass(shell, 'sticky-header-scroll');
+            Utils.addClass(shell, 'sticky-header-top');
+        }
+        else if (lastTop > threshold && top > threshold && lastTop > top) {
+            // scrolling up, show
+            this.visible = true;
+            Utils.removeClass(shell, 'sticky-header-fade');
+        }
+        else if (lastTop > threshold && top > threshold && lastTop < top && visibility == StickyHeaderVisibility.QuickReturn) {
+            // keep scrolling down with quick return, hide
+            Utils.addClass(shell, 'sticky-header-fade');
+        }
+        this.#previousOffset = offset;
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'offset':
+                this._manageOffsetChange(val);
+                break;
+            case 'disabled':
+                this._ensureScrollAwareElement();
+                break;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.#id = this.id || 'sticky-' + Utils.uniqueCode();
+        this._ensureScrollAwareElement();
+    }
+    disconnectedCallback() {
+        const scroller = this.#scroller, shell = this.#shell;
+        if (!Utils.isNull(scroller)) {
+            this.log(Logging.LogLevel.Debug, 'disposing scroll aware ' + this.#id);
+            scroller.removeEventListener(Components.ScrollEventName, this._scrollHandler, false);
+            scroller.remove();
+            this.#scroller = undefined;
+            Utils.removeClass(shell, 'sticky-header-fade');
+            Utils.removeClass(shell, 'sticky-header-top');
+            Utils.removeClass(shell, 'sticky-header-scroll');
+        }
+        super.disconnectedCallback();
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.Number, emit: false })
+], PacemStickyHeaderElement.prototype, "threshold", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Point })
+], PacemStickyHeaderElement.prototype, "offset", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemStickyHeaderElement.prototype, "visible", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.String, emit: false })
+], PacemStickyHeaderElement.prototype, "visibility", void 0);
+PacemStickyHeaderElement = __decorate([
+    CustomElement({ tagName: P + '-sticky-header' })
+], PacemStickyHeaderElement);
+export { PacemStickyHeaderElement };