@watermarkinsights/ripple 4.2.0-0 → 4.2.0

package/dist/cjs/wm-file.cjs.entry.js

@@ -2,188 +2,188 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
-const functions = require('./functions-4208c444.js');
+const index = require('./index-fae02cd7.js');
+const functions = require('./functions-91da05e9.js');
 
 const wmFileCss = ":host{--wmcolor-file-background-error:var(--wmcolor-background-error);--wmcolor-file-background:var(--wmcolor-background-readonly);--wmcolor-file-border-error:var(--wmcolor-border-error);--wmcolor-file-border:var(--wmcolor-border);--wmcolor-file-checkmark-icon:var(--wmcolor-positive);--wmcolor-file-progress:var(--wmcolor-progress);display:block;width:100%}.file-wrapper{font-size:0.875rem;position:relative;list-style:none}.file-wrapper .file{min-width:300px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;height:3.5rem;padding:0 1.25rem;position:relative;background:var(--wmcolor-file-background);border:1px solid var(--wmcolor-file-border);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.file-wrapper .file .filename{display:inline-block;white-space:nowrap}.file-wrapper .file .left-group{overflow:hidden}.file-wrapper .file .right-group{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:5rem;gap:1rem}.file-wrapper .file .right-group.condensed{padding-left:2.5rem}.file-wrapper .file .right-group .file-controls{display:-ms-flexbox;display:flex;gap:1rem}.file-wrapper .file .right-group .file-info{white-space:nowrap}.file-wrapper .file.--error{border:1px solid var(--wmcolor-file-border-error);background-color:var(--wmcolor-file-background-error);height:3.75rem}.file-wrapper.checked .file:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f133\";position:absolute;right:-44px;color:var(--wmcolor-file-checkmark-icon);font-size:28px;line-height:1}.name-wrapper{overflow:hidden}.progress{position:absolute;left:0;top:0;right:0;height:8px}.error-message{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-top:0.25rem}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
 
 const File = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.wmFilePreview = index.createEvent(this, "wmFilePreview", 7);
