@swisspost/internet-header 1.17.0 → 10.1.0

package/dist/esm/post-autocomplete.entry.js

@@ -0,0 +1,217 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-h3opCZqH.js';
+import { v as version } from './package-jK9tFtoG.js';
+import { d as debounce } from './debounce-C9hMpmsD.js';
+import { R as Required } from './required-tHxh_hWW.js';
+import { T as Type } from './type-Daxpt5v6.js';
+import './create-validator-decorator--a-qkYfP.js';
+
+const postAutocompleteCss = () => `:host{position:relative;display:block}.autocomplete-icon,.autocomplete-clear{position:absolute;inset-block-start:16px}@media screen and (min-width: 780px){.autocomplete-icon,.autocomplete-clear{inset-block-start:20px}}.autocomplete-icon{inset-inline-end:16px;width:24px;height:24px;pointer-events:none;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out, -webkit-transform .2s ease-in-out}:host([open]) .autocomplete-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.autocomplete-clear{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;inset-inline-end:42px;background:none;border:none;cursor:pointer}.autocomplete-clear>post-icon{width:20px;height:20px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}`;
+
+var __decorate = (undefined && undefined.__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;
+};
+const PostAutocomplete = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.postFilteringEvent = createEvent(this, "postFilteringEvent");
+        this.debouncedHandleInput = debounce((event) => {
+            void this.handleInput(event);
+        }, 250);
+        /** Number of characters to type before filtering methods are called */
+        this.filterThreshold = 0;
+        /** Show or hide the clear button */
+        this.clearable = false;
+        this.inputValue = '';
+        this.handleOnBlur = () => {
+            this.inputElement.value = this.inputValue;
+            this.listBoxElement.filter('');
+            this.hideListBox();
+        };
+        this.handleInput = async (event) => {
+            if (!this.listBoxElement)
+                return;
+            const value = event.target.value.trim();
+            const query = value.length >= this.filterThreshold ? value : '';
+            // Allow for consuming parent to handle filtering (e.g. for async data) and prevent default filtering behavior
+            const { defaultPrevented } = this.postFilteringEvent.emit(query && query.length >= this.filterThreshold ? query : '');
+            if (defaultPrevented)
+                return;
+            await this.listBoxElement.filter(query);
+            if (query) {
+                this.showListBox();
+                this.announceCount();
+            }
+            else {
+                this.inputValue = '';
+                this.clearAnnouncement();
+            }
+        };
+        this.handleKeyDown = (event) => {
+            const { key, altKey } = event;
+            switch (key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.showListBox();
+                    if (!altKey) {
+                        this.listBoxElement.navigate('down');
+                    }
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.listBoxElement.navigate('up');
+                    break;
+                case 'Enter':
+                    if (this.listBoxElement.hidden)
+                        return;
+                    event.preventDefault();
+                    this.listBoxElement.selectActive();
+                    this.hideListBox();
+                    break;
+                case 'Escape':
+                    this.hideListBox();
+                    break;
+                case 'Tab':
+                    this.listBoxElement.selectActive();
+                    this.hideListBox();
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this.listBoxElement.navigate('first');
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.listBoxElement.navigate('last');
+                    break;
+            }
+        };
+        this.handleOptionSelected = (e) => {
+            const value = e.detail;
+            this.inputElement.value = value;
+            this.inputValue = value;
+            this.hideListBox();
+        };
+        this.handleOptionActive = (e) => {
+            const value = e.detail;
+            if (value) {
+                this.inputElement.setAttribute('aria-activedescendant', value);
+            }
+            else {
+                this.inputElement.removeAttribute('aria-activedescendant');
+            }
+        };
+        this.hideListBox = () => {
+            this.clearAnnouncement();
+            this.listBoxElement.hide();
+            this.inputElement.ariaExpanded = 'false';
+            this.host.removeAttribute('open');
+            this.inputElement.removeAttribute('aria-activedescendant');
+        };
+        this.showListBox = async () => {
+            await this.listBoxElement.show();
+            this.inputElement.ariaExpanded = 'true';
+            this.host.setAttribute('open', '');
+            this.announceCount();
+        };
+        this.clearInput = () => {
+            if (this.inputElement) {
+                this.inputElement.value = '';
+                this.inputValue = '';
+                this.listBoxElement.clearSelection();
+                this.hideListBox();
+            }
+        };
+    }
+    get inputElement() {
+        return this.host.querySelector('input');
+    }
+    get listBoxElement() {
+        if (this.listbox) {
+            return document.getElementById(this.listbox);
+        }
+        else {
+            return this.host.querySelector('post-listbox');
+        }
+    }
+    componentWillLoad() {
+        if (!this.inputElement)
+            return;
+        this.inputElement.role = 'combobox';
+        this.inputElement.ariaAutoComplete = 'list';
+        if (!this.listBoxElement)
+            return;
+        if (!this.listBoxElement.id)
+            this.listBoxElement.id = crypto.randomUUID();
+        this.inputElement.setAttribute('aria-controls', this.listBoxElement.id);
+        this.inputElement.setAttribute('aria-expanded', 'false');
+        const inputLabel = this.inputElement.labels?.[0];
+        if (inputLabel) {
+            if (!inputLabel.id)
+                inputLabel.id = crypto.randomUUID();
+            this.listBoxElement.setAttribute('aria-labelledby', inputLabel.id);
+        }
+        // Because we're handling that and the browser would show a duplicate native autocomplete dropdown
+        this.inputElement.autocomplete = 'off';
+        this.attachInputListeners();
+        this.attachListboxListeners();
+    }
+    disconnectedCallback() {
+        this.detachInputListeners();
+        this.detachListboxListeners();
+    }
+    attachInputListeners() {
+        if (this.inputElement) {
+            this.inputElement.addEventListener('input', this.debouncedHandleInput);
+            this.inputElement.addEventListener('keydown', this.handleKeyDown);
+            this.inputElement.addEventListener('blur', this.handleOnBlur);
+            this.inputElement.addEventListener('click', this.showListBox);
+        }
+    }
+    detachInputListeners() {
+        if (this.inputElement) {
+            this.inputElement.removeEventListener('input', this.debouncedHandleInput);
+            this.inputElement.removeEventListener('keydown', this.handleKeyDown);
+            this.inputElement.removeEventListener('blur', this.handleOnBlur);
+            this.inputElement.removeEventListener('click', this.showListBox);
+        }
+    }
+    attachListboxListeners() {
+        if (this.listBoxElement) {
+            this.listBoxElement.addEventListener('postOptionSelected', this.handleOptionSelected);
+            this.listBoxElement.addEventListener('postOptionActive', this.handleOptionActive);
+        }
+    }
+    detachListboxListeners() {
+        if (this.listBoxElement) {
+            this.listBoxElement.removeEventListener('postOptionSelected', this.handleOptionSelected);
+            this.listBoxElement.removeEventListener('postOptionActive', this.handleOptionActive);
+        }
+    }
+    clearAnnouncement() {
+        if (this.outputElement)
+            this.outputElement.textContent = '';
+    }
+    announceCount() {
+        if (!this.outputElement || !this.listBoxElement)
+            return;
+        const count = this.listBoxElement.querySelectorAll('post-listbox-option:not([hidden])').length;
+        this.outputElement.textContent = this.textAvailableSuggestions.replace('{count}', String(count));
+    }
+    render() {
+        return (h(Host, { key: 'a88d1a65adcbe0603dc2c7ccf5900ae49dbe8edc', "data-version": version }, h("slot", { key: 'ff4724e2e298a38020c4eb93b2b9a38d811274b8' }), this.clearable && this.inputValue && (h("button", { key: '6a5f67d5376bdb0d261fd687ad29dd32d4f3be36', type: "button", class: "autocomplete-clear", onClick: this.clearInput }, h("post-icon", { key: '5b123fa4dbd581ebbba96f820b30d9d266b69b7d', "aria-hidden": "true", name: "closex" }))), h("post-icon", { key: '9d3fcaf73cfff3e17d440e7add858482e48a12a7', "aria-hidden": "true", class: "autocomplete-icon", name: "chevronDown" }), h("output", { key: '9c894f8ea34ffcc8b8c741216679ffbbd7b866bf', class: "visually-hidden", ref: el => (this.outputElement = el) })));
+    }
+    get host() { return getElement(this); }
+};
+__decorate([
+    Required(),
+    Type('string')
+], PostAutocomplete.prototype, "textAvailableSuggestions", void 0);
+PostAutocomplete.style = postAutocompleteCss();
+
+export { PostAutocomplete as post_autocomplete };

