@swisspost/design-system-components 10.0.0-next.54 → 10.0.0-next.56

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

@@ -1,33 +1,9 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CFNKgUjL.js';
-import { v as version } from './package-BXRsHuTS.js';
-import { c as checkRequiredAndType } from './index-VmK3ABCB.js';
-import './breakpoints-CJ80BZ06.js';
-
-// Define common animation options
-const easing = 'ease';
-const defaultDuration = 500;
-const fill = 'forwards';
-function createSlideFadeAnimation(el, keyframes, duration = defaultDuration) {
-    return el.animate(keyframes, {
-        duration: duration,
-        easing,
-        fill,
-    });
-}
-function slideUpAndFadeOut(el, translateY = '-100%', duration = defaultDuration) {
-    const keyframes = [
-        { transform: 'translateY(0)', opacity: '1' },
-        { transform: `translateY(${translateY})`, opacity: '0' },
-    ];
-    return createSlideFadeAnimation(el, keyframes, duration);
-}
-function slideDownAndFadeIn(el, translateY = '-100%', duration = defaultDuration) {
-    const keyframes = [
-        { transform: `translateY(${translateY})`, opacity: '0' },
-        { transform: 'translateY(0)', opacity: '1' },
-    ];
-    return createSlideFadeAnimation(el, keyframes, duration);
-}
+import { r as registerInstance, h, H as Host, a as getElement } from './index-1ReqxAnI.js';
+import { f as fadeSlide } from './fade-slide-CvOvauo9.js';
+import { v as version } from './package-DZ5m2Ttg.js';
+import { c as checkRequiredAndType } from './breakpoints-DYoSKGHO.js';
+import './utils-CoDiS_Ik.js';
+import './environment-CEmnRoA6.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;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;user-select:none;appearance:button;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:flex;align-items: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}";
 
@@ -42,16 +18,16 @@ const PostBackToTop = class {
     isBelowFold() {
         return window.scrollY > window.innerHeight;
     }
-    validateLabel() {
-        checkRequiredAndType(this, 'label', 'string');
+    validateTextBackToTop() {
+        checkRequiredAndType(this, 'textBackToTop', 'string');
     }
     /*Watch for changes in belowFold to show/hide the back to top button*/
     watchBelowFold(newValue) {
         if (newValue) {
-            slideDownAndFadeIn(this.host, this.translateY);
+            fadeSlide(this.host, 'in', { translate: this.translateY, fill: 'forwards' });
         }
         else {
-            slideUpAndFadeOut(this.host, this.translateY);
+            fadeSlide(this.host, 'out', { translate: this.translateY, fill: 'forwards' });
         }
     }
     scrollToTop() {
@@ -78,11 +54,11 @@ const PostBackToTop = class {
         const elevationHeight = this.getSecondPixelValue(elevationParts);
         // The translateY is calculated as => -100% (btt button height) - topPosition - elevationHeight
         this.translateY =
-            String((-1 * 100) / 100 -
+            (-1 * 100) / 100 -
                 parseFloat(positionTop.replace('px', '')) -
-                parseFloat(elevationHeight.replace('px', ''))) + 'px';
+                parseFloat(elevationHeight.replace('px', ''));
         if (this.belowFold) {
-            slideDownAndFadeIn(this.host, this.translateY);
+            fadeSlide(this.host, 'in', { translate: this.translateY, fill: 'forwards' });
         }
         if (!this.belowFold) {
             this.host.style.transform = `translateY(${this.translateY})`;
@@ -95,17 +71,17 @@ const PostBackToTop = class {
     componentDidLoad() {
         window.addEventListener('scroll', this.handleScroll, false);
         this.animateButton();
-        this.validateLabel();
+        this.validateTextBackToTop();
     }
     disconnectedCallback() {
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        return (h(Host, { key: '51abef7d1f650da1476689c46d853f49669da856', "data-version": version }, h("button", { key: '9de175f7962448fa3d658e4a24b01a857925a5b7', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '2913ad9930bccf5f1e72ea611ed3c57a0e4e1ca8', "aria-hidden": "true", name: "arrowup" }), h("span", { key: '44b3f9bf5a16c883282a73bf5cfae77619079c0d', class: "visually-hidden" }, this.label))));
+        return (h(Host, { key: 'a6a5afe41d76c9b2b703f4a78e63849a1437680f', "data-version": version }, h("button", { key: 'ad10b46cf4d07d1efffae6feef7431ba8a11c59e', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: 'e95c5710939aa968df42f3acec2d56b2eaaa238e', "aria-hidden": "true", name: "arrowup" }), h("span", { key: 'f854524e0b76f71ef1edfed5a13d57985ac98ea5', class: "visually-hidden" }, this.textBackToTop))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "label": ["validateLabel"],
+        "textBackToTop": ["validateTextBackToTop"],
         "belowFold": ["watchBelowFold"]
     }; }
 };