@dso-toolkit/core 43.1.0 → 45.0.0

package/dist/collection/components/autosuggest/autosuggest.js

@@ -10,8 +10,10 @@ export class Autosuggest {
      *
      * The `type` is used to style the suggestion. `item` can be use to reference
      * the original object that was used to create the suggestion.
+     *
+     * The value should be null when no suggestions have been fetched.
      */
-    this.suggestions = [];
+    this.suggestions = null;
     /**
      * Shows progress indicator when fetching results.
      */
@@ -31,7 +33,7 @@ export class Autosuggest {
     this.inputId = v4();
     this.labelId = v4();
     this.debouncedEmitValue = debounce((value) => {
-      this.changeEmitter.emit(value);
+      this.dsoChange.emit(value);
       this.debouncedShowLoading();
     }, 200);
     this.debouncedShowLoading = debounce(() => {
@@ -131,7 +133,7 @@ export class Autosuggest {
     }
     this.input.setAttribute("role", "combobox");
     this.input.setAttribute("aria-haspopup", "listbox");
-    this.input.setAttribute("aria-owns", this.listboxId);
+    this.input.setAttribute("aria-controls", this.listboxId);
     this.input.setAttribute("aria-expanded", "false");
     this.input.setAttribute("autocomplete", "off");
     this.input.setAttribute("aria-autocomplete", "list");
@@ -168,12 +170,18 @@ export class Autosuggest {
     this.input.setAttribute("aria-activedescendant", this.listboxItemId(suggestion));
   }
   selectFirstSuggestion() {
+    if (!this.suggestions) {
+      return;
+    }
     this.selectedSuggestion = this.suggestions[0];
     if (this.selectedSuggestion) {
       this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
     }
   }
   selectLastSuggestion() {
+    if (!this.suggestions) {
+      return;
+    }
     this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];
     if (this.selectedSuggestion) {
       this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
@@ -181,6 +189,9 @@ export class Autosuggest {
   }
   selectNextSuggestion() {
     var _a;
+    if (!this.suggestions) {
+      return;
+    }
     const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;
     this.selectedSuggestion = (_a = this.suggestions[index + 1]) !== null && _a !== void 0 ? _a : this.suggestions[0];
     if (this.selectedSuggestion) {
@@ -189,6 +200,9 @@ export class Autosuggest {
   }
   selectPreviousSuggestion() {
     var _a;
+    if (!this.suggestions) {
+      return;
+    }
     const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;
     this.selectedSuggestion = (_a = this.suggestions[index - 1]) !== null && _a !== void 0 ? _a : this.suggestions[this.suggestions.length - 1];
     if (this.selectedSuggestion) {
@@ -197,12 +211,14 @@ export class Autosuggest {
   }
   resetSelectedSuggestion() {
     this.showLoading = !this.loadingDelayed;
+    this.notFound = false;
     this.selectedSuggestion = undefined;
     this.input.setAttribute('aria-activedescendant', '');
   }
   openSuggestions(selectSuggestion) {
-    this.showSuggestions = this.suggestions.length > 0;
-    this.notFound = this.suggestions.length === 0;
+    var _a, _b, _c;
+    this.showSuggestions = (_a = (this.suggestions && this.suggestions.length > 0)) !== null && _a !== void 0 ? _a : false;
+    this.notFound = (_c = ((_b = this.suggestions) === null || _b === void 0 ? void 0 : _b.length) === 0) !== null && _c !== void 0 ? _c : false;
     this.input.setAttribute("aria-expanded", (this.showSuggestions || this.notFound).toString());
     if (this.showSuggestions && selectSuggestion === 'first') {
       this.selectFirstSuggestion();
@@ -219,14 +235,17 @@ export class Autosuggest {
   }
   pickSelectedValue() {
     if (this.selectedSuggestion && this.showSuggestions) {
-      this.selectEmitter.emit(this.selectedSuggestion);
+      this.dsoSelect.emit(this.selectedSuggestion);
     }
     else {
-      this.searchEmitter.emit(this.input.value);
+      this.dsoSearch.emit(this.input.value);
     }
     this.closeSuggestions();
   }
   listboxItemId(suggestion) {
+    if (!this.suggestions) {
+      return '';
+    }
     return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;
   }
   render() {
@@ -236,7 +255,7 @@ export class Autosuggest {
       this.loading && this.showLoading
         ? h("div", { class: "autosuggest-progress-box" },
           h("dso-progress-indicator", { label: this.loadingLabel }))
-        : h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions && !this.notFound }, this.showSuggestions
+        : h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions && !this.notFound }, this.showSuggestions && this.suggestions
           ? this.suggestions.map((suggestion) => (h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value },
             h("span", { class: "value" }, this.markTerms(suggestion.value, terms)),
             suggestion.type
@@ -262,8 +281,8 @@ export class Autosuggest {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "Suggestion[]",
-        "resolved": "Suggestion[]",
+        "original": "Suggestion[] | null",
+        "resolved": "Suggestion[] | null",
         "references": {
           "Suggestion": {
             "location": "local"
@@ -274,9 +293,9 @@ export class Autosuggest {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The suggestions for the value of the slotted input element. Optionally a\nSuggestion can have a `type` and `item`.\n\nThe `type` is used to style the suggestion. `item` can be use to reference\nthe original object that was used to create the suggestion."
+        "text": "The suggestions for the value of the slotted input element. Optionally a\nSuggestion can have a `type` and `item`.\n\nThe `type` is used to style the suggestion. `item` can be use to reference\nthe original object that was used to create the suggestion.\n\nThe value should be null when no suggestions have been fetched."
       },
-      "defaultValue": "[]"
+      "defaultValue": "null"
     },
     "loading": {
       "type": "boolean",
@@ -374,7 +393,7 @@ export class Autosuggest {
     "showLoading": {}
   }; }
   static get events() { return [{
-      "method": "selectEmitter",
+      "method": "dsoSelect",
       "name": "dsoSelect",
       "bubbles": true,
       "cancelable": true,
@@ -393,7 +412,7 @@ export class Autosuggest {
         }
       }
     }, {
-      "method": "changeEmitter",
+      "method": "dsoChange",
       "name": "dsoChange",
       "bubbles": true,
       "cancelable": true,
@@ -408,7 +427,7 @@ export class Autosuggest {
         "references": {}
       }
     }, {
-      "method": "searchEmitter",
+      "method": "dsoSearch",
       "name": "dsoSearch",
       "bubbles": true,
       "cancelable": true,

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

@@ -1,12 +1,12 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch, suggestOnFocus, loading, loadingLabel, loadingDelayed, notFoundLabel }, children) {
+export function autosuggestTemplate({ suggestions, dsoSelect, dsoChange, dsoSearch, suggestOnFocus, loading, loadingLabel, loadingDelayed, notFoundLabel }, children) {
   return html `
     <dso-autosuggest
       .suggestions=${suggestions}
-      @dsoSelect=${onSelect}
-      @dsoChange=${onChange}
-      @dsoSearch=${onSearch}
+      @dsoSelect=${dsoSelect}
+      @dsoChange=${dsoChange}
+      @dsoSearch=${dsoSearch}
       ?suggest-on-focus=${suggestOnFocus}
       ?loading=${loading}
       loading-label=${ifDefined(loadingLabel)}

package/dist/collection/components/badge/badge.css

@@ -21,38 +21,43 @@
 
 .dso-badge {
   background-color: #666;
+  border: 1px solid #666;
   border-radius: 1em;
   color: #fff;
   display: inline-block;
   font-size: 0.875em;
   line-height: 1;
-  min-width: calc(1 + 8px);
+  min-width: 1.5rem;
   padding: 4px 8px;
   text-align: center;
 }
 .dso-badge.badge-info {
   background-color: #6ca4d9;
+  border-color: #6ca4d9;
   color: #191919;
 }
 .dso-badge.badge-primary {
   background-color: #275937;
+  border-color: #275937;
   color: #fff;
 }
 .dso-badge.badge-success {
   background-color: #39870c;
+  border-color: #39870c;
   color: #fff;
 }
 .dso-badge.badge-warning {
   background-color: #dcd400;
+  border-color: #dcd400;
   color: #191919;
 }
 .dso-badge.badge-danger {
   background-color: #ce3f51;
+  border-color: #ce3f51;
   color: #fff;
 }
 .dso-badge.badge-outline {
   background-color: #fff;
+  border-color: #191919;
   color: #191919;
-  outline: 1px solid #191919;
-  outline-offset: -1px;
 }

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

@@ -7,7 +7,7 @@ export function bannerTemplate({ status, richContent, onClick }) {
         <div class="row">
           <div class="col-sm-12">
             ${richContent}
-            <button type="button" class="btn btn-link" @click=${onClick}>
+            <button type="button" class="dso-tertiary" @click=${onClick}>
               <span class="sr-only">Sluiten</span>
               ${iconTemplate({ icon: 'times' })}
             </button>

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

@@ -387,7 +387,7 @@ export class DsoDatePicker {
     const event = this.prepareEvent(value);
     this.value = typeof value === 'string' ? value : event.value;
     if (this.value !== this.previousValue) {
-      this.dateChange.emit(event);
+      this.dsoDateChange.emit(event);
       this.previousValue = this.value;
     }
   }
@@ -672,8 +672,8 @@ export class DsoDatePicker {
     "visible": {}
   }; }
   static get events() { return [{
-      "method": "dateChange",
-      "name": "dateChange",
+      "method": "dsoDateChange",
+      "name": "dsoDateChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

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

@@ -1,9 +1,9 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-export function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus, direction }) {
+export function datePickerTemplate({ id, dsoDateChange, value, min, max, disabled, autofocus, direction }) {
   return html `
     <dso-date-picker
-      @dateChange=${(e) => onDateChange(e)}
+      @dsoDateChange=${(e) => dsoDateChange === null || dsoDateChange === void 0 ? void 0 : dsoDateChange(e)}
       direction=${ifDefined(direction)}
       identifier=${ifDefined(id)}
       value=${ifDefined(value || undefined)}
@@ -14,18 +14,3 @@ export function datePickerTemplate({ id, onDateChange, value, min, max, disabled
     ></dso-date-picker>
   `;
 }
-export function datePickerWithLabelTemplate(datePicker, id, label) {
-  return html `
-    <label for=${id}>${label}</label>
-    ${datePicker}
-  `;
-}
-export function datePickerShowByScriptingTemplate(datePicker, id) {
-  return html `
-    ${datePicker}
-
-    <button type="button" @click=${() => { var _a; return (_a = document.querySelector(`dso-date-picker[identifier="${id}"]`)) === null || _a === void 0 ? void 0 : _a.show(); }}>
-      Open
-    </button>
-  `;
-}

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

@@ -1,6 +1,6 @@
-import { html } from "lit-html";
+import { html, nothing } from "lit-html";
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-export function dropdownMenuTemplate({ id, button, dropdownAlign, isCheckable, children }) {
+export function dropdownMenuTemplate({ id, button, dropdownAlign, isCheckable, groups }) {
   return html `
     <dso-dropdown-menu
       dropdown-align=${ifDefined(dropdownAlign)}
@@ -10,7 +10,26 @@ export function dropdownMenuTemplate({ id, button, dropdownAlign, isCheckable, c
         <span>${button.label}</span>
       </button>
       <div class="dso-dropdown-options">
-        ${children}
+        ${groups.map(group => html `
+          ${group.header
+    ? html `
+              <h2 class="dso-group-label">${group.header}</h2>
+            `
+    : nothing}
+          <ul>
+            ${group.items.map(item => html `
+              <li class=${ifDefined(item.checked ? 'dso-checked' : undefined)}>
+                ${item.type === 'anchor'
+    ? html `
+                    <a href=${item.url}>${item.label}</a>
+                  `
+    : html `
+                    <button type="button">${item.label}</button>
+                  `}
+              </li>
+            `)}
+          </ul>
+        `)}
       </div>
     </dso-dropdown-menu>
   `;

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}