package/dist/esm/post-avatar.entry.js

@@ -0,0 +1,169 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-h3opCZqH.js';
+import { v as version } from './package-jK9tFtoG.js';
+import { P as Pattern } from './pattern-Der2DK75.js';
+import { R as Required } from './required-tHxh_hWW.js';
+import { T as Type } from './type-Daxpt5v6.js';
+import './create-validator-decorator--a-qkYfP.js';
+
+// https://docs.gravatar.com/api/avatars/images/
+const GRAVATAR_DEFAULT = '404';
+const GRAVATAR_RATING = 'g';
+const GRAVATAR_SIZE = 80;
+async function cryptify(key) {
+    return await crypto.subtle.digest('SHA-256', new TextEncoder().encode(key)).then(buffer => {
+        return Array.from(new Uint8Array(buffer))
+            .map(bytes => bytes.toString(16).padStart(2, '0'))
+            .join('');
+    });
+}
+const GRAVATAR_BASE_URL = `https://www.gravatar.com/avatar/{email}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
+
+const postAvatarCss = () => `:host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:-ms-inline-flexbox;display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase;font-weight:400;-webkit-transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}`;
+
+var __decorate = (undefined && undefined.__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;
+};
+const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+var AvatarType;
+(function (AvatarType) {
+    AvatarType["Slotted"] = "slotted";
+    AvatarType["Image"] = "image";
+    AvatarType["Initials"] = "initials";
+    AvatarType[AvatarType["Null"] = null] = "Null";
+})(AvatarType || (AvatarType = {}));
+const PostAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.avatarType = null;
+        this.imageUrl = '';
+        this.imageAlt = '';
+        this.initials = '';
+        // To handle email updates and reset the storage item
+        this.storageKey = '';
+    }
+    updateEmail() {
+        this.getAvatarImage();
+    }
+    async getAvatarImage() {
+        let imageLoaded = false;
+        this.slottedImage = this.host.querySelector('img');
+        const imageUrl = this.slottedImage?.getAttribute('src');
+        if (!imageUrl) {
+            if (this.email?.match(emailPattern)) {
+                imageLoaded = await this.getImageByProp(this.email, this.fetchImageByEmail.bind(this));
+            }
+            if (!imageLoaded) {
+                this.avatarType = AvatarType.Initials;
+            }
+        }
+        else {
+            const slottedImageLoaded = await this.getImageByProp(imageUrl, this.fetchSlottedImage.bind(this));
+            if (!slottedImageLoaded) {
+                this.slottedImage.style.display = 'none';
+                this.avatarType = AvatarType.Initials;
+            }
+            else {
+                this.slottedImage.style.display = 'block';
+            }
+        }
+    }
+    async getImageByProp(prop, fetchImage) {
+        if (!prop)
+            return false;
+        let imageResponse;
+        try {
+            imageResponse = await fetchImage(prop);
+        }
+        catch (error) {
+            console.info('Loading avatar image failed.', error);
+            return false;
+        }
+        if (!imageResponse?.ok) {
+            return false;
+        }
+        else {
+            this.imageUrl = imageResponse.url;
+            this.imageAlt = `${this.firstname} ${this.lastname} avatar`;
+            this.avatarType = AvatarType.Image;
+            return true;
+        }
+    }
+    async fetchImageByEmail() {
+        const email = await cryptify(this.email);
+        const imageUrl = GRAVATAR_BASE_URL.replace('{email}', email);
+        return await fetch(imageUrl);
+    }
+    async fetchSlottedImage(imageUrl) {
+        return await fetch(imageUrl, { method: 'HEAD' });
+    }
+    slotChanged() {
+        const slot = this.host.shadowRoot.querySelector('slot');
+        const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
+        assignedNodes.forEach(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (el.tagName === 'IMG') {
+                    this.observeImageSrcChanges(el);
+                }
+            }
+        });
+        this.getAvatarImage();
+    }
+    // Observe the Slotted image src attribute and update the image
+    observeImageSrcChanges(img) {
+        if (this.slottedImageObserver) {
+            this.slottedImageObserver.disconnect();
+        }
+        this.slottedImageObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
+                    this.getAvatarImage();
+                }
+            });
+        });
+        this.slottedImageObserver.observe(img, { attributes: true, attributeFilter: ['src'] });
+    }
+    connectedCallback() {
+        //This provides a fallback by showing the initials while the image is still loading or delayed.
+        this.avatarType = AvatarType.Initials;
+        this.getAvatarImage();
+    }
+    render() {
+        const names = [this.firstname, this.lastname].filter(Boolean).map(n => n.trim());
+        const initials = names
+            .map(n => n.charAt(0))
+            .join('')
+            .trim();
+        const fullname = names.join(' ');
+        return (h(Host, { key: 'ba9c39d64f6a1b77131ba8c603c9be3aad113c53', "data-version": version }, h("span", { key: '27a9ac87e8978fabf1717f3eb978e39d06670507', class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { key: '3fa13670176f2fc3a79a8b11659962f433c37c2e', onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { key: '232099852c2ad8f2c4660eb1077c6d618092cdca', src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && (h("span", { key: 'e6b3bf751a95997a2abef2a16dcd8e2c78d308fa', class: "initials" }, initials, h("span", { key: '8d869a374678094e2ec5abc146b0b981c9079c15' }, this.description ?? fullname)))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "email": [{
+                "updateEmail": 0
+            }]
+    }; }
+};
+__decorate([
+    Required(),
+    Type('string')
+], PostAvatar.prototype, "firstname", void 0);
+__decorate([
+    Type('string')
+], PostAvatar.prototype, "lastname", void 0);
+__decorate([
+    Pattern(emailPattern)
+], PostAvatar.prototype, "email", void 0);
+__decorate([
+    Type('string')
+], PostAvatar.prototype, "description", void 0);
+PostAvatar.style = postAvatarCss();
+
+export { PostAvatar as post_avatar };

package/dist/esm/post-back-to-top.entry.js

@@ -0,0 +1,104 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-h3opCZqH.js';
+import { f as fadeSlide } from './fade-slide-CvOvauo9.js';
+import { v as version } from './package-jK9tFtoG.js';
+import { R as Required } from './required-tHxh_hWW.js';
+import { T as Type } from './type-Daxpt5v6.js';
+import './utils-CoDiS_Ik.js';
+import './create-validator-decorator--a-qkYfP.js';
+
+const postBackToTopCss = () => `:host{opacity:0;--post-floating-button-position-top:var(--post-device-position-4);--post-back-to-top-position-top:calc( var(--post-header-height) + var(--post-floating-button-position-top) );--post-back-to-top-elevation:var(--post-device-elevation-300);position:fixed;z-index:1019;inset-block-start:var(--post-back-to-top-position-top);inset-inline-end:var(--post-device-position-1)}:host .back-to-top{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;-webkit-box-shadow:var(--post-back-to-top-elevation);box-shadow:var(--post-back-to-top-elevation);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top{background-color:ButtonFace !important}:host .back-to-top:hover{background-color:Highlight !important}}:host .back-to-top{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:hover{color:HighlightText !important}}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}`;
+
+var __decorate = (undefined && undefined.__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;
+};
+const PostBackToTop = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.belowFold = false;
+        this.handleScroll = () => {
+            this.belowFold = this.isBelowFold();
+        };
+    }
+    isBelowFold() {
+        return window.scrollY > window.innerHeight;
+    }
+    /*Watch for changes in belowFold to show/hide the back to top button*/
+    watchBelowFold(newValue) {
+        if (newValue) {
+            fadeSlide(this.host, 'in', { translate: this.translateY, fill: 'forwards' });
+        }
+        else {
+            fadeSlide(this.host, 'out', { translate: this.translateY, fill: 'forwards' });
+        }
+    }
+    scrollToTop() {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        });
+    }
+    getSecondPixelValue(parts) {
+        for (const part of parts) {
+            const pixelValues = part.match(/\b\d+px\b/g);
+            if (pixelValues && pixelValues.length > 1) {
+                return pixelValues[1];
+            }
+        }
+    }
+    animateButton() {
+        // Get the back-to-top button top postiion
+        const positionTop = globalThis.getComputedStyle(this.host).getPropertyValue('top');
+        const buttonElement = this.host.shadowRoot.querySelector('button');
+        // Extract the elevation height from the back-to-top button elevation token
+        const elevation = getComputedStyle(buttonElement).getPropertyValue('--post-back-to-top-elevation');
+        const elevationParts = elevation.split(',');
+        const elevationHeight = this.getSecondPixelValue(elevationParts);
+        if (!positionTop || positionTop === 'auto' || !elevationHeight)
+            return;
+        // The translateY is calculated as => -100% (btt button height) - topPosition - elevationHeight
+        this.translateY =
+            (-1 * 100) / 100 -
+                Number.parseFloat(positionTop.replace('px', '')) -
+                Number.parseFloat(elevationHeight.replace('px', ''));
+        if (this.belowFold) {
+            fadeSlide(this.host, 'in', { translate: this.translateY, fill: 'forwards' });
+        }
+        if (!this.belowFold) {
+            this.host.style.transform = `translateY(${this.translateY})`;
+        }
+    }
+    // Set the initial state
+    componentWillLoad() {
+        this.belowFold = this.isBelowFold();
+    }
+    componentDidLoad() {
+        window.addEventListener('scroll', this.handleScroll, false);
+        this.animateButton();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('scroll', this.handleScroll);
+    }
+    render() {
+        return (h(Host, { key: '3d976e4e1a8ac4b72041369d5667c55d915d7118', "data-version": version }, h("button", { key: '7ceb4953248ca934a905ec63444934e9e6c09e43', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '89a2bc9a8278fb45d3fb915ec096ee94b3841edd', "aria-hidden": "true", name: "arrowup" }), h("span", { key: 'fc2517fba7599f37c3054b638afd6b9b2ba7e32a', class: "visually-hidden" }, this.textBackToTop))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "belowFold": [{
+                "watchBelowFold": 0
+            }]
+    }; }
+};
+__decorate([
+    Required(),
+    Type('string')
+], PostBackToTop.prototype, "textBackToTop", void 0);
+PostBackToTop.style = postBackToTopCss();
+
+export { PostBackToTop as post_back_to_top };

package/dist/esm/post-banner.entry.js

@@ -0,0 +1,71 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-h3opCZqH.js';
+import { v as version } from './package-jK9tFtoG.js';
+import { f as fade } from './fade-DsgPYmAa.js';
+import { O as OneOf } from './one-of-w2eXPAzD.js';
+import { E as EventFrom } from './event-from-rEfV4v4a.js';
+import './utils-CoDiS_Ik.js';
+import './create-validator-decorator--a-qkYfP.js';
+
+const BANNER_TYPES = ['success', 'warning', 'error', 'info'];
+
+const postBannerCss = () => `:host{position:relative;display:grid;grid-template-columns:1fr;grid-auto-rows:auto;grid-auto-flow:row;min-height:calc(var(--post-device-sizing-notification-icon-2) + (2 * var(--post-device-spacing-padding-10)));padding:var(--post-device-spacing-padding-10);-webkit-padding-start:calc(     var(--post-device-spacing-padding-10) + var(--post-device-sizing-notification-icon-2) +       var(--post-device-spacing-gap-inline-6)   );padding-inline-start:calc(     var(--post-device-spacing-padding-10) + var(--post-device-sizing-notification-icon-2) +       var(--post-device-spacing-gap-inline-6)   );color:var(--post-current-fg);border-style:var(--post-core-border-style-solid);border-width:var(--post-device-border-width-default);border-radius:var(--post-device-border-radius-2);-webkit-box-shadow:var(--post-device-elevation-100);box-shadow:var(--post-device-elevation-100);background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke)}:host::before{content:"";display:block;position:absolute;height:var(--post-device-sizing-notification-icon-2);width:var(--post-device-sizing-notification-icon-2);inset-block-start:var(--post-device-spacing-padding-10);inset-inline-start:var(--post-device-spacing-padding-10);background-image:var(--post-signal-icon-info)}:host([type=info]){background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke)}:host([type=info])::before{background-image:var(--post-signal-icon-info)}:host([type=success]){background-color:var(--post-scheme-color-interactive-notification-success-bg);border-color:var(--post-scheme-color-interactive-notification-success-stroke)}:host([type=success])::before{background-image:var(--post-signal-icon-success)}:host([type=warning]){background-color:var(--post-scheme-color-interactive-notification-warning-bg);border-color:var(--post-scheme-color-interactive-notification-warning-stroke)}:host([type=warning])::before{background-image:var(--post-signal-icon-warning)}:host([type=error]){background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke)}:host([type=error])::before{background-image:var(--post-signal-icon-error)}.post-banner-content{display:grid;grid-template-columns:1fr;row-gap:var(--post-device-spacing-gap-block-1);overflow-x:auto}.actions{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;-webkit-margin-before:var(--post-device-spacing-padding-block-10);margin-block-start:var(--post-device-spacing-padding-block-10);gap:var(--post-device-spacing-gap-1)}@media screen and (min-width: 0)and (max-width: 599.98px){.actions{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}}::slotted(*){margin-block:0 !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host{border-color:CanvasText}:host::before{color:CanvasText}}`;
+
+var __decorate = (undefined && undefined.__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;
+};
+const PostBanner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.postDismissed = createEvent(this, "postDismissed");
+        this.mutationObserver = new MutationObserver(this.checkContent.bind(this));
+        this.hasActions = false;
+        /**
+         * The type of the banner.
+         */
+        this.type = 'info';
+    }
+    connectedCallback() {
+        this.mutationObserver.observe(this.host, { childList: true });
+    }
+    componentDidLoad() {
+        this.checkContent();
+    }
+    disconnectedCallback() {
+        this.mutationObserver.disconnect();
+    }
+    /**
+     * Triggers banner dismissal programmatically (same as clicking on the close button (×)).
+     */
+    async dismiss() {
+        const dismissal = fade(this.host, 'out');
+        await dismissal.finished;
+        this.postDismissed.emit();
+        this.host.remove();
+    }
+    onCloseButtonClick() {
+        void this.dismiss();
+    }
+    checkContent() {
+        this.hasActions = this.host.querySelectorAll('[slot="actions"]').length > 0;
+    }
+    render() {
+        return (h(Host, { key: 'afa4834733c7e9d985d2102a3e421f09f94b44ba', "data-version": version, role: "alert", "data-color-scheme": "light" }, h("slot", { key: '39dfccec7bf829ff354bac467a9b399e003ce473', name: "close-button" }), h("div", { key: 'e6dfc60165185da4384c4143153ee34db1299088', class: "post-banner-content" }, h("slot", { key: '9fc1e8e81cf396eb1ae1e5dfff7f04ccc6443986', name: "heading" }), h("slot", { key: 'e7d21db6f7feb1507c612319c3d56595b797a3c4' }), this.hasActions && (h("div", { key: 'd4229d09accb5cfb2a096c44ca523a132da4755d', class: "actions" }, h("slot", { key: 'b01633122bd45df2f95b7ee5e4694a83aceb68bd', name: "actions" }))))));
+    }
+    get host() { return getElement(this); }
+};
+__decorate([
+    OneOf(BANNER_TYPES)
+], PostBanner.prototype, "type", void 0);
+__decorate([
+    EventFrom('post-closebutton', { allowDescendants: true })
+], PostBanner.prototype, "onCloseButtonClick", null);
+PostBanner.style = postBannerCss();
+
+export { PostBanner as post_banner };