@duetds/components 6.10.4 → 6.11.0

package/lib/collection/components/duet-tooltip/duet-tooltip-popup.css

@@ -0,0 +1,183 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: absolute;
+  z-index: 950;
+}
+
+.duet-tooltip {
+  width: 282px;
+  min-height: 48px;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25;
+  color: rgb(0, 41, 77);
+  visibility: hidden;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(225, 227, 230);
+  border-radius: 4px;
+  box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.07);
+  opacity: 0;
+  transition: 300ms ease;
+  transform-origin: 100% 100%;
+}
+.duet-tooltip.duet-theme-turva {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: rgb(23, 28, 58);
+  border-color: rgb(228, 228, 230);
+  box-shadow: 0 2px 10px 0 rgba(117, 117, 117, 0.13);
+}
+.duet-tooltip .arrow {
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  pointer-events: none;
+}
+.duet-tooltip .arrow.bottom, .duet-tooltip .arrow.bottom-start, .duet-tooltip .arrow.bottom-end {
+  top: -20px;
+}
+.duet-tooltip .arrow-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.duet-tooltip .arrow-container::after {
+  position: absolute;
+  z-index: 200;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  content: "";
+}
+.duet-tooltip .arrow-container::before {
+  position: absolute;
+  z-index: 100;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  content: "";
+}
+.duet-tooltip .arrow-container.top::after, .duet-tooltip .arrow-container.top-start::after, .duet-tooltip .arrow-container.top-end::after {
+  bottom: 2px;
+  left: 2px;
+  border: 10px solid transparent;
+  border-top: 10px solid rgb(255, 255, 255);
+}
+.duet-tooltip .arrow-container.top::before, .duet-tooltip .arrow-container.top-start::before, .duet-tooltip .arrow-container.top-end::before {
+  bottom: -1px;
+  left: 1px;
+  border: 11px solid transparent;
+  border-top: 11px solid rgb(225, 227, 230);
+}
+.duet-theme-turva .duet-tooltip .arrow-container.top::before, .duet-theme-turva .duet-tooltip .arrow-container.top-start::before, .duet-theme-turva .duet-tooltip .arrow-container.top-end::before {
+  border-top: 11px solid rgb(228, 228, 230);
+}
+.duet-tooltip .arrow-container.bottom::after, .duet-tooltip .arrow-container.bottom-start::after, .duet-tooltip .arrow-container.bottom-end::after {
+  bottom: 1px;
+  left: 2px;
+  border: 10px solid transparent;
+  border-bottom: 10px solid rgb(255, 255, 255);
+}
+.duet-tooltip .arrow-container.bottom::before, .duet-tooltip .arrow-container.bottom-start::before, .duet-tooltip .arrow-container.bottom-end::before {
+  bottom: 1px;
+  left: 1px;
+  border: 11px solid transparent;
+  border-bottom: 11px solid rgb(225, 227, 230);
+}
+.duet-theme-turva .duet-tooltip .arrow-container.bottom::before, .duet-theme-turva .duet-tooltip .arrow-container.bottom-start::before, .duet-theme-turva .duet-tooltip .arrow-container.bottom-end::before {
+  border-top: 11px solid rgb(228, 228, 230);
+}
+.duet-tooltip.duet-tooltip-has-label {
+  right: auto !important;
+  left: 0;
+  width: 282px !important;
+  transform-origin: 0 0 !important;
+}
+.duet-tooltip.duet-tooltip-active {
+  visibility: visible;
+  opacity: 1;
+  transition-property: transform, opacity;
+}
+
+.duet-tooltip-content-area {
+  padding: 20px !important;
+  width: 100%;
+  padding-right: 25px !important;
+  overflow-y: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+  border-radius: 4px;
+  -webkit-overflow-scrolling: touch;
+}
+.duet-tooltip-content-area:focus {
+  outline: none;
+}
+:host(.user-is-tabbing) .duet-tooltip-content-area:focus {
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+}
+:host(.user-is-tabbing) .duet-theme-turva .duet-tooltip-content-area:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+}
+.duet-tooltip-content-area::-webkit-scrollbar {
+  width: 4px;
+}
+.duet-tooltip-content-area::-webkit-scrollbar-track {
+  border-radius: 4px;
+}
+.duet-tooltip-content-area::-webkit-scrollbar-thumb {
+  background: rgb(225, 227, 230);
+  border-radius: 4px;
+}
+.duet-theme-turva .duet-tooltip-content-area::-webkit-scrollbar-thumb {
+  background: rgb(228, 228, 230);
+}
+
+.duet-tooltip-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 17px;
+  height: 17px;
+  min-height: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  line-height: normal;
+  color: rgb(0, 41, 77);
+  cursor: pointer;
+  background: rgb(245, 248, 250);
+  border-radius: 50%;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.duet-tooltip-close:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(0, 119, 179);
+}
+.duet-theme-turva .duet-tooltip-close:focus {
+  color: rgb(23, 28, 58);
+  box-shadow: 0 0 0 2px rgb(23, 28, 58);
+}

