@dso-toolkit/core 32.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/collection/components/tree-view/tree-item.js

@@ -2,13 +2,14 @@ import { h, Fragment } from '@stencil/core';
 import clsx from 'clsx';
 export const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
   var _a, _b, _c;
-  return (h("li", { key: item.reference, class: clsx('tree-item', { 'has-child': item.hasItems }), role: 'none' },
+  return (h("li", { key: item.id, class: clsx('tree-item', { 'has-child': item.hasItems }), role: 'none' },
     h("div", { class: "tree-branch-control" }, item.hasItems
       ?
         h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) },
           h("dso-icon", { icon: item.open ? 'chevron-down' : 'chevron-right' }))
       : h("dso-icon", null)),
-    h("p", { class: "tree-content", tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
+    h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
+      item.selected && h("span", { class: "sr-only" }, "Resultaat: "),
       item.href
         ? h("a", { href: item.href, tabindex: "-1" }, item.label)
         : h("span", null, item.label), (_b = item.icons) === null || _b === void 0 ? void 0 :

package/dist/collection/components/tree-view/tree-view.css

@@ -19,25 +19,53 @@
   display: inline-block;
   margin: 8px 0;
 }
-:host .tree-content a, :host .tree-content a:visited {
-  color: #39870c;
+:host .tree-content.active {
+  font-weight: 700;
+}
+:host .tree-content.active:hover {
+  text-decoration: underline;
+}
+:host .tree-content.active a {
   text-decoration: none;
 }
-:host .tree-content a:hover, :host .tree-content a:focus {
-  color: #676cb0;
+:host .tree-content.selected {
+  color: #191919;
+  font-weight: 700;
   text-decoration: underline;
 }
+:host .tree-content.selected:hover, :host .tree-content.selected:focus {
+  text-decoration: none;
+}
+:host .tree-content a, :host .tree-content a:visited {
+  color: #191919;
+  text-decoration: underline;
+}
+:host .tree-content a:hover, :host .tree-content a:focus {
+  color: #191919;
+  text-decoration: none;
+}
 :host .tree-content a:active {
   text-decoration: none;
 }
 :host .tree-content dso-icon {
-  vertical-align: text-bottom;
   font-size: 0.75em;
   margin-left: 0.5em;
+  vertical-align: text-bottom;
 }
 
 *,
 *::after,
 *::before {
   box-sizing: border-box;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }

package/dist/collection/components/tree-view/tree-view.js

@@ -55,7 +55,7 @@ export class TreeView {
           return;
         }
         TreeView.setFocus(tree, contentElement);
-        this.clickItem.emit([...ancestors, item]);
+        this.clickItem.emit({ path: [...ancestors, item], originalEvent: event });
         return;
       }
       if (item.open) {
@@ -158,8 +158,8 @@ export class TreeView {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "TreeViewItem<string>[]",
-        "resolved": "TreeViewItem<string>[]",
+        "original": "TreeViewItem[]",
+        "resolved": "TreeViewItem[]",
         "references": {
           "TreeViewItem": {
             "location": "import",
@@ -186,8 +186,8 @@ export class TreeView {
         "text": "Emitted when a tree view item is opened.\nThe `detail` property of the `CustomEvent`\u00A0will contain the complete path of TreeViewItems from the\nroot to the item that is emitting the open event. The consumer of the event is responsible for updating\nthe TreeView's collection (usually set the open state on the last TreeViewItem in path)."
       },
       "complexType": {
-        "original": "TreeViewItem<string>[]",
-        "resolved": "TreeViewItem<string>[]",
+        "original": "TreeViewItem[]",
+        "resolved": "TreeViewItem[]",
         "references": {
           "TreeViewItem": {
             "location": "import",
@@ -206,8 +206,8 @@ export class TreeView {
         "text": "Emitted when a tree view item is closed.\nThe `detail` property of the `CustomEvent`\u00A0will contain the complete path of TreeViewItems from the\nroot to the item that is emitting the close event. The consumer of the event is responsible for updating\nthe TreeView's collection (usually set the closed state on the last TreeViewItem in path)."
       },
       "complexType": {
-        "original": "TreeViewItem<string>[]",
-        "resolved": "TreeViewItem<string>[]",
+        "original": "TreeViewItem[]",
+        "resolved": "TreeViewItem[]",
         "references": {
           "TreeViewItem": {
             "location": "import",
@@ -223,13 +223,13 @@ export class TreeView {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when a tree view item is clicked.\nThe `detail` property of the `CustomEvent`\u00A0will contain the complete path of TreeViewItems from the\nroot to the item that is emitting the clicked event."
+        "text": "Emitted when a tree view item is clicked.\nThe `detail` property of the `CustomEvent`\u00A0will contain an object with:\n`path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\n`originalEvent` = the original click event.\nThe consumer of the event is responsible for updating the TreeView's collection (usually set the active\nstate on the last TreeViewItem in path and clear all other active item states)."
       },
       "complexType": {
-        "original": "TreeViewItem<string>[]",
-        "resolved": "TreeViewItem<string>[]",
+        "original": "TreeViewPointerEvent",
+        "resolved": "TreeViewPointerEvent",
         "references": {
-          "TreeViewItem": {
+          "TreeViewPointerEvent": {
             "location": "import",
             "path": "./tree-view.interfaces"
           }

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;