@dso-toolkit/core 52.0.3 → 53.1.0

package/dist/cjs/{index.esm-03a9e0b4.js → index.esm-0e935715.js}

@@ -1,17 +1,66 @@
 'use strict';
 
 /*!
-* tabbable 6.0.1
+* tabbable 6.1.2
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
-var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]:not(slot)', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
+// NOTE: separate `:not()` selectors has broader browser support than the newer
+//  `:not([inert], [inert] *)` (Feb 2023)
+// CAREFUL: JSDom does not support `:not([inert] *)` as a selector; using it causes
+//  the entire query to fail, resulting in no nodes found, which will break a lot
+//  of things... so we have to rely on JS to identify nodes inside an inert container
+var candidateSelectors = ['input:not([inert])', 'select:not([inert])', 'textarea:not([inert])', 'a[href]:not([inert])', 'button:not([inert])', '[tabindex]:not(slot):not([inert])', 'audio[controls]:not([inert])', 'video[controls]:not([inert])', '[contenteditable]:not([contenteditable="false"]):not([inert])', 'details>summary:first-of-type:not([inert])', 'details:not([inert])'];
 var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
 var NoElement = typeof Element === 'undefined';
 var matches = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
 var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
-  return element.getRootNode();
+  var _element$getRootNode;
+  return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);
 } : function (element) {
-  return element.ownerDocument;
+  return element === null || element === void 0 ? void 0 : element.ownerDocument;
+};
+
+/**
+ * Determines if a node is inert or in an inert ancestor.
+ * @param {Element} [node]
+ * @param {boolean} [lookUp] If true and `node` is not inert, looks up at ancestors to
+ *  see if any of them are inert. If false, only `node` itself is considered.
+ * @returns {boolean} True if inert itself or by way of being in an inert ancestor.
+ *  False if `node` is falsy.
+ */
+var isInert = function isInert(node, lookUp) {
+  var _node$getAttribute;
+  if (lookUp === void 0) {
+    lookUp = true;
+  }
+  // CAREFUL: JSDom does not support inert at all, so we can't use the `HTMLElement.inert`
+  //  JS API property; we have to check the attribute, which can either be empty or 'true';
+  //  if it's `null` (not specified) or 'false', it's an active element
+  var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, 'inert');
+  var inert = inertAtt === '' || inertAtt === 'true';
+
+  // NOTE: this could also be handled with `node.matches('[inert], :is([inert] *)')`
+  //  if it weren't for `matches()` not being a function on shadow roots; the following
+  //  code works for any kind of node
+  // CAREFUL: JSDom does not appear to support certain selectors like `:not([inert] *)`
+  //  so it likely would not support `:is([inert] *)` either...
+  var result = inert || lookUp && node && isInert(node.parentNode); // recursive
+
+  return result;
+};
+
+/**
+ * Determines if a node's content is editable.
+ * @param {Element} [node]
+ * @returns True if it's content-editable; false if it's not or `node` is falsy.
+ */
+var isContentEditable = function isContentEditable(node) {
+  var _node$getAttribute2;
+  // CAREFUL: JSDom does not support the `HTMLElement.isContentEditable` API so we have
+  //  to use the attribute directly to check for this, which can either be empty or 'true';
+  //  if it's `null` (not specified) or 'false', it's a non-editable element
+  var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, 'contenteditable');
+  return attValue === '' || attValue === 'true';
 };
 
 /**
@@ -21,6 +70,11 @@ var getRootNode = !NoElement && Element.prototype.getRootNode ? function (elemen
  * @returns {Element[]}
  */
 var getCandidates = function getCandidates(el, includeContainer, filter) {
+  // even if `includeContainer=false`, we still have to check it for inertness because
+  //  if it's inert, all its children are inert
+  if (isInert(el)) {
+    return [];
+  }
   var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
   if (includeContainer && matches.call(el, candidateSelector)) {
     candidates.unshift(el);
@@ -68,6 +122,11 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
   var elementsToCheck = Array.from(elements);
   while (elementsToCheck.length) {
     var element = elementsToCheck.shift();
+    if (isInert(element, false)) {
+      // no need to look up since we're drilling down
+      // anything inside this container will also be inert
+      continue;
+    }
     if (element.tagName === 'SLOT') {
       // add shadow dom slot scope (slot itself cannot be focusable)
       var assigned = element.assignedElements();
@@ -92,7 +151,11 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
       var shadowRoot = element.shadowRoot ||
       // check for an undisclosed shadow
       typeof options.getShadowRoot === 'function' && options.getShadowRoot(element);
-      var validShadowRoot = !options.shadowRootFilter || options.shadowRootFilter(element);
+
+      // no inert look up because we're already drilling down and checking for inertness
+      //  on the way down, so all containers to this root node should have already been
+      //  vetted as non-inert
+      var validShadowRoot = !isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));
       if (shadowRoot && validShadowRoot) {
         // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed
         //  shadow exists, so look at light dom children as fallback BUT create a scope for any
@@ -131,7 +194,7 @@ var getTabindex = function getTabindex(node, isScope) {
     // isScope is positive for custom element with shadow root or slot that by default
     // have tabIndex -1, but need to be sorted by document order in order for their
     // content to be inserted in the correct position
-    if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || node.isContentEditable) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {
+    if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {
       return 0;
     }
   }
@@ -191,7 +254,7 @@ var isNonTabbableRadio = function isNonTabbableRadio(node) {
 
 // determines if a node is ultimately attached to the window's document
 var isNodeAttached = function isNodeAttached(node) {
-  var _nodeRootHost;
+  var _nodeRoot;
   // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
   //  (but NOT _the_ document; see second 'If' comment below for more).
   // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
@@ -211,15 +274,28 @@ var isNodeAttached = function isNodeAttached(node) {
   //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
   //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
   //  node is actually detached.
-  var nodeRootHost = getRootNode(node).host;
-  var attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && _nodeRootHost.ownerDocument.contains(nodeRootHost) || node.ownerDocument.contains(node));
-  while (!attached && nodeRootHost) {
-    var _nodeRootHost2;
-    // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,
-    //  which means we need to get the host's host and check if that parent host is contained
-    //  in (i.e. attached to) the document
-    nodeRootHost = getRootNode(nodeRootHost).host;
-    attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && _nodeRootHost2.ownerDocument.contains(nodeRootHost));
+  // NOTE: If `nodeRootHost` or `node` happens to be the `document` itself (which is possible
+  //  if a tabbable/focusable node was quickly added to the DOM, focused, and then removed
+  //  from the DOM as in https://github.com/focus-trap/focus-trap-react/issues/905), then
+  //  `ownerDocument` will be `null`, hence the optional chaining on it.
+  var nodeRoot = node && getRootNode(node);
+  var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;
+
+  // in some cases, a detached node will return itself as the root instead of a document or
+  //  shadow root object, in which case, we shouldn't try to look further up the host chain
+  var attached = false;
+  if (nodeRoot && nodeRoot !== node) {
+    var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;
+    attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));
+    while (!attached && nodeRootHost) {
+      var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;
+      // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,
+      //  which means we need to get the host's host and check if that parent host is contained
+      //  in (i.e. attached to) the document
+      nodeRoot = getRootNode(nodeRootHost);
+      nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;
+      attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));
+    }
   }
   return attached;
 };