-        this.wmFileDownload = index.createEvent(this, "wmFileDownload", 7);
-        this.wmFileDelete = index.createEvent(this, "wmFileDelete", 7);
-        this.wmFileErrorCleared = index.createEvent(this, "wmFileErrorCleared", 7);
-        this.fullFilename = `${this.name}.${this.type}`;
-        this.debouncedResize = functions.debounce(() => {
-            this.isCondensed = this.el.clientWidth < 500;
-            // rerender to show filename truncation changes
-            index.forceUpdate(this.el);
-        }, 50);
-        this.name = undefined;
-        this.type = undefined;
-        this.fileActions = "download delete";
-        this.lastUpdated = undefined;
-        this.progress = undefined;
-        this.size = undefined;
-        this.errorMessage = undefined;
-        this.showInfo = undefined;
-        this.isCondensed = false;
-    }
-    get isUploading() {
-        return this.progress !== undefined && this.progress < 100;
-    }
-    get previewButtonTooltip() {
-        return functions.intl.formatMessage({
-            id: "file.previewButtonTooltip",
-            defaultMessage: "Preview",
-            description: "Tooltip of a button that triggers a file to be previewed",
-        });
-    }
-    get downloadButtonTooltip() {
-        return functions.intl.formatMessage({
-            id: "file.downloadButtonTooltip",
-            defaultMessage: "Download",
-            description: "Tooltip of a button that triggers a file to be downloaded",
-        });
-    }
-    get deleteButtonTooltip() {
-        return functions.intl.formatMessage({
-            id: "file.deleteButtonTooltip",
-            defaultMessage: "Delete",
-            description: "Tooltip of a button that triggers a file to be deleted",
-        });
-    }
-    get previewActionMessage() {
-        return functions.intl.formatMessage({
-            id: "file.previewAction",
-            defaultMessage: "Preview File",
-            description: "Label of a button that triggers a file to be previewed",
-        });
-    }
-    get downloadActionMessage() {
-        return functions.intl.formatMessage({
-            id: "file.downloadAction",
-            defaultMessage: "Download File",
-            description: "Label of a button that triggers a file to be downloaded",
-        });
-    }
-    get deleteActionMessage() {
-        return functions.intl.formatMessage({
-            id: "file.deleteAction",
-            defaultMessage: "Delete File",
-            description: "Label of a button that triggers a file to be delete",
-        });
-    }
-    get actionMenuLabel() {
-        return functions.intl.formatMessage({
-            id: "file.actionMenuLabel",
-            defaultMessage: "Actions",
-            description: "Label of a button that opens a menu of file actions",
-        });
-    }
-    get clearButtonText() {
-        return functions.intl.formatMessage({
-            id: "file.clearErrorText",
-            defaultMessage: "Clear",
-            description: "Text for a button used to clear an error",
-        });
-    }
-    generateClearButtonLabel(filename) {
-        return functions.intl.formatMessage({
-            id: "file.clearErrorLabel",
-            defaultMessage: "Clear {fileName} error",
-            description: "Label for a button used to clear an error, including filename",
-        }, { fileName: filename });
-    }
-    componentWillLoad() {
-        if (!this.el.id) {
-            console.error("wm-file: a file id is required");
-        }
-        if (!this.name) {
-            console.error('wm-file: "name" is a required property');
-        }
-        if (!this.type) {
-            console.error('wm-file: "type" is a required property');
-        }
-        // inherit showInfo property from parent, or default to time
-        if (this.el.parentElement && this.el.parentElement.showInfo) {
-            this.showInfo = this.el.parentElement.showInfo;
-        }
-        else if (!this.showInfo) {
-            this.showInfo = "time";
-        }
-        // rerender on resize in case layout needs to change
-        const resizeObserver = new ResizeObserver(() => this.debouncedResize());
-        resizeObserver.observe(this.el);
-    }
-    componentDidRender() {
-        const fileNameEl = this.el.shadowRoot.querySelector(".filename");
-        const leftBoundary = this.el.shadowRoot.querySelector(".left-group").getBoundingClientRect().left;
-        const rightGroup = this.el.shadowRoot.querySelector(".right-group");
-        const rightBoundary = rightGroup
-            ? rightGroup.getBoundingClientRect().left
-            : this.el.shadowRoot.querySelector(".file-wrapper").getBoundingClientRect().right - 20;
-        fileNameEl.textContent = functions.truncateText(fileNameEl, this.fullFilename, rightBoundary - leftBoundary, 7);
-    }
-    previewFile() {
-        this.wmFilePreview.emit();
-    }
-    downloadFile() {
-        this.wmFileDownload.emit();
-    }
-    deleteFile() {
-        this.wmFileDelete.emit();
-    }
-    handleFilenameMouseEnter(ev) {
-        // only show tooltip if file name is being truncated (has ellipses)
-        if (ev.target.textContent !== this.fullFilename) {
-            functions.showTooltip("bottom", ev.target, this.fullFilename);
-        }
-    }
-    renderFileName() {
-        return (index.h("div", { class: "left-group" }, index.h("div", { class: "name-wrapper" }, index.h("span", { class: "sr-only" }, this.fullFilename), index.h("span", { "aria-hidden": "true", class: "filename", onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }), this.isUploading && index.h("span", { class: "sr-only" }, "uploading"))));
-    }
-    renderFileInfo() {
-        let displayedInfo = "";
-        if (this.showInfo === "time" && this.lastUpdated) {
-            displayedInfo = this.lastUpdated;
-        }
-        else if (this.showInfo === "size" && this.size) {
-            displayedInfo = this.size;
-        }
-        return index.h("div", { class: "file-info" }, displayedInfo);
-    }
-    renderActionMenu() {
-        const previewItem = (index.h("wm-menuitem", { icon: "f208", onClick: () => this.previewFile() }, this.previewActionMessage));
-        const downloadItem = (index.h("wm-menuitem", { icon: "f1da", onClick: () => this.downloadFile() }, this.downloadActionMessage));
-        const deleteItem = (index.h("wm-menuitem", { icon: "f1c0", onClick: () => this.deleteFile() }, this.deleteActionMessage));
-        return (index.h("wm-action-menu", { "action-menu-type": "icon", tooltip: this.actionMenuLabel, "tooltip-position": "bottom", "label-for-identical-buttons": `${this.name} ${this.actionMenuLabel}` }, this.fileActions.includes("preview") && previewItem, this.fileActions.includes("download") && downloadItem, this.fileActions.includes("delete") && deleteItem));
-    }
-    renderFileActionButtons() {
-        const previewButton = (index.h("wm-button", { class: "preview-button", "button-type": "icononly", tooltip: this.previewButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `preview ${this.name}`, icon: "f208", onClick: () => this.previewFile() }));
-        const downloadButton = (index.h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: this.downloadButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `download ${this.name}`, icon: "f1da", onClick: () => this.downloadFile() }));
-        const deleteButton = (index.h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: this.deleteButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `delete ${this.name}`, icon: "f1c0", onClick: () => this.deleteFile() }));
-        return (index.h("div", { class: "file-controls" }, this.fileActions.includes("preview") && previewButton, this.fileActions.includes("download") && downloadButton, this.fileActions.includes("delete") && deleteButton));
-    }
-    renderFileInProgress() {
-        return (index.h("div", { class: "file-wrapper" }, index.h("div", { class: "file --progress" }, index.h("div", { class: "progress", style: {
-                background: `linear-gradient(to right, var(--wmcolor-file-progress) ${this.progress}%, transparent ${this.progress}%)`,
-            } }), this.renderFileName())));
-    }
-    renderFileControls() {
-        const hasSingleFileAction = this.fileActions.split(" ").length === 1;
-        const showActionMenu = this.isCondensed && !hasSingleFileAction;
-        return showActionMenu ? this.renderActionMenu() : this.renderFileActionButtons();
-    }
-    renderFile() {
-        return (index.h("div", { class: `file-wrapper ${this.progress === 100 ? "checked" : ""}` }, index.h("div", { class: `file ${this.errorMessage ? "--error" : ""}` }, this.renderFileName(), !this.errorMessage && (index.h("div", { class: `right-group ${this.isCondensed ? "condensed" : ""}` }, this.showInfo !== "none" && this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (index.h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.errorMessage && index.h("div", { class: "error-message" }, this.errorMessage)));
-    }
-    render() {
-        return index.h(index.Host, { role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
-    }
-    static get delegatesFocus() { return true; }
-    get el() { return index.getElement(this); }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wmFilePreview = index.createEvent(this, "wmFilePreview", 7);
+    this.wmFileDownload = index.createEvent(this, "wmFileDownload", 7);
+    this.wmFileDelete = index.createEvent(this, "wmFileDelete", 7);
+    this.wmFileErrorCleared = index.createEvent(this, "wmFileErrorCleared", 7);
+    this.fullFilename = `${this.name}.${this.type}`;
+    this.debouncedResize = functions.debounce(() => {
+      this.isCondensed = this.el.clientWidth < 500;
+      // rerender to show filename truncation changes
+      index.forceUpdate(this.el);
+    }, 50);
+    this.name = undefined;
+    this.type = undefined;
+    this.fileActions = "download delete";
+    this.lastUpdated = undefined;
+    this.progress = undefined;
+    this.size = undefined;
+    this.errorMessage = undefined;
+    this.showInfo = undefined;
+    this.isCondensed = false;
+  }
+  get isUploading() {
+    return this.progress !== undefined && this.progress < 100;
+  }
+  get previewButtonTooltip() {
+    return functions.intl.formatMessage({
+      id: "file.previewButtonTooltip",
+      defaultMessage: "Preview",
+      description: "Tooltip of a button that triggers a file to be previewed",
+    });
+  }
+  get downloadButtonTooltip() {
+    return functions.intl.formatMessage({
+      id: "file.downloadButtonTooltip",
+      defaultMessage: "Download",
+      description: "Tooltip of a button that triggers a file to be downloaded",
+    });
+  }
+  get deleteButtonTooltip() {
+    return functions.intl.formatMessage({
+      id: "file.deleteButtonTooltip",
+      defaultMessage: "Delete",
+      description: "Tooltip of a button that triggers a file to be deleted",
+    });
+  }
+  get previewActionMessage() {
+    return functions.intl.formatMessage({
+      id: "file.previewAction",
+      defaultMessage: "Preview File",
+      description: "Label of a button that triggers a file to be previewed",
+    });
+  }
+  get downloadActionMessage() {
+    return functions.intl.formatMessage({
+      id: "file.downloadAction",
+      defaultMessage: "Download File",
+      description: "Label of a button that triggers a file to be downloaded",
+    });
+  }
+  get deleteActionMessage() {
+    return functions.intl.formatMessage({
+      id: "file.deleteAction",
+      defaultMessage: "Delete File",
+      description: "Label of a button that triggers a file to be delete",
+    });
+  }
+  get actionMenuLabel() {
+    return functions.intl.formatMessage({
+      id: "file.actionMenuLabel",
+      defaultMessage: "Actions",
+      description: "Label of a button that opens a menu of file actions",
+    });
+  }
+  get clearButtonText() {
+    return functions.intl.formatMessage({
+      id: "file.clearErrorText",
+      defaultMessage: "Clear",
+      description: "Text for a button used to clear an error",
+    });
+  }
+  generateClearButtonLabel(filename) {
+    return functions.intl.formatMessage({
+      id: "file.clearErrorLabel",
+      defaultMessage: "Clear {fileName} error",
+      description: "Label for a button used to clear an error, including filename",
+    }, { fileName: filename });
+  }
+  componentWillLoad() {
+    if (!this.el.id) {
+      console.error("wm-file: a file id is required");
+    }
+    if (!this.name) {
+      console.error('wm-file: "name" is a required property');
+    }
+    if (!this.type) {
+      console.error('wm-file: "type" is a required property');
+    }
+    // inherit showInfo property from parent, or default to time
+    if (this.el.parentElement && this.el.parentElement.showInfo) {
+      this.showInfo = this.el.parentElement.showInfo;
+    }
+    else if (!this.showInfo) {
+      this.showInfo = "time";
+    }
+    // rerender on resize in case layout needs to change
+    const resizeObserver = new ResizeObserver(() => this.debouncedResize());
+    resizeObserver.observe(this.el);
+  }
+  componentDidRender() {
+    const fileNameEl = this.el.shadowRoot.querySelector(".filename");
+    const leftBoundary = this.el.shadowRoot.querySelector(".left-group").getBoundingClientRect().left;
+    const rightGroup = this.el.shadowRoot.querySelector(".right-group");
+    const rightBoundary = rightGroup
+      ? rightGroup.getBoundingClientRect().left
+      : this.el.shadowRoot.querySelector(".file-wrapper").getBoundingClientRect().right - 20;
+    fileNameEl.textContent = functions.truncateText(fileNameEl, this.fullFilename, rightBoundary - leftBoundary, 7);
+  }
+  previewFile() {
+    this.wmFilePreview.emit();
+  }
+  downloadFile() {
+    this.wmFileDownload.emit();
+  }
+  deleteFile() {
+    this.wmFileDelete.emit();
+  }
+  handleFilenameMouseEnter(ev) {
+    // only show tooltip if file name is being truncated (has ellipses)
+    if (ev.target.textContent !== this.fullFilename) {
+      functions.showTooltip("bottom", ev.target, this.fullFilename);
+    }
+  }
+  renderFileName() {
+    return (index.h("div", { class: "left-group" }, index.h("div", { class: "name-wrapper" }, index.h("span", { class: "sr-only" }, this.fullFilename), index.h("span", { "aria-hidden": "true", class: "filename", onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }), this.isUploading && index.h("span", { class: "sr-only" }, "uploading"))));
+  }
+  renderFileInfo() {
+    let displayedInfo = "";
+    if (this.showInfo === "time" && this.lastUpdated) {
+      displayedInfo = this.lastUpdated;
+    }
+    else if (this.showInfo === "size" && this.size) {
+      displayedInfo = this.size;
+    }
+    return index.h("div", { class: "file-info" }, displayedInfo);
+  }
+  renderActionMenu() {
+    const previewItem = (index.h("wm-menuitem", { icon: "f208", onClick: () => this.previewFile() }, this.previewActionMessage));
+    const downloadItem = (index.h("wm-menuitem", { icon: "f1da", onClick: () => this.downloadFile() }, this.downloadActionMessage));
+    const deleteItem = (index.h("wm-menuitem", { icon: "f1c0", onClick: () => this.deleteFile() }, this.deleteActionMessage));
+    return (index.h("wm-action-menu", { "action-menu-type": "icon", tooltip: this.actionMenuLabel, "tooltip-position": "bottom", "label-for-identical-buttons": `${this.name} ${this.actionMenuLabel}` }, this.fileActions.includes("preview") && previewItem, this.fileActions.includes("download") && downloadItem, this.fileActions.includes("delete") && deleteItem));
+  }
+  renderFileActionButtons() {
+    const previewButton = (index.h("wm-button", { class: "preview-button", "button-type": "icononly", tooltip: this.previewButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `preview ${this.name}`, icon: "f208", onClick: () => this.previewFile() }));
+    const downloadButton = (index.h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: this.downloadButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `download ${this.name}`, icon: "f1da", onClick: () => this.downloadFile() }));
+    const deleteButton = (index.h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: this.deleteButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `delete ${this.name}`, icon: "f1c0", onClick: () => this.deleteFile() }));
+    return (index.h("div", { class: "file-controls" }, this.fileActions.includes("preview") && previewButton, this.fileActions.includes("download") && downloadButton, this.fileActions.includes("delete") && deleteButton));
+  }
+  renderFileInProgress() {
+    return (index.h("div", { class: "file-wrapper" }, index.h("div", { class: "file --progress" }, index.h("div", { class: "progress", style: {
+        background: `linear-gradient(to right, var(--wmcolor-file-progress) ${this.progress}%, transparent ${this.progress}%)`,
+      } }), this.renderFileName())));
+  }
+  renderFileControls() {
+    const hasSingleFileAction = this.fileActions.split(" ").length === 1;
+    const showActionMenu = this.isCondensed && !hasSingleFileAction;
+    return showActionMenu ? this.renderActionMenu() : this.renderFileActionButtons();
+  }
+  renderFile() {
+    return (index.h("div", { class: `file-wrapper ${this.progress === 100 ? "checked" : ""}` }, index.h("div", { class: `file ${this.errorMessage ? "--error" : ""}` }, this.renderFileName(), !this.errorMessage && (index.h("div", { class: `right-group ${this.isCondensed ? "condensed" : ""}` }, this.showInfo !== "none" && this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (index.h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.errorMessage && index.h("div", { class: "error-message" }, this.errorMessage)));
+  }
+  render() {
+    return index.h(index.Host, { role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return index.getElement(this); }
 };
 File.style = wmFileCss;
 

package/dist/cjs/wm-input.cjs.entry.js

@@ -2,119 +2,119 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
-const functions = require('./functions-4208c444.js');
-const intl = require('./intl-3fafc6d1.js');
+const index = require('./index-fae02cd7.js');
+const functions = require('./functions-91da05e9.js');
+const intl = require('./intl-fa3bb4ae.js');
 
 const wmInputCss = ":host{font-family:inherit;width:100%}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required{color:var(--wmcolor-text-required)}:host .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label{color:var(--wmcolor-text-error)}:host .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper{width:100%}:host .wrapper .text-after-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px}:host .wrapper .text-after{-ms-flex:0 1 fit-content;flex:0 1 fit-content}:host .wrapper .inputfield-wrapper{height:2.5rem;min-width:6.25rem;border:1px solid var(--wmcolor-input-border);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:-ms-flexbox;display:flex}:host .wrapper .inputfield-wrapper.disabled{background-color:var(--wmcolor-input-background-disabled);color:var(--wmcolor-input-text-disabled)}:host .wrapper .inputfield-wrapper.disabled .symbol{background:none}:host .wrapper .symbol{display:-ms-flexbox;display:flex;background-color:var(--wmcolor-input-unit-background);-ms-flex:0 0 44px;flex:0 0 44px;padding-inline:8px;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .wrapper .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:var(--wmcolor-input-charcount-background);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .wrapper input{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:none;font-family:inherit;font-size:0.875rem;height:100%;-ms-flex:1;flex:1;padding:0.75rem 1rem;width:100%}:host .wrapper input:focus{outline:none}:host .wrapper input[type=number]{padding-right:0}:host .wrapper .info{font-style:italic;line-height:100%;margin:4px 0}:host .wrapper.invalid .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}:host .wrapper.invalid .error-message{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-top:0.25rem;line-height:100%}:host .wrapper:focus .inputfield-wrapper,:host .wrapper.focus .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);outline:none;border-color:var(--wmcolor-input-border-focus)}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
 
 const Input = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.wmInputValueChanged = index.createEvent(this, "wmInputValueChanged", 7);
-        this.previousValue = "";
-        this.label = undefined;
-        this.labelPosition = "top";
-        this.value = "";
-        this.disabled = false;
-        this.info = undefined;
-        this.inputWidth = "";
-        this.placeholder = "";
-        this.requiredField = false;
-        this.errorMessage = undefined;
-        this.characterLimit = undefined;
-        this.symbolBefore = undefined;
-        this.symbolAfter = undefined;
-        this.textAfter = undefined;
-        this.type = "text";
-        this.step = 1;
-        this.min = undefined;
-        this.max = undefined;
-        this.isSubmit = false;
-        this.announcement = "";
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wmInputValueChanged = index.createEvent(this, "wmInputValueChanged", 7);
+    this.previousValue = "";
+    this.label = undefined;
+    this.labelPosition = "top";
+    this.value = "";
+    this.disabled = false;
+    this.info = undefined;
+    this.inputWidth = "";
+    this.placeholder = "";
+    this.requiredField = false;
+    this.errorMessage = undefined;
+    this.characterLimit = undefined;
+    this.symbolBefore = undefined;
+    this.symbolAfter = undefined;
+    this.textAfter = undefined;
+    this.type = "text";
+    this.step = 1;
+    this.min = undefined;
+    this.max = undefined;
+    this.isSubmit = false;
+    this.announcement = "";
+  }
+  getInputWidth() {
+    return this.inputWidth ? { width: this.inputWidth } : { flex: "1" };
+  }
+  get charCount() {
+    return this.value.length;
+  }
+  get isDisabled() {
+    // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+    return functions.toBool(this.disabled);
+  }
+  componentWillLoad() {
+    if (!this.label) {
+      console.error("wm-input requires the label property");
     }
-    getInputWidth() {
-        return this.inputWidth ? { width: this.inputWidth } : { flex: "1" };
+    functions.handleDisabledAttribute(this.el, this.isDisabled);
+  }
+  componentDidLoad() {
+    this.previousValue = this.inputEl.value;
+  }
+  handleDisabledChange() {
+    functions.handleDisabledAttribute(this.el, this.isDisabled);
+  }
+  handleInput(ev) {
+    // keep component's value in sync with input's value
+    this.value = ev.target.value;
+    if (this.characterLimit && this.charCount >= this.characterLimit - 5) {
+      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
     }
-    get charCount() {
-        return this.value.length;
+  }
+  handleKeyDown(ev) {
+    // in most browsers, onInput doesn't fire if the input's maxLength is reached
+    // to handle the case where a user continues to type after reaching the character limit, the keyDown event must be used
+    const isModifierKey = ev.ctrlKey || ev.metaKey || ev.altKey;
+    const isCharacter = /^.$/.test(ev.key) && !isModifierKey;
+    const hasReachedCharacterLimit = isCharacter &&
+      this.characterLimit &&
+      this.inputEl.value.length >= this.characterLimit;
+    if (hasReachedCharacterLimit) {
+      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
     }
-    get isDisabled() {
-        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
-        return functions.toBool(this.disabled);
+    if (ev.key === "Enter") {
+      this.isSubmit && functions.triggerFormSubmit(this.el.closest("form"));
     }
-    componentWillLoad() {
-        if (!this.label) {
-            console.error("wm-input requires the label property");
-        }
-        functions.handleDisabledAttribute(this.el, this.isDisabled);
+  }
+  handleBlur() {
+    if (this.value !== this.previousValue) {
+      this.wmInputValueChanged.emit({ value: this.value });
     }
-    componentDidLoad() {
-        this.previousValue = this.inputEl.value;
+    this.previousValue = this.value;
+    this.inputWrapperEl.classList.remove("focus");
+  }
+  handleFocus() {
+    this.inputWrapperEl.classList.add("focus");
+  }
+  announce(message) {
+    if (this.liveRegionEl.textContent === message) {
+      message += "\u00A0";
     }
-    handleDisabledChange() {
-        functions.handleDisabledAttribute(this.el, this.isDisabled);
+    this.announcement = message;
+  }
+  generateCharacterLimitWarning(charCount, charLimit) {
+    let message = intl.globalMessages.getCharactersEntered(charCount, charLimit);
+    if (charCount >= charLimit) {
+      message += ` ${intl.globalMessages.characterLimitReached}`;
     }
-    handleInput(ev) {
-        // keep component's value in sync with input's value
-        this.value = ev.target.value;
-        if (this.characterLimit && this.charCount >= this.characterLimit - 5) {
-            this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
-        }
-    }
-    handleKeyDown(ev) {
-        // in most browsers, onInput doesn't fire if the input's maxLength is reached
-        // to handle the case where a user continues to type after reaching the character limit, the keyDown event must be used
-        const isModifierKey = ev.ctrlKey || ev.metaKey || ev.altKey;
-        const isCharacter = /^.$/.test(ev.key) && !isModifierKey;
-        const hasReachedCharacterLimit = isCharacter &&
-            this.characterLimit &&
-            this.inputEl.value.length >= this.characterLimit;
-        if (hasReachedCharacterLimit) {
-            this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
-        }
-        if (ev.key === "Enter") {
-            this.isSubmit && functions.triggerFormSubmit(this.el.closest("form"));
-        }
-    }
-    handleBlur() {
-        if (this.value !== this.previousValue) {
-            this.wmInputValueChanged.emit({ value: this.value });
-        }
-        this.previousValue = this.value;
-        this.inputWrapperEl.classList.remove("focus");
-    }
-    handleFocus() {
-        this.inputWrapperEl.classList.add("focus");
-    }
-    announce(message) {
-        if (this.liveRegionEl.textContent === message) {
-            message += "\u00A0";
-        }
-        this.announcement = message;
-    }
-    generateCharacterLimitWarning(charCount, charLimit) {
-        let message = intl.globalMessages.getCharactersEntered(charCount, charLimit);
-        if (charCount >= charLimit) {
-            message += ` ${intl.globalMessages.characterLimitReached}`;
-        }
-        return message;
-    }
-    descriptors() {
-        // the input field value is announced to provide context to symbol-before, symbol-after and text-after. If none are present, it shouldn't be announced.
-        return this.symbolBefore || this.symbolAfter || this.textAfter
-            ? `symbol-before inputfield symbol-after text-after info error`
-            : `info error`;
-    }
-    render() {
-        return (index.h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, index.h("div", { class: "label-wrapper" }, index.h("label", { htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (index.h("span", { class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (index.h("span", { class: "required", "aria-hidden": "true" }, "*")))), index.h("div", { class: "inner-wrapper" }, index.h("div", { class: "text-after-wrapper" }, index.h("div", { class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (index.h("span", { class: "symbol", id: "symbol-before" }, this.symbolBefore)), index.h("input", { ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (index.h("span", { class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit &&
-            typeof this.characterLimit === "number" ? (index.h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (index.h("span", { class: "text-after", id: "text-after" }, this.textAfter))), this.info && (index.h("div", { id: "info", class: "info" }, this.info)), index.h("div", { id: "error", "aria-live": "assertive", class: "error-message", "aria-atomic": "true" }, this.errorMessage), index.h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
-    }
-    static get delegatesFocus() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "disabled": ["handleDisabledChange"]
-    }; }
+    return message;
+  }
+  descriptors() {
+    // the input field value is announced to provide context to symbol-before, symbol-after and text-after. If none are present, it shouldn't be announced.
+    return this.symbolBefore || this.symbolAfter || this.textAfter
+      ? `symbol-before inputfield symbol-after text-after info error`
+      : `info error`;
+  }
+  render() {
+    return (index.h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, index.h("div", { class: "label-wrapper" }, index.h("label", { htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (index.h("span", { class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (index.h("span", { class: "required", "aria-hidden": "true" }, "*")))), index.h("div", { class: "inner-wrapper" }, index.h("div", { class: "text-after-wrapper" }, index.h("div", { class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (index.h("span", { class: "symbol", id: "symbol-before" }, this.symbolBefore)), index.h("input", { ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (index.h("span", { class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit &&
+      typeof this.characterLimit === "number" ? (index.h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (index.h("span", { class: "text-after", id: "text-after" }, this.textAfter))), this.info && (index.h("div", { id: "info", class: "info" }, this.info)), index.h("div", { id: "error", "aria-live": "assertive", class: "error-message", "aria-atomic": "true" }, this.errorMessage), index.h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "disabled": ["handleDisabledChange"]
+  }; }
 };
 Input.style = wmInputCss;