@dso-toolkit/core 32.2.0 → 33.3.0

package/dist/collection/components/date-picker/date-picker.js

@@ -229,8 +229,7 @@ export class DsoDatePicker {
     };
     this.handleInputChange = (e) => {
       const target = e.target;
-      target.value = target.value.replace(DISALLOWED_CHARACTERS, "");
-      this.setValue(target.value);
+      this.setValue(target.value.replace(DISALLOWED_CHARACTERS, ""));
     };
     this.processFocusedDayNode = (element) => {
       this.focusedDayNode = element;
@@ -243,13 +242,12 @@ export class DsoDatePicker {
    * Component event handling.
    */
   handleDocumentClick(e) {
-    var _a;
     if (!this.open) {
       return;
     }
     const path = e.composedPath();
     for (const target of path) {
-      if (target instanceof Node && ((_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+      if (target instanceof Node && this.element.contains(target)) {
         return;
       }
     }
@@ -336,10 +334,7 @@ export class DsoDatePicker {
       event.valueAsDate = parseDutchDate(value);
     }
     if (event.valueAsDate) {
-      event.value = this.value = printDutchDate(event.valueAsDate);
-    }
-    else {
-      this.value = "";
+      event.value = printDutchDate(event.valueAsDate);
     }
     if (!event.valueAsDate && this.required) {
       event.error = "required";
@@ -347,9 +342,14 @@ export class DsoDatePicker {
     if (event.value && !event.valueAsDate) {
       event.error = "invalid";
     }
+    this.value = event.value;
     this.dateChange.emit(event);
   }
   componentDidLoad() {
+    const valueAsDate = parseDutchDate(this.value);
+    if (valueAsDate) {
+      this.value = printDutchDate(valueAsDate);
+    }
     if (this.dsoAutofocus) {
       this.setFocus();
     }
@@ -379,7 +379,7 @@ export class DsoDatePicker {
     return (h(Host, null,
       h("div", { class: "dso-date" },
         h("div", { class: "dso-date__input-wrapper" },
-          h("input", { class: "dso-date__input", value: formattedDate, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }),
+          h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }),
           h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) },
             h("span", { class: "dso-date__toggle-icon" },
               h("dso-icon", { icon: "calendar" })),
@@ -430,7 +430,7 @@ export class DsoDatePicker {
             h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
   }
   static get is() { return "dso-date-picker"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["date-picker.scss"]
   }; }

package/dist/collection/components/dropdown-menu/dropdown-menu.css

@@ -1,6 +1,10 @@
 /* stylelint-disable value-keyword-case */
 /* stylelint-disable string-no-newline */
 /* stylelint-enable */
+:host(:focus) {
+  outline: none;
+}
+
 :host {
   --di-check-wit: url("data:image/svg+xml,%3csvg id='check' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z'/%3e %3c/svg%3e");
   --di-chevron-down: url("data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e");

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -107,6 +107,7 @@ export class DropdownMenu {
     }
   }
   openPopup() {
+    this.host.setAttribute("tabindex", "-1");
     this.host.addEventListener("keydown", this.keyDownListener);
     this.host.addEventListener("focusout", this.focusOutListener);
     this.button.setAttribute("aria-expanded", "true");
@@ -116,11 +117,24 @@ export class DropdownMenu {
     this.host.removeEventListener("keydown", this.keyDownListener);
     this.host.removeEventListener("focusout", this.focusOutListener);
     this.button.setAttribute("aria-expanded", "false");
+    this.host.removeAttribute("tabindex");
     this.tabbables.forEach((tabbable) => tabbable.removeEventListener("click", this.escape));
   }
+  getActiveElement(root = document) {
+    const activeEl = root.activeElement;
+    if (!activeEl) {
+      return null;
+    }
+    if (activeEl.shadowRoot) {
+      return this.getActiveElement(activeEl.shadowRoot);
+    }
+    else {
+      return activeEl;
+    }
+  }
   tabInPopup(direction) {
     const tabs = this.tabbables;
-    const currentIndex = tabs.findIndex((e) => e === document.activeElement);
+    const currentIndex = tabs.findIndex((e) => e === this.getActiveElement());
     let nextIndex = currentIndex + direction;
     if (nextIndex >= tabs.length) {
       nextIndex = 0;

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

@@ -0,0 +1,439 @@
+/* stylelint-disable value-keyword-case */
+/* stylelint-disable string-no-newline */
+/* stylelint-enable */
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
+:host {
+  --di-chevron-down-bosgroen: url("data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e");
+  --di-chevron-up-bosgroen: url("data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e");
+  display: block;
+}
+
+.dso-header {
+  border-bottom: 1px solid #ccc;
+  display: flex;
+  flex-wrap: wrap;
+}
+@media screen and (min-width: 768px) {
+  .dso-header {
+    align-items: center;
+  }
+}
+@media screen and (max-width: 991px) {
+  .dso-header.use-drop-down {
+    flex-wrap: nowrap;
+  }
+}
+
+.logo-container {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+
+@media screen and (min-width: 768px) {
+  .sub-logo {
+    margin-left: 24px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .sub-logo {
+    flex-basis: 100%;
+  }
+}
+
+.login,
+.logout {
+  margin-right: 16px;
+}
+
+.profile a,
+.logout a,
+.login a {
+  text-decoration: none;
+  color: #39870c;
+  font-weight: 600;
+}
+.profile a:hover, .profile a:focus,
+.logout a:hover,
+.logout a:focus,
+.login a:hover,
+.login a:focus {
+  text-decoration: none;
+}
+.profile a:active,
+.logout a:active,
+.login a:active {
+  text-decoration: underline;
+}
+
+.dso-header-session {
+  display: flex;
+  margin-left: auto;
+}
+.dso-header-session .profile a {
+  margin-left: 8px;
+}
+.dso-header-session .profile + .logout {
+  border-left: 3px solid #ccc;
+  margin-left: 16px;
+  padding-left: 16px;
+}
+
+.dso-navbar {
+  flex-basis: 100%;
+}
+
+dso-dropdown-menu > .dso-primary::after,
+dso-dropdown-menu > .dso-secondary::after,
+dso-dropdown-menu > .dso-tertiary::after,
+dso-dropdown-menu > .btn::after {
+  content: "";
+  display: inline-block;
+  margin-left: 8px;
+}
+dso-dropdown-menu > .dso-primary::after,
+dso-dropdown-menu > .btn-primary::after {
+  background: var(--dso-icon, var(--di-chevron-down-wit)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+dso-dropdown-menu > .dso-secondary::after,
+dso-dropdown-menu > .btn-default::after {
+  background: var(--dso-icon, var(--di-chevron-down)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+dso-dropdown-menu > .dso-secondary:hover::after,
+dso-dropdown-menu > .btn-default:hover::after {
+  --dso-icon: var(--di-chevron-down-wit);
+}
+dso-dropdown-menu > .dso-tertiary::after,
+dso-dropdown-menu > .btn-link::after {
+  background: var(--dso-icon, var(--di-chevron-down)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+  position: relative;
+  top: -2px;
+}
+dso-dropdown-menu > .dso-tertiary:hover::after,
+dso-dropdown-menu > .btn-link:hover::after {
+  --dso-icon: var(--di-chevron-down-scampi);
+}
+dso-dropdown-menu .dso-group-label {
+  color: #999;
+  font-size: 0.875em;
+  font-weight: 400;
+  margin: 0;
+  padding: 4px 20px 2px;
+  text-transform: uppercase;
+}
+dso-dropdown-menu ul {
+  margin: 0;
+  padding: 0;
+}
+dso-dropdown-menu ul:not(:last-child) {
+  border-bottom: 1px solid #e5e5e5;
+  margin-bottom: 11px;
+  padding-bottom: 11px;
+}
+dso-dropdown-menu .dso-dropdown-options {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);
+  font-size: 16px;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000;
+}
+dso-dropdown-menu .dso-dropdown-options li {
+  list-style: none;
+}
+dso-dropdown-menu .dso-dropdown-options li a:visited {
+  color: #191919;
+}
+dso-dropdown-menu .dso-dropdown-options li a,
+dso-dropdown-menu .dso-dropdown-options li button {
+  text-decoration: none;
+  clear: both;
+  color: #191919;
+  display: block;
+  font-weight: 400;
+  line-height: 1.5;
+  padding: 3px 20px;
+  text-decoration: none;
+  white-space: nowrap;
+  /* stylelint-disable-line declaration-property-value-disallowed-list */
+}
+dso-dropdown-menu .dso-dropdown-options li a:hover, dso-dropdown-menu .dso-dropdown-options li a:focus, dso-dropdown-menu .dso-dropdown-options li a:active,
+dso-dropdown-menu .dso-dropdown-options li button:hover,
+dso-dropdown-menu .dso-dropdown-options li button:focus,
+dso-dropdown-menu .dso-dropdown-options li button:active {
+  text-decoration: underline;
+}
+dso-dropdown-menu .dso-dropdown-options li a:hover, dso-dropdown-menu .dso-dropdown-options li a:focus,
+dso-dropdown-menu .dso-dropdown-options li button:hover,
+dso-dropdown-menu .dso-dropdown-options li button:focus {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+  text-decoration: none;
+}
+dso-dropdown-menu .dso-dropdown-options li button {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  text-align: inherit;
+  width: 100%;
+}
+dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options {
+  right: 0;
+}
+dso-dropdown-menu[open] > .dso-primary::after,
+dso-dropdown-menu[open] > .btn-primary::after {
+  --dso-icon: var(--di-chevron-up-wit);
+}
+dso-dropdown-menu[open] > .dso-secondary::after,
+dso-dropdown-menu[open] > .btn-default::after {
+  --dso-icon: var(--di-chevron-up);
+}
+dso-dropdown-menu[open] > .dso-secondary:hover::after,
+dso-dropdown-menu[open] > .btn-default:hover::after {
+  --dso-icon: var(--di-chevron-up-wit);
+}
+dso-dropdown-menu[open] > .dso-tertiary::after,
+dso-dropdown-menu[open] > .btn-link::after {
+  --dso-icon: var(--di-chevron-up);
+}
+dso-dropdown-menu[open] > .dso-tertiary:hover::after,
+dso-dropdown-menu[open] > .btn-link:hover::after {
+  --dso-icon: var(--di-chevron-up-scampi);
+}
+dso-dropdown-menu[open] button::after {
+  background: var(--dso-icon, var(--di-chevron-up-bosgroen)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.2em;
+  vertical-align: top;
+  width: 1.2em;
+}
+dso-dropdown-menu[checkable] .dso-group-label {
+  padding-left: 40px;
+}
+dso-dropdown-menu[checkable] li a,
+dso-dropdown-menu[checkable] li button {
+  padding-left: 40px;
+}
+dso-dropdown-menu[checkable] li.dso-checked a:not(:focus),
+dso-dropdown-menu[checkable] li.dso-checked button:not(:focus) {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+dso-dropdown-menu[checkable] li.dso-checked a::before,
+dso-dropdown-menu[checkable] li.dso-checked button::before {
+  background: var(--dso-icon, var(--di-check-wit)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  content: "";
+  display: block;
+  float: left;
+  margin-left: -32px;
+  margin-right: 8px;
+}
+dso-dropdown-menu button {
+  align-items: flex-end;
+  background-color: transparent;
+  border: 0;
+  display: flex;
+  font-family: Asap, sans-serif;
+  padding-right: 32px;
+}
+dso-dropdown-menu button::after {
+  background: var(--dso-icon, var(--di-chevron-down-bosgroen)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.2em;
+  vertical-align: top;
+  width: 1.2em;
+  content: "";
+  display: inline-block;
+  margin-left: 8px;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+@media screen and (max-width: 991px) {
+  dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options {
+    right: -16px;
+  }
+}
+@media screen and (max-width: 767px) {
+  dso-dropdown-menu {
+    top: 12px;
+  }
+}
+dso-dropdown-menu .dso-dropdown-options {
+  border: 0;
+  border-radius: 0;
+}
+dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {
+  width: 320px;
+}
+@media screen and (max-width: 991px) {
+  dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {
+    width: 100vw;
+  }
+}
+dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a {
+  color: #275937;
+  font-size: 1.25rem;
+  padding: 16px;
+}
+dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li.dso-active a {
+  font-weight: 600;
+}
+dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
+  border-top: 1px solid #ccc;
+}
+
+.dropdown {
+  margin-left: auto;
+}
+@media screen and (max-width: 767px) {
+  .dropdown dso-dropdown-menu {
+    top: 28px;
+  }
+}
+.dropdown dso-dropdown-menu .dso-dropdown-options {
+  top: calc(100% + 29px);
+}
+@media screen and (max-width: 767px) {
+  .dropdown dso-dropdown-menu .dso-dropdown-options {
+    top: 72px;
+  }
+}
+.dropdown dso-dropdown-menu[open] button::after {
+  background: var(--dso-icon, var(--di-chevron-up)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.dropdown dso-dropdown-menu button {
+  color: #39870c;
+  font-size: 16px;
+  font-weight: 600;
+}
+.dropdown dso-dropdown-menu button:hover, .dropdown dso-dropdown-menu button:active {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.dropdown dso-dropdown-menu button::after {
+  background: var(--dso-icon, var(--di-chevron-down)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+
+.dso-nav {
+  align-items: end;
+  column-gap: 32px;
+  display: flex;
+  list-style: none;
+  margin-bottom: 0;
+  margin-top: 0;
+  padding-left: 0;
+}
+.dso-nav > li {
+  margin-bottom: 4px;
+}
+.dso-nav > li > a {
+  display: block;
+}
+.dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited {
+  color: #275937;
+}
+.dso-nav > li.dso-active, .dso-nav > li.is-active {
+  margin-bottom: 0;
+}
+.dso-nav > li.dso-active > a, .dso-nav > li.is-active > a {
+  border-bottom: 4px solid #8b4a6a;
+  font-weight: bold;
+}
+.dso-nav.dso-nav-main > li > a {
+  text-decoration: none;
+  font-size: 1.25em;
+  line-height: 1;
+  margin-top: 8px;
+  padding: 16px 0;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  white-space: nowrap;
+}
+.dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus, .dso-nav.dso-nav-main > li > a:active {
+  text-decoration: underline;
+}
+.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options {
+  top: calc(100% + 3px);
+}
+.dso-nav.dso-nav-main dso-dropdown-menu button {
+  font-size: 1.25em;
+  line-height: 1;
+  margin-top: 8px;
+  padding: 16px 0;
+  align-items: center;
+  color: #275937;
+  padding-right: 32px;
+}
+.dso-nav.dso-nav-main dso-dropdown-menu button:hover, .dso-nav.dso-nav-main dso-dropdown-menu button:active {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.dso-nav.dso-nav-main dso-dropdown-menu button::after {
+  top: auto;
+  transform: none;
+}
+.dso-nav.dso-nav-sub > li {
+  display: inline-block;
+}
+.dso-nav.dso-nav-sub > li > a {
+  text-decoration: none;
+  font-size: 16px;
+  margin-top: 4px;
+  padding: 4px 8px 3px;
+}
+.dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus, .dso-nav.dso-nav-sub > li > a:active {
+  text-decoration: underline;
+}
+.dso-nav .menu-user-home {
+  margin-left: auto;
+}
+.dso-nav .menu-user-home dso-icon {
+  height: 1em;
+  margin-right: 8px;
+  position: relative;
+  top: -2px;
+  width: 1.2em;
+}