@watermarkinsights/ripple 4.0.0-9 → 4.0.0

package/dist/cjs/wm-tag-option.cjs.entry.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-670c5d2a.js');
+const functions = require('./functions-e7db4a26.js');
+
+const TagOption = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.privTagOptionSelected = index.createEvent(this, "privTagOptionSelected", 7);
+    this.privTagOptionDeselected = index.createEvent(this, "privTagOptionDeselected", 7);
+    this.wmTagOptionSelected = index.createEvent(this, "wmTagOptionSelected", 7);
+    this.wmTagOptionDeselected = index.createEvent(this, "wmTagOptionDeselected", 7);
+    this.selected = false;
+    this.locked = false;
+    this.col1 = undefined;
+    this.col2 = undefined;
+    this.col3 = undefined;
+    this.col4 = undefined;
+  }
+  async emitSelectedEvent() {
+    this.wmTagOptionSelected.emit();
+  }
+  async emitDeselectedEvent() {
+    this.wmTagOptionDeselected.emit();
+  }
+  componentWillLoad() {
+    if (!this.el.id) {
+      this.el.id = functions.generateId();
+    }
+  }
+  handleSelected() {
+    // to update tag input when options state change.
+    this.selected ? this.privTagOptionSelected.emit() : this.privTagOptionDeselected.emit();
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "selected": ["handleSelected"]
+  }; }
+};
+
+exports.wm_tag_option = TagOption;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-670c5d2a.js');
-const functions = require('./functions-833ccc83.js');
+const functions = require('./functions-e7db4a26.js');
 
 const wmTimepickerCss = ":host{--wmcolor-timepicker-background:var(--wmcolor-background);--wmcolor-timepicker-input-background-disabled:var(--wmcolor-input-background-disabled);--wmcolor-timepicker-input-background:var(--wmcolor-input-background);--wmcolor-timepicker-input-border:var(--wmcolor-input-border);--wmcolor-timepicker-input-text-disabled:var(--wmcolor-input-text-disabled);--wmcolor-timepicker-input-text:var(--wmcolor-text);--wmcolor-timepicker-option-background-focus:var(--wmcolor-interactive-background-hover);--wmcolor-timepicker-option-background-hover:var(--wmcolor-option-background-hover);--wmcolor-timepicker-option-background:var(--wmcolor-option-background);--wmcolor-timepicker-option-border:var(--wmcolor-option-border);--wmcolor-timepicker-option-text:var(--wmcolor-option-text);--wmcolor-timepicker-toggle-background-disabled:var(--wmcolor-input-background-disabled);--wmcolor-timepicker-toggle-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-timepicker-toggle-background:var(--wmcolor-input-background);--wmcolor-timepicker-toggle-icon-disabled:var(--wmcolor-interactive-disabled);--wmcolor-timepicker-toggle-icon:var(--wmcolor-interactive);font-family:inherit}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}: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}: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{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.5rem;border:1px solid;border-color:var(--wmcolor-timepicker-input-border);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;max-width:236px;-ms-flex-pack:justify;justify-content:space-between;position:relative}:host .wrapper .inner-wrapper input{-moz-border-top-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-bottom-left-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;border:none;font-size:0.875rem;padding:0.625rem 0.9375rem 0.5rem;min-width:0;height:100%;-ms-flex:1;flex:1;margin:0;font-family:inherit}:host .wrapper .inner-wrapper input:disabled{background-color:var(--wmcolor-timepicker-input-background-disabled);color:var(--wmcolor-timepicker-input-text-disabled)}:host .wrapper .inner-wrapper input:focus{outline:none}:host .wrapper .inner-wrapper button{all:unset;cursor:pointer;padding:0 0.375rem;height:2.375rem;background-color:var(--wmcolor-timepicker-toggle-background);border:none;-moz-border-top-right-radius:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-moz-border-bottom-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px}:host .wrapper .inner-wrapper button .clock::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:\"\\f150\";color:var(--wmcolor-timepicker-toggle-icon);font-size:1.5rem;padding:0;line-height:2.5rem}:host .wrapper .inner-wrapper button:hover{background:var(--wmcolor-timepicker-toggle-background-hover);-webkit-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled{pointer-events:none;-webkit-box-shadow:none;box-shadow:none;background-color:var(--wmcolor-timepicker-toggle-background-disabled)}:host .wrapper .inner-wrapper button:disabled .clock::after{color:var(--wmcolor-timepicker-toggle-icon-disabled)}[dir=RTL] :host .wrapper .inner-wrapper button{right:auto;left:0}:host .wrapper .inner-wrapper button:focus{outline:none}:host .wrapper .inner-wrapper button.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus);-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus);box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus)}:host .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper button::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper .options{margin:0;padding:0;-webkit-overflow-scrolling:touch;overflow:auto;max-height:19.0625rem;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:2.5rem;right:0;z-index:100;width:100%;font-size:0.875rem}:host .wrapper .inner-wrapper .options.upwards{top:unset;bottom:2.5rem;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .wrapper .inner-wrapper .options.hidden{visibility:hidden}:host .wrapper .inner-wrapper .options [role=option]{display:block;cursor:pointer;position:relative;padding:1.25rem;background:var(--wmcolor-timepicker-option-background);font-family:inherit;list-style:none;color:var(--wmcolor-timepicker-option-text)}:host .wrapper .inner-wrapper .options [role=option]:hover{background:var(--wmcolor-timepicker-option-background-hover);outline:none}:host .wrapper .inner-wrapper .options [role=option]:focus{outline:none;background:var(--wmcolor-timepicker-option-background-focus)}:host .wrapper .inner-wrapper .options [role=option]:not(:last-child){border-bottom:2px solid;border-color:var(--wmcolor-timepicker-option-border)}:host .wrapper .inner-wrapper .options.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper.invalid .inner-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{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-top:0.25rem;margin-bottom:4px;top:100%;left:0}:host .wrapper:focus .inner-wrapper,:host .wrapper.focus .inner-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)}";
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-670c5d2a.js');
-const functions = require('./functions-833ccc83.js');
+const functions = require('./functions-e7db4a26.js');
 
 const wmToggletipCss = ":host{--wmcolor-toggletip-background:var(--wmcolor-background-dark);--wmcolor-toggletip-icon-background:var(--wmcolor-background-dark);--wmcolor-toggletip-icon-text:var(--wmcolor-text-ondark);--wmcolor-toggletip-text:var(--wmcolor-text-ondark);display:inline-block;position:relative;height:40px;width:40px}:host .button{display:-ms-flexbox;display:flex;background:none;border:none;padding:0;width:inherit;height:inherit;border-radius:50%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;cursor:pointer}:host .button:before{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:\"\\f2fc\";font-size:16px;color:var(--wmcolor-toggletip-icon-background);background:radial-gradient(var(--wmcolor-toggletip-icon-text) 40%, transparent 0%)}:host .button:focus{outline:none}:host .button:focus.user-is-tabbing{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus);-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus);box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus)}:host .button:focus.user-is-tabbing::-moz-focus-inner{border:0}:host .tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);pointer-events:none;font-family:inherit;font-size:0.875rem;text-transform:none;font-weight:normal;background:var(--wmcolor-tooltip-background);color:var(--wmcolor-tooltip-text);padding:0.375rem;line-height:normal;z-index:30;white-space:nowrap}:host .tooltip.hover{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;white-space:nowrap}:host .toggletip{position:absolute;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:0.5rem 0.75rem;border-radius:0.1875rem;background:var(--wmcolor-toggletip-background);color:var(--wmcolor-toggletip-text);font-size:14px;z-index:30}:host .toggletip.top:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:var(--wmcolor-toggletip-background);border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.bottom:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:var(--wmcolor-toggletip-background);border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.right:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-right-color:var(--wmcolor-toggletip-background);border-right-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-left-width:0px;top:calc(50% - 6px);left:-0.1875rem}:host .toggletip.left:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-left-color:var(--wmcolor-toggletip-background);border-left-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-right-width:0px;top:calc(50% - 6px);right:-0.1875rem}:host .toggletip.bottom-right:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:var(--wmcolor-toggletip-background);border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.bottom-left:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:var(--wmcolor-toggletip-background);border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.top-right:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:var(--wmcolor-toggletip-background);border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.top-left:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:var(--wmcolor-toggletip-background);border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.hidden{-webkit-transform:scale(0, 0) !important;transform:scale(0, 0) !important;visibility:hidden}:host .toggletip.top,:host .tooltip.top{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);bottom:40px;left:20px}:host .toggletip.bottom,:host .tooltip.bottom{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);top:40px;left:20px}:host .toggletip.right,:host .tooltip.right{-webkit-transform:translate(100%, calc(-50% - 20px));transform:translate(100%, calc(-50% - 20px));right:0px}:host .toggletip.left,:host .tooltip.left{-webkit-transform:translate(-100%, calc(-50% - 20px));transform:translate(-100%, calc(-50% - 20px));left:0px}:host .toggletip.bottom-right,:host .tooltip.bottom-right{top:40px;left:0px}:host .toggletip.bottom-left,:host .tooltip.bottom-left{top:40px;right:0px}:host .toggletip.top-right,:host .tooltip.top-right{bottom:40px;left:0px}:host .toggletip.top-left,:host .tooltip.top-left{bottom:40px;right:0px}: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}";
 

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-670c5d2a.js');
-const intl = require('./intl-ab07bd0b.js');
-require('./functions-833ccc83.js');
+const intl = require('./intl-9ef93563.js');
+require('./functions-e7db4a26.js');
 
 const wmUploaderCss = ":host .wm-button{-ms-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;width:100%;border:2px solid transparent;font-family:inherit;font-size:0.75rem;font-weight:700;min-height:2.75rem;padding:12px 1.3333333333em;cursor:pointer;position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:0.01875rem;overflow-wrap:break-word;-webkit-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button{min-height:3.3333333333em}}:host .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus{outline:none;-webkit-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark){-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus);-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus);box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus)}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner{border:0}:host .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus-ondark);-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus-ondark);box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-interactive-focus-ondark);outline:none}:host .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption){-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-button .mdi{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}:host .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem;font-size:0.875rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly){background:var(--wmcolor-button-background-primary);color:var(--wmcolor-button-text-primary)}:host .wm-button.-primary:not(.-textonly):not(:focus){-webkit-box-shadow:0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);box-shadow:0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}:host .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-primary-hover)}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-text-primary-ondark);background:var(--wmcolor-button-background-primary-ondark)}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover{background:var(--wmcolor-button-background-primary-hover-ondark)}:host .wm-button.-secondary{color:var(--wmcolor-button-text-secondary);border:2px solid var(--wmcolor-button-border-secondary);background:var(--wmcolor-button-background-secondary)}:host .wm-button.-secondary:hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-secondary-hover);color:var(--wmcolor-button-text-secondary-hover);border-color:transparent}:host .wm-button.-secondary.dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-text-secondary-ondark);background:var(--wmcolor-button-background-secondary-ondark);border-color:var(--wmcolor-button-border-secondary-ondark)}:host .wm-button.-secondary.dark:not(:disabled):not(.disabled):hover{color:var(--wmcolor-button-text-secondary-hover-ondark);background:var(--wmcolor-button-background-secondary-hover-ondark);border-color:transparent}:host .wm-button.-textonly{color:var(--wmcolor-button-text-textonly);-webkit-box-shadow:none;box-shadow:none;display:inline-block;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;border:none;background:transparent;padding:0;height:auto;min-height:unset;border-radius:0;line-height:1;overflow-wrap:anywhere}:host .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner{border:0;outline:none}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, var(--wmcolor-interactive-focus-textonly)), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, var(--wmcolor-interactive-focus-textonly) 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, var(--wmcolor-interactive-focus-textonly-ondark)), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, var(--wmcolor-interactive-focus-textonly-ondark) 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline}:host .wm-button.-textonly.dark{color:var(--wmcolor-button-text-textonly-ondark)}:host .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled){text-decoration:underline}:host .wm-button.-textonly.-permanentlydelete{color:var(--wmcolor-button-background-delete)}:host .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark){text-decoration:underline}:host .wm-button.-textonly.-permanentlydelete.dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-text-textonly-ondark)}:host .wm-button.-icononly,:host .wm-button.-navigational{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}:host .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus){-webkit-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button.-icononly,:host .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly .mdi,:host .wm-button.-navigational .mdi{font-size:1.12rem}:host .wm-button.-icononly{border-width:1px !important;color:var(--wmcolor-button-icon-icononly);border-color:var(--wmcolor-button-border-icononly);background-color:var(--wmcolor-button-background-icononly)}:host .wm-button.-icononly:before{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}:host .wm-button.-icononly:hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-icononly-hover);color:var(--wmcolor-button-icon-icononly-hover);border-color:transparent}:host .wm-button.-icononly.dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-icon-icononly-ondark);background:var(--wmcolor-button-background-icononly-ondark);border-color:var(--wmcolor-button-border-icononly-ondark)}:host .wm-button.-icononly.dark:not(:disabled):not(.disabled):hover{color:var(--wmcolor-button-icon-icononly-hover-ondark);background:var(--wmcolor-button-background-icononly-hover-ondark);border-color:transparent}:host .wm-button.-navigational{border:none !important;background-color:var(--wmcolor-button-background-navigational)}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled){color:var(--wmcolor-button-icon-navigational)}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected{background-color:var(--wmcolor-button-background-navigational-hover)}:host .wm-button.-navigational:before{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}:host .wm-button.-navigational.dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-icon-navigational-ondark);background:var(--wmcolor-button-background-navigational-ondark)}:host .wm-button.-navigational.dark:not(:disabled):not(.disabled):hover{color:var(--wmcolor-button-icon-navigational-hover-ondark);background:var(--wmcolor-button-background-navigational-hover-ondark)}:host .wm-button.-permanentlydelete:not(.-textonly){background:var(--wmcolor-button-background-delete);border-color:var(--wmcolor-button-background-delete);color:var(--wmcolor-button-text-delete)}:host .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark){background:var(--wmcolor-button-background-delete-hover);border-color:var(--wmcolor-button-background-delete-hover)}:host .wm-button.-permanentlydelete:not(.-textonly).dark:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-delete);border-color:var(--wmcolor-button-background-delete);color:var(--wmcolor-button-text-delete)}:host .wm-button.-permanentlydelete:not(.-textonly).dark:not(:disabled):not(.disabled):hover{background:var(--wmcolor-button-background-delete-hover);border-color:var(--wmcolor-button-background-delete-hover)}:host .wm-button.-pairnegative{background:var(--wmcolor-button-background-negative);border-color:var(--wmcolor-button-background-negative);color:var(--wmcolor-button-text-negative)}:host .wm-button.-pairnegative:hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-negative-hover);border-color:var(--wmcolor-button-background-negative-hover)}:host .wm-button.-pairpositive{background:var(--wmcolor-button-background-positive);border-color:var(--wmcolor-button-background-positive);color:var(--wmcolor-button-text-positive)}:host .wm-button.-pairpositive:hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-positive-hover);border-color:var(--wmcolor-button-background-positive-hover)}:host .wm-button.-selector,:host .wm-button.-selector-primary{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:block;border-radius:3px;height:2.75rem;min-width:11.4375rem;padding:0 1.875rem 0 0.9375rem;line-height:normal;font-family:inherit;font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.01875rem;text-align:left}@media screen and (min-width: 48rem){:host .wm-button.-selector,:host .wm-button.-selector-primary{height:2.5rem}}:host .wm-button.-selector:before,:host .wm-button.-selector-primary:before{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:\"\\f140\";position:absolute;right:0.5625rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:1.12rem;font-weight:700;pointer-events:none}:host .wm-button.-selector:active,:host .wm-button.-selector-primary:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selector::-moz-focus-inner,:host .wm-button.-selector-primary::-moz-focus-inner{border:0}:host .wm-button.-selector .overflowcontrol,:host .wm-button.-selector-primary .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button.-selector{background:var(--wmcolor-button-background-selector);color:var(--wmcolor-button-text-selector);border-color:var(--wmcolor-button-border-selector)}:host .wm-button.-selector:hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-selector-hover);color:var(--wmcolor-button-text-selector-hover);border-color:transparent}:host .wm-button.-selector.dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-text-selector-ondark);border-color:var(--wmcolor-button-border-selector-ondark);background:var(--wmcolor-button-background-selector-ondark)}:host .wm-button.-selector.dark:not(:disabled):not(.disabled):hover{color:var(--wmcolor-button-text-selector-hover-ondark);background:var(--wmcolor-button-background-selector-hover-ondark);border-color:transparent}:host .wm-button.-selector-primary{background:var(--wmcolor-button-background-selectorprimary);color:var(--wmcolor-button-text-selectorprimary)}:host .wm-button.-selector-primary:hover:not(:disabled):not(.disabled){background:var(--wmcolor-button-background-selectorprimary-hover)}:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled){color:var(--wmcolor-button-text-selectorprimary-ondark);background:var(--wmcolor-button-background-selectorprimary-ondark)}:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled):hover{color:var(--wmcolor-button-text-selectorprimary-hover-ondark);background:var(--wmcolor-button-background-selectorprimary-hover-ondark)}:host .wm-button:disabled,:host .wm-button.disabled{cursor:default;pointer-events:none}:host .wm-button:disabled.-secondary:not(.-permanentlydelete),:host .wm-button.disabled.-secondary:not(.-permanentlydelete){-webkit-box-shadow:none;box-shadow:none;border-color:var(--wmcolor-button-border-secondary-disabled);color:var(--wmcolor-button-text-secondary-disabled)}:host .wm-button:disabled.-primary,:host .wm-button.disabled.-primary{background:var(--wmcolor-button-background-primary-disabled);color:var(--wmcolor-button-text-primary-disabled)}:host .wm-button:disabled.-permanentlydelete,:host .wm-button.disabled.-permanentlydelete{background:var(--wmcolor-button-background-delete-disabled);color:var(--wmcolor-button-text-delete-disabled);border-color:var(--wmcolor-button-background-delete-disabled)}:host .wm-button:disabled.-pairnegative,:host .wm-button.disabled.-pairnegative{background:var(--wmcolor-button-background-negative-disabled);border-color:var(--wmcolor-button-background-negative-disabled);color:var(--wmcolor-button-text-negative-disabled)}:host .wm-button:disabled.-pairpositive,:host .wm-button.disabled.-pairpositive{background:var(--wmcolor-button-background-positive-disabled);border-color:var(--wmcolor-button-background-positive-disabled);color:var(--wmcolor-button-text-positive-disabled)}:host .wm-button:disabled.-selector,:host .wm-button.disabled.-selector{color:var(--wmcolor-button-text-selector-disabled);border-color:var(--wmcolor-button-border-selector-disabled)}:host .wm-button:disabled.-selector-primary,:host .wm-button.disabled.-selector-primary{background:var(--wmcolor-button-background-selectorprimary-disabled);color:var(--wmcolor-button-text-selectorprimary-disabled)}:host .wm-button:disabled.-navigational,:host .wm-button.disabled.-navigational{color:var(--wmcolor-button-icon-navigational-disabled)}:host .wm-button:disabled.-icononly,:host .wm-button.disabled.-icononly{color:var(--wmcolor-button-icon-icononly-disabled);border-color:var(--wmcolor-button-border-icononly-disabled)}:host .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly{color:var(--wmcolor-button-text-textonly-disabled);background:transparent}:host .wm-button:disabled.dark.-icononly,:host .wm-button.disabled.dark.-icononly{background:transparent;color:var(--wmcolor-button-icon-icononly-disabled-ondark);border-color:var(--wmcolor-button-border-icononly-disabled-ondark)}:host .wm-button:disabled.dark.-navigational,:host .wm-button.disabled.dark.-navigational{color:var(--wmcolor-button-icon-navigational-disabled-ondark)}:host .wm-button:disabled.dark.-textonly,:host .wm-button.disabled.dark.-textonly{color:var(--wmcolor-button-text-textonly-disabled-ondark)}:host .wm-button:disabled.dark.-primary,:host .wm-button.disabled.dark.-primary{color:var(--wmcolor-button-text-primary-disabled-ondark);background:var(--wmcolor-button-background-primary-disabled-ondark)}:host .wm-button:disabled.dark.-secondary,:host .wm-button.disabled.dark.-secondary{background:transparent;color:var(--wmcolor-button-text-secondary-disabled-ondark);border-color:var(--wmcolor-button-border-secondary-disabled-ondark)}:host .wm-button:disabled.dark.-selector,:host .wm-button.disabled.dark.-selector{color:var(--wmcolor-button-text-selector-disabled-ondark);border-color:var(--wmcolor-button-border-selector-disabled-ondark);background:var(--wmcolor-button-background-selector-disabled-ondark)}:host .wm-button:disabled.dark.-selector-primary,:host .wm-button.disabled.dark.-selector-primary{color:var(--wmcolor-button-text-selectorprimary-disabled-ondark);background:var(--wmcolor-button-background-selectorprimary-disabled-ondark)}:host .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),:host .wm-button.disabled.dark.-permanentlydelete:not(.-textonly){background:var(--wmcolor-button-background-delete-disabled-ondark);color:var(--wmcolor-button-text-delete-disabled-ondark)}:host a.wm-button,:host label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host{--wmcolor-uploader-button-focus:var(--wmcolor-interactive-focus);display:block;position:relative;max-width:1140px}:host[dir=RTL] .mdi{margin-left:0.3125rem;margin-right:0}:host input:focus+.wm-button.user-is-tabbing{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-uploader-button-focus) !important;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-uploader-button-focus) !important;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px var(--wmcolor-uploader-button-focus) !important}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}.wm-button.disabled{pointer-events:initial !important}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}.wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}.wrapper .label .required{color:var(--wmcolor-text-required)}.wrapper.label-left{-ms-flex-direction:row;flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.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}.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}.wrapper.invalid .label{color:var(--wmcolor-text-error)}.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] .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}.wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}#label{margin-bottom:0.5rem}.info-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.info-wrapper .info{font-size:0.875rem;margin-left:1rem}.accepted-types{font-size:0.875rem}.notif-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-bottom:0.75rem}.requirements{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem;margin-left:1rem}.notif,#error{padding-top:0.25rem;font-size:0.875rem;font-style:italic}.notif#error,#error#error{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-top:0.25rem}.list-container{overflow-y:unset}.list-container.checkmark-spacer{margin-right:2.75rem}.list-container .file-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:0.5rem;padding:0;width:100%;margin:0}.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}::slotted(wm-file:nth-of-type(1)){margin-top:2.5rem}";
 