@@ -354,7 +430,11 @@ var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
   return false;
 };
 var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
-  if (node.disabled || isHiddenInput(node) || isHidden(node, options) ||
+  if (node.disabled ||
+  // we must do an inert look up to filter out any elements inside an inert ancestor
+  //  because we're limited in the type of selectors we can use in JSDom (see related
+  //  note related to `candidateSelectors`)
+  isInert(node) || isHiddenInput(node) || isHidden(node, options) ||
   // For a details element with a summary, the summary element gets the focus
   isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
     return false;

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-annotation-output.cjs",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"toggleAnnotation":[64]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-expandable-heading.cjs",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"truncateLabel":[64],"syncLabelText":[64]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-annotation-button.cjs",[[0,"dso-annotation-button",{"identifier":[1]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"subcontent":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"ariaId":[32],"hasFooter":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"animationEnd":[64],"closeOpenSections":[64]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-slide-toggle.cjs",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-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]}]]]], options);
+  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-annotation-output.cjs",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"toggleAnnotation":[64]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"hover":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-expandable-heading.cjs",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1],"editAction":[1,"edit-action"]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"truncateLabel":[64],"syncLabelText":[64]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item.cjs",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-annotation-button.cjs",[[0,"dso-annotation-button",{"identifier":[1]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"subcontent":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"ariaId":[32],"hasFooter":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"animationEnd":[64],"closeOpenSections":[64]}]]],["dso-action-list.cjs",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-slide-toggle.cjs",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32],"getAnimeInstance":[64],"getBodyHeight":[64]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-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]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -1,8 +1,9 @@
 {
   "entries": [
-    "./components/modal/modal.js",
     "./components/accordion/accordion.js",
     "./components/accordion/components/accordion-section.js",
+    "./components/action-list/action-list.js",
+    "./components/action-list/components/action-list-item.js",
     "./components/alert/alert.js",
     "./components/annotation-button/annotation-button.js",
     "./components/annotation-output/annotation-output.js",
@@ -28,6 +29,7 @@
     "./components/map-base-layers/map-base-layers.js",
     "./components/map-controls/map-controls.js",
     "./components/map-overlays/map-overlays.js",
+    "./components/modal/modal.js",
     "./components/ozon-content/ozon-content.js",
     "./components/pagination/pagination.js",
     "./components/progress-bar/progress-bar.js",

package/dist/collection/components/accordion/accordion.js

@@ -129,7 +129,7 @@ export class Accordion {
         "mutable": false,
         "complexType": {
           "original": "AccordionVariant",
-          "resolved": "\"compact\" | \"conclusion\" | \"default\" | undefined",
+          "resolved": "\"compact\" | \"conclusion\" | \"default\" | \"neutral\" | undefined",
           "references": {
             "AccordionVariant": {
               "location": "import",

package/dist/collection/components/accordion/components/accordion-section.css

@@ -43,7 +43,7 @@
 }
 :host .dso-section-handle > button,
 :host .dso-section-handle > a {
-  align-items: center;
+  align-items: flex-start;
   background-color: transparent;
   border: 0;
   cursor: pointer;
@@ -88,10 +88,6 @@
   margin-left: 16px;
 }
 
-:host([open]) .dso-section-body {
-  position: inherit;
-  visibility: inherit;
-}
 :host([open]) .dso-section-handle > button .dso-section-handle-chevron:first-child,
 :host([open]) .dso-section-handle > a .dso-section-handle-chevron:first-child {
   transform: rotate(90deg);
@@ -105,11 +101,6 @@
   background-color: #fff;
   border-top: 0;
   margin-top: -4px;
-  overflow-y: hidden;
-}
-.dso-section-body:not(.dso-animate-ready) {
-  position: absolute;
-  visibility: hidden;
 }
 .dso-section-body .dso-section-body-content {
   padding: 20px 16px 16px;
@@ -245,4 +236,63 @@
 
 :host(.dso-accordion-conclusion.dso-nested-accordion[open]) {
   background-color: #fff;
+}
+
+:host(.dso-accordion-neutral) .dso-section-handle {
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+  margin-block-end: 2px;
+}
+:host(.dso-accordion-neutral) .dso-section-handle a,
+:host(.dso-accordion-neutral) .dso-section-handle button {
+  color: #000;
+  padding: 5px 16px 5px 0;
+}
+:host(.dso-accordion-neutral) .dso-section-handle a:hover, :host(.dso-accordion-neutral) .dso-section-handle a:active, :host(.dso-accordion-neutral) .dso-section-handle a.active,
+:host(.dso-accordion-neutral) .dso-section-handle button:hover,
+:host(.dso-accordion-neutral) .dso-section-handle button:active,
+:host(.dso-accordion-neutral) .dso-section-handle button.active {
+  color: #000;
+}
+:host(.dso-accordion-neutral) .dso-section-handle a .info-icon,
+:host(.dso-accordion-neutral) .dso-section-handle button .info-icon {
+  color: #39870c;
+  margin-inline-start: 8px;
+}
+:host(.dso-accordion-neutral) .dso-section-body {
+  background-color: transparent;
+  border: 1px solid #275937;
+  box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.5);
+  margin-block: 0;
+}
+:host(.dso-accordion-neutral) .dso-section-body.dso-animate-ready {
+  transition: margin-block 260ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+:host(.dso-accordion-neutral) .dso-section-body .dso-section-body-content {
+  padding: 16px 32px 24px 32px;
+}
+
+:host(.dso-accordion-neutral[open]) > .dso-section-handle {
+  background-color: transparant;
+  border-radius: 0;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+:host(.dso-accordion-neutral[open]) > .dso-section-handle a,
+:host(.dso-accordion-neutral[open]) > .dso-section-handle button {
+  color: #000;
+}
+:host(.dso-accordion-neutral[open]) > .dso-section-handle a dso-attachments-counter,
+:host(.dso-accordion-neutral[open]) > .dso-section-handle button dso-attachments-counter {
+  --dso-attachments-counter-color: #fff;
+  --dso-icon: var(--di-paperclip-wit);
+}
+:host(.dso-accordion-neutral[open]) .dso-section-body {
+  margin-block-end: 16px;
+  margin-block-start: 2px;
+}
+
+:host(.dso-accordion-neutral.dso-nested-accordion[open]) .dso-section-body {
+  background-color: #e5e5e5;
 }

package/dist/collection/components/accordion/components/accordion-section.js

@@ -1,6 +1,5 @@
 import { h, forceUpdate, Fragment, Host, } from "@stencil/core";
-import anime from "animejs";
-import debounce from "debounce";
+import { isExpandable } from "../../expandable/expandable.interfaces";
 import { stateMap } from "./accordion-section.interfaces";
 import { Handle, HandleElement, HandleIcon } from "./handles";
 export class AccordionSection {
@@ -14,9 +13,7 @@ export class AccordionSection {
     this.status = undefined;
     this.open = false;
     this.hasNestedSection = false;
-  }
-  toggleOpen() {
-    this.activateAnimation();
+    this.hover = false;
   }
   componentWillLoad() {
     const accordion = this.host.parentElement;
@@ -28,18 +25,6 @@ export class AccordionSection {
         forceUpdate(this.host);
       });
     }
-    this.prepareAnimationResizeObserver();
-  }
-  componentDidLoad() {
-    var _a, _b;
-    const bodyContentElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dso-section-body-content");
-    if (bodyContentElement) {
-      (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(bodyContentElement);
-    }
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   /** Toggle this section.
    * @param scrollIntoView boolean - defaults to true
@@ -56,6 +41,10 @@ export class AccordionSection {
   async scrollSectionIntoView() {
     await this.scrollIntoViewWhenNeeded(false);
   }
+  get isNeutral() {
+    var _a;
+    return ((_a = this.accordionState) === null || _a === void 0 ? void 0 : _a.variant) === "neutral";
+  }
   async scrollIntoViewWhenNeeded(sectionToggled) {
     var _a, _b, _c;
     AccordionSection.scrollCandidate = undefined;
@@ -64,12 +53,13 @@ export class AccordionSection {
     if (!bodyClientRect || !headingClientRect || !this.accordionState) {
       return;
     }
-    const waitForAnimationBeforeScrolling = (state) => {
-      var _a;
-      const sectionBottomOffsetTop = this.host.offsetTop + headingClientRect.height + (this.open ? (_a = this.bodyHeight) !== null && _a !== void 0 ? _a : 0 : 0);
+    const waitForAnimationBeforeScrolling = async (state) => {
+      var _a, _b;
+      this.bodyHeight = await ((_a = this.expandable) === null || _a === void 0 ? void 0 : _a.getBodyHeight());
+      const sectionBottomOffsetTop = this.host.offsetTop + headingClientRect.height + (this.open ? (_b = this.bodyHeight) !== null && _b !== void 0 ? _b : 0 : 0);
       return (sectionToggled && (sectionBottomOffsetTop > document.documentElement.scrollHeight || state.allowMultipleOpen));
     };
-    if (waitForAnimationBeforeScrolling(this.accordionState)) {
+    if (await waitForAnimationBeforeScrolling(this.accordionState)) {
       AccordionSection.scrollCandidate = this.host;
       return;
     }
@@ -92,6 +82,33 @@ export class AccordionSection {
       });
     }
   }
+  setAnimationBehaviour(event, section) {
+    const expandableElement = event.target;
+    if (!(expandableElement instanceof HTMLElement)) {
+      return;
+    }
+    if (isExpandable(expandableElement)) {
+      this.expandable = expandableElement;
+      this.expandable.getAnimeInstance().then((animeInstance) => {
+        if (animeInstance) {
+          animeInstance.update;
+          animeInstance.changeComplete = async () => {
+            if (!section) {
+              return;
+            }
+            const accordion = section.parentElement;
+            if (isAccordion(accordion)) {
+              accordion === null || accordion === void 0 ? void 0 : accordion.animationEnd(section);
+            }
+            if (AccordionSection.scrollCandidate === this.host) {
+              AccordionSection.scrollCandidate = undefined;
+              await this.scrollSectionIntoView();
+            }
+          };
+        }
+      });
+    }
+  }
   async toggle(e) {
     var _a;
     e === null || e === void 0 ? void 0 : e.preventDefault();
@@ -110,78 +127,7 @@ export class AccordionSection {
         ["dso-accordion-" + variant]: true,
         "dso-nested-accordion": this.hasNestedSection,
         "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
-      }, hidden: !variant }, h(Handle, { heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.state && h("span", { class: "sr-only" }, stateMap[this.state]), h("span", null, this.handleTitle), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.status && h("span", { class: "dso-status" }, this.status), h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("div", { class: { "dso-section-body": true, "dso-animate-ready": !!this.animeInstance }, ref: (element) => (this.sectionBody = element), "aria-hidden": this.open ? "false" : "true" }, h("div", { class: "dso-section-body-content" }, h("slot", null)))));
-  }
-  prepareAnimationResizeObserver() {
-    this.resizeObserver = new ResizeObserver(debounce(([entry]) => {
-      // entry.contentRect does not include padding, so we use getBoundingClientRect.
-      const height = entry.target.getBoundingClientRect().height;
-      if (this.bodyHeight !== height) {
-        this.bodyHeight = height;
-        this.instantiateAnimation();
-      }
-    }, 150));
-  }
-  instantiateAnimation() {
-    this.animeInstance = anime({
-      targets: this.sectionBody,
-      height: 4,
-      easing: "cubicBezier(0.4, 0, 0.2, 1)",
-      duration: 260,
-      autoplay: false,
-      direction: "normal",
-      changeComplete: async () => {
-        var _a;
-        (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.animationEnd(this.host);
-        if (AccordionSection.scrollCandidate === this.host) {
-          AccordionSection.scrollCandidate = undefined;
-          await this.scrollSectionIntoView();
-        }
-      },
-      begin: () => {
-        if (this.sectionBody) {
-          if (this.open) {
-            this.sectionBody.style.visibility = "";
-            this.sectionBody.style.position = "";
-            this.sectionBody.style.bottom = "";
-          }
-        }
-      },
-      complete: () => {
-        if (this.sectionBody) {
-          this.sectionBody.style.height = "";
-          if (!this.open) {
-            this.sectionBody.style.visibility = "hidden";
-            this.sectionBody.style.position = "absolute";
-            this.sectionBody.style.bottom = "100%";
-          }
-        }
-      },
-    });
-    if (!this.open) {
-      this.animeInstance.reverse();
-      this.animeInstance.play();
-    }
-    if (this.sectionBody) {
-      this.sectionBody.style.height = "";
-    }
-  }
-  activateAnimation() {
-    if (this.animeInstance) {
-      if (this.animeInstance.progress > 0 && this.animeInstance.progress < 100) {
-        this.animeInstance.reverse();
-      }
-      else {
-        if (this.open) {
-          this.animeInstance.direction = "reverse";
-          this.animeInstance.play();
-        }
-        else {
-          this.animeInstance.direction = "normal";
-          this.animeInstance.play();
-        }
-      }
-    }
+      }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.state && h("span", { class: "sr-only" }, stateMap[this.state]), h("span", null, this.handleTitle, this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.status && h("span", { class: "dso-status" }, this.status), h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onAnimationInstantiated: (e) => this.setAnimationBehaviour(e, this.host) }, h("div", { slot: "expandable-content", class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", null)))));
   }
   static get is() { return "dso-accordion-section"; }
   static get encapsulation() { return "shadow"; }
@@ -349,7 +295,8 @@ export class AccordionSection {
   }
   static get states() {
     return {
-      "hasNestedSection": {}
+      "hasNestedSection": {},
+      "hover": {}
     };
   }
   static get methods() {
@@ -398,12 +345,6 @@ export class AccordionSection {
     };
   }
   static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "toggleOpen"
-      }];
-  }
 }
 function isAccordion(element) {
   return element instanceof HTMLElement && "getState" in element;

package/dist/collection/components/action-list/action-list.css

@@ -0,0 +1,25 @@
+:host {
+  background-color: #e1ecf7;
+  display: block;
+  padding-block: 16px;
+  padding-inline-start: 16px;
+  padding-inline-end: 96px;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+h2 {
+  color: #275937;
+  color: #275937;
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-block: 0 16px;
+}
+
+.dso-action-list-content {
+  padding-inline-start: 80px;
+}

package/dist/collection/components/action-list/action-list.js

@@ -0,0 +1,42 @@
+import { h, Host } from "@stencil/core";
+export class ActionList {
+  constructor() {
+    this.listTitle = undefined;
+  }
+  render() {
+    return (h(Host, null, h("h2", null, this.listTitle), h("div", { class: "dso-action-list-content" }, h("slot", null))));
+  }
+  static get is() { return "dso-action-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["action-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["action-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "listTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "list-title",
+        "reflect": false
+      }
+    };
+  }
+}