@dso-toolkit/core 44.0.0 → 45.0.0

package/dist/collection/components/header/header.css

@@ -105,6 +105,7 @@
 .logout .dso-tertiary:not([disabled]):hover {
   color: #676cb0;
   text-decoration: underline;
+  text-underline-position: under;
 }
 .login .dso-tertiary:not([disabled]):active,
 .logout .dso-tertiary:not([disabled]):active {
@@ -190,6 +191,24 @@
 .logout .dso-tertiary span:not(.sr-only) + svg.di {
   margin-left: 8px;
 }
+.login .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
+.login .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
+.login .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
+.login .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
+.login .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
+.login .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
+.login .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
+.login .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
+.logout .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
+.logout .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
+.logout .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
+.logout .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
+.logout .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
+.logout .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
+.logout .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
+.logout .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
+  margin-left: 0;
+}
 .login .dso-tertiary dso-icon,
 .login .dso-tertiary svg.di,
 .login .dso-tertiary span,
@@ -242,6 +261,10 @@ dso-dropdown-menu > .dso-tertiary::after,
 dso-dropdown-menu > .btn::after {
   content: "";
   display: inline-block;
+}
+dso-dropdown-menu > .dso-primary::after,
+dso-dropdown-menu > .dso-secondary::after,
+dso-dropdown-menu > .btn::after {
   margin-left: 8px;
 }
 dso-dropdown-menu > .dso-primary::after,
@@ -274,6 +297,7 @@ dso-dropdown-menu > .btn-link::after {
   height: 24px;
   vertical-align: top;
   width: 24px;
+  margin-left: 4px;
   position: relative;
   top: -2px;
 }

package/dist/collection/components/header/header.js

@@ -8,7 +8,6 @@ export class Header {
     this.useDropDownMenu = "auto";
     /** Used to show the login/logout option. 'none' renders nothing. */
     this.authStatus = 'none';
-    this.showDropDown = false;
     this.hasSubLogo = false;
     this.overflowMenuItems = 0;
     this.onWindowResize = debounce(() => {
@@ -22,7 +21,7 @@ export class Header {
   }
   clickHandler(e, type, options) {
     var _a, _b;
-    this.headerClick.emit({
+    this.dsoHeaderClick.emit({
       originalEvent: e,
       isModifiedEvent: e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey,
       type,
@@ -31,7 +30,7 @@ export class Header {
     });
   }
   ;
-  watchUseDropDownMenu(value) {
+  setShowDropDown(value) {
     if (value === "auto") {
       this.setDropDownMenu();
       return;
@@ -59,6 +58,9 @@ export class Header {
     }
     window.setTimeout(() => this.shrinkMenuToFit(), 0);
   }
+  componentDidLoad() {
+    this.setShowDropDown(this.useDropDownMenu);
+  }
   setOverflowMenu() {
     if (this.showDropDown) {
       return;
@@ -82,6 +84,10 @@ export class Header {
     window.removeEventListener("resize", this.onWindowResize);
   }
   render() {
+    // Prevent 'flickering' when useDropDownMenu = 'always'
+    if (this.showDropDown === undefined) {
+      return;
+    }
     return (h(Fragment, null,
       h("div", { class: clsx("dso-header", {
           ["use-drop-down"]: this.showDropDown,
@@ -304,8 +310,8 @@ export class Header {
     "overflowMenuItems": {}
   }; }
   static get events() { return [{
-      "method": "headerClick",
-      "name": "headerClick",
+      "method": "dsoHeaderClick",
+      "name": "dsoHeaderClick",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -331,6 +337,6 @@ export class Header {
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "useDropDownMenu",
-      "methodName": "watchUseDropDownMenu"
+      "methodName": "setShowDropDown"
     }]; }
 }

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

@@ -1,6 +1,6 @@
 import { html } from "lit-html";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, authStatus, loginUrl, logoutUrl, userProfileUrl, userProfileName, userHomeUrl, onHeaderClick, }) {
+export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, authStatus, loginUrl, logoutUrl, userProfileUrl, userProfileName, userHomeUrl, dsoHeaderClick, }) {
   return html `<dso-header
     .mainMenu=${mainMenu}
     use-drop-down-menu=${ifDefined(useDropDownMenu)}
@@ -10,7 +10,7 @@ export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, authS
     user-profile-url=${ifDefined(userProfileUrl)}
     user-profile-name=${ifDefined(userProfileName)}
     user-home-url=${ifDefined(userHomeUrl)}
-    @headerClick=${onHeaderClick}
+    @dsoHeaderClick=${dsoHeaderClick}
   >
     <div slot="logo"><img height="40" alt="Omgevingsloket" src="${logo}" /></div>
     ${subLogo ? html `<div slot="sub-logo"><img alt="Regels op de kaart" src="${subLogo}" /></div>` : undefined}