package/lib/collection/components/duet-tooltip/duet-tooltip-popup.js

@@ -0,0 +1,251 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+/**
+ * @internal
+ * This component is solely for internal use by duet-tooltip.
+ */
+export class DuetTooltipPopup {
+  constructor() {
+    this.handleCloseClick = (evt) => {
+      this.tooltipPopupClosed.emit({
+        originalEvent: evt,
+        component: "duet-tooltip-popup",
+      });
+    };
+    this.theme = "";
+    this.active = undefined;
+    this.tooltipId = undefined;
+    this.arrowStyles = undefined;
+    this.placement = undefined;
+    this.accessibleCloseLabel = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  async getArrowElement() {
+    return this.arrowEl;
+  }
+  async getContentElement() {
+    return this.contentEl;
+  }
+  async setFocusOnContentElement() {
+    this.contentEl.focus();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        "duet-tooltip": true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-tooltip-active": this.active === true,
+      }, onClick: e => e.stopPropagation() }, h("div", { ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", null)), h("div", { ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { class: { "arrow-container": true, [this.placement]: true } })), h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", null, this.accessibleCloseLabel)))));
+  }
+  static get is() { return "duet-tooltip-popup"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-tooltip-popup.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-tooltip-popup.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the tooltip."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "active",
+        "reflect": false
+      },
+      "tooltipId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tooltip-id",
+        "reflect": false
+      },
+      "arrowStyles": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ top: string | undefined; left: string | undefined }",
+          "resolved": "{ top: string; left: string; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placement",
+        "reflect": false
+      },
+      "accessibleCloseLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "accessible-close-label",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tooltipPopupClosed",
+        "name": "tooltipPopupClosed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Component event handling."
+        },
+        "complexType": {
+          "original": "DuetTooltipPopupEvent",
+          "resolved": "{ originalEvent?: Event; component: \"duet-tooltip-popup\"; }",
+          "references": {
+            "DuetTooltipPopupEvent": {
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tooltip/duet-tooltip-popup.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getArrowElement": {
+        "complexType": {
+          "signature": "() => Promise<HTMLElement>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<HTMLElement>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "getContentElement": {
+        "complexType": {
+          "signature": "() => Promise<HTMLElement>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<HTMLElement>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setFocusOnContentElement": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

package/lib/collection/components/duet-tooltip/duet-tooltip.css

@@ -29,106 +29,6 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-.duet-tooltip {
-  position: absolute;
-  z-index: 950;
-  display: none;
-  width: 282px;
-  min-height: 48px;
-  max-height: 340px;
-  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25;
-  color: rgb(0, 41, 77);
-  visibility: hidden;
-  background: rgb(255, 255, 255);
-  border: 1px solid rgb(225, 227, 230);
-  border-radius: 4px;
-  box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.07);
-  opacity: 0;
-  transition: 300ms ease;
-  transform-origin: 100% 100%;
-}
-.duet-tooltip.duet-theme-turva {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(23, 28, 58);
-  border-color: rgb(228, 228, 230);
-  box-shadow: 0 2px 10px 0 rgba(117, 117, 117, 0.13);
-}
-.duet-tooltip .arrow {
-  position: absolute;
-  width: 22px;
-  height: 22px;
-  pointer-events: none;
-}
-.duet-tooltip .arrow.bottom, .duet-tooltip .arrow.bottom-start, .duet-tooltip .arrow.bottom-end {
-  top: -21px;
-}
-.duet-tooltip .arrow-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-.duet-tooltip .arrow-container::after {
-  position: absolute;
-  z-index: 200;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-  content: "";
-}
-.duet-tooltip .arrow-container::before {
-  position: absolute;
-  z-index: 100;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-  content: "";
-}
-.duet-tooltip .arrow-container.top::after, .duet-tooltip .arrow-container.top-start::after, .duet-tooltip .arrow-container.top-end::after {
-  bottom: 2px;
-  left: 2px;
-  border: 10px solid transparent;
-  border-top: 10px solid rgb(255, 255, 255);
-}
-.duet-tooltip .arrow-container.top::before, .duet-tooltip .arrow-container.top-start::before, .duet-tooltip .arrow-container.top-end::before {
-  bottom: -1px;
-  left: 1px;
-  border: 11px solid transparent;
-  border-top: 11px solid rgb(225, 227, 230);
-}
-.duet-theme-turva .duet-tooltip .arrow-container.top::before, .duet-theme-turva .duet-tooltip .arrow-container.top-start::before, .duet-theme-turva .duet-tooltip .arrow-container.top-end::before {
-  border-top: 11px solid rgb(228, 228, 230);
-}
-.duet-tooltip .arrow-container.bottom::after, .duet-tooltip .arrow-container.bottom-start::after, .duet-tooltip .arrow-container.bottom-end::after {
-  bottom: 1px;
-  left: 2px;
-  border: 10px solid transparent;
-  border-bottom: 10px solid rgb(255, 255, 255);
-}
-.duet-tooltip .arrow-container.bottom::before, .duet-tooltip .arrow-container.bottom-start::before, .duet-tooltip .arrow-container.bottom-end::before {
-  bottom: 1px;
-  left: 1px;
-  border: 11px solid transparent;
-  border-bottom: 11px solid rgb(225, 227, 230);
-}
-.duet-theme-turva .duet-tooltip .arrow-container.bottom::before, .duet-theme-turva .duet-tooltip .arrow-container.bottom-start::before, .duet-theme-turva .duet-tooltip .arrow-container.bottom-end::before {
-  border-top: 11px solid rgb(228, 228, 230);
-}
-.duet-tooltip.duet-tooltip-has-label {
-  right: auto !important;
-  left: 0;
-  width: 282px !important;
-  transform-origin: 0 0 !important;
-}
-.duet-tooltip.duet-tooltip-active {
-  visibility: visible;
-  opacity: 1;
-  transition-property: transform, opacity;
-}
-
 .duet-tooltip-button {
   z-index: 100;
   display: inline-block;
@@ -175,40 +75,6 @@
   margin-right: 0;
 }
 
-.duet-tooltip-scrollable {
-  padding: 20px !important;
-  width: 100%;
-  max-height: 250px;
-  padding-right: 25px !important;
-  overflow-y: auto;
-  -webkit-hyphens: auto;
-  hyphens: auto;
-  border-radius: 4px;
-  -webkit-overflow-scrolling: touch;
-}
-.duet-tooltip-scrollable:focus {
-  outline: none;
-}
-:host(.user-is-tabbing) .duet-tooltip-scrollable:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
-:host(.user-is-tabbing) .duet-theme-turva .duet-tooltip-scrollable:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
-.duet-tooltip-scrollable::-webkit-scrollbar {
-  width: 4px;
-}
-.duet-tooltip-scrollable::-webkit-scrollbar-track {
-  border-radius: 4px;
-}
-.duet-tooltip-scrollable::-webkit-scrollbar-thumb {
-  background: rgb(225, 227, 230);
-  border-radius: 4px;
-}
-.duet-theme-turva .duet-tooltip-scrollable::-webkit-scrollbar-thumb {
-  background: rgb(228, 228, 230);
-}
-
 .duet-tooltip-label {
   position: relative;
   z-index: 100;
@@ -225,33 +91,4 @@
 }
 .duet-theme-turva .duet-tooltip-label {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.duet-tooltip-close {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 17px;
-  height: 17px;
-  min-height: 0 !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  line-height: normal;
-  color: rgb(0, 41, 77);
-  cursor: pointer;
-  background: rgb(245, 248, 250);
-  border-radius: 50%;
-  -webkit-appearance: none;
-  appearance: none;
-}
-.duet-tooltip-close:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px rgb(0, 119, 179);
-}
-.duet-theme-turva .duet-tooltip-close:focus {
-  color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 2px rgb(23, 28, 58);
 }