@watermarkinsights/ripple 5.7.0-7 → 5.7.0-9

package/dist/collection/components/wm-modal-pss/wm-modal-pss-footer.js

@@ -0,0 +1,138 @@
+import { h } from "@stencil/core";
+export class ModalFooter {
+    constructor() {
+        this.secondaryText = "";
+        this.primaryText = "";
+        this.infoText = "";
+        this.primaryActionDisabled = false;
+        this.deleteStyle = false;
+    }
+    componentWillLoad() {
+        this.uid = this.el.parentElement.uid;
+        // Trap focus when user shift+tabs past first element in modal
+        // NB @Listen doesn't allow to listen on a specific element (the parent modal)
+        // if we listen to the whole doc each modal on the page reacts to every event
+        this.el.parentElement.addEventListener("focusLastElement", () => {
+            this.lastElement.focus();
+        });
+    }
+    emitParentPrimaryEvent() {
+        const parentModal = this.el.parentElement;
+        //@ts-ignore
+        parentModal.emitPrimaryEvent();
+    }
+    emitParentSecondaryEvent() {
+        const parentModal = this.el.parentElement;
+        //@ts-ignore
+        parentModal.emitSecondaryEvent();
+    }
+    render() {
+        return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
+    }
+    static get is() { return "wm-modal-pss-footer"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-modal-pss-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-modal-pss-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "secondaryText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "secondary-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "primaryText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "info-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "primaryActionDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-action-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "deleteStyle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "delete-style",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/wm-modal-pss/wm-modal-pss-header.css

@@ -0,0 +1,55 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+wm-modal-pss-header {
+  border-radius: 5px 5px 0 0px;
+  margin-bottom: -1px;
+}
+wm-modal-pss-header .wm-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+wm-modal-pss-header .wm-wrapper .title {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.125rem;
+  color: var(--wmcolor-modal-heading);
+  line-height: normal;
+}
+wm-modal-pss-header .wm-wrapper .title .subtitle {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: normal;
+}
+wm-modal-pss-header .wm-wrapper .title:focus {
+  outline: none;
+}

package/dist/collection/components/wm-modal-pss/wm-modal-pss-header.js

@@ -0,0 +1,81 @@
+import { h, Host } from "@stencil/core";
+export class ModalHeader {
+    constructor() {
+        this.heading = "";
+        this.subheading = "";
+    }
+    componentWillLoad() {
+        this.uid = this.el.parentElement.uid;
+        // Trap focus when user tabs past last element in modal
+        // NB @Listen doesn't allow to listen on a specific element (the parent modal)
+        // if we listen to the whole doc each modal on the page reacts to every event
+        this.el.parentElement.addEventListener("focusFirstElement", () => {
+            this.closeButtonEl.focus();
+        });
+    }
+    emitParentCloseEvent() {
+        const parentModal = this.el.parentElement;
+        //@ts-ignore
+        parentModal.emitCloseEvent();
+    }
+    // @Listen("click")
+    // directFocusOnClick() {
+    //   this.headingElement.tabIndex = 0;
+    //   this.headingElement.focus();
+    // }
+    render() {
+        return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: "Close", "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+    }
+    static get is() { return "wm-modal-pss-header"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-modal-pss-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-modal-pss-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "heading",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "subheading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "subheading",
+                "reflect": false,
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/wm-modal-pss/wm-modal-pss.css

@@ -0,0 +1,134 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+wm-modal-pss {
+  --wmcolor-modal-background: var(--wmcolor-background);
+  --wmcolor-modal-border: var(--wmcolor-border);
+  --wmcolor-modal-heading: var(--wmcolor-text);
+  --wmcolor-modal-overlay: var(--wmcolor-overlay);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2001;
+  width: 80vw;
+  max-width: 750px;
+  max-height: 80vh;
+  box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
+}
+wm-modal-pss * {
+  box-sizing: border-box;
+}
+wm-modal-pss > * {
+  width: 80vw;
+  max-width: 750px;
+  background: var(--wmcolor-modal-background);
+}
+wm-modal-pss > *:focus {
+  outline: none;
+}
+wm-modal-pss wm-modal-pss-header,
+wm-modal-pss wm-modal-pss-footer {
+  padding: 20px 30px;
+}
+wm-modal-pss wm-modal-pss-header {
+  z-index: 2003;
+}
+wm-modal-pss wm-modal-pss-footer {
+  z-index: 2003;
+}
+wm-modal-pss > :not(wm-modal-pss-header):not(wm-modal-pss-footer) {
+  max-height: calc(80vh - 166px);
+  z-index: 2002;
+}
+wm-modal-pss.wm-modal wm-modal-pss-header {
+  border-bottom: 1px solid var(--wmcolor-modal-border);
+}
+wm-modal-pss.wm-modal wm-modal-pss-footer {
+  border-top: 1px solid var(--wmcolor-modal-border);
+}
+@media only screen and (max-width: 768px) {
+  wm-modal-pss.wm-modal {
+    height: 100%;
+    max-height: none;
+    max-width: none;
+    width: 100vw;
+  }
+  wm-modal-pss.wm-modal > * {
+    max-width: none;
+    width: 100vw;
+  }
+  wm-modal-pss.wm-modal > *:not(wm-modal-pss-header):not(wm-modal-pss-footer) {
+    max-height: none;
+    height: calc(100vh - 166px);
+  }
+}
+wm-modal-pss.wm-dialog > :not(wm-modal-pss-header):not(wm-modal-pss-footer) {
+  padding: 0 30px 20px 30px;
+  font-size: 0.875rem;
+  border: none;
+}
+wm-modal-pss .overlay {
+  width: 100vw;
+  height: 100vh;
+  max-width: none;
+  max-height: none;
+  position: fixed !important;
+  top: -1;
+  bottom: 1;
+  left: -1;
+  right: 1;
+  transform: translate(0%, 0%);
+  background-color: var(--wmcolor-modal-overlay);
+  transition: opacity 0.5s ease-out;
+  z-index: 2000;
+}
+wm-modal-pss.hide {
+  visibility: hidden;
+}
+wm-modal-pss .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;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  margin: -1px !important;
+  top: 0;
+  left: 0;
+}