@watermarkinsights/ripple 5.16.0-alpha.0 → 5.16.0-alpha.10

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

@@ -2,19 +2,12 @@ import { h, Host, forceUpdate } from "@stencil/core";
 import { debounce, hideTooltip, intl, showTooltip, truncateText } from "../../global/functions";
 export class File {
     constructor() {
+        this.fileActions = "download delete"; // accepts any combination of preview, download, delete
+        this.showInfo = "last-updated"; // defaults to last-updated but inherits from parent
         this.fullFilename = `${this.name}.${this.type}`;
         this.debouncedUpdate = debounce(async () => {
             forceUpdate(this.el);
         }, 10);
-        this.name = undefined;
-        this.type = undefined;
-        this.fileActions = "download delete";
-        this.lastUpdated = undefined;
-        this.progress = undefined;
-        this.size = undefined;
-        this.uploadedBy = undefined;
-        this.errorMessage = undefined;
-        this.showInfo = "last-updated";
     }
     get isCondensed() {
         return this.el.clientWidth < 500;
@@ -171,7 +164,7 @@ export class File {
         return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: "right-group" }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText)), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return h(Host, { key: '534c481a5423a9f1a1ec811ec6b736e462a981ea', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: '62b766d8fcbf74186344e2186df66554055465a6', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get is() { return "wm-file"; }
     static get encapsulation() { return "shadow"; }
@@ -190,6 +183,7 @@ export class File {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -202,11 +196,13 @@ export class File {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -219,11 +215,13 @@ export class File {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "fileActions": {
                 "type": "string",
+                "attribute": "file-actions",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -236,12 +234,14 @@ export class File {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "file-actions",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"download delete\""
             },
             "lastUpdated": {
                 "type": "string",
+                "attribute": "last-updated",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -254,11 +254,13 @@ export class File {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "last-updated",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "progress": {
                 "type": "number",
+                "attribute": "progress",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -271,11 +273,13 @@ export class File {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "progress",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -288,11 +292,13 @@ export class File {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "uploadedBy": {
                 "type": "string",
+                "attribute": "uploaded-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -305,11 +311,13 @@ export class File {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "uploaded-by",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "errorMessage": {
                 "type": "string",
+                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -322,11 +330,13 @@ export class File {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-message",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "showInfo": {
                 "type": "string",
+                "attribute": "show-info",
                 "mutable": true,
                 "complexType": {
                     "original": "\"time\" | \"last-updated\" | \"size\" | \"uploaded-by\" | \"all\" | \"none\"",
@@ -339,7 +349,8 @@ export class File {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "show-info",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"last-updated\""
             }

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

@@ -4,7 +4,7 @@ export class FileList {
         this.showInfo = "last-updated";
     }
     render() {
-        return (h("div", { key: '69e557483f15721fc39315353da4cc1db7b6405d', role: "list", class: "list-wrapper" }, h("slot", { key: '1f00bd3aa0961aa99298eacb90b65717e8a5fd87' })));
+        return (h("div", { key: 'bc22d0fa97458ed4323d6bba8d13966a68e9f5c4', role: "list", class: "list-wrapper" }, h("slot", { key: '105cb8fc11a0d9349ac2e38951cf0a2245b69bd8' })));
     }
     static get is() { return "wm-file-list"; }
     static get encapsulation() { return "shadow"; }
@@ -23,6 +23,7 @@ export class FileList {
         return {
             "showInfo": {
                 "type": "string",
+                "attribute": "show-info",
                 "mutable": false,
                 "complexType": {
                     "original": "\"size\" | \"last-updated\" | \"uploaded-by\" | \"all\" | \"none\"",
@@ -35,7 +36,8 @@ export class FileList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "show-info",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"last-updated\""
             }

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

@@ -3,19 +3,11 @@ import { csvToArray, debounce, getLastFocusableDescendant } from "../../global/f
 import { globalMessages } from "../../global/intl";
 export class Flyout {
     constructor() {
-        this.debouncedCheckBreadcrumbOverflow = debounce(this.checkBreadcrumbOverflow, 30);
-        this.eyebrow = undefined;
-        this.heading = undefined;
-        this.subheading = undefined;
         this.flyoutWidth = "45rem";
-        this.primaryText = undefined;
-        this.secondaryText = undefined;
-        this.infoText = undefined;
-        this.breadcrumb = undefined;
         this.elementToFocus = "";
         this.open = false;
-        this.returnFocusEl = undefined;
         this.isBreadcrumbsOverflowing = false;
+        this.debouncedCheckBreadcrumbOverflow = debounce(this.checkBreadcrumbOverflow, 30);
     }
     get lastFocusableEl() {
         if (this.primaryText) {
@@ -154,7 +146,7 @@ export class Flyout {
         }
     }
     render() {
-        return (h(Host, { key: '0eeee311c251933d5f3d7aa2ab65558011668c3d' }, h("dialog", { key: '11876657f5bfd7e1bda8937e886198320731b5b2', ref: (el) => (this.dialogEl = el), class: "flyout", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '7535397d18ca997953cf6d5be82c68500d733c84', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '96ee05df3eaf54bc78ff2f002024b42c3c11d50b', class: "flyout-content" }, h("slot", { key: '2883623f6062eade04c5c9dedb6e5a6a1e8ffd41' })), this.renderFooter(), h("div", { key: 'b3188ebad66c7228ad6611f182263bdfa9deff8f', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
+        return (h(Host, { key: '8894995294b9021b86d1b4ebc86f2cb2bd60871a' }, h("dialog", { key: '63be3184845ad41d03dd2ebdc990a65f7a48e27c', ref: (el) => (this.dialogEl = el), class: "flyout", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '3786a4603653d069fcb7e92ca0a4d05d98d0a286', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '5704a2497b84e2cbdac8199bb93abca519c97b68', class: "flyout-content" }, h("slot", { key: '7baba513445a86f677b71073870c7319d88d1e6b' })), this.renderFooter(), h("div", { key: 'df34388640730eca6f00cd2a9bb632e8e29467ce', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
     }
     static get is() { return "wm-flyout"; }
     static get encapsulation() { return "shadow"; }
@@ -172,6 +164,7 @@ export class Flyout {
         return {
             "eyebrow": {
                 "type": "string",
+                "attribute": "eyebrow",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -184,11 +177,13 @@ export class Flyout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "eyebrow",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "heading": {
                 "type": "string",
+                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -201,11 +196,13 @@ export class Flyout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "heading",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "subheading": {
                 "type": "string",
+                "attribute": "subheading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -218,11 +215,13 @@ export class Flyout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "subheading",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "flyoutWidth": {
                 "type": "string",
+                "attribute": "flyout-width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -235,12 +234,14 @@ export class Flyout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "flyout-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"45rem\""
             },
             "primaryText": {
                 "type": "string",
+                "attribute": "primary-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -253,11 +254,13 @@ export class Flyout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "primary-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "secondaryText": {
                 "type": "string",
+                "attribute": "secondary-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -270,11 +273,13 @@ export class Flyout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "infoText": {
                 "type": "string",
+                "attribute": "info-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -287,11 +292,13 @@ export class Flyout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "info-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "breadcrumb": {
                 "type": "string",
+                "attribute": "breadcrumb",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -304,11 +311,13 @@ export class Flyout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "breadcrumb",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "elementToFocus": {
                 "type": "string",
+                "attribute": "element-to-focus",
                 "mutable": false,
                 "complexType": {
                     "original": "\"primary\" | \"secondary\" | string",
@@ -321,12 +330,14 @@ export class Flyout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "element-to-focus",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -339,7 +350,8 @@ export class Flyout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             }

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

@@ -874,21 +874,28 @@
   flex-direction: column;
   font-size: 0.875rem;
 }
+:host .wrapper .label-wrapper {
+  display: flex;
+}
 :host .wrapper .label {
-  display: block;
+  display: inline-block;
   line-height: normal;
   font-weight: 600;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin-bottom: 0.25rem;
 }
-:host .wrapper .label .required {
+:host .wrapper .required {
+  display: inline-block;
   color: var(--wmcolor-text-required);
 }
 :host .wrapper.label-left {
   flex-direction: row;
 }
 :host .wrapper.label-left .label-wrapper {
-  line-height: 2.5rem;
+  height: fit-content;
+  margin-right: 0.75rem;
 }
 :host .wrapper.label-left .label-wrapper .label {
   display: flex;
@@ -896,7 +903,6 @@
   min-height: 2.5rem;
   white-space: normal;
   margin-bottom: 0;
-  margin-right: 0.75rem;
 }
 :host .wrapper.label-none label {
   position: absolute !important;
@@ -910,11 +916,11 @@
   white-space: nowrap !important;
   margin: -1px !important;
 }
-:host .wrapper.invalid .label {
+:host .wrapper.invalid .label-wrapper {
   color: var(--wmcolor-text-error);
   position: relative;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   content: "";
   display: block;
   background-color: var(--icon-fill, currentColor);
@@ -923,14 +929,14 @@
   -webkit-mask-size: 100%;
   mask-size: 100%;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   display: inline-block;
   margin-inline-start: 0.25rem;
-  vertical-align: middle;
+  align-self: center;
   flex-shrink: 0;
   transform: translateY(-1px);
 }