@watermarkinsights/ripple 4.3.0 → 4.4.0-0

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

@@ -2,188 +2,188 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fae02cd7.js');
-const functions = require('./functions-91da05e9.js');
+const index = require('./index-f8ef86de.js');
+const functions = require('./functions-4208c444.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-fae02cd7.js');
-const functions = require('./functions-91da05e9.js');
-const intl = require('./intl-fa3bb4ae.js');
+const index = require('./index-f8ef86de.js');
+const functions = require('./functions-4208c444.js');
+const intl = require('./intl-3fafc6d1.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 = "";
-  }
-  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");
+    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 = "";
     }
-    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));
+    getInputWidth() {
+        return this.inputWidth ? { width: this.inputWidth } : { flex: "1" };
     }
-  }
-  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 charCount() {
+        return this.value.length;
     }
-    if (ev.key === "Enter") {
-      this.isSubmit && functions.triggerFormSubmit(this.el.closest("form"));
+    get isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return functions.toBool(this.disabled);
     }
-  }
-  handleBlur() {
-    if (this.value !== this.previousValue) {
-      this.wmInputValueChanged.emit({ value: this.value });
+    componentWillLoad() {
+        if (!this.label) {
+            console.error("wm-input requires the label property");
+        }
+        functions.handleDisabledAttribute(this.el, this.isDisabled);
     }
-    this.previousValue = this.value;
-    this.inputWrapperEl.classList.remove("focus");
-  }
-  handleFocus() {
-    this.inputWrapperEl.classList.add("focus");
-  }
-  announce(message) {
-    if (this.liveRegionEl.textContent === message) {
-      message += "\u00A0";
+    componentDidLoad() {
+        this.previousValue = this.inputEl.value;
     }
-    this.announcement = message;
-  }
-  generateCharacterLimitWarning(charCount, charLimit) {
-    let message = intl.globalMessages.getCharactersEntered(charCount, charLimit);
-    if (charCount >= charLimit) {
-      message += ` ${intl.globalMessages.characterLimitReached}`;
+    handleDisabledChange() {
+        functions.handleDisabledAttribute(this.el, this.isDisabled);
     }
-    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"]
-  }; }
+    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"]
+    }; }
 };
 Input.style = wmInputCss;