@dso-toolkit/core 33.3.0 → 34.2.0

package/dist/esm/{index-61410be2.js → index-d54cae76.js}

@@ -72,6 +72,7 @@ const HYDRATE_ID = 's-id';
 const HYDRATED_STYLE_ID = 'sty-id';
 const HYDRATE_CHILD_ID = 'c-id';
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
 const createTime = (fnName, tagName = '') => {
     {
         return () => {
@@ -421,16 +422,36 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
                 catch (e) { }
             }
+            /**
+             * Need to manually update attribute if:
+             * - memberName is not an attribute
+             * - if we are rendering the host element in order to reflect attribute
+             * - if it's a SVG, since properties might not work in <svg>
+             * - if the newValue is null/undefined or 'false'.
+             */
+            let xlink = false;
+            {
+                if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
+                    memberName = ln;
+                    xlink = true;
+                }
+            }
             if (newValue == null || newValue === false) {
                 if (newValue !== false || elm.getAttribute(memberName) === '') {
-                    {
+                    if (xlink) {
+                        elm.removeAttributeNS(XLINK_NS, memberName);
+                    }
+                    else {
                         elm.removeAttribute(memberName);
                     }
                 }
             }
             else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
                 newValue = newValue === true ? '' : newValue;
-                {
+                if (xlink) {
+                    elm.setAttributeNS(XLINK_NS, memberName, newValue);
+                }
+                else {
                     elm.setAttribute(memberName, newValue);
                 }
             }
@@ -1188,6 +1209,9 @@ const postUpdateComponent = (hostRef) => {
         }
     }
     else {
+        {
+            safeCall(instance, 'componentDidUpdate');
+        }
         endPostUpdate();
     }
     {

package/dist/esm/index.esm-a1362957.js

@@ -0,0 +1,262 @@
+/*!
+* tabbable 5.2.1
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
+var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
+var matches = typeof Element === 'undefined' ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+
+var getCandidates = function getCandidates(el, includeContainer, filter) {
+  var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
+
+  if (includeContainer && matches.call(el, candidateSelector)) {
+    candidates.unshift(el);
+  }
+
+  candidates = candidates.filter(filter);
+  return candidates;
+};
+
+var isContentEditable = function isContentEditable(node) {
+  return node.contentEditable === 'true';
+};
+
+var getTabindex = function getTabindex(node) {
+  var tabindexAttr = parseInt(node.getAttribute('tabindex'), 10);
+
+  if (!isNaN(tabindexAttr)) {
+    return tabindexAttr;
+  } // Browsers do not return `tabIndex` correctly for contentEditable nodes;
+  // so if they don't have a tabindex attribute specifically set, assume it's 0.
+
+
+  if (isContentEditable(node)) {
+    return 0;
+  } // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
+  //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
+  //  yet they are still part of the regular tab order; in FF, they get a default
+  //  `tabIndex` of 0; since Chrome still puts those elements in the regular tab
+  //  order, consider their tab index to be 0.
+
+
+  if ((node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {
+    return 0;
+  }
+
+  return node.tabIndex;
+};
+
+var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
+  return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
+};
+
+var isInput = function isInput(node) {
+  return node.tagName === 'INPUT';
+};
+
+var isHiddenInput = function isHiddenInput(node) {
+  return isInput(node) && node.type === 'hidden';
+};
+
+var isDetailsWithSummary = function isDetailsWithSummary(node) {
+  var r = node.tagName === 'DETAILS' && Array.prototype.slice.apply(node.children).some(function (child) {
+    return child.tagName === 'SUMMARY';
+  });
+  return r;
+};
+
+var getCheckedRadio = function getCheckedRadio(nodes, form) {
+  for (var i = 0; i < nodes.length; i++) {
+    if (nodes[i].checked && nodes[i].form === form) {
+      return nodes[i];
+    }
+  }
+};
+
+var isTabbableRadio = function isTabbableRadio(node) {
+  if (!node.name) {
+    return true;
+  }
+
+  var radioScope = node.form || node.ownerDocument;
+
+  var queryRadios = function queryRadios(name) {
+    return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
+  };
+
+  var radioSet;
+
+  if (typeof window !== 'undefined' && typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {
+    radioSet = queryRadios(window.CSS.escape(node.name));
+  } else {
+    try {
+      radioSet = queryRadios(node.name);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s', err.message);
+      return false;
+    }
+  }
+
+  var checked = getCheckedRadio(radioSet, node.form);
+  return !checked || checked === node;
+};
+
+var isRadio = function isRadio(node) {
+  return isInput(node) && node.type === 'radio';
+};
+
+var isNonTabbableRadio = function isNonTabbableRadio(node) {
+  return isRadio(node) && !isTabbableRadio(node);
+};
+
+var isHidden = function isHidden(node, displayCheck) {
+  if (getComputedStyle(node).visibility === 'hidden') {
+    return true;
+  }
+
+  var isDirectSummary = matches.call(node, 'details>summary:first-of-type');
+  var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
+
+  if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
+    return true;
+  }
+
+  if (!displayCheck || displayCheck === 'full') {
+    while (node) {
+      if (getComputedStyle(node).display === 'none') {
+        return true;
+      }
+
+      node = node.parentElement;
+    }
+  } else if (displayCheck === 'non-zero-area') {
+    var _node$getBoundingClie = node.getBoundingClientRect(),
+        width = _node$getBoundingClie.width,
+        height = _node$getBoundingClie.height;
+
+    return width === 0 && height === 0;
+  }
+
+  return false;
+}; // form fields (nested) inside a disabled fieldset are not focusable/tabbable
+//  unless they are in the _first_ <legend> element of the top-most disabled
+//  fieldset
+
+
+var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
+  if (isInput(node) || node.tagName === 'SELECT' || node.tagName === 'TEXTAREA' || node.tagName === 'BUTTON') {
+    var parentNode = node.parentElement;
+
+    while (parentNode) {
+      if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {
+        // look for the first <legend> as an immediate child of the disabled
+        //  <fieldset>: if the node is in that legend, it'll be enabled even
+        //  though the fieldset is disabled; otherwise, the node is in a
+        //  secondary/subsequent legend, or somewhere else within the fieldset
+        //  (however deep nested) and it'll be disabled
+        for (var i = 0; i < parentNode.children.length; i++) {
+          var child = parentNode.children.item(i);
+
+          if (child.tagName === 'LEGEND') {
+            if (child.contains(node)) {
+              return false;
+            } // the node isn't in the first legend (in doc order), so no matter
+            //  where it is now, it'll be disabled
+
+
+            return true;
+          }
+        } // the node isn't in a legend, so no matter where it is now, it'll be disabled
+
+
+        return true;
+      }
+
+      parentNode = parentNode.parentElement;
+    }
+  } // else, node's tabbable/focusable state should not be affected by a fieldset's
+  //  enabled/disabled state
+
+
+  return false;
+};
+
+var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
+  if (node.disabled || isHiddenInput(node) || isHidden(node, options.displayCheck) || // For a details element with a summary, the summary element gets the focus
+  isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
+    return false;
+  }
+
+  return true;
+};
+
+var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
+  if (!isNodeMatchingSelectorFocusable(options, node) || isNonTabbableRadio(node) || getTabindex(node) < 0) {
+    return false;
+  }
+
+  return true;
+};
+
+var tabbable = function tabbable(el, options) {
+  options = options || {};
+  var regularTabbables = [];
+  var orderedTabbables = [];
+  var candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
+  candidates.forEach(function (candidate, i) {
+    var candidateTabindex = getTabindex(candidate);
+
+    if (candidateTabindex === 0) {
+      regularTabbables.push(candidate);
+    } else {
+      orderedTabbables.push({
+        documentOrder: i,
+        tabIndex: candidateTabindex,
+        node: candidate
+      });
+    }
+  });
+  var tabbableNodes = orderedTabbables.sort(sortOrderedTabbables).map(function (a) {
+    return a.node;
+  }).concat(regularTabbables);
+  return tabbableNodes;
+};
+
+var focusable = function focusable(el, options) {
+  options = options || {};
+  var candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
+  return candidates;
+};
+
+var isTabbable = function isTabbable(node, options) {
+  options = options || {};
+
+  if (!node) {
+    throw new Error('No node provided');
+  }
+
+  if (matches.call(node, candidateSelector) === false) {
+    return false;
+  }
+
+  return isNodeMatchingSelectorTabbable(options, node);
+};
+
+var focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');
+
+var isFocusable = function isFocusable(node, options) {
+  options = options || {};
+
+  if (!node) {
+    throw new Error('No node provided');
+  }
+
+  if (matches.call(node, focusableCandidateSelector) === false) {
+    return false;
+  }
+
+  return isNodeMatchingSelectorFocusable(options, node);
+};
+
+export { isFocusable as a, focusable as f, isTabbable as i, tabbable as t };

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-61410be2.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-d54cae76.js';
 
 /*
  Stencil Client Patch Esm v2.9.0 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["dso-map-base-layers",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]]], options);
+  return bootstrapLazy([["dso-map-base-layers",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"mainSize":[32]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]]], options);
   });
 };
 

package/dist/types/components/anchor/anchor.template.d.ts

@@ -0,0 +1,2 @@
+import { Anchor } from '@dso-toolkit/sources';
+export declare function anchorTemplate({ icon, iconMode, label, modifier, url }: Anchor): import("lit-html").TemplateResult<1>;

package/dist/types/components/button/button.template.d.ts

@@ -0,0 +1,2 @@
+import { Button, ButtonAnchor } from '@dso-toolkit/sources';
+export declare function buttonTemplate(button: Button | ButtonAnchor): import("lit-html").TemplateResult<1>;

package/dist/types/components/context/context.template.d.ts

@@ -0,0 +1,3 @@
+import { Context } from '@dso-toolkit/sources';
+import { TemplateResult } from 'lit-html';
+export declare function contextTemplate({ label, type, content, children }: Context<TemplateResult>): TemplateResult<1>;

package/dist/types/components/date-picker/date-picker.d.ts

@@ -3,7 +3,7 @@ export declare type DsoDatePickerChangeEvent = {
   component: "dso-date-picker";
   valueAsDate: Date | undefined;
   value: string;
-  error?: "invalid" | "required";
+  error?: "invalid" | "required" | "min-range" | "max-range";
 };
 export declare type DsoDatePickerFocusEvent = {
   component: "dso-date-picker";
@@ -161,7 +161,9 @@ export declare class DsoDatePicker implements ComponentInterface {
   private handleMonthSelect;
   private handleYearSelect;
   private handleInputChange;
+  private handleKeyPress;
   private setValue;
+  private prepareEvent;
   private processFocusedDayNode;
   componentDidLoad(): void;
   /**

package/dist/types/components/date-picker/date-picker.template.d.ts

@@ -1,5 +1,5 @@
 import { DatePicker } from '@dso-toolkit/sources';
 import { TemplateResult } from 'lit-html';
-export declare function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus }: DatePicker): TemplateResult<1>;
+export declare function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus, direction }: DatePicker): TemplateResult<1>;
 export declare function datePickerWithLabelTemplate(datePicker: TemplateResult, id: string, label: string): TemplateResult<1>;
 export declare function datePickerShowByScriptingTemplate(datePicker: TemplateResult, id: string): TemplateResult<1>;

package/dist/types/components/definition-list/definition-list.template.d.ts

@@ -0,0 +1,3 @@
+import { DefinitionList } from '@dso-toolkit/sources';
+import { TemplateResult } from 'lit-html';
+export declare function definitionListTemplate({ modifier, definitions, useSrOnlyColon }: DefinitionList<TemplateResult>): TemplateResult<1>;

package/dist/types/components/label-group/label-group.template.d.ts

@@ -0,0 +1,2 @@
+import { LabelGroup } from '@dso-toolkit/sources';
+export declare function labelGroupTemplate({ labels }: LabelGroup): import("lit-html").TemplateResult<1>;

package/dist/types/components/list/list.template.d.ts

@@ -0,0 +1,3 @@
+import { List } from '@dso-toolkit/sources';
+import { TemplateResult } from 'lit-html';
+export declare function listTemplate({ type, items, modifier }: List): TemplateResult<1>;

package/dist/types/components/map-base-layers/map-base-layers.d.ts

@@ -1,8 +1,13 @@
-import { EventEmitter } from '../../stencil-public-runtime';
+import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
 import { BaseLayer, BaseLayerChangeEvent } from './map-base-layers.interfaces';
-export declare class MapBaseLayers {
+export declare class MapBaseLayers implements ComponentInterface {
+  previousBaselayers: BaseLayer[] | undefined;
+  selectableRefs: {
+    [id: number]: HTMLDsoSelectableElement;
+  };
   baseLayerChange: EventEmitter<BaseLayerChangeEvent>;
   baseLayers: BaseLayer[];
   baseLayerChangeHandler(baseLayer: BaseLayer): void;
+  componentDidRender(): void;
   render(): any;
 }

package/dist/types/components/map-base-layers/map-base-layers.interfaces.d.ts

@@ -3,6 +3,7 @@ export interface BaseLayer {
   name: string;
   checked?: boolean;
   disabled?: boolean;
+  info?: string;
 }
 export interface BaseLayerChangeEvent {
   activeBaseLayer: BaseLayer;

package/dist/types/components/map-overlays/map-overlays.d.ts

@@ -1,9 +1,14 @@
-import { EventEmitter } from '../../stencil-public-runtime';
+import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
 import { Overlay, OverlayChangeEvent } from './map-overlays.interfaces';
 import { SelectableChangeEvent } from '../selectable/selectable';
-export declare class MapOverlays {
+export declare class MapOverlays implements ComponentInterface {
+  previousOverlays: Overlay[] | undefined;
+  selectableRefs: {
+    [id: number]: HTMLDsoSelectableElement;
+  };
   overlays: Overlay[];
   toggleOverlay: EventEmitter<OverlayChangeEvent>;
   overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>): void;
+  componentDidRender(): void;
   render(): any;
 }

package/dist/types/components/map-overlays/map-overlays.interfaces.d.ts

@@ -3,6 +3,7 @@ export interface Overlay {
   name: string;
   checked?: boolean;
   disabled?: boolean;
+  info?: string;
 }
 export interface OverlayChangeEvent {
   overlay: Overlay;

package/dist/types/components/selectable/selectable.d.ts

@@ -16,6 +16,7 @@ export declare class Selectable {
   change: EventEmitter<SelectableChangeEvent>;
   host: HTMLElement;
   infoActive: boolean;
+  toggleInfo(active?: boolean): Promise<void>;
   private mutationObserver?;
   private fallbackIdentifier;
   private input;

package/dist/types/components/viewer-grid/viewer-grid-document-header.template.d.ts

@@ -0,0 +1,3 @@
+import { ViewerGridDocumentHeader } from "@dso-toolkit/sources";
+import { TemplateResult } from "lit-html";
+export declare function viewerGridDocumentHeaderTemplate({ title, type, features, featuresAction, mapAction, featuresOpen, owner, status, }: ViewerGridDocumentHeader<TemplateResult>): TemplateResult<1>;

package/dist/types/components/viewer-grid/viewer-grid-document-list-item.template.d.ts

@@ -0,0 +1,3 @@
+import { ViewerGridDocumentListItem } from "@dso-toolkit/sources";
+import { TemplateResult } from "lit-html";
+export declare function viewerGridDocumentListItem({ title, type, owner, status, }: ViewerGridDocumentListItem<TemplateResult>): TemplateResult<1>;

package/dist/types/components/viewer-grid/viewer-grid-filterblok.template.d.ts

@@ -0,0 +1,3 @@
+import { ViewerGridFilterblok } from "@dso-toolkit/sources";
+import { TemplateResult } from "lit-html";
+export declare function viewerGridFilterblok({ title, address, activeFilters, onAllOptions, }: ViewerGridFilterblok<TemplateResult>): TemplateResult<1>;

package/dist/types/components/viewer-grid/viewer-grid-filterpanel-buttons.d.ts

@@ -0,0 +1,6 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+export interface ViewerGridFilterpanelProps {
+  onApply: (mouseEvent: MouseEvent) => void;
+  onCancel: (mouseEvent: MouseEvent) => void;
+}
+export declare const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelProps>;

package/dist/types/components/viewer-grid/viewer-grid.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { FocusTrap } from "focus-trap";
+declare type MainSize = "small" | "medium" | "large";
+export interface FilterpanelEvent {
+  originalEvent: MouseEvent;
+}
+export declare class ViewerGrid {
+  filterpanelOpen: boolean;
+  overlayOpen: boolean;
+  mainSize: MainSize;
+  closeOverlay: EventEmitter<MouseEvent | KeyboardEvent>;
+  filterpanelCancel: EventEmitter<FilterpanelEvent>;
+  filterpanelApply: EventEmitter<FilterpanelEvent>;
+  host: HTMLElement;
+  filterpanel: HTMLElement | undefined;
+  filterpanelSlot: HTMLElement | null;
+  filterpanelFocustrap: FocusTrap | undefined;
+  overlay: HTMLDivElement | undefined;
+  overlaySlot: HTMLDivElement | null;
+  overlayFocustrap: FocusTrap | undefined;
+  shrinkMain: () => void;
+  expandMain: () => void;
+  updateFocusTrap(): void;
+  keyDownListener: (event: KeyboardEvent) => void;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  componentDidUpdate(): void;
+  disconnectedCallback(): void;
+  handleFilterpanelApply(mouseEvent: MouseEvent): void;
+  handleFilterpanelCancel(mouseEvent: MouseEvent): void;
+  render(): any;
+}
+export {};

package/dist/types/components/viewer-grid/viewer-grid.template.d.ts

@@ -0,0 +1,3 @@
+import { ViewerGrid } from "@dso-toolkit/sources";
+import { TemplateResult } from "lit-html";
+export declare function viewerGridTemplate({ filterpanel, main, map, overlay, noOverlay, filterpanelOpen, overlayOpen, filterpanelApply, filterpanelCancel, closeOverlay, }: ViewerGrid<TemplateResult>): TemplateResult<1>;

package/dist/types/components.d.ts

@@ -14,6 +14,7 @@ import { Overlay, OverlayChangeEvent } from "./components/map-overlays/map-overl
 import { ContentAnchor } from "./components/ozon-content/ozon-content.interfaces";
 import { SelectableChangeEvent } from "./components/selectable/selectable";
 import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
+import { FilterpanelEvent } from "./components/viewer-grid/viewer-grid";
 export namespace Components {
     interface DsoAlert {
         /**
@@ -183,6 +184,7 @@ export namespace Components {
         "invalid"?: boolean;
         "name"?: string;
         "required"?: boolean;
+        "toggleInfo": (active?: boolean | undefined) => Promise<void>;
         "type": 'checkbox' | 'radio';
         "value": string;
     }
@@ -232,6 +234,10 @@ export namespace Components {
          */
         "collection": TreeViewItem[];
     }
+    interface DsoViewerGrid {
+        "filterpanelOpen": boolean;
+        "overlayOpen": boolean;
+    }
 }
 declare global {
     interface HTMLDsoAlertElement extends Components.DsoAlert, HTMLStencilElement {
@@ -378,6 +384,12 @@ declare global {
         prototype: HTMLDsoTreeViewElement;
         new (): HTMLDsoTreeViewElement;
     };
+    interface HTMLDsoViewerGridElement extends Components.DsoViewerGrid, HTMLStencilElement {
+    }
+    var HTMLDsoViewerGridElement: {
+        prototype: HTMLDsoViewerGridElement;
+        new (): HTMLDsoViewerGridElement;
+    };
     interface HTMLElementTagNameMap {
         "dso-alert": HTMLDsoAlertElement;
         "dso-attachments-counter": HTMLDsoAttachmentsCounterElement;
@@ -403,6 +415,7 @@ declare global {
         "dso-toggletip": HTMLDsoToggletipElement;
         "dso-tooltip": HTMLDsoTooltipElement;
         "dso-tree-view": HTMLDsoTreeViewElement;
+        "dso-viewer-grid": HTMLDsoViewerGridElement;
     }
 }
 declare namespace LocalJSX {
@@ -656,6 +669,13 @@ declare namespace LocalJSX {
          */
         "onOpenItem"?: (event: CustomEvent<TreeViewItem[]>) => void;
     }
+    interface DsoViewerGrid {
+        "filterpanelOpen"?: boolean;
+        "onCloseOverlay"?: (event: CustomEvent<MouseEvent | KeyboardEvent>) => void;
+        "onFilterpanelApply"?: (event: CustomEvent<FilterpanelEvent>) => void;
+        "onFilterpanelCancel"?: (event: CustomEvent<FilterpanelEvent>) => void;
+        "overlayOpen"?: boolean;
+    }
     interface IntrinsicElements {
         "dso-alert": DsoAlert;
         "dso-attachments-counter": DsoAttachmentsCounter;
@@ -681,6 +701,7 @@ declare namespace LocalJSX {
         "dso-toggletip": DsoToggletip;
         "dso-tooltip": DsoTooltip;
         "dso-tree-view": DsoTreeView;
+        "dso-viewer-grid": DsoViewerGrid;
     }
 }
 export { LocalJSX as JSX };
@@ -711,6 +732,7 @@ declare module "@stencil/core" {
             "dso-toggletip": LocalJSX.DsoToggletip & JSXBase.HTMLAttributes<HTMLDsoToggletipElement>;
             "dso-tooltip": LocalJSX.DsoTooltip & JSXBase.HTMLAttributes<HTMLDsoTooltipElement>;
             "dso-tree-view": LocalJSX.DsoTreeView & JSXBase.HTMLAttributes<HTMLDsoTreeViewElement>;
+            "dso-viewer-grid": LocalJSX.DsoViewerGrid & JSXBase.HTMLAttributes<HTMLDsoViewerGridElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "33.3.0",
+  "version": "34.2.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",
@@ -50,6 +50,7 @@
     "cross-env": "^7.0.3",
     "debounce": "^1.2.1",
     "escape-string-regexp": "^5.0.0",
+    "focus-trap": "^6.7.3",
     "http-proxy-middleware": "^2.0.1",
     "lit-html": "^2.0.1",
     "mini-svg-data-uri": "1.4.3",