@dso-toolkit/core 33.2.0 → 33.3.0

package/dist/collection/components/tooltip/tooltip.css

@@ -1,8 +1,27 @@
 /* stylelint-disable value-keyword-case */
 /* stylelint-disable string-no-newline */
 /* stylelint-enable */
-:host(:not([hidden])) {
-  display: inline-block;
+:host(.hidden) {
+  visibility: hidden;
+}
+
+:host-context(dso-toggletip) {
+  color: red !important;
+}
+:host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow {
+  margin-left: 3px;
+}
+:host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow {
+  margin-top: 0;
+}
+:host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow {
+  margin-left: 3px;
+}
+:host-context(dso-toggletip) *[data-popper-placement=left] {
+  margin-right: -8px !important;
+}
+:host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow {
+  margin-top: 0;
 }
 
 *,
@@ -36,7 +55,7 @@
   z-index: 1070;
 }
 .tooltip.in {
-  opacity: 0.9;
+  opacity: 1;
 }
 .tooltip .tooltip-inner {
   background-color: #fff;
@@ -55,7 +74,6 @@
   border-color: transparent;
   border-style: solid;
   height: 0;
-  position: absolute;
   width: 0;
 }
 .tooltip[data-popper-placement=top] {
@@ -66,8 +84,9 @@
   border-top-color: #fff;
   border-width: 6px 6px 0;
   bottom: 0;
-  left: 50%;
-  margin-left: -6px;
+}
+.tooltip[data-popper-placement=top] .tooltip-arrow {
+  margin-left: -3px;
 }
 .tooltip[data-popper-placement=right] {
   margin-left: 3px;
@@ -77,8 +96,9 @@
   border-right-color: #fff;
   border-width: 6px 6px 6px 0;
   left: 0;
-  margin-top: -6px;
-  top: 50%;
+}
+.tooltip[data-popper-placement=right] .tooltip-arrow {
+  margin-top: -3px;
 }
 .tooltip[data-popper-placement=bottom] {
   margin-top: 3px;
@@ -87,10 +107,11 @@
 .tooltip[data-popper-placement=bottom] .tooltip-arrow {
   border-bottom-color: #fff;
   border-width: 0 6px 6px;
-  left: 50%;
-  margin-left: -6px;
   top: 0;
 }
+.tooltip[data-popper-placement=bottom] .tooltip-arrow {
+  margin-left: -3px;
+}
 .tooltip[data-popper-placement=left] {
   margin-left: -3px;
   padding: 0 6px;
@@ -98,7 +119,8 @@
 .tooltip[data-popper-placement=left] .tooltip-arrow {
   border-left-color: #fff;
   border-width: 6px 0 6px 6px;
-  margin-top: -6px;
   right: 0;
-  top: 50%;
+}
+.tooltip[data-popper-placement=left] .tooltip-arrow {
+  margin-top: -3px;
 }

package/dist/collection/components/tooltip/tooltip.js

@@ -1,4 +1,5 @@
-import { createPopper } from '@popperjs/core';
+import { beforeWrite, createPopper } from '@popperjs/core';
+import maxSize from 'popper-max-size-modifier';
 import { h, Component, Element, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import clsx from 'clsx';
 // Keep const in sync with $tooltip-transition-duration in @dso-toolkit/sources/tooltip.scss tooltip_root() mixin
@@ -18,6 +19,19 @@ export class Tooltip {
      */
     this.active = false;
     this.hidden = true;
+    this.applyMaxSize = {
+      name: 'applyMaxSize',
+      enabled: true,
+      phase: beforeWrite,
+      requires: ['maxSize'],
+      fn({ state }) {
+        let { width } = state.modifiersData.maxSize;
+        if (width < 160) {
+          width = 160;
+        }
+        state.styles.popper = Object.assign(Object.assign({}, state.styles.popper), { maxWidth: `${width}px` });
+      },
+    };
   }
   /**
    * Activate the tooltip (Sets the `active` attribute)
@@ -75,7 +89,8 @@ export class Tooltip {
     }
     this.target = this.getTarget();
     this.popper = createPopper(this.target, tooltip, {
-      placement: this.position
+      placement: this.position,
+      modifiers: [maxSize, this.applyMaxSize],
     });
     this.callbacks = {
       activate: () => (this.active = true),
@@ -107,9 +122,9 @@ export class Tooltip {
     }
   }
   render() {
-    return (h(Host, { hidden: this.hidden },
+    return (h(Host, { class: { 'hidden': this.hidden } },
       h("div", { class: clsx('tooltip', { in: this.active }), role: "tooltip" },
-        !this.noArrow && h("div", { class: "tooltip-arrow" }),
+        !this.noArrow && h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }),
         h("div", { class: clsx('tooltip-inner', { 'dso-small': this.small }) },
           h("slot", null)))));
   }

package/dist/collection/components/tooltip/tooltip.template.js

@@ -1,9 +1,7 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
 export function tooltipTemplate({ active, position, label, id }) {
-  return html `
-    <dso-tooltip position=${position} for=${ifDefined(id)} ?active=${active}>
-      ${label}
-    </dso-tooltip>
-  `;
+  return html `<dso-tooltip position=${position} for=${ifDefined(id)} ?active=${active}>
+    ${label}
+  </dso-tooltip>`;
 }

package/dist/custom-elements/index.d.ts

@@ -44,6 +44,12 @@ export const DsoDropdownMenu: {
   new (): DsoDropdownMenu;
 };
 
+interface DsoHeader extends Components.DsoHeader, HTMLElement {}
+export const DsoHeader: {
+  prototype: DsoHeader;
+  new (): DsoHeader;
+};
+
 interface DsoHelpcenterPanel extends Components.DsoHelpcenterPanel, HTMLElement {}
 export const DsoHelpcenterPanel: {
   prototype: DsoHelpcenterPanel;