package/dist/collection/collection-manifest.json

@@ -33,7 +33,7 @@
     "./components/wm-tabs/wm-tab-item/wm-tab-item.js",
     "./components/wm-tabs/wm-tab-panel/wm-tab-panel.js",
     "./components/wm-tag-input/wm-tag-input.js",
-    "./components/wm-tag-input/wm-tag-input-row/wm-tag-input-row.js",
+    "./components/wm-tag-input/wm-tag-option/wm-tag-option.js",
     "./components/wm-timepicker/wm-timepicker.js",
     "./components/wm-toggletip/wm-toggletip.js",
     "./components/wm-uploader/wm-uploader.js",
@@ -41,7 +41,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.4.1",
+    "version": "3.4.2",
     "typescriptVersion": "5.0.4"
   },
   "collections": [],
@@ -118,7 +118,7 @@
     },
     {
       "components": [
-        "wm-tag-input-row"
+        "wm-tag-option"
       ]
     },
     {

package/dist/collection/components/charts/wm-chart/wm-chart.css

@@ -168,7 +168,6 @@
   padding-top: 0.625rem;
 }
 :host .component-wrapper.bar {
-  padding: 1.25rem;
   align-items: flex-start;
 }
 :host .component-wrapper.bar label {

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.css

@@ -168,7 +168,6 @@
   padding-top: 0.625rem;
 }
 :host .component-wrapper.bar {
-  padding: 1.25rem;
   align-items: flex-start;
 }
 :host .component-wrapper.bar label {

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.css

@@ -94,7 +94,6 @@
 }
 :host .legend-wrapper {
   align-items: flex-start;
-  padding: 0 1.25rem;
 }
 
 :host(.row) {
@@ -103,4 +102,13 @@
 
 :host(.column) {
   flex-direction: column;
+}
+:host(.column) .legend-wrapper {
+  margin-bottom: 2rem;
+}
+:host(.column) .legend-wrapper .legend {
+  padding-bottom: 0;
+}
+:host(.column) ::slotted(wm-progress-indicator:not(:last-of-type)) {
+  margin-bottom: 2.5rem;
 }

package/dist/collection/components/wm-file/wm-file.js

@@ -2,7 +2,6 @@ import { h, Host, forceUpdate } from "@stencil/core";
 import { debounce, hideTooltip, intl, showTooltip, truncateText } from "../../global/functions";
 export class File {
   constructor() {
-    this.showInfo = "time"; // defaults to time, but inherits from parent
     this.fullFilename = `${this.name}.${this.type}`;
     this.debouncedResize = debounce(() => {
       this.isCondensed = this.el.clientWidth < 500;
@@ -16,6 +15,7 @@ export class File {
     this.progress = undefined;
     this.size = undefined;
     this.errorMessage = undefined;
+    this.showInfo = undefined;
     this.isCondensed = false;
   }
   get isUploading() {
@@ -94,10 +94,13 @@ export class File {
     if (!this.type) {
       console.error('wm-file: "type" is a required property');
     }
-    // inherit showInfo property from parent
-    if (this.el.parentElement && this.el.parentElement.hasOwnProperty("showInfo")) {
+    // 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);
@@ -301,6 +304,23 @@ export class File {
         },
         "attribute": "error-message",
         "reflect": false
+      },
+      "showInfo": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"time\" | \"size\" | \"none\"",
+          "resolved": "\"none\" | \"size\" | \"time\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-info",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/wm-file/wm-file.spec.js

@@ -11,27 +11,43 @@ describe("wm-file", () => {
   async function createPageHelper() {
     return await newSpecPage({
       components: [File],
-      html: `<wm-file
+      html: `<wm-file 
       id="file1"
-      file='{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "10/30/97 3:46 PM", "size": "22 KB"}'
-      ></wm-file>`,
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
+      >
+      </wm-file>`,
     });
   }
   it("renders green check alongside recently uploaded files", async () => {
-    html = `<wm-file
+    html = `<wm-file 
     id="file1"
-    file='{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "10/30/97 3:46 PM", "size": "22 KB", "progress": "100"}'
-    ></wm-file>`;
+    name="File retrieved from server"
+    type="pdf"
+    last-updated="10/30/97 3:46 PM"
+    size="22 KB"
+    file-actions="download preview delete"
+    progress="100"
+    >
+    </wm-file>`;
     page = await newSpecPage({ components: [File], html });
     await page.waitForChanges();
     const fileWrapperEl = page.root.shadowRoot.querySelector(".file-wrapper");
     expect(fileWrapperEl).toHaveClass("checked");
   });
   it("renders file actions in the proper order", async () => {
-    html = `<wm-file
-      id="file1"
-      file='{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "10/30/97 3:46 PM", "size": "22 KB", "fileActions": "delete preview download"}'
-      ></wm-file>`;
+    html = `<wm-file 
+    id="file1"
+    name="File retrieved from server"
+    type="pdf"
+    last-updated="10/30/97 3:46 PM"
+    size="22 KB"
+    file-actions="download delete preview"
+    >
+    </wm-file>`;
     page = await newSpecPage({ components: [File], html });
     await page.waitForChanges();
     const fileActionEls = page.root.shadowRoot.querySelectorAll("wm-button");
@@ -40,7 +56,15 @@ describe("wm-file", () => {
     expect(fileActionEls[2]).toEqualAttribute("tooltip", "Delete");
   });
   it("defaults available actions to download and delete", async () => {
-    page = await createPageHelper();
+    html = `<wm-file 
+    id="file1"
+    name="File retrieved from server"
+    type="pdf"
+    last-updated="10/30/97 3:46 PM"
+    size="22 KB"
+    >
+    </wm-file>`;
+    page = await newSpecPage({ components: [File], html });
     await page.waitForChanges();
     const deleteButton = page.root.shadowRoot.querySelector(".delete-button");
     const downloadButton = page.root.shadowRoot.querySelector(".download-button");
@@ -50,10 +74,15 @@ describe("wm-file", () => {
     expect(previewButton).toBeFalsy();
   });
   it("displays no file actions when an empty string is passed", async () => {
-    html = `<wm-file
-      id="file1"
-      file='{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "10/30/97 3:46 PM", "size": "22 KB", "fileActions": ""}'
-      ></wm-file>`;
+    html = `<wm-file 
+    id="file1"
+    name="File retrieved from server"
+    type="pdf"
+    last-updated="10/30/97 3:46 PM"
+    size="22 KB"
+    file-actions=""
+    >
+    </wm-file>`;
     page = await newSpecPage({ components: [File], html });
     await page.waitForChanges();
     const deleteButton = page.root.shadowRoot.querySelector(".delete-button");
@@ -70,63 +99,83 @@ describe("wm-file", () => {
     expect(fileInfoEl.textContent).toBe("10/30/97 3:46 PM");
     page = await newSpecPage({
       components: [File],
-      html: `<wm-file
+      html: `<wm-file 
       id="file1"
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
       show-info="size"
-      file='{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "10/30/97 3:46 PM", "size": "22 KB"}'
-      ></wm-file>`,
+      >
+      </wm-file>`,
     });
     await page.waitForChanges();
     fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
     expect(fileInfoEl.textContent).toBe("22 KB");
     page = await newSpecPage({
       components: [File],
-      html: `<wm-file
+      html: `<wm-file 
       id="file1"
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
       show-info="time"
-      file='{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "10/30/97 3:46 PM", "size": "22 KB"}'
-      ></wm-file>`,
+      >
+      </wm-file>`,
     });
     await page.waitForChanges();
     fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
     expect(fileInfoEl.textContent).toBe("10/30/97 3:46 PM");
     page = await newSpecPage({
       components: [File],
-      html: `<wm-file
+      html: `<wm-file 
       id="file1"
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
       show-info="none"
-      file='{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "10/30/97 3:46 PM", "size": "22 KB"}'
-      ></wm-file>`,
+      >
+      </wm-file>`,
     });
     await page.waitForChanges();
     fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
     expect(fileInfoEl).toBeFalsy();
   });
-  it("emits the appropriate internal events when user clicks the buttons", async () => {
+  it("emits the appropriate events when user clicks the buttons", async () => {
     const filePreviewedSpy = jest.fn();
     const fileDownloadedSpy = jest.fn();
     const fileDeletedSpy = jest.fn();
-    html = `<wm-file
+    html = `<wm-file 
       id="file1"
-      file='{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "10/30/97 3:46 PM", "size": "22 KB", "fileActions": "download preview delete"}'
-      ></wm-file>`;
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
+      >
+      </wm-file>`;
     page = await newSpecPage({ components: [File], html });
     await page.waitForChanges();
-    page.root.addEventListener("wmIntFilePreviewed", filePreviewedSpy);
-    page.root.addEventListener("wmIntFileDownloaded", fileDownloadedSpy);
-    page.root.addEventListener("wmIntFileDeleted", fileDeletedSpy);
+    page.root.addEventListener("wmFilePreview", filePreviewedSpy);
+    page.root.addEventListener("wmFileDownload", fileDownloadedSpy);
+    page.root.addEventListener("wmFileDelete", fileDeletedSpy);
     // wmFilePreview
     page.root.shadowRoot.querySelector(".preview-button").click();
     await page.waitForChanges();
-    expect(filePreviewedSpy.mock.calls[0][0].detail).toBe("file1");
+    expect(filePreviewedSpy.mock.calls[0][0].target.id).toBe("file1");
     // wmFileDownload
     page.root.shadowRoot.querySelector(".download-button").click();
     await page.waitForChanges();
-    expect(fileDownloadedSpy.mock.calls[0][0].detail).toBe("file1");
+    expect(fileDownloadedSpy.mock.calls[0][0].target.id).toBe("file1");
     // wmFileDelete
     page.root.shadowRoot.querySelector(".delete-button").click();
     await page.waitForChanges();
-    expect(fileDeletedSpy.mock.calls[0][0].detail).toBe("file1");
+    expect(fileDeletedSpy.mock.calls[0][0].target.id).toBe("file1");
     jest.restoreAllMocks();
   });
   it("renders with an error if one is passed", async () => {

package/dist/collection/components/wm-file-list/wm-file-list.spec.js

@@ -1,5 +1,6 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { FileList } from "./wm-file-list";
+import { File } from "../wm-file/wm-file";
 // mock ResizeObserver
 global.ResizeObserver = jest.fn().mockImplementation(() => ({
   observe: jest.fn(),
@@ -10,87 +11,59 @@ describe("wm-file-list", () => {
   let page;
   async function createPageHelper() {
     return await newSpecPage({
-      components: [FileList],
-      html: `<wm-file-list
-      id="filelist1"
-      files='[{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "1/28/2020 5:29 PM","fileActions": "preview download"},{"id": "file2", "name": "Second file.jpeg", "lastUpdated": "2/14/2019 7:21 AM", "fileActions": "preview download"}]'
-      ></wm-file-list>`,
+      components: [FileList, File],
+      html: `<wm-file-list id="filelist1">
+        <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020 5:29 PM" file-actions="preview download"></wm-file>
+        <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019 7:21 AM" file-actions="preview download"></wm-file>
+      </wm-file-list>`,
     });
   }
   it("renders all files", async () => {
     page = await createPageHelper();
     await page.waitForChanges();
-    let fileEls = page.root.shadowRoot.querySelectorAll("wm-file");
+    let fileEls = page.root.querySelectorAll("wm-file");
     expect(fileEls.length).toBe(2);
-    expect(fileEls[0]).toEqualAttribute("file", '{"id":"file1","name":"File retrieved from server.pdf","lastUpdated":"1/28/2020 5:29 PM","fileActions":"preview download"}');
-    expect(fileEls[1]).toEqualAttribute("file", '{"id":"file2","name":"Second file.jpeg","lastUpdated":"2/14/2019 7:21 AM","fileActions":"preview download"}');
+    expect(fileEls[0]).toEqualAttribute("id", "file1");
+    expect(fileEls[1]).toEqualAttribute("id", "file2");
   });
   it("passes on show-info to it's children wm-files", async () => {
     page = await createPageHelper();
     await page.waitForChanges();
     // default (time)
-    let fileEl = page.root.shadowRoot.querySelector("wm-file");
-    expect(fileEl).toEqualAttribute("show-info", "time");
+    let fileEl = page.root.querySelector("wm-file");
+    expect(fileEl.showInfo).toBe("time");
     // size
     page = await newSpecPage({
-      components: [FileList],
-      html: `<wm-file-list
-      id="filelist1"
-      show-info="size"
-      files='[{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "1/28/2020 5:29 PM"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2/14/2019 7:21 AM"}]'
-      ></wm-file-list>`,
+      components: [FileList, File],
+      html: `<wm-file-list id="filelist1" show-info="size">
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020 5:29 PM" file-actions="preview download"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019 7:21 AM" file-actions="preview download"></wm-file>
+    </wm-file-list>`,
     });
     await page.waitForChanges();
-    fileEl = page.root.shadowRoot.querySelector("wm-file");
-    expect(fileEl).toEqualAttribute("show-info", "size");
+    fileEl = page.root.querySelector("wm-file");
+    expect(fileEl.showInfo).toBe("size");
     // time (specified)
     page = await newSpecPage({
-      components: [FileList],
-      html: `<wm-file-list
-      id="filelist1"
-      show-info="time"
-      files='[{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "1/28/2020 5:29 PM"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2/14/2019 7:21 AM"}]'
-      ></wm-file-list>`,
+      components: [FileList, File],
+      html: `<wm-file-list id="filelist1" show-info="time">
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020 5:29 PM" file-actions="preview download"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019 7:21 AM" file-actions="preview download"></wm-file>
+    </wm-file-list>`,
     });
     await page.waitForChanges();
-    fileEl = page.root.shadowRoot.querySelector("wm-file");
-    expect(fileEl).toEqualAttribute("show-info", "time");
+    fileEl = page.root.querySelector("wm-file");
+    expect(fileEl.showInfo).toBe("time");
     // none
     page = await newSpecPage({
-      components: [FileList],
-      html: `<wm-file-list
-      id="filelist1"
-      show-info="none"
-      files='[{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "1/28/2020 5:29 PM"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2/14/2019 7:21 AM"}]'
-      ></wm-file-list>`,
+      components: [FileList, File],
+      html: `<wm-file-list id="filelist1" show-info="none">
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020 5:29 PM" file-actions="preview download"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019 7:21 AM" file-actions="preview download"></wm-file>
+    </wm-file-list>`,
     });
     await page.waitForChanges();
-    fileEl = page.root.shadowRoot.querySelector("wm-file");
-    expect(fileEl).toEqualAttribute("show-info", "none");
-  });
-  it("emits the file ID in the custom event when a file action event is received", async () => {
-    page = await createPageHelper();
-    await page.waitForChanges();
-    let internalPreviewEvent = new CustomEvent("wmIntFilePreviewed");
-    // @ts-ignore
-    internalPreviewEvent.detail = "previewid";
-    let internalDownloadEvent = new CustomEvent("wmIntFileDownloaded");
-    // @ts-ignore
-    internalDownloadEvent.detail = "downloadid";
-    let internalDeleteEvent = new CustomEvent("wmIntFileDeleted");
-    // @ts-ignore
-    internalDeleteEvent.detail = "deleteid";
-    const wmFilePreviewSpy = jest.fn();
-    const wmFileDownloadSpy = jest.fn();
-    const wmFileDeleteSpy = jest.fn();
-    page.root.addEventListener("wmFilePreview", wmFilePreviewSpy);
-    page.root.addEventListener("wmFileDownload", wmFileDownloadSpy);
-    page.root.addEventListener("wmFileDelete", wmFileDeleteSpy);
-    page.root.dispatchEvent(internalPreviewEvent);
-    expect(wmFilePreviewSpy.mock.calls[0][0].detail).toBe("previewid");
-    page.root.dispatchEvent(internalDownloadEvent);
-    expect(wmFileDownloadSpy.mock.calls[0][0].detail).toBe("downloadid");
-    page.root.dispatchEvent(internalDeleteEvent);
-    expect(wmFileDeleteSpy.mock.calls[0][0].detail).toBe("deleteid");
+    fileEl = page.root.querySelector("wm-file");
+    expect(fileEl.showInfo).toBe("none");
   });
 });

package/dist/collection/components/wm-input/wm-input.js

@@ -46,10 +46,6 @@ export class Input {
   handleDisabledChange() {
     handleDisabledAttribute(this.el, this.isDisabled);
   }
-  updateValue() {
-    // update the input's value when component's prop is changed programmatically
-    this.inputEl.value = this.value ? this.value : "";
-  }
   handleInput(ev) {
     // keep component's value in sync with input's value
     this.value = ev.target.value;
@@ -102,7 +98,7 @@ export class Input {
       : `info error`;
   }
   render() {
-    return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { class: "label-wrapper" }, h("label", { htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: "inner-wrapper" }, h("div", { class: "text-after-wrapper" }, h("div", { class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { class: "symbol", id: "symbol-before" }, this.symbolBefore)), 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 }), this.symbolAfter && (h("span", { class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit &&
+    return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { class: "label-wrapper" }, h("label", { htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: "inner-wrapper" }, h("div", { class: "text-after-wrapper" }, h("div", { class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { class: "symbol", id: "symbol-before" }, this.symbolBefore)), 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 && (h("span", { class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit &&
       typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { id: "info", class: "info" }, this.info)), h("div", { id: "error", "aria-live": "assertive", class: "error-message", "aria-atomic": "true" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
   }
   static get is() { return "wm-input"; }
@@ -465,9 +461,6 @@ export class Input {
     return [{
         "propName": "disabled",
         "methodName": "handleDisabledChange"
-      }, {
-        "propName": "value",
-        "methodName": "updateValue"
       }];
   }
 }