@postnord/pn-marketweb-components 4.3.5 → 4.3.7

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-wizard/pn-wizard.js

@@ -47,6 +47,8 @@ export class PnWizard {
     step = -1;
     /**
      * The list of querySelectors that the wizards will highlight.
+     * If a selector is invalid or empty, the wizard will be centered on the screen.
+     *
      * Recommended maximum of 7 steps.
      * @category Wizard steps
      **/
@@ -85,10 +87,6 @@ export class PnWizard {
     /** Emitted when the wizard is canceled or finished. */
     wizardClose;
     handleStepChange(step, prevStep) {
-        if (prevStep === -1) {
-            this.highlightElement();
-            this.positionModal();
-        }
         if (step === -1) {
             const finished = prevStep === this.steps.length;
             this.wizardClose.emit({ step: finished ? prevStep - 1 : prevStep, finished });
@@ -99,8 +97,11 @@ export class PnWizard {
             return;
         }
         if (!this.wizardElement.open) {
-            this.handleDisplayOverflow();
-            this.wizardElement?.showModal();
+            this.runStepLogic();
+            requestAnimationFrame(() => {
+                this.handleDisplayOverflow();
+                this.wizardElement?.showModal();
+            });
         }
         this.wizardStep.emit({
             step,
@@ -116,18 +117,14 @@ export class PnWizard {
         if (!this.isActive())
             return;
         clearTimeout(this.timeoutRerender);
-        this.timeoutRerender = setTimeout(() => {
-            this.highlightElement();
-            this.positionModal();
-        }, 250);
+        this.timeoutRerender = setTimeout(() => this.runStepLogic(), 250);
     }
     async componentWillLoad() {
-        this.handleIdChange();
         if (this.language === null)
             await awaitTopbar(this.hostElement);
     }
     componentDidRender() {
-        this.runStepLogic();
+        requestAnimationFrame(() => this.isActive() && this.runStepLogic());
     }
     getRect(element) {
         return element.getBoundingClientRect();
@@ -135,6 +132,12 @@ export class PnWizard {
     translate(prop) {
         return translations?.[prop]?.[this.language || en] || prop;
     }
+    runStepLogic() {
+        if (this.isOpen())
+            this.scrollToElement();
+        this.highlightElement();
+        this.positionModal();
+    }
     handleDisplayOverflow() {
         if (this.displayOverflow)
             return;
@@ -142,7 +145,7 @@ export class PnWizard {
         const scrollbarWidth = innerWidth - document.documentElement.clientWidth;
         if (this.isActive()) {
             body.style.setProperty('overflow', 'hidden');
-            body.style.marginRight = `${scrollbarWidth}px`;
+            body.style.setProperty('margin-right', `${scrollbarWidth}px`);
         }
         else {
             body.style.removeProperty('overflow');
@@ -195,15 +198,6 @@ export class PnWizard {
     showFinishButton() {
         return !this.hideFinish && this.isLastStep();
     }
-    runStepLogic() {
-        if (this.isOpen()) {
-            requestAnimationFrame(() => {
-                this.highlightElement();
-                this.positionModal();
-                this.scrollToElement();
-            });
-        }
-    }
     nextStep() {
         const next = this.step + 1;
         this.step = next;
@@ -223,13 +217,17 @@ export class PnWizard {
     }
     getHighlightTarget() {
         const selector = this.steps[this.step];
+        if (!selector)
+            return null;
         const target = document.querySelector(selector);
         return target;
     }
     getHighlightRect() {
         const target = this.getHighlightTarget();
-        if (!target)
+        if (!target) {
+            this.resetToCenter();
             return;
+        }
         const rect = this.getRect(target);
         const margin = parseFloat(getComputedStyle(target).margin) || 0;
         const top = rect.top + window.scrollY - margin;
@@ -239,47 +237,70 @@ export class PnWizard {
         const radius = parseFloat(getComputedStyle(target).borderRadius) || 4;
         return { top, left, width, height, radius };
     }
+    isInViewport(element) {
+        const { top, left, bottom, right } = element.getBoundingClientRect();
+        return (top >= 0 &&
+            left >= 0 &&
+            bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            right <= (window.innerWidth || document.documentElement.clientWidth));
+    }
     scrollToElement() {
         const target = this.getHighlightTarget();
-        if (!target)
+        if (!target || this.isInViewport(target))
             return;
-        target.scrollIntoView({ behavior: 'smooth', block: this.scrollBlock });
+        target.scrollIntoView({ behavior: 'instant', block: this.scrollBlock });
     }
     highlightElement() {
         const target = this.getHighlightTarget();
         if (!target)
-            return;
+            return this.resetToCenter();
         this.setHighlightVars(this.getHighlightRect());
     }
+    resetToCenter() {
+        const { width, height } = this.getWizardContentRect();
+        const top = window.scrollY + window.innerHeight / 2 - height / 2;
+        const left = window.scrollX + window.innerWidth / 2 - width / 2;
+        this.setHighlightVars({ top, left, width: 0, height: 0, radius: 0 });
+        this.setModalVars({ top, left });
+        this.setArrowVars('none', 0);
+    }
+    getWizardContentRect() {
+        if (!this.wizardContent)
+            return { width: 0, height: 0 };
+        return this.getRect(this.wizardContent);
+    }
     positionModal() {
         const target = this.getHighlightTarget();
         if (!target)
             return;
+        /** The distance between the highlight and the modal */
         const gap = 16;
-        // Target = Highlighted element
+        /** The minimum offset from the edge of the viewport */
+        const minOffset = gap / 2;
+        /** Target = Highlighted element */
         const { top: targetTop, left: targetLeft, width: targetWidth, height: targetHeight } = this.getHighlightRect();
-        // Modal = Wizard content
-        const { width: modalWidth, height: modalHeight } = this.getRect(this.wizardContent);
         const targetCenter = targetLeft + targetWidth / 2;
+        /** Modal = Wizard content */
+        const { width: modalWidth, height: modalHeight } = this.getWizardContentRect();
+        /** The X position of the modal */
         let contentX = 0;
+        /** The Y position of the modal */
         let contentY = 0;
-        // Get viewport dimensions and scroll position
+        /** Get viewport dimensions and scroll position */
         const { scrollY, scrollX, innerWidth, innerHeight } = window;
         const scrollbarWidth = innerWidth - document.documentElement.clientWidth;
-        // If highlight is very tall, position wizardContent left or right
-        // const highlightIsTall = modalHeight > targetTop && modalHeight > innerHeight - (targetTop + targetHeight);
         // Where does the modal fit?
         const modalFitsDown = targetTop + targetHeight + gap + modalHeight < scrollY + innerHeight;
-        const modalFitsUp = targetTop - gap - modalHeight > scrollY;
+        const modalFitsUp = targetTop - scrollY > modalHeight + gap;
         const modalFitsLeft = targetLeft - gap - modalWidth > scrollX;
         const modalFitsRight = targetLeft + targetWidth + gap + modalWidth < scrollX + innerWidth;
         const modalFitsNone = !modalFitsDown && !modalFitsUp && !modalFitsLeft && !modalFitsRight;
         const fitsY = modalFitsDown || modalFitsUp;
         const fitsX = modalFitsLeft || modalFitsRight;
-        let maxY = 8;
-        let maxX = 8;
+        let maxY = minOffset;
+        let maxX = minOffset;
         maxY = modalFitsDown ? targetTop + targetHeight + gap : targetTop - modalHeight - gap;
-        maxX = scrollX + innerWidth - modalWidth - scrollbarWidth - 8;
+        maxX = scrollX + innerWidth - modalWidth - scrollbarWidth - minOffset;
         // Arrow stuff
         let arrowOffset = 0;
         let arrowDirection = 'top';
@@ -292,22 +313,22 @@ export class PnWizard {
         else if (fitsX) {
             contentX = modalFitsRight ? targetLeft + targetWidth + gap : targetLeft - modalWidth - gap;
             contentY = targetTop + targetHeight / 2 - modalHeight / 2;
-            maxY = targetTop + targetHeight / 2;
+            maxY = scrollY + innerHeight - modalHeight - minOffset;
             arrowDirection = modalFitsRight ? 'left' : 'right';
             arrowOffset = modalHeight / 2;
         }
         else if (modalFitsNone) {
             contentX = targetCenter - modalWidth / 2;
             contentY = targetTop + targetHeight - modalHeight / 2;
-            maxY = innerHeight - modalHeight - 8;
+            maxY = scrollY - modalHeight - minOffset;
             arrowDirection = 'top';
             arrowOffset = targetCenter - contentX;
         }
         // Clamp horizontally within viewport
-        const minX = scrollX + scrollbarWidth || 8;
+        const minX = scrollX + scrollbarWidth || minOffset;
         contentX = Math.max(minX, Math.min(contentX, maxX));
         // Clamp vertically within viewport
-        const minY = 8;
+        const minY = minOffset;
         contentY = Math.max(minY, Math.min(contentY, maxY));
         this.setModalVars({ top: contentY, left: contentX });
         if (isSmallScreen()) {
@@ -320,8 +341,9 @@ export class PnWizard {
         else {
             arrowOffset = targetTop + targetHeight / 2 - contentY;
         }
-        arrowOffset = Math.max(32, // Minimum offset from edge
-        Math.min(arrowOffset - 8, (fitsX ? modalHeight : modalWidth) - 32));
+        const modalSize = arrowDirection === 'top' || arrowDirection === 'bottom' ? modalWidth : modalHeight;
+        arrowOffset = Math.max(32, // Minimum offset from edge of modal
+        Math.min(arrowOffset - minOffset, modalSize - 32));
         this.setArrowVars(arrowDirection, arrowOffset);
     }
     setHighlightVars({ top, left, width, height, radius, }) {
@@ -341,7 +363,7 @@ export class PnWizard {
         this.hostElement.style.setProperty('--pn-arrow-offset', `${Math.round(offset)}px`);
     }
     render() {
-        return (h(Host, { key: '08f0d484f684188c7283535da328d6bd681b74d5' }, h("dialog", { key: '56810278e58795390973a9ebbe0bd797b731b1f8', id: this.pnId, "aria-labelledby": this.label ? this.wizardIdLabel : null, "aria-describedby": this.helpertext ? this.wizardIdHelpertext : null, class: "pn-wizard", ref: el => (this.wizardElement = el), onCancel: () => this.endWizard(), onClose: () => this.endWizard() }, h("div", { key: '824bbd673177648865e9328ee5aa51e157aa7347', class: "pn-wizard-overlay" }, h("div", { key: 'a2236247ba49e18de2a4aa2666fa1e07e6aaa1c4', class: "pn-wizard-highlight", onClick: e => this.wizardHighlightClick.emit(e) })), h("div", { key: '77d5f6e74c49b2a92a8c9c8f9207594bec0545c7', class: "pn-wizard-content", ref: el => (this.wizardContent = el) }, h("pn-button", { key: '28fdec2fa470ff03b916325d0085a7bd4cd8f504', class: "pn-wizard-cancel", arialabel: this.translate('CANCEL'), icon: close, iconOnly: true, small: true, appearance: "light", variant: "borderless", onPnClick: () => this.endWizard() }), h("div", { key: 'ff7e6051e041c008c639e392896e885e4dcb0364', class: "pn-wizard-text" }, this.label && (h("h2", { key: '9b8098099707558b66f1b422dc6ada70084d9829', class: "pn-wizard-label", id: this.wizardIdLabel }, this.label)), this.helpertext && (h("p", { key: '4db3b8ab391daf06f5731be43c9c116acd934b1f', class: "pn-wizard-helpertext", id: this.wizardIdHelpertext }, this.helpertext)), h("slot", { key: '5f72315df3102a605d2d4a220cfebfa216101f8c' }), this.renderProgress() && (h("pn-progress-stepper", { key: 'becee14c8d2ad3fe3a9d902dd080f4df760e227e', class: !this.isProgressDots() && 'pn-wizard-sr-only', totalSteps: this.steps.length, currentStep: this.step > 0 ? this.step + 1 : 1, dots: true }))), h("div", { key: '264270d944373b1570a09a330bef6c6e8ad07e4d', class: "pn-wizard-arrow", ref: el => (this.wizardArrow = el) }), h("div", { key: '1420663b8cc3996eb67f640d3a7f981f1fafff82', class: "pn-wizard-controls" }, this.isProgressText() && (h("span", { key: '99cd61e352d16b15129239c8c1932a1e8ff3d675', class: "pn-wizard-indicator", "aria-hidden": "true" }, this.step + 1, "/", this.steps.length)), h("slot", { key: 'f48e48097089a24ed48726046e5bb9b8a36ca1ec', name: "buttons" }), this.showBackButton() && (h("pn-button", { key: '9504536c3602f6280d30aa6f95043d2a66c2ac98', label: this.labelBack || this.translate('PREV'), small: true, appearance: "light", variant: "outlined", onPnClick: () => this.prevStep() })), this.showNextButton() && (h("pn-button", { key: 'c5997f60733d2f220138fbf3caf24f44271d63f3', label: this.getNextLabel(), small: true, icon: arrow_right, onPnClick: () => this.nextStep() })))))));
+        return (h(Host, { key: '3fbeaf58c3adc8ea380a81b93dc66fb8a6bece5c' }, h("dialog", { key: 'f0f94968cba2e2dc8baba4752d80a7bea862c929', id: this.pnId, "aria-labelledby": this.label ? this.wizardIdLabel : null, "aria-describedby": this.helpertext ? this.wizardIdHelpertext : null, class: "pn-wizard", ref: el => (this.wizardElement = el), onCancel: () => this.endWizard(), onClose: () => this.endWizard() }, h("div", { key: '737f8207c19876c82c6a3d2418305fc7268ee251', class: "pn-wizard-overlay" }, h("div", { key: 'd420a48ad3b30828b4dd496f56073eea375bbe34', class: "pn-wizard-highlight", onClick: e => this.wizardHighlightClick.emit(e) })), h("div", { key: '03d6e169d95b7fe7bdb65a31e839b5744db190d0', class: "pn-wizard-content", ref: el => (this.wizardContent = el) }, h("pn-button", { key: '3534ecbbd28f9171b0ba1adfa07a91a4a20a1dd1', class: "pn-wizard-cancel", arialabel: this.translate('CANCEL'), icon: close, iconOnly: true, small: true, appearance: "light", variant: "borderless", onPnClick: () => this.endWizard() }), h("div", { key: 'b1f3f3ddb93efe5201091d19df4ff22acde76391', class: "pn-wizard-text" }, this.label && (h("h2", { key: 'b689ff85832dd65814d30ca85c00b59281aef1d1', class: "pn-wizard-label", id: this.wizardIdLabel }, this.label)), this.helpertext && (h("p", { key: '6a978db802f3faa402435c84c233e84c3456f657', class: "pn-wizard-helpertext", id: this.wizardIdHelpertext }, this.helpertext)), h("slot", { key: '52d0440d5b470fd06eb3a0c21921d540c79c0ac9' }), this.renderProgress() && (h("pn-progress-stepper", { key: '63f08858ddef511b92d622a559fe3888b5a6508a', class: !this.isProgressDots() && 'pn-wizard-sr-only', totalSteps: this.steps.length, currentStep: this.step > 0 ? this.step + 1 : 1, dots: true }))), h("div", { key: 'c5b266d5421f09bbc2ab199d6d71f5938dc8ae72', class: "pn-wizard-arrow", ref: el => (this.wizardArrow = el) }), h("div", { key: '00aef3606f751ca56142fe2b0a6a08a36e4f92f3', class: "pn-wizard-controls" }, this.isProgressText() && (h("span", { key: 'd6c0c85554253580d65aa42742cdabf55158bfe5', class: "pn-wizard-indicator", "aria-hidden": "true" }, this.step + 1, "/", this.steps.length)), h("slot", { key: '76a1b7c69280ffbbc81f210acdfb8812b241329d', name: "buttons" }), this.showBackButton() && (h("pn-button", { key: '560aa03d06aec0b32ae94ee2264b6bd059b5f305', label: this.labelBack || this.translate('PREV'), small: true, appearance: "light", variant: "outlined", onPnClick: () => this.prevStep() })), this.showNextButton() && (h("pn-button", { key: '00d8a13c7ee3413aa2e3d751d101de41e228f866', label: this.getNextLabel(), small: true, icon: arrow_right, onPnClick: () => this.nextStep() })))))));
     }
     static get is() { return "pn-wizard"; }
     static get originalStyleUrls() {
@@ -481,7 +503,7 @@ export class PnWizard {
                             "name": "category",
                             "text": "Wizard steps"
                         }],
-                    "text": "The list of querySelectors that the wizards will highlight.\nRecommended maximum of 7 steps."
+                    "text": "The list of querySelectors that the wizards will highlight.\nIf a selector is invalid or empty, the wizard will be centered on the screen.\n\nRecommended maximum of 7 steps."
                 },
                 "getter": false,
                 "setter": false,
@@ -756,7 +778,10 @@ export class PnWizard {
                 "methodName": "handleStepChange"
             }, {
                 "propName": "pnId",
-                "methodName": "handleIdChange"
+                "methodName": "handleIdChange",
+                "handlerOptions": {
+                    "immediate": true
+                }
             }];
     }
     static get listeners() {

package/umd/modules/@postnord/web-components/collection/components/input/pn-checkbox/pn-checkbox.css

@@ -20,6 +20,8 @@ pn-checkbox .pn-checkbox-label {
 pn-checkbox .pn-checkbox-helpertext {
   color: #5e554a;
   margin: 0 0 0.5em 0;
+  display: flex;
+  flex-direction: column;
 }
 pn-checkbox .pn-checkbox-helpertext:last-child {
   margin: 0;
@@ -259,7 +261,7 @@ pn-checkbox > input:disabled + .pn-checkbox[data-tile] {
   background-color: #f3f2f2;
   border-color: #f3f2f2;
 }
-pn-checkbox > input:disabled + .pn-checkbox[data-tile] > pn-icon > .pn-icon-svg path {
+pn-checkbox > input:disabled + .pn-checkbox[data-tile] > pn-icon .pn-icon-svg path {
   fill: #5e554a;
 }
 pn-checkbox > input:disabled + .pn-checkbox[data-tile] > .pn-checkbox-content > .pn-checkbox-label {