@getflip/swirl-components 0.340.1 → 0.341.1

package/dist/cjs/swirl-date-input.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var index = require('./index-Cks2WRVX.js');
-var index$1 = require('./index-DcAhLZUH.js');
-var maska = require('./maska-BX2QG_K8.js');
+var index$2 = require('./index-DcAhLZUH.js');
+var index$1 = require('./index-BOqO2Grl.js');
 var mediaQuery_service = require('./media-query.service-DRPgROAV.js');
 var utils = require('./utils-Br2wWntR.js');
 
@@ -25,29 +25,6 @@ const SwirlDateInput = class {
         this.iconSize = 24;
         this.readonly = false;
         this.mediaQueryUnsubscribe = () => { };
-        this.onChange = (event) => {
-            const value = event.target.value;
-            if (value === "") {
-                this.value = undefined;
-            }
-            const newDate = maska.parse(value, this.format, new Date());
-            // First, escape any backslashes in the format string
-            const escapedFormat = this.format.replace(/\\/g, "\\\\");
-            // Then construct the RegExp using the escaped format string
-            const formatRegExp = new RegExp(`^${escapedFormat.replace(/[ydM]/g, "\\d")}$`);
-            if (!Boolean(value.match(formatRegExp))) {
-                return;
-            }
-            if (!maska.isValid(newDate)) {
-                this.invalidInput.emit(value);
-                return;
-            }
-            const newValue = maska.format(newDate, internalDateFormat);
-            this.value = newValue;
-        };
-        this.onInput = (event) => {
-            this.onChange(event);
-        };
         this.onClick = (event) => {
             event.preventDefault();
             if (this.preferredInputMode === "pick") {
@@ -71,8 +48,10 @@ const SwirlDateInput = class {
         };
         this.onPickDate = (event) => {
             const newDateValue = event.detail;
-            const newValue = maska.format(newDateValue, internalDateFormat);
+            const newValue = index$1.format(newDateValue, internalDateFormat);
             this.value = newValue;
+            this.inputEl.value = index$1.format(newDateValue, this.pattern);
+            this.mask.updateValue();
             this.setReadOnly(true);
             this.pickerPopover.close();
         };
@@ -101,7 +80,7 @@ const SwirlDateInput = class {
     }
     watchValue(newValue, oldValue) {
         if (newValue !== oldValue) {
-            this.valueChange.emit(newValue);
+            this.updateValue();
         }
     }
     focus() {
@@ -114,9 +93,18 @@ const SwirlDateInput = class {
     }
     handleAutoSelect(event) {
         if (!this.autoSelect) {
+            setTimeout(() => {
+                if (event.target &&
+                    event.target instanceof HTMLInputElement &&
+                    event.target.setSelectionRange) {
+                    event.target.setSelectionRange(0, 0);
+                }
+            });
             return;
         }
-        event.target.select();
+        if (event.target && event.target instanceof HTMLInputElement) {
+            event.target.select();
+        }
     }
     setReadOnly(readOnly) {
         if (this.preferredInputMode === "pick" && utils.isMobileViewport()) {
@@ -128,24 +116,91 @@ const SwirlDateInput = class {
     }
     setupMask() {
         this.mask?.destroy();
-        this.mask = maska.maskaExports.create(`#${this.id}`, {
-            mask: this.format.replace(/[ydM]/g, "#"),
+        // Due to automatic padding with 0s, we need to replace single characters with full length blocks.
+        this.pattern = this.format
+            .replace(/(?<!d)d(?!d)/g, "dd")
+            .replace(/(?<!M)M(?!M)/g, "MM")
+            .replace(/(?<!y)y(?!y)/g, "yyyy")
+            .replace(/(?<!y)yyy(?!y)/g, "yyyy");
+        if (!this.pattern) {
+            this.pattern = internalDateFormat;
+        }
+        this.mask = index$1.IMask(this.inputEl, {
+            mask: Date,
+            pattern: this.pattern.replace(/([^A-Za-z0-9])/g, "$1`"), // Add backticks to separators to prevent symbols from shifting back
+            autofix: "pad",
+            lazy: true,
+            overwrite: true,
+            eager: "append",
+            blocks: {
+                dd: {
+                    mask: index$1.IMask.MaskedRange,
+                    from: 1,
+                    to: 31,
+                    maxLength: 2,
+                },
+                MM: {
+                    mask: index$1.IMask.MaskedRange,
+                    from: 1,
+                    to: 12,
+                    maxLength: 2,
+                },
+                yy: {
+                    mask: index$1.IMask.MaskedRange,
+                    from: 0,
+                    to: 99,
+                    maxLength: 2,
+                },
+                yyyy: {
+                    mask: index$1.IMask.MaskedRange,
+                    from: 1000,
+                    to: 9999,
+                    maxLength: 4,
+                },
+            },
+            // define date -> str conversion
+            format: (date) => {
+                const newDate = index$1.format(date, this.pattern);
+                if (!index$1.isValid(date)) {
+                    this.invalidInput.emit(date.toString());
+                    return "";
+                }
+                this.value = index$1.format(date, internalDateFormat);
+                return newDate;
+            },
+            // define str -> date conversion
+            parse: (str) => {
+                const newString = index$1.parse(str, this.pattern, new Date());
+                return newString;
+            },
         });
+        this.updateValue();
+    }
+    updateValue() {
+        if (this.value) {
+            const dateValue = index$1.parse(this.value, internalDateFormat, new Date());
+            if (index$1.isValid(dateValue)) {
+                const formattedValue = index$1.format(dateValue, this.pattern);
+                this.mask.value = formattedValue;
+                this.valueChange.emit(this.value);
+            }
+            else {
+                this.invalidInput.emit(this.value);
+            }
+        }
     }
     render() {
         const ariaInvalid = this.invalid === true || this.invalid === false
             ? String(this.invalid)
             : undefined;
-        const dateValue = Boolean(this.value)
-            ? maska.parse(this.value, internalDateFormat, new Date())
-            : undefined;
-        const displayValue = maska.isValid(dateValue)
-            ? maska.format(dateValue, this.format)
+        const newDate = Boolean(this.value)
+            ? index$1.parse(this.value, internalDateFormat, new Date())
             : undefined;
-        const className = index$1.classnames("date-input", {
+        const dateValue = index$1.isValid(newDate) ? newDate : undefined;
+        const className = index$2.classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (index.h(index.Host, { key: '126d7f739f068da588f7a4dae48894add863129e' }, index.h("div", { key: 'aeffbf5ec53eacf52b72c28bcd56fe17f8474b94', class: className }, index.h("input", { key: 'b4e40c946e3d489345f3c51517025d5cabc13819', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), index.h("swirl-popover-trigger", { key: '6cc4106b6075900a77e0f71eb0d9144c6899cb30', swirlPopover: `popover-${this.id}` }, index.h("button", { key: '18b15c30971d055d43acf49a82a3fbb0e019f17b', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, index.h("swirl-icon-today", { key: '31270c4f23e3b3579a1a7225b992c5c796097a01', size: this.iconSize })))), !this.disabled && (index.h("swirl-popover", { key: 'aeecbbcb2e1078ad016e52c8cf952d3e6ddfcfad', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, index.h("swirl-date-picker", { key: '2b134cb9589c1579b95966ccfe226b3a1da454c5', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (index.h(index.Host, { key: '9f3d225dc75468cdddff1c0446234abfd9ca09e0' }, index.h("div", { key: '977ea02e1a0a599f2b32e5c382210efb913d0463', class: className }, index.h("input", { key: '5da50a63dcc55d88abccb1dd51fef4d28e66a5ee', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), index.h("swirl-popover-trigger", { key: '556f13ed495626e32a6436f0ab172820cd9066c7', swirlPopover: `popover-${this.id}` }, index.h("button", { key: 'e6dddc6e1cabe9c1e632dbe0f15834b0ab17fa2b', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, index.h("swirl-icon-today", { key: 'a2ef423472b1db8429c44ad717847e600fb20cb8', size: this.iconSize })))), !this.disabled && (index.h("swirl-popover", { key: '84a3e021ac7d946171347de0e627233abc25e493', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, index.h("swirl-date-picker", { key: '7edd4e96694530a7f49bc273d8fe36961c4b9e25', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-file-viewer_8.cjs.entry.js

@@ -28444,7 +28444,7 @@ const SwirlFileViewerPdf = class {
         const container = canvas.closest(".file-viewer-pdf__page");
         const textContainer = container?.querySelector(".file-viewer-pdf__text-container");
         this.renderingPageNumbers = [...this.renderingPageNumbers, page.pageNumber];
-        const scale = forPrint ? 2 : this.getScale(page);
+        const scale = forPrint ? this.getPrintScale(page) : this.getScale(page);
         const outputScale = window.devicePixelRatio || 1;
         const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
         const viewport = page.getViewport({ scale });
@@ -28582,6 +28582,13 @@ const SwirlFileViewerPdf = class {
         }
         return this.zoom;
     }
+    getPrintScale(page) {
+        // For performance reasons we have to limit the print scale. The resulting
+        // width of a page should not exceed 2480px in width, and 3508px in height.
+        // This relates to the maximum resolution of an A4 page at 300 DPI, which
+        // should be sufficient for a decent print quality.
+        return Math.min(Math.min(2480 / page.view[2], 3508 / page.view[3]), 2);
+    }
     restoreScrollPosition() {
         this.scrollContainer.scrollTop =
             this.recentScrollPosition.y * this.scrollContainer?.scrollHeight;
@@ -28592,7 +28599,7 @@ const SwirlFileViewerPdf = class {
         const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
         const showSpinner = this.loading;
         const className = index$1.classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
-        return (index.h(index.Host, { key: 'f74696a9d32ee25e30bacc10c6f19a45dd0d0e52', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (index.h("swirl-inline-error", { key: '9210692d6eab65b59c486875fbaafa6a91b20b9d', class: "file-viewer-pdf__error", message: this.errorMessage })), index.h("div", { key: '7c6ab3b041cfd288b9e9788cd1dca6ab8c9795b7', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
+        return (index.h(index.Host, { key: '2ded55b2086732d53df416af38f42482be6cc13c', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (index.h("swirl-inline-error", { key: '24d19e9b92a95d83a72538a4a4c8130539e46bfc', class: "file-viewer-pdf__error", message: this.errorMessage })), index.h("div", { key: '36905878660cdd696960fc3c18894f86cba07252', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
             const viewport = page.getViewport({
                 scale: this.getScale(page),
             });
@@ -28606,7 +28613,7 @@ const SwirlFileViewerPdf = class {
                     width: `${width}px`,
                     height: `${height}px`,
                 }, tabIndex: 0 }, !rendered && (index.h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), index.h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), index.h("div", { class: "file-viewer-pdf__text-container" })));
-        })), showPagination && (index.h("span", { key: 'bc814973f2d41da1d3faa7bf65f89a378addab3d', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, index.h("span", { key: '5e4de9560e0382ee84f6d5211c1a8abc42ea52cc', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (index.h("div", { key: '8e803df15a0c593b37f325bf2a4e0f766d8efc23', class: "file-viewer-pdf__spinner" }, index.h("swirl-spinner", { key: 'a1564d0c986300243e96700b6c2682e6dbb2f871' })))));
+        })), showPagination && (index.h("span", { key: '615531f5e13c34c842e68f492c8c0fcae9021815', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, index.h("span", { key: '945d4421b1ea9a50b01f05ea4a0ed6a95d470264', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (index.h("div", { key: 'fe0ae9b54994d4f8533d733df09e2921ccf4fd83', class: "file-viewer-pdf__spinner" }, index.h("swirl-spinner", { key: 'b923c9b716042e0b8e71552eeac25238d8037c57' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-time-input.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var index = require('./index-Cks2WRVX.js');
-var index$1 = require('./index-DcAhLZUH.js');
-var maska = require('./maska-BX2QG_K8.js');
+var index$2 = require('./index-DcAhLZUH.js');
+var index$1 = require('./index-BOqO2Grl.js');
 var mediaQuery_service = require('./media-query.service-DRPgROAV.js');
 require('./utils-Br2wWntR.js');
 
@@ -19,43 +19,8 @@ const SwirlTimeInput = class {
         this.placeholder = "hh:mm";
         this.iconSize = 24;
         this.mediaQueryUnsubscribe = () => { };
-        this.onChange = (event) => {
-            const value = event.target.value;
-            let newValue;
-            if (value === "") {
-                this.value = undefined;
-                this.valueChange.emit(undefined);
-            }
-            const newDate = maska.parse(value, this.format, new Date());
-            const formatRegExp = new RegExp(`^${this.format.replace(/[Hhms]/g, "\\d")}$`);
-            if (!Boolean(value.match(formatRegExp))) {
-                return;
-            }
-            if (!maska.isValid(newDate)) {
-                newValue = maska.format(new Date(), internalTimeFormat);
-            }
-            else {
-                newValue = maska.format(newDate, internalTimeFormat);
-            }
-            this.value = newValue;
-            this.valueChange.emit(newValue);
-        };
         this.onBlur = (event) => {
             this.inputBlur.emit(event);
-            const input = event.target;
-            const dateValue = maska.parse(input.value, this.format, new Date());
-            if (!maska.isValid(dateValue) && Boolean(this.value)) {
-                const currentDateValue = Boolean(this.value)
-                    ? maska.parse(this.value, internalTimeFormat, new Date())
-                    : undefined;
-                if (!Boolean(currentDateValue) || !maska.isValid(currentDateValue)) {
-                    this.value = "";
-                }
-                input.value = maska.format(currentDateValue, this.format);
-            }
-        };
-        this.onInput = (event) => {
-            this.onChange(event);
         };
         this.onClick = (event) => {
             event.preventDefault();
@@ -88,39 +53,103 @@ const SwirlTimeInput = class {
     watchFormat() {
         this.setupMask();
     }
+    watchValue(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.valueChange.emit(newValue);
+        }
+    }
     updateIconSize(smallIcon) {
         this.iconSize = smallIcon ? 20 : 24;
     }
     handleAutoSelect(event) {
         if (!this.autoSelect) {
+            setTimeout(() => {
+                if (event.target &&
+                    event.target instanceof HTMLInputElement &&
+                    event.target.setSelectionRange) {
+                    event.target.setSelectionRange(0, 0);
+                }
+            });
             return;
         }
-        event.target.select();
+        if (event.target && event.target instanceof HTMLInputElement) {
+            event.target.select();
+        }
     }
     setupMask() {
         this.mask?.destroy();
-        this.mask = maska.maskaExports.create(`#${this.id}`, {
-            mask: this.format.replace(/[Hhms]/g, "#"),
+        // Due to automatic padding with 0s, we need to replace single characters with full length blocks.
+        const pattern = this.format
+            .replace(/(?<!H)H(?!H)/g, "HH")
+            .replace(/(?<!h)h(?!h)/g, "hh")
+            .replace(/(?<!m)m(?!m)/g, "mm")
+            .replace(/(?<!s)s(?!s)/g, "ss");
+        this.mask = index$1.IMask(this.inputEl, {
+            mask: Date,
+            pattern: pattern.replace(/([^A-Za-z0-9])/g, "$1`"), // Add backticks to separators to prevent symbols from shifting back
+            autofix: "pad",
+            lazy: true,
+            overwrite: true,
+            eager: "append",
+            blocks: {
+                HH: {
+                    mask: index$1.IMask.MaskedRange,
+                    from: 0,
+                    to: 23,
+                    maxLength: 2,
+                },
+                hh: {
+                    mask: index$1.IMask.MaskedRange,
+                    from: 1,
+                    to: 12,
+                    maxLength: 2,
+                },
+                mm: {
+                    mask: index$1.IMask.MaskedRange,
+                    from: 0,
+                    to: 59,
+                    maxLength: 2,
+                },
+                ss: {
+                    mask: index$1.IMask.MaskedRange,
+                    from: 0,
+                    to: 59,
+                    maxLength: 2,
+                },
+            },
+            format: (date) => {
+                if (!index$1.isValid(date)) {
+                    return "";
+                }
+                this.value = index$1.format(date, internalTimeFormat);
+                return index$1.format(date, pattern);
+            },
+            parse: (str) => {
+                return index$1.parse(str, pattern, new Date());
+            },
         });
+        // Set the initial value if it exists
+        if (this.value) {
+            const dateValue = index$1.parse(this.value, internalTimeFormat, new Date());
+            if (index$1.isValid(dateValue)) {
+                const formattedValue = index$1.format(dateValue, pattern);
+                this.mask.value = formattedValue;
+            }
+        }
     }
     render() {
         const ariaInvalid = this.invalid === true || this.invalid === false
             ? String(this.invalid)
             : undefined;
-        const dateValue = Boolean(this.value)
-            ? maska.parse(this.value, internalTimeFormat, new Date())
-            : undefined;
-        const displayValue = maska.isValid(dateValue)
-            ? maska.format(dateValue, this.format)
-            : undefined;
-        const className = index$1.classnames("time-input", {
+        const className = index$2.classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (index.h(index.Host, { key: '2d01caa594161a39badac0b0c1914fe0111f93b6' }, index.h("div", { key: '12e350dcf0b59510a885f2e38662ae52ca183d53', class: className }, index.h("input", { key: 'ddcb1410c0abe8f43854b41e773fc4ad0ee69c54', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), index.h("span", { key: '38d168f83acc421e7c987c1fab1f71b44de57e63', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: 'fe08cb78cf03822f99d98f4d9f33e0c103286d80', size: this.iconSize })))));
+        return (index.h(index.Host, { key: '8947322735a4ce58217aff86dcc3b5132905b82a' }, index.h("div", { key: '1368952e9638f3337d3b67b3ce6a22ce9c736dfd', class: className }, index.h("input", { key: '23299e8dce3200618853f2bc319fdfc741f215e1', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), index.h("span", { key: 'd793539f7f1b7027a97d02649f1f89a5251ceb33', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: '3fe2d103178eb908b82fa0fed4918253de760618', size: this.iconSize })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "format": ["watchFormat"]
+        "format": ["watchFormat"],
+        "value": ["watchValue"]
     }; }
 };
 SwirlTimeInput.style = swirlTimeInputCss;

package/dist/collection/components/swirl-date-input/swirl-date-input.js

@@ -1,7 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { format, isValid, parse } from "date-fns";
-import { create as createMask } from "maska/dist/es6/maska";
+import IMask from "imask";
 import { DesktopMediaQuery } from "../../services/media-query.service";
 import { isMobileViewport } from "../../utils";
 const internalDateFormat = "yyyy-MM-dd";
@@ -18,29 +18,6 @@ export class SwirlDateInput {
         this.iconSize = 24;
         this.readonly = false;
         this.mediaQueryUnsubscribe = () => { };
-        this.onChange = (event) => {
-            const value = event.target.value;
-            if (value === "") {
-                this.value = undefined;
-            }
-            const newDate = parse(value, this.format, new Date());
-            // First, escape any backslashes in the format string
-            const escapedFormat = this.format.replace(/\\/g, "\\\\");
-            // Then construct the RegExp using the escaped format string
-            const formatRegExp = new RegExp(`^${escapedFormat.replace(/[ydM]/g, "\\d")}$`);
-            if (!Boolean(value.match(formatRegExp))) {
-                return;
-            }
-            if (!isValid(newDate)) {
-                this.invalidInput.emit(value);
-                return;
-            }
-            const newValue = format(newDate, internalDateFormat);
-            this.value = newValue;
-        };
-        this.onInput = (event) => {
-            this.onChange(event);
-        };
         this.onClick = (event) => {
             event.preventDefault();
             if (this.preferredInputMode === "pick") {
@@ -66,6 +43,8 @@ export class SwirlDateInput {
             const newDateValue = event.detail;
             const newValue = format(newDateValue, internalDateFormat);
             this.value = newValue;
+            this.inputEl.value = format(newDateValue, this.pattern);
+            this.mask.updateValue();
             this.setReadOnly(true);
             this.pickerPopover.close();
         };
@@ -94,7 +73,7 @@ export class SwirlDateInput {
     }
     watchValue(newValue, oldValue) {
         if (newValue !== oldValue) {
-            this.valueChange.emit(newValue);
+            this.updateValue();
         }
     }
     focus() {
@@ -107,9 +86,18 @@ export class SwirlDateInput {
     }
     handleAutoSelect(event) {
         if (!this.autoSelect) {
+            setTimeout(() => {
+                if (event.target &&
+                    event.target instanceof HTMLInputElement &&
+                    event.target.setSelectionRange) {
+                    event.target.setSelectionRange(0, 0);
+                }
+            });
             return;
         }
-        event.target.select();
+        if (event.target && event.target instanceof HTMLInputElement) {
+            event.target.select();
+        }
     }
     setReadOnly(readOnly) {
         if (this.preferredInputMode === "pick" && isMobileViewport()) {
@@ -121,24 +109,91 @@ export class SwirlDateInput {
     }
     setupMask() {
         this.mask?.destroy();
-        this.mask = createMask(`#${this.id}`, {
-            mask: this.format.replace(/[ydM]/g, "#"),
+        // Due to automatic padding with 0s, we need to replace single characters with full length blocks.
+        this.pattern = this.format
+            .replace(/(?<!d)d(?!d)/g, "dd")
+            .replace(/(?<!M)M(?!M)/g, "MM")
+            .replace(/(?<!y)y(?!y)/g, "yyyy")
+            .replace(/(?<!y)yyy(?!y)/g, "yyyy");
+        if (!this.pattern) {
+            this.pattern = internalDateFormat;
+        }
+        this.mask = IMask(this.inputEl, {
+            mask: Date,
+            pattern: this.pattern.replace(/([^A-Za-z0-9])/g, "$1`"), // Add backticks to separators to prevent symbols from shifting back
+            autofix: "pad",
+            lazy: true,
+            overwrite: true,
+            eager: "append",
+            blocks: {
+                dd: {
+                    mask: IMask.MaskedRange,
+                    from: 1,
+                    to: 31,
+                    maxLength: 2,
+                },
+                MM: {
+                    mask: IMask.MaskedRange,
+                    from: 1,
+                    to: 12,
+                    maxLength: 2,
+                },
+                yy: {
+                    mask: IMask.MaskedRange,
+                    from: 0,
+                    to: 99,
+                    maxLength: 2,
+                },
+                yyyy: {
+                    mask: IMask.MaskedRange,
+                    from: 1000,
+                    to: 9999,
+                    maxLength: 4,
+                },
+            },
+            // define date -> str conversion
+            format: (date) => {
+                const newDate = format(date, this.pattern);
+                if (!isValid(date)) {
+                    this.invalidInput.emit(date.toString());
+                    return "";
+                }
+                this.value = format(date, internalDateFormat);
+                return newDate;
+            },
+            // define str -> date conversion
+            parse: (str) => {
+                const newString = parse(str, this.pattern, new Date());
+                return newString;
+            },
         });
+        this.updateValue();
+    }
+    updateValue() {
+        if (this.value) {
+            const dateValue = parse(this.value, internalDateFormat, new Date());
+            if (isValid(dateValue)) {
+                const formattedValue = format(dateValue, this.pattern);
+                this.mask.value = formattedValue;
+                this.valueChange.emit(this.value);
+            }
+            else {
+                this.invalidInput.emit(this.value);
+            }
+        }
     }
     render() {
         const ariaInvalid = this.invalid === true || this.invalid === false
             ? String(this.invalid)
             : undefined;
-        const dateValue = Boolean(this.value)
+        const newDate = Boolean(this.value)
             ? parse(this.value, internalDateFormat, new Date())
             : undefined;
-        const displayValue = isValid(dateValue)
-            ? format(dateValue, this.format)
-            : undefined;
+        const dateValue = isValid(newDate) ? newDate : undefined;
         const className = classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: '126d7f739f068da588f7a4dae48894add863129e' }, h("div", { key: 'aeffbf5ec53eacf52b72c28bcd56fe17f8474b94', class: className }, h("input", { key: 'b4e40c946e3d489345f3c51517025d5cabc13819', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: '6cc4106b6075900a77e0f71eb0d9144c6899cb30', swirlPopover: `popover-${this.id}` }, h("button", { key: '18b15c30971d055d43acf49a82a3fbb0e019f17b', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '31270c4f23e3b3579a1a7225b992c5c796097a01', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: 'aeecbbcb2e1078ad016e52c8cf952d3e6ddfcfad', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '2b134cb9589c1579b95966ccfe226b3a1da454c5', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: '9f3d225dc75468cdddff1c0446234abfd9ca09e0' }, h("div", { key: '977ea02e1a0a599f2b32e5c382210efb913d0463', class: className }, h("input", { key: '5da50a63dcc55d88abccb1dd51fef4d28e66a5ee', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), h("swirl-popover-trigger", { key: '556f13ed495626e32a6436f0ab172820cd9066c7', swirlPopover: `popover-${this.id}` }, h("button", { key: 'e6dddc6e1cabe9c1e632dbe0f15834b0ab17fa2b', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'a2ef423472b1db8429c44ad717847e600fb20cb8', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '84a3e021ac7d946171347de0e627233abc25e493', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '7edd4e96694530a7f49bc273d8fe36961c4b9e25', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     static get is() { return "swirl-date-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-date-input/swirl-date-input.stories.js

@@ -6,7 +6,7 @@ export default {
             description: "See https://date-fns.org/v2.29.3/docs/format.",
             table: {
                 type: {
-                    detail: '"d", "M", "y", and separators (e.g. ".", "-", "/", " ")',
+                    detail: '"dd", "MM", "yy", "yyyy" and separators (e.g. ".", "-", "/", " ")',
                     summary: "Allowed patterns",
                 },
             },

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.js

@@ -170,7 +170,7 @@ export class SwirlFileViewerPdf {
         const container = canvas.closest(".file-viewer-pdf__page");
         const textContainer = container?.querySelector(".file-viewer-pdf__text-container");
         this.renderingPageNumbers = [...this.renderingPageNumbers, page.pageNumber];
-        const scale = forPrint ? 2 : this.getScale(page);
+        const scale = forPrint ? this.getPrintScale(page) : this.getScale(page);
         const outputScale = window.devicePixelRatio || 1;
         const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
         const viewport = page.getViewport({ scale });
@@ -308,6 +308,13 @@ export class SwirlFileViewerPdf {
         }
         return this.zoom;
     }
+    getPrintScale(page) {
+        // For performance reasons we have to limit the print scale. The resulting
+        // width of a page should not exceed 2480px in width, and 3508px in height.
+        // This relates to the maximum resolution of an A4 page at 300 DPI, which
+        // should be sufficient for a decent print quality.
+        return Math.min(Math.min(2480 / page.view[2], 3508 / page.view[3]), 2);
+    }
     restoreScrollPosition() {
         this.scrollContainer.scrollTop =
             this.recentScrollPosition.y * this.scrollContainer?.scrollHeight;
@@ -318,7 +325,7 @@ export class SwirlFileViewerPdf {
         const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
         const showSpinner = this.loading;
         const className = classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
-        return (h(Host, { key: 'f74696a9d32ee25e30bacc10c6f19a45dd0d0e52', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '9210692d6eab65b59c486875fbaafa6a91b20b9d', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '7c6ab3b041cfd288b9e9788cd1dca6ab8c9795b7', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
+        return (h(Host, { key: '2ded55b2086732d53df416af38f42482be6cc13c', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '24d19e9b92a95d83a72538a4a4c8130539e46bfc', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '36905878660cdd696960fc3c18894f86cba07252', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
             const viewport = page.getViewport({
                 scale: this.getScale(page),
             });
@@ -332,7 +339,7 @@ export class SwirlFileViewerPdf {
                     width: `${width}px`,
                     height: `${height}px`,
                 }, tabIndex: 0 }, !rendered && (h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), h("div", { class: "file-viewer-pdf__text-container" })));
-        })), showPagination && (h("span", { key: 'bc814973f2d41da1d3faa7bf65f89a378addab3d', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: '5e4de9560e0382ee84f6d5211c1a8abc42ea52cc', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: '8e803df15a0c593b37f325bf2a4e0f766d8efc23', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: 'a1564d0c986300243e96700b6c2682e6dbb2f871' })))));
+        })), showPagination && (h("span", { key: '615531f5e13c34c842e68f492c8c0fcae9021815', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: '945d4421b1ea9a50b01f05ea4a0ed6a95d470264', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: 'fe0ae9b54994d4f8533d733df09e2921ccf4fd83', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: 'b923c9b716042e0b8e71552eeac25238d8037c57' })))));
     }
     static get is() { return "swirl-file-viewer-pdf"; }
     static get encapsulation() { return "shadow"; }